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;