Fix/stored card selection in storybook (#3395)

* Change how Dropin story selects a storedCard, after changes to the API response

* Change how we set the alt attr on a storedCard image

* Ensure pmLabel is matched to the display name (which is the value for the alt attr)

* Ensure brand is mapped to display name for the alt attr

* In e2e tests - find storedCard based on brand name

* Added comment

Author: sponglord

.changeset/breezy-fans-make.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Change how Dropin story selects a storedCard, and how we set the alt attr on a storedCard image, after changes to the API response.

packages/e2e-playwright/models/dropin.ts

@@ -1,5 +1,6 @@
 import { Locator, Page } from '@playwright/test';
 import { Base } from './base';
+import { getFullBrandName } from '../../lib/src/components/Card/components/CardInput/utils';
 
 class PaymentMethodHeader {
     readonly rootElement: Locator;
@@ -32,6 +33,7 @@ class Dropin extends Base {
     readonly payButton: Locator;
 
     protected _paymentMethods: Array<{ name: string; type: string }>;
+    protected _storedPaymentMethods: Array<{ name: string; type: string; brand: string }>;
 
     constructor(
         public readonly page: Page,
@@ -55,7 +57,17 @@ class Dropin extends Base {
         // Wait for payment methods from the payments call
         const responsePromise = this.page.waitForResponse(response => response.url().includes('paymentMethods') && response.status() === 200);
         const response = await responsePromise;
-        this._paymentMethods = (await response.json()).paymentMethods.map(({ name, type }: { name: string; type: string }) => ({ name, type }));
+        this._paymentMethods = (await response.json()).paymentMethods.map(({ name, type }: { name: string; type: string }) => ({
+            name,
+            type
+        }));
+        this._storedPaymentMethods = (await response.json()).storedPaymentMethods.map(
+            ({ name, type, brand }: { name: string; type: string; brand: string }) => ({
+                name,
+                type,
+                brand
+            })
+        );
         await this.isComponentVisible();
     }
 
@@ -96,7 +108,12 @@ class Dropin extends Base {
 
     // Stored payment methods
     async selectFirstStoredPaymentMethod(pmType: string, lastFour?: string): Promise<{ paymentMethodDetailsLocator: Locator }> {
-        const pmLabel = this.paymentMethods.find((pm: { type: string }) => pm.type === pmType)?.name;
+        /**
+         * Find storedPM based on brand/txvariant, and then map this to the "display name", which is what will have been used for the image's alt attr.
+         * (It is the image's alt attr that we use below, to locate the element)
+         */
+        let pmLabel = this.storedPaymentMethods.find((pm: { brand: string }) => pm.brand === pmType)?.brand;
+        pmLabel = getFullBrandName(pmLabel);
 
         const paymentMethodHeaderLocator = await this.page
             .locator('.adyen-checkout__payment-method')
@@ -122,6 +139,10 @@ class Dropin extends Base {
         return this._paymentMethods;
     }
 
+    get storedPaymentMethods() {
+        return this._storedPaymentMethods;
+    }
+
     get paymentResult() {
         return this.page.locator('.adyen-checkout__status');
     }

packages/e2e-playwright/models/dropinWithSession.ts

@@ -7,11 +7,20 @@ class DropinWithSession extends Dropin {
         const regex = /\/checkoutshopper\/.*\/sessions/;
         const responsePromise = this.page.waitForResponse(response => regex.test(response.url()) && response.status() === 200);
         const response = await responsePromise;
+
         this._paymentMethods = (await response.json()).paymentMethods.paymentMethods.map(({ name, type }: { name: string; type: string }) => ({
             name,
             type
         }));
 
+        this._storedPaymentMethods = (await response.json()).paymentMethods.storedPaymentMethods.map(
+            ({ name, type, brand }: { name: string; type: string; brand: string }) => ({
+                name,
+                type,
+                brand
+            })
+        );
+
         await this.isComponentVisible();
     }
 }

packages/e2e-playwright/tests/e2e/dropin/storedCard/stored-card-amex.spec.ts

@@ -7,7 +7,7 @@ import { Card } from '../../../../models/card';
 test.describe('Stored Amex card - cvc required', () => {
     test('#1 Can fill out the cvc fields in the stored card and make a successful payment', async ({ dropinWithSession, page }) => {
         await dropinWithSession.goto(URL_MAP.dropinWithSession);
-        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('American Express', '0002');
+        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('amex', '0002');
 
         const card = new Card(page, paymentMethodDetailsLocator);
 
@@ -19,7 +19,7 @@ test.describe('Stored Amex card - cvc required', () => {
 
     test('#2 Pressing pay without filling the cvc should generate a translated error ("empty")', async ({ dropinWithSession, page }) => {
         await dropinWithSession.goto(URL_MAP.dropinWithSession);
-        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('American Express', '0002');
+        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('amex', '0002');
 
         const card = new Card(page, paymentMethodDetailsLocator);
 
@@ -38,7 +38,7 @@ test.describe('Stored Amex card - cvc required', () => {
             }
         });
         await dropinWithSession.goto(url);
-        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('American Express', '0002');
+        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('amex', '0002');
 
         const card = new Card(page, paymentMethodDetailsLocator);
 

packages/e2e-playwright/tests/e2e/dropin/storedCard/stored-card-mc.spec.ts

@@ -7,7 +7,7 @@ import { Card } from '../../../../models/card';
 test.describe('Stored master card - cvc required', () => {
     test('#1 Can fill out the cvc fields in the stored card and make a successful payment', async ({ dropinWithSession, page }) => {
         await dropinWithSession.goto(URL_MAP.dropinWithSession);
-        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('MasterCard', '4444');
+        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('mc', '4444');
 
         const card = new Card(page, paymentMethodDetailsLocator);
 
@@ -19,7 +19,7 @@ test.describe('Stored master card - cvc required', () => {
 
     test('#2 Pressing pay without filling the cvc should generate a translated error ("empty")', async ({ dropinWithSession, page }) => {
         await dropinWithSession.goto(URL_MAP.dropinWithSession);
-        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('MasterCard', '4444');
+        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('mc', '4444');
 
         const card = new Card(page, paymentMethodDetailsLocator);
 
@@ -38,7 +38,7 @@ test.describe('Stored master card - cvc required', () => {
             }
         });
         await dropinWithSession.goto(url);
-        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('MasterCard', '4444');
+        const { paymentMethodDetailsLocator } = await dropinWithSession.selectFirstStoredPaymentMethod('mc', '4444');
 
         const card = new Card(page, paymentMethodDetailsLocator);
 

packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodItem/PaymentMethodItem.tsx

@@ -10,6 +10,7 @@ import { BRAND_ICON_UI_EXCLUSION_LIST } from '../../../../internal/SecuredFields
 import PaymentMethodName from '../PaymentMethodName';
 import { useCoreContext } from '../../../../../core/Context/CoreProvider';
 import ExpandButton from '../../../../internal/ExpandButton';
+import { getFullBrandName } from '../../../../Card/components/CardInput/utils';
 
 export interface PaymentMethodItemProps {
     paymentMethod: UIElement;
@@ -96,7 +97,7 @@ class PaymentMethodItem extends Component<PaymentMethodItemProps> {
                     >
                         <PaymentMethodIcon
                             // Only add alt attribute to storedPaymentMethods (to avoid SR reading the PM name twice)
-                            {...(paymentMethod.props.oneClick && { altDescription: paymentMethod.props.name })}
+                            {...(paymentMethod.props.oneClick && { altDescription: getFullBrandName(paymentMethod.props.brand) })}
                             type={paymentMethod.type}
                             src={paymentMethod.icon}
                         />