@osano/osano-cmp-react-native 0.1.0

package/src/views/Dialog/index.tsx

@@ -0,0 +1,442 @@
+import {
+	Modal,
+	StyleSheet,
+	View,
+	type StyleProp,
+	type ViewStyle,
+	Text,
+	SafeAreaView,
+	Dimensions,
+	type LayoutChangeEvent,
+	Platform,
+	type TextStyle,
+} from 'react-native';
+import React, {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { ReactElement } from 'react';
+import {
+	acceptAll,
+	close,
+	getConsent,
+	isDialogOpen,
+	saveConsent,
+	toggleCategory,
+} from '../../store';
+
+import { OsanoPrivateContext } from '../../context';
+import Buttons from './Buttons';
+import Message from './Message';
+import StoragePolicyLink from '../../components/StoragePolicyLink';
+import FirstLayerUsage from './FirstLayerUsage';
+import PreferenceManagementDeepLinks from './PreferenceManagementDeepLinks';
+import Toggle from '../../components/Toggle';
+import { CloseButton } from '../../components/Button';
+import Translator from '../../utils/Translator';
+import Locale from '../../components/Locale';
+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 || {};
+	const {
+		dialogBackgroundColor = '#000',
+		dialogForegroundColor = '#fff',
+		dialogType = 'bar',
+		displayPosition = 'center',
+		infoDialogOverlayColor,
+	} = palette || {};
+
+	const open = isDialogOpen(state);
+	const isRTL = Translator.isRTL(locale);
+	const isFirstLayerUsageRequired = config?.firstLayerUsageRequired;
+	const useTcf = config?.tcfIsApplicable;
+
+	const categories = useTcf
+		? config.iabCategories
+		: config?.nonEssentialCategories || [];
+	const [windowWidth, setWindowWidth] = useState(
+		Dimensions.get('window').width
+	);
+	const handleLayoutChange = useCallback((e: LayoutChangeEvent) => {
+		const width = e.nativeEvent.layout.width;
+		setWindowWidth(width);
+	}, []);
+
+	const clearImpliedConsentTimeout = useCallback(() => {
+		if (!impliedConsentTimeout.current) return;
+		clearTimeout(impliedConsentTimeout.current);
+		impliedConsentTimeout.current = null;
+	}, []);
+
+	const handleClose = useCallback(() => {
+		clearImpliedConsentTimeout();
+		if (config?.isConsentImplied) dispatch(acceptAll);
+		dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, [cmp, config?.isConsentImplied, dispatch, clearImpliedConsentTimeout]);
+
+	const handleToggleCategory = useCallback(
+		(category: ConsentCategory) => {
+			return (value: boolean) => {
+				dispatch(toggleCategory({ category, value }));
+			};
+		},
+		[dispatch]
+	);
+
+	const dialogOverlay = useMemo(() => {
+		return {
+			backgroundColor: infoDialogOverlayColor,
+		};
+	}, [infoDialogOverlayColor]);
+	const dialogForeground = useMemo(() => {
+		const style: StyleProp<TextStyle> = {
+			color: dialogForegroundColor,
+		};
+		if (Platform.OS === 'web') {
+			style.writingDirection = isRTL ? 'rtl' : 'ltr';
+		}
+		return style;
+	}, [isRTL, dialogForegroundColor]);
+	const [hDialogLeft = [], hDialogRight = []]: StyleProp<ViewStyle>[][] =
+		useMemo(
+			() => [
+				[styles.col, { width: dialogType === 'box' ? 32 : 0 }],
+				[styles.col, { width: dialogType === 'box' ? 32 : 0 }],
+			],
+			[dialogType]
+		);
+	const [vDialogTop = [], vDialogBottom = []]: StyleProp<ViewStyle>[][] =
+		useMemo(
+			() => [
+				[
+					styles.row,
+					{
+						minHeight: dialogType === 'box' ? 32 : 0,
+					},
+				],
+				[
+					styles.row,
+					{
+						minHeight: dialogType === 'box' ? 32 : 0,
+					},
+				],
+			],
+			[dialogType]
+		);
+	const dialogStyles: StyleProp<ViewStyle>[] = [
+		{
+			alignItems: 'center',
+			backgroundColor: dialogBackgroundColor,
+			justifyContent: 'center',
+			flex: 1,
+			flexGrow: 1,
+			flexShrink: 1,
+		},
+	];
+
+	dialogStyles.push(
+		Platform.OS === 'web' && dialogType === 'box'
+			? styles.dialogBox
+			: styles.dialogBar
+	);
+	dialogStyles.push(
+		windowWidth >= 768
+			? isRTL
+				? styles.rowReverse
+				: styles.row
+			: styles.col
+	);
+
+	switch (displayPosition) {
+		case 'bottom':
+		case 'bottom-left':
+		case 'bottom-right':
+			vDialogTop.push(styles.grow);
+			break;
+		case 'center':
+			break;
+		case 'top':
+		case 'top-left':
+		case 'top-right':
+			vDialogBottom.push(styles.grow);
+			break;
+	}
+
+	switch (displayPosition) {
+		case 'top-left':
+		case 'bottom-left':
+			hDialogRight.push(styles.grow);
+			break;
+		case 'top':
+		case 'center':
+		case 'bottom':
+			break;
+		case 'top-right':
+		case 'bottom-right':
+			hDialogLeft.push(styles.grow);
+			break;
+	}
+
+	useEffect(() => {
+		if (!open) {
+			return;
+		}
+
+		if (
+			config?.isConsentImplied &&
+			config?.allowTimeout &&
+			config?.timeoutSeconds > 0
+		) {
+			impliedConsentTimeout.current = setTimeout(
+				handleClose,
+				config.timeoutSeconds * 1000
+			);
+		}
+		return () => {
+			clearImpliedConsentTimeout();
+		};
+	}, [
+		open,
+		config?.isConsentImplied,
+		config?.allowTimeout,
+		config?.timeoutSeconds,
+		handleClose,
+		clearImpliedConsentTimeout,
+	]);
+
+	return (
+		<Modal
+			animationType="fade"
+			transparent={true}
+			visible={open}
+			onRequestClose={handleClose}
+			onLayout={handleLayoutChange}
+		>
+			<SafeAreaView
+				ref={overlayRef}
+				style={[styles.container, dialogOverlay]}
+			>
+				<View
+					style={vDialogTop}
+					onPointerUp={handleClose}
+					onTouchEnd={handleClose}
+					onResponderRelease={handleClose}
+				/>
+				<View style={[styles.row, styles.fullWidth, styles.fitContent]}>
+					<View
+						style={hDialogLeft}
+						onPointerUp={handleClose}
+						onTouchEnd={handleClose}
+						onResponderRelease={handleClose}
+					/>
+					<View style={dialogStyles}>
+						<View style={styles.dialogContent}>
+							<View style={[styles.row, styles.fitContent]}>
+								<Text style={dialogForeground}>
+									<Message />
+									<Text> </Text>
+									<StoragePolicyLink />
+								</Text>
+							</View>
+							{isFirstLayerUsageRequired ? (
+								<View
+									style={[
+										styles.row,
+										styles.categories,
+										isRTL ? styles.hRight : styles.hLeft,
+									]}
+								>
+									<FirstLayerUsage />
+								</View>
+							) : null}
+							{useTcf ||
+							config?.showManagePreferencesLinkInDialog ? (
+								<View
+									style={[
+										styles.row,
+										styles.categories,
+										isRTL ? styles.hRight : styles.hLeft,
+									]}
+								>
+									<PreferenceManagementDeepLinks />
+								</View>
+							) : null}
+							{useTcf || config?.showFirstLayerCategories ? (
+								<View
+									style={[
+										styles.col,
+										styles.categories,
+										isRTL ? styles.hRight : styles.hLeft,
+									]}
+								>
+									{categories.map((category) => (
+										<Toggle
+											align="left"
+											key={category}
+											onValueChange={handleToggleCategory(
+												category
+											)}
+											value={getConsent(state, category)}
+										>
+											<Text style={dialogForeground}>
+												<Locale
+													path={`categories.${category}.label`}
+												/>
+											</Text>
+										</Toggle>
+									))}
+								</View>
+							) : null}
+						</View>
+						<Buttons
+							style={[
+								styles.buttons,
+								windowWidth >= 768
+									? styles.dialogCol
+									: styles.dialogRow,
+							]}
+						/>
+						<CloseButton
+							ref={closeButtonRef}
+							onPress={handleClose}
+							style={[
+								styles.close,
+								isRTL ? styles.closeLeft : styles.closeRight,
+							]}
+							color={dialogForegroundColor}
+						/>
+					</View>
+					<View
+						style={hDialogRight}
+						onPointerUp={handleClose}
+						onTouchEnd={handleClose}
+						onResponderRelease={handleClose}
+					/>
+				</View>
+				<View
+					style={vDialogBottom}
+					onPointerUp={handleClose}
+					onTouchEnd={handleClose}
+					onResponderRelease={handleClose}
+				/>
+			</SafeAreaView>
+		</Modal>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	close: {
+		margin: 4,
+		position: 'absolute',
+		top: 0,
+	},
+	closeRight: {
+		right: 0,
+	},
+	closeLeft: {
+		left: 0,
+	},
+	fullWidth: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		width: '100%',
+	},
+	dialogContent: {
+		flexShrink: 1,
+		justifyContent: 'center',
+		maxWidth: 1024,
+	},
+	buttons: {
+		alignItems: 'stretch',
+		gap: 8,
+		justifyContent: 'center',
+	},
+	categories: {
+		alignItems: 'flex-start',
+		columnGap: 16,
+		rowGap: 8,
+		flexWrap: 'wrap',
+		marginTop: 16,
+		marginBottom: 0,
+	},
+	row: {
+		flexDirection: 'row',
+	},
+	rowReverse: {
+		flexDirection: 'row-reverse',
+	},
+	col: {
+		flexDirection: 'column',
+	},
+	dialogBar: {
+		display: 'flex',
+		gap: 16,
+		flex: 1,
+		paddingHorizontal: 40,
+		paddingVertical: 16,
+	},
+	dialogBox: {
+		display: 'flex',
+		gap: 16,
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		margin: 'auto',
+		maxWidth: 320,
+	},
+	dialogRow: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		width: '100%',
+	},
+	dialogCol: {
+		flexDirection: 'column',
+		flexWrap: 'wrap',
+	},
+	grow: {
+		flex: 1,
+	},
+	vTop: {
+		alignItems: 'flex-start',
+	},
+	vCenter: {
+		alignItems: 'center',
+		flexGrow: 0,
+		flexShrink: 1,
+	},
+	vBottom: {
+		alignItems: 'flex-end',
+	},
+	hLeft: {
+		justifyContent: 'flex-start',
+	},
+	hCenter: {
+		justifyContent: 'center',
+	},
+	hRight: {
+		justifyContent: 'flex-end',
+	},
+	fitContent: {
+		flexBasis: 'auto',
+		flexGrow: 0,
+		flexShrink: 1,
+		flexWrap: 'wrap',
+	},
+});
+
+export default Dialog;