Fixes regression and allows Enter key to validate/submit (#2837)

* Fixes regression and allows Enter key to validate/submit

* Expanding e2e tests

* Removing CardInput default props that are actually only Card level props

* No longer any need to exclude onEnterKeyPressed from Card default props

* Adding conditional chaining operator now that onBinLookup is not defined by default

Author: sponglord

.changeset/cool-comics-own.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Fixes regression and allows Enter key to validate/submit

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

@@ -1,11 +1,15 @@
 import { test, expect } from '../../pages/cards/card.fixture';
 import { REGULAR_TEST_CARD, TEST_CVC_VALUE, TEST_DATE_VALUE } from '../utils/constants';
 import LANG from '../../../server/translations/en-US.json';
+import { pressEnter } from '../utils/keyboard';
 
 const PAN_ERROR_NOT_VALID = LANG['cc.num.902'];
 const PAN_ERROR_EMPTY = LANG['cc.num.900'];
 const PAN_ERROR_NOT_COMPLETE = LANG['cc.num.901'];
 
+const EXPIRY_DATE_ERROR_EMPTY = LANG['cc.dat.910'];
+const CVC_ERROR_EMPTY = LANG['cc.cvc.920'];
+
 test.describe('Card - Standard flow', () => {
     test('#1 Should fill in card fields and complete the payment', async ({ cardPage }) => {
         const { card, page } = cardPage;
@@ -49,4 +53,35 @@ test.describe('Card - Standard flow', () => {
         await expect(card.cardNumberErrorElement).toBeVisible();
         await expect(card.cardNumberErrorElement).toHaveText(PAN_ERROR_NOT_COMPLETE);
     });
+
+    test('#5 Filling PAN then pressing Enter will trigger validation ', async ({ cardPage }) => {
+        const { card, page } = cardPage;
+
+        await card.isComponentVisible();
+        await card.typeCardNumber(REGULAR_TEST_CARD);
+
+        await pressEnter(page);
+
+        await page.waitForTimeout(500); // wait for UI to show errors
+
+        await expect(card.expiryDateErrorElement).toBeVisible();
+        await expect(card.expiryDateErrorElement).toHaveText(EXPIRY_DATE_ERROR_EMPTY);
+
+        await expect(card.cvcErrorElement).toBeVisible();
+        await expect(card.cvcErrorElement).toHaveText(CVC_ERROR_EMPTY);
+    });
+
+    test('#6 Filling in card fields then pressing Enter will trigger submission ', async ({ cardPage }) => {
+        const { card, page } = cardPage;
+
+        await card.isComponentVisible();
+
+        await card.typeCardNumber(REGULAR_TEST_CARD);
+        await card.typeCvc(TEST_CVC_VALUE);
+        await card.typeExpiryDate(TEST_DATE_VALUE);
+
+        await pressEnter(page);
+
+        await expect(page.locator('#result-message')).toHaveText('Authorised');
+    });
 });

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

@@ -72,7 +72,7 @@ test.describe('Cards (Installments)', () => {
         await card.installmentsDropdown.click();
         await pressKeyboardToNextItem(page);
         await pressKeyboardToNextItem(page);
-        // await pressKeyboardToSelectItem(page);
+        // await pressEnter(page);
 
         const listItem = await card.selectListItem('2');
         await listItem.click();

packages/e2e-playwright/tests/issuerList/issuer-list.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../../pages/issuerList/issuer-list.fixture';
-import { pressKeyboardToNextItem, pressKeyboardToSelectItem } from '../utils/keyboard';
+import { pressKeyboardToNextItem, pressEnter } from '../utils/keyboard';
 
 test.describe('Issuer List', () => {
     test('it should be able to filter and select using the keyboard', async ({ issuerListPage }) => {
@@ -15,15 +15,15 @@ test.describe('Issuer List', () => {
 
         // select one of the filtered option
         await pressKeyboardToNextItem(page); // Arrow down
-        await pressKeyboardToSelectItem(page); // Enter key
+        await pressEnter(page); // Enter key
 
         await expect(issuerList.submitButton).toHaveText('Continue to Idea Cloud');
 
         // 1st press opens the dropdown
         await pressKeyboardToNextItem(page);
         // 2nd selects next item
         await pressKeyboardToNextItem(page);
-        await pressKeyboardToSelectItem(page);
+        await pressEnter(page);
 
         await expect(issuerList.submitButton).toHaveText('Continue to mRaty');
     });
@@ -33,7 +33,7 @@ test.describe('Issuer List', () => {
 
         await issuerList.clickOnSelector();
         await issuerList.typeOnSelectorField('Nest');
-        await pressKeyboardToSelectItem(page);
+        await pressEnter(page);
 
         await expect(issuerList.submitButton).toHaveText('Continue to Nest Bank');
     });
@@ -44,7 +44,7 @@ test.describe('Issuer List', () => {
         // Open the drop down and select an item
         await issuerList.clickOnSelector();
         await pressKeyboardToNextItem(page); // Arrow down
-        await pressKeyboardToSelectItem(page); // Enter key
+        await pressEnter(page); // Enter key
 
         let issuerListData = await page.evaluate('window.dotpay.data');
 

packages/e2e-playwright/tests/utils/keyboard.ts

@@ -8,6 +8,6 @@ export const pressKeyboardToPreviousItem = async page => {
     await page.keyboard.press('ArrowUp', { delay: KEYBOARD_DELAY });
 };
 
-export const pressKeyboardToSelectItem = async page => {
+export const pressEnter = async page => {
     await page.keyboard.press('Enter', { delay: KEYBOARD_DELAY });
 };

packages/lib/src/components/Card/Card.tsx

@@ -198,7 +198,7 @@ export class CardElement extends UIElement<CardConfiguration> {
         // Handler for regular card comp doesn't need this 'raw' data or to know about 'resets'
         if (!obj.isReset) {
             const nuObj = reject('supportedBrandsRaw').from(obj);
-            this.props.onBinLookup(nuObj);
+            this.props.onBinLookup?.(nuObj);
         }
     }
 

packages/lib/src/components/Card/components/CardInput/defaultProps.ts

@@ -50,9 +50,5 @@ export default {
     onBinValue: (): any => {},
     onBlur: (): any => {},
     onFocus: (): any => {},
-    onChange: (): any => {},
-
-    // Strictly speaking a Card level props, but needed here for analytics.configData
-    onBinLookup: () => {},
-    onEnterKeyPressed: () => {}
+    onChange: (): any => {}
 };

packages/lib/src/core/Analytics/utils.ts

@@ -183,15 +183,16 @@ export const getCardConfigData = (cardProps: CardConfiguration): CardConfigData
         /** callbacks */
         // We need to detect if the merchant themselves has defined these, not if we've set them as a default
         hasOnAllValid: onAllValid !== CardInputDefaultProps.onAllValid,
-        hasOnBinLookup: onBinLookup !== CardInputDefaultProps.onBinLookup,
         hasOnBinValue: onBinValue !== CardInputDefaultProps.onBinValue,
         hasOnBlur: onBlur !== CardInputDefaultProps.onBlur,
         hasOnBrand: onBrand !== CardInputDefaultProps.onBrand,
         hasOnConfigSuccess: onConfigSuccess !== CardInputDefaultProps.onConfigSuccess,
-        hasOnEnterKeyPressed: onEnterKeyPressed !== CardInputDefaultProps.onEnterKeyPressed,
         hasOnFieldValid: onFieldValid !== CardInputDefaultProps.onFieldValid,
         hasOnFocus: onFocus !== CardInputDefaultProps.onFocus,
-        hasOnLoad: onLoad !== CardInputDefaultProps.onLoad
+        hasOnLoad: onLoad !== CardInputDefaultProps.onLoad,
+        // Card level props
+        hasOnBinLookup: !!onBinLookup,
+        hasOnEnterKeyPressed: !!onEnterKeyPressed
     };
 
     return configData;