@applicaster/zapp-react-native-utils 12.0.0-rc.25 → 12.0.0-rc.28

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute } from "../index";
+import { useRoute, isNavBarVisible } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { ROUTE_TYPES } from "../../../navigationUtils/routeTypes";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 const plugins = [];
 
@@ -45,13 +45,9 @@ const videoItem = {
   type: { value: "video" },
 };
 
-const modalItem = {
-  id: "modal-1",
-};
-
 const mainStackNavigator = {
   getStackForPathname: jest.fn().mockReturnValue(homeStack),
-  modalState: {},
+  getModalState: () => {},
   videoModalState: {},
 };
 
@@ -60,13 +56,6 @@ const videoModalNavigator = {
   videoModalState: { item: videoItem },
 };
 
-const modalNavigator = {
-  ...mainStackNavigator,
-  modalState: {
-    screen: modalItem,
-  },
-};
-
 const hookModalNavigator = {
   ...mainStackNavigator,
 };
@@ -86,7 +75,6 @@ const hookModalContextState = {
   resetState: jest.fn(),
 };
 
-const modalPathname = `${ROUTE_TYPES.MODAL}/${modalItem.id}`;
 const hooksModalPathname = `${ROUTE_TYPES.HOOKS_MODAL}/${hookModalContextState.state.screenData.payload.id}`;
 const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
 const mockStore = configureMockStore();
@@ -117,16 +105,6 @@ const videoModalWrapper = ({ children }) => (
   </Provider>
 );
 
-const modalWrapper = ({ children }) => (
-  <Provider store={store}>
-    <NavigationContext.Provider value={modalNavigator}>
-      <PathnameContext.Provider value={modalPathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
-  </Provider>
-);
-
 const hookModalWrapper = ({ children }) => (
   <Provider store={store}>
     <ZappHookModalContext.ReactContext.Provider value={hookModalContextState}>
@@ -139,88 +117,251 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
-describe("useRoute", () => {
-  describe("Main stack components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: mainStackWrapper,
+jest.mock("../../../modalState", () => ({
+  useModalStore: jest.fn(),
+}));
+
+describe("navigation", () => {
+  describe("useRoute", () => {
+    describe("Main stack components", () => {
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: mainStackWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(homeStack.route);
       });
 
-      expect(result.current.pathname).toEqual(homeStack.route);
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: mainStackWrapper,
+        });
+
+        expect(result.current.screenData.id).toEqual(entry.id);
+
+        expect(result.current.screenData.targetScreen.id).toEqual(screen.id);
+      });
     });
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: mainStackWrapper,
+    describe("Hook modal components", () => {
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: hookModalWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(hooksModalPathname);
       });
 
-      expect(result.current.screenData.id).toEqual(entry.id);
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: hookModalWrapper,
+        });
 
-      expect(result.current.screenData.targetScreen.id).toEqual(screen.id);
+        expect(result.current.screenData.id).toEqual(
+          hookModalContextState.state.screenData.payload.id
+        );
+      });
     });
-  });
 
-  describe("Hook modal components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: hookModalWrapper,
+    describe("Video modal components", () => {
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: videoModalWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(videoModalPathname);
       });
 
-      expect(result.current.pathname).toEqual(hooksModalPathname);
-    });
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: videoModalWrapper,
+        });
+
+        expect(result.current.screenData.id).toEqual(
+          videoModalNavigator.videoModalState.item.id
+        );
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: hookModalWrapper,
+        expect(result.current.screenData.targetScreen.id).toEqual(
+          rivers["river-player"].id
+        );
       });
+    });
+  });
 
