@osano/osano-cmp-react-native 0.2.0 → 0.4.0

package/src/locale/zh-tw.json

@@ -48,7 +48,7 @@
   },
   "messaging": {
     "poweredBy": "技術支持 Osano",
-    "default": "本網站使用 cookie 等技術來啟用基本網站功能，以及用於分析、個性化和有針對性的廣告目的。",
+    "default": "本網站利用 Cookie 等技術來啟用基本網站功能以及 %{analytics}、%{personalization} 和 %{marketing}。",
     "categories": "您可以隨時更改您的設定或接受預設設定。",
     "cookieQuestion": "什麼是Cookie？",
     "timer": "要了解更多信息，請查看以下鏈接：",
@@ -62,7 +62,11 @@
     "usageHow": "我們的網站可能會使用這些 cookie 來：",
     "usageList": "唔透過資料收集而判定我哋網站上廣告嘅受眾\n根據您的導航和個人資料展示個性化廣告\n根據您的導航個性化我們的編輯內容\n允許您在我們網站上的社交網絡或平台上分享內容\n根據您的位置向您發送廣告",
     "viewCookies": "查看Cookies",
-    "closeButton": "您可以關閉此橫幅以僅繼續使用必要的 cookie。"
+    "closeButton": "您可以關閉此橫幅以僅繼續使用必要的 cookie。",
+    "subjectRightsRequest": "主題權利請求",
+    "doNotSellOrShare": "請勿出售或分享我的個人信息",
+    "securityPolicy": "安全政策",
+    "imprint": "印記"
   },
   "disclosure": {
     "day": "日",
@@ -178,7 +182,7 @@
       },
       "9": {
         "name": "通过统计数据或来自不同来源的数据组合了解受众",
-        "description": "报告可以根据关于您的互动和其他用户与广告或（非广告）内容���互动的数据集（如用户资料、统计数据、市场研究、分析数据）的组合生成，以识别共同特征（例如，确定哪些目标受众更容易接受广告宣传或特定内容）。",
+        "description": "报告可以根据关于您的互动和其他用户与广告或（非广告）内容的互动的数据集（如用户资料、统计数据、市场研究、分析数据）的组合生成，以识别共同特征（例如，确定哪些目标受众更容易接受广告宣传或特定内容）。",
         "illustrations": {
           "1": "一家线上书店的店主希望商业报告显示咨询过但没有购买就离开其网站的访客比例，或咨询并购买当月最后一本名人自传的访客比例，以及每个类别访客的平均年龄和男性/女性分布。然后，与您在其网站上浏览相关的数据以及您的个人特征将被使用并与其他此类数据相结合，以生成统计数据。",
           "2": "广告商希望更好地了解与其广告互动的受众类型。它希望某研究机构将与广告互动的用户的特征与不同设备上类似平台用户的典型特征进行比较。这种对比向广告商表明，其广告受众主要通过移动设备访问广告，并且可能在 45-60 岁之间。"
@@ -301,6 +305,6 @@
   "doNotSell": {
     "header": "您的隱私選擇",
     "description": "我們允許某些在線廣告合作夥伴通過 Cookie 和類似技術從我們的服務中收集信息，以投放與您更相關的廣告，並協助我們進行廣告相關分析。根據某些法律，這可能被視為針對定向在線廣告的“銷售”或“共享”。要選擇退出此活動，請使用下面的切換按鈕。",
-    "link": "您可以通過查看此鏈接了解有關我們隱私慣例的更多信息："
+    "link": "您可以透過查看我們的政策來了解有關我們隱私權慣例的更多資訊："
   }
 }

package/src/locale/zh.json

@@ -48,7 +48,7 @@
   },
   "messaging": {
     "poweredBy": "技术支持 Osano",
-    "default": "本网站使用 cookie 等技术来启用基本网站功能，以及用于分析、个性化和有针对性的广告目的。",
+    "default": "本网站利用 Cookie 等技术来启用基本网站功能以及 %{analytics}、%{personalization} 和 %{marketing}。",
     "categories": "您可随时更改设置或接受默认设置。",
     "cookieQuestion": "Cookie 是什么？",
     "timer": "要了解更多信息，请查看以下链接：",
@@ -62,7 +62,11 @@
     "usageHow": "我们的网站可能会将这些cookie用于：",
     "usageList": "不通过资料收集而判定我们网站上广告的受众\n根据您的导航和个人资料展示个性化广告\n根据您的导航个性化我们的编辑内容\n允许您在我们网站上的社交网络或平台上分享内容\n根据您的位置向您发送广告",
     "viewCookies": "查看Cookies",
-    "closeButton": "您可以关闭此横幅以仅继续使用必要的 cookie。"
+    "closeButton": "您可以关闭此横幅以仅继续使用必要的 cookie。",
+    "subjectRightsRequest": "主题权利请求",
+    "doNotSellOrShare": "请勿出售或分享我的个人信息",
+    "securityPolicy": "安全政策",
+    "imprint": "印记"
   },
   "disclosure": {
     "day": "日",
@@ -173,11 +177,11 @@
         "description": "有关向您展示哪些内容以及您如何与之互动的信息，可用于确定（非广告）内容是否投送至目标受众并符合您的兴趣。例如，您是阅读文章、观看视频、收听播客还是查看产品描述、您在这项服务上花费的时间以及您访问的网页等。这对于了解向您展示的（非广告）内容的相关性非常有帮助。",
         "illustrations": {
           "1": "您在出版商的移动应用上阅读了一篇关于徒步旅行的博客文章，并点击了推荐和相关帖子的链接。您的互动将被记录为表明最初的徒步旅行帖子对您有用，并且在相关帖子中成功地吸引了您的兴趣。效果将被衡量，以确定是否在未来制作更多关于徒步旅行的帖子，以及将它们投放在移动应用主屏幕上的位置。",
-          "2": "您被推送了有关时尚趋势的视频，但您和其他几个用户在 30 秒后停止观看。然后，这些信息被用于评估未来关于时尚趋势的正确视频长度。"
+          "2": "您被推送了有关时尚趋势的视频，但您和其他几个用户在 30 秒后停止观看。然��，这些信息被用于评估未来关于时尚趋势的正确视频长度。"
         }
       },
       "9": {
-        "name": "通过统计数据或来自不同来源的数据组合了解受众",
+        "name": "通过统计数据或来自不同���源的数据组合了解受众",
         "description": "报告可以根据关于您的互动和其他用户与广告或（非广告）内容的互动的数据集（如用户资料、统计数据、市场研究、分析数据）的组合生成，以识别共同特征（例如，确定哪些目标受众更容易接受广告宣传或特定内容）。",
         "illustrations": {
           "1": "一家线上书店的店主希望商业报告显示咨询过但没有购买就离开其网站的访客比例，或咨询并购买当月最后一本名人自传的访客比例，以及每个类别访客的平均年龄和男性/女性分布。然后，与您在其网站上浏览相关的数据以及您的个人特征将被使用并与其他此类数据相结合，以生成统计数据。",
@@ -301,6 +305,6 @@
   "doNotSell": {
     "header": "您的隐私选择",
     "description": "我们允许某些在线广告合作伙伴通过 Cookie 和类似技术从我们的服务中收集信息，以投放与您更相关的广告，并协助我们进行广告相关分析。根据某些法律，这可能被视为针对定向在线广告的“销售”或“共享”。要选择退出此活动，请使用下面的切换按钮。",
-    "link": "您可以通过查看此链接了解有关我们隐私惯例的更多信息："
+    "link": "您可以通过查看我们的政策来了解有关我们隐私惯例的更多信息："
   }
 }

package/src/locale/zu.json

@@ -48,7 +48,7 @@
   },
   "messaging": {
     "poweredBy": "Inikwe amandla yi-Osano",
-    "default": "Le webhusayithi isebenzisa ubuchwepheshe obufana namakhukhi ukunika amandla ukusebenza kwesayithi okubalulekile, kanye nokuhlaziya, ukwenza kube ngokwakho, kanye nezinjongo zokukhangisa eziqondisiwe.",
+    "default": "Le webhusayithi isebenzisa ubuchwepheshe obufana namakhukhi ukunika amandla ukusebenza kwesayithi okubalulekile, kanye ne-%{analytics}, %{personalization}, kanye ne-%{marketing}.",
     "categories": "Ungashintsha izilungiselelo zakho nganoma yisiphi isikhathi noma wamukele izilungiselelo ezizenzakalelayo.",
     "cookieQuestion": "Liyini ikhukhi?",
     "timer": "Ukuze ufunde kabanzi, buka isixhumanisi esilandelayo:",
@@ -62,7 +62,11 @@
     "usageHow": "Iwebhusayithi yethu ingasebenzisa la makhukhi uku:",
     "usageList": "Linganisa izethameli zokukhangisa kuwebhusayithi yethu, ngaphandle kokwenza iphrofayela\nBonisa izikhangiso eziqondene nawe ngokusekelwe ekuzulazuleni kwakho kanye nephrofayili yakho\nYenza kube ngokwakho okuqukethwe kwethu kokuhlela ngokusekelwe ekuzulazuleni kwakho\nIkuvumela ukuthi wabelane ngokuqukethwe ezinkundleni zokuxhumana noma ezinkundleni ezikhona kuwebhusayithi yethu\nIkuthumelela ukukhangisa ngokusekelwe endaweni yakho",
     "viewCookies": "Buka Amakhukhi",
-    "closeButton": "Ungavala lesi sibhengezo ukuze uqhubeke namakhukhi abalulekile kuphela."
+    "closeButton": "Ungavala lesi sibhengezo ukuze uqhubeke namakhukhi abalulekile kuphela.",
+    "subjectRightsRequest": "Isicelo Samalungelo Esihloko",
+    "doNotSellOrShare": "Ungathengisi noma Wabelane Ngolwazi Lwami Lomuntu Siqu",
+    "securityPolicy": "Inqubomgomo Yezokuphepha",
+    "imprint": "Imprint"
   },
   "disclosure": {
     "day": "usuku",
@@ -301,6 +305,6 @@
   "doNotSell": {
     "header": "Izinketho Zakho Zobumfihlo",
     "description": "Sivumela ozakwethu abathile bokukhangisa ku-inthanethi ukuthi baqoqe ulwazi kumasevisi ethu ngamakhukhi kanye nobuchwepheshe obufanayo ukuze balethe izikhangiso ezihambisana kakhulu nawe futhi usisize ngezibalo eziphathelene nokukhangisa. Lokhu kungase kubhekwe \"njengokuthengisa\" noma \"ukwabelana\" ekukhangiseni okuku-inthanethi okuqondisiwe ngaphansi kwemithetho ethile. Ukuze uphume kulo msebenzi, sebenzisa ukuguqula ngezansi.",
-    "link": "Ungafunda kabanzi mayelana nezinqubo zethu zobumfihlo ngokubuyekeza lesi sixhumanisi:"
+    "link": "Ungafunda kabanzi mayelana nezinqubo zethu zobumfihlo ngokubuyekeza izinqubomgomo zethu:"
   }
 }

