POC: Tree shaking with new operator

.gitignore

@@ -3,6 +3,10 @@ dist
 coverage
 storybook-static
 
+# Playwright reports
+packages/playground/playwright-report/
+
+
 *.log*
 .env
 .env*
@@ -32,4 +36,4 @@ Vagrantfile
 
 # Certifictes
 cert
-*.pem
+*.pem

packages/e2e-playwright/app/src/pages/ANCV/ANCV.js

@@ -1,5 +1,5 @@
-import AdyenCheckout from '@adyen/adyen-web';
-import '@adyen/adyen-web/dist/es/adyen.css';
+import { AdyenCheckout, ANCV, Card } from '@adyen/adyen-web';
+import '@adyen/adyen-web/styles/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError, handleOrderRequest, showAuthorised } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
@@ -38,7 +38,7 @@ const initCheckout = async () => {
         onOrderCreated: data => {
             console.log('=== onOrderCreated ===', data);
 
-            window.paymentMethod = checkout.create('card').mount('.ancv-field');
+            window.paymentMethod = new Card({ core: checkout }).mount('.ancv-field');
         },
         onPaymentCompleted: () => {
             showAuthorised();
@@ -52,7 +52,7 @@ const initCheckout = async () => {
         // ...window.mainConfiguration
     });
 
-    window.paymentMethod = checkout.create('ancv').mount('.ancv-field');
+    window.paymentMethod = new ANCV({ core: checkout }).mount('.ancv-field');
 
     document.querySelector('#ancv-pay-button').addEventListener('click', () => {
         window.paymentMethod.submit();

packages/e2e-playwright/app/src/pages/Cards/Cards.js

@@ -1,5 +1,5 @@
-import AdyenCheckout from '@adyen/adyen-web';
-import '@adyen/adyen-web/dist/es/adyen.css';
+import { AdyenCheckout, Card } from '@adyen/adyen-web';
+import '@adyen/adyen-web/styles/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
@@ -20,30 +20,29 @@ const initCheckout = async () => {
     });
 
     // Credit card with installments
-    window.card = checkout
-        .create('card', {
-            brands: ['mc', 'visa', 'amex', 'maestro', 'bcmc'],
-            onChange: state => {
-                /**
-                 * Needed now that, for v5, we enhance the securedFields state.errors object with a rootNode prop
-                 *  - Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
-                 *
-                 *  AND, for some reason, if you place this onChange function in expiryDate.clientScripts.js it doesn't always get read.
-                 *  It'll work when it's part of a small batch but if part of the full test suite it gets ignored - so the tests that rely on
-                 *  window.mappedStateErrors fail
-                 */
-                if (!!Object.keys(state.errors).length) {
-                    // Replace any rootNode values in the objects in state.errors with an empty string
-                    const nuErrors = Object.entries(state.errors).reduce((acc, [fieldType, error]) => {
-                        acc[fieldType] = error ? { ...error, rootNode: '' } : error;
-                        return acc;
-                    }, {});
-                    window.mappedStateErrors = nuErrors;
-                }
-            },
-            ...window.cardConfig
-        })
-        .mount('.card-field');
+    window.card = new Card({
+        core: checkout,
+        brands: ['mc', 'visa', 'amex', 'maestro', 'bcmc'],
+        onChange: state => {
+            /**
+             * Needed now that, for v5, we enhance the securedFields state.errors object with a rootNode prop
+             *  - Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
+             *
+             *  AND, for some reason, if you place this onChange function in expiryDate.clientScripts.js it doesn't always get read.
+             *  It'll work when it's part of a small batch but if part of the full test suite it gets ignored - so the tests that rely on
+             *  window.mappedStateErrors fail
+             */
+            if (!!Object.keys(state.errors).length) {
+                // Replace any rootNode values in the objects in state.errors with an empty string
+                const nuErrors = Object.entries(state.errors).reduce((acc, [fieldType, error]) => {
+                    acc[fieldType] = error ? { ...error, rootNode: '' } : error;
+                    return acc;
+                }, {});
+                window.mappedStateErrors = nuErrors;
+            }
+        },
+        ...window.cardConfig
+    }).mount('.card-field');
 };
 
 initCheckout();

packages/e2e-playwright/app/src/pages/CustomCards/CustomCards.js

@@ -1,5 +1,5 @@
-import AdyenCheckout from '@adyen/adyen-web';
-import '@adyen/adyen-web/dist/es/adyen.css';
+import { AdyenCheckout, CustomCard } from '@adyen/adyen-web';
+import '@adyen/adyen-web/styles/adyen.css';
 import { handleSubmit, handleAdditionalDetails } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
@@ -20,18 +20,17 @@ const initCheckout = async () => {
         ...window.mainConfiguration
     });
 
