@applicaster/zapp-react-native-utils 15.1.6-alpha.3988508055 → 15.1.6

package/actionsExecutor/actions/openBottomSheet.ts

@@ -1,318 +0,0 @@
-/// <reference types="@applicaster/applicaster-types" />
-import {
-  PipesClientResponseHelper,
-  RequestBuilder,
-} from "@applicaster/zapp-pipes-v2-client";
-import { modalOrchestrator } from "../../modalState/ModalOrchestrator";
-import { openBottomSheetModal } from "../../modalState/store";
-import {
-  DynamicCollectionOptions,
-  isPresentSubMenuAction,
-  Menu,
-  MenuItem,
-  Operation,
-  SelectionBehavior,
-} from "../../modalState/types";
-import { actionExecutor, ActionResult } from "../ActionExecutor";
-import { createLogger } from "../../logger";
-
-const { log_info, log_error } = createLogger({
-  subsystem: "ActionExecutorContext",
-  category: "General",
-});
-
-export type LoadedSheetContent = {
-  items: MenuItem[];
-  role?: string;
-  behavior?: SelectionBehavior;
-  dynamicCollection?: DynamicCollectionOptions;
-};
-
-/**
- * Parse a raw `dynamic_collection_options` block (feed or inline content) into
- * the typed `DynamicCollectionOptions`. `operations` accepts either a CSV
- * string (feed) or an array (already parsed).
- */
-export function parseDynamicCollectionOptions(
-  raw:
-    | {
-        operations?: string | string[];
-        postUrl?: string;
-        provider?: string;
-        events?: Record<string, any[]>;
-      }
-    | undefined
-): DynamicCollectionOptions | undefined {
-  if (!raw) {
-    return undefined;
-  }
-
-  const operations = Array.isArray(raw.operations)
-    ? (raw.operations as Operation[])
-    : ((raw.operations || "").split(",").filter(Boolean) as Operation[]);
-
-  return {
-    operations,
-    postUrl: raw.postUrl,
-    provider: raw.provider,
-    events: raw.events,
-  };
-}
-
-/**
- * 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 {
-    id: entry.id as string,
-    title: entry.title as string,
-    summary,
-    icon: firstImage?.src,
-    isSelected: currentSelection.includes(String(entry.id)),
-    action: primaryAction,
-    entryActions: entry.extensions?.entry_action || [],
-  };
-}
-
-function parseCurrentSelection(rawSelection: unknown): string[] {
-  if (Array.isArray(rawSelection)) {
-    return (rawSelection as any[]).map(String);
-  }
-
-  if (rawSelection !== undefined && rawSelection !== null) {
-    return [String(rawSelection)];
-  }
-
-  return [];
-}
-
-function parseBehaviorFromFeed(
-  feed: ZappFeed | undefined,
-  currentSelection: string[]
-): SelectionBehavior | undefined {
-  const raw = feed?.extensions?.behavior;
-
-  if (!raw && currentSelection.length === 0) {
-    return undefined;
-  }
-
-  return {
-    selectMode: raw?.select_mode,
-    currentSelection,
-    selector: raw?.selector,
-  };
-}
-
-function parseBehaviorFromContentOptions(
-  content: Record<string, any> | undefined
-): SelectionBehavior | undefined {
-  const raw = content?.behavior ?? content?.extensions?.behavior;
-
-  if (!raw) {
-    return undefined;
-  }
-
-  return {
-    selectMode: raw.selectMode ?? raw.select_mode,
-    currentSelection: parseCurrentSelection(
-      raw.currentSelection ?? raw.current_selection
-    ),
-    selector: raw.selector,
-  };
-}
-
-// Exported so MultiLevelBottomSheetContent can lazy-load sub-levels
-export async function loadItemsFromSource(
-  source: string,
-  context?: Record<string, any>
-): Promise<LoadedSheetContent> {
-  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 currentSelection = parseCurrentSelection(
-    feed?.extensions?.behavior?.current_selection
-  );
-
-  const items = (feed?.entry || []).map((entry) =>
-    entryToMenuItem(entry, currentSelection)
-  );
-
-  const dynamicCollectionOptions = feed?.extensions?.dynamic_collection_options;
-
-  const dynamicCollection = parseDynamicCollectionOptions(
-    dynamicCollectionOptions
-  );
-
-  return {
-    items,
-    role: feed?.extensions?.role,
-    behavior: parseBehaviorFromFeed(feed, currentSelection),
-    dynamicCollection,
-  };
-}
-
-export async function openBottomSheetAction(
-  action: ActionType,
-  context?: Record<string, any>
-): Promise<ActionResult> {
-  try {
-    const { content, header } = action.options || {};
-
-    // Custom body component — keep default ModalComponent so standard header
-    // (dismiss x) is used; content.component is body-only (e.g. TextInputContent).
-    if (content?.component) {
-      log_info("openBottomSheet: using custom content component");
-
-      openBottomSheetModal({
-        modalBottomSheetContentProps: {
-          title: header?.title,
-          summary: header?.subtitle,
-          items: [],
-          onPress: () => {},
-          contentComponent: content.component,
-          contentComponentProps: content.props || {},
-        },
-      });
-
-      return ActionResult.Success;
-    }
-
-    const inlineItems: ZappEntry[] = content?.items;
-    const itemsUrl: string = content?.itemsUrl;
-
-    let items: MenuItem[];
-    let role: string | undefined;
-    let behavior: SelectionBehavior | undefined;
-
-    let dynamicCollection: DynamicCollectionOptions | undefined;
-
-    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));
-      role = content?.role ?? content?.extensions?.role;
-      behavior = parseBehaviorFromContentOptions(content);
-
-      dynamicCollection = parseDynamicCollectionOptions(
-        content?.dynamicCollection ??
-          content?.extensions?.dynamic_collection_options
-      );
-    } else if (itemsUrl) {
-      log_info(`openBottomSheet: loading items from source: ${itemsUrl}`);
-
-      const loaded = await loadItemsFromSource(itemsUrl, context);
-      items = loaded.items;
-      role = loaded.role ?? content?.role ?? content?.extensions?.role;
-      behavior = loaded.behavior ?? parseBehaviorFromContentOptions(content);
-      dynamicCollection = loaded.dynamicCollection;
-
-      log_info(
-        `openBottomSheet: loaded ${items.length} items from source: ${itemsUrl}`
-      );
-    } else {
-      log_error(
-        "openBottomSheet: no itemsUrl, items, or content.component 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
-        role,
-        behavior,
-        dynamicCollection,
-      },
-    };
-
-    /**
-     * 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,111 +0,0 @@
-import { BehaviorSubject, Observable } from "rxjs";
-import {
-  Content,
-  MenuItem,
-  SelectionBehavior,
-  DynamicCollectionOptions,
-} from "./types";
-import { loadItemsFromSource } from "../actionsExecutor/actions/openBottomSheet";
-import { resolveEditableCollection } from "./EditableCollectionRegistry";
-import { EditableCollection } from "./EditableCollection";
-
-export interface ContentState {
-  items: MenuItem[];
-  isLoading: boolean;
-  error?: Error | string;
-  role?: string;
-  behavior?: SelectionBehavior;
-  dynamicCollection?: DynamicCollectionOptions;
-}
-
-export class ContentViewModel {
-  private state$: BehaviorSubject<ContentState>;
-  readonly itemsUrl?: string;
-  public editableCollection: EditableCollection | null = null;
-  private content: Content;
-
-  constructor(content: Content) {
-    this.content = content;
-    this.itemsUrl = content.itemsUrl;
-
-    this.state$ = new BehaviorSubject<ContentState>({
-      items: content.items || [],
-      isLoading: false,
-      role: content.role,
-      behavior: content.behavior,
-      dynamicCollection: content.dynamicCollection,
-    });
-
-    this.initEditableCollection(content);
-
-    if (this.itemsUrl && this.state$.value.items.length === 0) {
-      this.refetch();
-    }
-  }
-
-  private initEditableCollection(content: Content) {
-    this.editableCollection = resolveEditableCollection(content, 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 separator = this.itemsUrl.includes("?") ? "&" : "?";
-      const cacheBustedUrl = `${this.itemsUrl}${separator}_t=${Date.now()}`;
-
-      const { items, role, behavior, dynamicCollection } =
-        await loadItemsFromSource(cacheBustedUrl);
-
-      this.content = {
-        ...this.content,
-        items,
-        role,
-        behavior,
-        dynamicCollection,
-      };
-
-      this.updateState({
-        items,
-        role,
-        behavior,
-        dynamicCollection,
-        isLoading: false,
-      });
-
-      if (this.editableCollection) {
-        // Reuse the existing collection instance. Pushing the freshly loaded
-        // server items replaces any optimistic local state with the
-        // authoritative result (and rolls forward a successful mutation).
-        this.editableCollection.sync?.(items);
-      } else {
-        // The collection may only become resolvable once options arrive from
-        // the feed (e.g. inline content had none). Create it lazily here.
-        this.initEditableCollection(this.content);
-      }
-    } catch (err) {
-      this.updateState({
-        error: err?.message || "Failed to load",
-        isLoading: false,
-      });
-    }
-  };
-}

package/modalState/EditableCollection.ts

@@ -1,17 +0,0 @@
-import { Observable } from "rxjs";
-import { MenuItem, Operation } from "./types";
-
-export interface EditableCollection {
-  items$: Observable<MenuItem[]>;
-  operations: Operation[];
-  add?(item?: MenuItem): void | Promise<void>;
-  remove?(index: number): void | Promise<void>;
-  move?(itemIds: string[]): void | Promise<void>;
-  deleteCollection?(): void | Promise<void>;
-  /**
-   * Push authoritative items (e.g. a fresh server feed after a mutation) into
-   * the collection, replacing any optimistic local state. Called by the
-   * ContentViewModel on refetch so the instance is reused instead of recreated.
-   */
-  sync?(items: MenuItem[]): void;
-}

