@osano/osano-cmp-react-native 0.1.0

package/src/ConsentUiBuilder.tsx

@@ -0,0 +1,117 @@
+import {
+	type GetState,
+	type MiddlewareNext,
+	type Store,
+	type ThunkDispatch,
+} from './hooks/useThunkReducer';
+import { type OsanoAction, type OsanoState } from './types/store';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ConsentManager } from './ConsentManager';
+import { Dialog } from './views/Dialog';
+import { Drawer } from './views/Drawer';
+import { OsanoPrivateContext } from './context';
+import { createSharedStyles } from './styles';
+import { setConfig } from './store';
+
+export const ConsentUiBuilder: React.FC<{
+	addMiddleware: (
+		m: (
+			store: Store<OsanoState, OsanoAction>
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
+	) => void;
+	cmp: React.MutableRefObject<ConsentManager>;
+	dispatch: ThunkDispatch<OsanoState, OsanoAction, any>;
+	getState: GetState<OsanoState>;
+	hideDisclosures: boolean;
+	removeMiddleware: (
+		m: (
+			store: Store<OsanoState, OsanoAction>
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
+	) => void;
+}> = (props): React.ReactElement<View> => {
+	const {
+		addMiddleware,
+		cmp,
+		dispatch,
+		getState,
+		hideDisclosures,
+		removeMiddleware,
+	} = props;
+	const { disclosures, stack } = getState();
+
+	const handleTranslate = useCallback(
+		(
+			path: string | string[],
+			translationProps = {},
+			defaultPhrase?: string
+		) => {
+			const translated = cmp.current.translator.translate(
+				path,
+				translationProps,
+				defaultPhrase
+			);
+			return translated;
+		},
+		[cmp]
+	);
+
+	const privateContext = useMemo(() => {
+		return {
+			addMiddleware,
+			removeMiddleware,
+			cmp: cmp.current,
+			config: cmp.current.config,
+			loadingDisclosures: disclosures.loading,
+			dispatch,
+			hideDisclosures,
+			translate: handleTranslate,
+			getState,
+			locale: cmp.current.translator.locale,
+			sharedStyles: createSharedStyles(cmp.current.config || {}),
+			stack,
+		};
+	}, [
+		addMiddleware,
+		removeMiddleware,
+		cmp,
+		disclosures.loading,
+		dispatch,
+		hideDisclosures,
+		handleTranslate,
+		getState,
+		stack,
+	]);
+
+	// Update our store with the config when CMP loads or config changes
+	useEffect(() => {
+		if (cmp.current.loaded) {
+			dispatch(
+				setConfig({
+					config: cmp.current.config,
+					customerId: cmp.current.customerId,
+					configId: cmp.current.configId,
+				})
+			);
+		}
+	}, [cmp, dispatch, cmp.current.loaded, cmp.current.config]);
+
+	return (
+		<OsanoPrivateContext.Provider value={privateContext}>
+			<View style={[styles.overlay]}>
+				<Dialog />
+				<Drawer />
+			</View>
+		</OsanoPrivateContext.Provider>
+	);
+};
+
+const styles = StyleSheet.create({
+	overlay: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		marginTop: 22,
+	},
+});

package/src/components/Button.tsx

@@ -0,0 +1,204 @@
+import { Path, Polygon, Svg } from 'react-native-svg';
+import {
+	Pressable,
+	type PressableProps,
+	type StyleProp,
+	Text,
+	type TextStyle,
+	type ViewStyle,
+	View,
+} from 'react-native';
+import React, { useCallback, useContext, useMemo } from 'react';
+import {
+	acceptAll,
+	close,
+	denyAll,
+	goBack,
+	saveConsent,
+	showDrawer,
+} from '../store';
+
+import Locale from './Locale';
+import { OsanoPrivateContext } from '../context';
+
+type ButtonProps = React.PropsWithoutRef<
+	Omit<PressableProps, 'style' | 'title'> & {
+		title?: string;
+		defaultPhrase?: string;
+		style?: StyleProp<ViewStyle>;
+	}
+>;
+
+export const Button: React.FC<ButtonProps> = props => {
+	const { defaultPhrase, disabled, title, onPress, style: buttonStyle } = props;
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const { buttonBackgroundColor, buttonForegroundColor } = palette || {};
+	const button: StyleProp<ViewStyle> = useMemo(
+		() => ({
+			alignItems: 'center',
+			backgroundColor: buttonBackgroundColor,
+			borderColor: buttonForegroundColor,
+			borderWidth: 1,
+			borderRadius: 4,
+			paddingVertical: 8,
+			paddingHorizontal: 16,
+			flexBasis: 'auto',
+		}),
+		[buttonBackgroundColor, buttonForegroundColor],
+	);
+	const buttonText: StyleProp<TextStyle> = useMemo(
+		() => ({
+			color: buttonForegroundColor,
+			fontSize: 16,
+			fontWeight: 'bold',
+		}),
+		[buttonForegroundColor],
+	);
+
+	return (
+		<Pressable
+			style={[button, buttonStyle]}
+			onPress={onPress}
+			disabled={disabled}
+		>
+			<Text style={buttonText}>
+				<Locale path={title || ''} defaultPhrase={defaultPhrase} />
+			</Text>
+		</Pressable>
+	);
+};
+
+export const DenyButton = (props: ButtonProps) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, title } = props;
+
+	const handleReject = useCallback(() => {
+		// dispatch(setAllVendorConsent(DENY)); // IAB
+		// dispatch(setAxllPurposeConsent(ACCEPT)); // IAB
+		// dispatch(setAllSpecialFeatureConsent(DENY)); // IAB
+		dispatch(denyAll);
+		dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, []);
+
+	return Button({
+		...props,
+		title: title || 'buttons.deny',
+		onPress: onPress || handleReject,
+	});
+};
+
+export const AcceptButton = (props: ButtonProps) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, title } = props;
+
+	const handleSave = useCallback(() => {
+		dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, []);
+
+	return Button({
+		...props,
+		title: title || 'buttons.accept',
+		onPress: onPress || handleSave,
+	});
+};
+
+export const CloseButton = React.forwardRef(
+	(
+		props: PressableProps & {
+			color?: string;
+		},
+		ref: React.Ref<View>,
+	) => {
+		const { color = '#fafafa', onPress, ...remain } = props;
+		const { cmp, dispatch } = useContext(OsanoPrivateContext);
+		const handleClose = useCallback(() => {
+			dispatch(close(cmp));
+		}, []);
+		return (
+			<Pressable {...remain} ref={ref} onPress={onPress || handleClose}>
+				<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+					<Path
+						d="M5.54695 4.13965L19.622 18.2146L18.2147 19.6219L4.13965 5.54695L5.54695 4.13965Z"
+						fill={color}
+					/>
+					<Path
+						d="M19.6203 5.54499L5.54524 19.62L4.13794 18.2127L18.2129 4.1377L19.6203 5.54499Z"
+						fill={color}
+					/>
+				</Svg>
+			</Pressable>
+		);
+	},
+);
+
+export const BackButton = (
+	props: PressableProps & {
+		color?: string;
+	},
+) => {
+	const { color = '#fafafa', onPress, ...remain } = props;
+	const { dispatch } = useContext(OsanoPrivateContext);
+	const handleBack = useCallback(() => {
+		dispatch(goBack);
+	}, []);
+	return (
+		<Pressable {...remain} onPress={onPress || handleBack}>
+			<Svg height="16px" viewBox="0 0 512 512" width="16px" fill={color}>
+				<Polygon points="352,128.4 319.7,96 160,256 160,256 160,256 319.7,416 352,383.6 224.7,256 " />
+			</Svg>
+		</Pressable>
+	);
+};
+
+export const ManagePreferencesButton = (props: ButtonProps) => {
+	const { onPress, ...remain } = props;
+	const { config, dispatch, cmp } = useContext(OsanoPrivateContext);
+	const handleShowDrawer = useCallback(() => {
+		dispatch(close(cmp));
+		dispatch(showDrawer);
+	}, []);
+
+	return Button({
+		...remain,
+		onPress: onPress || handleShowDrawer,
+		title: `buttons.dialog.openDrawer.${config?.jurisdiction}`,
+		defaultPhrase: 'buttons.managePreferences',
+	});
+};
+
+export const RejectAllButton = (props: ButtonProps) => {
+	const { config } = useContext(OsanoPrivateContext);
+	return DenyButton({
+		...props,
+		title: `buttons.dialog.denyAll.${config?.jurisdiction}`,
+		defaultPhrase: 'buttons.denyAll',
+	});
+};
+
+export const SaveButton = (props: ButtonProps) => {
+	return AcceptButton({
+		...props,
+		title: `buttons.save`,
+	});
+};
+
+export const AcceptAllButton = (props: ButtonProps) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, ...remain } = props;
+	const handleAcceptAllConsent = useCallback(() => {
+		// dispatch(setAllVendorConsent(ACCEPT)); // IAB
+		// dispatch(setAllPurposeConsent(DENY)); // IAB
+		dispatch(acceptAll);
+		dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, []);
+
+	return Button({
+		...remain,
+		onPress: onPress || handleAcceptAllConsent,
+		title: `buttons.acceptAll`,
+	});
+};