-    window.securedFields = checkout
-        .create('customcard', {
-            type: 'card',
-            brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'cartebancaire'],
-            onConfigSuccess,
-            onBrand,
-            onFocus: setFocus,
-            onBinLookup,
-            onChange,
-            ...window.cardConfig
-        })
-        .mount('.secured-fields');
+    window.securedFields = new CustomCard({
+        core: checkout,
+        type: 'card',
+        brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'cartebancaire'],
+        onConfigSuccess,
+        onBrand,
+        onFocus: setFocus,
+        onBinLookup,
+        onChange,
+        ...window.cardConfig
+    }).mount('.secured-fields');
 
     createPayButton('.secured-fields', window.securedFields, 'securedfields');
 

packages/e2e-playwright/app/src/pages/IssuerLists/IssuerLists.js

@@ -1,5 +1,5 @@
-import AdyenCheckout from '@adyen/adyen-web';
-import '@adyen/adyen-web/dist/es/adyen.css';
+import { AdyenCheckout, Ideal } from '@adyen/adyen-web';
+import '@adyen/adyen-web/styles/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
@@ -24,16 +24,11 @@ const initCheckout = async () => {
         showPayButton: true,
         onSubmit: handleSubmit,
         onAdditionalDetails: handleAdditionalDetails,
-        onError: handleError,
-        paymentMethodsConfiguration: {
-            ideal: {
-                highlightedIssuers: ['1121', '1154', '1153']
-            }
-        }
+        onError: handleError
         // ...window.mainConfiguration
     });
 
-    window.ideal = checkout.create('ideal').mount('.ideal-field');
+    window.ideal = new Ideal({ core: checkout, highlightedIssuers: ['1121', '1154', '1153'] }).mount('.ideal-field');
 };
 
 initCheckout();

packages/e2e-playwright/package.json

@@ -18,8 +18,8 @@
     "html-webpack-plugin": "5.5.1",
     "sass-loader": "^10.2.0",
     "style-loader": "^2.0.0",
-    "ts-loader": "^8.1.0",
-    "typescript": "^4.4.4",
+    "ts-loader": "9.4.4",
+    "typescript": "5.2.2",
     "webpack": "5.81.0",
     "webpack-cli": "5.0.2",
     "webpack-dev-server": "4.13.3"

packages/e2e-playwright/playwright.config.ts

