Exclude additional page paths from sign-in gate and defer article popups until visible

- Add privacy, complaints-and-corrections, and the-whole-picture to denied paths
- Remove gandalfCountryCode from AuxiaGateDisplayData and use fixed 'gandalf-nz' variant
- Defer mandatory popup display until visibility for Article content type
- Pass contentType through SignInGateSelector chain to enable content-specific logic

Author: Juarez Mota

dotcom-rendering/src/components/SignInGate/displayRules.test.ts

@@ -115,4 +115,9 @@ describe('articleIdentifierIsAllowed', () => {
 	expect(pageIdIsAllowedForGating('tips')).toBe(false);
 	expect(pageIdIsAllowedForGating('tips#test')).toBe(false);
 	expect(pageIdIsAllowedForGating('tips/test')).toBe(false);
+	expect(pageIdIsAllowedForGating('info/privacy')).toBe(false);
+	expect(pageIdIsAllowedForGating('info/complaints-and-corrections')).toBe(
+		false,
+	);
+	expect(pageIdIsAllowedForGating('the-whole-picture')).toBe(false);
 });

dotcom-rendering/src/components/SignInGate/displayRules.ts

@@ -201,6 +201,9 @@ export const pageIdIsAllowedForGating = (pageId: string): boolean => {
 	const denyPaths = [
 		'tips',
 		'help/ng-interactive/2017/mar/17/contact-the-guardian-securely',
+		'info/privacy',
+		'info/complaints-and-corrections',
+		'the-whole-picture',
 	];
 
 	return !denyPaths.some((denyPath) => pageId.startsWith(denyPath));

dotcom-rendering/src/components/SignInGate/types.ts

@@ -253,10 +253,6 @@ export interface AuxiaGateReaderPersonalData {
 export interface AuxiaGateDisplayData {
 	browserId: string | undefined;
 	auxiaData: AuxiaProxyGetTreatmentsProxyResponseData;
-	// The country code the gate request was made for. Set by the client so the
-	// selector can build the per-country Gandalf Ophan variant
-	// (gandalf-<country>) without re-resolving geolocation.
-	gandalfCountryCode?: string;
 }
 
 export type SignInGatePropsAuxia = {

dotcom-rendering/src/components/SignInGateSelector.island.test.tsx

@@ -39,14 +39,15 @@ const makeTreatment = (
 const makeProps = (
 	userTreatment = makeTreatment(),
 	gandalfSignInGate = true,
+	contentType = 'Network Front',
 ) => ({
 	isPaidContent: false,
 	isPreview: false,
 	pageId: 'crosswords/quick/16914',
+	contentType,
 	contributionsServiceUrl: 'https://contributions.example.com',
 	auxiaGateDisplayData: {
 		browserId: undefined,
-		gandalfCountryCode: 'NZ',
 		auxiaData: {
 			responseId: 'test-response',
 			gandalfSignInGate,
@@ -109,6 +110,20 @@ describe('SignInGateSelector view tracking', () => {
 		expect(mockFetch).not.toHaveBeenCalled();
 	});
 
+	it('keeps a mandatory Article popup deferred until visibility', () => {
+		const props = makeProps(makeTreatment(), true, 'Article');
+		const { rerender } = render(<SignInGateSelector {...props} />);
+
+		expect(testScreen.queryByTestId('v2-gate')).not.toBeInTheDocument();
+		expectViews(0);
+
+		mockUseIsInView.mockReturnValue([true, mockSetNode]);
+		rerender(<SignInGateSelector {...props} />);
+
+		expect(testScreen.getByTestId('v2-gate')).toBeInTheDocument();
+		expectViews(1);
+	});
+
 	it('does not recount an equivalent treatment supplied as a new object', () => {
 		const { rerender } = render(<SignInGateSelector {...makeProps()} />);
 		rerender(<SignInGateSelector {...makeProps()} />);

dotcom-rendering/src/components/SignInGateSelector.island.tsx

@@ -34,6 +34,7 @@ type Props = {
 	pageId: string;
 	contributionsServiceUrl: string;
 	auxiaGateDisplayData?: AuxiaGateDisplayData | undefined;
+	contentType?: string;
 };
 
 // function to generate the params for use by the profile.theguardian.com url
@@ -81,6 +82,7 @@ export const SignInGateSelector = ({
 	pageId, // pageId is the path without starting slash
 	contributionsServiceUrl,
 	auxiaGateDisplayData,
+	contentType,
 }: Props) => {
 	if (!pageIdIsAllowedForGating(pageId)) {
 		return <></>;
@@ -99,6 +101,7 @@ export const SignInGateSelector = ({
 			isPaidContent={isPaidContent}
 			auxiaGateDisplayData={auxiaGateDisplayData}
 			signInGateVersion={signInGateVersion}
+			contentType={contentType}
 		/>
 	);
 };
@@ -134,6 +137,7 @@ type PropsAuxia = {
 	isPaidContent: boolean;
 	auxiaGateDisplayData?: AuxiaGateDisplayData;
 	signInGateVersion: AuxiaGateVersion;
+	contentType?: string;
 };
 
 // [1] If true, it indicates that we are using the component for the regular Auxia share of the Audience
@@ -150,6 +154,7 @@ interface ShowSignInGateAuxiaProps {
 	treatmentId: string;
 	renderingTarget: RenderingTarget;
 	isGandalf: boolean;
+	contentType?: string;
 	logTreatmentInteractionCall: (
 		interactionType: AuxiaInteractionInteractionType,
 		actionName?: AuxiaInteractionActionName,
@@ -272,6 +277,7 @@ const SignInGateSelectorAuxia = ({
 	isPaidContent,
 	auxiaGateDisplayData,
 	signInGateVersion,
+	contentType,
 }: PropsAuxia) => {
 	const [isGateDismissed, setIsGateDismissed] = useState<boolean | undefined>(
 		undefined,
@@ -280,23 +286,18 @@ const SignInGateSelectorAuxia = ({
 	// Gandalf (comment group: gandalf) — the Guardian-managed sign-in gate
 	// journey (marketing name). SDC marks responses produced by the active
 	// Gandalf rules. For those responses we report to Ophan under a stable
-	// Gandalf identity with a per-country variant instead of the Auxia
-	// experiment metadata, and we never call Auxia's LogTreatmentInteraction
-	// endpoint. This is reporting metadata only — there is no A/B test
-	// allocation behind it.
+	// Gandalf identity instead of the Auxia experiment metadata, and we never
+	// call Auxia's LogTreatmentInteraction endpoint. This is reporting metadata
+	// only — there is no A/B test allocation behind it.
 	const isGandalf =
 		auxiaGateDisplayData?.auxiaData.gandalfSignInGate === true;
-	const gandalfCountryCode = auxiaGateDisplayData?.gandalfCountryCode;
 
 	// We are using CurrentSignInGateABTest, with the details of the Auxia experiment,
 	// to allow Ophan tracking
 	const abTest: CurrentSignInGateABTest = isGandalf
 		? {
 				name: 'GandalfSignInGate', // value of dataLinkNames
-				variant:
-					gandalfCountryCode !== undefined
-						? `gandalf-${gandalfCountryCode.toLowerCase()}` // per-country variant
-						: 'gandalf-rollout', // variant id
+				variant: 'gandalf-nz', // variant id
 				id: 'GandalfSignInGate', // test id
 			}
 		: {
@@ -376,6 +377,7 @@ const SignInGateSelectorAuxia = ({
 						}
 						renderingTarget={renderingTarget}
 						isGandalf={isGandalf}
+						contentType={contentType}
 						logTreatmentInteractionCall={async (
 							interactionType: AuxiaInteractionInteractionType,
 							actionName?: AuxiaInteractionActionName,
@@ -422,6 +424,7 @@ const ShowSignInGateAuxia = ({
 	treatmentId,
 	renderingTarget,
 	isGandalf,
+	contentType,
 	logTreatmentInteractionCall,
 	signInGateVersion,
 }: ShowSignInGateAuxiaProps) => {
@@ -436,11 +439,12 @@ const ShowSignInGateAuxia = ({
 		threshold: 0,
 	});
 
-	// The non-dismissible popup is a modal, so it must appear immediately
-	// rather than waiting for the reader to scroll to the inline host
-	// element, which on long pages sits far below the viewport.
+	// Non-article mandatory popups use the portal as a modal and should appear
+	// immediately. Articles retain the existing visibility-based behaviour so
+	// the gate waits until the reader reaches the article gate position.
 	const isMandatoryPopup =
 		userTreatment.treatmentType === 'NONDISMISSIBLE_SIGN_IN_GATE_POPUP';
+	const shouldShowImmediately = isMandatoryPopup && contentType !== 'Article';
 	const lastRecordedView = useRef<string>();
 
 	useEffect(() => {
@@ -452,9 +456,10 @@ const ShowSignInGateAuxia = ({
 	}, [setNode, setSignInGatePlaceholder]);
 
 	useEffect(() => {
-		// The mandatory popup is shown on mount (see shouldShowV2Gate), so
-		// its view is recorded immediately instead of waiting for scroll.
-		if (hasBeenSeen === true || isMandatoryPopup) {
+		// Non-article mandatory popups are shown on mount (see
+		// shouldShowV2Gate), so their view is recorded immediately. Articles
+		// wait for the gate position to become visible.
+		if (hasBeenSeen === true || shouldShowImmediately) {
 			const viewIdentity = JSON.stringify([
 				treatmentId,
 				userTreatment.treatmentTrackingId,
@@ -518,7 +523,7 @@ const ShowSignInGateAuxia = ({
 		}
 	}, [
 		hasBeenSeen,
-		isMandatoryPopup,
+		shouldShowImmediately,
 		browserId,
 		contributionsServiceUrl,
 		isGandalf,
@@ -554,7 +559,8 @@ const ShowSignInGateAuxia = ({
 		setHasScroll(scrollHeight > viewportHeight);
 	}, []);
 
-	const shouldShowV2Gate = isMandatoryPopup || (hasBeenSeen ?? !hasScroll);
+	const shouldShowV2Gate =
+		shouldShowImmediately || (hasBeenSeen ?? !hasScroll);
 
 	return (
 		<>

dotcom-rendering/src/components/StickyBottomBanner.island.tsx

@@ -212,6 +212,7 @@ const buildSignInGateConfig = (
 				pageId={canShowProps.pageId}
 				contributionsServiceUrl={canShowProps.contributionsServiceUrl}
 				auxiaGateDisplayData={meta}
+				contentType={canShowProps.contentType}
 			/>
 		),
 	},

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.test.tsx

@@ -171,7 +171,7 @@ describe('SignInGatePortal', () => {
 
 			expect(result).toEqual({
 				show: true,
-				meta: { ...auxiaReturn, gandalfCountryCode: 'NZ' },
+				meta: auxiaReturn,
 			});
 		});
 
@@ -207,7 +207,7 @@ describe('SignInGatePortal', () => {
 
 			expect(result).toEqual({
 				show: true,
-				meta: { ...auxiaReturn, gandalfCountryCode: 'NZ' },
+				meta: auxiaReturn,
 			});
 		});
 	});
@@ -247,10 +247,7 @@ describe('SignInGatePortal', () => {
 			// selector can build the Ophan variant.
 			expect(result).toEqual({
 				show: false,
-				meta: {
-					...makeAuxiaReturn(undefined, true),
-					gandalfCountryCode: 'NZ',
-				},
+				meta: makeAuxiaReturn(undefined, true),
 			});
 		});
 
@@ -270,7 +267,7 @@ describe('SignInGatePortal', () => {
 
 			expect(result).toEqual({
 				show: true,
-				meta: { ...auxiaReturn, gandalfCountryCode: 'NZ' },
+				meta: auxiaReturn,
 			});
 		});
 	});

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx

@@ -29,13 +29,15 @@ export const SignInGatePortal = ({
 	pageId,
 	contributionsServiceUrl,
 	auxiaGateDisplayData,
+	contentType,
 }: {
 	host?: string;
 	isPaidContent: boolean;
 	isPreview: boolean;
 	pageId: string;
 	contributionsServiceUrl: string;
 	auxiaGateDisplayData: AuxiaGateDisplayData;
+	contentType?: string;
 }) => {
 	const [shouldShowGate, setShouldShowGate] = useState<boolean>(false);
 	const [targetElement, setTargetElement] = useState<HTMLElement | null>(
@@ -130,6 +132,7 @@ export const SignInGatePortal = ({
 				pageId={pageId}
 				contributionsServiceUrl={contributionsServiceUrl}
 				auxiaGateDisplayData={auxiaGateDisplayData}
+				contentType={contentType}
 			/>
 		</Island>,
 		targetElement,
@@ -214,18 +217,13 @@ export const canShowSignInGatePortal = async ({
 			retrieveLastGateDismissedCount('AuxiaSignInGate'),
 		);
 
-		const meta = (
-			auxiaData
-				? {
-						...auxiaData,
-						gandalfCountryCode: countryCode,
-					}
-				: auxiaData
-		) as AuxiaGateDisplayData;
+		if (auxiaData === undefined) {
+			return { show: false };
+		}
 
 		return {
-			show: auxiaData?.auxiaData.userTreatment !== undefined,
-			meta,
+			show: auxiaData.auxiaData.userTreatment !== undefined,
+			meta: auxiaData,
 		};
 	} catch (e) {
 		const message = `SignInGatePortal canShowSignInGatePortal - error: ${String(