@applicaster/zapp-react-native-utils 16.0.0-alpha.5130495330 → 16.0.0-alpha.5274284048

package/actionsExecutor/actions/navigateToScreen.ts

@@ -0,0 +1,137 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info, log_error } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the navigateToScreen action.
+ */
+export interface NavigateToScreenOptions {
+  /** The screen type to navigate to (from content types mapping) */
+  typeMapping: string;
+
+  /** Navigation action: push adds to history, replace replaces current screen */
+  navigationAction?: "push" | "replace";
+
+  /**
+   * Entry to navigate with. Can be:
+   * - "@{entry/}" to use the context entry
+   * - A ZappEntry object
+   * - 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>;
+}
+
+/**
+ * Creates a navigation action handler with the provided dependencies.
+ * This factory pattern allows the action to access navigation state at runtime.
+ *
+ * @param navigator - The app navigator for push/replace operations
+ * @param rivers - Map of screen IDs to river definitions
+ * @param contentTypes - Map of content type names to screen configurations
+ * @returns An action handler that performs screen navigation
+ */
+export function createNavigateToScreenAction(
+  navigator: QuickBrickAppNavigator,
+  rivers: Record<string, ZappRiver>,
+  contentTypes: ZappContentTypes
+): ActionHandler<NavigateToScreenOptions> {
+  return async function navigateToScreenAction(
+    action,
+    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/}"
+        ? context?.entry
+        : entrySource
+      : null;
+
+    if (entry) {
+      if (typeof entry !== "object") {
+        log_error(
+          `navigateToScreen: entry option is not an object, entry: ${entry}`
+        );
+
+        return ActionResult.Error;
+      }
+
+      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, navigationOptions);
+      } else {
+        // Use replaceTop for entries since replace() only accepts ZappRiver
+        navigator.replaceTop(overriddenEntry, navigationOptions);
+      }
+
+      return ActionResult.Success;
+    }
+
+    const screenId = contentTypes?.[screenType]?.screen_id || null;
+
+    if (!screenId) {
+      log_error(
+        `navigateToScreen: can not resolve screen type mapping: ${screenType}`
+      );
+
+      return ActionResult.Error;
+    }
+
+    const river = rivers[screenId];
+
+    if (!river) {
+      log_error("navigateToScreen: can not resolve river");
+
+      return ActionResult.Error;
+    }
+
+    context?.callback?.({ success: false, error: null, abort: true });
+
+    if (navigationAction === "push") {
+      navigator.push(river, navigationOptions);
+    } else {
+      navigator.replace(river, navigationOptions);
+    }
+
+    return ActionResult.Success;
+  };
+}

package/actionsExecutor/actions/openBottomSheet.ts

@@ -0,0 +1,329 @@
+/// <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;
+
+    if (Array.isArray(inlineItems) && inlineItems.length > 0) {
+      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(
+        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,
+        themePluginId,
+        styleOverrides: styleOverrides ?? content?.styleOverrides,
+        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;
+  }
+}

package/actionsExecutor/actions/presentScreen.ts

@@ -0,0 +1,78 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import type { PresentScreenFn } from "../../reactHooks/navigation/usePresentScreen";
+import { createLogger } from "../../logger";
+
+const { log_error } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the presentScreen action.
+ */
+export interface PresentScreenOptions {
+  /** The screen type to present (from content types mapping) */
+  typeMapping: string;
+
+  /**
+   * Entry to present the screen with. Can be:
+   * - "@{entry/}" to use the context entry
+   * - A ZappEntry object
+   * - undefined to present the screen without an entry
+   */
+  entry?: "@{entry/}" | ZappEntry;
+}
+
+/**
+ * Creates a present-screen action handler with the provided dependencies.
+ *
+ * Unlike navigateToScreen, this action does not return until the presented
+ * screen reports a result, so a screen that gates the flow (a parental lock,
+ * for example) can stop the remaining actions by being cancelled.
+ *
+ * @param presentScreen - Presents a screen as a modal and resolves with its result
+ * @returns An action handler that presents a screen and awaits its outcome
+ */
+export function createPresentScreenAction(
+  presentScreen: PresentScreenFn
+): ActionHandler<PresentScreenOptions> {
+  return async function presentScreenAction(
+    action,
+    context?: ActionExecutionContext
+  ): Promise<ActionResult> {
+    const typeMapping = action.options?.typeMapping;
+
+    if (!typeMapping) {
+      log_error("presentScreen: typeMapping option is missing");
+
+      return ActionResult.Error;
+    }
+
+    const entrySource = action.options?.entry;
+
+    const entry = entrySource
+      ? entrySource === "@{entry/}"
+        ? context?.entry
+        : entrySource
+      : undefined;
+
+    if (entry && typeof entry !== "object") {
+      log_error(
+        `presentScreen: entry option is not an object, entry: ${entry}`
+      );
+
+      return ActionResult.Error;
+    }
+
+    const result = await presentScreen({ typeMapping, entry });
+
+    if (result.error) {
+      return ActionResult.Error;
+    }
+
+    // Anything short of success stops the remaining actions in the chain.
+    return result.success ? ActionResult.Success : ActionResult.Cancel;
+  };
+}

