@applicaster/quick-brick-core 16.0.0-alpha.6861239588 → 16.0.0-alpha.6918106967

package/App/ModalProvider/ModalContent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { View, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 
@@ -17,6 +18,8 @@ const styles = StyleSheet.create({
 export function ModalContent(props: Props) {
   const { modalScreenProps } = props;
 
+  const insets = useSafeAreaInsets();
+
   if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
     const { ModalBottomSheetContent, modalBottomSheetContentProps } =
       modalScreenProps?.screenData || {};
@@ -30,7 +33,20 @@ export function ModalContent(props: Props) {
   }
 
   return (
-    <View style={styles.container}>
+    // A presented screen fills the window, including the status bar and home
+    // indicator. Inset it so chrome it draws at its own edges — a close button,
+    // for example — stays inside the tappable area.
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
       <ScreenResolver {...modalScreenProps} />
     </View>
   );

package/App/ModalProvider/__tests__/ModalContent.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { ModalContent } from "../ModalContent";
+
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 59, bottom: 34, left: 0, right: 0 }),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => ({ ScreenResolver: () => null })
+);
+
+const flatStyle = (tree: any) => StyleSheet.flatten(tree.props.style);
+
+describe("ModalContent", () => {
+  it("insets a presented screen by the safe area so its chrome stays tappable", () => {
+    const tree = render(
+      <ModalContent modalScreenProps={{ screenId: "river-1" }} />
+    ).toJSON();
+
+    expect(flatStyle(tree)).toMatchObject({
+      paddingTop: 59,
+      paddingBottom: 34,
+    });
+  });
+
+  it("leaves a bottom sheet full-bleed", () => {
+    const tree = render(
+      <ModalContent
+        modalScreenProps={{
+          screenData: { modalBottomSheetContentProps: { items: [] } },
+        }}
+      />
+    ).toJSON();
+
+    // Bottom sheets anchor to the screen edge and manage their own insets.
+    expect(tree).toBeNull();
+  });
+});

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
+
+import { ModalProvider } from "../";
+
+/**
+ * Records the ScreenDataContext value seen by the presented screen — the
+ * context useScreenContext()/useCurrentScreenData() read from.
+ */
+const mockSeenScreenData: any[] = [];
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => {
+    const ReactLocal = require("react");
+
+    const {
+      ScreenDataContext,
+    } = require("@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext");
+
+    return {
+      ScreenResolver: () => {
+        mockSeenScreenData.push(ReactLocal.useContext(ScreenDataContext));
+
+        return null;
+      },
+    };
+  }
+);
+
+// Needs the navigator + redux to build navbar state; irrelevant to this test.
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext",
+  () => ({
+    ScreenContextProvider: ({ children }: any) => children,
+  })
+);
+
+// Pulls in the whole Components barrel; only the ScreenResolver branch matters here.
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const entry = { id: "entry-1", type: { value: "video" } } as any;
+
+const seen = () => mockSeenScreenData[mockSeenScreenData.length - 1];
+
+describe("ModalProvider", () => {
+  beforeEach(() => {
+    mockSeenScreenData.length = 0;
+    modalStore.getState().dismissModal();
+  });
+
+  it("gives the presented screen its screen and entry through ScreenDataContext", () => {
+    modalStore.getState().openModal({ item: river, props: { entry } });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toEqual({ screen: river, entry });
+  });
+
+  it("gives the presented screen its screen when presented without an entry", () => {
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toMatchObject({ screen: river });
+  });
+});

package/App/ModalProvider/index.tsx

