From 9b23f5ce821609cb5ac1b84526f0b264983796c4 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Wed, 8 Nov 2023 20:26:15 +0000 Subject: [PATCH 1/9] Skeleton page for confirmation of discount and storybook --- .../DigiSubDiscountConfirm.tsx | 29 ++++++++++++ .../DigiSubSaves.stories.tsx | 47 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx create mode 100644 client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx new file mode 100644 index 000000000..d68b5ffcf --- /dev/null +++ b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx @@ -0,0 +1,29 @@ +import { Stack } from '@guardian/source-react-components'; +import { useContext, useEffect } from 'react'; +import type { + CancellationPageTitleInterface} from '@/client/components/mma/cancel/CancellationContainer'; +import { + CancellationPageTitleContext +} from '@/client/components/mma/cancel/CancellationContainer'; +import { + headingCss, + sectionSpacing, +} from '../../../../../styles/GenericStyles'; + +export const DigiSubDiscountConfirm = () => { + const pageTitleContext = useContext( + CancellationPageTitleContext, + ) as CancellationPageTitleInterface; + + useEffect(() => { + pageTitleContext.setPageTitle('Your subscription'); + }, []); + + return ( +
+ +

Discount confirmed

+ +
+ ); +}; diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx new file mode 100644 index 000000000..cbca8bdf1 --- /dev/null +++ b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx @@ -0,0 +1,47 @@ +import type { Meta, StoryFn } from '@storybook/react'; +import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator'; +import { CancellationContainer } from '@/client/components/mma/cancel/CancellationContainer'; +import { DigiSubDiscountConfirm } from '@/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm'; +import { digitalPackPaidByDirectDebit } from '@/client/fixtures/productBuilder/testProducts'; +import { PRODUCT_TYPES } from '@/shared/productTypes'; + +export default { + title: 'Pages/DigiSub', + component: CancellationContainer, + decorators: [ReactRouterDecorator], + parameters: { + layout: 'fullscreen', + reactRouter: { + state: { + productDetail: digitalPackPaidByDirectDebit(), + user: { email: 'test@test.com' }, + }, + container: ( + + ), + }, + }, +} as Meta; + +export const DigiSubThankYouPage: StoryFn< + typeof DigiSubDiscountConfirm +> = () => { + return ; +}; + +/*export const DigiSubCancellationOptionsPage: StoryFn< + typeof DigiSubCancellationOptions +> = () => { + return ; +}; + +export const DigiSubOffersPage: StoryFn = () => { + return ; +}; + +export const ConfirmDigiSubCancellationPage: StoryFn< + typeof ConfirmDigiSubCancellation +> = () => { + return ; +} + */ From bbcc5898e92499e0aea4342fc0b44661673f4548 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Wed, 8 Nov 2023 20:48:33 +0000 Subject: [PATCH 2/9] Title of page updated New component displaying discount confirmation, email and next billing date Buttons to navigate to the guardain homepage and back to account overview --- .../DigiSubDiscountConfirm.tsx | 117 ++++++++++++++++-- 1 file changed, 107 insertions(+), 10 deletions(-) diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx index d68b5ffcf..16c9f2f31 100644 --- a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx @@ -1,13 +1,26 @@ -import { Stack } from '@guardian/source-react-components'; +import { css } from '@emotion/react'; +import { palette, space } from '@guardian/source-foundations'; +import { + LinkButton, + Stack, + SvgCalendar, + SvgEnvelope, + SvgGift, +} from '@guardian/source-react-components'; import { useContext, useEffect } from 'react'; -import type { - CancellationPageTitleInterface} from '@/client/components/mma/cancel/CancellationContainer'; +import type { CancellationPageTitleInterface } from '@/client/components/mma/cancel/CancellationContainer'; +import { CancellationPageTitleContext } from '@/client/components/mma/cancel/CancellationContainer'; +import { linkCss } from '@/client/components/mma/upgrade/UpgradeSupportStyles'; import { - CancellationPageTitleContext -} from '@/client/components/mma/cancel/CancellationContainer'; + buttonCentredCss, + stackedButtonLayoutCss, +} from '@/client/styles/ButtonStyles'; import { headingCss, + iconListCss, + listWithDividersCss, sectionSpacing, + whatHappensNextIconCss, } from '../../../../../styles/GenericStyles'; export const DigiSubDiscountConfirm = () => { @@ -20,10 +33,94 @@ export const DigiSubDiscountConfirm = () => { }, []); return ( -
- -

Discount confirmed

- -
+ <> +
+ +

Discount confirmed

