@osano/osano-cmp-react-native 0.12.0 → 0.14.0

package/src/ConsentManager.ts

@@ -1,5 +1,16 @@
-import type { Config, Mode, Palette } from './types/consent-config';
-import { EventEmitter, type EventSubscription } from './utils/EventEmitter';
+import { NativeModules, Platform } from 'react-native';
+import { CLEAR_CONSENT, SAVE_SUCCESS } from './actions';
+import { ConsentCategory, mappedJurisdictions } from './constants';
+import flavors, { defaultFlavor, type Flavor } from './flavors';
+import type { Store } from './hooks/useThunkReducer';
+import Tcf from './iab/tcf';
+import type {
+	GppVersionType,
+	TcfController,
+	TcfVersionType,
+	Tcf_v2,
+	UspVersionType,
+} from './iab/tcf/types';
 import type {
 	GvlVendor_v2,
 	GvlVendor_v3,
@@ -7,7 +18,8 @@ import type {
 	IabFrameworkType,
 	IabState,
 } from './iab/types';
-import { NativeModules, Platform } from 'react-native';
+import { getDeviceId } from './native/OsanoCmp';
+import { getConsent } from './selectors';
 import {
 	clearConsent as clearStoredConsent,
 	fetchConfig,
@@ -16,24 +28,15 @@ import {
 	hasStaleConfig,
 	storeConfig,
 } from './services/consent';
-import flavors, { defaultFlavor, type Flavor } from './flavors';
-import { get, merge } from './utils';
+import { GoogleConsentModeMapper } from './services/google-consent-mode-mapper';
 import type { OsanoOverrides } from './types';
-import type {
-	GppVersionType,
-	TcfController,
-	TcfVersionType,
-	Tcf_v2,
-	UspVersionType,
-} from './iab/tcf/types';
-import Tcf from './iab/tcf';
-import Translator from './utils/Translator';
-import { ConsentCategory, mappedJurisdictions } from './constants';
-import { getDeviceId } from './native/OsanoCmp';
-import type { Store } from './hooks/useThunkReducer';
+import type { Config, Mode, Palette } from './types/consent-config';
+import type { GoogleConsentModeCallback } from './types/google-consent-mode';
 import type { OsanoAction, OsanoState } from './types/store';
-import { CLEAR_CONSENT, SAVE_SUCCESS } from './actions';
-import { getConsent } from './selectors';
+import { get, merge } from './utils';
+import { EventEmitter, type EventSubscription } from './utils/EventEmitter';
+import { osanoLogger as OsanoLogger } from './utils/OsanoLogger';
+import Translator from './utils/Translator';
 
 const CONFIG_ID_ERROR = new Error('customerId and configId must be set');
 const CONFIG_NOT_FOUND_ERROR = new Error('Config not found');
@@ -162,12 +165,15 @@ async function fetchConfigWithRetries(
 			const config = await fetchConfig(customerId, configId);
 			return config;
 		} catch (error) {
-			if (attempt === retries) {
+			if (attempt < retries) {
+				OsanoLogger.warn(
+					`Attempt ${attempt} failed. Retrying in ${delay}ms...`,
+				);
+				await new Promise((resolve) => setTimeout(resolve, delay));
+				delay *= 2; // Exponential backoff
+			} else {
 				throw error;
 			}
-			console.warn(`Attempt ${attempt} failed. Retrying in ${delay}ms...`);
-			await new Promise((resolve) => setTimeout(resolve, delay));
-			delay *= 2; // Exponential backoff
 		}
 	}
 
@@ -189,7 +195,7 @@ export class ConsentConfig extends EventEmitter {
 	load() {
 		if (!this._customerId || !this._configId) {
 			this.emit('loadFailure', CONFIG_ID_ERROR);
-			return;
+			return Promise.reject(CONFIG_ID_ERROR);
 		}
 		return fetchConfigWithRetries(this._customerId, this._configId)
 			.then((config: Config | null) => {
@@ -214,9 +220,11 @@ export class ConsentConfig extends EventEmitter {
 				this._config = merge(this._config, config) as Config;
 				storeConfig(this._configId, this._config);
 				this.emit('loadSuccess', this._config);
+				return this._config;
 			})
 			.catch((err) => {
 				this.emit('loadFailure', err);
+				throw err;
 			});
 	}
 	get config(): Config {
@@ -616,6 +624,7 @@ export class ConsentManager {
 	private _consent?: ConsentCategory[];
 	private _translator: Translator = new Translator(this);
 	private _overridePalette?: Palette;
+	private _googleConsentModeCallback?: GoogleConsentModeCallback;
 
 	private _deviceId = '';
 	public get deviceId(): string {
@@ -670,23 +679,57 @@ export class ConsentManager {
 				try {
 					getDeviceId().then(setDeviceId);
 				} catch (err) {
-					console.log(`Error getting device id: ${err}`);
+					OsanoLogger.error(
+						`Error getting device id: ${err}`,
+						err instanceof Error ? err : undefined,
+					);
+				}
+				// Safely access I18nManager.localeIdentifier with null check
+				try {
+					this._locale =
+						NativeModules.I18nManager?.localeIdentifier ||
+						Translator.DEFAULT_LANGUAGE;
+				} catch (err) {
+					console.log(`Error getting locale from I18nManager: ${err}`);
+					this._locale = Translator.DEFAULT_LANGUAGE;
 				}
-				this._locale = NativeModules.I18nManager.localeIdentifier;
 				break;
 			}
 			case 'ios': {
 				try {
 					getDeviceId().then(setDeviceId);
 				} catch (err) {
-					console.log(`Error getting device id: ${err}`);
+					OsanoLogger.error(
+						`Error getting device id: ${err}`,
+						err instanceof Error ? err : undefined,
+					);
+				}
+				try {
+					this._locale =
+						NativeModules.SettingsManager?.settings?.AppleLanguages?.[0] || //iOS 13
+						NativeModules.SettingsManager?.settings?.AppleLocale ||
+						Translator.DEFAULT_LANGUAGE;
+				} catch (err) {
+					console.log(`Error getting locale from SettingsManager: ${err}`);
+					this._locale = Translator.DEFAULT_LANGUAGE;
 				}
-				this._locale =
-					NativeModules.SettingsManager.settings.AppleLanguages[0] || //iOS 13
-					NativeModules.SettingsManager.settings.AppleLocale;
 				break;
 			}
 			default: {
+				try {
+					getDeviceId().then(setDeviceId);
+				} catch (err) {
+					OsanoLogger.error(
+						`Error getting device id: ${err}`,
+						err instanceof Error ? err : undefined,
+					);
+				}
+				try {
+					this._locale = navigator.language;
+				} catch (err) {
+					console.log(`Error getting locale from I18nManager: ${err}`);
+					this._locale = Translator.DEFAULT_LANGUAGE;
+				}
 				break;
 			}
 		}
@@ -711,9 +754,9 @@ export class ConsentManager {
 		customerId?: string;
 		configId?: string;
 		onConfigLoadSuccess?: () => void;
-		onConfigLoadFailure?: () => void;
+		onConfigLoadFailure?: (err: Error) => void;
 		onLangLoadSuccess?: () => void;
-		onLangLoadFailure?: () => void;
+		onLangLoadFailure?: (err: Error) => void;
 	}) {
 		const {
 			customerId,
@@ -760,12 +803,18 @@ export class ConsentManager {
 			}
 		}
 		this._loaded = false;
-		this._loading = new Promise((resolveLoadConfig, rejectLoadConfig) => {
-			this._cancelLoading = rejectLoadConfig;
-
-			const handleConfigLoadSuccess = () => {
-				this._configLoadSuccessSubscription?.remove();
-				this._configLoadFailureSubscription?.remove();
+		const cancelPromise = new Promise((_, reject) => {
+			this._cancelLoading = reject;
+		});
+		this.config.customerId = customerId;
+		this.config.configId = configId;
+		this._loading = Promise.race([this._config.load(), cancelPromise])
+			.then(() => {
+				// If the config loads successfully, we can fetch the consent
+				onConfigLoadSuccess && onConfigLoadSuccess();
+				OsanoLogger.debug(
+					`ConsentManager: Config loaded successfully for customerId: ${customerId}, configId: ${configId}`,
+				);
 				const locale = this._locale;
 				if (this._overridePalette) {
 					this._config.palette = merge(
@@ -773,64 +822,81 @@ export class ConsentManager {
 						this._overridePalette,
 					) as Palette;
 				}
-				resolveLoadConfig(
-					new Promise((resolve, reject) => {
-						this._cancelLoading = reject;
-						fetchConsent(this)
-							.catch(() => {
-								// Consent not found
-								return Promise.resolve([ConsentCategory.ESSENTIAL]);
+				OsanoLogger.debug(`ConsentManager: Loading consent`);
+				return fetchConsent(this)
+					.catch(() => {
+						OsanoLogger.debug(
+							`ConsentManager: No stored consent found for customerId: ${customerId}, configId: ${configId}`,
+						);
+						// If no stored consent, return essential consent by default
+						// This is to ensure CMP can render even if no consent is stored
+						// Consent not found
+						return Promise.resolve([ConsentCategory.ESSENTIAL]);
+					})
+					.then((consent) => {
+						OsanoLogger.debug(
+							`ConsentManager: Consent loaded successfully for customerId: ${customerId}, configId: ${configId}, consent: ${JSON.stringify(consent)}`,
+						);
+						this.consent = consent;
+						this.triggerGoogleConsentUpdate(consent);
+						return this._translator
+							.load(locale, onLangLoadSuccess, onLangLoadFailure)
+							.then((results) => {
+								OsanoLogger.debug(
+									`ConsentManager: Locale loaded successfully for customerId: ${customerId}, configId: ${configId}, locale: ${locale}`,
+								);
+								delete this._cancelLoading;
+								delete this._loading;
+								const globalResult = results[0];
+								// As long as the global locale is loaded, we can render the CMP
+								if (globalResult?.status === 'fulfilled') {
+									this._loaded = true;
+									const globalLocale = globalResult?.value || locale;
+									return {
+										config: this._config,
+										customerId,
+										configId,
+										locale: globalLocale,
+										consent,
+									};
+								}
+								// If the global locale failed to load, we can't render the CMP
+								throw new Error(globalResult?.reason);
 							})
-							.then((consent) => {
-								this.consent = consent;
-								return this._translator
-									.load(locale, onLangLoadSuccess, onLangLoadFailure)
-									.then((results) => {
-										delete this._cancelLoading;
-										delete this._loading;
-										const globalResult = results[0];
-										// As long as the global locale is loaded, we can render the CMP
-										if (globalResult?.status === 'fulfilled') {
-											this._loaded = true;
-											const globalLocale = globalResult?.value || locale;
-											resolve({
-												config: this._config,
-												customerId,
-												configId,
-												locale: globalLocale,
-												consent,
-											});
-											return;
-										}
-										// If the global locale failed to load, we can't render the CMP
-										reject(new Error(globalResult?.reason));
-									});
+							.catch((err) => {
+								this._loaded = false;
+								OsanoLogger.error(
+									`ConsentManager: Error loading locale for customerId: ${customerId}, configId: ${configId}: ${err}`,
+								);
+								delete this._cancelLoading;
+								delete this._loading;
+								onLangLoadFailure && onLangLoadFailure(err);
+								return {
+									config: this._config,
+									customerId,
+									configId,
+									locale,
+									consent,
+								};
 							});
-					}),
-				);
-				onConfigLoadSuccess && onConfigLoadSuccess();
-			};
-			const handleConfigLoadFailure = (err: Error) => {
+					});
+			})
+			.catch((err) => {
 				this._loaded = false;
+				OsanoLogger.error(
+					`ConsentManager: Error loading config for customerId: ${customerId}, configId: ${configId}: ${err}`,
+				);
 				delete this._cancelLoading;
 				delete this._loading;
-				this._configLoadSuccessSubscription?.remove();
-				this._configLoadFailureSubscription?.remove();
-				onConfigLoadFailure && onConfigLoadFailure();
-				rejectLoadConfig(err);
-			};
-			this._configLoadSuccessSubscription = this._config.on(
-				'loadSuccess',
-				handleConfigLoadSuccess,
-			);
-			this._configLoadFailureSubscription = this._config.on(
-				'loadFailure',
-				handleConfigLoadFailure,
-			);
-			this.config.customerId = customerId;
-			this.config.configId = configId;
-			this._config.load();
-		});
+				onConfigLoadFailure && onConfigLoadFailure(err);
+				return {
+					config: this._config,
+					customerId,
+					configId,
+					locale: this._translator.locale,
+					consent: [ConsentCategory.ESSENTIAL],
+				};
+			});
 
 		return this._loading;
 	}
@@ -847,6 +913,60 @@ export class ConsentManager {
 		return this._consent?.includes(category) ?? false;
 	}
 
+	/**
+	 * Set the Google Consent Mode callback function
+	 *
+	 * @param callback - Function to call when consent updates occur
+	 * @returns this ConsentManager instance for method chaining
+	 */
+	public setGoogleConsentModeCallback(
+		callback: GoogleConsentModeCallback,
+	): this {
+		this._googleConsentModeCallback = callback;
+		return this;
+	}
+
+	/**
+	 * Trigger Google Consent Mode update with current consent categories
+	 *
+	 * @param categories - Array of consent categories that have been granted
+	 * @public
+	 */
+	public triggerGoogleConsentUpdate(categories: ConsentCategory[]): void {
+		if (!this._config.googleConsent) {
+			OsanoLogger.debug('Google Consent Mode: disabled in configuration');
+			return;
+		}
+
+		if (!this._googleConsentModeCallback) {
+			OsanoLogger.debug('Google Consent Mode: callback not set');
+			return;
+		}
+
+		try {
+			OsanoLogger.debug(
+				`Google Consent Mode: triggering callback with categories: ${JSON.stringify(categories)}`,
+			);
+
+			const categorySet = new Set(categories);
+			const googleConsentMap =
+				GoogleConsentModeMapper.buildGoogleConsentMap(categorySet);
+
+			const consentStringMap = googleConsentMap.toStringMap();
+
+			OsanoLogger.debug(
+				`Google Consent Mode: consent map: ${JSON.stringify(consentStringMap)}`,
+			);
+			this._googleConsentModeCallback(consentStringMap);
+			OsanoLogger.debug('Google Consent Mode: callback executed successfully');
+		} catch (error) {
+			OsanoLogger.warn(
+				`Google Consent Mode: Error triggering callback: ${error}`,
+			);
+			// Don't re-throw - callback errors shouldn't break consent flow
+		}
+	}
+
 	public get loaded(): boolean {
 		return this._loaded;
 	}

package/src/ConsentUiBuilder.tsx

@@ -1,25 +1,26 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 import {
 	type GetState,
 	type MiddlewareNext,
 	type Store,
 	type ThunkDispatch,
 } from './hooks/useThunkReducer';
+import type { GoogleConsentModeCallback } from './types/google-consent-mode';
 import { type OsanoAction, type OsanoState } from './types/store';
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
 
+import { setConfig } from './actions';
 import { ConsentManager } from './ConsentManager';
-import { Dialog } from './views/Dialog';
-import { Drawer } from './views/Drawer';
 import { OsanoPrivateContext } from './context';
 import { createSharedStyles } from './styles';
-import { setConfig } from './actions';
+import { Dialog } from './views/Dialog';
+import { Drawer } from './views/Drawer';
 
 export const ConsentUiBuilder: React.FC<{
 	addMiddleware: (
 		m: (
-			store: Store<OsanoState, OsanoAction>
-		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
+			store: Store<OsanoState, OsanoAction>,
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>,
 	) => void;
 	cmp: React.MutableRefObject<ConsentManager>;
 	dispatch: ThunkDispatch<OsanoState, OsanoAction, any>;
@@ -27,8 +28,8 @@ export const ConsentUiBuilder: React.FC<{
 	hideDisclosures: boolean;
 	removeMiddleware: (
 		m: (
-			store: Store<OsanoState, OsanoAction<any, any>>
-		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
+			store: Store<OsanoState, OsanoAction<any, any>>,
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>,
 	) => void;
 }> = (props): React.ReactElement<View> => {
 	const {
@@ -45,16 +46,23 @@ export const ConsentUiBuilder: React.FC<{
 		(
 			path: string | string[],
 			translationProps = {},
-			defaultPhrase?: string
+			defaultPhrase?: string,
 		) => {
 			const translated = cmp.current.translator.translate(
 				path,
 				translationProps,
-				defaultPhrase
+				defaultPhrase,
 			);
 			return translated;
 		},
-		[cmp]
+		[cmp],
+	);
+
+	const setGoogleConsentModeCallback = useCallback(
+		(callback: GoogleConsentModeCallback) => {
+			cmp.current.setGoogleConsentModeCallback(callback);
+		},
+		[cmp],
 	);
 
 	const privateContext = useMemo(() => {
@@ -71,6 +79,7 @@ export const ConsentUiBuilder: React.FC<{
 			locale: cmp.current.translator.locale,
 			sharedStyles: createSharedStyles(cmp.current.config || {}),
 			stack,
+			setGoogleConsentModeCallback,
 		};
 	}, [
 		addMiddleware,
@@ -82,6 +91,7 @@ export const ConsentUiBuilder: React.FC<{
 		handleTranslate,
 		getState,
 		stack,
+		setGoogleConsentModeCallback,
 	]);
 
 	// Update our store with the config when CMP loads or config changes
@@ -92,7 +102,7 @@ export const ConsentUiBuilder: React.FC<{
 					config: cmp.current.config,
 					customerId: cmp.current.customerId,
 					configId: cmp.current.configId,
-				})
+				}),
 			);
 		}
 	}, [cmp, dispatch, cmp.current.loaded, cmp.current.config]);

package/src/NativeOsanoCmpSdk.ts

@@ -0,0 +1,64 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+	getDeviceId(): Promise<string>;
+	setStorage(key: string, value: string): Promise<string>;
+	getStorage(key: string): Promise<string>;
+	clearStorage(key: string): Promise<void>;
+	setStorageToDefault(key: string, value: string): Promise<string>;
+	setIntStorageToDefault(key: string, value: number): Promise<number>;
+	setBoolStorageToDefault(key: string, value: boolean): Promise<boolean>;
+	clearStorageFromDefault(key: string): Promise<void>;
+}
+
+export default TurboModuleRegistry
+	? TurboModuleRegistry.getEnforcing<Spec>('OsanoCmpSdk')
+	: <Spec>{
+			// Fallback for environments without TurboModule support (eg. RNWeb)
+			getDeviceId: async () => {
+				// TODO: Implement a fallback mechanism for getting device ID
+				return '';
+			},
+			setStorage: async (key, value) => {
+				try {
+					window.localStorage.setItem(key, value);
+				} catch (e) {}
+				return value;
+			},
+			getStorage: async (key) => {
+				try {
+					return window.localStorage.getItem(key);
+				} catch (e) {
+					return '';
+				}
+			},
+			clearStorage: async (key) => {
+				try {
+					window.localStorage.removeItem(key);
+				} catch (e) {}
+			},
+			setStorageToDefault: async (key, value) => {
+				try {
+					window.localStorage.setItem(key, value);
+				} catch (e) {}
+				return value;
+			},
+			setIntStorageToDefault: async (key, value) => {
+				try {
+					window.localStorage.setItem(key, `${value}`);
+				} catch (e) {}
+				return value;
+			},
+			setBoolStorageToDefault: async (key, value) => {
+				try {
+					window.localStorage.setItem(key, value ? 'true' : '');
+				} catch (e) {}
+				return value;
+			},
+			clearStorageFromDefault: async (key) => {
+				try {
+					window.localStorage.removeItem(key);
+				} catch (e) {}
+			},
+		};

package/src/commands.ts

@@ -7,17 +7,17 @@ import {
 	SAVE_SUCCESS,
 } from './actions';
 import type { ConsentManager } from './ConsentManager';
-import type { OsanoAction, OsanoState } from './types/store';
 import {
 	getConsent,
 	hasFetchedDisclosuresForCategory,
 	isLoadingDisclosures,
 } from './selectors';
+import type { OsanoAction, OsanoState } from './types/store';
 
 import { type ConsentCategory as ConsentCategoryType } from './constants';
-import { fetchDisclosures } from './services/disclosures';
-import { recordConsent } from './services/consent';
 import type { AsyncAction } from './hooks/useThunkReducer';
+import { recordConsent } from './services/consent';
+import { fetchDisclosures } from './services/disclosures';
 
 export const toggleDisclosure =
 	(payload: {
@@ -47,7 +47,7 @@ export const toggleDisclosure =
 				customerId,
 				configId,
 				undefined /* category */,
-				state.locale
+				state.locale,
 			)
 				.then((response) => {
 					const disclosureResults = response || [];
@@ -70,7 +70,7 @@ export const toggleDisclosure =
 
 export const saveConsent =
 	(
-		cmp: ConsentManager
+		cmp: ConsentManager,
 	): AsyncAction<
 		OsanoState,
 		OsanoAction<
@@ -87,9 +87,12 @@ export const saveConsent =
 		const consent = getConsent(state);
 		dispatch({ type: SAVE_BEGIN });
 		return recordConsent(cmp, consent)
-			.then((newConsent: ConsentCategoryType[] | null) =>
-				dispatch({ type: SAVE_SUCCESS, payload: newConsent })
-			)
+			.then((newConsent: ConsentCategoryType[] | null) => {
+				dispatch({ type: SAVE_SUCCESS, payload: newConsent });
+				if (newConsent) {
+					cmp.triggerGoogleConsentUpdate(newConsent);
+				}
+			})
 			.catch(() => {
 				dispatch({ type: SAVE_FAILURE, payload: oldConsent });
 			});