@applicaster/zapp-react-native-utils 12.0.0-alpha.7725319213 → 12.0.0-alpha.7855034103

package/reactHooks/navigation/index.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint max-len: off */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { isEmpty } from "ramda";
 
 import {
   useContentTypes,
@@ -17,18 +18,104 @@ 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 {
+  getNavigationProps,
+  getRiverFromRoute,
+  getTargetRoute,
+} 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";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 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 +130,91 @@ 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 screenDataContext = legacyScreenData(useContext(ScreenDataContext));
+
+  const { plugins, contentTypes, rivers } = usePickFromState([
+    "plugins",
+    "rivers",
+    "contentTypes",
+  ]);
+
+  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
+    );
+
+  // 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)) {
+    return { screenData: screenDataContext, pathname };
+  }
+
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = isEmpty(screenDataContext)
+    ? navigator.screenData
+    : screenDataContext;
+
+  return { screenData, pathname };
+};
+
 type Callbacks = Partial<{
   handleHookPresent: ({
     route,
@@ -209,7 +381,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 +403,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 +417,38 @@ 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;
+};
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
 };

package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 
@@ -12,6 +12,8 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/screen/__mocks__/useScreenContext.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import { View } from "react-native";
 
-const mockData: NavigationScreenData = {
+const mockData = {
   screen: {
     id: "screen-id",
     name: "screen",
@@ -40,3 +40,5 @@ const mockData: NavigationScreenData = {
 };
 
 export const useScreenContext = jest.fn().mockReturnValue(mockData);
+
+export const useNavbarState = () => ({ visible: true });

package/reactHooks/screen/index.ts

@@ -2,6 +2,8 @@ export { useCurrentScreenData } from "./useCurrentScreenData";
 
 export { useTargetScreenData } from "./useTargetScreenData";
 
+export { useScreenData } from "./useScreenData";
+
 export {
   useScreenContext,
   useLegacyScreenData,

package/reactHooks/screen/useScreenContext.ts

@@ -2,11 +2,12 @@ import { useContext, useMemo } from "react";
 
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { useNavigation } from "../navigation";
+import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
-function useScreenContextV2() {
+export function useScreenContextV2() {
   return useContext(ScreenContext);
 }
 
@@ -44,9 +45,9 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = useContext(ScreenDataContext) || navigator.data;
 
-  const screenKey = useMemo(() => navigator?.key, [navigator]);
-  const screenData = useMemo(() => navigator?.data, [screenKey]);
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();

package/reactHooks/screen/useScreenData.ts

@@ -4,7 +4,7 @@ import { useRivers } from "../state";
 
 const logger = utilsLogger.addSubsystem("useScreenData");
 
-export const useScreenData = (screenId?: string): ZappRiver => {
+export const useScreenData = (screenId: string): ZappRiver => {
   const rivers = useRivers();
 
   React.useEffect(() => {

package/reactHooks/state/useRivers.ts

@@ -1,7 +1,9 @@
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
+const riversSelector = ["rivers"];
+
 export const useRivers = () => {
-  const { rivers } = usePickFromState(["rivers"]);
+  const { rivers } = usePickFromState(riversSelector as any);
 
   return rivers;
 };

package/reactHooks/useListenEventBusEvent.ts

@@ -13,10 +13,7 @@ export const useListenEventBusEvent = (
     // TODO: remove after implementing ReactNativeEventBusBridge on iOS
     if (Platform.OS === "android") {
       // subscribe to DeviceEventEmitter using subsciption ID
-      const sub = DeviceEventEmitter.addListener(
-        subscriptionID,
-        handler
-      );
+      const sub = DeviceEventEmitter.addListener(subscriptionID, handler);
 
       // ask native to start routing these events to RN
       ReactNativeEventBusBridge.subscribe(subscriptionID, { [source]: events });

package/reactHooks/videoModal/hooks/useVideoModalScreenData.tsx

@@ -1,8 +1,7 @@
-import {
-  useContentTypes,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import React from "react";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRivers } from "../../state";
 
 export const useVideoModalScreenData = ():
   | (ZappEntry & { targetScreen: any }) // TODO: fix ZappEntry type ( was ZappRiver but conflict )
@@ -12,11 +11,13 @@ export const useVideoModalScreenData = ():
   } = useNavigation();
 
   const contentTypes = useContentTypes();
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
 
-  if (item?.type?.value) {
-    const screenId = contentTypes[item?.type?.value].screen_id;
+  return React.useMemo(() => {
+    if (item?.type?.value) {
+      const screenId = contentTypes[item?.type?.value].screen_id;
 
-    return { ...item, targetScreen: rivers?.[screenId] };
-  }
+      return { ...item, targetScreen: rivers?.[screenId] };
+    }
+  }, [item]);
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -3,7 +3,7 @@ import { NativeModules, StyleSheet, View } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
 import { isApplePlatform, isWeb } from "../reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useRivers } from "../reactHooks/state";
 
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
@@ -58,7 +58,7 @@ export const ScreenLoadingMeasurements = ({
   numberOfComponents,
   riverId,
 }: Props) => {
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const screenData = rivers?.[riverId];
 
   const [itemsLayout, dispatchItemLayout] = React.useReducer(

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/testUtils/getByTestId.ts

@@ -0,0 +1,14 @@
+export const getByTestId = (wrapper, testId) => {
+  try {
+    if (wrapper?.getByTestId) {
+      return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+    } else if (wrapper?.root?.findByProps) {
+      return wrapper.root.findAllByProps({ testID: testId })?.[0] ?? undefined;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};

package/testUtils/index.tsx

@@ -1,13 +1,17 @@
 import * as R from "ramda";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 
 import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { render } from "@testing-library/react-native";
+import { AnalyticsProvider } from "../analyticsUtils";
+
+export { getByTestId } from "./getByTestId";
 
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
@@ -19,17 +23,6 @@ import { render } from "@testing-library/react-native";
 export const testIDEquals = (testId: any): boolean =>
   R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
 
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance
@@ -45,11 +38,11 @@ export const findByType = (type, renderer) => {
 export function createComponentMock(mockName, hasChildren = false) {
   return hasChildren
     ? jest.fn(({ children }) => (
-        <View comp={mockName} testID={mockName}>
+        <View testID={mockName}>
           {typeof children === "function" ? children() : children}
         </View>
       ))
-    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+    : jest.fn(() => <View testID={mockName} />);
 }
 
 const initialState = {
@@ -62,16 +55,34 @@ const initialState = {
     AppContainer: createComponentMock("appContainer", true),
     DisplayError: createComponentMock("displayError"),
   },
-  rivers: [{ id: "A1234", home: true }],
+  rivers: { id: "A1234", home: true },
   appSettings: {},
   plugins: [],
-  appState: { appReady: true },
+  appState: { appReady: true, appLaunched: true },
+  appData: { layoutVersion: "v1" },
+  contentTypes: null,
 };
 
-export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, store });
+export const WrappedWithProviders = ({
+  children,
+  store: storeObj = {},
+}: any) => {
+  const _store = configureStore([thunk])(
+    R.mergeDeepWith(R.concat, { ...initialState }, storeObj)
+  );
 
-  return <Provider store={_store}>{children}</Provider>;
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+      }}
+    >
+      <Provider store={_store}>
+        <AnalyticsProvider>{children}</AnalyticsProvider>
+      </Provider>
+    </SafeAreaProvider>
+  );
 };
 
 /**
@@ -80,8 +91,12 @@ export const WrappedWithProviders = ({ children, store = {} }: any) => {
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, store?: unknown) => {
-  return render(
-    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
-  );
+export const renderWithProviders = (component, storeObj?: unknown) => {
+  return render(component, {
+    wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
+      return (
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+      );
+    },
+  });
 };

package/types.ts

@@ -5,3 +5,7 @@ export type ManifestField<T> = {
   group?: boolean;
   fields?: ManifestField<any>[];
 };
+
+export enum ENDPOINT_TAGS {
+  allow_missing_keys = "allow_missing_keys",
+}