@applicaster/zapp-react-native-utils 16.0.0-alpha.1745039402 → 16.0.0-alpha.1774022213

package/reactHooks/cell-click/index.ts

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import {
   useNavigation,
   useProfilerLogging,
@@ -28,7 +29,6 @@ import { useScreenStateStore } from "../navigation/useScreenStateStore";
 type Props = {
   item?: ZappEntry;
   index?: number;
-  component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
 };
 
@@ -37,16 +37,16 @@ type onPressReturnFn =
   | (() => void);
 
 export const useCellClick = ({
-  component,
   zappPipesData,
   item,
-}: Props): onPressReturnFn => {
+}: Props = {}): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
   const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const component = useUIComponentContext();
   const screenData = useCurrentScreenData();
   const screenState = useScreenContext()?.options;
   const entry = useScreenContext()?.entry;
@@ -83,6 +83,12 @@ export const useCellClick = ({
 
       logOnPress(selectedItem, pathname, component, onCellTap);
 
+      const tapActions = selectedItem?.extensions?.tap_actions?.actions;
+
+      const finishesHook =
+        Array.isArray(tapActions) &&
+        tapActions.some((action) => action?.type === "finishHook");
+
       if (selectedItem) {
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
@@ -101,20 +107,21 @@ export const useCellClick = ({
             url: selectedItem.link.href,
           });
         }
-      } else {
-        if (isFunction(onCellTap)) {
-          onCellTap?.(selectedItem, _index);
-        } else {
-          if (currentRoute === pathname || pathname.includes("video-modal")) {
-            const targetScreen = component?.data?.target;
-
-            push(
-              R.when(
-                () => targetScreen,
-                R.mergeLeft({ screen_type: targetScreen })
-              )(selectedItem)
-            );
-          }
+      } else if (isFunction(onCellTap)) {
+        onCellTap?.(selectedItem, _index);
+      } else if (!finishesHook) {
+        // finishHook already completes the hook and navigates to the original
+        // target. Pushing the cell as well stacks a second copy of that screen
+        // (e.g. home/home after a profile selector hook).
+        if (currentRoute === pathname || pathname.includes("video-modal")) {
+          const targetScreen = component?.data?.target;
+
+          push(
+            R.when(
+              () => targetScreen,
+              R.mergeLeft({ screen_type: targetScreen })
+            )(selectedItem)
+          );
         }
       }
     },

package/reactHooks/feed/__tests__/useInflatedUrl.test.tsx

@@ -242,4 +242,29 @@ describe("useGetUrlInflater", () => {
     const url = result.current(source, mapping);
     expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
   });
+
+  it("handles search queries with apostrophes without HTML entity escaping or URL truncation", () => {
+    const source =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q={{q}}";
+
+    const mapping = {
+      q: { source: "search", property: "q" },
+    };
+
+    const searchContext = getSearchContext("L'aventure", mapping);
+
+    const result = getInflatedDataSourceUrl({
+      source,
+      contexts: {
+        search: searchContext,
+      },
+      mapping,
+    });
+
+    expect(result).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q=L'aventure"
+    );
+
+    expect(result).not.toContain("'");
+  });
 });

package/reactHooks/index.ts

@@ -17,3 +17,5 @@ export * from "./screen";
 export * from "./state";
 
 export * from "./events";
+
+export * from "./utils";

package/reactHooks/layout/index.ts

@@ -49,7 +49,7 @@ export function useStatusBarHeight() {
   });
 }
 