package/src/components/Checkbox.tsx

@@ -0,0 +1,86 @@
+import { Path, Svg } from 'react-native-svg';
+import {
+	Pressable,
+	type StyleProp,
+	StyleSheet,
+	type ViewStyle,
+} from 'react-native';
+import React, { useContext, useMemo, useState } from 'react';
+
+import { OsanoPrivateContext } from '../context';
+import { createContrastColor } from '../styles';
+import useBoundCallback from '../hooks/useBoundCallback';
+
+const uncheckedPath =
+	'M18,3 C19.6568542,3 21,4.34314575 21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L18,3 Z';
+const checkedPath =
+	'M18,3 C19.6568542,3 21,4.34314575 21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L18,3 Z M16.4696699,7.96966991 L10,14.4393398 L7.53033009,11.9696699 C7.23743687,11.6767767 6.76256313,11.6767767 6.46966991,11.9696699 C6.1767767,12.2625631 6.1767767,12.7374369 6.46966991,13.0303301 L9.46966991,16.0303301 C9.76256313,16.3232233 10.2374369,16.3232233 10.5303301,16.0303301 L17.5303301,9.03033009 C17.8232233,8.73743687 17.8232233,8.26256313 17.5303301,7.96966991 C17.2374369,7.6767767 16.7625631,7.6767767 16.4696699,7.96966991 Z';
+
+type CheckboxProps = React.PropsWithChildren<{
+	align?: 'left' | 'right';
+	disabled?: boolean;
+	onValueChange?: ((value: boolean) => Promise<void> | void) | null | undefined;
+	style?: StyleProp<ViewStyle>;
+	value?: boolean | undefined;
+}>;
+
+export const Checkbox: React.FC<CheckboxProps> = props => {
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const {
+		toggleOffBackgroundColor = '#d2cfff',
+		toggleOnBackgroundColor = '#37cd8f',
+	} = palette || {};
+	const { align, children, disabled, onValueChange, style, value } = props;
+	const [checked, setValue] = useState(value);
+
+	const color = useMemo(() => {
+		const newColor = checked
+			? toggleOnBackgroundColor
+			: toggleOffBackgroundColor;
+		return disabled ? createContrastColor(newColor, 0.25) : newColor;
+	}, [config, checked, disabled]);
+
+	const handleTouchUp = useBoundCallback(
+		(changeValue: (b: boolean) => void | undefined, currentValue: boolean) => {
+			changeValue ? changeValue(!currentValue) : null;
+			setValue(!currentValue);
+		},
+		[onValueChange, checked],
+	);
+
+	return (
+		<Pressable
+			style={[styles.container, style]}
+			onPress={handleTouchUp}
+			disabled={disabled}
+		>
+			{align === 'left' ? null : children}
+			<Svg
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				style={align === 'left' ? styles.left : styles.right}
+			>
+				<Path d={checked ? checkedPath : uncheckedPath} fill={color} />
+			</Svg>
+			{align === 'left' ? children : null}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	left: {
+		marginRight: 4,
+	},
+	right: {
+		marginLeft: 4,
+	},
+});
+
+export default Checkbox;

