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

package/src/components/Button.tsx

@@ -1,18 +1,16 @@
-import { Path, Polygon, Svg } from 'react-native-svg';
+import React, { useCallback, useContext, useMemo } from 'react';
 import {
 	Pressable,
 	type PressableProps,
 	type StyleProp,
 	Text,
 	type TextStyle,
-	type ViewStyle,
 	type View,
+	type ViewStyle,
 } from 'react-native';
-import React, { useCallback, useContext, useMemo } from 'react';
+import { Path, Polygon, Svg } from 'react-native-svg';
 import { acceptAll, close, denyAll, goBack, showDrawer } from '../actions';
 import { saveConsent } from '../commands';
-
-import Locale from './Locale';
 import { OsanoPrivateContext } from '../context';
 import {
 	setAllPurposeConsent,
@@ -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]
+		[buttonBackgroundColor, buttonForegroundColor],
 	);
+
 	const buttonText: StyleProp<TextStyle> = useMemo(
 		() => ({
 			color: buttonForegroundColor,
 			fontSize: 16,
 			fontWeight: 'bold',
+			textAlign: 'center',
 		}),
-		[buttonForegroundColor]
+		[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,64 +77,24 @@ 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.deny`,
-		onPress: onPress || handleReject,
-		testID: testID || 'Deny'
-	});
-};
-
-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 & {
 			color?: string;
 		},
-		ref: React.Ref<View>
+		ref: React.Ref<View>,
 	) => {
 		const { color = '#fafafa', onPress, ...remain } = props;
 		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">
@@ -134,19 +109,19 @@ export const CloseButton = React.forwardRef(
 				</Svg>
 			</Pressable>
 		);
-	}
+	},
 );
 
 export const BackButton = (
 	props: PressableProps & {
 		color?: string;
-	}
+	},
 ) => {
 	const { color = '#fafafa', onPress, ...remain } = props;
 	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/context.ts

@@ -5,14 +5,15 @@ import type {
 	Store,
 	ThunkDispatch,
 } from './hooks/useThunkReducer';
+import type { GoogleConsentModeCallback } from './types/google-consent-mode';
 import type { OsanoAction, OsanoState } from './types/store';
 
-import { ConsentCategory } from './constants';
 import React from 'react';
-import Translator from './utils/Translator';
-import { createSharedStyles } from './styles';
+import { ConsentCategory } from './constants';
 import { initialState } from './reducer';
+import { createSharedStyles } from './styles';
 import { noop } from './utils';
+import Translator from './utils/Translator';
 
 type OsanoPublicContextType = {
 	locale: string;
@@ -48,6 +49,7 @@ type OsanoPrivateContextType = {
 	locale: string;
 	sharedStyles: ReturnType<typeof createSharedStyles>;
 	translate: Translator['translate'];
+	setGoogleConsentModeCallback: (callback: GoogleConsentModeCallback) => void;
 };
 
 export const OsanoPublicContext = React.createContext<OsanoPublicContextType>({
@@ -77,5 +79,6 @@ export const OsanoPrivateContext = React.createContext<OsanoPrivateContextType>(
 		locale: 'en',
 		sharedStyles: createSharedStyles(),
 		translate: () => '',
+		setGoogleConsentModeCallback: noop,
 	},
 );

package/src/iab/tcf/constants.ts

@@ -21,6 +21,52 @@ export const DisplayStatusCodes = {
 	DISABLED: 'disabled',
 };
 
+export const IABKeys = {
+	LEGACY: {
+		CMP_PRESENT: 'IABConsent_CMPPresent',
+		SUBJECT_TO_GDPR: 'IABConsent_SubjectToGDPR',
+		CONSENT_STRING: 'IABConsent_ConsentString',
+		PARSED_PURPOSE_CONSENTS: 'IABConsent_ParsedPurposeConsents',
+		PARSED_VENDOR_CONSENTS: 'IABConsent_ParsedVendorConsents',
+	},
+	IABTCF: {
+		CMP_SDK_ID: 'IABTCF_CmpSdkID',
+		CMP_SDK_VERSION: 'IABTCF_CmpSdkVersion',
+		POLICY_VERSION: 'IABTCF_PolicyVersion',
+		GDPR_APPLIES: 'IABTCF_gdprApplies',
+		PUBLISHER_CC: 'IABTCF_PublisherCC',
+		PURPOSE_ONE_TREATMENT: 'IABTCF_PurposeOneTreatment',
+		USE_NON_STANDARD_TEXTS: 'IABTCF_UseNonStandardTexts',
+		TC_STRING: 'IABTCF_TCString',
+		VENDOR_CONSENTS: 'IABTCF_VendorConsents',
+		VENDOR_LEGITIMATE_INTERESTS: 'IABTCF_VendorLegitimateInterests',
+		PURPOSE_CONSENTS: 'IABTCF_PurposeConsents',
+		PURPOSE_LEGITIMATE_INTERESTS: 'IABTCF_PurposeLegitimateInterests',
+		SPECIAL_FEATURES_OPT_INS: 'IABTCF_SpecialFeaturesOptIns',
+		ADDTL_CONSENT: 'IABTCF_AddtlConsent',
+		ENABLE_ADVERTISER_CONSENT_MODE: 'IABTCF_EnableAdvertiserConsentMode',
+	},
+} as const;
+
+export const getAllIABKeys = () => [
+	...Object.values(IABKeys.LEGACY),
+	...Object.values(IABKeys.IABTCF),
+];
+
+export const DEFAULT_STORAGE_KEYS = {
+	LEGACY: Object.values(IABKeys.LEGACY),
+	IABTCF: [
+		IABKeys.IABTCF.GDPR_APPLIES,
+		IABKeys.IABTCF.TC_STRING,
+		IABKeys.IABTCF.PURPOSE_CONSENTS,
+		IABKeys.IABTCF.VENDOR_CONSENTS,
+		IABKeys.IABTCF.ADDTL_CONSENT,
+		IABKeys.IABTCF.ENABLE_ADVERTISER_CONSENT_MODE,
+	],
+} as const;
+
+export const CUSTOM_STORAGE_KEYS = Object.values(IABKeys.IABTCF);
+
 export const purposeIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 export const purposeMap: Record<ConsentCategoryType, number[]> = {
 	[ConsentCategory.ESSENTIAL]: [1],

package/src/iab/tcf/iab-storage-utils.ts

@@ -0,0 +1,166 @@
+import {
+	clearStorage,
+	clearStorageFromDefault,
+	setIntStorageToDefault,
+	setStorage,
+	setStorageToDefault,
+} from '../../native/OsanoCmp';
+import { osanoLogger } from '../../utils/OsanoLogger';
+import {
+	CUSTOM_STORAGE_KEYS,
+	DEFAULT_STORAGE_KEYS,
+	IABKeys,
+} from './constants';
+
+export interface IABConsentData {
+	tcString: string;
+	cmpId: number;
+	cmpVersion: number;
+	policyVersion: string;
+	publisherCC: string;
+	gdprApplies: boolean;
+	purposeOneTreatment: boolean;
+	useNonStandardStacks: boolean;
+	vendorConsentsString: string;
+	vendorLegitimateInterestsString: string;
+	purposeConsentsString: string;
+	purposeLegitimateInterestsString: string;
+	specialFeatureOptinsString: string;
+	enableAdvertiserConsentMode?: boolean;
+}
+
+export const clearAllIABKeys = (): void => {
+	osanoLogger.info('🧹 Clearing all IAB consent keys...');
+
+	Object.values(IABKeys.LEGACY).forEach((key) => {
+		clearStorageFromDefault(key);
+	});
+
+	DEFAULT_STORAGE_KEYS.IABTCF.forEach((key) => {
+		clearStorageFromDefault(key);
+	});
+
+	CUSTOM_STORAGE_KEYS.forEach((key) => {
+		clearStorage(key);
+	});
+
+	osanoLogger.info(
+		'✅ All IAB consent keys cleared from both custom and default storage',
+	);
+};
+
+export const setAllIABKeys = (consentData: IABConsentData): void => {
+	const {
+		tcString,
+		cmpId,
+		cmpVersion,
+		policyVersion,
+		publisherCC,
+		gdprApplies,
+		purposeOneTreatment,
+		useNonStandardStacks,
+		vendorConsentsString,
+		vendorLegitimateInterestsString,
+		purposeConsentsString,
+		purposeLegitimateInterestsString,
+		specialFeatureOptinsString,
+		enableAdvertiserConsentMode,
+	} = consentData;
+
+	osanoLogger.info('💾 Setting IAB consent keys to storage...');
+
+	const subjectToGDPR = gdprApplies ? '1' : '0';
+
+	// === Save to Custom Storage ===
+	setStorage(IABKeys.IABTCF.CMP_SDK_ID, cmpId.toString());
+	setStorage(IABKeys.IABTCF.CMP_SDK_VERSION, cmpVersion.toString());
+	setStorage(IABKeys.IABTCF.POLICY_VERSION, policyVersion);
+	setStorage(IABKeys.IABTCF.PUBLISHER_CC, publisherCC);
+	setStorage(IABKeys.IABTCF.GDPR_APPLIES, subjectToGDPR);
+	setStorage(
+		IABKeys.IABTCF.PURPOSE_ONE_TREATMENT,
+		purposeOneTreatment ? '1' : '0',
+	);
+	setStorage(
+		IABKeys.IABTCF.USE_NON_STANDARD_TEXTS,
+		useNonStandardStacks ? '1' : '0',
+	);
+	setStorage(IABKeys.IABTCF.VENDOR_CONSENTS, vendorConsentsString);
+	setStorage(
+		IABKeys.IABTCF.VENDOR_LEGITIMATE_INTERESTS,
+		vendorLegitimateInterestsString,
+	);
+	setStorage(IABKeys.IABTCF.PURPOSE_CONSENTS, purposeConsentsString);
+	setStorage(
+		IABKeys.IABTCF.PURPOSE_LEGITIMATE_INTERESTS,
+		purposeLegitimateInterestsString,
+	);
+	setStorage(
+		IABKeys.IABTCF.SPECIAL_FEATURES_OPT_INS,
+		specialFeatureOptinsString,
+	);
+
+	// === Save to Default Storage for AdMob Compatibility ===
+
+	setStorageToDefault(IABKeys.LEGACY.CMP_PRESENT, 'true');
+	setStorageToDefault(IABKeys.LEGACY.SUBJECT_TO_GDPR, subjectToGDPR);
+	setStorageToDefault(IABKeys.LEGACY.CONSENT_STRING, tcString);
+	setStorageToDefault(
+		IABKeys.LEGACY.PARSED_PURPOSE_CONSENTS,
+		purposeConsentsString,
+	);
+	setStorageToDefault(
+		IABKeys.LEGACY.PARSED_VENDOR_CONSENTS,
+		vendorConsentsString,
+	);
+
+	setIntStorageToDefault(IABKeys.IABTCF.GDPR_APPLIES, gdprApplies ? 1 : 0);
+	setStorageToDefault(IABKeys.IABTCF.TC_STRING, tcString);
+	setStorageToDefault(IABKeys.IABTCF.PURPOSE_CONSENTS, purposeConsentsString);
+	setStorageToDefault(IABKeys.IABTCF.VENDOR_CONSENTS, vendorConsentsString);
+	setStorageToDefault(IABKeys.IABTCF.ADDTL_CONSENT, '');
+
+	// Handle Google Consent Mode integration
+	if (enableAdvertiserConsentMode !== undefined) {
+		setIntStorageToDefault(
+			IABKeys.IABTCF.ENABLE_ADVERTISER_CONSENT_MODE,
+			enableAdvertiserConsentMode ? 1 : 0,
+		);
+
+		const status = enableAdvertiserConsentMode ? 'enabled' : 'disabled';
+		const reason = enableAdvertiserConsentMode
+			? '(both Google Consent Mode and IAB TCF are applicable)'
+			: '(Google Consent Mode or IAB TCF not applicable)';
+
+		osanoLogger.info(
+			`🔗 Google TCF integration ${status}: ${IABKeys.IABTCF.ENABLE_ADVERTISER_CONSENT_MODE} = ${enableAdvertiserConsentMode ? 1 : 0} ${reason}`,
+		);
+	}
+
+	osanoLogger.info(
+		'✅ IAB consent keys saved to both custom and default storage for AdMob compatibility',
+	);
+	osanoLogger.debug(
+		`📊 Updated IAB keys: CMP=true, SubjectToGDPR=${subjectToGDPR}, PurposeConsents=${purposeConsentsString.length} chars, VendorConsents=${vendorConsentsString.length} chars`,
+	);
+};
+
+export const setCustomIABKey = (key: string, value: string): void => {
+	setStorage(key, value);
+};
+
+export const setDefaultIABKey = (key: string, value: string): void => {
+	setStorageToDefault(key, value);
+};
+
+export const setDefaultIABKeyAsInt = (key: string, value: number): void => {
+	setIntStorageToDefault(key, value);
+};
+
+export const clearCustomIABKey = (key: string): void => {
+	clearStorage(key);
+};
+
+export const clearDefaultIABKey = (key: string): void => {
+	clearStorageFromDefault(key);
+};