@applicaster/zapp-react-dom-app 14.0.0-rc.8 → 14.0.0-rc.80

package/App/InteractionManager/hoc/__tests__/withBacktoTopActionHOC.test.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { withBackToTopActionHOC } from "../withBackToTopAction";
+
+// Mock focusManager and hook
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  focusManager: {
+    isFocusOnMenu: jest.fn(),
+    isFocusOnContent: jest.fn(),
+    isTabsScreenContentFocused: jest.fn(),
+  },
+}));
+
+jest.mock("../hooks", () => ({
+  useCurrentScreenIsHome: jest.fn(),
+  useCurrentScreenIsRoot: jest.fn(),
+  useCurrentScreenIsTabs: jest.fn(),
+}));
+
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import {
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "../hooks";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useNavigation: jest.fn(),
+}));
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+describe("withBackToTopActionHOC", () => {
+  let receivedProps: any;
+
+  const BaseComponent = (props) => {
+    receivedProps = props; // capture injected props
+
+    return <></>;
+  };
+
+  const Wrapped = withBackToTopActionHOC(BaseComponent);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns PLATFORM_BACK when on root screen, and startup hooks", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: ["some_startup_hook"],
+    });
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
+  });
+
+  it("returns PLATFORM_BACK when on root screen, focus on menu, and is home", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: [],
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
+  });
+
+  it("returns GO_HOME when on root screen, focus on menu, and not home", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: [],
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toBe("GO_HOME");
+  });
+
+  it("returns FOCUS_ON_SELECTED_TOP_MENU_ITEM when on root screen and focus on content without tabs_screen", () => {
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: [],
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toBe(
+      "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
+    );
+  });
+
+  it("returns FOCUS_ON_SELECTED_TAB_ITEM when on root screen and focus on content with tabs_screen", () => {
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(true);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: [],
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
+
+    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
+      true
+    );
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toBe("FOCUS_ON_SELECTED_TAB_ITEM");
+  });
+
+  it("returns GO_BACK in default case", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: [],
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
+      false
+    );
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toBe("GO_BACK");
+  });
+
+  it("returns FORCE_GO_BACK in hook case", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      startUpHooks: [],
+      currentRoute: "/hooks/some_route",
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    (focusManager.isTabsScreenContentFocused as jest.Mock).mockReturnValue(
+      false
+    );
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toBe("FORCE_GO_BACK");
+  });
+});

package/App/InteractionManager/hoc/hooks/index.ts

@@ -0,0 +1,34 @@
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useHomeRiver,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
+
+export const useCurrentScreenIsHome = (): boolean => {
+  const navigator = useNavigation();
+  const homeRiver = useHomeRiver();
+
+  const homePath = `/river/${homeRiver.id}`;
+
+  return homePath === navigator.currentRoute;
+};
+
+export const useCurrentScreenIsRoot = (): boolean => {
+  const { mainStack = [] } = useNavigation();
+
+  // root screen is the bottom(first pushed, deepest) element of the stack
+  return mainStack.length <= 1;
+};
+
+export const useCurrentScreenIsTabs = (): boolean => {
+  const navigator = useNavigation();
+
+  const riverId = last(navigator.currentRoute.split("/"));
+
+  const rivers = useRivers();
+
+  const river = rivers[riverId];
+
+  return river?.type === "tabs_screen";
+};

package/App/InteractionManager/hoc/index.ts

@@ -0,0 +1,4 @@
+export {
+  withBackToTopActionHOC,
+  type BackToTopAction,
+} from "./withBackToTopAction";

