@applicaster/quick-brick-core 16.0.0-alpha.3683430391 → 16.0.0-alpha.3713141261

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/__tests__/useOpenSchemeHandler.test.tsx

@@ -60,11 +60,21 @@ jest.spyOn(useNavigationHooks, "useNavigation").mockReturnValue(navigator);
 const helperSpy = jest.spyOn(helpers, "handlePresentNavigation");
 const feedLoaderSpy = jest.spyOn(feedLoader, "useFeedLoader");
 
-const setEntryContext = jest.fn();
-
-jest.doMock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+const mockSetEntryContext = jest.fn();
+
+// `jest.mock` is hoisted above the imports, so the entry context is replaced
+// before anything can pull the real one in. `jest.doMock` is not hoisted, and
+// only worked here for as long as no import above happened to load this module
+// first - which any new import anywhere in the graph could silently undo,
+// leaving the hook writing to the real context while the spy stayed at zero
+// calls. The rest of the module is kept, since other consumers loaded by this
+// graph read other exports from it.
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-ui-components/Contexts"
+  ),
   ZappPipesEntryContext: {
-    useZappPipesContext: () => [{}, setEntryContext],
+    useZappPipesContext: () => [{}, mockSetEntryContext],
   },
 }));
 
@@ -76,7 +86,7 @@ jest.mock("../../../logger", () => ({
   log_debug: jest.fn(),
 }));
 
-// to use import instead of require it's required to use jest.mock above
+// Required after the mocks above, so the hook binds to them.
 const { useOpenSchemeHandler } = require("../useOpenSchemeHandler");
 
 const mockStoreObj = { rivers, contentTypes, pipesEndpoints, appData };
