Use destination field in choice cards (#14621)

tomrf1 · web-flow · commit e244e09b72eb · 2025-10-08T14:50:25.000+01:00
* Use destination field in choice cards

* fix storybook

* fix storybook

* remove dead code, unit tests

* test names
diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json
@@ -44,7 +44,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "11.3.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.8.1",
+		"@guardian/support-dotcom-components": "7.9.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "10.10.0",
diff --git a/dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx b/dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx
@@ -338,6 +338,7 @@ const withBannerData =
 					tracking,
 					submitComponentEvent,
 					design,
+					promoCodes,
 				};
 
 				return (
diff --git a/dotcom-rendering/src/components/marketing/banners/common/types.tsx b/dotcom-rendering/src/components/marketing/banners/common/types.tsx
@@ -80,4 +80,5 @@ export interface BannerRenderProps {
 	tracking: Tracking;
 	submitComponentEvent?: (componentEvent: ComponentEvent) => void;
 	design?: ConfigurableDesign;
+	promoCodes?: string[];
 }
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -33,7 +33,7 @@ import {
 } from '../../../../lib/useMatchMedia';
 import { getChoiceCards } from '../../lib/choiceCards';
 import type { ReactComponent } from '../../lib/ReactComponent';
-import { getChoiceCardUrl } from '../../lib/tracking';
+import { enrichSupportUrl, getChoiceCardUrl } from '../../lib/tracking';
 import { ThreeTierChoiceCards } from '../../shared/ThreeTierChoiceCards';
 import { bannerWrapper, validatedBannerWrapper } from '../common/BannerWrapper';
 import type { BannerRenderProps } from '../common/types';
@@ -132,6 +132,8 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	submitComponentEvent,
 	tracking,
 	design,
+	countryCode,
+	promoCodes,
 }: BannerRenderProps): JSX.Element => {
 	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
 
@@ -480,10 +482,15 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 							)}
 							<div css={styles.ctaContainer(isCollapsed)}>
 								<LinkButton
-									href={getChoiceCardUrl(
-										selectedChoiceCard,
-										mainOrMobileContent.primaryCta.ctaUrl,
-									)}
+									href={enrichSupportUrl({
+										baseUrl:
+											getChoiceCardUrl(
+												selectedChoiceCard,
+											),
+										tracking,
+										promoCodes: promoCodes ?? [],
+										countryCode,
+									})}
 									onClick={onCtaClick}
 									priority="primary"
 									cssOverrides={styles.linkButtonStyles}
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx
@@ -7,8 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import lzstring from 'lz-string';
 import {
 	choiceCardsSettings,
-	choiceCardsWithDestinationUrl,
-	choiceCardsWithDestinationUrlTwoCards,
+	choiceCardsWithMixedDestinations,
 } from '../../../lib/storybook';
 import {
 	contentNoHeading,
@@ -286,7 +285,7 @@ export const NoChoiceCardOrImage: Story = {
 	},
 };
 
