@osano/osano-cmp-react-native 0.1.0

package/src/utils/Translator.ts

@@ -0,0 +1,326 @@
+import {
+	fetchGlobalLocalePhrases,
+	fetchLocalLocalePhrases,
+} from '../services/locale';
+import { get, merge } from './index';
+
+import type { ConsentManager } from '../ConsentManager';
+import { EventEmitter, EventSubscription } from './EventEmitter';
+
+type il8nProps = {
+	locale?: string;
+	interpolations?: Record<string, string>;
+};
+
+export type LocalizedStrings = {
+	[key: string]: string | number | LocalizedStrings;
+};
+
+const unavailableLocales: string[] = [];
+const rtlLocaleCodes = [
+	'ar',
+	'arc',
+	'ckb',
+	'dv',
+	'fa',
+	'ha',
+	'he',
+	'khw',
+	'ks',
+	'ps',
+	'ur',
+	'uz-af',
+	'yi',
+];
+
+const locales: Record<string, LocalizedStrings> = {};
+
+export default class Translator extends EventEmitter{
+	private _overrides: Record<string, LocalizedStrings> = {};
+	private _currentLocale = 'en';
+	private _consentManager: ConsentManager;
+
+	static DEFAULT_LANGUAGE = 'en';
+	static isRTL(locale: string) {
+		return rtlLocaleCodes.includes(locale);
+	}
+
+	static fallbackLanguages(locale: string) {
+		const [base, region] = locale.split('-');
+		return region
+			? [locale, base, this.DEFAULT_LANGUAGE]
+			: locale !== this.DEFAULT_LANGUAGE
+				? [locale, this.DEFAULT_LANGUAGE]
+				: [this.DEFAULT_LANGUAGE];
+	}
+
+	constructor(
+		consentManager: ConsentManager,
+		messages: LocalizedStrings = {},
+		defaultLocale = 'en',
+	) {
+		super();
+		this._consentManager = consentManager;
+		Object.entries(messages).forEach(([locale, entries]) => {
+			locales[`${locale}`] = { ...(entries as LocalizedStrings) };
+		});
+		this._currentLocale = defaultLocale;
+	}
+
+	/**
+	 * Clears the LocalizedStrings for the specified locale
+	 */
+	clear(locale: string) {
+		delete locales[`${locale}`];
+		return this;
+	}
+
+	/**
+	 * Adds the provided LocalizedStrings to the specified locale
+	 */
+	extend(phrases: LocalizedStrings, locale = 'en') {
+		locales[`${locale}`] = merge(locales[`${locale}`] || {}, phrases);
+		return this;
+	}
+
+	/**
+	 * Adds the provided LocalizedStrings to the specified locale as absolute overrides
+	 *
+	 * @param {LocalizedStrings} phrases
+	 * @param {string} [locale='en']
+	 * @returns {this}
+	 * @memberof Translator
+	 */
+	override(phrases: LocalizedStrings, locale = 'en') {
+		this._overrides[`${locale}`] = phrases;
+		return this;
+	}
+
+	private _langLoadSuccessSubscription?: EventSubscription;
+	private _langLoadFailureSubscription?: EventSubscription;
+
+	private _loading: Record<string, Promise<string | undefined>> = {};
+	load(
+		desiredLocale?: string,
+		onLangLoadSuccess?: ()=>void,
+		onLangLoadFailure?: ()=>void
+	): Promise<PromiseSettledResult<string | undefined>[]> {
+
+		
+		const allLocales = desiredLocale ? Translator.fallbackLanguages(
+			desiredLocale.toLowerCase().replace(/_/g, '-'),
+		) : [];
+		
+		const locale = allLocales?.shift();
+		const customerId = this._consentManager.customerId;
+		const configId = this._consentManager.configId;
+		this._langLoadFailureSubscription =  onLangLoadFailure && this.on(
+			'langLoadFailure',
+			onLangLoadFailure,
+		);
+		this._langLoadSuccessSubscription = onLangLoadSuccess && this.on(
+			'langLoadSuccess',
+			onLangLoadSuccess,
+		);
+		if (locale) {
+			let globalPromise: Promise<string | undefined> | undefined;
+			let localPromise: Promise<string | undefined> | undefined;
+			if (this.isLocaleLoaded(locale)) {
+				this._currentLocale = locale;
+				globalPromise = Promise.resolve(locale);
+			} else {
+				if (this._loading[locale]) {
+					globalPromise = this._loading[locale];
+				} else {
+					const localesToTry = [...allLocales];
+					globalPromise = this._loading[locale] = fetchGlobalLocalePhrases(
+						locale,
+					)
+						.then(phrases => {
+							this._currentLocale = locale;
+							this.extend(phrases as LocalizedStrings, locale);
+							delete this._loading[locale];
+							this.emit('langLoadSuccess')
+							return locale;
+						})
+						.catch(async error => {
+							unavailableLocales.push(locale);
+							delete this._loading[locale];
+							let nextLocale = localesToTry.shift();
+							while (nextLocale) {
+								try {
+									this._loading[`${nextLocale}`] = fetchGlobalLocalePhrases(
+										nextLocale,
+									).then(phrases => {
+										this._currentLocale = nextLocale!;
+										this.extend(phrases as LocalizedStrings, nextLocale);
+										delete this._loading[`${nextLocale}`];
+										return nextLocale;
+									});
+									await this._loading[`${nextLocale}`];
+									return nextLocale;
+								} catch (_error) {
+									unavailableLocales.push(nextLocale);
+									delete this._loading[`${nextLocale}`];
+									nextLocale = localesToTry.shift();
+								}
+							}
+							throw error;
+						});
+				}
+			}
+			if (this._overrides[`${locale}`]) {
+				this.emit('langLoadSuccess')
+				localPromise = Promise.resolve(locale);
+			} else {
+				if (this._loading[`${customerId}_${configId}_${locale}`]) {
+					localPromise = this._loading[`${customerId}_${configId}_${locale}`];
+				} else {
+					if (customerId && configId) {
+						const localesToTry = [...allLocales];
+						localPromise = this._loading[
+							`${customerId}_${configId}_${locale}`
+						] = fetchLocalLocalePhrases(
+							this._consentManager.customerId,
+							this._consentManager.configId,
+							locale,
+						)
+							.then(phrases => {
+								this.override(phrases as LocalizedStrings, locale);
+								delete this._loading[`${customerId}_${configId}_${locale}`];
+								this.emit('langLoadSuccess', locale)
+								return locale;
+							})
+							.catch(async error => {
+								delete this._loading[`${customerId}_${configId}_${locale}`];
+								let nextLocale = localesToTry.shift();
+								while (nextLocale) {
+									try {
+										this._loading[`${customerId}_${configId}_${nextLocale}`] =
+											fetchLocalLocalePhrases(
+												this._consentManager.customerId,
+												this._consentManager.configId,
+												nextLocale,
+											).then(phrases => {
+												this.override(phrases as LocalizedStrings, nextLocale);
+												delete this._loading[
+													`${customerId}_${configId}_${nextLocale}`
+												];
+												return nextLocale;
+											});
+										await this._loading[
+											`${customerId}_${configId}_${nextLocale}`
+										];
+										return nextLocale;
+									} catch (_error) {
+										delete this._loading[
+											`${customerId}_${configId}_${nextLocale}`
+										];
+										nextLocale = localesToTry.shift();
+									}
+								}
+								this.emit('langLoadFailure', `Locale ${locale} is not available for translation`);
+								throw error;
+							});
+					}
+				}
+			}
+			this.emit('langLoadSuccess')
+			this._langLoadFailureSubscription?.remove()
+			this._langLoadSuccessSubscription?.remove()
+			return Promise.allSettled([globalPromise, localPromise].filter(Boolean));
+		} else {
+			this.emit('langLoadFailure', `Locale ${locale} is not available for translation`);
+			this._langLoadFailureSubscription?.remove()
+			this._langLoadSuccessSubscription?.remove()
+			return Promise.reject(
+				new Error(`Locale ${locale} is not available for translation`),
+			);
+		}
+	}
+
+	get locale() {
+		return this._currentLocale;
+	}
+
+	get isRTL() {
+		return Translator.isRTL(this.locale);
+	}
+
+	replace(phrases: LocalizedStrings, specificLocale: string): this {
+		if (specificLocale) {
+			locales[`${specificLocale}`] = phrases || {};
+		} else {
+			locales[this.locale] = phrases || {};
+		}
+		return this;
+	}
+
+	/**
+	 * Create a translation template for a particular key path
+	 */
+	template(
+		key: string,
+	): (
+		props: string | il8nProps,
+		defaultPhrase: string,
+	) => string | LocalizedStrings {
+		return (props: string | il8nProps, defaultPhrase: string) =>
+			this.translate(key, props, defaultPhrase);
+	}
+
+	/**
+	 * Translates a particular LocalizedString path
+	 */
+	translate(
+		path: string | string[],
+		props: string | il8nProps = {},
+		defaultPhrase?: string,
+	): string | LocalizedStrings {
+		const localePassed = typeof props === 'string';
+		const locale = localePassed ? props : props.locale || this.locale;
+		const fallback =
+			typeof defaultPhrase === 'string' ? defaultPhrase : `${path}`;
+		const phrases = locales[`${locale}`];
+		const override = this._overrides[`${locale}`];
+		// Always request from override first
+		let translation =
+			(override && get(this._overrides, path)) ||
+			get(phrases, path) ||
+			(locale.length > 2
+				? this.translate(path, locale.slice(0, 2), fallback)
+				: typeof defaultPhrase === 'string'
+					? this.translate(fallback, locale)
+					: fallback);
+
+		const { interpolations = {} } = localePassed ? {} : props;
+		Object.entries(interpolations).forEach(([key, value]) => {
+			const pattern = new RegExp(`%{${key}}`, 'g');
+			translation = translation.replace(pattern, value);
+		});
+
+		return translation;
+	}
+
+	/**
+	 * Checks to see if the locale is available as a translation option
+	 */
+	isLocaleAvailable(locale?: string) {
+		return !locale || unavailableLocales.includes(locale) ? false : true;
+	}
+
+	/**
+	 * Checks to see if the locale is loaded and usable as a translation option
+	 */
+	isLocaleLoaded(locale: string) {
+		const localization = locales[`${locale}`];
+		return typeof localization === 'object' &&
+			Object.keys(localization).length > 0
+			? true
+			: false;
+	}
+
+	isEmpty() {
+		return Object.keys(locales).length === 0;
+	}
+}

