update to cancellation offer review discalimer copy

guardian · Nov 20, 2024 · b85bcd2 · b85bcd2
1 parent b00b05b
commit b85bcd2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/client/components/mma/cancel/cancellationSaves/CancelAlternativeReview.tsx b/client/components/mma/cancel/cancellationSaves/CancelAlternativeReview.tsx
@@ -397,15 +397,36 @@ export const CancelAlternativeReview = () => {
 			</div>
 			{isPaidSubscriptionPlan(mainPlan) && (
 				<>
-					{alternativeIsOffer && (
-						<p css={termsCss}>
-							If you cancel during the free period, you will lose
-							access to your benefits on the day we usually take
-							payment. If you cancel after the free period, your
-							subscription will end at the end of your current{' '}
-							{mainPlan.billingPeriod}ly payment period.
-						</p>
-					)}
+					{alternativeIsOffer &&
+						offerIsPercentageOrFree === 'free' && (
+							<p css={termsCss}>
+								If you cancel during the free period, you will
+								lose access to your benefits on the day we
+								usually take payment. If you cancel after the
+								free period, your subscription will end at the
+								end of your current {mainPlan.billingPeriod}ly
+								payment period.
+							</p>
+						)}
+					{alternativeIsOffer &&
+						offerIsPercentageOrFree === 'percentage' && (
+							<p css={termsCss}>
+								If you take up the{' '}
+								{routerState.discountPercentage}% off offer and
+								cancel during that {mainPlan.billingPeriod}, you
+								will lose access to your benefits at the end of
+								the {mainPlan.billingPeriod}. If you cancel
+								after the offer, when your {mainPlan.currency}
+								{getMaxNonDiscountedPrice(
+									routerState.nonDiscountedPayments,
+									true,
+								)}
+								/{mainPlan.billingPeriod} payment automatically
+								resumes, your subscription will end at the end
+								of your current {mainPlan.billingPeriod}ly
+								payment period
+							</p>
+						)}
 					{alternativeIsPause && (
 						<p css={termsCss}>
 							If you cancel during the paused period, your{' '}

diff --git a/shared/dates.ts b/shared/dates.ts
@@ -173,9 +173,8 @@ export const getAppropriateReadableTimePeriod = (
 			unitsToSingularHigherPeriod: 7,
 		},
 	];
-	const periodTypeSingularLowerCase = periodType.endsWith('s')
-		? periodType.substring(0, periodType.length - 1).toLowerCase()
-		: periodType.toLowerCase();
+	const periodTypeSingularLowerCase =
+		periodTypeToSingular(periodType).toLowerCase();
 	const periodTypeInComparisonTimePeriods = orderdTimePeriods.find(
 		(element) => element.peroidName === periodTypeSingularLowerCase,
 	);
@@ -204,3 +203,9 @@ export const getAppropriateReadableTimePeriod = (
 		return `${number2words(unit)} ${periodType}`;
 	}
 };
+
+export const periodTypeToSingular = (periodType: string) => {
+	return periodType.endsWith('s')
+		? periodType.substring(0, periodType.length - 1)
+		: periodType;
+};