+ +
+ +
+ +
+
    +
  • + + + + Check your email + +
    + We have sent you a discount confirmation to + XXX@gmail.com +     +
    • +
  • + + + + 25% discount for 3 months + +
    + You’ll pay £11.99 per month for 3 months, then + £14.99 per month +     +
    • +
  • + + + + Your billing date + +
    + From 5 February 2022, your ongoing monthly + payment will be £9. +     +
    • +
+ +
+
+
+ + Continue to the Guardian + + +
+
+ ); }; From 0465d7a843a8006f1e3d393571b1476fdd39c749 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Wed, 15 Nov 2023 11:09:36 +0000 Subject: [PATCH 3/9] removed top border which isn't required any more --- .../digisubCancellationSaves/DigiSubDiscountConfirm.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx index 16c9f2f31..f88a7871e 100644 --- a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx @@ -47,12 +47,6 @@ export const DigiSubDiscountConfirm = () => { `} > -
    Date: Thu, 16 Nov 2023 15:52:32 +0000 Subject: [PATCH 4/9] Wired in all of details for the new screen and completed the design --- .../DigiSubDiscountConfirm.tsx | 54 +++++++++++++++---- 1 file changed, 44 insertions(+), 10 deletions(-) diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx index f88a7871e..36b76f189 100644 --- a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx @@ -8,13 +8,23 @@ import { SvgGift, } from '@guardian/source-react-components'; import { useContext, useEffect } from 'react'; -import type { CancellationPageTitleInterface } from '@/client/components/mma/cancel/CancellationContainer'; -import { CancellationPageTitleContext } from '@/client/components/mma/cancel/CancellationContainer'; +import { useLocation } from 'react-router'; +import type { CancellationContextInterface , + CancellationPageTitleInterface, + CancellationRouterState} from '@/client/components/mma/cancel/CancellationContainer'; +import { + CancellationContext, + CancellationPageTitleContext +} from '@/client/components/mma/cancel/CancellationContainer'; import { linkCss } from '@/client/components/mma/upgrade/UpgradeSupportStyles'; import { buttonCentredCss, stackedButtonLayoutCss, } from '@/client/styles/ButtonStyles'; +import { getOldMembershipPrice } from '@/client/utilities/membershipPriceRise'; +import { DATE_FNS_LONG_OUTPUT_FORMAT, parseDate } from '@/shared/dates'; +import type { PaidSubscriptionPlan } from '@/shared/productResponse'; +import { getMainPlan } from '@/shared/productResponse'; import { headingCss, iconListCss, @@ -28,6 +38,26 @@ export const DigiSubDiscountConfirm = () => { CancellationPageTitleContext, ) as CancellationPageTitleInterface; + const cancellationContext = useContext( + CancellationContext, + ) as CancellationContextInterface; + + const location = useLocation(); + const routerState = location.state as CancellationRouterState; + const digiSub = cancellationContext.productDetail; + + const mainPlan = getMainPlan(digiSub.subscription) as PaidSubscriptionPlan; + + const priceDisplay = `${mainPlan.currency}${getOldMembershipPrice( + mainPlan, + )}`; + + const nextBillingDate = parseDate( + mainPlan.chargedThrough ?? undefined, + ).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT); + + const userEmailAddress = routerState?.user?.email; + useEffect(() => { pageTitleContext.setPageTitle('Your subscription'); }, []); @@ -35,13 +65,13 @@ export const DigiSubDiscountConfirm = () => { return ( <>
    - -

    Discount confirmed

    -     +

    Discount confirmed

    + Thank you for continuing to fund our journalism.
    { Check your email
    - We have sent you a discount confirmation to - XXX@gmail.com + We have sent you a discount confirmation to{' '} + {userEmailAddress}
  • @@ -95,14 +125,18 @@ export const DigiSubDiscountConfirm = () => { Your billing date
    - From 5 February 2022, your ongoing monthly - payment will be £9. + From {nextBillingDate}, your ongoing monthly + payment will be {priceDisplay}.
-
+
Date: Thu, 16 Nov 2023 16:05:26 +0000 Subject: [PATCH 5/9] Moved the storybook scenarios around so Digi Sub Saves are all in one file --- .../digipack}/DigiSubDiscountConfirm.tsx | 8 ++-- ...r.stories.tsx => DigiSubSaves.stories.tsx} | 34 +++++++------- .../DigiSubSaves.stories.tsx | 47 ------------------- 3 files changed, 22 insertions(+), 67 deletions(-) rename client/components/mma/cancel/{digipack/digisubCancellationSaves => cancellationSaves/digipack}/DigiSubDiscountConfirm.tsx (95%) rename client/components/mma/cancel/cancellationSaves/digipack/{ThankYouOffer.stories.tsx => DigiSubSaves.stories.tsx} (61%) delete mode 100644 client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx similarity index 95% rename from client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx rename to client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx index 36b76f189..3b5301d7e 100644 --- a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx @@ -9,12 +9,14 @@ import { } from '@guardian/source-react-components'; import { useContext, useEffect } from 'react'; import { useLocation } from 'react-router'; -import type { CancellationContextInterface , +import type { + CancellationContextInterface, CancellationPageTitleInterface, - CancellationRouterState} from '@/client/components/mma/cancel/CancellationContainer'; + CancellationRouterState, +} from '@/client/components/mma/cancel/CancellationContainer'; import { CancellationContext, - CancellationPageTitleContext + CancellationPageTitleContext, } from '@/client/components/mma/cancel/CancellationContainer'; import { linkCss } from '@/client/components/mma/upgrade/UpgradeSupportStyles'; import { diff --git a/client/components/mma/cancel/cancellationSaves/digipack/ThankYouOffer.stories.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubSaves.stories.tsx similarity index 61% rename from client/components/mma/cancel/cancellationSaves/digipack/ThankYouOffer.stories.tsx rename to client/components/mma/cancel/cancellationSaves/digipack/DigiSubSaves.stories.tsx index 2fa190e00..946955d87 100644 --- a/client/components/mma/cancel/cancellationSaves/digipack/ThankYouOffer.stories.tsx +++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubSaves.stories.tsx @@ -1,28 +1,20 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryFn , StoryObj } from '@storybook/react'; import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator'; +import { CancellationContainer } from '@/client/components/mma/cancel/CancellationContainer'; +import { DigiSubDiscountConfirm } from '@/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm'; +import { ThankYouOffer } from '@/client/components/mma/cancel/cancellationSaves/digipack/ThankYouOffer'; import { digitalPackPaidByDirectDebit, digitalPackWithPaymentFailure, } from '@/client/fixtures/productBuilder/testProducts'; import { PRODUCT_TYPES } from '@/shared/productTypes'; -import { CancellationContainer } from '../../CancellationContainer'; -import { ThankYouOffer } from './ThankYouOffer'; export default { - title: 'Pages/CancellationSave/DigiPack/Thank You + Offer', + title: 'Pages/DigiSubSaves', component: CancellationContainer, decorators: [ReactRouterDecorator], parameters: { layout: 'fullscreen', - }, -} as Meta; - -export const Default: StoryObj = { - render: () => { - return ; - }, - - parameters: { reactRouter: { state: { productDetail: digitalPackPaidByDirectDebit(), @@ -33,22 +25,30 @@ export const Default: StoryObj = { ), }, }, +} as Meta; + +export const DiscountThankYouPage: StoryFn< + typeof DigiSubDiscountConfirm +> = () => { + return ; }; -export const IneligibleForDiscount: StoryObj = { +export const EligibleForDiscount: StoryObj = { render: () => { return ; }, +}; +export const IneligibleForDiscount: StoryObj = { + render: () => { + return ; + }, parameters: { reactRouter: { state: { productDetail: digitalPackWithPaymentFailure(), user: { email: 'test@test.com' }, }, - container: ( - - ), }, }, }; diff --git a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx b/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx deleted file mode 100644 index cbca8bdf1..000000000 --- a/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubSaves.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/react'; -import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator'; -import { CancellationContainer } from '@/client/components/mma/cancel/CancellationContainer'; -import { DigiSubDiscountConfirm } from '@/client/components/mma/cancel/digipack/digisubCancellationSaves/DigiSubDiscountConfirm'; -import { digitalPackPaidByDirectDebit } from '@/client/fixtures/productBuilder/testProducts'; -import { PRODUCT_TYPES } from '@/shared/productTypes'; - -export default { - title: 'Pages/DigiSub', - component: CancellationContainer, - decorators: [ReactRouterDecorator], - parameters: { - layout: 'fullscreen', - reactRouter: { - state: { - productDetail: digitalPackPaidByDirectDebit(), - user: { email: 'test@test.com' }, - }, - container: ( - - ), - }, - }, -} as Meta; - -export const DigiSubThankYouPage: StoryFn< - typeof DigiSubDiscountConfirm -> = () => { - return ; -}; - -/*export const DigiSubCancellationOptionsPage: StoryFn< - typeof DigiSubCancellationOptions -> = () => { - return ; -}; - -export const DigiSubOffersPage: StoryFn = () => { - return ; -}; - -export const ConfirmDigiSubCancellationPage: StoryFn< - typeof ConfirmDigiSubCancellation -> = () => { - return ; -} - */ From 5ec146a4b61a22cc1697645d24f100ce6a974637 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Thu, 16 Nov 2023 16:16:52 +0000 Subject: [PATCH 6/9] Final spacing and wording tweaks --- .../digipack/DigiSubDiscountConfirm.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx index 3b5301d7e..c8cf05484 100644 --- a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx @@ -31,7 +31,6 @@ import { headingCss, iconListCss, listWithDividersCss, - sectionSpacing, whatHappensNextIconCss, } from '../../../../../styles/GenericStyles'; @@ -66,15 +65,21 @@ export const DigiSubDiscountConfirm = () => { return ( <> -
+

Discount confirmed

Thank you for continuing to fund our journalism.
@@ -144,7 +149,7 @@ export const DigiSubDiscountConfirm = () => { href="https://theguardian.com" cssOverrides={buttonCentredCss} > - Continue to the Guardian + Go to Guardian homepage
Back to account overview From 60fa9de3082695180e94c83df182ab8a027317d8 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Thu, 16 Nov 2023 16:28:29 +0000 Subject: [PATCH 7/9] Corrected incorrect hardcoded values to correct the billing period --- .../digipack/DigiSubDiscountConfirm.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx index c8cf05484..ff285a4c0 100644 --- a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx @@ -23,10 +23,10 @@ import { buttonCentredCss, stackedButtonLayoutCss, } from '@/client/styles/ButtonStyles'; -import { getOldMembershipPrice } from '@/client/utilities/membershipPriceRise'; import { DATE_FNS_LONG_OUTPUT_FORMAT, parseDate } from '@/shared/dates'; import type { PaidSubscriptionPlan } from '@/shared/productResponse'; import { getMainPlan } from '@/shared/productResponse'; +import { calculateBillingPeriod } from '@/shared/productTypes'; import { headingCss, iconListCss, @@ -49,9 +49,7 @@ export const DigiSubDiscountConfirm = () => { const mainPlan = getMainPlan(digiSub.subscription) as PaidSubscriptionPlan; - const priceDisplay = `${mainPlan.currency}${getOldMembershipPrice( - mainPlan, - )}`; + const priceDisplay = `${mainPlan.currency}${mainPlan.price / 100}`; const nextBillingDate = parseDate( mainPlan.chargedThrough ?? undefined, @@ -59,6 +57,10 @@ export const DigiSubDiscountConfirm = () => { const userEmailAddress = routerState?.user?.email; + const billingPeriod = calculateBillingPeriod( + mainPlan.billingPeriod, + ).toLowerCase(); + useEffect(() => { pageTitleContext.setPageTitle('Your subscription'); }, []); @@ -117,8 +119,8 @@ export const DigiSubDiscountConfirm = () => { 25% discount for 3 months
- You’ll pay £11.99 per month for 3 months, then - £14.99 per month + You’ll pay X per {mainPlan.billingPeriod} for Y, + then Z per {mainPlan.billingPeriod}
  • @@ -132,8 +134,8 @@ export const DigiSubDiscountConfirm = () => { Your billing date
    - From {nextBillingDate}, your ongoing monthly - payment will be {priceDisplay}. + From {nextBillingDate}, your ongoing{' '} + {billingPeriod} payment will be {priceDisplay}.
    • From 889bd05761e2b9da77bfed5275b5aec9101d5d39 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Thu, 16 Nov 2023 18:28:39 +0000 Subject: [PATCH 8/9] changing

    to

    --- .../cancellationSaves/digipack/DigiSubDiscountConfirm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx index ff285a4c0..33c503988 100644 --- a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx @@ -73,7 +73,7 @@ export const DigiSubDiscountConfirm = () => { margin-bottom: 32px; `} > -

    Discount confirmed

    +

    Discount confirmed

    Thank you for continuing to fund our journalism.
    From b158cb5b8358f4728cc361cf237e5adc288fced8 Mon Sep 17 00:00:00 2001 From: Charley_Campbell Date: Thu, 16 Nov 2023 18:32:07 +0000 Subject: [PATCH 9/9] Need to confirm with Daniel what the length of time is for the discount --- .../cancellationSaves/digipack/DigiSubDiscountConfirm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx index 33c503988..4a4151263 100644 --- a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx +++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx @@ -116,7 +116,7 @@ export const DigiSubDiscountConfirm = () => { padding-bottom: ${space[1]}px; `} > - 25% discount for 3 months + 25% discount for ABC
    You’ll pay X per {mainPlan.billingPeriod} for Y,