copy changes to refelect a switch from 'Monthly + extras' and 'Annual…

… + extras' to 'All-access digital'. Adjacent copy changes 'Recurring support' to become 'subscription' and visually grouping contributions and all access digital products into the 'subscriptions sub section on the account overview'
guardian · May 17, 2024 · 3e4fca2 · 3e4fca2
1 parent 2a9ade2
commit 3e4fca2
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 99 deletions.
diff --git a/client/components/mma/accountoverview/AccountOverview.tsx b/client/components/mma/accountoverview/AccountOverview.tsx
@@ -23,6 +23,7 @@ import {
 	isSpecificProductType,
 	sortByJoinDate,
 } from '../../../../shared/productResponse';
+import type { GroupedProductTypeKeys } from '../../../../shared/productTypes';
 import {
 	GROUPED_PRODUCT_TYPES,
 	PRODUCT_TYPES,
@@ -108,15 +109,17 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 	);
 
 	const productCategories = [
-		...allActiveProductDetails,
-		...allCancelledProductDetails,
-	]
-		.map(
-			(product: ProductDetail | CancelledProductDetail) =>
-				product.mmaCategory,
-		)
-		.filter((value, index, self) => self.indexOf(value) === index);
-
+		...new Set(
+			[...allActiveProductDetails, ...allCancelledProductDetails].map(
+				(product: ProductDetail | CancelledProductDetail) => {
+					if (product.mmaCategory === 'recurringSupport') {
+						return 'subscriptions';
+					}
+					return product.mmaCategory;
+				},
+			),
+		),
+	];
 	const appSubscriptions = mpapiResponse.subscriptions.filter(
 		isValidAppSubscription,
 	);
@@ -165,6 +168,15 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 		!hasDigiSubAndContribution &&
 		!hasNonServiceableCountry;
 
