Feature: PayTo component

.changeset/silent-turtles-walk.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Feature: New PayTo payment method

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,6 +26,8 @@ const config: StorybookConfig = {
         options: {}
     },
 
+    // public added for msw: https://github.com/mswjs/msw-storybook-addon?tab=readme-ov-file#start-storybook
+    // '../storybook/public'
     staticDirs: ['../storybook/assets'],
 
     viteFinal(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: {
@@ -28,6 +34,7 @@ const preview: Preview = {
         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

@@ -124,6 +124,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/MBWay/MBWay.tsx

@@ -83,6 +83,7 @@ export class MBWayElement extends UIElement<AwaitConfiguration> {
                         this.componentRef = ref;
                     }}
                     {...this.props}
+                    setComponentRef={this.setComponentRef}
                     onChange={this.setState}
                     onSubmit={this.submit}
                     payButton={this.payButton}

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';
 
@@ -17,7 +17,6 @@ function MBWayInput(props: MBWayInputProps) {
     const [status, setStatus] = useState<string>('ready');
 
     this.setStatus = setStatus;
-    this.showValidation = phoneInputRef?.current?.triggerValidation;
 
     const { loadingStatus: prefixLoadingStatus, phonePrefixes } = usePhonePrefixes({ allowedCountries, loadingContext, handleError: props.onError });
 
@@ -28,7 +27,14 @@ 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
+                    setComponentRef={props.setComponentRef}
+                    {...props}
+                    items={phonePrefixes}
+                    ref={phoneInputRef}
+                    onChange={onChange}
+                    data={props.data}
+                />
 
                 {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
             </div>

packages/lib/src/components/MBWay/components/MBWayInput/types.ts

@@ -1,4 +1,4 @@
-import { UIElementProps } from '../../../internal/UIElement/types';
+import { ComponentMethodsRef, UIElementProps } from '../../../internal/UIElement/types';
 
 export interface MBWayInputData {
     telephoneNumber?: string;
@@ -13,6 +13,7 @@ export interface MBWayInputProps extends UIElementProps {
     allowedCountries?: string[];
     requiredFields?: string[];
     phoneNumberKey?: string;
+    setComponentRef: (ref: ComponentMethodsRef) => void;
 }
 
 export interface MBWayDataState {