v5 Adding subType to 3DS2 analytics events (#2680)

* Adding subType to 3DS2 analytics events

* Adding changeset file

* Small fixes around Sonarcloud Maintainability

* Calculating "result" for 3DS2 "completed" analytics events. (Currently commented out)

* Adding "result" for 3DS2 "completed" analytics events.

.changeset/tricky-impalas-accept.md

@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": minor
+---
+
+Adding subType to 3DS2 analytics events

packages/lib/src/components/ThreeDS2/components/Challenge/PrepareChallenge3DS2.tsx

@@ -11,10 +11,11 @@ import useImage from '../../../../core/Context/useImage';
 import { ActionHandledReturnObject } from '../../../types';
 import { THREEDS2_FULL, THREEDS2_NUM } from '../../config';
 import { SendAnalyticsObject } from '../../../../core/Analytics/types';
+import { Analytics3DS2Events } from '../../../../core/Analytics/constants';
 import { ErrorObject } from '../../../../core/Errors/types';
 
 class PrepareChallenge3DS2 extends Component<PrepareChallenge3DS2Props, PrepareChallenge3DS2State> {
-    public static defaultProps = {
+    public static readonly defaultProps = {
         onComplete: () => {},
         onError: () => {},
         onActionHandled: () => {}
@@ -41,7 +42,6 @@ class PrepareChallenge3DS2 extends Component<PrepareChallenge3DS2Props, PrepareC
                 this.setStatusError({
                     errorInfo:
                         'Challenge Data missing one or more of the following properties (acsURL | acsTransID | messageVersion | threeDSServerTransID)'
-                    // errorObj: challengeData // TODO Decide if we want to expose this data
                 });
                 return;
             }
@@ -60,19 +60,24 @@ class PrepareChallenge3DS2 extends Component<PrepareChallenge3DS2Props, PrepareC
     }
 
     public onActionHandled = (rtnObj: ActionHandledReturnObject) => {
-        this.props.onSubmitAnalytics({ type: THREEDS2_FULL, message: rtnObj.actionDescription });
+        this.props.onSubmitAnalytics({
+            type: THREEDS2_FULL,
+            message: rtnObj.actionDescription,
+            subtype: Analytics3DS2Events.CHALLENGE_IFRAME_LOADED
+        });
 
         this.props.onActionHandled(rtnObj);
     };
 
     public onFormSubmit = (msg: string) => {
         this.props.onSubmitAnalytics({
             type: THREEDS2_FULL,
-            message: msg
+            message: msg,
+            subtype: Analytics3DS2Events.CHALLENGE_DATA_SENT
         });
     };
 
-    setStatusComplete(resultObj) {
+    setStatusComplete(resultObj, isTimeout = false) {
         this.setState({ status: 'complete' }, () => {
             /**
              * Create the data in the way that the /details endpoint expects.
@@ -82,17 +87,40 @@ class PrepareChallenge3DS2 extends Component<PrepareChallenge3DS2Props, PrepareC
             const resolveDataFunction = this.props.useOriginalFlow ? createOldChallengeResolveData : createChallengeResolveData;
             const data = resolveDataFunction(this.props.dataKey, resultObj.transStatus, this.props.paymentData);
 
-            // Create log object - the process is completed, one way or another
+            /** Calculate "result" for analytics */
+            let result: string;
+
+            switch (resultObj?.transStatus) {
+                case 'Y':
+                    result = 'success';
+                    break;
+                case 'N':
+                    result = 'failed';
+                    break;
+                case 'U':
+                    result = isTimeout ? 'timeout' : 'cancelled';
+                    break;
+                default:
+            }
+            if (resultObj?.errorCode) {
+                result = 'noTransStatus';
+            }
+
+            /** Create log object - the process is completed, one way or another */
             const analyticsObject: SendAnalyticsObject = {
                 type: THREEDS2_FULL,
-                message: `${THREEDS2_NUM} challenge has completed`
+                message: `${THREEDS2_NUM} challenge has completed`,
+                subtype: Analytics3DS2Events.CHALLENGE_COMPLETED,
+                result
             };
 
             // Send log to analytics endpoint
             this.props.onSubmitAnalytics(analyticsObject);
 
-            // Equals a call to onAdditionalDetails (mapped in actionTypes.ts) - except for 3DS2InMDFlow which doesn't handle an action
-            // and instead creates a new ThreeDS2Challenge component, with an onComplete prop
+            /**
+             *  Equals a call to onAdditionalDetails (mapped in actionTypes.ts) - except for 3DS2InMDFlow which doesn't handle an action
+             *  and instead creates a new ThreeDS2Challenge component, with an onComplete prop
+             */
             this.props.onComplete(data);
         });
     }

packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/PrepareFingerprint3DS2.tsx

@@ -6,12 +6,13 @@ import { FingerPrintData, ResultObject } from '../../types';
 import { ActionHandledReturnObject } from '../../../types';
 import { THREEDS2_FULL, THREEDS2_NUM } from '../../config';
 import { SendAnalyticsObject } from '../../../../core/Analytics/types';
+import { Analytics3DS2Events } from '../../../../core/Analytics/constants';
 import { ErrorObject } from '../../../../core/Errors/types';
 
 class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, PrepareFingerprint3DS2State> {
-    public static type = 'scheme';
+    public static readonly type = 'scheme';
 
-    public static defaultProps = {
+    public static readonly defaultProps = {
         onComplete: () => {},
         onError: () => {},
         paymentData: '',
@@ -33,8 +34,7 @@ class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, Prep
             };
         } else {
             this.state = { status: 'error' };
-            // TODO - confirm that we should do this, or is it possible to proceed to the challenge anyway?
-            //  ...in which case we should console.debug the error object and then call: this.setStatusComplete({ threeDSCompInd: 'N' });
+
             this.props.onError({
                 errorCode: this.props.dataKey,
                 message: 'Missing fingerprintToken parameter'
@@ -43,15 +43,20 @@ class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, Prep
     }
 
     public onActionHandled = (rtnObj: ActionHandledReturnObject) => {
-        // Leads to an "iframe loaded" log action
-        this.props.onSubmitAnalytics({ type: THREEDS2_FULL, message: rtnObj.actionDescription });
+        this.props.onSubmitAnalytics({
+            type: THREEDS2_FULL,
+            message: rtnObj.actionDescription,
+            subtype: Analytics3DS2Events.FINGERPRINT_IFRAME_LOADED
+        });
+
         this.props.onActionHandled(rtnObj);
     };
 
     public onFormSubmit = (msg: string) => {
         this.props.onSubmitAnalytics({
             type: THREEDS2_FULL,
-            message: msg
+            message: msg,
+            subtype: Analytics3DS2Events.FINGERPRINT_DATA_SENT
         });
     };
 
@@ -67,7 +72,7 @@ class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, Prep
         this.setState({ status: 'retrievingFingerPrint' });
     }
 
-    setStatusComplete(resultObj: ResultObject) {
+    setStatusComplete(resultObj: ResultObject, isTimeout = false) {
         this.setState({ status: 'complete' }, () => {
             /**
              * Create the data in the way that the endpoint expects:
@@ -77,10 +82,29 @@ class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, Prep
             const resolveDataFunction = this.props.useOriginalFlow ? createOldFingerprintResolveData : createFingerprintResolveData;
             const data = resolveDataFunction(this.props.dataKey, resultObj, this.props.paymentData);
 
-            /** The fingerprint process is completed, one way or another */
+            /** Calculate "result" for analytics */
+            let result: string;
+
+            switch (resultObj?.threeDSCompInd) {
+                case 'Y':
+                    result = 'success';
+                    break;
+                case 'N': {
+                    result = isTimeout ? 'timeout' : 'failed'; // timed-out; or, 'failed' ("N" being the result returned from the threeDSMethodURL)
+                    break;
+                }
+                case 'U':
+                    result = 'noThreeDSMethodURL';
+                    break;
+                default:
+            }
+
+            /** Create log object - the fingerprint process is completed, one way or another */
             const analyticsObject: SendAnalyticsObject = {
                 type: THREEDS2_FULL,
-                message: `${THREEDS2_NUM} fingerprinting has completed`
+                message: `${THREEDS2_NUM} fingerprinting has completed`,
+                subtype: Analytics3DS2Events.FINGERPRINT_COMPLETED,
+                result
             };
 
             // Send log to analytics endpoint
@@ -107,7 +131,7 @@ class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, Prep
                          */
                         const errorCodeObject = handleErrorCode(fingerprint.errorCode);
                         console.debug('### PrepareFingerprint3DS2::fingerprint timed-out:: errorCodeObject=', errorCodeObject);
-                        this.setStatusComplete(fingerprint.result);
+                        this.setStatusComplete(fingerprint.result, true);
                     }}
                     showSpinner={showSpinner}
                     {...fingerPrintData}

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

@@ -116,10 +116,10 @@ export const analyticsPreProcessor = (analyticsModule: AnalyticsModule) => {
 
             // General 3DS2 log events: "action handled" (i.e. iframe loaded), data sent, process completed
             case THREEDS2_FULL: {
-                const { message, metadata } = analyticsObj;
+                const { message, metadata, subtype, result } = analyticsObj;
                 analyticsModule.createAnalyticsEvent({
                     event: ANALYTICS_EVENT_LOG,
-                    data: { component, type, message, metadata }
+                    data: { component, type, message, metadata, subtype, result }
                 });
                 break;
             }

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

@@ -97,3 +97,12 @@ export const errorCodeMapping = {
 export const ANALYTICS_EXPRESS_PAGES_ARRAY = ['cart', 'minicart', 'pdp', 'checkout'];
 
 export const ALLOWED_ANALYTICS_DATA = ['applicationInfo', 'checkoutAttemptId'];
+
+export enum Analytics3DS2Events {
+    FINGERPRINT_DATA_SENT = 'fingerprintDataSentWeb',
+    FINGERPRINT_IFRAME_LOADED = 'fingerprintIframeLoaded',
+    FINGERPRINT_COMPLETED = 'fingerprintCompleted',
+    CHALLENGE_DATA_SENT = 'challengeDataSentWeb',
+    CHALLENGE_IFRAME_LOADED = 'challengeIframeLoaded',
+    CHALLENGE_COMPLETED = 'challengeCompleted'
+}

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

@@ -82,6 +82,7 @@ export interface AnalyticsObject {
     issuer?: string;
     isExpress?: boolean;
     expressPage?: string;
+    result?: string;
 }
 
 export type ANALYTICS_EVENT = 'log' | 'error' | 'info';

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

@@ -2,6 +2,7 @@ import { AnalyticsData, AnalyticsObject, CreateAnalyticsObject } from './types';
 import { ANALYTICS_ACTION_STR, ANALYTICS_VALIDATION_ERROR_STR, ALLOWED_ANALYTICS_DATA, errorCodeMapping } from './constants';
 import uuid from '../../utils/uuid';
 import { ERROR_CODES, ERROR_MSG_INCOMPLETE_FIELD } from '../Errors/constants';
+import { THREEDS2_FULL } from '../../components/ThreeDS2/config';
 
 export const getUTCTimestamp = () => Date.now();
 
@@ -31,7 +32,8 @@ export const createAnalyticsObject = (aObj: CreateAnalyticsObject): AnalyticsObj
     ...(aObj.event === 'error' && { code: aObj.code, errorType: aObj.errorType, message: aObj.message }), // error event
     /** LOG */
     ...(aObj.event === 'log' && { type: aObj.type, message: aObj.message }), // log event
-    ...(aObj.event === 'log' && aObj.type === ANALYTICS_ACTION_STR && { subType: aObj.subtype }), // only added if we have a log event of Action type
+    ...(aObj.event === 'log' && (aObj.type === ANALYTICS_ACTION_STR || aObj.type === THREEDS2_FULL) && { subType: aObj.subtype }), // only added if we have a log event of Action type or ThreeDS2
+    ...(aObj.event === 'log' && aObj.type === THREEDS2_FULL && { result: aObj.result }), // only added if we have a log event ThreeDS2 type
     /** INFO */
     ...(aObj.event === 'info' && { type: aObj.type, target: aObj.target }), // info event
     ...(aObj.event === 'info' && aObj.issuer && { issuer: aObj.issuer }), // relates to issuerLists

packages/playground/src/pages/Cards/Cards.js

@@ -8,7 +8,7 @@ import '../../style.scss';
 import { MockReactApp } from './MockReactApp';
 import { searchFunctionExample } from '../../utils';
 
-const onlyShowCard = false;
+const onlyShowCard = true;
 
 const showComps = {
     clickToPay: true,