Add toggle for main site/support

guardian · Jan 9, 2025 · 59c2dbf · 59c2dbf
1 parent f41fb85
commit 59c2dbf
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
diff --git a/apps/github-pages/src/components/CmpTest.svelte b/apps/github-pages/src/components/CmpTest.svelte
@@ -6,7 +6,8 @@
 
 	let subscriber = window.location.search.includes('subscriber');
 	let isFeatureFlagEnabled = window.location.search.includes('CMP_COP');
-	// localStorage.setItem('subscriber', window.location.search.includes('subscriber'));
+	let isMainSite = window.location.search.includes('CMP_MAIN');
+	// localStorage.setItem('subscribed', window.location.search.includes('subscribed'));
 
 	switch (window.location.hash) {
 		case '#tcfv2':
@@ -72,23 +73,28 @@
 		clearPreferences();
 	};
 
-	const toggleSubscriber = () => {
-		subscriber = !subscriber;
-		toggleQueryParams('subscriber');
-		localStorage.setItem('subscriber', JSON.stringify(subscriber));
-	};
-
 	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 = [];
 
@@ -160,6 +166,16 @@
 			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"

diff --git a/libs/@guardian/libs/src/consent-management-platform/lib/sourcepointConfig.ts b/libs/@guardian/libs/src/consent-management-platform/lib/sourcepointConfig.ts
@@ -2,8 +2,9 @@ import { isGuardianDomain } from './domain';
 
 export const ACCOUNT_ID = 1257;
 export const PRIVACY_MANAGER_USNAT = 1068329;
-export const PROPERTY_ID = 9398;
-// 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;

diff --git a/libs/@guardian/libs/src/consent-management-platform/sourcepoint.ts b/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,19 +27,33 @@ 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 : 'http://ui-dev';
+	// 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 = (
@@ -78,6 +93,7 @@ export const init = (
 		'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}`);
@@ -88,8 +104,8 @@ export const init = (
 		config: {
 			baseEndpoint: ENDPOINT,
 			accountId: ACCOUNT_ID,
-			propertyHref: getPropertyHref(framework),
 			propertyId: getPropertyId(framework),
+			propertyHref: getPropertyHref(framework, isMainSite),
 			targetingParams: {
 				framework,
 			},