@applicaster/zapp-react-native-utils 16.0.0-alpha.6861239588 → 16.0.0-alpha.6918106967

package/actionsExecutor/actions/openBottomSheet.ts

@@ -0,0 +1,325 @@
+/// <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 || {},
+        },
+      });
+
+      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,
+      },
+    };
+
+    /**
+     * 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

@@ -57,6 +57,12 @@ export const refreshComponentAction: ActionHandler = async (
       }) || source;
   }
 
+  if (!dataSource) {
+    log_info("handleAction: refreshComponent skipped: no dataSource found");
+
+    return ActionResult.Success;
+  }
+
   log_info(`handleAction: refreshComponent for dataSource:${dataSource}`, {
     source,
     inflatedUrl: dataSource,

package/actionsExecutor/actions/sendCloudEvent.ts

@@ -62,10 +62,15 @@ export const sendCloudEventAction: ActionHandler<
       subject: options.subject || String((entry as ZappEntry)?.id || ""),
     });
 
-    log_info("handleAction: sendCloudEvent event", { cloudEvent });
+    log_info("handleAction: sending sendCloudEvent to URL", {
+      url: options.url,
+      cloudEvent,
+    });
 
     const { error, code } = await sendCloudEvent(cloudEvent, options.url);
 
+    log_info("handleAction: sendCloudEvent result", { code, error });
+
     if (error) {
       log_error("sendCloudEvent: error sending cloud event", { error });
 

package/actionsExecutor/actions/showToast.ts

@@ -3,12 +3,65 @@ import { ActionResult } from "../ActionExecutor";
 import { ActionHandler } from "../types";
 import { postEvent } from "../../reactHooks/useSubscriberFor";
 
+export const CONFIRMATION_TOAST_SOURCE = "confirmation";
+
+export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
+
 /**
- * Options for showToast action.
+ * Shows a mobile confirmation toast with Theme defaults from
+ * `Confirmation Toast / Message` in the base theme plugin.
+ *
+ * This action is confirmation-only by design: it always stamps
+ * `source: "confirmation"` (so Theme confirmation styles apply) and defaults
+ * `timeout` to 1000 ms. Non-confirmation toasts (e.g. Offline Experience)
+ * must post on the shared `"showToast"` event bus directly and omit `source`.
+ * Callers may override individual style fields; Theme supplies the rest.
+ *
+ * @example From React via ActionExecutorContext
+ * ```tsx
+ * import React, { useContext } from "react";
+ * import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+ *
+ * function QueueButton() {
+ *   const { handleAction } = useContext(ActionExecutorContext);
+ *
+ *   const onPress = () => {
+ *     void handleAction({
+ *       type: "showToast",
+ *       options: { message: "Added to queue" },
+ *     });
+ *   };
+ *
+ *   return <Button onPress={onPress} title="Add to queue" />;
+ * }
+ * ```
+ *
+ * @example From code via the actionExecutor singleton
+ * ```ts
+ * import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+ *
+ * await actionExecutor.handleAction({
+ *   type: "showToast",
+ *   options: {
+ *     message: "Playlist created",
+ *     style: { backgroundColor: "#00AA55" }, // optional partial override
+ *   },
+ * });
+ * ```
+ *
+ * @example From entry / pipes actions JSON
+ * ```json
+ * {
+ *   "type": "showToast",
+ *   "options": {
+ *     "message": "Item removed from playlist"
+ *   }
+ * }
+ * ```
  */
 export interface ShowToastActionOptions {
-  id: string;
-  message: string;
+  id?: string;
+  message?: string;
   extraMessage?: string;
   style?: any;
   timeout?: number;
@@ -17,13 +70,16 @@ export interface ShowToastActionOptions {
 export const showToastAction: ActionHandler<ShowToastActionOptions> = async (
   action
 ): Promise<ActionResult> => {
+  const options = action?.options;
+
   postEvent("showToast", [
     {
-      id: action.options.id,
-      message: action.options.message,
-      extraMessage: action.options.extraMessage,
-      style: action.options.style,
-      timeout: action.options.timeout,
+      id: options?.id,
+      message: options?.message,
+      extraMessage: options?.extraMessage,
+      style: options?.style,
+      timeout: options?.timeout ?? CONFIRMATION_TOAST_DEFAULT_TIMEOUT,
+      source: CONFIRMATION_TOAST_SOURCE,
     },
   ]);
 

package/actionsExecutor/consts.ts

@@ -2,3 +2,29 @@ export const TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT =
   "action.localStorageToggleFlag.maxItemsReached";
 
 export const ACTION_EXECUTOR_EVENT_SOURCE = "ActionExecutor";
+
+export const ACTION_TYPES = {
+  OPEN_BOTTOM_SHEET: "openBottomSheet",
+  DISMISS_BOTTOM_SHEET: "dismissBottomSheet",
+  PRESENT_SUB_MENU: "presentSubMenu",
+  SEND_CLOUD_EVENT: "sendCloudEvent",
+  NAVIGATE_TO_SCREEN: "navigateToScreen",
+  PRESENT_SCREEN: "presentScreen",
+  GO_BACK: "goBack",
+  GO_HOME: "goHome",
+  SHOW_TOAST: "showToast",
+  LOCAL_STORAGE_SET: "localStorageSet",
+  LOCAL_STORAGE_REMOVE: "localStorageRemove",
+  LOCAL_STORAGE_TOGGLE_FLAG: "localStorageToggleFlag",
+  SESSION_STORAGE_SET: "sessionStorageSet",
+  SESSION_STORAGE_REMOVE: "sessionStorageRemove",
+  SESSION_STORAGE_TOGGLE_FLAG: "sessionStorageToggleFlag",
+  REFRESH_COMPONENT: "refreshComponent",
+  SWITCH_LAYOUT: "switchLayout",
+  APP_RESTART: "appRestart",
+  CONFIRM_DIALOG: "confirmDialog",
+  SCREEN_SET_VARIABLE: "screenSetVariable",
+  SCREEN_TOGGLE_FLAG: "screenToggleFlag",
+} as const;
+
+export type KnownActionType = (typeof ACTION_TYPES)[keyof typeof ACTION_TYPES];

package/actionsExecutor/feedDecorator.ts

@@ -159,13 +159,13 @@ export const decorateFeed = (feed: ZappFeed) => {
 
   const decoratedFeed = R.clone(feed);
 
-  const isSingleSelect =
-    (feed.extensions?.preference_editor_options?.select_mode ||
-      feed.extensions?.behavior?.select_mode) === "single";
+  const selectMode =
+    feed.extensions?.preference_editor_options?.select_mode ||
+    feed.extensions?.behavior?.select_mode;
 
-  if (isSingleSelect) {
+  if (selectMode === "single") {
     return makeSingleSelect(feed, key, decoratedFeed);
-  } else {
-    return makeMultiSelect(feed, key, decoratedFeed);
   }
+
+  return makeMultiSelect(feed, key, decoratedFeed);
 };

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/analyticsUtils/PlayerAnalyticsManager.ts

@@ -8,7 +8,7 @@ import {
 } from "../appUtils/playerManager";
 import { Player } from "../appUtils/playerManager/player";
 import { AnalyticPlayerListener } from "./AnalyticPlayerListener";
-import { PlayerRole } from "../appUtils/playerManager/conts";
+import { PlayerRole } from "../appUtils/playerManager/const";
 
 enum PlayerAnalyticsTrackerType {
   PlayerAnalyticsTracker = "PlayerAnalyticsTracker",

package/appUtils/HooksManager/index.ts

@@ -498,6 +498,15 @@ export function HooksManager({
         presentUI
       );
     } catch (e) {
+      // Without this the failure is invisible: the hook stops right after the
+      // "Executing hook" line, with nothing in the log explaining why and no
+      // remaining hook ever running.
+      logHookEvent(
+        hooksManagerLogger.error,
+        `runInBackground: hook ${hookPlugin.identifier} threw: ${e?.message}`,
+        { hook: hookPlugin, payload, error: e, stack: e?.stack }
+      );
+
       hookPlugin.setStateAndNotify(HOOKS_EVENTS.ERROR, {
         error: e,
         hookPlugin,