package/actionsExecutor/actions/refreshComponent.ts

@@ -0,0 +1,85 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "../../reactHooks/feed/useInflatedUrl";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/** Prefer component data.source, otherwise direct UIComponentContext parent. */
+function getComponentFeedData(component) {
+  if (component?.data?.source) {
+    return component.data;
+  }
+
+  if (component?.parent?.data?.source) {
+    return component.parent.data;
+  }
+
+  return null;
+}
+
+/**
+ * Refreshes a component's data by reloading its data source.
+ * Supports URL inflation with context variables.
+ */
+export const refreshComponentAction: ActionHandler = async (
+  _action,
+  context?: ActionExecutionContext
+): Promise<ActionResult> => {
+  const dispatch = appStore.getDispatch();
+
+  const componentData = getComponentFeedData(context?.component);
+
+  const source = componentData?.source;
+  const mapping = componentData?.mapping;
+
+  let dataSource = source;
+
+  if (source && mapping) {
+    dataSource =
+      getInflatedDataSourceUrl({
+        source,
+        contexts: {
+          entry: context?.screenEntry,
+          screen: context?.screenData,
+          search: getSearchContext(null, mapping),
+        },
+        mapping,
+      }) || source;
+  }
+
+  if (!dataSource) {
+    log_info("handleAction: refreshComponent skipped: no dataSource found");
+
+    return ActionResult.Success;
+  }
+
+  log_info(`handleAction: refreshComponent for dataSource:${dataSource}`, {
+    source,
+    inflatedUrl: dataSource,
+    mapping,
+    entryContextId: context?.entryContext?.id,
+    entryId: context?.entry?.id,
+  });
+
+  // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
+  // TODO: handle focused item removal
+  dispatch(
+    loadPipesData(dataSource, {
+      silentRefresh: false,
+      clearCache: true,
+      riverId: context?.screenData?.id,
+    })
+  );
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/screenSetVariable.ts

@@ -0,0 +1,35 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { screenSetVariable } from "../ScreenActions";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+
+/**
+ * Options for screenSetVariable action.
+ */
+export interface ScreenSetVariableOptions {
+  /** The key/namespace for storing the variable */
+  key: string;
+
+  /** Path to extract the value from entry */
+  selector?: string;
+}
+
+/**
+ * Sets a variable in screen state storage.
+ * The value is extracted from the entry using the selector option.
+ */
+export const screenSetVariableAction: ActionHandler<
+  ScreenSetVariableOptions
+> = async (action, context?: ActionExecutionContext): Promise<ActionResult> => {
+  const route = context?.screenRoute;
+  const screenStateStore = context?.screenStateStore;
+
+  await screenSetVariable(
+    route,
+    screenStateStore,
+    { entry: context?.entry, options: action.options },
+    action
+  );
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/screenToggleFlag.ts

@@ -0,0 +1,38 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { screenToggleFlag } from "../ScreenActions";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+
+/**
+ * Options for screenToggleFlag action.
+ */
+export interface ScreenToggleFlagOptions {
+  /** The key/namespace for storing the flag */
+  key: string;
+
+  /** Path to extract the tag from entry (e.g., "extensions.tag") */
+  selector?: string;
+
+  /** Maximum number of items that can be selected */
+  max_items?: number;
+}
+
+/**
+ * Toggles a flag in screen state storage (adds or removes an item from a collection).
+ * Useful for screen-level multi-select functionality.
+ */
+export const screenToggleFlagAction: ActionHandler<
+  ScreenToggleFlagOptions
+> = async (action, context?: ActionExecutionContext): Promise<ActionResult> => {
+  const screenRoute = context?.screenRoute;
+  const screenStateStore = context?.screenStateStore;
+
+  await screenToggleFlag(
+    screenRoute,
+    screenStateStore,
+    { entry: context?.entry, options: action.options },
+    action
+  );
+
+  return ActionResult.Success;
+};