@osano/osano-cmp-react-native 0.1.0

package/src/components/Toggle.tsx

@@ -0,0 +1,165 @@
+import {
+	type GestureResponderEvent,
+	Platform,
+	Pressable,
+	type StyleProp,
+	StyleSheet,
+	Switch,
+	type ViewStyle,
+} from 'react-native';
+import React, {
+	useCallback,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useState,
+} from 'react';
+
+import { OsanoPrivateContext } from '../context';
+import { createContrastColor } from '../styles';
+import useBoundCallback from '../hooks/useBoundCallback';
+
+type ToggleProps = React.PropsWithChildren<{
+	align?: 'left' | 'right';
+	disabled?: boolean;
+	onValueChange?: ((value: boolean) => Promise<void> | void) | null | undefined;
+	style?: StyleProp<ViewStyle>;
+	value?: boolean | undefined;
+}>;
+
+export const Toggle = (props: ToggleProps) => {
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const {
+		toggleButtonOnColor = '#f4f4f4',
+		toggleButtonOffColor = '#ffffff',
+		toggleOffBackgroundColor = '#d2cfff',
+		toggleOnBackgroundColor = '#37cd8f',
+	} = palette || {};
+	const { align, children, disabled, onValueChange, style, value } = props;
+	const [currentValue, setValue] = useState(value);
+
+	const trackColor = useMemo(
+		() => ({
+			false: toggleOffBackgroundColor,
+			true: toggleOnBackgroundColor,
+		}),
+		[config],
+	);
+
+	const trackColorDisabled = useMemo(
+		() => ({
+			false: createContrastColor(toggleOffBackgroundColor, 0.25),
+			true: createContrastColor(toggleOnBackgroundColor, 0.25),
+		}),
+		[config],
+	);
+
+	const thumbColorOnDisabled = useMemo(
+		() => createContrastColor(toggleButtonOnColor, 0.25),
+		[config, currentValue],
+	);
+
+	const thumbColorOffDisabled = useMemo(
+		() => createContrastColor(toggleButtonOffColor, 0.25),
+		[config, currentValue],
+	);
+
+	const thumbColorDisabled = currentValue
+		? thumbColorOnDisabled
+		: thumbColorOffDisabled;
+	const thumbColor = currentValue ? toggleButtonOnColor : toggleButtonOffColor;
+
+	const iosBackgroundColor = disabled
+		? currentValue
+			? trackColorDisabled.true
+			: trackColorDisabled.false
+		: currentValue
+			? trackColor.true
+			: trackColor.false;
+
+	const switchRef = React.useRef<Switch>(null);
+	const handleChange = useBoundCallback(
+		(changeValue: (b: boolean) => void, oldValue: boolean) => {
+			setValue(!oldValue);
+			changeValue ? changeValue(!oldValue) : null;
+		},
+		[onValueChange, currentValue],
+	);
+
+	const handleTouchUp = useCallback<(event: GestureResponderEvent) => void>(
+		() => handleChange(),
+		[handleChange],
+	);
+
+	const switchStyle = useMemo(() => {
+		return [
+			styles.switch,
+			align === 'left' ? styles.switchLeft : styles.switchRight,
+		];
+	}, [align]);
+
+	const containerStyle = useMemo(() => {
+		return [
+			styles.container,
+			style,
+			align === 'left' ? styles.ltr : styles.rtl,
+		];
+	}, [style, align]);
+
+	useLayoutEffect(() => {
+		value !== currentValue && setValue(value);
+	}, [value]);
+
+	return (
+		<Pressable
+			style={containerStyle}
+			onPress={handleTouchUp}
+			disabled={disabled}
+		>
+			<Switch
+				ref={switchRef}
+				style={switchStyle}
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore: activeThumbColor is a valid prop for react-native-web
+				activeThumbColor={disabled ? thumbColorOnDisabled : thumbColor}
+				thumbColor={disabled ? thumbColorDisabled : thumbColor}
+				activeTrackColor={disabled ? trackColorDisabled : trackColor}
+				trackColor={disabled ? trackColorDisabled : trackColor}
+				ios_backgroundColor={iosBackgroundColor}
+				disabled={Platform.OS === 'android' ? true : disabled} // Prevent Android ripple effect
+				value={currentValue}
+				onChange={handleChange}
+			/>
+			{children}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	ltr: {
+		flexDirection: 'row',
+	},
+	rtl: {
+		flexDirection: 'row-reverse',
+	},
+	switch: {
+		flexGrow: 0,
+		flexShrink: 1,
+		minWidth: 40,
+		transform: Platform.OS === 'ios' ? `scale(0.75)` : undefined,
+	},
+	switchLeft: {
+		marginRight: 12,
+	},
+	switchRight: {
+		marginLeft: 12,
+	},
+});
+
+export default Toggle;

