diff --git a/client/components/mma/accountoverview/AccountOverview.stories.tsx b/client/components/mma/accountoverview/AccountOverview.stories.tsx index 41bc79395..c5eac9200 100644 --- 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 = { }, }; +export const WithUSASubscription: StoryObj = { + render: () => { + return ; + }, + + 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 index fa1635d2b..f927db0fa 100644 --- a/client/components/mma/accountoverview/ManageProduct.tsx +++ b/client/components/mma/accountoverview/ManageProduct.tsx @@ -382,13 +382,14 @@ const InnerContent = ({ /> )} - {!hasCancellationPending && ( - - )} + {!hasCancellationPending && + productDetail.billingCountry !== 'United States' && ( + + )} ); }; diff --git a/client/components/mma/accountoverview/ProductCard.tsx b/client/components/mma/accountoverview/ProductCard.tsx index cd4a8d063..532cca887 100644 --- a/client/components/mma/accountoverview/ProductCard.tsx +++ b/client/components/mma/accountoverview/ProductCard.tsx @@ -566,6 +566,54 @@ export const ProductCard = ({

)} + {productDetail.billingCountry === 'United States' && + !hasCancellationPending && ( + +
+
+

+ Cancel {groupedProductType.friendlyName} +

+

+ Stop your recurring payment, at the end + of current billing period. +

+
+
+ +
+
+
+ )} ); diff --git a/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx b/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx index 9d4d16374..f718c960f 100644 --- a/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx +++ b/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx @@ -248,32 +248,29 @@ const InnerContent = ({ )} -
- {!hasCancellationPending && - isSelfServeCancellationAllowed && ( - - )} -
+ }, + ); + }} + cssOverrides={css` + margin-left: ${space[5]}px; + `} + > + Cancel {groupedProductType.friendlyName} + + )} diff --git a/client/fixtures/productBuilder/productBuilder.ts b/client/fixtures/productBuilder/productBuilder.ts index 4976c3ea8..517530522 100644 --- 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 index 7715b6c16..980f9e25b 100644 --- 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 index 54785a856..0644d683d 100644 --- 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;