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

package/src/index.tsx

@@ -1,24 +1,27 @@
 import type { OsanoAction, OsanoState } from './types/store';
+import { OsanoCategories, init, reducer } from './reducer';
+import { Platform, UIManager } from 'react-native';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
-	OsanoCategories,
-	getConsent,
-	init,
-	reducer,
+	CLEAR_CONSENT,
 	reload,
+	setConfig,
 	setLocale,
 	showDialog,
 	showDrawer,
-} from './store';
-import { Platform, UIManager } from 'react-native';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { clearConsent, recordConsent } from './services/consent';
+} from './actions';
 
 import { ConsentCategory } from './constants';
 import { ConsentManager } from './ConsentManager';
 import { ConsentUiBuilder } from './ConsentUiBuilder';
 import type { OsanoProps } from './types';
 import { OsanoPublicContext } from './context';
-import useThunkReducer from './hooks/useThunkReducer';
+import { addIabReducers } from './iab';
+import { getConsent } from './selectors';
+import { recordConsent } from './services/consent';
+import useThunkReducer, { type Store } from './hooks/useThunkReducer';
+import type { IabFramework, IabState } from './iab/types';
+import { usePrevious } from './hooks/usePrevious';
 
 export { OsanoPublicContext as OsanoContext } from './context';
 
