@osano/osano-cmp-react-native 0.1.0 → 0.3.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';
@@ -44,8 +39,6 @@ import { type ConsentCategory } from '../../constants';
 export const Dialog = (): ReactElement<Modal> => {
 	const { cmp, config, dispatch, getState, locale } =
 		useContext(OsanoPrivateContext);
-	const overlayRef = useRef(null);
-	const closeButtonRef = useRef(null);
 	const impliedConsentTimeout = useRef<NodeJS.Timeout | null>(null);
 	const state = getState();
 	const { palette } = config || {};
@@ -66,7 +59,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 +74,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 +85,7 @@ export const Dialog = (): ReactElement<Modal> => {
 				dispatch(toggleCategory({ category, value }));
 			};
 		},
-		[dispatch]
+		[dispatch],
 	);
 
 	const dialogOverlay = useMemo(() => {
@@ -104,9 +97,9 @@ export const Dialog = (): ReactElement<Modal> => {
 		const style: StyleProp<TextStyle> = {
 			color: dialogForegroundColor,
 		};
-		if (Platform.OS === 'web') {
-			style.writingDirection = isRTL ? 'rtl' : 'ltr';
-		}
+		// if (Platform.OS === 'web') {
+		// 	style.writingDirection = isRTL ? 'rtl' : 'ltr';
+		// }
 		return style;
 	}, [isRTL, dialogForegroundColor]);
 	const [hDialogLeft = [], hDialogRight = []]: StyleProp<ViewStyle>[][] =
@@ -115,7 +108,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 +126,7 @@ export const Dialog = (): ReactElement<Modal> => {
 					},
 				],
 			],
-			[dialogType]
+			[dialogType],
 		);
 	const dialogStyles: StyleProp<ViewStyle>[] = [
 		{
@@ -141,22 +134,18 @@ export const Dialog = (): ReactElement<Modal> => {
 			backgroundColor: dialogBackgroundColor,
 			justifyContent: 'center',
 			flex: 1,
-			flexGrow: 1,
-			flexShrink: 1,
+			// flexGrow: 1,
+			// flexShrink: 1,
 		},
 	];
 
 	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 +190,7 @@ export const Dialog = (): ReactElement<Modal> => {
 		) {
 			impliedConsentTimeout.current = setTimeout(
 				handleClose,
-				config.timeoutSeconds * 1000
+				config.timeoutSeconds * 1000,
 			);
 		}
 		return () => {
@@ -224,10 +213,7 @@ export const Dialog = (): ReactElement<Modal> => {
 			onRequestClose={handleClose}
 			onLayout={handleLayoutChange}
 		>
-			<SafeAreaView
-				ref={overlayRef}
-				style={[styles.container, dialogOverlay]}
-			>
+			<SafeAreaView style={[styles.container, dialogOverlay]}>
 				<View
 					style={vDialogTop}
 					onPointerUp={handleClose}
@@ -244,7 +230,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 +238,7 @@ export const Dialog = (): ReactElement<Modal> => {
 							</View>
 							{isFirstLayerUsageRequired ? (
 								<View
+									testID='first-layer-usage'
 									style={[
 										styles.row,
 										styles.categories,
@@ -261,9 +248,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 +260,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 +273,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,13 +287,10 @@ export const Dialog = (): ReactElement<Modal> => {
 						<Buttons
 							style={[
 								styles.buttons,
-								windowWidth >= 768
-									? styles.dialogCol
-									: styles.dialogRow,
+								windowWidth >= 768 ? styles.dialogCol : styles.dialogRow,
 							]}
 						/>
 						<CloseButton
-							ref={closeButtonRef}
 							onPress={handleClose}
 							style={[
 								styles.close,
@@ -357,7 +338,7 @@ const styles = StyleSheet.create({
 		width: '100%',
 	},
 	dialogContent: {
-		flexShrink: 1,
+		// flexShrink: 1,
 		justifyContent: 'center',
 		maxWidth: 1024,
 	},
@@ -416,8 +397,8 @@ const styles = StyleSheet.create({
 	},
 	vCenter: {
 		alignItems: 'center',
-		flexGrow: 0,
-		flexShrink: 1,
+		// flexGrow: 0,
+		// flexShrink: 1,
 	},
 	vBottom: {
 		alignItems: 'flex-end',
@@ -433,8 +414,8 @@ const styles = StyleSheet.create({
 	},
 	fitContent: {
 		flexBasis: 'auto',
-		flexGrow: 0,
-		flexShrink: 1,
+		// flexGrow: 0,
+		// flexShrink: 1,
 		flexWrap: 'wrap',
 	},
 });

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);
@@ -49,10 +49,10 @@ export const DrawerHeader: React.FC<DrawerHeaderType> = props => {
 	const handleLayoutChange = useCallback(
 		(e: LayoutChangeEvent) => {
 			const height = e.nativeEvent.layout.height;
-			setHeaderHeight(height + (Platform.OS === 'web' ? 0 : 24));
+			setHeaderHeight(height);
 			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,