@applicaster/zapp-react-native-app 15.0.0-rc.11 → 15.0.0-rc.111

package/App/Layout/__tests__/__snapshots__/index.test.tsx.snap

@@ -57,7 +57,17 @@ exports[`Layout should match snapshot when appReady is true 1`] = `
         },
         "currentRoute": "home",
         "data": {},
-        "isVideoModalDocked": false,
+        "isVideoModalDocked": [MockFunction] {
+          "calls": [
+            [],
+          ],
+          "results": [
+            {
+              "type": "return",
+              "value": false,
+            },
+          ],
+        },
         "videoModalState": {
           "mode": "MINIMIZED",
           "visible": false,

package/App/Layout/__tests__/index.test.tsx

@@ -1,5 +1,10 @@
 import React from "react";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import {
+  getMenuPlugin,
+  isBottomTabVisible,
+  SIDE_MENU_PLUGIN_ID,
+} from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 
 const mockUseMenuToggleContext = jest.fn(() => ({
   toggleMenu: jest.fn(),
@@ -12,12 +17,14 @@ const mockUseMenuToggleContext = jest.fn(() => ({
 
 jest.mock("../layoutHelpers", () => {
   const { View } = jest.requireActual("react-native");
+  const { isVideoOverlayVisible } = jest.requireActual("../layoutHelpers");
 
   return {
     // eslint-disable-next-line react/display-name
     getNavigationPluginModule: () => (props) => (
       <View testID="menu" {...props} />
     ),
+    isVideoOverlayVisible,
   };
 });
 
@@ -52,7 +59,13 @@ jest.mock(
   })
 );
 
-const mockUseNavigation = jest.fn();
+const mockUseNavigation = jest.fn(() => ({
+  activeRiver: { navigations: [] },
+  videoModalState: { visible: false, mode: "MINIMIZED" },
+  currentRoute: "home",
+  data: {},
+  isVideoModalDocked: jest.fn(() => false),
+}));
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
@@ -110,6 +123,9 @@ jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler",
   () => ({
     isMenuVisible: jest.fn(() => true),
+    isBottomTabVisible: jest.fn(() => true),
+    getMenuPlugin: jest.fn(() => ({ identifier: "test-plugin" })),
+    SIDE_MENU_PLUGIN_ID: "quick_brick_side_menu",
   })
 );
 
@@ -150,28 +166,6 @@ jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
 const { Layout } = require("../");
 
 describe("Layout", () => {
-  beforeAll(() => {
-    mockUseNavigation.mockImplementation(() => ({
-      activeRiver: { navigations: [] },
-      videoModalState: { visible: false, mode: "MINIMIZED" },
-      isVideoModalDocked: false,
-      currentRoute: "home",
-      data: {},
-    }));
-  });
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    mockUseNavigation.mockImplementation(() => ({
-      activeRiver: { navigations: [] },
-      videoModalState: { visible: false, mode: "MINIMIZED" },
-      isVideoModalDocked: false,
-      currentRoute: "home",
-      data: {},
-    }));
-  });
-
   it("should match snapshot when appReady is true", () => {
     const { toJSON } = renderWithProviders(<Layout />);
 
@@ -198,7 +192,7 @@ describe("Layout", () => {
     mockUseNavigation.mockReturnValue({
       activeRiver: { navigations: [] },
       videoModalState: { visible: true, mode: "MINIMIZED" },
-      isVideoModalDocked: false,
+      isVideoModalDocked: jest.fn(() => true),
       currentRoute: "home",
       data: {},
     });
@@ -216,7 +210,7 @@ describe("Layout", () => {
     mockUseNavigation.mockReturnValueOnce({
       activeRiver: { navigations: [{ identifier: "quick-brick-bottom-tabs" }] },
       videoModalState: { visible: false, mode: "MINIMIZED" },
-      isVideoModalDocked: false,
+      isVideoModalDocked: jest.fn(() => false),
       currentRoute: "home",
       data: {},
     });
@@ -237,4 +231,60 @@ describe("Layout", () => {
       opacity: 1,
     });
   });
+
+  it("should render menu when Side Menu is active and VideoModal is FULLSCREEN", () => {
+    (getMenuPlugin as jest.Mock).mockReturnValue({
+      identifier: SIDE_MENU_PLUGIN_ID,
+    });
+
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: true, mode: "FULLSCREEN" },
+      isVideoModalDocked: jest.fn(() => false),
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { queryByTestId } = renderWithProviders(<Layout />);
+    expect(queryByTestId("menu")).toBeTruthy();
+  });
+
+  it("should NOT render menu when Bottom Tabs are active and VideoModal is FULLSCREEN", () => {
+    (getMenuPlugin as jest.Mock).mockReturnValue({
+      identifier: "quick-brick-bottom-tabs",
+    });
+
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: true, mode: "FULLSCREEN" },
+      isVideoModalDocked: jest.fn(() => false),
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { queryByTestId } = renderWithProviders(<Layout />);
+    expect(queryByTestId("menu")).toBeNull();
+  });
+
+  it("should not add padding when Side Menu is active", () => {
+    (getMenuPlugin as jest.Mock).mockReturnValue({
+      identifier: SIDE_MENU_PLUGIN_ID,
+    });
+
+    (isBottomTabVisible as jest.Mock).mockReturnValue(false);
+
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: false, mode: "MINIMIZED" },
+      isVideoModalDocked: jest.fn(() => false),
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { getByTestId } = renderWithProviders(<Layout />);
+
+    expect(getByTestId("transitioner").props.contentStyle.paddingBottom).toBe(
+      0
+    );
+  });
 });

package/App/Layout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
@@ -15,10 +15,23 @@ import { transitionConfig } from "@applicaster/zapp-react-native-ui-components/C
 import { Screen } from "@applicaster/zapp-react-native-ui-components/Components/Screen";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 
-import { getNavigationPluginModule } from "./layoutHelpers";
+import {
+  getNavigationPluginModule,
+  isVideoOverlayVisible,
+} from "./layoutHelpers";
 
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  usePlugins,
+  useAppSelector,
+  selectAppReady,
+} from "@applicaster/zapp-react-native-redux";
+
+import {
+  getMenuPlugin,
+  isBottomTabVisible,
+  isMenuVisible,
+  SIDE_MENU_PLUGIN_ID,
+} from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 
 import {
   MenuToggleContextType,
@@ -27,7 +40,6 @@ import {
 import { VideoModal } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
 import { withModalAnimationProvider } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext";
 
 import { ZappHooksModal } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal";
 import { useListenEventBusEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useListenEventBusEvent";
@@ -45,10 +57,8 @@ const styles = StyleSheet.create({
 });
 
 const LayoutWithMenu = () => {
-  const {
-    plugins,
-    appState: { appReady },
-  } = usePickFromState(["plugins", "appState"]);
+  const plugins = usePlugins();
+  const appReady = useAppSelector(selectAppReady);
 
   const {
     toggleMenu,
@@ -83,7 +93,11 @@ const LayoutWithMenu = () => {
     [activeRiver]
   );
 
-  const { isActiveGesture } = useModalAnimationContext();
+  const isSideMenu = React.useMemo(() => {
+    const menuPlugin = getMenuPlugin(navigator.screenData, plugins);
+
+    return menuPlugin?.identifier === SIDE_MENU_PLUGIN_ID;
+  }, [navigator.screenData, plugins]);
 
   /** BTB shown when videoModalState - visible & minimized, maximized & animation gesture is active
    * otherwise hidden if videoModalState - visible
@@ -96,19 +110,40 @@ const LayoutWithMenu = () => {
       plugins
     );
 
-    const shouldShowWithVideo =
-      videoModalState.visible &&
-      ["MINIMIZED", "MAXIMIZED"].includes(videoModalState.mode);
+    if (isSideMenu) {
+      return menuVisible;
+    }
+
+    return menuVisible && isVideoOverlayVisible(videoModalState);
+  }, [
+    plugins,
+    isSideMenu,
+    navigator.currentRoute,
+    navigator.screenData,
+    videoModalState.visible,
+    videoModalState.mode,
+  ]);
+
+  const showBottomTabs = React.useMemo(() => {
+    const bottomTabsVisible = isBottomTabVisible(
+      navigator.currentRoute,
+      navigator.screenData,
+      plugins
+    );
 
-    return menuVisible && (shouldShowWithVideo || !videoModalState.visible);
+    return bottomTabsVisible && isVideoOverlayVisible(videoModalState);
   }, [
     videoModalState.visible,
     videoModalState.mode,
     navigator.currentRoute,
-    isActiveGesture,
+    navigator.screenData,
   ]);
 
-  const paddingBottom = showMenu ? bottomTabBarHeight + safeAreaBottomInset : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
+  const paddingBottom = showBottomTabs
+    ? bottomTabBarHeight + safeAreaBottomInset
+    : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
+
+  const videoModalStateDocked = isVideoModalDocked();
 
   const contentStyle = React.useMemo(
     () =>
@@ -116,10 +151,10 @@ const LayoutWithMenu = () => {
         styles.container,
         {
           paddingBottom,
-          opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
+          opacity: videoModalState.visible && !videoModalStateDocked ? 0 : 1,
         },
       ]),
-    [videoModalState.visible, isVideoModalDocked]
+    [paddingBottom, videoModalState.visible, videoModalStateDocked]
   );
 
   const menuProps = React.useMemo(() => {

package/App/Layout/layoutHelpers.ts

@@ -28,3 +28,10 @@ export function getNavigationPluginModule(
 
   return plugin.module;
 }
+
+export function isVideoOverlayVisible(videoModalState) {
+  return (
+    !videoModalState.visible ||
+    ["MINIMIZED", "MAXIMIZED"].includes(videoModalState.mode)
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "15.0.0-rc.11",
+  "version": "15.0.0-rc.111",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -27,11 +27,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-core": "15.0.0-rc.11",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.11",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.11",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.11",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.11",
+    "@applicaster/quick-brick-core": "15.0.0-rc.111",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.111",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.111",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.111",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.111",
     "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",