Feature/v5 card adds analytics config data

.changeset/forty-bulldogs-fly.md

@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": minor
+---
+
+Card component adds configData for analytics (added to "rendered" Info Event)

packages/e2e-playwright/models/redirect.ts

@@ -30,7 +30,7 @@ class Redirect {
 
         this.selectYourBankButton = page.getByRole('button', { name: SELECT_YOUR_BANK });
 
-        this.selectTestBankButton = page.getByRole('button', { name: TEST_BANK_NAME });
+        this.selectTestBankButton = page.getByText(TEST_BANK_NAME);
 
         this.simulateSuccessButton = page.getByRole('button', { name: SIMULATION_TYPE_SUCCESS });
         this.simulateFailureButton = page.getByRole('button', { name: SIMULATION_TYPE_FAILURE });

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

@@ -4,6 +4,7 @@ import Analytics from '../../core/Analytics';
 const analyticsModule = Analytics({ analytics: {}, loadingContext: '', locale: '', clientKey: '' });
 
 let card;
+let analyticsEventObject;
 
 import {
     ANALYTICS_CONFIGURED_STR,
@@ -23,18 +24,29 @@ describe('Card: calls that generate "info" analytics should produce objects with
         card = new CardElement({
             modules: {
                 analytics: analyticsModule
-            }
+            },
+            type: 'card'
         });
 
-        analyticsModule.createAnalyticsEvent = jest.fn(() => null);
+        analyticsEventObject = null;
+
+        // @ts-ignore it's a test
+        analyticsModule.createAnalyticsEvent = jest.fn(aObj => {
+            analyticsEventObject = aObj;
+        });
     });
 
     test('Analytics should produce an "info" event, of type "rendered", for a card PM', () => {
         card.submitAnalytics({
             type: ANALYTICS_RENDERED_STR
         });
 
-        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+        // configData is too complex an object to fully inspect - but expect it to be there
+        expect(analyticsEventObject.data.configData).toBeDefined();
+        delete analyticsEventObject.data.configData;
+
+        // With configData removed inspect what's left
+        expect(analyticsEventObject).toEqual({
             event: ANALYTICS_EVENT_INFO,
             data: { component: card.constructor['type'], type: ANALYTICS_RENDERED_STR }
         });
@@ -47,7 +59,12 @@ describe('Card: calls that generate "info" analytics should produce objects with
             brand: 'mc'
         });
 
-        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+        // configData is too complex an object to fully inspect - but expect it to be there
+        expect(analyticsEventObject.data.configData).toBeDefined();
+        delete analyticsEventObject.data.configData;
+
+        // With configData removed inspect what's left
+        expect(analyticsEventObject).toEqual({
             event: ANALYTICS_EVENT_INFO,
             data: { component: card.constructor['type'], type: ANALYTICS_RENDERED_STR, isStoredPaymentMethod: true, brand: 'mc' }
         });

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

@@ -26,6 +26,7 @@ import { FieldErrorAnalyticsObject, SendAnalyticsObject } from '../../core/Analy
 import { hasOwnProperty } from '../../utils/hasOwnProperty';
 import { ERROR_CODES } from '../../core/Errors/constants';
 import { getErrorMessageFromCode } from '../../core/Errors/utils';
+import CardInputDefaultProps from './components/CardInput/defaultProps';
 
 export class CardElement extends UIElement<CardElementProps> {
     public static type = 'scheme';
@@ -47,10 +48,11 @@ export class CardElement extends UIElement<CardElementProps> {
     }
 
     protected static defaultProps = {
-        onBinLookup: () => {},
-        showBrandsUnderCardNumber: true,
         showFormInstruction: true,
-        _disableClickToPay: false
+        _disableClickToPay: false,
+        doBinLookup: true,
+        // Merge most of CardInput's defaultProps
+        ...reject(['type', 'setComponentRef']).from(CardInputDefaultProps)
     };
 
     public setStatus(status: UIElementStatus, props?): this {
@@ -82,6 +84,8 @@ export class CardElement extends UIElement<CardElementProps> {
             hasCVC: !((props.brand && props.brand === 'bcmc') || props.hideCVC),
             // billingAddressRequired only available for non-stored cards
             billingAddressRequired: props.storedPaymentMethodId ? false : props.billingAddressRequired,
+            // edge case where merchant has defined both an onAddressLookup callback AND set billingAddressMode: 'partial' - which leads to some strange behaviour in the address UI
+            billingAddressMode: props.onAddressLookup ? CardInputDefaultProps.billingAddressMode : props.billingAddressMode,
             // ...(props.brands && !props.groupTypes && { groupTypes: props.brands }),
             type: props.type === 'scheme' ? 'card' : props.type,
             countryCode: props.countryCode ? props.countryCode.toLowerCase() : null,
@@ -190,7 +194,7 @@ export class CardElement extends UIElement<CardElementProps> {
             }
         }
 
-        super.submitAnalytics(analyticsObj);
+        super.submitAnalytics(analyticsObj, this.props);
     }
 
     private onConfigSuccess = (obj: CbObjOnConfigSuccess) => {

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

@@ -7,22 +7,38 @@ export default {
     setComponentRef: () => {},
 
     // Settings
+    autoFocus: true,
+    billingAddressAllowedCountries: [],
+    billingAddressMode: AddressModeOptions.full,
+    billingAddressRequired: false,
+    billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],
+
+    configuration: { koreanAuthenticationRequired: false, socialSecurityNumberMode: 'auto' as SocialSecurityMode },
+    data: {
+        billingAddress: {}
+    },
+    disableIOSArrowKeys: true,
+    enableStoreDetails: false,
+    exposeExpiryDate: false,
+    forceCompat: false,
     hasHolderName: false,
     holderNameRequired: false,
-    enableStoreDetails: false,
     hasCVC: true,
+    hideCVC: false,
+    installmentOptions: {},
+    keypadFix: true,
+    legacyInputMode: false,
+    maskSecurityCode: false,
+    minimumExpiryDate: null,
+    name: null, // Affects Dropin only, the name displayed in the PMList item
+    placeholders: {},
+    positionHolderNameOnTop: false,
     showBrandIcon: true,
     showBrandsUnderCardNumber: true,
-    positionHolderNameOnTop: false,
-    billingAddressRequired: false,
-    billingAddressMode: AddressModeOptions.full,
-    billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],
-    installmentOptions: {},
-    configuration: { koreanAuthenticationRequired: false, socialSecurityNumberMode: 'auto' as SocialSecurityMode },
-    autoFocus: true,
+    showInstallmentAmounts: null,
+    styles: {},
+
     isPayButtonPrimaryVariant: true,
-    disableIOSArrowKeys: true,
-    exposeExpiryDate: false,
 
     // Events
     onLoad: (): any => {},
@@ -36,12 +52,5 @@ export default {
     onFocus: (): any => {},
     onChange: (): any => {},
 
-    // Values
-    data: {
-        billingAddress: {}
-    },
-
-    // Customization
-    styles: {},
-    placeholders: {}
+    onBinLookup: () => {} // Strictly speaking a Card level prop, but needed here for analytics.configData
 };

packages/lib/src/components/Card/types.ts

@@ -10,7 +10,8 @@ import {
     CbObjOnLoad,
     CbObjOnBinLookup,
     CVCPolicyType,
-    DatePolicyType
+    DatePolicyType,
+    CbObjOnAllValid
 } from '../internal/SecuredFields/lib/types';
 import { ClickToPayConfiguration } from '../internal/ClickToPay/types';
 
@@ -109,6 +110,12 @@ export interface CardElementProps extends UIElementProps {
      */
     onConfigSuccess?: (event: CbObjOnConfigSuccess) => void;
 
+    /**
+     * Called when *all* the securedFields becomes valid
+     *  Also called again if one of the fields moves out of validity.
+     */
+    onAllValid?: (event: CbObjOnAllValid) => void;
+
     /**
      * Called when a field becomes valid and also if a valid field changes and becomes invalid.
      * For the card number field, it returns the last 4 digits of the card number.

packages/lib/src/components/SecuredFields/SecuredFields.tsx

@@ -8,6 +8,7 @@ import { CbObjOnBinLookup, CbObjOnFocus } from '../internal/SecuredFields/lib/ty
 import { BrandObject } from '../Card/types';
 import { fieldTypeToSnakeCase, getCardImageUrl } from '../internal/SecuredFields/utils';
 import { ANALYTICS_FOCUS_STR, ANALYTICS_UNFOCUS_STR } from '../../core/Analytics/constants';
+import { SendAnalyticsObject } from '../../core/Analytics/types';
 
 export class SecuredFieldsElement extends UIElement {
     public static type = 'scheme';
@@ -40,6 +41,10 @@ export class SecuredFieldsElement extends UIElement {
         };
     }
 
+    protected submitAnalytics(analyticsObj: SendAnalyticsObject) {
+        super.submitAnalytics(analyticsObj, this.props);
+    }
+
     updateStyles(stylesObj) {
         if (this.componentRef?.updateStyles) this.componentRef.updateStyles(stylesObj);
         return this;