Newspaper Archive : Benefit copy, visual updates, thankyou component

support-frontend/assets/components/thankYou/newspaperArchive/newspaperArchiveImage.tsx

@@ -0,0 +1,74 @@
+import { css } from '@emotion/react';
+import { between, from, space } from '@guardian/source/foundations';
+import GridImage from 'components/gridImage/gridImage';
+
+const mobileImg = css`
+	display: block;
+	height: auto;
+	margin: auto;
+
+	${from.mobileMedium} {
+		margin: initial;
+	}
+
+	${from.tablet} {
+		display: none;
+	}
+
+	& img {
+		width: 100%;
+		display: block;
+		margin: auto;
+	}
+`;
+
+const desktopImg = css`
+	display: none;
+	height: auto;
+	margin-left: auto;
+	margin-top: -${space[2]}px; // padding-top over-run
+	margin-bottom: -${space[5]}px; // padding-bottom over-run
+
+	& img {
+		width: 100%;
+		display: block;
+	}
+
+	${from.tablet} {
+		display: block;
+		width: 270px;
+	}
+
+	${between.desktop.and.leftCol} {
+		display: none;
+	}
+`;
+
+function NewspaperArchiveImage(): JSX.Element {
+	return (
+		<>
+			<div css={mobileImg}>
+				<GridImage
+					classModifiers={['']}
+					gridId={'newspaperArchivesPackshotMobile'}
+					srcSizes={[500, 140]}
+					sizes="(min-width: 1140px) 100%,
+                  500px"
+					imgType="png"
+				/>
+			</div>
+			<div css={desktopImg}>
+				<GridImage
+					classModifiers={['']}
+					gridId={'newspaperArchivesPackshotDesktop'}
+					srcSizes={[500, 140]}
+					sizes="(min-width: 1140px) 100%,
+          500px"
+					imgType="png"
+				/>
+			</div>
+		</>
+	);
+}
+
+export default NewspaperArchiveImage;

support-frontend/assets/components/thankYou/thankYouModule.tsx

@@ -15,6 +15,7 @@ import AppImageFeast from 'components/svgs/appImageFeast';
 import { trackComponentLoad } from 'helpers/tracking/behaviour';
 import AppDownloadImage from './appDownload/AppDownloadImage';
 import AppDownloadQRCodes from './appDownload/AppDownloadQRCodes';
+import NewspaperArchiveImage from './newspaperArchive/newspaperArchiveImage';
 
 const container = css`
 	background: white;
@@ -96,10 +97,21 @@ const headerContainer = css`
 		margin-top: 2px;
 	}
 `;
-
 const bodyContainer = css`
 	grid-area: body;
 `;
+const sizeContainer = css`
+	z-index: 1;
+	${between.tablet.and.desktop} {
+		width: 330px;
+	}
+	${between.leftCol.and.wide} {
+		width: 330px;
+	}
+	${from.wide} {
+		width: 350px;
+	}
+`;
 
 const bodyApps = css`
 	display: flex;
@@ -143,8 +155,9 @@ const appContainer = css`
 const imgContainer = css`
 	grid-area: img;
 	align-self: flex-end;
+`;
+const sizeImgContainer = css`
 	margin-top: ${space[2]}px;
-
 	${until.tablet} {
 		margin-top: ${space[4]}px;
 	}
@@ -185,10 +198,6 @@ const hideBelowTablet = css`
 	}
 `;
 
