Merge 4a8efab into 3a93d78

.changeset/breezy-drinks-live.md

@@ -0,0 +1,9 @@
+---
+'@guardian/libs': major
+---
+
+- Add the ability for consent or pay by adding two new params, useNonAdvertisingList and isUsedSignedIn to cmp.init
+- Using Sourcepoint Subdomain property if useNonAdvertisedList is true
+- Merging user consent from Advertising to Non-Advertising vendor list
+- Redirecting user to Support when clicking Reject for Consent or Pay users
+- Extending \_\_tcfapi to postCustomConsent as part of merging user consent process.

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

@@ -3,6 +3,9 @@
 	import { cmp, onConsentChange, log } from '@guardian/libs';
 	import { onMount } from 'svelte';
 
+	let useNonAdvertisedList = window.location.search.includes('NON_ADV');
+	let isUserSignedIn = window.location.search.includes('SIGNED_IN');
+
 	switch (window.location.hash) {
 		case '#tcfv2':
 			localStorage.setItem('framework', JSON.stringify('tcfv2'));
@@ -37,11 +40,22 @@
 		log('cmp', event);
 	}
 
+	let setABTest = () => {
+		localStorage.setItem('gu.ab.participations', JSON.stringify({
+			value: {
+				ConsentOrPayBanner: {
+					variant: 'activate',
+				},
+			}
+		}));
+	}
+
 	let clearPreferences = () => {
 		// clear local storage
 		// https://documentation.sourcepoint.com/web-implementation/general/cookies-and-local-storage#cmp-local-storage
 		localStorage.clear();
 
+		setABTest();
 		// clear cookies
 		// https://documentation.sourcepoint.com/web-implementation/general/cookies-and-local-storage#cmp-cookies
 		document.cookie.split(';').forEach((cookie) => {
@@ -52,6 +66,29 @@
 		window.location.reload();
 	};
 
+	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 toggleIsFeatureFlagEnabled = () => {
+		isFeatureFlagEnabled = !isFeatureFlagEnabled;
+		toggleQueryParams('CMP_COP');
+	};
+
+	const toggleIsUserSignedIn = () => {
+		isUserSignedIn = !isUserSignedIn;
+		toggleQueryParams('SIGNED_IN');
+	};
+
+	const toggleUseNonAdvertisedList = () => {
+		useNonAdvertisedList = !useNonAdvertisedList;
+		toggleQueryParams('NON_ADV');
+	};
+
 	let framework = JSON.parse(localStorage.getItem('framework'));
 
 	let setLocation = () => {
@@ -90,11 +127,11 @@
 				break;
 		}
 
-		// 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,
+			isUserSignedIn: isUserSignedIn,
+			useNonAdvertisedList: useNonAdvertisedList,
+		});
 	});
 </script>
 
@@ -104,6 +141,7 @@
 			>open privacy manager</button
 		>
 		<button on:click={clearPreferences}>clear preferences</button>
+		<button on:click={setABTest}>set ab test</button>
 		<label class={framework == 'tcfv2' ? 'selected' : 'none'}>
 			<input
 				type="radio"
@@ -133,6 +171,22 @@
 			in Australia:
 			<strong>CCPA-like</strong>
 		</label>
+		<label class={useNonAdvertisedList ? 'selected' : 'none'}>
+			<input
+				type="checkbox"
+				on:change={toggleUseNonAdvertisedList}
+				checked={useNonAdvertisedList}
+			/>
+			<strong>useNonAdvertisedList?</strong>
+		</label>
+		<label class={isUserSignedIn ? 'selected' : 'none'}>
+			<input
+				type="checkbox"
+				on:change={toggleIsUserSignedIn}
+				checked={isUserSignedIn}
+			/>
+			<strong>isUserSignedIn?</strong>
+		</label>
 	</nav>
 
 	<div id="consent-state">