package/src/utils/index.ts

@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const formatPath = (pathOrArray: string | string[]) =>
+	Array.isArray(pathOrArray)
+		? pathOrArray
+				.map(val => String(val))
+				.join('.')
+				.split('.')
+		: pathOrArray.split('.');
+
+export function get(
+	object: Record<string, any> | undefined = {},
+	pathOrArray: string | string[],
+	defaultValue?: any,
+): any {
+	const path = formatPath(pathOrArray);
+	const result = path.reduce((target, key) => {
+		if (typeof target === 'string') {
+			// We reached a translation string
+			return target;
+		}
+		if (target === undefined) {
+			return target;
+		}
+		if (key.slice(-2) === '()') {
+			// execute method
+			return target[`${key}`]();
+		}
+		return target[`${key}`];
+	}, object);
+	return result === undefined ? defaultValue : result;
+}
+
+export function set(
+	object: Record<string, any>,
+	pathOrArray: string | string[],
+	value: any,
+) {
+	const path = formatPath(pathOrArray);
+	const lastIndex = path.length - 1;
+	path.reduce((obj, key, index) => {
+		if (index > lastIndex) {
+			return obj;
+		}
+		if (index === lastIndex) {
+			obj[`${key}`] = value;
+		} else if (typeof obj[`${key}`] !== 'object') {
+			obj[`${key}`] = {};
+		}
+		return obj[`${key}`];
+	}, object);
+}
+
+const mergeLoop = (
+	object: Record<string, any>,
+	[key, value]: [string, any],
+) => {
+	const srcValue = object[`${key}`];
+	const srcType = typeof srcValue;
+	const valType = typeof value;
+	if (value === null) {
+		// Nullify
+		object[`${key}`] = null;
+	} else {
+		switch (srcType) {
+			case 'object': {
+				if (Array.isArray(srcValue)) {
+					// Target is Array...is source value?
+					if (Array.isArray(value)) {
+						object[`${key}`] = Object.entries(value).reduce(
+							mergeLoop,
+							object[`${key}`],
+						);
+					}
+				} else {
+					// Target is Object...is source value?
+					if (valType === 'object' && !Array.isArray(value)) {
+						object[`${key}`] = Object.entries(value).reduce(
+							mergeLoop,
+							object[`${key}`],
+						);
+					}
+				}
+				break;
+			}
+			case 'function': {
+				//Ignore functions
+				break;
+			}
+			default: {
+				switch (valType) {
+					case 'function': {
+						//Ignore functions
+						break;
+					}
+					case 'object': {
+						if (Array.isArray(value)) {
+							// Source is Array...is source value?
+							object[`${key}`] = [...value];
+						} else {
+							object[`${key}`] = Object.entries(value).reduce(mergeLoop, {});
+						}
+						break;
+					}
+					default: {
+						// Direct assignment
+						object[`${key}`] = value;
+						break;
+					}
+				}
+			}
+		}
+	}
+	return object;
+};
+
+function mergeSingle(object: Record<string, any>, source: Record<string, any>) {
+	if (object === source || typeof source !== 'object') {
+		return { ...(object || {}) };
+	}
+	return Object.entries(source || {}).reduce(
+		mergeLoop,
+		Object.entries(object || {}).reduce(mergeLoop, {}),
+	);
+}
+
+export function merge(
+	object: Record<string, any>,
+	...sources: Record<string, any>[]
+) {
+	return sources.reduce(mergeSingle, object);
+}
+
+export function noop() {}