package/src/components/Divider.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet, View } from 'react-native';
+
+import React from 'react';
+
+type DividerProps = React.PropsWithoutRef<{
+	highlight: () => void;
+	unhighlight: () => void;
+	updateProps: (select: 'leading' | 'trailing', newProps: unknown) => void;
+}>;
+
+export const Divider = (_props: DividerProps) => {
+	return <View style={styles.divider} />;
+};
+
+const styles = StyleSheet.create({
+	divider: {
+		backgroundColor: 'rgba(0,0,0,.1)',
+		height: 1,
+	},
+});

package/src/components/ExpansionPanel.tsx

@@ -0,0 +1,72 @@
+import {
+	LayoutAnimation,
+	Pressable,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextStyle,
+	View,
+} from 'react-native';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+
+import Locale from './Locale';
+import { OsanoPrivateContext } from '../context';
+
+type ExpansionPanelProps = React.PropsWithChildren<{
+	title: string;
+	style?: StyleProp<TextStyle>;
+	onOpen?: () => void;
+}>;
+
+export const ExpansionPanel = ({
+	children,
+	style,
+	title,
+	onOpen,
+}: ExpansionPanelProps) => {
+	const [expanded, setExpanded] = useState(false);
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const { linkColor } = palette || {};
+	const headerStyle = useMemo(() => {
+		return {
+			color: linkColor,
+		};
+	}, [linkColor]);
+
+	const toggleItem = useCallback(() => {
+		LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+		!expanded && onOpen && onOpen();
+		setExpanded(!expanded);
+	}, [expanded, onOpen]);
+
+	const body = <View style={[styles.panelBody]}>{children}</View>;
+
+	return (
+		<View style={styles.panelContainer}>
+			<Pressable style={[styles.panelHeader, style]} onPress={toggleItem}>
+				<Text style={[styles.panelTitle, headerStyle]}>
+					<Locale path={title} />
+				</Text>
+			</Pressable>
+			{expanded && body}
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	panelContainer: {
+		overflow: 'hidden',
+	},
+	panelHeader: {
+		paddingVertical: 16,
+	},
+	panelTitle: {
+		fontSize: 14,
+	},
+	panelBody: {
+		backgroundColor: 'rgba(0,0,0,.1)',
+		paddingVertical: 16,
+	},
+});

