adding card ssn tests (#2972)

packages/e2e-playwright/fixtures/URL_MAP.ts

@@ -6,8 +6,12 @@ export const URL_MAP = {
         '/iframe.html?globals=&args=amount:0;sessionData.recurringProcessingModel:CardOnFile;sessionData.storePaymentMethodMode:askForConsent&id=dropin-default--auto&viewMode=story',
     dropinSessions_zeroAuthCard_fail:
         '/iframe.html?globals=&args=amount:0;sessionData.recurringProcessingModel:CardOnFile;sessionData.storePaymentMethodMode:askForConsent;sessionData.enableOneClick:!true&id=dropin-default--auto&viewMode=story',
-    /* Card */
+
+    /**
+     * Card
+     */
     card: '/iframe.html?args=&id=cards-card--default&viewMode=story',
+    cardWithSsn: '/iframe.html?globals=&id=cards-card--with-ssn&viewMode=story',
     cardWithAvs: '/iframe.html?args=&globals=&id=cards-card--with-avs&viewMode=story',
     cardWithPartialAvs: '/iframe.html?args=&globals=&id=cards-card--with-partial-avs&viewMode=story',
     cardWithInstallments: '/iframe.html?args=&id=cards-card--with-installments&viewMode=story',

packages/e2e-playwright/mocks/binLookup/binLookup.data.ts

@@ -116,6 +116,21 @@ const kcpMockOptionalDateAndCvcWithPanLengthMock = {
     issuingCountryCode: 'KR'
 };
 
+const socialSecurityNumberRequiredMock = {
+    brands: [
+        {
+            brand: 'visa',
+            cvcPolicy: 'required',
+            enableLuhnCheck: true,
+            showExpiryDate: true,
+            supported: true,
+            showSocialSecurityNumber: true
+        }
+    ],
+    issuingCountryCode: 'BR',
+    requestId: null
+};
+
 export {
     optionalDateAndCvcMock,
     hiddenDateAndCvcMock,
@@ -124,5 +139,6 @@ export {
     optionalDateAndCvcWithPanLengthMock,
     multiLengthMaestroWithPanLengthMock,
     amexWithPanLengthMock,
-    kcpMockOptionalDateAndCvcWithPanLengthMock
+    kcpMockOptionalDateAndCvcWithPanLengthMock,
+    socialSecurityNumberRequiredMock
 };

packages/e2e-playwright/models/card-ssn.ts

@@ -6,12 +6,20 @@ class CardWithSSN extends Card {
 
     constructor(page: Page) {
         super(page);
-        this.ssnField = this.rootElement.locator('.adyen-checkout__field--socialSecurityNumber'); // Holder
+        this.ssnField = this.rootElement.locator('.adyen-checkout__field--socialSecurityNumber');
     }
 
     get ssnInput() {
         return this.ssnField.getByRole('textbox', { name: /CPF\/CNPJ/i });
     }
+
+    get ssnInputErrorElement() {
+        return this.ssnField.getByText('Enter a valid CPF/CNPJ number');
+    }
+
+    async typeSsn(ssn: string) {
+        await this.ssnInput.fill(ssn);
+    }
 }
 
 export { CardWithSSN };

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

@@ -0,0 +1,61 @@
+import { expect, test } from '../../../../fixtures/card.fixture';
+import { PAYMENT_RESULT, REGULAR_TEST_CARD, TEST_CPF_VALUE, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../../../utils/constants';
+import { binLookupMock } from '../../../../mocks/binLookup/binLookup.mock';
+import { socialSecurityNumberRequiredMock } from '../../../../mocks/binLookup/binLookup.data';
+import { URL_MAP } from '../../../../fixtures/URL_MAP';
+
+test.describe('Card payment with Social Security Number ', () => {
+    test.describe('with "socialSecurityNumberMode" set to "show"', () => {
+        test('should make a payment with a valid SSN', async ({ cardWithSSN }) => {
+            await cardWithSSN.goto(URL_MAP.cardWithSsn);
+
+            await cardWithSSN.typeCardNumber(REGULAR_TEST_CARD);
+            await cardWithSSN.typeCvc(TEST_CVC_VALUE);
+            await cardWithSSN.typeExpiryDate(TEST_DATE_VALUE);
+            await cardWithSSN.typeSsn(TEST_CPF_VALUE);
+            await cardWithSSN.pay();
+
+            await expect(cardWithSSN.paymentResult).toContainText(PAYMENT_RESULT.authorised);
+        });
+
+        test('should display an error if SSN is not valid', async ({ cardWithSSN }) => {
+            await cardWithSSN.goto(URL_MAP.cardWithSsn);
+
+            await cardWithSSN.typeCardNumber(REGULAR_TEST_CARD);
+            await cardWithSSN.typeCvc(TEST_CVC_VALUE);
+            await cardWithSSN.typeExpiryDate(TEST_DATE_VALUE);
+            await cardWithSSN.typeSsn('100200300');
+            await cardWithSSN.pay();
+
+            await expect(cardWithSSN.ssnInputErrorElement).toBeVisible();
+        });
+    });
+
+    test.describe('with binLookup forcing the field to be shown ("auto" mode)', () => {
+        test('should display the SSN field once the card is entered', async ({ page, cardWithSSN }) => {
+            await binLookupMock(page, socialSecurityNumberRequiredMock);
+            await cardWithSSN.goto(URL_MAP.card);
+
+            await expect(cardWithSSN.ssnInput).not.toBeVisible();
+
+            await cardWithSSN.typeCardNumber(REGULAR_TEST_CARD);
+            await cardWithSSN.typeCvc(TEST_CVC_VALUE);
+            await cardWithSSN.typeExpiryDate(TEST_DATE_VALUE);
+
+            await expect(cardWithSSN.ssnInput).toBeVisible();
+        });
+
+        test('should perform SSN validation if the field is displayed', async ({ page, cardWithSSN }) => {
+            await binLookupMock(page, socialSecurityNumberRequiredMock);
+            await cardWithSSN.goto(URL_MAP.card);
+
+            await cardWithSSN.typeCardNumber(REGULAR_TEST_CARD);
+            await cardWithSSN.typeCvc(TEST_CVC_VALUE);
+            await cardWithSSN.typeExpiryDate(TEST_DATE_VALUE);
+
+            await cardWithSSN.pay();
+
+            await expect(cardWithSSN.ssnInputErrorElement).toBeVisible();
+        });
+    });
+});

packages/lib/storybook/stories/cards/Card.stories.tsx

@@ -50,6 +50,19 @@ export const Default: CardStory = {
     }
 };
 
+export const WithSSN: CardStory = {
+    render: createCardComponent,
+    args: {
+        countryCode: 'BR',
+        componentConfiguration: {
+            _disableClickToPay: true,
+            configuration: {
+                socialSecurityNumberMode: 'show'
+            }
+        }
+    }
+};
+
 export const WithAVS: CardStory = {
     render: createCardComponent,
     args: {