Initial changes

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,24 @@ 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/contribute',
+			},
+		},
+	},
+};
+
 export const WithChoiceCardsAndSignInLink: Story = {
 	name: 'ContributionsEpic with choice cards and sign-in link',
 	args: {

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

@@ -3,6 +3,7 @@ import type { ChoiceInfo } from './ThreeTierChoiceCards';
 
 export const ChoiceCardTestData_REGULAR = (
 	longerBenefits: boolean,
+	isDiscountActive: boolean,
 ): ChoiceInfo[] => [
 	{
 		supportTier: 'Contribution',
@@ -22,15 +23,25 @@ export const ChoiceCardTestData_REGULAR = (
 			discount?: number,
 		): JSX.Element | string => {
 			if (!isUndefined(discount)) {
-				return (
+				return isDiscountActive ? (
 					<>
 						Support{' '}
 						<s>
 							{currencySymbol}
 							{amount}
 						</s>{' '}
 						{currencySymbol}
-						{amount * discount}/month{' '}
+						{amount * (1 - discount)}/year{' '}
+					</>
+				) : (
+					<>
+						Support{' '}
+						<s>
+							{currencySymbol}
+							{amount}
+						</s>{' '}
+						{currencySymbol}
+						{amount * (1 - discount)}/month{' '}
 					</>
 				);
 			} 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,14 +233,20 @@ export const ThreeTierChoiceCards = ({
 
 						const radioId = `choicecard-${id}-${supportTier}`;
 
+						const finalChoiceAmount =
+							isDiscountActive && hasDiscount
+								? choiceAmountYearly
+								: choiceAmount;
+						console.log('finalChoiceAmount', finalChoiceAmount);
+
 						return (
 							<div
 								key={supportTier}
 								css={css`
 									position: relative;
 								`}
 							>
-								{hasDiscount && (
+								{hasDiscount && countryCode !== 'US' && (
 									<DiscountedPill
 										discount={supporterPlusDiscount * 100}
 									/>
@@ -246,7 +260,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,
@@ -194,6 +196,28 @@ export const ContributionsEpicButtons = ({
 					baseUrl: addChoiceCardsOneTimeParams(cta.baseUrl),
 				};
 			}
+			if (
+				threeTierChoiceCardSelectedProduct === 'SupporterPlus' &&
+				isDiscountActive &&
+				countryCode !== 'US'
+			) {
+				const countryGroupId = countryCodeToCountryGroupId(countryCode);
+				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);

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