Merge pull request #12449 from guardian/lp-add-us-landing-checkout-test

Changes for US ONLY - AB test new choice card journey to landing page
guardian · Sep 30, 2024 · d620494 · d620494
2 parents 5b3403f + 76fea97
commit d620494
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 11 deletions.
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.stories.tsx
@@ -87,6 +87,20 @@ export const WithThreeTierChoiceCards: Story = {
 	},
 };
 
+export const WithThreeTierChoiceCardsForUS: Story = {
+	name: 'Contributions Liveblog Epic with Three Tier Choice Cards for US',
+	args: {
+		...meta.args,
+		countryCode: 'US',
+		variant: {
+			...props.variant,
+			name: 'US_CHECKOUT_PAGE',
+			secondaryCta: undefined,
+			showChoiceCards: true,
+		},
+	},
+};
+
 export const WithNewsletterSignup: Story = {
 	name: 'ContributionsEpic with newsletter signup',
 	args: {

diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx
@@ -154,6 +154,8 @@ const getChoiceCardData = (choiceCardVariant: string): ChoiceInfo[] => {
 	switch (choiceCardVariant) {
 		case 'US_THREE_TIER_CHOICE_CARDS':
 			return ChoiceCardTestData_US;
+		case 'US_CHECKOUT_THREE_TIER_CHOICE_CARDS':
+			return ChoiceCardTestData_US;
 		default:
 			return ChoiceCardTestData_REGULAR;
 	}

diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
@@ -20,6 +20,7 @@ import { useEffect } from 'react';
 import { useIsInView } from '../../../../lib/useIsInView';
 import { hasSetReminder } from '../../lib/reminders';
 import {
+	addChoiceCardsOneTimeParams,
 	addChoiceCardsParams,
 	addChoiceCardsProductParams,
 	addRegionIdAndTrackingParamsToSupportUrl,
@@ -189,18 +190,25 @@ export const ContributionsEpicButtons = ({
 	}
 
 	const getChoiceCardCta = (cta: Cta): Cta => {
-		if (
-			showChoiceCards &&
-			variantOfChoiceCard === 'US_THREE_TIER_CHOICE_CARDS'
-		) {
+		/** In the US - direct 50 % traffic to the checkout page and 50 % traffic to the landing page for the AB test  */
+
+		if (showChoiceCards && countryCode === 'US') {
 			if (threeTierChoiceCardSelectedProduct === 'OneOff') {
-				/** OneOff payments are not supported by the generic checkout yet */
+				if (
+					variantOfChoiceCard ===
+					'US_CHECKOUT_THREE_TIER_CHOICE_CARDS'
+				) {
+					return {
+						text: cta.text,
+						baseUrl: addChoiceCardsParams(
+							'https://support.theguardian.com/contribute/checkout',
+							'ONE_OFF',
+						),
+					};
+				}
 				return {
 					text: cta.text,
-					baseUrl: addChoiceCardsParams(
-						'https://support.theguardian.com/contribute/checkout',
-						'ONE_OFF',
-					),
+					baseUrl: addChoiceCardsOneTimeParams(cta.baseUrl),
 				};
 			}
 
@@ -211,11 +219,15 @@ export const ContributionsEpicButtons = ({
 					? threeTierChoiceCardAmounts['Monthly'][countryGroupId]
 							.Contribution
 					: undefined;
+			const url =
+				variantOfChoiceCard === 'US_CHECKOUT_THREE_TIER_CHOICE_CARDS'
+					? 'https://support.theguardian.com/checkout'
+					: cta.baseUrl;
 
 			return {
 				text: cta.text,
 				baseUrl: addChoiceCardsProductParams(
-					'https://support.theguardian.com/checkout',
+					url,
 					threeTierChoiceCardSelectedProduct,
 					'Monthly',
 					contributionAmount,

diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx
@@ -52,8 +52,13 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 		setThreeTierChoiceCardSelectedProduct,
 	] = useState<SupportTier>('SupporterPlus');
 
+	const showUSSupportCheckout =
+		showChoiceCards && variant.name.includes('US_CHECKOUT_PAGE');
+
 	const variantOfChoiceCard =
-		countryCode === 'US'
+		countryCode === 'US' && showUSSupportCheckout
+			? 'US_CHECKOUT_THREE_TIER_CHOICE_CARDS'
+			: countryCode === 'US'
 			? 'US_THREE_TIER_CHOICE_CARDS'
 			: 'THREE_TIER_CHOICE_CARDS';
 

diff --git a/dotcom-rendering/src/components/marketing/lib/tracking.ts b/dotcom-rendering/src/components/marketing/lib/tracking.ts
@@ -262,6 +262,12 @@ export const addChoiceCardsParams = (
 	return `${url}${alreadyHasQueryString ? '&' : '?'}${newParams}`;
 };
 
+export const addChoiceCardsOneTimeParams = (url: string): string => {
+	const newParams = `oneTime`;
+	const alreadyHasQueryString = url.includes('?');
+	return `${url}${alreadyHasQueryString ? '&' : '?'}${newParams}`;
+};
+
 export const addChoiceCardsProductParams = (
 	url: string,
 	product: string,