Feature: PayTo component

packages/lib/.size-limit.cjs

@@ -5,41 +5,41 @@ module.exports = [
     {
         name: 'UMD',
         path: 'dist/umd/adyen.js',
-        limit: '110 KB',
-        running: false,
+        limit: '120 KB',
+        running: false
     },
     /**
      * 'auto' bundle with all Components included, excluding Languages
      */
     {
         name: 'Auto',
         path: 'auto/auto.js',
-        import: "{ AdyenCheckout, Dropin }",
-        limit: '110 KB',
-        running: false,
+        import: '{ AdyenCheckout, Dropin }',
+        limit: '120 KB',
+        running: false
     },
     /**
      * ES modules (tree-shake)
      */
     {
         name: 'ESM - Core',
         path: 'dist/es/index.js',
-        import: "{ AdyenCheckout }",
+        import: '{ AdyenCheckout }',
         limit: '30 KB',
-        running: false,
+        running: false
     },
     {
         name: 'ESM - Core + Card',
         path: 'dist/es/index.js',
-        import: "{ AdyenCheckout, Card }",
+        import: '{ AdyenCheckout, Card }',
         limit: '65 KB',
-        running: false,
+        running: false
     },
     {
         name: 'ESM - Core + Dropin with Card',
         path: 'dist/es/index.js',
-        import: "{ AdyenCheckout, Dropin, Card }",
+        import: '{ AdyenCheckout, Dropin, Card }',
         limit: '70 KB',
-        running: false,
-    },
-]
+        running: false
+    }
+];

packages/lib/.storybook/main.ts

@@ -26,7 +26,8 @@ const config: StorybookConfig = {
         options: {}
     },
 
-    staticDirs: ['../storybook/assets'],
+    // public added for msw: https://github.com/mswjs/msw-storybook-addon?tab=readme-ov-file#start-storybook
+    staticDirs: ['../storybook/assets', '../storybook/public'],
 
     viteFinal(config) {
         return mergeConfig(config, {

packages/lib/.storybook/preview.tsx

@@ -1,6 +1,12 @@
 import './main.css';
 import { Preview } from '@storybook/preact';
 import { DEFAULT_COUNTRY_CODE, DEFAULT_SHOPPER_LOCALE, DEFAULT_AMOUNT_VALUE, SHOPPER_LOCALES } from '../storybook/config/commonConfig';
+import { initialize as initializeMSW, mswLoader } from 'msw-storybook-addon';
+
+// from the docs: https://github.com/mswjs/msw-storybook-addon
+initializeMSW({
+    onUnhandledRequest: 'bypass'
+});
 
 const preview: Preview = {
     argTypes: {
@@ -27,7 +33,8 @@ const preview: Preview = {
         shopperLocale: DEFAULT_SHOPPER_LOCALE,
         amount: DEFAULT_AMOUNT_VALUE,
         showPayButton: true
-    }
+    },
+    loaders: [mswLoader]
 };
 
 export default preview;

packages/lib/config/setupTests.ts

@@ -10,5 +10,6 @@ import './testMocks/analyticsMock';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'whatwg-fetch';
 import './testMocks/srPanelMock';
+import './testMocks/commonCorePropsMock';
 
 configure({ adapter: new Adapter() });

packages/lib/config/testMocks/commonCorePropsMock.ts

@@ -0,0 +1,6 @@
+global.commonCoreProps = {
+    clientKey: 'mock_clientKey',
+    loadingContext: 'https://checkoutshopper-test.adyen.com/checkoutshopper/',
+    i18n: global.i18n,
+    modules: { analytics: global.analytics, resources: global.resources, srPanel: global.srPanel }
+};

packages/lib/package.json

@@ -123,6 +123,7 @@
     "jest-mock-extended": "3.0.7",
     "lint-staged": "15.3.0",
     "msw": "^2.6.4",
+    "msw-storybook-addon": "^2.0.4",
     "postcss": "8.4.49",
     "rollup": "4.29.1",
     "rollup-plugin-dts": "6.1.1",
@@ -154,5 +155,10 @@
     "*.{js,jsx,ts,tsx}": "eslint",
     "*.{scss,css}": "stylelint",
     "*.{js,jsx,ts,tsx,html,md}": "prettier --write"
+  },
+  "msw": {
+    "workerDirectory": [
+      "storybook/public"
+    ]
   }
-}
+}

packages/lib/src/components/Ach/components/AchInput/AchInput.tsx

@@ -128,6 +128,8 @@ function AchInput(props: ACHInputProps) {
         props.onChange({ data, isValid, storePaymentMethod });
     }, [data, valid, errors, storePaymentMethod]);
 
+    console.log('ach props 2', props);
+
     return (
         <div className="adyen-checkout__ach">
             <FormInstruction />

packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx

@@ -3,7 +3,7 @@ import { useState, useRef } from 'preact/hooks';
 import { useCoreContext } from '../../../../core/Context/CoreProvider';
 import { MBWayInputProps } from './types';
 import './MBWayInput.scss';
-import PhoneInput from '../../../internal/PhoneInput';
+import PhoneInputForm from '../../../internal/PhoneInput';
 import LoadingWrapper from '../../../internal/LoadingWrapper';
 import usePhonePrefixes from '../../../internal/PhoneInput/usePhonePrefixes';
 
@@ -28,7 +28,7 @@ function MBWayInput(props: MBWayInputProps) {
     return (
         <LoadingWrapper status={prefixLoadingStatus}>
             <div className="adyen-checkout__mb-way">
-                <PhoneInput {...props} items={phonePrefixes} ref={phoneInputRef} onChange={onChange} data={props.data} />
+                <PhoneInputForm {...props} items={phonePrefixes} ref={phoneInputRef} onChange={onChange} data={props.data} />
 
                 {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
             </div>