@osano/osano-cmp-react-native 0.1.0 → 0.3.0

package/src/actions.ts

@@ -0,0 +1,80 @@
+import type { ActionCreator, OsanoState } from './types/store';
+import type { ConsentConfig, ConsentManager } from './ConsentManager';
+
+import type { ConsentCategory } from './constants';
+import { init } from './reducer';
+
+export const SHOW_DIALOG = 'DIALOG';
+export const SHOW_DRAWER = 'DRAWER';
+export const SHOW_IAB_DISCLOSURES = 'IAB_DISCLOSURES';
+export const SHOW_IAB_VENDORS = 'IAB_VENDORS';
+export const CLEAR_CONSENT = 'CLEAR_CONSENT';
+export const REVERT_CONSENT = 'REVERT_CONSENT';
+export const CLOSE = 'CLOSE';
+export const GO_BACK = 'GO_BACK';
+export const RELOAD = 'RELOAD';
+export const SET_LOCALE = 'SET_LOCALE';
+export const SAVE_BEGIN = '@async-SAVE_BEGIN';
+export const SAVE_SUCCESS = '@async-SAVE_SUCCESS';
+export const SAVE_FAILURE = '@async-SAVE_FAILURE';
+export const TOGGLE_CATEGORY = 'TOGGLE_CATEGORY';
+export const SET_ALL_CONSENT = 'SET_ALL_CONSENT';
+export const FETCH_DISCLOSURES_BEGIN = 'FETCH_DISCLOSURES_BEGIN';
+export const FETCH_DISCLOSURES_SUCCESS = 'FETCH_DISCLOSURES_SUCCESS';
+export const FETCH_DISCLOSURES_FAILURE = 'FETCH_DISCLOSURES_FAILURE';
+export const SET_CONFIG = 'SET_CONFIG';
+
+export const reload: ActionCreator<typeof RELOAD, OsanoState & any> = (
+	initialArgs
+) => ({ type: RELOAD, payload: init(initialArgs) });
+
+export const showDialog: ActionCreator<typeof SHOW_DIALOG, never> = () => ({
+	type: SHOW_DIALOG,
+});
+
+export const showDrawer: ActionCreator<typeof SHOW_DRAWER, never> = () => ({
+	type: SHOW_DRAWER,
+});
+
+export const setLocale: ActionCreator<typeof SET_LOCALE, string> = (
+	payload
+) => ({ type: SET_LOCALE, payload });
+
+export const setConfig: ActionCreator<
+	typeof SET_CONFIG,
+	{
+		config: ConsentConfig;
+		customerId: string;
+		configId: string;
+	}
+> = (payload) => ({ type: SET_CONFIG, payload });
+
+export const showIabDisclosures: ActionCreator<
+	typeof SHOW_IAB_DISCLOSURES,
+	any
+> = (payload) => ({ type: SHOW_IAB_DISCLOSURES, payload });
+
+export const showIabVendors: ActionCreator<typeof SHOW_IAB_VENDORS, any> = (
+	payload
+) => ({ type: SHOW_IAB_VENDORS, payload });
+
+export const toggleCategory: ActionCreator<
+	typeof TOGGLE_CATEGORY,
+	ConsentCategory | { category: ConsentCategory; value: boolean }
+> = (payload) => ({ type: TOGGLE_CATEGORY, payload });
+
+export const acceptAll: ActionCreator<
+	typeof SET_ALL_CONSENT,
+	boolean
+> = () => ({ type: SET_ALL_CONSENT, payload: true });
+export const denyAll: ActionCreator<typeof SET_ALL_CONSENT, boolean> = () => ({
+	type: SET_ALL_CONSENT,
+	payload: false,
+});
+export const goBack: ActionCreator<typeof GO_BACK, never> = () => ({
+	type: GO_BACK,
+});
+export const close: ActionCreator<typeof CLOSE, ConsentManager> = (cmp) => ({
+	type: CLOSE,
+	payload: cmp,
+});

package/src/commands.ts

