move the cancel sub/support button from the manage product page to th…

…e account overview for US customers
guardian · Dec 24, 2024 · 069707b · 069707b
1 parent 1eade1e
commit 069707b
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 33 deletions.
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/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;