@osano/osano-cmp-react-native 0.1.0

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

@@ -0,0 +1,138 @@
+import { Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
+import {
+	type LayoutChangeEvent,
+	Platform,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextStyle,
+	View,
+} from 'react-native';
+import React, { useCallback, useContext, useMemo } from 'react';
+
+import { BackButton } from '../../components/Button';
+import Locale from '../../components/Locale';
+import { OsanoPrivateContext } from '../../context';
+import Translator from '../../utils/Translator';
+
+export type DrawerHeaderType = {
+	title: string;
+	canGoBack: boolean;
+	onHeaderLayoutChange?: (e: LayoutChangeEvent) => void;
+};
+
+export const DrawerHeader: React.FC<DrawerHeaderType> = props => {
+	const { canGoBack, onHeaderLayoutChange, title } = props;
+	const { config, locale } = useContext(OsanoPrivateContext);
+	const isRTL = Translator.isRTL(locale);
+
+	const { infoDialogBackgroundColor, infoDialogForegroundColor } =
+		config?.palette || {};
+
+	const headerLabel = useMemo<StyleProp<TextStyle>>(() => {
+		return {
+			color: infoDialogForegroundColor,
+			paddingLeft: canGoBack
+				? isRTL
+					? styles.header.paddingRight
+					: 4
+				: styles.header.paddingLeft * (isRTL ? 2 : 1),
+			paddingRight: canGoBack
+				? !isRTL
+					? styles.header.paddingRight
+					: 4
+				: styles.header.paddingRight * (isRTL ? 1 : 2),
+		};
+	}, [canGoBack, infoDialogForegroundColor, isRTL]);
+
+	const [headerHeight, setHeaderHeight] = React.useState(0);
+	const handleLayoutChange = useCallback(
+		(e: LayoutChangeEvent) => {
+			const height = e.nativeEvent.layout.height;
+			setHeaderHeight(height + (Platform.OS === 'web' ? 0 : 24));
+			onHeaderLayoutChange && onHeaderLayoutChange(e);
+		},
+		[onHeaderLayoutChange],
+	);
+
+	return (
+		<View style={[styles.headerContainer, isRTL ? styles.rtl : styles.ltr]}>
+			<Svg
+				height={headerHeight}
+				width="100%"
+				style={{
+					position: 'absolute',
+					top: 0,
+					left: 0,
+					right: 0,
+				}}
+			>
+				<Defs>
+					<LinearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
+						<Stop
+							offset={Platform.OS === 'web' ? 0.8 : 0.6}
+							stopColor={infoDialogBackgroundColor}
+							stopOpacity={1}
+						/>
+						<Stop
+							offset={Platform.OS === 'web' ? 1 : 0.8}
+							stopColor={infoDialogBackgroundColor}
+							stopOpacity={0}
+						/>
+					</LinearGradient>
+				</Defs>
+				<Rect width="100%" height="100%" fill="url(#grad)" />
+			</Svg>
+			{canGoBack ? (
+				<BackButton
+					color={infoDialogForegroundColor}
+					style={[
+						styles.backIcon,
+						isRTL ? styles.backIconRtl : styles.backIconLtr,
+					]}
+				/>
+			) : null}
+			<Text
+				style={[styles.header, styles.toggleLabel, headerLabel]}
+				onLayout={handleLayoutChange}
+			>
+				<Locale path={title} />
+			</Text>
+		</View>
+	);
+};
+
+export default DrawerHeader;
+
+const styles = StyleSheet.create({
+	headerContainer: {
+		flexDirection: 'row',
+		zIndex: 1,
+	},
+	header: {
+		paddingLeft: 24,
+		paddingRight: 24,
+		paddingVertical: 24,
+	},
+	toggleLabel: {
+		fontSize: 18,
+		flexWrap: 'wrap',
+	},
+	backIcon: {
+		justifyContent: 'center',
+		paddingVertical: 24,
+		paddingLeft: 20,
+	},
+	backIconLtr: {},
+	backIconRtl: {
+		transform: [{ scaleX: -1 }],
+	},
+	ltr: {
+		writingDirection: 'ltr',
+		flexDirection: 'row',
+	},
+	rtl: {
+		writingDirection: 'rtl',
+		flexDirection: 'row-reverse',
+	},
+});

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

@@ -0,0 +1,386 @@
+import {
+	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_IAB_DISCLOSURES,
+	getStack,
+	toggleIabPurposeOptOut,
+} from '../../store';
+
+import Checkbox from '../../components/Checkbox';
+import { Divider } from '../../components/Divider';
+import DrawerHeader from './Drawer.Header';
+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';
+
+const IabDisclosureItem: React.FC<
+	IabDisclosureType & { id: number; type: string }
+> = disclosure => {
+	const { id, name, description, descriptionLegal, type, illustrations } =
+		disclosure;
+	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 handleValueChange = useCallback(
+		(value: boolean) => {
+			dispatch(toggleIabPurposeOptOut({ id, value }));
+		},
+		[id],
+	);
+
+	const checked = config?.isIabPurposeOptedOut(id);
+
+	return (
+		<View style={{ marginBottom: 16 }}>
+			<Text
+				style={[
+					{ marginTop: 24 },
+					styles.paragraph,
+					styles.listItem,
+					styles.disclosureHeader,
+					drawerForeground,
+				]}
+			>
+				<Locale path={name} />
+			</Text>
+			<Text style={[styles.paragraph, styles.listItem, drawerForeground]}>
+				<Locale path={description} />
+			</Text>
+			{illustrations && Object.keys(illustrations).length ? (
+				<View>
+					<Text
+						style={[
+							styles.paragraph,
+							styles.listItem,
+							styles.boldLabel,
+							drawerForeground,
+						]}
+					>
+						<Locale path="iab.terms.illustrations" />
+					</Text>
+					{Object.entries(illustrations).map(([key, illustration]) => (
+						<Text
+							key={key}
+							style={[
+								isRTL ? { marginRight: 8 } : { marginLeft: 8 },
+								styles.paragraph,
+								styles.listItem,
+								drawerForeground,
+							]}
+						>
+							<Locale path={illustration} />
+						</Text>
+					))}
+				</View>
+			) : descriptionLegal ? (
+				<Text style={[styles.paragraph, styles.listItem, drawerForeground]}>
+					<Locale path={descriptionLegal} />
+				</Text>
+			) : null}
+			{type === 'purpose' ? (
+				<View style={styles.listItem}>
+					<Checkbox
+						align={isRTL ? 'left' : 'right'}
+						onValueChange={handleValueChange}
+						style={styles.switch}
+						value={checked}
+					>
+						<Text style={[styles.boldLabel, drawerForeground]}>
+							<Locale path="iab.legal.object" />
+						</Text>
+					</Checkbox>
+				</View>
+			) : null}
+		</View>
+	);
+};
+
+const IabDisclosureListHeader: 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.legal.preamble" />
+				</Text>
+			</View>
+		</View>
+	);
+};
+
+const ListItemRenderer = ({
+	item,
+}: ListRenderItemInfo<
+	(IabDisclosureType & { id: number; type: string }) | number
+>) => {
+	if (typeof item === 'number') {
+		return (
+			<IabDisclosureListHeader
+				style={{ paddingTop: Platform.OS === 'web' ? 0 : item }}
+			/>
+		);
+	}
+
+	return <IabDisclosureItem {...item} />;
+};
+
+const termAssign = (
+	type: string,
+	disclosures: Record<string, IabDisclosureType>,
+) =>
+	Object.entries(disclosures).map(([itemId, disclosure]) => ({
+		id: parseInt(itemId, 10),
+		key: `${type}_${itemId}`,
+		type,
+		...disclosure,
+	}));
+
+export const IabDisclosuresDrawer: React.FC = () => {
+	const { getState, locale, translate } = useContext(OsanoPrivateContext);
+	const flatListRef: React.LegacyRef<
+		FlatList<
+			| number
+			| (IabDisclosureType & {
+					id: number;
+					type: string;
+			  })
+		>
+	> | 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 state = getState();
+	const stack = getStack(state);
+	const { scrollToType, scrollToId } = 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 scrollToIndex = useBoundCallback(
+		(viewOffset: number, index: number, animated = false) => {
+			flatListRef.current?.scrollToIndex({
+				animated,
+				index,
+				viewPosition: 0,
+				viewOffset,
+			});
+		},
+		[headerHeight],
+	);
+
+	const scrollToTop = useBoundCallback((animated: boolean = false) => {
+		// use current
+		flatListRef.current?.scrollToOffset({ animated, offset: 0 });
+	}, []);
+
+	const ListHeaderComponent = useMemo(() => {
+		return (
+			<DrawerHeader
+				title="iab.legal.title"
+				canGoBack={stack.length > 1}
+				onHeaderLayoutChange={handleHeaderLayoutChange}
+			/>
+		);
+	}, [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 jumpToIndex = useMemo(() => {
+		let idx = -1;
+		if (animateDirection === 'in' && scrollToId && scrollToType) {
+			idx = 1; // account for the header
+			switch (scrollToType) {
+				case 'purpose':
+					idx += purposes.findIndex(item => item.id === scrollToId);
+					break;
+				case 'specialPurpose':
+					idx += purposes.length;
+					idx += specialPurposes.findIndex(item => item.id === scrollToId);
+					break;
+				case 'feature':
+					idx += purposes.length;
+					idx += specialPurposes.length;
+					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);
+					break;
+				default:
+					// scroll to top
+					idx = 0;
+					break;
+			}
+		}
+		return idx;
+	}, [
+		purposes,
+		specialPurposes,
+		features,
+		specialFeatures,
+		animateDirection,
+		scrollToType,
+		scrollToId,
+	]);
+
+	const disclosures: (
+		| (IabDisclosureType & { id: number; type: string })
+		| number
+	)[] = useMemo(() => {
+		return [
+			headerHeight,
+			...purposes,
+			...specialPurposes,
+			...features,
+			...specialFeatures,
+		];
+	}, [purposes, specialPurposes, features, specialFeatures, headerHeight]);
+
+	const extraData = useMemo(() => {
+		return {};
+	}, [locale, state]);
+
+	useEffect(() => {
+		if (stack.indexOf(SHOW_IAB_DISCLOSURES) === stack.length - 1) {
+			if (animateDirection === 'in') {
+				if (jumpToIndex >= 0) {
+					scrollToIndex(jumpToIndex);
+				} else {
+					scrollToTop();
+				}
+			}
+		}
+	}, [stack, animateDirection, jumpToIndex]);
+
+	return (
+		<View style={styles.renderItem}>
+			{Platform.OS === 'web' ? null : ListHeaderComponent}
+			<FlatList
+				ref={flatListRef}
+				style={{ marginTop: Platform.OS === 'web' ? 0 : -headerHeight }}
+				data={disclosures}
+				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 IabDisclosuresDrawer;
+
+const styles = StyleSheet.create({
+	switch: {
+		marginBottom: 8,
+		marginTop: 16,
+		width: '100%',
+	},
+	boldLabel: {
+		flex: 1,
+		fontSize: 12,
+		fontWeight: 'bold',
+		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: 8,
+	},
+});