Merge pull request #13740 from guardian/tf-choice-cards-benefits

charleycampbell · web-flow · commit fed638103031 · 2025-04-08T10:50:14.000+01:00
Shorter benefits copy on banner choice cards
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBannerV2.tsx
@@ -39,6 +39,7 @@ import {
 import { ThreeTierChoiceCards } from '../../epics/ThreeTierChoiceCards';
 import type { SupportTier } from '../../epics/utils/threeTierChoiceCardAmounts';
 import { useReminder } from '../../hooks/useReminder';
+import { getChoiceCardData } from '../../lib/choiceCards';
 import type { ReactComponent } from '../../lib/ReactComponent';
 import {
 	addChoiceCardsProductParams,
@@ -447,7 +448,10 @@ const DesignableBannerV2: ReactComponent<BannerRenderProps> = ({
 							setSelectedProduct={
 								setThreeTierChoiceCardSelectedProduct
 							}
-							variantOfChoiceCard={'THREE_TIER_CHOICE_CARDS'}
+							choices={getChoiceCardData(
+								isTabletOrAbove,
+								countryCode,
+							)}
 						/>
 
 						<div css={styles.ctaContainer}>
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx
@@ -330,20 +330,6 @@ export const WithThreeTierChoiceCardsForUS: Story = {
 	},
 };
 
-export const WithThreeTierChoiceCardsSimplifiedForUS: Story = {
-	name: 'ContributionsEpic with three tier choice cards for US (Simplified third choice)',
-	args: {
-		...meta.args,
-		countryCode: 'US',
-		variant: {
-			...props.variant,
-			name: 'TEST_EPIC_SIMPLIFIED_THIRD_CHOICE_CARD',
-			secondaryCta: undefined,
-			showChoiceCards: true,
-		},
-	},
-};
-
 export const WithThreeTierDiscountChoiceCards: Story = {
 	name: 'ContributionsEpic with discounted three tier choice cards',
 	args: {
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx
@@ -269,18 +269,8 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 	openCmp,
 	hasConsentForArticleCount,
 }: EpicProps) => {
-	const {
-		image,
-		showChoiceCards,
-		tickerSettings,
-		choiceCardAmounts,
-		newsletterSignup,
-	} = variant;
-
-	const isSimpleThirdChoiceCardInTestVariant: boolean =
-		(showChoiceCards &&
-			variant.name.includes('EPIC_SIMPLIFIED_THIRD_CHOICE_CARD')) ??
-		false;
+	const { image, tickerSettings, choiceCardAmounts, newsletterSignup } =
+		variant;
 
 	const { hasOptedOut, onArticleCountOptIn, onArticleCountOptOut } =
 		useArticleCountOptOut();
@@ -434,9 +424,6 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 					submitComponentEvent={submitComponentEvent}
 					amountsTestName={choiceCardAmounts?.testName}
 					amountsVariantName={choiceCardAmounts?.variantName}
-					isSimpleThirdChoiceCardInTestVariant={
-						isSimpleThirdChoiceCardInTestVariant
-					}
 				/>
 			)}
 
diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx
@@ -1,7 +1,9 @@
 import { isUndefined } from '@guardian/libs';
 import type { ChoiceInfo } from './ThreeTierChoiceCards';
 
-export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
+export const ChoiceCardTestData_REGULAR = (
+	longerBenefits: boolean,
+): ChoiceInfo[] => [
 	{
 		supportTier: 'Contribution',
 		label: (amount: number, currencySymbol: string): string =>
@@ -36,13 +38,10 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 			}
 		},
 		benefitsLabel: 'All-access digital',
-		benefits: () => [
-			'Unlimited access to the Guardian app',
-			'Unlimited access to our new Feast App',
-			'Ad-free reading on all your devices',
-			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
-			'Far fewer asks for support',
-		],
+		benefits: () =>
+			longerBenefits
+				? fullSupporterPlusBenefits
+				: shorterSupporterPlusBenefits,
 		recommended: true,
 	},
 	{
@@ -54,7 +53,9 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 	},
 ];
 
