Merge pull request #14227 from guardian/jm/choice-cards-configurable-destination

feat: add destinationUrl handling in DesignableBanner

Author: juabara

dotcom-rendering/package.json

@@ -43,7 +43,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.5.0",
+		"@guardian/support-dotcom-components": "7.6.2",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "7.75.1",

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -30,7 +30,7 @@ import {
 } from '../../../../lib/useMatchMedia';
 import { getChoiceCards } from '../../lib/choiceCards';
 import type { ReactComponent } from '../../lib/ReactComponent';
-import { addChoiceCardsProductParams } from '../../lib/tracking';
+import { getChoiceCardUrl } from '../../lib/tracking';
 import { ThreeTierChoiceCards } from '../../shared/ThreeTierChoiceCards';
 import { bannerWrapper, validatedBannerWrapper } from '../common/BannerWrapper';
 import type { BannerRenderProps } from '../common/types';
@@ -108,19 +108,6 @@ const buildChoiceCardSettings = (
 	return undefined;
 };
 
-const buildUrlForThreeTierChoiceCards = (
-	baseUrl: string,
-	selectedProduct: ChoiceCard['product'],
-) => {
-	return selectedProduct.supportTier === 'OneOff'
-		? baseUrl
-		: addChoiceCardsProductParams(
-				baseUrl,
-				selectedProduct.supportTier,
-				selectedProduct.ratePlan,
-		  );
-};
-
 const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	content,
 	onCloseClick,
@@ -160,11 +147,11 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	}, [iosAppBannerPresent, submitComponentEvent]);
 
 	const choiceCards = getChoiceCards(isTabletOrAbove, choiceCardsSettings);
-	const defaultProduct = choiceCards?.find((cc) => cc.isDefault)?.product;
-	const [
-		threeTierChoiceCardSelectedProduct,
-		setThreeTierChoiceCardSelectedProduct,
-	] = useState<ChoiceCard['product'] | undefined>(defaultProduct);
+	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
+
+	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
+		ChoiceCard | undefined
+	>(defaultChoiceCard);
 
 	// We can't render anything without a design
 	if (!design) {
@@ -379,7 +366,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 					</div>
 				)}
 
