feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner

dotcom-rendering/.storybook/preview.ts

@@ -56,7 +56,7 @@ style.appendChild(document.createTextNode(css));
 // Could this be better? Sure, we could investigate ways to really, truly server side
 // render in Storybook but for now this (and some of the other steps we take around
 // hydration) achieve what we need
-window.guardian = {
+(window as any).guardian = {
 	config: {
 		ophan: {
 			pageViewId: 'mockPageViewId',

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

@@ -1,9 +1,14 @@
+import type { AuxiaAPIResponseDataUserTreatment } from '../../src/components/SignInGate/types';
+
 export const mockAuxiaResponseDismissible = {
 	status: true,
 	data: {
 		userTreatment: {
 			treatmentId: 'auxia-treatment-001',
 			treatmentTrackingId: 'tracking-001',
+			treatmentType: 'DISMISSABLE_SIGN_IN_GATE',
+			rank: '1',
+			contentLanguageCode: 'en-GB',
 			surface: 'signin-gate',
 			treatmentContent: JSON.stringify({
 				title: 'Like uninterrupted reading?\nSo do we. Sign in.',
@@ -14,7 +19,7 @@ export const mockAuxiaResponseDismissible = {
 				first_cta_link: 'https://profile.theguardian.com/register',
 				second_cta_name: "I'll do it later",
 			}),
-		},
+		} as AuxiaAPIResponseDataUserTreatment,
 	},
 };
 
@@ -24,6 +29,9 @@ export const mockAuxiaResponseNonDismissible = {
 		userTreatment: {
 			treatmentId: 'auxia-treatment-002',
 			treatmentTrackingId: 'tracking-002',
+			treatmentType: 'NONDISMISSIBLE_SIGN_IN_GATE',
+			rank: '1',
+			contentLanguageCode: 'en-GB',
 			surface: 'signin-gate',
 			treatmentContent: JSON.stringify({
 				title: 'Like uninterrupted reading?\nSo do we. Sign in.',
@@ -34,7 +42,7 @@ export const mockAuxiaResponseNonDismissible = {
 				first_cta_link: 'https://profile.theguardian.com/register',
 				second_cta_name: '', // Empty makes it non-dismissible
 			}),
-		},
+		} as AuxiaAPIResponseDataUserTreatment,
 	},
 };
 
@@ -44,6 +52,9 @@ export const mockAuxiaResponseLegacy = {
 		userTreatment: {
 			treatmentId: 'default-treatment-id', // This triggers legacy gate
 			treatmentTrackingId: 'legacy-tracking',
+			treatmentType: 'DISMISSABLE_SIGN_IN_GATE',
+			rank: '1',
+			contentLanguageCode: 'en-GB',
 			surface: 'signin-gate',
 			treatmentContent: JSON.stringify({
 				title: 'Like uninterrupted reading?\nSo do we. Sign in.',
@@ -53,7 +64,7 @@ export const mockAuxiaResponseLegacy = {
 				first_cta_link: 'https://profile.theguardian.com/register',
 				second_cta_name: 'Not now',
 			}),
-		},
+		} as AuxiaAPIResponseDataUserTreatment,
 	},
 };
 

dotcom-rendering/playwright/tests/banner.e2e.spec.ts

@@ -49,3 +49,36 @@ test.describe('The banner', function () {
 		await rrBannerRequestPromise;
 	});
 });
+
+test.describe('Sign-in gate portal', function () {
+	test('makes a request to the auxia', async ({ page, context }) => {
+		await optOutOfArticleCountConsent(context);
+
+		const auxiaUrl =
+			'https://contributions.guardianapis.com/auxia/get-treatments';
+		const auxiaRequestPromise = page.waitForRequest((request) =>
+			requestBodyHasProperties(request, auxiaUrl, ['isSupporter']),
+		);
+
+		await loadPage({
+			page,
+			path: `/Article/https://www.theguardian.com/politics/2019/nov/20/jeremy-corbyn-boris-johnson-tv-debate-watched-by-67-million-people`,
+			waitUntil: 'domcontentloaded',
+			region: 'GB',
+			preventSupportBanner: false,
+			queryParamsOn: true,
+			queryParams: { showgate: 'true' },
+		});
+
+		await cmpAcceptAll(page);
+
+		await page.evaluate(() => {
+			// Set geolocation to IE to force the sign-in gate to appear
+			window.localStorage.setItem('gu.geo.override', 'IE');
+		});
+
+		await page.reload({ waitUntil: 'domcontentloaded' });
+
+		await auxiaRequestPromise;
+	});
+});

dotcom-rendering/src/components/Island.test.tsx

@@ -387,13 +387,10 @@ describe('Island: server-side rendering', () => {
 			renderToString(
 				<WithConfig>
 					<SignInGateSelector
-						contentType={''}
-						tags={[]}
 						isPaidContent={false}
 						isPreview={false}
 						pageId={''}
 						contributionsServiceUrl={''}
-						editionId="UK"
 					/>
 				</WithConfig>,
 			),

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

@@ -1,5 +1,8 @@
-import { type EditionId } from '../../lib/edition';
-import type { TagType } from '../../types/tag';
+import {
+	mockAuxiaResponseDismissible,
+	mockAuxiaResponseLegacy,
+	mockAuxiaResponseNonDismissible,
+} from '../../../fixtures/manual/sign-in-gate';
 import { Section } from '../Section';
 import { SignInGateSelector } from '../SignInGateSelector.importable';
 import { SignInGateCustomizableText } from './gateDesigns/SignInGateCustomizableText';
@@ -158,24 +161,23 @@ signInGateMainCheckoutCompletePersonalisedCopy.argTypes = {
 };
 
 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}
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseDismissible.data.userTreatment,
+					},
+				}}
 			/>
 		</Section>
 	);
@@ -185,24 +187,23 @@ 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}
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseNonDismissible.data.userTreatment,
+					},
+				}}
 			/>
 		</Section>
 	);
@@ -212,24 +213,23 @@ 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}
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseLegacy.data.userTreatment,
+					},
+				}}
 			/>
 		</Section>
 	);
@@ -238,24 +238,22 @@ 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
-				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}
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment: undefined,
+					},
+				}}
 			/>
 		</Section>
 	);