@@ -101,7 +111,7 @@ function clearMocks() {
   navigator.replace.mockClear();
   navigator.push.mockClear();
   navigator.goHome.mockClear();
-  setEntryContext.mockClear();
+  mockSetEntryContext.mockClear();
 }
 
 describe("useOpenSchemeHandler", () => {
@@ -215,7 +225,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           expect.objectContaining({
             ...params,
             extensions: { ...params, initial_player_state: "fullscreen" },
@@ -272,7 +282,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           expect.objectContaining({
             ...params,
             extensions: { ...params, initial_player_state: "fullscreen" },
@@ -331,7 +341,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -361,7 +371,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -391,7 +401,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -421,7 +431,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -451,7 +461,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           entryWithInitialPlayerState
         );
       };
@@ -485,7 +495,7 @@ describe("useOpenSchemeHandler", () => {
           })
         );
 
-        expect(setEntryContext).toHaveBeenCalledWith(
+        expect(mockSetEntryContext).toHaveBeenCalledWith(
           expect.objectContaining(entryWithInitialPlayerState)
         );
       };
@@ -514,7 +524,7 @@ describe("useOpenSchemeHandler", () => {
         );
 
         expect(navigator.goHome).toHaveBeenCalled();
-        expect(setEntryContext).not.toHaveBeenCalled();
+        expect(mockSetEntryContext).not.toHaveBeenCalled();
       };
 
       await testHook({

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { LayoutChangeEvent, Platform, StyleSheet, View } from "react-native";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { Handle, HandleProps } from "./Handle";
 import { DraggableBottomSheet } from "./DraggableBottomSheet";
@@ -11,9 +11,12 @@ import {
 import {
   isAndroidPlatform,
   isAndroidVersionAtLeast,
+  isApplePlatform,
   platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
+import { useKeyboardHeight } from "./hooks";
+
 type Props = {
   children: React.ReactChild;
   backgroundColor: string;
@@ -104,6 +107,8 @@ export function ModalBottomSheetFrame(props: Props) {
 
   const sheetHeight = useGetSheetHeight(height, maxHeight);
 
+  const keyboardHeight = useKeyboardHeight();
+
   return (
     <DraggableBottomSheet
       sheetHeight={sheetHeight}
@@ -113,7 +118,9 @@ export function ModalBottomSheetFrame(props: Props) {
       header={(dragging) => <Handle {...handleProps} focused={dragging} />}
       maxWidth={maxWidth}
       {...dimensions}
-      height={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
+      height={
+        safeAreaDims.height - (isApplePlatform() ? bottom : 0) - keyboardHeight
+      }
     >
       <SafeAreaView
         edges={["left", "right", "bottom"]}

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.android.test.ts

@@ -0,0 +1,105 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => false,
+}));
+
+// Import after mocks so module-level isApple resolves to false.
+// eslint-disable-next-line import/first
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (non-Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to didShow / didHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardDidShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+  });
+
+  it("resets height to 0 when keyboardDidHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+
+    act(() => {
+      listeners.keyboardDidHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardDidShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardDidHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.test.ts

@@ -0,0 +1,102 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => true,
+}));
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to willShow / willHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardWillShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 336 },
+      });
+    });
+
+    expect(result.current).toBe(336);
+  });
+
+  it("resets height to 0 when keyboardWillHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 280 },
+      });
+    });
+
+    expect(result.current).toBe(280);
+
+    act(() => {
+      listeners.keyboardWillHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardWillShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardWillHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeyboardHeight } from "./useKeyboardHeight";

package/App/ModalProvider/ModalBottomSheet/hooks/useKeyboardHeight.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { Keyboard, KeyboardEvent } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isApple = isApplePlatform();
+
+export function useKeyboardHeight() {
+  const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    // iOS supports smooth 'willShow' / 'willHide' events
+    const showEvent = isApple ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = isApple ? "keyboardWillHide" : "keyboardDidHide";
+
+    const showListener = Keyboard.addListener(showEvent, (e: KeyboardEvent) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -47,9 +47,11 @@ export function ModalBottomSheet(props: Props) {
 
   const {
     ModalBottomSheetContent = ModalComponent,
-    modalBottomSheetContentProps,
+    modalBottomSheetContentProps = {},
   } = props;
 
+  const { key, ...restContentProps } = modalBottomSheetContentProps;
+
   useEffect(() => {
     Keyboard.dismiss();
   }, []);
@@ -82,11 +84,12 @@ export function ModalBottomSheet(props: Props) {
         }}
       >
         <ModalBottomSheetContent
+          key={key as any}
           width={
             Math.min(sheetTabletMaxWidth, dimensions.width) || dimensions.width
           }
           maxHeight={sheetMaxHeight}
-          {...modalBottomSheetContentProps}
+          {...restContentProps}
           dismiss={dismiss}
           currentRoute={navigator.currentRoute}
         />

package/App/NavigationProvider/NavigationProvider.tsx

@@ -55,6 +55,7 @@ import {
   getTargetScreen,
   legacyScreenData,
   openExternalUrl,
+  stripHookPrefix,
 } from "./utils";
 import {
   debounce,
@@ -414,6 +415,19 @@ export function NavigationProvider({ children }: Props) {
     },
     dispose
   ) => {
+    logger.debug({
+      message: `Hook screen presented: ${
+        hookPlugin.isModalHook() ? `(modal) ${route}` : route
+      }`,
+      data: {
+        route,
+        hookIdentifier: hookPlugin?.identifier,
+        hookScreenId: hookPlugin?.screen_id,
+        isModal: hookPlugin.isModalHook(),
+        lastHook: hookPlugin?.lastHook,
+      },
+    });
+
     if (hookPlugin?.lastHook) {
       dispose();
     }
@@ -536,6 +550,17 @@ export function NavigationProvider({ children }: Props) {
         currentStartUpHooks.current && setStartUpHooks(false);
       }
 
+      logger.debug({
+        message: `Hooks complete, navigating to: ${targetRoute}`,
+        data: {
+          targetRoute,
+          hookIdentifier: hookPlugin?.identifier,
+          screenId: screen?.id,
+          screenName: screen?.name,
+          options,
+        },
+      });
+
       dispatch(
         navigationAction(targetRoute, { screen, entry: payload, options })
       );
@@ -574,12 +599,28 @@ export function NavigationProvider({ children }: Props) {
     ) => {
       const { entry, screen, targetRoute, externalUrl } = getNavigationTarget(
         item,
-        action === ACTIONS.REPLACE ? "" : pathnameRef.current,
+        action === ACTIONS.REPLACE ? "" : stripHookPrefix(pathnameRef.current),
         contentTypes,
         layoutVersion,
         rivers
       );
 
+      logger.debug({
+        message: `Navigating: ${pathnameRef.current || "(none)"} -> ${
+          targetRoute || externalUrl || "(unresolved)"
+        }`,
+        data: {
+          action,
+          from: pathnameRef.current,
+          to: targetRoute,
+          externalUrl,
+          screenId: screen?.id,
+          screenName: screen?.name,
+          entryType: entry?.type?.value,
+          options,
+        },
+      });
+
       if (externalUrl) {
         const openURL = async (url) => {
           const inflatedURL = await inflateUrl(url);
@@ -668,6 +709,15 @@ export function NavigationProvider({ children }: Props) {
 
         hooksManager.handleHooks(legacyScreenData({ entry, screen }));
       } else {
+        logger.debug({
+          message: `Navigating offline (hooks skipped) to: ${targetRoute}`,
+          data: {
+            targetRoute,
+            screenId: screen?.id,
+            screenName: screen?.name,
+          },
+        });
+
         dispatch(navigationAction(targetRoute, { screen, entry, options }));
       }
     },

package/App/NavigationProvider/__tests__/utils.test.ts

@@ -1,4 +1,4 @@
-const { targetShouldOpenExternally } = require("../utils");
+const { targetShouldOpenExternally, stripHookPrefix } = require("../utils");
 
 const mockedOpenUrl = jest.fn();
 
@@ -116,3 +116,33 @@ describe("targetShouldOpenExternally", () => {
     });
   });
 });
+
+describe("stripHookPrefix", () => {
+  const HOOK = "203d96a9-f4af-49d1-9890-435e683b9274";
+  const MANAGE = "9f8e1e06-abd6-48b9-b73a-4caf4601f870";
+
+  it("drops the hook segment so a hook screen navigates from the root", () => {
+    expect(stripHookPrefix(`/hooks/${HOOK}`)).toBe("");
+  });
+
+  it("keeps the screens opened from a hook, without their hook prefix", () => {
+    expect(stripHookPrefix(`/hooks/${HOOK}/river/${MANAGE}`)).toBe(
+      `/river/${MANAGE}`
+    );
+  });
+
+  it("leaves a regular route untouched", () => {
+    expect(stripHookPrefix(`/river/${MANAGE}`)).toBe(`/river/${MANAGE}`);
+  });
+
+  it("only strips a hook segment at the start of the path", () => {
+    expect(stripHookPrefix(`/river/${MANAGE}/hooks/${HOOK}`)).toBe(
+      `/river/${MANAGE}/hooks/${HOOK}`
+    );
+  });
+
+  it("returns an empty prefix for an empty or missing path", () => {
+    expect(stripHookPrefix("")).toBe("");
+    expect(stripHookPrefix(undefined)).toBe("");
+  });
+});

package/App/NavigationProvider/utils.ts

@@ -18,6 +18,20 @@ const WEBVIEW_SCREEN_IDENTIFIER = "webview_screen_qb";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
+/**
+ * Drops a leading `/hooks/<screen_id>` segment from a path.
+ *
+ * Routes are built by appending to the current path, and a hook screen is
+ * presented at an absolute `/hooks/<screen_id>`. Without this, every screen
+ * opened from a hook would inherit that prefix for good: the hook's stack entry
+ * would stay buried under its descendants, and `canGoBack` — which treats any
+ * route containing `/hooks` as a hook — would count the whole branch as one
+ * entry and send Back home instead of popping.
+ */
+export function stripHookPrefix(pathname?: string): string {
+  return pathname?.replace(/^\/hooks\/[^/]+/, "") ?? "";
+}
+
 export function targetShouldOpenExternally(
   target: ZappEntry,
   targetScreen: ZappRiver | null,

package/App/NotificationToastRenderer/NotificationToastManager.ts

@@ -24,12 +24,19 @@ export interface ToastStyle {
   letterSpacing?: number;
 }
 
+export const DEFAULT_TOAST_TIMEOUT = 4000;
+
+export const CONFIRMATION_TOAST_SOURCE = "confirmation";
+
 export interface ToastPayload {
   id?: string;
   message: string;
   extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
-  timeout?: number; // ms; if omitted, toast stays until dismissed
+  timeout?: number; // ms; defaults to DEFAULT_TOAST_TIMEOUT (4000) if omitted
   style?: ToastStyle;
+  // stamped by the showToast action; Theme confirmation styles apply when
+  // source === CONFIRMATION_TOAST_SOURCE ("confirmation")
+  source?: string;
   [key: string]: unknown;
 }
 
@@ -122,7 +129,11 @@ class NotificationToastManager {
   };
 
   private handleShowToast = (payload: ToastPayload) => {
-    const item = { ...payload, id: payload.id ?? String(this.nextId++) };
+    const item = {
+      ...payload,
+      id: payload.id ?? String(this.nextId++),
+      timeout: payload.timeout ?? DEFAULT_TOAST_TIMEOUT,
+    };
 
     const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);