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

package/src/views/Dialog/index.tsx

@@ -20,14 +20,9 @@ import React, {
 	useState,
 } from 'react';
 import type { ReactElement } from 'react';
-import {
-	acceptAll,
-	close,
-	getConsent,
-	isDialogOpen,
-	saveConsent,
-	toggleCategory,
-} from '../../store';
+import { acceptAll, close, toggleCategory } from '../../actions';
+import { saveConsent } from '../../commands';
+import { getConsent, isDialogOpen } from '../../selectors';
 
 import { OsanoPrivateContext } from '../../context';
 import Buttons from './Buttons';
@@ -66,7 +61,7 @@ export const Dialog = (): ReactElement<Modal> => {
 		? config.iabCategories
 		: config?.nonEssentialCategories || [];
 	const [windowWidth, setWindowWidth] = useState(
-		Dimensions.get('window').width
+		Dimensions.get('window').width,
 	);
 	const handleLayoutChange = useCallback((e: LayoutChangeEvent) => {
 		const width = e.nativeEvent.layout.width;
@@ -81,8 +76,8 @@ export const Dialog = (): ReactElement<Modal> => {
 
 	const handleClose = useCallback(() => {
 		clearImpliedConsentTimeout();
-		if (config?.isConsentImplied) dispatch(acceptAll);
-		dispatch(saveConsent(cmp));
+		if (config?.isConsentImplied) dispatch(acceptAll());
+		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
 	}, [cmp, config?.isConsentImplied, dispatch, clearImpliedConsentTimeout]);
 
@@ -92,7 +87,7 @@ export const Dialog = (): ReactElement<Modal> => {
 				dispatch(toggleCategory({ category, value }));
 			};
 		},
-		[dispatch]
+		[dispatch],
 	);
 
 	const dialogOverlay = useMemo(() => {
@@ -115,7 +110,7 @@ export const Dialog = (): ReactElement<Modal> => {
 				[styles.col, { width: dialogType === 'box' ? 32 : 0 }],
 				[styles.col, { width: dialogType === 'box' ? 32 : 0 }],
 			],
-			[dialogType]
+			[dialogType],
 		);
 	const [vDialogTop = [], vDialogBottom = []]: StyleProp<ViewStyle>[][] =
 		useMemo(
@@ -133,7 +128,7 @@ export const Dialog = (): ReactElement<Modal> => {
 					},
 				],
 			],
-			[dialogType]
+			[dialogType],
 		);
 	const dialogStyles: StyleProp<ViewStyle>[] = [
 		{
@@ -149,14 +144,10 @@ export const Dialog = (): ReactElement<Modal> => {
 	dialogStyles.push(
 		Platform.OS === 'web' && dialogType === 'box'
 			? styles.dialogBox
-			: styles.dialogBar
+			: styles.dialogBar,
 	);
 	dialogStyles.push(
-		windowWidth >= 768
-			? isRTL
-				? styles.rowReverse
-				: styles.row
-			: styles.col
+		windowWidth >= 768 ? (isRTL ? styles.rowReverse : styles.row) : styles.col,
 	);
 
 	switch (displayPosition) {
@@ -201,7 +192,7 @@ export const Dialog = (): ReactElement<Modal> => {
 		) {
 			impliedConsentTimeout.current = setTimeout(
 				handleClose,
-				config.timeoutSeconds * 1000
+				config.timeoutSeconds * 1000,
 			);
 		}
 		return () => {
@@ -224,10 +215,7 @@ export const Dialog = (): ReactElement<Modal> => {
 			onRequestClose={handleClose}
 			onLayout={handleLayoutChange}
 		>
-			<SafeAreaView
-				ref={overlayRef}
-				style={[styles.container, dialogOverlay]}
-			>
+			<SafeAreaView ref={overlayRef} style={[styles.container, dialogOverlay]}>
 				<View
 					style={vDialogTop}
 					onPointerUp={handleClose}
@@ -244,7 +232,7 @@ export const Dialog = (): ReactElement<Modal> => {
 					<View style={dialogStyles}>
 						<View style={styles.dialogContent}>
 							<View style={[styles.row, styles.fitContent]}>
-								<Text style={dialogForeground}>
+								<Text style={dialogForeground} testID='dialog-message'>
 									<Message />
 									<Text> </Text>
 									<StoragePolicyLink />
@@ -252,6 +240,7 @@ export const Dialog = (): ReactElement<Modal> => {
 							</View>
 							{isFirstLayerUsageRequired ? (
 								<View
+									testID='first-layer-usage'
 									style={[
 										styles.row,
 										styles.categories,
@@ -261,9 +250,9 @@ export const Dialog = (): ReactElement<Modal> => {
 									<FirstLayerUsage />
 								</View>
 							) : null}
-							{useTcf ||
-							config?.showManagePreferencesLinkInDialog ? (
+							{useTcf || config?.showManagePreferencesLinkInDialog ? (
 								<View
+								testID='preference-management-deep-links'
 									style={[
 										styles.row,
 										styles.categories,
@@ -273,8 +262,9 @@ export const Dialog = (): ReactElement<Modal> => {
 									<PreferenceManagementDeepLinks />
 								</View>
 							) : null}
-							{useTcf || config?.showFirstLayerCategories ? (
+							{useTcf && !config?.showManagePreferencesButtonInDialog ? (
 								<View
+									testID='show-first-layer-categories'
 									style={[
 										styles.col,
 										styles.categories,
@@ -285,15 +275,11 @@ export const Dialog = (): ReactElement<Modal> => {
 										<Toggle
 											align="left"
 											key={category}
-											onValueChange={handleToggleCategory(
-												category
-											)}
+											onValueChange={handleToggleCategory(category)}
 											value={getConsent(state, category)}
 										>
 											<Text style={dialogForeground}>
-												<Locale
-													path={`categories.${category}.label`}
-												/>
+												<Locale path={`categories.${category}.label`} />
 											</Text>
 										</Toggle>
 									))}
@@ -303,9 +289,7 @@ export const Dialog = (): ReactElement<Modal> => {
 						<Buttons
 							style={[
 								styles.buttons,
-								windowWidth >= 768
-									? styles.dialogCol
-									: styles.dialogRow,
+								windowWidth >= 768 ? styles.dialogCol : styles.dialogRow,
 							]}
 						/>
 						<CloseButton

package/src/views/Drawer/Drawer.ConsentCategories.tsx

@@ -18,24 +18,14 @@ import React, {
 	useMemo,
 	useRef,
 } from 'react';
-import {
-	SHOW_DRAWER,
-	close,
-	getCategoryDisclosures,
-	getStack,
-	isCategoryAccepted,
-	isCategoryDisabled,
-	saveConsent,
-	showIabDisclosures,
-	showIabVendors,
-	toggleCategory,
-	toggleDisclosure,
-	toggleIabSpecialFeature,
-} from '../../store';
 import Translator, { type LocalizedStrings } from '../../utils/Translator';
 
-import { Button } from '../../components/Button';
-import { type Disclosure } from '../../types/store';
+import {
+	AcceptAllButton,
+	Button,
+	RejectAllButton,
+} from '../../components/Button';
+import type { Disclosure } from '../../types/store';
 import { Divider } from '../../components/Divider';
 import DrawerHeader from './Drawer.Header';
 import { ExpansionPanel } from '../../components/ExpansionPanel';
@@ -51,6 +41,21 @@ import {
 	type ConsentCategory as ConsentCategoryType,
 	ConsentCategory,
 } from '../../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';
 
 type ConsentCategoryItem = {
 	type: 'info' | 'category' | 'specialFeature';
@@ -71,7 +76,7 @@ const Loading: React.FC = () => {
 	return <ActivityIndicator size="small" color={infoDialogForegroundColor} />;
 };
 
-const TextDisclosure: React.FC<Disclosure> = props => {
+const TextDisclosure: React.FC<Disclosure> = (props) => {
 	const { config } = useContext(OsanoPrivateContext);
 	const { palette } = config || {};
 
@@ -96,7 +101,7 @@ const TextDisclosure: React.FC<Disclosure> = props => {
 	);
 };
 
-const CookieDisclosure: React.FC<Disclosure & { last: boolean }> = props => {
+const CookieDisclosure: React.FC<Disclosure & { last: boolean }> = (props) => {
 	const { config, locale } = useContext(OsanoPrivateContext);
 	const { palette } = config || {};
 
@@ -181,7 +186,7 @@ const CookieDisclosure: React.FC<Disclosure & { last: boolean }> = props => {
 	);
 };
 
-const Disclosures: React.FC<{ category: ConsentCategoryType }> = props => {
+const Disclosures: React.FC<{ category: ConsentCategoryType }> = (props) => {
 	const { getState, loadingDisclosures } = useContext(OsanoPrivateContext);
 	const { category } = props;
 	const state = getState();
@@ -212,19 +217,42 @@ const Disclosures: React.FC<{ category: ConsentCategoryType }> = props => {
 	);
 };
 
-const PurposeLinkRenderer = ({ item }: ListRenderItemInfo<PurposeLinkItem>) => {
+const PurposeLinkRenderer: React.FC<{ item: PurposeLinkItem }> = ({ item }) => {
 	const { id, style, onPress } = item;
+
+	const { config } = useContext(OsanoPrivateContext);
+
+	const partnerCount =
+		config?.getCountOfVendorsUsingPurpose('purposes', Number(id)) ?? 0;
+	const partnerCountString =
+		partnerCount > 1 ? (
+			<Locale
+				path="iab.partnerCountPlural"
+				options={{
+					interpolations: { partnerCount: partnerCount.toString() },
+				}}
+			/>
+		) : (
+			<Locale
+				path="iab.partnerCount"
+				options={{
+					interpolations: { partnerCount: partnerCount.toString() },
+				}}
+			/>
+		);
+
 	return (
 		<Link style={style} onPress={onPress}>
-			<Locale path={`iab.purposes.${id}.name`} />
+			<Text>
+				<Locale path={`iab.purposes.${id}.name`} /> ({partnerCountString})
+			</Text>
 		</Link>
 	);
 };
-
 const CategoryListItem: React.FC<{
 	category: ConsentCategoryType;
 	style: StyleProp<ViewStyle>;
-}> = props => {
+}> = (props) => {
 	const { category } = props;
 
 	const { config, dispatch, getState, hideDisclosures, locale, translate } =
@@ -260,13 +288,13 @@ const CategoryListItem: React.FC<{
 	}, [drawerForeground]);
 	const purposes: PurposeLinkItem[] = useMemo(
 		() =>
-			((useTcf && purposeMap[`${category}`]) || []).map(purposeId => ({
+			((useTcf && purposeMap[`${category}`]) || []).map((purposeId) => ({
 				id: purposeId,
 				style: purposeLink,
 				onPress: () =>
 					dispatch(showIabDisclosures({ id: purposeId, type: 'purpose' })),
 			})),
-		[dispatch, category, useTcf],
+		[dispatch, category, useTcf]
 	);
 
 	const ListHeaderComponent = useMemo(
@@ -275,7 +303,7 @@ const CategoryListItem: React.FC<{
 				<Locale path={`iab.basis.consent`} />
 			</Text>
 		),
-		[drawerForeground],
+		[drawerForeground]
 	);
 	const checked = isCategoryAccepted(state, category);
 	const disabled = isCategoryDisabled(state, category);
@@ -294,7 +322,7 @@ const CategoryListItem: React.FC<{
 				category,
 				configId: config?.configId,
 				customerId: config?.customerId,
-			}),
+			})
 		);
 	}, [config]);
 	return (
@@ -319,7 +347,7 @@ const CategoryListItem: React.FC<{
 				<FlatList
 					ListHeaderComponent={purposes.length ? ListHeaderComponent : null}
 					data={purposes}
-					renderItem={PurposeLinkRenderer}
+					renderItem={({ item }) => <PurposeLinkRenderer item={item} />}
 					style={{
 						marginTop: purposes.length ? 16 : 0,
 					}}
@@ -347,7 +375,7 @@ const SpecialFeatureListItem: React.FC<{
 	const name = `iab.specialFeatures.${specialFeatureId}.name`;
 	const description = `iab.specialFeatures.${specialFeatureId}.description`;
 	const descriptionLegal = `iab.specialFeatures.${specialFeatureId}.descriptionLegal`;
-	const { config, dispatch, locale, translate } =
+	const { config, dispatch, getState, locale, translate } =
 		useContext(OsanoPrivateContext);
 	const { palette } = config || {};
 
@@ -357,15 +385,21 @@ const SpecialFeatureListItem: React.FC<{
 			color: infoDialogForegroundColor,
 		};
 	}, [infoDialogForegroundColor]);
-	const checked = config?.isIabSpecialFeatureAccepted(specialFeatureId);
+	const checked = config?.isIabSpecialFeatureAccepted(
+		specialFeatureId,
+		getState() as any
+	);
 	const hasLegalDescription = useMemo(
 		() => translate(descriptionLegal) !== descriptionLegal,
-		[locale],
+		[locale]
 	);
 	const isRTL = Translator.isRTL(locale);
-	const handleValueChange = useCallback((_value: boolean) => {
-		dispatch(toggleIabSpecialFeature(specialFeatureId));
-	}, []);
+	const handleValueChange = useBoundCallback(
+		(specialFeatureId, acceptOrDeny: boolean) => {
+			dispatch(setSpecialFeatureConsent(specialFeatureId, acceptOrDeny));
+		},
+		[specialFeatureId]
+	);
 	return (
 		<View>
 			<View style={[styles.row, styles.listItem]}>
@@ -427,7 +461,10 @@ const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 	return (
 		<View style={[styles.listItem, styles.listHeader, style]}>
 			<View style={extraLinks ? styles.paragraph : undefined}>
-				<Text style={drawerForeground}>
+				<Text 
+				style={drawerForeground}
+				testID='drawer-description'
+				>
 					<Locale path="drawer.description" />
 				</Text>
 			</View>
@@ -450,6 +487,12 @@ const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 					) : null}
 				</View>
 			) : null}
+			{useTcf ? (
+				<>
+					<AcceptAllButton />
+					<RejectAllButton />
+				</>
+			) : null}
 		</View>
 	);
 };
@@ -458,7 +501,7 @@ const CategoryListFooter: React.FC = () => {
 	const { cmp, dispatch } = useContext(OsanoPrivateContext);
 
 	const handleSave = useCallback(() => {
-		dispatch(saveConsent(cmp));
+		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
 	}, []);
 
@@ -545,7 +588,7 @@ export const ConsentCategoriesDrawer: React.FC = () => {
 	const categories: ConsentCategoryItem[] = useMemo(() => {
 		const newCategories: ConsentCategoryItem[] = (
 			useTcf ? config.iabCategories : config?.categories || []
-		).map(category => {
+		).map((category) => {
 			return {
 				type: 'category',
 				id: category,
@@ -561,12 +604,12 @@ export const ConsentCategoriesDrawer: React.FC = () => {
 		}
 		if (useTcf) {
 			Object.keys(translate(`iab.specialFeatures`) as LocalizedStrings).map(
-				specialFeatureId =>
+				(specialFeatureId) =>
 					newCategories.push({
 						type: 'specialFeature',
 						id: specialFeatureId,
 						headerHeight,
-					}),
+					})
 			);
 		}
 		newCategories.unshift({
@@ -671,8 +714,8 @@ const styles = StyleSheet.create({
 		width: '30%',
 	},
 	disclosureDescription: {
-		flexWrap:'wrap',
-		width: '70%'
+		flexWrap: 'wrap',
+		width: '70%',
 	},
 	spaceBetween: {
 		gap: 8,

package/src/views/Drawer/Drawer.Header.tsx

@@ -21,7 +21,7 @@ export type DrawerHeaderType = {
 	onHeaderLayoutChange?: (e: LayoutChangeEvent) => void;
 };
 
-export const DrawerHeader: React.FC<DrawerHeaderType> = props => {
+export const DrawerHeader: React.FC<DrawerHeaderType> = (props) => {
 	const { canGoBack, onHeaderLayoutChange, title } = props;
 	const { config, locale } = useContext(OsanoPrivateContext);
 	const isRTL = Translator.isRTL(locale);
@@ -52,7 +52,7 @@ export const DrawerHeader: React.FC<DrawerHeaderType> = props => {
 			setHeaderHeight(height + (Platform.OS === 'web' ? 0 : 24));
 			onHeaderLayoutChange && onHeaderLayoutChange(e);
 		},
-		[onHeaderLayoutChange],
+		[onHeaderLayoutChange]
 	);
 
 	return (
@@ -61,6 +61,7 @@ export const DrawerHeader: React.FC<DrawerHeaderType> = props => {
 				height={headerHeight}
 				width="100%"
 				style={{
+					pointerEvents: 'none',
 					position: 'absolute',
 					top: 0,
 					left: 0,

package/src/views/Drawer/Drawer.Iab.Disclosures.tsx

@@ -17,28 +17,27 @@ import React, {
 	useMemo,
 	useRef,
 } from 'react';
-import {
-	SHOW_IAB_DISCLOSURES,
-	getStack,
-	toggleIabPurposeOptOut,
-} from '../../store';
+import { SHOW_IAB_DISCLOSURES } from '../../actions';
+import { getStack } from '../../selectors';
 
 import Checkbox from '../../components/Checkbox';
 import { Divider } from '../../components/Divider';
 import DrawerHeader from './Drawer.Header';
-import { type IabDisclosureType } from '../../iab/types';
+import type { IabDisclosureType } from '../../iab/types';
 import Locale from '../../components/Locale';
 import { OsanoPrivateContext } from '../../context';
 import Translator from '../../utils/Translator';
 import useBoundCallback from '../../hooks/useBoundCallback';
 import { usePrevious } from '../../hooks/usePrevious';
+import { setPurposeConsent } from '../../iab/tcf/actions';
 
 const IabDisclosureItem: React.FC<
 	IabDisclosureType & { id: number; type: string }
-> = disclosure => {
+> = (disclosure) => {
 	const { id, name, description, descriptionLegal, type, illustrations } =
 		disclosure;
-	const { config, dispatch, locale } = useContext(OsanoPrivateContext);
+	const { config, dispatch, getState, locale } =
+		useContext(OsanoPrivateContext);
 	const { palette } = config || {};
 	const { infoDialogForegroundColor } = palette || {};
 	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
@@ -49,14 +48,16 @@ const IabDisclosureItem: React.FC<
 
 	const isRTL = Translator.isRTL(locale);
 
-	const handleValueChange = useCallback(
-		(value: boolean) => {
-			dispatch(toggleIabPurposeOptOut({ id, value }));
+	const handleValueChange = useBoundCallback(
+		(purposeId, acceptOrDeny: boolean) => {
+			dispatch(setPurposeConsent(purposeId, acceptOrDeny));
 		},
-		[id],
+		[id]
 	);
 
-	const checked = config?.isIabPurposeOptedOut(id);
+	const partnerCount = config?.getCountOfVendorsUsingPurpose(type, id) ?? 0;
+
+	const checked = config?.isIabPurposeOptedOut(id, getState() as any);
 
 	return (
 		<View style={{ marginBottom: 16 }}>
@@ -71,6 +72,18 @@ const IabDisclosureItem: React.FC<
 			>
 				<Locale path={name} />
 			</Text>
+			{type === 'purpose' ? (
+				<Text style={[styles.paragraph, styles.listItem, drawerForeground]}>
+					<Locale
+						path={
+							partnerCount !== 1 ? 'iab.partnerCountPlural' : 'iab.partnerCount'
+						}
+						options={{
+							interpolations: { partnerCount: partnerCount.toString() },
+						}}
+					/>
+				</Text>
+			) : null}
 			<Text style={[styles.paragraph, styles.listItem, drawerForeground]}>
 				<Locale path={description} />
 			</Text>
@@ -166,7 +179,7 @@ const ListItemRenderer = ({
 
 const termAssign = (
 	type: string,
-	disclosures: Record<string, IabDisclosureType>,
+	disclosures: Record<string, IabDisclosureType>
 ) =>
 	Object.entries(disclosures).map(([itemId, disclosure]) => ({
 		id: parseInt(itemId, 10),
@@ -218,7 +231,7 @@ export const IabDisclosuresDrawer: React.FC = () => {
 				viewOffset,
 			});
 		},
-		[headerHeight],
+		[headerHeight]
 	);
 
 	const scrollToTop = useBoundCallback((animated: boolean = false) => {
@@ -236,27 +249,36 @@ export const IabDisclosuresDrawer: React.FC = () => {
 		);
 	}, [locale, stack.length]);
 
-	const { purposes, specialPurposes, features, specialFeatures } =
-		useMemo(() => {
-			return {
-				purposes: termAssign(
-					'purpose',
-					translate('iab.purposes') as Record<string, IabDisclosureType>,
-				),
-				specialPurposes: termAssign(
-					'specialPurpose',
-					translate('iab.specialPurposes') as Record<string, IabDisclosureType>,
-				),
-				features: termAssign(
-					'feature',
-					translate('iab.features') as Record<string, IabDisclosureType>,
-				),
-				specialFeatures: termAssign(
-					'specialFeature',
-					translate('iab.specialFeatures') as Record<string, IabDisclosureType>,
-				),
-			};
-		}, [locale]);
+	const {
+		purposes,
+		specialPurposes,
+		features,
+		specialFeatures,
+		dataCategories,
+	} = useMemo(() => {
+		return {
+			purposes: termAssign(
+				'purpose',
+				translate('iab.purposes') as Record<string, IabDisclosureType>
+			),
+			specialPurposes: termAssign(
+				'specialPurpose',
+				translate('iab.specialPurposes') as Record<string, IabDisclosureType>
+			),
+			features: termAssign(
+				'feature',
+				translate('iab.features') as Record<string, IabDisclosureType>
+			),
+			specialFeatures: termAssign(
+				'specialFeature',
+				translate('iab.specialFeatures') as Record<string, IabDisclosureType>
+			),
+			dataCategories: termAssign(
+				'dataCategories',
+				translate('iab.dataCategories') as Record<string, IabDisclosureType>
+			),
+		};
+	}, [locale]);
 
 	const jumpToIndex = useMemo(() => {
 		let idx = -1;
@@ -264,22 +286,22 @@ export const IabDisclosuresDrawer: React.FC = () => {
 			idx = 1; // account for the header
 			switch (scrollToType) {
 				case 'purpose':
-					idx += purposes.findIndex(item => item.id === scrollToId);
+					idx += purposes.findIndex((item) => item.id === scrollToId);
 					break;
 				case 'specialPurpose':
 					idx += purposes.length;
-					idx += specialPurposes.findIndex(item => item.id === scrollToId);
+					idx += specialPurposes.findIndex((item) => item.id === scrollToId);
 					break;
 				case 'feature':
 					idx += purposes.length;
 					idx += specialPurposes.length;
-					idx += features.findIndex(item => item.id === scrollToId);
+					idx += features.findIndex((item) => item.id === scrollToId);
 					break;
 				case 'specialFeature':
 					idx += purposes.length;
 					idx += specialPurposes.length;
 					idx += features.length;
-					idx += specialFeatures.findIndex(item => item.id === scrollToId);
+					idx += specialFeatures.findIndex((item) => item.id === scrollToId);
 					break;
 				default:
 					// scroll to top
@@ -308,8 +330,16 @@ export const IabDisclosuresDrawer: React.FC = () => {
 			...specialPurposes,
 			...features,
 			...specialFeatures,
+			...dataCategories,
 		];
-	}, [purposes, specialPurposes, features, specialFeatures, headerHeight]);
+	}, [
+		purposes,
+		specialPurposes,
+		features,
+		specialFeatures,
+		headerHeight,
+		dataCategories,
+	]);
 
 	const extraData = useMemo(() => {
 		return {};