show error message on passcode input field error when the form is submitted via the onSubmit clientside handler.

fix some padding issues

use postMessage to send link click info to the parent page when recaptcha privacy policy or terms linked are clicked (only if the site is being iframed)

Author: Richard Bangay

src/client/components/MainForm.tsx

@@ -19,7 +19,11 @@ import {
 	RecaptchaWrapper,
 	UseRecaptchaReturnValue,
 } from '@/client/lib/hooks/useRecaptcha';
-import { CaptchaErrors, GatewayError } from '@/shared/model/Errors';
+import {
+	CaptchaErrors,
+	GatewayError,
+	SubmitHandlerErrorObject,
+} from '@/shared/model/Errors';
 import { DetailedRecaptchaError } from '@/client/components/DetailedRecaptchaError';
 import { RefTrackingFormFields } from '@/client/components/RefTrackingFormFields';
 import { trackFormFocusBlur, trackFormSubmit } from '@/client/lib/ophan';
@@ -37,10 +41,6 @@ import locations from '@/shared/lib/locations';
 import { GatewayErrorSummary } from '@/client/components/GatewayErrorSummary';
 import { NoScript } from './NoScript';
 
-interface SubmitHandlerErrorObject {
-	errorOccurred: boolean;
-}
-
 type TermsStyle = 'primary' | 'secondary';
 
 export interface MainFormProps {
@@ -65,10 +65,11 @@ export interface MainFormProps {
 	hasJobsTerms?: boolean;
 	onSubmit?: (
 		e: React.FormEvent<HTMLFormElement>,
-	) => SubmitHandlerErrorObject | Promise<void> | undefined;
+	) => SubmitHandlerErrorObject | Promise<SubmitHandlerErrorObject> | undefined;
 	onInvalid?: React.FormEventHandler<HTMLFormElement> | undefined;
 	formTrackingName?: string;
 	disableOnSubmit?: boolean;
+	isIframed?: boolean;
 	largeFormMarginTop?: boolean;
 	displayInline?: boolean;
 	submitButtonLink?: boolean;
@@ -112,6 +113,7 @@ export const MainForm = ({
 	onInvalid,
 	formTrackingName,
 	disableOnSubmit = false,
+	isIframed = false,
 	formErrorMessageFromParent,
 	formErrorContextFromParent,
 	displayInline = false,
@@ -147,7 +149,10 @@ export const MainForm = ({
 	const showFormLevelReportUrl = !!formLevelErrorContext;
 
 	const submitHandlerResponseIsErrorObject = (
-		submitHandler: SubmitHandlerErrorObject | Promise<void> | undefined,
+		submitHandler:
+			| SubmitHandlerErrorObject
+			| Promise<SubmitHandlerErrorObject>
+			| undefined,
 	): submitHandler is SubmitHandlerErrorObject => {
 		if (!submitHandler) {
 			return false;
@@ -166,26 +171,29 @@ export const MainForm = ({
 			if (formTrackingName) {
 				trackFormSubmit(formTrackingName);
 			}
+			setIsFormDisabled(disableOnSubmit);
 
-			const submitHandler = onSubmit?.(event);
-			const errorInSubmitHandler =
-				submitHandlerResponseIsErrorObject(submitHandler);
+			void (async () => {
+				const submitHandler = await onSubmit?.(event);
+				const errorInSubmitHandler =
+					submitHandlerResponseIsErrorObject(submitHandler);
 
-			if (disableOnSubmit) {
-				if (errorInSubmitHandler === undefined) {
-					if (!isFormDisabled) {
-						setIsFormDisabled(true);
+				if (disableOnSubmit) {
+					if (errorInSubmitHandler === undefined) {
+						if (!isFormDisabled) {
+							setIsFormDisabled(true);
+						}
+					} else {
+						const formSubmitSuccess = !errorInSubmitHandler;
+						setIsFormDisabled(formSubmitSuccess);
 					}
-				} else {
-					const formSubmitSuccess = !errorInSubmitHandler;
-					setIsFormDisabled(formSubmitSuccess);
 				}
-			}
 
-			if (recaptchaEnabled && !recaptchaState?.token) {
-				event.preventDefault();
-				recaptchaState?.executeCaptcha();
-			}
+				if (recaptchaEnabled && !recaptchaState?.token) {
+					event.preventDefault();
+					recaptchaState?.executeCaptcha();
+				}
+			})();
 		},
 		[
 			formTrackingName,
@@ -299,7 +307,9 @@ export const MainForm = ({
 									<InformationBoxText>{specificTermsItem}</InformationBoxText>
 								);
 							})}
-						{recaptchaEnabled && !hideRecaptchaMessage && <RecaptchaTerms />}
+						{recaptchaEnabled && !hideRecaptchaMessage && (
+							<RecaptchaTerms isIframed={isIframed} />
+						)}
 					</BoxContainer>
 				)}
 			</>

src/client/components/Terms.tsx

@@ -32,14 +32,39 @@ export const JobsTerms = () => (
 	</InformationBoxText>
 );
 
-export const RecaptchaTerms = () => (
+const handleIframedLinkClick =
+	(linkID: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+		event.preventDefault();
+		window.parent.postMessage(
+			{
+				context: 'supporterOnboarding',
+				type: 'iframedLinkClicked',
+				value: linkID,
+			},
+			'*',
+		);
+	};
+//export const RecaptchaTerms = (isIframed?: boolean = false) => (
+export const RecaptchaTerms = ({
+	isIframed = false,
+}: {
+	isIframed?: boolean;
+}) => (
 	<InformationBoxText>
 		This service is protected by reCAPTCHA and the Google{' '}
-		<ExternalLink href="https://policies.google.com/privacy">
+		<ExternalLink
+			href="https://policies.google.com/privacy"
+			onClick={
+				isIframed ? handleIframedLinkClick('recaptchaPrivacyPolicy') : undefined
+			}
+		>
 			privacy policy
 		</ExternalLink>{' '}
 		and{' '}
-		<ExternalLink href="https://policies.google.com/terms">
+		<ExternalLink
+			href="https://policies.google.com/terms"
+			onClick={isIframed ? handleIframedLinkClick('recaptchaTerms') : undefined}
+		>
 			terms of service
 		</ExternalLink>{' '}
 		apply.

src/client/layouts/MinimalLayout.tsx

@@ -6,7 +6,6 @@ import {
 	headlineBold28,
 	headlineMedium28,
 	remSpace,
-	space,
 } from '@guardian/source/foundations';
 import useClientState from '@/client/lib/hooks/useClientState';
 import { SuccessSummary } from '@guardian/source-development-kitchen/react-components';
@@ -30,7 +29,6 @@ import { GatewayErrorSummary } from '@/client/components/GatewayErrorSummary';
 interface MinimalLayoutProps {
 	children?: React.ReactNode;
 	wide?: boolean;
-	showGuardianHeader?: boolean;
 	pageHeader: string;
 	subduedHeadingStyle?: boolean;
 	leadText?: React.ReactNode;
@@ -57,7 +55,6 @@ const mainStyles = (wide: boolean) => css`
 `;
 
 const mainStylesStretch = css`
-	padding: ${space[3]}px ${space[3]}px ${space[6]}px;
 	display: flex;
 	flex-direction: column;
 	gap: ${CONTAINER_GAP};
@@ -78,7 +75,6 @@ const pageHeaderStyles = (subduedHeadingStyle: boolean) => css`
 export const MinimalLayout = ({
 	children,
 	wide = false,
-	showGuardianHeader = true,
 	pageHeader,
 	subduedHeadingStyle = false,
 	leadText,
@@ -103,6 +99,8 @@ export const MinimalLayout = ({
 		return <Theme />;
 	};
 
+	const amIIframed = overrideTheme?.includes('iframe');
+
 	const ConditionalIframeThemeWrapper = ({
 		children,
 	}: {
@@ -117,8 +115,8 @@ export const MinimalLayout = ({
 	return (
 		<>
 			{getTheme()}
-			{showGuardianHeader && <MinimalHeader />}
-			<main css={showGuardianHeader ? mainStyles(wide) : mainStylesStretch}>
+			{!amIIframed && <MinimalHeader />}
+			<main css={amIIframed ? mainStylesStretch : mainStyles(wide)}>
 				{imageId && <MinimalLayoutImage id={imageId} />}
 				<ConditionalIframeThemeWrapper>
 					{pageHeader && (

src/client/pages/IframedPasscodeEmailSent.tsx

@@ -9,6 +9,7 @@ import { EmailSentInformationBox } from '@/client/components/EmailSentInformatio
 import { EmailSentProps } from '@/client/pages/EmailSent';
 import useClientState from '../lib/hooks/useClientState';
 import { record, trackFormSubmit } from '../lib/ophan';
+import { SubmitHandlerErrorObject } from '@/shared/model/Errors';
 
 type Props = {
 	passcodeAction: string;
@@ -84,6 +85,9 @@ export const IframedPasscodeEmailSent = ({
 	const formRef = useRef<HTMLFormElement>(null);
 	const clientState = useClientState();
 	const formAction = `${passcodeAction}${queryString}`;
+	const [clientErrorOverride, setClientErrorOverride] = useState<FieldError[]>(
+		[],
+	);
 
 	useEffect(() => {
 		// we only want this to run in the browser as window is not
@@ -106,7 +110,9 @@ export const IframedPasscodeEmailSent = ({
 		}
 	}, [timeUntilTokenExpiry, expiredPage, queryString]);
 
-	const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+	const handleFormSubmit = async (
+		e: React.FormEvent<HTMLFormElement>,
+	): Promise<SubmitHandlerErrorObject> => {
 		e.preventDefault();
 		try {
 			const csrfToken = clientState.csrf?.token;
@@ -144,6 +150,16 @@ export const IframedPasscodeEmailSent = ({
 				throw new Error('response status error');
 			}
 			const userStatus = deriveStatusFromResponseUrl(response.url);
+			setClientErrorOverride(
+				userStatus === 'authError'
+					? [
+							{
+								field: 'code',
+								message: 'Invalid code',
+							},
+						]
+					: [],
+			);
 
 			window.parent.postMessage(
 				{
@@ -155,10 +171,12 @@ export const IframedPasscodeEmailSent = ({
 			);
 
 			trackFormSubmit('passcode-submit');
+			return { errorOccurred: userStatus === 'authError' };
 		} catch (e) {
 			record({
 				experiences: 'passcode-submit-failure',
 			});
+			return { errorOccurred: true };
 		}
 	};
 
@@ -170,7 +188,6 @@ export const IframedPasscodeEmailSent = ({
 			}
 			pageHeader={text.title}
 			shortRequestId={shortRequestId}
-			showGuardianHeader={false}
 			subduedHeadingStyle={true}
 			overrideTheme="iframe-light"
 		>
@@ -188,12 +205,15 @@ export const IframedPasscodeEmailSent = ({
 				submitButtonText={text.submitButtonText}
 				onSubmit={handleFormSubmit}
 				disableOnSubmit={true}
+				isIframed={true}
 				shortRequestId={shortRequestId}
 				formRef={formRef}
 			>
 				<PasscodeInput
 					passcode={passcode}
-					fieldErrors={fieldErrors}
+					fieldErrors={
+						clientErrorOverride.length ? clientErrorOverride : fieldErrors
+					}
 					label={text.passcodeInputLabel}
 					formRef={formRef}
 					autoFocus