-export const WithDestinationUrlAllCards: Story = {
+export const WithMixedDestinations: Story = {
 	name: 'With destinationUrl on all choice cards',
 	args: {
 		...meta.args,
@@ -302,39 +301,12 @@ export const WithDestinationUrlAllCards: Story = {
 			abTestVariant: 'THREE_TIER_CHOICE_CARDS',
 		},
 		choiceCardAmounts: regularChoiceCardAmounts,
-		choiceCardsSettings: choiceCardsWithDestinationUrl,
+		choiceCardsSettings: choiceCardsWithMixedDestinations,
 	},
 	parameters: {
 		docs: {
 			description: {
-				story: 'All choice cards have a destinationUrl configured. The banner should use these custom URLs instead of constructing URLs with product parameters.',
-			},
-		},
-	},
-};
-
-export const WithDestinationUrlTwoCards: Story = {
-	name: 'With destinationUrl in two choice cards',
-	args: {
-		...meta.args,
-		design: {
-			...design,
-			visual: {
-				kind: 'ChoiceCards',
-				buttonColour: stringToHexColour('E5E5E5'),
-			},
-		},
-		tracking: {
-			...tracking,
-			abTestVariant: 'THREE_TIER_CHOICE_CARDS',
-		},
-		choiceCardAmounts: regularChoiceCardAmounts,
-		choiceCardsSettings: choiceCardsWithDestinationUrlTwoCards,
-	},
-	parameters: {
-		docs: {
-			description: {
-				story: 'All choice cards have a destinationUrl configured. The banner should use these custom URLs instead of constructing URLs with product parameters.',
+				story: 'Two out of three choice cards have destination set to checkout.',
 			},
 		},
 	},
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx
@@ -10,7 +10,7 @@ import lzstring from 'lz-string';
 import React from 'react';
 import {
 	choiceCardsSettings,
-	choiceCardsWithDestinationUrl,
+	choiceCardsWithMixedDestinations,
 } from '../lib/storybook';
 import { ContributionsEpicUnvalidated as ContributionsEpic } from './ContributionsEpic';
 import { props } from './utils/storybook';
@@ -385,16 +385,16 @@ export const WithParagraphLinks: Story = {
 	},
 };
 
-export const WithThreeTierChoiceCardsAndCustomDestinationUrl: Story = {
-	name: 'ContributionsEpic with three tier choice cards and custom destination URL',
+export const WithThreeTierChoiceCardsAndMixedDestinations: Story = {
+	name: 'ContributionsEpic with three tier choice cards and mixed destinations',
 	args: {
 		...meta.args,
 		variant: {
 			...props.variant,
 			name: 'THREE_TIER_CHOICE_CARDS',
 			secondaryCta: undefined,
 			showChoiceCards: true,
-			choiceCardsSettings: choiceCardsWithDestinationUrl,
+			choiceCardsSettings: choiceCardsWithMixedDestinations,
 		},
 	},
 };
diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
@@ -184,7 +184,7 @@ export const ContributionsEpicButtons = ({
 
 		return {
 			text: cta.text,
-			baseUrl: getChoiceCardUrl(threeTierSelectedChoiceCard, cta.baseUrl),
+			baseUrl: getChoiceCardUrl(threeTierSelectedChoiceCard),
 		};
 	};
 
diff --git a/dotcom-rendering/src/components/marketing/lib/storybook.ts b/dotcom-rendering/src/components/marketing/lib/storybook.ts
@@ -97,7 +97,7 @@ export const choiceCardsSettings: ChoiceCardsSettings = {
 	],
 };
 
-export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
+export const choiceCardsWithMixedDestinations: ChoiceCardsSettings = {
 	choiceCards: [
 		{
 			product: {
@@ -106,8 +106,7 @@ export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
 			},
 			label: 'Support £5/month',
 			isDefault: false,
-			destinationUrl:
-				'https://support.theguardian.com/contribute/monthly?custom-destination=contribution',
+			destination: 'LandingPage',
 			benefits: [
 				{
 					copy: 'Give to the Guardian every month with Support',
@@ -121,8 +120,7 @@ export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
 			},
 			label: 'Support £12/month',
 			isDefault: true,
-			destinationUrl:
-				'https://support.theguardian.com/subscribe/monthly?custom-destination=supporter-plus',
+			destination: 'Checkout',
 			benefitsLabel:
 				'Unlock <strong>All-access digital</strong> benefits:',
 			benefits: [
@@ -142,63 +140,7 @@ export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
 			},
 			label: 'One-time support',
 			isDefault: false,
-			destinationUrl:
-				'https://support.theguardian.com/contribute/one-time?custom-destination=one-off',
-			benefits: [
-				{
-					copy: 'Support the Guardian with a one-time contribution',
-				},
-			],
-		},
-	],
-};
-
-export const choiceCardsWithDestinationUrlTwoCards: ChoiceCardsSettings = {
-	choiceCards: [
-		{
-			product: {
-				supportTier: 'Contribution',
-				ratePlan: 'Monthly',
-			},
-			label: 'Support £5/month',
-			isDefault: false,
-			destinationUrl: null,
-			benefits: [
-				{
-					copy: 'Give to the Guardian every month with Support',
-				},
-			],
-		},
-		{
-			product: {
-				supportTier: 'SupporterPlus',
-				ratePlan: 'Monthly',
-			},
-			label: 'Support £12/month',
-			isDefault: true,
-			destinationUrl:
-				'https://support.theguardian.com/subscribe/monthly?custom-destination=supporter-plus',
-			benefitsLabel:
-				'Unlock <strong>All-access digital</strong> benefits:',
-			benefits: [
-				{
-					copy: '<strong>Unlimited</strong> access to the Guardian app',
-				},
-				{ copy: 'Unlimited access to our new Feast App' },
-				{ copy: 'Ad-free reading on all your devices' },
-				{
-					copy: 'Exclusive newsletters for subscribers',
-				},
-			],
-		},
-		{
-			product: {
-				supportTier: 'OneOff',
-			},
-			label: 'One-time support',
-			isDefault: false,
-			destinationUrl:
-				'https://support.theguardian.com/contribute/one-time?custom-destination=one-off',
+			destination: 'Checkout',
 			benefits: [
 				{
 					copy: 'Support the Guardian with a one-time contribution',
diff --git a/dotcom-rendering/src/components/marketing/lib/tracking.test.ts b/dotcom-rendering/src/components/marketing/lib/tracking.test.ts
@@ -1,29 +1,5 @@
 import type { Tracking } from '@guardian/support-dotcom-components/dist/shared/types';
-import { addChoiceCardsParams, enrichSupportUrl } from './tracking';
-
-describe('addChoiceCardsParams', () => {
-	it('adds choice cards params to url without existing querystring', () => {
-		const result = addChoiceCardsParams(
-			'https://support.theguardian.com/contribute',
-			'ONE_OFF',
-			5,
-		);
-		expect(result).toEqual(
-			'https://support.theguardian.com/contribute?selected-contribution-type=ONE_OFF&selected-amount=5',
-		);
-	});
-
-	it('adds choice cards params to url with existing querystring', () => {
-		const result = addChoiceCardsParams(
-			'https://support.theguardian.com/contribute?test=test',
-			'ONE_OFF',
-			5,
-		);
-		expect(result).toEqual(
-			'https://support.theguardian.com/contribute?test=test&selected-contribution-type=ONE_OFF&selected-amount=5',
-		);
-	});
-});
+import { enrichSupportUrl, getChoiceCardUrl } from './tracking';
 
 describe('enrichSupportUrl', () => {
 	const tracking: Tracking = {
@@ -81,3 +57,99 @@ describe('enrichSupportUrl', () => {
 		);
 	});
 });
+
+describe('getChoiceCardUrl', () => {
+	// One-time
+	it('builds landing page url for one-time choice', () => {
+		const url = getChoiceCardUrl({
+			benefits: [],
+			isDefault: false,
+			label: 'label',
+			product: {
+				supportTier: 'OneOff',
+			},
+			destination: 'LandingPage',
+		});
+		expect(url).toEqual(
+			'https://support.theguardian.com/contribute?oneTime',
+		);
+	});
+	it('builds checkout page url for one-time choice', () => {
+		const url = getChoiceCardUrl({
+			benefits: [],
+			isDefault: false,
+			label: 'label',
+			product: {
+				supportTier: 'OneOff',
+			},
+			destination: 'Checkout',
+		});
+		expect(url).toEqual(
+			'https://support.theguardian.com/one-time-checkout',
+		);
+	});
+
+	// Recurring contribution
+	it('builds landing page url for recurring contribution choice', () => {
+		const url = getChoiceCardUrl({
+			benefits: [],
+			isDefault: false,
+			label: 'label',
+			product: {
+				supportTier: 'Contribution',
+				ratePlan: 'Monthly',
+			},
+			destination: 'LandingPage',
+		});
+		expect(url).toEqual(
+			'https://support.theguardian.com/contribute?product=Contribution&ratePlan=Monthly',
+		);
+	});
+	it('builds checkout page url for recurring contribution choice', () => {
+		const url = getChoiceCardUrl({
+			benefits: [],
+			isDefault: false,
+			label: 'label',
+			product: {
+				supportTier: 'Contribution',
+				ratePlan: 'Monthly',
+			},
+			destination: 'Checkout',
+		});
+		expect(url).toEqual(
+			'https://support.theguardian.com/checkout?product=Contribution&ratePlan=Monthly',
+		);
+	});
+
+	// SupporterPlus
+	it('builds landing page url for Supporter Plus choice', () => {
+		const url = getChoiceCardUrl({
+			benefits: [],
+			isDefault: false,
+			label: 'label',
+			product: {
+				supportTier: 'SupporterPlus',
+				ratePlan: 'Annual',
+			},
+			destination: 'LandingPage',
+		});
+		expect(url).toEqual(
+			'https://support.theguardian.com/contribute?product=SupporterPlus&ratePlan=Annual',
+		);
+	});
+	it('builds checkout page url for Supporter Plus choice', () => {
+		const url = getChoiceCardUrl({
+			benefits: [],
+			isDefault: false,
+			label: 'label',
+			product: {
+				supportTier: 'SupporterPlus',
+				ratePlan: 'Annual',
+			},
+			destination: 'Checkout',
+		});
+		expect(url).toEqual(
+			'https://support.theguardian.com/checkout?product=SupporterPlus&ratePlan=Annual',
+		);
+	});
+});
diff --git a/dotcom-rendering/src/components/marketing/lib/tracking.ts b/dotcom-rendering/src/components/marketing/lib/tracking.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -80,4 +80,5 @@ export interface BannerRenderProps {`
`80`	`80`	`tracking: Tracking;`
`81`	`81`	`submitComponentEvent?: (componentEvent: ComponentEvent) => void;`
`82`	`82`	`design?: ConfigurableDesign;`
	`83`	`+ promoCodes?: string[];`
`83`	`84`	`}`