using discaount api response to return the next payment price in the …

…cancellation offer journey
guardian · Sep 6, 2024 · 581ef98 · 581ef98
1 parent 46b29cc
commit 581ef98
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 3 deletions.
diff --git a/client/components/mma/cancel/Cancellation.stories.tsx b/client/components/mma/cancel/Cancellation.stories.tsx
@@ -98,6 +98,7 @@ export const Offer: StoryObj<typeof CancellationContainer> = {
 				upToPeriodsType: 'months',
 				firstDiscountedPaymentDate: '2024-05-30',
 				nextNonDiscountedPaymentDate: '2024-07-30',
+				nonDiscountedPayments: [{ date: '2024-07-30', amount: 14.99 }],
 			},
 		},
 	},
@@ -116,6 +117,7 @@ export const OfferReview: StoryObj<typeof CancellationContainer> = {
 				upToPeriodsType: 'months',
 				firstDiscountedPaymentDate: '2024-05-30',
 				nextNonDiscountedPaymentDate: '2024-07-30',
+				nonDiscountedPayments: [{ date: '2024-07-30', amount: 14.99 }],
 			},
 		},
 		msw: [
@@ -136,6 +138,7 @@ export const OfferConfirmed: StoryObj<typeof CancellationContainer> = {
 		reactRouter: {
 			state: {
 				nextNonDiscountedPaymentDate: '2024-07-30',
+				nonDiscountedPayments: [{ date: '2024-07-30', amount: 14.99 }],
 			},
 		},
 	},
@@ -156,6 +159,9 @@ export const SupportplusCancelConfirm: StoryObj<typeof CancellationContainer> =
 					upToPeriodsType: 'months',
 					firstDiscountedPaymentDate: '2024-05-30',
 					nextNonDiscountedPaymentDate: '2024-07-30',
+					nonDiscountedPayments: [
+						{ date: '2024-07-30', amount: 14.99 },
+					],
 				},
 			},
 		},

diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOffer.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOffer.tsx
@@ -175,6 +175,11 @@ export const SupporterPlusOffer = () => {
 		'yyyy-MM-dd',
 	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
 
+	const strikethroughPrice = routerState.nonDiscountedPayments.reduce(
+		(prev, current) =>
+			prev && prev.amount > current.amount ? prev : current,
+	).amount;
+
 	return (
 		<>
 			<ProgressStepper
@@ -220,7 +225,7 @@ export const SupporterPlusOffer = () => {
 						<p css={strikethroughPriceCss}>
 							<s>
 								{mainPlan.currency}
-								{mainPlan.price / 100}/{mainPlan.billingPeriod}
+								{strikethroughPrice}/{mainPlan.billingPeriod}
 							</s>
 						</p>
 					)}

diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx
@@ -14,6 +14,8 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { measure } from '@/client/styles/typography';
 import type { DiscountPreviewResponse } from '@/client/utilities/discountPreview';
 import { DATE_FNS_LONG_OUTPUT_FORMAT, parseDate } from '@/shared/dates';
+import type { PaidSubscriptionPlan } from '@/shared/productResponse';
+import { getMainPlan } from '@/shared/productResponse';
 import { DownloadAppCta } from '../../../shared/DownloadAppCta';
 import { Heading } from '../../../shared/Heading';
 import type {
@@ -170,6 +172,9 @@ export const SupporterPlusOfferConfirmed = () => {
 	) as CancellationContextInterface;
 
 	const productDetail = cancellationContext.productDetail;
+	const mainPlan = getMainPlan(
+		productDetail.subscription,
+	) as PaidSubscriptionPlan;
 
 	useEffect(() => {
 		pageTitleContext.setPageTitle('Confirmation');
@@ -181,6 +186,11 @@ export const SupporterPlusOfferConfirmed = () => {
 		'yyyy-MM-dd',
 	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
 
+	const nextNonDiscountedPrice = routerState.nonDiscountedPayments.reduce(
+		(prev, current) =>
+			prev && prev.amount > current.amount ? prev : current,
+	).amount;
+
 	return (
 		<>
 			<Heading
@@ -210,7 +220,9 @@ export const SupporterPlusOfferConfirmed = () => {
 					</li>
 					<li>
 						You will not be billed until{' '}
-						{nextNonDiscountedPaymentDate}
+						{nextNonDiscountedPaymentDate} after which you will pay{' '}
+						{mainPlan.currency}
+						{nextNonDiscountedPrice}/{mainPlan.billingPeriod}
 					</li>
 				</ul>
 			</div>

diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferReview.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferReview.tsx
@@ -127,6 +127,11 @@ export const SupporterPlusOfferReview = () => {
 		'yyyy-MM-dd',
 	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
 
+	const strikethroughPrice = routerState.nonDiscountedPayments.reduce(
+		(prev, current) =>
+			prev && prev.amount > current.amount ? prev : current,
+	).amount;
+
 	const [performingDiscountStatus, setPerformingDiscountStatus] =
 		useState<OfferApiCallStatus>('NOT_READY');
 
@@ -194,7 +199,7 @@ export const SupporterPlusOfferReview = () => {
 					<p css={strikethroughPriceCss}>
 						<s>
 							{mainPlan.currency}
-							{mainPlan.price / 100}/{mainPlan.billingPeriod}
+							{strikethroughPrice}/{mainPlan.billingPeriod}
 						</s>
 					</p>
 				)}

diff --git a/client/utilities/discountPreview.ts b/client/utilities/discountPreview.ts
@@ -4,4 +4,5 @@ export type DiscountPreviewResponse = {
 	upToPeriodsType: string;
 	firstDiscountedPaymentDate: string;
 	nextNonDiscountedPaymentDate: string;
+	nonDiscountedPayments: Array<{ date: string; amount: number }>;
 };
diff --git a/cypress/tests/mocked/parallel-2/cancelSupporterPlus.cy.ts b/cypress/tests/mocked/parallel-2/cancelSupporterPlus.cy.ts
@@ -149,6 +149,7 @@ describe('Cancel Supporter Plus', () => {
 			upToPeriodsType: 'Months',
 			firstDiscountedPaymentDate: '2024-05-30',
 			nextNonDiscountedPaymentDate: '2024-07-30',
+			nonDiscountedPayments: [{ date: '2024-07-30', amount: 14.99 }],
 		};
 		it('user accepts offer instead of cancelling', () => {
 			cy.intercept('GET', '/api/me/mma', {