package/src/constants.ts

@@ -0,0 +1,34 @@
+const France = 'fr';
+export const mappedJurisdictions: Record<string, string> = {
+	re: France, // Réunion
+	gp: France, // Guadeloupe
+	mq: France, // Martinique
+	gy: France, // Guyana
+	yt: France, // Mayotte
+	mf: France, // Collectivity of Saint-Martin
+};
+
+export enum ConsentCategory {
+	ESSENTIAL = 'ESSENTIAL',
+	ANALYTICS = 'ANALYTICS',
+	MARKETING = 'MARKETING',
+	PERSONALIZATION = 'PERSONALIZATION',
+	OPT_OUT = 'OPT_OUT',
+	STORAGE = 'STORAGE',
+}
+
+export const env = {
+	OSANO_ORIGIN: __DEV__ ? 'https://cmp-ci.osano.com' : 'https://cmp.osano.com',
+	CONSENT_URI: __DEV__
+		? 'https://consent-ci.api.osano.com'
+		: 'https://consent.api.osano.com',
+	DISCLOSURE_URI: __DEV__
+		? 'https://disclosure-ci.api.osano.com'
+		: 'https://disclosure.api.osano.com',
+	LOCALE_URI: __DEV__
+		? 'https://locale.cmp-ci.osano.com'
+		: 'https://locale.cmp.osano.com',
+	LOOKUPS_URI: __DEV__
+		? 'https://lookups-ci.api.osano.com'
+		: 'https://lookups.api.osano.com',
+};

package/src/context.ts

