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

package/src/ConsentManager.ts

@@ -1,15 +1,36 @@
-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 type { Config, Mode, Palette } from './types/consent-config';
+import { EventEmitter, type EventSubscription } from './utils/EventEmitter';
+import type {
+	GvlVendor_v2,
+	GvlVendor_v3,
+	Iab,
+	IabFrameworkType,
+	IabState,
+} from './iab/types';
 import { NativeModules, Platform } from 'react-native';
-import { fetchConfig, fetchConsent } from './services/consent';
-import flavors, { type Flavor } from './flavors';
+import {
+	clearConsent as clearStoredConsent,
+	fetchConfig,
+	fetchConsent,
+} from './services/consent';
+import flavors, { defaultFlavor, type Flavor } from './flavors';
 import { get, merge } from './utils';
-import { type OsanoOverrides } from './types';
-import { type Tcf_v2 } from './iab/tcf/types';
+import type { OsanoOverrides } from './types';
+import type {
+	GppVersionType,
+	TcfController,
+	TcfVersionType,
+	Tcf_v2,
+	UspVersionType,
+} from './iab/tcf/types';
+import Tcf from './iab/tcf';
 import Translator from './utils/Translator';
-import { type ConsentCategory, mappedJurisdictions } from './constants';
+import { ConsentCategory, mappedJurisdictions } from './constants';
 import { getDeviceId } from './native/OsanoCmp';
+import type { Store } from './hooks/useThunkReducer';
+import type { OsanoAction, OsanoState } from './types/store';
+import { CLEAR_CONSENT, SAVE_SUCCESS } from './actions';
+import { getConsent } from './selectors';
 
 const CONFIG_ID_ERROR = new Error('customerId and configId must be set');
 const CONFIG_NOT_FOUND_ERROR = new Error('Config not found');
@@ -22,7 +43,32 @@ export const DEFAULT_CONFIG: Config = {
 		'PERSONALIZATION' as ConsentCategory,
 		'ANALYTICS' as ConsentCategory,
 	],
