@osano/osano-cmp-react-native 0.1.0 → 0.3.0

package/src/reducer.ts

@@ -0,0 +1,414 @@
+import {
+	CLEAR_CONSENT,
+	CLOSE,
+	FETCH_DISCLOSURES_BEGIN,
+	FETCH_DISCLOSURES_FAILURE,
+	FETCH_DISCLOSURES_SUCCESS,
+	GO_BACK,
+	RELOAD,
+	REVERT_CONSENT,
+	SAVE_SUCCESS,
+	SET_ALL_CONSENT,
+	SET_CONFIG,
+	SET_LOCALE,
+	SHOW_DIALOG,
+	SHOW_DRAWER,
+	SHOW_IAB_DISCLOSURES,
+	SHOW_IAB_VENDORS,
+	TOGGLE_CATEGORY,
+} from './actions';
+import {
+	ConsentCategory,
+	ConsentCategory as ConsentCategoryType,
+} from './constants';
+import { ConsentConfig, ConsentManager } from './ConsentManager';
+import type { Disclosure, OsanoAction, OsanoState } from './types/store';
+import { getFinalOptOutValue, getSavedConsent } from './iab/tcf/selectors';
+import { isAnalyticsAlwaysAllowed, shouldUseGPCOptOut } from './selectors';
+
+export const OsanoCategories = Object.values(ConsentCategory);
+
+export const initialState: OsanoState = {
+	config: undefined,
+	configId: '',
+	consent: {
+		[ConsentCategory.ESSENTIAL]: true,
+		[ConsentCategory.STORAGE]: false,
+		[ConsentCategory.MARKETING]: false,
+		[ConsentCategory.PERSONALIZATION]: false,
+		[ConsentCategory.ANALYTICS]: false,
+		[ConsentCategory.OPT_OUT]: false,
+	} as Record<ConsentCategoryType, boolean | undefined>,
+	consentTimestamp: 0,
+	customerId: '',
+	dialogOpen: false,
+	disclosures: {
+		fetched: [],
+		loading: false,
+		results: {},
+	},
+	locale: 'en',
+	ready: {
+		consent: false,
+	},
+	savedConsent: null,
+	scrollToType: '',
+	scrollToId: -1,
+	stack: [],
+};
+
+export const init = (initialArgs: OsanoState & any): OsanoState => {
+	const { consent, ...reloadProps } = initialArgs;
+	return {
+		...initialState,
+		...reloadProps,
+		consent: consent
+			? Array.isArray(consent)
+				? OsanoCategories.reduce(
+						(newConsent, category) => {
+							newConsent[`${category}`] = consent.includes(category);
+							return newConsent;
+						},
+						{} as Record<ConsentCategoryType, boolean | undefined>
+					)
+				: { ...consent }
+			: initialState.consent,
+	};
+};
+
+const setAllConsent = (acceptOrDeny: boolean) => (state: OsanoState) => {
+	function formatStatus(category: ConsentCategoryType, status: boolean) {
+		const useGPC = shouldUseGPCOptOut(state, !status);
+		switch (category) {
+			case 'ESSENTIAL': {
+				return true;
+			}
+			case 'OPT_OUT': {
+				// This is inverted because we would assume consent to all would be DENY for OPT_OUT
+				return useGPC || !status;
+			}
+			case 'MARKETING': {
+				// Never set marketing to true if GPC is detected
+				return status && !useGPC;
+			}
+		}
+		return status;
+	}
+	const newConsent = OsanoCategories.reduce(
+		(consent, category) => {
+			const status = formatStatus(category, acceptOrDeny);
+			consent[`${category}`] = status;
+			return consent;
+		},
+		{} as Record<ConsentCategoryType, boolean | undefined>
+	);
+	return {
+		...state,
+		consent: newConsent as Record<ConsentCategoryType, boolean | undefined>,
+	};
+};
+
+export function reducer(state: OsanoState, action: OsanoAction): OsanoState {
+	switch (action.type) {
+		case RELOAD:
+			return init(action.payload);
+		case SET_CONFIG: {
+			const { config, customerId, configId } = action.payload;
+			const consentConfig: ConsentConfig = config;
+			// Validate that this is the correct config for this customer.
+			if (
+				consentConfig.customerId !== customerId ||
+				consentConfig.configId !== configId
+			) {
+				return state;
+			}
+			return init({
+				...state,
+				config: consentConfig,
+				configId,
+				customerId,
+			});
+		}
+		case SET_LOCALE:
+			return {
+				...state,
+				locale: action.payload,
+			};
+		case SAVE_SUCCESS: {
+			const consentedCategories: ConsentCategoryType[] = action.payload;
+			const consent = OsanoCategories.reduce(
+				(consent, category) => {
+					consent[`${category}`] = consentedCategories.includes(category);
+					return consent;
+				},
+				{} as Record<ConsentCategoryType, boolean>
+			);
+
+			consent[ConsentCategory.ESSENTIAL] = true;
+			if (consent[ConsentCategory.OPT_OUT]) {
+				consent[ConsentCategory.MARKETING] = false;
+			}
+			return {
+				...state,
+				consent,
+				savedConsent: { ...consent },
+				stack: [],
+			};
+		}
+		case CLEAR_CONSENT: {
+			const optOutStatus = getFinalOptOutValue(
+				state,
+				initialState.consent[ConsentCategory.OPT_OUT]
+			);
+
+			return {
+				...state,
+				consent: {
+					...initialState.consent,
+					[ConsentCategory.OPT_OUT]: optOutStatus,
+					[ConsentCategory.ANALYTICS]: isAnalyticsAlwaysAllowed(state)
+						? true
+						: false,
+				},
+				consentTimestamp: 0,
+				savedConsent: initialState.savedConsent,
+			};
+		}
+		case REVERT_CONSENT: {
+			const previousConsent = {
+				...(getSavedConsent(state) || initialState.consent),
+			};
+			if (!getSavedConsent(state)) {
+				previousConsent[ConsentCategory.OPT_OUT] = getFinalOptOutValue(
+					state,
+					previousConsent[ConsentCategory.OPT_OUT]
+				);
+				previousConsent[ConsentCategory.ANALYTICS] = isAnalyticsAlwaysAllowed(
+					state
+				)
+					? true
+					: false;
+			}
+			return {
+				...state,
+				consent: previousConsent,
+			};
+		}
+		case SET_ALL_CONSENT: {
+			const acceptOrDeny = action.payload;
+			return setAllConsent(acceptOrDeny)(state);
+		}
+		case TOGGLE_CATEGORY: {
+			const { category, value } = action.payload;
+			if (typeof category !== 'string') {
+				return state;
+			}
+
+			// don't turn MARKETING on if OPT_OUT is already on
+			if (
+				category === ConsentCategory.MARKETING &&
+				state.consent[ConsentCategory.OPT_OUT] === true
+			) {
+				return state;
+			}
+
+			// turn MARKETING off if turning on OPT_OUT
+			if (
+				category === ConsentCategory.OPT_OUT &&
+				value === true &&
+				state.consent[ConsentCategory.MARKETING]
+			) {
+				return {
+					...state,
+					consent: {
+						...state.consent,
+						[ConsentCategory.MARKETING]: false,
+						[category as ConsentCategoryType]: value,
+					},
+				};
+			}
+
+			if (typeof value === 'boolean') {
+				return {
+					...state,
+					consent: {
+						...state.consent,
+						[category as ConsentCategoryType]: value,
+					},
+				};
+			}
+			if (state.consent[category as ConsentCategoryType] !== undefined) {
+				return {
+					...state,
+					consent: {
+						...state.consent,
+						[category as ConsentCategoryType]:
+							!state.consent[category as ConsentCategoryType],
+					},
+				};
+			}
+			return {
+				...state,
+				consent: {
+					...state.consent,
+					[category as ConsentCategoryType]: true,
+				},
+			};
+		}
+		case SHOW_DIALOG:
+			return {
+				...state,
+				dialogOpen: true,
+				stack: [],
+			};
+		case SHOW_DRAWER:
+			return {
+				...state,
+				stack: [action.type],
+			};
+		case SHOW_IAB_DISCLOSURES:
+			return {
+				...state,
+				scrollToType: (action.payload?.id && action.payload?.type) || '',
+				scrollToId: (action.payload?.type && action.payload?.id) || -1,
+				stack: [...state.stack, action.type],
+			};
+		case SHOW_IAB_VENDORS:
+			return {
+				...state,
+				scrollToType: (action.payload?.id && 'vendor') || '',
+				scrollToId: action.payload?.id || -1,
+				stack: [...state.stack, action.type],
+			};
+		case GO_BACK: {
+			if (state.stack.length === 1) {
+				return {
+					...state,
+					stack: [],
+				};
+			}
+			return {
+				...state,
+				stack: state.stack.slice(0, state.stack.length - 1),
+			};
+		}
+		case CLOSE: {
+			const cmp = action.payload as ConsentManager;
+			const consent = Object.keys(state.consent).reduce(
+				(newConsent, category) => {
+					newConsent[`${category as ConsentCategoryType}`] =
+						cmp.consent?.includes(category as ConsentCategoryType);
+					return newConsent;
+				},
+				{} as Record<ConsentCategoryType, boolean | undefined>
+			);
+			if (state.stack.length > 0) {
+				return {
+					...state,
+					consent,
+					stack: [],
+				};
+			}
+			return {
+				...state,
+				dialogOpen: false,
+				consent,
+				stack: [],
+			};
+		}
+		case FETCH_DISCLOSURES_BEGIN: {
+			const category = action.payload;
+			return {
+				...state,
+				disclosures: {
+					...state.disclosures,
+					loading:
+						state.disclosures.fetched.indexOf(category) >= 0 ? false : true,
+				},
+			};
+		}
+		case FETCH_DISCLOSURES_FAILURE: {
+			const { category } = action.payload;
+			return {
+				...state,
+				disclosures: {
+					...state.disclosures,
+					loading: false,
+					fetched: state.disclosures.fetched.filter((cat) => cat !== category),
+				},
+			};
+		}
+		case FETCH_DISCLOSURES_SUCCESS: {
+			const {
+				disclosures,
+				category,
+			}: { disclosures: Disclosure[]; category: ConsentCategoryType } =
+				action.payload;
+			const {
+				disclosures: { results, fetched: currentlyFetched = [] },
+			} = state;
+			const fetched = category
+				? [...currentlyFetched]
+				: Object.values(ConsentCategory);
+			const disclosuresByCategory: Partial<
+				Record<ConsentCategoryType, Disclosure[]>
+			> = disclosures.reduce<
+				Partial<Record<ConsentCategoryType, Disclosure[]>>
+			>(
+				(
+					categories: Partial<Record<ConsentCategoryType, Disclosure[]>>,
+					disclosure: Disclosure
+				) => {
+					const { classification: categoryName } = disclosure || {};
+					if (!disclosure || !categoryName) {
+						return categories;
+					}
+					const categoryDisclosures =
+						categories[`${categoryName as ConsentCategoryType}`] || [];
+					categories[`${categoryName as ConsentCategoryType}`] =
+						categoryDisclosures;
+					categoryDisclosures.push({ type: 'cookie', ...disclosure });
+					return categories;
+				},
+				{ ...results }
+			);
+			const newResults = Object.entries(disclosuresByCategory)
+				.filter(([cat]) => fetched.push(cat as ConsentCategoryType))
+				.reduce(
+					(validCategories, [cat, categoryDisclosures]) => {
+						const lookup: Record<string, boolean> = {};
+						validCategories[`${cat as ConsentCategoryType}`] =
+							categoryDisclosures
+								.filter((disclosure) => {
+									if (!disclosure) {
+										return false;
+									}
+									const { name, type = 'cookie' } = disclosure;
+									const uuid = `${type}:${name}`;
+									return !lookup[`${uuid}`]
+										? ((lookup[`${uuid}`] = true), true)
+										: false;
+								})
+								.sort((a, b) =>
+									`${a.type}:${a.name}`.localeCompare(`${b.type}:${b.name}`)
+								);
+						return validCategories;
+					},
+					{} as Record<ConsentCategoryType, Disclosure[]>
+				);
+			return {
+				...state,
+				disclosures: {
+					...state.disclosures,
+					results: newResults,
+					fetched: fetched.filter(
+						(cat, index, list) => list.indexOf(cat) === index
+					),
+					loading: false,
+				},
+			};
+		}
+		default:
+			return state;
+	}
+}

