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

package/src/views/Dialog/Buttons.tsx

@@ -78,4 +78,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Buttons;
+export default Buttons;

package/src/views/Dialog/index.tsx

@@ -122,38 +122,28 @@ export const Dialog = (): ReactElement<Modal> => {
 					{
 						minHeight: dialogType === 'box' ? 32 : 0,
 					},
-					displayPosition.indexOf('bottom') === 0 ? styles.grow : undefined,
+					displayPosition.indexOf('bottom') >= 0 ? styles.grow : undefined,
 				].filter(Boolean),
 				[
 					styles.row,
 					{
 						minHeight: dialogType === 'box' ? 32 : 0,
 					},
-					displayPosition.indexOf('top') === 0 ? styles.grow : undefined,
+					displayPosition.indexOf('top') >= 0 ? styles.grow : undefined,
 				],
 			],
 			[displayPosition, dialogType],
 		);
 	const dialogStyles: StyleProp<ViewStyle>[] = [
 		{
-			alignItems: 'stretch',
 			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,
-	);
-
 	useEffect(() => {
 		if (!open) {
 			return;
@@ -190,121 +180,95 @@ export const Dialog = (): ReactElement<Modal> => {
 			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={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}
-						/>
+						{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>
 	);
 };
@@ -312,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,
@@ -329,11 +301,13 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		width: '100%',
 	},
-	dialogContent: {
-		flexGrow: 1,
-		flexShrink: 1,
+	dialogWrapper: {
+		flex: 1,
+		alignItems: 'center',
 		justifyContent: 'center',
-		maxWidth: 1024,
+	},
+	dialogContent: {
+		marginBottom: 16,
 	},
 	buttonCol: {
 		maxWidth: Number.MAX_SAFE_INTEGER,
@@ -368,12 +342,11 @@ const styles = StyleSheet.create({
 	dialogBox: {
 		display: 'flex',
 		gap: 16,
-		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		margin: 'auto',
 		maxWidth: 1024,
 		padding: 28,
+		borderRadius: 8,
 	},
 	dialogRow: {
 		display: 'flex',
@@ -418,4 +391,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default Dialog;
+export default Dialog;

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

@@ -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 [

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,20 +10,21 @@ 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 Toggle from '../../components/Toggle';
 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 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>,
@@ -460,7 +461,11 @@ 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} />;
@@ -473,7 +478,10 @@ 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]);
 
@@ -496,8 +504,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

@@ -58,11 +58,6 @@ 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;
 
@@ -112,48 +107,39 @@ export const Drawer: React.FC<DrawerProps> = () => {
 			toValue: stack.indexOf(SHOW_DRAWER) >= 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();
-		}
+		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);
-				if (useTcf) {
-					vendor.current.setValue(1);
-					disclosure.current.setValue(1);
-				}
+				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:
-						if (useTcf) {
-							vendor.current.setValue(1);
-						}
+						vendor.current.setValue(1);
 						break;
 					case SHOW_IAB_DISCLOSURES:
-						if (useTcf) {
-							disclosure.current.setValue(1);
-						}
+						disclosure.current.setValue(1);
 						break;
 				}
 			}
 		}
-	}, [stack.length, useTcf]);
+	}, [stack.length]);
 	const handleClose = useCallback(
 		(
 			e:
@@ -234,38 +220,34 @@ export const Drawer: React.FC<DrawerProps> = () => {
 				>
 					<ConsentCategoriesDrawer />
 				</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.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>
 				<Animated.View
 					style={[
 						styles.close,

package/android/src/main/AndroidManifestNew.xml

@@ -1,2 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-</manifest>

package/lib/commonjs/NativeOsanoCmpSdk.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _default = exports.default = _reactNative.TurboModuleRegistry ? _reactNative.TurboModuleRegistry.getEnforcing('OsanoCmpSdk') : {
-  // Fallback for environments without TurboModule support (eg. RNWeb)
-  getDeviceId: async () => {
-    // TODO: Implement a fallback mechanism for getting device ID
-    return '';
-  },
-  setStorage: async (key, value) => {
-    try {
-      window.localStorage.setItem(key, value);
-    } catch (e) {}
-    return value;
-  },
-  getStorage: async key => {
-    try {
-      return window.localStorage.getItem(key);
-    } catch (e) {
-      return '';
-    }
-  },
-  clearStorage: async key => {
-    try {
-      window.localStorage.removeItem(key);
-    } catch (e) {}
-  },
-  setStorageToDefault: async (key, value) => {
-    try {
-      window.localStorage.setItem(key, value);
-    } catch (e) {}
-    return value;
-  },
-  setIntStorageToDefault: async (key, value) => {
-    try {
-      window.localStorage.setItem(key, `${value}`);
-    } catch (e) {}
-    return value;
-  },
-  setBoolStorageToDefault: async (key, value) => {
-    try {
-      window.localStorage.setItem(key, value ? 'true' : '');
-    } catch (e) {}
-    return value;
-  },
-  clearStorageFromDefault: async key => {
-    try {
-      window.localStorage.removeItem(key);
-    } catch (e) {}
-  }
-};
-//# sourceMappingURL=NativeOsanoCmpSdk.js.map

package/lib/commonjs/NativeOsanoCmpSdk.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_default","exports","default","TurboModuleRegistry","getEnforcing","getDeviceId","setStorage","key","value","window","localStorage","setItem","e","getStorage","getItem","clearStorage","removeItem","setStorageToDefault","setIntStorageToDefault","setBoolStorageToDefault","clearStorageFromDefault"],"sourceRoot":"../../src","sources":["NativeOsanoCmpSdk.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAAmD,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAapCC,gCAAmB,GAC/BA,gCAAmB,CAACC,YAAY,CAAO,aAAa,CAAC,GAC/C;EACN;EACAC,WAAW,EAAE,MAAAA,CAAA,KAAY;IACxB;IACA,OAAO,EAAE;EACV,CAAC;EACDC,UAAU,EAAE,MAAAA,CAAOC,GAAG,EAAEC,KAAK,KAAK;IACjC,IAAI;MACHC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACJ,GAAG,EAAEC,KAAK,CAAC;IACxC,CAAC,CAAC,OAAOI,CAAC,EAAE,CAAC;IACb,OAAOJ,KAAK;EACb,CAAC;EACDK,UAAU,EAAE,MAAON,GAAG,IAAK;IAC1B,IAAI;MACH,OAAOE,MAAM,CAACC,YAAY,CAACI,OAAO,CAACP,GAAG,CAAC;IACxC,CAAC,CAAC,OAAOK,CAAC,EAAE;MACX,OAAO,EAAE;IACV;EACD,CAAC;EACDG,YAAY,EAAE,MAAOR,GAAG,IAAK;IAC5B,IAAI;MACHE,MAAM,CAACC,YAAY,CAACM,UAAU,CAACT,GAAG,CAAC;IACpC,CAAC,CAAC,OAAOK,CAAC,EAAE,CAAC;EACd,CAAC;EACDK,mBAAmB,EAAE,MAAAA,CAAOV,GAAG,EAAEC,KAAK,KAAK;IAC1C,IAAI;MACHC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACJ,GAAG,EAAEC,KAAK,CAAC;IACxC,CAAC,CAAC,OAAOI,CAAC,EAAE,CAAC;IACb,OAAOJ,KAAK;EACb,CAAC;EACDU,sBAAsB,EAAE,MAAAA,CAAOX,GAAG,EAAEC,KAAK,KAAK;IAC7C,IAAI;MACHC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACJ,GAAG,EAAE,GAAGC,KAAK,EAAE,CAAC;IAC7C,CAAC,CAAC,OAAOI,CAAC,EAAE,CAAC;IACb,OAAOJ,KAAK;EACb,CAAC;EACDW,uBAAuB,EAAE,MAAAA,CAAOZ,GAAG,EAAEC,KAAK,KAAK;IAC9C,IAAI;MACHC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACJ,GAAG,EAAEC,KAAK,GAAG,MAAM,GAAG,EAAE,CAAC;IACtD,CAAC,CAAC,OAAOI,CAAC,EAAE,CAAC;IACb,OAAOJ,KAAK;EACb,CAAC;EACDY,uBAAuB,EAAE,MAAOb,GAAG,IAAK;IACvC,IAAI;MACHE,MAAM,CAACC,YAAY,CAACM,UAAU,CAACT,GAAG,CAAC;IACpC,CAAC,CAAC,OAAOK,CAAC,EAAE,CAAC;EACd;AACD,CAAC","ignoreList":[]}

package/lib/commonjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}