@osano/osano-cmp-react-native 0.1.0

package/src/iab/usp/consent.js

@@ -0,0 +1,150 @@
+import { doesCCPAApply, getConsentString, getStore } from './selectors';
+import { toBoolFromYesNoUn, toYesNoUnFromBool } from './constants';
+
+import { merge } from '../../utils';
+
+export const makeParseConsentString =
+	({ version: providedVersion = 1 } = {}) =>
+	uspString => {
+		const [version = providedVersion, notified, optOut, signatory] = (
+			uspString || ''
+		)
+			.split('')
+			.map((value, index) => {
+				if (index === 0) {
+					return isNaN(parseInt(value, 10))
+						? providedVersion
+						: parseInt(value, 10);
+				}
+				return toBoolFromYesNoUn(value);
+			});
+		return {
+			version,
+			notified,
+			signatory,
+			optOut,
+		};
+	};
+
+export const makeGetField =
+	(initOptions = {}) =>
+	(state, field) => {
+		const [, notified, optOut, signatory] = getConsentString(
+			state,
+			initOptions,
+		).split('');
+		// These field names were found in the IAB GPP reference implementation
+		// README at
+		// https://github.com/IABTechLab/iabgpp-es/tree/42060d7ac2b6d0ee70fc1b5bcd33fc447bf5123c/modules/cmpapi
+		switch (field) {
+			case 'Version':
+				// This is always going to be 1 until the day this framework is
+				// removed so it's hardcoded
+				return 1;
+			case 'Notice':
+				return notified;
+			case 'OptOutSale':
+				return optOut;
+			case 'LspaCovered':
+				return signatory;
+		}
+	};
+
+/**
+ * USPAPI formatConsentString implementation
+ * @function
+ * @param {Object} data
+ * @returns {string} Properly formatted USPData string
+ */
+export const makeFormatConsentString =
+	(initOptions = {}) =>
+	(data, state) => {
+		const {
+			version: storeVersion,
+			notified: storeNotified,
+			optOut: storeOptOut,
+			signatory: storeSignatory,
+		} = makeParseConsentString(initOptions)(
+			getConsentString(state, initOptions),
+		);
+		const {
+			version = storeVersion,
+			notified = storeNotified,
+			optOut = storeOptOut,
+			signatory = storeSignatory,
+		} = merge(getStore(state), data);
+		const consents = [notified, optOut, signatory];
+		/*
+    if (version !== storeVersion) {
+        // TODO: apply logic for future versions
+    }
+    */
+		return doesCCPAApply(state)
+			? `${parseInt(version.toString(), 10)}${consents
+					.map(toYesNoUnFromBool)
+					.join('')}`
+			: `${parseInt(version.toString(), 10)}---`;
+	};
+
+/**
+ * USPAPI consentFromOptions implementation
+ * @function
+ * @param {Object} data
+ * @returns {import('./constants').USPConsent} Properly formatted USPConsent object
+ */
+export const makeConsentFromOptions = initOptions => (data, state) => {
+	const {
+		version: storeVersion,
+		notified: storeNotified,
+		optOut: storeOptOut,
+		signatory: storeSignatory,
+	} = makeParseConsentString(initOptions)(getConsentString(state, initOptions));
+	/*
+    if (version !== storeVersion) {
+        // TODO: apply logic for future versions
+    }
+    */
+	// We are going to set defaults if CCPA applies
+	const {
+		version = storeVersion,
+		notified = storeNotified,
+		optOut = storeOptOut,
+		signatory = storeSignatory,
+	} = merge(getStore(state), data);
+	return doesCCPAApply(state)
+		? {
+				version,
+				notified,
+				signatory,
+				optOut,
+			}
+		: { version };
+};
+
+/**
+ * USPAPI getConsentDataObject implementation
+ * @function
+ * @param {number} version
+ * @returns {import('./constants').USPData} Properly formatted USPData object
+ */
+export const getConsentDataObject = initOptions => state => {
+	const { version } = initOptions;
+	switch (version) {
+		// Supported versions
+		case 1: {
+			break;
+		}
+
+		default: {
+			throw new Error('Unsupported version');
+		}
+	}
+	const consentString = makeFormatConsentString(initOptions)(
+		makeConsentFromOptions(initOptions)(undefined, state),
+		state,
+	);
+	return {
+		version,
+		uspString: consentString,
+	};
+};

package/src/iab/usp/constants.js