@@ -0,0 +1,79 @@
+import type { OsanoAction, OsanoState } from './types/store';
+import { ConsentConfig, ConsentManager } from './ConsentManager';
+import type {
+	GetState,
+	MiddlewareNext,
+	Store,
+	ThunkDispatch,
+} from './hooks/useThunkReducer';
+
+import React from 'react';
+import Translator from './utils/Translator';
+import { createSharedStyles } from './styles';
+import { initialState } from './store';
+import { type ConsentCategory } from './constants';
+import { noop } from './utils';
+
+type OsanoPublicContextType = {
+	locale: string;
+	getConsent: (category?: ConsentCategory) => boolean | ConsentCategory[];
+	getDeviceId: () => string;
+	clearConsent: () => void;
+	recordConsent: (
+		consent?: ConsentCategory[],
+	) => Promise<ConsentCategory[] | null>;
+	setLocale: (locale: string) => void;
+	showBanner: () => void;
+	showDrawer: () => void;
+};
+
+type OsanoPrivateContextType = {
+	addMiddleware: (
+		m: (
+			store: Store<OsanoState, OsanoAction>,
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>,
+	) => void;
+	removeMiddleware: (
+		m: (
+			store: Store<OsanoState, OsanoAction>,
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>,
+	) => void;
+	cmp?: ConsentManager;
+	config?: ConsentConfig;
+	hideDisclosures: boolean;
+	loadingDisclosures: boolean;
+	dispatch: ThunkDispatch<OsanoState, OsanoAction, unknown>;
+	getState: GetState<OsanoState>;
+	locale: string;
+	sharedStyles: ReturnType<typeof createSharedStyles>;
+	translate: Translator['translate'];
+};
+
+export const OsanoPublicContext = React.createContext<OsanoPublicContextType>({
+	locale: Translator.DEFAULT_LANGUAGE,
+	getConsent: function (): boolean {
+		return false;
+	},
+	getDeviceId: () => '',
+	recordConsent: () => Promise.resolve(null),
+	clearConsent: noop,
+	setLocale: noop,
+	showBanner: noop,
+	showDrawer: noop,
+});
+
+export const OsanoPrivateContext = React.createContext<OsanoPrivateContextType>(
+	{
+		addMiddleware: noop,
+		removeMiddleware: noop,
+		cmp: undefined,
+		config: undefined,
+		hideDisclosures: false,
+		loadingDisclosures: false,
+		dispatch: noop,
+		getState: () => ({ ...initialState }),
+		locale: 'en',
+		sharedStyles: createSharedStyles(),
+		translate: () => '',
+	},
+);

package/src/flavors/five.json

@@ -0,0 +1,11 @@
+{
+  "five": {
+    "timer": false,
+    "analyticsAlways": true,
+    "categories": true,
+    "rejectAll": false,
+    "firstLayerUsage": false,
+    "managePreferences": false,
+    "canDismissDialog": false
+  }
+}

package/src/flavors/four.json

@@ -0,0 +1,11 @@
+{
+  "four": {
+    "timer": false,
+    "analyticsAlways": true,
+    "categories": false,
+    "rejectAll": false,
+    "firstLayerUsage": false,
+    "managePreferences": false,
+    "canDismissDialog": false
+  }
+}

package/src/flavors/index.ts

@@ -0,0 +1,38 @@
+export type Flavor = {
+	timer: boolean;
+	analyticsAlways: boolean;
+	categories: boolean;
+	rejectAll: boolean;
+	firstLayerUsage: boolean;
+	managePreferences: boolean;
+	canDismissDialog: boolean;
+};
+
+enum FlavorKeys {
+	one = 'one',
+	two = 'two',
+	three = 'three',
+	four = 'four',
+	five = 'five',
+	six = 'six',
+}
+
+import { five } from './five.json';
+import { four } from './four.json';
+import { one } from './one.json';
+import { six } from './six.json';
+import { three } from './three.json';
+import { two } from './two.json';
+
+export const flavors: Record<FlavorKeys, Flavor> = {
+	one: one as Flavor,
+	two: two as Flavor,
+	three: three as Flavor,
+	four: four as Flavor,
+	five: five as Flavor,
+	six: six as Flavor,
+};
+
+export const defaultFlavor = 'one';
+
+export default flavors;

package/src/flavors/one.json

@@ -0,0 +1,11 @@
+{
+  "one": {
+    "timer": true,
+    "analyticsAlways": true,
+    "categories": false,
+    "rejectAll": false,
+    "firstLayerUsage": false,
+    "managePreferences": false,
+    "canDismissDialog": true
+  }
+}

package/src/flavors/six.json

@@ -0,0 +1,12 @@
+{
+    "six": {
+      "timer": false,
+      "analyticsAlways": false,
+      "categories": false,
+      "rejectAll": true,
+      "firstLayerUsage": true,
+      "managePreferences": true,
+      "canDismissDialog": false
+    }
+  }
+  

package/src/flavors/three.json

@@ -0,0 +1,11 @@
+{
+  "three": {
+    "timer": false,
+    "analyticsAlways": false,
+    "categories": false,
+    "rejectAll": false,
+    "firstLayerUsage": false,
+    "managePreferences": false,
+    "canDismissDialog": false
+  }
+}

package/src/flavors/two.json

@@ -0,0 +1,11 @@
+{
+  "two": {
+    "timer": false,
+    "analyticsAlways": false,
+    "categories": true,
+    "rejectAll": true,
+    "firstLayerUsage": false,
+    "managePreferences": true,
+    "canDismissDialog": true
+  }
+}

package/src/hooks/useBoundCallback.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useRef } from 'react';
+
+/**
+ * Binds the function `method` to the passed `props` as arguments. Uses
+ * `useRef` to store references to both `props` and `method`. `method` will
+ * receive each of the `props` as arguments in the same order they are passed
+ * and then each argument passed to the returned function.
+ *
+ * Conceptually similar to [Function.prototype.bind]{@https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind}.
+ * @example
+ * const boundCallback = useBoundCallback((prop1, prop2, arg1, arg2) => {
+ *     console.log(prop1, prop2, arg1, arg2);
+ * }, ['myProp1', 'myProp2']);
+ * boundCallback('my first arg', 'my second arg');
+ * // result: "myProp1 myProp2 my first arg my second arg"
+ */
+export function useBoundCallback<T>(
+	method: (...args: any[]) => T,
+	props: any[] = [],
+): (...args: any[]) => T {
+	const previousProps = useRef(props);
+	const boundMethod = useRef((...args: any[]) =>
+		method(...previousProps.current.concat(args)),
+	);
+
+	previousProps.current = props;
+
+	return boundMethod.current as (...args: any[]) => T;
+}
+
+export default useBoundCallback;

package/src/hooks/useDeviceOrientation.ts

@@ -0,0 +1,14 @@
+import { useWindowDimensions } from 'react-native';
+
+type DeviceOrientation = 'portrait' | 'landscape';
+
+export function useDeviceOrientation(): DeviceOrientation {
+	const { width, height } = useWindowDimensions();
+
+	if (width >= height) {
+		return 'landscape';
+	}
+	return 'portrait';
+}
+
+export default useDeviceOrientation;

package/src/hooks/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(value: T) {
+	const ref = useRef<T>();
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
+}

package/src/hooks/useThunkReducer.ts

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+	useCallback,
+	useEffect,
+	useReducer,
+	useRef,
+	useState,
+	type Reducer,
+	type ReducerState,
+	type Dispatch,
+} from 'react';
+
+export type Store<S, A> = {
+	getState: GetState<S>;
+	dispatch: ThunkDispatch<S, A, any>;
+};
+export type Initializer<S> = (arg: any) => S;
+export type GetState<S> = () => S;
+export type AsyncAction<S, A> = (
+	dispatch: Dispatch<A>,
+	getState: GetState<S>,
+) => void;
+export type ThunkDispatch<S, A, T> = (
+	action: A | AsyncAction<S, A>,
+) => void | Promise<T>;
+export type MiddlewareNext<A> = (action: A) => any;
+
+/**
+ * Augments React's useReducer() hook so that the action
+ * dispatcher supports thunks.
+ */
+export function useThunkReducer<S, A>(
+	reducer: Reducer<S, A>,
+	initializerArg: any,
+	initializer?: Initializer<any>,
+	middleware: ((
+		store: Store<S, A>,
+	) => (next: MiddlewareNext<A>) => MiddlewareNext<A>)[] = [],
+): [
+	ReducerState<Reducer<S, A>>,
+	ThunkDispatch<S, A, any>,
+	GetState<ReducerState<Reducer<S, A>>>,
+	(
+		m: (store: Store<S, A>) => (next: MiddlewareNext<A>) => MiddlewareNext<A>,
+	) => void,
+	(
+		m: (store: Store<S, A>) => (next: MiddlewareNext<A>) => MiddlewareNext<A>,
+	) => void,
+] {
+	const mounted = useRef(true);
+	const allMiddleware = useRef([...middleware].reverse());
+	const [initialState] = initializer
+		? // eslint-disable-next-line react-hooks/rules-of-hooks
+			useReducer(reducer, initializerArg, initializer)
+		: // eslint-disable-next-line react-hooks/rules-of-hooks
+			useReducer(reducer, initializerArg);
+
+	const [hookState, setHookState] = useState(initialState);
+
+	// State management.
+	const state = useRef<S>(hookState);
+	const getState = useCallback(() => state.current, [state]);
+	const setState = useCallback(
+		(newState: S) => {
+			state.current = newState;
+			mounted.current && setHookState(newState);
+		},
+		[state, setHookState],
+	);
+	const addMiddleware = useCallback(
+		(
+			m: (store: Store<S, A>) => (next: MiddlewareNext<A>) => MiddlewareNext<A>,
+		) => {
+			allMiddleware.current = [m, ...allMiddleware.current];
+		},
+		[],
+	);
+	const removeMiddleware = useCallback(
+		(
+			m: (store: Store<S, A>) => (next: MiddlewareNext<A>) => MiddlewareNext<A>,
+		) => {
+			allMiddleware.current = allMiddleware.current.filter(
+				toRemove => toRemove !== m,
+			);
+		},
+		[],
+	);
+
+	// Reducer.
+	const reduce = useCallback(
+		(action: A) => {
+			const store = { getState, dispatch };
+			return allMiddleware.current.reduce(
+				(next, currentMiddleware) => (a: A) =>
+					currentMiddleware(store)(next)(a),
+				(a: A) => reducer(getState(), a),
+			)(action);
+		},
+		[reducer, getState],
+	);
+
+	// Augmented dispatcher.
+	const dispatch: ThunkDispatch<S, A, any> = useCallback(
+		action => {
+			const response =
+				action instanceof Function
+					? action(dispatch, getState)
+					: setState(reduce(action));
+			return response;
+		},
+		[getState, setState, reduce],
+	);
+
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+
+	return [hookState, dispatch, getState, addMiddleware, removeMiddleware];
+}
+
+export default useThunkReducer;

package/src/iab/constants.ts

@@ -0,0 +1 @@
+export const CMP_ID: number = 279;