@osano/osano-cmp-react-native 0.13.0 → 0.15.0

package/lib/typescript/src/utils/ExpoGoMemoryStorage.d.ts

@@ -0,0 +1,21 @@
+/**
+ * In-memory storage fallback for Expo Go environment
+ * Provides storage functionality when native modules are not available
+ */
+export declare class ExpoGoMemoryStorage {
+    private static storage;
+    private static defaultStorage;
+    static setStorage(key: string, value: string): Promise<string>;
+    static getStorage(key: string): Promise<string | null>;
+    static clearStorage(key: string): Promise<void>;
+    static setStorageToDefault(key: string, value: string): Promise<string>;
+    static setIntStorageToDefault(key: string, value: number): Promise<number>;
+    static setBoolStorageToDefault(key: string, value: boolean): Promise<boolean>;
+    static clearStorageFromDefault(key: string): Promise<void>;
+    static getDeviceId(): Promise<string>;
+    /**
+     * Clear all storage for testing purposes
+     */
+    static clearAll(): void;
+}
+//# sourceMappingURL=ExpoGoMemoryStorage.d.ts.map

package/lib/typescript/src/utils/ExpoGoMemoryStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoGoMemoryStorage.d.ts","sourceRoot":"","sources":["../../../../src/utils/ExpoGoMemoryStorage.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,mBAAmB;IAC/B,OAAO,CAAC,MAAM,CAAC,OAAO,CAA6B;IACnD,OAAO,CAAC,MAAM,CAAC,cAAc,CAAgD;IAE7E,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAK9D,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAKtD,MAAM,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAK/C,MAAM,CAAC,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvE,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAK1E,MAAM,CAAC,uBAAuB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAK7E,MAAM,CAAC,uBAAuB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAK1D,MAAM,CAAC,WAAW,IAAI,OAAO,CAAC,MAAM,CAAC;IAUrC;;OAEG;IACH,MAAM,CAAC,QAAQ,IAAI,IAAI;CAIvB"}

package/lib/typescript/src/views/Dialog/Buttons.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import { type ViewProps } from 'react-native';
-export declare const Buttons: React.FC<ViewProps>;
+import { type ViewProps, type ViewStyle } from 'react-native';
+export declare const Buttons: React.FC<ViewProps & {
+    buttonStyle?: ViewStyle;
+}>;
 export default Buttons;
 //# sourceMappingURL=Buttons.d.ts.map

package/lib/typescript/src/views/Dialog/Buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dialog/Buttons.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhE,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgDvC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dialog/Buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAYhF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,GAAG;IAAE,WAAW,CAAC,EAAE,SAAS,CAAA;CAAE,CAoDrE,CAAC;AAeF,eAAe,OAAO,CAAC"}

package/lib/typescript/src/views/Dialog/index.d.ts

@@ -1,5 +1,5 @@
-import { Modal } from 'react-native';
 import type { ReactElement } from 'react';
+import { Modal } from 'react-native';
 export declare const Dialog: () => ReactElement<Modal>;
 export default Dialog;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/views/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,EAWL,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAiB1C,eAAO,MAAM,MAAM,QAAO,YAAY,CAAC,KAAK,CAsS3C,CAAC;AAyGF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ1C,OAAO,EACN,KAAK,EAWL,MAAM,cAAc,CAAC;AAiBtB,eAAO,MAAM,MAAM,QAAO,YAAY,CAAC,KAAK,CA4O3C,CAAC;AAwHF,eAAe,MAAM,CAAC"}

package/lib/typescript/src/views/Drawer/Drawer.ConsentCategories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.ConsentCategories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/Drawer.ConsentCategories.tsx"],"names":[],"mappings":"AAaA,OAAO,KAMN,MAAM,OAAO,CAAC;AAshBf,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EA8G3C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"Drawer.ConsentCategories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/Drawer.ConsentCategories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAmiBf,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EA8G3C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/typescript/src/views/Drawer/Drawer.Header.d.ts

@@ -1,5 +1,5 @@
-import { type LayoutChangeEvent } from 'react-native';
 import React from 'react';
