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

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/components/Button.tsx

@@ -11,14 +11,12 @@ import {
 import { Path, Polygon, Svg } from 'react-native-svg';
 import { acceptAll, close, denyAll, goBack, showDrawer } from '../actions';
 import { saveConsent } from '../commands';
-
 import { OsanoPrivateContext } from '../context';
 import {
 	setAllPurposeConsent,
 	setAllSpecialFeatureConsent,
 	setAllVendorConsent,
 } from '../iab/tcf/actions';
-import Locale from './Locale';
 
 type ButtonProps = React.PropsWithoutRef<
 	Omit<PressableProps, 'style' | 'title'> & {
@@ -28,33 +26,50 @@ type ButtonProps = React.PropsWithoutRef<
 	}
 >;
 
-export const Button: React.FC<ButtonProps> = (props) => {
+// Base button component with React 19 compatibility
+export const BaseButton: React.FC<ButtonProps> = (props) => {
 	const { defaultPhrase, disabled, title, onPress, style: buttonStyle } = props;
-	const { config } = useContext(OsanoPrivateContext);
+	const { config, translate } = useContext(OsanoPrivateContext);
 	const { palette } = config || {};
 	const { buttonBackgroundColor, buttonForegroundColor } = palette || {};
+
 	const button: StyleProp<ViewStyle> = useMemo(
 		() => ({
 			alignItems: 'center',
+			justifyContent: 'center',
 			backgroundColor: buttonBackgroundColor,
 			borderColor: buttonForegroundColor,
 			borderWidth: 1,
 			borderRadius: 4,
-			paddingVertical: 8,
+			paddingVertical: 12,
 			paddingHorizontal: 16,
-			flexBasis: 'auto',
+			minHeight: 44,
+			flexShrink: 0,
 		}),
 		[buttonBackgroundColor, buttonForegroundColor],
 	);
+
 	const buttonText: StyleProp<TextStyle> = useMemo(
 		() => ({
 			color: buttonForegroundColor,
 			fontSize: 16,
 			fontWeight: 'bold',
+			textAlign: 'center',
 		}),
 		[buttonForegroundColor],
 	);
 
+	// Get translated text with fallback
+	const getButtonText = useCallback(() => {
+		if (title) {
+			const translated = translate(title, {}, defaultPhrase);
+			return typeof translated === 'string'
+				? translated
+				: defaultPhrase || title;
+		}
+		return defaultPhrase || 'Button';
+	}, [title, defaultPhrase, translate]);
+
 	return (
 		<Pressable
 			style={[button, buttonStyle]}
@@ -62,52 +77,12 @@ export const Button: React.FC<ButtonProps> = (props) => {
 			disabled={disabled}
 			testID={props.testID}
 		>
-			<Text style={buttonText}>
-				<Locale path={title || ''} defaultPhrase={defaultPhrase} />
-			</Text>
+			<Text style={buttonText}>{getButtonText()}</Text>
 		</Pressable>
 	);
 };
 
-export const DenyButton = (props: ButtonProps) => {
-	const { cmp, dispatch } = useContext(OsanoPrivateContext);
-	const { onPress, title, testID } = props;
-
-	const handleReject = useCallback(() => {
-		dispatch(setAllVendorConsent(false));
-		dispatch(setAllPurposeConsent(true));
-		dispatch(setAllSpecialFeatureConsent(false));
-		dispatch(denyAll());
-		cmp && dispatch(saveConsent(cmp));
-		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...props,
-		title: title || 'buttons.denyNonEssential',
-		onPress: onPress || handleReject,
-		testID: testID || 'DenyNonEssential',
-	});
-};
-
-export const AcceptButton = (props: ButtonProps) => {
-	const { cmp, dispatch } = useContext(OsanoPrivateContext);
-	const { onPress, title } = props;
-
-	const handleAcceptConsent = useCallback(() => {
-		dispatch(acceptAll());
-		cmp && dispatch(saveConsent(cmp));
-		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...props,
-		title: title || 'buttons.accept',
-		onPress: onPress || handleAcceptConsent,
-		testID: 'Accept',
-	});
-};
-
+// Icon buttons that don't need translation
 export const CloseButton = React.forwardRef(
 	(
 		props: PressableProps & {
@@ -119,7 +94,7 @@ export const CloseButton = React.forwardRef(
 		const { cmp, dispatch } = useContext(OsanoPrivateContext);
 		const handleClose = useCallback(() => {
 			dispatch(close(cmp));
-		}, []);
+		}, [cmp, dispatch]);
 		return (
 			<Pressable {...remain} ref={ref} onPress={onPress || handleClose}>
 				<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
@@ -146,7 +121,7 @@ export const BackButton = (
 	const { dispatch } = useContext(OsanoPrivateContext);
 	const handleBack = useCallback(() => {
 		dispatch(goBack());
-	}, []);
+	}, [dispatch]);
 	return (
 		<Pressable {...remain} onPress={onPress || handleBack}>
 			<Svg height="16px" viewBox="0 0 512 512" width="16px" fill={color}>
@@ -156,53 +131,76 @@ export const BackButton = (
 	);
 };
 
-export const ManagePreferencesButton = (props: ButtonProps) => {
+// Specialized button components using proper JSX
+export const ManagePreferencesButton: React.FC<ButtonProps> = (props) => {
 	const { onPress, ...remain } = props;
 	const { config, dispatch, cmp } = useContext(OsanoPrivateContext);
+
 	const handleShowDrawer = useCallback(() => {
 		dispatch(close(cmp));
 		dispatch(showDrawer());
-	}, []);
-
-	return Button({
-		...remain,
-		onPress: onPress || handleShowDrawer,
-		title: `buttons.dialog.openDrawer.${config?.jurisdiction}`,
-		defaultPhrase: 'buttons.managePreferences',
-		testID: `Manage Preferences`,
-	});
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleShowDrawer}
+			title={`buttons.dialog.openDrawer.${config?.jurisdiction}`}
+			defaultPhrase="Manage Preferences"
+			testID="Manage Preferences"
+		/>
+	);
 };
 
-export const RejectAllButton = (props: ButtonProps) => {
-	const { config } = useContext(OsanoPrivateContext);
-	return DenyButton({
-		...props,
-		title: `buttons.dialog.denyAll.${config?.jurisdiction}`,
-		defaultPhrase: 'buttons.denyAll',
-		testID: `Reject All`,
-	});
+export const AcceptButton: React.FC<ButtonProps> = (props) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, ...remain } = props;
+
+	const handleAcceptConsent = useCallback(() => {
+		dispatch(acceptAll());
+		cmp && dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleAcceptConsent}
+			title="buttons.accept"
+			defaultPhrase="Accept"
+			testID="Accept"
+		/>
+	);
 };
 
-export const SaveButton = (props: ButtonProps) => {
+export const DenyButton: React.FC<ButtonProps> = (props) => {
 	const { cmp, dispatch } = useContext(OsanoPrivateContext);
-	const { onPress, title } = props;
+	const { onPress, ...remain } = props;
 
-	const handleSave = useCallback(() => {
+	const handleReject = useCallback(() => {
+		dispatch(setAllVendorConsent(false));
+		dispatch(setAllPurposeConsent(true));
+		dispatch(setAllSpecialFeatureConsent(false));
+		dispatch(denyAll());
 		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...props,
-		title: title || `buttons.save`,
-		onPress: onPress || handleSave,
-		testID: `Save`,
-	});
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleReject}
+			title="buttons.deny"
+			defaultPhrase="Deny"
+			testID="Deny"
+		/>
+	);
 };
 
-export const AcceptAllButton = (props: ButtonProps) => {
+export const AcceptAllButton: React.FC<ButtonProps> = (props) => {
 	const { cmp, dispatch } = useContext(OsanoPrivateContext);
 	const { onPress, ...remain } = props;
+
 	const handleAcceptAllConsent = useCallback(() => {
 		dispatch(setAllVendorConsent(true));
 		dispatch(setAllPurposeConsent(false));
@@ -210,12 +208,48 @@ export const AcceptAllButton = (props: ButtonProps) => {
 		dispatch(acceptAll());
 		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...remain,
-		onPress: onPress || handleAcceptAllConsent,
-		title: `buttons.acceptAll`,
-		testID: `Accept All`,
-	});
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleAcceptAllConsent}
+			title="buttons.acceptAll"
+			defaultPhrase="Accept All"
+			testID="Accept All"
+		/>
+	);
+};
+
+export const RejectAllButton: React.FC<ButtonProps> = (props) => {
+	const { config } = useContext(OsanoPrivateContext);
+
+	return (
+		<DenyButton
+			{...props}
+			title={`buttons.dialog.denyAll.${config?.jurisdiction}`}
+			defaultPhrase="Reject All"
+			testID="Reject All"
+		/>
+	);
+};
+
+export const SaveButton: React.FC<ButtonProps> = (props) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, ...remain } = props;
+
+	const handleSave = useCallback(() => {
+		cmp && dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleSave}
+			title="buttons.save"
+			defaultPhrase="Save"
+			testID="Save"
+		/>
+	);
 };

package/src/components/Locale.tsx

@@ -1,5 +1,5 @@
+import React, { useContext } from 'react';
 import { OsanoPrivateContext } from '../context';
-import { useContext } from 'react';
 
 type LocaleOption = Record<string, string>;
 
@@ -21,32 +21,32 @@ export const Locale = (props: LocaleProps = { path: '' }) => {
 	} = props;
 	const { translate } = useContext(OsanoPrivateContext);
 	const translations = ([] as string[]).concat(pathOrArray);
-	return (
-		(pathOrArray &&
-			formatter(
-				translations.reduce(
-					(acc, path) =>
-						`${acc}${acc ? delimiter : ''}${
-							translate(
-								path,
-								Object.entries(options).reduce(
-									(acc, [key, value]) => {
-										acc[key] =
-											typeof value === 'string'
-												? (translate(value, options) as string)
-												: value;
-										return acc;
-									},
-									{} as Record<string, string | LocaleOption>
-								),
-								defaultPhrase
-							) as string
-						}`,
-					''
-				)
-			)) ||
-		null
-	);
+	const translatedText =
+		pathOrArray &&
+		formatter(
+			translations.reduce(
+				(acc, path) =>
+					`${acc}${acc ? delimiter : ''}${
+						translate(
+							path,
+							Object.entries(options).reduce(
+								(acc, [key, value]) => {
+									acc[key] =
+										typeof value === 'string'
+											? (translate(value, options) as string)
+											: value;
+									return acc;
+								},
+								{} as Record<string, string | LocaleOption>,
+							),
+							defaultPhrase,
+						) as string
+					}`,
+				'',
+			),
+		);
+
+	return translatedText ? <>{translatedText}</> : null;
 };
 
 export default Locale;

package/src/constants.ts

@@ -17,7 +17,7 @@ export enum ConsentCategory {
 	STORAGE = 'STORAGE',
 }
 
-const OSANO_DEV = process.env.OSANO_DEV
+const OSANO_DEV = process.env.OSANO_DEV;
 
 export const env = {
 	OSANO_ORIGIN: OSANO_DEV === 'true' ? 'https://cmp-ci.osano.com' : 'https://cmp.osano.com',

package/src/iab/tcf/middleware.ts

@@ -1,31 +1,31 @@
 // @ts-nocheck
 import { CLEAR_CONSENT, CLOSE, RELOAD, SET_CONFIG } from '../../actions';
-import { clearStorage, getStorage, setStorage } from '../../native/OsanoCmp';
+import type { IabMiddlewareFactory, Tcf_v2 } from './types';
 import type { OsanoAction, OsanoState } from '../../types/store';
-import { osanoLogger } from '../../utils/OsanoLogger';
-import { SET_CONSENT_DATA, setConsentData } from '../actions';
 import {
 	SET_ALL_PURPOSE_CONSENT,
 	SET_ALL_SPECIAL_FEATURE_CONSENT,
 	SET_ALL_VENDOR_CONSENT,
 	setConsent,
 } from './actions';
-import { makeFormatConsentString, makeParseConsentString } from './consent';
+import { SET_CONSENT_DATA, setConsentData } from '../actions';
+import { clearAllIABKeys, setAllIABKeys } from './iab-storage-utils';
+import { clearStorage, getStorage, setStorage } from '../../native/OsanoCmp';
+import { getConsentString, getPurposeIds } from './selectors';
 import {
 	idRecordToBinaryString,
 	updatePurposeOptOuts,
 	updateSpecialFeatureOptIns,
 	updateVendorOptOuts,
 } from './helpers';
-import { clearAllIABKeys, setAllIABKeys } from './iab-storage-utils';
-import { getConsentString, getPurposeIds } from './selectors';
-import type { IabMiddlewareFactory, Tcf_v2 } from './types';
+import { makeFormatConsentString, makeParseConsentString } from './consent';
 
-import { Platform } from 'react-native';
 import type { ConsentManager } from '../../ConsentManager';
-import type { Store } from '../../hooks/useThunkReducer';
-import type { IabState } from '../types';
 import type { IabInitOptions } from './types';
+import type { IabState } from '../types';
+import { Platform } from 'react-native';
+import type { Store } from '../../hooks/useThunkReducer';
+import { osanoLogger } from '../../utils/OsanoLogger';
 
 export const makeMiddleware: IabMiddlewareFactory = (
 	initOptions: IabInitOptions,
@@ -66,42 +66,17 @@ export const makeMiddleware: IabMiddlewareFactory = (
 						}
 						store.dispatch(setConsent(payload));
 					};
-					switch (Platform.OS) {
-						case 'ios':
-						case 'android':
-							getStorage(`${gppSection}_${configId}`)
-								.then(resConsent)
-								.catch(() => {
-									// Consent not found
-									clearStorage(`${gppSection}_${configId}`);
-								});
-							break;
-						default:
-							try {
-								resConsent(
-									window.localStorage.getItem(`${gppSection}_${configId}`),
-								);
-							} catch (e) {
-								window.localStorage.removeItem(`${gppSection}_${configId}`);
-							}
-							break;
-					}
+					getStorage(`${gppSection}_${configId}`)
+						.then(resConsent)
+						.catch(() => {
+							// Consent not found
+							clearStorage(`${gppSection}_${configId}`);
+						});
 					break;
 				}
 				case CLEAR_CONSENT: {
-					switch (Platform.OS) {
-						case 'ios':
-						case 'android':
-							clearStorage(`${gppSection}_${configId}`);
-
-							clearAllIABKeys();
-							break;
-						default:
-							try {
-								window.localStorage.removeItem(`${gppSection}_${configId}`);
-							} catch {}
-							break;
-					}
+					clearStorage(`${gppSection}_${configId}`);
+					clearAllIABKeys();
 					store.dispatch(setConsentData(gppSection, ''));
 					break;
 				}

package/src/iab/tcf/reducer.ts

@@ -134,23 +134,10 @@ export default function makeReducer(initOptions: IabInitOptions) {
 				const { config } = payload as ConsentManager;
 				if (config.configId && config.iabEnabled) {
 					const payload = createConsentPayload(state);
-					switch (Platform.OS) {
-						case 'ios':
-						case 'android':
-							setStorage(
-								`${gppSection}_${config.configId}`,
-								JSON.stringify(payload),
-							);
-							break;
-						default:
-							try {
-								window.localStorage.setItem(
-									`${gppSection}_${config.configId}`,
-									JSON.stringify(payload),
-								);
-							} catch (e) {}
-							break;
-					}
+					setStorage(
+						`${gppSection}_${config.configId}`,
+						JSON.stringify(payload),
+					);
 				}
 				return state;
 			}

package/src/native/OsanoCmp.ts

@@ -1,4 +1,5 @@
 import { NativeModules, Platform } from 'react-native';
+import NativeOsanoCmpSdk from '../NativeOsanoCmpSdk';
 
 const LINKING_ERROR =
 	`The package 'osano-cmp-react-native' doesn't seem to be linked. Make sure: \n\n` +
@@ -6,17 +7,12 @@ const LINKING_ERROR =
 	'- You rebuilt the app after installing the package\n' +
 	'- You are not using Expo Go\n';
 
-const OsanoCmpNativeModule = NativeModules.OsanoCmpSdk;
-const OsanoCmp = OsanoCmpNativeModule
-	? OsanoCmpNativeModule
-	: new Proxy(
-			{},
-			{
-				get() {
-					throw new Error(LINKING_ERROR);
-				},
-			},
-		);
+// Use TurboModule if available, fallback to legacy NativeModules
+const OsanoCmp = NativeOsanoCmpSdk ?? NativeModules.OsanoCmpSdk;
+
+if (!OsanoCmp) {
+	throw new Error(LINKING_ERROR);
+}
 
 export function getDeviceId(): Promise<string | null | undefined> {
 	return OsanoCmp.getDeviceId();