-      expect(result.current.screenData.id).toEqual(
-        hookModalContextState.state.screenData.payload.id
+  describe("isNavBarVisible", () => {
+    it("returns false when the route is a player route", () => {
+      const navBarVisible = isNavBarVisible(
+        "/playable/some_vod_item",
+        {} as ZappRiver,
+        false,
+        false
       );
+
+      expect(navBarVisible).toBe(false);
     });
-  });
 
-  describe("Video modal components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: videoModalWrapper,
-      });
+    it("returns false when the next screen is the QB search screen", () => {
+      const navBarVisible = isNavBarVisible(
+        "/river/A1234",
+        {
+          type: "qb_search_screen",
+        } as any,
+        false,
+        false
+      );
 
-      expect(result.current.pathname).toEqual(videoModalPathname);
+      expect(navBarVisible).toBe(false);
     });
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: videoModalWrapper,
+    describe("when screen is a hook", () => {
+      it("returns true if the `showNavBar` flag is set to true", () => {
+        const navBarVisible = isNavBarVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                showNavBar: true,
+              },
+            },
+          } as any,
+          false,
+          false
+        );
+
+        expect(navBarVisible).toBe(true);
+      });
+
+      it("returns true if presentFullScreen flag is set to false", () => {
+        const navBarVisible = isNavBarVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: false,
+              },
+            },
+          } as any,
+          false,
+          false
+        );
+
+        expect(navBarVisible).toBe(true);
       });
 
-      expect(result.current.screenData.id).toEqual(
-        videoModalNavigator.videoModalState.item.id
+      it("returns false if presentFullScreen flag is set to true", () => {
+        const navBarVisible = isNavBarVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: true,
+              },
+            },
+          } as any,
+          false,
+          false
+        );
+
+        expect(navBarVisible).toBe(false);
+      });
+    });
+
+    it("returns false if the screen's general settings allow screen presentation", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          general: {
+            allow_screen_plugin_presentation: true,
+          },
+        } as any,
+        false,
+        false
       );
 
-      expect(result.current.screenData.targetScreen.id).toEqual(
-        rivers["river-player"].id
+      expect(navBarVisible).toBe(false);
+    });
+
+    it("returns false if the screen's general settings hide app nav bar", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          general: {
+            hide_app_nav_bar: true,
+          },
+        } as any,
+        false,
+        false
       );
+
+      expect(navBarVisible).toBe(false);
     });
-  });
 
-  describe("Modal components", () => {
-    it("should return a correct pathname", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: modalWrapper,
-      });
+    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          navigations: [
+            {
+              styles: {
+                hide_secondary_level_menu: true,
+              },
+            },
+          ],
+        } as any,
+        false,
+        true
+      );
 
-      expect(result.current.pathname).toEqual(modalPathname);
+      expect(navBarVisible).toBe(false);
     });
 
-    it("should return correct screenData information", () => {
-      const { result } = renderHook(() => useRoute(), {
-        wrapper: modalWrapper,
-      });
+    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          navigations: [
+            {
+              styles: {
+                hide_secondary_level_menu: false,
+              },
+            },
+          ],
+        } as any,
+        true,
+        false
+      );
+
+      expect(navBarVisible).toBe(true);
+    });
+
+    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        {
+          navigations: [
+            {
+              styles: {
+                hide_secondary_level_menu: true,
+              },
+            },
+          ],
+        } as any,
+        true,
+        false
+      );
 
-      expect(result.current.screenData.id).toEqual(
-        modalNavigator.modalState.screen.id
+      expect(navBarVisible).toBe(true);
+    });
+
+    it("returns true otherwise", () => {
+      const navBarVisible = isNavBarVisible(
+        "",
+        { navigations: [] } as any,
+        true,
+        true
       );
+
+      expect(navBarVisible).toBe(true);
     });
   });
 });

package/reactHooks/navigation/index.ts

@@ -17,18 +17,103 @@ import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-component
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
-import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
-import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
+import {
+  getRiverFromRoute,
+  getTargetRoute,
+  getNavigationProps,
+} from "../../navigationUtils";
 import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
 import { getTargetScreenData } from "../screen/useTargetScreenData";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useNavbarState } from "../screen";
 import { useNavigation } from "./useNavigation";
+import { useModalStore } from "../../modalState";
 
 export { useNavigation } from "./useNavigation";
 
