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

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

package/modalState/ModalOrchestrator.ts

@@ -1,204 +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[] = [];
-  private _sheetContentComponent: any = null;
-
-  public registerSheetContentComponent(component: any) {
-    this._sheetContentComponent = component;
-  }
-
-  /** 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,
-      ModalBottomSheetContent: this._sheetContentComponent,
-      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();

package/modalState/__tests__/ContentViewModel.test.ts

@@ -1,107 +0,0 @@
-import { ContentViewModel } from "../ContentViewModel";
-import { loadItemsFromSource } from "../../actionsExecutor/actions/openBottomSheet";
-
-jest.mock("../../actionsExecutor/actions/openBottomSheet", () => ({
-  loadItemsFromSource: jest.fn(),
-}));
-
-describe("ContentViewModel", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should initialize with items and not fetch if itemsUrl is not provided", () => {
-    const content = {
-      title: "Test Menu",
-      items: [{ title: "Item 1" }, { title: "Item 2" }],
-    };
-
-    const viewModel = new ContentViewModel(content);
-
-    expect(viewModel.getState()).toEqual({
-      items: content.items,
-      isLoading: false,
-    });
-
-    expect(loadItemsFromSource).not.toHaveBeenCalled();
-  });
-
-  it("should trigger fetch on init if items is empty and itemsUrl is present", async () => {
-    const mockItems = [{ title: "Fetched Item" }];
-    (loadItemsFromSource as jest.Mock).mockResolvedValueOnce(mockItems);
-
-    const content = {
-      title: "Test Menu",
-      items: [],
-      itemsUrl: "http://example.com/items",
-    };
-
-    const viewModel = new ContentViewModel(content);
-
-    // Initial state should be loading
-    expect(viewModel.getState().isLoading).toBe(true);
-
-    // Wait for the asynchronous refetch to complete
-    await new Promise(process.nextTick);
-
-    expect(loadItemsFromSource).toHaveBeenCalledWith(
-      "http://example.com/items"
-    );
-
-    expect(viewModel.getState()).toEqual({
-      items: mockItems,
-      isLoading: false,
-    });
-  });
-
-  it("should notify subscribers of state changes", async () => {
-    const mockItems = [{ title: "Fetched Item" }];
-    (loadItemsFromSource as jest.Mock).mockResolvedValue(mockItems);
-
-    const content = {
-      title: "Test Menu",
-      items: [],
-      itemsUrl: "http://example.com/items",
-    };
-
-    const viewModel = new ContentViewModel(content);
-
-    // Wait for constructor's refetch to finish
-    await new Promise(process.nextTick);
-
-    const listener = jest.fn();
-    const unsubscribe = viewModel.subscribe(listener);
-
-    await viewModel.refetch();
-
-    expect(listener).toHaveBeenCalled();
-    expect(viewModel.getState().items).toEqual(mockItems);
-
-    unsubscribe();
-    listener.mockClear();
-
-    await viewModel.refetch();
-    expect(listener).not.toHaveBeenCalled();
-  });
-
-  it("should handle error states during fetching", async () => {
-    const error = new Error("Network Error");
-    (loadItemsFromSource as jest.Mock).mockRejectedValueOnce(error);
-
-    const content = {
-      title: "Test Menu",
-      items: [],
-      itemsUrl: "http://example.com/items",
-    };
-
-    const viewModel = new ContentViewModel(content);
-
-    await new Promise(process.nextTick);
-
-    expect(viewModel.getState()).toEqual({
-      items: [],
-      isLoading: false,
-      error: "Network Error",
-    });
-  });
-});

package/modalState/components/ActionItem.tsx

@@ -1,155 +0,0 @@
-import React, { useState } from "react";
-import { View, Text, StyleSheet, Pressable, Image } from "react-native";
-import { MenuItem, isPresentSubMenuAction } from "../types";
-
-const styles = StyleSheet.create({
-  itemRowContainer: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    justifyContent: "space-between",
-    borderBottomWidth: 1,
-    borderBottomColor: "#2a2a2a",
-    backgroundColor: "#1e1e1e",
-  },
-  itemMainPart: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 14,
-    paddingHorizontal: 16,
-  },
-  itemMainPartPressed: {
-    backgroundColor: "#2d2d2d",
-  },
-  itemIconImage: {
-    width: 24,
-    height: 24,
-    borderRadius: 4,
-    marginRight: 12,
-    backgroundColor: "#2a2a2a",
-  },
-  itemIconText: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    marginRight: 12,
-    width: 24,
-    textAlign: "center",
-  },
-  itemText: {
-    color: "#ffffff",
-    fontSize: 15,
-    fontWeight: "500",
-    flex: 1,
-  },
-  itemTextSelected: {
-    fontWeight: "bold",
-  },
-  checkmark: {
-    color: "#30d158",
-    marginLeft: 8,
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  chevronWrapper: {
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 16,
-  },
-  chevron: {
-    color: "#8e8e93",
-    fontSize: 20,
-    fontWeight: "300",
-  },
-  secondaryActionButton: {
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    borderLeftWidth: 1,
-    borderLeftColor: "#2a2a2a",
-  },
-  secondaryActionButtonPressed: {
-    backgroundColor: "#333333",
-  },
-  secondaryActionText: {
-    color: "#aeaeb2",
-    fontSize: 14,
-    fontWeight: "bold",
-  },
-});
-
-export interface ActionItemProps {
-  item: MenuItem;
-  onPress?: () => void;
-  onSecondaryPress?: () => void;
-}
-
-export const ActionItem: React.FC<ActionItemProps> = ({
-  item,
-  onPress,
-  onSecondaryPress,
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const hasSub =
-    (item.submenu && item.submenu.length > 0) ||
-    (item.action && isPresentSubMenuAction(item.action));
-
-  const hasSecondary = !!item.secondaryAction;
-  const isSelected = !!item.isSelected;
-
-  // Determine if icon is a remote image URI or text/emoji
-  const isIconUri =
-    item.icon &&
-    (item.icon.startsWith("http") ||
-      item.icon.startsWith("file") ||
-      item.icon.includes("/") ||
-      item.icon.includes("."));
-
-  return (
-    <View style={styles.itemRowContainer}>
-      <Pressable
-        style={({ pressed }) => [
-          styles.itemMainPart,
-          (pressed || isFocused) && styles.itemMainPartPressed,
-        ]}
-        onPress={onPress}
-        onPressIn={() => setIsFocused(true)}
-        onPressOut={() => setIsFocused(false)}
-      >
-        {item.icon ? (
-          isIconUri ? (
-            <Image source={{ uri: item.icon }} style={styles.itemIconImage} />
-          ) : (
-            <Text style={styles.itemIconText}>{item.icon}</Text>
-          )
-        ) : null}
-
-        <Text style={[styles.itemText, isSelected && styles.itemTextSelected]}>
-          {item.title}
-        </Text>
-
-        {isSelected && !hasSecondary ? (
-          <Text style={styles.checkmark}>✓</Text>
-        ) : null}
-      </Pressable>
-
-      {hasSecondary ? (
-        <Pressable
-          onPress={onSecondaryPress}
-          style={({ pressed }) => [
-            styles.secondaryActionButton,
-            pressed && styles.secondaryActionButtonPressed,
-          ]}
-        >
-          <Text style={styles.secondaryActionText}>
-            {item.secondaryAction?.icon || "•••"}
-          </Text>
-        </Pressable>
-      ) : hasSub ? (
-        <View style={styles.chevronWrapper}>
-          <Text style={styles.chevron}>›</Text>
-        </View>
-      ) : null}
-    </View>
-  );
-};