Merge pull request #1275 from guardian/cc/digisub/journey-routes

DigiSub routes and cancellation reasons

Author: andrewHEguardian

client/components/mma/MMAPage.tsx

@@ -4,7 +4,10 @@ import { breakpoints, from, space } from '@guardian/source-foundations';
 import type { ReactNode } from 'react';
 import { lazy, Suspense, useEffect, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import { initFeatureSwitchUrlParamOverride } from '../../../shared/featureSwitches';
+import {
+	featureSwitches,
+	initFeatureSwitchUrlParamOverride,
+} from '../../../shared/featureSwitches';
 import type {
 	ProductType,
 	ProductTypeWithDeliveryRecordsProperties,
@@ -66,6 +69,11 @@ const ManageProduct = lazy(() =>
 		/* webpackChunkName: "ManageProduct" */ './accountoverview/ManageProduct'
 	).then(({ ManageProduct }) => ({ default: ManageProduct })),
 );
+const ManageProductV2 = lazy(() =>
+	import(
+		/* webpackChunkName: "ManageProduct" */ './accountoverview/manageProducts/ManageProductV2'
+	).then(({ ManageProductV2 }) => ({ default: ManageProductV2 })),
+);
 const CancellationContainer = lazy(() =>
 	import(
 		/* webpackChunkName: "Cancellation" */ './cancel/CancellationContainer'
@@ -134,7 +142,7 @@ const MembershipSwitch = lazy(() =>
 
 const SelectReason = lazy(() =>
 	import(
-		/* webpackChunkName: "Cancellation" */ './cancel/cancellationSaves/membership/SelectReason'
+		/* webpackChunkName: "Cancellation" */ './cancel/cancellationSaves/SelectReason'
 	).then(({ SelectReason }) => ({
 		default: SelectReason,
 	})),
@@ -164,6 +172,30 @@ const SwitchThankYou = lazy(() =>
 	})),
 );
 
+const ConfirmDigiSubCancellation = lazy(() =>
+	import(
+		/* webpackChunkName: "Cancellation" */ './cancel/cancellationSaves/digipack/ConfirmDigiSubCancellation'
+	).then(({ ConfirmDigiSubCancellation: ConfirmDigiSubCancellation }) => ({
+		default: ConfirmDigiSubCancellation,
+	})),
+);
+
+const DigiSubThankYouOffer = lazy(() =>
+	import(
+		/* webpackChunkName: "Cancellation" */ './cancel/cancellationSaves/digipack/ThankYouOffer'
+	).then(({ ThankYouOffer: ThankYouOffer }) => ({
+		default: ThankYouOffer,
+	})),
+);
+
+const ConfirmDigiSubDiscount = lazy(() =>
+	import(
+		/* webpackChunkName: "Cancellation" */ './cancel/cancellationSaves/digipack/DigiSubDiscountConfirm'
+	).then(({ DigiSubDiscountConfirm: DigiSubDiscountConfirm }) => ({
+		default: DigiSubDiscountConfirm,
+	})),
+);
+
 const PaymentDetailUpdateContainer = lazy(() =>
 	import(
 		/* webpackChunkName: "PaymentDetailUpdate" */ './paymentUpdate/PaymentDetailUpdateContainer'
@@ -475,17 +507,29 @@ const MMARouter = () => {
 							</Route>
 						))}
 						{Object.values(PRODUCT_TYPES).map(
-							(productType: ProductType) => (
-								<Route
-									key={productType.urlPart}
-									path={`/${productType.urlPart}`}
-									element={
-										<ManageProduct
-											productType={productType}
-										/>
-									}
-								/>
-							),
+							(productType: ProductType) =>
+								featureSwitches.digisubSave &&
+								productType.productType === 'digipack' ? (
+									<Route
+										key={productType.urlPart}
+										path={`/${productType.urlPart}`}
+										element={
+											<ManageProductV2
+												productType={productType}
+											/>
+										}
+									/>
+								) : (
+									<Route
+										key={productType.urlPart}
+										path={`/${productType.urlPart}`}
+										element={
+											<ManageProduct
+												productType={productType}
+											/>
+										}
+									/>
+								),
 						)}
 						{Object.values(PRODUCT_TYPES)
 							.filter(hasDeliveryFlow)
@@ -658,6 +702,19 @@ const MMARouter = () => {
 										path="switch-thank-you"
 										element={<SwitchThankYou />}
 									/>
+
+									<Route
+										path="confirm-cancel"
+										element={<ConfirmDigiSubCancellation />}
+									/>
+									<Route
+										path="confirm-discount"
+										element={<ConfirmDigiSubDiscount />}
+									/>
+									<Route
+										path="discount-offer"
+										element={<DigiSubThankYouOffer />}
+									/>
 								</Route>
 							),
 						)}

client/components/mma/accountoverview/AccountOverview.stories.tsx

@@ -31,7 +31,6 @@ import { user } from '../../../fixtures/user';
 import { AccountOverview } from './AccountOverview';
 
 featureSwitches['appSubscriptions'] = true;
-featureSwitches['singleContributions'] = true;
 
 export default {
 	title: 'Pages/AccountOverview',

client/components/mma/accountoverview/ManageProduct.tsx

@@ -8,8 +8,8 @@ import {
 } from '@guardian/source-foundations';
 import { useState } from 'react';
 import { Link, Navigate, useLocation } from 'react-router-dom';
+import { featureSwitches } from '@/shared/featureSwitches';
 import { cancellationFormatDate } from '../../../../shared/dates';
-import { featureSwitches } from '../../../../shared/featureSwitches';
 import type {
 	MembersDataApiResponse,
 	ProductDetail,

client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx

@@ -7,13 +7,14 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import {
+	Button,
 	LinkButton,
 	Stack,
 	SvgCalendar,
 	SvgClock,
 	SvgCreditCard,
 } from '@guardian/source-react-components';
-import { Link, Navigate, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { PageContainer } from '@/client/components/mma/Page';
 import { ErrorIcon } from '@/client/components/mma/shared/assets/ErrorIcon';
 import { JsonResponseHandler } from '@/client/components/mma/shared/asyncComponents/DefaultApiResponseHandler';
@@ -71,6 +72,8 @@ const InnerContent = ({
 	manageProductV2Props,
 	productDetail,
 }: InnerContentProps) => {
+	const navigate = useNavigate();
+
 	const mainPlan = getMainPlan(productDetail.subscription);
 	if (!mainPlan) {
 		throw new Error('mainPlan does not exist in manageProductV2 page');
@@ -248,11 +251,17 @@ const InnerContent = ({
 						`}
 					>
 						{!hasCancellationPending && (
-							<CancellationCTA
-								productDetail={productDetail}
-								friendlyName={groupedProductType.friendlyName()}
-								specificProductType={specificProductType}
-							/>
+							<Button
+								priority="subdued"
+								onClick={() => {
+									navigate(
+										'/cancel/' +
+											specificProductType.urlPart,
+									);
+								}}
+							>
+								Cancel {groupedProductType.friendlyName()}
+							</Button>
 						)}
 					</div>
 				</div>
@@ -261,60 +270,13 @@ const InnerContent = ({
 	);
 };
 
-interface CancellationCTAProps {
-	productDetail: ProductDetail;
-	friendlyName: string;
-	specificProductType: ProductType;
-}
-
-const CancellationCTA = (props: CancellationCTAProps) => {
-	const shouldContactUsToCancel =
-		!props.productDetail.selfServiceCancellation.isAllowed ||
-		!props.specificProductType.cancellation;
-	return (
-		<>
-			{shouldContactUsToCancel && (
-				<div
-					css={css`
-						${textSans.medium()};
-						color: ${palette.neutral[46]};
-						margin-top: 16px;
-						justify-content: center;
-					`}
-				>
-					Would you like to cancel your {props.friendlyName}?
-					<Link
-						css={css`
-							${textSans.medium()};
-							color: ${palette.brand[400]};
-							font-weight: 700;
-							text-decoration-line: underline;
-							justify-content: center;
-							margin-left: 5px;
-						`}
-						to={'/cancel/' + props.specificProductType.urlPart}
-						state={{ productDetail: props.productDetail }}
-					>
-						Contact us
-					</Link>
-				</div>
-			)}
-
-			{!shouldContactUsToCancel && (
-				<Link to={'/cancel/' + props.specificProductType.urlPart}>
-					{' '}
-					Cancel {props.friendlyName}{' '}
-				</Link>
-			)}
-		</>
-	);
-};
-
 interface ManageProductV2RouterState {
 	productDetail: ProductDetail;
 }
 
 const AsyncLoadedInnerContent = (props: WithProductType<ProductType>) => {
+	const navigate = useNavigate();
+
 	const request = createProductDetailFetcher(
 		props.productType.allProductsProductTypeFilterString,
 	);
@@ -332,7 +294,8 @@ const AsyncLoadedInnerContent = (props: WithProductType<ProductType>) => {
 	}
 
 	if (data == null || data.products.length == 0) {
-		return <Navigate to="/" />;
+		navigate('/');
+		return null;
 	}
 
 	const productDetail = data.products.filter(isProduct)[0];

client/components/mma/cancel/CancellationSaveEligibilityCheck.tsx

@@ -1,12 +1,27 @@
 import { useContext } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
+import { featureSwitches } from '@/shared/featureSwitches';
+import {
+	getSpecificProductTypeFromProduct,
+	type ProductDetail,
+} from '@/shared/productResponse';
 import { CancellationContext } from './CancellationContainer';
 import type {
 	CancellationContextInterface,
 	CancellationRouterState,
 } from './CancellationContainer';
 import { CancellationReasonSelection } from './CancellationReasonSelection';
 
+function productHasSaveJourney(productToCancel: ProductDetail): boolean {
+	const specificProductTypeKey =
+		getSpecificProductTypeFromProduct(productToCancel).productType;
+
+	return (
+		specificProductTypeKey === 'membership' ||
+		(featureSwitches.digisubSave && specificProductTypeKey === 'digipack')
+	);
+}
+
 export const CancellationSaveEligibilityCheck = () => {
 	const location = useLocation();
 	const routerState = location.state as CancellationRouterState;
@@ -20,10 +35,7 @@ export const CancellationSaveEligibilityCheck = () => {
 		return <Navigate to="/" />;
 	}
 
-	if (
-		!routerState?.dontShowOffer &&
-		productDetail.mmaCategory === 'membership'
-	) {
+	if (!routerState?.dontShowOffer && productHasSaveJourney(productDetail)) {
 		return <Navigate to="./landing" />;
 	}
 

client/components/mma/cancel/cancellationSaves/CancellationLanding.tsx

@@ -31,6 +31,9 @@ function getNextRoute(productToCancel: ProductDetail): string {
 		case 'membership': {
 			return '../details';
 		}
+		case 'digipack': {
+			return '../discount-offer';
+		}
 		default: {
 			return '/';
 		}

client/components/mma/cancel/cancellationSaves/CancellationSaves.stories.tsx

@@ -7,9 +7,9 @@ import { ConfirmMembershipCancellation } from './membership/ConfirmMembershipCan
 import { ContinueMembershipConfirmation } from './membership/ContinueMembershipConfirmation';
 import { MembershipSwitch } from './membership/MembershipSwitch';
 import { SaveOptions } from './membership/SaveOptions';
-import { SelectReason } from './membership/SelectReason';
 import { SwitchThankYou } from './membership/SwitchThankYou';
 import { ValueOfSupport } from './membership/ValueOfSupport';
+import { SelectReason } from './SelectReason';
 
 export default {
 	title: 'Pages/CancellationSave',