'+ extras' product name change

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,
@@ -107,15 +108,17 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 			b.subscription.start.localeCompare(a.subscription.start),
 	);
 
-	const productCategories = [
+	const allProductCategories = [
 		...allActiveProductDetails,
 		...allCancelledProductDetails,
-	]
-		.map(
-			(product: ProductDetail | CancelledProductDetail) =>
-				product.mmaCategory,
-		)
-		.filter((value, index, self) => self.indexOf(value) === index);
+	].map((product: ProductDetail | CancelledProductDetail) => {
+		if (product.mmaCategory === 'recurringSupport') {
+			return 'subscriptions'; // we want to override the display text in MMA for RC/S+ but not affect functionality
+		}
+		return product.mmaCategory;
+	});
+
+	const uniqueProductCategories = [...new Set(allProductCategories)];
 
 	const appSubscriptions = mpapiResponse.subscriptions.filter(
 		isValidAppSubscription,
@@ -124,16 +127,16 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 	if (
 		featureSwitches.appSubscriptions &&
 		appSubscriptions.length > 0 &&
-		!productCategories.includes('subscriptions')
+		!uniqueProductCategories.includes('subscriptions')
 	) {
-		productCategories.push('subscriptions');
+		uniqueProductCategories.push('subscriptions');
 	}
 
 	if (
 		singleContributions.length > 0 &&
-		!productCategories.includes('subscriptions')
+		!uniqueProductCategories.includes('subscriptions')
 	) {
-		productCategories.push('subscriptions');
+		uniqueProductCategories.push('subscriptions');
 	}
 
 	if (
@@ -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
@@ -176,15 +188,18 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 				productDetails={allActiveProductDetails}
 				isFromApp={isFromApp}
 			/>
-			{productCategories.map((category) => {
+			{uniqueProductCategories.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 (

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> = {

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>
 							)}

client/components/mma/cancel/CancellationSummary.tsx

@@ -36,12 +36,9 @@ const actuallyCancelled = (
 						`,
 					]}
 				>
-					{productType.cancellation?.alternateSummaryHeading(
+					{`Your ${productType.friendlyName(
 						cancelledProductDetail,
-					) ||
-						`Your ${productType.friendlyName(
-							cancelledProductDetail,
-						)} is cancelled`}
+					)} is cancelled`}
 				</Heading>
 				{productType.cancellation &&
 					!productType.cancellation.shouldHideSummaryMainPara && (

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

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

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>
 		</>
 	);

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',

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,
 ) {

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();

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();
 	};
 

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);

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,
+		);
 	});
 });

cypress/tests/mocked/parallel-4/deliveryAddress.cy.ts

@@ -1,7 +1,6 @@
 import {
 	guardianWeeklyPaidByCard,
 	nationalDelivery,
-	supporterPlus,
 } from '../../../../client/fixtures/productBuilder/testProducts';
 import { toMembersDataApiResponse } from '../../../../client/fixtures/mdapiResponse';
 import { signInAndAcceptCookies } from '../../../lib/signInAndAcceptCookies';
@@ -12,10 +11,7 @@ describe('Delivery address', () => {
 
 		cy.intercept('GET', '/api/me/mma?productType=ContentSubscription', {
 			statusCode: 200,
-			body: toMembersDataApiResponse(
-				guardianWeeklyPaidByCard(),
-				supporterPlus(),
-			),
+			body: toMembersDataApiResponse(guardianWeeklyPaidByCard()),
 		}).as('product_detail');
 
 		cy.intercept('GET', '/mpapi/user/mobile-subscriptions', {
@@ -42,10 +38,7 @@ describe('Delivery address', () => {
 	it('Can update delivery address. Navigating from account overview', () => {
 		cy.intercept('GET', '/api/me/mma', {
 			statusCode: 200,
-			body: toMembersDataApiResponse(
-				guardianWeeklyPaidByCard(),
-				supporterPlus(),
-			),
+			body: toMembersDataApiResponse(guardianWeeklyPaidByCard()),
 		}).as('mma');
 
 		cy.visit('/');
@@ -80,7 +73,7 @@ describe('Delivery address', () => {
 	it('Cannot update National delivery address. Navigating from account overview', () => {
 		cy.intercept('GET', '/api/me/mma', {
 			statusCode: 200,
-			body: toMembersDataApiResponse(nationalDelivery(), supporterPlus()),
+			body: toMembersDataApiResponse(nationalDelivery()),
 		}).as('mma');
 
 		cy.visit('/');
@@ -93,7 +86,7 @@ describe('Delivery address', () => {
 
 		cy.intercept('GET', '/api/me/mma?productType=ContentSubscription', {
 			statusCode: 200,
-			body: toMembersDataApiResponse(nationalDelivery(), supporterPlus()),
+			body: toMembersDataApiResponse(nationalDelivery()),
 		});
 
 		cy.findByText('Manage delivery address').click();
@@ -107,7 +100,6 @@ describe('Delivery address', () => {
 			body: toMembersDataApiResponse(
 				nationalDelivery(),
 				guardianWeeklyPaidByCard(),
-				supporterPlus(),
 			),
 		}).as('mma');
 
@@ -119,7 +111,7 @@ describe('Delivery address', () => {
 
 		cy.intercept('GET', '/api/me/mma?productType=ContentSubscription', {
 			statusCode: 200,
-			body: toMembersDataApiResponse(nationalDelivery(), supporterPlus()),
+			body: toMembersDataApiResponse(nationalDelivery()),
 		});
 
 		cy.findByText(/Changed address?/).should('exist');
@@ -128,10 +120,7 @@ describe('Delivery address', () => {
 	it('Shows updated address when returning to manage subscription page', () => {
 		cy.intercept('GET', '/api/me/mma', {
 			statusCode: 200,
-			body: toMembersDataApiResponse(
-				guardianWeeklyPaidByCard(),
-				supporterPlus(),
-			),
+			body: toMembersDataApiResponse(guardianWeeklyPaidByCard()),
 		}).as('mma');
 
 		cy.visit('/');