Merge pull request #13862 from guardian/ph20250429-0719-deny

deny /tips from being gated

Author: shtukas

dotcom-rendering/README.md

@@ -6,27 +6,44 @@ Frontend rendering framework for theguardian.com. It uses [React](https://reactj
 
 This guide will help you get the `dotcom-rendering` application running on your development machine.
 
+To download the repository
+
+```
+$ git clone [email protected]:guardian/dotcom-rendering.git
+$ cd dotcom-rendering
+```
+
 ### Install Node.js
 
-The only thing you need to make sure you have installed before you get going is [Node.js](https://nodejs.org).
+Make sure you have [Node.js](https://nodejs.org) installed.
 
-We recommend using [fnm](https://github.com/Schniz/fnm) to help manage multiple versions of Node.js on on machine.
+We recommend using [fnm](https://github.com/Schniz/fnm) to help manage multiple versions of Node.js on one machine.
 
 Once Node is installed, make sure you're using the correct package manager by [enabling corepack](https://github.com/nodejs/corepack?tab=readme-ov-file#utility-commands):
 
 ```sh
 $ corepack enable
 ```
 
-> [!NOTE]
->
-> If you're using `asdf`, you'll need to run `asdf reshim nodejs` after running `corepack enable`.
+If you're using `asdf`, you'll need to run `asdf reshim nodejs` after running `corepack enable`.
+
+### Install Dependencies
 
-### Running instructions
+run
+
+```
+$ make install
+```
+
+If it complains that you do not have the right version of node, then run (or replace with the correct version manager or the correct version):
+
+```
+$ fnm install 22.14.0
+```
+
+### Running on local
 
 ```sh
-$ git clone [email protected]:guardian/dotcom-rendering.git
-$ cd dotcom-rendering
 $ make dev
 ```
 
@@ -44,7 +61,7 @@ http://localhost:3030/ArticleJson?url=https://www.theguardian.com/sport/2019/jul
 
 If you're new to TypeScript projects, if you're trying to integrate with other applications or if you prefer to take things slow, we also have a more [detailed setup guide](docs/contributing/detailed-setup-guide.md).
 
-### Technologies
+## Technologies
 
 | Technology                                                                                                                 | Description                                                                                                                                                                                                                                                                                                                                       |
 | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

dotcom-rendering/docs/contributing/detailed-setup-guide.md

@@ -8,25 +8,44 @@ This high level diagram shows the difference between the data flow when DCR is u
 
 ## Developing
 
-### Setup
+## Getting started
 
-The only thing you need to make sure you have installed before you get going is Node.
+To download the repository
 
-#### Node.js
+```
+$ git clone [email protected]:guardian/dotcom-rendering.git
+$ cd dotcom-rendering
+```
+
+### Node.js
+
+Make sure you have [Node.js](https://nodejs.org) installed.
 
 We recommend using [fnm](https://github.com/Schniz/fnm) to help manage multiple versions of Node.js on on machine.
 
-### Start
+### Install Dependencies
+
+run
+
+```
+$ make install
+```
+
+If it complains that you do not have the right version of node, then run (or replace with the correct version manager or the correct version):
+
+```
+$ fnm install 22.14.0
+```
 
-Start the development server:
+### Running on local
 
 ```sh
-make dev
+$ make dev
 ```
 
 This will start the development server on port 3030: [http://localhost:3030](http://localhost:3030).
 
-> Note: To run the development server with support for legacy browsers, use `make dev-legacy`
+Note: To run the development server with support for legacy browsers, use `make dev-legacy`
 
 ### Previewing article on local
 

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

@@ -0,0 +1,118 @@
+import { incrementDailyArticleCount } from '../../lib/dailyArticleCount';
+import {
+	isNPageOrHigherPageView,
+	isValidContentType,
+	isValidSection,
+	isValidTag,
+	pageIdIsAllowedForGating,
+} from './displayRules';
+
+describe('isNPageOrHigherPageView', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	test('default - checks for is 2 article views returns true', () => {
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+
+		const output = isNPageOrHigherPageView();
+
+		expect(output).toBe(true);
+	});
+
+	test('default - checks for higher 2 article views returns true', () => {
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+
+		const output = isNPageOrHigherPageView();
+
+		expect(output).toBe(true);
+	});
+
+	test('default - checks for lower than 2 article views returns false', () => {
+		incrementDailyArticleCount();
+
+		const output = isNPageOrHigherPageView();
+
+		expect(output).toBe(false);
+	});
+
+	test('default - checks for is n = 3 article views returns true', () => {
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+
+		const output = isNPageOrHigherPageView(3);
+
+		expect(output).toBe(true);
+	});
+
+	test('default - checks for is n = 5 article views returns false', () => {
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+		incrementDailyArticleCount();
+
+		const output = isNPageOrHigherPageView(5);
+
+		expect(output).toBe(false);
+	});
+});
+
+describe('isValidContentType', () => {
+	test('is a valid type - article', () => {
+		expect(isValidContentType('Article')).toBe(true);
+	});
+
+	test('is not a valid type - LiveBlog', () => {
+		expect(isValidContentType('LiveBlog')).toBe(false);
+	});
+});
+
+describe('isValidSection', () => {
+	test('is valid section - politics - returns true', () => {
+		expect(isValidSection('politics')).toBe(true);
+	});
+
+	test('is valid section - membership - return false', () => {
+		expect(isValidSection('membership')).toBe(false);
+	});
+});
+
+describe('isValidTag', () => {
+	test('is valid tag - us-news/us-news - returns true', () => {
+		expect(
+			isValidTag([
+				{
+					id: 'us-news/us-news',
+					type: 'Keyword',
+					title: 'US news',
+				},
+			]),
+		).toBe(true);
+	});
+
+	test('is valid tag - info/newsletter-sign-up - return false', () => {
+		expect(
+			isValidTag([
+				{
+					id: 'info/newsletter-sign-up',
+					type: 'Keyword',
+					title: 'Newsletters',
+				},
+			]),
+		).toBe(false);
+	});
+});
+
+describe('articleIdentifierIsAllowed', () => {
+	expect(
+		pageIdIsAllowedForGating(
+			'money/2017/mar/10/ministers-to-criminalise-use-of-ticket-tout-harvesting-software',
+		),
+	).toBe(true);
+	expect(pageIdIsAllowedForGating('tips')).toBe(false);
+	expect(pageIdIsAllowedForGating('tips#test')).toBe(false);
+	expect(pageIdIsAllowedForGating('tips/test')).toBe(false);
+});

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

@@ -153,3 +153,35 @@ export const canShowSignInGateWithOffers = ({
 			// hide the sign in gate for AU and US readers
 			!['AU', ...US_REGION_CODES].includes(currentLocaleCode),
 	);
+
+/*
+	Date: 29th April 2025
+
+	We have a request to prevent sign-in gate for a specific URL. This feels like an
+	adhoc request and not a new general feature to implement.
+
+	We have a check in SDC: https://github.com/guardian/support-dotcom-components/pull/1345 ,
+	to prevent the Auxia gate from showing, but we also need to prevent the legacy gate from
+	showing. For a cleaner implementation. we are simply going to prevent any of the two
+	gates components from rendering.
+
+	To keep things simple, we are going to add a check in SignInGateSelector, which seems
+	like a good place.
+*/
+
+export const pageIdIsAllowedForGating = (pageId: string): boolean => {
+	// This function was introduced to handle the specific request of not showing a gate for
+	// this url: https://www.theguardian.com/tips
+
+	// pageId is the path without the starting slash
+	// example:
+	// - full url: https://www.theguardian.com/world/2025/apr/29/canada-election-result-liberal-win-mark-carney-anti-trump
+	// - pageId: world/2025/apr/29/canada-election-result-liberal-win-mark-carney-anti-trump
+
+	const denyPaths = [
+		'tips',
+		'help/ng-interactive/2017/mar/17/contact-the-guardian-securely',
+	];
+
+	return !denyPaths.some((denyPath) => pageId.startsWith(denyPath));
+};

dotcom-rendering/src/components/SignInGate/displayRule.ts renamed to dotcom-rendering/src/components/SignInGate/displayRules.ts

@@ -1,7 +1,7 @@
 import { startPerformanceMeasure } from '@guardian/libs';
 import React, { Suspense } from 'react';
 import { Lazy } from '../../Lazy';
-import { canShowSignInGateWithOffers } from '../displayRule';
+import { canShowSignInGateWithOffers } from '../displayRules';
 import type { SignInGateComponent } from '../types';
 
 const SignInGateMain = React.lazy(() => {

dotcom-rendering/src/components/SignInGate/gates/alternative-wording-control.tsx

@@ -1,7 +1,7 @@
 import { startPerformanceMeasure } from '@guardian/libs';
 import React, { Suspense } from 'react';
 import { Lazy } from '../../Lazy';
-import { canShowSignInGateWithOffers } from '../displayRule';
+import { canShowSignInGateWithOffers } from '../displayRules';
 import type { SignInGateComponent } from '../types';
 
 const SignInGateCustomizableText = React.lazy(() => {