@applicaster/zapp-react-native-utils 16.0.0-alpha.6861239588 → 16.0.0-alpha.6918106967

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/__tests__/index.test.tsx

@@ -7,6 +7,7 @@ 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}>
@@ -188,6 +203,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(), {

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";

package/reactHooks/navigation/usePresentScreen.ts

@@ -0,0 +1,157 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { useCallback } from "react";
+
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { modalStore } from "../../modalState";
+import { isWeb } from "../../reactUtils";
+import { createLogger } from "../../logger";
+import { useRivers } from "../state";
+
+const { log_error, log_info } = createLogger({
+  subsystem: "usePresentScreen",
+  category: "General",
+});
+
+export interface PresentScreenArgs {
+  /** The screen type to present (from content types mapping) */
+  typeMapping: string;
+
+  /** Entry to present the screen with. Omit to present the screen on its own. */
+  entry?: ZappEntry;
+}
+
+export interface PresentScreenResult {
+  /** The presented screen completed successfully */
+  success: boolean;
+
+  /** The presented screen was dismissed without completing (e.g. the back button) */
+  cancelled: boolean;
+
+  /** Set when the screen could not be presented at all */
+  error?: string;
+
+  /** Whatever the presented screen reported back */
+  payload?: unknown;
+}
+
+export type PresentScreenFn = (
+  args: PresentScreenArgs
+) => Promise<PresentScreenResult>;
+
+interface Dependencies {
+  rivers: Record<string, ZappRiver>;
+  contentTypes: ZappContentTypes;
+}
+
+const failure = (error: string): Promise<PresentScreenResult> => {
+  log_error(`presentScreen: ${error}`);
+
+  return Promise.resolve({ success: false, cancelled: false, error });
+};
+
+/**
+ * Presents a screen as a modal and resolves once that screen reports a result
+ * or is dismissed.
+ *
+ * The screen is rendered by the ModalProvider through the regular ScreenResolver,
+ * so it receives the `resultCallback` we pass here as its `callback` prop — the
+ * same channel hook screens already use to report success and cancellation.
+ */
+export const presentScreen = ({
+  typeMapping,
+  entry,
+  rivers,
+  contentTypes,
+}: PresentScreenArgs & Dependencies): Promise<PresentScreenResult> => {
+  if (!typeMapping) {
+    return failure("typeMapping option is missing");
+  }
+
+  // The web ModalProvider renders nothing, so no result could ever arrive and
+  // awaiting one would stall the caller indefinitely.
+  if (isWeb()) {
+    return failure("screens can not be presented as modals on web");
+  }
+
+  const screenId = contentTypes?.[typeMapping]?.screen_id;
+
+  if (!screenId) {
+    return failure(`can not resolve screen type mapping: ${typeMapping}`);
+  }
+
+  const river = rivers?.[screenId];
+
+  if (!river) {
+    return failure(`can not resolve river for screen id: ${screenId}`);
+  }
+
+  return new Promise<PresentScreenResult>((resolve) => {
+    let settled = false;
+    let unsubscribe: () => void = () => {};
+
+    const settle = (result: PresentScreenResult) => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      unsubscribe();
+      resolve(result);
+    };
+
+    const resultCallback = ({
+      success,
+      cancelled,
+      payload,
+    }: hookCallbackArgs) =>
+      settle({ success: !!success, cancelled: !!cancelled, payload });
+
+    const props: Record<string, unknown> = { resultCallback };
+
+    if (entry) {
+      // The ModalProvider turns this into the screen's ScreenDataContext and
+      // screenData, so the presented screen reads the entry exactly as it
+      // would when navigated to.
+      props.entry = entry;
+    }
+
+    log_info(
+      `presentScreen: presenting screen type: ${typeMapping}${
+        entry ? ` with entry id: ${entry.id}` : ""
+      }`
+    );
+
+    modalStore.getState().openModal({ item: river, props });
+
+    // Covers every dismissal we do not initiate ourselves: the hardware back
+    // button (via the Modal's onRequestClose), a swipe dismiss, another modal
+    // taking our slot, or dismissModal() called from anywhere else.
+    unsubscribe = modalStore.subscribe(({ modalState }) => {
+      if (!modalState.visible || modalState.screen !== river) {
+        settle({ success: false, cancelled: true });
+      }
+    });
+  }).then((result) => {
+    // Only take down our own modal — by now something else may already own the slot.
+    if (modalStore.getState().modalState.screen === river) {
+      modalStore.getState().dismissModal();
+    }
+
+    return result;
+  });
+};
+
+/**
+ * @returns a function presenting a screen as a modal, resolving with its result.
+ */
+export const usePresentScreen = (): PresentScreenFn => {
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
+
+  return useCallback(
+    (args: PresentScreenArgs) =>
+      presentScreen({ ...args, rivers, contentTypes }),
+    [rivers, contentTypes]
+  );
+};

