supporter onboarding iframing of gateway

cypress/integration/ete/registration_1.6.cy.ts

@@ -65,7 +65,9 @@ const existingUserSendEmailAndValidatePasscode = ({
 							cy.get('input[name=code]').type(code!);
 
 							cy.contains("You're signed in! Welcome to the Guardian.");
-							cy.get('a').contains('Continue').click();
+							cy.contains('Save and continue');
+
+							cy.get('[data-cy="main-form-submit-button"]').click();
 							cy.url().should('include', expectedReturnUrl);
 
 							cy.getTestOktaUser(emailAddress).then((user) => {

src/client/app.tsx

@@ -29,6 +29,8 @@ export const App = (props: Props) => {
 		ABTestAPI.registerCompleteEvents(allRunnableTests);
 	}, [ABTestAPI]);
 
+	const isPageIframed = props.location.startsWith('/iframed/');
+
 	return (
 		<>
 			<Global
@@ -37,6 +39,7 @@ export const App = (props: Props) => {
 					html {
 						height: 100%;
 						box-sizing: border-box;
+						${isPageIframed ? 'overflow: hidden;' : ''}
 					}
 					body {
 						height: 100%;

src/client/components/EmailSentInformationBox.tsx

@@ -14,6 +14,8 @@ import ThemedLink from '@/client/components/ThemedLink';
 import { EmailSentProps } from '@/client/pages/EmailSent';
 import { useCountdownTimer } from '@/client/lib/hooks/useCountdownTimer';
 
+type EmailSentInformationBoxTheme = 'primary' | 'secondary';
+
 type EmailSentInformationBoxProps = Pick<
 	EmailSentProps,
 	| 'email'
@@ -32,6 +34,8 @@ type EmailSentInformationBoxProps = Pick<
 	setRecaptchaErrorMessage: React.Dispatch<React.SetStateAction<string>>;
 	sendAgainTimerInSeconds?: number;
 	showSignInWithPasswordOption?: boolean;
+	theme?: EmailSentInformationBoxTheme;
+	isIframed?: boolean;
 };
 
 const sendAgainFormWrapperStyles = css`
@@ -52,11 +56,14 @@ export const EmailSentInformationBox = ({
 	shortRequestId,
 	sendAgainTimerInSeconds,
 	showSignInWithPasswordOption,
+	theme = 'primary',
+	isIframed = false,
 }: EmailSentInformationBoxProps) => {
 	const timer = useCountdownTimer(sendAgainTimerInSeconds || 0);
 
+	const BoxContainer = theme === 'primary' ? InformationBox : 'div';
 	return (
-		<InformationBox>
+		<BoxContainer>
 			<InformationBoxText>
 				Didn’t get the email? Check your spam&#8288;
 				{email && resendEmailAction && (
@@ -83,6 +90,7 @@ export const EmailSentInformationBox = ({
 								hideRecaptchaMessage
 								shortRequestId={shortRequestId}
 								disabled={!!(sendAgainTimerInSeconds && !timer.isComplete)}
+								isIframed={isIframed}
 							>
 								<EmailInput defaultValue={email} hidden hideLabel />
 							</MainForm>
@@ -123,6 +131,6 @@ export const EmailSentInformationBox = ({
 					{SUPPORT_EMAIL}
 				</ExternalLink>
 			</InformationBoxText>
-		</InformationBox>
+		</BoxContainer>
 	);
 };

src/client/components/IframeThemedEmailInput.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+import React from 'react';
+import IframeThemedEmailInput from '@/client/components/IframeThemedEmailInput';
+
+export default {
+	title: 'Components/IframeThemedEmailInput',
+	component: IframeThemedEmailInput,
+	parameters: {
+		layout: 'padded',
+	},
+} as Meta;
+
+export const Default = () => {
+	return <IframeThemedEmailInput label="Themed text input" />;
+};
+Default.storyName = 'default';

src/client/components/IframeThemedEmailInput.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextInput, TextInputProps } from '@guardian/source/react-components';
+
+const textInputTheme = {
+	textLabel: 'var(--color-input-label)',
+	textUserInput: 'var(--color-input-text)',
+	border: 'var(--color-input-border)',
+	backgroundInput: 'var(--color-input-highlight)',
+};
+
+const IframeThemedEmailInput = (props: Omit<TextInputProps, 'theme'>) => {
+	return (
+		<div>
+			<TextInput {...props} theme={textInputTheme} />
+		</div>
+	);
+};
+
+export default IframeThemedEmailInput;

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';
@@ -30,13 +34,16 @@ import {
 } from '@/client/components/InformationBox';
 import {
 	mainSectionStyles,
+	mainSectionStylesLargerGap,
 	primaryButtonStyles,
 	secondaryButtonStyles,
 } from '@/client/styles/Shared';
 import locations from '@/shared/lib/locations';
 import { GatewayErrorSummary } from '@/client/components/GatewayErrorSummary';
 import { NoScript } from './NoScript';
 
+type TermsStyle = 'primary' | 'secondary';
+
 export interface MainFormProps {
 	wideLayout?: boolean;
 	formAction: string;
@@ -57,26 +64,27 @@ export interface MainFormProps {
 	formErrorContextFromParent?: ReactNode;
 	hasGuardianTerms?: boolean;
 	hasJobsTerms?: boolean;
-	onSubmit?: (e: React.FormEvent<HTMLFormElement>) =>
-		| {
-				errorOccurred: boolean;
-		  }
-		| undefined;
+	onSubmit?: (
+		e: React.FormEvent<HTMLFormElement>,
+	) => SubmitHandlerErrorObject | Promise<SubmitHandlerErrorObject> | undefined;
 	onInvalid?: React.FormEventHandler<HTMLFormElement> | undefined;
 	formTrackingName?: string;
 	disableOnSubmit?: boolean;
+	isIframed?: boolean;
 	largeFormMarginTop?: boolean;
 	displayInline?: boolean;
 	submitButtonLink?: boolean;
 	hideRecaptchaMessage?: boolean;
 	additionalTerms?: ReactNode[];
+	primaryTermsPosition?: boolean;
+	termsStyle?: TermsStyle;
 	shortRequestId?: string;
 	disabled?: boolean;
 	formRef?: React.RefObject<HTMLFormElement | null>;
 }
 
-const formStyles = (displayInline: boolean) => css`
-	${mainSectionStyles};
+const formStyles = (displayInline: boolean, largeGap: boolean) => css`
+	${largeGap ? mainSectionStylesLargerGap : mainSectionStyles};
 	a {
 		${textSansBold15};
 	}
@@ -106,12 +114,15 @@ export const MainForm = ({
 	onInvalid,
 	formTrackingName,
 	disableOnSubmit = false,
+	isIframed = false,
 	formErrorMessageFromParent,
 	formErrorContextFromParent,
 	displayInline = false,
 	submitButtonLink,
 	hideRecaptchaMessage,
 	additionalTerms,
+	primaryTermsPosition = true,
+	termsStyle = 'primary',
 	shortRequestId,
 	disabled = false,
 	// eslint-disable-next-line react-hooks/rules-of-hooks -- allow a formRef to be passed in or use a default value, either way a ref will be defined
@@ -138,6 +149,32 @@ export const MainForm = ({
 
 	const showFormLevelReportUrl = !!formLevelErrorContext;
 
+	const submitHandlerResponseIsErrorObject = (
+		submitHandler:
+			| SubmitHandlerErrorObject
+			| Promise<SubmitHandlerErrorObject>
+			| undefined,
+	): submitHandler is SubmitHandlerErrorObject => {
+		if (!submitHandler) {
+			return false;
+		}
+		return !!(submitHandler as SubmitHandlerErrorObject)?.errorOccurred;
+	};
+
+	useEffect(() => {
+		if (isIframed) {
+			const height = document.body.scrollHeight;
+			window.parent.postMessage(
+				{
+					context: 'supporterOnboarding',
+					type: 'iframeHeightChange',
+					value: height,
+				},
+				'*',
+			);
+		}
+	}, [isIframed, disabled]);
+
 	/**
 	 * Executes the reCAPTCHA check and form submit tracking.
 	 * Prevents the form from submitting until the reCAPTCHA check is complete.
@@ -149,23 +186,49 @@ export const MainForm = ({
 			if (formTrackingName) {
 				trackFormSubmit(formTrackingName);
 			}
+			if (isIframed) {
+				setIsFormDisabled(disableOnSubmit);
+				void (async () => {
+					const submitHandler = await onSubmit?.(event);
+					const errorInSubmitHandler =
+						submitHandlerResponseIsErrorObject(submitHandler);
 
-			const errorInSubmitHandler = onSubmit?.(event)?.errorOccurred;
+					if (disableOnSubmit) {
+						if (!errorInSubmitHandler) {
+							if (!isFormDisabled) {
+								setIsFormDisabled(true);
+							}
+						} else {
+							const formSubmitSuccess = !errorInSubmitHandler;
+							setIsFormDisabled(formSubmitSuccess);
+						}
+					}
 
-			if (disableOnSubmit) {
-				if (errorInSubmitHandler === undefined) {
-					if (!isFormDisabled) {
-						setIsFormDisabled(true);
+					if (recaptchaEnabled && !recaptchaState?.token) {
+						event.preventDefault();
+						recaptchaState?.executeCaptcha();
+					}
+				})();
+			} else {
+				const submitHandler = onSubmit?.(event);
+				const errorInSubmitHandler =
+					submitHandlerResponseIsErrorObject(submitHandler);
+
+				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();
+				}
 			}
 		},
 		[
@@ -175,6 +238,7 @@ export const MainForm = ({
 			recaptchaEnabled,
 			recaptchaState,
 			isFormDisabled,
+			isIframed,
 		],
 	);
 
@@ -263,9 +327,35 @@ export const MainForm = ({
 		setRecaptchaErrorMessage,
 	]);
 
+	const Terms = ({ theme }: { theme: TermsStyle }) => {
+		const BoxContainer = theme === 'primary' ? InformationBox : 'div';
+		return (
+			<>
+				{(additionalTerms ||
+					hasGuardianTerms ||
+					hasJobsTerms ||
+					(recaptchaEnabled && !hideRecaptchaMessage)) && (
+					<BoxContainer>
+						{hasGuardianTerms && <GuardianTerms />}
+						{hasJobsTerms && <JobsTerms />}
+						{additionalTerms &&
+							additionalTerms.map((specificTermsItem) => {
+								return (
+									<InformationBoxText>{specificTermsItem}</InformationBoxText>
+								);
+							})}
+						{recaptchaEnabled && !hideRecaptchaMessage && (
+							<RecaptchaTerms isIframed={isIframed} />
+						)}
+					</BoxContainer>
+				)}
+			</>
+		);
+	};
+
 	return (
 		<form
-			css={formStyles(displayInline)}
+			css={formStyles(displayInline, isIframed)}
 			method="post"
 			action={formAction}
 			onSubmit={handleSubmit}
@@ -299,22 +389,7 @@ export const MainForm = ({
 			<CsrfFormField />
 			<RefTrackingFormFields />
 			{children}
-			{(additionalTerms ||
-				hasGuardianTerms ||
-				hasJobsTerms ||
-				(recaptchaEnabled && !hideRecaptchaMessage)) && (
-				<InformationBox>
-					{hasGuardianTerms && <GuardianTerms />}
-					{hasJobsTerms && <JobsTerms />}
-					{additionalTerms &&
-						additionalTerms.map((specificTermsItem) => {
-							return (
-								<InformationBoxText>{specificTermsItem}</InformationBoxText>
-							);
-						})}
-					{recaptchaEnabled && !hideRecaptchaMessage && <RecaptchaTerms />}
-				</InformationBox>
-			)}
+			{primaryTermsPosition && <Terms theme={termsStyle} />}
 
 			{submitButtonLink ? (
 				<ButtonLink
@@ -344,6 +419,7 @@ export const MainForm = ({
 					{submitButtonText}
 				</Button>
 			)}
+			{!primaryTermsPosition && <Terms theme={termsStyle} />}
 		</form>
 	);
 };