Merge pull request #14169 from guardian/jm/new-sign-in-gate

chore(storybook): add missing stories for sign in gate auxia

Author: juabara

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

@@ -0,0 +1,77 @@
+export const mockAuxiaResponseDismissible = {
+	status: true,
+	data: {
+		userTreatment: {
+			treatmentId: 'auxia-treatment-001',
+			treatmentTrackingId: 'tracking-001',
+			surface: 'signin-gate',
+			treatmentContent: JSON.stringify({
+				title: 'Register for free and continue reading',
+				subtitle: "It's still free to read – this is not a paywall",
+				body: "We're committed to keeping our quality reporting open. By registering and providing us with insight into your preferences, you're helping us to engage with you more deeply.",
+				first_cta_name: 'Register for free',
+				first_cta_link: 'https://profile.theguardian.com/register',
+				second_cta_name: "I'll do it later",
+			}),
+		},
+	},
+};
+
+export const mockAuxiaResponseNonDismissible = {
+	status: true,
+	data: {
+		userTreatment: {
+			treatmentId: 'auxia-treatment-002',
+			treatmentTrackingId: 'tracking-002',
+			surface: 'signin-gate',
+			treatmentContent: JSON.stringify({
+				title: 'Complete registration to continue reading',
+				subtitle: 'Registration is required to access this content',
+				body: 'To continue reading this article and access our quality journalism, please complete your registration.',
+				first_cta_name: 'Complete registration',
+				first_cta_link: 'https://profile.theguardian.com/register',
+				second_cta_name: '', // Empty makes it non-dismissible
+			}),
+		},
+	},
+};
+
+export const mockAuxiaResponseLegacy = {
+	status: true,
+	data: {
+		userTreatment: {
+			treatmentId: 'default-treatment-id', // This triggers legacy gate
+			treatmentTrackingId: 'legacy-tracking',
+			surface: 'signin-gate',
+			treatmentContent: JSON.stringify({
+				title: 'Register to continue reading',
+				subtitle: '',
+				body: '',
+				first_cta_name: 'Register',
+				first_cta_link: 'https://profile.theguardian.com/register',
+				second_cta_name: 'Not now',
+			}),
+		},
+	},
+};
+
+export const mockAuxiaResponseNoTreatment = {
+	status: false,
+	data: undefined,
+};
+
+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,
+	};
+
+	const key = body.sectionId as keyof typeof mocks;
+	const mock: unknown = mocks[key];
+
+	return mock ?? mockAuxiaResponseNoTreatment;
+};

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

@@ -1,3 +1,5 @@
+import { type EditionId } from '../../lib/edition';
+import type { TagType } from '../../types/tag';
 import { Section } from '../Section';
 import { SignInGateSelector } from '../SignInGateSelector.importable';
 import { SignInGateCustomizableText } from './gateDesigns/SignInGateCustomizableText';
@@ -154,3 +156,110 @@ signInGateMainCheckoutCompletePersonalisedCopy.argTypes = {
 		control: { type: 'radio' },
 	},
 };
+
+export const signInGateSelectorStoryDismissable = () => {
+	const tags: TagType[] = [
+		{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
+		{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
+	];
+
+	return (
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				contentType="Article"
+				sectionId="dismissable"
+				tags={tags}
+				isPaidContent={false}
+				isPreview={false}
+				pageId="dismissable"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				editionId={'UK' as EditionId}
+			/>
+		</Section>
+	);
+};
+
+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
+				contentType="Article"
+				sectionId="non-dismissable"
+				tags={tags}
+				isPaidContent={false}
+				isPreview={false}
+				pageId="non-dismissable"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				editionId={'UK' as EditionId}
+			/>
+		</Section>
+	);
+};
+
+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
+				contentType="Article"
+				sectionId="legacy"
+				tags={tags}
+				isPaidContent={false}
+				isPreview={false}
+				pageId="legacy"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				editionId={'UK' as EditionId}
+			/>
+		</Section>
+	);
+};
+
+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
+				contentType="Article"
+				sectionId="no-treatment"
+				tags={tags}
+				isPaidContent={false}
+				isPreview={false}
+				pageId="no-treatment"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				editionId={'UK' as EditionId}
+			/>
+		</Section>
+	);
+};
+
+signInGateSelectorStoryNoTreatment.storyName =
+	'sign_in_gate_selector_no_treatment';

dotcom-rendering/src/lib/mockRESTCalls.ts

@@ -13,6 +13,7 @@ import { mostReadGeo } from '../../fixtures/manual/most-read-geo';
 import { noTopPicks } from '../../fixtures/manual/noTopPicks';
 import { related } from '../../fixtures/manual/related';
 import { shortDiscussion } from '../../fixtures/manual/short-discussion';
+import { getAuxiaMock } from '../../fixtures/manual/sign-in-gate';
 import { topPicks } from '../../fixtures/manual/topPicks';
 
 const createMockResponse = (status: number, body?: any): Promise<Response> => {
@@ -257,8 +258,19 @@ export const mockFetch: typeof global.fetch = (
 			return exampleDomainRegex.test(decodedBody)
 				? createMockResponse(500)
 				: createMockResponse(200);
+		case /.*contributions\.(code\.dev-)?guardianapis\.com\/auxia\/get-treatments/.test(
+			url,
+		) && requestInit?.method === 'POST':
+			return createMockResponse(
+				200,
+				getAuxiaMock(requestInit.body?.toString() ?? ''),
+			);
+		case /.*contributions\.(code\.dev-)?guardianapis\.com\/auxia\/log-treatment-interaction/.test(
+			url,
+		) && requestInit?.method === 'POST':
+			return createMockResponse(200);
 		default:
-			console.log('could not find url');
+			console.log(`could not find url ${requestInit?.method} ${url}`);
 			return Promise.resolve(
 				new Response(JSON.stringify({ error: 'Not Found' }), {
 					status: 404,