Enable consent or pay banner (#13199)

* beta libs

* new cmp params

* reuse function

* use correct benefit

* Refactor AuthStatus type

* playwright fix

* disable sign-in check

* remove allowRejectAll

* no extra params

* add params back

* disableCMP

* remove disableCMP, debug

* more debug

* increase timeout

* undo timeout

* increase timeouts, correct logic

* fix reject all in tests

* remove logs

* back to 2 second timeout

* fix allowRejectAll call

* v21.1.0

* Update pnpm-lock.yaml

---------

Co-authored-by: Akinsola Lawanson <[email protected]>

Author: tomrf1

dotcom-rendering/package.json

@@ -47,7 +47,7 @@
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "20.0.0",
+		"@guardian/libs": "21.1.0",
 		"@guardian/ophan-tracker-js": "2.2.5",
 		"@guardian/react-crossword": "2.0.2",
 		"@guardian/react-crossword-next": "npm:@guardian/[email protected]",

dotcom-rendering/playwright/lib/cmp.ts

@@ -1,4 +1,5 @@
 import type { BrowserContext, Page } from '@playwright/test';
+import { ALLOW_REJECT_ALL_COOKIE } from '../../src/client/userFeatures/cookies/allowRejectAll';
 import { addCookie } from './cookies';
 import { waitForIsland } from './islands';
 
@@ -40,6 +41,15 @@ const cmpRejectAll = async (page: Page): Promise<void> => {
 	await new Promise((r) => setTimeout(r, 2000));
 };
 
+const allowRejectAll = (context: BrowserContext): Promise<void> => {
+	const expires = new Date();
+	expires.setMonth(expires.getMonth() + 6);
+	return addCookie(context, {
+		name: ALLOW_REJECT_ALL_COOKIE,
+		value: expires.getTime().toString(),
+	});
+};
+
 /**
  * Reconsent on the Sourcepoint CMP banner
  *
@@ -72,6 +82,7 @@ export {
 	cmpAcceptAll,
 	cmpReconsent,
 	cmpRejectAll,
+	allowRejectAll,
 	disableCMP,
 	CMP_LAYER1_IFRAME,
 };

dotcom-rendering/playwright/tests/atom.video.e2e.spec.ts

@@ -1,7 +1,7 @@
 import { isUndefined } from '@guardian/libs';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
-import { cmpAcceptAll, cmpRejectAll } from '../lib/cmp';
+import { allowRejectAll, cmpAcceptAll, cmpRejectAll } from '../lib/cmp';
 import { waitForIsland } from '../lib/islands';
 import { fetchAndloadPageWithOverrides } from '../lib/load-page';
 import { expectToBeVisible, expectToNotExist } from '../lib/locators';
@@ -383,7 +383,10 @@ test.describe.skip('YouTube Atom', () => {
 
 	test.skip('plays the video if the reader rejects consent', async ({
 		page,
+		context,
 	}) => {
+		await allowRejectAll(context);
+
 		await fetchAndloadPageWithOverrides(
 			page,
 			'https://www.theguardian.com/environment/2021/oct/05/volcanoes-are-life-how-the-ocean-is-enriched-by-eruptions-devastating-on-land',

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

@@ -5,7 +5,12 @@ import {
 	IMPRESSION_REQUEST_PATH,
 	interceptOphanRequest,
 } from 'playwright/lib/ophan';
-import { cmpAcceptAll, cmpRejectAll, disableCMP } from '../lib/cmp';
+import {
+	allowRejectAll,
+	cmpAcceptAll,
+	cmpRejectAll,
+	disableCMP,
+} from '../lib/cmp';
 import { loadPage } from '../lib/load-page';
 
 const articleUrl =
@@ -16,7 +21,9 @@ const frontUrl = 'https://www.theguardian.com/uk';
 test.describe('Ophan requests', () => {
 	test('should make an IMPRESSION request on an article when consent is rejected', async ({
 		page,
+		context,
 	}) => {
+		await allowRejectAll(context);
 		const ophanImpressionRequestPromise = interceptOphanRequest({
 			page,
 			path: IMPRESSION_REQUEST_PATH,

dotcom-rendering/src/client/bootCmp.ts

@@ -2,8 +2,10 @@ import type { ConsentState } from '@guardian/libs';
 import { cmp, onConsent } from '@guardian/libs';
 import { getCookie, log } from '@guardian/libs';
 import { getLocaleCode } from '../lib/getCountryCode';
+import { isUserLoggedInOktaRefactor } from '../lib/identity';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { getOphan } from './ophan/ophan';
+import { allowRejectAll } from './userFeatures/cookies/allowRejectAll';
 
 const submitConsentToOphan = async (renderingTarget: RenderingTarget) => {
 	const consentState: ConsentState = await onConsent();
@@ -59,6 +61,9 @@ const initialiseCmp = async () => {
 	const code = await getLocaleCode();
 	const browserId = getCookie({ name: 'bwid', shouldMemoize: true });
 	const { pageViewId } = window.guardian.config.ophan;
+	const isUserSignedIn = await isUserLoggedInOktaRefactor();
+	// If user has the "reject all" benefit then show the reduced, "non-advertised" list
+	const useNonAdvertisedList = allowRejectAll(isUserSignedIn);
 
 	const country = code ?? undefined;
 	cmp.init({
@@ -69,6 +74,8 @@ const initialiseCmp = async () => {
 			pageViewId,
 		},
 		country,
+		useNonAdvertisedList,
+		isUserSignedIn,
 	});
 	log('dotcom', 'CMP initialised');
 };

dotcom-rendering/src/components/TopBarMyAccount.tsx

@@ -14,11 +14,7 @@ import {
 import { useEffect, useState } from 'react';
 import type { UserProfile } from '../lib/discussion';
 import { getZIndex } from '../lib/getZIndex';
-import type {
-	AuthStatus,
-	SignedInWithCookies,
-	SignedInWithOkta,
-} from '../lib/identity';
+import type { SignedInWithCookies, SignedInWithOkta } from '../lib/identity';
 import { createAuthenticationEventParams } from '../lib/identity-component-event';
 import {
 	addNotificationsToDropdownLinks,
@@ -27,6 +23,7 @@ import {
 import type { Notification } from '../lib/notification';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { useApi } from '../lib/useApi';
+import type { AuthStatusOrPending } from '../lib/useAuthStatus';
 import { useBraze } from '../lib/useBraze';
 import { palette as themePalette } from '../palette';
 import ProfileIcon from '../static/icons/profile.svg';
@@ -40,7 +37,7 @@ interface MyAccountProps {
 	idUrl: string;
 	discussionApiUrl: string;
 	idApiUrl: string;
-	authStatus: AuthStatus;
+	authStatus: AuthStatusOrPending;
 }
 
 // when SignedIn, authStatus can only be one of the two SignedIn states

dotcom-rendering/src/lib/identity.ts

@@ -41,7 +41,6 @@ export type SignedInWithOkta = {
 };
 
 export type AuthStatus =
-	| { kind: 'Pending' }
 	| SignedOutWithCookies
 	| SignedInWithCookies
 	| SignedOutWithOkta

dotcom-rendering/src/lib/useAuthStatus.ts

@@ -6,6 +6,8 @@ import {
 	getSignedInStatusWithOkta,
 } from './identity';
 
+export type AuthStatusOrPending = AuthStatus | { kind: 'Pending' };
+
 /**
  * A hook to find out if a user is signed in.
  * Returns `'Pending'` until status is known.
@@ -25,8 +27,8 @@ export const useIsSignedIn = (): boolean | 'Pending' => {
 	}
 };
 
-export const useAuthStatus = (): AuthStatus => {
-	const [authStatus, setAuthStatus] = useState<AuthStatus>({
+export const useAuthStatus = (): AuthStatusOrPending => {
+	const [authStatus, setAuthStatus] = useState<AuthStatusOrPending>({
 		kind: 'Pending',
 	});