Feature/using checkoutanalytics mvp qr codes (#2550)

* Detect and send analytics event when qrCode's "Copy" btn is pressed * Fixing unit test fail * Removing child comp's submitAnalytics function (since all it does is call super)
Adyen · Feb 14, 2024 · b7493e8 · b7493e8
1 parent 077e23b
commit b7493e8
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 0 deletions.
diff --git a/packages/lib/src/components/WeChat/WeChat.ts b/packages/lib/src/components/WeChat/WeChat.ts
@@ -3,6 +3,7 @@ import { delay, countdownTime } from './config';
 
 class WeChatPayElement extends QRLoaderContainer {
     public static type = 'wechatpayQR';
+    public static analyticsType = 'wechatpayQR'; // Needed for use-case where merchant makes a payment themselves and then calls checkout.createFromAction(action)
 
     formatProps(props) {
         return {

diff --git a/packages/lib/src/components/helpers/QRLoaderContainer.tsx b/packages/lib/src/components/helpers/QRLoaderContainer.tsx
@@ -71,6 +71,7 @@ class QRLoaderContainer<T extends QRLoaderContainerProps = QRLoaderContainerProp
                         instructions={this.props.instructions}
                         onActionHandled={this.props.onActionHandled}
                         brandName={this.displayName}
+                        onSubmitAnalytics={this.submitAnalytics}
                     />
                 </SRPanelProvider>
             </CoreProvider>

diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
@@ -15,6 +15,7 @@ import { StatusObject } from '../Await/types';
 import useImage from '../../../core/Context/useImage';
 import { useA11yReporter } from '../../../core/Errors/useA11yReporter';
 import useAutoFocus from '../../../utils/useAutoFocus';
+import { ANALYTICS_DOWNLOAD_STR, ANALYTICS_QR_CODE_DOWNLOAD } from '../../../core/Analytics/constants';
 
 const QRCODE_URL = 'barcode.shtml?barcodeType=qrCode&fileType=png&data=';
 
@@ -246,6 +247,10 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
                             variant="action"
                             onClick={(e, { complete }) => {
                                 copyToClipboard(this.props.qrCodeData);
+                                this.props.onSubmitAnalytics({
+                                    type: ANALYTICS_DOWNLOAD_STR,
+                                    target: ANALYTICS_QR_CODE_DOWNLOAD
+                                });
                                 complete();
                             }}
                             icon={getImage({ imageFolder: 'components/' })('copy')}

diff --git a/packages/lib/src/components/internal/QRLoader/types.ts b/packages/lib/src/components/internal/QRLoader/types.ts
@@ -2,6 +2,7 @@ import { PaymentAmount } from '../../../types';
 import Language from '../../../language/Language';
 import { ActionHandledReturnObject } from '../../types';
 import { h } from 'preact';
+import { SendAnalyticsObject } from '../../../core/Analytics/types';
 
 export interface QRLoaderProps {
     delay?: number;
@@ -29,6 +30,7 @@ export interface QRLoaderProps {
     instructions?: string | (() => h.JSX.Element);
     copyBtn?: boolean;
     onActionHandled?: (rtnObj: ActionHandledReturnObject) => void;
+    onSubmitAnalytics?: (aObj: SendAnalyticsObject) => void;
 }
 
 export interface QRLoaderState {

diff --git a/packages/lib/src/core/Analytics/analyticsPreProcessor.ts b/packages/lib/src/core/Analytics/analyticsPreProcessor.ts
@@ -4,6 +4,7 @@ import {
     ANALYTICS_ACTION_STR,
     ANALYTICS_CONFIGURED_STR,
     ANALYTICS_DISPLAYED_STR,
+    ANALYTICS_DOWNLOAD_STR,
     ANALYTICS_EVENT_ERROR,
     ANALYTICS_EVENT_INFO,
     ANALYTICS_EVENT_LOG,
@@ -44,6 +45,7 @@ export const analyticsPreProcessor = (analyticsModule: AnalyticsModule) => {
             case ANALYTICS_UNFOCUS_STR:
             case ANALYTICS_DISPLAYED_STR: // issuerList
             case ANALYTICS_INPUT_STR: // issuerList
+            case ANALYTICS_DOWNLOAD_STR: // QR codes
                 analyticsModule.createAnalyticsEvent({
                     event: ANALYTICS_EVENT_INFO,
                     data: { component, type, target }

diff --git a/packages/lib/src/core/Analytics/constants.ts b/packages/lib/src/core/Analytics/constants.ts
@@ -14,13 +14,18 @@ export const ANALYTICS_SELECTED_STR = 'selected';
 export const ANALYTICS_RENDERED_STR = 'rendered';
 export const ANALYTICS_DISPLAYED_STR = 'displayed';
 export const ANALYTICS_INPUT_STR = 'input';
+
+export const ANALYTICS_DOWNLOAD_STR = 'download';
+
 export const ANALYTICS_VALIDATION_ERROR_STR = 'validationError';
 
 export const ANALYTICS_FOCUS_STR = 'focus';
 export const ANALYTICS_UNFOCUS_STR = 'unfocus';
 
 export const ANALYTICS_CONFIGURED_STR = 'configured';
 
+export const ANALYTICS_QR_CODE_DOWNLOAD = 'qr_download_button';
+
 export const ANALYTICS_INSTANT_PAYMENT_BUTTON = 'instant_payment_button';
 export const ANALYTICS_FEATURED_ISSUER = 'featured_issuer';
 export const ANALYTICS_LIST = 'list';