-const getNavbarHeight = () => {
+export const getNavbarHeight = () => {
   return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
 };
 

package/reactHooks/navigation/__mocks__/index.ts

@@ -38,3 +38,7 @@ export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
 
 export const useIsScreenActive = jest.fn().mockReturnValue(true);
+
+export const isScreenActiveForRoute = jest.fn(
+  (route, currentRoute) => route === currentRoute
+);

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

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
-import { renderHook } from "@testing-library/react-native";
+import { act, render, renderHook } from "@testing-library/react-native";
 import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
 
 const plugins = [];
 
@@ -156,6 +157,20 @@ const videoModalWrapper = ({ children }) => (
   </Provider>
 );
 
+const modalEntry = { id: "modal-entry-1", type: { value: "video" } };
+
+const modalPathname = `${ROUTE_TYPES.MODAL}/${rivers["river-general"].id}`;
+
+const modalWrapper = ({ children }) => (
+  <Provider store={store}>
+    <NavigationContext.Provider value={mainStackNavigator}>
+      <PathnameContext.Provider value={modalPathname}>
+        {children}
+      </PathnameContext.Provider>
+    </NavigationContext.Provider>
+  </Provider>
+);
+
 const hookModalWrapper = ({ children }) => (
   <Provider store={store}>
     <NavigationContext.Provider value={hookModalNavigator}>
@@ -166,6 +181,45 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
+// Reports every render of useRoute so the tests below can assert on route
+// transitions and on subscription behaviour, not just on a one-shot result.
+function RouteProbe({ onRender }: { onRender: (route: any) => void }) {
+  onRender(useRoute());
+
+  return null;
+}
+
+const openRiverModal = () =>
+  act(() => {
+    modalStore.getState().openModal({
+      item: rivers["river-general"] as any,
+      props: { entry: modalEntry },
+    });
+  });
+
+const renderRouteProbe = (pathname: string, onRender: (route: any) => void) => {
+  const tree = (currentPathname: string) => (
+    <Provider store={store}>
+      <ScreenDataContext.Provider value={homeStack.state}>
+        <NavigationContext.Provider value={videoModalNavigator}>
+          <PathnameContext.Provider value={currentPathname}>
+            <RouteProbe onRender={onRender} />
+          </PathnameContext.Provider>
+        </NavigationContext.Provider>
+      </ScreenDataContext.Provider>
+    </Provider>
+  );
+
+  const { rerender } = render(tree(pathname));
+
+  return {
+    navigateTo: (nextPathname: string) =>
+      act(() => {
+        rerender(tree(nextPathname));
+      }),
+  };
+};
+
 describe("navigation", () => {
   describe("useRoute", () => {
     describe("Main stack components", () => {
@@ -188,6 +242,39 @@ describe("navigation", () => {
       });
     });
 
+    describe("Modal components", () => {
+      beforeEach(() => {
+        modalStore.getState().openModal({
+          item: rivers["river-general"] as any,
+          props: { entry: modalEntry },
+        });
+      });
+
+      afterEach(() => {
+        modalStore.getState().dismissModal();
+      });
+
+      it("should return a correct pathname", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: modalWrapper,
+        });
+
+        expect(result.current.pathname).toEqual(modalPathname);
+      });
+
+      it("should return correct screenData information", () => {
+        const { result } = renderHook(() => useRoute(), {
+          wrapper: modalWrapper,
+        });
+
+        expect(result.current.screenData.id).toEqual(modalEntry.id);
+
+        expect(result.current.screenData.targetScreen.id).toEqual(
+          rivers["river-general"].id
+        );
+      });
+    });
+
     describe("Hook modal components", () => {
       it("should return a correct pathname", () => {
         const { result } = renderHook(() => useRoute(), {
@@ -231,6 +318,94 @@ describe("navigation", () => {
         );
       });
     });
+
+    describe("store subscriptions", () => {
+      afterEach(() => {
+        act(() => {
+          modalStore.getState().dismissModal();
+        });
+      });
+
+      // Every hook in useRoute must run on every render. When the modal and
+      // hook-modal subscriptions lived inside the route branches, walking a
+      // single mounted component through the route types changed the hook
+      // count and React threw "Rendered more hooks than during the previous
+      // render".
+      it("keeps a stable hook order when the route type changes", () => {
+        let route: any;
+
+        const { navigateTo } = renderRouteProbe(homeStack.route, (current) => {
+          route = current;
+        });
+
+        expect(route.screenData.id).toEqual(entry.id);
+        expect(route.screenData.targetScreen.id).toEqual(screen.id);
+
+        openRiverModal();
+        navigateTo(modalPathname);
+
+        expect(route.pathname).toEqual(modalPathname);
+        expect(route.screenData.id).toEqual(modalEntry.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-general"].id
+        );
+
+        navigateTo(hooksModalPathname);
+
+        expect(route.pathname).toEqual(hooksModalPathname);
+
+        expect(route.screenData.id).toEqual(
+          hookModalContextState.state.screenData.payload.id
+        );
+
+        navigateTo(videoModalPathname);
+
+        expect(route.pathname).toEqual(videoModalPathname);
+        expect(route.screenData.id).toEqual(videoItem.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-player"].id
+        );
+
+        navigateTo(homeStack.route);
+
+        expect(route.pathname).toEqual(homeStack.route);
+        expect(route.screenData.id).toEqual(entry.id);
+      });
+
+      it("does not re-render a non-modal route when modal state changes", () => {
+        let renders = 0;
+
+        renderRouteProbe(homeStack.route, () => {
+          renders += 1;
+        });
+
+        const rendersBeforeOpen = renders;
+
+        openRiverModal();
+
+        expect(renders).toBe(rendersBeforeOpen);
+      });
+
+      it("re-renders a modal route when modal state changes", () => {
+        let route: any;
+
+        renderRouteProbe(modalPathname, (current) => {
+          route = current;
+        });
+
+        expect(route.screenData).toEqual({});
+
+        openRiverModal();
+
+        expect(route.screenData.id).toEqual(modalEntry.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-general"].id
+        );
+      });
+    });
   });
 
   describe("isNavBarVisible", () => {

package/reactHooks/navigation/__tests__/useIsScreenActive.test.ts

@@ -0,0 +1,42 @@
+import { isScreenActiveForRoute } from "../useIsScreenActive";
+
+describe("isScreenActiveForRoute", () => {
+  const route = "/river/home/river/tabs";
+  const currentRoute = "/river/home/river/tabs";
+
+  it("returns false when route does not match", () => {
+    expect(
+      isScreenActiveForRoute(route, "/river/home", { visible: false })
+    ).toBe(false);
+  });
+
+  it("keeps underlying screen active when video modal is docked", () => {
+    expect(
+      isScreenActiveForRoute(route, currentRoute, {
+        visible: true,
+        mode: "MINIMIZED",
+      })
+    ).toBe(true);
+  });
+
+  it.each(["FULLSCREEN", "MAXIMIZED", "PIP"])(
+    "deactivates underlying screen when video modal is visible",
+    (mode) => {
+      expect(
+        isScreenActiveForRoute(route, currentRoute, {
+          visible: true,
+          mode,
+        })
+      ).toBe(false);
+    }
+  );
+
+  it("keeps video-modal route active when video modal is open", () => {
+    expect(
+      isScreenActiveForRoute("video-modal/123", currentRoute, {
+        visible: true,
+        mode: "FULLSCREEN",
+      })
+    ).toBe(true);
+  });
+});

package/reactHooks/navigation/__tests__/usePresentScreen.test.ts

@@ -0,0 +1,154 @@
+import { modalStore } from "../../../modalState";
+import { isWeb } from "../../../reactUtils";
+import { presentScreen } from "../usePresentScreen";
+
+jest.mock("../../../reactUtils", () => ({
+  ...jest.requireActual("../../../reactUtils"),
+  isWeb: jest.fn(() => false),
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const rivers = { "river-parent-lock": river };
+
+const contentTypes = { parent_lock: { screen_id: "river-parent-lock" } };
+
+const present = (args = {}) =>
+  presentScreen({ typeMapping: "parent_lock", rivers, contentTypes, ...args });
+
+const modalState = () => modalStore.getState().modalState;
+
+const screenCallback = () => modalState().props?.resultCallback as hookCallback;
+
+describe("presentScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (isWeb as jest.Mock).mockReturnValue(false);
+    modalStore.getState().dismissModal();
+  });
+
+  it("opens a modal with the river resolved from typeMapping", () => {
+    void present();
+
+    expect(modalState().visible).toBe(true);
+    expect(modalState().screen).toBe(river);
+  });
+
+  it("resolves with success when the presented screen reports success", async () => {
+    const result = present();
+
+    screenCallback()({ success: true, payload: { verified: true } });
+
+    await expect(result).resolves.toMatchObject({
+      success: true,
+      cancelled: false,
+      payload: { verified: true },
+    });
+  });
+
+  it("dismisses the modal once the presented screen reports a result", async () => {
+    const result = present();
+
+    screenCallback()({ success: true, payload: {} });
+    await result;
+
+    expect(modalState().visible).toBe(false);
+  });
+
+  it("resolves as cancelled when the modal is dismissed without a result", async () => {
+    const result = present();
+
+    // What the hardware back button does: RN Modal's onRequestClose resets modal state.
+    modalStore.getState().dismissModal();
+
+    await expect(result).resolves.toMatchObject({
+      success: false,
+      cancelled: true,
+    });
+  });
+
+  it("resolves as cancelled when the presented screen reports cancellation", async () => {
+    const result = present();
+
+    screenCallback()({ success: false, payload: {}, cancelled: true });
+
+    await expect(result).resolves.toMatchObject({
+      success: false,
+      cancelled: true,
+    });
+  });
+
+  it("resolves as cancelled when another modal replaces the presented screen", async () => {
+    const result = present();
+
+    modalStore.getState().openModal({ item: { id: "other-modal" } as any });
+
+    await expect(result).resolves.toMatchObject({ cancelled: true });
+  });
+
+  it("leaves the modal that replaced the presented screen open", async () => {
+    const result = present();
+    const other = { id: "other-modal" } as any;
+
+    modalStore.getState().openModal({ item: other });
+    await result;
+
+    expect(modalState().screen).toBe(other);
+    expect(modalState().visible).toBe(true);
+  });
+
+  it("ignores a result reported after the modal was already cancelled", async () => {
+    const result = present();
+    const callback = screenCallback();
+
+    modalStore.getState().dismissModal();
+    callback({ success: true, payload: {} });
+
+    await expect(result).resolves.toMatchObject({
+      success: false,
+      cancelled: true,
+    });
+  });
+
+  it("hands the entry to the ModalProvider so it reaches ScreenDataContext", () => {
+    const entry = { id: "entry-1", type: { value: "video" } } as any;
+
+    void present({ entry });
+
+    expect(modalState().props?.entry).toBe(entry);
+  });
+
+  it("omits the entry when the screen is presented without one", () => {
+    void present();
+
+    expect(modalState().props).not.toHaveProperty("entry");
+  });
+
+  it("fails without opening a modal when typeMapping has no content type", async () => {
+    const result = await present({ typeMapping: "unmapped" });
+
+    expect(result).toMatchObject({ success: false, cancelled: false });
+    expect(result.error).toEqual(expect.any(String));
+    expect(modalState().visible).toBe(false);
+  });
+
+  it("fails without opening a modal when the content type resolves to a missing river", async () => {
+    const result = await present({
+      contentTypes: { parent_lock: { screen_id: "gone" } },
+    });
+
+    expect(result).toMatchObject({ success: false, cancelled: false });
+    expect(result.error).toEqual(expect.any(String));
+    expect(modalState().visible).toBe(false);
+  });
+
+  it("fails without opening a modal on web, where no modal host exists", async () => {
+    (isWeb as jest.Mock).mockReturnValue(true);
+
+    const result = await present();
+
+    expect(result).toMatchObject({ success: false, cancelled: false });
+    expect(result.error).toEqual(expect.any(String));
+    expect(modalState().visible).toBe(false);
+  });
+});

package/reactHooks/navigation/index.ts

@@ -22,6 +22,8 @@ import { useLayoutVersion } from "../layout";
 
 export { useNavigation } from "./useNavigation";
 
+export { usePresentScreen, presentScreen } from "./usePresentScreen";
+
 export { useRoute } from "./useRoute";
 
 export { usePathname } from "./usePathname";
@@ -32,7 +34,7 @@ export { useNavigationType } from "./useNavigationType";
 
 export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
-export { useIsScreenActive } from "./useIsScreenActive";
+export { useIsScreenActive, isScreenActiveForRoute } from "./useIsScreenActive";
 
 export { useProfilerLogging } from "./useProfilerLogging";
 

package/reactHooks/navigation/useIsScreenActive.ts

@@ -2,20 +2,41 @@ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
+type VideoModalState = {
+  visible?: boolean;
+  mode?: string;
+} | null;
 
-  if (videoModalState.visible) {
-    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
+/**
+ * Whether a navigation route should be treated as the active/focused screen.
+ * Docked (MINIMIZED) video modal does not deactivate the underlying screen —
+ * only FULLSCREEN / MAXIMIZED / PIP do.
+ */
+export function isScreenActiveForRoute(
+  route: string,
+  currentRoute: string,
+  videoModalState: VideoModalState
+) {
+  if (videoModalState?.visible) {
+    if (route.includes(ROUTE_TYPES.VIDEO_MODAL)) {
       return true;
     }
 
-    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
+    if (
+      ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode ?? "")
+    ) {
       return false;
     }
+    // MINIMIZED (docked): fall through — underlying screen stays active
   }
 
-  return pathname === currentRoute;
+  return route === currentRoute;
+}
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  return isScreenActiveForRoute(pathname, currentRoute, videoModalState);
 };