-				{!threeTierChoiceCardSelectedProduct && (
+				{!selectedChoiceCard && (
 					<div css={styles.outerImageCtaContainer}>
 						<div css={styles.innerImageCtaContainer}>
 							<DesignableBannerCtas
@@ -405,25 +392,21 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 				</div>
 
 				{choiceCards &&
-					threeTierChoiceCardSelectedProduct &&
+					selectedChoiceCard &&
 					mainOrMobileContent.primaryCta && (
 						<div css={styles.threeTierChoiceCardsContainer}>
 							<ThreeTierChoiceCards
-								selectedProduct={
-									threeTierChoiceCardSelectedProduct
-								}
-								setSelectedProduct={
-									setThreeTierChoiceCardSelectedProduct
-								}
+								selectedChoiceCard={selectedChoiceCard}
+								setSelectedChoiceCard={setSelectedChoiceCard}
 								choices={choiceCards}
 								id={'banner'}
 							/>
 
 							<div css={styles.ctaContainer}>
 								<LinkButton
-									href={buildUrlForThreeTierChoiceCards(
+									href={getChoiceCardUrl(
+										selectedChoiceCard,
 										mainOrMobileContent.primaryCta.ctaUrl,
-										threeTierChoiceCardSelectedProduct,
 									)}
 									onClick={onCtaClick}
 									priority="tertiary"

dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx

@@ -5,7 +5,11 @@ import type {
 } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { Meta, StoryObj } from '@storybook/react';
 import lzstring from 'lz-string';
-import { choiceCardsSettings } from '../../../lib/storybook';
+import {
+	choiceCardsSettings,
+	choiceCardsWithDestinationUrl,
+	choiceCardsWithDestinationUrlTwoCards,
+} from '../../../lib/storybook';
 import {
 	contentNoHeading,
 	design,
@@ -281,3 +285,57 @@ export const NoChoiceCardOrImage: Story = {
 		},
 	},
 };
+
+export const WithDestinationUrlAllCards: Story = {
+	name: 'With destinationUrl on all choice cards',
+	args: {
+		...meta.args,
+		design: {
+			...design,
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('E5E5E5'),
+			},
+		},
+		tracking: {
+			...tracking,
+			abTestVariant: 'THREE_TIER_CHOICE_CARDS',
+		},
+		choiceCardAmounts: regularChoiceCardAmounts,
+		choiceCardsSettings: choiceCardsWithDestinationUrl,
+	},
+	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.',
+			},
+		},
+	},
+};

dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx

@@ -8,7 +8,10 @@ import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import type { Meta, StoryObj } from '@storybook/react';
 import lzstring from 'lz-string';
 import React from 'react';
-import { choiceCardsSettings } from '../lib/storybook';
+import {
+	choiceCardsSettings,
+	choiceCardsWithDestinationUrl,
+} from '../lib/storybook';
 import { ContributionsEpicUnvalidated as ContributionsEpic } from './ContributionsEpic';
 import { props } from './utils/storybook';
 
@@ -381,3 +384,17 @@ export const WithParagraphLinks: Story = {
 		},
 	},
 };
+
+export const WithThreeTierChoiceCardsAndCustomDestinationUrl: Story = {
+	name: 'ContributionsEpic with three tier choice cards and custom destination URL',
+	args: {
+		...meta.args,
+		variant: {
+			...props.variant,
+			name: 'THREE_TIER_CHOICE_CARDS',
+			secondaryCta: undefined,
+			showChoiceCards: true,
+			choiceCardsSettings: choiceCardsWithDestinationUrl,
+		},
+	},
+};

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

@@ -18,9 +18,8 @@ import { useEffect } from 'react';
 import { useIsInView } from '../../../../lib/useIsInView';
 import { hasSetReminder } from '../../lib/reminders';
 import {
-	addChoiceCardsOneTimeParams,
-	addChoiceCardsProductParams,
 	enrichSupportUrl,
+	getChoiceCardUrl,
 	isSupportUrl,
 } from '../../lib/tracking';
 import {
@@ -139,7 +138,7 @@ interface ContributionsEpicButtonsProps {
 	submitComponentEvent?: (event: ComponentEvent) => void;
 	isReminderActive: boolean;
 	isSignedIn: boolean;
-	threeTierChoiceCardSelectedProduct?: ChoiceCard['product'];
+	threeTierSelectedChoiceCard?: ChoiceCard;
 	amountsTestName?: string;
 	amountsVariantName?: string;
 	promoCodes: string[];
@@ -153,7 +152,7 @@ export const ContributionsEpicButtons = ({
 	submitComponentEvent,
 	isReminderActive,
 	isSignedIn,
-	threeTierChoiceCardSelectedProduct,
+	threeTierSelectedChoiceCard,
 	amountsTestName,
 	amountsVariantName,
 	promoCodes,
@@ -179,25 +178,14 @@ export const ContributionsEpicButtons = ({
 	}
 
 	const getCta = (cta: Cta): Cta => {
-		if (threeTierChoiceCardSelectedProduct) {
-			if (threeTierChoiceCardSelectedProduct.supportTier === 'OneOff') {
-				return {
-					text: cta.text,
-					baseUrl: addChoiceCardsOneTimeParams(cta.baseUrl),
-				};
-			}
-
-			return {
-				text: cta.text,
-				baseUrl: addChoiceCardsProductParams(
-					cta.baseUrl,
-					threeTierChoiceCardSelectedProduct.supportTier,
-					threeTierChoiceCardSelectedProduct.ratePlan,
-				),
-			};
+		if (!threeTierSelectedChoiceCard?.product) {
+			return cta;
 		}
 
-		return cta;
+		return {
+			text: cta.text,
+			baseUrl: getChoiceCardUrl(threeTierSelectedChoiceCard, cta.baseUrl),
+		};
 	};
 
 	const openReminder = () => {

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

@@ -41,18 +41,18 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 		isTabletOrAbove,
 		variant.choiceCardsSettings,
 	);
-	const defaultProduct = choiceCards?.find((cc) => cc.isDefault)?.product;
-	const [
-		threeTierChoiceCardSelectedProduct,
-		setThreeTierChoiceCardSelectedProduct,
-	] = useState<ChoiceCard['product'] | undefined>(defaultProduct);
+
+	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
+	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
+		ChoiceCard | undefined
+	>(defaultChoiceCard);
 
 	return (
 		<>
-			{choiceCards && threeTierChoiceCardSelectedProduct && (
+			{choiceCards && selectedChoiceCard && (
 				<ThreeTierChoiceCards
-					selectedProduct={threeTierChoiceCardSelectedProduct}
-					setSelectedProduct={setThreeTierChoiceCardSelectedProduct}
+					selectedChoiceCard={selectedChoiceCard}
+					setSelectedChoiceCard={setSelectedChoiceCard}
 					choices={choiceCards}
 					id={'epic'}
 				/>
@@ -76,9 +76,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				submitComponentEvent={submitComponentEvent}
 				isReminderActive={isReminderActive}
 				isSignedIn={Boolean(fetchedEmail)}
-				threeTierChoiceCardSelectedProduct={
-					threeTierChoiceCardSelectedProduct
-				}
+				threeTierSelectedChoiceCard={selectedChoiceCard}
 				amountsTestName={amountsTestName}
 				amountsVariantName={amountsVariantName}
 				promoCodes={variant.promoCodes ?? []}