remove apple pay for now

guardian · Jan 3, 2024 · fb249d5 · fb249d5
1 parent 5ffb74d
commit fb249d5
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 58 deletions.
diff --git 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<EpicProps> = ({
 	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<EpicProps> = ({
 					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
@@ -57,13 +57,15 @@ const PrimaryCtaButton = ({
 	amountsTestName,
 	amountsVariantName,
 	numArticles,
+	submitComponentEvent,
 }: {
 	cta?: Cta;
 	tracking: Tracking;
 	countryCode?: string;
 	amountsTestName?: string;
 	amountsVariantName?: string;
 	numArticles: number;
+	submitComponentEvent?: (event: OphanComponentEvent) => void;
 }): JSX.Element | null => {
 	if (!cta) {
 		return null;
@@ -84,6 +86,7 @@ const PrimaryCtaButton = ({
 		<div css={buttonMarginStyles}>
 			<EpicButton
 				onClickAction={urlWithRegionAndTracking}
+				submitComponentEvent={submitComponentEvent}
 				showArrow={true}
 				data-ignore="global-link-styling"
 			>
@@ -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 = ({
 		<div css={buttonMarginStyles}>
 			<EpicButton
 				onClickAction={url}
+				submitComponentEvent={submitComponentEvent}
 				showArrow={true}
 				priority="secondary"
 			>
@@ -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
@@ -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<Props> = (allProps: Props) => {
 	const {
 		onClickAction,
+		submitComponentEvent,
 		children,
 		showArrow = false,
 		priority = 'primary',
@@ -75,6 +82,16 @@ export const EpicButton: ReactComponent<Props> = (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<Props> = (allProps: Props) => {
 					href={onClickAction}
 					icon={icon ?? <SvgArrowRightStraight />}
 					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
@@ -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',