Merge 520dff8 into 2abbb97

.changeset/slimy-lobsters-jump.md

@@ -0,0 +1,10 @@
+---
+'@guardian/libs': major
+---
+
+CMP: Implement the Multi-State-Privacy-Agreement in the US
+In this release, we are now providing the **gpp so third party vendors that have migrated will switch to this. The **uspapi will stay for a transitionary period for vendors yet to migrate.
+
+- Adding the window.\_\_gpp stub function in the US region
+- Updating the US framework to use usnat instead of ccpa as a framework
+- Migrated ccpa types/functions to aus.

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

@@ -7,8 +7,8 @@
 		case '#tcfv2':
 			localStorage.setItem('framework', JSON.stringify('tcfv2'));
 			break;
-		case '#ccpa':
-			localStorage.setItem('framework', JSON.stringify('ccpa'));
+		case '#usnat':
+			localStorage.setItem('framework', JSON.stringify('usnat'));
 			break;
 		case '#aus':
 			localStorage.setItem('framework', JSON.stringify('aus'));
@@ -81,7 +81,7 @@
 				country = 'GB';
 				break;
 
-			case 'ccpa':
+			case 'usnat':
 				country = 'US';
 				break;
 
@@ -113,15 +113,15 @@
 			/>
 			in RoW:<strong>TCFv2</strong>
 		</label>
-		<label class={framework == 'ccpa' ? 'selected' : 'none'}>
+		<label class={framework == 'usnat' ? 'selected' : 'none'}>
 			<input
 				type="radio"
-				value="ccpa"
+				value="usnat"
 				bind:group={framework}
 				on:change={setLocation}
 			/>
 			in USA:
-			<strong>CCPA</strong>
+			<strong>USNAT</strong>
 		</label>
 		<label class={framework == 'aus' ? 'selected' : 'none'}>
 			<input

libs/@guardian/libs/cypress/e2e/consent-management-platform/fixtures/sourcepointConfig.js

@@ -1,5 +1,7 @@
 export const ACCOUNT_ID = 1257;
 export const PRIVACY_MANAGER_CCPA = 540252;
 export const PRIVACY_MANAGER_AUSTRALIA = 540341;
+export const PRIVACY_MANAGER_USNAT = 1068329;
+export const PRIVACY_MANAGER_USNAT_SECOND_LAYER = 1129533;
 
 export const ENDPOINT = 'https://cdn.privacy-mgmt.com';

libs/@guardian/libs/cypress/e2e/consent-management-platform/sourcepoint-ccpa.cy.js

@@ -1,11 +1,16 @@
 import 'cypress-wait-until';
-import { ENDPOINT, PRIVACY_MANAGER_CCPA } from './fixtures/sourcepointConfig';
+import {
+	ENDPOINT,
+	PRIVACY_MANAGER_USNAT,
+	PRIVACY_MANAGER_USNAT_SECOND_LAYER,
+} from './fixtures/sourcepointConfig';
 
 const iframeMessage = `[id^="sp_message_iframe_"]`;
-const iframePrivacyManager = `#sp_message_iframe_${PRIVACY_MANAGER_CCPA}`;
+const iframePrivacyManager = `#sp_message_iframe_${PRIVACY_MANAGER_USNAT}`;
+const iframePrivacyManagerSecondLayer = `#sp_message_iframe_${PRIVACY_MANAGER_USNAT_SECOND_LAYER}`;
 
 // TODO add checkbox in UI, default to production
