@applicaster/zapp-react-dom-app 14.0.0-alpha.5219335081 → 14.0.0-alpha.5234792518

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

@@ -10,18 +10,18 @@ jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
   },
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/state", () => ({
-  useIsHomeScreen: jest.fn(),
-  useIsRootScreen: jest.fn(),
-  useIsTabsScreen: jest.fn(),
+jest.mock("../hooks", () => ({
+  useCurrentScreenIsHome: jest.fn(),
+  useCurrentScreenIsRoot: jest.fn(),
+  useCurrentScreenIsTabs: jest.fn(),
 }));
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import {
-  useIsHomeScreen,
-  useIsRootScreen,
-  useIsTabsScreen,
-} from "@applicaster/zapp-react-native-utils/reactHooks/state";
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "../hooks";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useNavigation: jest.fn(),
@@ -47,9 +47,9 @@ describe("withBackToTopActionHOC", () => {
   it("returns PLATFORM_BACK when on root screen, focus on menu, and is home", () => {
     expect.assertions(1);
 
-    (useIsRootScreen as jest.Mock).mockReturnValue(true);
-    (useIsHomeScreen as jest.Mock).mockReturnValue(true);
-    (useIsTabsScreen as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
       getNestedEntry: () => undefined,
@@ -68,9 +68,9 @@ describe("withBackToTopActionHOC", () => {
   it("returns GO_HOME when on root screen, focus on menu, and not home", () => {
     expect.assertions(1);
 
-    (useIsRootScreen as jest.Mock).mockReturnValue(true);
-    (useIsHomeScreen as jest.Mock).mockReturnValue(false);
-    (useIsTabsScreen as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
       getNestedEntry: () => undefined,
@@ -84,9 +84,9 @@ describe("withBackToTopActionHOC", () => {
   });
 
   it("returns FOCUS_TOP_NAVIGATION when on root screen and focus on content without tabs_screen", () => {
-    (useIsRootScreen as jest.Mock).mockReturnValue(true);
-    (useIsHomeScreen as jest.Mock).mockReturnValue(false);
-    (useIsTabsScreen as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
       getNestedEntry: () => "selectedEntry",
@@ -107,9 +107,9 @@ describe("withBackToTopActionHOC", () => {
   });
 
   it("returns FOCUS_TOP_NAVIGATION when on root screen and focus on content with tabs_screen", () => {
-    (useIsRootScreen as jest.Mock).mockReturnValue(true);
-    (useIsHomeScreen as jest.Mock).mockReturnValue(false);
-    (useIsTabsScreen as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(true);
 
     (useNavigation as jest.Mock).mockReturnValue({
       getNestedEntry: () => "selectedEntry",
@@ -132,9 +132,9 @@ describe("withBackToTopActionHOC", () => {
   it("returns GO_BACK in default case", () => {
     expect.assertions(1);
 
-    (useIsRootScreen as jest.Mock).mockReturnValue(false);
-    (useIsHomeScreen as jest.Mock).mockReturnValue(false);
-    (useIsTabsScreen as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
 
     (useNavigation as jest.Mock).mockReturnValue({
       getNestedEntry: () => undefined,

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/withBackToTopAction.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import {
-  useIsHomeScreen,
-  useIsRootScreen,
-  useIsTabsScreen,
-} from "@applicaster/zapp-react-native-utils/reactHooks/state";
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "./hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 export type BACK_TO_TOP_ACTION = {
@@ -16,14 +16,22 @@ export type BackToTopAction = () => BACK_TO_TOP_ACTION;
 
 export function withBackToTopActionHOC(Component) {
   return function WrappedComponent(props) {
-    const isHome = useIsHomeScreen();
-    const isRoot = useIsRootScreen();
-    const isTabsScreen = useIsTabsScreen();
+    const isHome = useCurrentScreenIsHome();
+    const isRoot = useCurrentScreenIsRoot();
+    const isTabsScreen = useCurrentScreenIsTabs();
 
     const navigator = useNavigation();
     const selectedEntry = navigator.getNestedEntry();
 
+    const isStartUpHook =
+      Array.isArray(navigator.startUpHooks) &&
+      navigator.startUpHooks.length > 0;
+
     const backToTopAction = React.useCallback((): BACK_TO_TOP_ACTION => {
+      if (isRoot && isStartUpHook) {
+        return { action: "PLATFORM_BACK" };
+      }
+
       if (isRoot && focusManager.isFocusOnMenu() && isHome) {
         return { action: "PLATFORM_BACK" };
       }

package/App/InteractionManager/index.tsx

@@ -8,6 +8,8 @@ import {
   sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import {
   debounce,
   noop,
@@ -62,7 +64,8 @@ const { log_debug, log_warning } = createLogger({
 });
 
 const shouldUseOnScreenKeyboard = () =>
-  isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
+  isVizioPlatform() ||
+  toBooleanWithDefaultFalse(window?.applicaster?.useOnScreenKeyboard);
 
 type Props = {
   displayState: string;

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/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,6 +64,7 @@ async function gatherData(uuid) {
     ...NativeModules?.QuickBrickCommunicationModule,
     // Device data retrieved from native device apis
     ...deviceData,
+    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}}`,
@@ -79,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "14.0.0-alpha.5219335081",
+  "version": "14.0.0-alpha.5234792518",
   "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-alpha.5219335081",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5219335081",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5219335081",
+    "@applicaster/zapp-react-dom-ui-components": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5234792518",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5234792518",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",