@applicaster/zapp-react-native-utils 16.0.0-alpha.9530606740 → 16.0.0-alpha.9739533780

package/actionsExecutor/ActionExecutorContext.tsx

@@ -22,7 +22,6 @@ import {
   localStorageRemoveAction,
   localStorageSetAction,
   localStorageToggleFlagAction,
-  openBottomSheetAction,
   refreshComponentAction,
   screenSetVariableAction,
   screenToggleFlagAction,
@@ -31,6 +30,7 @@ import {
   sessionStorageSetAction,
   sessionStorageToggleFlagAction,
   switchLayoutAction,
+  showToastAction,
 } from "./actions";
 
 export const { log_error, log_info, log_debug } = createLogger({
@@ -90,7 +90,7 @@ const prepareDefaultActions = (actionExecutor) => {
 
   actionExecutor.registerAction("screenSetVariable", screenSetVariableAction);
   actionExecutor.registerAction("screenToggleFlag", screenToggleFlagAction);
-  actionExecutor.registerAction("openBottomSheet", openBottomSheetAction);
+  actionExecutor.registerAction("showToast", showToastAction);
 };
 
 export const ActionExecutorContext =

package/actionsExecutor/actions/index.ts

@@ -27,4 +27,4 @@ export { screenToggleFlagAction } from "./screenToggleFlag";
 
 export { createNavigateToScreenAction } from "./navigateToScreen";
 
-export { openBottomSheetAction } from "./openBottomSheet";
+export { showToastAction } from "./showToast";

package/actionsExecutor/actions/showToast.ts

@@ -0,0 +1,31 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { postEvent } from "../../reactHooks/useSubscriberFor";
+
+/**
+ * Options for showToast action.
+ */
+export interface ShowToastActionOptions {
+  id: string;
+  message: string;
+  extraMessage?: string;
+  style?: any;
+  timeout?: number;
+}
+
+export const showToastAction: ActionHandler<ShowToastActionOptions> = async (
+  action
+): Promise<ActionResult> => {
+  postEvent("showToast", [
+    {
+      id: action.options.id,
+      message: action.options.message,
+      extraMessage: action.options.extraMessage,
+      style: action.options.style,
+      timeout: action.options.timeout,
+    },
+  ]);
+
+  return ActionResult.Success;
+};

package/actionsExecutor/types.ts

@@ -33,7 +33,7 @@ export interface ActionExecutionContext {
   /** Callback function for action completion */
   callback?: (result: { success: boolean; error: any; abort: boolean }) => void;
 
-  screenState: Record<any, any>;
+  screenState?: Record<any, any>;
 }
 
 /**

package/modalState/index.ts

@@ -1,34 +1,83 @@
-export {
-  modalStore,
-  useModalStore,
-  openModal,
-  dismissModal,
-  openBottomSheetModal,
-  useModalStoreState,
-} from "./store";
+import { useStore, createStore } from "zustand";
 
-export type { ModalState, ModalStore } from "./store";
+interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
 
-export { modalOrchestrator } from "./ModalOrchestrator";
+interface ModalStore {
+  modalState: ModalState;
+  setModalState: (newState: Partial<ModalState>) => void;
+  openModal: (
+    item: any,
+    options?: Record<string, unknown>,
+    props?: Record<string, unknown>
+  ) => void;
+  dismissModal: () => void;
+}
 
-export { ContentViewModel } from "./ContentViewModel";
+const initialModalState: ModalState = {
+  visible: false,
+  screen: null,
+  options: {},
+  props: {},
+};
 
-export { BottomSheetHeader } from "./components/BottomSheetHeader";
+export const modalStore = createStore<ModalStore>((set) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({ item, options = {}, props }: OpenModalArg) =>
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...options,
+          onDismiss: () => set({ modalState: initialModalState }),
+          onRequestClose: () => set({ modalState: initialModalState }),
+        },
+        props,
+      },
+    }),
+  dismissModal: () => set(() => ({ modalState: initialModalState })),
+}));
 
-export { ActionItem } from "./components/ActionItem";
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
 
-export { TrackItem } from "./components/TrackItem";
+export const openModal = modalStore.getInitialState().openModal;
 
-export { PrimaryButton } from "./components/PrimaryButton";
+export const dismissModal = modalStore.getInitialState().dismissModal;
 
-export type {
-  Menu,
-  MenuItem,
-  Header,
-  Content,
-  Action,
-  PresentSubMenuAction,
-  SecondaryAction,
-} from "./types";
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
 
-export { isPresentSubMenuAction } from "./types";
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.9530606740",
+  "version": "16.0.0-alpha.9739533780",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.9530606740",
+    "@applicaster/applicaster-types": "16.0.0-alpha.9739533780",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

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__/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/index.ts

@@ -32,7 +32,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);
 };

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/actionsExecutor/actions/openBottomSheet.ts

@@ -1,177 +0,0 @@
-/// <reference types="@applicaster/applicaster-types" />
-import {
-  PipesClientResponseHelper,
-  RequestBuilder,
-} from "@applicaster/zapp-pipes-v2-client";
-import { modalOrchestrator } from "../../modalState/ModalOrchestrator";
-import { isPresentSubMenuAction, Menu, MenuItem } from "../../modalState/types";
-import { actionExecutor, ActionResult } from "../ActionExecutor";
-import { createLogger } from "../../logger";
-
-const { log_info, log_error } = createLogger({
-  subsystem: "ActionExecutorContext",
-  category: "General",
-});
-
-/**
- * Converts a ZappEntry from a pipes feed into a MenuItem.
- * - Icon: first src found in the image media_group.
- * - Primary action: taken from tap_actions.actions[0].
- * - isSelected: true when entry.id is in currentSelection.
- */
-export function entryToMenuItem(
-  entry: ZappEntry,
-  currentSelection: string[] = []
-): MenuItem {
-  const imageGroup = entry.media_group?.find((g) => g.type === "image");
-
-  const firstImage = Array.isArray(imageGroup?.media_item)
-    ? imageGroup.media_item[0]
-    : imageGroup?.media_item;
-
-  // Primary action — first tap_action on the entry
-  const tapActions = entry.extensions?.tap_actions?.actions || [];
-  const primaryAction = tapActions.length > 0 ? tapActions[0] : undefined;
-
-  let summary = entry.summary as string;
-
-  // TODO: remove just a small logic for debugging
-
-  if (
-    !summary &&
-    entry.extensions &&
-    typeof entry.extensions.item_count === "number"
-  ) {
-    const count = entry.extensions.item_count;
-    summary = `${count} ${count === 1 ? "Item" : "Items"}`;
-  }
-
-  return {
-    title: entry.title as string,
-    summary,
-    icon: firstImage?.src,
-    isSelected: currentSelection.includes(String(entry.id)),
-    action: primaryAction,
-  };
-}
-
-// Exported so MultiLevelBottomSheetContent can lazy-load sub-levels
-export async function loadItemsFromSource(
-  source: string,
-  context?: Record<string, any>
-): Promise<MenuItem[]> {
-  const requestBuilder = new RequestBuilder()
-    .setEntryContext(context?.entry || {})
-    .setScreenContext(context?.screenData || {})
-    .setUrl(source);
-
-  await requestBuilder.buildAxiosRequest();
-
-  const responseData = await requestBuilder.call<ZappFeed>();
-
-  const responseHelper = new PipesClientResponseHelper(responseData);
-
-  if (responseHelper.error) {
-    throw responseHelper.error;
-  }
-
-  const feed = responseData?.response as ZappFeed;
-
-  const rawSelection = feed?.extensions?.behavior?.current_selection;
-
-  const currentSelection: string[] = Array.isArray(rawSelection)
-    ? (rawSelection as any).map(String)
-    : rawSelection !== undefined && rawSelection !== null
-      ? [String(rawSelection)]
-      : [];
-
-  return (feed?.entry || []).map((entry) =>
-    entryToMenuItem(entry, currentSelection)
-  );
-}
-
-export async function openBottomSheetAction(
-  action: ActionType,
-  context?: Record<string, any>
-): Promise<ActionResult> {
-  try {
-    const { content, header } = action.options || {};
-
-    const inlineItems: ZappEntry[] = content?.items;
-    const itemsUrl: string = content?.itemsUrl;
-
-    let items: MenuItem[];
-
-    if (Array.isArray(inlineItems) && inlineItems.length > 0) {
-      log_info("openBottomSheet: using inline items from action options", {
-        count: inlineItems.length,
-      });
-
-      items = inlineItems.map((entry) => entryToMenuItem(entry));
-    } else if (itemsUrl) {
-      log_info(`openBottomSheet: loading items from source: ${itemsUrl}`);
-
-      items = await loadItemsFromSource(itemsUrl, context);
-
-      log_info(
-        `openBottomSheet: loaded ${items.length} items from source: ${itemsUrl}`
-      );
-    } else {
-      log_error(
-        "openBottomSheet: no itemsUrl or items provided in action options"
-      );
-
-      return ActionResult.Error;
-    }
-
-    const menu: Menu = {
-      header: header
-        ? {
-            title: header.title,
-            subtitle: header.subtitle,
-            icon: header.icon,
-          }
-        : undefined,
-      content: {
-        title: content?.title ?? "",
-        items,
-        itemsUrl, // stored so the component can reload after an action
-      },
-    };
-
-    /**
-     * Called when the user taps a menu item.
-     *
-     * - PresentSubMenuAction  → handled by the orchestrator (pushes sub-menu)
-     * - Any other Action type → forwarded to the action executor, keeping the
-     *   original execution context so screen/entry data is available to handlers.
-     *   The pressed item is also added as `entry` so downstream actions can
-     *   reference it.
-     */
-    const onItemPress = async (item: MenuItem): Promise<void> => {
-      if (!item.action || isPresentSubMenuAction(item.action)) {
-        // Submenu navigation is handled internally by the orchestrator
-        return;
-      }
-
-      await actionExecutor.handleAction(
-        item.action as ActionType,
-        {
-          ...context,
-          entry: item as any,
-        } as any
-      );
-    };
-
-    modalOrchestrator.open(menu, onItemPress);
-
-    return ActionResult.Success;
-  } catch (error) {
-    log_error("openBottomSheet: failed to open bottom sheet", {
-      error,
-      action,
-    });
-
-    return ActionResult.Error;
-  }
-}

package/modalState/ContentViewModel.ts

@@ -1,59 +0,0 @@
-import { BehaviorSubject, Observable } from "rxjs";
-import { Content, MenuItem } from "./types";
-import { loadItemsFromSource } from "../actionsExecutor/actions/openBottomSheet";
-
-export interface ContentState {
-  items: MenuItem[];
-  isLoading: boolean;
-  error?: Error | string;
-}
-
-export class ContentViewModel {
-  private state$: BehaviorSubject<ContentState>;
-  readonly itemsUrl?: string;
-
-  constructor(content: Content) {
-    this.itemsUrl = content.itemsUrl;
-
-    this.state$ = new BehaviorSubject<ContentState>({
-      items: content.items || [],
-      isLoading: false,
-    });
-
-    if (this.itemsUrl && this.state$.value.items.length === 0) {
-      this.refetch();
-    }
-  }
-
-  getState = (): ContentState => this.state$.value;
-
-  get stateObservable(): Observable<ContentState> {
-    return this.state$.asObservable();
-  }
-
-  subscribe = (listener: (state: ContentState) => void) => {
-    const subscription = this.state$.subscribe(listener);
-
-    return () => subscription.unsubscribe();
-  };
-
-  private updateState(partialState: Partial<ContentState>) {
-    this.state$.next({ ...this.state$.value, ...partialState });
-  }
-
-  refetch = async () => {
-    if (!this.itemsUrl) return;
-
-    this.updateState({ isLoading: true, error: undefined });
-
-    try {
-      const items = await loadItemsFromSource(this.itemsUrl);
-      this.updateState({ items, isLoading: false });
-    } catch (err) {
-      this.updateState({
-        error: err?.message || "Failed to load",
-        isLoading: false,
-      });
-    }
-  };
-}