Guardian Ad-Lite: Thankyou

support-frontend/assets/components/thankYou/guardianAdLite/activateSubscriptionReminder.tsx

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { from, space } from '@guardian/source/foundations';
+
+const paragraphCheckInbox = css`
+	font-weight: bold;
+	margin-top: ${space[5]}px;
+	${from.tablet} {
+		margin-top: ${space[6]}px;
+	}
+`;
+
+export function ActivateSubscriptionReminder(): JSX.Element {
+	return (
+		<>
+			<p>
+				Completing your account set up is required to read with non-personalised
+				advertising on other devices or browsers and manage your subscription.
+			</p>
+			<p css={paragraphCheckInbox}>
+				Check your inbox, find the email “Complete your Guardian account” and
+				follow the link to set your password.
+			</p>
+		</>
+	);
+}

support-frontend/assets/components/thankYou/guardianAdLite/addressCta.tsx

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import {
+	LinkButton,
+	SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+
+const btnStyleOverrides = css`
+	justify-content: left;
+	margin-bottom: ${space[5]}px;
+`;
+
+export type AddressCtaProp = {
+	copy: string;
+	address: string;
+	hasArrow?: boolean;
+};
+
+export function AddressCta({
+	address,
+	copy,
+	hasArrow = false,
+}: AddressCtaProp): JSX.Element {
+	return (
+		<>
+			{hasArrow ? (
+				<LinkButton
+					cssOverrides={btnStyleOverrides}
+					href={address}
+					size="default"
+					icon={<SvgArrowRightStraight />}
+					iconSide="right"
+					nudgeIcon
+					aria-label={copy}
+				>
+					{copy}
+				</LinkButton>
+			) : (
+				<LinkButton
+					cssOverrides={btnStyleOverrides}
+					href={address}
+					size="default"
+					aria-label={copy}
+				>
+					{copy}
+				</LinkButton>
+			)}
+		</>
+	);
+}

support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx

@@ -0,0 +1,28 @@
+import { palette } from '@guardian/source/foundations';
+import BulletPointedList from '../utilityComponents/BulletPointedList';
+
+type WhatNextProps = {
+	amount: string;
+	startDate: string;
+	isSignedIn?: boolean;
+};
+
+export function WhatNext({
+	amount,
+	startDate,
+	isSignedIn = false,
+}: WhatNextProps): JSX.Element {
+	const bulletItems = [
+		'You will receive an email confirming the detail of your offer',
+		`Your payment of £${amount}/month will be taken on ${startDate}`,
+	];
+	const bulletPointSignedIn = bulletItems.concat([
+		'You can now start reading the Guardian on this device in a reject all state',
+	]);
+	return (
+		<BulletPointedList
+			items={isSignedIn ? bulletPointSignedIn : bulletItems}
+			color={palette.neutral[7]}
+		/>
+	);
+}

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

@@ -48,6 +48,13 @@ const defaultGridContainer = css`
 	}
 `;
 
+const defaultContainerNoIcon = css`
+	margin: ${space[3]}px ${space[2]}px;
+	${until.tablet} {
+		margin-top: ${space[0]}px;
+	}
+`;
+
 const imageryAndQrCodesGridContainer = css`
 	display: grid;
 	grid-column-gap: ${space[3]}px;
@@ -131,11 +138,11 @@ const bodyStyle = css`
 	}
 `;
 
-const bodyCopyStyle = css`
+const bodyCopyStyle = (isGuardianAdLite: boolean) => css`
 	${textEgyptian15};
 	margin-bottom: ${space[1]}px;
 	${from.tablet} {
-		${textEgyptian17};
+		${isGuardianAdLite ? textEgyptian15 : textEgyptian17};
 	}
 `;
 const bodyCopyMarginTop = css`
@@ -175,7 +182,7 @@ const qrCodesContainer = css`
 
 const paddingRight = css`
 	${from.tablet} {
-		padding-right: 72px;
+		padding-right: 54px;
 	}
 `;
 const paddingRightApps = css`
@@ -226,14 +233,19 @@ export type ThankYouModuleType =
 	| 'supportReminder'
 	| 'benefits'
 	| 'subscriptionStart'
-	| 'newspaperArchiveBenefit';
+	| 'newspaperArchiveBenefit'
+	| 'whatNext'
+	| 'reminderToSignIn'
+	| 'reminderToActivateSubscription'
+	| 'headlineReturn'
+	| 'signInToActivate';
 
 export interface ThankYouModuleProps {
-	icon: JSX.Element;
 	header: string;
 	bodyCopy: JSX.Element | string;
 	ctas: JSX.Element | null;
 	moduleType: ThankYouModuleType;
+	icon?: JSX.Element;
 	isSignedIn?: boolean;
 	trackComponentLoadId?: string;
 	bodyCopySecond?: JSX.Element | string;
@@ -255,6 +267,13 @@ function ThankYouModule({
 		trackComponentLoadId && trackComponentLoad(trackComponentLoadId);
 	}, []);
 
+	const isGuardianAdLite = [
+		'whatNext',
+		'reminderToSignIn',
+		'reminderToActivateSubscription',
+		'headlineReturn',
+		'signInToActivate',
+	].includes(moduleType);
 	const hasQrCodes = moduleType === 'appDownload';
 	const isDownloadModules = moduleType === 'appsDownload';
 	const hasImagery = ['appDownload', 'newspaperArchiveBenefit'].includes(
@@ -264,7 +283,9 @@ function ThankYouModule({
 	const gridContainer =
 		hasImagery || hasQrCodes
 			? imageryAndQrCodesGridContainer
-			: defaultGridContainer;
+			: icon
+			? defaultGridContainer
+			: defaultContainerNoIcon;
 
 	const maybePaddingRight =
 		!hasImagery && (isDownloadModules ? paddingRightApps : paddingRight);
@@ -290,7 +311,7 @@ function ThankYouModule({
 						<>
 							<div css={[bodyApps, bodyAppsTop]}>
 								<div css={bodyStyle}>
-									<p css={bodyCopyStyle}>{bodyCopy}</p>
+									<p css={bodyCopyStyle(isGuardianAdLite)}>{bodyCopy}</p>
 									<div css={[ctaContainerApps, ctaTop]}>{ctas}</div>
 								</div>
 								<span css={appContainer}>
@@ -299,7 +320,7 @@ function ThankYouModule({
 							</div>
 							<div css={bodyApps}>
 								<div css={bodyStyle}>
-									<p css={bodyCopyStyle}>{bodyCopySecond}</p>
+									<p css={bodyCopyStyle(isGuardianAdLite)}>{bodyCopySecond}</p>
 									<div css={[ctaContainerApps, ctaBottom]}>{ctasSecond}</div>
 								</div>
 								<span css={appContainer}>
@@ -309,7 +330,9 @@ function ThankYouModule({
 						</>
 					) : (
 						<>
-							<p css={[bodyCopyStyle, bodyCopyMarginTop]}>{bodyCopy}</p>
+							<p css={[bodyCopyStyle(isGuardianAdLite), bodyCopyMarginTop]}>
+								{bodyCopy}
+							</p>
 							<div css={resizeMarginTop}>{ctas}</div>
 						</>
 					)}

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

@@ -26,6 +26,7 @@ import {
 	OPHAN_COMPONENT_ID_SOCIAL,
 	OPHAN_COMPONENT_ID_SURVEY,
 } from 'helpers/thankYouPages/utils/ophan';
+import { manageSubsUrl } from 'helpers/urls/externalLinks';
 import {
 	formatMachineDate,
 	formatUserDate,
@@ -51,6 +52,9 @@ import {
 	FeedbackCTA,
 	getFeedbackHeader,
 } from './feedback/FeedbackItems';
+import { ActivateSubscriptionReminder } from './guardianAdLite/activateSubscriptionReminder';
+import { AddressCta } from './guardianAdLite/addressCta';
+import { WhatNext } from './guardianAdLite/whatNext';
 import { SignInBodyCopy, SignInCTA, signInHeader } from './signIn/signInItems';
 import { SignUpBodyCopy, signUpHeader } from './signUp/signUpItems';
 import {
@@ -72,10 +76,10 @@ import type { ThankYouModuleType } from './thankYouModule';
 import { getThankYouModuleIcon } from './thankYouModuleIcons';
 
 export interface ThankYouModuleData {
-	icon: JSX.Element;
 	header: string;
 	bodyCopy: string | JSX.Element;
 	ctas: JSX.Element | null;
+	icon?: JSX.Element;
 	trackComponentLoadId?: string;
 	bodyCopySecond?: string | JSX.Element;
 	ctasSecond?: JSX.Element | null;
@@ -112,6 +116,10 @@ export const getThankYouModuleData = (
 	checklistData?: BenefitsCheckListData[],
 	supportReminder?: ThankYouSupportReminderState,
 	feedbackSurveyHasBeenCompleted?: boolean,
+	finalAmount?: number,
+	startDate?: string,
+	returnAddress?: string,
+	isSignedIn?: boolean,
 ): Record<ThankYouModuleType, ThankYouModuleData> => {
 	const initialFeedbackSurveyHasBeenCompleted =
 		feedbackSurveyHasBeenCompleted ?? defaultFeedbackSurveyHasBeenCompleted;
@@ -318,6 +326,66 @@ export const getThankYouModuleData = (
 				/>
 			),
 		},
+		whatNext: {
+			header: 'What happens next?',
+			bodyCopy: (
+				<WhatNext
+					amount={(finalAmount ?? '').toString()}
+					startDate={startDate ?? ''}
+					isSignedIn={isSignedIn}
+				/>
+			),
+			ctas: null,
+		},
+		reminderToSignIn: {
+			header: 'Important reminder',
+			bodyCopy: (
+				<p>
+					To enjoy reading the Guardian with non-personalised advertising on all
+					your devices. please remember to sign in on each device or browser
+					session. This will ensure you to read with non-personalised
+					advertising no matter where you log in.
+				</p>
+			),
+			ctas: null,
+		},
+		reminderToActivateSubscription: {
+			header:
+				'Almost there! Complete your Guardian account to activate your subscription',
+			bodyCopy: <ActivateSubscriptionReminder />,
+			ctas: null,
+		},
+		headlineReturn: {
+			header: 'Headline to bring user back to Guardian front page',
+			bodyCopy: (
+				<p>
+					Copy to prompt users to enjoy the Guardian with non personalised
+					advertising
+				</p>
+			),
+			ctas: (
+				<AddressCta
+					address={returnAddress ?? ''}
+					copy={'Continue to the Guardian'}
+					hasArrow={true}
+				/>
+			),
+		},
+		signInToActivate: {
+			header: 'Almost there! Sign in to activate your subscription',
+			bodyCopy: (
+				<p>
+					To be able to read the Guardian with non-personalised advertising you
+					must be signed in on all your devices.'
+				</p>
+			),
+			ctas: (
+				<AddressCta
+					address={manageSubsUrl}
+					copy={'Sign in and activate your subscription'}
+				/>
+			),
+		},
 	};
 
 	return thankYouModuleData;

support-frontend/assets/components/thankYou/utilityComponents/BulletPointedList.tsx

@@ -14,14 +14,20 @@ const list = css`
 		margin-top: ${space[4]}px;
 	}
 `;
+
+type SvgBulletProps = {
+	color?: string;
+};
 type BulletPointedListItemProps = {
 	item: string;
+	color?: string;
 };
 type BulletPointedListProps = {
 	items: string[];
+	color?: string;
 };
 
-function SvgBullet() {
+function SvgBullet({ color = palette.brand[500] }: SvgBulletProps) {
 	return (
 		<svg
 			width="8"
@@ -30,27 +36,27 @@ function SvgBullet() {
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 		>
-			<circle cx="4" cy="4" r="4" fill={`${palette.brand[500]}`} />
+			<circle cx="4" cy="4" r="4" fill={`${color}`} />
 		</svg>
 	);
 }
 
-function BulletPointedListItem({ item }: BulletPointedListItemProps) {
+function BulletPointedListItem({ item, color }: BulletPointedListItemProps) {
 	return (
 		<li css={listItem}>
 			<div>
-				<SvgBullet />
+				<SvgBullet color={color} />
 			</div>
 			<div>{item}</div>
 		</li>
 	);
 }
 
-function BulletPointedList({ items }: BulletPointedListProps) {
+function BulletPointedList({ items, color }: BulletPointedListProps) {
 	return (
 		<ul css={list}>
 			{items.map((item) => (
-				<BulletPointedListItem key={item} item={item} />
+				<BulletPointedListItem key={item} item={item} color={color} />
 			))}
 		</ul>
 	);