@@ -0,0 +1,40 @@
+/**
+ * USPData object supplied to the __uspapi callback method
+ * @typedef {Object} USPData
+ * @property {number} version - indicates the U.S. Privacy spec version
+ * @property {(number|string)} uspString - Indicates the privacy application and agreement
+ *  - String; agreement: “1YNN”, not applicable: “1---”
+ *  - Number; 1 applies, 0 doesn’t apply, -1 not set
+ */
+
+/**
+ * USPConsent object used for creating the USPData `uspString`
+ * @typedef {Object} USPConsent
+ * @property {number} version - indicates the U.S. Privacy spec version
+ * @property {(Boolean|undefined)} notified - Indicates that the end user has been notified of consent agreement
+ * @property {Boolean} optOut - Indicates that the end user has opted out of data resale
+ * @property {(Boolean|undefined)} signatory - Indicates that the provider has opted into the LSPA from IAB
+ */
+
+/**
+ * USPAPIPostMessageData object
+ * @typedef {Object} USPAPIPostMessageData
+ * @property {string} command - The command to be executed by the API
+ * @property {string} parameter - Optional parameter to be passed to the `command`
+ * @property {number} version - The version number that the response should adhere to
+ * @property {string} callId - The callback method that should be called with the command result
+ */
+
+/**
+ * USPAPIPostMessageEvent object supplied to the __uspapiLocator iframe postMessage handler
+ * @typedef {Object} USPAPIPostMessageEvent
+ * @property {(string|USPAPIPostMessageData)} data - The post message data as object or JSON string
+ * @property {string} origin - Indicates the origin of the window making the post
+ * @property {Window} source - The window which posted the message
+ */
+
+export const toYesNoUnFromBool = b => (b === undefined ? '-' : b ? 'Y' : 'N');
+export const toBoolFromYesNoUn = yn =>
+	yn === '-' || yn === undefined
+		? undefined
+		: !!((yn || 'N').toUpperCase() === 'Y');

package/src/iab/usp/index.js

@@ -0,0 +1,9 @@
+import reducer from './reducer';
+import v1_0 from './v1';
+
+export default {
+	reducer,
+	versions: {
+		v1_0,
+	},
+};

package/src/iab/usp/reducer.js

@@ -0,0 +1,107 @@
+import { ACCEPT, OPT_OUT, originalWindow } from '../../constants';
+import { getSavedConsent, isGPCSupportEnabled } from '../../redux/selectors';
+
+import { types as ActionTypes } from '../../redux/actions';
+import { genericReducer } from '../../redux/helpers';
+import { merge } from '../../utils';
+
+export const initialState = {
+	iab: {
+		usp: {
+			ccpaApplies: false,
+			notified: undefined,
+			signatory: undefined,
+			optOut: false,
+		},
+	},
+};
+
+const updateOptions = (state, options) => {
+	const { config } = options || {};
+	// Country code is getting string replaced, so we pull it from the original state
+	const { config: { jurisdiction: oldJurisdiction } = {} } = state;
+	// Use a provided jurisdiction and default to the original
+	const { jurisdiction = oldJurisdiction } = config || {};
+	const {
+		ccpaApplies: providedCCPA = `${jurisdiction || ''}`
+			.toLowerCase()
+			.substring(0, 2) === 'us',
+	} = config || {};
+
+	const newState = merge(
+		{ ...state },
+		{
+			iab: {
+				usp: {
+					ccpaApplies: providedCCPA,
+				},
+			},
+		},
+	);
+
+	return newState;
+};
+
+const formatOptOut = (state, acceptOrDeny) => {
+	return isGPCSupportEnabled(state)
+		? !!originalWindow.navigator.globalPrivacyControl
+		: acceptOrDeny === ACCEPT || acceptOrDeny === true;
+};
+
+export default genericReducer(initialState, {
+	[ActionTypes.init]: updateOptions,
+	[ActionTypes.updateConfig]: (state, config) =>
+		updateOptions(state, { config }),
+	[ActionTypes.setConsent]: (state, { category, acceptOrDeny }) => {
+		if (typeof category === 'object' && category[`${OPT_OUT}`]) {
+			// Only populate the consent items we are using
+			return merge(
+				{ ...state },
+				{
+					iab: { usp: { optOut: formatOptOut(state, category[`${OPT_OUT}`]) } },
+				},
+			);
+		} else if (typeof category === 'string' && category === OPT_OUT) {
+			return merge(
+				{
+					...state,
+				},
+				{
+					iab: { usp: { optOut: formatOptOut(state, acceptOrDeny) } },
+				},
+			);
+		}
+		return state;
+	},
+	[ActionTypes.revertConsent]: state => {
+		const { [OPT_OUT]: optOut } = getSavedConsent(state) || {};
+		return merge(
+			{
+				...state,
+			},
+			{
+				iab: { usp: { optOut: formatOptOut(state, optOut) } },
+			},
+		);
+	},
+	[ActionTypes.acceptAllConsent]: state =>
+		merge(
+			{
+				...state,
+			},
+			{
+				// Must be opposite because accepting is denying optOut
+				iab: { usp: { optOut: formatOptOut(state, false) } },
+			},
+		),
+	[ActionTypes.denyAllConsent]: state =>
+		merge(
+			{
+				...state,
+			},
+			{
+				// Must be opposite because denying is accepting optOut
+				iab: { usp: { optOut: formatOptOut(state, true) } },
+			},
+		),
+});