-const marginTop = css`
-	margin-top: ${space[6]}px;
-`;
-
 const ctaContainerApps = css`
 	margin-top: ${space[4]}px;
 
@@ -260,12 +269,23 @@ function ThankYouModule({
 	const maybePaddingRight =
 		!hasImagery && (isDownloadModules ? paddingRightApps : paddingRight);
 
+	const isNewspaperArchiveBenefit = moduleType === 'newspaperArchiveBenefit';
+	const resizeContainer = isNewspaperArchiveBenefit ? sizeContainer : css``;
+	const resizeImgContainer = !isNewspaperArchiveBenefit
+		? sizeImgContainer
+		: css``;
+	const resizeMarginTop = !isNewspaperArchiveBenefit
+		? css`
+				margin-top: ${space[6]}px;
+		  `
+		: css``;
+
 	return (
 		<section css={[container, maybePaddingRight, hasImagery && imageryPadding]}>
 			<div css={gridContainer}>
 				<div css={iconContainer}>{icon}</div>
-				<div css={headerContainer}>{header}</div>
-				<div css={bodyContainer}>
+				<div css={[headerContainer, resizeContainer]}>{header}</div>
+				<div css={[bodyContainer, resizeContainer]}>
 					{isDownloadModules ? (
 						<>
 							<div css={[bodyApps, bodyAppsTop]}>
@@ -290,14 +310,18 @@ function ThankYouModule({
 					) : (
 						<>
 							<p css={[bodyCopyStyle, bodyCopyMarginTop]}>{bodyCopy}</p>
-							<div css={marginTop}>{ctas}</div>
+							<div css={resizeMarginTop}>{ctas}</div>
 						</>
 					)}
 				</div>
 
 				{hasImagery ? (
-					<div css={[imgContainer]}>
-						<AppDownloadImage />
+					<div css={[imgContainer, resizeImgContainer]}>
+						{isNewspaperArchiveBenefit ? (
+							<NewspaperArchiveImage />
+						) : (
+							<AppDownloadImage />
+						)}
 					</div>
 				) : null}
 

support-frontend/assets/components/thankYou/thankYouModuleData.tsx

@@ -226,8 +226,15 @@ export const getThankYouModuleData = (
 		},
 		newspaperArchiveBenefit: {
 			icon: getThankYouModuleIcon('newspaperArchiveBenefit'),
-			header: 'Discover your Guardian archives benefit',
-			bodyCopy: <>Lorum ipsum</>,
+			header: 'The Guardian newspapers archive',
+			bodyCopy: (
+				<>
+					Sign in to start exploring more than 200 years of world history with
+					our newspaper archive. View digital reproductions of every front page,
+					article and advertisement as it was printed in the
+					{countryGroupId === 'GBPCountries' ? ' Guardian' : ' UK,'} from 1821
+				</>
+			),
 			ctas: null,
 		},
 		subscriptionStart: {

support-frontend/assets/components/thankYou/thankYouModuleIcons.tsx

@@ -206,12 +206,14 @@ function SubscriptionStartIcon(props: ThankYouModuleIconProps) {
 function NewspaperArchiveIcon(props: ThankYouModuleIconProps) {
 	return (
 		<SvgWrapper size={props.size ?? 38}>
-			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-				d="M5.5733 0.65H5.22121L4.97225 0.898959L3.62747 2.24374L3.32523 2.54598L3.38762 2.96884L3.64068 4.68418H2.88384H2.53176L2.2828 4.93314L0.938022 6.27792L0.623105 6.59284L0.702773 7.03101L3.39233 21.8236L3.51923 22.5215H4.22862H24.4003H25.1097L25.2366 21.8236L27.9262 7.03101L28.0058 6.59284L27.6909 6.27792L26.3461 4.93314L26.0972 4.68418H25.7451H25.0115L25.2427 2.9576L25.2985 2.54097L25.0013 2.24374L23.6565 0.898959L23.4075 0.65H23.0554H6.91808H5.5733ZM3.89148 6.38418L3.8915 6.38434H4.6253H24.0401H24.7838L24.7838 6.38418H25.393L26.1739 7.16508L23.6909 20.8215H4.93801L2.45502 7.16508L3.23592 6.38418H3.89148ZM23.2963 4.68418L23.5019 3.14859L22.7034 2.35H6.91808H5.92538L5.1318 3.14358L5.35908 4.68418H23.2963ZM8.93555 10.7359C8.4661 10.7359 8.08555 11.1165 8.08555 11.5859C8.08555 12.0554 8.4661 12.4359 8.93555 12.4359H18.349C18.8184 12.4359 19.199 12.0554 19.199 11.5859C19.199 11.1165 18.8184 10.7359 18.349 10.7359H8.93555ZM10.9355 13.7359C10.4661 13.7359 10.0855 14.1165 10.0855 14.5859C10.0855 15.0554 10.4661 15.4359 10.9355 15.4359H16.349C16.8184 15.4359 17.199 15.0554 17.199 14.5859C17.199 14.1165 16.8184 13.7359 16.349 13.7359H10.9355Z"
-				fill="black"
-			/>
+			<g css={{ transform: 'translate(5px, 5px)' }}>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M5.5733 0.65H5.22121L4.97225 0.898959L3.62747 2.24374L3.32523 2.54598L3.38762 2.96884L3.64068 4.68418H2.88384H2.53176L2.2828 4.93314L0.938022 6.27792L0.623105 6.59284L0.702773 7.03101L3.39233 21.8236L3.51923 22.5215H4.22862H24.4003H25.1097L25.2366 21.8236L27.9262 7.03101L28.0058 6.59284L27.6909 6.27792L26.3461 4.93314L26.0972 4.68418H25.7451H25.0115L25.2427 2.9576L25.2985 2.54097L25.0013 2.24374L23.6565 0.898959L23.4075 0.65H23.0554H6.91808H5.5733ZM3.89148 6.38418L3.8915 6.38434H4.6253H24.0401H24.7838L24.7838 6.38418H25.393L26.1739 7.16508L23.6909 20.8215H4.93801L2.45502 7.16508L3.23592 6.38418H3.89148ZM23.2963 4.68418L23.5019 3.14859L22.7034 2.35H6.91808H5.92538L5.1318 3.14358L5.35908 4.68418H23.2963ZM8.93555 10.7359C8.4661 10.7359 8.08555 11.1165 8.08555 11.5859C8.08555 12.0554 8.4661 12.4359 8.93555 12.4359H18.349C18.8184 12.4359 19.199 12.0554 19.199 11.5859C19.199 11.1165 18.8184 10.7359 18.349 10.7359H8.93555ZM10.9355 13.7359C10.4661 13.7359 10.0855 14.1165 10.0855 14.5859C10.0855 15.0554 10.4661 15.4359 10.9355 15.4359H16.349C16.8184 15.4359 17.199 15.0554 17.199 14.5859C17.199 14.1165 16.8184 13.7359 16.349 13.7359H10.9355Z"
+					fill="black"
+				/>
+			</g>
 		</SvgWrapper>
 	);
 }

support-frontend/assets/helpers/images/imageCatalogue.json

@@ -2,6 +2,8 @@
 	"appleStore": "a0787d3b313f03ed87a16ced224ab4022f794bc5/0_0_554_160",
 	"benefitsPackshotBulletsDesktopUK": "7d07783449430b9a37f23a6d82f6198f7d4ccff6/0_0_519_435",
 	"benefitsPackshotParaMobAndDesktopUK": "6faea782717c5a1058fcfc3afff5cde3fa36cf25/0_0_603_363",
+	"newspaperArchivesPackshotDesktop": "ca7f1ea06f4f4968d5a976658eaec39eb473fc02/0_0_1120_1053",
+	"newspaperArchivesPackshotMobile": "ed3a33f8dd8b261b120008b0419617a280075cdd/0_0_1361_741",
 	"checkoutPackshotWeekly": "a9fb03da0efd8e4bc19c48cdcbacc659d887ae4a/0_0_900_600",
 	"checkoutPackshotWeeklyGifting": "a9fb03da0efd8e4bc19c48cdcbacc659d887ae4a/0_0_900_600",
 	"digitalSubscriptionHeaderDesktop": "f9665e14b5927ee8ed94cc92204831b4f792c6dc/1407_0_7856_4260",

support-frontend/assets/helpers/productCatalog.tsx

@@ -344,35 +344,39 @@ export const productCatalogDescription: Record<ProductKey, ProductDescription> =
 		},
 	};
 
-export const productCatalogDescriptionNewBenefits: Record<
-	ProductKey,
-	ProductDescription
-> = {
-	...productCatalogDescription,
-	TierThree: {
-		...productCatalogDescription.TierThree,
-		benefits: [
-			...productCatalogDescription.TierThree.benefits,
-			{
-				copy: 'Newspaper archive',
-				isNew: true,
-			},
-		],
-	},
-	SupporterPlus: {
-		...productCatalogDescription.SupporterPlus,
-		benefits: [
-			...productCatalogDescription.SupporterPlus.benefits,
-			{
-				copy: 'Unlimited access to the Guardian Feast App',
-				isNew: true,
-				tooltip:
-					'Make a feast out of anything with the Guardian’s new recipe app. Feast has thousands of recipes including quick and budget-friendly weeknight dinners, and showstopping weekend dishes – plus smart app features to make mealtimes inspiring.',
-			},
-		],
-		offers: [],
-	},
-};
+export function productCatalogDescriptionNewBenefits(
+	countryGroupId: CountryGroupId,
+): Record<ProductKey, ProductDescription> {
+	return {
+		...productCatalogDescription,
+		TierThree: {
+			...productCatalogDescription.TierThree,
+			benefits: [
+				...productCatalogDescription.TierThree.benefits,
+				{
+					copy: `Unlimited access to the Guardian's 200-year newspaper archive`,
+					isNew: true,
+					tooltip: `Look back on more than 200 years of world history with the Guardian newspaper archive. Get digital access to every front page, article and advertisement, as it was printed ${
+						countryGroupId === 'GBPCountries' ? '' : ' in the UK'
+					}, since 1821.`,
+				},
+			],
+		},
+		SupporterPlus: {
+			...productCatalogDescription.SupporterPlus,
+			benefits: [
+				...productCatalogDescription.SupporterPlus.benefits,
+				{
+					copy: 'Unlimited access to the Guardian Feast App',
+					isNew: true,
+					tooltip:
+						'Make a feast out of anything with the Guardian’s new recipe app. Feast has thousands of recipes including quick and budget-friendly weeknight dinners, and showstopping weekend dishes – plus smart app features to make mealtimes inspiring.',
+				},
+			],
+			offers: [],
+		},
+	};
+}
 
 /**
  * This method is to help us determine which product and rateplan to

support-frontend/assets/pages/supporter-plus-landing/components/newspaperArchiveBanner.tsx

@@ -82,14 +82,14 @@ export function NewspaperArchiveBanner() {
 						<NewBenefitPill />
 					</div>
 					<span css={headlineText}>
-						The Guardian archives: discover 200 years of journalism
+						The Guardian newspaper archive: explore more than 200 years of
+						journalism
 					</span>
 				</h2>
 				<p css={paragraph}>
-					Lorem Ipsum, sometimes referred to as 'lipsum', is the placeholder
-					text used in design when creating content. It helps designers plan out
-					where the content will sit, without needing to wait for the content to
-					be written and approved
+					Since 1821, the world’s major events have been documented in the pages
+					of the Guardian’s UK newspaper. Today, you can journey through the
+					archive and search records of world history from wherever you are
 				</p>
 			</div>
 			<Hide from="desktop">

support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx

@@ -356,7 +356,7 @@ export function ThreeTierLanding({
 	const productCatalogDescription = ['v1', 'v2'].includes(
 		abParticipations.newspaperArchiveBenefit ?? '',
 	)
-		? productCatalogDescriptionNewBenefits
+		? productCatalogDescriptionNewBenefits(countryGroupId)
 		: canonicalProductCatalogDescription;
 
 	/**