Changes to update the CTA and the choice cards to annual if there is a discount

Author: “LAKSHMIRPILLAI”

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

@@ -361,7 +361,8 @@ export const WithThreeTierDiscountChoiceCardsNonUS: Story = {
 			showChoiceCards: true,
 			cta: {
 				text: 'Support the Guardian',
-				baseUrl: 'https://support.theguardian.com/contribute',
+				baseUrl:
+					'https://support.theguardian.com/uk/contribute?promoCode=30OFF3APRIL',
 			},
 		},
 	},

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

@@ -8,7 +8,9 @@ export const ChoiceCardTestData_REGULAR = (
 	{
 		supportTier: 'Contribution',
 		label: (amount: number, currencySymbol: string): string =>
-			`Support ${currencySymbol}${amount}/month`,
+			isDiscountActive
+				? `Support ${currencySymbol}${amount}/year`
+				: `Support ${currencySymbol}${amount}/month`,
 		benefitsLabel: 'Support',
 		benefits: () => [
 			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',

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

@@ -233,11 +233,9 @@ export const ThreeTierChoiceCards = ({
 
 						const radioId = `choicecard-${id}-${supportTier}`;
 
-						const finalChoiceAmount =
-							isDiscountActive && hasDiscount
-								? choiceAmountYearly
-								: choiceAmount;
-						console.log('finalChoiceAmount', finalChoiceAmount);
+						const finalChoiceAmount = isDiscountActive
+							? choiceAmountYearly
+							: choiceAmount;
 
 						return (
 							<div

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

@@ -31,6 +31,7 @@ import {
 	OPHAN_COMPONENT_EVENT_REMINDER_OPEN,
 } from '../utils/ophan';
 import {
+	SupportRatePlan,
 	type SupportTier,
 	threeTierChoiceCardAmounts,
 } from '../utils/threeTierChoiceCardAmounts';
@@ -189,19 +190,15 @@ export const ContributionsEpicButtons = ({
 	}
 
 	const getChoiceCardCta = (cta: Cta): Cta => {
+		const countryGroupId = countryCodeToCountryGroupId(countryCode);
 		if (showChoiceCards) {
 			if (threeTierChoiceCardSelectedProduct === 'OneOff') {
 				return {
 					text: cta.text,
 					baseUrl: addChoiceCardsOneTimeParams(cta.baseUrl),
 				};
 			}
-			if (
-				threeTierChoiceCardSelectedProduct === 'SupporterPlus' &&
-				isDiscountActive &&
-				countryCode !== 'US'
-			) {
-				const countryGroupId = countryCodeToCountryGroupId(countryCode);
+			if (isDiscountActive) {
 				const contributionAmount =
 					threeTierChoiceCardSelectedProduct === 'SupporterPlus'
 						? threeTierChoiceCardAmounts['Annual'][countryGroupId]
@@ -220,7 +217,6 @@ export const ContributionsEpicButtons = ({
 			}
 
 			/** Contribution amount is variable, unlike the SupporterPlus amount which is fixed */
-			const countryGroupId = countryCodeToCountryGroupId(countryCode);
 			const contributionAmount =
 				threeTierChoiceCardSelectedProduct === 'Contribution'
 					? threeTierChoiceCardAmounts['Monthly'][countryGroupId]

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

@@ -55,15 +55,16 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 		setThreeTierChoiceCardSelectedProduct,
 	] = useState<SupportTier>('SupporterPlus');
 
-	//Check the dates
+	const hasPromoCodeInUrl =
+		variant.cta?.baseUrl.includes('30OFF3APRIL') ?? false;
+
+	// Check the dates
 	const isDiscountActive =
-		(now >= new Date('2025-04-10T00:00:01') &&
-			now < new Date('2025-04-21T23:59:59') &&
-			countryCode !== 'US') ??
+		(hasPromoCodeInUrl &&
+			now >= new Date('2025-04-11T00:00:01') &&
+			now < new Date('2025-04-21T23:59:59')) ??
 		false;
-	// const isDiscountActive = (true && countryCode !=='US') ?? false;
-	console.log('currentDate', now);
-	console.log('activeDate', isDiscountActive);
+
 	return (
 		<>
 			{showChoiceCards && (