Sign-in gate v2

dotcom-rendering/fixtures/manual/sign-in-gate.ts

@@ -18,6 +18,25 @@ export const mockAuxiaResponseDismissible = {
 	},
 };
 
+export const mockAuxiaResponseDismissibleV2 = {
+	status: true,
+	data: {
+		userTreatment: {
+			treatmentId: 'auxia-treatment-001',
+			treatmentTrackingId: 'tracking-001',
+			surface: 'signin-gate',
+			treatmentContent: JSON.stringify({
+				title: 'A small step for great Journalism. Sign in.',
+				subtitle: '',
+				body: "It's free and only takes 30 seconds.",
+				first_cta_name: 'Create account',
+				first_cta_link: 'https://profile.theguardian.com/register',
+				second_cta_name: "I'll do it later",
+			}),
+		},
+	},
+};
+
 export const mockAuxiaResponseNonDismissible = {
 	status: true,
 	data: {
@@ -38,6 +57,26 @@ export const mockAuxiaResponseNonDismissible = {
 	},
 };
 
+export const mockAuxiaResponseNonDismissibleV2 = {
+	status: true,
+	data: {
+		userTreatment: {
+			treatmentId: 'auxia-treatment-002',
+			treatmentTrackingId: 'tracking-002',
+			surface: 'signin-gate',
+			treatmentContent: JSON.stringify({
+				title: 'Sorry for the interruption. We believe in free, independent journalism for all. Sign in or register to keep reading.',
+				subtitle:
+					"Once you are signed in, we'll bring you back here shortly.",
+				body: '',
+				first_cta_name: 'Create account',
+				first_cta_link: 'https://profile.theguardian.com/register',
+				second_cta_name: '',
+			}),
+		},
+	},
+};
+
 export const mockAuxiaResponseLegacy = {
 	status: true,
 	data: {
@@ -66,14 +105,25 @@ export const getAuxiaMock = (payload: string): unknown => {
 	const body = JSON.parse(payload) as Record<string, unknown>;
 
 	const mocks = {
-		dismissable: mockAuxiaResponseDismissible,
-		'non-dismissable': mockAuxiaResponseNonDismissible,
-		legacy: mockAuxiaResponseLegacy,
-		'no-treatment': mockAuxiaResponseNoTreatment,
+		v1: {
+			dismissable: mockAuxiaResponseDismissible,
+			'non-dismissable': mockAuxiaResponseNonDismissible,
+			legacy: mockAuxiaResponseLegacy,
+			'no-treatment': mockAuxiaResponseNoTreatment,
+		},
+		v2: {
+			dismissable: mockAuxiaResponseDismissibleV2,
+			'non-dismissable': mockAuxiaResponseNonDismissibleV2,
+			legacy: mockAuxiaResponseLegacy,
+			'no-treatment': mockAuxiaResponseNoTreatment,
+		},
 	};
 
-	const key = body.sectionId as keyof typeof mocks;
-	const mock: unknown = mocks[key];
+	const key = body.sectionId as keyof (typeof mocks)[keyof typeof mocks];
+	const version = (body.articleIdentifier as string).includes('v2')
+		? 'v2'
+		: 'v1';
+	const mock: unknown = mocks[version][key];
 
 	return mock ?? mockAuxiaResponseNoTreatment;
 };

dotcom-rendering/src/components/AuthProviderButtons/AuthProviderButtons.tsx

@@ -13,6 +13,7 @@ import {
 } from '@guardian/source/react-components';
 import React from 'react';
 import { buildUrlWithQueryParams } from '../../lib/routeUtils';
+import type { AuxiaGateVersion } from '../SignInGate/types';
 import type { IsNativeApp, QueryParams } from './types';
 
 type AuthButtonProvider = 'social' | 'email';
@@ -22,6 +23,7 @@ type AuthProviderButtonsProps = {
 	isNativeApp?: IsNativeApp;
 	providers: AuthButtonProvider[];
 	onClick?: (provider: AuthButtonProvider) => void;
+	signInGateVersion?: AuxiaGateVersion;
 };
 
 type AuthProviderButtonProps = {
@@ -35,13 +37,13 @@ type AuthProviderButtonProps = {
 // The gap between elements in the main section of MinimalLayout.
 export const SECTION_GAP = remSpace[3]; // 12px
 
-export const mainSectionStyles = css`
+export const mainSectionStyles = (signInGateVersion: AuxiaGateVersion) => css`
 	display: flex;
 	flex-direction: column;
 	gap: ${SECTION_GAP};
 
 	${from.phablet} {
-		flex-direction: row;
+		flex-direction: ${signInGateVersion === 'v1' ? 'row' : 'column'};
 	}
 `;
 
@@ -152,10 +154,11 @@ export const AuthProviderButtons = ({
 	isNativeApp,
 	providers,
 	onClick,
+	signInGateVersion = 'v1',
 }: AuthProviderButtonsProps) => {
 	const buttonOrder = getButtonOrder(isNativeApp);
 	return (
-		<div css={mainSectionStyles}>
+		<div css={mainSectionStyles(signInGateVersion)}>
 			{providers.includes('social') &&
 				buttonOrder.map((socialProvider) => (
 					<SocialButton

dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx

@@ -157,12 +157,12 @@ signInGateMainCheckoutCompletePersonalisedCopy.argTypes = {
 	},
 };
 
-export const signInGateSelectorStoryDismissable = () => {
-	const tags: TagType[] = [
-		{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
-		{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
-	];
+const tags: TagType[] = [
+	{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
+	{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
+];
 
+export const signInGateSelectorStoryDismissable = () => {
 	return (
 		<Section fullWidth={true}>
 			<SignInGateSelector
@@ -185,11 +185,6 @@ signInGateSelectorStoryDismissable.storyName =
 	'sign_in_gate_selector_dismissable';
 
 export const signInGateSelectorStoryNonDismissable = () => {
-	const tags: TagType[] = [
-		{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
-		{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
-	];
-
 	return (
 		<Section fullWidth={true}>
 			<SignInGateSelector
@@ -212,11 +207,6 @@ signInGateSelectorStoryNonDismissable.storyName =
 	'sign_in_gate_selector_non_dismissable';
 
 export const signInGateSelectorStoryLegacy = () => {
-	const tags: TagType[] = [
-		{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
-		{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
-	];
-
 	return (
 		<Section fullWidth={true}>
 			<SignInGateSelector
@@ -238,11 +228,6 @@ export const signInGateSelectorStoryLegacy = () => {
 signInGateSelectorStoryLegacy.storyName = 'sign_in_gate_selector_legacy';
 
 export const signInGateSelectorStoryNoTreatment = () => {
-	const tags: TagType[] = [
-		{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
-		{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
-	];
-
 	return (
 		<Section fullWidth={true}>
 			<SignInGateSelector
@@ -263,3 +248,48 @@ export const signInGateSelectorStoryNoTreatment = () => {
 
 signInGateSelectorStoryNoTreatment.storyName =
 	'sign_in_gate_selector_no_treatment';
+
+export const auxiaV2DismissibleModal = () => {
+	return (
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				contentType="Article"
+				sectionId="dismissable"
+				tags={tags}
+				isPaidContent={false}
+				isPreview={false}
+				pageId="dismissable-v2"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				editionId={'UK' as EditionId}
+				signInGateVersion="v2"
+			/>
+		</Section>
+	);
+};
+
+auxiaV2DismissibleModal.storyName = 'sign_in_gate_auxia_v2_modal_dismissible';
+
+export const auxiaV2NonDismissibleModal = () => {
+	return (
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				contentType="Article"
+				sectionId="non-dismissable"
+				tags={tags}
+				isPaidContent={false}
+				isPreview={false}
+				pageId="non-dismissable-v2"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				editionId={'UK' as EditionId}
+				signInGateVersion="v2"
+			/>
+		</Section>
+	);
+};
+
+auxiaV2NonDismissibleModal.storyName =
+	'sign_in_gate_auxia_v2_modal_non_dismissible';