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

package/src/services/consent.ts

@@ -152,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;
 		};
@@ -280,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) {
@@ -309,6 +313,7 @@ const clearToFirstLoadDefault = async (
 	await clearConsent(cmp);
 	const seed = firstLoadConsent(cmp);
 	cmp.consent = seed;
+	cmp.consentSaved = false;
 	return seed;
 };
 
@@ -388,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/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: {