@osano/osano-cmp-react-native 0.1.0

package/src/ConsentManager.ts

@@ -0,0 +1,622 @@
+import { type Config, type Mode, type Palette } from './types/consent-config';
+import { EventEmitter, EventSubscription } from './utils/EventEmitter';
+import { type GvlVendor_v2, type GvlVendor_v3, type Iab } from './iab/types';
+import { NativeModules, Platform } from 'react-native';
+import { fetchConfig, fetchConsent } from './services/consent';
+import flavors, { type Flavor } from './flavors';
+import { get, merge } from './utils';
+import { type OsanoOverrides } from './types';
+import { type Tcf_v2 } from './iab/tcf/types';
+import Translator from './utils/Translator';
+import { type ConsentCategory, mappedJurisdictions } from './constants';
+import { getDeviceId } from './native/OsanoCmp';
+
+const CONFIG_ID_ERROR = new Error('customerId and configId must be set');
+const CONFIG_NOT_FOUND_ERROR = new Error('Config not found');
+
+export const DEFAULT_CONFIG: Config = {
+	allowTimeout: false,
+	categories: [
+		'ESSENTIAL' as ConsentCategory,
+		'MARKETING' as ConsentCategory,
+		'PERSONALIZATION' as ConsentCategory,
+		'ANALYTICS' as ConsentCategory,
+	],
+	type: flavors.one,
+	palette: {
+		borderless: true,
+		dialogType: 'bar',
+		displayPosition: 'bottom',
+		infoDialogPosition: 'right',
+		widgetPosition: 'right',
+		buttonBackgroundColor: '#fff',
+		buttonForegroundColor: '#000',
+		buttonDenyBackgroundColor: '#989',
+		buttonDenyForegroundColor: '#fff',
+		dialogBackgroundColor: '#000',
+		dialogForegroundColor: '#fff',
+		infoDialogOverlayColor: 'rgba(0,0,0,0.45)',
+		infoDialogBackgroundColor: '#fff',
+		infoDialogForegroundColor: '#000',
+		linkColor: '#29246a',
+		toggleOffBackgroundColor: '#d2cfff',
+		toggleButtonOffColor: '#ffffff',
+		toggleOnBackgroundColor: '#37cd8f',
+		toggleButtonOnColor: '#f4f4f4',
+		widgetColor: '#37cd8f',
+		widgetOutlineColor: '#29246a',
+		widgetFillColor: '#fff',
+	},
+	gpcSupport: false,
+	ccpaRelaxed: false,
+	crossDomain: false,
+	ccpaApplies: false,
+	forceManagePreferences: false,
+	forceReconsent: undefined,
+	googleConsent: false,
+	iframeBlocking: '',
+	scriptBlocking: '',
+	timeoutSeconds: 0,
+	storagePolicyHref: '',
+	policyLinkText: '',
+	policyLinkInDrawer: false,
+	forcedClassifyEnabled: false,
+	managePreferencesEnabled: false,
+	customerId: '',
+	configId: '',
+	mode: 'production',
+	noTattle: false,
+	domains: [],
+	remoteConsent: false,
+	variant: 'one',
+	country: 'us',
+	region: '',
+	iab: {
+		enabled: undefined,
+		notified: false,
+		signatory: false,
+		hideOptOut: false,
+		gpp: undefined,
+		tcf: undefined,
+		usp: undefined,
+	},
+};
+
+const migrateIabConfig = (config: Iab): Iab => {
+	const { eu, tcf, ...remain } = config;
+	const { enabled, v2 } = eu ?? {};
+	return {
+		...remain,
+		tcf: {
+			...tcf,
+			enabled: enabled ?? false,
+			v2: {
+				gdprApplies: false,
+				...v2,
+				...tcf?.v2,
+				purposeOptouts: {},
+				specialFeatureOptouts: {},
+				vendorOptouts: {},
+				vendorListVersion:
+					v2?.vendorListVersion ?? tcf?.v2?.vendorListVersion ?? 0,
+				vendors: {
+					...tcf?.v2?.vendors,
+					...v2?.vendors,
+				},
+			},
+		},
+	};
+};
+
+const emptyArray: never[] = [];
+
+export class ConsentConfig extends EventEmitter {
+	private _config: Config;
+	private _customerId: string;
+	private _configId: string;
+
+	constructor(customerId?: string, configId?: string) {
+		super();
+		this._config = merge({}, DEFAULT_CONFIG) as Config;
+		this._customerId = customerId ?? '';
+		this._configId = configId ?? '';
+	}
+
+	load() {
+		if (!this._customerId || !this._configId) {
+			this.emit('loadFailure', CONFIG_ID_ERROR);
+			return;
+		}
+		return fetchConfig(this._customerId, this._configId)
+			.then((config: Config | null) => {
+				if (!config || Object.keys(config).length === 0) {
+					throw CONFIG_NOT_FOUND_ERROR;
+				}
+				config.iab = migrateIabConfig(config.iab);
+				// Handle IAB override
+				config.iab.enabled = this._config.iab.enabled || config.iab.enabled;
+				config.palette = Object.fromEntries(
+					Object.entries(config.palette).filter(([, value]) => !!value),
+				) as Palette;
+				this._config = merge(this._config, config) as Config;
+				this.emit('loadSuccess', this._config);
+			})
+			.catch(err => {
+				this.emit('loadFailure', err);
+			});
+	}
+	set customerId(value: string) {
+		this._customerId = value || this._customerId;
+	}
+	get customerId(): string {
+		return this._customerId;
+	}
+	set configId(value: string) {
+		this._configId = value || this._configId;
+	}
+	get configId(): string {
+		return this._configId;
+	}
+	get allowTimeout(): boolean {
+		return this._config.allowTimeout;
+	}
+	get gpcSupport(): boolean {
+		return this._config.gpcSupport;
+	}
+	get categories(): ConsentCategory[] {
+		return this._config.categories || emptyArray;
+	}
+	get jurisdiction(): string {
+		return (
+			mappedJurisdictions[`${this.country}`.toLowerCase()] ||
+			`${this.country}${this.region ? `-${this.region}` : ''}`
+		);
+	}
+	get ccpaRelaxed(): boolean {
+		return this._config.ccpaRelaxed;
+	}
+	get crossDomain(): boolean {
+		return this._config.crossDomain;
+	}
+	get ccpaApplies(): boolean {
+		return this._config.ccpaApplies;
+	}
+	get forceManagePreferences(): boolean {
+		return this._config.forceManagePreferences;
+	}
+	get forceReconsent(): Date | undefined {
+		return this._config.forceReconsent;
+	}
+	get googleConsent(): boolean {
+		return this._config.googleConsent;
+	}
+	get iframeBlocking(): Mode {
+		return this._config.iframeBlocking;
+	}
+	get scriptBlocking(): Mode {
+		return this._config.scriptBlocking;
+	}
+	get timeoutSeconds(): number {
+		return this._config.timeoutSeconds;
+	}
+	get storagePolicyHref(): string {
+		return this._config.storagePolicyHref;
+	}
+	get policyLinkText(): string {
+		return this._config.policyLinkText;
+	}
+	get policyLinkInDrawer(): boolean {
+		return this._config.policyLinkInDrawer;
+	}
+	get forcedClassifyEnabled(): boolean {
+		return this._config.forcedClassifyEnabled;
+	}
+	get managePreferencesEnabled(): boolean {
+		return this._config.managePreferencesEnabled;
+	}
+	get mode(): Mode {
+		return this._config.mode;
+	}
+	get noTattle(): boolean {
+		return this._config.noTattle;
+	}
+	get domains(): Array<string> {
+		return this._config.domains;
+	}
+	get remoteConsent(): boolean {
+		return this._config.remoteConsent;
+	}
+	get type(): Flavor {
+		// Favor flavor overrides
+		return this._config.type ?? flavors[this._config.variant] ?? flavors.one;
+	}
+	set type(value: keyof typeof flavors) {
+		if (value && flavors[value]) {
+			this._config.type = flavors[value];
+		} else {
+			this._config.type = undefined;
+		}
+	}
+	get variant(): 'one' | 'two' | 'three' | 'four' | 'five' | 'six' {
+		return this._config.variant;
+	}
+	get country(): string {
+		return this._config.country;
+	}
+	get region(): string {
+		return this._config.region;
+	}
+	get iab(): Iab {
+		return this._config.iab;
+	}
+	get palette(): Palette {
+		return this._config.palette;
+	}
+
+	isBrowsingFromCountry(country: string) {
+		return this._config.country.toLowerCase() === country.toLowerCase();
+	}
+
+	get browsingFromUS() {
+		return this.isBrowsingFromCountry('us');
+	}
+
+	get isConsentImplied() {
+		return !!this.type.timer;
+	}
+
+	get dialogCloseButtonRequired() {
+		return this.type.canDismissDialog;
+	}
+
+	get firstLayerCategoriesRequired() {
+		return this.type.categories;
+	}
+
+	get firstLayerUsageRequired() {
+		return this.type.firstLayerUsage;
+	}
+
+	get managePreferencesRequired() {
+		return this.type.managePreferences;
+	}
+
+	get forceManagePreferencesButton() {
+		return this._config.forceManagePreferences;
+	}
+
+	get rejectAllRequired() {
+		return this.type.rejectAll;
+	}
+
+	// IAB
+	private _iabEnabled?: boolean;
+	get iabEnabled(): boolean {
+		return (
+			this._iabEnabled ||
+			(this._config.iab.tcf?.enabled ?? this._config.iab.enabled ?? false)
+		);
+	}
+	set iabEnabled(value: boolean | undefined) {
+		this._iabEnabled = value;
+	}
+	get iabCategories(): ConsentCategory[] {
+		return ['STORAGE', ...this.categories].filter(
+			category => category !== 'ESSENTIAL',
+		) as ConsentCategory[];
+	}
+	get gdprApplies(): boolean {
+		return (
+			this._iabEnabled === true ||
+			(this._config.iab.tcf?.v2?.gdprApplies ?? false)
+		);
+	}
+	get shouldRenderOptOut(): boolean {
+		return (
+			!this._config.iab.hideOptOut &&
+			!!(this._config.iab.usp?.ccpaApplies ?? this.browsingFromUS)
+		);
+	}
+	get iabVendorCount(): number {
+		return Object.keys(this._config.iab.tcf?.v2?.vendors ?? {}).length;
+	}
+	get nonEssentialCategories(): ConsentCategory[] {
+		return this.categories.filter(category => category !== 'ESSENTIAL');
+	}
+
+	isIabSpecialFeatureAccepted(specialFeatureId: string) {
+		return (
+			this._config.iab.tcf?.v2?.specialFeatureOptouts[
+				parseInt(specialFeatureId, 10)
+			] !== false
+		);
+	}
+	isIabPurposeOptedOut(purposeId: number) {
+		return this._config.iab.tcf?.v2?.purposeOptouts[purposeId] === true;
+	}
+	isIabVendorOptedOut(vendorId: string) {
+		return (
+			this._config.iab.tcf?.v2?.vendorOptouts[parseInt(vendorId, 10)] !== false
+		);
+	}
+
+	getApiData(apiVersion: number | string = 2): Tcf_v2 | undefined {
+		const apiData = get(
+			this._config.iab.tcf,
+			`v${parseInt(`${apiVersion}`, 10)}`,
+		);
+		return apiData;
+	}
+
+	getVendors(
+		apiVersion?: number | string,
+	): Record<number, GvlVendor_v2 | GvlVendor_v3> {
+		const tcf = this.getApiData(apiVersion);
+		return tcf?.vendors ?? {};
+	}
+
+	getVendorIds(apiVersion?: number) {
+		return Object.keys(this.getVendors(apiVersion))
+			.map(vendorId => parseInt(vendorId, 10))
+			.filter(Boolean);
+	}
+
+	getVendorData(
+		vendorId: number,
+		apiVersion?: string | number,
+	): GvlVendor_v2 | GvlVendor_v3 | undefined {
+		return this.getVendors(apiVersion)[vendorId];
+	}
+
+	// UI Requirements
+	get showFirstLayerCategories() {
+		return !this.managePreferencesEnabled && this.firstLayerCategoriesRequired;
+	}
+
+	get showManagePreferencesButtonInDialog() {
+		return this.firstLayerCategoriesRequired
+			? this.managePreferencesEnabled
+			: this.managePreferencesRequired || this.forceManagePreferencesButton;
+	}
+
+	get isButtonGroupTwo() {
+		return this.managePreferencesRequired || this.firstLayerCategoriesRequired;
+	}
+
+	get showManagePreferencesLinkInDialog() {
+		return (
+			this.managePreferencesRequired &&
+			this.showFirstLayerCategories &&
+			!this.showManagePreferencesButtonInDialog &&
+			(this.isConsentImplied ||
+				this.isButtonGroupTwo ||
+				!this.forceManagePreferencesButton)
+		);
+	}
+
+	get tcfIsApplicable() {
+		return (
+			(this.gdprApplies || this.isBrowsingFromCountry('ca')) && this.iabEnabled
+		);
+	}
+}
+
+export class ConsentManager {
+	private _config: ConsentConfig = new ConsentConfig();
+	private _extUsrData = '';
+	private _locale: string = Translator.DEFAULT_LANGUAGE;
+	private _consent?: ConsentCategory[];
+	private _translator: Translator = new Translator(this);
+
+	private _deviceId = '';
+	public get deviceId(): string {
+		return this._deviceId;
+	}
+
+	public get customerId(): string {
+		return this._config.customerId;
+	}
+	public set customerId(value: string) {
+		this._config.customerId = value;
+	}
+	public get configId(): string {
+		return this._config.configId;
+	}
+	public set configId(value: string) {
+		this._config.configId = value;
+	}
+
+	public get extUsrData(): string {
+		return this._extUsrData;
+	}
+	public set extUsrData(value: string) {
+		this._extUsrData = value;
+	}
+
+	public get translator(): Translator {
+		return this._translator;
+	}
+
+	public get config(): ConsentConfig {
+		return this._config;
+	}
+
+	constructor(options?: OsanoOverrides) {
+		const { locale, flavor, iabEnabled } = options || {};
+		this._config.iabEnabled = iabEnabled ?? undefined;
+		this._config.type = flavor as keyof typeof flavors;
+		const setDeviceId = (deviceId: string | null | undefined) => {
+			this._deviceId = deviceId ?? '';
+		};
+		switch (Platform.OS) {
+			case 'android': {
+				try {
+					getDeviceId().then(setDeviceId);
+				} catch (err) {
+					console.log(`Error getting device id: ${err}`);
+				}
+				this._locale = NativeModules.I18nManager.localeIdentifier;
+				break;
+			}
+			case 'ios': {
+				try {
+					getDeviceId().then(setDeviceId);
+				} catch (err) {
+					console.log(`Error getting device id: ${err}`);
+				}
+				this._locale =
+					NativeModules.SettingsManager.settings.AppleLanguages[0] || //iOS 13
+					NativeModules.SettingsManager.settings.AppleLocale;
+				break;
+			}
+			default: {
+				break;
+			}
+		}
+		if (locale) {
+			this._locale = locale;
+		}
+	}
+
+	private _loaded = false;
+	private _loading?: Promise<{
+		customerId: string;
+		configId: string;
+		locale: string;
+		consent?: ConsentCategory[];
+	}>;
+	private _cancelLoading?: () => void;
+	private _configLoadSuccessSubscription?: EventSubscription;
+	private _configLoadFailureSubscription?: EventSubscription;
+	load(args?: { customerId?: string; configId?: string , onConfigLoadSuccess?: ()=>void, onConfigLoadFailure?: ()=>void, onLangLoadSuccess?: ()=>void, onLangLoadFailure?:()=>void}) {
+		const { customerId, configId, onConfigLoadFailure, onConfigLoadSuccess, onLangLoadSuccess, onLangLoadFailure } = args || {};
+		if (!customerId || !configId) {
+			return Promise.reject(CONFIG_ID_ERROR);
+		}
+		if (this.customerId === customerId && this.configId === configId) {
+			return (
+				this._loading ??
+				Promise.resolve({
+					customerId,
+					configId,
+					locale: this._translator.locale,
+					consent: this.consent,
+				})
+			);
+		}
+		// Remove any existing listeners before a potential cancel
+		if (this._configLoadSuccessSubscription) {
+			this._configLoadSuccessSubscription.remove();
+		}
+		if (this._configLoadFailureSubscription) {
+			this._configLoadFailureSubscription.remove();
+		}
+
+		if (this._loading && this._cancelLoading) {
+			try {
+				this._cancelLoading();
+				if (this._cancelLoading) {
+					delete this._cancelLoading;
+				}
+				if (this._loading) {
+					delete this._loading;
+				}
+			} catch (err) {
+				// Do nothing
+			}
+		}
+		this._loaded = false;
+		this._loading = new Promise((resolveLoadConfig, rejectLoadConfig) => {
+			this._cancelLoading = rejectLoadConfig;
+			
+			const handleConfigLoadSuccess = () => {
+				this._configLoadSuccessSubscription?.remove();
+				this._configLoadFailureSubscription?.remove();
+				const locale = this._locale;
+				resolveLoadConfig(
+					new Promise((resolve, reject) => {
+						this._cancelLoading = reject;
+						fetchConsent(this)
+							.catch(() => {
+								// Consent not found
+								return Promise.resolve([]);
+							})
+							.then(consent => {
+								this.consent = consent;
+								return this._translator.load(locale, onLangLoadSuccess, onLangLoadFailure).then(results => {
+									delete this._cancelLoading;
+									delete this._loading;
+									const globalResult = results[0];
+									// As long as the global locale is loaded, we can render the CMP
+									if (globalResult?.status === 'fulfilled') {
+										this._loaded = true;
+										const globalLocale = globalResult?.value || locale;
+										resolve({
+											customerId,
+											configId,
+											locale: globalLocale,
+											consent,
+										});
+										return;
+									}
+									// If the global locale failed to load, we can't render the CMP
+									reject(new Error(globalResult?.reason));
+								});
+							});
+					}),
+				);
+				onConfigLoadSuccess && onConfigLoadSuccess();
+			};
+			const handleConfigLoadFailure = (err: Error) => {
+				this._loaded = false;
+				delete this._cancelLoading;
+				delete this._loading;
+				this._configLoadSuccessSubscription?.remove();
+				this._configLoadFailureSubscription?.remove();
+				onConfigLoadFailure && onConfigLoadFailure();
+				rejectLoadConfig(err);
+			};
+			this._configLoadSuccessSubscription = this._config.on(
+				'loadSuccess',
+				handleConfigLoadSuccess,
+			);
+			this._configLoadFailureSubscription = this._config.on(
+				'loadFailure',
+				handleConfigLoadFailure,
+			);
+			this.config.customerId = customerId;
+			this.config.configId = configId;
+			this._config.load();
+		});
+
+		return this._loading;
+	}
+
+	public get consent(): ConsentCategory[] | undefined {
+		return this._consent ? [...this._consent] : undefined;
+	}
+
+	public set consent(value: ConsentCategory[] | undefined) {
+		this._consent = value;
+	}
+
+	public hasConsent(category: ConsentCategory): boolean {
+		return this._consent?.includes(category) ?? false;
+	}
+
+	public get loaded(): boolean {
+		return this._loaded;
+	}
+
+	public get loading(): boolean {
+		return !!this._loading;
+	}
+
+	private _consentingDomain: string | undefined;
+	public get consentingDomain(): string {
+		return this._consentingDomain ?? this._config.domains[0] ?? '';
+	}
+	public set consentingDomain(value: string) {
+		this._consentingDomain = value || undefined;
+	}
+}