@@ -0,0 +1,96 @@
+import {
+	FETCH_DISCLOSURES_BEGIN,
+	FETCH_DISCLOSURES_FAILURE,
+	FETCH_DISCLOSURES_SUCCESS,
+	SAVE_BEGIN,
+	SAVE_FAILURE,
+	SAVE_SUCCESS,
+} from './actions';
+import type { ConsentManager } from './ConsentManager';
+import type { OsanoAction, OsanoState } from './types/store';
+import {
+	getConsent,
+	hasFetchedDisclosuresForCategory,
+	isLoadingDisclosures,
+} from './selectors';
+
+import { type ConsentCategory as ConsentCategoryType } from './constants';
+import { fetchDisclosures } from './services/disclosures';
+import { recordConsent } from './services/consent';
+import type { AsyncAction } from './hooks/useThunkReducer';
+
+export const toggleDisclosure =
+	(payload: {
+		category: ConsentCategoryType;
+		customerId?: string;
+		configId?: string;
+	}): AsyncAction<
+		OsanoState,
+		OsanoAction<
+			| typeof FETCH_DISCLOSURES_BEGIN
+			| typeof FETCH_DISCLOSURES_SUCCESS
+			| typeof FETCH_DISCLOSURES_FAILURE,
+			{ disclosures: any }
+		>
+	> =>
+	(dispatch, getState) => {
+		const state = getState();
+		const { category, configId = '', customerId = '' } = payload || {};
+		const shouldLoad =
+			!isLoadingDisclosures(state) &&
+			category &&
+			!hasFetchedDisclosuresForCategory(state, category);
+		if (shouldLoad) {
+			// TODO: Fetch only specific category disclosures when API is ready, commenting out category for now
+			dispatch({ type: FETCH_DISCLOSURES_BEGIN /* payload: category */ });
+			fetchDisclosures(
+				customerId,
+				configId,
+				undefined /* category */,
+				state.locale
+			)
+				.then((response) => {
+					const disclosureResults = response || [];
+					dispatch({
+						type: FETCH_DISCLOSURES_SUCCESS,
+						payload: {
+							disclosures: disclosureResults /* category */,
+						},
+					});
+					return response;
+				})
+				.catch((error) => {
+					dispatch({
+						type: FETCH_DISCLOSURES_FAILURE,
+						error,
+					});
+				});
+		}
+	};
+
+export const saveConsent =
+	(
+		cmp: ConsentManager
+	): AsyncAction<
+		OsanoState,
+		OsanoAction<
+			typeof SAVE_BEGIN | typeof SAVE_SUCCESS | typeof SAVE_FAILURE,
+			ConsentCategoryType[] | null
+		>
+	> =>
+	(dispatch, getState) => {
+		if (!cmp) {
+			return;
+		}
+		const state = getState();
+		const oldConsent = cmp?.consent;
+		const consent = getConsent(state);
+		dispatch({ type: SAVE_BEGIN });
+		return recordConsent(cmp, consent)
+			.then((newConsent: ConsentCategoryType[] | null) =>
+				dispatch({ type: SAVE_SUCCESS, payload: newConsent })
+			)
+			.catch(() => {
+				dispatch({ type: SAVE_FAILURE, payload: oldConsent });
+			});
+	};

package/src/components/Button.tsx

@@ -6,20 +6,19 @@ import {
 	Text,
 	type TextStyle,
 	type ViewStyle,
-	View,
+	type View,
 } from 'react-native';
 import React, { useCallback, useContext, useMemo } from 'react';
-import {
-	acceptAll,
-	close,
-	denyAll,
-	goBack,
-	saveConsent,
-	showDrawer,
-} from '../store';
+import { acceptAll, close, denyAll, goBack, showDrawer } from '../actions';
+import { saveConsent } from '../commands';
 
 import Locale from './Locale';
 import { OsanoPrivateContext } from '../context';
+import {
+	setAllPurposeConsent,
+	setAllSpecialFeatureConsent,
+	setAllVendorConsent,
+} from '../iab/tcf/actions';
 
 type ButtonProps = React.PropsWithoutRef<
 	Omit<PressableProps, 'style' | 'title'> & {
@@ -29,7 +28,7 @@ type ButtonProps = React.PropsWithoutRef<
 	}
 >;
 
