@applicaster/zapp-react-native-utils 16.0.0-rc.57 → 16.0.0-rc.59

package/actionsExecutor/actions/openBottomSheet.ts

@@ -0,0 +1,322 @@
+/// <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,
+  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,
+    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,
+            component: header.component,
+            componentProps: header.componentProps,
+          }
+        : 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> => {
+      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
+      );
+    };
+
+    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/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/consts.ts

@@ -2,3 +2,26 @@ 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",
+  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/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -3,8 +3,8 @@ import { distinctUntilChanged } from "rxjs/operators";
 import { Player } from "../player";
 import { createLogger, utilsLogger } from "../../../logger";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { findPluginByIdentifier } from "../../../pluginUtils";
 import {
-  findPluginByIdentifier,
   loadFeedEntry,
   loadFeedAndPrefetchThumbnailImage,
   parseTimeToSeconds,
@@ -170,7 +170,10 @@ export class OverlaysObserver {
         return;
       }
 
-      const playNextFeedUrl: string = retrieveFeedUrl(this.entry);
+      const playNextFeedUrl: string = await retrieveFeedUrl(
+        this.entry,
+        plugins
+      );
 
       if (!playNextFeedUrl || typeof playNextFeedUrl !== "string") {
         log_debug(

package/appUtils/playerManager/OverlayObserver/utils.ts

@@ -3,10 +3,12 @@ import {
   PipesClientResponseHelper,
   RequestBuilder,
 } from "@applicaster/zapp-pipes-v2-client";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { log_error, log_info } from "./OverlaysObserver";
-import * as R from "ramda";
 import { toNumber, toNumberWithDefault } from "../../../numberUtils";
 
+import { findPluginByIdentifier } from "../../../pluginUtils";
+
 export const parseTimeToSeconds = (timeStr: string): number => {
   const validationError = new Error("Invalid time format");
 
@@ -40,11 +42,51 @@ export const parseTimeToSeconds = (timeStr: string): number => {
   }
 };
 
-export const retrieveFeedUrl = (entry: ZappEntry) =>
-  entry?.extensions?.play_next_feed_url;
+/**
+ * HACK / TEMPORARY WORKAROUND:
+ * Resolves the play_next_feed_url dynamically for OverlaysObserver.
+ *
+ * WHY THIS IS HACKED HERE:
+ * OverlaysObserver was originally designed as a Recommendation Overlay engine (fetching static
+ * play_next_feed_url for overlay UI visuals). However, for dynamic queue & continuous audio playback,
+ * modifying feeds via `decorateFeed` at load time doesn't work (due to feed caching and mid-playback queue mutations).
+ * To avoid mutating feed payloads across the app, we temporarily intercept play_next_feed_url here
+ * at runtime to check if QueueManager has active/upcoming queue items.
+ *
+ * FUTURE ARCHITECTURE / TODO:
+ * Move queue/playlist resolution into a dedicated Player/Queue Provider module (or Handler Chain)
+ * on playerManager, decoupling Queue playback logic entirely from OverlaysObserver (which should
+ * strictly focus on recommendation visuals and chapter markers).
+ */
+export const retrieveFeedUrl = async (
+  entry: ZappEntry,
+  plugins?: ZappPlugin[]
+): Promise<string> => {
+  if (!entry) return null;
+
+  const availablePlugins = plugins || appStore.get("plugins");
+  const queuePlugin = findPluginByIdentifier("queue-action", availablePlugins);
+
+  if (queuePlugin) {
+    try {
+      const { QueueManager } = require("@applicaster/queue-action/src/Manager");
+      const upcomingQueue = await QueueManager.instance.getUpcomingQueue();
+
+      if (upcomingQueue && upcomingQueue.length > 0) {
+        const queueItemId = entry?.extensions?.queueItemId || entry?.id;
+
+        return `pipesv2://queue-action/play-next?queueItemId=${queueItemId}`;
+      }
+    } catch (e) {
+      log_error("retrieveFeedUrl: Failed to resolve QueueManager", e);
+    }
+  }
+
+  return entry?.extensions?.play_next_feed_url;
+};
 
 export const retrieveOverlayDuration = (plugin) =>
-  toNumberWithDefault(plugin?.configuration?.overlay_duration, 15);
+  toNumberWithDefault(15, plugin?.configuration?.overlay_duration);
 
 export const retrieveOverlayTriggerOffset = (item: ZappEntry) => {
   return item && item.extensions && item.extensions.overlay_timestamp
@@ -150,19 +192,3 @@ export const loadFeedAndPrefetchThumbnailImage = async (
 
   return playNextEntry;
 };
-
-export const findPluginByIdentifier = (
-  identifier: string,
-  plugins: ZappPlugin[]
-): ZappPlugin => {
-  if (!identifier) {
-    return undefined;
-  }
-
-  const plugin = R.compose(
-    R.find(R.propEq("identifier", identifier)),
-    R.values
-  )(plugins);
-
-  return plugin;
-};

package/arrayUtils/__tests__/reorderByIds.test.ts

@@ -0,0 +1,50 @@
+import { reorderByIds } from "../index";
+
+describe("reorderByIds", () => {
+  const items = [
+    { id: "1", title: "Track 1" },
+    { id: "2", title: "Track 2" },
+    { id: "3", title: "Track 3" },
+    { id: "4", title: "Track 4" },
+  ];
+
+  it("returns an empty array if items is empty or nullish", () => {
+    expect(reorderByIds([], ["1"])).toEqual([]);
+    expect(reorderByIds(null as any, ["1"])).toEqual([]);
+  });
+
+  it("returns a copy of items if orderedIds is empty or nullish", () => {
+    expect(reorderByIds(items, [])).toEqual(items);
+    expect(reorderByIds(items, null as any)).toEqual(items);
+  });
+
+  it("reorders items based on the provided orderedIds sequence", () => {
+    const result = reorderByIds(items, ["3", "1", "4", "2"]);
+
+    expect(result.map((i) => i.id)).toEqual(["3", "1", "4", "2"]);
+  });
+
+  it("replaces items in their original slots when reordering a subset", () => {
+    const result = reorderByIds(items, ["4", "2"]);
+
+    expect(result.map((i) => i.id)).toEqual(["1", "4", "3", "2"]);
+  });
+
+  it("ignores IDs in orderedIds that do not exist in items", () => {
+    const result = reorderByIds(items, ["unknown", "3", "99", "1"]);
+
+    expect(result.map((i) => i.id)).toEqual(["3", "2", "1", "4"]);
+  });
+
+  it("supports custom getId selector function", () => {
+    const customItems = [
+      { key: "a", name: "Alpha" },
+      { key: "b", name: "Beta" },
+      { key: "c", name: "Gamma" },
+    ];
+
+    const result = reorderByIds(customItems, ["c", "a"], (item) => item.key);
+
+    expect(result.map((i) => i.key)).toEqual(["c", "b", "a"]);
+  });
+});

package/arrayUtils/index.ts

@@ -158,3 +158,82 @@ export const allTruthy = (xs: boolean[]) =>
 
 /** Returns `true` when at least one value in `xs` is truthy. */
 export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);
+
+/**
+ * Reorders `items` based on an ordered array of IDs (`orderedIds`).
+ * Items whose IDs are in `orderedIds` appear first in that exact sequence.
+ * Any remaining items not present in `orderedIds` are appended at the end preserving their relative order.
+ */
+export function reorderByIds<T>(
+  items: T[],
+  orderedIds: string[],
+  getId: (item: T) => string | string[] = (item: any) => item?.id
+): T[] {
+  if (!items || items.length === 0) return [];
+  if (!orderedIds || orderedIds.length === 0) return [...items];
+
+  const itemMap = new Map<string, T>();
+
+  items.forEach((item) => {
+    const rawId = getId(item);
+    const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+    keys.forEach((key) => {
+      if (key !== undefined && key !== null && key !== "") {
+        itemMap.set(String(key), item);
+      }
+    });
+  });
+
+  const reorderedSubset: T[] = [];
+  const orderedIdsSet = new Set<string>();
+
+  orderedIds.forEach((id) => {
+    const strId = String(id);
+    const item = itemMap.get(strId);
+
+    if (item && !reorderedSubset.includes(item)) {
+      reorderedSubset.push(item);
+      const rawId = getId(item);
+      const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+      keys.forEach((k) => {
+        if (k !== undefined && k !== null && k !== "") {
+          orderedIdsSet.add(String(k));
+        }
+      });
+    }
+  });
+
+  if (reorderedSubset.length === 0) return [...items];
+
+  let subsetIdx = 0;
+  const result: T[] = [];
+
+  items.forEach((item) => {
+    const rawId = getId(item);
+    const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+    const isMatched = keys.some(
+      (k) =>
+        k !== undefined &&
+        k !== null &&
+        k !== "" &&
+        orderedIdsSet.has(String(k))
+    );
+
+    if (isMatched) {
+      if (subsetIdx < reorderedSubset.length) {
+        result.push(reorderedSubset[subsetIdx++]);
+      }
+    } else {
+      result.push(item);
+    }
+  });
+
+  while (subsetIdx < reorderedSubset.length) {
+    result.push(reorderedSubset[subsetIdx++]);
+  }
+
+  return result;
+}