feat: Allow setting appClientId to maj to indicate secondary user flow

Author: AshCorr

src/client/layouts/MinimalLayout.tsx

@@ -30,7 +30,7 @@ import { GatewayErrorSummary } from '@/client/components/GatewayErrorSummary';
 interface MinimalLayoutProps {
 	children?: React.ReactNode;
 	wide?: boolean;
-	pageHeader: string;
+	pageHeader?: string;
 	leadText?: React.ReactNode;
 	imageId?: DecorativeImageId;
 	successOverride?: string;

src/client/pages/IframedRegisterWithEmail.stories.tsx

@@ -25,11 +25,17 @@ Default.story = {
 	name: 'with defaults',
 };
 
-export const Email = (args: RegistrationProps) => (
-	<IframedRegisterWithEmail {...args} email="someone@theguardian.com" />
+export const MultipleAccountJourney = (args: RegistrationProps) => (
+	<IframedRegisterWithEmail
+		{...args}
+		queryParams={{
+			returnUrl: 'https://www.theguardian.com/uk',
+			appClientId: 'maj',
+		}}
+	/>
 );
-Email.story = {
-	name: 'with email',
+MultipleAccountJourney.story = {
+	name: 'with multiple account journey',
 };
 
 export const InvalidRecaptcha = (args: RegistrationProps) => (

src/client/pages/IframedRegisterWithEmail.tsx

@@ -12,6 +12,7 @@ import { SUPPORT_EMAIL } from '@/shared/model/Configuration';
 import { PasscodeErrors } from '@/shared/model/Errors';
 import IframeThemedEmailInput from '../components/IframeThemedEmailInput';
 import { disableAutofillBackground } from '../styles/Shared';
+import { RegistrationConsents } from '../components/RegistrationConsents';
 
 type RegisterWithEmailProps = RegistrationProps & {
 	shortRequestId?: string;
@@ -47,14 +48,19 @@ export const IframedRegisterWithEmail = ({
 	shortRequestId,
 	pageError,
 }: RegisterWithEmailProps) => {
+	const isMultipleAccountFlow = queryParams.appClientId === 'maj';
 	const formTrackingName = 'register-iframed';
 
 	usePageLoadOphanInteraction(formTrackingName);
 
 	return (
 		<MinimalLayout
-			pageHeader="Create your account"
-			leadText="Unlock your premium experience, online and in the app."
+			pageHeader={isMultipleAccountFlow ? undefined : 'Create your account'}
+			leadText={
+				isMultipleAccountFlow
+					? undefined
+					: 'Unlock your premium experience, online and in the app.'
+			}
 			shortRequestId={shortRequestId}
 			errorContext={getErrorContext(pageError)}
 			errorOverride={pageError}
@@ -94,6 +100,7 @@ export const IframedRegisterWithEmail = ({
 						autoComplete="off"
 					/>
 				)}
+				{isMultipleAccountFlow && <RegistrationConsents />}
 			</MainForm>
 		</MinimalLayout>
 	);

src/client/pages/IframedSignIn.stories.tsx

@@ -159,3 +159,17 @@ export const NoSocialButtonsEmail = (args: IframedSignInProps) => (
 NoSocialButtonsEmail.story = {
 	name: 'no social buttons with email',
 };
+
+export const MultipleAccountJourney = (args: IframedSignInProps) => (
+	<IframedSignIn
+		{...args}
+		hideSocialButtons={true}
+		queryParams={{
+			returnUrl: 'https://www.theguardian.com/uk',
+			appClientId: 'maj',
+		}}
+	/>
+);
+MultipleAccountJourney.story = {
+	name: 'multiple account journey',
+};

src/client/pages/IframedSignIn.tsx

@@ -139,6 +139,7 @@ export const IframedSignIn = ({
 	shortRequestId,
 	hideSocialButtons = false,
 }: IframedSignInProps) => {
+	const isMultipleAccountFlow = queryParams.appClientId === 'maj';
 	const formTrackingName = 'sign-in';
 
 	// The page level error is equivalent to this enum if social signin has been blocked.
@@ -151,8 +152,12 @@ export const IframedSignIn = ({
 		<MinimalLayout
 			errorContext={getErrorContext(pageError, queryParams)}
 			errorOverride={pageError}
-			pageHeader="Sign in to your account"
-			leadText="This unlocks your premium experience, online and in the app."
+			pageHeader={isMultipleAccountFlow ? undefined : 'Sign in to your account'}
+			leadText={
+				isMultipleAccountFlow
+					? undefined
+					: 'This unlocks your premium experience, online and in the app.'
+			}
 			shortRequestId={shortRequestId}
 			overrideTheme="iframe-light"
 		>

src/server/routes/dev.ts

@@ -76,6 +76,8 @@ router.get('/', async (req: Request, res: ResponseWithRequestState) => {
 					<li><a href="/signout">Sign Out</a></li>
 					<li><a href="/delete">Delete Account</a></li>
 					<li><a href="/maintenance">Maintenance</a></li>
+					<li><a href="/iframed/signin">Iframed Sign-in</a> | <a href="/iframed/signin?appClientId=maj">Iframed Sign-in (Multiple Account)</a></li>
+					<li><a href="/iframed/register/email">Iframed Register</a> | <a href="/iframed/register/email?appClientId=maj">Iframed Register (Multiple Account)</a></li>
 				</ul>
 			</body>
 		</html>