Amend cancellation review and confirmation page copy

update guardian light cancellation cypress test to reflect new copy on cancellation review page refactor references to the cancellation reasons property which is now optional given there are no cancellation reasons for guardian light
guardian · Nov 14, 2024 · af59417 · af59417
1 parent 681f0d4
commit af59417
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 99 deletions.
diff --git a/client/components/mma/cancel/Cancellation.stories.tsx b/client/components/mma/cancel/Cancellation.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { http, HttpResponse } from 'msw';
 import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
+import { toMembersDataApiResponse } from '@/client/fixtures/mdapiResponse';
 import { PRODUCT_TYPES } from '@/shared/productTypes';
 import {
 	contributionCancelled,
@@ -9,7 +10,6 @@ import {
 	guardianLight,
 	guardianLightCancelled,
 	guardianWeeklyPaidByCard,
-	monthlyContributionPaidByCard,
 	supporterPlus,
 	supporterPlusCancelled,
 	supporterPlusMonthlyAllAccessDigital,
@@ -20,22 +20,8 @@ import { CancellationReasonSelection } from './CancellationReasonSelection';
 import { CancelAlternativeConfirmed } from './cancellationSaves/CancelAlternativeConfirmed';
 import { CancelAlternativeOffer } from './cancellationSaves/CancelAlternativeOffer';
 import { CancelAlternativeReview } from './cancellationSaves/CancelAlternativeReview';
-import { getCancellationSummary } from './CancellationSummary';
-import { contributionsCancellationReasons } from './contributions/ContributionsCancellationReasons';
 import { ConfirmCancellation } from './stages/ConfirmCancellation';
-import {
-	ExecuteCancellation,
-	getCancellationSummaryWithReturnButton,
-} from './stages/ExecuteCancellation';
-import { otherCancellationReason } from './supporterplus/SupporterplusCancellationReasons';
-import { toMembersDataApiResponse } from '@/client/fixtures/mdapiResponse';
-
-const contributions = PRODUCT_TYPES.contributions;
-/*
-contributions.cancellation!.reasons = contributionsCancellationReasons.concat(
-	otherCancellationReason,
-);
-*/
+import { ExecuteCancellation } from './stages/ExecuteCancellation';
 
 export default {
 	title: 'Pages/Cancellation',

diff --git a/client/components/mma/cancel/CancellationReasonReview.tsx b/client/components/mma/cancel/CancellationReasonReview.tsx
@@ -426,7 +426,7 @@ export const CancellationReasonReview = () => {
 		cancellationPolicy: string;
 	};
 
-	if (!routerState?.selectedReasonId) {
+	if (!routerState?.selectedReasonId || !productType.cancellation.reasons) {
 		return <Navigate to=".." />;
 	}
 

diff --git a/client/components/mma/cancel/CancellationReasonSelection.tsx b/client/components/mma/cancel/CancellationReasonSelection.tsx
@@ -76,6 +76,12 @@ const ReasonPicker = ({
 		(featureSwitches.contributionCancellationPause &&
 			productType.productType === 'contributions');
 
+	if (!productType.cancellation.reasons) {
+		return (
+			<GenericErrorScreen loggingMessage="Got to the cancellation reasons selection page with a productType that doesn't have any cancellation reasons." />
+		);
+	}
+
 	return (
 		<>
 			{shouldUseProgressStepper ? (

diff --git a/client/components/mma/cancel/CancellationSummary.tsx b/client/components/mma/cancel/CancellationSummary.tsx
@@ -167,7 +167,7 @@ const actuallyCancelled = (
 								Support us another way
 							</h4>
 							<p>
-								{productType?.cancellation?.summaryReasonSpecificPara(
+								{productType?.cancellation?.summaryReasonSpecificPara?.(
 									cancellationReasonId,
 									currencySymbol,
 								) ||

diff --git a/client/components/mma/cancel/cancellationSaves/SelectReason.tsx b/client/components/mma/cancel/cancellationSaves/SelectReason.tsx
@@ -89,10 +89,12 @@ const CancellationInfo = ({
 );
 
 const ReasonSelection = ({
-	productType,
+	groupedProductFriendlyName,
+	cancellationReasons,
 	setSelectedReasonId,
 }: {
-	productType: ProductTypeWithCancellationFlow;
+	groupedProductFriendlyName: string;
+	cancellationReasons: CancellationReason[];
 	setSelectedReasonId: React.Dispatch<React.SetStateAction<string>>;
 }) => {
 	return (
@@ -109,12 +111,7 @@ const ReasonSelection = ({
 			`}
 		>
 			<legend css={reasonLegendCss}>
-				Why did you cancel your{' '}
-				{
-					GROUPED_PRODUCT_TYPES[productType.groupedProductType]
-						.friendlyName
-				}{' '}
-				today?
+				Why did you cancel your {groupedProductFriendlyName} today?
 			</legend>
 			<RadioGroup
 				name="issue_type"
@@ -124,32 +121,30 @@ const ReasonSelection = ({
 					padding-top: ${space[4]}px;
 				`}
 			>
-				{productType.cancellation.reasons.map(
-					(reason: CancellationReason) => (
-						<div
-							key={reason.reasonId}
+				{cancellationReasons.map((reason: CancellationReason) => (
+					<div
+						key={reason.reasonId}
+						css={css`
+							border: 1px solid ${palette.neutral[86]};
+							border-radius: 4px;
+							padding: ${space[1]}px ${space[3]}px;
+							margin-bottom: ${space[3]}px;
+						`}
+					>
+						<Radio
+							name="cancellation-reason"
+							value={reason.reasonId}
+							label={reason.linkLabel}
 							css={css`
-								border: 1px solid ${palette.neutral[86]};
-								border-radius: 4px;
-								padding: ${space[1]}px ${space[3]}px;
-								margin-bottom: ${space[3]}px;
+								vertical-align: top;
+								text-transform: lowercase;
+								:checked + div label:first-of-type {
+									font-weight: bold;
+								}
 							`}
-						>
-							<Radio
-								name="cancellation-reason"
-								value={reason.reasonId}
-								label={reason.linkLabel}
-								css={css`
-									vertical-align: top;
-									text-transform: lowercase;
-									:checked + div label:first-of-type {
-										font-weight: bold;
-									}
-								`}
-							/>
-						</div>
-					),
-				)}
+						/>
+					</div>
+				))}
 			</RadioGroup>
 		</fieldset>
 	);
@@ -266,6 +261,11 @@ export const SelectReason = () => {
 			<GenericErrorScreen loggingMessage="Cancel journey case id api call failed during the cancellation process" />
 		);
 	}
+	if (!productType.cancellation.reasons) {
+		return (
+			<GenericErrorScreen loggingMessage="Got to the cancellation /reasons page with a productType that doesn't have any cancellation reasons." />
+		);
+	}
 
 	return (
 		<section css={sectionSpacing}>
@@ -293,10 +293,16 @@ export const SelectReason = () => {
 					Please take a moment to tell us more about your decision.
 				</span>
 			</p>
-			<ReasonSelection
-				productType={productType}
-				setSelectedReasonId={setSelectedReasonId}
-			/>
+			{!!productType.cancellation.reasons && (
+				<ReasonSelection
+					groupedProductFriendlyName={
+						GROUPED_PRODUCT_TYPES[productType.groupedProductType]
+							.friendlyName
+					}
+					cancellationReasons={productType.cancellation.reasons}
+					setSelectedReasonId={setSelectedReasonId}
+				/>
+			)}
 			{inValidationErrorState && !selectedReasonId.length && (
 				<InlineError
 					cssOverrides={css`

diff --git a/...ponents/mma/cancel/contributions/ContributionsCancellationFlowPaymentIssueSaveAttempt.tsx b/...ponents/mma/cancel/contributions/ContributionsCancellationFlowPaymentIssueSaveAttempt.tsx
@@ -38,7 +38,11 @@ export const ContributionsCancellationFlowPaymentIssueSaveAttempt = (
 		CancellationContext,
 	) as CancellationContextInterface;
 
-	if (!productType || !productDetail || !routerState.selectedReasonId) {
+	if (
+		!productType.cancellation.reasons ||
+		!productDetail ||
+		!routerState.selectedReasonId
+	) {
 		return <Navigate to="../" />;
 	}
 
@@ -54,7 +58,7 @@ export const ContributionsCancellationFlowPaymentIssueSaveAttempt = (
 	};
 
 	const onUpdateConfirmed = (updatedAmount: number) => {
-		const reason = productType.cancellation.reasons.find(
+		const reason = productType.cancellation.reasons?.find(
 			(reason) => reason.reasonId === routerState.selectedReasonId,
 		) as CancellationReason;
 

diff --git a/client/components/mma/cancel/stages/ConfirmCancellation.tsx b/client/components/mma/cancel/stages/ConfirmCancellation.tsx
@@ -181,9 +181,32 @@ export const ConfirmCancellation = () => {
 						</p>
 					)) ||
 					(productIsGuardianLight && (
-						<p>
-							Specific message for Guardian Light product holders.
-						</p>
+						<>
+							<p>
+								If you confirm your cancellation, you will lose
+								the following benefits:
+							</p>
+							<ul css={youllLoseList}>
+								<li>Unlimited access to the Guardian app</li>
+								<li>Ad-free reading across all your devices</li>
+								<li>Exclusive supporter newsletter</li>
+								<li>
+									Far fewer asks for support when you're
+									signed in
+								</li>
+							</ul>
+							{subscription.potentialCancellationDate && (
+								<p css={loseDateCss}>
+									You will no longer have access to these
+									benefits from{' '}
+									{parseDate(
+										subscription.potentialCancellationDate,
+										'yyyy-MM-dd',
+									).dateStr(DATE_FNS_LONG_OUTPUT_FORMAT)}
+									.
+								</p>
+							)}
+						</>
 					))}
 				<div css={buttonsCtaHolder}>
 					<Button
@@ -203,7 +226,7 @@ export const ConfirmCancellation = () => {
 							navigate('/');
 						}}
 					>
-						{productIsSubscription
+						{productIsSubscription || productIsGuardianLight
 							? 'Keep my subscription'
 							: 'Keep supporting'}
 					</Button>

diff --git a/client/components/mma/cancel/stages/SavedCancellation.tsx b/client/components/mma/cancel/stages/SavedCancellation.tsx
@@ -41,7 +41,7 @@ export const SavedCancellation = () => {
 		return <Navigate to="../" />;
 	}
 
-	const reason = productType.cancellation.reasons.find(
+	const reason = productType.cancellation.reasons?.find(
 		(reason) => reason.reasonId === selectedReasonId,
 	) as CancellationReason;
 

diff --git a/cypress/tests/mocked/parallel-2/cancelGuardianLight.cy.ts b/cypress/tests/mocked/parallel-2/cancelGuardianLight.cy.ts
@@ -1,4 +1,7 @@
-import { guardianLight, guardianLightCancelled } from '../../../../client/fixtures/productBuilder/testProducts';
+import {
+	guardianLight,
+	guardianLightCancelled,
+} from '../../../../client/fixtures/productBuilder/testProducts';
 import { toMembersDataApiResponse } from '../../../../client/fixtures/mdapiResponse';
 import { signInAndAcceptCookies } from '../../../lib/signInAndAcceptCookies';
 
@@ -75,15 +78,15 @@ describe('Cancel Guardian Light', () => {
 		}).as('cancel_guardian_light');
 	});
 
-	it.only('user successfully cancels', () => {
+	it('user successfully cancels', () => {
 		setupCancellation();
 
 		cy.intercept('GET', '/api/me/mma?productType=GuardianLight', {
 			statusCode: 200,
 			body: toMembersDataApiResponse(guardianLightCancelled()),
 		}).as('get_cancelled_product');
 
-		cy.findByText('Specific message for Guardian Light product holders.');
+		cy.findByText('Is this really goodbye?');
 
 		cy.findByRole('button', { name: 'Confirm cancellation' }).click();
 
@@ -93,34 +96,5 @@ describe('Cancel Guardian Light', () => {
 		cy.findByRole('heading', {
 			name: 'Your guardian light is cancelled',
 		});
-		/*
-		cy.intercept('GET', '/api/me/mma/**', {
-			statusCode: 200,
-			body: toMembersDataApiResponse(supporterPlusCancelled()),
-		}).as('get_cancelled_product');
-
-		cy.findByRole('radio', {
-			name: 'I am unhappy with some editorial decisions',
-		}).click();
-		cy.findByRole('button', { name: 'Continue' }).click();
-
-		cy.wait('@get_case');
-
-		cy.findByRole('button', { name: 'Continue to cancellation' }).click();
-
-		cy.findByRole('button', {
-			name: 'Confirm cancellation',
-		}).click();
-
-		cy.wait('@create_case_in_salesforce');
-		cy.wait('@cancel_supporter_plus');
-		cy.wait('@get_cancelled_product');
-
-		cy.findByRole('heading', {
-			name: 'Your subscription has been cancelled',
-		});
-
-		cy.get('@get_cancellation_date.all').should('have.length', 0);
-		*/
 	});
 });
diff --git a/shared/productTypes.ts b/shared/productTypes.ts
@@ -725,7 +725,7 @@ export const PRODUCT_TYPES: { [productKey in ProductTypeKeys]: ProductType } = {
 		productTitle: () => 'Guardian Light',
 		friendlyName: 'guardian light',
 		productType: 'guardianlight',
-		groupedProductType: 'recurringSupport',
+		groupedProductType: 'recurringSupportWithBenefits',
 		allProductsProductTypeFilterString: 'GuardianLight',
 		urlPart: 'guardianlight',
 		getOphanProductType: () => 'GUARDIAN_LIGHT',
@@ -734,16 +734,12 @@ export const PRODUCT_TYPES: { [productKey in ProductTypeKeys]: ProductType } = {
 			SoftOptInIDs.SupporterNewsletter,
 		],
 		cancellation: {
-			alternateSummaryMainPara:
-				'This is immediate and you will not be charged again.',
 			sfCaseProduct: 'Guardian Light',
 			startPageBody: contributionsCancellationFlowStart,
-			shouldHideSummaryMainPara: true,
 			onlyShowSupportSectionIfAlternateText: true,
 			alternateSupportButtonUrlSuffix: () => undefined,
 			swapFeedbackAndContactUs: true,
 			shouldHideThrasher: true,
-			shouldShowReminder: true,
 		},
 	},
 };