ophan 'contributions-epic-ctas-applepay' button click tracking added

guardian · Oct 18, 2023 · 587a38f · 587a38f
1 parent c50b78d
commit 587a38f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx b/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx
@@ -8,6 +8,7 @@ import { addRegionIdAndTrackingParamsToSupportUrl } from '@sdc/shared/lib';
 import { OphanComponentEvent } from '@sdc/shared/types';
 import {
     getReminderViewEvent,
+    OPHAN_COMPONENT_EVENT_CTAS_APPLEPAY,
     OPHAN_COMPONENT_EVENT_CTAS_VIEW,
     OPHAN_COMPONENT_EVENT_REMINDER_OPEN,
 } from './utils/ophan';
@@ -64,6 +65,7 @@ const PrimaryCtaButton = ({
     amountsVariantName,
     numArticles,
     showApplePay,
+    submitComponentEvent,
 }: {
     cta?: Cta;
     tracking: Tracking;
@@ -72,6 +74,7 @@ const PrimaryCtaButton = ({
     amountsVariantName?: string;
     numArticles: number;
     showApplePay?: boolean;
+    submitComponentEvent?: (event: OphanComponentEvent) => void;
 }): JSX.Element | null => {
     if (!cta) {
         return null;
@@ -88,11 +91,18 @@ const PrimaryCtaButton = ({
         amountsVariantName,
     );
 
+    const openApplePay = (): string => {
+        if (submitComponentEvent) {
+            submitComponentEvent(OPHAN_COMPONENT_EVENT_CTAS_APPLEPAY);
+        }
+        return urlWithRegionAndTracking;
+    };
+
     return (
         <div css={buttonMarginStyles(showApplePay)}>
             {showApplePay ? (
                 <ButtonApplePay
-                    onClickAction={urlWithRegionAndTracking}
+                    onClickAction={openApplePay()}
                     icon={<ApplePaySvg cssOverrides={svgPositionStyles} />}
                     priority="primary"
                 >
@@ -131,7 +141,7 @@ const SecondaryCtaButton = ({
         numArticles,
         countryCode,
     );
-
+    console.log(`url -> ${url}`);
     return (
         <div css={buttonMarginStyles(showApplePay)}>
             {showApplePay ? (
@@ -230,6 +240,7 @@ export const ContributionsEpicButtons = ({
                         amountsVariantName={amountsVariantName}
                         countryCode={countryCode}
                         showApplePay={showApplePay}
+                        submitComponentEvent={submitComponentEvent}
                     />
                     {showApplePay && (
                         <SecondaryCtaButton

diff --git a/packages/modules/src/modules/epics/utils/ophan.ts b/packages/modules/src/modules/epics/utils/ophan.ts
@@ -1,6 +1,7 @@
 import { OphanComponentEvent } from '@sdc/shared/types';
 
 const OPHAN_COMPONENT_ID_CTAS_VIEW = 'contributions-epic-ctas-view';
+const OPHAN_COMPONENT_ID_CTAS_APPLEPAY = 'contributions-epic-ctas-applepay';
 const OPHAN_COMPONENT_ID_REMINDER_VIEW = 'contributions-epic-reminder-view';
 const OPHAN_COMPONENT_ID_REMINDER_OPEN = 'contributions-epic-reminder-open';
 const OPHAN_COMPONENT_ID_REMINDER_SET = 'contributions-epic-reminder-set';
@@ -30,6 +31,14 @@ export const OPHAN_COMPONENT_EVENT_CTAS_VIEW: OphanComponentEvent = {
     action: 'CLICK',
 };
 
+export const OPHAN_COMPONENT_EVENT_CTAS_APPLEPAY: OphanComponentEvent = {
+    component: {
+        componentType: 'ACQUISITIONS_OTHER',
+        id: OPHAN_COMPONENT_ID_CTAS_APPLEPAY,
+    },
+    action: 'CLICK',
+};
+
 export const OPHAN_COMPONENT_EVENT_REMINDER_OPEN: OphanComponentEvent = {
     component: {
         componentType: 'ACQUISITIONS_OTHER',