@applicaster/zapp-react-native-utils 16.0.0-alpha.1344613091 → 16.0.0-alpha.1444784746

package/actionsExecutor/actions/__tests__/showToast.test.ts

@@ -0,0 +1,88 @@
+import { showToastAction } from "../showToast";
+import { postEvent } from "../../../reactHooks/useSubscriberFor";
+import { ActionResult } from "../../ActionExecutor";
+
+jest.mock("../../../reactHooks/useSubscriberFor", () => ({
+  postEvent: jest.fn(),
+}));
+
+describe("showToastAction", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("calls postEvent with confirmation source, default timeout, and returns Success", async () => {
+    const action = {
+      type: "showToast",
+      options: {
+        id: "toast-1",
+        message: "Added to queue",
+        extraMessage: "Extra info",
+      },
+    };
+
+    const result = await showToastAction(action);
+
+    expect(postEvent).toHaveBeenCalledTimes(1);
+
+    expect(postEvent).toHaveBeenCalledWith("showToast", [
+      {
+        id: "toast-1",
+        message: "Added to queue",
+        extraMessage: "Extra info",
+        style: undefined,
+        timeout: 5000,
+        source: "confirmation",
+      },
+    ]);
+
+    expect(result).toBe(ActionResult.Success);
+  });
+
+  it("preserves an explicit timeout and style override", async () => {
+    const action = {
+      type: "showToast",
+      options: {
+        message: "Playlist created",
+        timeout: 3000,
+        style: { backgroundColor: "#00FF00" },
+      },
+    };
+
+    await showToastAction(action);
+
+    expect(postEvent).toHaveBeenCalledWith("showToast", [
+      {
+        id: undefined,
+        message: "Playlist created",
+        extraMessage: undefined,
+        style: { backgroundColor: "#00FF00" },
+        timeout: 3000,
+        source: "confirmation",
+      },
+    ]);
+  });
+
+  it("handles missing or empty options without throwing", async () => {
+    const action = {
+      type: "showToast",
+    };
+
+    const result = await showToastAction(action);
+
+    expect(postEvent).toHaveBeenCalledTimes(1);
+
+    expect(postEvent).toHaveBeenCalledWith("showToast", [
+      {
+        id: undefined,
+        message: undefined,
+        extraMessage: undefined,
+        style: undefined,
+        timeout: 5000,
+        source: "confirmation",
+      },
+    ]);
+
+    expect(result).toBe(ActionResult.Success);
+  });
+});

package/actionsExecutor/actions/dismissBottomSheet.ts

