@osano/osano-cmp-react-native 0.19.1 → 0.19.3

package/src/doNotSell.ts

@@ -67,7 +67,10 @@ export const normalizeDoNotSellConsent = <
 /**
  * Seeds the Do-Not-Sell default into a starting selection (no-op unless
  * enabled): default-on opts out and drops the governed categories; default-off
- * consents them with no opt-out signal.
+ * is a no-op. "Not opted out" is the absence of the opt-out signal, never a
+ * grant — the web CMP keeps governed categories denied until the visitor
+ * consents, and granting them here leaks pre-choice ad grants to Google
+ * Consent Mode.
  */
 export const applyDoNotSellDefault = (
 	categories: ConsentCategoryType[],
@@ -90,11 +93,6 @@ export const applyDoNotSellDefault = (
 			ConsentCategory.OPT_OUT,
 		];
 	}
-	for (const category of governed) {
-		if (!result.includes(category)) {
-			result.push(category);
-		}
-	}
 	return result;
 };
 

package/src/reducer.ts

@@ -66,7 +66,11 @@ const setAllConsent = (acceptOrDeny: boolean) => (state: OsanoState) => {
 				return true;
 			}
 			case 'OPT_OUT': {
-				// This is inverted because we would assume consent to all would be DENY for OPT_OUT
+				// Inverted — consent to all means no opt-out. Only meaningful when
+				// Do-Not-Sell is enabled; the web CMP never sets the signal otherwise.
+				if (!state.config?.enableDoNotSell) {
+					return false;
+				}
 				return useGPC || !acceptOrDeny;
 			}
 			case 'MARKETING': {

package/src/services/consent.ts

@@ -29,10 +29,9 @@ const CONSENTING_PLATFORM_TAG = IS_OFFICIAL_SAMPLE
 	? `${Platform.OS}.sample-react-native`
 	: `${Platform.OS}.react-native`;
 
-const overrideConfig: Partial<Config> = {
-	// Override config here
-	variant: 'two',
-};
+// Local-testing hook only — any key set here clobbers the fetched config
+// (including the x-osano-* headers), so it must ship empty.
+const overrideConfig: Partial<Config> = {};
 
 export type ConsentPayload = {
 	customerId: string;
@@ -153,7 +152,11 @@ export const storeConsent = async (
 ): Promise<ConsentCategoryType[]> => {
 	cmp.consent = consent ?? cmp.consent;
 	return new Promise<ConsentCategoryType[]>((resolve, reject) => {
+		// Only once both writes land: `consentSaved` mirrors web's isSaved (a
+		// stored record exists), and a failed save must leave the implied-consent
+		// close path able to record a choice later.
 		const resConsent = () => {
+			cmp.consentSaved = true;
 			resolve(cmp.consent ?? []);
 			return cmp.consent;
 		};
@@ -281,11 +284,11 @@ export const migrateConsentStorage = async (
 	}
 };
 
-// The consent to fall back to when a visitor has no stored consent yet. Flavor 7
-// shows analytics enabled on first load; every other flavor stays essential-only.
-// The Do-Not-Sell default is then applied, but only when the opt-out would
-// actually be visible (tenant flag + CCPA/US), so we never seed an OPT_OUT the
-// user cannot see or control.
+// The consent to fall back to when a visitor has no stored consent yet:
+// essential-only, plus analytics for analytics-always flavors, matching the web
+// CMP's pre-choice state. The Do-Not-Sell default is then applied, but only
+// when the opt-out would actually be visible (tenant flag + CCPA/US), so we
+// never seed an OPT_OUT the user cannot see or control.
 const firstLoadConsent = (cmp: ConsentManager): ConsentCategoryType[] => {
 	let categories: ConsentCategoryType[] = [ConsentCategory.ESSENTIAL];
 	if (cmp.config?.analyticsDefaultsOnAtFirstLoad) {
@@ -310,6 +313,7 @@ const clearToFirstLoadDefault = async (
 	await clearConsent(cmp);
 	const seed = firstLoadConsent(cmp);
 	cmp.consent = seed;
+	cmp.consentSaved = false;
 	return seed;
 };
 
@@ -389,6 +393,7 @@ const retrieveConsent = async (cmp: ConsentManager) => {
 				const consent = JSON.parse(consentJson) as ConsentCategoryType[];
 				if (consent.length > 0) {
 					cmp.consent = consent;
+					cmp.consentSaved = true;
 				}
 			}
 			if (cmp.consent && cmp.consent.length > 0) {

package/src/utils/Translator.ts

@@ -100,6 +100,8 @@ export default class Translator extends EventEmitter {
 	private _langLoadFailureSubscription?: EventSubscription;
 
 	private _loading: Record<string, Promise<string | undefined>> = {};
+	private _loadedCustomerId?: string;
+	private _loadedConfigId?: string;
 	load(
 		desiredLocale?: string,
 		onLangLoadSuccess?: () => void,
@@ -114,6 +116,16 @@ export default class Translator extends EventEmitter {
 		const locale = allLocales.shift();
 		const customerId = this._consentManager.customerId;
 		const configId = this._consentManager.configId;
+		// Overrides are keyed only by locale — stale copy from a previous
+		// customer/config would survive the switch and skip the refetch below.
+		if (
+			customerId !== this._loadedCustomerId ||
+			configId !== this._loadedConfigId
+		) {
+			this._overrides = {};
+			this._loadedCustomerId = customerId;
+			this._loadedConfigId = configId;
+		}
 		this._langLoadFailureSubscription =
 			onLangLoadFailure && this.on('langLoadFailure', onLangLoadFailure);
 		this._langLoadSuccessSubscription =
@@ -284,40 +296,38 @@ export default class Translator extends EventEmitter {
 		const pathStr = Array.isArray(path) ? path.join('.') : path;
 		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}`],
-			// 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
+		// load() stores phrases under whatever locale it managed to fetch (e.g.
+		// en-us.json may 403 while en.json exists), so search every fallback
+		// bucket. Overrides beat built-in phrases only within the active language
+		// — customer copy loaded via the English fallback must not repaint a
+		// non-English UI.
+		const normalized = locale.toLowerCase().replace(/_/g, '-');
+		const lookupLocales = [
+			...new Set([locale, ...Translator.fallbackLanguages(normalized)]),
+		].filter((lookupLocale): lookupLocale is string => !!lookupLocale);
+		const baseLanguage = normalized.split('-')[0];
+		const overrideLocales = lookupLocales.filter(
+			(lookupLocale) =>
+				lookupLocale === locale || lookupLocale.split('-')[0] === baseLanguage,
+		);
+		const searchPaths: [LocalizedStrings | undefined, string][] = [];
+		for (const lookupLocale of overrideLocales) {
+			const override = this._overrides[`${lookupLocale}`];
+			searchPaths.push([override, `mobile.${pathStr}`], [override, pathStr]);
+		}
+		for (const lookupLocale of lookupLocales) {
+			const phrases = locales[`${lookupLocale}`];
+			searchPaths.push([phrases, `mobile.${pathStr}`], [phrases, pathStr]);
+		}
 		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;

package/src/utils/safeArea.ts

@@ -0,0 +1,39 @@
+export type SafeAreaInsets = {
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+};
+
+const FALLBACK_INSETS: SafeAreaInsets = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+};
+
+// react-native-safe-area-context is an optional peer: it is a native module,
+// so a hard dependency would force every host app to relink on upgrade.
+// Resolved once at module load, so the hook below branches on a constant.
+let useLibInsets: (() => SafeAreaInsets) | undefined;
+try {
+	// eslint-disable-next-line @typescript-eslint/no-require-imports
+	const lib = require('react-native-safe-area-context') as {
+		useSafeAreaInsets: () => SafeAreaInsets;
+	};
+	useLibInsets = lib.useSafeAreaInsets;
+} catch {
+	useLibInsets = undefined;
+}
+
+/**
+ * Device safe-area insets, or zeros when react-native-safe-area-context is not
+ * installed or no SafeAreaProvider is mounted (its hook throws in that case).
+ */
+export const useSafeAreaInsetsSafe = (): SafeAreaInsets => {
+	try {
+		return useLibInsets ? useLibInsets() : FALLBACK_INSETS;
+	} catch {
+		return FALLBACK_INSETS;
+	}
+};

package/src/views/Dialog/index.tsx

@@ -10,6 +10,7 @@ import {
 	Linking,
 	Modal,
 	Pressable,
+	ScrollView,
 	StyleSheet,
 	Text,
 	useWindowDimensions,
@@ -21,6 +22,7 @@ import {
 } from 'react-native';
 import { acceptAll, close, toggleCategory } from '../../actions';
 import { saveConsent } from '../../commands';
+import { useSafeAreaInsetsSafe } from '../../utils/safeArea';
 import { getConsent, isCategoryDisabled, isDialogOpen } from '../../selectors';
 
 import { CloseButton } from '../../components/Button';
@@ -60,7 +62,10 @@ export const Dialog = (): ReactElement<Modal> => {
 	const categories = useTcf
 		? config.iabCategories
 		: config?.nonEssentialCategories || [];
-	const { width: windowWidth } = useWindowDimensions();
+	const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+	const insets = useSafeAreaInsetsSafe();
+	const safePaddingTop = Math.max(insets.top, 20);
+	const safePaddingBottom = Math.max(insets.bottom, 20);
 
 	const clearImpliedConsentTimeout = useCallback(() => {
 		if (!impliedConsentTimeout.current) return;
@@ -70,9 +75,10 @@ export const Dialog = (): ReactElement<Modal> => {
 
 	const handleClose = useCallback(() => {
 		clearImpliedConsentTimeout();
-		if (config?.isConsentImplied && !cmp?.consent) {
+		// `consentSaved`, not `consent` — the first-load seed populates `consent`
+		// and would otherwise suppress the implied accept-all forever.
+		if (config?.isConsentImplied && !cmp?.consentSaved) {
 			dispatch(acceptAll());
-			// Only save here if consent is implied and no consent has been given yet
 			cmp && dispatch(saveConsent(cmp));
 		}
 		dispatch(close());
@@ -142,6 +148,9 @@ export const Dialog = (): ReactElement<Modal> => {
 		{
 			backgroundColor: dialogBackgroundColor,
 			maxWidth: 1024,
+			// Content-heavy flavors overflow small screens; without a cap the
+			// buttons are pushed off-screen and the banner can't be acted on.
+			maxHeight: Math.max(0, windowHeight - safePaddingTop - safePaddingBottom),
 			width: '100%',
 			borderRadius: dialogType === 'box' ? 8 : 0,
 			padding: 28,
@@ -184,9 +193,16 @@ export const Dialog = (): ReactElement<Modal> => {
 			presentationStyle="overFullScreen"
 			supportedOrientations={['portrait', 'landscape']}
 		>
-			<View style={[styles.modalContainer, dialogOverlay]}>
+			<View
+				style={[
+					styles.modalContainer,
+					dialogOverlay,
+					{ paddingTop: safePaddingTop, paddingBottom: safePaddingBottom },
+				]}
+			>
 				<View style={dialogStyles}>
-					<View style={styles.dialogContent}>
+					{/* Buttons stay outside the scroll area so they are always reachable. */}
+					<ScrollView style={styles.dialogContent} nestedScrollEnabled>
 						<View style={[styles.row, styles.fitContent]}>
 							<Text style={dialogForeground} testID="dialog-message">
 								<Message />
@@ -256,7 +272,7 @@ export const Dialog = (): ReactElement<Modal> => {
 								))}
 							</View>
 						) : null}
-					</View>
+					</ScrollView>
 					<Buttons
 						style={windowWidth >= 768 ? styles.dialogRow : styles.dialogCol}
 						buttonStyle={
@@ -325,6 +341,7 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 	},
 	dialogContent: {
+		flexShrink: 1,
 		marginBottom: 16,
 	},
 	bannerLogo: {