Use product and ratePlan qs params over amounts for support epic

dotcom-rendering/package.json

@@ -52,7 +52,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "6.0.0",
 		"@guardian/source-development-kitchen": "5.0.0",
-		"@guardian/support-dotcom-components": "2.6.3",
+		"@guardian/support-dotcom-components": "2.9.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.45.3",
 		"@sentry/browser": "7.75.1",

dotcom-rendering/src/components/marketing/banners/utils/storybook.ts

@@ -6,11 +6,9 @@
 import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import type {
 	BannerProps,
-	Tracking,
-} from '@guardian/support-dotcom-components/dist/shared/src/types';
-import type {
 	ConfigurableDesign,
 	HexColour,
+	Tracking,
 } from '@guardian/support-dotcom-components/dist/shared/src/types';
 
 export const tracking: Tracking = {
@@ -139,6 +137,9 @@ export const design: ConfigurableDesign = {
 			filledProgress: stringToHexColour('052962'),
 			progressBarBackground: stringToHexColour('cccccc'),
 			goalMarker: stringToHexColour('000000'),
+			goalColour: stringToHexColour('000000'),
+			headlineColour: stringToHexColour('000000'),
+			totalColour: stringToHexColour('000000'),
 		},
 	},
 };

dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.ts

@@ -2,7 +2,7 @@ import type { ChoiceInfo } from './ThreeTierChoiceCards';
 
 export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 	{
-		supportTier: 'support',
+		supportTier: 'Contribution',
 		label: (amount: number, currencySymbol: string): string =>
 			`Support ${currencySymbol}${amount}/month`,
 		benefitsLabel: 'Support',
@@ -12,7 +12,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 		recommended: false,
 	},
 	{
-		supportTier: 'allAccess',
+		supportTier: 'SupporterPlus',
 		label: (amount: number, currencySymbol: string): string =>
 			`Support ${currencySymbol}${amount}/month`,
 		benefitsLabel: 'All-access digital',
@@ -25,7 +25,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 		recommended: true,
 	},
 	{
-		supportTier: 'other',
+		supportTier: 'OneOff',
 		label: (): string => 'Support with another amount',
 		benefitsLabel: undefined,
 		benefits: () => ['We welcome support of any size, any time'],
@@ -35,7 +35,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 
 export const ChoiceCardTestData_US: ChoiceInfo[] = [
 	{
-		supportTier: 'support',
+		supportTier: 'Contribution',
 		label: (amount: number, currencySymbol: string): string =>
 			`Support ${currencySymbol}${amount}/month`,
 		benefitsLabel: 'Support',
@@ -45,7 +45,7 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
 		recommended: false,
 	},
 	{
-		supportTier: 'allAccess',
+		supportTier: 'SupporterPlus',
 		label: (amount: number, currencySymbol: string): string =>
 			`Support ${currencySymbol}${amount}/month`,
 		benefitsLabel: 'All-access digital',
@@ -58,7 +58,7 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
 		recommended: true,
 	},
 	{
-		supportTier: 'other',
+		supportTier: 'OneOff',
 		label: (amount: number, currencySymbol: string): string =>
 			`Support once from just ${currencySymbol}1`,
 		benefitsLabel: undefined,

dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx

@@ -140,8 +140,8 @@ const RecommendedPill = () => {
 };
 
 type ThreeTierChoiceCardsProps = {
-	selectedAmount: number;
-	setSelectedAmount: Dispatch<SetStateAction<number>>;
+	selectedProduct: SupportTier;
+	setSelectedProduct: Dispatch<SetStateAction<SupportTier>>;
 	countryCode?: string;
 	variantOfChoiceCard: string;
 };
@@ -157,8 +157,8 @@ const getChoiceCardData = (choiceCardVariant: string): ChoiceInfo[] => {
 
 export const ThreeTierChoiceCards = ({
 	countryCode,
-	selectedAmount,
-	setSelectedAmount,
+	selectedProduct,
+	setSelectedProduct,
 	variantOfChoiceCard,
 }: ThreeTierChoiceCardsProps) => {
 	const currencySymbol = getLocalCurrencySymbol(countryCode);
@@ -185,7 +185,7 @@ export const ThreeTierChoiceCards = ({
 							supportTier,
 							countryGroupId,
 						);
-						const selected = selectedAmount === choiceAmount;
+						const selected = selectedProduct === supportTier;
 
 						return (
 							<div
@@ -219,9 +219,9 @@ export const ThreeTierChoiceCards = ({
 											) : undefined
 										}
 										checked={selected}
-										onChange={() =>
-											setSelectedAmount(choiceAmount)
-										}
+										onChange={() => {
+											setSelectedProduct(supportTier);
+										}}
 									/>
 								</div>
 							</div>

dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx

@@ -6,9 +6,11 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { OphanComponentEvent } from '@guardian/libs';
-import { isUndefined } from '@guardian/libs';
 import { space } from '@guardian/source/foundations';
-import { SecondaryCtaType } from '@guardian/support-dotcom-components';
+import {
+	countryCodeToCountryGroupId,
+	SecondaryCtaType,
+} from '@guardian/support-dotcom-components';
 import type { EpicVariant } from '@guardian/support-dotcom-components/dist/shared/src/types/abTests/epic';
 import type {
 	Cta,
@@ -19,6 +21,7 @@ import { useIsInView } from '../../../../lib/useIsInView';
 import { hasSetReminder } from '../../lib/reminders';
 import {
 	addChoiceCardsParams,
+	addChoiceCardsProductParams,
 	addRegionIdAndTrackingParamsToSupportUrl,
 	isSupportUrl,
 } from '../../lib/tracking';
@@ -27,6 +30,10 @@ import {
 	OPHAN_COMPONENT_EVENT_CTAS_VIEW,
 	OPHAN_COMPONENT_EVENT_REMINDER_OPEN,
 } from '../utils/ophan';
+import {
+	type SupportTier,
+	threeTierChoiceCardAmounts,
+} from '../utils/threeTierChoiceCardAmounts';
 import { EpicButton } from './EpicButton';
 
 const paymentImageStyles = css`
@@ -138,10 +145,10 @@ interface ContributionsEpicButtonsProps {
 	submitComponentEvent?: (event: OphanComponentEvent) => void;
 	isReminderActive: boolean;
 	isSignedIn: boolean;
+	threeTierChoiceCardSelectedProduct: SupportTier;
 	showChoiceCards?: boolean;
 	amountsTestName?: string;
 	amountsVariantName?: string;
-	threeTierChoiceCardSelectedAmount?: number;
 	numArticles: number;
 	variantOfChoiceCard?: string;
 }
@@ -155,7 +162,7 @@ export const ContributionsEpicButtons = ({
 	isReminderActive,
 	isSignedIn,
 	showChoiceCards,
-	threeTierChoiceCardSelectedAmount,
+	threeTierChoiceCardSelectedProduct,
 	amountsTestName,
 	amountsVariantName,
 	numArticles,
@@ -184,39 +191,60 @@ export const ContributionsEpicButtons = ({
 	const getChoiceCardCta = (cta: Cta): Cta => {
 		if (
 			showChoiceCards &&
-			variantOfChoiceCard === 'US_THREE_TIER_CHOICE_CARDS' &&
-			!isUndefined(threeTierChoiceCardSelectedAmount)
+			variantOfChoiceCard === 'US_THREE_TIER_CHOICE_CARDS'
 		) {
-			if (threeTierChoiceCardSelectedAmount === 0) {
+			if (threeTierChoiceCardSelectedProduct === 'OneOff') {
+				/** OneOff payments are not supported by the generic checkout yet */
 				return {
 					text: cta.text,
 					baseUrl: addChoiceCardsParams(
-						'https://support.theguardian.com/contribute/checkout?selected-contribution-type=one_off',
+						'https://support.theguardian.com/contribute/checkout',
 						'ONE_OFF',
-						threeTierChoiceCardSelectedAmount,
 					),
 				};
 			}
+
+			/** Contribution amount is variable, unlike the SupporterPlus amount which is fixed */
+			const countryGroupId = countryCodeToCountryGroupId(countryCode);
+			const contributionAmount =
+				threeTierChoiceCardSelectedProduct === 'Contribution'
+					? threeTierChoiceCardAmounts[countryGroupId].Contribution
+					: undefined;
+
 			return {
 				text: cta.text,
-				baseUrl: addChoiceCardsParams(
-					'https://support.theguardian.com/contribute/checkout',
-					'MONTHLY',
-					threeTierChoiceCardSelectedAmount,
+				baseUrl: addChoiceCardsProductParams(
+					'https://support.theguardian.com/checkout',
+					threeTierChoiceCardSelectedProduct,
+					'Monthly',
+					contributionAmount,
 				),
 			};
 		}
+
+		/** Not in the US - direct taffic to the landing page */
 		if (
 			showChoiceCards &&
-			variantOfChoiceCard === 'THREE_TIER_CHOICE_CARDS' &&
-			!isUndefined(threeTierChoiceCardSelectedAmount)
+			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: addChoiceCardsParams(
+				baseUrl: addChoiceCardsProductParams(
 					cta.baseUrl,
-					'MONTHLY',
-					threeTierChoiceCardSelectedAmount,
+					threeTierChoiceCardSelectedProduct,
+					'Monthly',
 				),
 			};
 		}

dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx

@@ -2,7 +2,7 @@ import type { EpicProps } from '@guardian/support-dotcom-components/dist/shared/
 import { useState } from 'react';
 import type { ReactComponent } from '../../lib/ReactComponent';
 import { ThreeTierChoiceCards } from '../ThreeTierChoiceCards';
-import { getDefaultThreeTierAmount } from '../utils/threeTierChoiceCardAmounts';
+import type { SupportTier } from '../utils/threeTierChoiceCardAmounts';
 import { ContributionsEpicButtons } from './ContributionsEpicButtons';
 import { ContributionsEpicReminder } from './ContributionsEpicReminder';
 
@@ -43,11 +43,14 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 	const showChoiceCards =
 		variant.showChoiceCards && !isNonVatCompliantCountry;
 
-	const defaultThreeTierAmount = getDefaultThreeTierAmount(countryCode);
+	/**
+	 * This corresponds to the products in the Product API
+	 * @see https://product-catalog.guardianapis.com/product-catalog.json
+	 */
 	const [
-		threeTierChoiceCardSelectedAmount,
-		setThreeTierChoiceCardSelectedAmount,
-	] = useState<number>(defaultThreeTierAmount);
+		threeTierChoiceCardSelectedProduct,
+		setThreeTierChoiceCardSelectedProduct,
+	] = useState<SupportTier>('SupporterPlus');
 
 	const variantOfChoiceCard =
 		countryCode === 'US'
@@ -59,8 +62,8 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 			{showChoiceCards && (
 				<ThreeTierChoiceCards
 					countryCode={countryCode}
-					selectedAmount={threeTierChoiceCardSelectedAmount}
-					setSelectedAmount={setThreeTierChoiceCardSelectedAmount}
+					selectedProduct={threeTierChoiceCardSelectedProduct}
+					setSelectedProduct={setThreeTierChoiceCardSelectedProduct}
 					variantOfChoiceCard={variantOfChoiceCard}
 				/>
 			)}
@@ -96,8 +99,8 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				isReminderActive={isReminderActive}
 				isSignedIn={Boolean(fetchedEmail)}
 				showChoiceCards={showChoiceCards}
-				threeTierChoiceCardSelectedAmount={
-					threeTierChoiceCardSelectedAmount
+				threeTierChoiceCardSelectedProduct={
+					threeTierChoiceCardSelectedProduct
 				}
 				amountsTestName={amountsTestName}
 				amountsVariantName={amountsVariantName}

dotcom-rendering/src/components/marketing/epics/utils/threeTierChoiceCardAmounts.ts

@@ -1,50 +1,42 @@
-import {
-	countryCodeToCountryGroupId,
-	type CountryGroupId,
-} from '@guardian/support-dotcom-components';
+import { type CountryGroupId } from '@guardian/support-dotcom-components';
 
-export type SupportTier = 'support' | 'allAccess' | 'other';
+export type SupportTier = 'Contribution' | 'SupporterPlus' | 'OneOff';
 
 // ToDo: fetch this in a way that isn't hardcoded
 export const threeTierChoiceCardAmounts = {
 	GBPCountries: {
-		support: 4,
-		allAccess: 12,
-		other: 0,
+		Contribution: 4,
+		SupporterPlus: 12,
+		OneOff: 0,
 	},
 	UnitedStates: {
-		support: 5,
-		allAccess: 15,
-		other: 0,
+		Contribution: 5,
+		SupporterPlus: 15,
+		OneOff: 0,
 	},
 	AUDCountries: {
-		support: 10,
-		allAccess: 20,
-		other: 0,
+		Contribution: 10,
+		SupporterPlus: 20,
+		OneOff: 0,
 	},
 	EURCountries: {
-		support: 4,
-		allAccess: 12,
-		other: 0,
+		Contribution: 4,
+		SupporterPlus: 12,
+		OneOff: 0,
 	},
 	NZDCountries: {
-		support: 10,
-		allAccess: 20,
-		other: 0,
+		Contribution: 10,
+		SupporterPlus: 20,
+		OneOff: 0,
 	},
 	Canada: {
-		support: 5,
-		allAccess: 15,
-		other: 0,
+		Contribution: 5,
+		SupporterPlus: 15,
+		OneOff: 0,
 	},
 	International: {
-		support: 3,
-		allAccess: 15,
-		other: 0,
+		Contribution: 3,
+		SupporterPlus: 15,
+		OneOff: 0,
 	},
 } as const satisfies Record<CountryGroupId, Record<SupportTier, number>>;
-
-export function getDefaultThreeTierAmount(countryCode?: string): number {
-	const countryGroupId = countryCodeToCountryGroupId(countryCode);
-	return threeTierChoiceCardAmounts[countryGroupId].allAccess;
-}