@osano/osano-cmp-react-native 0.1.0

package/src/store.ts

@@ -0,0 +1,602 @@
+import {
+	ConsentCategory,
+	ConsentCategory as ConsentCategoryType,
+} from './constants';
+import { ConsentConfig, ConsentManager } from './ConsentManager';
+import type { Disclosure, OsanoAction, OsanoState } from './types/store';
+import { get, merge } from './utils';
+
+import type { AsyncAction } from './hooks/useThunkReducer';
+import { fetchDisclosures } from './services/disclosures';
+import { recordConsent } from './services/consent';
+
+export type GenericCommand<T> = (
+	payload?: T
+) => AsyncAction<OsanoState, OsanoAction>;
+
+export type ConfigUpdateCommand = {
+	config: ConsentConfig;
+	customerId: string;
+	configId: string;
+};
+
+export const OsanoCategories = Object.values(ConsentCategory);
+
+export const SHOW_DIALOG = 'DIALOG';
+export const SHOW_DRAWER = 'DRAWER';
+export const SHOW_IAB_DISCLOSURES = 'IAB_DISCLOSURES';
+export const SHOW_IAB_VENDORS = 'IAB_VENDORS';
+
+const CLOSE = 'CLOSE';
+const GO_BACK = 'GO_BACK';
+const RELOAD = 'RELOAD';
+const SET_LOCALE = 'SET_LOCALE';
+const SAVE_BEGIN = '@async-SAVE-begin';
+const SAVE_SUCCESS = 'SAVE_SUCCESS';
+const SAVE_FAILURE = 'SAVE_FAILURE';
+const TOGGLE_CATEGORY = 'TOGGLE_CATEGORY';
+const SET_ALL_CONSENT = 'SET_ALL_CONSENT';
+const FETCH_DISCLOSURES_BEGIN = 'FETCH_DISCLOSURES_BEGIN';
+const FETCH_DISCLOSURES_SUCCESS = 'FETCH_DISCLOSURES_SUCCESS';
+const FETCH_DISCLOSURES_FAILURE = 'FETCH_DISCLOSURES_FAILURE';
+
+const SET_CONFIG = 'SET_CONFIG';
+
+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>,
+	customerId: '',
+	dialogOpen: false,
+	disclosures: {
+		fetched: [],
+		loading: false,
+		results: {},
+	},
+	locale: 'en',
+	scrollToType: '',
+	scrollToId: -1,
+	stack: [],
+};
+
+export const init = (initialArgs: OsanoState & any): OsanoState => {
+	const newState = merge(initialState, initialArgs) as OsanoState;
+	return newState;
+};
+
+const setAllConsent = (acceptOrDeny: boolean) => (state: OsanoState) => {
+	function formatStatus(category: ConsentCategoryType, status: boolean) {
+		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 shouldUseGPCOptOut(state, !status) || !status;
+			}
+			case 'MARKETING': {
+				// Never set marketing to true if OPT_OUT is true
+				return status && !state.consent[ConsentCategory.OPT_OUT];
+			}
+		}
+		return status;
+	}
+	return {
+		...state,
+		consent: {
+			...state.consent,
+			...OsanoCategories.reduce(
+				(consent, category) => {
+					const status = formatStatus(category, acceptOrDeny);
+					if (status) {
+						consent[`${category}`] = status;
+					}
+					return consent;
+				},
+				{} as Record<ConsentCategoryType, boolean | undefined>
+			),
+		} 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,
+			});
+		}
+		case SET_LOCALE:
+			return {
+				...state,
+				locale: action.payload,
+			};
+		case SAVE_SUCCESS: {
+			const consentedCategories: ConsentCategoryType[] = action.payload;
+			return {
+				...state,
+				consent: OsanoCategories.reduce(
+					(consent, category) => {
+						consent[`${category}`] =
+							consentedCategories.includes(category);
+						return consent;
+					},
+					{} as Record<ConsentCategoryType, boolean | undefined>
+				),
+				dialogOpen: false,
+				stack: [],
+			};
+		}
+		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;
+	}
+}
+
+// THUNK COMMANDS
+
+export const reload: GenericCommand<OsanoState & any> =
+	(initialArgs) => (dispatch) => {
+		dispatch({ type: RELOAD, payload: init(initialArgs) });
+	};
+
+export const showDialog: AsyncAction<OsanoState, OsanoAction> = (dispatch) =>
+	dispatch({ type: SHOW_DIALOG });
+
+export const showDrawer: AsyncAction<OsanoState, OsanoAction> = (dispatch) => {
+	// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+	dispatch({ type: SHOW_DRAWER });
+};
+
+export const setLocale: GenericCommand<string> = (payload) => (dispatch) => {
+	dispatch({ type: SET_LOCALE, payload });
+};
+
+export const setConfig: GenericCommand<ConfigUpdateCommand> =
+	(payload) => (dispatch) => {
+		dispatch({ type: SET_CONFIG, payload });
+	};
+
+export const showIabDisclosures: GenericCommand<any> =
+	(payload) => (dispatch) => {
+		// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+		dispatch({ type: SHOW_IAB_DISCLOSURES, payload });
+	};
+
+export const showIabVendors: GenericCommand<any> = (payload) => (dispatch) => {
+	// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+	dispatch({ type: SHOW_IAB_VENDORS, payload });
+};
+
+export const toggleCategory: GenericCommand<any> = (payload) => (dispatch) =>
+	dispatch({ type: TOGGLE_CATEGORY, payload });
+
+export const toggleDisclosure: GenericCommand<any> =
+	(payload) => (dispatch, getState) => {
+		const state = getState();
+		const { category = '', configId = '', customerId = '' } = payload;
+		const shouldLoad =
+			!isLoadingDisclosures(state) &&
+			!hasFetchedDisclosuresForCategory(state, category);
+		if (shouldLoad) {
+			// TODO: Fetch only specific category disclosures when API is ready, commenting out category for now
+			dispatch({ type: FETCH_DISCLOSURES_BEGIN /* payload: category */ });
+			fetchDisclosures(
+				customerId,
+				configId,
+				undefined /* category */,
+				state.locale
+			)
+				.then((response) => {
+					const disclosureResults = response || [];
+					dispatch({
+						type: FETCH_DISCLOSURES_SUCCESS,
+						payload: {
+							disclosures: disclosureResults /* category */,
+						},
+					});
+					return response;
+				})
+				.catch((error) => {
+					dispatch({
+						type: FETCH_DISCLOSURES_FAILURE,
+						payload: { error /* category */ },
+					});
+				});
+		}
+	};
+
+export const toggleIabSpecialFeature: GenericCommand<any> = (payload) => () => {
+	console.log(
+		`TODO: toggleIabSpecialFeature ${JSON.stringify(payload, null, 2)}`
+	);
+};
+export const toggleIabPurposeOptOut: GenericCommand<{
+	id: number;
+	value: boolean;
+}> = (payload) => () => {
+	const { id, value } = payload || {};
+	console.log(`TODO: toggleIabPurposeOptOut ${id} ${value}`);
+};
+export const toggleIabVendorOptOut: GenericCommand<{
+	id: number;
+	value: boolean;
+}> = (payload) => () => {
+	const { id, value } = payload || {};
+	console.log(`TODO: toggleIabVendorOptOut ${id} ${value}`);
+};
+
+export const acceptAll: AsyncAction<OsanoState, OsanoAction> = (dispatch) => {
+	dispatch({ type: SET_ALL_CONSENT, payload: true });
+};
+
+export const denyAll: AsyncAction<OsanoState, OsanoAction> = (dispatch) => {
+	dispatch({ type: SET_ALL_CONSENT, payload: false });
+};
+
+export const goBack: AsyncAction<OsanoState, OsanoAction> = (dispatch) => {
+	// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+	dispatch({ type: GO_BACK });
+};
+
+export const close: GenericCommand<ConsentManager> = (cmp) => (dispatch) => {
+	// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+	dispatch({ type: CLOSE, payload: cmp });
+};
+
+export const saveConsent: GenericCommand<ConsentManager> =
+	(cmp) => (dispatch, getState) => {
+		if (!cmp) {
+			return;
+		}
+		const state = getState();
+		const oldConsent = cmp?.consent;
+		const consent = getConsent(state);
+		dispatch({ type: SAVE_BEGIN });
+		return recordConsent(cmp, consent)
+			.then((newConsent: ConsentCategoryType[] | null) =>
+				dispatch({ type: SAVE_SUCCESS, payload: newConsent })
+			)
+			.catch(() => {
+				dispatch({ type: SAVE_FAILURE, payload: oldConsent });
+			});
+	};
+
+// SELECTORS
+export const isCategoryAccepted = (
+	state: OsanoState,
+	category: ConsentCategoryType
+) => getConsent(state).includes(category);
+
+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);
+}
+
+// Array Constants for common disclosures
+const loadingDisclosures: Disclosure[] = [];
+const noDisclosures: Disclosure[] = [
+	{ type: 'no-results', name: 'disclosure.none' },
+];
+
+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;
+}