refactor links and add feature switch

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,
@@ -513,7 +516,8 @@ const MMARouter = () => {
 						))}
 						{Object.values(PRODUCT_TYPES).map(
 							(productType: ProductType) =>
-								productType.urlPart === 'digital' ? (
+								featureSwitches.digisubSave &&
+								productType.productType === 'digipack' ? (
 									<Route
 										key={productType.urlPart}
 										path={`/${productType.urlPart}`}

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/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 { Navigate, 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';
@@ -22,7 +23,6 @@ import { getNextPaymentDetails } from '@/client/components/mma/shared/NextPaymen
 import { PaymentDetails } from '@/client/components/mma/shared/PaymentDetails';
 import { PaymentFailureAlertIfApplicable } from '@/client/components/mma/shared/PaymentFailureAlertIfApplicable';
 import { ProductInfoTableV2 } from '@/client/components/mma/shared/ProductInfoTableV2';
-import { linkCss } from '@/client/components/mma/upgrade/UpgradeSupportStyles';
 import { GenericErrorScreen } from '@/client/components/shared/GenericErrorScreen';
 import { NAV_LINKS } from '@/client/components/shared/nav/NavConfig';
 import {
@@ -72,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');
@@ -249,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>
@@ -262,22 +270,6 @@ const InnerContent = ({
 	);
 };
 
-interface CancellationCTAProps {
-	productDetail: ProductDetail;
-	friendlyName: string;
-	specificProductType: ProductType;
-}
-
-const CancellationCTA = (props: CancellationCTAProps) => {
-	return (
-		<>
-			<Link css={linkCss} to={'/cancel/digital/landing'}>
-				Cancel {props.friendlyName}{' '}
-			</Link>
-		</>
-	);
-};
-
 interface ManageProductV2RouterState {
 	productDetail: ProductDetail;
 }

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/identity/emailAndMarketing/EmailAndMarketing.stories.tsx

@@ -142,8 +142,6 @@ export const WithIAP: StoryObj<typeof EmailAndMarketing> = {
 
 export const WithSingleContribution: StoryObj<typeof EmailAndMarketing> = {
 	render: () => {
-		featureSwitches['singleContributions'] = true;
-
 		return <EmailAndMarketing />;
 	},
 

shared/featureSwitches.ts

@@ -4,7 +4,7 @@ export const initFeatureSwitchUrlParamOverride = () => {
 	if (param) {
 		for (const [key, value] of Object.entries(featureSwitches)) {
 			if (!value) {
-				featureSwitches[key] = param === key;
+				featureSwitches[key as FeatureSwitchName] = param === key;
 			}
 		}
 	}
@@ -22,8 +22,16 @@ export const initFeatureSwitchUrlParamOverride = () => {
  * name provided then the function will return false and the feature switch
  * will be set to off.
  */
-export const featureSwitches: Record<string, boolean> = {
+
+type FeatureSwitchName =
+	| 'exampleFeature'
+	| 'appSubscriptions'
+	| 'supporterPlusUpdateAmount'
+	| 'digisubSave';
+
+export const featureSwitches: Record<FeatureSwitchName, boolean> = {
 	exampleFeature: false,
 	appSubscriptions: true,
 	supporterPlusUpdateAmount: true,
+	digisubSave: true,
 };