add USA account overview product story so that the new cancel CTA is visible

Author: Richard Bangay

client/components/mma/accountoverview/AccountOverview.stories.tsx

@@ -28,6 +28,7 @@ import {
 	supporterPlusAnnualCancelled,
 	supporterPlusCancelled,
 	supporterPlusInOfferPeriod,
+	supporterPlusUSA,
 	tierThree,
 } from '../../../fixtures/productBuilder/testProducts';
 import { singleContributionsAPIResponse } from '../../../fixtures/singleContribution';
@@ -104,6 +105,31 @@ export const WithSubscriptions: StoryObj<typeof AccountOverview> = {
 	},
 };
 
+export const WithUSASubscription: StoryObj<typeof AccountOverview> = {
+	render: () => {
+		return <AccountOverview />;
+	},
+
+	parameters: {
+		msw: [
+			http.get('/api/cancelled/', () => {
+				return HttpResponse.json([]);
+			}),
+			http.get('/mpapi/user/mobile-subscriptions', () => {
+				return HttpResponse.json({ subscriptions: [] });
+			}),
+			http.get('/api/me/mma', () => {
+				return HttpResponse.json(
+					toMembersDataApiResponse(supporterPlusUSA()),
+				);
+			}),
+			http.get('/api/me/one-off-contributions', () => {
+				return HttpResponse.json([]);
+			}),
+		],
+	},
+};
+
 export const WithContributionAndSwitchPossible: StoryObj<
 	typeof AccountOverview
 > = {

client/fixtures/productBuilder/productBuilder.ts

@@ -137,6 +137,11 @@ export class ProductBuilder {
 		return this;
 	}
 
+	inUSA() {
+		this.productToBuild.billingCountry = 'United States';
+		return this;
+	}
+
 	nonServiceableCountry() {
 		this.productToBuild.billingCountry = 'Qatar';
 		return this;

client/fixtures/productBuilder/testProducts.ts

@@ -212,6 +212,13 @@ export function supporterPlus() {
 		.getProductDetailObject();
 }
 
+export function supporterPlusUSA() {
+	return new ProductBuilder(baseSupporterPlus())
+		.payByCard()
+		.inUSA()
+		.getProductDetailObject();
+}
+
 export function supporterPlusMonthlyAllAccessDigital() {
 	return new ProductBuilder(baseSupporterPlus())
 		.payByCard()