-export const Button: React.FC<ButtonProps> = props => {
+export const Button: React.FC<ButtonProps> = (props) => {
 	const { defaultPhrase, disabled, title, onPress, style: buttonStyle } = props;
 	const { config } = useContext(OsanoPrivateContext);
 	const { palette } = config || {};
@@ -45,7 +44,7 @@ export const Button: React.FC<ButtonProps> = props => {
 			paddingHorizontal: 16,
 			flexBasis: 'auto',
 		}),
-		[buttonBackgroundColor, buttonForegroundColor],
+		[buttonBackgroundColor, buttonForegroundColor]
 	);
 	const buttonText: StyleProp<TextStyle> = useMemo(
 		() => ({
@@ -53,7 +52,7 @@ export const Button: React.FC<ButtonProps> = props => {
 			fontSize: 16,
 			fontWeight: 'bold',
 		}),
-		[buttonForegroundColor],
+		[buttonForegroundColor]
 	);
 
 	return (
@@ -61,6 +60,7 @@ export const Button: React.FC<ButtonProps> = props => {
 			style={[button, buttonStyle]}
 			onPress={onPress}
 			disabled={disabled}
+			testID={props.testID}
 		>
 			<Text style={buttonText}>
 				<Locale path={title || ''} defaultPhrase={defaultPhrase} />
@@ -74,11 +74,11 @@ export const DenyButton = (props: ButtonProps) => {
 	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(setAllVendorConsent(false));
+		dispatch(setAllPurposeConsent(true));
+		dispatch(setAllSpecialFeatureConsent(false));
+		dispatch(denyAll());
+		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
 	}, []);
 
@@ -86,6 +86,7 @@ export const DenyButton = (props: ButtonProps) => {
 		...props,
 		title: title || 'buttons.deny',
 		onPress: onPress || handleReject,
+		testID: 'deny-consents-button'
 	});
 };
 
@@ -94,7 +95,7 @@ export const AcceptButton = (props: ButtonProps) => {
 	const { onPress, title } = props;
 
 	const handleSave = useCallback(() => {
-		dispatch(saveConsent(cmp));
+		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
 	}, []);
 
@@ -102,6 +103,7 @@ export const AcceptButton = (props: ButtonProps) => {
 		...props,
 		title: title || 'buttons.accept',
 		onPress: onPress || handleSave,
+		testID: 'accept-consents-button'
 	});
 };
 
@@ -110,7 +112,7 @@ export const CloseButton = React.forwardRef(
 		props: PressableProps & {
 			color?: string;
 		},
-		ref: React.Ref<View>,
+		ref: React.Ref<View>
 	) => {
 		const { color = '#fafafa', onPress, ...remain } = props;
 		const { cmp, dispatch } = useContext(OsanoPrivateContext);
@@ -131,18 +133,18 @@ export const CloseButton = React.forwardRef(
 				</Svg>
 			</Pressable>
 		);
-	},
+	}
 );
 
 export const BackButton = (
 	props: PressableProps & {
 		color?: string;
-	},
+	}
 ) => {
 	const { color = '#fafafa', onPress, ...remain } = props;
 	const { dispatch } = useContext(OsanoPrivateContext);
 	const handleBack = useCallback(() => {
-		dispatch(goBack);
+		dispatch(goBack());
 	}, []);
 	return (
 		<Pressable {...remain} onPress={onPress || handleBack}>
@@ -158,7 +160,7 @@ export const ManagePreferencesButton = (props: ButtonProps) => {
 	const { config, dispatch, cmp } = useContext(OsanoPrivateContext);
 	const handleShowDrawer = useCallback(() => {
 		dispatch(close(cmp));
-		dispatch(showDrawer);
+		dispatch(showDrawer());
 	}, []);
 
 	return Button({
@@ -166,6 +168,7 @@ export const ManagePreferencesButton = (props: ButtonProps) => {
 		onPress: onPress || handleShowDrawer,
 		title: `buttons.dialog.openDrawer.${config?.jurisdiction}`,
 		defaultPhrase: 'buttons.managePreferences',
+		testID: 'manage-preferences-button'
 	});
 };
 
@@ -175,6 +178,7 @@ export const RejectAllButton = (props: ButtonProps) => {
 		...props,
 		title: `buttons.dialog.denyAll.${config?.jurisdiction}`,
 		defaultPhrase: 'buttons.denyAll',
+		testID: 'reject-all-consents'
 	});
 };
 
@@ -182,6 +186,7 @@ export const SaveButton = (props: ButtonProps) => {
 	return AcceptButton({
 		...props,
 		title: `buttons.save`,
+		testID: 'save-consents-button'
 	});
 };
 
@@ -189,10 +194,11 @@ 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(setAllVendorConsent(true));
+		dispatch(setAllPurposeConsent(false));
+		dispatch(setAllSpecialFeatureConsent(true));
+		dispatch(acceptAll());
+		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
 	}, []);
 