+	const visualProductGroupingCategory = (
+		product: ProductDetail | CancelledProductDetail,
+	): GroupedProductTypeKeys => {
+		if (product.mmaCategory === 'recurringSupport') {
+			return 'subscriptions';
+		}
+		return product.mmaCategory;
+	};
+
 	return (
 		<>
 			<PersonalisedHeader
@@ -179,12 +191,15 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 			{productCategories.map((category) => {
 				const groupedProductType = GROUPED_PRODUCT_TYPES[category];
 				const activeProductsInCategory = allActiveProductDetails.filter(
-					(activeProduct) => activeProduct.mmaCategory === category,
+					(activeProduct) =>
+						visualProductGroupingCategory(activeProduct) ===
+						category,
 				);
 				const cancelledProductsInCategory =
 					allCancelledProductDetails.filter(
-						(activeProduct) =>
-							activeProduct.mmaCategory === category,
+						(cancelledProduct) =>
+							visualProductGroupingCategory(cancelledProduct) ===
+							category,
 					);
 
 				return (

diff --git a/client/components/mma/accountoverview/ManageProduct.stories.tsx b/client/components/mma/accountoverview/ManageProduct.stories.tsx
@@ -5,6 +5,7 @@ import { PRODUCT_TYPES } from '../../../../shared/productTypes';
 import {
 	digitalPackPaidByDirectDebit,
 	guardianWeeklyPaidByCard,
+	monthlyContributionPaidByCard,
 	newspaperVoucherPaidByPaypal,
 	supporterPlusAnnual,
 } from '../../../fixtures/productBuilder/testProducts';
@@ -55,6 +56,18 @@ export const NewspaperSubscriptionCard: StoryObj<typeof ManageProduct> = {
 	},
 };
 
+export const Contribution: StoryObj<typeof ManageProduct> = {
+	render: () => {
+		return <ManageProduct productType={PRODUCT_TYPES.contributions} />;
+	},
+
+	parameters: {
+		reactRouter: {
+			state: { productDetail: monthlyContributionPaidByCard() },
+		},
+	},
+};
+
 featureSwitches.supporterPlusUpdateAmount = true;
 
 export const SupporterPlus: StoryObj<typeof ManageProduct> = {

diff --git a/client/components/mma/accountoverview/ProductCard.tsx b/client/components/mma/accountoverview/ProductCard.tsx
@@ -20,10 +20,7 @@ import type {
 	Subscription,
 } from '@/shared/productResponse';
 import { getMainPlan, isGift } from '@/shared/productResponse';
-import {
-	calculateSupporterPlusTitle,
-	GROUPED_PRODUCT_TYPES,
-} from '@/shared/productTypes';
+import { GROUPED_PRODUCT_TYPES } from '@/shared/productTypes';
 import { wideButtonLayoutCss } from '../../../styles/ButtonStyles';
 import { trackEvent } from '../../../utilities/analytics';
 import { ErrorIcon } from '../shared/assets/ErrorIcon';
@@ -373,11 +370,7 @@ export const ProductCard = ({
 											})
 										}
 									>
-										Change to{' '}
-										{calculateSupporterPlusTitle(
-											(mainPlan as PaidSubscriptionPlan)
-												.billingPeriod,
-										)}
+										Change to all-access digital
 									</Button>
 								</ThemeProvider>
 							)}

diff --git a/client/components/mma/cancel/CancellationSummary.tsx b/client/components/mma/cancel/CancellationSummary.tsx
@@ -36,9 +36,7 @@ const actuallyCancelled = (
 						`,
 					]}
 				>
-					{productType.cancellation?.alternateSummaryHeading(
-						cancelledProductDetail,
-					) ||
+					{productType.cancellation?.alternateSummaryHeading ||
 						`Your ${productType.friendlyName(
 							cancelledProductDetail,
 						)} is cancelled`}

diff --git a/client/components/mma/cancel/contributions/ContributionsCancellationFlowStart.tsx b/client/components/mma/cancel/contributions/ContributionsCancellationFlowStart.tsx
@@ -5,13 +5,13 @@ import { Heading } from '../../shared/Heading';
 export const contributionsCancellationFlowStart = () => (
 	<Stack space={4}>
 		<Heading cssOverrides={measure.heading}>
-			We’re sorry to see you go…
+			We’re sorry to see you go …
 		</Heading>
 
 		<p>
 			<strong>
-				…please could you take a moment to tell us why you would like to
-				cancel today?
+				… please could you take a moment to tell us why you would like
+				to cancel today?
 			</strong>
 			<br />
 			As a reader-funded organisation, we rely on the generous support

diff --git a/client/components/mma/cancel/supporterplus/SupporterplusCancellationFlowStart.tsx b/client/components/mma/cancel/supporterplus/SupporterplusCancellationFlowStart.tsx
@@ -5,13 +5,13 @@ import { Heading } from '../../shared/Heading';
 export const supporterplusCancellationFlowStart = () => (
 	<Stack space={4}>
 		<Heading cssOverrides={measure.heading}>
-			We’re sorry to see you go…
+			We’re sorry to see you go …
 		</Heading>
 
 		<p>
 			<strong>
-				…please could you take a moment to tell us why you would like to
-				cancel today?
+				… please could you take a moment to tell us why you would like
+				to cancel today?
 			</strong>
 			<br />
 			As a reader-funded organisation, we rely on the generous support

diff --git a/client/components/mma/shared/benefits/BenefitsToggle.tsx b/client/components/mma/shared/benefits/BenefitsToggle.tsx
@@ -28,7 +28,7 @@ export const BenefitsToggle = (props: { productType: ProductTypeKeys }) => {
 				aria-controls="benefits"
 				onClick={() => setShowBenefits(!showBenefits)}
 			>
-				{showBenefits ? 'hide' : 'view'} extras
+				{showBenefits ? 'hide' : 'view'} benefits
 			</button>
 		</>
 	);

diff --git a/client/components/mma/switch/SwitchContainer.tsx b/client/components/mma/switch/SwitchContainer.tsx
@@ -160,7 +160,8 @@ const RenderedPage = (props: {
 					user: props.user,
 					mainPlan,
 					monthlyOrAnnual,
-					supporterPlusTitle: `${monthlyOrAnnual} + extras`,
+					supporterPlusTitle:
+						PRODUCT_TYPES.supporterplus.productTitle,
 					thresholds: getThresholds(
 						mainPlan,
 						monthlyOrAnnual == 'Monthly',

diff --git a/client/fixtures/productBuilder/testProducts.ts b/client/fixtures/productBuilder/testProducts.ts
@@ -66,6 +66,13 @@ export function digitalPackPaidByCardWithPaymentFailure() {
 		.getProductDetailObject();
 }
 
+export function monthlyContributionPaidByCard() {
+	return new ProductBuilder(baseContribution())
+		.payByCard()
+		.withPrice(400)
+		.getProductDetailObject();
+}
+
 export function annualContributionPaidByCardWithCurrency(
 	currency: CurrencyIso,
 ) {

diff --git a/cypress/tests/mocked/parallel-1/updateContributionAmount.cy.ts b/cypress/tests/mocked/parallel-1/updateContributionAmount.cy.ts
@@ -66,7 +66,7 @@ describe('Update contribution amount', () => {
 
 		setSignInStatus();
 
-		cy.findByText('Manage recurring support').click();
+		cy.findByText('Manage subscription').click();
 		cy.wait('@cancelled');
 
 		cy.findByText('Change amount').click();
@@ -93,7 +93,7 @@ describe('Update contribution amount', () => {
 
 		setSignInStatus();
 
-		cy.findByText('Manage recurring support').click();
+		cy.findByText('Manage subscription').click();
 		cy.wait('@cancelled');
 
 		cy.findByText('Change amount').click();

diff --git a/cypress/tests/mocked/parallel-2/cancelContribution.cy.ts b/cypress/tests/mocked/parallel-2/cancelContribution.cy.ts
@@ -19,11 +19,11 @@ describe('Cancel contribution', () => {
 
 		setSignInStatus();
 
-		cy.findByText('Manage recurring support').click();
+		cy.findByText('Manage subscription').click();
 		cy.wait('@cancelled');
 
 		cy.findByRole('link', {
-			name: 'Cancel recurring support',
+			name: 'Cancel subscription',
 		}).click();
 	};
 

diff --git a/cypress/tests/mocked/parallel-2/cancelSupporterPlus.cy.ts b/cypress/tests/mocked/parallel-2/cancelSupporterPlus.cy.ts
@@ -11,10 +11,10 @@ describe('Cancel Supporter Plus', () => {
 		cy.wait('@mobile_subscriptions');
 		cy.wait('@single_contributions');
 
-		cy.findByText('Manage recurring support').click();
+		cy.findByText('Manage subscription').click();
 
 		cy.findByRole('link', {
-			name: 'Cancel recurring support',
+			name: 'Cancel subscription',
 		}).click();
 	};
 
@@ -123,7 +123,7 @@ describe('Cancel Supporter Plus', () => {
 		cy.wait('@get_cancelled_product');
 
 		cy.findByRole('heading', {
-			name: 'Monthly support + extras cancelled',
+			name: 'Your All-access digital subscription is cancelled',
 		});
 
 		cy.get('@get_cancellation_date.all').should('have.length', 0);

diff --git a/cypress/tests/mocked/parallel-2/productSwitch.cy.ts b/cypress/tests/mocked/parallel-2/productSwitch.cy.ts
@@ -67,8 +67,11 @@ describe('product switching', () => {
 		cy.visit('/');
 		setSignInStatus();
 
-		cy.findAllByText('Change to monthly + extras').should('have.length', 2);
-		cy.findAllByText('Change to monthly + extras').last().click();
+		cy.findAllByText('Change to all-access digital').should(
+			'have.length',
+			2,
+		);
+		cy.findAllByText('Change to all-access digital').last().click();
 		cy.findByText('Your current support').should('exist');
 
 		cy.findByRole('button', {
@@ -205,11 +208,17 @@ describe('product switching', () => {
 		cy.visit('/');
 		setSignInStatus();
 
-		cy.findAllByText('Change to monthly + extras').should('have.length', 0);
+		cy.findAllByText('Change to all-access digital').should(
+			'have.length',
+			0,
+		);
 
 		cy.visit('/switch');
 
 		cy.findByRole('heading', { name: 'Account overview' }).should('exist');
-		cy.findAllByText('Change to monthly + extras').should('have.length', 0);
+		cy.findAllByText('Change to all-access digital').should(
+			'have.length',
+			0,
+		);
 	});
 });