package/reactHooks/navigation/useRoute.ts

@@ -80,7 +80,20 @@ export const useRoute = (
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
+    if (!modalScreenData) {
+      return { screenData: {} as ZappEntry, pathname };
+    }
+
+    // Mirror the pushed-screen shape ({ ...entry, targetScreen }) so a screen
+    // presented as a modal reads its entry the same way it would when
+    // navigated to, instead of only seeing the bare river.
+    const screenData = legacyScreenData(
+      {
+        screen: modalScreenData,
+        entry: modalState.props?.entry as NavigatorEntry,
+      },
+      plugins
+    );
 
     return { screenData, pathname };
   }

package/reactHooks/state/useComponentScreenState.ts

@@ -41,5 +41,5 @@ export const useComponentScreenState = <T = unknown>(
     [componentId, store]
   );
 
-  return [value, setValue] as const;
+  return [value, setValue];
 };

package/reactHooks/usePluginConfiguration.ts

@@ -24,7 +24,10 @@ export function parsePluginConfiguration(plugin, manifest) {
   return populateFields(plugin, manifest.custom_configuration_fields);
 }
 
-export function usePluginConfiguration<T, S>(identifier, manifest) {
+export function usePluginConfiguration<T = any, S = Record<string, any>>(
+  identifier: string,
+  manifest?: any
+) {
   const plugins = usePlugins();
 
   const plugin = useMemo(

package/reactHooks/utils/__tests__/index.test.js

@@ -1,5 +1,5 @@
-import { usePrevious, useIsInitialRender } from "../";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { usePrevious, useIsInitialRender, useForceUpdate } from "../";
+import { renderHook, cleanup, act } from "@testing-library/react-native";
 
 describe("usePrevious", () => {
   it("renders", () => {
@@ -49,3 +49,23 @@ describe("useIsInitialRender", () => {
     expect(result.current).toBe(false);
   });
 });
+
+describe("useForceUpdate", () => {
+  it("forces component to re-render when called", () => {
+    let renderCount = 0;
+
+    const { result } = renderHook(() => {
+      renderCount++;
+
+      return useForceUpdate();
+    });
+
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      result.current();
+    });
+
+    expect(renderCount).toBe(2);
+  });
+});

package/reactHooks/utils/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useReducer, useRef } from "react";
 
 /**
  * This hook returns a previous value that was passed to it.
@@ -31,6 +31,16 @@ export const useIsInitialRender = (): boolean => {
   return isInitialRenderRef.current;
 };
 
+/**
+ * Returns a function that forces a re-render of the component when invoked.
+ * @return {() => void}
+ */
+export const useForceUpdate = (): (() => void) => {
+  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);
+
+  return forceUpdate;
+};
+
 export const checkIsLocalFeed = (feedUrl) => feedUrl?.startsWith("pipesv2://");
 
 export const shouldDispatchData = (

package/stringUtils/__tests__/stringUtils.test.js

@@ -122,6 +122,48 @@ describe("inflate string", () => {
       "this is a string with custom separators"
     );
   });
+
+  it("does not HTML-escape search variables containing single quotes or apostrophes", () => {
+    const string = "https://api.example.com/search?q={{search.query}}";
+    const data = { search: { query: "L'aventure" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.example.com/search?q=L'aventure"
+    );
+  });
+
+  it("search context with straight apostrophe", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l'a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l'a"
+    );
+  });
+
+  it("search context with backtick apostrophe", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l`a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l`a"
+    );
+  });
+
+  it("search context with right single quotation mark", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l’a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l’a"
+    );
+  });
 });
 
 describe("objectToReadableString", () => {

package/stringUtils/index.ts

@@ -72,8 +72,8 @@ const valueIsNull = (value) => () => value === null;
 const encodeHelper = "encodeURL";
 
 const encodeHandlebarsExpressions = R.compose(
-  R.replace(/{{([^}]+)}}/g, (match, p1) =>
-    p1.includes("search") ? match : `{{{${encodeHelper} ${p1}}}}`
+  R.replace(/{{([^}]+)}}/g, (_, p1) =>
+    p1.includes("search") ? `{{{${p1}}}}` : `{{{${encodeHelper} ${p1}}}}`
   )
 );
 

package/uiActionsRegistrator/__tests__/resolveActionIdentifiers.test.ts

@@ -0,0 +1,93 @@
+import {
+  parseActionIdentifiers,
+  resolveActionIdentifiers,
+} from "../resolveActionIdentifiers";
+import { uiActionsRegistry } from "../registry";
+
+const action = (identifier: string) =>
+  ({ identifier, action: { invokeAction: jest.fn() } }) as any;
+
+describe("parseActionIdentifiers", () => {
+  it("parses comma-separated identifiers", () => {
+    expect(parseActionIdentifiers(" a, b , ,c ")).toEqual(["a", "b", "c"]);
+  });
+
+  it("parses identifier arrays", () => {
+    expect(parseActionIdentifiers([" a ", "", "b", "  ", "c"])).toEqual([
+      "a",
+      "b",
+      "c",
+    ]);
+  });
+
+  it("returns empty array for nil config", () => {
+    expect(parseActionIdentifiers(null)).toEqual([]);
+    expect(parseActionIdentifiers(undefined)).toEqual([]);
+  });
+});
+
+describe("resolveActionIdentifiers", () => {
+  const entry = { id: "entry-1" } as any;
+
+  beforeEach(() => {
+    jest
+      .spyOn(uiActionsRegistry, "getActions")
+      .mockImplementation((identifier) => [action(identifier)] as any);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("resolves through registry by default", () => {
+    const result = resolveActionIdentifiers({
+      identifiers: "favorites,share",
+      entry,
+    });
+
+    expect(result.map((item) => item.identifier)).toEqual([
+      "favorites",
+      "share",
+    ]);
+
+    expect(uiActionsRegistry.getActions).toHaveBeenCalledWith(
+      "favorites",
+      entry
+    );
+
+    expect(uiActionsRegistry.getActions).toHaveBeenCalledWith("share", entry);
+  });
+
+  it("expands entry_actions through the caller, not the registry", () => {
+    const expanded = [action("entry_action_0"), action("entry_action_1")];
+    const expandEntryActions = jest.fn(() => expanded);
+
+    const unregister = uiActionsRegistry.registerAction("share", {
+      invokeAction: jest.fn(),
+    });
+
+    try {
+      const result = resolveActionIdentifiers({
+        identifiers: "entry_actions,share",
+        entry,
+        expandEntryActions,
+      });
+
+      expect(expandEntryActions).toHaveBeenCalledWith(entry);
+
+      expect(result.map((item) => item.identifier)).toEqual([
+        "entry_action_0",
+        "entry_action_1",
+        "share",
+      ]);
+    } finally {
+      unregister();
+    }
+  });
+
+  it("resolves nothing for entry_actions when the caller cannot expand it", () => {
+    expect(
+      resolveActionIdentifiers({ identifiers: "entry_actions", entry })
+    ).toEqual([]);
+  });
+});