package/App/InteractionManager/hoc/withBackToTopAction.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
+
+import {
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "./hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export type BACK_TO_TOP_ACTION =
+  | "PLATFORM_BACK"
+  | "GO_HOME"
+  | "GO_BACK"
+  | "FOCUS_ON_SELECTED_TOP_MENU_ITEM"
+  | "FORCE_GO_BACK"
+  | "FOCUS_ON_SELECTED_TAB_ITEM";
+
+export type BackToTopAction = () => BACK_TO_TOP_ACTION;
+
+export function withBackToTopActionHOC(Component) {
+  return function WrappedComponent(props) {
+    const isHome = useCurrentScreenIsHome();
+    const isRoot = useCurrentScreenIsRoot();
+    const isTabsScreen = useCurrentScreenIsTabs();
+
+    const navigator = useNavigation();
+
+    const isStartUpHook = isFilledArray(navigator.startUpHooks);
+
+    const isHook = navigator.currentRoute?.includes("hook");
+
+    const emitFocusOnSelectedTab = useSubscriberFor(
+      QBUIComponentEvents.focusOnSelectedTab
+    );
+
+    const emitFocusOnSelectedTopMenuItem = useSubscriberFor(
+      QBUIComponentEvents.focusOnSelectedTopMenuItem
+    );
+
+    const backToTopAction = React.useCallback((): BACK_TO_TOP_ACTION => {
+      if (isRoot && isStartUpHook) {
+        return "PLATFORM_BACK";
+      }
+
+      if (isRoot && focusManager.isFocusOnMenu() && isHome) {
+        return "PLATFORM_BACK";
+      }
+
+      if (isRoot && focusManager.isFocusOnMenu() && !isHome) {
+        return "GO_HOME";
+      }
+
+      if (isRoot && isTabsScreen && focusManager.isTabsScreenContentFocused()) {
+        return "FOCUS_ON_SELECTED_TAB_ITEM";
+      }
+
+      if (isRoot && focusManager.isFocusOnContent()) {
+        return "FOCUS_ON_SELECTED_TOP_MENU_ITEM";
+      }
+
+      if (isHook) {
+        return "FORCE_GO_BACK";
+      }
+
+      // default
+      return "GO_BACK";
+    }, [isHome, isRoot, isTabsScreen, isStartUpHook, isHook]);
+
+    return (
+      <Component
+        {...props}
+        backToTopAction={backToTopAction}
+        emitFocusOnSelectedTab={emitFocusOnSelectedTab}
+        emitFocusOnSelectedTopMenuItem={emitFocusOnSelectedTopMenuItem}
+      />
+    );
+  };
+}

package/App/InteractionManager/index.tsx

@@ -1,19 +1,22 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import {
   QUICK_BRICK_EVENTS,
   sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import {
   debounce,
   noop,
 } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
+  AccessibilityManager,
   ARROW_KEYS,
   focusManager,
   keyCode,
@@ -50,17 +53,20 @@ import {
 import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
 import { KeyboardLongPressManager } from "@applicaster/zapp-react-dom-ui-components/Utils/KeyboardLongPressManager";
 import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
+import { getHomeRiver } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { withBackToTopActionHOC, BackToTopAction } from "./hoc";
 
 const { withXray } = getXray();
 const globalAny: any = global;
 
-const { log_debug, log_warning } = createLogger({
+const { log_debug, log_warning, log_info } = createLogger({
   category: "InteractionManager",
   subsystem: "zapp-react-dom-app",
 });
 
 const shouldUseOnScreenKeyboard = () =>
-  isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
+  isVizioPlatform() ||
+  toBooleanWithDefaultFalse(window?.applicaster?.useOnScreenKeyboard);
 
 type Props = {
   displayState: string;
@@ -70,6 +76,9 @@ type Props = {
   rivers: {};
   xray: XRayContext;
   confirmDialog: typeof confirmationDialogStore;
+  backToTopAction: BackToTopAction;
+  emitFocusOnSelectedTopMenuItem: Callback;
+  emitFocusOnSelectedTab: Callback;
 };
 
 interface State {
@@ -80,8 +89,8 @@ interface State {
 
 type KeyCode = { code: string; keyCode: number | string };
 
-export const alertConfirmationMesage =
-  "Are you sure you want to exit application?";
+const VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE =
+  "Video player controls - use left/right to navigate";
 
 class InteractionManagerClass extends React.Component<Props, State> {
   onKeyDownListener: (keyCode: KeyCode) => void;
@@ -98,6 +107,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
   private confirmDialog: ConfirmationDialogState =
     confirmationDialogStore.getState();
 
+  accessibilityManager: AccessibilityManager;
+
   state: State = {
     isKeyboardVisible: false,
     keyboardInput: "",
@@ -139,14 +150,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.handleInputBlur = this.handleInputBlur.bind(this);
     this.handleKeyboardInput = this.handleKeyboardInput.bind(this);
     this.handleKeyboardDismiss = this.handleKeyboardDismiss.bind(this);
-    this.onKeyDownListener = this.onKeyDown.bind(this);
-    this.onKeyUp = this.onKeyUp.bind(this);
     this.onMouseMoveListener = this.onMouseMove.bind(this);
     this.onScrollListener = this.onScroll.bind(this);
     this.onMouseDownListener = this.onMouseDown.bind(this);
-    this.onKeyboardStateChange = this.onKeyboardStateChange.bind(this);
-    this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
-    this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
 
     this.handlePhysicalKeyboardDismiss =
       this.handlePhysicalKeyboardDismiss.bind(this);
@@ -154,6 +160,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   componentDidMount() {
@@ -259,7 +266,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
        */
       showConfirmationDialog({
         title: "",
-        message: alertConfirmationMesage,
         confirmCompletion: this.performExit,
       });
     }
@@ -282,7 +288,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
         } else {
           showConfirmationDialog({
             title: "",
-            message: alertConfirmationMesage,
             confirmCompletion: this.performExit,
             cancelCompletion: this.onConfirmDialogClose,
           });
@@ -318,13 +323,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
     const { navigator } = this.props;
     const { rivers } = this.props;
 
-    const homeId = R.compose(
-      R.prop("id"),
-      R.find(R.prop("home")),
-      R.values
-    )(rivers);
+    const homeRiver = getHomeRiver(rivers);
 
-    const homePath = `/river/${homeId}`;
+    const homePath = `/river/${homeRiver?.id}`;
 
     return homePath === navigator.currentRoute;
   }
@@ -332,7 +333,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   goToHome() {
     const { navigator } = this.props;
     const { rivers } = this.props;
-    const homeRiver = R.find(R.propEq("home", true), R.values(rivers));
+    const homeRiver = getHomeRiver(rivers);
 
     navigator.replace(homeRiver);
   }
@@ -393,7 +394,15 @@ class InteractionManagerClass extends React.Component<Props, State> {
      note: backspace affects the keyboard input, so it behaves differently
      */
   onBackPress(event) {
-    const { displayState, setDisplayState, navigator } = this.props;
+    const {
+      displayState,
+      setDisplayState,
+      navigator,
+      backToTopAction,
+      emitFocusOnSelectedTopMenuItem,
+      emitFocusOnSelectedTab,
+    } = this.props;
+
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
@@ -412,8 +421,56 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
+    const action = backToTopAction();
+
     switch (displayState) {
       case DISPLAY_STATES.DEFAULT:
+        if (action === "PLATFORM_BACK") {
+          log_info(action);
+
+          this.platformBack();
+        }
+
+        if (action === "GO_HOME") {
+          log_info(action);
+
+          this.goToHome();
+        }
+
+        if (action === "FOCUS_ON_SELECTED_TOP_MENU_ITEM") {
+          log_info(action);
+
+          // we don't have enough context at this point to set focus properly on selected top-menu-item, just emit event about it.
+          // TopMenu component is supposed to handle this event.
+          emitFocusOnSelectedTopMenuItem();
+        }
+
+        if (action === "FOCUS_ON_SELECTED_TAB_ITEM") {
+          log_info(action);
+
+          // we don't have enough context at this point to set focus properly on selected tab-menu-item, just emit event about it
+          // Tabs component is supposed to handle this event.
+          emitFocusOnSelectedTab();
+        }
+
+        if (action === "GO_BACK") {
+          log_info(action);
+
+          if (navigator.canGoBack()) {
+            navigator.goBack();
+          }
+        }
+
+        if (action === "FORCE_GO_BACK") {
+          log_info(action);
+
+          const fallbackToHome = false;
+          const fromHook = true;
+
+          navigator.goBack(fallbackToHome, fromHook);
+        }
+
+        break;
       case DISPLAY_STATES.PLAYER:
         if (isDialogVisible) {
           this.onConfirmDialogClose();
@@ -553,6 +610,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
+
+        this.accessibilityManager.addHeading(
+          VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE
+        );
+
+        focusManager.recoverFocus();
+        this.resetHudTimeout();
       } else {
         focusManager.pressIn();
         focusManager.press();
@@ -597,6 +661,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
         this.resetHudTimeout();
       }
 
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        this.accessibilityManager.addHeading(
+          VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE
+        );
+      }
+
       return true;
     }
   }
@@ -653,8 +723,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
   onConfirmDialogClose() {
     this.confirmDialog.hideDialog();
 
-    // restore initial focus after closing dialog
-    focusManager.setInitialFocus();
+    const context: FocusManager.FocusContext = {
+      source: "cancel",
+      preserveScroll: true,
+    };
+
+    // restore initial focus after closing dialog(with preserve scrolling)
+    focusManager.setInitialFocus(undefined, context);
   }
 
   handleInputFocus = (event: FocusEvent) => {
@@ -852,5 +927,6 @@ export const InteractionManager = R.compose(
   withXray,
   connectToStore(R.pick(["rivers"])),
   PlayerContentContext.withConsumer,
-  DisplayStateContext.withConsumer
+  DisplayStateContext.withConsumer,
+  withBackToTopActionHOC
 )(InteractionManagerClass);

package/App/Layout/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { createPortal } from "react-dom";
 
 import { Background } from "@applicaster/zapp-react-dom-ui-components/Components/Background";
 import { ConfirmDialog } from "@applicaster/zapp-react-dom-ui-components/Components/ConfirmDialog";
@@ -29,7 +30,7 @@ export function Layout({ children }: Props) {
       >
         {children}
       </LayoutComponent>
-      <ConfirmDialog />
+      {createPortal(<ConfirmDialog />, document.body)}
     </>
   );
 }

package/App/Loader/SplashLoader.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as R from "ramda";
 import PropTypes from "prop-types";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
 import { QuickBrickEvents } from "../../Polyfills/QuickBrickCommunicationModule";

package/App/Loader/loadSessionStorageData.js

@@ -1,14 +1,12 @@
-import * as R from "ramda";
 import { NativeModules } from "react-native";
 import uuidv4 from "uuid/v4";
 
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { mapKeys } from "@applicaster/zapp-react-native-utils/objectUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 
-import { renameKeys, getDeviceData } from "./utils/platform";
+import { renameKeys, getDeviceData, getUserAgent } from "./utils/platform";
 import { desiredKeysMap } from "./utils/const";
 
 /**
@@ -55,6 +53,9 @@ export const loadPluginDataIntoSession = async (plugins = null) => {
 async function gatherData(uuid) {
   const deviceData = await getDeviceData();
 
+  // Prevent the device sdkVersion from overriding the build time value
+  delete deviceData.sdkVersion;
+
   const { languageLocale, countryLocale } =
     NativeModules?.QuickBrickCommunicationModule || {};
 
@@ -63,7 +64,9 @@ async function gatherData(uuid) {
     ...NativeModules?.QuickBrickCommunicationModule,
     // Device data retrieved from native device apis
     ...deviceData,
-    uuid: uuid || uuidv4(),
+    userAgent: deviceData.userAgent || getUserAgent(),
+    uuid: uuid || uuidv4(), // Created on first session, persisted in local thereafter
+    sessionId: uuidv4(), // Created on every session
     locale: `{language=${languageLocale}, country=${countryLocale}}`,
   };
 
@@ -78,21 +81,23 @@ async function gatherData(uuid) {
  * @param {Object} desiredKeys - The map of original key names to desired key names.
  */
 function storeData(data, desiredKeys) {
-  // Pick only the keys we want and need, map them to the correct name, and reject any unusuable data
-  const filteredData = R.compose(
-    R.reject(isEmptyOrNil),
-    R.reject(R.either(R.is(Object), R.is(Function))),
-    mapKeys(renameKeys),
-    R.pick(Object.keys(desiredKeys))
-  )(data);
-
-  R.forEachObjIndexed((value, key) => {
-    if (key === "uuid") {
-      localStorage.setItem(key, value);
+  const desiredKeysList = Object.keys(desiredKeys);
+
+  Object.entries(data).forEach(([key, value]) => {
+    if (!desiredKeysList.includes(key)) return;
+
+    if (isEmptyOrNil(value)) return;
+
+    if (typeof value === "object" || typeof value === "function") return;
+
+    const renamedKey = renameKeys(key);
+
+    if (renamedKey === "uuid") {
+      localStorage.setItem(renamedKey, value);
     }
 
-    sessionStorage.setItem(key, value);
-  }, filteredData);
+    sessionStorage.setItem(renamedKey, value);
+  });
 }
 
 /**

package/App/Loader/utils/const.js

@@ -37,6 +37,7 @@ export const desiredKeysMap = {
   osVersion: "osVersion",
   platform: "platform",
   quickBrickVersion: "quickBrickVersion",
+  sessionId: "sessionId",
   sdkVersion: "sdk_version",
   store: "store",
   timeZoneOffset: "timeZoneOffset",

package/App/Loader/utils/platform.js

@@ -257,26 +257,7 @@ export const getTizenInfo = () => {
  */
 export const getDeviceData = async () => {
   try {
-    let deviceData = {
-      modelName: null,
-      version: null,
-      versionMajor: null,
-      versionMinor: null,
-      versionDot: null,
-      sdkVersion: null,
-      screenWidth: null,
-      screenHeight: null,
-      uhd: null,
-      oled: null,
-      ddrSize: null,
-      uhd8K: null,
-      hdr10: null,
-      dolbyVision: null,
-      dolbyAtmos: null,
-      name: null,
-      osVersion: null,
-      networkType: null,
-    };
+    let deviceData = {};
 
     if (isLgPlatform()) {
       const [webOSInfo, webOSConnectionInfo] = await Promise.all([
@@ -308,7 +289,6 @@ export const getDeviceData = async () => {
         platform: "vizio",
         deviceMake: "Vizio",
         deviceType: "tv",
-        userAgent: getUserAgent(),
         deviceWidth: window.innerWidth,
         deviceHeight: window.innerHeight,
       };

package/App/Splash/index.js

@@ -1,4 +1,4 @@
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import * as R from "ramda";
 
 import { SplashComponent } from "./Splash";

package/Polyfills/Storage/__tests__/storage.test.js

@@ -1,10 +1,5 @@
 import * as R from "ramda";
-import {
-  getStorageModule,
-  applyNamespaceToKeyName,
-  STORAGE_TYPES,
-  DEFAULT_NAMESPACE,
-} from "../";
+import { getStorageModule, STORAGE_TYPES } from "../";
 
 import { StorageMock } from "./StorageMocks";
 
@@ -37,7 +32,6 @@ describe("storageObject", () => {
     const value = "bar";
     const namespaceValue = "baz";
     const namespace = "baz";
-    const keyName = applyNamespaceToKeyName(key, namespace);
     const failKey = "fail_key";
 
     beforeEach(clearStorage);
@@ -54,16 +48,11 @@ describe("storageObject", () => {
       it.each(storages)("sets a property in the storage", async (storage) => {
         const result = await storage.setItem(key, value, null);
 
-        const keyWithDefaultNameSpace = applyNamespaceToKeyName(
-          key,
-          DEFAULT_NAMESPACE
-        );
-
         expect(result).toBe(true);
 
-        expect(storage.getItem(keyWithDefaultNameSpace)).resolves.toEqual(
-          value
-        );
+        const res = await storage.getItem(key, null);
+
+        expect(res).toEqual(value);
       });
 
       it.each(storages)(
@@ -73,7 +62,9 @@ describe("storageObject", () => {
 
           expect(result).toBe(true);
 
-          expect(storage.getItem(keyName)).resolves.toEqual(namespaceValue);
+          const res = await storage.getItem(key, namespace);
+
+          expect(res).toEqual(namespaceValue);
         }
       );
 
@@ -108,7 +99,7 @@ describe("storageObject", () => {
         "gets properties from the storage with a namespace",
         (storage) => {
           expect(storage.getItem(key, namespace)).resolves.toEqual(
-            "namespaceValue"
+            namespaceValue
           );
         }
       );

package/Polyfills/index.js

@@ -1,8 +1,5 @@
-import { QuickBrickCommunicationModule } from "./QuickBrickCommunicationModule";
-import { AnalyticsBridge } from "./AnalyticsBridge";
 import { getStorageModule } from "./Storage";
 import { DeviceEventEmitter } from "./DeviceEventEmitter";
-import { AppLoaderBridge } from "./AppLoaderBridge";
 import { isSamsungPlatform, isLgPlatform } from "../App/Loader/utils/platform";
 
 // Polyfill for abort controller required by shaka-player 4.x.x
@@ -24,11 +21,13 @@ const PLATFORM_KEYS = {
 // const DESKTOP_BROWSER = [PLATFORMS.linux, PLATFORMS.mac, PLATFORMS.win];
 
 export function registerNativeModulesPolyfills(NativeModules) {
-  NativeModules.QuickBrickCommunicationModule = QuickBrickCommunicationModule;
   NativeModules.LocalStorage = getStorageModule("localStorage");
   NativeModules.SessionStorage = getStorageModule("sessionStorage");
-  NativeModules.AnalyticsBridge = AnalyticsBridge;
-  NativeModules.AppLoaderBridge = AppLoaderBridge;
+  NativeModules.AnalyticsBridge = require("./AnalyticsBridge").AnalyticsBridge;
+  NativeModules.AppLoaderBridge = require("./AppLoaderBridge").AppLoaderBridge;
+
+  NativeModules.QuickBrickCommunicationModule =
+    require("./QuickBrickCommunicationModule").QuickBrickCommunicationModule;
 }
 
 function getWebPlatform(fallbackPlatform) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "14.0.0-rc.8",
+  "version": "14.0.0-rc.80",
   "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": "14.0.0-rc.8",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.8",
-    "@applicaster/zapp-react-native-redux": "14.0.0-rc.8",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.8",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.8",
+    "@applicaster/zapp-react-dom-ui-components": "14.0.0-rc.80",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.80",
+    "@applicaster/zapp-react-native-redux": "14.0.0-rc.80",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.80",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.80",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -37,13 +37,9 @@
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "core-js": "3.29.1",
-    "immer": "*",
     "react": "*",
-    "react-dom": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-web": "*",
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"