@@ -200,5 +206,6 @@ export const AcceptAllButton = (props: ButtonProps) => {
 		...remain,
 		onPress: onPress || handleAcceptAllConsent,
 		title: `buttons.acceptAll`,
+		testID: 'accept-all-consents'
 	});
 };

package/src/components/Locale.tsx

@@ -4,6 +4,7 @@ import { useContext } from 'react';
 type LocaleOption = Record<string, string>;
 
 type LocaleProps = {
+	delimiter?: string;
 	formatter?: (phrase: string) => string;
 	path: string | string[];
 	options?: Record<string, string | LocaleOption>;
@@ -11,25 +12,38 @@ type LocaleProps = {
 };
 
 export const Locale = (props: LocaleProps = { path: '' }) => {
-	const { defaultPhrase, formatter = v => v, path, options = {} } = props;
+	const {
+		defaultPhrase,
+		delimiter = '',
+		formatter = (v) => v,
+		path: pathOrArray,
+		options = {},
+	} = props;
 	const { translate } = useContext(OsanoPrivateContext);
+	const translations = ([] as string[]).concat(pathOrArray);
 	return (
-		(path &&
+		(pathOrArray &&
 			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,
+				translations.reduce(
+					(acc, path) =>
+						`${acc}${acc ? delimiter : ''}${
+							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
 	);

package/src/context.ts

@@ -1,4 +1,3 @@
-import type { OsanoAction, OsanoState } from './types/store';
 import { ConsentConfig, ConsentManager } from './ConsentManager';
 import type {
 	GetState,
@@ -6,12 +5,13 @@ import type {
 	Store,
 	ThunkDispatch,
 } from './hooks/useThunkReducer';
+import type { OsanoAction, OsanoState } from './types/store';
 
+import { ConsentCategory } from './constants';
 import React from 'react';
 import Translator from './utils/Translator';
 import { createSharedStyles } from './styles';
-import { initialState } from './store';
-import { type ConsentCategory } from './constants';
+import { initialState } from './reducer';
 import { noop } from './utils';
 
 type OsanoPublicContextType = {
@@ -19,9 +19,9 @@ type OsanoPublicContextType = {
 	getConsent: (category?: ConsentCategory) => boolean | ConsentCategory[];
 	getDeviceId: () => string;
 	clearConsent: () => void;
-	recordConsent: (
-		consent?: ConsentCategory[],
-	) => Promise<ConsentCategory[] | null>;
+	consent: (
+		consent?: ConsentCategory | ConsentCategory[]
+	) => Promise<ConsentCategory[]>;
 	setLocale: (locale: string) => void;
 	showBanner: () => void;
 	showDrawer: () => void;
@@ -30,13 +30,13 @@ type OsanoPublicContextType = {
 type OsanoPrivateContextType = {
 	addMiddleware: (
 		m: (
-			store: Store<OsanoState, OsanoAction>,
-		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>,
+			store: Store<OsanoState, OsanoAction>
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
 	) => void;
 	removeMiddleware: (
 		m: (
-			store: Store<OsanoState, OsanoAction>,
-		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>,
+			store: Store<OsanoState, OsanoAction>
+		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
 	) => void;
 	cmp?: ConsentManager;
 	config?: ConsentConfig;
@@ -55,7 +55,7 @@ export const OsanoPublicContext = React.createContext<OsanoPublicContextType>({
 		return false;
 	},
 	getDeviceId: () => '',
-	recordConsent: () => Promise.resolve(null),
+	consent: () => Promise.resolve([ConsentCategory.ESSENTIAL]),
 	clearConsent: noop,
 	setLocale: noop,
 	showBanner: noop,
@@ -75,5 +75,5 @@ export const OsanoPrivateContext = React.createContext<OsanoPrivateContextType>(
 		locale: 'en',
 		sharedStyles: createSharedStyles(),
 		translate: () => '',
-	},
+	}
 );

package/src/flavors/index.ts

@@ -33,6 +33,6 @@ export const flavors: Record<FlavorKeys, Flavor> = {
 	six: six as Flavor,
 };
 
-export const defaultFlavor = 'one';
+export const defaultFlavor = "two";
 
 export default flavors;

package/src/hooks/usePrevious.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export function usePrevious<T>(value: T) {
-	const ref = useRef<T>();
+	const ref = useRef<T>(value); // Set the initial value to the current value so that the first render will return the initial value
 	useEffect(() => {
 		ref.current = value;
 	}, [value]);