@osano/osano-cmp-react-native 0.18.6 → 0.19.1

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

@@ -4,13 +4,16 @@ import React, {
 	useEffect,
 	useMemo,
 	useRef,
+	useState,
 } from 'react';
 import {
 	ActivityIndicator,
 	FlatList,
 	type LayoutChangeEvent,
+	Linking,
 	type ListRenderItemInfo,
 	Platform,
+	Pressable,
 	type StyleProp,
 	StyleSheet,
 	Text,
@@ -37,6 +40,7 @@ import { Divider } from '../../components/Divider';
 import { ExpansionPanel } from '../../components/ExpansionPanel';
 import { Link } from '../../components/Link';
 import Locale from '../../components/Locale';
+import PoweredByOsano from '../../components/PoweredByOsano';
 import StoragePolicyLink from '../../components/StoragePolicyLink';
 import Toggle from '../../components/Toggle';
 import { ConsentCategory, type ConsentCategoryType } from '../../constants';
@@ -56,7 +60,7 @@ import type { Disclosure } from '../../types/store';
 import DrawerHeader from './Drawer.Header';
 
 type ConsentCategoryItem = {
-	type: 'info' | 'category' | 'specialFeature';
+	type: 'info' | 'category' | 'specialFeature' | 'uuid';
 	id: string;
 	headerHeight?: number;
 };
@@ -512,21 +516,144 @@ const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 	);
 };
 
+const OSANO_URL =
+	'https://www.osano.com/?utm_campaign=cmp&utm_source=cmp-dialog&utm_medium=drawer';
+
 const CategoryListFooter: React.FC = () => {
-	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { cmp, dispatch, translate } = useContext(OsanoPrivateContext);
 
 	const handleSave = useCallback(() => {
 		cmp && dispatch(saveConsent(cmp));
 		dispatch(close());
-	}, [cmp]);
+	}, [cmp, dispatch]);
 
