Repository: guardian/support-frontend
Pull request #6940: Observer: Checkout Thankyou Sunday SubscriptionCard whatNext & subHeader copy changes
Author: login: paul-daniel-dempsey
Labels: name: Seen-on-PROD
Created: 2025-04-14T14:08:30Z | Merged: 2025-04-14T16:22:49Z

## What are you doing in this PR?

SubHeader and WhatNext component changes

**header :** 
You should receive your subscription card in 1-2 weeks, but look out for an email landing in your inbox later today containing details of how you can pick up your newspaper before then.

**happens next component:**
1. You should receive an email confirming the details of your subscription, and another email shortly afterwards that contains details of how you can pick up your newspapers from tomorrow.
2. You will receive your Subscription Card in your subscriber pack in the post, along with your home delivery letter.

[**Trello Card**](https://trello.com/c/XAtFnArm/1586-observer-thankyou-subscriptioncard-benefits-1-and-2-update)

## Screenshots

|from|to|
|----|----|
|![image](https://github.com/user-attachments/assets/0a3d7743-eb8f-4ea5-a4b5-c010580e5aa9)|![image](https://github.com/user-attachments/assets/8e8dc602-34a3-4b75-9d8f-0ab7a313e192)|

## Testing
{via [Checkout](https://support.thegulocal.com/uk/checkout?product=SubscriptionCard&ratePlan=Sunday)}
https://support.thegulocal.com/uk/thank-you?product=SubscriptionCard&ratePlan=Sunday




Diff:
diff --git a/support-frontend/assets/components/thankYou/guardianAdLite/__snapshots__/whatNext.test.tsx.snap b/support-frontend/assets/components/thankYou/guardianAdLite/__snapshots__/whatNext.test.tsx.snap
index 5b0f558a44..484f145c73 100644
--- a/support-frontend/assets/components/thankYou/guardianAdLite/__snapshots__/whatNext.test.tsx.snap
+++ b/support-frontend/assets/components/thankYou/guardianAdLite/__snapshots__/whatNext.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`Summary Ts&Cs Snapshot comparison whatNext renders correctly (signedIn=
     <li
       class="css-k6etrx"
     >
-      Look out for an email from us confirming your subscription. It has everything you need to know about how to manage it in the future.
+      You should receive an email confirming the details of your subscription, and another email shortly afterwards that contains details of how you can pick up your newspapers from tomorrow.
     </li>
     <li
       class="css-k6etrx"
     >
-      Your newspaper will be delivered to your door.
+      You will receive your Subscription Card in your subscriber pack in the post, along with your home delivery letter.
     </li>
     <li
       class="css-k6etrx"
diff --git a/support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx b/support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx
index 4681bfc108..88ec250252 100644
--- a/support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx
+++ b/support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx
@@ -17,14 +17,24 @@ export function WhatNext({
 	observerPrint,
 }: WhatNextProps): JSX.Element {
 	if (observerPrint) {
-		const observerListItems = [
+		const observerPrintItem =
+			'The Observer team will be in touch shortly via email to welcome you. Check your spam folder or add the observer.co.uk domain to your preferred sender list.';
+		const observerSubscriptionCardItems = [
+			'You should receive an email confirming the details of your subscription, and another email shortly afterwards that contains details of how you can pick up your newspapers from tomorrow.',
+			'You will receive your Subscription Card in your subscriber pack in the post, along with your home delivery letter.',
+			'Visit your chosen participating newsagent to pick up your newspaper using your Subscription Card, or arrange a home delivery using your delivery letter.',
+			observerPrintItem,
+		];
+		const observerPaperItems = [
 			'Look out for an email from us confirming your subscription. It has everything you need to know about how to manage it in the future.',
 			'Your newspaper will be delivered to your door.',
-			observerPrint === ObserverPrint.SubscriptionCard &&
-				'Visit your chosen participating newsagent to pick up your newspaper using your Subscription Card, or arrange a home delivery using your delivery letter.',
-			'The Observer team will be in touch shortly via email to welcome you. Check your spam folder or add the observer.co.uk domain to your preferred sender list.',
+			observerPrintItem,
 		];
-		return <OrderedList items={observerListItems.filter(Boolean)} />;
+		const observerListItems =
+			observerPrint === ObserverPrint.Paper
+				? observerPaperItems
+				: observerSubscriptionCardItems;
+		return <OrderedList items={observerListItems} />;
 	}
 
 	const listItems = [
diff --git a/support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx b/support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx
index a70a2cf46f..965b047b56 100644
--- a/support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx
+++ b/support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx
@@ -375,6 +375,7 @@ export function ThankYouComponent({
 							currency={currencyKey}
 							promotion={promotion}
 							identityUserType={identityUserType}
+							observerPrint={observerPrint}
 							paymentStatus={order.status}
 							startDate={startDate}
 						/>
diff --git a/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/subheading.tsx b/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/subheading.tsx
index 983bd59dd0..58f88914b9 100644
--- a/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/subheading.tsx
+++ b/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/subheading.tsx
@@ -7,6 +7,7 @@ import {
 	productCatalogDescription,
 } from 'helpers/productCatalog';
 import type { UserType } from 'helpers/redux/checkout/personalDetails/state';
+import { ObserverPrint } from 'pages/paper-subscription-landing/helpers/products';
 
 interface SubheadingProps {
 	productKey: ActiveProductKey;
@@ -14,7 +15,7 @@ interface SubheadingProps {
 	amountIsAboveThreshold: boolean;
 	isSignedIn: boolean;
 	identityUserType: UserType;
-	isObserverPrint: boolean;
+	observerPrint?: ObserverPrint;
 	startDate?: string;
 	paymentStatus?: PaymentStatus;
 }
@@ -62,7 +63,7 @@ const getSubHeadingCopy = (
 	contributionType: ContributionType,
 	isSignedIn: boolean,
 	identityUserType: UserType,
-	isObserverPrint: boolean,
+	observerPrint?: ObserverPrint,
 	startDate?: string,
 ) => {
 	const recurringCopy = (amountIsAboveThreshold: boolean) => {
@@ -75,12 +76,20 @@ const getSubHeadingCopy = (
 				{`You have unlocked your exclusive supporter extras – we hope you	enjoy them.${' '}`}
 			</span>
 		);
-		const observerCopy = startDate
-			? `You will receive your newspapers from ${startDate}.`
-			: ``;
-		const thankyouMessage = isObserverPrint
-			? observerCopy
-			: productCatalogDescription[productKey].thankyouMessage;
+
+		const getThankyouMessage = (): string | undefined => {
+			if (observerPrint === ObserverPrint.SubscriptionCard) {
+				return 'You should receive your subscription card in 1-2 weeks, but look out for an email landing in your inbox later today containing details of how you can pick up your newspaper before then.';
+			}
+			if (observerPrint === ObserverPrint.Paper) {
+				return startDate
+					? `You will receive your newspapers from ${startDate}.`
+					: undefined;
+			}
+			return productCatalogDescription[productKey].thankyouMessage;
+		};
+		const thankyouMessage = getThankyouMessage();
+
 		const signedInBelowThreshold = `Look out for your exclusive newsletter from our supporter editor.
 						We’ll also be in touch with other great ways to get closer to
 						Guardian journalism.${' '}`;
@@ -116,7 +125,7 @@ function Subheading({
 	contributionType,
 	amountIsAboveThreshold,
 	isSignedIn,
-	isObserverPrint,
+	observerPrint,
 	identityUserType,
 	paymentStatus,
 	startDate,
@@ -135,7 +144,7 @@ function Subheading({
 		contributionType,
 		isSignedIn,
 		identityUserType,
-		isObserverPrint,
+		observerPrint,
 		startDate,
 	);
 	const isPending = paymentStatus === 'pending';
@@ -143,7 +152,7 @@ function Subheading({
 		<>
 			{isPending && !isPaper && pendingCopy()}
 			{subheadingCopy}
-			{!isGuardianAdLite && !isPending && !isObserverPrint && (
+			{!isGuardianAdLite && !isPending && !observerPrint && (
 				<>
 					<MarketingCopy
 						contributionType={contributionType}
diff --git a/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/thankYouHeader.tsx b/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/thankYouHeader.tsx
index 0dfadfe6a7..69e9d8e10a 100644
--- a/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/thankYouHeader.tsx
+++ b/support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/thankYouHeader.tsx
@@ -6,6 +6,7 @@ import { type IsoCurrency } from 'helpers/internationalisation/currency';
 import type { ActiveProductKey } from 'helpers/productCatalog';
 import type { Promotion } from 'helpers/productPrice/promotions';
 import type { UserType } from 'helpers/redux/checkout/personalDetails/state';
+import type { ObserverPrint } from 'pages/paper-subscription-landing/helpers/products';
 import DirectDebitMessage from './directDebitMessage';
 import Heading from './heading';
 import Subheading, { OfferHeading } from './subheading';
@@ -40,6 +41,7 @@ type ThankYouHeaderProps = {
 	amountIsAboveThreshold: boolean;
 	isSignedIn: boolean;
 	identityUserType: UserType;
+	observerPrint?: ObserverPrint;
 	startDate?: string;
 	ratePlanKey?: string;
 	paymentStatus?: PaymentStatus;
@@ -58,19 +60,13 @@ function ThankYouHeader({
 	amountIsAboveThreshold,
 	isSignedIn,
 	identityUserType,
+	observerPrint,
 	startDate,
 	ratePlanKey,
 	paymentStatus,
 	promotion,
 	showOffer,
 }: ThankYouHeaderProps): JSX.Element {
-	const paperProductsKeys: ActiveProductKey[] = [
-		'NationalDelivery',
-		'HomeDelivery',
-		'SubscriptionCard',
-	];
-	const isObserverPrint =
-		paperProductsKeys.includes(productKey) && ratePlanKey === 'Sunday';
 	return (
 		<header css={header}>
 			<Heading
@@ -81,21 +77,21 @@ function ThankYouHeader({
 				amount={amount}
 				currency={currency}
 				contributionType={contributionType}
-				isObserverPrint={isObserverPrint}
+				isObserverPrint={!!observerPrint}
 				paymentStatus={paymentStatus}
 				promotion={promotion}
 			/>
 
 			<p css={headerSupportingText}>
 				{showDirectDebitMessage && (
-					<DirectDebitMessage isObserverPrint={isObserverPrint} />
+					<DirectDebitMessage isObserverPrint={!!observerPrint} />
 				)}
 				<Subheading
 					productKey={productKey}
 					contributionType={contributionType}
 					amountIsAboveThreshold={amountIsAboveThreshold}
 					isSignedIn={isSignedIn}
-					isObserverPrint={isObserverPrint}
+					observerPrint={observerPrint}
 					identityUserType={identityUserType}
 					paymentStatus={paymentStatus}
 					startDate={startDate}


Reviews:
user: login: maloky
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T16:01:36Z
user: login: paul-daniel-dempsey
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T16:06:09Z
user: login: maloky
body: LGTM
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T16:07:31Z

Review comments:
diff_hunk: @@ -17,13 +17,23 @@ export function WhatNext({
 	observerPrint,
 }: WhatNextProps): JSX.Element {
 	if (observerPrint) {
-		const observerListItems = [
+		const observerPrintItem =
+			'The Observer team will be in touch shortly via email to welcome you. Check your spam folder or add the observer.co.uk domain to your preferred sender list.';
+		const observerSubscriptionCardItems = [
+			'You should receive an email confirming the details of your subscription, and another email shortly afterwards that contains details of how you can pick up your newspapers from tomorrow.',
+			'You will receive your Subscription Card in your subscriber pack in the post, along with your home delivery letter.',
+			'Visit your chosen participating newsagent to pick up your newspaper using your Subscription Card, or arrange a home delivery using your delivery letter.',
+			observerPrintItem,
+		];
+		const observerPaperItems = [
 			'Look out for an email from us confirming your subscription. It has everything you need to know about how to manage it in the future.',
 			'Your newspaper will be delivered to your door.',
-			observerPrint === ObserverPrint.SubscriptionCard &&
-				'Visit your chosen participating newsagent to pick up your newspaper using your Subscription Card, or arrange a home delivery using your delivery letter.',
-			'The Observer team will be in touch shortly via email to welcome you. Check your spam folder or add the observer.co.uk domain to your preferred sender list.',
+			observerPrintItem,
 		];
+		const observerListItems =
+			observerPrint === ObserverPrint.Paper
+				? observerPaperItems
+				: observerSubscriptionCardItems;
 		return <OrderedList items={observerListItems.filter(Boolean)} />;
path: support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx
user: login: maloky
body: I think we can remove the Falsy filter as we are build the arrays with the correct items now. 
created_at: 2025-04-14T16:01:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -17,13 +17,23 @@ export function WhatNext({
 	observerPrint,
 }: WhatNextProps): JSX.Element {
 	if (observerPrint) {
-		const observerListItems = [
+		const observerPrintItem =
+			'The Observer team will be in touch shortly via email to welcome you. Check your spam folder or add the observer.co.uk domain to your preferred sender list.';
+		const observerSubscriptionCardItems = [
+			'You should receive an email confirming the details of your subscription, and another email shortly afterwards that contains details of how you can pick up your newspapers from tomorrow.',
+			'You will receive your Subscription Card in your subscriber pack in the post, along with your home delivery letter.',
+			'Visit your chosen participating newsagent to pick up your newspaper using your Subscription Card, or arrange a home delivery using your delivery letter.',
+			observerPrintItem,
+		];
+		const observerPaperItems = [
 			'Look out for an email from us confirming your subscription. It has everything you need to know about how to manage it in the future.',
 			'Your newspaper will be delivered to your door.',
-			observerPrint === ObserverPrint.SubscriptionCard &&
-				'Visit your chosen participating newsagent to pick up your newspaper using your Subscription Card, or arrange a home delivery using your delivery letter.',
-			'The Observer team will be in touch shortly via email to welcome you. Check your spam folder or add the observer.co.uk domain to your preferred sender list.',
+			observerPrintItem,
 		];
+		const observerListItems =
+			observerPrint === ObserverPrint.Paper
+				? observerPaperItems
+				: observerSubscriptionCardItems;
 		return <OrderedList items={observerListItems.filter(Boolean)} />;
path: support-frontend/assets/components/thankYou/guardianAdLite/whatNext.tsx
user: login: paul-daniel-dempsey
body: Ah yes, missed that, thanks. Updated.
created_at: 2025-04-14T16:06:09Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-14T14:10:43Z
body: ### [Deploy build 14248 of `support::stripe-patrons-data` to CODE](https://riffraff.gutools.co.uk/deployment/deployAgain?project=support%3A%3Astripe-patrons-data&build=14248&stage=CODE&updateStrategy=MostlyHarmless&action=deploy)
<details>
<summary>All deployment options</summary>

- [Deploy build 14248 of `support::stripe-patrons-data` to CODE](https://riffraff.gutools.co.uk/deployment/deployAgain?project=support%3A%3Astripe-patrons-data&build=14248&stage=CODE&updateStrategy=MostlyHarmless&action=deploy)
- [Deploy parts of build 14248 to CODE by previewing it first](https://riffraff.gutools.co.uk/preview/yaml?project=support%3A%3Astripe-patrons-data&build=14248&stage=CODE&updateStrategy=MostlyHarmless)
- [What's on CODE right now?](https://riffraff.gutools.co.uk/deployment/history?projectName=support%3A%3Astripe-patrons-data&stage=CODE)
</details>

---
_From [guardian/actions-riff-raff](https://github.com/guardian/actions-riff-raff)._
<!-- guardian/actions-riff-raff for support::stripe-patrons-data -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-14T14:11:29Z
body: **Size Change:** +200 B (+0.01%) 

**Total Size:** 1.97 MB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./public/compiled-assets/javascripts/[countryGroupId]/events/router.js` | 92.4 kB | 0 B |
| `./public/compiled-assets/javascripts/[countryGroupId]/router.js` | 98.6 kB | 0 B |
| `./public/compiled-assets/javascripts/ausMomentMap.js` | 108 kB | 0 B |
| `./public/compiled-assets/javascripts/contributionsRedirectStyles.js` | 20 B | 0 B |
| `./public/compiled-assets/javascripts/digitalSubscriptionLandingPage.js` | 227 kB | +67 B (+0.03%) |
| `./public/compiled-assets/javascripts/downForMaintenancePage.js` | 69.6 kB | 0 B |
| `./public/compiled-assets/javascripts/error404Page.js` | 69.5 kB | 0 B |
| `./public/compiled-assets/javascripts/error500Page.js` | 69.5 kB | 0 B |
| `./public/compiled-assets/javascripts/favicons.js` | 618 B | 0 B |
| `./public/compiled-assets/javascripts/paperSubscriptionCheckoutPage.js` | 167 kB | 0 B |
| `./public/compiled-assets/javascripts/paperSubscriptionLandingPage.js` | 90.3 kB | 0 B |
| `./public/compiled-assets/javascripts/payPalErrorPage.js` | 68 kB | 0 B |
| `./public/compiled-assets/javascripts/payPalErrorPageStyles.js` | 20 B | 0 B |
| `./public/compiled-assets/javascripts/promotionTerms.js` | 75.9 kB | 0 B |
| `./public/compiled-assets/javascripts/subscriptionsLandingPage.js` | 98.5 kB | 0 B |
| `./public/compiled-assets/javascripts/subscriptionsRedemptionPage.js` | 120 kB | 0 B |
| `./public/compiled-assets/javascripts/unsupportedBrowserStyles.js` | 20 B | 0 B |
| `./public/compiled-assets/javascripts/weeklySubscriptionCheckoutPage.js` | 163 kB | 0 B |
| `./public/compiled-assets/javascripts/weeklySubscriptionLandingPage.js` | 90 kB | 0 B |
| `./public/compiled-assets/webpack/133.js` | 26 kB | 0 B |
| `./public/compiled-assets/webpack/240.js` | 4.98 kB | 0 B |
| `./public/compiled-assets/webpack/429.js` | 2 kB | 0 B |
| `./public/compiled-assets/webpack/490.js` | 7.04 kB | 0 B |
| `./public/compiled-assets/webpack/56.js` | 38.1 kB | 0 B |
| `./public/compiled-assets/webpack/644.js` | 2.17 kB | 0 B |
| `./public/compiled-assets/webpack/699.js` | 4.4 kB | 0 B |
| `./public/compiled-assets/webpack/736.js` | 24.2 kB | 0 B |
| `./public/compiled-assets/webpack/750.js` | 9.04 kB | 0 B |
| `./public/compiled-assets/webpack/778.js` | 107 kB | 0 B |
| `./public/compiled-assets/webpack/799.js` | 3.54 kB | 0 B |
| `./public/compiled-assets/webpack/889.js` | 5.81 kB | 0 B |
| `./public/compiled-assets/webpack/890.js` | 7.58 kB | 0 B |
| `./public/compiled-assets/webpack/944.js` | 20.6 kB | 0 B |
| `./public/compiled-assets/webpack/989.js` | 12.2 kB | 0 B |
| `./public/compiled-assets/webpack/checkout.js` | 18.3 kB | 0 B |
| `./public/compiled-assets/webpack/GuardianAdLiteLanding.js` | 8.33 kB | 0 B |
| `./public/compiled-assets/webpack/LandingPage.js` | 15.3 kB | 0 B |
| `./public/compiled-assets/webpack/oneTimeCheckout.js` | 6.15 kB | 0 B |
| `./public/compiled-assets/webpack/ThankYou.js` | 43.5 kB | +133 B (+0.31%) |

</details>



<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-14T14:12:43Z
body: ### [Deploy build 23512 of `support:support-workers-mono` to CODE](https://riffraff.gutools.co.uk/deployment/deployAgain?project=support%3Asupport-workers-mono&build=23512&stage=CODE&updateStrategy=MostlyHarmless&action=deploy)
<details>
<summary>All deployment options</summary>

- [Deploy build 23512 of `support:support-workers-mono` to CODE](https://riffraff.gutools.co.uk/deployment/deployAgain?project=support%3Asupport-workers-mono&build=23512&stage=CODE&updateStrategy=MostlyHarmless&action=deploy)
- [Deploy parts of build 23512 to CODE by previewing it first](https://riffraff.gutools.co.uk/preview/yaml?project=support%3Asupport-workers-mono&build=23512&stage=CODE&updateStrategy=MostlyHarmless)
- [What's on CODE right now?](https://riffraff.gutools.co.uk/deployment/history?projectName=support%3Asupport-workers-mono&stage=CODE)
</details>

---
_From [guardian/actions-riff-raff](https://github.com/guardian/actions-riff-raff)._
<!-- guardian/actions-riff-raff for support:support-workers-mono -->
author_association: CONTRIBUTOR
user: login: prout-bot
created_at: 2025-04-14T16:32:45Z
body: Seen on [PROD](https://support.theguardian.com/uk/subscribe) (merged by @paul-daniel-dempsey 9 minutes and 56 seconds ago) 
- Keep an eye out for the post deployment Playwright smoke tests [github action](https://github.com/guardian/support-frontend/actions/workflows/playwright-smoke.yml)
- If the tests have failed, the [post deployment test runbook](https://github.com/guardian/support-frontend/wiki/Post-deployment-test-runbook) should help troubleshoot.


#### Sentry Release: [support-client-side](https://sentry.io/the-guardian/support-client-side/releases/2b21eff466633cfd1473658ce2c1425b24f35b3e/), [support](https://sentry.io/the-guardian/support/releases/2b21eff466633cfd1473658ce2c1425b24f35b3e/)
author_association: NONE