@applicaster/zapp-react-dom-app 12.0.0-alpha.3977160850 → 12.0.0-alpha.4043183114

package/App/InteractionManager/index.tsx

@@ -31,14 +31,23 @@ import {
 import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";
 
 import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
-import { Platform } from "react-native";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+import {
+  isVizioPlatform,
+  isSamsungPlatform,
+  isLgPlatform,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+
+import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
 
 const { withXray } = getXray();
 const globalAny: any = global;
 
+const shouldUseOnScreenKeyboard = () =>
+  isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
+
 type Props = {
   displayState: string;
   setDisplayState: (state: string) => void;
@@ -56,7 +65,7 @@ type Props = {
   };
 };
 
-type State = { isKeyboardVisible: boolean };
+type State = { isKeyboardVisible: boolean; keyboardInput: string };
 
 type KeyCode = { code: string; keyCode: number | string };
 
@@ -76,6 +85,7 @@ export function withInteractionManager(Component: React.FC) {
     sequenceTimeout: NodeJS.Timeout | null; // timeoutID
     userSequence: number[] = [];
     confirmDialog: any;
+    isDismissing = false;
 
     constructor(props) {
       super(props);
@@ -84,6 +94,7 @@ export function withInteractionManager(Component: React.FC) {
 
       this.state = {
         isKeyboardVisible: false,
+        keyboardInput: "",
       };
 
       this.onMouseMoveListener = debounce({
@@ -116,6 +127,10 @@ export function withInteractionManager(Component: React.FC) {
       this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
       this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
       this.performExit = this.performExit.bind(this);
+      this.handleInputFocus = this.handleInputFocus.bind(this);
+      this.handleInputBlur = this.handleInputBlur.bind(this);
+      this.handleKeyboardInput = this.handleKeyboardInput.bind(this);
+      this.handleKeyboardDismiss = this.handleKeyboardDismiss.bind(this);
 
       this.confirmDialog.setConfirmAction(this.performExit);
       this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
@@ -138,6 +153,8 @@ export function withInteractionManager(Component: React.FC) {
         false
       );
 
+      document.addEventListener("focusin", this.handleInputFocus);
+
       document.addEventListener(
         "cursorStateChange",
         this.cursorVisibilityChange,
@@ -155,28 +172,31 @@ export function withInteractionManager(Component: React.FC) {
         this.cursorVisibilityChange
       );
 
-      document.removeEventListener(
-        "keyboardStateChange",
-        this.onKeyboardStateChange
-      );
+      document.removeEventListener("focusin", this.handleInputFocus);
 
       document.removeEventListener("mousedown", this.onMouseDownListener);
 
       if (this.timeout) {
         this.clearTimeout();
       }
+
+      this.isDismissing = false;
     }
 
     performExit() {
-      if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+      if (isSamsungPlatform()) {
         this.onConfirmDialogClose();
         sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
       }
 
-      if (Platform.OS === ("lg_tv" as QuickBrickPlatforms)) {
+      if (isLgPlatform()) {
         // webOS recommend to use this method when implemention a custom exit
         globalAny.close();
       }
+
+      if (isVizioPlatform()) {
+        window?.VIZIO?.exitApplication();
+      }
     }
 
     handleWebOsBack() {
@@ -205,7 +225,7 @@ export function withInteractionManager(Component: React.FC) {
     platformBack() {
       try {
         // TODO: temporary hack until this code is refactored
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+        if (isSamsungPlatform() || isVizioPlatform()) {
           const { isDialogVisible } = confirmationDialogStore.getState();
 
           if (isDialogVisible) {
@@ -218,7 +238,7 @@ export function withInteractionManager(Component: React.FC) {
               cancelCompletion: this.onConfirmDialogClose,
             });
           }
-        } else if (Platform.OS === ("lg_tv" as QuickBrickPlatforms)) {
+        } else if (isLgPlatform()) {
           this.handleWebOsBack();
         }
       } catch (e) {
@@ -441,6 +461,7 @@ export function withInteractionManager(Component: React.FC) {
 
     onKeyDown(event) {
       const { displayState, setDisplayState, navigator } = this.props;
+      const { isKeyboardVisible } = this.state;
 
       const { isDialogVisible } = confirmationDialogStore.getState();
 
@@ -451,6 +472,16 @@ export function withInteractionManager(Component: React.FC) {
         }, LONG_KEY_PRESS_TIMEOUT);
       }
 
+      if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
+        if (keyCode(event).matchesAny("Escape", "Back")) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.handleKeyboardDismiss();
+
+          return;
+        }
+      }
+
       /**
        When the player is displayed, we listen to Native Play / Pause / Stop
        buttons. Any other key press will display the transport controls
@@ -567,7 +598,7 @@ export function withInteractionManager(Component: React.FC) {
       }
 
       if (keyCode(event).matches(KEYS.Exit)) {
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+        if (isSamsungPlatform() || shouldUseOnScreenKeyboard()) {
           this.performExit();
 
           return;
@@ -592,6 +623,12 @@ export function withInteractionManager(Component: React.FC) {
           focusManager.moveFocus(direction);
         }
 
+        if (!isDialogVisible) {
+          // run focus recovery on user interaction attempt
+          // probably we failed to set initial focus for some reason
+          focusManager.recoverFocus();
+        }
+
         if (
           displayState === DISPLAY_STATES.PLAYER ||
           displayState === DISPLAY_STATES.HUD
@@ -616,11 +653,9 @@ export function withInteractionManager(Component: React.FC) {
       };
 
       if (deltaY > 0) {
-        DIRECTION.value =
-          Platform.OS === ("lg_tv" as QuickBrickPlatforms) ? "down" : "up";
+        DIRECTION.value = isLgPlatform() ? "down" : "up";
       } else if (deltaY < 0) {
-        DIRECTION.value =
-          Platform.OS === ("lg_tv" as QuickBrickPlatforms) ? "up" : "down";
+        DIRECTION.value = isLgPlatform() ? "up" : "down";
       }
 
       if (
@@ -656,10 +691,76 @@ export function withInteractionManager(Component: React.FC) {
 
     onConfirmDialogClose() {
       this.confirmDialog.hideDialog();
+
+      // restore initial focus after closing dialog
+      focusManager.setInitialFocus();
+    }
+
+    handleInputFocus = (event: FocusEvent) => {
+      if (!shouldUseOnScreenKeyboard()) return;
+      const target = event.target as HTMLElement;
+
+      if (this.isDismissing) {
+        return;
+      }
+
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+        this.setState({
+          isKeyboardVisible: true,
+          keyboardInput: (target as HTMLInputElement).value || "",
+        });
+      }
+    };
+
+    handleInputBlur(event: FocusEvent) {
+      if (!shouldUseOnScreenKeyboard()) return;
+
+      const target = event.target as HTMLElement;
+
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+        const relatedTarget = event.relatedTarget as HTMLElement;
+
+        if (
+          !relatedTarget ||
+          (relatedTarget.tagName !== "INPUT" &&
+            relatedTarget.tagName !== "TEXTAREA")
+        ) {
+          this.setState({ isKeyboardVisible: false });
+        }
+      }
+    }
+
+    handleKeyboardDismiss = () => {
+      this.isDismissing = true;
+
+      this.setState(
+        {
+          isKeyboardVisible: false,
+          keyboardInput: "",
+        },
+        () => {
+          this.isDismissing = false;
+        }
+      );
+    };
+
+    handleKeyboardInput(value: string) {
+      this.setState({ keyboardInput: value });
     }
 
     render() {
-      return <Component {...this.props} />;
+      return (
+        <>
+          <Component {...this.props} />
+          {shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
+            <OnScreenKeyboard
+              initialValue={this.state.keyboardInput}
+              onInput={this.handleKeyboardInput}
+              onDismiss={this.handleKeyboardDismiss}
+            />
+          )}
+        </>
+      );
     }
   }
 

package/App/Loader/SplashLoader.js

@@ -1,7 +1,7 @@
-// @flow
 /* global tizen */
 import * as React from "react";
 import * as R from "ramda";
+import PropTypes from "prop-types";
 
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
@@ -9,17 +9,12 @@ import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickB
 import { QuickBrickEvents } from "../../Polyfills/QuickBrickCommunicationModule";
 import { Splash } from "../Splash";
 
-type Props = {
-  appLaunched: boolean,
-  children: any,
-};
-
 const getAppLaunched = R.compose(
   R.assoc("appLaunched", R.__, {}),
   R.path(["appState", "appLaunched"])
 );
 
-class SplashHandler extends React.Component<Props> {
+class SplashHandler extends React.Component {
   constructor(props) {
     super(props);
 
@@ -76,6 +71,12 @@ class SplashHandler extends React.Component<Props> {
   }
 }
 
+SplashHandler.propTypes = {
+  appLaunched: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+SplashHandler.shouldShowSplash = true;
 SplashHandler.shouldShowSplash = true;
 
 export const SplashLoader = connectToStore(getAppLaunched)(SplashHandler);

package/App/Loader/appLoader.js

@@ -8,11 +8,7 @@ export const appLoaderImpl =
   ) =>
   async (dispatch, getState) => {
     try {
-      const {
-        plugins,
-        pluginConfigurations,
-        remoteConfigurations: { localizations },
-      } = getState();
+      const { plugins, pluginConfigurations } = getState();
 
       // Await crucial tasks
       await loadLocale();
@@ -20,7 +16,7 @@ export const appLoaderImpl =
       await loadAnalyticsPlugins(plugins, pluginConfigurations);
 
       // Remaining loaders
-      const loaders = [loadDomPlugins(plugins), setUpRTL(localizations)];
+      const loaders = [loadDomPlugins(plugins), setUpRTL()];
 
       // Await for the remaining tasks and return when they are all complete
       await Promise.all(loaders);

package/App/Loader/loadSessionStorageData.js

@@ -1,4 +1,3 @@
-// @flow
 import * as R from "ramda";
 import { NativeModules } from "react-native";
 import uuidv4 from "uuid/v4";

package/App/Loader/setUpRTL.js

@@ -1,7 +1,7 @@
-import { getIsRTLFromLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { getIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { I18nManager } from "react-native";
 
-export async function setUpRTL(localizations) {
-  const isRTL = getIsRTLFromLocalizations(localizations);
+export async function setUpRTL() {
+  const isRTL = getIsRTL();
   I18nManager.forceRTL(isRTL);
 }

package/App/Loader/utils/__tests__/getLanguageCode.test.js

@@ -26,7 +26,6 @@ describe("getLanguageCode", () => {
 
     // verify
     expect(result).toEqual(locale);
-    expect(setLanguageCodeToLocalStorage).toHaveBeenCalledWith(locale);
   });
 
   it("return value from local-storage", async () => {

package/App/Loader/utils/const.js

@@ -62,6 +62,9 @@ export const PLATFORMS = {
   iphone: "iPhone",
   android: "Android",
   mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
 };
 
 /**

package/App/Loader/utils/index.js

@@ -8,7 +8,7 @@ export const getLanguageCodeFromLocalStorage = () => {
   return NativeModules.LocalStorage.getItem(UI_LANGUAGE);
 };
 
-export const setLanguageCodeToLocalStorage = async (languageCode) => {
+export const persistLanguageSelection = async (languageCode) => {
   await NativeModules.SessionStorage.setItem(UI_LANGUAGE, languageCode);
 
   return NativeModules.LocalStorage.setItem(UI_LANGUAGE, languageCode);
@@ -61,32 +61,34 @@ export const getLanguageCodeImpl =
   (
     GetLanguageCodeFromLocalStorage,
     GetAvailableAppLanguages,
-    PickBestMatchedLanguage,
-    SetLanguageCodeToLocalStorage
+    PickBestMatchedLanguage
   ) =>
   async (locale) => {
     const languageFromLocalStorage = await GetLanguageCodeFromLocalStorage();
 
     if (languageFromLocalStorage) {
       return languageFromLocalStorage;
-    } else {
-      const availableAppLanguages = GetAvailableAppLanguages();
+    }
 
-      const pickedLanguage = PickBestMatchedLanguage(
-        locale,
-        availableAppLanguages
-      );
+    const availableAppLanguages = GetAvailableAppLanguages();
 
-      await SetLanguageCodeToLocalStorage(pickedLanguage);
+    const pickedLanguage = PickBestMatchedLanguage(
+      locale,
+      availableAppLanguages
+    );
 
-      return pickedLanguage;
-    }
+    return pickedLanguage;
   };
 
 /**
- * Supported platforms: [Samsung] TODO: LG
- * This function is adding languageLocale and countryLocale to the QuickBrickCommunicationModule
- * @return Promise
+/**
+ * Loads and sets locale-related information in the QuickBrickCommunicationModule.
+ * This function adds uiLanguage, countryLocale, languageLocale, and languageCode to the module.
+ *
+ * @param {Function} GetLocale - Function to retrieve the current locale.
+ * @param {Function} GetLanguageCode - Function to determine the language code based on available languages.
+ * @param {Object} quickBrickCommunicationModule - The module to be updated with locale information.
+ * @returns {Promise<Function>} An async function that loads and sets the locale information.
  * Warning! This function mutates QuickBrickCommunicationModule
  */
 export const loadLocaleImpl =
@@ -101,14 +103,13 @@ export const loadLocaleImpl =
       quickBrickCommunicationModule.countryLocale = R.toUpper(countryLocale);
     }
 
-    // setup languageCode
     const languageCode = await GetLanguageCode(locale);
     quickBrickCommunicationModule.languageCode = languageCode;
+    quickBrickCommunicationModule.uiLanguage = languageCode;
   };
 
 export const getLanguageCode = getLanguageCodeImpl(
   getLanguageCodeFromLocalStorage,
   getAvailableAppLanguages,
-  pickBestMatchedLanguage,
-  setLanguageCodeToLocalStorage
+  pickBestMatchedLanguage
 );

package/App/Loader/utils/platform.js

@@ -1,4 +1,3 @@
-// @flow
 /* global webOS */
 /* global tizen */
 /* eslint-disable no-console */
@@ -12,11 +11,28 @@ import {
   PLATFORMS,
 } from "./const";
 
+/**
+ * @typedef {"tv" | "web" | "other"} DeviceType
+ * @typedef {"samsung_tv" | "lg_tv" | unknown} CustomPlatformTypes
+ */
+
+/**
+ * Retrieves the user agent string from the browser or global navigator.
+ * @returns {string} The user agent string.
+ */
 export const getUserAgent = () =>
   window?.navigator?.userAgent || global?.navigator?.userAgent;
 
+/**
+ * Checks if the device is HD (1280 width).
+ * @returns {boolean} True if the device is HD, false otherwise.
+ */
 export const isHD = () => window.innerWidth === 1280;
 
+/**
+ * Checks if the platform is LG.
+ * @returns {boolean} True if the platform is LG, false otherwise.
+ */
 export const isLgPlatform = () => {
   const userAgent = getUserAgent();
 
@@ -24,10 +40,13 @@ export const isLgPlatform = () => {
     return false;
   }
 
-  // Note: LG uses the number 0 in their userAgent, possibly because of Palm WebOS
   return hasWebOS || userAgent.includes(PLATFORMS.webos);
 };
 
+/**
+ * Checks if the platform is Samsung.
+ * @returns {boolean} True if the platform is Samsung, false otherwise.
+ */
 export const isSamsungPlatform = () => {
   const userAgent = getUserAgent();
 
@@ -43,12 +62,39 @@ export const isSamsungPlatform = () => {
 };
 
 /**
- * platformSelect can't be used, because Platform.OS is overriden
- * by overloadReactNativePlatform and don't support 'web' value
- * @returns {"tv" | "web" | "other"} value
+ * Checks if the platform is Vizio by using the user agent string.
+ * @returns {boolean} True if the platform is Vizio, false otherwise.
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  return (
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure)
+  );
+};
+
+/**
+ * Checks if the Vizio APIs are available.
+ * @returns {boolean} True if the Vizio APIs are available, false otherwise.
+ */
+export const hasVizioAPIs = () => {
+  return (
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad
+  );
+};
+
+/**
+ * Determines the device type based on the platform.
+ * @returns {DeviceType} The device type ("tv", "web", or "other").
  */
 export const getDeviceType = () => {
-  switch (Platform.OS) {
+  /** @type {CustomPlatformTypes} */
+  const platformOS = Platform.OS;
+
+  switch (platformOS) {
     case "samsung_tv":
       return isSamsungPlatform() ? "tv" : "web";
     case "lg_tv":
@@ -59,14 +105,15 @@ export const getDeviceType = () => {
 };
 
 /**
- * This function is used to rename keys
- * @param {string} key - key you would like to rename
+ * Renames keys based on a predefined map.
+ * @param {string} key - The key to rename.
+ * @returns {string} The renamed key.
  */
 export const renameKeys = (key) => desiredKeysMap?.[key] || key;
 
 /**
- * This function is used to get the connection info from WebOS
- * TODO: move to connection hook
+ * Retrieves the connection info from WebOS.
+ * @returns {Promise<{networkType: string} | null>} A promise that resolves with the connection info or null.
  */
 export const getWebOSConnectionInfo = () => {
   return new Promise((resolve, reject) => {
@@ -79,7 +126,6 @@ export const getWebOSConnectionInfo = () => {
     webOS.service.request("luna://com.palm.connectionmanager", {
       method: "getStatus",
       parameters: { subscribe: false },
-
       onSuccess: (args) => {
         const types = Object.keys(args)
           .filter((key) => args[key].state === "connected")
@@ -87,7 +133,6 @@ export const getWebOSConnectionInfo = () => {
 
         resolve({ networkType: types });
       },
-
       onFailure: (error) => {
         console.error(
           "getWebOSConnectionInfo: There was an error getting connection info",
@@ -100,6 +145,10 @@ export const getWebOSConnectionInfo = () => {
   });
 };
 
+/**
+ * Retrieves the connection info from Tizen.
+ * @returns {Promise<{networkType: string} | null>} A promise that resolves with the connection info or null.
+ */
 export const getTizenConnectionInfo = () => {
   return new Promise((resolve, reject) => {
     if (!isSamsungPlatform) {
@@ -253,6 +302,24 @@ export const getDeviceData = async () => {
         ...tizenConnectionInfo,
         device_type: getDeviceType(),
       };
+    } else if (isVizioPlatform()) {
+      deviceData = {
+        ...deviceData,
+        platform: "vizio",
+        deviceMake: "Vizio",
+        deviceType: "tv",
+        userAgent: getUserAgent(),
+        deviceWidth: window.innerWidth,
+        deviceHeight: window.innerHeight,
+      };
+
+      if (hasVizioAPIs()) {
+        window.VIZIO.getFirmwareVersion(function (firmwareVersion) {
+          deviceData.osVersion = firmwareVersion;
+        });
+
+        deviceData.deviceModel = window.VIZIO.deviceModel;
+      }
     }
 
     return deviceData;

package/App/Router/index.js

@@ -1,18 +1,17 @@
-// @flow
-
 import React from "react";
+import PropTypes from "prop-types";
 
 import { Router } from "react-router";
 import { createMemoryHistory } from "history";
 
-type Props = {
-  children: any,
-};
-
 const history = createMemoryHistory();
 
-export const ZappDomRouter = ({ children, ...otherProps }: Props) => (
+export const ZappDomRouter = ({ children, ...otherProps }) => (
   <Router history={history} {...otherProps}>
     {children}
   </Router>
 );
+
+ZappDomRouter.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/App/Splash/Spinner.js

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 
 import "./spinner-styles.css";

package/App/Splash/Splash.js

@@ -1,13 +1,10 @@
-// @flow
 import React from "react";
 
-import { verifyAssets } from "@applicaster/zapp-react-dom-ui-components/Helpers/protectHelper";
+import PropTypes from "prop-types";
 
-type Props = {
-  remoteConfigurations: any,
-};
+import { verifyAssets } from "@applicaster/zapp-react-dom-ui-components/Helpers/protectHelper";
 
-export const SplashComponent = ({ remoteConfigurations }: Props) => {
+export const SplashComponent = ({ remoteConfigurations }) => {
   const image = verifyAssets(remoteConfigurations.assets, [
     "universal",
     "splash",
@@ -19,3 +16,9 @@ export const SplashComponent = ({ remoteConfigurations }: Props) => {
     </div>
   );
 };
+
+SplashComponent.propTypes = {
+  remoteConfigurations: PropTypes.shape({
+    assets: PropTypes.object.isRequired,
+  }).isRequired,
+};

package/Polyfills/AnalyticsBridge/index.ts

@@ -105,7 +105,11 @@ function isInvalidAnalyticsData(eventName, payload = null) {
 
 export const AnalyticsBridge = (function () {
   let registeredAnalyticPlugins: {
-    module: { sendEvent: Function; initialize?: Function };
+    module: {
+      sendEvent: Function;
+      initialize?: Function;
+      getPlayerConfiguration?: Function;
+    };
     configuration?: any;
   }[] = [];
 

package/Polyfills/AppLoaderBridge/utils/enums.ts

@@ -8,4 +8,5 @@ export enum STORAGE {
 export enum STORE_PLATFORM {
   lg = "lg_content_store",
   samsung = "samsung_app_store",
+  vizio = "vizio_app_store",
 }

package/Polyfills/QuickBrickCommunicationModule/__tests__/index.test.js

@@ -0,0 +1,225 @@
+const mockPersistLanguageSelection = jest.fn();
+
+jest.mock("../../../App/Loader/utils", () => ({
+  persistLanguageSelection: mockPersistLanguageSelection,
+}));
+
+const mockGetAppData = jest.fn();
+
+jest.mock("../../AppData", () => ({
+  getAppData: mockGetAppData,
+}));
+
+jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
+  QUICK_BRICK_EVENTS: {
+    QUICK_BRICK_READY: "QUICK_BRICK_READY",
+    FORCE_APP_RELOAD: "FORCE_APP_RELOAD",
+  },
+}));
+
+const mocked_storage = {
+  "applicaster.v2_::_uiLanguage": "en-UK",
+};
+
+global.window.location = {
+  reload: jest.fn(),
+};
+
+global.window.localStorage = {
+  getItem: jest.fn((key) => mocked_storage[key] || null),
+  setItem: jest.fn((key, value) => {
+    mocked_storage[key] = value;
+  }),
+  removeItem: jest.fn((key) => {
+    delete mocked_storage[key];
+  }),
+  clear: jest.fn(),
+  length: 1,
+  key: jest.fn(),
+};
+
+const BASE_MOCK_APP_DATA = {
+  accountsAccountId: "abcid123",
+  appFamilyId: 1710,
+  appName: "App.TV",
+  buildVersion: 247,
+  bundleIdentifier: "com.bundleIdentifier",
+  deviceTarget: "samsung_tv",
+  languages: ["en", "en-US", "fr", "fr-FR"],
+  locale: "en",
+  quickBrickVersion: "11.1.13",
+  quickBrickEvent: () => {},
+  setAppLanguage: () => {},
+  initialProps: {},
+  riversConfigurationId: "riverid123",
+  sdkVersion: "1.0.0",
+  store: "samsung",
+  urlSchemePrefix: "app-tv",
+  versionId: "version1233",
+  versionName: "1.0.8",
+  bver: "1.0.8",
+  os_type: "web",
+  platform: "samsung_tv",
+};
+
+const getMockAppData = (overrides = {}) => ({
+  ...BASE_MOCK_APP_DATA,
+  ...overrides,
+});
+
+describe("QuickBrickCommunicationModule Polyfill", () => {
+  let originalWindow;
+  let QuickBrickModule;
+  let mockAppData;
+
+  beforeEach(() => {
+    jest.resetModules();
+    originalWindow = global.window;
+
+    // Get fresh mockAppData for each test
+    mockAppData = getMockAppData();
+    mockGetAppData.mockReturnValue(mockAppData);
+
+    window.localStorage.getItem.mockClear();
+    window.localStorage.setItem.mockClear();
+    window.localStorage.removeItem.mockClear();
+    window.localStorage.clear.mockClear();
+
+    QuickBrickModule = require("../index");
+  });
+
+  afterEach(() => {
+    global.window = originalWindow;
+    jest.clearAllMocks();
+  });
+
+  describe("getMatchingLanguageFromBuildData", () => {
+    it("should return default locale (en) if there are no languages listed in build time parameters", () => {
+      window.localStorage.getItem.mockReturnValue(undefined);
+      global.window.navigator.language = "ru-RU";
+      mockGetAppData.mockReturnValue(getMockAppData({ languages: null }));
+
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(result).toEqual({
+        uiLanguage: "en",
+        languageCode: "en",
+        countryLocale: "",
+        languageLocale: "en",
+      });
+    });
+
+    it("should fallback to default language if browser / device locale (en-UK) does not match list of supported languages", () => {
+      // localizations: ["en", "en-US", "fr", "fr-FR"], device_language: en, device_region: UK -> ui: en, language: en, region: UK
+
+      global.window.navigator.language = "en-UK";
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(result).toEqual({
+        uiLanguage: "en",
+        languageCode: "en",
+        countryLocale: "",
+        languageLocale: "en",
+      });
+    });
+
+    it("should use browser / device locale (en-US) when it matches one of the supported languages", () => {
+      // localizations: ["en", "en-US", "fr", "fr-FR"], device_language: en, device_region: US -> ui: en-US, language: en, region: US
+
+      global.window.navigator.language = "en-US";
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(result).toEqual({
+        uiLanguage: "en-US",
+        languageCode: "en",
+        countryLocale: "US",
+        languageLocale: "en-US",
+      });
+    });
+
+    it("should fallback to default language if browser / device locale (ru-RU) does not match list of supported languages", () => {
+      // localizations: ["en", "en-US", "fr", "fr-FR"], device_language: ru, device_region: RU -> ui: en, language: en, region: ""
+      global.window.navigator.language = "ru-RU";
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(result).toEqual({
+        uiLanguage: "en",
+        languageCode: "en",
+        countryLocale: "",
+        languageLocale: "en",
+      });
+    });
+
+    it("should use browser / device locale (fr-FR) when it matches one of the supported language", () => {
+      // localizations: ["en", "en-US", "fr", "fr-FR"], device_language: fr, device_region: FR -> ui: fr, language: fr, region: FR
+      global.window.navigator.language = "fr-FR";
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(result).toEqual({
+        uiLanguage: "fr-FR",
+        languageCode: "fr",
+        countryLocale: "FR",
+        languageLocale: "fr-FR",
+      });
+    });
+
+    it("should use user-selected language (en-US) if it was persisted in local storage", () => {
+      window.localStorage.getItem.mockReturnValue("en-US");
+
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(window.localStorage.getItem).toHaveBeenCalled();
+
+      expect(result).toEqual({
+        uiLanguage: "en-US",
+        languageCode: "en",
+        countryLocale: "US",
+        languageLocale: "en-US",
+      });
+    });
+
+    it("should use locale (fr-FR) from browser / device if no user selection is found in storage", () => {
+      window.localStorage.getItem.mockReturnValue(undefined);
+      global.window.navigator.language = "fr-FR";
+      const result = QuickBrickModule.getMatchingLanguageFromBuildData();
+
+      expect(result).toEqual({
+        uiLanguage: "fr-FR",
+        languageCode: "fr",
+        countryLocale: "FR",
+        languageLocale: "fr-FR",
+      });
+    });
+  });
+
+  describe("setAppLanguage", () => {
+    it("should persist language selection and reload the page", async () => {
+      await QuickBrickModule.setAppLanguage("fr-FR");
+
+      expect(mockPersistLanguageSelection).toHaveBeenCalledWith("fr-FR");
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  describe("QuickBrickCommunicationModule", () => {
+    it("should initialize with the required app data", () => {
+      expect(QuickBrickModule.QuickBrickCommunicationModule).toMatchObject({
+        ...mockAppData,
+        platform: mockAppData.deviceTarget,
+        setAppLanguage: expect.any(Function),
+      });
+    });
+
+    it("should include locale data after calling getMatchingLanguageBuildData", () => {
+      const localeData = QuickBrickModule.getMatchingLanguageFromBuildData();
+      const result = { ...mockAppData, ...localeData };
+
+      Object.entries(result).forEach(([key, value]) => {
+        expect(QuickBrickModule.QuickBrickCommunicationModule).toHaveProperty(
+          key,
+          typeof value === "function" ? expect.any(Function) : value
+        );
+      });
+    });
+  });
+});

package/Polyfills/QuickBrickCommunicationModule/index.js

@@ -1,8 +1,15 @@
 import * as R from "ramda";
 
-import * as AppDataPolyfill from "../AppData";
-import { setLanguageCodeToLocalStorage } from "../../App/Loader/utils";
+import { persistLanguageSelection } from "../../App/Loader/utils";
+
+import { getAppData } from "../AppData";
 import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const { log_error, log_debug, log_warning } = createLogger({
+  category: "QuickBrickCommunicationModule",
+  subsystem: "zapp-react-dom-app",
+});
 
 const QuickBrickEventEmitter = {};
 
@@ -63,98 +70,154 @@ try {
   console.warn("cannot assign QuickBrickEvents to window", e.message);
 }
 
-function quickBrickEvent(eventName, payload) {
+export function quickBrickEvent(eventName, payload) {
   QuickBrickEventEmitter.sendEvent(eventName, payload);
 }
 
 const initialProps = {}; // required for legacy plugins;
 
-function getBrowserLocale() {
+/**
+ * Retrieves the browser locale, which represents the device locale for SmartTVs.
+ *
+ * @returns {string|undefined} The browser locale string (e.g., "en-US") or undefined if an error occurs.
+ *
+ * TODO: We can later get more accurate locale data with device APIs, if needed
+ */
+export function getBrowserLocale() {
   try {
     return window.navigator.language;
   } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error("Could not determine browser locale", e);
+    log_error("Could not determine locale", e);
   }
 }
 
-function formatLocale(locale) {
-  return locale?.toLowerCase()?.split("-");
-}
-
-const browserLocale = getBrowserLocale();
-const [languageCode, countryLocale] = formatLocale(browserLocale) || ["", ""];
-
-const setAppLanguage = async (languageCode) => {
-  await setLanguageCodeToLocalStorage(languageCode);
+/**
+ * Updates the UI language, persists the selection, and reloads the application.
+ * This method is used by the QuickBrick Language Selector to change the app's language.
+ *
+ * @param {string} uiLanguage - en-UK, en-US, etc.
+ * @returns {Promise<void>}
+ *
+ * Usage: plugins/quick-brick-language-selector/src/utils/index.ts
+ */
+export const setAppLanguage = async (uiLanguage) => {
+  await persistLanguageSelection(uiLanguage);
 
-  // reload web page
   window.location.reload();
 };
 
-const buildTimeData = AppDataPolyfill.getAppData();
-
-// TODO - move to a better place
-const getMatchingLanguageFromBuildData = () => {
+const buildTimeData = getAppData();
+
+/**
+ * This method retrieves the all of the language data we need from the build data, and the browser locale.
+ * @returns localeData
+ * @returns localeData.uiLanguage - The language code to use for the app.
+ * @returns localeData.countryLocale - The country locale code.
+ * @returns localeData.languageLocale - The language locale code.
+ * @returns localeData.languageCode - The language code.
+ */
+export const getMatchingLanguageFromBuildData = () => {
+  // Locale is a build time value we get from Zapp, so we can use it as a fallback
   const { locale, languages } = buildTimeData || {};
+  const browserLocale = getBrowserLocale();
+
+  if (!Array.isArray(languages)) {
+    log_error("Missing required 'languages' from the build time data.", {
+      buildTimeData,
+    });
+
+    return {
+      uiLanguage: locale,
+      languageCode: locale,
+      countryLocale: "",
+      languageLocale: locale,
+    };
+  }
 
-  // TODO: refactor: tryAndResolve used in Storage is promise
   const userSelectedLanguage = window.localStorage.getItem(
     "applicaster.v2_::_uiLanguage"
   );
 
-  if (!locale && !Array.isArray(languages)) {
-    // eslint-disable-next-line no-console
-    console.error("Missing required 'locale' and 'language' build time data.");
-
-    // Default language
-    return locale;
-  }
-
   if (userSelectedLanguage) {
-    if (languages.includes(userSelectedLanguage)) {
-      return userSelectedLanguage;
+    if (languages.find((lang) => lang === userSelectedLanguage)) {
+      const [languageCode, countryLocale] = userSelectedLanguage.split("-");
+
+      return {
+        uiLanguage: userSelectedLanguage,
+        languageCode,
+        countryLocale: countryLocale || "",
+        languageLocale: userSelectedLanguage,
+      };
     }
 
-    // eslint-disable-next-line no-console
-    console.log(
-      "User selected language is not present in available localizations, performing autoselect"
+    log_debug(
+      "User selected language is not present in available localizations, selecting language using browser or device locale",
+
+      { userSelectedLanguage, languages }
     );
   }
 
   if (!browserLocale) {
-    // eslint-disable-next-line no-console
-    console.error("Could not determine browser locale.");
+    log_warning(
+      "Could not use browser or device locale to determine language, falling back to default locale",
+      { browserLocale, locale }
+    );
 
-    return locale;
+    return {
+      uiLanguage: locale,
+      languageCode: locale,
+      countryLocale: "",
+      languageLocale: locale,
+    };
   }
 
-  // Match locale "en-UK"
-  const localeMatch = languages.find((lang) => lang === browserLocale);
+  // Exact match
+  const [browserLanguageCode, browserCountryLocale] = browserLocale.split("-");
+  const browserLocaleMatch = languages.find((lang) => lang === browserLocale);
 
-  if (localeMatch) {
-    return localeMatch;
+  if (browserLocaleMatch) {
+    return {
+      uiLanguage: browserLocaleMatch,
+      languageCode: browserLanguageCode,
+      countryLocale: browserCountryLocale || "",
+      languageLocale: browserLocaleMatch,
+    };
   }
 
-  // Match language "en"
-  const languageMatch = languages.find((lang) => lang === languageCode);
+  // If there is no user-selected language, or the user-selected language is not found in the list of supported languages,
+  // and the browser locale is also not found in the list of supported languages,
+  // then fallback to the default language from the list of supported languages, while preserving the country locale from the browser.
+  const defaultLanguage = languages[0];
 
-  if (languageMatch) {
-    return languageMatch;
-  }
+  if (defaultLanguage) {
+    const [languageCode, countryLocale] = defaultLanguage.split("-");
 
-  // Default language
-  return locale;
+    const defaultLocale = {
+      uiLanguage: defaultLanguage,
+      languageCode,
+      countryLocale: countryLocale || "",
+      languageLocale: defaultLanguage,
+    };
+
+    log_debug(
+      "Locale not found in the list of supported languages, falling back to the default language locale",
+      { defaultLocale, browserLocale, languages }
+    );
+
+    return defaultLocale;
+  }
 };
 
+const localeData = getMatchingLanguageFromBuildData();
+
+/**
+ * QuickBrickCommunicationModule object is a Polyfill that mimicks how we interface with the Native platforms
+ */
 export const QuickBrickCommunicationModule = {
   quickBrickEvent,
   initialProps,
   ...buildTimeData,
+  ...localeData,
   platform: buildTimeData.deviceTarget,
-  languageLocale: languageCode,
-  countryLocale,
   setAppLanguage,
-  countryCode: countryLocale,
-  uiLanguage: getMatchingLanguageFromBuildData(),
 };

package/Polyfills/Storage/index.js

@@ -1,4 +1,3 @@
-// @flow
 import * as R from "ramda";
 
 import {
@@ -7,11 +6,11 @@ import {
 } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { mapKeys } from "@applicaster/zapp-react-native-utils/objectUtils";
 
-export type StorageI = {
-  setItem: (string, string, ?string) => Promise<any>,
-  getItem: (string, ?string) => Promise<any>,
-  getAllItems: () => Promise<any>,
-};
+// export type StorageI = {
+//   setItem: (string, string, ?string) => Promise<any>,
+//   getItem: (string, ?string) => Promise<any>,
+//   getAllItems: () => Promise<any>,
+// };
 
 export const STORAGE_TYPES = ["localStorage", "sessionStorage"];
 
@@ -25,10 +24,7 @@ const NAMESPACE_SEPARATOR = "_::_";
  * @param {?String} namespace
  * @returns {String}
  */
-export function applyNamespaceToKeyName(
-  key: string,
-  namespace: ?string
-): string {
+export function applyNamespaceToKeyName(key, namespace) {
   return namespace ? `${namespace}${NAMESPACE_SEPARATOR}${key}` : key;
 }
 
@@ -40,7 +36,7 @@ export function applyNamespaceToKeyName(
  * @param {Function} fn function to run
  * @returns {Promise}
  */
-function tryAndResolve(fn: (any) => any): Promise<any> {
+function tryAndResolve(fn) {
   try {
     return R.compose(
       (value) => Promise.resolve(value),
@@ -62,7 +58,7 @@ function tryAndResolve(fn: (any) => any): Promise<any> {
  * @returns {Function} storageObject.callMethod: invokes methods on the storage object
  * @returns {Function} storageObject.getKeys: returns all existing keys in the storage object
  */
-function getStorageObject(type: string): (any) => void | Promise<any> {
+function getStorageObject(type) {
   const storage = R.prop(type, window);
 
   if (!R.includes(type, STORAGE_TYPES) || !storage) {
@@ -80,7 +76,7 @@ function getStorageObject(type: string): (any) => void | Promise<any> {
    * @param {Array} args array of arguments to use when invoking the method
    * @returns response of the method call
    */
-  function callMethod(method: string, ...args: [any]): Promise<any> {
+  function callMethod(method, ...args) {
     return storage[method](...args);
   }
 
@@ -107,9 +103,9 @@ function getStorageObject(type: string): (any) => void | Promise<any> {
 /**
  * returns an object to interact with a storage module (localStorage or sessionStorage)
  * @param {String} type of storage
- * @returns {Object}
+ * @returns {StorageI}
  */
-export function getStorageModule(type: string): StorageI {
+export function getStorageModule(type) {
   const Storage = getStorageObject(type);
 
   /**
@@ -120,11 +116,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Boolean|Error>}
    */
-  function setItem(
-    key: string,
-    value: string,
-    namespace: ?string = DEFAULT_NAMESPACE
-  ): Promise<boolean | Error> {
+  function setItem(key, value, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(
       key,
       namespace || DEFAULT_NAMESPACE
@@ -144,10 +136,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Any|Error>}
    */
-  function getItem(
-    key: string,
-    namespace: ?string = DEFAULT_NAMESPACE
-  ): Promise<any> {
+  function getItem(key, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(
       key,
       namespace || DEFAULT_NAMESPACE
@@ -163,7 +152,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Boolean|Error>}
    */
-  function removeItem(key: string, namespace = DEFAULT_NAMESPACE) {
+  function removeItem(key, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(key, namespace);
 
     return tryAndResolve(() => Storage.callMethod("removeItem", keyName));
@@ -174,7 +163,7 @@ export function getStorageModule(type: string): StorageI {
    * @param {?String} namespace
    * @returns {Promise<Object|Error>}
    */
-  function getAllItems(namespace: ?string = null): Promise<string> {
+  function getAllItems(namespace = null) {
     return tryAndResolve(() => {
       const keys = Storage.getKeys();
 

package/main.css

@@ -10,8 +10,8 @@ body {
 }
 
 div#zapp_app_container {
-  height: 100%;
-  width: 100%;
+  height: 1080px;
+  width: 1920px;
   display: flex;
   flex: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.0-alpha.3977160850",
+  "version": "12.0.0-alpha.4043183114",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.3977160850",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3977160850",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3977160850",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3977160850",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3977160850",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.4043183114",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4043183114",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4043183114",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4043183114",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4043183114",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",

package/App/Loader/utils/__tests__/getAvailableAppLanguages.test.js

@@ -1,35 +0,0 @@
-import { getAvailableAppLanguagesImpl as getAvailableAppLanguages } from "..";
-
-describe("getAvailableAppLanguages", () => {
-  it("return list of languages", () => {
-    // setup
-    const appStore = {
-      get: () => ({
-        localizations: {
-          en: "en_value",
-          de: "de_value",
-          fr: "fr_value",
-          "en-UK": "en-UK_value",
-          "en-GB": "en-GB_value",
-        },
-      }),
-    };
-
-    // verify
-    expect(getAvailableAppLanguages(appStore)).toEqual([
-      "en",
-      "de",
-      "fr",
-      "en-UK",
-      "en-GB",
-    ]);
-  });
-
-  it("return list of languages", () => {
-    // setup
-    const appStore = undefined;
-
-    // verify
-    expect(getAvailableAppLanguages(appStore)).toEqual([]);
-  });
-});