package/src/views/Dialog/Buttons.tsx

@@ -0,0 +1,71 @@
+import {
+	AcceptAllButton,
+	AcceptButton,
+	DenyButton,
+	ManagePreferencesButton,
+	RejectAllButton,
+	SaveButton,
+} from '../../components/Button';
+import React, { useContext } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+
+import { OsanoPrivateContext } from '../../context';
+import { isDialogOpen } from '../../store';
+
+export const Buttons: React.FC<ViewProps> = props => {
+	const { style } = props;
+	const { config, getState } = useContext(OsanoPrivateContext);
+
+	const state = getState();
+	const disabled = !isDialogOpen(state);
+
+	// Button Group 1
+	if (config?.isConsentImplied) {
+		return config.forceManagePreferencesButton ? (
+			<View style={style}>
+				<ManagePreferencesButton disabled={disabled} style={styles.fullWidth} />
+			</View>
+		) : null;
+	}
+
+	// Button Group 2
+	if (config?.tcfIsApplicable || config?.isButtonGroupTwo) {
+		return (
+			<View style={style}>
+				{config.showManagePreferencesButtonInDialog ? (
+					<ManagePreferencesButton
+						disabled={disabled}
+						style={styles.fullWidth}
+					/>
+				) : (
+					<SaveButton disabled={disabled} style={styles.fullWidth} />
+				)}
+				<AcceptAllButton disabled={disabled} style={styles.fullWidth} />
+				{config.rejectAllRequired ? (
+					<RejectAllButton disabled={disabled} style={styles.fullWidth} />
+				) : null}
+			</View>
+		);
+	}
+
+	return (
+		<View style={style}>
+			<AcceptButton disabled={disabled} style={styles.fullWidth} />
+			<DenyButton disabled={disabled} style={styles.fullWidth} />
+			{config?.rejectAllRequired ? (
+				<RejectAllButton disabled={disabled} style={styles.fullWidth} />
+			) : null}
+			{config?.forceManagePreferencesButton ? (
+				<ManagePreferencesButton disabled={disabled} style={styles.fullWidth} />
+			) : null}
+		</View>
+	);
+};
+
+export default Buttons;
+
+const styles = StyleSheet.create({
+	fullWidth: {
+		flexBasis: '100%',
+	},
+});

