Merge pull request #14368 from guardian/jm/feat-sign-in-gate-v2

Sign-in gate v2

Author: juabara

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

@@ -23,6 +23,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: {
@@ -46,6 +65,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: {
@@ -77,14 +116,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

@@ -261,3 +261,56 @@ export const signInGateSelectorStoryNoTreatment = () => {
 
 signInGateSelectorStoryNoTreatment.storyName =
 	'sign_in_gate_selector_no_treatment';
+
+export const auxiaV2DismissibleModal = () => {
+	return (
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				isPaidContent={false}
+				isPreview={false}
+				pageId="dismissable-v2"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				signInGateVersion="v2"
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseDismissible.data.userTreatment,
+					},
+				}}
+			/>
+		</Section>
+	);
+};
+
+auxiaV2DismissibleModal.storyName = 'sign_in_gate_auxia_v2_modal_dismissible';
+
+export const auxiaV2NonDismissibleModal = () => {
+	return (
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				isPaidContent={false}
+				isPreview={false}
+				pageId="non-dismissable-v2"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				signInGateVersion="v2"
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseNonDismissible.data.userTreatment,
+					},
+				}}
+			/>
+		</Section>
+	);
+};
+
+auxiaV2NonDismissibleModal.storyName =
+	'sign_in_gate_auxia_v2_modal_non_dismissible';

dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxia.tsx

@@ -50,12 +50,9 @@ export const SignInGateAuxia = ({
 		return input !== '';
 	};
 
-	/*
-	Whether the gate is dismissible is carried by `secondCtaName` which if it's truthy
-	makes the gate dismissible and otherwise is non dismissible.
-	*/
-
-	const isDismissible = !!secondCtaName;
+	const isDismissible = userTreatment.treatmentType.startsWith(
+		'DISMISSABLE_SIGN_IN_GATE',
+	);
 	const dismissStatusLabel = isDismissible
 		? 'dismissible'
 		: 'non-dismissible';
@@ -105,7 +102,7 @@ export const SignInGateAuxia = ({
 								renderingTarget,
 								abTest,
 							);
-							void logTreatmentInteractionCall('DISMISSED', '');
+							void logTreatmentInteractionCall('DISMISSED');
 						}}
 					>
 						{secondCtaName}

dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV1.tsx

@@ -10,6 +10,7 @@ import {
 	textSansBold15,
 } from '@guardian/source/foundations';
 import { SvgCross, SvgGuardianLogo } from '@guardian/source/react-components';
+import { has } from '../../../lib/has-string';
 import { AuthProviderButtons } from '../../AuthProviderButtons/AuthProviderButtons';
 import { useConfig } from '../../ConfigContext';
 import { ExternalLink } from '../../ExternalLink/ExternalLink';
@@ -47,9 +48,9 @@ export const SignInGateAuxiaV1 = ({
 		first_cta_link: firstCtaLink,
 	} = JSON.parse(userTreatment.treatmentContent) as TreatmentContentDecoded;
 
-	const has = (s?: string) => !!s && s.trim() !== '';
-	const isDismissible =
-		userTreatment.treatmentType === 'DISMISSABLE_SIGN_IN_GATE';
+	const isDismissible = userTreatment.treatmentType.startsWith(
+		'DISMISSABLE_SIGN_IN_GATE',
+	);
 	const dismissStatusLabel = isDismissible
 		? 'dismissible'
 		: 'non-dismissible';
@@ -74,7 +75,7 @@ export const SignInGateAuxiaV1 = ({
 								renderingTarget,
 								abTest,
 							);
-							void logTreatmentInteractionCall('DISMISSED', '');
+							void logTreatmentInteractionCall('DISMISSED');
 						}}
 					>
 						<SvgCross size="xsmall" />