package/src/iab/usp/selectors.js

@@ -0,0 +1,31 @@
+import { get } from '../../utils';
+import { isBrowsingFromUS } from '../../redux/selectors';
+import { toYesNoUnFromBool } from './constants';
+
+export const DOMAIN = 'iab.usp';
+
+export const getStore = state => get(state, DOMAIN, {});
+export const doesCCPAApply = state =>
+	!!get(state, 'iab.usp.ccpaApplies', isBrowsingFromUS(state));
+
+export const getConsentString = (
+	state,
+	{ gppSection, version: providedVersion } = {},
+) => {
+	const savedString = get(state, ['iab', 'consentStrings', gppSection]);
+	if (savedString) {
+		return savedString;
+	}
+	const { notified, signatory, optOut } = getStore(state);
+	const consents = [notified, optOut, signatory];
+	const version = isNaN(parseInt(providedVersion, 10))
+		? 1
+		: parseInt(providedVersion, 10);
+
+	return doesCCPAApply(state)
+		? `${parseInt(version.toString(), 10)}${consents
+				.map(toYesNoUnFromBool)
+				.join('')}`
+		: `${parseInt(version.toString(), 10)}---`;
+};
+export const getOptOut = state => getStore(state).optOut;

package/src/iab/usp/types.ts

@@ -0,0 +1,4 @@
+export type Usp = {
+	enabled: boolean;
+	ccpaApplies: boolean;
+};

package/src/iab/usp/v1/constants.js

@@ -0,0 +1,10 @@
+export const apiName = '__uspapi';
+// gppSection is the key in redux state that stores the consent string.
+export const gppSection = 'uspv1';
+export const iframeName = '__uspapiLocator';
+export const version = 1;
+
+export const initOptions = {
+	gppSection,
+	version,
+};

package/src/iab/usp/v1/index.js

@@ -0,0 +1,54 @@
+import { ACCEPT, DENY, OPT_OUT } from '../../../constants';
+import { apiName, gppSection, iframeName, initOptions } from './constants';
+import { makeConsentFromOptions, makeFormatConsentString } from '../consent';
+
+import { types as ActionTypes } from '../../../redux/actions';
+import { getConsent } from '../../../redux/selectors';
+import makeApi from '../api';
+import postMessageEventHandler from '../../iframe';
+import { setConsentData } from '../../actions';
+
+const consentFromOptions = makeConsentFromOptions(initOptions);
+const formatConsentString = makeFormatConsentString(initOptions);
+
+function createMiddleware() {
+	return store => next => action => {
+		const result = next(action);
+		const { type } = action;
+		const state = store.getState();
+		switch (type) {
+			case ActionTypes.saveConsent: {
+				const { [OPT_OUT]: optOut } = getConsent(state);
+				const consentString = formatConsentString(
+					consentFromOptions(
+						{ optOut: optOut === ACCEPT ? true : false },
+						state,
+					),
+					state,
+				);
+				store.dispatch(setConsentData(gppSection, consentString));
+				break;
+			}
+			case ActionTypes.clearConsent: {
+				const consentString = formatConsentString(
+					consentFromOptions({ optOut: DENY }, state),
+					state,
+				);
+				store.dispatch(setConsentData(gppSection, consentString));
+				break;
+			}
+		}
+		return result;
+	};
+}
+
+const v1 = {
+	api: makeApi(initOptions),
+	apiName,
+	createMiddleware,
+	gppSection,
+	iframeName,
+	postMessageEventHandler: postMessageEventHandler(apiName, true),
+};
+
+export default v1;

package/src/iab/utilities.ts

@@ -0,0 +1,17 @@
+import type { GvlUrl, GvlVendor_v2, GvlVendor_v3 } from './types';
+
+export const getLocalizedGvlPrivacyUrl = (
+	vendor: GvlVendor_v2 | GvlVendor_v3,
+	langId = 'en',
+) => {
+	const urlString =
+		(vendor as GvlVendor_v2).policyUrl ??
+		(vendor as GvlVendor_v3)?.urls?.find((gvlUrl: GvlUrl) => {
+			return gvlUrl.langId === langId && gvlUrl.privacy;
+		})?.privacy ??
+		(vendor as GvlVendor_v3).urls?.find((gvlUrl: GvlUrl) => {
+			return gvlUrl.privacy;
+		})?.privacy;
+
+	return urlString ? new URL(urlString) : null;
+};