@@ -9,7 +9,7 @@ dotenv.config({ path: path.resolve('../../', '.env') });
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-    testDir: './tests',
+    testDir: './tests/',
     /* Maximum time one test can run for. */
     timeout: 10 * 2000,
     expect: {
@@ -29,7 +29,7 @@ const config: PlaywrightTestConfig = {
     workers: process.env.CI ? 1 : 1,
 
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-    reporter: [['html', { open: 'never' }]],
+    reporter: [['html', { open: 'never' }], ['list']],
 
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {

packages/e2e-playwright/tests/card/card.avs.spec.ts

@@ -3,18 +3,20 @@ import { REGULAR_TEST_CARD } from '../utils/constants';
 import { binLookupMock } from '../../mocks/binLookup/binLookup.mock';
 import { optionalDateAndCvcMock } from '../../mocks/binLookup/binLookup.data';
 
-test('should move the focus to the address field since expiryDate & cvc are optional', async ({ cardAvsPage }) => {
-    const { cardWithAvs, page } = cardAvsPage;
+test.describe('Card - AVS', () => {
+    test('should move the focus to the address field since expiryDate & cvc are optional', async ({ cardAvsPage }) => {
+        const { cardWithAvs, page } = cardAvsPage;
 
-    await binLookupMock(page, optionalDateAndCvcMock);
+        await binLookupMock(page, optionalDateAndCvcMock);
 
-    await cardWithAvs.isComponentVisible();
+        await cardWithAvs.isComponentVisible();
 
-    const firstDigits = REGULAR_TEST_CARD.substring(0, 15);
-    const lastDigits = REGULAR_TEST_CARD.substring(15, 16);
+        const firstDigits = REGULAR_TEST_CARD.substring(0, 15);
+        const lastDigits = REGULAR_TEST_CARD.substring(15, 16);
 
-    await cardWithAvs.typeCardNumber(firstDigits);
-    await cardWithAvs.typeCardNumber(lastDigits);
+        await cardWithAvs.typeCardNumber(firstDigits);
+        await cardWithAvs.typeCardNumber(lastDigits);
 
-    await expect(cardWithAvs.billingAddress.addressInput).toBeFocused();
+        await expect(cardWithAvs.billingAddress.addressInput).toBeFocused();
+    });
 });

packages/e2e-playwright/tests/card/card.contextualTexts.spec.ts

@@ -7,96 +7,98 @@ const CVC_CONTEXTUAL_TEXT_3_DIGITS = LANG['creditCard.securityCode.contextualTex
 const CVC_CONTEXTUAL_TEXT_4_DIGITS = LANG['creditCard.securityCode.contextualText.4digits'];
 const CVC_ERROR = LANG['error.va.sf-cc-cvc.01'];
 
-test('#1 Should inspect the card inputs and see they have contextual elements set', async ({ cardPage }) => {
-    const { card, page } = cardPage;
+test.describe('Card - Contextual text', () => {
+    test('#1 Should inspect the card inputs and see they have contextual elements set', async ({ cardPage }) => {
+        const { card, page } = cardPage;
 
-    await card.isComponentVisible();
+        await card.isComponentVisible();
 
-    // checkout expiryDate element
-    await expect(card.expiryDateContextualElement).toHaveText(EXPIRY_DATE_CONTEXTUAL_TEXT);
-    const expiryDateAriaHidden = await card.expiryDateContextualElement.getAttribute('aria-hidden');
-    await expect(expiryDateAriaHidden).toEqual('true');
+        // checkout expiryDate element
+        await expect(card.expiryDateContextualElement).toHaveText(EXPIRY_DATE_CONTEXTUAL_TEXT);
+        const expiryDateAriaHidden = await card.expiryDateContextualElement.getAttribute('aria-hidden');
+        await expect(expiryDateAriaHidden).toEqual('true');
 
-    // iframe expiryDate element
-    await expect(card.expiryDateIframeContextualElement).toHaveText(EXPIRY_DATE_CONTEXTUAL_TEXT);
+        // iframe expiryDate element
+        await expect(card.expiryDateIframeContextualElement).toHaveText(EXPIRY_DATE_CONTEXTUAL_TEXT);
 
-    // checkout security code contextual element
-    await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
-    const cvcAriaHidden = await card.cvcContextualElement.getAttribute('aria-hidden');
-    await expect(cvcAriaHidden).toEqual('true');
+        // checkout security code contextual element
+        await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+        const cvcAriaHidden = await card.cvcContextualElement.getAttribute('aria-hidden');
+        await expect(cvcAriaHidden).toEqual('true');
 
-    // iframe security code element
-    await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+        // iframe security code element
+        await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
 
-    // Type amex number and see the contextual element change in the CVC field
-    await card.typeCardNumber(AMEX_CARD);
+        // Type amex number and see the contextual element change in the CVC field
+        await card.typeCardNumber(AMEX_CARD);
 
-    await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_4_DIGITS);
-    await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_4_DIGITS);
+        await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_4_DIGITS);
+        await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_4_DIGITS);
 
-    // Delete the card number and see the contextual element reset in the CVC field
-    await card.deleteCardNumber();
+        // Delete the card number and see the contextual element reset in the CVC field
+        await card.deleteCardNumber();
 
-    await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
-    await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
-});
+        await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+        await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+    });
 
-test('#2 Should inspect the cvc input for a contextual text set, then it should be replaced by an error, then reset', async ({ cardPage }) => {
-    const { card, page } = cardPage;
+    test('#2 Should inspect the cvc input for a contextual text set, then it should be replaced by an error, then reset', async ({ cardPage }) => {
+        const { card, page } = cardPage;
 
-    await card.isComponentVisible();
+        await card.isComponentVisible();
 
-    // checkout security code contextual element
-    await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
-    let cvcAriaHidden = await card.cvcContextualElement.getAttribute('aria-hidden');
-    await expect(cvcAriaHidden).toEqual('true');
+        // checkout security code contextual element
+        await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+        let cvcAriaHidden = await card.cvcContextualElement.getAttribute('aria-hidden');
+        await expect(cvcAriaHidden).toEqual('true');
 
-    // error element hidden
-    await expect(card.cvcErrorElement).not.toBeVisible();
+        // error element hidden
+        await expect(card.cvcErrorElement).not.toBeVisible();
 
-    // iframe security code contextual element
-    await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+        // iframe security code contextual element
+        await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
 
-    // press pay to generate errors
-    await cardPage.pay();
+        // press pay to generate errors
+        await cardPage.pay();
 
-    // checkout security code error element
-    await expect(card.cvcErrorElement).toBeVisible();
-    await expect(card.cvcErrorElement).toHaveText(CVC_ERROR);
-    cvcAriaHidden = await card.cvcErrorElement.getAttribute('aria-hidden');
-    await expect(cvcAriaHidden).toEqual('true');
+        // checkout security code error element
+        await expect(card.cvcErrorElement).toBeVisible();
+        await expect(card.cvcErrorElement).toHaveText(CVC_ERROR);
+        cvcAriaHidden = await card.cvcErrorElement.getAttribute('aria-hidden');
+        await expect(cvcAriaHidden).toEqual('true');
 
-    // contextual element being hidden
-    await expect(card.cvcContextualElement).not.toBeVisible();
+        // contextual element being hidden
+        await expect(card.cvcContextualElement).not.toBeVisible();
 
-    // iframe contextual (error) element
-    await expect(card.cvcIframeContextualElement).toHaveText(CVC_ERROR);
+        // iframe contextual (error) element
+        await expect(card.cvcIframeContextualElement).toHaveText(CVC_ERROR);
 
-    // Allow default focusing after validation to happen
-    await page.waitForTimeout(1000);
+        // Allow default focusing after validation to happen
+        await page.waitForTimeout(1000);
 
-    // type
-    await card.typeCvc('737');
+        // type
+        await card.typeCvc('737');
 
-    // reset
-    await expect(card.cvcContextualElement).toBeVisible();
-    await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
-    // error element hidden
-    await expect(card.cvcErrorElement).not.toBeVisible();
+        // reset
+        await expect(card.cvcContextualElement).toBeVisible();
+        await expect(card.cvcContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+        // error element hidden
+        await expect(card.cvcErrorElement).not.toBeVisible();
 
-    await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
-});
+        await expect(card.cvcIframeContextualElement).toHaveText(CVC_CONTEXTUAL_TEXT_3_DIGITS);
+    });
 
-test('#3 Should find no contextualElements because the config says to not show them', async ({ cardNoContextualElementPage }) => {
-    const { card, page } = cardNoContextualElementPage;
+    test('#3 Should find no contextualElements because the config says to not show them', async ({ cardNoContextualElementPage }) => {
+        const { card, page } = cardNoContextualElementPage;
 
-    await card.isComponentVisible();
+        await card.isComponentVisible();
 
-    // checkout contextual elements not present
-    await expect(card.expiryDateContextualElement).not.toBeVisible();
-    await expect(card.cvcContextualElement).not.toBeVisible();
+        // checkout contextual elements not present
+        await expect(card.expiryDateContextualElement).not.toBeVisible();
+        await expect(card.cvcContextualElement).not.toBeVisible();
 
-    // iframe contextual elements - present but without text
-    await expect(card.expiryDateIframeContextualElement).toHaveText('');
-    await expect(card.cvcIframeContextualElement).toHaveText('');
+        // iframe contextual elements - present but without text
+        await expect(card.expiryDateIframeContextualElement).toHaveText('');
+        await expect(card.cvcIframeContextualElement).toHaveText('');
+    });
 });