package/src/selectors.ts

@@ -0,0 +1,109 @@
+// @ts-nocheck
+import {
+	ConsentCategory,
+	ConsentCategory as ConsentCategoryType,
+} from './constants';
+import type { Disclosure, OsanoState } from './types/store';
+
+import { get } from './utils';
+
+export const isCategoryAccepted = (
+	state: OsanoState,
+	category: ConsentCategoryType,
+) => getConsent(state).includes(category);
+
+export const isAnalyticsAlwaysAllowed = (state: OsanoState) =>
+	!!state.config?.type.analyticsAlways;
+export const isCategoryDisabled = (
+	state: OsanoState,
+	category: ConsentCategoryType,
+) =>
+	category === ConsentCategory.ESSENTIAL ||
+	(category === ConsentCategory.OPT_OUT && isGPCSupportEnabled(state)) ||
+	(category === ConsentCategory.MARKETING &&
+		(state.config?.shouldRenderOptOut || isGPCSupportEnabled(state)) &&
+		isCategoryAccepted(state, ConsentCategory.OPT_OUT));
+
+export const isDrawerOpen = (state: OsanoState) => state.stack.length > 0;
+export const isDialogOpen = (state: OsanoState) =>
+	state.dialogOpen && !isDrawerOpen(state);
+
+export const isGPCSupportEnabled = (state: OsanoState) =>
+	!!state.config?.gpcSupport &&
+	// Native browser support uses Navigator.prototype
+	(Object.hasOwnProperty.call(navigator, 'globalPrivacyControl') ||
+		// Browser extension support uses the Navigator instance on window
+		Object.hasOwnProperty.call(window?.navigator, 'globalPrivacyControl'));
+export const shouldUseGPCOptOut = (state: OsanoState, acceptOrDeny: boolean) =>
+	isGPCSupportEnabled(state)
+		? Object.hasOwn(window.navigator, 'globalPrivacyControl')
+			? true
+			: false
+		: acceptOrDeny;
+
+export function getConsent(state: OsanoState): ConsentCategoryType[];
+export function getConsent(
+	state: OsanoState,
+	category: ConsentCategoryType,
+): boolean;
+export function getConsent(state: OsanoState, category?: ConsentCategoryType) {
+	if (typeof category === 'string') {
+		return state.consent[category];
+	}
+	return Object.entries(state.consent)
+		.filter(([_key, value]) => value)
+		.map(([key]) => key);
+}
+export const getConsentTimestamp = (state: OsanoState): number =>
+	get(state, 'consentTimestamp') || 0;
+
+// Array Constants for common disclosures
+const loadingDisclosures: Disclosure[] = [];
+const noDisclosures: Disclosure[] = [
+	{ type: 'no-results', name: 'disclosure.none' },
+];
+
+export const isConsentReady = (state: OsanoState) =>
+	get(state, 'ready.consent'); // ReadyState could be a consent object
+export const isLoadingDisclosures = (state: OsanoState) => {
+	return state.disclosures.loading;
+};
+export const hasFetchedDisclosuresForCategory = (
+	state: OsanoState,
+	category: ConsentCategoryType,
+) => {
+	const fetched = category ? state.disclosures.fetched || [] : [];
+	if (fetched.indexOf(category) >= 0) {
+		return true;
+	}
+	return false;
+};
+export const getCategoryDisclosures = (
+	state: OsanoState,
+	category: ConsentCategoryType,
+): Disclosure[] => {
+	const disclosures: Disclosure[] =
+		get(state, `disclosures.results.${category}`) || [];
+	if (disclosures.length) {
+		return disclosures;
+	}
+	const loading =
+		isLoadingDisclosures(state) &&
+		!hasFetchedDisclosuresForCategory(state, category);
+	return loading ? loadingDisclosures : noDisclosures;
+};
+
+export function getStack(state: OsanoState): string[];
+export function getStack(state: OsanoState, index: number): string | undefined;
+export function getStack(state: OsanoState, index?: number) {
+	if (typeof index === 'number') {
+		if (index < 0) {
+			if (index >= -state.stack.length) {
+				return state.stack[state.stack.length + index];
+			}
+			return undefined;
+		}
+		return state.stack[index];
+	}
+	return state.stack;
+}

