Feature/using checkoutanalytics

.changeset/selfish-socks-fix.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Starting using /checkoutanalytics endpoint to retrieve "checkoutAttemptId" log "submit" and "action-handled" events

packages/e2e/tests/vouchers/boleto/boleto.test.js

@@ -20,9 +20,7 @@ const mockData = {
         houseNumberOrName: '123',
         city: 'Sao Paulo',
         postalCode: '11111555',
-        stateOrProvince: 'SP',
-        firstName: 'N/A',
-        lastName: 'N/A'
+        stateOrProvince: 'SP'
     },
     shopperEmail: '[email protected]'
 };

packages/lib/src/components/Ach/components/AchInput/components/AchSFInput.tsx

@@ -3,9 +3,10 @@ import classNames from 'classnames';
 import styles from '../AchInput.module.scss';
 import Field from '../../../../internal/FormFields/Field';
 import DataSfSpan from '../../../../Card/components/CardInput/components/DataSfSpan';
+import { capitalizeFirstLetter } from '../../../../../utils/Formatters/formatters';
 
 const AchSFInput = ({ id, dataInfo, className = '', label, focused, filled, errorMessage = '', isValid = false, onFocusField, dir }) => {
-    const capitalisedId = id.charAt(0).toUpperCase() + id.slice(1);
+    const capitalisedId = capitalizeFirstLetter(id);
     const encryptedIdStr = `encrypted${capitalisedId}`;
 
     return (

packages/lib/src/components/ApplePay/ApplePay.tsx

@@ -10,6 +10,8 @@ import { preparePaymentRequest } from './payment-request';
 import { resolveSupportedVersion, mapBrands } from './utils';
 import { ApplePayElementProps, ApplePayElementData, ApplePaySessionRequest, OnAuthorizedCallback } from './types';
 import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError';
+import { ANALYTICS_INSTANT_PAYMENT_BUTTON, ANALYTICS_SELECTED_STR } from '../../core/Analytics/constants';
+import { DecodeObject } from '../types';
 
 const latestSupportedVersion = 14;
 
@@ -53,6 +55,11 @@ class ApplePayElement extends UIElement<ApplePayElementProps> {
     }
 
     submit() {
+        // Analytics
+        if (this.props.isInstantPayment) {
+            this.submitAnalytics({ type: ANALYTICS_SELECTED_STR, target: ANALYTICS_INSTANT_PAYMENT_BUTTON });
+        }
+
         return this.startSession(this.props.onAuthorized);
     }
 
@@ -104,10 +111,13 @@ class ApplePayElement extends UIElement<ApplePayElementProps> {
 
         try {
             const response = await httpPost(options, request);
-            const decodedData = base64.decode(response.data);
-            if (!decodedData) reject('Could not decode Apple Pay session');
-            const session = JSON.parse(decodedData as string);
-            resolve(session);
+            const decodedData: DecodeObject = base64.decode(response.data);
+            if (!decodedData.success) {
+                reject('Could not decode Apple Pay session');
+            } else {
+                const session = JSON.parse(decodedData.data);
+                resolve(session);
+            }
         } catch (e) {
             reject('Could not get Apple Pay session');
         }

packages/lib/src/components/BaseElement.ts

@@ -6,6 +6,8 @@ import Core from '../core';
 import { BaseElementProps, PaymentData } from './types';
 import { RiskData } from '../core/RiskModule/RiskModule';
 import { Resources } from '../core/Context/Resources';
+import { AnalyticsInitialEvent, SendAnalyticsObject } from '../core/Analytics/types';
+import { ANALYTICS_RENDERED_STR } from '../core/Analytics/constants';
 
 class BaseElement<P extends BaseElementProps> {
     public readonly _id = `${this.constructor['type']}-${uuid()}`;
@@ -46,6 +48,16 @@ class BaseElement<P extends BaseElementProps> {
         return {};
     }
 
+    /* eslint-disable-next-line */
+    protected setUpAnalytics(setUpAnalyticsObj: AnalyticsInitialEvent) {
+        return null;
+    }
+
+    /* eslint-disable-next-line */
+    protected submitAnalytics(analyticsObj?: SendAnalyticsObject) {
+        return null;
+    }
+
     protected setState(newState: object): void {
         this.state = { ...this.state, ...newState };
     }
@@ -56,8 +68,8 @@ class BaseElement<P extends BaseElementProps> {
      */
     get data(): PaymentData | RiskData {
         const clientData = getProp(this.props, 'modules.risk.data');
-        const useAnalytics = !!getProp(this.props, 'modules.analytics.props.enabled');
-        const checkoutAttemptId = useAnalytics ? getProp(this.props, 'modules.analytics.checkoutAttemptId') : 'do-not-track';
+        const useAnalytics = !!getProp(this.props, 'modules.analytics.getEnabled')?.();
+        const checkoutAttemptId = useAnalytics ? getProp(this.props, 'modules.analytics.getCheckoutAttemptId')?.() : 'do-not-track';
         const order = this.state.order || this.props.order;
 
         const componentData = this.formatData();
@@ -98,24 +110,36 @@ class BaseElement<P extends BaseElementProps> {
             throw new Error('Component could not mount. Root node was not found.');
         }
 
+        const setupAnalytics = !this._node;
+
         if (this._node) {
             this.unmount(); // new, if this._node exists then we are "remounting" so we first need to unmount if it's not already been done
-        } else {
-            // Set up analytics, once
-            if (this.props.modules && this.props.modules.analytics && !this.props.isDropin) {
-                this.props.modules.analytics.send({
-                    containerWidth: this._node && this._node.offsetWidth,
-                    component: this.constructor['analyticsType'] ?? this.constructor['type'],
-                    flavor: 'components'
-                });
-            }
         }
 
         this._node = node;
+
         this._component = this.render();
 
         render(this._component, node);
 
+        // Set up analytics (once, since this._node is currently undefined) now that we have mounted and rendered
+        if (setupAnalytics) {
+            if (this.props.modules && this.props.modules.analytics) {
+                this.setUpAnalytics({
+                    containerWidth: node && (node as HTMLElement).offsetWidth,
+                    component: !this.props.isDropin ? this.constructor['analyticsType'] ?? this.constructor['type'] : 'dropin',
+                    flavor: !this.props.isDropin ? 'components' : 'dropin'
+                }).then(() => {
+                    // Once the initial analytics set up call has been made...
+                    // ...create an analytics event  declaring that the component has been rendered
+                    // (The dropin will do this itself from DropinComponent once the PM list has rendered)
+                    if (!this.props.isDropin) {
+                        this.submitAnalytics({ type: ANALYTICS_RENDERED_STR });
+                    }
+                });
+            }
+        }
+
         return this;
     }
 

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

@@ -0,0 +1,162 @@
+import { CardElement } from './Card';
+import Analytics from '../../core/Analytics';
+
+const analyticsModule = Analytics({ analytics: {}, loadingContext: '', locale: '', clientKey: '' });
+
+let card;
+
+import {
+    ANALYTICS_CONFIGURED_STR,
+    ANALYTICS_EVENT_INFO,
+    ANALYTICS_EVENT_LOG,
+    ANALYTICS_FOCUS_STR,
+    ANALYTICS_RENDERED_STR,
+    ANALYTICS_SUBMIT_STR,
+    ANALYTICS_UNFOCUS_STR,
+    ANALYTICS_VALIDATION_ERROR_STR
+} from '../../core/Analytics/constants';
+
+describe('Card: calls that generate "info" analytics should produce objects with the expected shapes ', () => {
+    beforeEach(() => {
+        console.log = jest.fn(() => {});
+
+        card = new CardElement({
+            modules: {
+                analytics: analyticsModule
+            }
+        });
+
+        analyticsModule.createAnalyticsEvent = jest.fn(() => null);
+    });
+
+    test('Analytics should produce an "info" event, of type "rendered", for a card PM', () => {
+        card.submitAnalytics({
+            type: ANALYTICS_RENDERED_STR
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: { component: card.constructor['type'], type: ANALYTICS_RENDERED_STR }
+        });
+    });
+
+    test('Analytics should produce an "info" event, of type "rendered", for a storedCard PM', () => {
+        card.submitAnalytics({
+            type: ANALYTICS_RENDERED_STR,
+            isStoredPaymentMethod: true,
+            brand: 'mc'
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: { component: card.constructor['type'], type: ANALYTICS_RENDERED_STR, isStoredPaymentMethod: true, brand: 'mc' }
+        });
+    });
+
+    test('Analytics should produce an "info" event, of type "configured", for a card PM', () => {
+        card.submitAnalytics({
+            type: ANALYTICS_CONFIGURED_STR
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: { component: card.constructor['type'], type: ANALYTICS_CONFIGURED_STR }
+        });
+    });
+
+    test('Analytics should produce an "info" event, of type "configured", for a storedCard PM', () => {
+        card.submitAnalytics({
+            type: ANALYTICS_CONFIGURED_STR,
+            isStoredPaymentMethod: true,
+            brand: 'mc'
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: { component: card.constructor['type'], type: ANALYTICS_CONFIGURED_STR, isStoredPaymentMethod: true, brand: 'mc' }
+        });
+    });
+
+    test('Analytics should produce an "info" event, of type "focus" with the target value correctly formed', () => {
+        card.onFocus({
+            fieldType: 'encryptedCardNumber',
+            event: {
+                action: 'focus',
+                focus: true,
+                numChars: 0,
+                fieldType: 'encryptedCardNumber',
+                rootNode: {},
+                type: 'card',
+                currentFocusObject: 'encryptedCardNumber'
+            }
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: { component: card.constructor['type'], type: ANALYTICS_FOCUS_STR, target: 'card_number' }
+        });
+    });
+
+    test('Analytics should produce an "info" event, of type "unfocus" with the target value correctly formed', () => {
+        card.onBlur({
+            fieldType: 'encryptedCardNumber',
+            event: {
+                action: 'focus',
+                focus: false,
+                numChars: 1,
+                fieldType: 'encryptedCardNumber',
+                rootNode: {},
+                type: 'card',
+                currentFocusObject: null
+            }
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: { component: card.constructor['type'], type: ANALYTICS_UNFOCUS_STR, target: 'card_number' }
+        });
+    });
+
+    test('Analytics should produce an "info" event, of type "validationError", with the expected properties', () => {
+        card.onErrorAnalytics({
+            fieldType: 'encryptedCardNumber',
+            errorCode: 'error.va.sf-cc-num.04'
+        });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_INFO,
+            data: {
+                component: card.constructor['type'],
+                type: ANALYTICS_VALIDATION_ERROR_STR,
+                target: 'card_number',
+                validationErrorCode: 'error.va.sf-cc-num.04',
+                validationErrorMessage: 'card-number-not-filled-correctly'
+            }
+        });
+    });
+});
+
+describe('Card: calls that generate "log" analytics should produce objects with the expected shapes ', () => {
+    beforeEach(() => {
+        console.log = jest.fn(() => {});
+
+        card = new CardElement({
+            modules: {
+                analytics: analyticsModule
+            }
+        });
+    });
+
+    test('Analytics should produce an "log" event, of type "submit", for a card PM', () => {
+        card.submitAnalytics({ type: ANALYTICS_SUBMIT_STR });
+
+        expect(analyticsModule.createAnalyticsEvent).toHaveBeenCalledWith({
+            event: ANALYTICS_EVENT_LOG,
+            data: {
+                component: card.constructor['type'],
+                type: ANALYTICS_SUBMIT_STR,
+                message: 'Shopper clicked pay'
+            }
+        });
+    });
+});