refactor: replace choice card URL building logic with getChoiceCardUrl function

Author: Juarez Mota

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,24 +108,6 @@ const buildChoiceCardSettings = (
 	return undefined;
 };
 
-const buildUrlForThreeTierChoiceCards = (
-	baseUrl: string,
-	selectedChoiceCard: ChoiceCard,
-) => {
-	const { destinationUrl, product } = selectedChoiceCard;
-	const url =
-		destinationUrl && destinationUrl.trim() !== ''
-			? destinationUrl.trim()
-			: baseUrl;
-	return product.supportTier === 'OneOff'
-		? url
-		: addChoiceCardsProductParams(
-				url,
-				product.supportTier,
-				product.ratePlan,
-		  );
-};
-
 const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	content,
 	onCloseClick,
@@ -422,9 +404,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 
 							<div css={styles.ctaContainer}>
 								<LinkButton
-									href={buildUrlForThreeTierChoiceCards(
-										mainOrMobileContent.primaryCta.ctaUrl,
+									href={getChoiceCardUrl(
 										selectedChoiceCard,
+										mainOrMobileContent.primaryCta.ctaUrl,
 									)}
 									onClick={onCtaClick}
 									priority="tertiary"

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 {
@@ -183,27 +182,9 @@ export const ContributionsEpicButtons = ({
 			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: addChoiceCardsOneTimeParams(url),
-			};
-		}
-
 		return {
 			text: cta.text,
-			baseUrl: addChoiceCardsProductParams(
-				url,
-				product.supportTier,
-				product.ratePlan,
-			),
+			baseUrl: getChoiceCardUrl(threeTierSelectedChoiceCard, cta.baseUrl),
 		};
 	};
 

dotcom-rendering/src/components/marketing/lib/tracking.ts

@@ -16,6 +16,7 @@ import type {
 	TargetingAbTest,
 	Tracking,
 } from '@guardian/support-dotcom-components/dist/shared/types';
+import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
 
 // TRACKING VIA support.theguardian.com
 type LinkParams = {
@@ -305,6 +306,28 @@ export const addTrackingParamsToProfileUrl = (
 		: baseUrl;
 };
 
+export const getChoiceCardUrl = (
+	choiceCard: ChoiceCard,
+	baseUrl: string,
+): string => {
+	const { destinationUrl, product } = choiceCard;
+
+	const url: string =
+		destinationUrl && destinationUrl.trim() !== ''
+			? destinationUrl.trim()
+			: baseUrl;
+
+	if (product.supportTier === 'OneOff') {
+		return addChoiceCardsOneTimeParams(url);
+	}
+
+	return addChoiceCardsProductParams(
+		url,
+		product.supportTier,
+		product.ratePlan,
+	);
+};
+
 // SHARED TRACKING
 const campaignPrefix = 'gdnwb_copts_memco';