Top tier copy changes

client/__tests__/components/updateAmount/contributionUpdateAmount.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { CurrencyIso } from '@/client/utilities/currencyIso';
 import { PRODUCT_TYPES } from '../../../../shared/productTypes';
 import { UpdateAmount } from '../../../components/mma/accountoverview/updateAmount/UpdateAmount';
 
@@ -9,7 +10,7 @@ const mainPlan = (billingPeriod: string) => ({
 	name: '',
 	shouldBeVisible: false,
 	currency: '£',
-	currencyISO: 'GBP',
+	currencyISO: 'GBP' as CurrencyIso,
 	billingPeriod,
 	features: '',
 });

client/__tests__/components/updateAmount/supporterPlusUpdateAmount.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import type { CurrencyIso } from '@/client/utilities/currencyIso';
 import { PRODUCT_TYPES } from '../../../../shared/productTypes';
 import { UpdateAmount } from '../../../components/mma/accountoverview/updateAmount/UpdateAmount';
 
@@ -8,7 +9,7 @@ const mainPlan = (billingPeriod: string) => ({
 	name: '',
 	shouldBeVisible: false,
 	currency: '£',
-	currencyISO: 'GBP',
+	currencyISO: 'GBP' as CurrencyIso,
 	billingPeriod,
 	price: 500,
 	features: '',

client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx

@@ -19,7 +19,6 @@ import {
 import { useEffect, useState } from 'react';
 import type { PaidSubscriptionPlan } from '../../../../../shared/productResponse';
 import { getBillingPeriodAdjective } from '../../../../../shared/productTypes';
-import type { CurrencyIso } from '../../../../utilities/currencyIso';
 import { fetchWithDefaultParameters } from '../../../../utilities/fetch';
 import { getSupporterPlusSuggestedAmountsFromMainPlan } from '../../../../utilities/pricingConfig/suggestedAmounts';
 import { supporterPlusPriceConfigByCountryGroup } from '../../../../utilities/pricingConfig/supporterPlusPricing';
@@ -106,7 +105,7 @@ export const SupporterPlusUpdateAmountForm = (
 	props: SupporterPlusUpdateAmountFormProps,
 ) => {
 	const priceConfig = (supporterPlusPriceConfigByCountryGroup[
-		props.mainPlan.currencyISO as CurrencyIso
+		props.mainPlan.currencyISO
 	] || supporterPlusPriceConfigByCountryGroup.international)[
 		props.mainPlan.billingPeriod
 	];

client/components/mma/cancel/Cancellation.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
-import {http, HttpResponse} from 'msw';
+import { http, HttpResponse } from 'msw';
 import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
 import { PRODUCT_TYPES } from '@/shared/productTypes';
 import {
@@ -66,7 +66,7 @@ export const Review: StoryObj<typeof CancellationContainer> = {
 	parameters: {
 		msw: [
 			http.post('/api/case', () => {
-				return HttpResponse.json({ id: 'caseId' })
+				return HttpResponse.json({ id: 'caseId' });
 			}),
 		],
 		reactRouter: {
@@ -87,7 +87,7 @@ export const Offer: StoryObj<typeof CancellationContainer> = {
 	parameters: {
 		msw: [
 			http.post('/api/case', () => {
-				return HttpResponse.json({ id: 'caseId' })
+				return HttpResponse.json({ id: 'caseId' });
 			}),
 		],
 		reactRouter: {
@@ -122,7 +122,7 @@ export const OfferReview: StoryObj<typeof CancellationContainer> = {
 			http.post('/api/discounts/apply-discount', () => {
 				return new HttpResponse(null, {
 					status: 201,
-				})
+				});
 			}),
 		],
 	},
@@ -168,5 +168,5 @@ export const Confirmation: StoryFn<typeof CancellationContainer> = () => {
 	return getCancellationSummary(
 		PRODUCT_TYPES.contributions,
 		contributionCancelled(),
-	)(contributionCancelled());
+	);
 };

client/components/mma/cancel/CancellationSummary.tsx

@@ -1,11 +1,17 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source/foundations';
+import {
+	palette,
+	space,
+	textEgyptianBold17,
+} from '@guardian/source/foundations';
 import { Link } from 'react-router-dom';
 import { cancellationFormatDate } from '../../../../shared/dates';
 import type {
+	PaidSubscriptionPlan,
 	ProductDetail,
 	Subscription,
 } from '../../../../shared/productResponse';
+import { getMainPlan } from '../../../../shared/productResponse';
 import type { ProductType } from '../../../../shared/productTypes';
 import { measure } from '../../../styles/typography';
 import { hasDeliveryRecordsFlow } from '../../../utilities/productUtils';
@@ -21,16 +27,16 @@ import { ResubscribeThrasher } from './ResubscribeThrasher';
 const actuallyCancelled = (
 	productType: ProductType,
 	productDetail: ProductDetail,
-	cancelledProductDetail: ProductDetail,
 ) => {
 	const deliveryRecordsLink: string = `/delivery/${productType.urlPart}/records`;
 	const subscription = productDetail.subscription;
+	const mainPlan = getMainPlan(
+		productDetail.subscription,
+	) as PaidSubscriptionPlan;
 	const headingCopy =
 		productType.productType === 'supporterplus'
 			? 'Your subscription has been cancelled'
-			: `Your ${productType.friendlyName(
-					cancelledProductDetail,
-			  )} is cancelled`;
+			: `Your ${productType.friendlyName(productDetail)} is cancelled`;
 	return (
 		<>
 			<WithStandardTopMargin>
@@ -54,12 +60,13 @@ const actuallyCancelled = (
 										You will continue to receive the
 										benefits of your{' '}
 										{productType.friendlyName(
-											cancelledProductDetail,
+											productDetail,
 										)}{' '}
 										until{' '}
 										<b>
 											{cancellationFormatDate(
-												subscription.cancellationEffectiveDate,
+												productDetail.subscription
+													.cancellationEffectiveDate,
 											)}
 										</b>
 										. You will not be charged again. If you
@@ -130,18 +137,21 @@ const actuallyCancelled = (
 										reason,
 									)) && (
 									<>
+										<h4
+											css={css`
+												${textEgyptianBold17};
+												margin-bottom: ${space[3]}px;
+											`}
+										>
+											Support us another way
+										</h4>
 										<p>
-											{productType.cancellation &&
-											productType.cancellation
-												.summaryReasonSpecificPara &&
-											productType.cancellation.summaryReasonSpecificPara(
+											{productType?.cancellation?.summaryReasonSpecificPara(
 												reason,
-											)
-												? productType.cancellation.summaryReasonSpecificPara(
-														reason,
-												  )
-												: 'If you are interested in supporting our journalism in other ways, ' +
-												  'please consider either a contribution or a subscription.'}
+												mainPlan.currencyISO,
+											) ||
+												'If you are interested in supporting our journalism in other ways, ' +
+													'please consider either a contribution or a subscription.'}
 										</p>
 										<div css={{ marginBottom: '30px' }}>
 											<SupportTheGuardianButton
@@ -183,19 +193,16 @@ const actuallyCancelled = (
 export const isCancelled = (subscription: Subscription) =>
 	Object.keys(subscription).length === 0 || subscription.cancelledAt;
 
-export const getCancellationSummary =
-	(productType: ProductType, cancelledProductDetail: ProductDetail) =>
-	(productDetail: ProductDetail) =>
-		isCancelled(productDetail.subscription) ? (
-			actuallyCancelled(
-				productType,
+export const getCancellationSummary = (
+	productType: ProductType,
+	productDetail: ProductDetail,
+) =>
+	isCancelled(productDetail.subscription) ? (
+		actuallyCancelled(productType, productDetail)
+	) : (
+		<GenericErrorScreen
+			loggingMessage={`${productType.friendlyName(
 				productDetail,
-				cancelledProductDetail,
-			)
-		) : (
-			<GenericErrorScreen
-				loggingMessage={`${productType.friendlyName(
-					cancelledProductDetail,
-				)} cancellation call succeeded but subsequent product detail doesn't show as cancelled`}
-			/>
-		);
+			)} cancellation call succeeded but subsequent product detail doesn't show as cancelled`}
+		/>
+	);

client/components/mma/cancel/stages/ExecuteCancellation.tsx

@@ -115,21 +115,14 @@ const getCancellationSummaryWithReturnButton = (body: ReactNode) => () =>
 	);
 
 const getCaseUpdatingCancellationSummary =
-	(
-		caseId: string,
-		productType: ProductTypeWithCancellationFlow,
-		cancelledProductDetail: ProductDetail,
-	) =>
+	(caseId: string, productType: ProductTypeWithCancellationFlow) =>
 	(mdapiResponse: MembersDataApiResponse) => {
 		const productDetail = (mdapiResponse.products[0] as ProductDetail) || {
 			subscription: {},
 		};
 
 		const render = getCancellationSummaryWithReturnButton(
-			getCancellationSummary(
-				productType,
-				cancelledProductDetail,
-			)(productDetail),
+			getCancellationSummary(productType, productDetail),
 		);
 		return caseId ? (
 			<CaseUpdateAsyncLoader
@@ -232,7 +225,6 @@ export const ExecuteCancellation = () => {
 						render={getCaseUpdatingCancellationSummary(
 							caseId,
 							productType,
-							productDetail,
 						)}
 						loadingMessage="Performing your cancellation..."
 					/>

client/components/mma/cancel/tierThree/TierThreeCancellationFlowStart.tsx

@@ -0,0 +1,51 @@
+import { Stack } from '@guardian/source/react-components';
+import { PRODUCT_TYPES } from '@/shared/productTypes';
+import { measure } from '../../../../styles/typography';
+import { trackEvent } from '../../../../utilities/analytics';
+import { Heading } from '../../shared/Heading';
+import { hrefStyle } from '../cancellationConstants';
+
+const trackCancellationClickEvent = (eventLabel: string) => () =>
+	trackEvent({
+		eventCategory: 'cancellation',
+		eventAction: 'click',
+		eventLabel,
+	});
+
+export const tierThreeCancellationFlowStart = () => (
+	<Stack space={4}>
+		<Heading cssOverrides={measure.heading}>
+			We’re sorry to hear you’re thinking of cancelling your{' '}
+			{PRODUCT_TYPES.tierthree.friendlyName()}
+		</Heading>
+
+		<p>
+			With your vital support, the Guardian can remain editorially
+			independent, free from the influence of billionaire owners and
+			politicians. This enables us to challenge and hold the powerful to
+			account, and to fearlessly pursue the truth. The support from our
+			readers helps us keep our journalism without a paywall, open and
+			accessible to all.
+		</p>
+
+		<p>
+			If you’re looking to take a break, it’s possible to suspend your
+			subscription to the Guardian Weekly – reducing the cost of your
+			total subscription. You can suspend up to six issues per year. This
+			pauses delivery and you will receive the refund for any suspended
+			issues off your next bill.{' '}
+			<a
+				css={hrefStyle}
+				href="/suspend/digital+print"
+				onClick={trackCancellationClickEvent(
+					'tierThree_holiday_suspension',
+				)}
+			>
+				Suspend your subscription here
+			</a>
+			.
+		</p>
+
+		<p>Could you please take a moment to tell us why you want to cancel?</p>
+	</Stack>
+);

client/components/mma/holiday/HolidayQuestionsModal.tsx

@@ -5,7 +5,7 @@ import { InfoIcon } from '../shared/assets/InfoIcon';
 import { Modal } from './Modal';
 
 export const creditExplainerSentence = (issueKeyword: string) =>
-	`You will be credited for each suspended ${issueKeyword} on the next bill after the ${issueKeyword} date.`;
+	`You will be credited for each suspended ${issueKeyword} on your next bill after the ${issueKeyword} date.`;
 
 interface HolidayQuestionsModalProps {
 	annualIssueLimit: number;

client/components/mma/holiday/HolidaysOverview.tsx

@@ -113,7 +113,7 @@ export const HolidaysOverview = () => {
 								{holidayStopResponse.annualIssueLimit}{' '}
 								{productType.holidayStops.issueKeyword}s
 							</strong>{' '}
-							per year of your subscription. <br />
+							per year on your subscription. <br />
 						</div>
 						{productType.holidayStops.alternateNoticeString && (
 							<div>

client/components/mma/switch/SwitchContainer.tsx

@@ -12,7 +12,6 @@ import {
 	getBillingPeriodAdjective,
 	PRODUCT_TYPES,
 } from '../../../../shared/productTypes';
-import type { CurrencyIso } from '../../../utilities/currencyIso';
 import {
 	LoadingState,
 	useAsyncLoader,
@@ -183,13 +182,10 @@ function getThresholds(
 	monthly: boolean,
 ): Thresholds {
 	const monthlyThreshold = getBenefitsThreshold(
-		mainPlan.currencyISO as CurrencyIso,
+		mainPlan.currencyISO,
 		'month',
 	);
-	const annualThreshold = getBenefitsThreshold(
-		mainPlan.currencyISO as CurrencyIso,
-		'year',
-	);
+	const annualThreshold = getBenefitsThreshold(mainPlan.currencyISO, 'year');
 	const thresholdForBillingPeriod = monthly
 		? monthlyThreshold
 		: annualThreshold;

client/components/mma/upgrade/UpgradeSupport.tsx

@@ -10,7 +10,6 @@ import { Stack } from '@guardian/source/react-components';
 import { useContext, useState } from 'react';
 import { formatAmount } from '@/client/utilities/utils';
 import type { PreviewResponse } from '../../../../shared/productSwitchTypes';
-import type { CurrencyIso } from '../../../utilities/currencyIso';
 import { useAsyncLoader } from '../../../utilities/hooks/useAsyncLoader';
 import { getContributionSuggestedAmounts } from '../../../utilities/pricingConfig/suggestedAmounts';
 import { getBenefitsThreshold } from '../../../utilities/pricingConfig/supporterPlusPricing';
@@ -36,7 +35,7 @@ export const UpgradeSupport = () => {
 
 	const currentAmount = mainPlan.price / 100;
 	const threshold = getBenefitsThreshold(
-		mainPlan.currencyISO as CurrencyIso,
+		mainPlan.currencyISO,
 		mainPlan.billingPeriod as 'month' | 'year',
 	);
 

client/fixtures/productBuilder/baseProducts.ts

@@ -512,7 +512,7 @@ export function baseTierThree(): ProductDetail {
 			phoneRegionsToDisplay: ['UK & ROW', 'US', 'AUS'],
 		},
 		billingCountry: 'United Kingdom',
-		joinDate: '2024-06-13',
+		joinDate: '2021-11-29',
 		optIn: true,
 		subscription: {
 			paymentMethod: 'Card',
@@ -532,15 +532,15 @@ export function baseTierThree(): ProductDetail {
 				country: 'United Kingdom',
 			},
 			safeToUpdatePaymentMethod: true,
-			start: '2024-06-28',
-			end: '2025-06-13',
+			start: '2021-12-24',
+			end: '2022-12-15',
 			nextPaymentPrice: 2500,
 			nextPaymentDate: '2024-06-28',
 			lastPaymentDate: null,
 			potentialCancellationDate: null,
 			chargedThroughDate: null,
-			renewalDate: '2025-06-13',
-			anniversaryDate: '2025-06-28',
+			renewalDate: '2022-12-15',
+			anniversaryDate: '2022-12-24',
 			cancelledAt: false,
 			subscriptionId: 'A-S00897035',
 			trialLength: 4,
@@ -560,8 +560,8 @@ export function baseTierThree(): ProductDetail {
 			futurePlans: [
 				{
 					name: null,
-					start: '2024-06-28',
-					end: '2025-06-13',
+					start: '2021-12-10',
+					end: '2022-11-29',
 					shouldBeVisible: true,
 					chargedThrough: null,
 					price: 2500,