@applicaster/zapp-react-native-app 12.0.0-alpha.4433422595 → 12.0.0-alpha.4440903139

package/App/InteractionManager/index.js

@@ -3,21 +3,16 @@ import { BackHandler } from "react-native";
 import * as R from "ramda";
 
 import {
-  sendQuickBrickEvent,
   QUICK_BRICK_EVENTS,
+  sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
-type Props = {
-  children: React.CElement,
-};
-
 const getHome = R.compose(R.find(R.propEq("home", true)), R.values);
 
-const InteractionManagerComponent = (props: Props) => {
-  const { children } = props;
+const InteractionManagerComponent = () => {
   const { sendHardwareBackButtonClickEvent } = useAnalytics();
   const rivers = useRivers();
   const navigator = useNavigation();
@@ -63,19 +58,7 @@ const InteractionManagerComponent = (props: Props) => {
     };
   }, [onHardwareBackPress]);
 
-  return children;
+  return null;
 };
 
 export const InteractionManager = React.memo(InteractionManagerComponent);
-
-export function withInteractionManager(
-  Component: React.ComponentType<any>
-): React.ComponentType<any> {
-  return function InteractionManagerComponent(props) {
-    return (
-      <InteractionManager>
-        <Component {...props} />
-      </InteractionManager>
-    );
-  };
-}

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

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout should match snapshot when appReady is true 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+    testID="on-layout-view"
+  >
+    <View
+      style={
+        Object {
+          "display": "none",
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": "100%",
+            "opacity": 1,
+            "paddingBottom": 50,
+          }
+        }
+      >
+        <View
+          contentStyle={
+            Object {
+              "height": "100%",
+              "opacity": 1,
+              "paddingBottom": 50,
+            }
+          }
+          isRTL={false}
+          testID="transitioner"
+          transitionConfig={[Function]}
+        >
+          <View
+            pathname="home"
+            screenData={Object {}}
+          />
+        </View>
+      </View>
+      <View
+        bottomTabBarHeight={50}
+        closeMenu={[MockFunction]}
+        dimensions={
+          Object {
+            "window": Object {
+              "height": 100,
+              "width": 100,
+            },
+          }
+        }
+        id="home"
+        isRTL={false}
+        navigator={
+          Object {
+            "activeRiver": Object {
+              "navigations": Array [],
+            },
+            "currentRoute": "home",
+            "data": Object {},
+            "isVideoModalDocked": false,
+            "videoModalState": Object {
+              "mode": "MINIMIZED",
+              "visible": false,
+            },
+          }
+        }
+        openMenu={[MockFunction]}
+        setCloseMenu={[MockFunction]}
+        setOpenMenu={[MockFunction]}
+        setToggleMenu={[MockFunction]}
+        testID="menu"
+        toggleMenu={[MockFunction]}
+      />
+      <View
+        testID="zappHooksModal"
+      />
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

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

