Use promoCodes field in support message links (#14071)

* Use promoCodes field in support message links

* comment

* unit tests

* tidy comment

* fix test names

Author: tomrf1

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.2.0",
+		"@guardian/support-dotcom-components": "7.4.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "7.75.1",

dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx

@@ -22,11 +22,11 @@ import type { ReactComponent } from '../../lib/ReactComponent';
 import { replaceArticleCount } from '../../lib/replaceArticleCount';
 import {
 	addAbandonedBasketAndTrackingParamsToUrl,
-	addRegionIdAndTrackingParamsToSupportUrl,
 	addTrackingParamsToProfileUrl,
 	createClickEventFromTracking,
 	createInsertEventFromTracking,
 	createViewEventFromTracking,
+	enrichSupportUrl,
 	isProfileUrl,
 } from '../../lib/tracking';
 import type { CloseableBannerProps } from '../utils/withCloseable';
@@ -91,6 +91,7 @@ const withBannerData =
 			design,
 			bannerChannel,
 			abandonedBasket,
+			promoCodes,
 		} = bannerProps;
 
 		const [hasBeenSeen, setNode] = useIsInView({
@@ -178,12 +179,12 @@ const withBannerData =
 				}
 
 				return {
-					ctaUrl: addRegionIdAndTrackingParamsToSupportUrl(
-						cta.baseUrl,
+					ctaUrl: enrichSupportUrl({
+						baseUrl: cta.baseUrl,
 						tracking,
-						numArticles,
+						promoCodes: promoCodes ?? [],
 						countryCode,
-					),
+					}),
 					ctaText: cta.text,
 				};
 			};

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

@@ -324,7 +324,7 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 			addTrackingParamsToBodyLinks(
 				paragraph,
 				tracking,
-				articleCounts.for52Weeks,
+				variant.promoCodes ?? [],
 				countryCode,
 			),
 		);

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

