Merge pull request #1252 from guardian/cc/digisub/discount-confirmed-v1

DigiSub Discount confirmed v1
guardian · Nov 17, 2023 · 031fac4 · 031fac4
2 parents a137850 + b158cb5
commit 031fac4
Show file tree

Hide file tree

Showing 2 changed files with 180 additions and 17 deletions.
diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubDiscountConfirm.tsx
@@ -0,0 +1,163 @@
+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 { 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 { 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,
+	listWithDividersCss,
+	whatHappensNextIconCss,
+} from '../../../../../styles/GenericStyles';
+
+export const DigiSubDiscountConfirm = () => {
+	const pageTitleContext = useContext(
+		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}${mainPlan.price / 100}`;
+
+	const nextBillingDate = parseDate(
+		mainPlan.chargedThrough ?? undefined,
+	).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT);
+
+	const userEmailAddress = routerState?.user?.email;
+
+	const billingPeriod = calculateBillingPeriod(
+		mainPlan.billingPeriod,
+	).toLowerCase();
+
+	useEffect(() => {
+		pageTitleContext.setPageTitle('Your subscription');
+	}, []);
+
+	return (
+		<>
+			<section
+				css={css`
+					padding-top: ${space[4]}px;
+					margin-bottom: 32px;
+				`}
+			>
+				<h2 css={headingCss}>Discount confirmed</h2>
+				Thank you for continuing to fund our journalism.
+			</section>
+
+			<section
+				css={css`
+					margin-top: 20px;
+					border-bottom: 1px solid ${palette.neutral[86]};
+					border-top: 1px solid ${palette.neutral[86]};
+					padding-bottom: ${space[5]}px;
+				`}
+			>
+				<Stack space={5}>
+					<ul
+						css={[
+							iconListCss,
+							listWithDividersCss,
+							whatHappensNextIconCss,
+						]}
+					>
+						<li>
+							<SvgEnvelope size="medium" />
+							<span>
+								<strong
+									css={css`
+										padding-bottom: ${space[1]}px;
+									`}
+								>
+									Check your email
+								</strong>
+								<br />
+								We have sent you a discount confirmation to{' '}
+								{userEmailAddress}
+							</span>
+						</li>
+						<li>
+							<SvgGift size="medium" />
+							<span>
+								<strong
+									css={css`
+										padding-bottom: ${space[1]}px;
+									`}
+								>
+									25% discount for ABC
+								</strong>
+								<br />
+								You’ll pay X per {mainPlan.billingPeriod} for Y,
+								then Z per {mainPlan.billingPeriod}
+							</span>
+						</li>
+						<li>
+							<SvgCalendar size="medium" />
+							<span data-qm-masking="blocklist">
+								<strong
+									css={css`
+										padding-bottom: ${space[1]}px;
+									`}
+								>
+									Your billing date
+								</strong>
+								<br />
+								From {nextBillingDate}, your ongoing{' '}
+								{billingPeriod} payment will be {priceDisplay}.
+							</span>
+						</li>
+					</ul>
+				</Stack>
+			</section>
+			<section
+				css={css`
+					margin-top: 32px;
+				`}
+			>
+				<div css={stackedButtonLayoutCss}>
+					<LinkButton
+						href="https://theguardian.com"
+						cssOverrides={buttonCentredCss}
+					>
+						Go to Guardian homepage
+					</LinkButton>
+					<div css={linkCss}>
+						<a href="/">Back to account overview </a>
+					</div>
+				</div>
+			</section>
+		</>
+	);
+};
diff --git a/...nSaves/digipack/ThankYouOffer.stories.tsx → ...onSaves/digipack/DigiSubSaves.stories.tsx b/...nSaves/digipack/ThankYouOffer.stories.tsx → ...onSaves/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<typeof CancellationContainer>;
-
-export const Default: StoryObj<typeof ThankYouOffer> = {
-	render: () => {
-		return <ThankYouOffer />;
-	},
-
-	parameters: {
 		reactRouter: {
 			state: {
 				productDetail: digitalPackPaidByDirectDebit(),
@@ -33,22 +25,30 @@ export const Default: StoryObj<typeof ThankYouOffer> = {
 			),
 		},
 	},
+} as Meta<typeof CancellationContainer>;
+
+export const DiscountThankYouPage: StoryFn<
+	typeof DigiSubDiscountConfirm
+> = () => {
+	return <DigiSubDiscountConfirm />;
 };
 
-export const IneligibleForDiscount: StoryObj<typeof ThankYouOffer> = {
+export const EligibleForDiscount: StoryObj<typeof ThankYouOffer> = {
 	render: () => {
 		return <ThankYouOffer />;
 	},
+};
 
+export const IneligibleForDiscount: StoryObj<typeof ThankYouOffer> = {
+	render: () => {
+		return <ThankYouOffer />;
+	},
 	parameters: {
 		reactRouter: {
 			state: {
 				productDetail: digitalPackWithPaymentFailure(),
 				user: { email: 'test@test.com' },
 			},
-			container: (
-				<CancellationContainer productType={PRODUCT_TYPES.digipack} />
-			),
 		},
 	},
 };