@@ -0,0 +1,197 @@
+import React from "react";
+import { View } from "react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+const mockUseMenuToggleContext = jest.fn(() => ({
+  toggleMenu: jest.fn(),
+  setToggleMenu: jest.fn(),
+  openMenu: jest.fn(),
+  setOpenMenu: jest.fn(),
+  closeMenu: jest.fn(),
+  setCloseMenu: jest.fn(),
+}));
+
+jest.mock("../layoutHelpers", () => ({
+  // eslint-disable-next-line react/display-name
+  getNavigationPluginModule: () => (props) => <View testID="menu" {...props} />,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Transitioner",
+  () => ({
+    // eslint-disable-next-line react/display-name
+    Transitioner: (props) => <View testID="transitioner" {...props} />,
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Screen",
+  () => ({
+    // eslint-disable-next-line react/display-name
+    Screen: (props) => <View {...props} />,
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/MenuToggleContext",
+  () => ({
+    useMenuToggleContext: mockUseMenuToggleContext,
+  })
+);
+
+const mockUseNavigation = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: mockUseNavigation,
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  ...(jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/navigation"
+  ) as {}),
+  useGetBottomTabBarHeight: jest.fn(() => 50),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/layout/useDimensions",
+  () => ({
+    useDimensions: jest.fn(() => ({ width: 100, height: 100 })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useNavbarState: jest.fn(() => ({ title: "Test Title" })),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext",
+  () => ({
+    ...(jest.requireActual(
+      "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext"
+    ) as {}),
+    useModalAnimationContext: jest.fn(() => ({
+      isActiveGesture: false,
+    })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler",
+  () => ({
+    isMenuVisible: jest.fn(() => true),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal",
+  () => ({
+    // eslint-disable-next-line react/display-name
+    ZappHooksModal: (props) => <View testID="zappHooksModal" {...props} />,
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal",
+  () => ({
+    // eslint-disable-next-line react/display-name
+    VideoModal: (props) => <View testID="videoModal" {...props} />,
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
+  getNavigationProps: () => ({}),
+  resolveNavigationPlugin: () => ({
+    identifier: "quick-brick-bottom-tabs",
+  }),
+}));
+
+const { Layout } = require("../");
+
+describe("Layout", () => {
+  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 />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("should not render transitioner with screen when appReady is false", () => {
+    const { queryByTestId } = renderWithProviders(<Layout />, {
+      appState: {
+        appReady: false,
+        appLaunched: true,
+      },
+    });
+
+    expect(queryByTestId("transitioner")).toBeNull();
+  });
+
+  it("should render menu when showMenu is true", () => {
+    const { getByTestId } = renderWithProviders(<Layout />);
+    expect(getByTestId("menu")).toBeTruthy();
+  });
+
+  it("should render VideoModal when visible & VideoModal is true", () => {
+    mockUseNavigation.mockReturnValue({
+      activeRiver: { navigations: [] },
+      videoModalState: { visible: true, mode: "MINIMIZED" },
+      isVideoModalDocked: false,
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { getByTestId } = renderWithProviders(<Layout />);
+    expect(getByTestId("videoModal")).toBeTruthy();
+  });
+
+  it("should render ZappHooksModal", () => {
+    const { getByTestId } = renderWithProviders(<Layout />);
+    expect(getByTestId("zappHooksModal")).toBeTruthy();
+  });
+
+  it("padding should be non-0 when showMenu is true and isBottomTabsPlugin is true", () => {
+    mockUseNavigation.mockReturnValueOnce({
+      activeRiver: { navigations: [{ identifier: "quick-brick-bottom-tabs" }] },
+      videoModalState: { visible: false, mode: "MINIMIZED" },
+      isVideoModalDocked: false,
+      currentRoute: "home",
+      data: {},
+    });
+
+    const { getByTestId } = renderWithProviders(<Layout />);
+
+    expect(getByTestId("transitioner").props.contentStyle.paddingBottom).toBe(
+      50
+    );
+  });
+
+  it("transitioner should have contentStyle with specific styles", () => {
+    const { getByTestId } = renderWithProviders(<Layout />);
+
+    expect(getByTestId("transitioner").props.contentStyle).toEqual({
+      height: "100%",
+      paddingBottom: 50,
+      opacity: 1,
+    });
+  });
+});

package/App/Layout/index.tsx

@@ -3,12 +3,15 @@ import * as R from "ramda";
 
 import { View } from "react-native";
 
-import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
-  useGetBottomTabBarHeight,
-  useNavigation,
+  getNavigationProps,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
   useDimensions,
+  useGetBottomTabBarHeight,
   useNavbarState,
+  useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { Transitioner } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner";
 import { transitionConfig } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner/config";
@@ -20,9 +23,16 @@ import { getNavigationPluginModule } from "./layoutHelpers";
 import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
-import { MenuToggleContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
+import {
+  useMenuToggleContext,
+  MenuToggleContextType,
+} from "@applicaster/zapp-react-native-ui-components/Contexts/MenuToggleContext";
 import { VideoModal } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
+import {
+  withModalAnimationProvider,
+  useModalAnimationContext,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import { ZappHooksModal } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal";
 import { useListenEventBusEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useListenEventBusEvent";
@@ -32,22 +42,11 @@ import {
   PushTopicManagerEvents,
 } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 
-type Props = {
-  children: React.ReactNode;
-  toggleMenu: any;
-  setToggleMenu: () => void;
-  openMenu: any;
-  setOpenMenu: () => void;
-  closeMenu: any;
-  setCloseMenu: () => void;
-  navigator: QuickBrickAppNavigator;
-};
-
 const containerStyle = {
   height: "100%",
 };
 
-const LayoutWithMenu = (props: Props) => {
+const LayoutWithMenu = () => {
   const {
     plugins,
     appState: { appReady },
@@ -60,7 +59,7 @@ const LayoutWithMenu = (props: Props) => {
     setOpenMenu,
     closeMenu,
     setCloseMenu,
-  } = props;
+  } = useMenuToggleContext();
 
   const dimensions = useDimensions("screen", { fullDimensions: true });
   const isRTL = useIsRTL();
@@ -70,6 +69,12 @@ const LayoutWithMenu = (props: Props) => {
 
   const { activeRiver, videoModalState, isVideoModalDocked } = navigator;
 
+  const plugin = resolveNavigationPlugin({
+    category: "menu",
+    navigations: activeRiver?.navigations,
+    plugins,
+  });
+
   const Menu = React.useMemo(
     () =>
       getNavigationPluginModule(
@@ -77,46 +82,75 @@ const LayoutWithMenu = (props: Props) => {
         activeRiver,
         plugins
       ) as React.ComponentType<
-        MobileNavBarPluginProps & { navigator: ZappNavigation }
+        MobileNavBarPluginProps &
+          MenuToggleContextType & {
+            navigator: QuickBrickAppNavigator;
+          }
       >,
-    []
+    [activeRiver]
   );
 
+  const { isActiveGesture } = useModalAnimationContext();
+
+  /** BTB shown when videoModalState - visible & minimized, maximized & animation gesture is active
+   * otherwise hidden if videoModalState - visible
+   * also check isMenuVisible
+   */
   const showMenu = React.useMemo(
-    () => isMenuVisible(navigator.currentRoute, navigator.screenData),
-    [navigator.currentRoute]
+    () =>
+      ((videoModalState.visible &&
+        (videoModalState.mode === "MINIMIZED" ||
+          (videoModalState.mode === "MAXIMIZED" && isActiveGesture))) ||
+        !videoModalState.visible) &&
+      isMenuVisible(navigator.currentRoute, navigator.screenData),
+    [
+      videoModalState.visible,
+      videoModalState.mode,
+      navigator.currentRoute,
+      isActiveGesture,
+    ]
   );
 
+  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
+
+  const paddingBottom = React.useMemo(() => {
+    return showMenu && isBottomTabsPlugin ? bottomTabBarHeight : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
+  }, [showMenu, isBottomTabsPlugin, bottomTabBarHeight]);
+
   const contentStyle = React.useMemo(
     () => ({
-      ...(showMenu
-        ? {
-            paddingBottom: bottomTabBarHeight,
-          }
-        : {}),
       ...containerStyle,
+      paddingBottom,
       opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
     }),
-    [bottomTabBarHeight, videoModalState.visible, isVideoModalDocked, showMenu]
+    [videoModalState.visible, isVideoModalDocked, paddingBottom]
   );
 
-  const menuProps = {
-    setToggleMenu: setToggleMenu,
-    toggleMenu: toggleMenu,
-    openMenu: openMenu,
-    setOpenMenu: setOpenMenu,
-    closeMenu: closeMenu,
-    setCloseMenu: setCloseMenu,
-    dimensions: { window: dimensions },
-    navigator,
-    ...getNavigationProps({
+  const menuProps = React.useMemo(() => {
+    const navigationProps = getNavigationProps({
       navigator,
       title,
       category: "menu",
-    }),
-    bottomTabBarHeight,
-    isRTL,
-  };
+    }) ?? {
+      selected: "",
+      title: "",
+      home: false,
+      rules: {} as ZappNavBarRules,
+      assets: {} as ZappNavBarAssets,
+      styles: {},
+      nav_items: [] as NavBarItem[],
+    };
+
+    const props = {
+      ...navigationProps,
+      dimensions: { window: dimensions },
+      bottomTabBarHeight,
+      isRTL,
+      navigator,
+    };
+
+    return { ...props, id: navigator.currentRoute };
+  }, [dimensions, isRTL, bottomTabBarHeight, navigator.currentRoute]);
 
   useListenEventBusEvent(
     PushTopicManagerConsts.PushTopicManagerSubscriptionID,
@@ -136,21 +170,28 @@ const LayoutWithMenu = (props: Props) => {
         <View style={contentStyle}>
           <Transitioner
             transitionConfig={transitionConfig}
-            contentStyle={showMenu ? contentStyle : {}}
+            contentStyle={contentStyle}
             isRTL={isRTL}
           >
-            {/* has pathname context */}
             <Screen
               key={navigator.currentRoute}
               pathname={navigator.currentRoute} // required by TransitionerComponent
-              screenData={navigator.screenData} // required by TransitionerComponent
-              setToggleMenu={setToggleMenu}
-              setCloseMenu={setCloseMenu}
+              screenData={navigator.data} // required by TransitionerComponent
             />
           </Transitioner>
         </View>
       ) : null}
-      {showMenu && <Menu {...{ ...menuProps, id: navigator.currentRoute }} />}
+      {showMenu && (
+        <Menu
+          {...menuProps}
+          setToggleMenu={setToggleMenu}
+          toggleMenu={toggleMenu}
+          openMenu={openMenu}
+          setOpenMenu={setOpenMenu}
+          closeMenu={closeMenu}
+          setCloseMenu={setCloseMenu}
+        />
+      )}
       {/* depends on active river. @TODO move below screen context */}
       {VideoModal && videoModalState.visible && <VideoModal />}
       <ZappHooksModal />
@@ -159,6 +200,6 @@ const LayoutWithMenu = (props: Props) => {
 };
 
 export const Layout = R.compose(
-  MenuToggleContext.withConsumer,
-  withDimensionsProvider
+  withDimensionsProvider,
+  withModalAnimationProvider
 )(LayoutWithMenu);

package/App/__tests__/app.test.js

@@ -54,6 +54,11 @@ jest.mock(
   () => () => null
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => ({ withModalAnimationProvider: () => null })
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   SafeAreaProvider: jest.fn(
     () =>

package/App/index.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
 import * as R from "ramda";
-import { NativeRouter, useLocation, useHistory } from "react-router-native";
+import { NativeRouter, useHistory, useLocation } from "react-router-native";
 // @ts-ignore
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { OfflineHandler } from "@applicaster/zapp-react-native-ui-components/Components/OfflineHandler";
 
-import { withInteractionManager } from "./InteractionManager";
+import { InteractionManager } from "./InteractionManager";
 
 import { Layout } from "./Layout";
 
@@ -22,6 +22,6 @@ export const ZappApp: React.ComponentType<Props> = createQuickBrickApp({
   QuickBrickManager,
   Layout,
   OfflineHandler,
-  InteractionManager: withInteractionManager, // mostly back button handle in Android
+  InteractionManager, // mostly back button handle in Android
   ContextProviders: R.map(R.prop("withProvider"), R.values(Contexts)),
 });

package/package.json

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

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

@@ -1,7 +0,0 @@
-describe("Layout", () => {
-  it.todo("should match snapshot when appReady is true");
-  it.todo("should not render transitioner with screen when appReady is false");
-  it.todo("should render menu when showMenu is true");
-  it.todo("should render VideoModal when visible & VideoModal is true");
-  it.todo("should render ZappHooksModal");
-});