Merge pull request #1384 from guardian/supporter-plus-cancellation-of…

…fer-pricing Use discount api response for cancellation offer payment date
guardian · Sep 6, 2024 · e65d310 · e65d310
2 parents 46b29cc + 55d3d48
commit e65d310
Show file tree

Hide file tree

Showing 6 changed files with 60 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
@@ -19,6 +19,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Ribbon } from '@/client/components/shared/Ribbon';
 import { measure } from '@/client/styles/typography';
 import type { DiscountPreviewResponse } from '@/client/utilities/discountPreview';
+import { getMaxNonDiscountedPrice } from '@/client/utilities/discountPreview';
 import { DATE_FNS_LONG_OUTPUT_FORMAT, parseDate } from '@/shared/dates';
 import { number2words } from '@/shared/numberUtils';
 import { getMainPlan, isPaidSubscriptionPlan } from '@/shared/productResponse';
@@ -175,6 +176,11 @@ export const SupporterPlusOffer = () => {
 		'yyyy-MM-dd',
 	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
 
+	const humanReadableStrikethroughPrice = getMaxNonDiscountedPrice(
+		routerState.nonDiscountedPayments,
+		true,
+	);
+
 	return (
 		<>
 			<ProgressStepper
@@ -220,7 +226,8 @@ export const SupporterPlusOffer = () => {
 						<p css={strikethroughPriceCss}>
 							<s>
 								{mainPlan.currency}
-								{mainPlan.price / 100}/{mainPlan.billingPeriod}
+								{humanReadableStrikethroughPrice}/
+								{mainPlan.billingPeriod}
 							</s>
 						</p>
 					)}

diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx
@@ -13,7 +13,10 @@ import { useContext, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { measure } from '@/client/styles/typography';
 import type { DiscountPreviewResponse } from '@/client/utilities/discountPreview';
+import { getMaxNonDiscountedPrice } 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 +173,9 @@ export const SupporterPlusOfferConfirmed = () => {
 	) as CancellationContextInterface;
 
 	const productDetail = cancellationContext.productDetail;
+	const mainPlan = getMainPlan(
+		productDetail.subscription,
+	) as PaidSubscriptionPlan;
 
 	useEffect(() => {
 		pageTitleContext.setPageTitle('Confirmation');
@@ -181,6 +187,11 @@ export const SupporterPlusOfferConfirmed = () => {
 		'yyyy-MM-dd',
 	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
 
+	const humanReadableNextNonDiscountedPrice = getMaxNonDiscountedPrice(
+		routerState.nonDiscountedPayments,
+		true,
+	);
+
 	return (
 		<>
 			<Heading
@@ -210,7 +221,10 @@ export const SupporterPlusOfferConfirmed = () => {
 					</li>
 					<li>
 						You will not be billed until{' '}
-						{nextNonDiscountedPaymentDate}
+						{nextNonDiscountedPaymentDate} after which you will pay{' '}
+						{mainPlan.currency}
+						{humanReadableNextNonDiscountedPrice}/
+						{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
@@ -18,6 +18,7 @@ import { useContext, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { measure } from '@/client/styles/typography';
 import type { DiscountPreviewResponse } from '@/client/utilities/discountPreview';
+import { getMaxNonDiscountedPrice } from '@/client/utilities/discountPreview';
 import { fetchWithDefaultParameters } from '@/client/utilities/fetch';
 import { DATE_FNS_LONG_OUTPUT_FORMAT, parseDate } from '@/shared/dates';
 import { number2words } from '@/shared/numberUtils';
@@ -127,6 +128,11 @@ export const SupporterPlusOfferReview = () => {
 		'yyyy-MM-dd',
 	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
 
+	const humanReadableStrikethroughPrice = getMaxNonDiscountedPrice(
+		routerState.nonDiscountedPayments,
+		true,
+	);
+
 	const [performingDiscountStatus, setPerformingDiscountStatus] =
 		useState<OfferApiCallStatus>('NOT_READY');
 
@@ -194,7 +200,8 @@ export const SupporterPlusOfferReview = () => {
 					<p css={strikethroughPriceCss}>
 						<s>
 							{mainPlan.currency}
-							{mainPlan.price / 100}/{mainPlan.billingPeriod}
+							{humanReadableStrikethroughPrice}/
+							{mainPlan.billingPeriod}
 						</s>
 					</p>
 				)}

diff --git a/client/utilities/discountPreview.ts b/client/utilities/discountPreview.ts
@@ -1,7 +1,27 @@
+interface NonDiscountedPayments {
+	date: string;
+	amount: number;
+}
+
 export type DiscountPreviewResponse = {
 	discountedPrice: number;
 	upToPeriods: number;
 	upToPeriodsType: string;
 	firstDiscountedPaymentDate: string;
 	nextNonDiscountedPaymentDate: string;
+	nonDiscountedPayments: NonDiscountedPayments[];
+};
+
+export const getMaxNonDiscountedPrice = (
+	nonDiscountedPayments: NonDiscountedPayments[],
+	asHumanReadable?: boolean,
+) => {
+	const allNonDiscountedAmounts = nonDiscountedPayments.map((p) => p.amount);
+	const maxNonDiscountedPrice = Math.max(...allNonDiscountedAmounts);
+	if (!asHumanReadable) {
+		return maxNonDiscountedPrice;
+	}
+	return Number.isInteger(maxNonDiscountedPrice)
+		? maxNonDiscountedPrice
+		: maxNonDiscountedPrice.toFixed(2);
 };
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.5 }],
 		};
 		it('user accepts offer instead of cancelling', () => {
 			cy.intercept('GET', '/api/me/mma', {
@@ -184,6 +185,8 @@ describe('Cancel Supporter Plus', () => {
 				name: 'Continue to cancellation',
 			}).click();
 
+			cy.findByText('£14.50/month');
+
 			cy.findByRole('button', { name: 'Redeem your offer' }).click();
 
 			cy.findByRole('button', {