-const url = `/cmp-test-page#ccpa`;
+const url = `/cmp-test-page#usnat`;
 
 const doNotSellIs = (boolean) => {
 	cy.get('[data-donotsell]').should(
@@ -54,7 +59,7 @@ describe('Interaction', () => {
 		doNotSellIs(false);
 	});
 
-	it(`should retract consent when clicking "${buttonTitle}"`, () => {
+	it(`should open privacy manager when clicking "${buttonTitle}"`, () => {
 		cy.visit(url);
 		cy.getIframeBody(iframeMessage)
 			.find(`button[title="${buttonTitle}"]`)
@@ -63,7 +68,12 @@ describe('Interaction', () => {
 		// eslint-disable-next-line cypress/no-unnecessary-waiting -- should we do this?
 		cy.wait(2000);
 
-		doNotSellIs(true);
+		cy.getIframeBody(iframePrivacyManagerSecondLayer)
+			.find(`.sp_choice_type_13`)
+			.should('be.visible')
+			.click();
+
+		doNotSellIs(false);
 	});
 
 	it(`should be able to retract consent`, () => {
@@ -76,13 +86,8 @@ describe('Interaction', () => {
 		cy.getIframeBody(iframePrivacyManager).find('.pm-toggle .off').click();
 
 		cy.getIframeBody(iframePrivacyManager)
-			.find('.sp_choice_type_SAVE_AND_EXIT')
+			.find('.sp_choice_type_SE')
 			.should('be.visible')
 			.click();
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting -- should we do this?
-		cy.wait(2000);
-
-		doNotSellIs(true);
 	});
 });

libs/@guardian/libs/src/consent-management-platform/aus/api.ts

@@ -1,4 +1,4 @@
-import type { CCPAData } from '../types/ccpa';
+import type { AUSData } from '../types/aus';
 
 type Command = 'getUSPData';
 
@@ -16,5 +16,5 @@ const api = (command: Command) =>
 		}
 	});
 
-export const getUSPData = (): Promise<CCPAData> =>
-	api('getUSPData') as Promise<CCPAData>;
+export const getUSPData = (): Promise<AUSData> =>
+	api('getUSPData') as Promise<AUSData>;

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

@@ -2,8 +2,8 @@ import { getCurrentFramework } from './getCurrentFramework';
 import { mark } from './lib/mark';
 import {
 	PRIVACY_MANAGER_AUSTRALIA,
-	PRIVACY_MANAGER_CCPA,
 	PRIVACY_MANAGER_TCFV2,
+	PRIVACY_MANAGER_USNAT,
 } from './lib/sourcepointConfig';
 import {
 	init as initSourcepoint,
@@ -29,8 +29,8 @@ function showPrivacyManager(): void {
 		case 'tcfv2':
 			window._sp_?.gdpr?.loadPrivacyManagerModal?.(PRIVACY_MANAGER_TCFV2);
 			break;
-		case 'ccpa':
-			window._sp_?.ccpa?.loadPrivacyManagerModal?.(PRIVACY_MANAGER_CCPA);
+		case 'usnat':
+			window._sp_?.usnat?.loadPrivacyManagerModal?.(PRIVACY_MANAGER_USNAT);
 			break;
 		case 'aus':
 			window._sp_?.ccpa?.loadPrivacyManagerModal?.(PRIVACY_MANAGER_AUSTRALIA);

libs/@guardian/libs/src/consent-management-platform/getFramework.test.js

@@ -2,7 +2,7 @@ import { getFramework } from './getFramework.ts';
 
 /* cSpell:disable */
 const countries = {
-	ccpa: [['UnitedStates', 'US']],
+	usnat: [['UnitedStates', 'US']],
 	aus: [['Australia', 'AU']],
 	tcfv2: [
 		['Afghanistan', 'AF'],
@@ -259,7 +259,7 @@ const countries = {
 describe('Match countries and framework', () => {
 	describe.each([
 		['AUS', 'aus'],
-		['CCPA', 'ccpa'],
+		['USNAT', 'usnat'],
 		['TCFv2', 'tcfv2'],
 	])('%s', (name, framework) => {
 		it.each(countries[framework])(

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

@@ -5,7 +5,7 @@ export const getFramework = (countryCode: CountryCode): ConsentFramework => {
 	let framework: ConsentFramework;
 	switch (countryCode) {
 		case 'US':
-			framework = 'ccpa';
+			framework = 'usnat';
 			break;
 
 		case 'AU':

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

@@ -90,7 +90,7 @@ describe('hotfix cmp.init', () => {
 	it.each([
 		['GB', 'tcfv2'],
 		['AU', 'aus'],
-		['US', 'ccpa'],
+		['US', 'usnat'],
 		['YT', 'tcfv2'],
 		['FR', 'tcfv2'],
 		['CA', 'tcfv2'],

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

@@ -1,7 +1,7 @@
 import { isGuardianDomain } from './domain';
 
 export const ACCOUNT_ID = 1257;
-export const PRIVACY_MANAGER_CCPA = 540252;
+export const PRIVACY_MANAGER_USNAT = 1068329;
 export const PRIVACY_MANAGER_TCFV2 = 106842;
 export const PRIVACY_MANAGER_AUSTRALIA = 540341;
 

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

@@ -2,8 +2,8 @@ import { onConsent } from './onConsent';
 import { onConsentChange } from './onConsentChange';
 import type { ConsentState, OnConsentChangeCallback } from './types';
 import type { AUSConsentState } from './types/aus';
-import type { CCPAConsentState } from './types/ccpa';
 import type { TCFv2ConsentState } from './types/tcfv2';
+import type { USNATConsentState } from './types/usnat';
 
 jest.mock('./onConsentChange');
 
@@ -18,8 +18,9 @@ const tcfv2ConsentState: TCFv2ConsentState = {
 	tcString: 'YAAA',
 };
 
-const ccpaConsentState: CCPAConsentState = {
+const usnatConsentState: USNATConsentState = {
 	doNotSell: false,
+	signalStatus: 'ready',
 };
 
 const ausConsentState: AUSConsentState = {
@@ -42,9 +43,21 @@ describe('onConsent returns a promise that resolves the initial consent state',
 		const resolvedConsentState = await onConsent();
 		expect(resolvedConsentState).toEqual(consentState);
 	});
+
+	test('usnat', async () => {
+		const consentState: ConsentState = {
+			ccpa: usnatConsentState,
+			canTarget: true,
+			framework: 'usnat',
+		};
+		mockOnConsentChange(consentState);
+		const resolvedConsentState = await onConsent();
+		expect(resolvedConsentState).toEqual(consentState);
+	});
+
 	test('ccpa', async () => {
 		const consentState: ConsentState = {
-			ccpa: ccpaConsentState,
+			ccpa: usnatConsentState,
 			canTarget: true,
 			framework: 'ccpa',
 		};