Merge pull request #1468 from guardian/contact-us-to-cancel-refactor

conditional logic refactor (cencellation journey)
guardian · Feb 17, 2025 · 81aeb94 · 81aeb94
2 parents dc06f94 + 01b644b
commit 81aeb94
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/client/components/mma/cancel/Cancellation.stories.tsx b/client/components/mma/cancel/Cancellation.stories.tsx
@@ -17,6 +17,7 @@ import {
 	supporterPlusMonthlyAllAccessDigital,
 } from '../../../fixtures/productBuilder/testProducts';
 import { CancellationContainer } from './CancellationContainer';
+import { CancellationJourneyFunnel } from './CancellationJourneyFunnel';
 import { CancellationReasonReview } from './CancellationReasonReview';
 import { CancellationReasonSelection } from './CancellationReasonSelection';
 import { CancelAlternativeConfirmed } from './cancellationSaves/CancelAlternativeConfirmed';
@@ -75,7 +76,7 @@ export const SelectReason: StoryObj<typeof CancellationReasonSelection> = {
 export const ContactCustomerService: StoryObj<
 	typeof CancellationReasonSelection
 > = {
-	render: () => <CancellationReasonSelection />,
+	render: () => <CancellationJourneyFunnel />,
 
 	parameters: {
 		reactRouter: {

diff --git a/client/components/mma/cancel/CancellationJourneyFunnel.tsx b/client/components/mma/cancel/CancellationJourneyFunnel.tsx
@@ -1,17 +1,20 @@
 import { useContext } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
+import { hasCancellationFlow } from '@/client/utilities/productUtils';
 import { featureSwitches } from '@/shared/featureSwitches';
 import {
 	getSpecificProductTypeFromTier,
 	isPaidSubscriptionPlan,
 } from '@/shared/productResponse';
 import type { ProductTypeKeys } from '@/shared/productTypes';
+import { GROUPED_PRODUCT_TYPES } from '@/shared/productTypes';
 import { CancellationContext } from './CancellationContainer';
 import type {
 	CancellationContextInterface,
 	CancellationRouterState,
 } from './CancellationContainer';
 import { CancellationReasonSelection } from './CancellationReasonSelection';
+import { ContactUsToCancel } from './ContactUsToCancel';
 
 function productHasEarlySaveJourney(productTypeKey: ProductTypeKeys): boolean {
 	return (
@@ -59,7 +62,22 @@ export const CancellationJourneyFunnel = () => {
 	}
 
 	if (
-		Object.hasOwn(productType, 'cancellation') &&
+		!productDetail.selfServiceCancellation.isAllowed ||
+		!hasCancellationFlow(productType)
+	) {
+		return (
+			<ContactUsToCancel
+				selfServiceCancellation={productDetail.selfServiceCancellation}
+				subscriptionId={productDetail.subscription.subscriptionId}
+				groupedProductType={
+					GROUPED_PRODUCT_TYPES[productType.groupedProductType]
+				}
+			/>
+		);
+	}
+
+	if (
+		hasCancellationFlow(productType) &&
 		!productType.cancellation?.reasons
 	) {
 		return <Navigate to="./confirm" state={{ ...routerState }} />;

diff --git a/client/components/mma/cancel/CancellationReasonSelection.tsx b/client/components/mma/cancel/CancellationReasonSelection.tsx
@@ -23,12 +23,10 @@ import {
 } from '../../../../shared/dates';
 import type { ProductDetail } from '../../../../shared/productResponse';
 import type { ProductTypeWithCancellationFlow } from '../../../../shared/productTypes';
-import { GROUPED_PRODUCT_TYPES } from '../../../../shared/productTypes';
 import {
 	LoadingState,
 	useAsyncLoader,
 } from '../../../utilities/hooks/useAsyncLoader';
-import { hasCancellationFlow } from '../../../utilities/productUtils';
 import { GenericErrorScreen } from '../../shared/GenericErrorScreen';
 import { WithStandardTopMargin } from '../../shared/WithStandardTopMargin';
 import { JsonResponseHandler } from '../shared/asyncComponents/DefaultApiResponseHandler';
@@ -44,7 +42,6 @@ import {
 import type { CancellationDateResponse } from './cancellationDateResponse';
 import { cancellationDateFetcher } from './cancellationDateResponse';
 import type { CancellationReason } from './cancellationReason';
-import { ContactUsToCancel } from './ContactUsToCancel';
 
 interface ReasonPickerProps {
 	productType: ProductTypeWithCancellationFlow;
@@ -383,21 +380,6 @@ export const CancellationReasonSelection = () => {
 		CancellationContext,
 	) as CancellationContextInterface;
 
-	if (
-		!productDetail.selfServiceCancellation.isAllowed ||
-		!hasCancellationFlow(productType)
-	) {
-		return (
-			<ContactUsToCancel
-				selfServiceCancellation={productDetail.selfServiceCancellation}
-				subscriptionId={productDetail.subscription.subscriptionId}
-				groupedProductType={
-					GROUPED_PRODUCT_TYPES[productType.groupedProductType]
-				}
-			/>
-		);
-	}
-
 	if (productType.cancellation.startPageOfferEffectiveDateOptions) {
 		return (
 			<ReasonPickerWithCancellationDate