package/src/reducer.ts

@@ -148,11 +148,9 @@ export function reducer(state: OsanoState, action: OsanoAction): OsanoState {
 			if (consent[ConsentCategory.OPT_OUT]) {
 				consent[ConsentCategory.MARKETING] = false;
 			}
-
 			return {
 				...state,
 				consent,
-				dialogOpen: false,
 				savedConsent: { ...consent },
 				stack: [],
 			};

package/src/types/consent-config.d.ts

@@ -73,4 +73,5 @@ export type Config = {
 	region: string;
 	iab: Iab;
 	palette: Palette;
+	additionalLinks: string[][];
 };

package/src/views/Dialog/Message.tsx

@@ -4,9 +4,16 @@ import Locale from '../../components/Locale';
 import { OsanoPrivateContext } from '../../context';
 
 export const Message = () => {
-	const { config } = useContext(OsanoPrivateContext);
+	const { config, translate } = useContext(OsanoPrivateContext);
 	const isFirstLayerUsageRequired = config?.firstLayerUsageRequired;
 
+	const analyticsTranslation =
+		`${translate('categories.ESSENTIAL.label')}`.toLowerCase();
+	const personalizationTranslation =
+		`${translate('categories.PERSONALIZATION.label')}`.toLowerCase();
+	const marketingTranslation =
+		`${translate('categories.MARKETING.label')}`.toLowerCase();
+
 	const translations = ([] as string[]).concat(
 		config?.tcfIsApplicable
 			? 'iab.layer1'
@@ -28,7 +35,12 @@ export const Message = () => {
 		<Locale
 			path={translations}
 			options={{
-				interpolations: { vendorCount: `${config?.disclosedVendorCount}` },
+				interpolations: {
+					vendorCount: `${config?.disclosedVendorCount}`,
+					analytics: analyticsTranslation,
+					personalization: personalizationTranslation,
+					marketing: marketingTranslation,
+				},
 			}}
 		/>
 	);

package/src/views/Dialog/index.tsx

@@ -39,8 +39,6 @@ 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 || {};
@@ -99,9 +97,9 @@ export const Dialog = (): ReactElement<Modal> => {
 		const style: StyleProp<TextStyle> = {
 			color: dialogForegroundColor,
 		};
-		if (Platform.OS === 'web') {
-			style.writingDirection = isRTL ? 'rtl' : 'ltr';
-		}
+		// if (Platform.OS === 'web') {
+		// 	style.writingDirection = isRTL ? 'rtl' : 'ltr';
+		// }
 		return style;
 	}, [isRTL, dialogForegroundColor]);
 	const [hDialogLeft = [], hDialogRight = []]: StyleProp<ViewStyle>[][] =
@@ -136,8 +134,8 @@ export const Dialog = (): ReactElement<Modal> => {
 			backgroundColor: dialogBackgroundColor,
 			justifyContent: 'center',
 			flex: 1,
-			flexGrow: 1,
-			flexShrink: 1,
+			// flexGrow: 1,
+			// flexShrink: 1,
 		},
 	];
 
@@ -215,7 +213,7 @@ export const Dialog = (): ReactElement<Modal> => {
 			onRequestClose={handleClose}
 			onLayout={handleLayoutChange}
 		>
-			<SafeAreaView ref={overlayRef} style={[styles.container, dialogOverlay]}>
+			<SafeAreaView style={[styles.container, dialogOverlay]}>
 				<View
 					style={vDialogTop}
 					onPointerUp={handleClose}
@@ -232,15 +230,28 @@ export const Dialog = (): ReactElement<Modal> => {
 					<View style={dialogStyles}>
 						<View style={styles.dialogContent}>
 							<View style={[styles.row, styles.fitContent]}>
-								<Text style={dialogForeground} testID='dialog-message'>
+								<Text style={dialogForeground} testID="dialog-message">
 									<Message />
 									<Text> </Text>
-									<StoragePolicyLink />
+									<StoragePolicyLink
+										testID="dialog-policy-link-1"
+										policyLinkText={config?.policyLinkText}
+										href={config?.storagePolicyHref}
+									/>
+									{config?.additionalLinks &&
+									config?.additionalLinks?.length >= 1 ? (
+										<Text> | </Text>
+									) : null}
+									<StoragePolicyLink
+										testID="dialog-policy-link-2"
+										policyLinkText={config?.additionalLinks?.at(0)?.at(0)}
+										href={config?.additionalLinks?.at(0)?.at(1)}
+									/>
 								</Text>
 							</View>
 							{isFirstLayerUsageRequired ? (
 								<View
-									testID='first-layer-usage'
+									testID="first-layer-usage"
 									style={[
 										styles.row,
 										styles.categories,
@@ -252,7 +263,7 @@ export const Dialog = (): ReactElement<Modal> => {
 							) : null}
 							{useTcf || config?.showManagePreferencesLinkInDialog ? (
 								<View
-								testID='preference-management-deep-links'
+									testID="preference-management-deep-links"
 									style={[
 										styles.row,
 										styles.categories,
@@ -262,9 +273,10 @@ export const Dialog = (): ReactElement<Modal> => {
 									<PreferenceManagementDeepLinks />
 								</View>
 							) : null}
-							{useTcf && !config?.showManagePreferencesButtonInDialog ? (
+							{(useTcf && !config?.showManagePreferencesButtonInDialog) ||
+							config?.showFirstLayerCategories ? (
 								<View
-									testID='show-first-layer-categories'
+									testID="show-first-layer-categories"
 									style={[
 										styles.col,
 										styles.categories,
@@ -293,7 +305,6 @@ export const Dialog = (): ReactElement<Modal> => {
 							]}
 						/>
 						<CloseButton
-							ref={closeButtonRef}
 							onPress={handleClose}
 							style={[
 								styles.close,
@@ -341,7 +352,7 @@ const styles = StyleSheet.create({
 		width: '100%',
 	},
 	dialogContent: {
-		flexShrink: 1,
+		// flexShrink: 1,
 		justifyContent: 'center',
 		maxWidth: 1024,
 	},
@@ -400,8 +411,8 @@ const styles = StyleSheet.create({
 	},
 	vCenter: {
 		alignItems: 'center',
-		flexGrow: 0,
-		flexShrink: 1,
+		// flexGrow: 0,
+		// flexShrink: 1,
 	},
 	vBottom: {
 		alignItems: 'flex-end',
@@ -417,8 +428,8 @@ const styles = StyleSheet.create({
 	},
 	fitContent: {
 		flexBasis: 'auto',
-		flexGrow: 0,
-		flexShrink: 1,
+		// flexGrow: 0,
+		// flexShrink: 1,
 		flexWrap: 'wrap',
 	},
 });

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

@@ -294,7 +294,7 @@ const CategoryListItem: React.FC<{
 				onPress: () =>
 					dispatch(showIabDisclosures({ id: purposeId, type: 'purpose' })),
 			})),
-		[dispatch, category, useTcf]
+		[dispatch, category, useTcf],
 	);
 
 	const ListHeaderComponent = useMemo(
@@ -303,7 +303,7 @@ const CategoryListItem: React.FC<{
 				<Locale path={`iab.basis.consent`} />
 			</Text>
 		),
-		[drawerForeground]
+		[drawerForeground],
 	);
 	const checked = isCategoryAccepted(state, category);
 	const disabled = isCategoryDisabled(state, category);
@@ -322,7 +322,7 @@ const CategoryListItem: React.FC<{
 				category,
 				configId: config?.configId,
 				customerId: config?.customerId,
-			})
+			}),
 		);
 	}, [config]);
 	return (
@@ -387,18 +387,18 @@ const SpecialFeatureListItem: React.FC<{
 	}, [infoDialogForegroundColor]);
 	const checked = config?.isIabSpecialFeatureAccepted(
 		specialFeatureId,
-		getState() as any
+		getState() as any,
 	);
 	const hasLegalDescription = useMemo(
 		() => translate(descriptionLegal) !== descriptionLegal,
-		[locale]
+		[locale],
 	);
 	const isRTL = Translator.isRTL(locale);
 	const handleValueChange = useBoundCallback(
 		(specialFeatureId, acceptOrDeny: boolean) => {
 			dispatch(setSpecialFeatureConsent(specialFeatureId, acceptOrDeny));
 		},
-		[specialFeatureId]
+		[specialFeatureId],
 	);
 	return (
 		<View>
@@ -461,10 +461,7 @@ const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 	return (
 		<View style={[styles.listItem, styles.listHeader, style]}>
 			<View style={extraLinks ? styles.paragraph : undefined}>
-				<Text 
-				style={drawerForeground}
-				testID='drawer-description'
-				>
+				<Text style={drawerForeground} testID="drawer-description">
 					<Locale path="drawer.description" />
 				</Text>
 			</View>
@@ -472,7 +469,20 @@ const CategoryListHeader: React.FC<{ style: StyleProp<ViewStyle> }> = ({
 				<View>
 					{policyLinkInDrawer ? (
 						<Text>
-							<StoragePolicyLink />
+							<StoragePolicyLink
+								testID="drawer-policy-link-1"
+								policyLinkText={config?.policyLinkText || ''}
+								href={config?.storagePolicyHref || ''}
+							/>
+							{config?.additionalLinks &&
+							config?.additionalLinks?.length >= 1 ? (
+								<Text> | </Text>
+							) : null}
+							<StoragePolicyLink
+								testID="drawer-policy-link-2"
+								policyLinkText={config?.additionalLinks?.at(0)?.at(0)}
+								href={config?.additionalLinks?.at(0)?.at(1)}
+							/>
 						</Text>
 					) : null}
 					{useTcf ? (
@@ -609,7 +619,7 @@ export const ConsentCategoriesDrawer: React.FC = () => {
 						type: 'specialFeature',
 						id: specialFeatureId,
 						headerHeight,
-					})
+					}),
 			);
 		}
 		newCategories.unshift({

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

@@ -49,7 +49,7 @@ export const DrawerHeader: React.FC<DrawerHeaderType> = (props) => {
 	const handleLayoutChange = useCallback(
 		(e: LayoutChangeEvent) => {
 			const height = e.nativeEvent.layout.height;
-			setHeaderHeight(height + (Platform.OS === 'web' ? 0 : 24));
+			setHeaderHeight(height);
 			onHeaderLayoutChange && onHeaderLayoutChange(e);
 		},
 		[onHeaderLayoutChange]

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

@@ -463,7 +463,7 @@ const ListItemRenderer = ({
 	if (typeof item === 'number') {
 		return (
 			<IabVendorListHeader
-				style={{ paddingTop: Platform.OS === 'web' ? 0 : item }}
+				style={{ paddingTop: item }}
 			/>
 		);
 	}
@@ -473,13 +473,6 @@ const ListItemRenderer = ({
 
 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);
 
@@ -488,7 +481,6 @@ export const IabVendorsDrawer: React.FC = () => {
 			<DrawerHeader
 				title="iab.vendor.title"
 				canGoBack={stack.length > 1}
-				// onHeaderLayoutChange={handleHeaderLayoutChange}
 			/>
 		);
 	}, [locale, stack.length]);
@@ -509,18 +501,13 @@ export const IabVendorsDrawer: React.FC = () => {
 	const extraData = useMemo(() => {
 		return {};
 	}, [locale, state]);
-
 	return (
 		<View style={styles.renderItem}>
-			{Platform.OS === 'web' ? null : ListHeaderComponent}
-			<AcceptAllButton />
-			<RejectAllButton />
+			{ListHeaderComponent}
+			<AcceptAllButton disabled={false}/>
+			<RejectAllButton disabled={false}/>
 			<FlatList
 				data={vendors}
-				stickyHeaderIndices={Platform.OS === 'web' ? [0] : undefined}
-				ListHeaderComponent={
-					Platform.OS === 'web' ? ListHeaderComponent : undefined
-				}
 				ListFooterComponent={<View style={styles.listFooter} />}
 				renderItem={ListItemRenderer}
 				ItemSeparatorComponent={Divider}