diff --git a/support-frontend/assets/components/thankYou/newspaperArchive/newspaperArchiveImage.tsx b/support-frontend/assets/components/thankYou/newspaperArchive/newspaperArchiveImage.tsx new file mode 100644 index 0000000000..9443450c34 --- /dev/null +++ b/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 ( + <> +
+ +
+
+ +
+ + ); +} + +export default NewspaperArchiveImage; diff --git a/support-frontend/assets/components/thankYou/thankYouModule.tsx b/support-frontend/assets/components/thankYou/thankYouModule.tsx index 80be9c619f..163859d727 100644 --- a/support-frontend/assets/components/thankYou/thankYouModule.tsx +++ b/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 (
{icon}
-
{header}
-
+
{header}
+
{isDownloadModules ? ( <>
@@ -290,14 +310,18 @@ function ThankYouModule({ ) : ( <>

{bodyCopy}

-
{ctas}
+
{ctas}
)}
{hasImagery ? ( -
- +
+ {isNewspaperArchiveBenefit ? ( + + ) : ( + + )}
) : null} diff --git a/support-frontend/assets/components/thankYou/thankYouModuleData.tsx b/support-frontend/assets/components/thankYou/thankYouModuleData.tsx index 7a711088ff..f0c72b8d24 100644 --- a/support-frontend/assets/components/thankYou/thankYouModuleData.tsx +++ b/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: { diff --git a/support-frontend/assets/components/thankYou/thankYouModuleIcons.tsx b/support-frontend/assets/components/thankYou/thankYouModuleIcons.tsx index 6ced928414..36c6f1f6e0 100644 --- a/support-frontend/assets/components/thankYou/thankYouModuleIcons.tsx +++ b/support-frontend/assets/components/thankYou/thankYouModuleIcons.tsx @@ -206,12 +206,14 @@ function SubscriptionStartIcon(props: ThankYouModuleIconProps) { function NewspaperArchiveIcon(props: ThankYouModuleIconProps) { return ( - + + + ); } diff --git a/support-frontend/assets/helpers/images/imageCatalogue.json b/support-frontend/assets/helpers/images/imageCatalogue.json index cd2274422e..21cfaa07e5 100644 --- a/support-frontend/assets/helpers/images/imageCatalogue.json +++ b/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", diff --git a/support-frontend/assets/helpers/productCatalog.tsx b/support-frontend/assets/helpers/productCatalog.tsx index 7122258ef5..0becfaf9d8 100644 --- a/support-frontend/assets/helpers/productCatalog.tsx +++ b/support-frontend/assets/helpers/productCatalog.tsx @@ -344,35 +344,39 @@ export const productCatalogDescription: Record = }, }; -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 { + 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 diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/newspaperArchiveBanner.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/newspaperArchiveBanner.tsx index bc04aa4b77..472a2d1639 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/components/newspaperArchiveBanner.tsx +++ b/support-frontend/assets/pages/supporter-plus-landing/components/newspaperArchiveBanner.tsx @@ -82,14 +82,14 @@ export function NewspaperArchiveBanner() {
- The Guardian archives: discover 200 years of journalism + The Guardian newspaper archive: explore more than 200 years of + journalism

- 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

diff --git a/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx b/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx index 203d440764..765156a7a4 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx +++ b/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; /**