@osano/osano-cmp-react-native 0.17.2 → 0.18.0

package/src/services/locale.ts

@@ -8,8 +8,9 @@ let locales: Record<string, LocalizedStrings> = {};
 
 // Require localizations from the `locale` folder
 try {
+	// eslint-disable-next-line @typescript-eslint/no-require-imports
 	locales = require('../locale');
-} catch (e) {
+} catch {
 	throw new Error(
 		'No localizations found. Did you run `npm run update:locale`?',
 	);
@@ -26,7 +27,7 @@ export function fetchGlobalLocalePhrases(
 	if (locales[languageCode]) {
 		return Promise.resolve(locales[languageCode] as LocalizedStrings);
 	}
-	return API.get(`${LOCALE_URI}/${localeCode}.json`).then(strings => {
+	return API.get(`${LOCALE_URI}/${localeCode}.json`).then((strings) => {
 		locales[languageCode] = strings as LocalizedStrings;
 		return strings;
 	}) as Promise<LocalizedStrings>;

package/src/styles.ts

@@ -30,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)

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

@@ -41,7 +41,7 @@ type Palette = {
 
 export type Config = {
 	allowTimeout: boolean;
-	categories: ConsentCategory[];
+	categories: ConsentCategoryType[];
 	ccpaApplies: boolean;
 	ccpaRelaxed: boolean;
 	configId: string;

package/src/types/index.d.ts

@@ -27,7 +27,7 @@ export interface OsanoProps {
 	hideUI?: boolean;
 	hideDisclosures?: boolean;
 	onConfigLoadSuccess?: () => void;
-	onConfigLoadFailure?: () => void;
+	onConfigLoadFailure?: (error?: Error) => void;
 	onLangLoadSuccess?: () => void;
 	onLangLoadFailure?: () => void;
 	onGoogleConsentUpdate?: GoogleConsentModeCallback;

package/src/types/store.d.ts

@@ -1,5 +1,5 @@
 import { ConsentConfig } from '../ConsentManager';
-import { type ConsentCategory } from '../constants';
+import { type ConsentCategoryType } from '../constants';
 import { type AsyncAction } from '../hooks/useThunkReducer';
 
 export type OsanoAction<S extends string = any, T = any> = {
@@ -13,20 +13,20 @@ export type OsanoAction<S extends string = any, T = any> = {
 export type OsanoState = {
 	config?: ConsentConfig;
 	configId: string;
-	consent: Record<ConsentCategory, boolean | undefined>;
+	consent: Record<ConsentCategoryType, boolean | undefined>;
 	consentTimestamp: number;
 	customerId: string;
 	dialogOpen: boolean;
 	disclosures: {
-		fetched: ConsentCategory[];
+		fetched: ConsentCategoryType[];
 		loading: boolean;
-		results: Partial<Record<ConsentCategory, Disclosure[]>>;
+		results: Partial<Record<ConsentCategoryType, Disclosure[]>>;
 	};
 	locale: string;
 	ready: {
 		consent: boolean;
 	};
-	savedConsent: Record<ConsentCategory, boolean> | null;
+	savedConsent: Record<ConsentCategoryType, boolean> | null;
 	scrollToType: string;
 	scrollToId: number;
 	stack: string[];
@@ -44,7 +44,7 @@ export type DisclosureType =
 	| 'text';
 
 export type Disclosure = {
-	classification?: ConsentCategory;
+	classification?: ConsentCategoryType;
 	type?: DisclosureType;
 	expiry?: string | number;
 	name: string;

package/src/utils/API.ts

@@ -23,7 +23,7 @@ const makeFetch = (
 		mode: 'cors',
 		referrer: 'no-referrer',
 		body: method !== 'GET' ? JSON.stringify(params) : undefined,
-		...headers
+		...headers,
 	}).then((response) => {
 		if (response.status === 204 || response.type === 'opaque') {
 			return '';
@@ -46,5 +46,6 @@ export default {
 			typeof queryObj !== 'boolean' ? queryObj : undefined,
 			typeof queryObj === 'boolean',
 		),
-	post: (path: string, params?: object, headers?: object) => makeFetch('POST', path, params, false, headers),
+	post: (path: string, params?: object, headers?: object) =>
+		makeFetch('POST', path, params, false, headers),
 };

package/src/utils/Color.ts

@@ -7,7 +7,7 @@ export const parseColor = (
 			const colorArray = color
 				.replace(/[^\d,.]/g, '')
 				.split(',')
-				.map(value => {
+				.map((value) => {
 					const val = parseFloat(value);
 					if (isNaN(val)) {
 						throw new Error('Invalid color value');
@@ -15,7 +15,7 @@ export const parseColor = (
 					return val;
 				});
 			return colorArray as [r: number, g: number, b: number, a?: number];
-		} catch (error) {
+		} catch {
 			// Error parsing rgb color
 			return parseColor(defaultColor, 'rgba(0,0,0,1)');
 		}
@@ -26,7 +26,7 @@ export const parseColor = (
 		// HEX short code
 		hex = hex
 			.split('')
-			.map(c => `${c}${c}`)
+			.map((c) => `${c}${c}`)
 			.join('');
 	} else if (hex.length !== 6 && hex.length !== 8) {
 		return parseColor(defaultColor, 'rgba(0,0,0,1)');
@@ -36,7 +36,7 @@ export const parseColor = (
 	let pointer = 0;
 	while (pointer < hex.length && components.length < 3) {
 		const colorInt = parseInt(hex.slice(pointer, pointer + 2), 16);
-		// eslint-disable-next-line no-bitwise
+
 		components.push(colorInt & 255);
 		pointer += 2;
 	}
@@ -49,7 +49,7 @@ export const parseColor = (
 };
 
 export const intToHexInt = (...args: number[]) =>
-	args.map(i => ((i % 256) + 256) % 256);
+	args.map((i) => ((i % 256) + 256) % 256);
 export const intToHexString = (...args: number[]) =>
 	// Only RGB on hex strings
 	args
@@ -58,7 +58,6 @@ export const intToHexString = (...args: number[]) =>
 
 export const intToHue = (i: number) => ((i % 360) + 360) % 360;
 
-// eslint-disable-next-line no-bitwise
 export const floatToHexInt = (f: number) => ((~~(f * 255) % 256) + 256) % 256;
 export const floatToHexString = (...args: number[]) =>
 	args.reduce(

package/src/utils/EventEmitter.ts

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/ban-types */
+type Listener = (...args: any[]) => void;
 export class EventSubscription {
 	private _emitter: EventEmitter;
 	private _event: string;
-	private _listener: Function;
+	private _listener: Listener;
 
-	constructor(emitter: EventEmitter, event: string, listener: Function) {
+	constructor(emitter: EventEmitter, event: string, listener: Listener) {
 		this._emitter = emitter;
 		this._event = event;
 		this._listener = listener;
@@ -16,9 +16,9 @@ export class EventSubscription {
 }
 
 export class EventEmitter {
-	private _events: Record<string, Function[]> = {};
+	private _events: Record<string, Listener[]> = {};
 
-	on(event: string, listener: Function) {
+	on(event: string, listener: Listener) {
 		if (typeof this._events[event] !== 'object') {
 			this._events[event] = [];
 		}
@@ -27,7 +27,7 @@ export class EventEmitter {
 		return subscription;
 	}
 
-	off(event: string, listener: Function) {
+	off(event: string, listener: Listener) {
 		if (typeof this._events[event] === 'object') {
 			const idx = this._events[event]!.indexOf(listener);
 			if (idx > -1) {
@@ -42,7 +42,7 @@ export class EventEmitter {
 		}
 	}
 
-	once(event: string, listener: Function) {
+	once(event: string, listener: Listener) {
 		const g = (...args: unknown[]) => {
 			this.off(event, g);
 			listener.apply(this, args);

package/src/utils/ExpoDetector.ts

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { osanoLogger as OsanoLogger } from './OsanoLogger';
 
 interface ExpoDetectionResult {
@@ -8,7 +7,7 @@ interface ExpoDetectionResult {
 
 export class ExpoDetector {
 	private static _detectionResult: ExpoDetectionResult | null = null;
-	
+
 	/**
 	 * Detect Expo environment and cache result
 	 */
@@ -26,31 +25,33 @@ export class ExpoDetector {
 		// Check for Expo runtime via globals
 		try {
 			const hasExpoGlobalProp = !!(global as any).expo;
-			
+
 			if (hasExpoGlobalProp) {
 				result.isExpo = true;
-				
+
 				// Analyze global.expo to distinguish Expo Go from dev builds
 				const globalExpoContent = (global as any).expo;
-				
+
 				if (globalExpoContent && typeof globalExpoContent === 'object') {
 					const documentsDir = globalExpoContent.documentsDir || '';
 					const cacheDir = globalExpoContent.cacheDir || '';
-					
+
 					// Check execution environment
-					const exponentConstants = globalExpoContent.modules?.ExponentConstants;
+					const exponentConstants =
+						globalExpoContent.modules?.ExponentConstants;
 					const executionEnvironment = exponentConstants?.executionEnvironment;
-					
+
 					// Check for Expo Go app ID
 					const expoApplication = globalExpoContent.modules?.ExpoApplication;
 					const applicationId = expoApplication?.applicationId;
-					
+
 					// Expo Go indicators: package name, execution env, app ID
-					const hasExpoGoPackageName = documentsDir.includes('host.exp.exponent') || 
+					const hasExpoGoPackageName =
+						documentsDir.includes('host.exp.exponent') ||
 						cacheDir.includes('host.exp.exponent');
 					const isStoreClient = executionEnvironment === 'storeClient';
 					const hasExpoGoAppId = applicationId === 'host.exp.exponent';
-					
+
 					if (hasExpoGoPackageName || isStoreClient || hasExpoGoAppId) {
 						result.isExpoGo = true;
 					} else {
@@ -67,7 +68,7 @@ export class ExpoDetector {
 
 		// Cache the result
 		this._detectionResult = result;
-		
+
 		return result;
 	}
 
@@ -92,7 +93,7 @@ export class ExpoDetector {
 	 */
 	public static getEnvironmentDescription(): string {
 		const result = this.detect();
-		
+
 		if (!result.isExpo) {
 			return 'Bare React Native';
 		}
@@ -111,4 +112,3 @@ export class ExpoDetector {
 		this._detectionResult = null;
 	}
 }
-

package/src/utils/ExpoGoMemoryStorage.ts

@@ -31,7 +31,10 @@ export class ExpoGoMemoryStorage {
 		return Promise.resolve(value);
 	}
 
-	static setBoolStorageToDefault(key: string, value: boolean): Promise<boolean> {
+	static setBoolStorageToDefault(
+		key: string,
+		value: boolean,
+	): Promise<boolean> {
 		this.defaultStorage.set(key, value);
 		return Promise.resolve(value);
 	}
@@ -45,7 +48,7 @@ export class ExpoGoMemoryStorage {
 		// Generate a consistent device ID for Expo Go session
 		let deviceId = this.storage.get('__expo_device_id');
 		if (!deviceId) {
-			deviceId = `expo_go_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+			deviceId = `expo_go_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
 			this.storage.set('__expo_device_id', deviceId);
 		}
 		return Promise.resolve(deviceId);
@@ -58,4 +61,4 @@ export class ExpoGoMemoryStorage {
 		this.storage.clear();
 		this.defaultStorage.clear();
 	}
-}
+}

package/src/utils/Translator.ts

@@ -155,7 +155,7 @@ export default class Translator extends EventEmitter {
 									});
 									await this._loading[`${nextLocale}`];
 									return nextLocale;
-								} catch (_error) {
+								} catch {
 									unavailableLocales.push(nextLocale);
 									delete this._loading[`${nextLocale}`];
 									nextLocale = localesToTry.shift();
@@ -208,7 +208,7 @@ export default class Translator extends EventEmitter {
 											`${customerId}_${configId}_${nextLocale}`
 										];
 										return nextLocale;
-									} catch (_error) {
+									} catch {
 										delete this._loading[
 											`${customerId}_${configId}_${nextLocale}`
 										];
@@ -272,7 +272,7 @@ export default class Translator extends EventEmitter {
 	}
 
 	/**
-	 * Translates a particular LocalizedString path
+	 * Translates a particular LocalizedString path with mobile/web priority system
 	 */
 	translate(
 		path: string | string[],
@@ -281,29 +281,62 @@ export default class Translator extends EventEmitter {
 	): string | LocalizedStrings {
 		const localePassed = typeof props === 'string';
 		const locale = localePassed ? props : props.locale || this.locale;
+		const pathStr = Array.isArray(path) ? path.join('.') : path;
 		const fallback =
-			typeof defaultPhrase === 'string' ? defaultPhrase : `${path}`;
+			typeof defaultPhrase === 'string' ? defaultPhrase : `${pathStr}`;
 		const phrases = locales[`${locale}`];
 		const override = this._overrides[`${locale}`];
-		// Always request from override first
-		let translation =
-			(override && get(this._overrides, path)) ||
-			get(phrases, path) ||
-			(locale.length > 2
-				? this.translate(path, locale.slice(0, 2), fallback)
-				: typeof defaultPhrase === 'string'
-					? this.translate(fallback, locale)
-					: fallback);
 
-		const { interpolations = {} } = localePassed ? {} : props;
-		Object.entries(interpolations).forEach(([key, value]) => {
-			const pattern = new RegExp(`%{${key}}`, 'g');
-			if (typeof translation === 'string') {
-				translation = translation.replace(pattern, value);
-			}
-		});
+		let translation: string | number | LocalizedStrings | undefined;
 
-		return translation;
+		// Priority-based translation lookup
+		const searchPaths = [
+			// Mobile Customer-specific
+			[override, `mobile.${pathStr}`],
+			// Web Customer-specific
+			[override, pathStr],
+			// Mobile Global
+			[phrases, `mobile.${pathStr}`],
+			// Web Global
+			[phrases, pathStr],
+		] as [Record<string, string>, string][];
+		// Search in customer-specific overrides first, then global phrases
+		for (const [source, searchPath] of searchPaths) {
+			if (source) {
+				translation = get(source, searchPath);
+				if (translation) break;
+			}
+		}
+		// Base translatedResourceBundle (fallback to default locale)
+		if (translation == null && locale !== Translator.DEFAULT_LANGUAGE) {
+			const defaultPhrases = locales[Translator.DEFAULT_LANGUAGE];
+			if (defaultPhrases) {
+				translation = get(
+					defaultPhrases,
+					`mobile.${pathStr}`,
+					get(defaultPhrases, pathStr),
+				);
+			}
+		}
+		// Use fallback if nothing found
+		if (!translation) {
+			translation = fallback;
+		}
+		// Apply interpolations if needed
+		const { interpolations = {} } = localePassed ? {} : props;
+		if (
+			typeof translation === 'string' &&
+			Object.keys(interpolations).length > 0
+		) {
+			Object.entries(interpolations).forEach(([key, value]) => {
+				const pattern = new RegExp(`%{${key}}`, 'g');
+				translation = (translation as string).replace(pattern, value);
+			});
+		}
+		// Convert number to string if needed for consistency
+		return typeof translation === 'number'
+			? translation.toString()
+			: translation;
 	}
 
 	/**

package/src/utils/WebStorage.ts

@@ -0,0 +1,60 @@
+/**
+ * Browser localStorage-based storage fallback for web platform.
+ * Provides persistent storage when native modules are not available.
+ */
+
+// Declare localStorage for web environments (not in React Native's default lib)
+declare const localStorage: {
+	getItem(key: string): string | null;
+	setItem(key: string, value: string): void;
+	removeItem(key: string): void;
+};
+export class WebStorage {
+	private static readonly DEVICE_ID_KEY = '__osano_device_id';
+
+	static setStorage(key: string, value: string): Promise<string> {
+		localStorage.setItem(key, value);
+		return Promise.resolve(value);
+	}
+
+	static getStorage(key: string): Promise<string | null> {
+		return Promise.resolve(localStorage.getItem(key));
+	}
+
+	static clearStorage(key: string): Promise<void> {
+		localStorage.removeItem(key);
+		return Promise.resolve();
+	}
+
+	static setStorageToDefault(key: string, value: string): Promise<string> {
+		localStorage.setItem(key, value);
+		return Promise.resolve(value);
+	}
+
+	static setIntStorageToDefault(key: string, value: number): Promise<number> {
+		localStorage.setItem(key, String(value));
+		return Promise.resolve(value);
+	}
+
+	static setBoolStorageToDefault(
+		key: string,
+		value: boolean,
+	): Promise<boolean> {
+		localStorage.setItem(key, String(value));
+		return Promise.resolve(value);
+	}
+
+	static clearStorageFromDefault(key: string): Promise<void> {
+		localStorage.removeItem(key);
+		return Promise.resolve();
+	}
+
+	static getDeviceId(): Promise<string> {
+		let deviceId = localStorage.getItem(this.DEVICE_ID_KEY);
+		if (!deviceId) {
+			deviceId = `web_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
+			localStorage.setItem(this.DEVICE_ID_KEY, deviceId);
+		}
+		return Promise.resolve(deviceId);
+	}
+}

package/src/utils/index.ts

@@ -1,6 +1,5 @@
 import type { GetFieldType } from './types';
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const formatPath = (pathOrArray: string | string[]) =>
 	Array.isArray(pathOrArray)
 		? pathOrArray
@@ -16,12 +15,12 @@ export function get<
 >(
 	object: TData,
 	pathOrArray: TPath,
-	defaultValue?: TDefault
+	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
+		object as any,
 	);
 	return result === undefined ? (defaultValue as TDefault) : result;
 }
@@ -29,7 +28,7 @@ export function get<
 export function set(
 	object: Record<string, any>,
 	pathOrArray: string | string[],
-	value: any
+	value: any,
 ) {
 	const path = formatPath(pathOrArray);
 	const lastIndex = path.length - 1;
@@ -48,7 +47,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;
@@ -64,7 +63,7 @@ const mergeLoop = (
 					if (Array.isArray(value)) {
 						object[`${key}`] = Object.entries(value).reduce(
 							mergeLoop,
-							object[`${key}`]
+							object[`${key}`],
 						);
 					}
 				} else {
@@ -72,7 +71,7 @@ const mergeLoop = (
 					if (valType === 'object' && !Array.isArray(value)) {
 						object[`${key}`] = Object.entries(value).reduce(
 							mergeLoop,
-							object[`${key}`]
+							object[`${key}`],
 						);
 					}
 				}
@@ -115,7 +114,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/views/Dialog/Buttons.tsx

@@ -78,4 +78,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Buttons;
+export default Buttons;

package/src/views/Dialog/index.tsx

@@ -8,8 +8,6 @@ import React, {
 } from 'react';
 import {
 	Modal,
-	Platform,
-	SafeAreaView,
 	StyleSheet,
 	Text,
 	useWindowDimensions,
@@ -21,13 +19,13 @@ import {
 } from 'react-native';
 import { acceptAll, close, toggleCategory } from '../../actions';
 import { saveConsent } from '../../commands';
-import { getConsent, isDialogOpen } from '../../selectors';
+import { getConsent, isCategoryDisabled, isDialogOpen } from '../../selectors';
 
 import { CloseButton } from '../../components/Button';
 import Locale from '../../components/Locale';
 import StoragePolicyLink from '../../components/StoragePolicyLink';
 import Toggle from '../../components/Toggle';
-import { type ConsentCategory } from '../../constants';
+import { type ConsentCategoryType } from '../../constants';
 import { OsanoPrivateContext } from '../../context';
 import Translator from '../../utils/Translator';
 import Buttons from './Buttons';
@@ -69,13 +67,16 @@ export const Dialog = (): ReactElement<Modal> => {
 
 	const handleClose = useCallback(() => {
 		clearImpliedConsentTimeout();
-		if (config?.isConsentImplied) dispatch(acceptAll());
-		cmp && dispatch(saveConsent(cmp));
-		dispatch(close(cmp));
+		if (config?.isConsentImplied && !cmp?.consent) {
+			dispatch(acceptAll());
+			// Only save here if consent is implied and no consent has been given yet
+			cmp && dispatch(saveConsent(cmp));
+		}
+		dispatch(close());
 	}, [cmp, config?.isConsentImplied, dispatch, clearImpliedConsentTimeout]);
 
 	const handleToggleCategory = useCallback(
-		(category: ConsentCategory) => {
+		(category: ConsentCategoryType) => {
 			return (value: boolean) => {
 				dispatch(toggleCategory({ category, value }));
 			};
@@ -98,7 +99,7 @@ export const Dialog = (): ReactElement<Modal> => {
 		// }
 		return style;
 	}, [isRTL, dialogForegroundColor]);
-	const [hDialogLeft = [], hDialogRight = []]: StyleProp<ViewStyle>[][] =
+	const [_hDialogLeft = [], _hDialogRight = []]: StyleProp<ViewStyle>[][] =
 		useMemo(
 			() => [
 				[
@@ -114,7 +115,7 @@ export const Dialog = (): ReactElement<Modal> => {
 			],
 			[displayPosition, dialogType],
 		);
-	const [vDialogTop = [], vDialogBottom = []]: StyleProp<ViewStyle>[][] =
+	const [_vDialogTop = [], _vDialogBottom = []]: StyleProp<ViewStyle>[][] =
 		useMemo(
 			() => [
 				[
@@ -240,6 +241,7 @@ export const Dialog = (): ReactElement<Modal> => {
 								{categories.map((category) => (
 									<Toggle
 										align="left"
+										disabled={isCategoryDisabled(state, category)}
 										key={category}
 										onValueChange={handleToggleCategory(category)}
 										value={getConsent(state, category)}
@@ -261,10 +263,7 @@ export const Dialog = (): ReactElement<Modal> => {
 					<CloseButton
 						testID="close-dialog"
 						onPress={handleClose}
-						style={[
-							styles.close,
-							isRTL ? styles.closeLeft : styles.closeRight,
-						]}
+						style={[styles.close, isRTL ? styles.closeLeft : styles.closeRight]}
 						color={dialogForegroundColor}
 					/>
 				</View>
@@ -391,4 +390,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Dialog;
+export default Dialog;