@osano/osano-cmp-react-native 0.17.3 → 0.18.1

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}`
 										];
@@ -282,23 +282,24 @@ export default class Translator extends EventEmitter {
 		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 : `${pathStr}`;
+		const fallback =
+			typeof defaultPhrase === 'string' ? defaultPhrase : `${pathStr}`;
 		const phrases = locales[`${locale}`];
 		const override = this._overrides[`${locale}`];
-		
+
 		let translation: string | number | LocalizedStrings | undefined;
-		
+
 		// Priority-based translation lookup
 		const searchPaths = [
 			// Mobile Customer-specific
-			[override ,`mobile.${pathStr}`],
+			[override, `mobile.${pathStr}`],
 			// Web Customer-specific
 			[override, pathStr],
 			// Mobile Global
 			[phrases, `mobile.${pathStr}`],
 			// Web Global
 			[phrases, pathStr],
-		] as [Record<string, string> ,string][];
+		] as [Record<string, string>, string][];
 		// Search in customer-specific overrides first, then global phrases
 		for (const [source, searchPath] of searchPaths) {
 			if (source) {
@@ -310,7 +311,11 @@ export default class Translator extends EventEmitter {
 		if (translation == null && locale !== Translator.DEFAULT_LANGUAGE) {
 			const defaultPhrases = locales[Translator.DEFAULT_LANGUAGE];
 			if (defaultPhrases) {
-				translation = get(defaultPhrases, `mobile.${pathStr}`, get(defaultPhrases, pathStr));
+				translation = get(
+					defaultPhrases,
+					`mobile.${pathStr}`,
+					get(defaultPhrases, pathStr),
+				);
 			}
 		}
 		// Use fallback if nothing found
@@ -319,14 +324,19 @@ export default class Translator extends EventEmitter {
 		}
 		// Apply interpolations if needed
 		const { interpolations = {} } = localePassed ? {} : props;
-		if (typeof translation === 'string' && Object.keys(interpolations).length > 0) {
+		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 `${translation}`;
+		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;

package/src/views/Drawer/Drawer.ConsentCategories.tsx

@@ -39,10 +39,7 @@ import { Link } from '../../components/Link';
 import Locale from '../../components/Locale';
 import StoragePolicyLink from '../../components/StoragePolicyLink';
 import Toggle from '../../components/Toggle';
-import {
-	ConsentCategory,
-	type ConsentCategory as ConsentCategoryType,
-} from '../../constants';
+import { ConsentCategory, type ConsentCategoryType } from '../../constants';
 import { OsanoPrivateContext } from '../../context';
 import useBoundCallback from '../../hooks/useBoundCallback';
 import { usePrevious } from '../../hooks/usePrevious';
@@ -498,10 +495,17 @@ const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 				</View>
 			) : null}
 			{useTcf ? (
-				<>
-					<AcceptAllButton />
-					<RejectAllButton />
-				</>
+				<View
+					style={{
+						marginTop: 16,
+						flex: 1,
+						flexDirection: 'row',
+						gap: 16,
+					}}
+				>
+					<AcceptAllButton style={{ flex: 1 }} />
+					<RejectAllButton style={{ flex: 1 }} />
+				</View>
 			) : null}
 		</View>
 	);
@@ -512,8 +516,8 @@ const CategoryListFooter: React.FC = () => {
 
 	const handleSave = useCallback(() => {
 		cmp && dispatch(saveConsent(cmp));
-		dispatch(close(cmp));
-	}, []);
+		dispatch(close());
+	}, [cmp]);
 
 	return (
 		<View style={[styles.listItem, styles.listFooter]}>
@@ -649,6 +653,7 @@ export const ConsentCategoriesDrawer: React.FC = () => {
 				ref={flatListRef}
 				style={{ marginTop: Platform.OS === 'web' ? 0 : -headerHeight }}
 				data={categories}
+				keyExtractor={(item, index) => `${item.type}-${item.id}-${index}`}
 				stickyHeaderIndices={Platform.OS === 'web' ? [0] : undefined}
 				ListHeaderComponent={
 					Platform.OS === 'web' ? ListHeaderComponent : undefined

package/src/views/Drawer/Drawer.Header.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 import {
 	Platform,
+	StatusBar,
 	StyleSheet,
 	Text,
 	View,
@@ -48,7 +49,9 @@ export const DrawerHeader: React.FC<DrawerHeaderType> = (props) => {
 	const [headerHeight, setHeaderHeight] = React.useState(0);
 	const handleLayoutChange = useCallback(
 		(e: LayoutChangeEvent) => {
-			const height = e.nativeEvent.layout.height;
+			const height =
+				e.nativeEvent.layout.height +
+				(Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0) * 2;
 			setHeaderHeight(height);
 			onHeaderLayoutChange && onHeaderLayoutChange(e);
 		},
@@ -108,9 +111,11 @@ export default DrawerHeader;
 const styles = StyleSheet.create({
 	headerContainer: {
 		flexDirection: 'row',
+		marginTop: Platform.OS === 'android' ? -(StatusBar.currentHeight ?? 0) : 0,
 		zIndex: 1,
 	},
 	header: {
+		marginTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0,
 		paddingLeft: 24,
 		paddingRight: 24,
 		paddingVertical: 24,
@@ -121,6 +126,7 @@ const styles = StyleSheet.create({
 	},
 	backIcon: {
 		justifyContent: 'center',
+		marginTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0,
 		paddingVertical: 24,
 		paddingLeft: 20,
 	},
@@ -136,4 +142,4 @@ const styles = StyleSheet.create({
 		writingDirection: 'rtl',
 		flexDirection: 'row-reverse',
 	},
-});
+});

package/src/views/Drawer/Drawer.Iab.Disclosures.tsx

@@ -52,7 +52,7 @@ const IabDisclosureItem: React.FC<
 		(purposeId, acceptOrDeny: boolean) => {
 			dispatch(setPurposeConsent(purposeId, acceptOrDeny));
 		},
-		[id]
+		[id],
 	);
 
 	const partnerCount = config?.getCountOfVendorsUsingPurpose(type, id) ?? 0;
@@ -181,7 +181,7 @@ const ListItemRenderer = ({
 
 const termAssign = (
 	type: string,
-	disclosures: Record<string, IabDisclosureType>
+	disclosures: Record<string, IabDisclosureType>,
 ) =>
 	Object.entries(disclosures).map(([itemId, disclosure]) => ({
 		id: parseInt(itemId, 10),
@@ -234,7 +234,7 @@ export const IabDisclosuresDrawer: React.FC = () => {
 				viewOffset,
 			});
 		},
-		[headerHeight]
+		[headerHeight],
 	);
 
 	const scrollToTop = useBoundCallback((animated: boolean = false) => {
@@ -262,23 +262,23 @@ export const IabDisclosuresDrawer: React.FC = () => {
 		return {
 			purposes: termAssign(
 				'purpose',
-				translate('iab.purposes') as Record<string, IabDisclosureType>
+				translate('iab.purposes') as Record<string, IabDisclosureType>,
 			),
 			specialPurposes: termAssign(
 				'specialPurpose',
-				translate('iab.specialPurposes') as Record<string, IabDisclosureType>
+				translate('iab.specialPurposes') as Record<string, IabDisclosureType>,
 			),
 			features: termAssign(
 				'feature',
-				translate('iab.features') as Record<string, IabDisclosureType>
+				translate('iab.features') as Record<string, IabDisclosureType>,
 			),
 			specialFeatures: termAssign(
 				'specialFeature',
-				translate('iab.specialFeatures') as Record<string, IabDisclosureType>
+				translate('iab.specialFeatures') as Record<string, IabDisclosureType>,
 			),
 			dataCategories: termAssign(
 				'dataCategories',
-				translate('iab.dataCategories') as Record<string, IabDisclosureType>
+				translate('iab.dataCategories') as Record<string, IabDisclosureType>,
 			),
 		};
 	}, [locale]);

package/src/views/Drawer/Drawer.Iab.Vendors.tsx

@@ -1,7 +1,6 @@
 import {
 	FlatList,
 	type ListRenderItemInfo,
-	Platform,
 	type StyleProp,
 	StyleSheet,
 	Text,
@@ -73,7 +72,7 @@ const dataDeclarationMap = (purposeId: number | string) => ({
 	type: 'dataCategories',
 });
 
-const VendorLinks: React.FC<GvlUrl[]> = (vendorUrls: GvlUrl[]) => {
+const VendorLinks: React.FC<{ vendorUrls: GvlUrl[] }> = ({ vendorUrls }) => {
 	const { locale } = useContext(OsanoPrivateContext);
 	if (!vendorUrls?.length) {
 		return null;
@@ -111,14 +110,21 @@ const VendorLinks: React.FC<GvlUrl[]> = (vendorUrls: GvlUrl[]) => {
 	);
 };
 
-const IabVendorDisclosure: React.FC<{
+const IabVendorDisclosure = ({
+	onPress,
+	purposeId,
+	style,
+	type,
+	partnerCount,
+	retention,
+}: {
 	retention?: number;
 	onPress?: (id: string | number) => void;
 	purposeId: string | number;
 	type: string;
 	partnerCount?: number;
 	style?: StyleProp<TextStyle>;
-}> = ({ onPress, purposeId, style, type, partnerCount, retention }) => (
+}): React.ReactNode => (
 	<View key={purposeId} style={styles.paragraph}>
 		<Text style={{ fontSize: 12 }}>
 			<Link
@@ -269,7 +275,7 @@ const IabVendorItem: React.FC<{ vendor: GvlVendor_v2 | GvlVendor_v3 }> = ({
 					</Text>
 				</Toggle>
 			</View>
-			{VendorLinks(links)}
+			<VendorLinks vendorUrls={links} />
 			<ExpansionPanel title="iab.legal.title" style={styles.listItem}>
 				<View
 					style={[
@@ -461,11 +467,7 @@ const ListItemRenderer = ({
 	item,
 }: ListRenderItemInfo<GvlVendor_v2 | GvlVendor_v3>) => {
 	if (typeof item === 'number') {
-		return (
-			<IabVendorListHeader
-				style={{ paddingTop: item }}
-			/>
-		);
+		return <IabVendorListHeader style={{ paddingTop: item }} />;
 	}
 
 	return <IabVendorItem vendor={item} />;
@@ -478,10 +480,7 @@ export const IabVendorsDrawer: React.FC = () => {
 
 	const ListHeaderComponent = useMemo(() => {
 		return (
-			<DrawerHeader
-				title="iab.vendor.title"
-				canGoBack={stack.length > 1}
-			/>
+			<DrawerHeader title="iab.vendor.title" canGoBack={stack.length > 1} />
 		);
 	}, [locale, stack.length]);
 
@@ -504,8 +503,20 @@ export const IabVendorsDrawer: React.FC = () => {
 	return (
 		<View style={styles.renderItem}>
 			{ListHeaderComponent}
-			<AcceptAllButton disabled={false}/>
-			<RejectAllButton disabled={false}/>
+			<IabVendorListHeader style={{ paddingTop: 0 }} />
+			<View
+				style={[
+					styles.listItem,
+					{
+						display: vendors.length > 0 ? 'flex' : 'none',
+						flexDirection: 'row',
+						gap: 16,
+					},
+				]}
+			>
+				<AcceptAllButton style={{ flex: 1 }} disabled={false} />
+				<RejectAllButton style={{ flex: 1 }} disabled={false} />
+			</View>
 			<FlatList
 				data={vendors}
 				ListFooterComponent={<View style={styles.listFooter} />}

package/src/views/Drawer/index.tsx

@@ -4,6 +4,7 @@ import React, {
 	useLayoutEffect,
 	useMemo,
 	useRef,
+	type RefObject,
 } from 'react';
 import {
 	Animated,
@@ -15,6 +16,7 @@ import {
 	type NativeSyntheticEvent,
 	Platform,
 	SafeAreaView,
+	StatusBar,
 	type StyleProp,
 	StyleSheet,
 	type ViewStyle,
@@ -40,10 +42,10 @@ const easing = (v: number) => 1 - Easing.exp(1 - v);
 const maxWebDrawerWidth = 360;
 
 export const Drawer: React.FC<DrawerProps> = () => {
-	const { cmp, config, dispatch, getState, locale } =
+	const { config, dispatch, getState, locale } =
 		useContext(OsanoPrivateContext);
 
-	const overlayRef = React.useRef(null);
+	const overlayRef: RefObject<SafeAreaView | null> = React.useRef(null);
 	const { palette } = config || {};
 	const {
 		infoDialogBackgroundColor,
@@ -142,17 +144,23 @@ export const Drawer: React.FC<DrawerProps> = () => {
 	}, [stack.length]);
 	const handleClose = useCallback(
 		(
-			e:
+			e?:
 				| NativeSyntheticEvent<NativePointerEvent>
 				| PointerEvent
 				| GestureResponderEvent,
 		) => {
 			if (e && e.target) {
-				if (e.target === overlayRef.current) {
-					dispatch(close(cmp));
+				if (
+					e.target === overlayRef.current ||
+					(Platform.OS === 'web' &&
+						overlayRef.current &&
+						'parentElement' in overlayRef.current &&
+						e.target === overlayRef.current.parentElement)
+				) {
+					dispatch(close());
 				}
 			} else {
-				dispatch(close(cmp));
+				dispatch(close());
 			}
 		},
 		[],
@@ -276,7 +284,7 @@ const styles = StyleSheet.create({
 	},
 	close: {
 		position: 'absolute',
-		top: 15,
+		top: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) + 15 : 15,
 		zIndex: 10,
 	},
 	closeRight: {
@@ -289,6 +297,7 @@ const styles = StyleSheet.create({
 	},
 	drawer: {
 		bottom: 0,
+		paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0,
 		position: 'absolute',
 		top: 0,
 		zIndex: 1,