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

package/src/views/Dialog/index.tsx

@@ -1,45 +1,46 @@
-import {
-	Modal,
-	StyleSheet,
-	View,
-	type StyleProp,
-	type ViewStyle,
-	Text,
-	SafeAreaView,
-	Dimensions,
-	type LayoutChangeEvent,
-	Platform,
-	type TextStyle,
-} from 'react-native';
+import type { ReactElement } from 'react';
 import React, {
 	useCallback,
 	useContext,
 	useEffect,
 	useMemo,
 	useRef,
-	useState,
 } from 'react';
-import type { ReactElement } from 'react';
+import {
+	Modal,
+	Platform,
+	SafeAreaView,
+	StyleSheet,
+	Text,
+	useWindowDimensions,
+	View,
+	type DimensionValue,
+	type StyleProp,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native';
 import { acceptAll, close, toggleCategory } from '../../actions';
 import { saveConsent } from '../../commands';
 import { getConsent, 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 { OsanoPrivateContext } from '../../context';
+import Translator from '../../utils/Translator';
 import Buttons from './Buttons';
-import Message from './Message';
-import StoragePolicyLink from '../../components/StoragePolicyLink';
 import FirstLayerUsage from './FirstLayerUsage';
+import Message from './Message';
 import PreferenceManagementDeepLinks from './PreferenceManagementDeepLinks';
-import Toggle from '../../components/Toggle';
-import { CloseButton } from '../../components/Button';
-import Translator from '../../utils/Translator';
-import Locale from '../../components/Locale';
-import { type ConsentCategory } from '../../constants';
 
 export const Dialog = (): ReactElement<Modal> => {
 	const { cmp, config, dispatch, getState, locale } =
 		useContext(OsanoPrivateContext);
-	const impliedConsentTimeout = useRef<NodeJS.Timeout | null>(null);
+	const impliedConsentTimeout = useRef<ReturnType<typeof setTimeout> | null>(
+		null,
+	);
 	const state = getState();
 	const { palette } = config || {};
 	const {
@@ -58,13 +59,7 @@ export const Dialog = (): ReactElement<Modal> => {
 	const categories = useTcf
 		? config.iabCategories
 		: config?.nonEssentialCategories || [];
-	const [windowWidth, setWindowWidth] = useState(
-		Dimensions.get('window').width,
-	);
-	const handleLayoutChange = useCallback((e: LayoutChangeEvent) => {
-		const width = e.nativeEvent.layout.width;
-		setWindowWidth(width);
-	}, []);
+	const { width: windowWidth } = useWindowDimensions();
 
 	const clearImpliedConsentTimeout = useCallback(() => {
 		if (!impliedConsentTimeout.current) return;
@@ -91,6 +86,7 @@ export const Dialog = (): ReactElement<Modal> => {
 	const dialogOverlay = useMemo(() => {
 		return {
 			backgroundColor: infoDialogOverlayColor,
+			width: '100%' as DimensionValue,
 		};
 	}, [infoDialogOverlayColor]);
 	const dialogForeground = useMemo(() => {
@@ -105,10 +101,18 @@ export const Dialog = (): ReactElement<Modal> => {
 	const [hDialogLeft = [], hDialogRight = []]: StyleProp<ViewStyle>[][] =
 		useMemo(
 			() => [
-				[styles.col, { width: dialogType === 'box' ? 32 : 0 }],
-				[styles.col, { width: dialogType === 'box' ? 32 : 0 }],
+				[
+					styles.col,
+					{ width: dialogType === 'box' ? 32 : 0 },
+					displayPosition.indexOf('right') >= 0 ? styles.grow : undefined,
+				],
+				[
+					styles.col,
+					{ width: dialogType === 'box' ? 32 : 0 },
+					displayPosition.indexOf('left') >= 0 ? styles.grow : undefined,
+				],
 			],
-			[dialogType],
+			[displayPosition, dialogType],
 		);
 	const [vDialogTop = [], vDialogBottom = []]: StyleProp<ViewStyle>[][] =
 		useMemo(
@@ -118,19 +122,21 @@ export const Dialog = (): ReactElement<Modal> => {
 					{
 						minHeight: dialogType === 'box' ? 32 : 0,
 					},
-				],
+					displayPosition.indexOf('bottom') === 0 ? styles.grow : undefined,
+				].filter(Boolean),
 				[
 					styles.row,
 					{
 						minHeight: dialogType === 'box' ? 32 : 0,
 					},
+					displayPosition.indexOf('top') === 0 ? styles.grow : undefined,
 				],
 			],
-			[dialogType],
+			[displayPosition, dialogType],
 		);
 	const dialogStyles: StyleProp<ViewStyle>[] = [
 		{
-			alignItems: 'center',
+			alignItems: 'stretch',
 			backgroundColor: dialogBackgroundColor,
 			justifyContent: 'center',
 			flex: 1,
@@ -148,36 +154,6 @@ export const Dialog = (): ReactElement<Modal> => {
 		windowWidth >= 768 ? (isRTL ? styles.rowReverse : styles.row) : styles.col,
 	);
 
-	switch (displayPosition) {
-		case 'bottom':
-		case 'bottom-left':
-		case 'bottom-right':
-			vDialogTop.push(styles.grow);
-			break;
-		case 'center':
-			break;
-		case 'top':
-		case 'top-left':
-		case 'top-right':
-			vDialogBottom.push(styles.grow);
-			break;
-	}
-
-	switch (displayPosition) {
-		case 'top-left':
-		case 'bottom-left':
-			hDialogRight.push(styles.grow);
-			break;
-		case 'top':
-		case 'center':
-		case 'bottom':
-			break;
-		case 'top-right':
-		case 'bottom-right':
-			hDialogLeft.push(styles.grow);
-			break;
-	}
-
 	useEffect(() => {
 		if (!open) {
 			return;
@@ -211,7 +187,8 @@ export const Dialog = (): ReactElement<Modal> => {
 			transparent={true}
 			visible={open}
 			onRequestClose={handleClose}
-			onLayout={handleLayoutChange}
+			presentationStyle="overFullScreen"
+			supportedOrientations={['portrait', 'landscape']}
 		>
 			<SafeAreaView style={[styles.container, dialogOverlay]}>
 				<View
@@ -299,10 +276,10 @@ export const Dialog = (): ReactElement<Modal> => {
 							) : null}
 						</View>
 						<Buttons
-							style={[
-								styles.buttons,
-								windowWidth >= 768 ? styles.dialogCol : styles.dialogRow,
-							]}
+							style={windowWidth >= 768 ? styles.dialogRow : styles.dialogCol}
+							buttonStyle={
+								windowWidth >= 768 ? styles.buttonRow : styles.buttonCol
+							}
 						/>
 						<CloseButton
 							testID="close-dialog"
@@ -353,14 +330,17 @@ const styles = StyleSheet.create({
 		width: '100%',
 	},
 	dialogContent: {
-		// flexShrink: 1,
+		flexGrow: 1,
+		flexShrink: 1,
 		justifyContent: 'center',
 		maxWidth: 1024,
 	},
-	buttons: {
-		alignItems: 'stretch',
-		gap: 8,
-		justifyContent: 'center',
+	buttonCol: {
+		maxWidth: Number.MAX_SAFE_INTEGER,
+	},
+	buttonRow: {
+		flexGrow: 0,
+		width: '100%',
 	},
 	categories: {
 		alignItems: 'flex-start',
@@ -383,8 +363,7 @@ const styles = StyleSheet.create({
 		display: 'flex',
 		gap: 16,
 		flex: 1,
-		paddingHorizontal: 40,
-		paddingVertical: 16,
+		padding: 28,
 	},
 	dialogBox: {
 		display: 'flex',
@@ -393,16 +372,20 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		margin: 'auto',
-		maxWidth: 320,
+		maxWidth: 1024,
+		padding: 28,
 	},
 	dialogRow: {
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-		width: '100%',
+		display: 'flex',
+		flexDirection: 'column',
 	},
 	dialogCol: {
+		display: 'flex',
 		flexDirection: 'column',
-		flexWrap: 'wrap',
+		alignItems: 'stretch',
+		flexWrap: 'nowrap',
+		width: '100%',
+		paddingVertical: 16,
 	},
 	grow: {
 		flex: 1,

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

@@ -1,3 +1,10 @@
+import React, {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+} from 'react';
 import {
 	ActivityIndicator,
 	FlatList,
@@ -11,51 +18,44 @@ import {
 	View,
 	type ViewStyle,
 } from 'react-native';
-import React, {
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-} from 'react';
 import Translator, { type LocalizedStrings } from '../../utils/Translator';
 
+import {
+	close,
+	SHOW_DRAWER,
+	showIabDisclosures,
+	showIabVendors,
+	toggleCategory,
+} from '../../actions';
+import { saveConsent, toggleDisclosure } from '../../commands';
 import {
 	AcceptAllButton,
-	Button,
 	RejectAllButton,
+	SaveButton,
 } from '../../components/Button';
-import type { Disclosure } from '../../types/store';
 import { Divider } from '../../components/Divider';
-import DrawerHeader from './Drawer.Header';
 import { ExpansionPanel } from '../../components/ExpansionPanel';
 import { Link } from '../../components/Link';
 import Locale from '../../components/Locale';
-import { OsanoPrivateContext } from '../../context';
 import StoragePolicyLink from '../../components/StoragePolicyLink';
 import Toggle from '../../components/Toggle';
-import { purposeMap } from '../../iab/tcf/constants';
-import useBoundCallback from '../../hooks/useBoundCallback';
-import { usePrevious } from '../../hooks/usePrevious';
 import {
-	type ConsentCategory as ConsentCategoryType,
 	ConsentCategory,
+	type ConsentCategory as ConsentCategoryType,
 } from '../../constants';
+import { OsanoPrivateContext } from '../../context';
+import useBoundCallback from '../../hooks/useBoundCallback';
+import { usePrevious } from '../../hooks/usePrevious';
+import { setSpecialFeatureConsent } from '../../iab/tcf/actions';
+import { purposeMap } from '../../iab/tcf/constants';
 import {
 	getCategoryDisclosures,
 	getStack,
 	isCategoryAccepted,
 	isCategoryDisabled,
 } from '../../selectors';
-import { saveConsent, toggleDisclosure } from '../../commands';
-import {
-	close,
-	showIabDisclosures,
-	showIabVendors,
-	toggleCategory,
-} from '../../actions';
-import { SHOW_DRAWER } from '../../actions';
-import { setSpecialFeatureConsent } from '../../iab/tcf/actions';
+import type { Disclosure } from '../../types/store';
+import DrawerHeader from './Drawer.Header';
 
 type ConsentCategoryItem = {
 	type: 'info' | 'category' | 'specialFeature';
@@ -517,7 +517,7 @@ const CategoryListFooter: React.FC = () => {
 
 	return (
 		<View style={[styles.listItem, styles.listFooter]}>
-			<Button title="buttons.save" onPress={handleSave} />
+			<SaveButton onPress={handleSave} />
 			<View style={styles.poweredBy}>
 				<Link href="https://www.osano.com/?utm_campaign=cmp&utm_source=cmp-dialog&utm_medium=drawer">
 					<Locale path="messaging.poweredBy" />

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

@@ -1,14 +1,14 @@
-import { Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
+import React, { useCallback, useContext, useMemo } from 'react';
 import {
-	type LayoutChangeEvent,
 	Platform,
-	type StyleProp,
 	StyleSheet,
 	Text,
-	type TextStyle,
 	View,
+	type LayoutChangeEvent,
+	type StyleProp,
+	type TextStyle,
 } from 'react-native';
-import React, { useCallback, useContext, useMemo } from 'react';
+import { Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
 
 import { BackButton } from '../../components/Button';
 import Locale from '../../components/Locale';
@@ -52,7 +52,7 @@ export const DrawerHeader: React.FC<DrawerHeaderType> = (props) => {
 			setHeaderHeight(height);
 			onHeaderLayoutChange && onHeaderLayoutChange(e);
 		},
-		[onHeaderLayoutChange]
+		[onHeaderLayoutChange],
 	);
 
 	return (

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

@@ -1,7 +1,7 @@
+import React, { useCallback, useContext, useMemo } from 'react';
 import {
 	FlatList,
 	type ListRenderItemInfo,
-	Platform,
 	type StyleProp,
 	StyleSheet,
 	Text,
@@ -10,21 +10,20 @@ import {
 	type ViewStyle,
 } from 'react-native';
 import type { GvlUrl, GvlVendor_v2, GvlVendor_v3 } from '../../iab/types';
-import React, { useCallback, useContext, useMemo } from 'react';
 import { getStack } from '../../selectors';
 
+import { SHOW_IAB_DISCLOSURES } from '../../actions';
+import { AcceptAllButton, RejectAllButton } from '../../components/Button';
 import { Divider } from '../../components/Divider';
-import DrawerHeader from './Drawer.Header';
 import { ExpansionPanel } from '../../components/ExpansionPanel';
 import { Link } from '../../components/Link';
 import Locale from '../../components/Locale';
-import { OsanoPrivateContext } from '../../context';
 import Toggle from '../../components/Toggle';
-import Translator from '../../utils/Translator';
-import { AcceptAllButton, RejectAllButton } from '../../components/Button';
-import { SHOW_IAB_DISCLOSURES } from '../../actions';
+import { OsanoPrivateContext } from '../../context';
 import useBoundCallback from '../../hooks/useBoundCallback';
 import { setVendorConsent } from '../../iab/tcf/actions';
+import Translator from '../../utils/Translator';
+import DrawerHeader from './Drawer.Header';
 
 const determineDataRetention = (
 	purposeDataRetention: Record<string, number>,
@@ -461,11 +460,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 +473,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 +496,8 @@ export const IabVendorsDrawer: React.FC = () => {
 	return (
 		<View style={styles.renderItem}>
 			{ListHeaderComponent}
-			<AcceptAllButton disabled={false}/>
-			<RejectAllButton disabled={false}/>
+			<AcceptAllButton disabled={false} />
+			<RejectAllButton disabled={false} />
 			<FlatList
 				data={vendors}
 				ListFooterComponent={<View style={styles.listFooter} />}

package/src/views/Drawer/index.tsx

@@ -1,38 +1,38 @@
+import React, {
+	useCallback,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'react';
 import {
 	Animated,
 	Easing,
+	type GestureResponderEvent,
 	type LayoutChangeEvent,
 	Modal,
+	type NativePointerEvent,
+	type NativeSyntheticEvent,
 	Platform,
 	SafeAreaView,
 	type StyleProp,
 	StyleSheet,
 	type ViewStyle,
-	type NativeSyntheticEvent,
-	type GestureResponderEvent,
-	type NativePointerEvent,
 } from 'react-native';
-import React, {
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { close } from '../../actions';
-import { getStack } from '../../selectors';
 import {
+	close,
 	SHOW_DRAWER,
 	SHOW_IAB_DISCLOSURES,
 	SHOW_IAB_VENDORS,
 } from '../../actions';
+import { getStack } from '../../selectors';
 
 import { CloseButton } from '../../components/Button';
+import { OsanoPrivateContext } from '../../context';
+import Translator from '../../utils/Translator';
 import ConsentCategoriesDrawer from './Drawer.ConsentCategories';
 import IabDisclosuresDrawer from './Drawer.Iab.Disclosures';
 import IabVendorsDrawer from './Drawer.Iab.Vendors';
-import { OsanoPrivateContext } from '../../context';
-import Translator from '../../utils/Translator';
 
 type DrawerProps = React.PropsWithChildren<object>;
 
@@ -58,6 +58,11 @@ export const Drawer: React.FC<DrawerProps> = () => {
 	const state = getState();
 	const stack = getStack(state);
 	const isRTL = Translator.isRTL(locale);
+	// Determine TCF applicability using the same logic as the config getter
+	const useTcf =
+		config &&
+		(config.gdprApplies || config.isBrowsingFromCountry('ca')) &&
+		config.iabEnabled;
 
 	const initialPositionX = Platform.OS === 'web' ? 0 : 1;
 
@@ -76,12 +81,12 @@ export const Drawer: React.FC<DrawerProps> = () => {
 							Platform.OS === 'web'
 								? maxWebDrawerWidth
 								: Number.MAX_SAFE_INTEGER,
-							width
+							width,
 						)
 					: width;
 			setLayoutWidth(newWidth);
 		},
-		[initialPositionX]
+		[initialPositionX],
 	);
 
 	const drawerRange = useMemo(
@@ -91,7 +96,7 @@ export const Drawer: React.FC<DrawerProps> = () => {
 			extrapolateLeft: 'clamp' as Animated.ExtrapolateType,
 			extrapolateRight: 'clamp' as Animated.ExtrapolateType,
 		}),
-		[layoutWidth, infoDialogPosition]
+		[layoutWidth, infoDialogPosition],
 	);
 
 	useLayoutEffect(() => {
@@ -107,45 +112,54 @@ export const Drawer: React.FC<DrawerProps> = () => {
 			toValue: stack.indexOf(SHOW_DRAWER) >= 0 ? 1 : 0,
 			useNativeDriver: Platform.OS !== 'web',
 		}).start();
-		Animated.timing(vendor.current, {
-			easing,
-			duration: 400,
-			toValue: stack.indexOf(SHOW_IAB_VENDORS) >= 0 ? 1 : 0,
-			useNativeDriver: Platform.OS !== 'web',
-		}).start();
-		Animated.timing(disclosure.current, {
-			easing,
-			duration: 400,
-			toValue: stack.indexOf(SHOW_IAB_DISCLOSURES) >= 0 ? 1 : 0,
-			useNativeDriver: Platform.OS !== 'web',
-		}).start();
+		// Only animate IAB-related views when TCF is applicable
+		if (useTcf) {
+			Animated.timing(vendor.current, {
+				easing,
+				duration: 400,
+				toValue: stack.indexOf(SHOW_IAB_VENDORS) >= 0 ? 1 : 0,
+				useNativeDriver: Platform.OS !== 'web',
+			}).start();
+			Animated.timing(disclosure.current, {
+				easing,
+				duration: 400,
+				toValue: stack.indexOf(SHOW_IAB_DISCLOSURES) >= 0 ? 1 : 0,
+				useNativeDriver: Platform.OS !== 'web',
+			}).start();
+		}
 		if (Platform.OS !== 'web') {
 			// Since native devices use a slide animation, we need to make the active stack item visible during the slide
 			if (stack.length === 0) {
 				category.current.setValue(1);
-				vendor.current.setValue(1);
-				disclosure.current.setValue(1);
+				if (useTcf) {
+					vendor.current.setValue(1);
+					disclosure.current.setValue(1);
+				}
 			} else if (stack.length === 1) {
 				switch (stack.at(-1)) {
 					case SHOW_DRAWER:
 						category.current.setValue(1);
 						break;
 					case SHOW_IAB_VENDORS:
-						vendor.current.setValue(1);
+						if (useTcf) {
+							vendor.current.setValue(1);
+						}
 						break;
 					case SHOW_IAB_DISCLOSURES:
-						disclosure.current.setValue(1);
+						if (useTcf) {
+							disclosure.current.setValue(1);
+						}
 						break;
 				}
 			}
 		}
-	}, [stack.length]);
+	}, [stack.length, useTcf]);
 	const handleClose = useCallback(
 		(
 			e:
 				| NativeSyntheticEvent<NativePointerEvent>
 				| PointerEvent
-				| GestureResponderEvent
+				| GestureResponderEvent,
 		) => {
 			if (e && e.target) {
 				if (e.target === overlayRef.current) {
@@ -155,7 +169,7 @@ export const Drawer: React.FC<DrawerProps> = () => {
 				dispatch(close(cmp));
 			}
 		},
-		[]
+		[],
 	);
 	const drawerStyles = useMemo(() => {
 		return {
@@ -196,6 +210,7 @@ export const Drawer: React.FC<DrawerProps> = () => {
 			visible={stack.length > 0}
 			onRequestClose={handleClose}
 			transparent={Platform.OS === 'web' ? true : false}
+			supportedOrientations={['portrait', 'landscape']}
 		>
 			<SafeAreaView
 				ref={overlayRef}
@@ -219,34 +234,38 @@ export const Drawer: React.FC<DrawerProps> = () => {
 				>
 					<ConsentCategoriesDrawer />
 				</Animated.View>
-				<Animated.View
-					style={[
-						styles.drawer,
-						anchor,
-						drawerStyles,
-						{
-							transform: [
-								{ translateX: vendor.current.interpolate(drawerRange) },
-							],
-						},
-					]}
-				>
-					<IabVendorsDrawer />
-				</Animated.View>
-				<Animated.View
-					style={[
-						styles.drawer,
-						anchor,
-						drawerStyles,
-						{
-							transform: [
-								{ translateX: disclosure.current.interpolate(drawerRange) },
-							],
-						},
-					]}
-				>
-					<IabDisclosuresDrawer />
-				</Animated.View>
+				{useTcf && (
+					<Animated.View
+						style={[
+							styles.drawer,
+							anchor,
+							drawerStyles,
+							{
+								transform: [
+									{ translateX: vendor.current.interpolate(drawerRange) },
+								],
+							},
+						]}
+					>
+						<IabVendorsDrawer />
+					</Animated.View>
+				)}
+				{useTcf && (
+					<Animated.View
+						style={[
+							styles.drawer,
+							anchor,
+							drawerStyles,
+							{
+								transform: [
+									{ translateX: disclosure.current.interpolate(drawerRange) },
+								],
+							},
+						]}
+					>
+						<IabDisclosuresDrawer />
+					</Animated.View>
+				)}
 				<Animated.View
 					style={[
 						styles.close,