package/src/views/Dialog/FirstLayerUsage.tsx

@@ -0,0 +1,33 @@
+import React, { useContext, useMemo } from 'react';
+import { Text, View } from 'react-native';
+
+import Locale from '../../components/Locale';
+import { OsanoPrivateContext } from '../../context';
+
+export const FirstLayerUsage = () => {
+	const { translate } = useContext(OsanoPrivateContext);
+	const { config } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const { dialogForegroundColor = '#fff' } = palette || {};
+
+	const dialogForeground = useMemo(() => {
+		return {
+			color: dialogForegroundColor,
+		};
+	}, [dialogForegroundColor]);
+
+	const usageList = (translate('messaging.usageList') as string).split(/\r?\n/);
+
+	return (
+		<View>
+			<Text style={dialogForeground}>
+				<Locale path="messaging.usageHow" />
+			</Text>
+			{usageList.map((line, index) => (
+				<Text key={index} style={dialogForeground}>{`\u2022 ${line}`}</Text>
+			))}
+		</View>
+	);
+};
+
+export default FirstLayerUsage;

package/src/views/Dialog/Message.tsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+
+import Locale from '../../components/Locale';
+import { OsanoPrivateContext } from '../../context';
+
+export const Message = () => {
+	const { config } = useContext(OsanoPrivateContext);
+	const isFirstLayerUsageRequired = config?.firstLayerUsageRequired;
+
+	const translations = ([] as string[]).concat(
+		config?.tcfIsApplicable
+			? 'iab.layer1'
+			: isFirstLayerUsageRequired
+				? 'messaging.usageWhat'
+				: 'messaging.default',
+		' ',
+		config?.isConsentImplied
+			? ['messaging.timer', ' ']
+			: config?.firstLayerCategoriesRequired
+				? ['messaging.categories', ' ']
+				: [],
+		config?.dialogCloseButtonRequired && config?.rejectAllRequired
+			? ['messaging.closeButton']
+			: [],
+	);
+
+	return (
+		<Locale
+			path={translations}
+			options={{
+				interpolations: { vendorCount: `${config?.iabVendorCount}` },
+			}}
+		/>
+	);
+};
+
+export default Message;

package/src/views/Dialog/PreferenceManagementDeepLinks.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback, useContext } from 'react';
+import { showDrawer, showIabVendors } from '../../store';
+
+import Locale from '../../components/Locale';
+import { OsanoPrivateContext } from '../../context';
+import { Text } from 'react-native';
+
+export const PreferenceManagementDeepLinks = () => {
+	const { config, dispatch } = useContext(OsanoPrivateContext);
+	const { palette } = config || {};
+	const { linkColor = '#29246a' } = palette || {};
+
+	const handleShowDrawer = useCallback(() => dispatch(showDrawer), []);
+	const handleShowIabVendors = useCallback(
+		() => dispatch(showIabVendors()),
+		[],
+	);
+
+	return (
+		<>
+			<Text style={{ color: linkColor }} onPress={handleShowDrawer}>
+				<Locale path="drawer.header" />
+			</Text>
+			{config?.tcfIsApplicable ? (
+				<Text style={{ color: linkColor }} onPress={handleShowIabVendors}>
+					<Locale path="iab.vendor.title" />
+				</Text>
+			) : null}
+		</>
+	);
+};
+
+export default PreferenceManagementDeepLinks;