-	type: flavors.one,
+	ccpaApplies: false,
+	ccpaRelaxed: false,
+	configId: '',
+	country: 'us',
+	crossDomain: false,
+	customerId: '',
+	domains: [],
+	forceManagePreferences: false,
+	forceReconsent: undefined,
+	gdprApplies: false,
+	googleConsent: false,
+	gpcSupport: false,
+	iab: {
+		enabled: undefined,
+		notified: false,
+		signatory: false,
+		hideOptOut: false,
+		gpp: undefined,
+		tcf: undefined,
+		usp: undefined,
+	},
+	iframeBlocking: '',
+	language: 'en',
+	managePreferencesEnabled: false,
+	mode: 'production',
+	noTattle: false,
 	palette: {
 		borderless: true,
 		dialogType: 'bar',
@@ -47,39 +93,14 @@ export const DEFAULT_CONFIG: Config = {
 		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',
+	policyLinkText: '',
 	region: '',
-	iab: {
-		enabled: undefined,
-		notified: false,
-		signatory: false,
-		hideOptOut: false,
-		gpp: undefined,
-		tcf: undefined,
-		usp: undefined,
-	},
+	remoteConsent: false,
+	storagePolicyHref: '',
+	timeoutSeconds: 0,
+	type: flavors[defaultFlavor],
+	variant: 'two',
 };
 
 const migrateIabConfig = (config: Iab): Iab => {
@@ -87,16 +108,16 @@ const migrateIabConfig = (config: Iab): Iab => {
 	const { enabled, v2 } = eu ?? {};
 	return {
 		...remain,
+		enabled: enabled ?? false,
 		tcf: {
 			...tcf,
-			enabled: enabled ?? false,
 			v2: {
 				gdprApplies: false,
-				...v2,
-				...tcf?.v2,
 				purposeOptouts: {},
-				specialFeatureOptouts: {},
+				specialFeatureOptins: {},
 				vendorOptouts: {},
+				...v2,
+				...tcf?.v2,
 				vendorListVersion:
 					v2?.vendorListVersion ?? tcf?.v2?.vendorListVersion ?? 0,
 				vendors: {
@@ -135,13 +156,18 @@ export class ConsentConfig extends EventEmitter {
 				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;
+				config.palette = merge(
+					DEFAULT_CONFIG.palette,
+					config.palette,
+				) as Palette;
 				this._config = merge(this._config, config) as Config;
 				this.emit('loadSuccess', this._config);
 			})
-			.catch(err => {
+			.catch((err) => {
 				this.emit('loadFailure', err);
 			});
 	}
@@ -190,12 +216,6 @@ export class ConsentConfig extends EventEmitter {
 	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;
 	}
@@ -208,9 +228,6 @@ export class ConsentConfig extends EventEmitter {
 	get policyLinkInDrawer(): boolean {
 		return this._config.policyLinkInDrawer;
 	}
-	get forcedClassifyEnabled(): boolean {
-		return this._config.forcedClassifyEnabled;
-	}
 	get managePreferencesEnabled(): boolean {
 		return this._config.managePreferencesEnabled;
 	}
@@ -228,7 +245,14 @@ export class ConsentConfig extends EventEmitter {
 	}
 	get type(): Flavor {
 		// Favor flavor overrides
-		return this._config.type ?? flavors[this._config.variant] ?? flavors.one;
+		if (this._config.variant) {
+			return (
+				this._config.type ??
+				flavors[this._config.variant] ??
+				flavors[defaultFlavor]
+			);
+		}
+		return flavors[defaultFlavor];
 	}
 	set type(value: keyof typeof flavors) {
 		if (value && flavors[value]) {
@@ -237,7 +261,15 @@ export class ConsentConfig extends EventEmitter {
 			this._config.type = undefined;
 		}
 	}
-	get variant(): 'one' | 'two' | 'three' | 'four' | 'five' | 'six' {
+	get variant():
+		| 'one'
+		| 'two'
+		| 'three'
+		| 'four'
+		| 'five'
+		| 'six'
+		| ''
+		| undefined {
 		return this._config.variant;
 	}
 	get country(): string {
@@ -246,13 +278,31 @@ export class ConsentConfig extends EventEmitter {
 	get region(): string {
 		return this._config.region;
 	}
-	get iab(): Iab {
-		return this._config.iab;
+
+	set language(value: string) {
+		this._config.language = value || this._config.language;
+	}
+	get language(): string {
+		return this._config.language;
 	}
 	get palette(): Palette {
 		return this._config.palette;
 	}
 
+	set palette(palette: Palette) {
+		if (palette) {
+			this._config.palette = merge(
+				{},
+				DEFAULT_CONFIG.palette,
+				palette,
+			) as Palette;
+		}
+	}
+
+	get disclosedVendorCount(): number {
+		return this.getVendorIds().length;
+	}
+
 	isBrowsingFromCountry(country: string) {
 		return this._config.country.toLowerCase() === country.toLowerCase();
 	}
@@ -292,80 +342,148 @@ export class ConsentConfig extends EventEmitter {
 	// IAB
 	private _iabEnabled?: boolean;
 	get iabEnabled(): boolean {
-		return (
-			this._iabEnabled ||
-			(this._config.iab.tcf?.enabled ?? this._config.iab.enabled ?? false)
-		);
+		return this._iabEnabled || this._config.iab.enabled || false;
 	}
 	set iabEnabled(value: boolean | undefined) {
 		this._iabEnabled = value;
+		// If IAB is enabled after the config is loaded, we need to reload the config
+		if (this._config.customerId && this._config.configId) {
+			this.load();
+		}
+	}
+	private _iabFrameworks: IabFrameworkType[] = ['tcf'];
+	get iabFrameworks(): IabFrameworkType[] {
+		return this._iabFrameworks;
+	}
+	set iabFrameworks(value: IabFrameworkType[]) {
+		this._iabFrameworks = value ? value : this._iabFrameworks;
+	}
+	private _iabVersions: {
+		gpp: GppVersionType;
+		tcf: TcfVersionType;
+		usp: UspVersionType;
+	} = {
+		gpp: '1',
+		tcf: '2',
+		usp: '1',
+	};
+	get iabVersions(): typeof this._iabVersions {
+		return this._iabVersions;
+	}
+	set iabVersions(value: Partial<typeof this.iabVersions>) {
+		this._iabVersions = { ...this._iabVersions, ...value };
+	}
+	get tcfController(): TcfController | undefined {
+		if (this.iabFrameworks.includes('tcf')) {
+			switch (this.iabVersions.tcf) {
+				case '2':
+				case '2.0':
+				case '2.1':
+				default: {
+					if (this.isBrowsingFromCountry('ca')) {
+						return Tcf.tcfcav1;
+					} else {
+						return Tcf.tcfeuv2;
+					}
+				}
+			}
+		}
+		return undefined;
+	}
+	get tcfSelectors() {
+		if (this.iabEnabled) {
+			if (this.iabFrameworks.includes('tcf')) {
+				return Tcf.selectors;
+			}
+		}
+		return undefined;
 	}
 	get iabCategories(): ConsentCategory[] {
 		return ['STORAGE', ...this.categories].filter(
-			category => category !== 'ESSENTIAL',
+			(category) => category !== 'ESSENTIAL',
 		) as ConsentCategory[];
 	}
 	get gdprApplies(): boolean {
 		return (
-			this._iabEnabled === true ||
-			(this._config.iab.tcf?.v2?.gdprApplies ?? false)
+			this._iabEnabled || // Force GDPR if IAB is force enabled
+			this._config.gdprApplies || // GDPR specified in config file
+			(this.tcfSelectors?.doesGDPRApply(this._config, this.iabVersions.tcf) ??
+				false)
 		);
 	}
 	get shouldRenderOptOut(): boolean {
 		return (
-			!this._config.iab.hideOptOut &&
-			!!(this._config.iab.usp?.ccpaApplies ?? this.browsingFromUS)
+			!this._config.iab?.hideOptOut &&
+			!!(this._config.iab?.usp?.ccpaApplies ?? this.browsingFromUS)
 		);
 	}
+
 	get iabVendorCount(): number {
-		return Object.keys(this._config.iab.tcf?.v2?.vendors ?? {}).length;
+		return Object.keys(this._config.iab?.tcf?.v2?.vendors ?? {}).length;
 	}
 	get nonEssentialCategories(): ConsentCategory[] {
-		return this.categories.filter(category => category !== 'ESSENTIAL');
+		return this.categories.filter((category) => category !== 'ESSENTIAL');
 	}
 
-	isIabSpecialFeatureAccepted(specialFeatureId: string) {
-		return (
-			this._config.iab.tcf?.v2?.specialFeatureOptouts[
-				parseInt(specialFeatureId, 10)
-			] !== false
+	get vendorListVersion() {
+		return this.tcfSelectors?.getVendorListVersion(
+			this._config,
+			this.iabVersions.tcf,
 		);
 	}
-	isIabPurposeOptedOut(purposeId: number) {
-		return this._config.iab.tcf?.v2?.purposeOptouts[purposeId] === true;
+
+	isIabSpecialFeatureAccepted(
+		specialFeatureId: number | string,
+		state: IabState,
+	) {
+		return !!this.tcfSelectors?.hasConsentedToSpecialFeature(state, {
+			apiVersion: this.iabVersions.tcf,
+			specialFeatureId: specialFeatureId.toString(),
+		});
 	}
-	isIabVendorOptedOut(vendorId: string) {
-		return (
-			this._config.iab.tcf?.v2?.vendorOptouts[parseInt(vendorId, 10)] !== false
-		);
+
+	// TODO: check if purposeId needs to be a string
+	isIabPurposeOptedOut(purposeId: number | string, state: IabState) {
+		return !!this.tcfSelectors?.hasOptedOutOfPurpose(state, {
+			apiVersion: this.iabVersions.tcf,
+			purposeId: purposeId.toString(),
+		});
+	}
+
+	isIabVendorOptedOut(vendorId: number | string, state: IabState) {
+		return this.tcfSelectors?.hasOptedOutOfVendor(state, {
+			apiVersion: this.iabVersions.tcf,
+			vendorId: vendorId.toString(),
+		});
 	}
 
 	getApiData(apiVersion: number | string = 2): Tcf_v2 | undefined {
 		const apiData = get(
-			this._config.iab.tcf,
+			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 ?? {};
+	getVendors(): Record<number, GvlVendor_v2 | GvlVendor_v3> {
+		return (
+			this.tcfSelectors?.getVendors(this._config, this.iabVersions.tcf) ?? {}
+		);
 	}
 
-	getVendorIds(apiVersion?: number) {
-		return Object.keys(this.getVendors(apiVersion))
-			.map(vendorId => parseInt(vendorId, 10))
-			.filter(Boolean);
+	getVendorIds() {
+		return (
+			Object.keys(this.getVendors()).map((vendorId) =>
+				Number.parseInt(vendorId, 10),
+			) || []
+		);
 	}
 
-	getVendorData(
-		vendorId: number,
-		apiVersion?: string | number,
-	): GvlVendor_v2 | GvlVendor_v3 | undefined {
-		return this.getVendors(apiVersion)[vendorId];
+	getVendorData(vendorId: number) {
+		return this.tcfSelectors?.getVendorData(this._config, {
+			apiVersion: this.iabVersions.tcf,
+			vendorId: vendorId.toString(),
+		});
 	}
 
 	// UI Requirements
@@ -399,6 +517,42 @@ export class ConsentConfig extends EventEmitter {
 			(this.gdprApplies || this.isBrowsingFromCountry('ca')) && this.iabEnabled
 		);
 	}
+
+	getCountOfVendorsUsingPurpose(
+		purposeType: string,
+		purposeId: number,
+	): number {
+		const vendors = this.getVendors();
+
+		const vendorsUsingPurposeId = Object.values(vendors).filter(
+			(vendor: GvlVendor_v2 | GvlVendor_v3) => {
+				let vendorPurposes: number[] = [];
+				switch (purposeType) {
+					case 'features':
+						vendorPurposes = vendor.features;
+						break;
+					case 'purposes':
+						vendorPurposes = vendor.purposes;
+						break;
+					case 'specialFeatures':
+						vendorPurposes = vendor.specialFeatures;
+						break;
+					case 'specialPurposes':
+						vendorPurposes = vendor.specialPurposes;
+						break;
+					case 'purpose':
+						vendorPurposes = vendor.legIntPurposes;
+						break;
+					default:
+						vendorPurposes = [];
+				}
+
+				return vendorPurposes.includes(purposeId);
+			},
+		);
+
+		return vendorsUsingPurposeId.length;
+	}
 }
 
 export class ConsentManager {
@@ -407,6 +561,7 @@ export class ConsentManager {
 	private _locale: string = Translator.DEFAULT_LANGUAGE;
 	private _consent?: ConsentCategory[];
 	private _translator: Translator = new Translator(this);
+	private _overridePalette?: Palette;
 
 	private _deviceId = '';
 	public get deviceId(): string {
@@ -442,9 +597,14 @@ export class ConsentManager {
 	}
 
 	constructor(options?: OsanoOverrides) {
-		const { locale, flavor, iabEnabled } = options || {};
+		const { locale, flavor, iabEnabled, iabFrameworks, iabVersions, palette } =
+			options || {};
+
 		this._config.iabEnabled = iabEnabled ?? undefined;
+		this._config.iabFrameworks = iabFrameworks || this._config.iabFrameworks;
+		this._config.iabVersions = iabVersions || this._config.iabVersions;
 		this._config.type = flavor as keyof typeof flavors;
+		this._overridePalette = palette;
 		const setDeviceId = (deviceId: string | null | undefined) => {
 			this._deviceId = deviceId ?? '';
 		};
@@ -476,10 +636,12 @@ export class ConsentManager {
 		if (locale) {
 			this._locale = locale;
 		}
+		this.config.language = this._locale;
 	}
 
 	private _loaded = false;
 	private _loading?: Promise<{
+		config: ConsentConfig;
 		customerId: string;
 		configId: string;
 		locale: string;
@@ -488,8 +650,22 @@ export class ConsentManager {
 	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 || {};
+	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);
 		}
@@ -497,6 +673,7 @@ export class ConsentManager {
 			return (
 				this._loading ??
 				Promise.resolve({
+					config: this._config,
 					customerId,
 					configId,
 					locale: this._translator.locale,
@@ -528,40 +705,49 @@ export class ConsentManager {
 		this._loaded = false;
 		this._loading = new Promise((resolveLoadConfig, rejectLoadConfig) => {
 			this._cancelLoading = rejectLoadConfig;
-			
+
 			const handleConfigLoadSuccess = () => {
 				this._configLoadSuccessSubscription?.remove();
 				this._configLoadFailureSubscription?.remove();
 				const locale = this._locale;
+				if (this._overridePalette) {
+					this._config.palette = merge(
+						this._config.palette,
+						this._overridePalette,
+					) as Palette;
+				}
 				resolveLoadConfig(
 					new Promise((resolve, reject) => {
 						this._cancelLoading = reject;
 						fetchConsent(this)
 							.catch(() => {
 								// Consent not found
-								return Promise.resolve([]);
+								return Promise.resolve([ConsentCategory.ESSENTIAL]);
 							})
-							.then(consent => {
+							.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));
-								});
+								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({
+												config: this._config,
+												customerId,
+												configId,
+												locale: globalLocale,
+												consent,
+											});
+											return;
+										}
+										// If the global locale failed to load, we can't render the CMP
+										reject(new Error(globalResult?.reason));
+									});
 							});
 					}),
 				);
@@ -619,4 +805,23 @@ export class ConsentManager {
 	public set consentingDomain(value: string) {
 		this._consentingDomain = value || undefined;
 	}
+
+	public middleware(_store: Store<OsanoState, OsanoAction>) {
+		return (next: Function) => (action: any) => {
+			const newState = next(action);
+			switch (action.type) {
+				case SAVE_SUCCESS: {
+					this.consent = Object.keys(getConsent(newState)) as ConsentCategory[];
+					break;
+				}
+				case CLEAR_CONSENT: {
+					this.consent = [ConsentCategory.ESSENTIAL];
+					clearStoredConsent(this);
+					break;
+				}
+			}
+
+			return newState;
+		};
+	}
 }

package/src/ConsentUiBuilder.tsx

@@ -13,7 +13,7 @@ import { Dialog } from './views/Dialog';
 import { Drawer } from './views/Drawer';
 import { OsanoPrivateContext } from './context';
 import { createSharedStyles } from './styles';
-import { setConfig } from './store';
+import { setConfig } from './actions';
 
 export const ConsentUiBuilder: React.FC<{
 	addMiddleware: (
@@ -27,7 +27,7 @@ export const ConsentUiBuilder: React.FC<{
 	hideDisclosures: boolean;
 	removeMiddleware: (
 		m: (
-			store: Store<OsanoState, OsanoAction>
+			store: Store<OsanoState, OsanoAction<any, any>>
 		) => (next: MiddlewareNext<OsanoAction>) => MiddlewareNext<OsanoAction>
 	) => void;
 }> = (props): React.ReactElement<View> => {