+/**
+ * This function helps to decide wether the navbar should be presented on the screen
+ * based on route and / or screen Data
+ *
+ * Currently the scenarios include
+ * - players => false
+ * - search screen plugin => false
+ * - hooks with `showNavBar: true` or `presentFullScreen` not set to true, defaults to no navbar for hook screens
+ * - screens with `allow_screen_plugin_presentation` in general property => false
+ *
+ * @param {String} route current route of the screen
+ * @param {Object} screenData payload associated with the currently presented screen
+ * @returns {Boolean}
+ */
+export function isNavBarVisible(
+  route: string,
+  screenData: ZappRiver = {} as ZappRiver,
+  showNavBar: boolean,
+  canGoBack: boolean,
+  videoModalState: QuickBrickVideoModalState | null = null
+) {
+  /* screenData is not actual navigator.data
+   * or navigator.screenData,
+   * but navigator.data.screen */
+  if (route.includes("playable")) {
+    return false;
+  }
+
+  if (
+    videoModalState?.mode === "FULLSCREEN" &&
+    videoModalState?.visible === true
+  ) {
+    return false;
+  }
+
+  if (screenData?.type === "qb_search_screen" && !isTV()) {
+    return false;
+  }
+
+  /* Match if screen is Hook */
+  if (route.startsWith("/hooks/")) {
+    const module = screenData?.module;
+
+    if (module?.presentFullScreen) {
+      return false;
+    }
+
+    return module?.showNavBar ?? false;
+  }
+
+  if (screenData?.hookPlugin) {
+    const hookPlugin = screenData?.hookPlugin?.module;
+
+    return (
+      hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true || false
+    );
+  }
+
+  if (
+    screenData?.general?.allow_screen_plugin_presentation ||
+    screenData?.general?.hide_app_nav_bar
+  ) {
+    return false;
+  }
+
+  const hideSecondaryLevel = screenData?.navigations?.some(
+    (navigation) => navigation.styles?.hide_secondary_level_menu
+  );
+
+  if (canGoBack && hideSecondaryLevel) {
+    return false;
+  }
+
+  if (typeof showNavBar === "boolean" && !showNavBar) {
+    return false;
+  }
+
+  return true;
+}
+
 const { ProfilerBridge } = NativeModules;
 
 export const usePathname = () => React.useContext(PathnameContext);
@@ -43,6 +128,102 @@ export const useBackHandler = (cb: () => boolean) => {
   }, [cb]);
 };
 
