Merge pull request #1435 from guardian/move-cancel-btn-us-only

Move cancel btn, US only
guardian · Jan 2, 2025 · d721406 · d721406
2 parents 1eade1e + d4c3150
commit d721406
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 33 deletions.
diff --git a/client/components/mma/accountoverview/AccountOverview.stories.tsx b/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
 > = {

diff --git a/client/components/mma/accountoverview/ManageProduct.tsx b/client/components/mma/accountoverview/ManageProduct.tsx
@@ -382,13 +382,14 @@ const InnerContent = ({
 				/>
 			)}
 
-			{!hasCancellationPending && (
-				<CancellationCTA
-					productDetail={productDetail}
-					friendlyName={groupedProductType.friendlyName}
-					specificProductType={specificProductType}
-				/>
-			)}
+			{!hasCancellationPending &&
+				productDetail.billingCountry !== 'United States' && (
+					<CancellationCTA
+						productDetail={productDetail}
+						friendlyName={groupedProductType.friendlyName}
+						specificProductType={specificProductType}
+					/>
+				)}
 		</>
 	);
 };

diff --git a/client/components/mma/accountoverview/ProductCard.tsx b/client/components/mma/accountoverview/ProductCard.tsx
@@ -566,6 +566,54 @@ export const ProductCard = ({
 						</p>
 					</Card.Section>
 				)}
+				{productDetail.billingCountry === 'United States' &&
+					!hasCancellationPending && (
+						<Card.Section>
+							<div css={productDetailLayoutCss}>
+								<div>
+									<h4 css={sectionHeadingCss}>
+										Cancel {groupedProductType.friendlyName}
+									</h4>
+									<p
+										css={css`
+											max-width: 350px;
+										`}
+									>
+										Stop your recurring payment, at the end
+										of current billing period.
+									</p>
+								</div>
+								<div css={wideButtonLayoutCss}>
+									<Button
+										aria-label={`Cancel ${specificProductType.productTitle(
+											mainPlan,
+										)}`}
+										size="small"
+										cssOverrides={css`
+											justify-content: center;
+										`}
+										priority="primary"
+										onClick={() => {
+											trackEvent({
+												eventCategory:
+													'account_overview',
+												eventAction: 'click',
+												eventLabel: 'cancel_product',
+											});
+											navigate(
+												`/cancel/${specificProductType.urlPart}`,
+												{
+													state: { productDetail },
+												},
+											);
+										}}
+									>
+										Cancel {groupedProductType.friendlyName}
+									</Button>
+								</div>
+							</div>
+						</Card.Section>
+					)}
 			</Card>
 		</Stack>
 	);

diff --git a/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx b/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx
@@ -248,32 +248,29 @@ const InnerContent = ({
 							</LinkButton>
 						)}
 
-					<div
-						css={css`
-							margin-left: ${space[5]}px;
-						`}
-					>
-						{!hasCancellationPending &&
-							isSelfServeCancellationAllowed && (
-								<Button
-									priority="subdued"
-									onClick={() => {
-										navigate(
-											'/cancel/' +
-												specificProductType.urlPart,
-											{
-												state: {
-													productDetail:
-														productDetail,
-												},
+					{!hasCancellationPending &&
+						isSelfServeCancellationAllowed &&
+						productDetail.billingCountry !== 'United States' && (
+							<Button
+								priority="subdued"
+								onClick={() => {
+									navigate(
+										'/cancel/' +
+											specificProductType.urlPart,
+										{
+											state: {
+												productDetail: productDetail,
 											},
-										);
-									}}
-								>
-									Cancel {groupedProductType.friendlyName}
-								</Button>
-							)}
-					</div>
+										},
+									);
+								}}
+								cssOverrides={css`
+									margin-left: ${space[5]}px;
+								`}
+							>
+								Cancel {groupedProductType.friendlyName}
+							</Button>
+						)}
 				</div>
 			</section>
 		</>

diff --git a/client/fixtures/productBuilder/productBuilder.ts b/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;

diff --git a/client/fixtures/productBuilder/testProducts.ts b/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()

diff --git a/client/styles/ButtonStyles.ts b/client/styles/ButtonStyles.ts
@@ -85,7 +85,7 @@ export const wideButtonCss = css`
 export const wideButtonLayoutCss = css`
 	display: flex;
 	flex-direction: column;
-	justify-content: flex-end;
+	justify-content: flex-start;
 
 	> * + * {
 		margin-top: ${space[3]}px;