diff --git a/client/components/mma/accountoverview/AccountOverview.tsx b/client/components/mma/accountoverview/AccountOverview.tsx index ad20e0215..b2c22c58f 100644 --- a/client/components/mma/accountoverview/AccountOverview.tsx +++ b/client/components/mma/accountoverview/AccountOverview.tsx @@ -51,6 +51,7 @@ import type { IsFromAppProps } from '../shared/IsFromAppProps'; import { NewspaperArchiveCta } from '../shared/NewspaperArchiveCta'; import { nonServiceableCountries } from '../shared/NonServiceableCountries'; import { PaymentFailureAlertIfApplicable } from '../shared/PaymentFailureAlertIfApplicable'; +import { CanadaStrike } from './CanadaStrike'; import { CancelledProductCard } from './CancelledProductCard'; import { EmptyAccountOverview } from './EmptyAccountOverview'; import { InAppPurchaseCard } from './InAppPurchaseCard'; @@ -197,6 +198,18 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => { return specificProductType.groupedProductType; }; + const possiblyAffectedByCanadaPostStrike = allActiveProductDetails.some( + (product) => { + const deliveryCountry = + product.subscription.deliveryAddress?.country.toUpperCase(); + return ( + (product.tier === 'Tier Three' || + product.tier === 'Guardian Weekly - ROW') && + (deliveryCountry === 'CANADA' || deliveryCountry === 'CA') + ); + }, + ); + return ( <> { productDetails={allActiveProductDetails} isFromApp={isFromApp} /> + {possiblyAffectedByCanadaPostStrike && } {uniqueProductCategories.map((category) => { const groupedProductType = GROUPED_PRODUCT_TYPES[category]; const activeProductsInCategory = allActiveProductDetails.filter( diff --git a/client/components/mma/accountoverview/CanadaStrike.tsx b/client/components/mma/accountoverview/CanadaStrike.tsx new file mode 100644 index 000000000..1444ffbe5 --- /dev/null +++ b/client/components/mma/accountoverview/CanadaStrike.tsx @@ -0,0 +1,37 @@ +import { css } from '@emotion/react'; +import { Link } from '@guardian/source/react-components'; +import { ProblemAlert } from '../shared/ProblemAlert'; + +export const CanadaStrike = () => ( + +

+ Due to industrial action by Canada Post, it is not possible + to deliver your copies of the Guardian Weekly. You are + welcome to pause your subscription during the period of + industrial action, details on how to do so can be found{' '} + + here + + . +

+

+ If you have reached your allowance limit please contact{' '} + + customer.help@theguardian.com + +

+ + } + additionalcss={css` + margin-top: 30px; + `} + /> +); diff --git a/client/components/mma/shared/ProblemAlert.tsx b/client/components/mma/shared/ProblemAlert.tsx index e8b1520ab..b74536cc6 100644 --- a/client/components/mma/shared/ProblemAlert.tsx +++ b/client/components/mma/shared/ProblemAlert.tsx @@ -23,8 +23,8 @@ interface AlertButtonProps { } interface ProblemAlertProps { - title: string; - message: string; + title?: string; + message: string | React.ReactElement; button?: AlertButtonProps; additionalcss?: SerializedStyles; } @@ -48,23 +48,30 @@ export const ProblemAlert = (props: ProblemAlertProps) => ( > -

- {props.title} -

-

- {props.message} -

+ {props.title && ( +

+ {props.title} +

+ )} + {typeof props.message === 'string' ? ( +

+ {props.message} +

+ ) : ( + props.message + )} + {props.button && (