From 581ef982c87523958a36a6b176c9715e73b7ed3b Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Fri, 6 Sep 2024 11:19:59 +0100 Subject: [PATCH] using discaount api response to return the next payment price in the cancellation offer journey --- .../components/mma/cancel/Cancellation.stories.tsx | 6 ++++++ .../supporterplus/SupporterPlusOffer.tsx | 7 ++++++- .../supporterplus/SupporterPlusOfferConfirmed.tsx | 14 +++++++++++++- .../supporterplus/SupporterPlusOfferReview.tsx | 7 ++++++- client/utilities/discountPreview.ts | 1 + .../mocked/parallel-2/cancelSupporterPlus.cy.ts | 1 + 6 files changed, 33 insertions(+), 3 deletions(-) diff --git a/client/components/mma/cancel/Cancellation.stories.tsx b/client/components/mma/cancel/Cancellation.stories.tsx index 870b5d84c..dd1906450 100644 --- a/client/components/mma/cancel/Cancellation.stories.tsx +++ b/client/components/mma/cancel/Cancellation.stories.tsx @@ -98,6 +98,7 @@ export const Offer: StoryObj = { 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 = { 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 = { reactRouter: { state: { nextNonDiscountedPaymentDate: '2024-07-30', + nonDiscountedPayments: [{ date: '2024-07-30', amount: 14.99 }], }, }, }, @@ -156,6 +159,9 @@ export const SupportplusCancelConfirm: StoryObj = 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 index 9ef48f9dc..157096b6f 100755 --- 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 ( <> {

{mainPlan.currency} - {mainPlan.price / 100}/{mainPlan.billingPeriod} + {strikethroughPrice}/{mainPlan.billingPeriod}

)} diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx index 968fcf6f1..c79fd2bb4 100755 --- 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 ( <> {
  • You will not be billed until{' '} - {nextNonDiscountedPaymentDate} + {nextNonDiscountedPaymentDate} after which you will pay{' '} + {mainPlan.currency} + {nextNonDiscountedPrice}/{mainPlan.billingPeriod}
    • diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferReview.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferReview.tsx index 6974e0e06..1a13ee868 100755 --- 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('NOT_READY'); @@ -194,7 +199,7 @@ export const SupporterPlusOfferReview = () => {

    {mainPlan.currency} - {mainPlan.price / 100}/{mainPlan.billingPeriod} + {strikethroughPrice}/{mainPlan.billingPeriod}

    )} diff --git a/client/utilities/discountPreview.ts b/client/utilities/discountPreview.ts index 574f505f1..0cb0f0bf8 100644 --- 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 index 1fb1e8609..526042501 100644 --- 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', {