@applicaster/zapp-react-dom-app 14.0.0-alpha.1384310723 → 14.0.0-alpha.1428720541

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

@@ -0,0 +1,149 @@
+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(),
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/state", () => ({
+  useIsHomeScreen: jest.fn(),
+  useIsRootScreen: jest.fn(),
+  useIsTabsScreen: jest.fn(),
+}));
+
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import {
+  useIsHomeScreen,
+  useIsRootScreen,
+  useIsTabsScreen,
+} from "@applicaster/zapp-react-native-utils/reactHooks/state";
+
+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, 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);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => undefined,
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toEqual({
+      action: "PLATFORM_BACK",
+    });
+  });
+
+  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);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => undefined,
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toEqual({ action: "GO_HOME" });
+  });
+
+  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);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => "selectedEntry",
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toEqual({
+      action: "FOCUS_TOP_NAVIGATION",
+      payload: {
+        isTabsScreen: false,
+        selectedEntry: "selectedEntry",
+      },
+    });
+  });
+
+  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);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => "selectedEntry",
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toEqual({
+      action: "FOCUS_TOP_NAVIGATION",
+      payload: {
+        isTabsScreen: true,
+        selectedEntry: "selectedEntry",
+      },
+    });
+  });
+
+  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);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => undefined,
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toEqual({ action: "GO_BACK" });
+  });
+});

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,48 @@
+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";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export type BACK_TO_TOP_ACTION = {
+  action: "PLATFORM_BACK" | "GO_HOME" | "FOCUS_TOP_NAVIGATION" | "GO_BACK";
+  payload?: { isTabsScreen: boolean; selectedEntry: ZappEntry };
+};
+
+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 navigator = useNavigation();
+    const selectedEntry = navigator.getNestedEntry();
+
+    const backToTopAction = React.useCallback((): BACK_TO_TOP_ACTION => {
+      if (isRoot && focusManager.isFocusOnMenu() && isHome) {
+        return { action: "PLATFORM_BACK" };
+      }
+
+      if (isRoot && focusManager.isFocusOnMenu() && !isHome) {
+        return { action: "GO_HOME" };
+      }
+
+      if (isRoot && focusManager.isFocusOnContent()) {
+        return {
+          action: "FOCUS_TOP_NAVIGATION",
+          payload: { isTabsScreen, selectedEntry },
+        };
+      }
+
+      // default
+      return { action: "GO_BACK" };
+    }, [isHome, isRoot, isTabsScreen, selectedEntry]);
+
+    return <Component {...props} backToTopAction={backToTopAction} />;
+  };
+}

package/App/InteractionManager/index.tsx

@@ -1,7 +1,7 @@
 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,
@@ -50,6 +50,8 @@ 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;
@@ -70,6 +72,7 @@ type Props = {
   rivers: {};
   xray: XRayContext;
   confirmDialog: typeof confirmationDialogStore;
+  backToTopAction: BackToTopAction;
 };
 
 interface State {
@@ -139,14 +142,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);
@@ -318,13 +316,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 +326,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 +387,9 @@ 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 } =
+      this.props;
+
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
@@ -412,8 +408,32 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
+    const { action, payload } = backToTopAction();
+
     switch (displayState) {
       case DISPLAY_STATES.DEFAULT:
+        if (action === "PLATFORM_BACK") {
+          this.platformBack();
+        }
+
+        if (action === "GO_HOME") {
+          this.goToHome();
+        }
+
+        if (action === "FOCUS_TOP_NAVIGATION") {
+          focusManager.focusTopNavigation(
+            payload.isTabsScreen,
+            payload.selectedEntry
+          );
+        }
+
+        if (action === "GO_BACK") {
+          if (navigator.canGoBack()) {
+            navigator.goBack();
+          }
+        }
+
+        break;
       case DISPLAY_STATES.PLAYER:
         if (isDialogVisible) {
           this.onConfirmDialogClose();
@@ -653,8 +673,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 +877,6 @@ export const InteractionManager = R.compose(
   withXray,
   connectToStore(R.pick(["rivers"])),
   PlayerContentContext.withConsumer,
-  DisplayStateContext.withConsumer
+  DisplayStateContext.withConsumer,
+  withBackToTopActionHOC
 )(InteractionManagerClass);

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

@@ -63,7 +63,8 @@ async function gatherData(uuid) {
     ...NativeModules?.QuickBrickCommunicationModule,
     // Device data retrieved from native device apis
     ...deviceData,
-    uuid: uuid || uuidv4(),
+    uuid: uuid || uuidv4(), // Created on first session, persisted in local thereafter
+    sessionId: uuidv4(), // Created on every session
     locale: `{language=${languageLocale}, country=${countryLocale}}`,
   };
 

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/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-alpha.1384310723",
+  "version": "14.0.0-alpha.1428720541",
   "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.1384310723",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1384310723",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1384310723",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.1384310723",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1384310723",
+    "@applicaster/zapp-react-dom-ui-components": "14.0.0-alpha.1428720541",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1428720541",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1428720541",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.1428720541",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1428720541",
     "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": "*"