package/src/index.tsx

@@ -0,0 +1,128 @@
+import type { OsanoAction, OsanoState } from './types/store';
+import {
+	OsanoCategories,
+	getConsent,
+	init,
+	reducer,
+	reload,
+	setLocale,
+	showDialog,
+	showDrawer,
+} from './store';
+import { Platform, UIManager } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { clearConsent, recordConsent } from './services/consent';
+
+import { ConsentCategory } from './constants';
+import { ConsentManager } from './ConsentManager';
+import { ConsentUiBuilder } from './ConsentUiBuilder';
+import type { OsanoProps } from './types';
+import { OsanoPublicContext } from './context';
+import useThunkReducer from './hooks/useThunkReducer';
+
+export { OsanoPublicContext as OsanoContext } from './context';
+
+if (Platform.OS === 'android') {
+	if (UIManager.setLayoutAnimationEnabledExperimental) {
+		UIManager.setLayoutAnimationEnabledExperimental(true);
+	}
+}
+
+export const Osano: React.FunctionComponent<
+	React.PropsWithChildren<OsanoProps>
+> = (props: React.PropsWithChildren<OsanoProps>) => {
+	const { configId, customerId, hideDisclosures = false, onConfigLoadFailure, onConfigLoadSuccess, onLangLoadFailure, onLangLoadSuccess, overrides } = props;
+	const { flavor, iabEnabled } = overrides || {};
+	const consentManager = useRef<ConsentManager>(new ConsentManager(overrides));
+	const [_state, dispatch, getState, addMiddleware, removeMiddleware] =
+		useThunkReducer<OsanoState, OsanoAction>(
+			reducer,
+			{ configId, customerId },
+			init,
+			[],
+		);
+
+	const handleGetConsent = useCallback((category?: ConsentCategory) => {
+		if (typeof category === 'string') {
+			return consentManager.current.hasConsent(category);
+		}
+		return consentManager.current.consent ?? [];
+	}, []);
+
+	const handleRecordConsent = useCallback(() => {
+		return recordConsent(consentManager.current, getConsent(getState()));
+	}, []);
+
+	const handleClearConsent = useCallback(() => {
+		clearConsent(consentManager.current);
+	}, []);
+
+	const handleShowDialog = useCallback(() => {
+		dispatch(showDialog);
+	}, []);
+
+	const handleShowDrawer = useCallback(() => {
+		dispatch(showDrawer);
+	}, []);
+
+	const handleSetLocale = useCallback((value: string) => {
+		if(value) {
+			consentManager.current.translator.load(value, onLangLoadSuccess, onLangLoadFailure).then(() => {
+				dispatch(setLocale(value));
+			});
+		}
+	}, []);
+
+	const handleGetDeviceId = useCallback(() => {
+		return consentManager.current.deviceId;
+	}, []);
+
+	const context = useMemo(() => {
+		consentManager.current
+			.load({ customerId, configId, onConfigLoadSuccess, onConfigLoadFailure, onLangLoadSuccess, onLangLoadFailure})
+			.then(reloadProps => {
+				const { consent = [], ...initProps } = reloadProps;
+				const mappedConsent = OsanoCategories.reduce(
+					(consentMap, category) => {
+						consentMap[`${category}`] = consent.includes(category);
+						return consentMap;
+					},
+					{} as Record<ConsentCategory, boolean | undefined>,
+				);
+				// We need to reset the state when the configId or customerId changes
+				dispatch(reload({ ...initProps, consent: mappedConsent }));
+			})
+			.catch(() => {
+				// TODO: Handle error
+			});
+		return {
+			locale: consentManager.current.translator.locale,
+			getConsent: handleGetConsent,
+			getDeviceId: handleGetDeviceId,
+			recordConsent: handleRecordConsent,
+			clearConsent: handleClearConsent,
+			setLocale: handleSetLocale,
+			showBanner: handleShowDialog,
+			showDrawer: handleShowDrawer,
+		};
+	}, [configId, customerId, consentManager.current.translator.locale]);
+
+	useEffect(() => {
+		consentManager.current.config.type = flavor;
+		consentManager.current.config.iabEnabled = iabEnabled;
+	}, [flavor, iabEnabled]);
+
+	return (
+		<OsanoPublicContext.Provider value={context}>
+			{props.children}
+			<ConsentUiBuilder
+				addMiddleware={addMiddleware}
+				removeMiddleware={removeMiddleware}
+				dispatch={dispatch}
+				getState={getState}
+				cmp={consentManager}
+				hideDisclosures={hideDisclosures}
+			/>
+		</OsanoPublicContext.Provider>
+	);
+};