Add 3 x benefit CTAs to Account Overview for readers with a digital + print sub

client/components/mma/accountoverview/AccountOverview.tsx

@@ -45,7 +45,10 @@ import { isCancelled } from '../cancel/CancellationSummary';
 import { PageContainer } from '../Page';
 import { JsonResponseHandler } from '../shared/asyncComponents/DefaultApiResponseHandler';
 import { DefaultLoadingView } from '../shared/asyncComponents/DefaultLoadingView';
+import { DownloadAppCtaVariation1 } from '../shared/DownloadAppCtaVariation1';
+import { DownloadFeastAppCtaWithImage } from '../shared/DownloadFeastAppCtaWithImage';
 import type { IsFromAppProps } from '../shared/IsFromAppProps';
+import { NewspaperArchiveCta } from '../shared/NewspaperArchiveCta';
 import { nonServiceableCountries } from '../shared/NonServiceableCountries';
 import { PaymentFailureAlertIfApplicable } from '../shared/PaymentFailureAlertIfApplicable';
 import { CancelledProductCard } from './CancelledProductCard';
@@ -166,6 +169,10 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 			isSpecificProductType(productDetail, PRODUCT_TYPES.digipack),
 		);
 
+	const hasDigitalPlusPrint = allActiveProductDetails.some((productDetail) =>
+		isSpecificProductType(productDetail, PRODUCT_TYPES.tierthree),
+	);
+
 	const hasNonServiceableCountry = nonServiceableCountries.includes(
 		allActiveProductDetails.find(isProduct)?.billingCountry as string,
 	);
@@ -290,6 +297,18 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 					</Fragment>
 				);
 			})}
+			{hasDigitalPlusPrint && (
+				<>
+					<h2 css={subHeadingCss}>
+						Get the most out of your benefits
+					</h2>
+					<Stack space={6}>
+						<NewspaperArchiveCta />
+						<DownloadAppCtaVariation1 />
+						<DownloadFeastAppCtaWithImage />
+					</Stack>
+				</>
+			)}
 		</>
 	);
 };

client/components/mma/cancel/cancellationSaves/CancelAlternativeConfirmed.tsx

@@ -23,7 +23,7 @@ import type { PaidSubscriptionPlan } from '@/shared/productResponse';
 import { getMainPlan } from '@/shared/productResponse';
 import { BenefitsSection } from '../../shared/benefits/BenefitsSection';
 import { DownloadAppCta } from '../../shared/DownloadAppCta';