package/modalState/EditableCollectionRegistry.ts

@@ -1,51 +0,0 @@
-import { Content } from "./types";
-import { EditableCollection } from "./EditableCollection";
-import { RemoteEditableCollection } from "./RemoteEditableCollection";
-import { createLogger } from "../logger";
-
-const { log_error } = createLogger({
-  subsystem: "modalState",
-  category: "EditableCollectionRegistry",
-});
-
-type ProviderFactory = () => EditableCollection;
-
-export class EditableCollectionRegistry {
-  private static providers: Record<string, ProviderFactory> = {};
-
-  static register(token: string, factory: ProviderFactory) {
-    this.providers[token] = factory;
-  }
-
-  static getProvider(token: string): EditableCollection | null {
-    const factory = this.providers[token];
-
-    return factory ? factory() : null;
-  }
-}
-
-export function resolveEditableCollection(
-  content: Content,
-  refetch: () => Promise<void>
-): EditableCollection | null {
-  const options = content.dynamicCollection;
-  if (!options) return null;
-
-  if (options.provider) {
-    const provider = EditableCollectionRegistry.getProvider(options.provider);
-
-    if (!provider) {
-      log_error(
-        `No EditableCollection provider registered for token "${options.provider}"`
-      );
-    }
-
-    return provider;
-  }
-
-  if (options.postUrl) {
-    return new RemoteEditableCollection(content, refetch);
-  }
-
-  return null;
-}

