@osano/osano-cmp-react-native 0.1.0

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

@@ -0,0 +1,552 @@
+import {
+	FlatList,
+	type LayoutChangeEvent,
+	type ListRenderItemInfo,
+	Platform,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextStyle,
+	View,
+	type ViewStyle,
+} from 'react-native';
+import {
+	type GvlUrl,
+	type GvlVendor_v2,
+	type GvlVendor_v3,
+} from '../../iab/types';
+import React, { useCallback, useContext, useMemo } from 'react';
+import {
+	SHOW_IAB_DISCLOSURES,
+	getStack,
+	toggleIabVendorOptOut,
+} from '../../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 Toggle from '../../components/Toggle';
+import Translator from '../../utils/Translator';
+
+const determineDataRetention = (
+	purposeDataRetention: Record<string, number>,
+	purposeId: string,
+	standardRetention = 365,
+) => {
+	if (!purposeDataRetention) {
+		return standardRetention;
+	}
+	const purposeRetention = purposeDataRetention[purposeId];
+	return purposeRetention === undefined ? standardRetention : purposeRetention;
+};
+
+const makePurposeMap =
+	(dataRetention: GvlVendor_v3['dataRetention']) =>
+	(purposeId: number | string) => ({
+		retention: determineDataRetention(
+			dataRetention?.purposes || {},
+			`${purposeId}`,
+			dataRetention?.stdRetention,
+		),
+		purposeId,
+		type: 'purposes',
+	});
+const makeSpecialPurposeMap =
+	(dataRetention: GvlVendor_v3['dataRetention']) =>
+	(purposeId: number | string) => ({
+		retention: determineDataRetention(
+			dataRetention?.specialPurposes || {},
+			`${purposeId}`,
+			dataRetention?.stdRetention,
+		),
+		purposeId,
+		type: 'specialPurposes',
+	});
+const featureMap = (purposeId: number | string) => ({
+	purposeId,
+	type: 'features',
+});
+const specialFeatureMap = (purposeId: number | string) => ({
+	purposeId,
+	type: 'specialFeatures',
+});
+const dataDeclarationMap = (purposeId: number | string) => ({
+	purposeId,
+	type: 'dataCategories',
+});
+
+const VendorLinks: React.FC<GvlUrl[]> = (vendorUrls: GvlUrl[]) => {
+	const { locale } = useContext(OsanoPrivateContext);
+	if (!vendorUrls?.length) {
+		return null;
+	}
+
+	const urlsByLang: Map<string, GvlUrl> = vendorUrls.reduce(
+		(acc, langUrlSet) => acc.set(langUrlSet.langId, langUrlSet),
+		new Map(),
+	);
+	const urlLang = Translator.fallbackLanguages(locale).find(lang =>
+		urlsByLang.has(lang || ''),
+	);
+	const urls = urlLang ? urlsByLang.get(urlLang) : vendorUrls[0];
+	const links = [
+		{
+			key: 'privacyPolicy',
+			label: 'messaging.privacyPolicy',
+			href: urls?.privacy,
+		},
+		{
+			key: 'legIntClaim',
+			label: 'iab.terms.legIntClaim',
+			href: urls?.legIntClaim,
+		},
+	].filter(({ href }) => !!href);
+
+	return (
+		<View style={styles.listItem}>
+			{links.map(({ key, label, href }) => (
+				<Link key={key} href={href}>
+					<Locale path={label} />
+				</Link>
+			))}
+		</View>
+	);
+};
+
+const IabVendorDisclosure: React.FC<{
+	retention?: number;
+	onPress?: (id: string | number) => void;
+	purposeId: string | number;
+	type: string;
+	style?: StyleProp<TextStyle>;
+}> = ({ onPress, purposeId, style, type }) => (
+	<View key={purposeId} style={styles.paragraph}>
+		<Text style={{ fontSize: 12 }}>
+			<Link
+				style={style}
+				onPress={onPress ? () => onPress(purposeId) : undefined}
+			>
+				<Locale path={`iab.${type}.${purposeId}.name`} />
+			</Link>
+		</Text>
+	</View>
+);
+
+const IabVendorItem: React.FC<{ vendor: GvlVendor_v2 | GvlVendor_v3 }> = ({
+	vendor,
+}) => {
+	const {
+		id,
+		name,
+		deviceStorageDisclosureUrl,
+		legIntPurposes,
+		features,
+		flexiblePurposes,
+		purposes,
+		specialFeatures,
+		specialPurposes,
+		cookieMaxAgeSeconds,
+		policyUrl,
+	} = vendor as GvlVendor_v2;
+	const {
+		dataRetention = {},
+		dataDeclaration,
+		urls = [],
+		usesNonCookieAccess,
+	} = vendor as GvlVendor_v3;
+
+	const consentOnlyPurposes = purposes.filter(
+		purposeId => !flexiblePurposes.includes(purposeId),
+	);
+	const purposeMap = useCallback(
+		makePurposeMap(dataRetention as GvlVendor_v3['dataRetention']),
+		[],
+	);
+	const specialPurposeMap = useCallback(
+		makeSpecialPurposeMap(dataRetention as GvlVendor_v3['dataRetention']),
+		[],
+	);
+
+	const { config, dispatch, locale } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+		};
+	}, [infoDialogForegroundColor]);
+
+	const isRTL = Translator.isRTL(locale);
+	const cookieMinutes = Math.max(cookieMaxAgeSeconds || 0, 0) / 60;
+	const cookieHours = cookieMinutes / 60;
+	const cookieDays = cookieHours / 24;
+
+	const handleValueChange = useCallback(
+		(value: boolean) => {
+			// Vendor opt-out `true` means the toggle is off, so we invert the value
+			dispatch(toggleIabVendorOptOut({ id, value: !value }));
+		},
+		[id],
+	);
+
+	const linkToPurpose = useCallback((purposeId: string | number) => {
+		dispatch({
+			type: SHOW_IAB_DISCLOSURES,
+			payload: { id: purposeId, type: 'purpose' },
+		});
+	}, []);
+
+	const linkToSpecialPurpose = useCallback((purposeId: string | number) => {
+		dispatch({
+			type: SHOW_IAB_DISCLOSURES,
+			payload: { id: purposeId, type: 'specialPurpose' },
+		});
+	}, []);
+
+	const linkToFeature = useCallback((featureId: string | number) => {
+		dispatch({
+			type: SHOW_IAB_DISCLOSURES,
+			payload: { id: featureId, type: 'feature' },
+		});
+	}, []);
+
+	const linkToSpecialFeature = useCallback((featureId: string | number) => {
+		dispatch({
+			type: SHOW_IAB_DISCLOSURES,
+			payload: { id: featureId, type: 'specialFeature' },
+		});
+	}, []);
+
+	const checked = config?.isIabVendorOptedOut(`${id}`);
+	const links = useMemo(() => {
+		return urls.length ? urls : [{ langId: 'en', privacy: policyUrl }];
+	}, [policyUrl, urls]);
+
+	return (
+		<View>
+			<View style={styles.listItem}>
+				<Toggle
+					align={isRTL ? 'left' : 'right'}
+					onValueChange={handleValueChange}
+					style={styles.switch}
+					value={checked}
+				>
+					<Text
+						style={[
+							styles.toggleLabel,
+							drawerForeground,
+							{ direction: isRTL ? 'rtl' : 'ltr' },
+						]}
+					>
+						{name}
+					</Text>
+				</Toggle>
+			</View>
+			{VendorLinks(links)}
+			<ExpansionPanel title="iab.legal.title" style={styles.listItem}>
+				<View
+					style={[
+						styles.expansionDetail,
+						styles.row,
+						styles.noBorder,
+						styles.listItem,
+					]}
+				>
+					<Text
+						style={[
+							drawerForeground,
+							{
+								flex: 1,
+								marginRight: isRTL ? 0 : 8,
+								marginLeft: isRTL ? 8 : 0,
+							},
+						]}
+					>
+						<Locale path="iab.vendor.maxCookieStorage" />
+					</Text>
+					<Text style={drawerForeground}>
+						{cookieDays}&nbsp;
+						<Locale
+							path={
+								cookieDays === 1 ? 'disclosure.day' : 'disclosure.dayPlural'
+							}
+						/>
+					</Text>
+				</View>
+				{usesNonCookieAccess ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={drawerForeground}>
+							<Locale path="iab.vendor.usesNonCookieAccess" />
+						</Text>
+					</View>
+				) : null}
+				{legIntPurposes.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.basis.legit" />
+						</Text>
+						{legIntPurposes.map(purposeMap).map(item => (
+							<IabVendorDisclosure
+								key={`purpose_${item.purposeId}`}
+								{...item}
+								onPress={linkToPurpose}
+							/>
+						))}
+					</View>
+				) : null}
+				{consentOnlyPurposes.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.basis.consent" />
+						</Text>
+						{consentOnlyPurposes.map(purposeMap).map(item => (
+							<IabVendorDisclosure
+								key={`purpose_${item.purposeId}`}
+								{...item}
+								onPress={linkToPurpose}
+							/>
+						))}
+					</View>
+				) : null}
+				{flexiblePurposes.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.basis.combined" />
+						</Text>
+						{flexiblePurposes.map(purposeMap).map(item => (
+							<IabVendorDisclosure
+								key={`purpose_${item.purposeId}`}
+								{...item}
+								onPress={linkToPurpose}
+							/>
+						))}
+					</View>
+				) : null}
+				{specialPurposes.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.terms.specialPurposes" />
+						</Text>
+						{specialPurposes.map(specialPurposeMap).map(item => (
+							<IabVendorDisclosure
+								key={`specialPurpose_${item.purposeId}`}
+								{...item}
+								onPress={linkToSpecialPurpose}
+							/>
+						))}
+					</View>
+				) : null}
+				{features.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.terms.features" />
+						</Text>
+						{features.map(featureMap).map(item => (
+							<IabVendorDisclosure
+								key={`feature_${item.purposeId}`}
+								{...item}
+								onPress={linkToFeature}
+							/>
+						))}
+					</View>
+				) : null}
+				{specialFeatures.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.terms.specialFeatures" />
+						</Text>
+						{specialFeatures.map(specialFeatureMap).map(item => (
+							<IabVendorDisclosure
+								key={`specialFeature_${item.purposeId}`}
+								{...item}
+								onPress={linkToSpecialFeature}
+							/>
+						))}
+					</View>
+				) : null}
+				{dataDeclaration && dataDeclaration.length > 0 ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="iab.terms.dataCategories" />
+						</Text>
+						{dataDeclaration?.map(dataDeclarationMap).map(IabVendorDisclosure)}
+					</View>
+				) : null}
+				{deviceStorageDisclosureUrl ? (
+					<View style={[styles.expansionDetail, styles.listItem]}>
+						<Text style={[drawerForeground, styles.expansionDetailHeader]}>
+							<Locale path="messaging.moreDetails" />
+						</Text>
+						<Text style={drawerForeground}>
+							<Link href={deviceStorageDisclosureUrl}>
+								<Locale path={'iab.legal.title'} />
+							</Link>
+						</Text>
+					</View>
+				) : null}
+			</ExpansionPanel>
+		</View>
+	);
+};
+
+const IabVendorListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
+	style,
+}) => {
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+
+	const { infoDialogForegroundColor } = palette || {};
+	const drawerForeground = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+			fontSize: 12,
+			lineHeight: 16,
+		};
+	}, [infoDialogForegroundColor]);
+	return (
+		<View style={[styles.listItem, styles.listHeader, style]}>
+			<View>
+				<Text style={drawerForeground}>
+					<Locale path="iab.vendor.preamble" />
+				</Text>
+			</View>
+		</View>
+	);
+};
+
+const ListItemRenderer = ({
+	item,
+}: ListRenderItemInfo<GvlVendor_v2 | GvlVendor_v3>) => {
+	if (typeof item === 'number') {
+		return (
+			<IabVendorListHeader
+				style={{ paddingTop: Platform.OS === 'web' ? 0 : item }}
+			/>
+		);
+	}
+
+	return <IabVendorItem vendor={item} />;
+};
+
+export const IabVendorsDrawer: React.FC = () => {
+	const { config, getState, locale } = useContext(OsanoPrivateContext);
+
+	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 state = getState();
+	const stack = getStack(state);
+
+	const ListHeaderComponent = useMemo(() => {
+		return (
+			<DrawerHeader
+				title="iab.vendor.title"
+				canGoBack={stack.length > 1}
+				onHeaderLayoutChange={handleHeaderLayoutChange}
+			/>
+		);
+	}, [locale, stack.length]);
+
+	const vendors: (GvlVendor_v2 | GvlVendor_v3)[] = useMemo((): (
+		| GvlVendor_v2
+		| GvlVendor_v3
+	)[] => {
+		const vendorDetails =
+			config
+				?.getVendorIds()
+				.filter(Boolean)
+				.map(vendorId => config.getVendorData(vendorId))
+				.filter(Boolean) || [];
+		return (vendorDetails as (GvlVendor_v2 | GvlVendor_v3)[]) || [];
+	}, [config, locale, headerHeight]);
+
+	const extraData = useMemo(() => {
+		return {};
+	}, [locale, state]);
+
+	return (
+		<View style={styles.renderItem}>
+			{Platform.OS === 'web' ? null : ListHeaderComponent}
+			<FlatList
+				style={{ marginTop: Platform.OS === 'web' ? 0 : -headerHeight }}
+				data={vendors}
+				stickyHeaderIndices={Platform.OS === 'web' ? [0] : undefined}
+				ListHeaderComponent={
+					Platform.OS === 'web' ? ListHeaderComponent : undefined
+				}
+				ListFooterComponent={<View style={styles.listFooter} />}
+				renderItem={ListItemRenderer}
+				ItemSeparatorComponent={Divider}
+				removeClippedSubviews={false}
+				extraData={extraData}
+			/>
+		</View>
+	);
+};
+
+export default IabVendorsDrawer;
+
+const styles = StyleSheet.create({
+	switch: {
+		marginBottom: 8,
+		marginTop: 16,
+		width: '100%',
+	},
+	toggleLabel: {
+		flex: 1,
+		fontSize: 16,
+		flexWrap: 'wrap',
+	},
+	disclosureHeader: {
+		fontSize: 16,
+		flexWrap: 'wrap',
+	},
+	renderItem: {
+		flex: 1,
+		flexDirection: 'column',
+	},
+	listHeader: {
+		paddingVertical: 32,
+	},
+	listFooter: {
+		paddingBottom: 32,
+	},
+	listItem: {
+		fontSize: 12,
+		paddingHorizontal: 24,
+	},
+	paragraph: {
+		marginBottom: 4,
+	},
+	italic: {
+		fontStyle: 'italic',
+	},
+	row: {
+		flexDirection: 'row',
+	},
+	col: {
+		flexDirection: 'column',
+	},
+	expansionDetail: {
+		flexDirection: 'column',
+		justifyContent: 'space-between',
+		paddingVertical: 8,
+		borderTopWidth: 1,
+		borderTopColor: 'rgba(0,0,0,0.1)',
+	},
+	expansionDetailHeader: {
+		fontWeight: 'bold',
+		marginBottom: 8,
+	},
+	noBorder: {
+		borderTopWidth: 0,
+		paddingTop: 0,
+		marginBottom: 8,
+	},
+});