@osano/osano-cmp-react-native 0.1.0

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

@@ -0,0 +1,689 @@
+import {
+	ActivityIndicator,
+	FlatList,
+	type LayoutChangeEvent,
+	type ListRenderItemInfo,
+	Platform,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextStyle,
+	View,
+	type ViewStyle,
+} from 'react-native';
+import React, {
+	useCallback,
+	useContext,
+	useEffect,
+	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 { Divider } from '../../components/Divider';
+import DrawerHeader from './Drawer.Header';
+import { ExpansionPanel } from '../../components/ExpansionPanel';
+import { Link } from '../../components/Link';
+import Locale from '../../components/Locale';
+import { OsanoPrivateContext } from '../../context';
+import StoragePolicyLink from '../../components/StoragePolicyLink';
+import Toggle from '../../components/Toggle';
+import { purposeMap } from '../../iab/tcf/constants';
+import useBoundCallback from '../../hooks/useBoundCallback';
+import { usePrevious } from '../../hooks/usePrevious';
+import {
+	type ConsentCategory as ConsentCategoryType,
+	ConsentCategory,
+} from '../../constants';
+
+type ConsentCategoryItem = {
+	type: 'info' | 'category' | 'specialFeature';
+	id: string;
+	headerHeight?: number;
+};
+
+type PurposeLinkItem = {
+	id: string | number;
+	style: StyleProp<TextStyle>;
+	onPress: () => void;
+};
+
+const Loading: React.FC = () => {
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const { infoDialogForegroundColor } = palette || {};
+	return <ActivityIndicator size="small" color={infoDialogForegroundColor} />;
+};
+
+const TextDisclosure: React.FC<Disclosure> = props => {
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+			fontSize: 12,
+		};
+	}, [infoDialogForegroundColor]);
+
+	const { name } = props;
+
+	return (
+		<View style={styles.col}>
+			<View style={styles.row}>
+				<Text style={drawerForeground}>
+					<Locale path={name} />
+				</Text>
+			</View>
+		</View>
+	);
+};
+
+const CookieDisclosure: React.FC<Disclosure & { last: boolean }> = props => {
+	const { config, locale } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const isRTL = Translator.isRTL(locale);
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+			writingDirection:
+				Platform.OS !== 'web' ? (isRTL ? 'rtl' : 'ltr') : undefined,
+			fontSize: 12,
+		};
+	}, [infoDialogForegroundColor]);
+
+	const { name, expiry, provider, purpose, last } = props;
+
+	return (
+		<View
+			style={[
+				styles.col,
+				styles.disclosure,
+				last ? styles.disclosureLast : undefined,
+			]}
+		>
+			<View
+				style={[
+					styles.row,
+					styles.spaceBetween,
+					isRTL ? styles.rtl : styles.ltr,
+				]}
+			>
+				<Text style={[drawerForeground, styles.disclosureLabel]}>
+					<Locale path="disclosure.cookie.name" />
+				</Text>
+				<Text style={[drawerForeground, styles.disclosureDescription]}>
+					{name}
+				</Text>
+			</View>
+			<View
+				style={[
+					styles.row,
+					styles.spaceBetween,
+					isRTL ? styles.rtl : styles.ltr,
+				]}
+			>
+				<Text style={[drawerForeground, styles.disclosureLabel]}>
+					<Locale path="disclosure.cookie.provider" />
+				</Text>
+				<Text style={[drawerForeground, styles.disclosureDescription]}>
+					{provider}
+				</Text>
+			</View>
+			<View
+				style={[
+					styles.row,
+					styles.spaceBetween,
+					isRTL ? styles.rtl : styles.ltr,
+				]}
+			>
+				<Text style={[drawerForeground, styles.disclosureLabel]}>
+					<Locale path="disclosure.cookie.expiry" />
+				</Text>
+				<Text style={[drawerForeground, styles.disclosureDescription]}>
+					{expiry}
+				</Text>
+			</View>
+			<View
+				style={[
+					styles.row,
+					styles.spaceBetween,
+					isRTL ? styles.rtl : styles.ltr,
+				]}
+			>
+				<Text style={[drawerForeground, styles.disclosureLabel]}>
+					<Locale path="disclosure.cookie.purpose" />
+				</Text>
+				<Text style={[drawerForeground, styles.disclosureDescription]}>
+					{purpose}
+				</Text>
+			</View>
+		</View>
+	);
+};
+
+const Disclosures: React.FC<{ category: ConsentCategoryType }> = props => {
+	const { getState, loadingDisclosures } = useContext(OsanoPrivateContext);
+	const { category } = props;
+	const state = getState();
+	// The following selector will return an empty array if the disclosures have not been fetched yet,
+	// otherwise it will return the disclosures for the given category, or a No Results disclosure
+	const categoryDisclosures = getCategoryDisclosures(state, category);
+	return (
+		<View style={styles.listItem}>
+			{!loadingDisclosures && categoryDisclosures.length > 0 ? (
+				categoryDisclosures.map((disclosure, i, list) => {
+					switch (disclosure.type) {
+						case 'cookie':
+							return (
+								<CookieDisclosure
+									key={i}
+									last={i === list.length - 1}
+									{...disclosure}
+								/>
+							);
+						default:
+							return <TextDisclosure key={i} {...disclosure} />;
+					}
+				})
+			) : (
+				<Loading />
+			)}
+		</View>
+	);
+};
+
+const PurposeLinkRenderer = ({ item }: ListRenderItemInfo<PurposeLinkItem>) => {
+	const { id, style, onPress } = item;
+	return (
+		<Link style={style} onPress={onPress}>
+			<Locale path={`iab.purposes.${id}.name`} />
+		</Link>
+	);
+};
+
+const CategoryListItem: React.FC<{
+	category: ConsentCategoryType;
+	style: StyleProp<ViewStyle>;
+}> = props => {
+	const { category } = props;
+
+	const { config, dispatch, getState, hideDisclosures, locale, translate } =
+		useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+		};
+	}, [infoDialogForegroundColor]);
+	const purposeLink = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			fontSize: 12,
+			lineHeight: 14,
+			marginBottom: 4,
+			textDecorationLine: 'none',
+		};
+	}, []);
+	const state = getState();
+	const useTcf = config?.tcfIsApplicable;
+
+	const descriptions = useMemo(() => {
+		const allDescriptions = (
+			`${translate(`categories.${category}.description`)}`.split('\n\n') || []
+		).map((d, i) => (
+			<Text key={i} style={[{ fontSize: 12 }, drawerForeground]}>
+				{d}
+			</Text>
+		));
+		return allDescriptions.length > 0 ? allDescriptions : null;
+	}, [drawerForeground]);
+	const purposes: PurposeLinkItem[] = useMemo(
+		() =>
+			((useTcf && purposeMap[`${category}`]) || []).map(purposeId => ({
+				id: purposeId,
+				style: purposeLink,
+				onPress: () =>
+					dispatch(showIabDisclosures({ id: purposeId, type: 'purpose' })),
+			})),
+		[dispatch, category, useTcf],
+	);
+
+	const ListHeaderComponent = useMemo(
+		() => (
+			<Text style={[drawerForeground, { fontSize: 14, marginBottom: 8 }]}>
+				<Locale path={`iab.basis.consent`} />
+			</Text>
+		),
+		[drawerForeground],
+	);
+	const checked = isCategoryAccepted(state, category);
+	const disabled = isCategoryDisabled(state, category);
+	const shouldHideDisclosures =
+		hideDisclosures || category === ConsentCategory.OPT_OUT;
+	const isRTL = Translator.isRTL(locale);
+	const toggleTextStyle = useMemo<StyleProp<TextStyle>>(() => {
+		return [drawerForeground, styles.toggleLabel];
+	}, [drawerForeground]);
+	const handleValueChange = useCallback((value: boolean) => {
+		dispatch(toggleCategory({ category, value }));
+	}, []);
+	const handleToggleDisclosure = useCallback(() => {
+		dispatch(
+			toggleDisclosure({
+				category,
+				configId: config?.configId,
+				customerId: config?.customerId,
+			}),
+		);
+	}, [config]);
+	return (
+		<View
+			style={{ flex: 1, alignItems: 'stretch', justifyContent: 'flex-start' }}
+		>
+			<View style={[styles.listItem, { flex: 1, paddingBottom: 24 }]}>
+				<View style={styles.row}>
+					<Toggle
+						align={isRTL ? 'left' : 'right'}
+						disabled={disabled}
+						onValueChange={handleValueChange}
+						style={styles.switch}
+						value={checked}
+					>
+						<Text style={toggleTextStyle}>
+							<Locale path={`categories.${category}.label`} />
+						</Text>
+					</Toggle>
+				</View>
+				{descriptions}
+				<FlatList
+					ListHeaderComponent={purposes.length ? ListHeaderComponent : null}
+					data={purposes}
+					renderItem={PurposeLinkRenderer}
+					style={{
+						marginTop: purposes.length ? 16 : 0,
+					}}
+				/>
+			</View>
+			{!shouldHideDisclosures ? (
+				<View style={{ marginTop: -24 }}>
+					<ExpansionPanel
+						title="messaging.viewCookies"
+						style={styles.listItem}
+						onOpen={handleToggleDisclosure}
+					>
+						<Disclosures category={category} />
+					</ExpansionPanel>
+				</View>
+			) : null}
+		</View>
+	);
+};
+
+const SpecialFeatureListItem: React.FC<{
+	specialFeatureId: string;
+	style: StyleProp<ViewStyle>;
+}> = ({ specialFeatureId }) => {
+	const name = `iab.specialFeatures.${specialFeatureId}.name`;
+	const description = `iab.specialFeatures.${specialFeatureId}.description`;
+	const descriptionLegal = `iab.specialFeatures.${specialFeatureId}.descriptionLegal`;
+	const { config, dispatch, locale, translate } =
+		useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo(() => {
+		return {
+			color: infoDialogForegroundColor,
+		};
+	}, [infoDialogForegroundColor]);
+	const checked = config?.isIabSpecialFeatureAccepted(specialFeatureId);
+	const hasLegalDescription = useMemo(
+		() => translate(descriptionLegal) !== descriptionLegal,
+		[locale],
+	);
+	const isRTL = Translator.isRTL(locale);
+	const handleValueChange = useCallback((_value: boolean) => {
+		dispatch(toggleIabSpecialFeature(specialFeatureId));
+	}, []);
+	return (
+		<View>
+			<View style={[styles.row, styles.listItem]}>
+				<Toggle
+					align={isRTL ? 'left' : 'right'}
+					onValueChange={handleValueChange}
+					style={styles.switch}
+					value={checked}
+				>
+					<Text style={[drawerForeground, styles.toggleLabel]}>
+						<Locale path={name} />
+					</Text>
+				</Toggle>
+			</View>
+			<Text
+				style={[
+					styles.listItem,
+					drawerForeground,
+					hasLegalDescription ? {} : styles.paragraph,
+				]}
+			>
+				<Locale path={description} />
+			</Text>
+			{hasLegalDescription ? (
+				<ExpansionPanel style={styles.listItem} title="messaging.moreDetails">
+					<TextDisclosure type="text" name={descriptionLegal} />
+				</ExpansionPanel>
+			) : null}
+		</View>
+	);
+};
+
+const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
+	style,
+}) => {
+	const { config, dispatch } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+			fontSize: 12,
+			lineHeight: 16,
+		};
+	}, [infoDialogForegroundColor]);
+	const handleGoIabVendors = useCallback(() => {
+		dispatch(showIabVendors());
+	}, []);
+
+	const handleGoIabDisclosures = useCallback(() => {
+		dispatch(showIabDisclosures());
+	}, []);
+
+	const useTcf = config?.tcfIsApplicable;
+	const policyLinkInDrawer = config?.policyLinkInDrawer;
+
+	const extraLinks = policyLinkInDrawer || useTcf;
+	return (
+		<View style={[styles.listItem, styles.listHeader, style]}>
+			<View style={extraLinks ? styles.paragraph : undefined}>
+				<Text style={drawerForeground}>
+					<Locale path="drawer.description" />
+				</Text>
+			</View>
+			{extraLinks ? (
+				<View>
+					{policyLinkInDrawer ? (
+						<Text>
+							<StoragePolicyLink />
+						</Text>
+					) : null}
+					{useTcf ? (
+						<Link onPress={handleGoIabVendors}>
+							<Locale path={'iab.vendor.title'} />
+						</Link>
+					) : null}
+					{useTcf ? (
+						<Link onPress={handleGoIabDisclosures}>
+							<Locale path={'iab.legal.title'} />
+						</Link>
+					) : null}
+				</View>
+			) : null}
+		</View>
+	);
+};
+
+const CategoryListFooter: React.FC = () => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+
+	const handleSave = useCallback(() => {
+		dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, []);
+
+	return (
+		<View style={[styles.listItem, styles.listFooter]}>
+			<Button title="buttons.save" onPress={handleSave} />
+			<View style={styles.poweredBy}>
+				<Link href="https://www.osano.com/?utm_campaign=cmp&utm_source=cmp-dialog&utm_medium=drawer">
+					<Locale path="messaging.poweredBy" />
+				</Link>
+			</View>
+		</View>
+	);
+};
+
+const ListItemRenderer = ({
+	item,
+	index,
+}: ListRenderItemInfo<ConsentCategoryItem>) => {
+	const { id, headerHeight, type } = item;
+	const style =
+		index === 0
+			? { paddingTop: Platform.OS === 'web' ? 0 : headerHeight }
+			: undefined;
+
+	switch (type) {
+		case 'info':
+			return <CategoryListHeader style={style} />;
+		case 'category':
+			return (
+				<CategoryListItem style={style} category={id as ConsentCategoryType} />
+			);
+		case 'specialFeature':
+			return <SpecialFeatureListItem style={style} specialFeatureId={id} />;
+		default:
+			return null;
+	}
+};
+
+export const ConsentCategoriesDrawer: React.FC = () => {
+	const { config, getState, locale, translate } =
+		useContext(OsanoPrivateContext);
+	const flatListRef: React.LegacyRef<FlatList<ConsentCategoryItem>> | null =
+		useRef(null);
+
+	const [headerHeight, setHeaderHeight] = React.useState(0);
+	const handleHeaderLayoutChange = useCallback((e: LayoutChangeEvent) => {
+		const height = e.nativeEvent.layout.height;
+		setHeaderHeight(height + (Platform.OS === 'web' ? 0 : 16));
+	}, []);
+	const scrollToTop = useBoundCallback((animated = false) => {
+		// use current
+		setTimeout(() => {
+			flatListRef.current?.scrollToOffset({ animated, offset: 0 });
+		}, 0);
+	}, []);
+
+	const ListHeaderComponent = useMemo(() => {
+		return (
+			<DrawerHeader
+				title="drawer.header"
+				canGoBack={false}
+				onHeaderLayoutChange={handleHeaderLayoutChange}
+			/>
+		);
+	}, [config, locale]);
+
+	const state = getState();
+	const stack = getStack(state);
+	const previousStack = usePrevious(stack);
+	const animateDirection = useMemo(() => {
+		if (previousStack) {
+			if (previousStack.length < stack.length) {
+				return 'in';
+			}
+			if (previousStack.length > stack.length) {
+				return 'out';
+			}
+		}
+		return 'none';
+	}, [previousStack, stack]);
+	const useTcf = config?.tcfIsApplicable;
+	const needsOptOut = config?.shouldRenderOptOut;
+	const categories: ConsentCategoryItem[] = useMemo(() => {
+		const newCategories: ConsentCategoryItem[] = (
+			useTcf ? config.iabCategories : config?.categories || []
+		).map(category => {
+			return {
+				type: 'category',
+				id: category,
+				headerHeight,
+			};
+		});
+		if (needsOptOut) {
+			newCategories.push({
+				type: 'category',
+				id: ConsentCategory.OPT_OUT,
+				headerHeight,
+			});
+		}
+		if (useTcf) {
+			Object.keys(translate(`iab.specialFeatures`) as LocalizedStrings).map(
+				specialFeatureId =>
+					newCategories.push({
+						type: 'specialFeature',
+						id: specialFeatureId,
+						headerHeight,
+					}),
+			);
+		}
+		newCategories.unshift({
+			type: 'info',
+			id: 'info',
+			headerHeight,
+		});
+		return newCategories;
+	}, [config, useTcf, needsOptOut, headerHeight]);
+
+	const extraData = useMemo(() => {
+		return {};
+	}, [locale, state, headerHeight]);
+
+	useEffect(() => {
+		if (stack.indexOf(SHOW_DRAWER) === stack.length - 1) {
+			if (animateDirection !== 'out') {
+				scrollToTop();
+			}
+		}
+	}, [stack, animateDirection]);
+
+	return (
+		<View style={styles.renderItem}>
+			{Platform.OS === 'web' ? null : ListHeaderComponent}
+			<FlatList
+				ref={flatListRef}
+				style={{ marginTop: Platform.OS === 'web' ? 0 : -headerHeight }}
+				data={categories}
+				stickyHeaderIndices={Platform.OS === 'web' ? [0] : undefined}
+				ListHeaderComponent={
+					Platform.OS === 'web' ? ListHeaderComponent : undefined
+				}
+				ListFooterComponent={CategoryListFooter}
+				renderItem={ListItemRenderer}
+				ItemSeparatorComponent={Divider}
+				removeClippedSubviews={false}
+				extraData={extraData}
+			/>
+		</View>
+	);
+};
+
+export default ConsentCategoriesDrawer;
+
+const styles = StyleSheet.create({
+	poweredBy: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'column',
+		fontWeight: '700',
+		marginVertical: 16,
+	},
+	switch: {
+		marginBottom: 8,
+		marginTop: 16,
+		width: '100%',
+	},
+	toggleLabel: {
+		flex: 1,
+		fontSize: 16,
+		flexWrap: 'wrap',
+	},
+	list: {},
+	renderItem: {
+		flex: 1,
+		flexDirection: 'column',
+	},
+	listHeader: {
+		paddingVertical: 32,
+	},
+	listFooter: {
+		paddingVertical: 32,
+	},
+	listItem: {
+		fontSize: 12,
+		paddingHorizontal: 24,
+	},
+	paragraph: {
+		marginBottom: 24,
+	},
+	row: {
+		flexDirection: 'row',
+	},
+	col: {
+		flexDirection: 'column',
+	},
+	disclosure: {
+		borderBottomColor: 'rgba(0,0,0,.1)',
+		borderBottomWidth: 1,
+		marginBottom: 16,
+		paddingBottom: 16,
+	},
+	disclosureLast: {
+		borderBottomWidth: 0,
+		marginBottom: 0,
+		paddingBottom: 0,
+	},
+	disclosureLabel: {
+		flexShrink: 0,
+		fontWeight: 'bold',
+		width: '30%',
+	},
+	disclosureDescription: {
+		flexWrap:'wrap',
+		width: '70%'
+	},
+	spaceBetween: {
+		gap: 8,
+		justifyContent: 'flex-start',
+	},
+	rtl: {
+		writingDirection: 'rtl',
+		flexDirection: 'row-reverse',
+	},
+	ltr: {
+		writingDirection: 'ltr',
+		flexDirection: 'row',
+	},
+});