Merge pull request #13781 from guardian/lp-add-annual-discount

Discount- Choice card -Annual

Author: LAKSHMIRPILLAI

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

@@ -450,9 +450,11 @@ const DesignableBannerV2: ReactComponent<BannerRenderProps> = ({
 							}
 							choices={getChoiceCardData(
 								isTabletOrAbove,
+								false,
 								countryCode,
 							)}
 							id={'banner'}
+							isDiscountActive={false}
 						/>
 
 						<div css={styles.ctaContainer}>

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

@@ -349,6 +349,25 @@ export const WithThreeTierDiscountChoiceCards: Story = {
 	},
 };
 
+export const WithThreeTierDiscountChoiceCardsNonUS: Story = {
+	name: 'ContributionsEpic with discounted three tier choice cards For Non US',
+	args: {
+		...meta.args,
+		countryCode: 'GB',
+		variant: {
+			...props.variant,
+			name: 'THREE_TIER_CHOICE_CARDS',
+			secondaryCta: undefined,
+			showChoiceCards: true,
+			cta: {
+				text: 'Support the Guardian',
+				baseUrl:
+					'https://support.theguardian.com/uk/contribute?promoCode=30OFFAPRIL',
+			},
+		},
+	},
+};
+
 export const WithChoiceCardsAndSignInLink: Story = {
 	name: 'ContributionsEpic with choice cards and sign-in link',
 	args: {

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

@@ -3,11 +3,14 @@ import type { ChoiceInfo } from './ThreeTierChoiceCards';
 
 export const ChoiceCardTestData_REGULAR = (
 	longerBenefits: boolean,
+	isDiscountActive: boolean,
 ): ChoiceInfo[] => [
 	{
 		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',
@@ -30,7 +33,7 @@ export const ChoiceCardTestData_REGULAR = (
 							{amount}
 						</s>{' '}
 						{currencySymbol}
-						{amount * discount}/month{' '}
+						{amount * (1 - discount)}/year{' '}
 					</>
 				);
 			} else {

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

@@ -184,6 +184,7 @@ type ThreeTierChoiceCardsProps = {
 	choices: ChoiceInfo[];
 	supporterPlusDiscount?: number;
 	id: string; // uniquely identify this choice cards component to avoid conflicting with others
+	isDiscountActive: boolean;
 };
 
 export const ThreeTierChoiceCards = ({
@@ -193,6 +194,7 @@ export const ThreeTierChoiceCards = ({
 	choices,
 	supporterPlusDiscount,
 	id,
+	isDiscountActive = false,
 }: ThreeTierChoiceCardsProps) => {
 	const currencySymbol = getLocalCurrencySymbol(countryCode);
 	const countryGroupId = countryCodeToCountryGroupId(countryCode);
@@ -217,6 +219,12 @@ export const ThreeTierChoiceCards = ({
 							'Monthly',
 							countryGroupId,
 						);
+						const choiceAmountYearly = getChoiceAmount(
+							supportTier,
+							'Annual',
+							countryGroupId,
+						);
+
 						const selected = selectedProduct === supportTier;
 
 						const hasDiscount =
@@ -225,6 +233,10 @@ export const ThreeTierChoiceCards = ({
 
 						const radioId = `choicecard-${id}-${supportTier}`;
 
+						const finalChoiceAmount = isDiscountActive
+							? choiceAmountYearly
+							: choiceAmount;
+
 						return (
 							<div
 								key={supportTier}
@@ -246,7 +258,7 @@ export const ThreeTierChoiceCards = ({
 								>
 									<Radio
 										label={label(
-											choiceAmount,
+											finalChoiceAmount,
 											currencySymbol,
 											supporterPlusDiscount,
 										)}

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

@@ -150,6 +150,7 @@ interface ContributionsEpicButtonsProps {
 	amountsTestName?: string;
 	amountsVariantName?: string;
 	numArticles: number;
+	isDiscountActive?: boolean;
 }
 
 export const ContributionsEpicButtons = ({
@@ -165,6 +166,7 @@ export const ContributionsEpicButtons = ({
 	amountsTestName,
 	amountsVariantName,
 	numArticles,
+	isDiscountActive,
 }: ContributionsEpicButtonsProps): JSX.Element | null => {
 	const [hasBeenSeen, setNode] = useIsInView({
 		debounce: true,
@@ -187,16 +189,33 @@ 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 (isDiscountActive) {
+				const contributionAmount =
+					threeTierChoiceCardSelectedProduct === 'SupporterPlus'
+						? threeTierChoiceCardAmounts['Annual'][countryGroupId]
+								.SupporterPlus
+						: undefined;
+
+				return {
+					text: cta.text,
+					baseUrl: addChoiceCardsProductParams(
+						cta.baseUrl,
+						threeTierChoiceCardSelectedProduct,
+						'Annual',
+						contributionAmount,
+					),
+				};
+			}
 
 			/** 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

@@ -14,6 +14,7 @@ interface OnReminderOpen {
 type Props = EpicProps & {
 	amountsTestName?: string;
 	amountsVariantName?: string;
+	now?: Date;
 };
 
 export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
@@ -26,6 +27,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 	fetchEmail,
 	amountsTestName,
 	amountsVariantName,
+	now = new Date(),
 }: Props): JSX.Element => {
 	// reminders
 	const [fetchedEmail, setFetchedEmail] = useState<string | undefined>(
@@ -53,8 +55,15 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 		setThreeTierChoiceCardSelectedProduct,
 	] = useState<SupportTier>('SupporterPlus');
 
-	const hasSupporterPlusPromoCode =
-		variant.cta?.baseUrl.includes('BLACK_FRIDAY_DISCOUNT_2024') ?? false;
+	const hasPromoCodeInUrl =
+		variant.cta?.baseUrl.includes('30OFFAPRIL') ?? false;
+
+	// Check the dates
+	const isDiscountActive =
+		(hasPromoCodeInUrl &&
+			now >= new Date('2025-04-15T00:00:01') &&
+			now < new Date('2025-04-21T23:59:59')) ??
+		false;
 
 	return (
 		<>
@@ -63,11 +72,14 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 					countryCode={countryCode}
 					selectedProduct={threeTierChoiceCardSelectedProduct}
 					setSelectedProduct={setThreeTierChoiceCardSelectedProduct}
-					choices={getChoiceCardData(true, countryCode)}
-					supporterPlusDiscount={
-						hasSupporterPlusPromoCode ? 0.5 : undefined
-					}
+					choices={getChoiceCardData(
+						true,
+						isDiscountActive,
+						countryCode,
+					)}
+					supporterPlusDiscount={isDiscountActive ? 0.3 : undefined}
 					id={'epic'}
+					isDiscountActive={isDiscountActive}
 				/>
 			)}
 			<ContributionsEpicButtons
@@ -108,6 +120,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 				amountsTestName={amountsTestName}
 				amountsVariantName={amountsVariantName}
 				numArticles={articleCounts.for52Weeks}
+				isDiscountActive={isDiscountActive}
 			/>
 			{isReminderActive && showReminderFields && (
 				<ContributionsEpicReminder

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

@@ -35,9 +35,10 @@ export const contributionType: ContributionType = {
 
 export const getChoiceCardData = (
 	longerBenefits: boolean,
+	isDiscountActive: boolean,
 	countryCode?: string,
 ): ChoiceInfo[] => {
 	return countryCode === 'US'
 		? ChoiceCardTestData_US(longerBenefits)
-		: ChoiceCardTestData_REGULAR(longerBenefits);
+		: ChoiceCardTestData_REGULAR(longerBenefits, isDiscountActive);
 };