-export const ChoiceCardTestData_US: ChoiceInfo[] = [
+export const ChoiceCardTestData_US = (
+	longerBenefits: boolean,
+): ChoiceInfo[] => [
 	{
 		supportTier: 'Contribution',
 		label: (amount: number, currencySymbol: string): string =>
@@ -70,13 +71,10 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
 		label: (amount: number, currencySymbol: string): string =>
 			`Support ${currencySymbol}${amount}/month`,
 		benefitsLabel: 'All-access digital',
-		benefits: () => [
-			'Unlimited access to the Guardian app',
-			'Unlimited access to our new Feast App',
-			'Ad-free reading on all your devices',
-			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
-			'Far fewer asks for support',
-		],
+		benefits: () =>
+			longerBenefits
+				? fullSupporterPlusBenefits
+				: shorterSupporterPlusBenefits,
 		recommended: true,
 	},
 	{
@@ -91,38 +89,16 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
 	},
 ];
 
-export const ChoiceCardTestData_US_SIMPLIFIED: ChoiceInfo[] = [
-	{
-		supportTier: 'Contribution',
-		label: (amount: number, currencySymbol: string): string =>
-			`Support ${currencySymbol}${amount}/month`,
-		benefitsLabel: 'Support',
-		benefits: () => [
-			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
-		],
-		recommended: false,
-	},
-	{
-		supportTier: 'SupporterPlus',
-		label: (amount: number, currencySymbol: string): string =>
-			`Support ${currencySymbol}${amount}/month`,
-		benefitsLabel: 'All-access digital',
-		benefits: () => [
-			'Unlimited access to the Guardian app',
-			'Unlimited access to our new Feast App',
-			'Ad-free reading on all your devices',
-			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
-			'Far fewer asks for support',
-		],
-		recommended: true,
-	},
-	{
-		supportTier: 'OneOff',
-		label: (): string => `Support with another amount`,
-		benefitsLabel: undefined,
-		benefits: () => [
-			`We welcome all support, whether big or small, one-time or recurring`,
-		],
-		recommended: false,
-	},
+const fullSupporterPlusBenefits = [
+	'Unlimited access to the Guardian app',
+	'Unlimited access to our new Feast App',
+	'Ad-free reading on all your devices',
+	'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
+	'Far fewer asks for support',
+];
+
+const shorterSupporterPlusBenefits = [
+	'Unlimited access to the Guardian app and Feast app',
+	'Ad-free reading on all your devices',
+	'Exclusive supporter newsletter',
 ];
diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx
@@ -22,11 +22,6 @@ import {
 	getLocalCurrencySymbol,
 } from '@guardian/support-dotcom-components';
 import type { Dispatch, SetStateAction } from 'react';
-import {
-	ChoiceCardTestData_REGULAR,
-	ChoiceCardTestData_US,
-	ChoiceCardTestData_US_SIMPLIFIED,
-} from './ThreeTierChoiceCardData';
 import type {
 	SupportRatePlan,
 	SupportTier,
@@ -186,41 +181,28 @@ type ThreeTierChoiceCardsProps = {
 	selectedProduct: SupportTier;
 	setSelectedProduct: Dispatch<SetStateAction<SupportTier>>;
 	countryCode?: string;
-	variantOfChoiceCard: string;
+	choices: ChoiceInfo[];
 	supporterPlusDiscount?: number;
 };
 
-const getChoiceCardData = (choiceCardVariant: string): ChoiceInfo[] => {
-	switch (choiceCardVariant) {
-		case 'US_THREE_TIER_CHOICE_CARDS':
-			return ChoiceCardTestData_US;
-		case 'US_SIMPLIFY_THIRD_CHOICE_CARD':
-			return ChoiceCardTestData_US_SIMPLIFIED;
-		default:
-			return ChoiceCardTestData_REGULAR;
-	}
-};
-
 export const ThreeTierChoiceCards = ({
 	countryCode,
 	selectedProduct,
 	setSelectedProduct,
-	variantOfChoiceCard,
+	choices,
 	supporterPlusDiscount,
 }: ThreeTierChoiceCardsProps) => {
 	const currencySymbol = getLocalCurrencySymbol(countryCode);
 	const countryGroupId = countryCodeToCountryGroupId(countryCode);
 
-	const Choices = getChoiceCardData(variantOfChoiceCard);
-
 	return (
 		<RadioGroup
 			cssOverrides={css`
 				margin-top: ${space[6]}px;
 			`}
 		>
 			<Stack space={3}>
-				{Choices.map(
+				{choices.map(
 					({
 						supportTier,
 						label,
diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
@@ -21,7 +21,6 @@ import { useIsInView } from '../../../../lib/useIsInView';
 import { hasSetReminder } from '../../lib/reminders';
 import {
 	addChoiceCardsOneTimeParams,
-	addChoiceCardsParams,
 	addChoiceCardsProductParams,
 	addRegionIdAndTrackingParamsToSupportUrl,
 	isSupportUrl,
@@ -151,7 +150,6 @@ interface ContributionsEpicButtonsProps {
 	amountsTestName?: string;
 	amountsVariantName?: string;
 	numArticles: number;
-	variantOfChoiceCard?: string;
 }
 
 export const ContributionsEpicButtons = ({
@@ -167,7 +165,6 @@ export const ContributionsEpicButtons = ({
 	amountsTestName,
 	amountsVariantName,
 	numArticles,
-	variantOfChoiceCard,
 }: ContributionsEpicButtonsProps): JSX.Element | null => {
 	const [hasBeenSeen, setNode] = useIsInView({
 		debounce: true,
@@ -190,22 +187,8 @@ export const ContributionsEpicButtons = ({
 	}
 
 	const getChoiceCardCta = (cta: Cta): Cta => {
-		/** 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 (showChoiceCards) {
 			if (threeTierChoiceCardSelectedProduct === 'OneOff') {
-				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: addChoiceCardsOneTimeParams(cta.baseUrl),
@@ -219,45 +202,14 @@ 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(
-					url,
-					threeTierChoiceCardSelectedProduct,
-					'Monthly',
-					contributionAmount,
-				),
-			};
-		}
-
-		/** Not in the US - direct taffic to the landing page */
-		if (
-			showChoiceCards &&
-			variantOfChoiceCard === 'THREE_TIER_CHOICE_CARDS'
-		) {
-			if (threeTierChoiceCardSelectedProduct === 'OneOff') {
-				/**
-				 * OneOff payments are not supported by the generic checkout yet.
-				 * We also have no way of highlighting to a contributor that "OneOff"
-				 * was selected, so we just send them to the homepage.
-				 */
-				return {
-					text: cta.text,
-					baseUrl: 'https://support.theguardian.com/contribute',
-				};
-			}
 
 			return {
 				text: cta.text,
 				baseUrl: addChoiceCardsProductParams(
 					cta.baseUrl,
 					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
@@ -1,5 +1,6 @@
 import type { EpicProps } from '@guardian/support-dotcom-components/dist/shared/types/props/epic';
 import { useState } from 'react';
+import { getChoiceCardData } from '../../lib/choiceCards';
 import type { ReactComponent } from '../../lib/ReactComponent';
 import { ThreeTierChoiceCards } from '../ThreeTierChoiceCards';
 import type { SupportTier } from '../utils/threeTierChoiceCardAmounts';
@@ -13,7 +14,6 @@ interface OnReminderOpen {
 type Props = EpicProps & {
 	amountsTestName?: string;
 	amountsVariantName?: string;
-	isSimpleThirdChoiceCardInTestVariant?: boolean;
 };
 
 export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
@@ -26,7 +26,6 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 	fetchEmail,
 	amountsTestName,
 	amountsVariantName,
-	isSimpleThirdChoiceCardInTestVariant,
 }: Props): JSX.Element => {
 	// reminders
 	const [fetchedEmail, setFetchedEmail] = useState<string | undefined>(
@@ -57,21 +56,14 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 	const hasSupporterPlusPromoCode =
 		variant.cta?.baseUrl.includes('BLACK_FRIDAY_DISCOUNT_2024') ?? false;
 
-	const variantOfChoiceCard =
-		countryCode === 'US' && isSimpleThirdChoiceCardInTestVariant
-			? 'US_SIMPLIFY_THIRD_CHOICE_CARD'
-			: countryCode === 'US'
-			? 'US_THREE_TIER_CHOICE_CARDS'
-			: 'THREE_TIER_CHOICE_CARDS';
-
 	return (
 		<>
 			{showChoiceCards && (
 				<ThreeTierChoiceCards
 					countryCode={countryCode}
 					selectedProduct={threeTierChoiceCardSelectedProduct}
 					setSelectedProduct={setThreeTierChoiceCardSelectedProduct}
-					variantOfChoiceCard={variantOfChoiceCard}
+					choices={getChoiceCardData(true, countryCode)}
 					supporterPlusDiscount={
 						hasSupporterPlusPromoCode ? 0.5 : undefined
 					}
@@ -115,7 +107,6 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				amountsTestName={amountsTestName}
 				amountsVariantName={amountsVariantName}
 				numArticles={articleCounts.for52Weeks}
-				variantOfChoiceCard={variantOfChoiceCard}
 			/>
 			{isReminderActive && showReminderFields && (
 				<ContributionsEpicReminder
diff --git a/dotcom-rendering/src/components/marketing/lib/choiceCards.ts b/dotcom-rendering/src/components/marketing/lib/choiceCards.ts
