Merge 59c2dbf into f98e690

.changeset/popular-trees-brake.md

@@ -0,0 +1,5 @@
+---
+'@guardian/libs': minor
+---
+
+Test for Consent or Pay

apps/github-pages/src/components/CmpTest.svelte

@@ -3,6 +3,12 @@
 	import { cmp, onConsentChange, log } from '@guardian/libs';
 	import { onMount } from 'svelte';
 
+
+	let subscriber = window.location.search.includes('subscriber');
+	let isFeatureFlagEnabled = window.location.search.includes('CMP_COP');
+	let isMainSite = window.location.search.includes('CMP_MAIN');
+	// localStorage.setItem('subscribed', window.location.search.includes('subscribed'));
+
 	switch (window.location.hash) {
 		case '#tcfv2':
 			localStorage.setItem('framework', JSON.stringify('tcfv2'));
@@ -37,6 +43,13 @@
 		log('cmp', event);
 	}
 
+	let rejectAllFunc = () => {
+		cmp.rejectAll().then(() => {
+			logEvent({ title: 'rejectAll'});
+			// window.location.reload();
+		});
+	};
+
 	let clearPreferences = () => {
 		// clear local storage
 		// https://documentation.sourcepoint.com/web-implementation/general/cookies-and-local-storage#cmp-local-storage
@@ -60,6 +73,28 @@
 		clearPreferences();
 	};
 
+	const toggleQueryParams = (param) => {
+		let queryParams = new URLSearchParams(window.location.search);
+		queryParams.has(param) ? queryParams.delete(param) : queryParams.append(param, '');
+		window.location.search = queryParams.toString();
+	};
+
+	const toggleSubscriber = () => {
+		subscribed = !subscribed;
+		toggleQueryParams('subscribed');
+		localStorage.setItem('subscribed', JSON.stringify(subscribed));
+	};
+
+	const toggleIsFeatureFlagEnabled = () => {
+		isFeatureFlagEnabled = !isFeatureFlagEnabled;
+		toggleQueryParams('CMP_COP');
+	};
+
+	const toggleIsMainSite = () => {
+		isMainSite = !isMainSite;
+		toggleQueryParams('CMP_MAIN');
+	};
+
 	$: consentState = {};
 	$: eventsList = [];
 
@@ -91,10 +126,7 @@
 		}
 
 		// do this loads to make sure that doesn't break things
-		cmp.init({ country });
-		cmp.init({ country });
-		cmp.init({ country });
-		cmp.init({ country });
+		cmp.init({ country, subscriber: subscriber ?? false });
 	});
 </script>
 
@@ -104,6 +136,7 @@
 			>open privacy manager</button
 		>
 		<button on:click={clearPreferences}>clear preferences</button>
+		<button on:click={rejectAllFunc}>rejectAll</button>
 		<label class={framework == 'tcfv2' ? 'selected' : 'none'}>
 			<input
 				type="radio"
@@ -133,6 +166,33 @@
 			in Australia:
 			<strong>CCPA-like</strong>
 		</label>
+
+		<label class={isMainSite ? 'selected' : 'none'}>
+			<input
+				type="checkbox"
+				on:change={toggleIsMainSite}
+				checked={isMainSite}
+			/>
+			<strong>Is main site?</strong>
+		</label>
+
+		<label class={subscriber ? 'selected' : 'none'}>
+			<input
+				type="checkbox"
+				on:change={toggleSubscriber}
+				checked={subscriber}
+			/>
+			<strong>Subscriber</strong>
+		</label>
+
+		<label class={isFeatureFlagEnabled ? 'selected' : 'none'}>
+			<input
+				type="checkbox"
+				on:change={toggleIsFeatureFlagEnabled}
+				checked={isFeatureFlagEnabled}
+			/>
+			<strong>Feature enabled?</strong>
+		</label>
 	</nav>
 
 	<div id="consent-state">

libs/@guardian/libs/src/consent-management-platform/cmp.ts

