Merge pull request #1429 from guardian/canada-strike-message

Canada strike message

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 (
 		<>
 			<PersonalisedHeader
@@ -208,6 +221,7 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 				productDetails={allActiveProductDetails}
 				isFromApp={isFromApp}
 			/>
+			{possiblyAffectedByCanadaPostStrike && <CanadaStrike />}
 			{uniqueProductCategories.map((category) => {
 				const groupedProductType = GROUPED_PRODUCT_TYPES[category];
 				const activeProductsInCategory = allActiveProductDetails.filter(

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 = () => (
+	<ProblemAlert
+		message={
+			<div>
+				<p>
+					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{' '}
+					<Link
+						href="https://manage.theguardian.com/help-centre/article/i-need-to-pause-my-delivery"
+						priority="primary"
+					>
+						here
+					</Link>
+					.
+				</p>
+				<p>
+					If you have reached your allowance limit please contact{' '}
+					<Link
+						href="mailto:[email protected]"
+						priority="primary"
+					>
+						[email protected]
+					</Link>
+				</p>
+			</div>
+		}
+		additionalcss={css`
+			margin-top: 30px;
+		`}
+	/>
+);

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) => (
 		>
 			<ErrorIcon />
 		</i>
-		<h4
-			css={css`
-				${textSansBold17};
-				margin: 0;
-			`}
-		>
-			{props.title}
-		</h4>
-		<p
-			css={css`
-				margin: ${space[2]}px 0 ${props.button ? `${space[3]}px` : '0'}
-					0;
-				${textSans17};
-			`}
-		>
-			{props.message}
-		</p>
+		{props.title && (
+			<h4
+				css={css`
+					${textSansBold17};
+					margin: 0;
+				`}
+			>
+				{props.title}
+			</h4>
+		)}
+		{typeof props.message === 'string' ? (
+			<p
+				css={css`
+					margin: ${space[2]}px 0
+						${props.button ? `${space[3]}px` : '0'} 0;
+					${textSans17};
+				`}
+			>
+				{props.message}
+			</p>
+		) : (
+			props.message
+		)}
+
 		{props.button && (
 			<LinkButton
 				to={props.button.link}