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

package/src/types/consent-config.d.ts

@@ -41,30 +41,34 @@ type Palette = {
 
 export type Config = {
 	allowTimeout: boolean;
-	gpcSupport: boolean;
 	categories: ConsentCategory[];
+	ccpaApplies: boolean;
 	ccpaRelaxed: boolean;
+	configId: string;
+	country: string;
 	crossDomain: boolean;
-	ccpaApplies: boolean;
+	customerId: string;
+	domains: Array<string>;
 	forceManagePreferences: boolean;
 	forceReconsent?: Date;
+	gdprApplies?: boolean;
 	googleConsent: boolean;
+	gpcSupport: boolean;
+	iab: Iab;
 	iframeBlocking: Mode;
-	scriptBlocking: Mode;
-	timeoutSeconds: number;
-	storagePolicyHref: string;
-	policyLinkText: string;
-	policyLinkInDrawer: boolean;
-	forcedClassifyEnabled: boolean;
+	language: string;
 	managePreferencesEnabled: boolean;
-	customerId: string;
-	configId: string;
 	mode: Mode;
 	noTattle: boolean;
-	domains: Array<string>;
+	palette: Palette;
+	policyLinkInDrawer: boolean;
+	policyLinkText: string;
+	region: string;
 	remoteConsent: boolean;
+	storagePolicyHref: string;
+	timeoutSeconds: number;
 	type?: Flavor;
-	variant: 'one' | 'two' | 'three' | 'four' | 'five' | 'six';
+	variant: 'one' | 'two' | 'three' | 'four' | 'five' | 'six' | '' | undefined;
 	country: string;
 	region: string;
 	iab: Iab;

package/src/types/index.d.ts

@@ -1,18 +1,34 @@
 import type { FlavorKeys } from '../flavors';
+import type {
+	GppVersionType,
+	TcfVersionType,
+	UspVersionType,
+} from '../iab/tcf/types';
+import type { IabFrameworkType } from '../iab/types';
+import type { Palette } from './consent-config';
+
 
 export type OsanoOverrides = {
 	flavor?: FlavorKeys;
 	locale?: string;
-	iabEnabled?: boolean;
+	iabEnabled?: boolean | null;
+	iabFrameworks?: IabFrameworkType[];
+	iabVersions?: {
+		gpp?: GppVersionType;
+		tcf?: TcfVersionType;
+		usp?: UspVersionType;
+	};
+	palette?: Palette;
 };
 
 export interface OsanoProps {
 	configId: string;
 	customerId: string;
+	hideUI?: boolean;
 	hideDisclosures?: boolean;
-	onConfigLoadSuccess?:()=>void;
-	onConfigLoadFailure?:()=>void;
-	onLangLoadSuccess?:()=>void;
-	onLangLoadFailure?:()=>void;
+	onConfigLoadSuccess?: () => void;
+	onConfigLoadFailure?: () => void;
+	onLangLoadSuccess?: () => void;
+	onLangLoadFailure?: () => void;
 	overrides?: OsanoOverrides;
 }

package/src/types/store.d.ts

@@ -1,16 +1,20 @@
 import { ConsentConfig } from '../ConsentManager';
-import { ConsentCategory } from '../store';
+import { type ConsentCategory } from '../constants';
+import { type AsyncAction } from '../hooks/useThunkReducer';
 
-export type OsanoAction = {
-	type: string;
+export type OsanoAction<S extends string = any, T = any> = {
+	type: S;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	payload?: any;
+	payload?: T;
+	error?: Error | string;
+	meta?: Record<string, any>;
 };
 
 export type OsanoState = {
 	config?: ConsentConfig;
 	configId: string;
 	consent: Record<ConsentCategory, boolean | undefined>;
+	consentTimestamp: number;
 	customerId: string;
 	dialogOpen: boolean;
 	disclosures: {
@@ -19,11 +23,17 @@ export type OsanoState = {
 		results: Partial<Record<ConsentCategory, Disclosure[]>>;
 	};
 	locale: string;
+	ready: {
+		consent: boolean;
+	};
+	savedConsent: Record<ConsentCategory, boolean> | null;
 	scrollToType: string;
 	scrollToId: number;
 	stack: string[];
 };
 
+export type ActionCreator<S, T> = (payload?: T) => OsanoAction<S, T>;
+
 export type DisclosureType =
 	| 'cookie'
 	| 'script'

package/src/utils/Translator.ts

@@ -1,3 +1,4 @@
+import { EventEmitter, EventSubscription } from './EventEmitter';
 import {
 	fetchGlobalLocalePhrases,
 	fetchLocalLocalePhrases,
@@ -5,7 +6,6 @@ import {
 import { get, merge } from './index';
 
 import type { ConsentManager } from '../ConsentManager';
-import { EventEmitter, EventSubscription } from './EventEmitter';
 
 type il8nProps = {
 	locale?: string;
@@ -35,7 +35,7 @@ const rtlLocaleCodes = [
 
 const locales: Record<string, LocalizedStrings> = {};
 
-export default class Translator extends EventEmitter{
+export default class Translator extends EventEmitter {
 	private _overrides: Record<string, LocalizedStrings> = {};
 	private _currentLocale = 'en';
 	private _consentManager: ConsentManager;
@@ -57,7 +57,7 @@ export default class Translator extends EventEmitter{
 	constructor(
 		consentManager: ConsentManager,
 		messages: LocalizedStrings = {},
-		defaultLocale = 'en',
+		defaultLocale = 'en'
 	) {
 		super();
 		this._consentManager = consentManager;
@@ -102,26 +102,22 @@ export default class Translator extends EventEmitter{
 	private _loading: Record<string, Promise<string | undefined>> = {};
 	load(
 		desiredLocale?: string,
-		onLangLoadSuccess?: ()=>void,
-		onLangLoadFailure?: ()=>void
+		onLangLoadSuccess?: () => void,
+		onLangLoadFailure?: () => void
 	): Promise<PromiseSettledResult<string | undefined>[]> {
+		const allLocales = desiredLocale
+			? Translator.fallbackLanguages(
+					desiredLocale.toLowerCase().replace(/_/g, '-')
+				)
+			: [];
 
-		
-		const allLocales = desiredLocale ? Translator.fallbackLanguages(
-			desiredLocale.toLowerCase().replace(/_/g, '-'),
-		) : [];
-		
 		const locale = allLocales?.shift();
 		const customerId = this._consentManager.customerId;
 		const configId = this._consentManager.configId;
-		this._langLoadFailureSubscription =  onLangLoadFailure && this.on(
-			'langLoadFailure',
-			onLangLoadFailure,
-		);
-		this._langLoadSuccessSubscription = onLangLoadSuccess && this.on(
-			'langLoadSuccess',
-			onLangLoadSuccess,
-		);
+		this._langLoadFailureSubscription =
+			onLangLoadFailure && this.on('langLoadFailure', onLangLoadFailure);
+		this._langLoadSuccessSubscription =
+			onLangLoadSuccess && this.on('langLoadSuccess', onLangLoadSuccess);
 		if (locale) {
 			let globalPromise: Promise<string | undefined> | undefined;
 			let localPromise: Promise<string | undefined> | undefined;
@@ -134,24 +130,24 @@ export default class Translator extends EventEmitter{
 				} else {
 					const localesToTry = [...allLocales];
 					globalPromise = this._loading[locale] = fetchGlobalLocalePhrases(
-						locale,
+						locale
 					)
-						.then(phrases => {
+						.then((phrases) => {
 							this._currentLocale = locale;
 							this.extend(phrases as LocalizedStrings, locale);
 							delete this._loading[locale];
-							this.emit('langLoadSuccess')
+							this.emit('langLoadSuccess');
 							return locale;
 						})
-						.catch(async error => {
+						.catch(async (error) => {
 							unavailableLocales.push(locale);
 							delete this._loading[locale];
 							let nextLocale = localesToTry.shift();
 							while (nextLocale) {
 								try {
 									this._loading[`${nextLocale}`] = fetchGlobalLocalePhrases(
-										nextLocale,
-									).then(phrases => {
+										nextLocale
+									).then((phrases) => {
 										this._currentLocale = nextLocale!;
 										this.extend(phrases as LocalizedStrings, nextLocale);
 										delete this._loading[`${nextLocale}`];
@@ -170,7 +166,7 @@ export default class Translator extends EventEmitter{
 				}
 			}
 			if (this._overrides[`${locale}`]) {
-				this.emit('langLoadSuccess')
+				this.emit('langLoadSuccess');
 				localPromise = Promise.resolve(locale);
 			} else {
 				if (this._loading[`${customerId}_${configId}_${locale}`]) {
@@ -183,15 +179,15 @@ export default class Translator extends EventEmitter{
 						] = fetchLocalLocalePhrases(
 							this._consentManager.customerId,
 							this._consentManager.configId,
-							locale,
+							locale
 						)
-							.then(phrases => {
+							.then((phrases) => {
 								this.override(phrases as LocalizedStrings, locale);
 								delete this._loading[`${customerId}_${configId}_${locale}`];
-								this.emit('langLoadSuccess', locale)
+								this.emit('langLoadSuccess', locale);
 								return locale;
 							})
-							.catch(async error => {
+							.catch(async (error) => {
 								delete this._loading[`${customerId}_${configId}_${locale}`];
 								let nextLocale = localesToTry.shift();
 								while (nextLocale) {
@@ -200,8 +196,8 @@ export default class Translator extends EventEmitter{
 											fetchLocalLocalePhrases(
 												this._consentManager.customerId,
 												this._consentManager.configId,
-												nextLocale,
-											).then(phrases => {
+												nextLocale
+											).then((phrases) => {
 												this.override(phrases as LocalizedStrings, nextLocale);
 												delete this._loading[
 													`${customerId}_${configId}_${nextLocale}`
@@ -219,22 +215,28 @@ export default class Translator extends EventEmitter{
 										nextLocale = localesToTry.shift();
 									}
 								}
-								this.emit('langLoadFailure', `Locale ${locale} is not available for translation`);
+								this.emit(
+									'langLoadFailure',
+									`Locale ${locale} is not available for translation`
+								);
 								throw error;
 							});
 					}
 				}
 			}
-			this.emit('langLoadSuccess')
-			this._langLoadFailureSubscription?.remove()
-			this._langLoadSuccessSubscription?.remove()
+			this.emit('langLoadSuccess');
+			this._langLoadFailureSubscription?.remove();
+			this._langLoadSuccessSubscription?.remove();
 			return Promise.allSettled([globalPromise, localPromise].filter(Boolean));
 		} else {
-			this.emit('langLoadFailure', `Locale ${locale} is not available for translation`);
-			this._langLoadFailureSubscription?.remove()
-			this._langLoadSuccessSubscription?.remove()
+			this.emit(
+				'langLoadFailure',
+				`Locale ${locale} is not available for translation`
+			);
+			this._langLoadFailureSubscription?.remove();
+			this._langLoadSuccessSubscription?.remove();
 			return Promise.reject(
-				new Error(`Locale ${locale} is not available for translation`),
+				new Error(`Locale ${locale} is not available for translation`)
 			);
 		}
 	}
@@ -260,10 +262,10 @@ export default class Translator extends EventEmitter{
 	 * Create a translation template for a particular key path
 	 */
 	template(
-		key: string,
+		key: string
 	): (
 		props: string | il8nProps,
-		defaultPhrase: string,
+		defaultPhrase: string
 	) => string | LocalizedStrings {
 		return (props: string | il8nProps, defaultPhrase: string) =>
 			this.translate(key, props, defaultPhrase);
@@ -275,7 +277,7 @@ export default class Translator extends EventEmitter{
 	translate(
 		path: string | string[],
 		props: string | il8nProps = {},
-		defaultPhrase?: string,
+		defaultPhrase?: string
 	): string | LocalizedStrings {
 		const localePassed = typeof props === 'string';
 		const locale = localePassed ? props : props.locale || this.locale;
@@ -296,7 +298,9 @@ export default class Translator extends EventEmitter{
 		const { interpolations = {} } = localePassed ? {} : props;
 		Object.entries(interpolations).forEach(([key, value]) => {
 			const pattern = new RegExp(`%{${key}}`, 'g');
-			translation = translation.replace(pattern, value);
+			if (typeof translation === 'string') {
+				translation = translation.replace(pattern, value);
+			}
 		});
 
 		return translation;

package/src/utils/index.ts

@@ -1,39 +1,35 @@
+import type { GetFieldType } from './types';
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const formatPath = (pathOrArray: string | string[]) =>
 	Array.isArray(pathOrArray)
 		? pathOrArray
-				.map(val => String(val))
+				.map((val) => String(val))
 				.join('.')
 				.split('.')
 		: pathOrArray.split('.');
 
-export function get(
-	object: Record<string, any> | undefined = {},
-	pathOrArray: string | string[],
-	defaultValue?: any,
-): any {
-	const path = formatPath(pathOrArray);
-	const result = path.reduce((target, key) => {
-		if (typeof target === 'string') {
-			// We reached a translation string
-			return target;
-		}
-		if (target === undefined) {
-			return target;
-		}
-		if (key.slice(-2) === '()') {
-			// execute method
-			return target[`${key}`]();
-		}
-		return target[`${key}`];
-	}, object);
-	return result === undefined ? defaultValue : result;
+export function get<
+	TData,
+	TPath extends string | string[],
+	TDefault = GetFieldType<TData, TPath>,
+>(
+	object: TData,
+	pathOrArray: TPath,
+	defaultValue?: TDefault
+): GetFieldType<TData, TPath> | TDefault {
+	const path = formatPath(pathOrArray).filter(Boolean);
+	const result = path.reduce<GetFieldType<TData, TPath>>(
+		(value, key) => (value as any)?.[key],
+		object as any
+	);
+	return result === undefined ? (defaultValue as TDefault) : result;
 }
 
 export function set(
 	object: Record<string, any>,
 	pathOrArray: string | string[],
-	value: any,
+	value: any
 ) {
 	const path = formatPath(pathOrArray);
 	const lastIndex = path.length - 1;
@@ -52,7 +48,7 @@ export function set(
 
 const mergeLoop = (
 	object: Record<string, any>,
-	[key, value]: [string, any],
+	[key, value]: [string, any]
 ) => {
 	const srcValue = object[`${key}`];
 	const srcType = typeof srcValue;
@@ -68,7 +64,7 @@ const mergeLoop = (
 					if (Array.isArray(value)) {
 						object[`${key}`] = Object.entries(value).reduce(
 							mergeLoop,
-							object[`${key}`],
+							object[`${key}`]
 						);
 					}
 				} else {
@@ -76,7 +72,7 @@ const mergeLoop = (
 					if (valType === 'object' && !Array.isArray(value)) {
 						object[`${key}`] = Object.entries(value).reduce(
 							mergeLoop,
-							object[`${key}`],
+							object[`${key}`]
 						);
 					}
 				}
@@ -119,7 +115,7 @@ function mergeSingle(object: Record<string, any>, source: Record<string, any>) {
 	}
 	return Object.entries(source || {}).reduce(
 		mergeLoop,
-		Object.entries(object || {}).reduce(mergeLoop, {}),
+		Object.entries(object || {}).reduce(mergeLoop, {})
 	);
 }
 

package/src/utils/types.ts

@@ -0,0 +1,35 @@
+type FieldWithPossiblyUndefined<T, Key> =
+	| GetFieldType<Exclude<T, undefined>, Key>
+	| Extract<T, undefined>;
+
+type GetIndexedField<T, K> = K extends keyof T
+	? T[K]
+	: K extends `${number}`
+		? '0' extends keyof T // tuples have string keys, return undefined if K is not in tuple
+			? undefined
+			: number extends keyof T
+				? T[number]
+				: undefined
+		: undefined;
+
+export type GetFieldType<T, P> = P extends `${infer Left}.${infer Right}`
+	? Left extends keyof T
+		? FieldWithPossiblyUndefined<T[Left], Right>
+		: Left extends `${infer FieldKey}[${infer IndexKey}]`
+			? FieldKey extends keyof T
+				? FieldWithPossiblyUndefined<
+						| GetIndexedField<Exclude<T[FieldKey], undefined>, IndexKey>
+						| Extract<T[FieldKey], undefined>,
+						Right
+					>
+				: undefined
+			: undefined
+	: P extends keyof T
+		? T[P]
+		: P extends `${infer FieldKey}[${infer IndexKey}]`
+			? FieldKey extends keyof T
+				?
+						| GetIndexedField<Exclude<T[FieldKey], undefined>, IndexKey>
+						| Extract<T[FieldKey], undefined>
+				: undefined
+			: undefined;

package/src/views/Dialog/Buttons.tsx

@@ -10,9 +10,9 @@ import React, { useContext } from 'react';
 import { StyleSheet, View, type ViewProps } from 'react-native';
 
 import { OsanoPrivateContext } from '../../context';
-import { isDialogOpen } from '../../store';
+import { isDialogOpen } from '../../selectors';
 
-export const Buttons: React.FC<ViewProps> = props => {
+export const Buttons: React.FC<ViewProps> = (props) => {
 	const { style } = props;
 	const { config, getState } = useContext(OsanoPrivateContext);
 

package/src/views/Dialog/Message.tsx

@@ -28,7 +28,7 @@ export const Message = () => {
 		<Locale
 			path={translations}
 			options={{
-				interpolations: { vendorCount: `${config?.iabVendorCount}` },
+				interpolations: { vendorCount: `${config?.disclosedVendorCount}` },
 			}}
 		/>
 	);

package/src/views/Dialog/PreferenceManagementDeepLinks.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from 'react';
-import { showDrawer, showIabVendors } from '../../store';
+import { showDrawer, showIabVendors } from '../../actions';
 
 import Locale from '../../components/Locale';
 import { OsanoPrivateContext } from '../../context';
@@ -10,7 +10,7 @@ export const PreferenceManagementDeepLinks = () => {
 	const { palette } = config || {};
 	const { linkColor = '#29246a' } = palette || {};
 
-	const handleShowDrawer = useCallback(() => dispatch(showDrawer), []);
+	const handleShowDrawer = useCallback(() => dispatch(showDrawer()), []);
 	const handleShowIabVendors = useCallback(
 		() => dispatch(showIabVendors()),
 		[],
@@ -18,9 +18,11 @@ export const PreferenceManagementDeepLinks = () => {
 
 	return (
 		<>
-			<Text style={{ color: linkColor }} onPress={handleShowDrawer}>
-				<Locale path="drawer.header" />
-			</Text>
+			{!config?.showManagePreferencesButtonInDialog ? (
+				<Text style={{ color: linkColor }} onPress={handleShowDrawer}>
+					<Locale path="drawer.header" />
+				</Text>
+			) : null}
 			{config?.tcfIsApplicable ? (
 				<Text style={{ color: linkColor }} onPress={handleShowIabVendors}>
 					<Locale path="iab.vendor.title" />