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

package/src/store.ts

@@ -1,602 +0,0 @@
-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;
-}