+import { type LayoutChangeEvent } from 'react-native';
 export type DrawerHeaderType = {
     title: string;
     canGoBack: boolean;

package/lib/typescript/src/views/Drawer/Drawer.Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.Header.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/Drawer.Header.tsx"],"names":[],"mappings":"AACA,OAAO,EACN,KAAK,iBAAiB,EAOtB,MAAM,cAAc,CAAC;AACtB,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgFnD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Drawer.Header.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/Drawer.Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAKN,KAAK,iBAAiB,EAGtB,MAAM,cAAc,CAAC;AAQtB,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgFnD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/views/Drawer/Drawer.Iab.Disclosures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.Iab.Disclosures.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/Drawer.Iab.Disclosures.tsx"],"names":[],"mappings":"AAYA,OAAO,KAMN,MAAM,OAAO,CAAC;AA4Kf,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA4LxC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"Drawer.Iab.Disclosures.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/Drawer.Iab.Disclosures.tsx"],"names":[],"mappings":"AAYA,OAAO,KAMN,MAAM,OAAO,CAAC;AA8Kf,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA6LxC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/typescript/src/views/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAMN,MAAM,OAAO,CAAC;AAgBf,KAAK,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;AAKnD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoOxC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AA8Bf,KAAK,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;AAKnD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqOxC,CAAC"}

package/osano-cmp-sdk.podspec

@@ -21,21 +21,21 @@ Pod::Spec.new do |s|
   if respond_to?(:install_modules_dependencies, true)
     install_modules_dependencies(s)
   else
-  s.dependency "React-Core"
+    s.dependency "React-Core"
 
-  # Don't install the dependencies when we run `pod install` in the old architecture.
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-    }
-    s.dependency "React-Codegen"
-    s.dependency "RCT-Folly"
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-    s.dependency "ReactCommon/turbomodule/core"
-   end
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_TARGET_SRCROOT)/../../ios/build/generated/ios\"",
+          "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++20"
+      }
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
   end    
 end

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@osano/osano-cmp-react-native",
-	"version": "0.13.0",
+	"version": "0.15.0",
 	"description": "Package and example for the react-native Osano CMP SDK",
 	"main": "lib/commonjs/index",
 	"module": "lib/module/index",
@@ -32,6 +32,8 @@
 	"scripts": {
 		"example": "yarn workspace osano-cmp-sdk-example",
 		"test": "jest src/services/__tests__/consent.test.ts src/__tests__/index.test.tsx src/services/__tests__/google-consent-mode.test.ts src/__tests__/OsanoLogger.test.ts",
+		"test:legacy": "REACT_NATIVE_NEW_ARCH_ENABLED=false jest src/services/__tests__/consent.test.ts src/__tests__/index.test.tsx src/services/__tests__/google-consent-mode.test.ts src/__tests__/OsanoLogger.test.ts",
+		"test:newarch": "REACT_NATIVE_NEW_ARCH_ENABLED=true jest src/services/__tests__/consent.test.ts src/__tests__/index.test.tsx src/services/__tests__/google-consent-mode.test.ts src/__tests__/OsanoLogger.test.ts",
 		"test:google-consent-mode": "jest src/services/__tests__/google-consent-mode.test.ts",
 		"typecheck": "tsc --noEmit",
 		"lint": "eslint \"**/*.{js,ts,tsx}\"",
@@ -71,6 +73,7 @@
 		"@docusaurus/module-type-aliases": "3.5.2",
 		"@docusaurus/preset-classic": "3.5.2",
 		"@mdx-js/react": "^3.0.1",
+		"@react-native-community/cli": "^18.0.0",
 		"@testing-library/react-native": "^12.8.1",
 		"@types/jest": "^29.5.5",
 		"@types/react": "^18.2.44",
@@ -98,7 +101,9 @@
 	},
 	"overrides": {
 		"axios": "^1.6.4",
-		"trim": "^1.0.1"
+		"trim": "^1.0.1",
+		"inflight": "^1.0.6",
+		"glob": "^9.3.5"
 	},
 	"workspaces": [
 		"example",
@@ -107,9 +112,21 @@
 	"packageManager": "yarn@3.6.4",
 	"jest": {
 		"preset": "react-native",
+		"setupFilesAfterEnv": [
+			"<rootDir>/src/__tests__/setup.ts"
+		],
 		"modulePathIgnorePatterns": [
 			"<rootDir>/example/node_modules",
 			"<rootDir>/lib/"
+		],
+		"transformIgnorePatterns": [
+			"node_modules/(?!(react-native|@react-native|react-native-svg|@testing-library/react-native)/)"
+		],
+		"collectCoverageFrom": [
+			"src/**/*.{ts,tsx}",
+			"!src/**/__tests__/**",
+			"!src/**/*.test.{ts,tsx}",
+			"!src/**/types.ts"
 		]
 	},
 	"commitlint": {
@@ -139,10 +156,18 @@
 			]
 		]
 	},