@@ -30,99 +33,181 @@ if (Platform.OS === 'android') {
 
 export const Osano: React.FunctionComponent<
 	React.PropsWithChildren<OsanoProps>
-> = (props: React.PropsWithChildren<OsanoProps>) => {
-	const { configId, customerId, hideDisclosures = false, onConfigLoadFailure, onConfigLoadSuccess, onLangLoadFailure, onLangLoadSuccess, overrides } = props;
-	const { flavor, iabEnabled } = overrides || {};
-	const consentManager = useRef<ConsentManager>(new ConsentManager(overrides));
-	const [_state, dispatch, getState, addMiddleware, removeMiddleware] =
-		useThunkReducer<OsanoState, OsanoAction>(
+> = memo(
+	(props: React.PropsWithChildren<OsanoProps>) => {
+		const {
+			configId,
+			customerId,
+			hideUI = false,
+			hideDisclosures = false,
+			onConfigLoadFailure,
+			onConfigLoadSuccess,
+			onLangLoadFailure,
+			onLangLoadSuccess,
+			overrides,
+		} = props;
+		const { flavor, iabEnabled } = overrides || {};
+		const consentManager = useRef<ConsentManager>(
+			new ConsentManager(overrides)
+		);
+
+		const [_state, store] = useThunkReducer<OsanoState, OsanoAction>(
 			reducer,
 			{ configId, customerId },
 			init,
-			[],
+			[consentManager.current.middleware]
+		);
+		const { addMiddleware, dispatch, getState, removeMiddleware } = store;
+
+		const handleGetConsent = useCallback((category?: ConsentCategory) => {
+			if (typeof category === 'string') {
+				return consentManager.current.hasConsent(category);
+			}
+			return consentManager.current.consent ?? [ConsentCategory.ESSENTIAL];
+		}, []);
+
+		const handleRecordConsent = useCallback(
+			(category?: ConsentCategory | ConsentCategory[]) => {
+				let consentedCategories = getConsent(getState());
+				if (category !== undefined) {
+					/*
+					 *	If category(s) is/are provided, we need to:
+					 *	1. Check if all categories provided are valid
+					 *	2. Store them locally
+					 */
+					const categories = (
+						Array.isArray(category) ? category : [category]
+					).filter((cat) => OsanoCategories.includes(cat));
+					consentedCategories = OsanoCategories.filter(
+						(cat) =>
+							cat === ConsentCategory.ESSENTIAL || categories.includes(cat)
+					);
+				}
+				return recordConsent(consentManager.current, consentedCategories);
+			},
+			[]
 		);
 
-	const handleGetConsent = useCallback((category?: ConsentCategory) => {
-		if (typeof category === 'string') {
-			return consentManager.current.hasConsent(category);
-		}
-		return consentManager.current.consent ?? [];
-	}, []);
-
-	const handleRecordConsent = useCallback(() => {
-		return recordConsent(consentManager.current, getConsent(getState()));
-	}, []);
-
-	const handleClearConsent = useCallback(() => {
-		clearConsent(consentManager.current);
-	}, []);
-
-	const handleShowDialog = useCallback(() => {
-		dispatch(showDialog);
-	}, []);
-
-	const handleShowDrawer = useCallback(() => {
-		dispatch(showDrawer);
-	}, []);
-
-	const handleSetLocale = useCallback((value: string) => {
-		if(value) {
-			consentManager.current.translator.load(value, onLangLoadSuccess, onLangLoadFailure).then(() => {
-				dispatch(setLocale(value));
-			});
-		}
-	}, []);
-
-	const handleGetDeviceId = useCallback(() => {
-		return consentManager.current.deviceId;
-	}, []);
-
-	const context = useMemo(() => {
-		consentManager.current
-			.load({ customerId, configId, onConfigLoadSuccess, onConfigLoadFailure, onLangLoadSuccess, onLangLoadFailure})
-			.then(reloadProps => {
-				const { consent = [], ...initProps } = reloadProps;
-				const mappedConsent = OsanoCategories.reduce(
-					(consentMap, category) => {
-						consentMap[`${category}`] = consent.includes(category);
-						return consentMap;
-					},
-					{} as Record<ConsentCategory, boolean | undefined>,
+		const handleClearConsent = useCallback(() => {
+			dispatch({ type: CLEAR_CONSENT });
+		}, []);
+
+		const handleShowDialog = useCallback(() => {
+			dispatch(showDialog());
+		}, []);
+
+		const handleShowDrawer = useCallback(() => {
+			dispatch(showDrawer());
+		}, []);
+
+		const handleSetLocale = useCallback((value: string) => {
+			if (value) {
+				consentManager.current.translator
+					.load(value, onLangLoadSuccess, onLangLoadFailure)
+					.then(() => {
+						dispatch(setLocale(value));
+					});
+			}
+		}, []);
+
+		const handleGetDeviceId = useCallback(() => {
+			return consentManager.current.deviceId;
+		}, []);
+
+		const context = useMemo(() => {
+			consentManager.current
+				.load({
+					customerId,
+					configId,
+					onConfigLoadSuccess,
+					onConfigLoadFailure,
+					onLangLoadSuccess,
+					onLangLoadFailure,
+				})
+				.then((reloadProps) => {
+					// We need to reset the state when the configId or customerId changes
+					dispatch(reload(reloadProps));
+				})
+				.catch(() => {
+					// TODO: Handle error
+				});
+			return {
+				locale: consentManager.current.translator.locale,
+				getConsent: handleGetConsent,
+				getDeviceId: handleGetDeviceId,
+				consent: handleRecordConsent,
+				clearConsent: handleClearConsent,
+				setLocale: handleSetLocale,
+				showBanner: handleShowDialog,
+				showDrawer: handleShowDrawer,
+			};
+		}, [configId, customerId, consentManager.current.translator.locale]);
+
+		useEffect(() => {
+			consentManager.current.config.type = flavor;
+		}, [flavor]);
+
+		const iabLoaded = useRef(false);
+		const iabChanged = usePrevious(iabEnabled) !== iabEnabled;
+		useEffect(() => {
+			// Add IAB reducers only once, and based on which IAB versions we want to load
+			const frameworks: IabFramework[] = [];
+			// TODO: determine gpp, tcf, and usp. For now...we just assume TCF
+			if (consentManager.current.config.tcfController) {
+				frameworks.push({
+					versions: [consentManager.current.config.tcfController],
+				});
+			}
+			if (frameworks.length && !iabLoaded.current) {
+				// We are only going to add the IAB reducers once, and only for configured frameworks/versions
+				// We can do this because we don't EVER want IAB frameworks or versions to change without
+				// a config republish.
+				iabLoaded.current = true;
+				addIabReducers(frameworks)(
+					store as unknown as Store<OsanoState & IabState, OsanoAction>
+				);
+			}
+			consentManager.current.config.iabEnabled = iabEnabled ?? undefined;
+			// Update our store when IAB is changed so we can trigger reloads
+			iabChanged &&
+				dispatch(
+					setConfig({
+						config: consentManager.current.config,
+						customerId,
+						configId,
+					})
 				);
-				// We need to reset the state when the configId or customerId changes
-				dispatch(reload({ ...initProps, consent: mappedConsent }));
-			})
-			.catch(() => {
-				// TODO: Handle error
-			});
-		return {
-			locale: consentManager.current.translator.locale,
-			getConsent: handleGetConsent,
-			getDeviceId: handleGetDeviceId,
-			recordConsent: handleRecordConsent,
-			clearConsent: handleClearConsent,
-			setLocale: handleSetLocale,
-			showBanner: handleShowDialog,
-			showDrawer: handleShowDrawer,
-		};
-	}, [configId, customerId, consentManager.current.translator.locale]);
-
-	useEffect(() => {
-		consentManager.current.config.type = flavor;
-		consentManager.current.config.iabEnabled = iabEnabled;
-	}, [flavor, iabEnabled]);
-
-	return (
-		<OsanoPublicContext.Provider value={context}>
-			{props.children}
-			<ConsentUiBuilder
-				addMiddleware={addMiddleware}
-				removeMiddleware={removeMiddleware}
-				dispatch={dispatch}
-				getState={getState}
-				cmp={consentManager}
-				hideDisclosures={hideDisclosures}
-			/>
-		</OsanoPublicContext.Provider>
-	);
-};
+
+		}, [iabEnabled]);
+
+		return (
+			<OsanoPublicContext.Provider value={context}>
+				{props.children}
+				{hideUI ? null : (
+					<ConsentUiBuilder
+						addMiddleware={addMiddleware}
+						removeMiddleware={removeMiddleware}
+						dispatch={dispatch}
+						getState={getState}
+						cmp={consentManager}
+						hideDisclosures={hideDisclosures}
+					/>
+				)}
+			</OsanoPublicContext.Provider>
+		);
+	},
+	(prev, next) => {
+		const { flavor, iabEnabled } = prev.overrides || {};
+		const { flavor: nextFlavor, iabEnabled: nextIabEnabled } =
+			next.overrides || {};
+		return (
+			prev.configId === next.configId &&
+			prev.customerId === next.customerId &&
+			prev.hideUI === next.hideUI &&
+			prev.hideDisclosures === next.hideDisclosures &&
+			prev.children === next.children &&
+			flavor === nextFlavor &&
+			iabEnabled === nextIabEnabled
+		);
+	}
+);