@@ -20,7 +20,7 @@ import { hasSetReminder } from '../../lib/reminders';
 import {
 	addChoiceCardsOneTimeParams,
 	addChoiceCardsProductParams,
-	addRegionIdAndTrackingParamsToSupportUrl,
+	enrichSupportUrl,
 	isSupportUrl,
 } from '../../lib/tracking';
 import {
@@ -58,15 +58,15 @@ const PrimaryCtaButton = ({
 	countryCode,
 	amountsTestName,
 	amountsVariantName,
-	numArticles,
+	promoCodes,
 	submitComponentEvent,
 }: {
 	cta?: Cta;
 	tracking: Tracking;
 	countryCode?: string;
 	amountsTestName?: string;
 	amountsVariantName?: string;
-	numArticles: number;
+	promoCodes: string[];
 	submitComponentEvent?: (event: ComponentEvent) => void;
 }): JSX.Element | null => {
 	if (!cta) {
@@ -75,14 +75,14 @@ const PrimaryCtaButton = ({
 
 	const buttonText = cta.text || 'Support The Guardian';
 	const baseUrl = cta.baseUrl || 'https://support.theguardian.com/contribute';
-	const urlWithRegionAndTracking = addRegionIdAndTrackingParamsToSupportUrl(
+	const urlWithRegionAndTracking = enrichSupportUrl({
 		baseUrl,
 		tracking,
-		numArticles,
+		promoCodes: promoCodes ?? [],
 		countryCode,
-		amountsTestName,
-		amountsVariantName,
-	);
+		amountsAbTestName: amountsTestName,
+		amountsAbTestVariant: amountsVariantName,
+	});
 
 	return (
 		<div css={buttonMarginStyles}>
@@ -101,22 +101,22 @@ const PrimaryCtaButton = ({
 const SecondaryCtaButton = ({
 	cta,
 	tracking,
-	numArticles,
 	countryCode,
 	submitComponentEvent,
+	promoCodes,
 }: {
 	cta: Cta;
 	tracking: Tracking;
 	countryCode?: string;
-	numArticles: number;
 	submitComponentEvent?: (event: ComponentEvent) => void;
+	promoCodes: string[];
 }): JSX.Element | null => {
-	const url = addRegionIdAndTrackingParamsToSupportUrl(
-		cta.baseUrl,
+	const url = enrichSupportUrl({
+		baseUrl: cta.baseUrl,
 		tracking,
-		numArticles,
+		promoCodes,
 		countryCode,
-	);
+	});
 	return (
 		<div css={buttonMarginStyles}>
 			<EpicButton
@@ -142,7 +142,7 @@ interface ContributionsEpicButtonsProps {
 	threeTierChoiceCardSelectedProduct?: ChoiceCard['product'];
 	amountsTestName?: string;
 	amountsVariantName?: string;
-	numArticles: number;
+	promoCodes: string[];
 }
 
 export const ContributionsEpicButtons = ({
@@ -156,7 +156,7 @@ export const ContributionsEpicButtons = ({
 	threeTierChoiceCardSelectedProduct,
 	amountsTestName,
 	amountsVariantName,
-	numArticles,
+	promoCodes,
 }: ContributionsEpicButtonsProps): JSX.Element | null => {
 	const [hasBeenSeen, setNode] = useIsInView({
 		debounce: true,
@@ -220,7 +220,7 @@ export const ContributionsEpicButtons = ({
 						<PrimaryCtaButton
 							cta={getCta(variant.cta)}
 							tracking={tracking}
-							numArticles={numArticles}
+							promoCodes={promoCodes}
 							amountsTestName={amountsTestName}
 							amountsVariantName={amountsVariantName}
 							countryCode={countryCode}
@@ -233,7 +233,7 @@ export const ContributionsEpicButtons = ({
 									cta={secondaryCta.cta}
 									tracking={tracking}
 									countryCode={countryCode}
-									numArticles={numArticles}
+									promoCodes={promoCodes}
 									submitComponentEvent={submitComponentEvent}
 								/>
 							)}

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

@@ -20,7 +20,6 @@ type Props = EpicProps & {
 export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 	variant,
 	countryCode,
-	articleCounts,
 	tracking,
 	submitComponentEvent,
 	fetchEmail,
@@ -82,7 +81,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				}
 				amountsTestName={amountsTestName}
 				amountsVariantName={amountsVariantName}
-				numArticles={articleCounts.for52Weeks}
+				promoCodes={variant.promoCodes ?? []}
 			/>
 			{isReminderActive && showReminderFields && (
 				<ContributionsEpicReminder

dotcom-rendering/src/components/marketing/gutters/GutterAskWrapper.tsx

@@ -4,8 +4,8 @@ import { useCallback, useEffect } from 'react';
 import { useIsInView } from '../../../lib/useIsInView';
 import type { ReactComponent } from '../lib/ReactComponent';
 import {
-	addRegionIdAndTrackingParamsToSupportUrl,
 	createClickEventFromTracking,
+	enrichSupportUrl,
 } from '../lib/tracking';
 import { GutterAsk } from './GutterAsk';
 
@@ -18,12 +18,12 @@ export const GutterAskWrapper: ReactComponent<GutterProps> = (
 		? content.cta.baseUrl
 		: 'https://support.theguardian.com/contribute';
 
-	const enrichedUrl = addRegionIdAndTrackingParamsToSupportUrl(
+	const enrichedUrl = enrichSupportUrl({
 		baseUrl,
-		props.tracking,
-		undefined,
-		props.countryCode,
-	);
+		tracking: props.tracking,
+		promoCodes: props.promoCodes ?? [],
+		countryCode: props.countryCode,
+	});
 
 	const onCtaClick = (componentId: string) => {
 		return (): void => {

dotcom-rendering/src/components/marketing/header/HeaderWrapper.tsx

@@ -13,9 +13,9 @@ import { useCallback, useEffect } from 'react';
 import { useIsInView } from '../../../lib/useIsInView';
 import type { ReactComponent } from '../lib/ReactComponent';
 import {
-	addRegionIdAndTrackingParamsToSupportUrl,
 	addTrackingParamsToProfileUrl,
 	createClickEventFromTracking,
+	enrichSupportUrl,
 	isProfileUrl,
 } from '../lib/tracking';
 
@@ -46,7 +46,7 @@ export const headerWrapper = (
 		tracking,
 		countryCode,
 		submitComponentEvent,
-		numArticles,
+		promoCodes,
 	}) => {
 		const buildEnrichedCta = (cta: Cta): HeaderEnrichedCta => {
 			if (isProfileUrl(cta.baseUrl)) {
@@ -59,12 +59,12 @@ export const headerWrapper = (
 				};
 			}
 			return {
-				ctaUrl: addRegionIdAndTrackingParamsToSupportUrl(
-					cta.baseUrl,
+				ctaUrl: enrichSupportUrl({
+					baseUrl: cta.baseUrl,
 					tracking,
-					numArticles,
+					promoCodes: promoCodes ?? [],
 					countryCode,
-				),
+				}),
 				ctaText: cta.text,
 			};
 		};

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

@@ -1,4 +1,5 @@
-import { addChoiceCardsParams } from './tracking';
+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', () => {
@@ -23,3 +24,60 @@ describe('addChoiceCardsParams', () => {
 		);
 	});
 });
+
+describe('enrichSupportUrl', () => {
+	const tracking: Tracking = {
+		referrerUrl: 'https://theguardian.com',
+		abTestName: 'test',
+		abTestVariant: 'control',
+		campaignCode: 'test',
+		ophanPageId: '123',
+		platformId: 'WEB',
+		componentType: 'ACQUISITIONS_EPIC',
+	};
+
+	it('returns the base URL if it is not a support URL', () => {
+		const result = enrichSupportUrl({
+			baseUrl: 'https://theguardian.com',
+			tracking,
+			promoCodes: [],
+		});
+		expect(result).toEqual('https://theguardian.com');
+	});
+
+	it('adds tracking and region to a support URL without existing querystring', () => {
+		const result = enrichSupportUrl({
+			baseUrl: 'https://support.theguardian.com/contribute',
+			tracking,
+			countryCode: 'GB',
+			promoCodes: [],
+		});
+		expect(result).toEqual(
+			'https://support.theguardian.com/uk/contribute?REFPVID=123&INTCMP=test&acquisitionData=%7B%22source%22%3A%22WEB%22%2C%22componentId%22%3A%22test%22%2C%22componentType%22%3A%22ACQUISITIONS_EPIC%22%2C%22campaignCode%22%3A%22test%22%2C%22abTests%22%3A%5B%7B%22name%22%3A%22test%22%2C%22variant%22%3A%22control%22%7D%5D%2C%22referrerPageviewId%22%3A%22123%22%2C%22referrerUrl%22%3A%22https%3A%2F%2Ftheguardian.com%22%2C%22isRemote%22%3Atrue%7D',
+		);
+	});
+
+	it('adds tracking and region to a support URL with existing querystring', () => {
+		const result = enrichSupportUrl({
+			baseUrl: 'https://support.theguardian.com/contribute?test=test',
+			tracking,
+			countryCode: 'GB',
+			promoCodes: [],
+		});
+		expect(result).toEqual(
+			'https://support.theguardian.com/uk/contribute?test=test&REFPVID=123&INTCMP=test&acquisitionData=%7B%22source%22%3A%22WEB%22%2C%22componentId%22%3A%22test%22%2C%22componentType%22%3A%22ACQUISITIONS_EPIC%22%2C%22campaignCode%22%3A%22test%22%2C%22abTests%22%3A%5B%7B%22name%22%3A%22test%22%2C%22variant%22%3A%22control%22%7D%5D%2C%22referrerPageviewId%22%3A%22123%22%2C%22referrerUrl%22%3A%22https%3A%2F%2Ftheguardian.com%22%2C%22isRemote%22%3Atrue%7D',
+		);
+	});
+
+	it('adds tracking, region and promo codes to a support URL', () => {
+		const result = enrichSupportUrl({
+			baseUrl: 'https://support.theguardian.com/contribute',
+			tracking,
+			countryCode: 'GB',
+			promoCodes: ['PROMO1', 'PROMO2'],
+		});
+		expect(result).toEqual(
+			'https://support.theguardian.com/uk/contribute?REFPVID=123&INTCMP=test&acquisitionData=%7B%22source%22%3A%22WEB%22%2C%22componentId%22%3A%22test%22%2C%22componentType%22%3A%22ACQUISITIONS_EPIC%22%2C%22campaignCode%22%3A%22test%22%2C%22abTests%22%3A%5B%7B%22name%22%3A%22test%22%2C%22variant%22%3A%22control%22%7D%5D%2C%22referrerPageviewId%22%3A%22123%22%2C%22referrerUrl%22%3A%22https%3A%2F%2Ftheguardian.com%22%2C%22isRemote%22%3Atrue%7D&promoCode=PROMO1&promoCode=PROMO2',
+		);
+	});
+});