@@ -16,9 +16,13 @@ import type {
 	WillShowPrivacyMessage,
 } from './types';
 
-const init = (framework: ConsentFramework, pubData?: PubData): void => {
+const init = (
+	framework: ConsentFramework,
+	subscriber: boolean,
+	pubData?: PubData,
+): void => {
 	mark('cmp-init');
-	initSourcepoint(framework, pubData);
+	initSourcepoint(framework, pubData, subscriber);
 };
 
 const willShowPrivacyMessage: WillShowPrivacyMessage = () =>

libs/@guardian/libs/src/consent-management-platform/index.test.ts

@@ -23,8 +23,8 @@ describe('cmp.init', () => {
 	it('does nothing if CMP is disabled', () => {
 		disable();
 
-		cmp.init({ country: 'GB' });
-		cmp.init({ country: 'US' });
+		cmp.init({ country: 'GB', subscriber: true });
+		cmp.init({ country: 'US', subscriber: true });
 
 		expect(CMP.init).not.toHaveBeenCalled();
 
@@ -33,33 +33,33 @@ describe('cmp.init', () => {
 
 	it('requires country to be set', () => {
 		expect(() => {
-			cmp.init({ pubData: {} });
+			cmp.init({ subscriber: true, pubData: {} });
 		}).toThrow('required');
 	});
 
 	it('initializes CMP when in the US', () => {
-		cmp.init({ country: 'US' });
+		cmp.init({ country: 'US', subscriber: true });
 		expect(CMP.init).toHaveBeenCalledTimes(1);
 	});
 
 	it('initializes CMP when in Australia', () => {
-		cmp.init({ country: 'AU' });
+		cmp.init({ country: 'AU', subscriber: true });
 		expect(CMP.init).toHaveBeenCalledTimes(1);
 	});
 
 	it('initializes TCF when neither in the US or Australia', () => {
-		cmp.init({ country: 'GB' });
+		cmp.init({ country: 'GB', subscriber: true });
 		expect(CMP.init).toHaveBeenCalledTimes(1);
 	});
 });
 
 // *************** START commercial.dcr.js hotfix ***************
 describe('hotfix cmp.init', () => {
 	it('only initialises once per page', () => {
-		cmp.init({ country: 'GB' });
-		cmp.init({ country: 'GB' });
-		cmp.init({ country: 'GB' });
-		cmp.init({ country: 'GB' });
+		cmp.init({ country: 'GB', subscriber: true });
+		cmp.init({ country: 'GB', subscriber: true });
+		cmp.init({ country: 'GB', subscriber: true });
+		cmp.init({ country: 'GB', subscriber: true });
 		expect(CMP.init).toHaveBeenCalledTimes(1);
 		expect(window.guCmpHotFix.initialised).toBe(true);
 	});
@@ -68,7 +68,7 @@ describe('hotfix cmp.init', () => {
 		const consoleWarn = jest
 			.spyOn(global.console, 'warn')
 			.mockImplementation(() => undefined);
-		cmp.init({ country: 'GB' });
+		cmp.init({ country: 'GB', subscriber: true });
 		const currentVersion = window.guCmpHotFix.cmp?.version;
 		const mockedVersion = 'X.X.X-mock';
 
@@ -106,6 +106,7 @@ describe('hotfix cmp.init', () => {
 			willShowPrivacyMessage: () => new Promise(() => true),
 			willShowPrivacyMessageSync: () => true,
 			hasInitialised: () => true,
+			rejectAll: () => new Promise(() => undefined),
 			showPrivacyManager: () => {
 				console.warn('This is a dummy for showPrivacyManager');
 			},

libs/@guardian/libs/src/consent-management-platform/index.ts

@@ -6,6 +6,7 @@ import { getConsentFor as clientGetConsentFor } from './getConsentFor';
 import { getFramework } from './getFramework';
 import { onConsent as clientOnConsent } from './onConsent';
 import { onConsentChange as clientOnConsentChange } from './onConsentChange';
+import { rejectAll as clientRejectAll } from './rejectAll';
 import {
 	isServerSide,
 	cmp as serverCmp,
@@ -33,7 +34,7 @@ const initialised = new Promise((resolve) => {
 	resolveInitialised = resolve;
 });
 
-const init: InitCMP = ({ pubData, country }) => {
+const init: InitCMP = ({ pubData, country, subscriber = true }) => {
 	if (isDisabled() || isServerSide) {
 		return;
 	}
@@ -61,7 +62,7 @@ const init: InitCMP = ({ pubData, country }) => {
 
 	const framework = getFramework(country);
 
-	UnifiedCMP.init(framework, pubData ?? {});
+	UnifiedCMP.init(framework, subscriber, pubData ?? {});
 
 	void UnifiedCMP.willShowPrivacyMessage().then((willShowValue) => {
 		_willShowPrivacyMessage = willShowValue;
@@ -92,6 +93,10 @@ const showPrivacyManager = () => {
 	void initialised.then(UnifiedCMP.showPrivacyManager);
 };
 
+const rejectAll = isServerSide
+	? clientRejectAll
+	: (window.guCmpHotFix.rejectAll ??= clientRejectAll);
+
 export const cmp: CMP = isServerSide
 	? serverCmp
 	: (window.guCmpHotFix.cmp ??= {
@@ -100,6 +105,7 @@ export const cmp: CMP = isServerSide
 			willShowPrivacyMessageSync,
 			hasInitialised,
 			showPrivacyManager,
+			rejectAll,
 			version: version,
 
 			// special helper methods for disabling CMP

libs/@guardian/libs/src/consent-management-platform/lib/sourcepointConfig.ts

@@ -2,7 +2,9 @@ import { isGuardianDomain } from './domain';
 
 export const ACCOUNT_ID = 1257;
 export const PRIVACY_MANAGER_USNAT = 1068329;
-export const PROPERTY_ID = 7417;
+export const PROPERTY_ID_MAIN = 9398;
+export const PROPERTY_ID_SUPPORT = 38161;
+// export const PROPERTY_ID_MAIN = 7417;
 export const PROPERTY_ID_AUSTRALIA = 13348;
 export const PRIVACY_MANAGER_TCFV2 = 106842;
 export const PRIVACY_MANAGER_AUSTRALIA = 1178486;

libs/@guardian/libs/src/consent-management-platform/rejectAll.ts

@@ -0,0 +1,22 @@
+import { getCurrentFramework } from './getCurrentFramework';
+import { invokeCallbacks } from './onConsentChange';
+import { rejectAllForUser } from './tcfv2/api';
+
+const rejectAll = (): Promise<void> =>
+	// Consider jurisdiction/framework and countries.
+	new Promise<void>((resolve, reject) => {
+		console.log('Rejecting all');
+		if (getCurrentFramework() === 'tcfv2') {
+			rejectAllForUser()
+				.then(() => {
+					invokeCallbacks();
+					resolve();
+				})
+				.catch(() => {
+					reject(new Error('Unable to reject all'));
+				});
+		} else {
+			reject(new Error('Framework not supported'));
+		}
+	});
+export { rejectAll };

libs/@guardian/libs/src/consent-management-platform/server.ts

@@ -34,6 +34,7 @@ export const cmp: CMP = {
 	version: 'n/a',
 	willShowPrivacyMessage: serverSideWarnAndReturn(Promise.resolve(false)),
 	willShowPrivacyMessageSync: serverSideWarnAndReturn(false),
+	rejectAll: serverSideWarnAndReturn(Promise.resolve()),
 };
 
 export const onConsent = (): ReturnType<typeof OnConsent> => {

libs/@guardian/libs/src/consent-management-platform/sourcepoint.ts

@@ -6,8 +6,9 @@ import type { Property } from './lib/property';
 import {
 	ACCOUNT_ID,
 	ENDPOINT,
-	PROPERTY_ID,
 	PROPERTY_ID_AUSTRALIA,
+	PROPERTY_ID_MAIN,
+	PROPERTY_ID_SUPPORT,
 	SourcePointChoiceTypes,
 } from './lib/sourcepointConfig';
 import { invokeCallbacks } from './onConsentChange';
@@ -26,21 +27,40 @@ export const willShowPrivacyMessage = new Promise<boolean>((resolve) => {
  * Australia has a single property while the rest of the world has a test and prod property.
  * TODO: incorporate au.theguardian into *.theguardian.com
  */
-const getPropertyHref = (framework: ConsentFramework): Property => {
+const getPropertyHref = (
+	framework: ConsentFramework,
+	isMainSite: boolean = true,
+): Property => {
 	if (framework == 'aus') {
 		return 'https://au.theguardian.com';
 	}
-	return isGuardianDomain() ? null : 'https://test.theguardian.com';
+	// return isGuardianDomain() ? null : 'https://test.theguardian.com';
+	// return isGuardianDomain() ? null : 'http://ui-dev';
+	return isGuardianDomain()
+		? null
+		: isMainSite
+			? 'http://ui-dev'
+			: 'http://support-test';
 };
 
-const getPropertyId = (framework: ConsentFramework): number => {
+const getPropertyId = (
+	framework: ConsentFramework,
+	isMainSite: boolean = true,
+): number => {
 	if (framework == 'aus') {
 		return PROPERTY_ID_AUSTRALIA;
 	}
-	return PROPERTY_ID;
+	if (framework == 'usnat') {
+		return PROPERTY_ID_MAIN;
+	}
+	return isMainSite ? PROPERTY_ID_MAIN : PROPERTY_ID_SUPPORT;
 };
 
-export const init = (framework: ConsentFramework, pubData = {}): void => {
+export const init = (
+	framework: ConsentFramework,
+	pubData = {},
+	subscriber: boolean,
+): void => {
 	stub(framework);
 
 	// make sure nothing else on the page has accidentally
@@ -72,6 +92,9 @@ export const init = (framework: ConsentFramework, pubData = {}): void => {
 		window.guardian?.config?.tests?.useSourcepointPropertyIdVariant ===
 		'variant';
 
+	const isFeatureFlagEnabled = window.location.search.includes('CMP_COP');
+	const isMainSite = window.location.search.includes('CMP_MAIN');
+
 	log('cmp', `framework: ${framework}`);
 	log('cmp', `frameworkMessageType: ${frameworkMessageType}`);
 
@@ -81,10 +104,12 @@ export const init = (framework: ConsentFramework, pubData = {}): void => {
 		config: {
 			baseEndpoint: ENDPOINT,
 			accountId: ACCOUNT_ID,
-			propertyHref: getPropertyHref(framework),
+			propertyId: getPropertyId(framework),
+			propertyHref: getPropertyHref(framework, isMainSite),
 			targetingParams: {
 				framework,
 			},
+			campaignEnv: 'stage',
 			pubData: { ...pubData, cmpInitTimeUtc: new Date().getTime() },
 
 			// ccpa or gdpr object added below
@@ -142,6 +167,18 @@ export const init = (framework: ConsentFramework, pubData = {}): void => {
 						)
 					) {
 						setTimeout(invokeCallbacks, 0);
+
+						if (
+							choiceTypeID === SourcePointChoiceTypes.RejectAll &&
+							message_type === 'gdpr' &&
+							!subscriber &&
+							isFeatureFlagEnabled
+						) {
+							console.log('User has rejected all');
+							window.location.replace(
+								`https://support.theguardian.com/uk/contribute?redirectUrl=${window.location.href}`,
+							);
+						}
 					}
 				},
 				onPrivacyManagerAction: function (message_type, pmData) {
@@ -198,6 +235,8 @@ export const init = (framework: ConsentFramework, pubData = {}): void => {
 			window._sp_.config.gdpr = {
 				targetingParams: {
 					framework,
+					subscriber,
+					isFeatureFlagEnabled,
 				},
 			};
 			break;