@@ -0,0 +1,23 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { dismissModal, modalOrchestrator } from "../../modalState";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Dismisses the active bottom sheet / modal.
+ */
+export const dismissBottomSheetAction: ActionHandler<
+  any
+> = async (): Promise<ActionResult> => {
+  log_info("handleAction: dismissBottomSheet");
+  modalOrchestrator.close();
+  dismissModal();
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/goBack.ts

@@ -0,0 +1,60 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the goBack action.
+ */
+export interface GoBackOptions {
+  /**
+   * Navigate to the home screen when there is no screen to go back to.
+   * Defaults to true.
+   */
+  fallbackToHome?: boolean;
+
+  /**
+   * Go back to the first screen of the stack instead of the previous one.
+   * Defaults to false.
+   */
+  backToTop?: boolean;
+}
+
+/**
+ * Creates a go back action handler with the provided dependencies.
+ * This factory pattern allows the action to access navigation state at runtime.
+ *
+ * @param navigator - The app navigator performing the back navigation
+ * @returns An action handler that navigates back
+ */
+export function createGoBackAction(
+  navigator: QuickBrickAppNavigator
+): ActionHandler<GoBackOptions> {
+  return async function goBackAction(action): Promise<ActionResult> {
+    const fallbackToHome = action.options?.fallbackToHome ?? true;
+    const backToTop = action.options?.backToTop ?? false;
+
+    // With fallbackToHome on, the navigator goes home on an empty stack by
+    // itself. The guard only matters when the caller opted out of that.
+    if (!fallbackToHome && !navigator.canGoBack()) {
+      log_info(
+        "goBack: no screen to go back to and fallbackToHome is disabled, ignoring"
+      );
+
+      return ActionResult.Error;
+    }
+
+    log_info(
+      `goBack: navigating back, fallbackToHome: ${fallbackToHome}, backToTop: ${backToTop}`
+    );
+
+    navigator.goBack(fallbackToHome, false, backToTop);
+
+    return ActionResult.Success;
+  };
+}

package/actionsExecutor/actions/goHome.ts

@@ -0,0 +1,31 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Creates a go home action handler with the provided dependencies.
+ * This factory pattern allows the action to access navigation state at runtime.
+ *
+ * The navigator's `initialLaunch` flag is intentionally not exposed: it selects
+ * the offline home river during app bootstrap and is not a per-action choice.
+ *
+ * @param navigator - The app navigator performing the navigation
+ * @returns An action handler that navigates to the home screen
+ */
+export function createGoHomeAction(
+  navigator: QuickBrickAppNavigator
+): ActionHandler {
+  return async function goHomeAction(): Promise<ActionResult> {
+    log_info("goHome: navigating to the home screen");
+
+    navigator.goHome();
+
+    return ActionResult.Success;
+  };
+}

package/actionsExecutor/actions/index.ts

@@ -15,6 +15,8 @@ export { appRestartAction } from "./appRestart";
 
 export { confirmDialogAction } from "./confirmDialog";
 
+export { showAlertAction } from "./showAlert";
+
 export { sendCloudEventAction } from "./sendCloudEvent";
 
 export { sessionStorageToggleFlagAction } from "./sessionStorageToggleFlag";
@@ -27,4 +29,14 @@ export { screenToggleFlagAction } from "./screenToggleFlag";
 
 export { createNavigateToScreenAction } from "./navigateToScreen";
 
+export { createPresentScreenAction } from "./presentScreen";
+
+export { createGoBackAction } from "./goBack";
+
+export { createGoHomeAction } from "./goHome";
+
 export { showToastAction } from "./showToast";
+
+export { openBottomSheetAction } from "./openBottomSheet";
+
+export { dismissBottomSheetAction } from "./dismissBottomSheet";

package/actionsExecutor/actions/navigateToScreen.ts

@@ -25,6 +25,19 @@ export interface NavigateToScreenOptions {
    * - undefined to navigate to screen without entry
    */
   entry?: "@{entry/}" | ZappEntry;
+
+  /**
+   * Arbitrary values passed through to the destination screen.
+   *
+   * They are stored on the navigation route as `NavigationScreenData.options`
+   * and read on the target screen via `useNavigation().data?.options`. Use this
+   * to hand per-navigation parameters to a screen instead of routing them
+   * through module-level state.
+   *
+   * Note: `legacyScreenData()` does not carry these values, so they are not
+   * visible through `useCurrentScreenData()` / `useRoute()`.
+   */
+  navigationOptions?: Record<string, unknown>;
 }
 
 /**
@@ -46,15 +59,9 @@ export function createNavigateToScreenAction(
     context?: ActionExecutionContext
   ): Promise<ActionResult> {
     const screenType = action.options?.typeMapping;
-
-    if (!screenType) {
-      log_error("navigateToScreen: typeMapping option is missing");
-
-      return ActionResult.Error;
-    }
-
     const navigationAction = action.options?.navigationAction;
     const entrySource = action.options?.entry;
+    const navigationOptions = action.options?.navigationOptions;
 
     const entry = entrySource
       ? entrySource === "@{entry/}"
@@ -62,61 +69,60 @@ export function createNavigateToScreenAction(
         : entrySource
       : null;
 
+    let navigate =
+      navigationAction === "push" ? navigator.push : navigator.replace;
+
+    let navigaingEntry = entry;
+
     if (entry) {
-      if (typeof entry !== "object") {
-        log_error(
-          `navigateToScreen: entry option is not an object, entry: ${entry}`
+      if (screenType) {
+        log_info(
+          `navigateToScreen: navigating to screen type: ${screenType} with entry id: ${entry.id}`
         );
 
-        return ActionResult.Error;
+        navigaingEntry = {
+          ...entry,
+          type: {
+            value: screenType,
+          },
+        };
+
+        if (navigationAction === "push") {
+          navigate = navigator.push;
+        } else {
+          // Use replaceTop for entries since replace() only accepts ZappRiver
+          navigate = navigator.replaceTop;
+        }
       }
+    } else {
+      if (!screenType) {
+        log_error("navigateToScreen: typeMapping and entry option is missing");
 
-      log_info(
-        `navigateToScreen: navigating to screen type: ${screenType} with entry id: ${entry.id}`
-      );
-
-      const overriddenEntry: ZappEntry = {
-        ...entry,
-        type: {
-          value: screenType,
-        },
-      };
-
-      if (navigationAction === "push") {
-        navigator.push(overriddenEntry);
-      } else {
-        // Use replaceTop for entries since replace() only accepts ZappRiver
-        navigator.replaceTop(overriddenEntry);
+        return ActionResult.Error;
       }
 
-      return ActionResult.Success;
-    }
-
-    const screenId = contentTypes?.[screenType]?.screen_id || null;
+      const screenId = contentTypes?.[screenType]?.screen_id || null;
+      const river = rivers?.[screenId];
 
-    if (!screenId) {
-      log_error(
-        `navigateToScreen: can not resolve screen type mapping: ${screenType}`
-      );
+      if (!screenId) {
+        log_error(
+          `navigateToScreen: can not resolve screen type mapping: ${screenType}`
+        );
 
-      return ActionResult.Error;
-    }
+        return ActionResult.Error;
+      }
 
-    const river = rivers[screenId];
+      if (!river) {
+        log_error("navigateToScreen: can not resolve river");
 
-    if (!river) {
-      log_error("navigateToScreen: can not resolve river");
+        return ActionResult.Error;
+      }
 
-      return ActionResult.Error;
+      navigaingEntry = river;
     }
 
     context?.callback?.({ success: false, error: null, abort: true });
-
-    if (navigationAction === "push") {
-      navigator.push(river);
-    } else {
-      navigator.replace(river);
-    }
+    navigate(navigaingEntry, navigationOptions);
 
     return ActionResult.Success;
   };

package/actionsExecutor/actions/openBottomSheet.ts

@@ -0,0 +1,338 @@
+/// <reference types="@applicaster/applicaster-types" />
+import {
+  PipesClientResponseHelper,
+  RequestBuilder,
+} from "@applicaster/zapp-pipes-v2-client";
+import uuidv4 from "uuid/v4";
+import { modalOrchestrator } from "../../modalState/ModalOrchestrator";
+import { openBottomSheetModal } from "../../modalState/store";
+import {
+  DynamicCollectionOptions,
+  getMenuItemActions,
+  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;
+
+  const summary = entry.summary as string;
+
+  const itemId = String(entry.id ?? entry.title ?? uuidv4());
+
+  return {
+    id: itemId,
+    title: entry.title as string,
+    summary,
+    icon: firstImage?.src,
+    isSelected: currentSelection.includes(itemId),
+    action: primaryAction,
+    actions: tapActions,
+    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, themePluginId, styleOverrides } =
+      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 || {}),
+            actionContext: context,
+          },
+        },
+      });
+
+      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;
+
+    const rawDynamicCollection =
+      content?.dynamicCollection ??
+      content?.extensions?.dynamic_collection_options;
+
+    // An empty items array is a valid starting state for a provider-backed or
+    // offline collection. A sheet with neither items nor a source still errors.
+    const hasDynamicCollection = Boolean(rawDynamicCollection);
+
+    if (
+      Array.isArray(inlineItems) &&
+      (inlineItems.length > 0 || hasDynamicCollection)
+    ) {
+      log_info("openBottomSheet: using inline items from action options", {
+        count: inlineItems.length,
+      });
+
+      role = content?.role ?? content?.extensions?.role;
+      behavior = parseBehaviorFromContentOptions(content);
+
+      items = inlineItems.map((entry) =>
+        entryToMenuItem(entry, behavior?.currentSelection ?? [])
+      );
+
+      dynamicCollection = parseDynamicCollectionOptions(rawDynamicCollection);
+    } 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,
+        themePluginId,
+        styleOverrides: styleOverrides ?? content?.styleOverrides,
+        emptyMessage: content?.emptyMessage,
+        context,
+      },
+    };
+
+    /**
+     * 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> => {
+      const actions = getMenuItemActions(item);
+
+      const executableActions = actions.filter(
+        (action) => !isPresentSubMenuAction(action)
+      );
+
+      if (executableActions.length > 0) {
+        await actionExecutor.handleActions(
+          executableActions as ActionType[],
+          {
+            ...context,
+            entry: item as any,
+          } as any
+        );
+      }
+    };
+
+    if (action.options?.replace) {
+      modalOrchestrator.replace(menu, onItemPress);
+    } else {
+      modalOrchestrator.open(menu, onItemPress);
+    }
+
+    return ActionResult.Success;
+  } catch (error) {
+    log_error("openBottomSheet: failed to open bottom sheet", {
+      error,
+      action,
+    });
+
+    return ActionResult.Error;
+  }
+}