+	"codegenConfig": {
+		"name": "RNOsanoCmpSdkSpec",
+		"type": "modules",
+		"jsSrcsDir": "src",
+		"android": {
+			"javaPackageName": "com.osano.cmp.sdk"
+		}
+	},
 	"dependencies": {
 		"js-sha512": "^0.9.0",
 		"react-native-picker-modal-view": "^1.3.2",
-		"react-native-svg": "^15.1.0",
+		"react-native-svg": "^14.1.0",
 		"text-encoding": "^0.7.0"
 	}
 }

package/src/ConsentManager.ts

@@ -672,6 +672,41 @@ export class ConsentManager {
 		if (extUsrData) {
 			this._extUsrData = extUsrData;
 		}
+		// Optimized helper function to get device locale compatible with legacy and new architectures
+		const getDeviceLocale = (platform: string): string => {
+			const fallbackLocale = 'en-US';
+			
+			try {
+				if (platform === 'android') {
+					// I18nManager (legacy architecture)
+					const i18nLocale = NativeModules.I18nManager?.localeIdentifier;
+					if (i18nLocale) return i18nLocale;
+
+					// PlatformConstants (legacy architecture)
+					const platformLocale = NativeModules.PlatformConstants?.getConstants?.()?.Localization?.locale;
+					if (platformLocale) return platformLocale;
+
+				} else if (platform === 'ios') {
+					// SettingsManager (legacy architecture)
+					const appleLanguage = NativeModules.SettingsManager?.settings?.AppleLanguages?.[0];
+					if (appleLanguage) return appleLanguage;
+					
+					const appleLocale = NativeModules.SettingsManager?.settings?.AppleLocale;
+					if (appleLocale) return appleLocale;
+				}
+
+				// Intl API (works in both architectures)
+				if (global.Intl && Intl.DateTimeFormat) {
+					const intlLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+					if (intlLocale) return intlLocale;
+				}
+			} catch (error) {
+				OsanoLogger.debug(`[ConsentManager] Locale detection failed: ${error}`);
+			}
+			
+			return fallbackLocale;
+		};
+
 		switch (Platform.OS) {
 			case 'android': {
 				try {
@@ -682,7 +717,7 @@ export class ConsentManager {
 						err instanceof Error ? err : undefined,
 					);
 				}
-				this._locale = NativeModules.I18nManager.localeIdentifier;
+				this._locale = getDeviceLocale('android');
 				break;
 			}
 			case 'ios': {
@@ -694,9 +729,7 @@ export class ConsentManager {
 						err instanceof Error ? err : undefined,
 					);
 				}
-				this._locale =
-					NativeModules.SettingsManager.settings.AppleLanguages[0] || //iOS 13
-					NativeModules.SettingsManager.settings.AppleLocale;
+				this._locale = getDeviceLocale('ios');
 				break;
 			}
 			default: {

package/src/components/Button.tsx

@@ -11,14 +11,12 @@ import {
 import { Path, Polygon, Svg } from 'react-native-svg';
 import { acceptAll, close, denyAll, goBack, showDrawer } from '../actions';
 import { saveConsent } from '../commands';
-
 import { OsanoPrivateContext } from '../context';
 import {
 	setAllPurposeConsent,
 	setAllSpecialFeatureConsent,
 	setAllVendorConsent,
 } from '../iab/tcf/actions';
-import Locale from './Locale';
 
 type ButtonProps = React.PropsWithoutRef<
 	Omit<PressableProps, 'style' | 'title'> & {
@@ -28,33 +26,50 @@ type ButtonProps = React.PropsWithoutRef<
 	}
 >;
 
-export const Button: React.FC<ButtonProps> = (props) => {
+// Base button component with React 19 compatibility
+export const BaseButton: React.FC<ButtonProps> = (props) => {
 	const { defaultPhrase, disabled, title, onPress, style: buttonStyle } = props;
-	const { config } = useContext(OsanoPrivateContext);
+	const { config, translate } = useContext(OsanoPrivateContext);
 	const { palette } = config || {};
 	const { buttonBackgroundColor, buttonForegroundColor } = palette || {};
+
 	const button: StyleProp<ViewStyle> = useMemo(
 		() => ({
 			alignItems: 'center',
+			justifyContent: 'center',
 			backgroundColor: buttonBackgroundColor,
 			borderColor: buttonForegroundColor,
 			borderWidth: 1,
 			borderRadius: 4,
-			paddingVertical: 8,
+			paddingVertical: 12,
 			paddingHorizontal: 16,
-			flexBasis: 'auto',
+			minHeight: 44,
+			flexShrink: 0,
 		}),
 		[buttonBackgroundColor, buttonForegroundColor],
 	);
+
 	const buttonText: StyleProp<TextStyle> = useMemo(
 		() => ({
 			color: buttonForegroundColor,
 			fontSize: 16,
 			fontWeight: 'bold',
+			textAlign: 'center',
 		}),
 		[buttonForegroundColor],
 	);
 
+	// Get translated text with fallback
+	const getButtonText = useCallback(() => {
+		if (title) {
+			const translated = translate(title, {}, defaultPhrase);
+			return typeof translated === 'string'
+				? translated
+				: defaultPhrase || title;
+		}
+		return defaultPhrase || 'Button';
+	}, [title, defaultPhrase, translate]);
+
 	return (
 		<Pressable
 			style={[button, buttonStyle]}
@@ -62,52 +77,12 @@ export const Button: React.FC<ButtonProps> = (props) => {
 			disabled={disabled}
 			testID={props.testID}
 		>
-			<Text style={buttonText}>
-				<Locale path={title || ''} defaultPhrase={defaultPhrase} />
-			</Text>
+			<Text style={buttonText}>{getButtonText()}</Text>
 		</Pressable>
 	);
 };
 
-export const DenyButton = (props: ButtonProps) => {
-	const { cmp, dispatch } = useContext(OsanoPrivateContext);
-	const { onPress, title, testID } = props;
-
-	const handleReject = useCallback(() => {
-		dispatch(setAllVendorConsent(false));
-		dispatch(setAllPurposeConsent(true));
-		dispatch(setAllSpecialFeatureConsent(false));
-		dispatch(denyAll());
-		cmp && dispatch(saveConsent(cmp));
-		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...props,
-		title: title || 'buttons.denyNonEssential',
-		onPress: onPress || handleReject,
-		testID: testID || 'DenyNonEssential',
-	});
-};
-
-export const AcceptButton = (props: ButtonProps) => {
-	const { cmp, dispatch } = useContext(OsanoPrivateContext);
-	const { onPress, title } = props;
-
-	const handleAcceptConsent = useCallback(() => {
-		dispatch(acceptAll());
-		cmp && dispatch(saveConsent(cmp));
-		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...props,
-		title: title || 'buttons.accept',
-		onPress: onPress || handleAcceptConsent,
-		testID: 'Accept',
-	});
-};
-
+// Icon buttons that don't need translation
 export const CloseButton = React.forwardRef(
 	(
 		props: PressableProps & {
@@ -119,7 +94,7 @@ export const CloseButton = React.forwardRef(
 		const { cmp, dispatch } = useContext(OsanoPrivateContext);
 		const handleClose = useCallback(() => {
 			dispatch(close(cmp));
-		}, []);
+		}, [cmp, dispatch]);
 		return (
 			<Pressable {...remain} ref={ref} onPress={onPress || handleClose}>
 				<Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
@@ -146,7 +121,7 @@ export const BackButton = (
 	const { dispatch } = useContext(OsanoPrivateContext);
 	const handleBack = useCallback(() => {
 		dispatch(goBack());
-	}, []);
+	}, [dispatch]);
 	return (
 		<Pressable {...remain} onPress={onPress || handleBack}>
 			<Svg height="16px" viewBox="0 0 512 512" width="16px" fill={color}>
@@ -156,53 +131,76 @@ export const BackButton = (
 	);
 };
 
-export const ManagePreferencesButton = (props: ButtonProps) => {
+// Specialized button components using proper JSX
+export const ManagePreferencesButton: React.FC<ButtonProps> = (props) => {
 	const { onPress, ...remain } = props;
 	const { config, dispatch, cmp } = useContext(OsanoPrivateContext);
+
 	const handleShowDrawer = useCallback(() => {
 		dispatch(close(cmp));
 		dispatch(showDrawer());
-	}, []);
-
-	return Button({
-		...remain,
-		onPress: onPress || handleShowDrawer,
-		title: `buttons.dialog.openDrawer.${config?.jurisdiction}`,
-		defaultPhrase: 'buttons.managePreferences',
-		testID: `Manage Preferences`,
-	});
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleShowDrawer}
+			title={`buttons.dialog.openDrawer.${config?.jurisdiction}`}
+			defaultPhrase="Manage Preferences"
+			testID="Manage Preferences"
+		/>
+	);
 };
 
-export const RejectAllButton = (props: ButtonProps) => {
-	const { config } = useContext(OsanoPrivateContext);
-	return DenyButton({
-		...props,
-		title: `buttons.dialog.denyAll.${config?.jurisdiction}`,
-		defaultPhrase: 'buttons.denyAll',
-		testID: `Reject All`,
-	});
+export const AcceptButton: React.FC<ButtonProps> = (props) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, ...remain } = props;
+
+	const handleAcceptConsent = useCallback(() => {
+		dispatch(acceptAll());
+		cmp && dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleAcceptConsent}
+			title="buttons.accept"
+			defaultPhrase="Accept"
+			testID="Accept"
+		/>
+	);
 };
 
-export const SaveButton = (props: ButtonProps) => {
+export const DenyButton: React.FC<ButtonProps> = (props) => {
 	const { cmp, dispatch } = useContext(OsanoPrivateContext);
-	const { onPress, title } = props;
+	const { onPress, ...remain } = props;
 
-	const handleSave = useCallback(() => {
+	const handleReject = useCallback(() => {
+		dispatch(setAllVendorConsent(false));
+		dispatch(setAllPurposeConsent(true));
+		dispatch(setAllSpecialFeatureConsent(false));
+		dispatch(denyAll());
 		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...props,
-		title: title || `buttons.save`,
-		onPress: onPress || handleSave,
-		testID: `Save`,
-	});
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleReject}
+			title="buttons.deny"
+			defaultPhrase="Deny"
+			testID="Deny"
+		/>
+	);
 };
 
-export const AcceptAllButton = (props: ButtonProps) => {
+export const AcceptAllButton: React.FC<ButtonProps> = (props) => {
 	const { cmp, dispatch } = useContext(OsanoPrivateContext);
 	const { onPress, ...remain } = props;
+
 	const handleAcceptAllConsent = useCallback(() => {
 		dispatch(setAllVendorConsent(true));
 		dispatch(setAllPurposeConsent(false));
@@ -210,12 +208,48 @@ export const AcceptAllButton = (props: ButtonProps) => {
 		dispatch(acceptAll());
 		cmp && dispatch(saveConsent(cmp));
 		dispatch(close(cmp));
-	}, []);
-
-	return Button({
-		...remain,
-		onPress: onPress || handleAcceptAllConsent,
-		title: `buttons.acceptAll`,
-		testID: `Accept All`,
-	});
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleAcceptAllConsent}
+			title="buttons.acceptAll"
+			defaultPhrase="Accept All"
+			testID="Accept All"
+		/>
+	);
 };
+
+export const RejectAllButton: React.FC<ButtonProps> = (props) => {
+	const { config } = useContext(OsanoPrivateContext);
+
+	return (
+		<DenyButton
+			{...props}
+			title={`buttons.dialog.denyAll.${config?.jurisdiction}`}
+			defaultPhrase="Reject All"
+			testID="Reject All"
+		/>
+	);
+};
+
+export const SaveButton: React.FC<ButtonProps> = (props) => {
+	const { cmp, dispatch } = useContext(OsanoPrivateContext);
+	const { onPress, ...remain } = props;
+
+	const handleSave = useCallback(() => {
+		cmp && dispatch(saveConsent(cmp));
+		dispatch(close(cmp));
+	}, [cmp, dispatch]);
+
+	return (
+		<BaseButton
+			{...remain}
+			onPress={onPress || handleSave}
+			title="buttons.save"
+			defaultPhrase="Save"
+			testID="Save"
+		/>
+	);
+};

package/src/components/Locale.tsx

@@ -1,5 +1,5 @@
+import React, { useContext } from 'react';
 import { OsanoPrivateContext } from '../context';
-import { useContext } from 'react';
 
 type LocaleOption = Record<string, string>;
 
@@ -21,32 +21,32 @@ export const Locale = (props: LocaleProps = { path: '' }) => {
 	} = props;
 	const { translate } = useContext(OsanoPrivateContext);
 	const translations = ([] as string[]).concat(pathOrArray);
-	return (
-		(pathOrArray &&
-			formatter(
-				translations.reduce(
-					(acc, path) =>
-						`${acc}${acc ? delimiter : ''}${
-							translate(
-								path,
-								Object.entries(options).reduce(
-									(acc, [key, value]) => {
-										acc[key] =
-											typeof value === 'string'
-												? (translate(value, options) as string)
-												: value;
-										return acc;
-									},
-									{} as Record<string, string | LocaleOption>
-								),
-								defaultPhrase
-							) as string
-						}`,
-					''
-				)
-			)) ||
-		null
-	);
+	const translatedText =
+		pathOrArray &&
+		formatter(
+			translations.reduce(
+				(acc, path) =>
+					`${acc}${acc ? delimiter : ''}${
+						translate(
+							path,
+							Object.entries(options).reduce(
+								(acc, [key, value]) => {
+									acc[key] =
+										typeof value === 'string'
+											? (translate(value, options) as string)
+											: value;
+									return acc;
+								},
+								{} as Record<string, string | LocaleOption>,
+							),
+							defaultPhrase,
+						) as string
+					}`,
+				'',
+			),
+		);
+
+	return translatedText ? <>{translatedText}</> : null;
 };
 
-export default Locale;
+export default Locale;

package/src/constants.ts

@@ -17,7 +17,7 @@ export enum ConsentCategory {
 	STORAGE = 'STORAGE',
 }
 
-const OSANO_DEV = process.env.OSANO_DEV
+const OSANO_DEV = process.env.OSANO_DEV;
 
 export const env = {
 	OSANO_ORIGIN: OSANO_DEV === 'true' ? 'https://cmp-ci.osano.com' : 'https://cmp.osano.com',
@@ -33,4 +33,4 @@ export const env = {
 	LOOKUPS_URI: OSANO_DEV === 'true'
 		? 'https://lookups-ci.api.osano.com'
 		: 'https://lookups.api.osano.com',
-};
+};

package/src/index.tsx

@@ -70,7 +70,7 @@ export const Osano: React.FunctionComponent<
 			reducer,
 			{ configId, customerId },
 			init,
-			[consentManager.current.middleware],
+			[consentManager.current.middleware.bind(consentManager.current)],
 		);
 		const { addMiddleware, dispatch, getState, removeMiddleware } = store;