package/src/components/Link.tsx

@@ -0,0 +1,49 @@
+import {
+	Linking,
+	type StyleProp,
+	Text,
+	type TextProps,
+	type TextStyle,
+	type GestureResponderEvent,
+} from 'react-native';
+import React, { useCallback, useContext, useMemo } from 'react';
+
+import { OsanoPrivateContext } from '../context';
+
+type LinkProps = React.PropsWithChildren<
+	TextProps & {
+		href?: string;
+		onPress?: (e?: GestureResponderEvent) => void;
+	}
+>;
+
+export const Link = (props: LinkProps) => {
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const { linkColor } = palette || {};
+	const linkStyle = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: linkColor,
+			fontSize: 12,
+			lineHeight: 16,
+			textDecorationLine: 'underline',
+		};
+	}, [linkColor]);
+
+	const { children, href, onPress, style, ...remain } = props;
+	const handleOnPress = useCallback(
+		(e: GestureResponderEvent) => {
+			if (onPress) {
+				onPress(e);
+			} else if (href) {
+				Linking.openURL(href);
+			}
+		},
+		[href, onPress],
+	);
+	return (
+		<Text style={[linkStyle, style]} onPress={handleOnPress} {...remain}>
+			{children}
+		</Text>
+	);
+};

package/src/components/List.tsx

@@ -0,0 +1,39 @@
+import { FlatList, type FlatListProps, Text } from 'react-native';
+
+import Locale from './Locale';
+import React from 'react';
+
+type ListType = 'description' | 'expansion' | 'unordered' | 'ordered';
+
+type ListProps = React.PropsWithChildren<
+	FlatListProps<unknown> & {
+		title?: string;
+		type?: ListType;
+	}
+>;
+
+export const List: React.FC<ListProps> = props => {
+	const { title, type, ...remain } = props;
+	switch (type) {
+		case 'description': {
+			return (
+				<FlatList
+					{...remain}
+					ListHeaderComponent={
+						title ? (
+							<Text
+								style={{
+									fontWeight: 'bold',
+									flexWrap: 'wrap',
+								}}
+							>
+								<Locale path={title} />
+							</Text>
+						) : null
+					}
+				/>
+			);
+		}
+	}
+	return <FlatList {...remain} />;
+};

package/src/components/Locale.tsx

@@ -0,0 +1,38 @@
+import { OsanoPrivateContext } from '../context';
+import { useContext } from 'react';
+
+type LocaleOption = Record<string, string>;
+
+type LocaleProps = {
+	formatter?: (phrase: string) => string;
+	path: string | string[];
+	options?: Record<string, string | LocaleOption>;
+	defaultPhrase?: string;
+};
+
+export const Locale = (props: LocaleProps = { path: '' }) => {
+	const { defaultPhrase, formatter = v => v, path, options = {} } = props;
+	const { translate } = useContext(OsanoPrivateContext);
+	return (
+		(path &&
+			formatter(
+				translate(
+					path,
+					Object.entries(options).reduce(
+						(acc, [key, value]) => {
+							acc[key] =
+								typeof value === 'string'
+									? (translate(value, options) as string)
+									: value;
+							return acc;
+						},
+						{} as Record<string, string | LocaleOption>,
+					),
+					defaultPhrase,
+				) as string,
+			)) ||
+		null
+	);
+};
+
+export default Locale;

package/src/components/StoragePolicyLink.tsx

@@ -0,0 +1,24 @@
+import { Link } from './Link';
+import { OsanoPrivateContext } from '../context';
+import React from 'react';
+import { useContext } from 'react';
+
+export const StoragePolicyLink = () => {
+	const { config, translate } = useContext(OsanoPrivateContext);
+	const policyLinkText = config?.policyLinkText;
+	const label = translate(
+		`buttons.${policyLinkText}`,
+		undefined,
+		`${translate(`messaging.${policyLinkText}`)}`,
+	);
+	let href = config?.storagePolicyHref || '';
+	// The HREF could be a relative path so we need to format into a fully qualified URL
+	// if it is not already.
+	if (href) {
+		const domains = config?.domains || [];
+		href = new URL(href, `https://${domains[0]}`).toString();
+	}
+	return <Link href={href}>{`${label}`}</Link>;
+};
+
+export default StoragePolicyLink;