Merge pull request #14496 from guardian/jr/soi-recaptcha-newsleter-single

Soft Opt-in of Similar Guardian Product for the Single and embedded Newsletter

Author: j-ruda-guardian

dotcom-rendering/src/components/SecureSignup.importable.tsx

@@ -1,9 +1,11 @@
 import { css } from '@emotion/react';
 import { isString } from '@guardian/libs';
 import type { ComponentEvent, TAction } from '@guardian/ophan-tracker-js';
-import { space, until } from '@guardian/source/foundations';
+import { space, textSans14, until } from '@guardian/source/foundations';
 import {
 	Button,
+	Checkbox,
+	CheckboxGroup,
 	InlineError,
 	InlineSuccess,
 	Link,
@@ -19,6 +21,7 @@ import { useEffect, useRef, useState } from 'react';
 import ReactGoogleRecaptcha from 'react-google-recaptcha';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { lazyFetchEmailWithTimeout } from '../lib/fetchEmail';
+import { useIsSignedIn } from '../lib/useAuthStatus';
 import { palette } from '../palette';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { useConfig } from './ConfigContext';
@@ -96,6 +99,13 @@ const errorContainerStyles = css`
 	}
 `;
 
+const optInCheckboxTextSmall = css`
+	label > div {
+		${textSans14};
+		line-height: 16px;
+	}
+`;
+
 const ErrorMessageWithAdvice = ({ text }: { text?: string }) => (
 	<InlineError>
 		<span>
@@ -124,6 +134,7 @@ const buildFormData = (
 	emailAddress: string,
 	newsletterId: string,
 	token: string,
+	marketingOptIn?: boolean,
 ): FormData => {
 	const pageRef = window.location.origin + window.location.pathname;
 	const refViewId = window.guardian.ophan?.pageViewId ?? '';
@@ -139,6 +150,10 @@ const buildFormData = (
 		formData.append('g-recaptcha-response', token); // TO DO - PR on form handlers - is the token verified?
 	}
 
+	if (marketingOptIn !== undefined) {
+		formData.append('marketing', marketingOptIn ? 'true' : 'false');
+	}
+
 	return formData;
 };
 
@@ -267,6 +282,16 @@ export const SecureSignup = ({
 	const [errorMessage, setErrorMessage] = useState<string | undefined>(
 		undefined,
 	);
+	const [marketingOptIn, setMarketingOptIn] = useState<boolean | undefined>(
+		undefined,
+	);
+	const isSignedIn = useIsSignedIn();
+
+	useEffect(() => {
+		if (isSignedIn !== 'Pending' && !isSignedIn) {
+			setMarketingOptIn(true);
+		}
+	}, [isSignedIn]);
 
 	useEffect(() => {
 		setCaptchaSiteKey(window.guardian.config.page.googleRecaptchaSiteKey);
@@ -282,9 +307,17 @@ export const SecureSignup = ({
 		const emailAddress: string = input?.value ?? '';
 
 		sendTracking(newsletterId, 'form-submission', renderingTarget, abTest);
+
+		const formData = buildFormData(
+			emailAddress,
+			newsletterId,
+			token,
+			marketingOptIn,
+		);
+
 		const response = await postFormData(
 			window.guardian.config.page.ajaxUrl + '/email',
-			buildFormData(emailAddress, newsletterId, token),
+			formData,
 		);
 
 		// The response body could be accessed with await response.text()
@@ -383,6 +416,23 @@ export const SecureSignup = ({
 					type="email"
 					value={signedInUserEmail}
 				/>
+				{isSignedIn === false && (
+					<CheckboxGroup
+						name="marketing-preferences"
+						label="Marketing preferences"
+						hideLabel={true}
+						cssOverrides={optInCheckboxTextSmall}
+					>
+						<Checkbox
+							label="Get updates about our journalism and ways to support and enjoy our work."
+							value="marketing-opt-in"
+							checked={marketingOptIn}
+							onChange={(e) =>
+								setMarketingOptIn(e.target.checked)
+							}
+						/>
+					</CheckboxGroup>
+				)}
 				<Button onClick={handleClick} size="small" type="submit">
 					Sign up
 				</Button>

dotcom-rendering/src/lib/newsletter-sign-up-requests.ts

@@ -85,11 +85,13 @@ export const requestSingleSignUp = async (
 	emailAddress: string,
 	newsletterId: string,
 	recaptchaToken: string,
+	marketingOptIn?: boolean,
 ): Promise<Response> => {
 	const data = buildNewsletterSignUpFormData(
 		emailAddress,
 		newsletterId,
 		recaptchaToken,
+		marketingOptIn,
 	);
 
 	return await postFormData(