package/modalState/ModalOrchestrator.ts

@@ -1,198 +0,0 @@
-import { dismissModal, modalStore, openBottomSheetModal } from "./store";
-import { isPresentSubMenuAction, Menu, MenuItem } from "./types";
-import { ContentViewModel } from "./ContentViewModel";
-
-export type { Menu, MenuItem };
-
-export { isPresentSubMenuAction };
-
-/**
- * Converts a Menu model into the props expected by BottomSheetModalContent.
- * - Maps MenuItem.title → label (required by BottomSheetModalContent)
- * - Maps MenuItem.icon  → image src
- * - Flattens header.title / header.subtitle into top-level title / summary
- */
-interface StackEntry {
-  menu: Menu;
-  onItemPress?: (item: MenuItem) => void | Promise<void>;
-  viewModel: ContentViewModel;
-}
-
-function menuToModalArgs(
-  menu: Menu,
-  viewModel: ContentViewModel,
-  onItemPress: (item: MenuItem) => void | Promise<void>,
-  key: string
-): OpenModalBottomSheetArgs {
-  const items = menu.content.items.map((item) => ({
-    ...item,
-    // BottomSheetModalContent renders `theme[item.label] ?? item.label`
-    label: item.title,
-  }));
-
-  return {
-    modalBottomSheetContentProps: {
-      key,
-      items,
-      itemsUrl: menu.content.itemsUrl,
-      title: menu.header?.title ?? menu.content.title,
-      summary: menu.header?.subtitle,
-      onPress: onItemPress,
-      viewModel,
-    },
-    options: {},
-  };
-}
-
-/**
- * ModalOrchestrator manages a stack of Menu modals, enabling push/pop
- * navigation between bottom sheet screens.
- *
- * Usage:
- *   modalOrchestrator.open(menu);
- *   modalOrchestrator.back();    // go to previous modal in the stack
- *   modalOrchestrator.close();   // dismiss all and clear the stack
- */
-class ModalOrchestrator {
-  private _stack: StackEntry[] = [];
-
-  /** Number of entries currently in the stack. */
-  get stackSize(): number {
-    return this._stack.length;
-  }
-
-  /** Whether there is a previous modal to go back to. */
-  get canGoBack(): boolean {
-    return this._stack.length > 1;
-  }
-
-  /** The Menu currently shown, or null if the stack is empty. */
-  get current(): Menu | null {
-    return this._stack[this._stack.length - 1]?.menu ?? null;
-  }
-
-  /**
-   * Push a new Menu onto the stack and display it.
-   * If a menu item carries a PresentSubMenuAction it will automatically
-   * push the sub-menu when pressed; all other items delegate to
-   * the optional `onItemPress` callback.
-   */
-  open(
-    menu: Menu,
-    onItemPress?: (item: MenuItem) => void | Promise<void>
-  ): void {
-    const viewModel = new ContentViewModel(menu.content);
-    this._stack.push({ menu, onItemPress, viewModel });
-    this._present(menu, viewModel, onItemPress);
-  }
-
-  /**
-   * Pop the current modal and return to the previous one.
-   * If the stack has only one entry, closes entirely.
-   */
-  back(): void {
-    if (this._stack.length === 0) {
-      return;
-    }
-
-    this._stack.pop();
-
-    const previous = this._stack[this._stack.length - 1];
-
-    if (previous) {
-      this._present(previous.menu, previous.viewModel, previous.onItemPress);
-    } else {
-      dismissModal();
-    }
-  }
-
-  /**
-   * Close all modals and clear the entire stack.
-   */
-  close(): void {
-    this._stack = [];
-    dismissModal();
-  }
-
-  /**
-   * Replace the current top of the stack without adding a new history entry.
-   */
-  replace(
-    menu: Menu,
-    onItemPress?: (item: MenuItem) => void | Promise<void>
-  ): void {
-    if (this._stack.length === 0) {
-      this.open(menu, onItemPress);
-
-      return;
-    }
-
-    const viewModel = new ContentViewModel(menu.content);
-    this._stack[this._stack.length - 1] = { menu, onItemPress, viewModel };
-    this._present(menu, viewModel, onItemPress);
-  }
-
-  private _buildOnPress(
-    onItemPress?: (item: MenuItem) => void | Promise<void>
-  ): (item: MenuItem) => void | Promise<void> {
-    return (item: MenuItem) => {
-      if (isPresentSubMenuAction(item.action)) {
-        // Navigate deeper into the sub-menu
-        this.open(item.action.menu, onItemPress);
-
-        return;
-      }
-
-      return onItemPress?.(item);
-    };
-  }
-
-  /**
-   * Called when the UI dismisses the modal (swipe / overlay tap).
-   * Clears the stack without calling dismissModal() again to avoid
-   * a feedback loop with the store reset.
-   */
-  private _onUIDismiss(): void {
-    this._stack = [];
-  }
-
-  /**
-   * True when the Zustand modal store already has a visible bottom sheet.
-   * Used to skip the slide-in animation when navigating to a deeper level.
-   */
-  private get _isOpen(): boolean {
-    return modalStore.getState().modalState.visible;
-  }
-
-  private _present(
-    menu: Menu,
-    viewModel: ContentViewModel,
-    onItemPress?: (item: MenuItem) => void | Promise<void>
-  ): void {
-    const key = `menu-level-${this._stack.length}`;
-
-    const args = menuToModalArgs(
-      menu,
-      viewModel,
-      this._buildOnPress(onItemPress),
-      key
-    );
-
-    const alreadyOpen = this._isOpen;
-
-    openBottomSheetModal({
-      ...args,
-      options: {
-        ...args.options,
-        // Skip the slide-in when updating an already-visible sheet (sub-level nav)
-        animated: !alreadyOpen,
-        animationType: alreadyOpen ? "none" : "slide",
-        // Keep the stack in sync when the user dismisses via swipe or overlay
-        onDismiss: () => this._onUIDismiss(),
-        onRequestClose: () => this._onUIDismiss(),
-      },
-    });
-  }
-}
-
-export const modalOrchestrator = new ModalOrchestrator();