+	// Always shown here; showBannerLogo only gates the logo on the consent banner.
 	return (
 		<View style={[styles.listItem, styles.listFooter]}>
 			<SaveButton 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>
+			<Pressable
+				accessibilityRole="link"
+				accessibilityLabel={`${translate('messaging.poweredBy')}`}
+				onPress={() => Linking.openURL(OSANO_URL)}
+				style={styles.poweredBy}
+			>
+				<PoweredByOsano testID="drawer-banner-logo" />
+			</Pressable>
+		</View>
+	);
+};
+
+// Falls back to translucent black when hex is missing or malformed.
+const hexToRgba = (hex: string | undefined, alpha: number): string => {
+	if (!hex || !hex.startsWith('#')) {
+		return `rgba(0, 0, 0, ${alpha})`;
+	}
+	let h = hex.slice(1);
+	if (h.length === 3) {
+		h = h
+			.split('')
+			.map((c) => c + c)
+			.join('');
+	}
+	// Reject any non-hex input up front so parseInt can't yield NaN channels.
+	if (!/^[0-9a-fA-F]{6}$/.test(h)) {
+		return `rgba(0, 0, 0, ${alpha})`;
+	}
+	const r = parseInt(h.slice(0, 2), 16);
+	const g = parseInt(h.slice(2, 4), 16);
+	const b = parseInt(h.slice(4, 6), 16);
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+// Resolve the clipboard native module lazily. The require is guarded so the
+// drawer still renders where the module is not linked (e.g. Expo Go), instead
+// of throwing at import time; the Copy button is hidden when it is unavailable.
+const getClipboard = (): { setString: (value: string) => void } | null => {
+	try {
+		// Guarded require (not a static import) so an unlinked module degrades
+		// instead of throwing when this file loads.
+		// eslint-disable-next-line @typescript-eslint/no-require-imports
+		return require('@react-native-clipboard/clipboard').default;
+	} catch {
+		return null;
+	}
+};
+
+// Shows the visitor's consent UUID with a Copy button that writes it to the
+// clipboard. Renders nothing when no UUID is available.
+const ConsentUuidRow: React.FC<{ style: StyleProp<ViewStyle> }> = ({
+	style,
+}) => {
+	const { cmp, config, translate } = useContext(OsanoPrivateContext);
+	const uuid = cmp?.deviceId ?? '';
+	const palette = config?.palette;
+	const foregroundColor = palette?.infoDialogForegroundColor;
+	const buttonBackgroundColor = palette?.buttonBackgroundColor;
+	const buttonForegroundColor = palette?.buttonForegroundColor;
+	const clipboard = useMemo(() => getClipboard(), []);
+	const [copied, setCopied] = useState(false);
+	const copiedTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(
+		() => () => {
+			if (copiedTimeout.current) {
+				clearTimeout(copiedTimeout.current);
+			}
+		},
+		[],
+	);
+
+	const handleCopy = useCallback(() => {
+		if (!uuid || !clipboard) {
+			return;
+		}
+		clipboard.setString(uuid);
+		setCopied(true);
+		if (copiedTimeout.current) {
+			clearTimeout(copiedTimeout.current);
+		}
+		// Revert the label back to "Copy" so the button is reusable.
+		copiedTimeout.current = setTimeout(() => setCopied(false), 2000);
+	}, [uuid, clipboard]);
+
+	if (!uuid) {
+		return null;
+	}
+	const copyLabel = `${translate('drawer.copy')}`;
+	const copiedLabel = `${translate('drawer.copied')}`;
+	return (
+		<View style={[styles.listItem, styles.uuidRow, style]}>
+			<View
+				style={[
+					styles.uuidBox,
+					{ backgroundColor: hexToRgba(foregroundColor, 0.05) },
+				]}
+			>
+				<Text
+					selectable
+					numberOfLines={1}
+					ellipsizeMode="tail"
+					style={[styles.uuidText, { color: foregroundColor }]}
+					testID="drawer-consent-uuid"
+				>
+					{`UUID: ${uuid}`}
+				</Text>
+				{clipboard ? (
+					<Pressable
+						accessibilityRole="button"
+						accessibilityLabel={copyLabel}
+						onPress={handleCopy}
+						style={[
+							styles.copyButton,
+							{ backgroundColor: buttonBackgroundColor },
+						]}
+						testID="drawer-consent-uuid-copy"
+					>
+						<Text style={[styles.copyText, { color: buttonForegroundColor }]}>
+							{copied ? copiedLabel : copyLabel}
+						</Text>
+					</Pressable>
+				) : null}
 			</View>
 		</View>
 	);
@@ -551,6 +678,8 @@ const ListItemRenderer = ({
 			);
 		case 'specialFeature':
 			return <SpecialFeatureListItem style={style} specialFeatureId={id} />;
+		case 'uuid':
+			return <ConsentUuidRow style={style} />;
 		default:
 			return null;
 	}
@@ -627,6 +756,9 @@ export const ConsentCategoriesDrawer: React.FC = () => {
 					}),
 			);
 		}
+		if (config?.showConsentUuid) {
+			newCategories.push({ type: 'uuid', id: 'uuid', headerHeight });
+		}
 		newCategories.unshift({
 			type: 'info',
 			id: 'info',
@@ -675,9 +807,8 @@ const styles = StyleSheet.create({
 	poweredBy: {
 		alignItems: 'center',
 		justifyContent: 'center',
-		flexDirection: 'column',
-		fontWeight: '700',
-		marginVertical: 16,
+		marginTop: 24,
+		marginBottom: 16,
 	},
 	switch: {
 		marginBottom: 8,
@@ -698,12 +829,38 @@ const styles = StyleSheet.create({
 		paddingVertical: 32,
 	},
 	listFooter: {
-		paddingVertical: 32,
+		paddingTop: 16,
+		paddingBottom: 8,
 	},
 	listItem: {
 		fontSize: 12,
 		paddingHorizontal: 24,
 	},
+	uuidRow: {
+		paddingVertical: 8,
+	},
+	uuidBox: {
+		borderRadius: 8,
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+		gap: 12,
+	},
+	uuidText: {
+		fontSize: 14,
+		flex: 1,
+	},
+	copyButton: {
+		borderRadius: 8,
+		paddingHorizontal: 16,
+		paddingVertical: 8,
+	},
+	copyText: {
+		fontSize: 14,
+		fontWeight: '700',
+	},
 	paragraph: {
 		marginBottom: 24,
 	},