+// starts with modal/
+const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
+
+const isVideoModalPathname = (pathname: string) =>
+  /^video-modal\//.test(pathname);
+
+const isHookModalPathname = (pathname: string) =>
+  /^hooks-modal\//.test(pathname);
+
+const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useRoute = (): {
+  screenData: VariousScreenData;
+  pathname: string;
+} => {
+  const pathname = usePathname() || "";
+  const navigator = useNavigation();
+
+  const { plugins, contentTypes, rivers } = usePickFromState([
+    "plugins",
+    "rivers",
+    "contentTypes",
+  ]);
+
+  const currentStack = navigator.getStackForPathname(pathname);
+  const { modalState } = useModalStore();
+  const hookModalState = useZappHooksModalState();
+
+  const modalScreenData = modalState.screen;
+
+  const hookModalScreenData = hookModalState.state.screenData?.payload;
+
+  const videoModalScreenData =
+    navigator.videoModalState?.item &&
+    legacyScreenData(
+      {
+        entry: navigator.videoModalState?.item as ZappEntry,
+        screen: getTargetScreenData(
+          navigator.videoModalState?.item as ZappEntry,
+          rivers,
+          contentTypes
+        ),
+      },
+      plugins
+    );
+
+  const currentRouteScreenData = legacyScreenData(
+    {
+      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
+      entry: currentStack?.state?.entry ?? {},
+    } as NavigationScreenData,
+
+    plugins
+  );
+
+  // There are 4 route scenarios
+  // For regular screens take date from navigator stack.
+  // is path is model grab screenData from modal state
+  // if path is video modal grab screenData from video state
+  // if path is hook modal grab screenData from hook state
+  // if path is hook grab screenData from screenData
+
+  if (isModalPathname(pathname)) {
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
+  }
+
+  if (isVideoModalPathname(pathname)) {
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
+  }
+
+  if (isHookModalPathname(pathname)) {
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
+  }
+
+  if (isHookPathname(pathname)) {
+    const screenData =
+      "hookPlugin" in currentRouteScreenData
+        ? currentRouteScreenData
+        : navigator.screenData;
+
+    return { screenData, pathname };
+  }
+
+  const screenData = currentRouteScreenData;
+
+  return { screenData, pathname };
+};
+
 type Callbacks = Partial<{
   handleHookPresent: ({
     route,
@@ -209,7 +390,7 @@ export const useRunIfLongPress = (
     React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
-    clearTimeout(pressTimeout.current);
+    clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);
   };
 
   const startTimeout = (cb: () => void) => {
@@ -231,82 +412,12 @@ export const useRunIfLongPress = (
  * @returns boolean - navbar visiblity status
  */
 export const useIsNavBarVisible = (): boolean => {
-  const visible = useNavbarState().visible;
+  const { visible } = useNavbarState();
 
   return useMemo(() => visible, [visible]);
 };
 
-const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
-
-const isVideoModalPathname = (pathname: string) =>
-  /^video-modal\//.test(pathname);
-
-const isHookModalPathname = (pathname: string) =>
-  /^hooks-modal\//.test(pathname);
-
-export const useRoute = () => {
-  const pathname = usePathname() || "";
-  const navigator = useNavigation();
-
-  const { plugins, contentTypes, rivers } = usePickFromState([
-    "plugins",
-    "rivers",
-    "contentTypes",
-  ]);
-
-  const currentStack = navigator.getStackForPathname(pathname);
-  const modalState = navigator.modalState;
-  const hookModalState = useZappHooksModalState();
-
-  const modalScreenData = modalState.screen;
-
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
-
-  const videoModalScreenData =
-    navigator.videoModalState?.item &&
-    legacyScreenData(
-      {
-        entry: navigator.videoModalState?.item,
-        screen: getTargetScreenData(
-          navigator.videoModalState?.item,
-          rivers,
-          contentTypes
-        ),
-      },
-      plugins
-    );
-
-  const currentRouteScreenData = legacyScreenData(
-    {
-      screen:
-        currentStack?.state?.screen ??
-        navigator.data?.screen ??
-        ({} as ZappRiver),
-      entry: currentStack?.state?.entry ?? ({} as ZappEntry),
-    },
-
-    plugins
-  );
-
-  // There are 4 route scenarios
-  // For regular screens take date from navigator stack.
-  // is path is model grab screenData from modal state
-  // if path is video modal grab screenData from video state
-  // if path is hook modal grab screenData from hook state
-
-  const screenData = isModalPathname(pathname)
-    ? modalScreenData
-    : isVideoModalPathname(pathname)
-    ? videoModalScreenData
-    : isHookModalPathname(pathname)
-    ? hookModalScreenData
-    : currentRouteScreenData;
-
-  return { screenData, pathname };
-};
-
-export const useGetBottomTabBarHeight = (): number => {
-  const insets = useSafeAreaInsets();
+const useGetNavBarTopBorderWidth = (): number => {
   const navigator = useNavigation();
 
   const navProps = getNavigationProps({
@@ -315,18 +426,23 @@ export const useGetBottomTabBarHeight = (): number => {
     category: "menu",
   });
 
-  const navType = useNavigationType();
-  const isBottomBarNavigation = navType === MenuTypes.bottomTabBar;
-
-  const TAB_BAR_HEIGHT_IOS = 49;
-  const TAB_BAR_HEIGHT_ANDROID = 56;
+  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
+};
 
-  if (!isBottomBarNavigation) return 0;
+const TAB_BAR_HEIGHT_IOS = 49;
+const TAB_BAR_HEIGHT_ANDROID = 56;
 
-  const tabBarHeight = platformSelect({
-    ios: TAB_BAR_HEIGHT_IOS + insets.bottom,
+const useGetTabBarHeight = () =>
+  platformSelect({
+    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
     android: TAB_BAR_HEIGHT_ANDROID,
   }) as number;
 
-  return tabBarHeight + Number(navProps?.styles?.top_border_width ?? 0);
+export const useGetBottomTabBarHeight = (): number => {
+  const topBorderWidth = useGetNavBarTopBorderWidth();
+  const tabBarHeight = useGetTabBarHeight();
+
+  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
+
+  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };