@osano/osano-cmp-react-native 0.13.0 → 0.15.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,66 +122,28 @@ 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',
 			backgroundColor: dialogBackgroundColor,
-			justifyContent: 'center',
-			flex: 1,
-			// flexGrow: 1,
-			// flexShrink: 1,
+			maxWidth: 1024,
+			width: '100%',
+			borderRadius: dialogType === 'box' ? 8 : 0,
+			padding: 28,
 		},
 	];
 
-	dialogStyles.push(
-		Platform.OS === 'web' && dialogType === 'box'
-			? styles.dialogBox
-			: styles.dialogBar,
-	);
-	dialogStyles.push(
-		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,123 +177,98 @@ export const Dialog = (): ReactElement<Modal> => {
 			transparent={true}
 			visible={open}
 			onRequestClose={handleClose}
-			onLayout={handleLayoutChange}
+			presentationStyle="overFullScreen"
+			supportedOrientations={['portrait', 'landscape']}
 		>
-			<SafeAreaView style={[styles.container, dialogOverlay]}>
-				<View
-					style={vDialogTop}
-					onPointerUp={handleClose}
-					onTouchEnd={handleClose}
-					onResponderRelease={handleClose}
-				/>
-				<View style={[styles.row, styles.fullWidth, styles.fitContent]}>
-					<View
-						style={hDialogLeft}
-						onPointerUp={handleClose}
-						onTouchEnd={handleClose}
-						onResponderRelease={handleClose}
-					/>
-					<View style={dialogStyles}>
-						<View style={styles.dialogContent}>
-							<View style={[styles.row, styles.fitContent]}>
-								<Text style={dialogForeground} testID="dialog-message">
-									<Message />
-									<Text> </Text>
-									<StoragePolicyLink
-										testID="dialog-policy-link-1"
-										policyLinkText={config?.policyLinkText}
-										href={config?.storagePolicyHref}
-									/>
-									{config?.additionalLinks &&
-									config?.additionalLinks?.length >= 1 ? (
-										<Text> | </Text>
-									) : null}
-									<StoragePolicyLink
-										testID="dialog-policy-link-2"
-										policyLinkText={config?.additionalLinks?.at(0)?.at(0)}
-										href={config?.additionalLinks?.at(0)?.at(1)}
-									/>
-								</Text>
-							</View>
-							{isFirstLayerUsageRequired ? (
-								<View
-									testID="first-layer-usage"
-									style={[
-										styles.row,
-										styles.categories,
-										isRTL ? styles.hRight : styles.hLeft,
-									]}
-								>
-									<FirstLayerUsage />
-								</View>
-							) : null}
-							{useTcf || config?.showManagePreferencesLinkInDialog ? (
-								<View
-									testID="preference-management-deep-links"
-									style={[
-										styles.row,
-										styles.categories,
-										isRTL ? styles.hRight : styles.hLeft,
-									]}
-								>
-									<PreferenceManagementDeepLinks />
-								</View>
-							) : null}
-							{(useTcf && !config?.showManagePreferencesButtonInDialog) ||
-							config?.showFirstLayerCategories ? (
-								<View
-									testID="show-first-layer-categories"
-									style={[
-										styles.col,
-										styles.categories,
-										isRTL ? styles.hRight : styles.hLeft,
-									]}
-								>
-									{categories.map((category) => (
-										<Toggle
-											align="left"
-											key={category}
-											onValueChange={handleToggleCategory(category)}
-											value={getConsent(state, category)}
-										>
-											<Text style={dialogForeground}>
-												<Locale path={`categories.${category}.label`} />
-											</Text>
-										</Toggle>
-									))}
-								</View>
-							) : null}
+			<View style={[styles.modalContainer, dialogOverlay]}>
+				<View style={dialogStyles}>
+					<View style={styles.dialogContent}>
+						<View style={[styles.row, styles.fitContent]}>
+							<Text style={dialogForeground} testID="dialog-message">
+								<Message />
+								<Text> </Text>
+								<StoragePolicyLink
+									testID="dialog-policy-link-1"
+									policyLinkText={config?.policyLinkText}
+									href={config?.storagePolicyHref}
+								/>
+								{config?.additionalLinks &&
+								config?.additionalLinks?.length >= 1 ? (
+									<Text> | </Text>
+								) : null}
+								<StoragePolicyLink
+									testID="dialog-policy-link-2"
+									policyLinkText={config?.additionalLinks?.at(0)?.at(0)}
+									href={config?.additionalLinks?.at(0)?.at(1)}
+								/>
+							</Text>
 						</View>
-						<Buttons
-							style={[
-								styles.buttons,
-								windowWidth >= 768 ? styles.dialogCol : styles.dialogRow,
-							]}
-						/>
-						<CloseButton
-							testID="close-dialog"
-							onPress={handleClose}
-							style={[
-								styles.close,
-								isRTL ? styles.closeLeft : styles.closeRight,
-							]}
-							color={dialogForegroundColor}
-						/>
+						{isFirstLayerUsageRequired ? (
+							<View
+								testID="first-layer-usage"
+								style={[
+									styles.row,
+									styles.categories,
+									isRTL ? styles.hRight : styles.hLeft,
+								]}
+							>
+								<FirstLayerUsage />
+							</View>
+						) : null}
+						{useTcf || config?.showManagePreferencesLinkInDialog ? (
+							<View
+								testID="preference-management-deep-links"
+								style={[
+									styles.row,
+									styles.categories,
+									isRTL ? styles.hRight : styles.hLeft,
+								]}
+							>
+								<PreferenceManagementDeepLinks />
+							</View>
+						) : null}
+						{(useTcf && !config?.showManagePreferencesButtonInDialog) ||
+						config?.showFirstLayerCategories ? (
+							<View
+								testID="show-first-layer-categories"
+								style={[
+									styles.col,
+									styles.categories,
+									isRTL ? styles.hRight : styles.hLeft,
+								]}
+							>
+								{categories.map((category) => (
+									<Toggle
+										align="left"
+										key={category}
+										onValueChange={handleToggleCategory(category)}
+										value={getConsent(state, category)}
+									>
+										<Text style={dialogForeground}>
+											<Locale path={`categories.${category}.label`} />
+										</Text>
+									</Toggle>
+								))}
+							</View>
+						) : null}
 					</View>
-					<View
-						style={hDialogRight}
-						onPointerUp={handleClose}
-						onTouchEnd={handleClose}
-						onResponderRelease={handleClose}
+					<Buttons
+						style={windowWidth >= 768 ? styles.dialogRow : styles.dialogCol}
+						buttonStyle={
+							windowWidth >= 768 ? styles.buttonRow : styles.buttonCol
+						}
+					/>
+					<CloseButton
+						testID="close-dialog"
+						onPress={handleClose}
+						style={[
+							styles.close,
+							isRTL ? styles.closeLeft : styles.closeRight,
+						]}
+						color={dialogForegroundColor}
 					/>
 				</View>
-				<View
-					style={vDialogBottom}
-					onPointerUp={handleClose}
-					onTouchEnd={handleClose}
-					onResponderRelease={handleClose}
-				/>
-			</SafeAreaView>
+			</View>
 		</Modal>
 	);
 };
@@ -335,6 +276,14 @@ export const Dialog = (): ReactElement<Modal> => {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	modalContainer: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		padding: 20,
 	},
 	close: {
 		margin: 4,
@@ -352,15 +301,20 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		width: '100%',
 	},
-	dialogContent: {
-		// flexShrink: 1,
+	dialogWrapper: {
+		flex: 1,
+		alignItems: 'center',
 		justifyContent: 'center',
-		maxWidth: 1024,
 	},
-	buttons: {
-		alignItems: 'stretch',
-		gap: 8,
-		justifyContent: 'center',
+	dialogContent: {
+		marginBottom: 16,
+	},
+	buttonCol: {
+		maxWidth: Number.MAX_SAFE_INTEGER,
+	},
+	buttonRow: {
+		flexGrow: 0,
+		width: '100%',
 	},
 	categories: {
 		alignItems: 'flex-start',
@@ -383,26 +337,28 @@ const styles = StyleSheet.create({
 		display: 'flex',
 		gap: 16,
 		flex: 1,
-		paddingHorizontal: 40,
-		paddingVertical: 16,
+		padding: 28,
 	},
 	dialogBox: {
 		display: 'flex',
 		gap: 16,
-		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		margin: 'auto',
-		maxWidth: 320,
+		maxWidth: 1024,
+		padding: 28,
+		borderRadius: 8,
 	},
 	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,
@@ -435,4 +391,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Dialog;
+export default Dialog;

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 (
@@ -136,4 +136,4 @@ const styles = StyleSheet.create({
 		writingDirection: 'rtl',
 		flexDirection: 'row-reverse',
 	},
-});
+});

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

@@ -164,7 +164,7 @@ const IabDisclosureListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 const ListItemRenderer = ({
 	item,
 }: ListRenderItemInfo<
-	(IabDisclosureType & { id: number; type: string }) | number
+	(IabDisclosureType & { id: number; type: string; key: string }) | number
 >) => {
 	if (typeof item === 'number') {
 		return (
@@ -174,7 +174,9 @@ const ListItemRenderer = ({
 		);
 	}
 
-	return <IabDisclosureItem {...item} />;
+	// Extract key from item and pass other props
+	const { key, ...itemProps } = item;
+	return <IabDisclosureItem key={key} {...itemProps} />;
 };
 
 const termAssign = (
@@ -196,6 +198,7 @@ export const IabDisclosuresDrawer: React.FC = () => {
 			| (IabDisclosureType & {
 					id: number;
 					type: string;
+					key: string;
 			  })
 		>
 	> | null = useRef(null);
@@ -321,7 +324,7 @@ export const IabDisclosuresDrawer: React.FC = () => {
 	]);
 
 	const disclosures: (
-		| (IabDisclosureType & { id: number; type: string })
+		| (IabDisclosureType & { id: number; type: string; key: string })
 		| number
 	)[] = useMemo(() => {
 		return [