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

package/src/services/consent.ts

@@ -1,22 +1,30 @@
-import { sha512 } from 'js-sha512';
-import { Platform } from 'react-native';
-import { TextEncoder } from 'text-encoding';
-import type { ConsentManager } from '../ConsentManager';
 import {
 	ConsentCategory,
 	ConsentCategory as ConsentCategoryType,
 	env,
 } from '../constants';
+import { NativeModules, Platform } from 'react-native';
 import { clearStorage, getStorage, setStorage } from '../native/OsanoCmp';
+
+import API from '../utils/API';
 import type { Config } from '../types/consent-config';
+import type { ConsentManager } from '../ConsentManager';
+import { TextEncoder } from 'text-encoding';
 import { merge } from '../utils';
-import API from '../utils/API';
 import { osanoLogger } from '../utils/OsanoLogger';
+import { sha512 } from 'js-sha512';
 
 const Buffer = require('buffer').Buffer;
 
 const { CONSENT_URI, LOOKUPS_URI, OSANO_ORIGIN } = env;
 
+const IS_OFFICIAL_SAMPLE: boolean = (NativeModules as any)?.OsanoCmpSdk
+	?.IS_OFFICIAL_SAMPLE;
+
+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',
@@ -52,13 +60,14 @@ function createConsentPayload(
 	cmp: ConsentManager,
 	consent?: ConsentCategoryType[],
 ): ConsentPayload {
+	osanoLogger.debug(`Consenting Platform: ${CONSENTING_PLATFORM_TAG}`);
 	return Object.fromEntries(
 		Object.entries({
 			customerId: cmp.customerId,
 			configId: cmp.configId,
 			consented: consent ?? cmp.consent,
 			consentingDomain: cmp.consentingDomain,
-			consentingPlatform: `${Platform.OS}.react-native`,
+			consentingPlatform: CONSENTING_PLATFORM_TAG,
 			deviceId: cmp.deviceId,
 			extUsrData: cmp.extUsrData,
 		}).filter(([, value]) => value !== undefined),
@@ -81,7 +90,7 @@ function createConsentRecordPayload(
 			osnoConfigId: cmp.configId,
 			consented: consentedCategories.join(','),
 			consentingDomain: cmp.consentingDomain,
-			consentingPlatform: `${Platform.OS}.react-native`,
+			consentingPlatform: CONSENTING_PLATFORM_TAG,
 			userConsentId: cmp.deviceId,
 			extUsrData: hashedExtUsrData,
 		}).filter(([, value]) => value !== undefined),
@@ -100,24 +109,19 @@ const storeConsent = async (
 			resolve(cmp.consent ?? []);
 			return cmp.consent;
 		};
-		switch (Platform.OS) {
-			case 'ios':
-			case 'android':
+		setStorage(
+			`${STORAGE_KEY}_last_recorded_consent_date`,
+			JSON.stringify(new Date()),
+		)
+			.then(() => {
 				setStorage(
-					`${STORAGE_KEY}_last_recorded_consent_date`,
-					JSON.stringify(new Date()),
+					`${STORAGE_KEY}_${cmp.configId}`,
+					JSON.stringify(cmp.consent),
 				)
-					.then(() => {
-						setStorage(
-							`${STORAGE_KEY}_${cmp.configId}`,
-							JSON.stringify(cmp.consent),
-						)
-							.then(resConsent)
-							.catch(reject);
-					})
+					.then(resConsent)
 					.catch(reject);
-				break;
-		}
+			})
+			.catch(reject);
 	});
 };
 
@@ -128,14 +132,7 @@ export const clearConsent = async (cmp: ConsentManager) => {
 			resolve([ConsentCategory.ESSENTIAL]);
 			return cmp.consent;
 		};
-		switch (Platform.OS) {
-			case 'android':
-			case 'ios':
-				clearStorage(`${STORAGE_KEY}_${cmp.configId}`).then(resConsent);
-				break;
-			default:
-				break;
-		}
+		clearStorage(`${STORAGE_KEY}_${cmp.configId}`).then(resConsent);
 	});
 };
 
@@ -154,19 +151,12 @@ const retrieveConsent = async (cmp: ConsentManager) => {
 			}
 			throw new Error('Consent not found');
 		};
-		switch (Platform.OS) {
-			case 'ios':
-			case 'android':
-				getStorage(`${STORAGE_KEY}_${cmp.configId}`)
-					.then(resConsent)
-					.catch(() => {
-						// Consent not found
-						clearConsent(cmp).then(resolve);
-					});
-				break;
-			default:
-				break;
-		}
+		getStorage(`${STORAGE_KEY}_${cmp.configId}`)
+			.then(resConsent)
+			.catch(() => {
+				// Consent not found
+				clearConsent(cmp).then(resolve);
+			});
 	});
 };
 
@@ -182,15 +172,7 @@ const retrieveLastConsentTimestamp = async () => {
 				return '';
 			}
 		};
