diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx index 7ac76b3e684..50e32c8efa6 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx @@ -40,9 +40,6 @@ import { ContributionsEpicCtas } from './ContributionsEpicCtas'; import { ContributionsEpicNewsletterSignup } from './ContributionsEpicNewsletterSignup'; import { ContributionsEpicSignInCta } from './ContributionsEpicSignInCta'; import { ContributionsEpicTicker } from './ContributionsEpicTicker'; -// TODO - do we need this in DCR? -// import { isValidApplePayWalletSession } from '../utils/applePay'; -// import { OPHAN_COMPONENT_EVENT_APPLEPAY_AUTHORISED } from './utils/ophan'; // CSS Styling // ------------------------------------------- @@ -287,32 +284,8 @@ const ContributionsEpic: ReactComponent = ({ hasConsentForArticleCount, stage, }: EpicProps) => { - const { - image, - tickerSettings, - showChoiceCards, - choiceCardAmounts, - forceApplePay, - name, - } = variant; - const [showApplePayButton, setShowApplePayButton] = - useState( - forceApplePay, - ); /* forceApplePay displays ApplePay button in storybook */ - - useEffect(() => { - const isInApplePayEpicTest = tracking.abTestName.includes('APPLE-PAY'); - if (isInApplePayEpicTest) { - // isValidApplePayWalletSession().then((validApplePayWalletSession) => { - // if (validApplePayWalletSession) { - // if (submitComponentEvent) { - // submitComponentEvent(OPHAN_COMPONENT_EVENT_APPLEPAY_AUTHORISED); - // } - // setShowApplePayButton(name === 'V1_APPLE_PAY'); - // } - // }); - } - }, [tracking.abTestName]); + const { image, tickerSettings, showChoiceCards, choiceCardAmounts } = + variant; const [choiceCardSelection, setChoiceCardSelection] = useState< ChoiceCardSelection | undefined @@ -493,7 +466,6 @@ const ContributionsEpic: ReactComponent = ({ onReminderOpen={onReminderOpen} fetchEmail={fetchEmail} submitComponentEvent={submitComponentEvent} - // showApplePayButton={showApplePayButton} showChoiceCards={showChoiceCards} amountsTestName={choiceCardAmounts?.testName} amountsVariantName={choiceCardAmounts?.variantName} diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpicButtons.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpicButtons.tsx index 3f83f6ea8e8..c4b130def84 100644 --- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpicButtons.tsx +++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpicButtons.tsx @@ -57,6 +57,7 @@ const PrimaryCtaButton = ({ amountsTestName, amountsVariantName, numArticles, + submitComponentEvent, }: { cta?: Cta; tracking: Tracking; @@ -64,6 +65,7 @@ const PrimaryCtaButton = ({ amountsTestName?: string; amountsVariantName?: string; numArticles: number; + submitComponentEvent?: (event: OphanComponentEvent) => void; }): JSX.Element | null => { if (!cta) { return null; @@ -84,6 +86,7 @@ const PrimaryCtaButton = ({
@@ -98,11 +101,13 @@ const SecondaryCtaButton = ({ tracking, numArticles, countryCode, + submitComponentEvent, }: { cta: Cta; tracking: Tracking; countryCode?: string; numArticles: number; + submitComponentEvent?: (event: OphanComponentEvent) => void; }): JSX.Element | null => { const url = addRegionIdAndTrackingParamsToSupportUrl( cta.baseUrl, @@ -114,6 +119,7 @@ const SecondaryCtaButton = ({
@@ -204,6 +210,7 @@ export const ContributionsEpicButtons = ({ amountsTestName={amountsTestName} amountsVariantName={amountsVariantName} countryCode={countryCode} + submitComponentEvent={submitComponentEvent} /> {secondaryCta?.type === SecondaryCtaType.Custom && !!secondaryCta.cta.baseUrl && @@ -213,6 +220,7 @@ export const ContributionsEpicButtons = ({ tracking={tracking} countryCode={countryCode} numArticles={numArticles} + submitComponentEvent={submitComponentEvent} /> )} diff --git a/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx b/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx index 30ecbe49f0a..12550aa3423 100644 --- a/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx +++ b/dotcom-rendering/src/components/marketing/epics/EpicButton.tsx @@ -6,6 +6,7 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import { ThemeProvider } from '@emotion/react'; +import type { OphanComponentEvent } from '@guardian/libs'; import { palette } from '@guardian/source-foundations'; import { Button as DSButton, @@ -14,6 +15,10 @@ import { } from '@guardian/source-react-components'; import React from 'react'; import type { ReactComponent } from '../lib/ReactComponent'; +import { + OPHAN_COMPONENT_EVENT_PRIMARY_CTA, + OPHAN_COMPONENT_EVENT_SECONDARY_CTA, +} from './utils/ophan'; // Custom theme for Button/LinkButton // See also `tertiaryButtonOverrides` below. @@ -41,6 +46,7 @@ type Props = { // Both using the same interface // eslint-disable-next-line @typescript-eslint/ban-types onClickAction: Function | Url; + submitComponentEvent?: (event: OphanComponentEvent) => void; children: React.ReactElement | string; priority?: 'primary' | 'secondary'; showArrow?: boolean; @@ -66,6 +72,7 @@ const tertiaryButtonOverrides = css` export const EpicButton: ReactComponent = (allProps: Props) => { const { onClickAction, + submitComponentEvent, children, showArrow = false, priority = 'primary', @@ -75,6 +82,16 @@ export const EpicButton: ReactComponent = (allProps: Props) => { ...props } = allProps; + const onButtonCtaClick = () => { + if (submitComponentEvent) { + submitComponentEvent( + priority == 'primary' + ? OPHAN_COMPONENT_EVENT_PRIMARY_CTA + : OPHAN_COMPONENT_EVENT_SECONDARY_CTA, + ); + } + }; + if (typeof onClickAction === 'string') { // LinkButton doesn't support 'tertiary' priority (unlike Button) // So we'll map that to 'primary' and apply a CSS override on both of @@ -85,6 +102,7 @@ export const EpicButton: ReactComponent = (allProps: Props) => { href={onClickAction} icon={icon ?? } iconSide="right" + onClick={onButtonCtaClick} target="_blank" rel="noopener noreferrer" priority={isTertiary ? 'primary' : priority} diff --git a/dotcom-rendering/src/components/marketing/epics/utils/ophan.ts b/dotcom-rendering/src/components/marketing/epics/utils/ophan.ts index 40ca85af8f1..5adac072903 100644 --- a/dotcom-rendering/src/components/marketing/epics/utils/ophan.ts +++ b/dotcom-rendering/src/components/marketing/epics/utils/ophan.ts @@ -6,10 +6,6 @@ import type { OphanComponentEvent } from '@guardian/libs'; const OPHAN_COMPONENT_ID_CTAS_VIEW = 'contributions-epic-ctas-view'; -const OPHAN_COMPONENT_ID_APPLEPAY_AUTHORISED = - 'contributions-epic-applepay-authorised'; -const OPHAN_COMPONENT_ID_APPLEPAY_VIEW = 'contributions-epic-applepay-view'; -const OPHAN_COMPONENT_ID_APPLEPAY_CTA = 'contributions-epic-applepay-cta'; const OPHAN_COMPONENT_ID_PRIMARY_CTA = 'contributions-epic-primary-cta'; const OPHAN_COMPONENT_ID_SECONDARY_CTA = 'contributions-epic-secondary-cta'; const OPHAN_COMPONENT_ID_REMINDER_VIEW = 'contributions-epic-reminder-view'; @@ -49,30 +45,6 @@ export const OPHAN_COMPONENT_EVENT_CTAS_VIEW: OphanComponentEvent = { action: 'CLICK', }; -export const OPHAN_COMPONENT_EVENT_APPLEPAY_VIEW: OphanComponentEvent = { - component: { - componentType: 'ACQUISITIONS_OTHER', - id: OPHAN_COMPONENT_ID_APPLEPAY_VIEW, - }, - action: 'VIEW', -}; - -export const OPHAN_COMPONENT_EVENT_APPLEPAY_AUTHORISED: OphanComponentEvent = { - component: { - componentType: 'ACQUISITIONS_OTHER', - id: OPHAN_COMPONENT_ID_APPLEPAY_AUTHORISED, - }, - action: 'CLICK', -}; - -export const OPHAN_COMPONENT_EVENT_APPLEPAY_CTA: OphanComponentEvent = { - component: { - componentType: 'ACQUISITIONS_OTHER', - id: OPHAN_COMPONENT_ID_APPLEPAY_CTA, - }, - action: 'CLICK', -}; - export const OPHAN_COMPONENT_EVENT_PRIMARY_CTA: OphanComponentEvent = { component: { componentType: 'ACQUISITIONS_OTHER',