diff --git a/packages/lib/src/components/WeChat/WeChat.ts b/packages/lib/src/components/WeChat/WeChat.ts index 8b96717381..ad39503849 100644 --- 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 index c9b3fb1b8c..fa5f5f3115 100644 --- a/packages/lib/src/components/helpers/QRLoaderContainer.tsx +++ b/packages/lib/src/components/helpers/QRLoaderContainer.tsx @@ -71,6 +71,7 @@ class QRLoaderContainer diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx index ad083eaa2b..91be59ffa3 100644 --- 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 { 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 index e7ad1548b6..dfd6b9c18a 100644 --- 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 index d39244c31d..1024b01773 100644 --- 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 index b6fc9fb03d..a72c4d94df 100644 --- a/packages/lib/src/core/Analytics/constants.ts +++ b/packages/lib/src/core/Analytics/constants.ts @@ -14,6 +14,9 @@ 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'; @@ -21,6 +24,8 @@ 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';