@@ -4,6 +4,7 @@ import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useModalStoreState } from "@applicaster/zapp-react-native-utils/modalState";
@@ -14,6 +15,9 @@ export function ModalProvider() {
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
 
+  const screen = modalState?.screen;
+  const entry = modalState?.props?.entry as ZappEntry | undefined;
+
   React.useEffect(() => {
     setModalVisible(!!modalState);
 
@@ -22,13 +26,25 @@ export function ModalProvider() {
     }
   }, [modalState]);
 
-  if (!modalState?.screen) {
+  /**
+   * The modal renders as a sibling of the stack navigator, so nothing upstream
+   * provides ScreenDataContext and the presented screen would otherwise see
+   * `null` from useScreenContext()/useCurrentScreenData(). Provide it here so a
+   * presented screen resolves its own screen and entry, the same way a pushed
+   * screen does through the navigator's scene.
+   */
+  const screenDataContextValue = React.useMemo(
+    () => ({ screen, entry }),
+    [screen, entry]
+  );
+
+  if (!screen) {
     return null;
   }
 
   const modalScreenProps = {
-    screenData: modalState?.screen,
-    screenId: modalState?.screen?.id,
+    screenData: entry ? { ...entry, targetScreen: screen } : screen,
+    screenId: screen?.id,
     screenType: "river",
     ...modalState.props,
   };
@@ -39,17 +55,19 @@ export function ModalProvider() {
 
   return (
     <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        <ModalPresenter
-          visible={shouldShowModal}
-          {...modalState?.options}
-          statusBarTranslucent
-        >
-          <ModalChildrenWrapper>
-            <ModalContent modalScreenProps={modalScreenProps} />
-          </ModalChildrenWrapper>
-        </ModalPresenter>
-      </ScreenContextProvider>
+      <ScreenDataContext.Provider value={screenDataContextValue}>
+        <ScreenContextProvider pathname={pathname}>
+          <ModalPresenter
+            visible={shouldShowModal}
+            {...modalState?.options}
+            statusBarTranslucent
+          >
+            <ModalChildrenWrapper>
+              <ModalContent modalScreenProps={modalScreenProps} />
+            </ModalChildrenWrapper>
+          </ModalPresenter>
+        </ScreenContextProvider>
+      </ScreenDataContext.Provider>
     </PathnameContext.Provider>
   );
 }

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

@@ -0,0 +1,214 @@
+import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { subscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+// events accepted on the shared cross-package event bus (see useSubscriberFor),
+// so packages that must not depend on quick-brick-core (e.g. OfflineHandler in
+// zapp-react-native-ui-components) can trigger a toast by event name alone,
+// without importing notificationToastManager directly.
+const unwrapEventPayload = (payload: unknown) =>
+  Array.isArray(payload) ? payload[0] : payload;
+
+export const NOTIFICATION_TOAST_EVENTS = {
+  SHOW_TOAST: "showToast", // in: request to enqueue a toast
+  DISMISS: "dismiss", // in: renderer/user dismissed the visible toast early
+  SHOW: "show", // out: renderer should display this toast
+  HIDE: "hide", // out: renderer should hide the current toast
+} as const;
+
+export interface ToastStyle {
+  backgroundColor?: string;
+  color?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  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; 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;
+}
+
+class NotificationToastManager {
+  private static instance: NotificationToastManager;
+
+  private eventHandler = subscriber();
+  private queue: ToastPayload[] = [];
+  private hideTimer: ReturnType<typeof setTimeout> | null = null;
+  private isShowing = false;
+  private nextId = 0;
+
+  private constructor() {
+    // subscribe to the shared event bus so other packages can trigger toasts
+    subscriberFor(
+      NOTIFICATION_TOAST_EVENTS.SHOW_TOAST,
+      this.handleShowToastEvent
+    );
+
+    subscriberFor(NOTIFICATION_TOAST_EVENTS.DISMISS, this.handleDismiss);
+
+    this.getCurrentState = this.getCurrentState.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+  }
+
+  static getInstance(): NotificationToastManager {
+    if (!NotificationToastManager.instance) {
+      NotificationToastManager.instance = new NotificationToastManager();
+    }
+
+    return NotificationToastManager.instance;
+  }
+
+  on(event: string, callback: (...args: any[]) => void) {
+    this.eventHandler.on(event, callback);
+  }
+
+  removeHandler(event: string, callback: (...args: any[]) => void) {
+    this.eventHandler.removeHandler(event, callback);
+  }
+
+  showToast(payload: ToastPayload) {
+    this.handleShowToast(payload);
+  }
+
+  dismiss() {
+    this.handleDismiss();
+  }
+
+  getCurrentState() {
+    return this.queue[0] ?? null;
+  }
+
+  subscribe(callback) {
+    this.eventHandler.on(NOTIFICATION_TOAST_EVENTS.SHOW, callback);
+
+    this.eventHandler.on(NOTIFICATION_TOAST_EVENTS.HIDE, callback);
+
+    return () => {
+      this.eventHandler.removeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, callback);
+
+      this.eventHandler.removeHandler(NOTIFICATION_TOAST_EVENTS.HIDE, callback);
+    };
+  }
+
+  // subscriberFor's shared bus can deliver the raw payload (component emitters,
+  // see useSubscriberFor) or an args array (postEvent-style callers) - accept both.
+  private handleShowToastEvent = (payload: unknown) => {
+    if (!payload) {
+      console.warn(
+        "NotificationToastManager: Invalid showToast payload:",
+        payload
+      );
+
+      return;
+    }
+
+    const unwrappedPayload = unwrapEventPayload(payload) as ToastPayload;
+
+    if (!unwrappedPayload || typeof unwrappedPayload.message !== "string") {
+      console.warn(
+        "NotificationToastManager: Invalid showToast payload:",
+        payload
+      );
+
+      return;
+    }
+
+    this.handleShowToast(unwrappedPayload);
+  };
+
+  private handleShowToast = (payload: ToastPayload) => {
+    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);
+
+    if (queuedIndex === -1) {
+      this.queue.push(item);
+    } else if (queuedIndex === 0 && this.isShowing) {
+      // this id is the toast currently on screen - swap its content in place
+      // (new one appears in front of it) and dismiss the old timer/content
+      this.clearTimer();
+      this.queue[0] = item;
+      this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, item);
+
+      if (item.timeout) {
+        this.hideTimer = setTimeout(() => this.finishCurrent(), item.timeout);
+      }
+
+      return;
+    } else {
+      // still queued, not yet shown - update it in place instead of duplicating
+      this.queue[queuedIndex] = item;
+
+      return;
+    }
+
+    if (!this.isShowing) {
+      this.processNext();
+    }
+  };
+
+  private handleDismiss = () => {
+    if (!this.isShowing) {
+      return;
+    }
+
+    this.finishCurrent();
+  };
+
+  private processNext() {
+    const next = this.queue[0];
+
+    if (!next) {
+      this.isShowing = false;
+
+      return;
+    }
+
+    this.isShowing = true;
+    this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, next);
+
+    if (next.timeout) {
+      this.hideTimer = setTimeout(() => this.finishCurrent(), next.timeout);
+    }
+  }
+
+  private finishCurrent() {
+    this.clearTimer();
+    this.queue.shift();
+    this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.HIDE);
+    this.isShowing = false;
+    this.processNext();
+  }
+
+  private clearTimer() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  }
+
+  public reset(): void {
+    this.clearTimer();
+    this.queue = [];
+    this.isShowing = false;
+    this.nextId = 0;
+  }
+}
+
+export const notificationToastManager = NotificationToastManager.getInstance();