Soft Opt-in Thank You pages Heading copy (#7035)

* converge all header messages to legitima interest message.

* clean up unecessary subheding functions

* clean subheading uneeded decision branches

* more declaretive way of choosing sub heading messages

* exclude all subcription cards from render startDate component

* use guardianWeekly from product matcher

* update direct debit message copy

Author: maloky

support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx

@@ -359,17 +359,14 @@ export function ThankYouComponent({
 				<Container>
 					<div css={headerContainer}>
 						<ThankYouHeader
-							isSignedIn={isSignedIn}
 							productKey={productKey}
 							ratePlanKey={ratePlanKey}
 							name={order.firstName}
 							amount={payment.originalAmount}
-							amountIsAboveThreshold={isSupporterPlus}
 							isOneOffPayPal={isOneOffPayPal}
-							showDirectDebitMessage={order.paymentMethod === 'DirectDebit'}
+							isDirectDebitPayment={order.paymentMethod === 'DirectDebit'}
 							currency={currencyKey}
 							promotion={promotion}
-							identityUserType={identityUserType}
 							observerPrint={observerPrint}
 							paymentStatus={order.status}
 							startDate={startDate}

support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/DirectDebitMessage.tsx

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+
+const bold = css`
+	font-weight: bold;
+`;
+
+const directDebitMessage = css`
+	margin-bottom: ${space[2]}px;
+`;
+
+function DirectDebitMessage({
+	mediaGroup,
+}: {
+	mediaGroup: string;
+}): JSX.Element {
+	return (
+		<div css={directDebitMessage}>
+			<strong css={bold}>Your Direct Debit has been set up. </strong>
+			You will receive an email within three business days confirming your
+			recurring payment. This will appear as '{mediaGroup}' on your bank
+			statements.
+		</div>
+	);
+}
+
+export default DirectDebitMessage;

support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/LegitimateInterestMessage.tsx

@@ -0,0 +1,17 @@
+import { Link } from '@guardian/source/react-components';
+
+export default function LegitimateInterestMessage({
+	showPaymentStatus,
+}: {
+	showPaymentStatus: boolean;
+}): JSX.Element {
+	const status = 'Your payment is being processed. ';
+	return (
+		<p>
+			{showPaymentStatus && status}Look out for your exclusive newsletter from
+			our supporter editor, plus emails to help you manage and get the most out
+			of your support. Adjust your email preferences at any time via{' '}
+			<Link href="https://manage.theguardian.com/">your account</Link>.
+		</p>
+	);
+}

support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/ObserverMessage.tsx

@@ -0,0 +1,18 @@
+import { ObserverPrint } from 'pages/paper-subscription-landing/helpers/products';
+
+export default function ObserverMessage({
+	observerPrint,
+}: {
+	observerPrint: ObserverPrint;
+}) {
+	if (observerPrint === ObserverPrint.SubscriptionCard) {
+		return (
+			<p>
+				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.
+			</p>
+		);
+	}
+	return null;
+}

support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/ProductCatalogMessage.tsx

@@ -0,0 +1,18 @@
+import {
+	type ActiveProductKey,
+	productCatalogDescription,
+} from 'helpers/productCatalog';
+
+interface ProductCatalogMessage {
+	productKey: ActiveProductKey;
+}
+
+export default function ProductCatalogMessage({
+	productKey,
+}: ProductCatalogMessage) {
+	const { thankyouMessage } = productCatalogDescription[productKey];
+	if (!thankyouMessage) {
+		return null;
+	}
+	return <p>{thankyouMessage}</p>;
+}

support-frontend/assets/pages/supporter-plus-thank-you/components/thankYouHeader/StartDateMessage.tsx

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import type { ActiveProductKey } from 'helpers/productCatalog';
+import { isGuardianWeeklyProduct } from './utils/productMatchers';
+
+const startDateStyle = css`
+	margin-bottom: ${space[2]}px;
+`;
+
+export default function StartDateMessage({
+	productKey,
+	startDate,
+}: {
+	startDate?: string;
+	productKey: ActiveProductKey;
+}) {
+	if (!startDate) {
+		return null;
+	}
+
+	const deliveryMessage = isGuardianWeeklyProduct(productKey)
+		? 'Your first issue will be published on'
+		: 'You will receive your newspapers from';
+
+	return (
+		<p css={startDateStyle}>
+			{deliveryMessage} {startDate}.
+		</p>
+	);
+}