-		switch (Platform.OS) {
-			case 'ios':
-			case 'android':
-				getStorage(`${STORAGE_KEY}_last_recorded_consent_date`).then(resValue);
-				break;
-			default:
-				// nothing
-				break;
-		}
+		getStorage(`${STORAGE_KEY}_last_recorded_consent_date`).then(resValue);
 	});
 };
 

package/src/types/index.d.ts

@@ -27,9 +27,9 @@ export interface OsanoProps {
 	hideUI?: boolean;
 	hideDisclosures?: boolean;
 	onConfigLoadSuccess?: () => void;
-	onConfigLoadFailure?: () => void;
+	onConfigLoadFailure?: (err: Error) => void;
 	onLangLoadSuccess?: () => void;
-	onLangLoadFailure?: () => void;
+	onLangLoadFailure?: (err: Error) => void;
 	onGoogleConsentUpdate?: GoogleConsentModeCallback;
 	overrides?: OsanoOverrides;
 	extUsrData?: string;

package/src/utils/Translator.ts

@@ -103,7 +103,7 @@ export default class Translator extends EventEmitter {
 	load(
 		desiredLocale?: string,
 		onLangLoadSuccess?: () => void,
-		onLangLoadFailure?: () => void,
+		onLangLoadFailure?: (err: Error) => void,
 	): Promise<PromiseSettledResult<string | undefined>[]> {
 		const allLocales = desiredLocale
 			? Translator.fallbackLanguages(

package/src/views/Dialog/Buttons.tsx

@@ -1,3 +1,5 @@
+import React, { useContext, useMemo } from 'react';
+import { StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native';
 import {
 	AcceptAllButton,
 	AcceptButton,
@@ -6,24 +8,27 @@ import {
 	RejectAllButton,
 	SaveButton,
 } from '../../components/Button';
-import React, { useContext } from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
-
 import { OsanoPrivateContext } from '../../context';
 import { isDialogOpen } from '../../selectors';
 
-export const Buttons: React.FC<ViewProps> = (props) => {
+export const Buttons: React.FC<ViewProps & { buttonStyle?: ViewStyle }> = (
+	props,
+) => {
 	const { style } = props;
 	const { config, getState } = useContext(OsanoPrivateContext);
 
 	const state = getState();
 	const disabled = !isDialogOpen(state);
+	const buttonStyle = useMemo(
+		() => [styles.button, props.buttonStyle],
+		[props.buttonStyle],
+	);
 
 	// Button Group 1
 	if (config?.isConsentImplied) {
 		return config.forceManagePreferencesButton ? (
-			<View style={style}>
-				<ManagePreferencesButton disabled={disabled} style={styles.fullWidth} />
+			<View style={[styles.container, style]}>
+				<ManagePreferencesButton disabled={disabled} style={buttonStyle} />
 			</View>
 		) : null;
 	}
@@ -31,41 +36,46 @@ export const Buttons: React.FC<ViewProps> = (props) => {
 	// Button Group 2
 	if (config?.tcfIsApplicable || config?.isButtonGroupTwo) {
 		return (
-			<View style={style}>
+			<View style={[styles.container, style]}>
 				{config.showManagePreferencesButtonInDialog ? (
-					<ManagePreferencesButton
-						disabled={disabled}
-						style={styles.fullWidth}
-					/>
+					<ManagePreferencesButton disabled={disabled} style={buttonStyle} />
 				) : (
-					<SaveButton disabled={disabled} style={styles.fullWidth} />
+					<SaveButton disabled={disabled} style={buttonStyle} />
 				)}
-				<AcceptAllButton disabled={disabled} style={styles.fullWidth} />
+				<AcceptAllButton disabled={disabled} style={buttonStyle} />
 				{config.rejectAllRequired ? (
-					<RejectAllButton disabled={disabled} style={styles.fullWidth} />
+					<RejectAllButton disabled={disabled} style={buttonStyle} />
 				) : null}
 			</View>
 		);
 	}
 
+	// Default button group
 	return (
-		<View style={style}>
-			<AcceptButton disabled={disabled} style={styles.fullWidth} />
-			<DenyButton disabled={disabled} style={styles.fullWidth} />
+		<View style={[styles.container, style]}>
+			<AcceptButton disabled={disabled} style={buttonStyle} />
+			<DenyButton disabled={disabled} style={buttonStyle} />
 			{config?.rejectAllRequired ? (
-				<RejectAllButton disabled={disabled} style={styles.fullWidth} />
+				<RejectAllButton disabled={disabled} style={buttonStyle} />
 			) : null}
 			{config?.forceManagePreferencesButton ? (
-				<ManagePreferencesButton disabled={disabled} style={styles.fullWidth} />
+				<ManagePreferencesButton disabled={disabled} style={buttonStyle} />
 			) : null}
 		</View>
 	);
 };
 
-export default Buttons;
-
 const styles = StyleSheet.create({
-	fullWidth: {
-		flexBasis: '100%',
+	container: {
+		justifyContent: 'center',
+		alignItems: 'center',
+		gap: 8,
+	},
+	button: {
+		flex: 1,
+		minWidth: 120,
+		maxWidth: 200,
 	},
 });
+
+export default Buttons;

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 (