feat: add support for contributions epic choice cards with custom destination URL

Author: Juarez Mota

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

@@ -139,7 +139,7 @@ interface ContributionsEpicButtonsProps {
 	submitComponentEvent?: (event: ComponentEvent) => void;
 	isReminderActive: boolean;
 	isSignedIn: boolean;
-	threeTierChoiceCardSelectedProduct?: ChoiceCard['product'];
+	threeTierSelectedChoiceCard?: ChoiceCard;
 	amountsTestName?: string;
 	amountsVariantName?: string;
 	promoCodes: string[];
@@ -153,7 +153,7 @@ export const ContributionsEpicButtons = ({
 	submitComponentEvent,
 	isReminderActive,
 	isSignedIn,
-	threeTierChoiceCardSelectedProduct,
+	threeTierSelectedChoiceCard,
 	amountsTestName,
 	amountsVariantName,
 	promoCodes,
@@ -179,25 +179,32 @@ export const ContributionsEpicButtons = ({
 	}
 
 	const getCta = (cta: Cta): Cta => {
-		if (threeTierChoiceCardSelectedProduct) {
-			if (threeTierChoiceCardSelectedProduct.supportTier === 'OneOff') {
-				return {
-					text: cta.text,
-					baseUrl: addChoiceCardsOneTimeParams(cta.baseUrl),
-				};
-			}
+		if (!threeTierSelectedChoiceCard?.product) {
+			return cta;
+		}
+
+		const { destinationUrl, product } = threeTierSelectedChoiceCard;
+
+		const url: string =
+			destinationUrl && destinationUrl.trim() !== ''
+				? destinationUrl.trim()
+				: cta.baseUrl;
 
+		if (product.supportTier === 'OneOff') {
 			return {
 				text: cta.text,
-				baseUrl: addChoiceCardsProductParams(
-					cta.baseUrl,
-					threeTierChoiceCardSelectedProduct.supportTier,
-					threeTierChoiceCardSelectedProduct.ratePlan,
-				),
+				baseUrl: addChoiceCardsOneTimeParams(url),
 			};
 		}
 
-		return cta;
+		return {
+			text: cta.text,
+			baseUrl: addChoiceCardsProductParams(
+				url,
+				product.supportTier,
+				product.ratePlan,
+			),
+		};
 	};
 
 	const openReminder = () => {

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

@@ -76,7 +76,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				submitComponentEvent={submitComponentEvent}
 				isReminderActive={isReminderActive}
 				isSignedIn={Boolean(fetchedEmail)}
-				threeTierChoiceCardSelectedProduct={selectedChoiceCard?.product}
+				threeTierSelectedChoiceCard={selectedChoiceCard}
 				amountsTestName={amountsTestName}
 				amountsVariantName={amountsVariantName}
 				promoCodes={variant.promoCodes ?? []}