-import { DownloadFeastAppCta } from '../../shared/DownloadFeastAppCta';
+import { DownloadFeastAppCtaWithIcon } from '../../shared/DownloadFeastAppCtaWithIcon';
 import { Heading } from '../../shared/Heading';
 import type {
 	CancellationContextInterface,
@@ -324,7 +324,7 @@ export const CancelAlternativeConfirmed = () => {
 						</div>
 					</div>
 					<DownloadAppCta additionalCss={appAdCss} />
-					<DownloadFeastAppCta additionalCss={appAdCss} />
+					<DownloadFeastAppCtaWithIcon additionalCss={appAdCss} />
 					<div css={dontForgetCss}>
 						<SvgInfoRound
 							size="small"

client/components/mma/shared/DownloadAppCtaVariation1.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { DownloadAppCtaVariation1 } from './DownloadAppCtaVariation1';
+
+export default {
+	title: 'Components/DownloadAppCtaVariation1',
+	component: DownloadAppCtaVariation1,
+} as Meta<typeof DownloadAppCtaVariation1>;
+
+export const Default: StoryFn<typeof DownloadAppCtaVariation1> = () => (
+	<DownloadAppCtaVariation1 />
+);

client/components/mma/shared/DownloadAppCtaVariation1.tsx

@@ -0,0 +1,124 @@
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import {
+	from,
+	space,
+	textSans15,
+	textSans17,
+	textSansBold17,
+	textSansBold20,
+	until,
+} from '@guardian/source/foundations';
+import { androidAppUrl, iosAppUrl } from '@/shared/externalLinks';
+import { AndroidPlayStoreButton } from './assets/AndroidPlayStoreButton';
+import { AppleAppStoreButton } from './assets/AppleAppStoreButton';
+
+interface DownloadAppCtaVariation1Props {
+	additionalCss?: SerializedStyles;
+}
+
+const containerCss = css`
+	background-color: #e1eaf7;
+	h4 {
+		${textSansBold17};
+		margin: 0 ${space[5]}px 0 0;
+	}
+	p {
+		${textSans15};
+		margin: ${space[1]}px ${space[5]}px 0 0;
+	}
+	${from.tablet} {
+		padding: ${space[6]}px 0 0 ${space[6]}px;
+		h4 {
+			${textSansBold20};
+		}
+		p {
+			${textSans17};
+		}
+	}
+`;
+
+const inlineContentsCss = css`
+	display: flex;
+	flex-direction: column;
+	column-gap: ${space[3]}px;
+	${from.tablet} {
+		flex-direction: row;
+	}
+`;
+
+const copyContainerCss = css`
+	order: 2;
+	margin-top: ${space[4]}px;
+	padding: 0 ${space[3]}px ${space[5]}px;
+	${from.tablet} {
+		order: 1;
+		margin: 0 0 ${space[6]}px;
+		padding: 0;
+	}
+`;
+
+const appStoreBtnsContainerCss = css`
+	margin-top: ${space[4]}px;
+`;
+
+const heroImageContainerCss = css`
+	align-items: flex-end;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+	display: flex;
+	flex-grow: 1;
+	order: 1;
+	${from.tablet} {
+		background: none;
+		order: 2;
+	}
+`;
+
+const heroImageCss = css`
+	margin: 0 auto;
+	max-width: 450px;
+	${until.tablet} {
+		width: 100%;
+	}
+	${from.tablet} {
+		max-width: 340px;
+	}
+`;
+
+export const DownloadAppCtaVariation1 = (
+	props: DownloadAppCtaVariation1Props,
+) => {
+	return (
+		<div css={[containerCss, props.additionalCss]}>
+			<div css={inlineContentsCss}>
+				<div css={copyContainerCss}>
+					<h4>The Guardian News app</h4>
+					<p>
+						Never miss a story with unlimited access to our quality
+						news app, plus enjoy personalised recommendations and
+						offline reading.
+					</p>
+					<div css={appStoreBtnsContainerCss}>
+						<AppleAppStoreButton
+							link={iosAppUrl}
+							overrideButtonHeight="36px"
+							additionalCss={css`
+								margin-right: ${space[3]}px;
+							`}
+						/>
+						<AndroidPlayStoreButton
+							link={androidAppUrl}
+							overrideButtonHeight="36px"
+						/>
+					</div>
+				</div>
+				<div css={heroImageContainerCss}>
+					<img
+						css={heroImageCss}
+						src="https://i.guim.co.uk/img/media/b78dc3cead7cdb7c2b31367a156ae34335239757/0_0_5440_2960/1000.png?width=1000&quality=75&s=74b7b2b58c094ef7534bb3e08a8e848c"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};

client/components/mma/shared/DownloadFeastAppCta.tsx → client/components/mma/shared/DownloadFeastAppCtaWithIcon.tsx

@@ -6,7 +6,7 @@ import { AndroidPlayStoreButton } from './assets/AndroidPlayStoreButton';
 import { AppleAppStoreButton } from './assets/AppleAppStoreButton';
 import { FeastAppIcon } from './assets/FeastAppIcon';
 
-interface DownloadFeastAppCtaProps {
+interface DownloadFeastAppCtaWithIconProps {
 	additionalCss?: SerializedStyles;
 }
 
@@ -45,7 +45,9 @@ const appIconContainerCss = css`
 	}
 `;
 
-export const DownloadFeastAppCta = (props: DownloadFeastAppCtaProps) => {
+export const DownloadFeastAppCtaWithIcon = (
+	props: DownloadFeastAppCtaWithIconProps,
+) => {
 	return (
 		<div css={[appAdCss, props.additionalCss]}>
 			<div css={inlineContentsCss}>

client/components/mma/shared/DownloadFeastAppCtaWithImage.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { DownloadFeastAppCtaWithImage } from './DownloadFeastAppCtaWithImage';
+
+export default {
+	title: 'Components/DownloadFeastAppCtaWithImage',
+	component: DownloadFeastAppCtaWithImage,
+} as Meta<typeof DownloadFeastAppCtaWithImage>;
+
+export const Default: StoryFn<typeof DownloadFeastAppCtaWithImage> = () => (
+	<DownloadFeastAppCtaWithImage />
+);

client/components/mma/shared/DownloadFeastAppCtaWithImage.tsx

@@ -0,0 +1,123 @@
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import {
+	from,
+	space,
+	textSans15,
+	textSans17,
+	textSansBold17,
+	textSansBold20,
+	until,
+} from '@guardian/source/foundations';
+import { androidFeastAppUrl, iosFeastAppUrl } from '@/shared/externalLinks';
+import { AndroidPlayStoreButton } from './assets/AndroidPlayStoreButton';
+import { AppleAppStoreButton } from './assets/AppleAppStoreButton';
+
+interface DownloadFeastAppCtaWithImageProps {
+	additionalCss?: SerializedStyles;
+}
+
+const containerCss = css`
+	background-color: #e1e5d5;
+	h4 {
+		${textSansBold17};
+		margin: 0 ${space[5]}px 0 0;
+	}
+	p {
+		${textSans15};
+		margin: ${space[1]}px ${space[5]}px 0 0;
+	}
+	${from.tablet} {
+		padding: ${space[6]}px 0 0 ${space[6]}px;
+		h4 {
+			${textSansBold20};
+		}
+		p {
+			${textSans17};
+		}
+	}
+`;
+
+const inlineContentsCss = css`
+	display: flex;
+	flex-direction: column;
+	column-gap: ${space[3]}px;
+	${from.tablet} {
+		flex-direction: row;
+	}
+`;
+
+const copyContainerCss = css`
+	order: 2;
+	margin-top: ${space[4]}px;
+	padding: 0 ${space[3]}px ${space[5]}px;
+	${from.tablet} {
+		order: 1;
+		margin: 0 0 ${space[6]}px;
+		padding: 0;
+	}
+`;
+
+const appStoreBtnsContainerCss = css`
+	margin-top: ${space[4]}px;
+`;
+
+const heroImageContainerCss = css`
+	align-items: flex-end;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+	display: flex;
+	flex-grow: 1;
+	order: 1;
+	${from.tablet} {
+		background: none;
+		order: 2;
+	}
+`;
+
+const heroImageCss = css`
+	margin: 0 auto;
+	max-width: 450px;
+	${until.tablet} {
+		width: 100%;
+	}
+	${from.tablet} {
+		max-width: 340px;
+	}
+`;
+
+export const DownloadFeastAppCtaWithImage = (
+	props: DownloadFeastAppCtaWithImageProps,
+) => {
+	return (
+		<div css={[containerCss, props.additionalCss]}>
+			<div css={inlineContentsCss}>
+				<div css={copyContainerCss}>
+					<h4>The Guardian Feast app</h4>
+					<p>
+						Discover thousands of recipes from the Guardian and
+						Observer in our ultimate cooking companion app.
+					</p>
+					<div css={appStoreBtnsContainerCss}>
+						<AppleAppStoreButton
+							link={iosFeastAppUrl}
+							overrideButtonHeight="36px"
+							additionalCss={css`
+								margin-right: ${space[3]}px;
+							`}
+						/>
+						<AndroidPlayStoreButton
+							link={androidFeastAppUrl}
+							overrideButtonHeight="36px"
+						/>
+					</div>
+				</div>
+				<div css={heroImageContainerCss}>
+					<img
+						css={heroImageCss}
+						src="https://i.guim.co.uk/img/media/acaeaf4cf9d5c51317be78a8927613ac6eb927cb/0_0_1360_740/1000.png?width=1000&quality=75&s=75ce87c89bcc216ed535833347064985"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};

client/components/mma/shared/NewspaperArchiveCta.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { NewspaperArchiveCta } from './NewspaperArchiveCta';
+
+export default {
+	title: 'Components/NewpaperArchiveCta',
+	component: NewspaperArchiveCta,
+} as Meta<typeof NewspaperArchiveCta>;
+
+export const Default: StoryFn<typeof NewspaperArchiveCta> = () => (
+	<NewspaperArchiveCta />
+);