From 587a38f7a99f1a40d9ee50d2b29e2dc9fa612276 Mon Sep 17 00:00:00 2001
From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com>
Date: Wed, 18 Oct 2023 15:25:36 +0100
Subject: [PATCH] ophan 'contributions-epic-ctas-applepay' button click
 tracking added

---
 .../modules/epics/ContributionsEpicButtons.tsx    | 15 +++++++++++++--
 packages/modules/src/modules/epics/utils/ophan.ts |  9 +++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx b/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx
index 787745347..7e64e3366 100644
--- 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
index b2a28031e..3dac7367a 100644
--- 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',