package/src/services/consent.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // file deepcode ignore DuplicateCaseBody: <please specify a reason of ignoring this>
 import { env } from '../constants';
 import { Platform } from 'react-native';
@@ -53,37 +54,46 @@ const storeConsent = async (
 	consent?: ConsentCategoryType[],
 ) => {
 	cmp.consent = consent ?? cmp.consent;
-	return new Promise<ConsentCategoryType[]>(resolve => {
-		const resConsent = () => resolve(cmp.consent ?? []);
+	return new Promise<ConsentCategoryType[]>((resolve, reject) => {
+		const resConsent = () => {
+			resolve(cmp.consent ?? []);
+			return cmp.consent;
+		};
 		switch (Platform.OS) {
 			case 'ios':
 			case 'android':
 				setStorage(
 					`${STORAGE_KEY}_${cmp.configId}`,
 					JSON.stringify(cmp.consent),
-				).then(resConsent);
+				)
+					.then(resConsent)
+					.catch(reject);
 				break;
 		}
 	});
 };
 
 export const clearConsent = async (cmp: ConsentManager) => {
-	return new Promise<ConsentCategoryType[]>(resolve => {
+	return new Promise<ConsentCategoryType[]>((resolve) => {
 		const resConsent = () => {
 			cmp.consent = [ConsentCategory.ESSENTIAL];
 			resolve([ConsentCategory.ESSENTIAL]);
+			return cmp.consent;
 		};
 		switch (Platform.OS) {
 			case 'android':
 			case 'ios':
 				clearStorage(`${STORAGE_KEY}_${cmp.configId}`).then(resConsent);
 				break;
+			default:
+				window.localStorage.removeItem(`${STORAGE_KEY}_${cmp.configId}`);
+				break;
 		}
 	});
 };
 
 const retrieveConsent = async (cmp: ConsentManager) => {
-	return new Promise<ConsentCategoryType[]>(resolve => {
+	return new Promise<ConsentCategoryType[]>((resolve) => {
 		const resConsent = (consentJson: string | null | undefined) => {
 			if (consentJson) {
 				const consent = JSON.parse(consentJson) as ConsentCategoryType[];
@@ -93,6 +103,7 @@ const retrieveConsent = async (cmp: ConsentManager) => {
 			}
 			if (cmp.consent && cmp.consent.length > 0) {
 				resolve(cmp.consent);
+				return cmp.consent;
 			}
 			throw new Error('Consent not found');
 		};
@@ -103,9 +114,18 @@ const retrieveConsent = async (cmp: ConsentManager) => {
 					.then(resConsent)
 					.catch(() => {
 						// Consent not found
-						resolve([]);
+						clearConsent(cmp).then(resolve);
 					});
 				break;
+			default:
+				try {
+					resConsent(
+						window.localStorage.getItem(`${STORAGE_KEY}_${cmp.configId}`),
+					);
+				} catch (e) {
+					clearConsent(cmp).then(resolve);
+				}
+				break;
 		}
 	});
 };
@@ -117,8 +137,8 @@ export const recordConsent = (
 	const payload = createConsentPayload(cmp, consent);
 	return API.post(`${CONSENT_URI}/record`, createConsentPayload(cmp, consent))
 		.then(() => payload.consented ?? cmp.consent)
-		.then(consentCategories => storeConsent(cmp, consentCategories))
-		.catch(error => {
+		.then((consentCategories) => storeConsent(cmp, consentCategories))
+		.catch((error) => {
 			// Cannot record consent
 			throw error;
 		});
@@ -131,11 +151,11 @@ export const fetchConsent = (cmp: ConsentManager) => {
 		return API.get(
 			`${LOOKUPS_URI}/customer/${customerId}/config/${configId}/user/${userData}/consent`,
 		)
-			.then(response => {
+			.then((response) => {
 				const { consent } = response as { consent: ConsentCategoryType[] };
 				return consent;
 			})
-			.then(consent => storeConsent(cmp, consent))
+			.then((consent) => storeConsent(cmp, consent))
 			.catch(() => {
 				// Consent not found or network/server error
 				return retrieveConsent(cmp);
@@ -145,8 +165,11 @@ export const fetchConsent = (cmp: ConsentManager) => {
 
 export const fetchConfig = (customerId: string, configId: string) => {
 	return API.get(`${OSANO_ORIGIN}/${customerId}/${configId}/config.json`, true)
-		.then(response => {
-			const { headers, json } = response as { json: Config; headers: Headers };
+		.then((response) => {
+			const { headers, json } = response as {
+				json: Config;
+				headers: Headers;
+			};
 			return merge(
 				{
 					...json,

package/src/styles.ts

@@ -1,3 +1,4 @@
+import { ConsentConfig, DEFAULT_CONFIG } from './ConsentManager';
 import { Platform, StyleSheet } from 'react-native';
 import {
 	contrastRgb,
@@ -7,9 +8,6 @@ import {
 	parseColor,
 } from './utils/Color';
 
-import type { Config } from './types/consent-config';
-import { DEFAULT_CONFIG } from './ConsentManager';
-
 type ColorLookupTableType = [
 	color: [r: number, g: number, b: number, a?: number],
 	contrast?: number,
@@ -32,7 +30,7 @@ const lookupColor = (color: string) => {
 
 export const createContrastColor = (
 	color: string,
-	amount = ARIA_CONTRAST_AMOUNT,
+	amount = ARIA_CONTRAST_AMOUNT
 ) => {
 	const [, contrast] = lookupColor(color);
 	return (amount < 0 ? !contrast : contrast)
@@ -40,7 +38,7 @@ export const createContrastColor = (
 		: darken(color, Math.abs(amount));
 };
 
-export const createSharedStyles = (config?: Config) => {
+export const createSharedStyles = (config?: ConsentConfig) => {
 	const {
 		buttonBackgroundColor,
 		buttonForegroundColor,