@applicaster/zapp-react-native-utils 15.1.6-alpha.2015591222 → 15.1.6

package/actionsExecutor/ActionExecutorContext.tsx

@@ -19,11 +19,9 @@ import {
   appRestartAction,
   confirmDialogAction,
   createNavigateToScreenAction,
-  dismissBottomSheetAction,
   localStorageRemoveAction,
   localStorageSetAction,
   localStorageToggleFlagAction,
-  openBottomSheetAction,
   refreshComponentAction,
   screenSetVariableAction,
   screenToggleFlagAction,
@@ -92,8 +90,6 @@ const prepareDefaultActions = (actionExecutor) => {
 
   actionExecutor.registerAction("screenSetVariable", screenSetVariableAction);
   actionExecutor.registerAction("screenToggleFlag", screenToggleFlagAction);
-  actionExecutor.registerAction("openBottomSheet", openBottomSheetAction);
-  actionExecutor.registerAction("dismissBottomSheet", dismissBottomSheetAction);
   actionExecutor.registerAction("showToast", showToastAction);
 };
 

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

@@ -11,14 +11,13 @@ describe("showToastAction", () => {
     jest.clearAllMocks();
   });
 
-  it("calls postEvent with showToast payload and returns ActionResult.Success", async () => {
+  it("calls postEvent with the provided options and returns Success", async () => {
     const action = {
       type: "showToast",
       options: {
         id: "toast-1",
         message: "Added to queue",
         extraMessage: "Extra info",
-        timeout: 3000,
       },
     };
 
@@ -32,13 +31,36 @@ describe("showToastAction", () => {
         message: "Added to queue",
         extraMessage: "Extra info",
         style: undefined,
-        timeout: 3000,
+        timeout: undefined,
       },
     ]);
 
     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,
+      },
+    ]);
+  });
+
   it("handles missing or empty options without throwing", async () => {
     const action = {
       type: "showToast",

package/actionsExecutor/actions/index.ts

@@ -28,7 +28,3 @@ export { screenToggleFlagAction } from "./screenToggleFlag";
 export { createNavigateToScreenAction } from "./navigateToScreen";
 
 export { showToastAction } from "./showToast";
-
-export { openBottomSheetAction } from "./openBottomSheet";
-
-export { dismissBottomSheetAction } from "./dismissBottomSheet";

package/actionsExecutor/actions/refreshComponent.ts

@@ -14,8 +14,10 @@ const { log_info } = createLogger({
   category: "General",
 });
 
-/** Prefer component data.source, otherwise direct UIComponentContext parent. */
-function getComponentFeedData(component) {
+/**
+ * Helper function to prefer component data.source, otherwise direct UIComponentContext parent.
+ */
+function getComponentFeedData(component: any) {
   if (component?.data?.source) {
     return component.data;
   }
@@ -27,6 +29,25 @@ function getComponentFeedData(component) {
   return null;
 }
 
+/**
+ * Helper function to find the parent component in a component tree.
+ */
+function findParentComponent(
+  childId: string,
+  parent: ZappRiver | ZappUIComponent
+): ZappRiver | ZappUIComponent | null {
+  for (const child of parent?.ui_components || []) {
+    if (child.id === childId) return parent;
+
+    if (child.ui_components) {
+      const found = findParentComponent(childId, child);
+      if (found) return found;
+    }
+  }
+
+  return null;
+}
+
 /**
  * Refreshes a component's data by reloading its data source.
  * Supports URL inflation with context variables.
@@ -37,7 +58,11 @@ export const refreshComponentAction: ActionHandler = async (
 ): Promise<ActionResult> => {
   const dispatch = appStore.getDispatch();
 
-  const componentData = getComponentFeedData(context?.component);
+  const componentData =
+    getComponentFeedData(context?.component) ||
+    (context?.component?.id && context?.screenData
+      ? findParentComponent(context.component.id, context.screenData)?.data
+      : null);
 
   const source = componentData?.source;
   const mapping = componentData?.mapping;
@@ -49,7 +74,7 @@ export const refreshComponentAction: ActionHandler = async (
       getInflatedDataSourceUrl({
         source,
         contexts: {
-          entry: context?.screenEntry,
+          entry: context?.entryContext || context?.screenEntry,
           screen: context?.screenData,
           search: getSearchContext(null, mapping),
         },
@@ -57,12 +82,6 @@ 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,18 +62,10 @@ export const sendCloudEventAction: ActionHandler<
       subject: options.subject || String((entry as ZappEntry)?.id || ""),
     });
 
-    console.log(
-      "[sendCloudEvent] sending event to URL:",
-      options.url,
-      cloudEvent
-    );
-
     log_info("handleAction: sendCloudEvent event", { cloudEvent });
 
     const { error, code } = await sendCloudEvent(cloudEvent, options.url);
 
-    console.log("[sendCloudEvent] result code:", code, "error:", error);
-
     if (error) {
       log_error("sendCloudEvent: error sending cloud event", { error });
 

package/actionsExecutor/actions/showToast.ts

@@ -17,13 +17,15 @@ 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,
     },
   ]);
 

package/actionsExecutor/feedDecorator.ts

@@ -27,7 +27,7 @@ function makeMultiSelect(feed: ZappFeed, key, decoratedFeed) {
   );
 
   const behavior = {
-    ...feed.extensions?.behavior,
+    ...feed.extensions?.["behavior"],
     select_mode: "multi",
     current_selection: `@{${scope}/${key}}`,
   };
@@ -75,7 +75,7 @@ function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
   );
 
   const behavior = {
-    ...feed.extensions?.behavior,
+    ...feed.extensions?.["behavior"],
     select_mode: "single",
     current_selection: `@{${scope}/${key}}`,
   };
@@ -141,11 +141,11 @@ function makeSingleSelect(feed: ZappFeed, key, decoratedFeed) {
 }
 
 export const decorateFeed = (feed: ZappFeed) => {
-  if (!(feed.extensions?.role === "preference_editor")) {
+  if (!(feed.extensions?.["role"] === "preference_editor")) {
     return feed;
   }
 
-  const key = feed.extensions?.preference_editor_options?.key;
+  const key = feed.extensions?.["preference_editor_options"]?.["key"];
 
   if (!key) {
     log_error(
@@ -160,8 +160,8 @@ 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";
+    (feed.extensions?.["preference_editor_options"]?.select_mode ||
+      feed.extensions?.["behavior"]?.select_mode) === "single";
 
   if (isSingleSelect) {
     return makeSingleSelect(feed, key, decoratedFeed);

package/actionsExecutor/types.ts

@@ -16,10 +16,8 @@ export interface ActionExecutionContext {
   /** The entry that defines the screen (if screen was opened from an entry) */
   screenEntry?: ZappEntry;
 
-  /** The UI component that triggered the action.
-   * From UIComponentContext as `{ ...component, parent }`.
-   */
-  component?: ZappUIComponent & { parent?: ZappUIComponent };
+  /** The UI component that triggered the action */
+  component?: ZappUIComponent;
 
   /** The route identifier for the current screen */
   screenRoute?: string;
@@ -33,7 +31,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/modalState/index.ts

@@ -1,30 +1,83 @@
-export {
-  modalStore,
-  useModalStore,
-  openModal,
-  dismissModal,
-  openBottomSheetModal,
-  useModalStoreState,
-} from "./store";
-
-export type { ModalState, ModalStore } from "./store";
-
-export { modalOrchestrator } from "./ModalOrchestrator";
-
-export { ContentViewModel } from "./ContentViewModel";
-
-export type {
-  Menu,
-  MenuItem,
-  Header,
-  Content,
-  Action,
-  PresentSubMenuAction,
-  SecondaryAction,
-  SelectMode,
-  SelectionBehavior,
-} from "./types";
-
-export { isPresentSubMenuAction } from "./types";
-
-export { useBottomSheetContent } from "./useBottomSheetContent";
+import { useStore, createStore } from "zustand";
+
+interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
+
+interface ModalStore {
+  modalState: ModalState;
+  setModalState: (newState: Partial<ModalState>) => void;
+  openModal: (
+    item: any,
+    options?: Record<string, unknown>,
+    props?: Record<string, unknown>
+  ) => void;
+  dismissModal: () => void;
+}
+
+const initialModalState: ModalState = {
+  visible: false,
+  screen: null,
+  options: {},
+  props: {},
+};
+
+export const modalStore = createStore<ModalStore>((set) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({ item, options = {}, props }: OpenModalArg) =>
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...options,
+          onDismiss: () => set({ modalState: initialModalState }),
+          onRequestClose: () => set({ modalState: initialModalState }),
+        },
+        props,
+      },
+    }),
+  dismissModal: () => set(() => ({ modalState: initialModalState })),
+}));
+
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
+
+export const openModal = modalStore.getInitialState().openModal;
+
+export const dismissModal = modalStore.getInitialState().dismissModal;
+
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
+
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.1.6-alpha.2015591222",
+  "version": "15.1.6",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.6-alpha.2015591222",
+    "@applicaster/applicaster-types": "15.1.6",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/actions/index.ts

@@ -1,8 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Context, useContext, useState } from "react";
+import { Context, useCallback, useContext, useEffect, useState } from "react";
 import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ActionsContext";
 
+import {
+  observeEntryState,
+  RegisteredActionValue,
+} from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
 const logger = reactHooksLogger.addSubsystem("actions");
@@ -46,3 +50,49 @@ export function useActions<T = unknown>(plugId: string): any {
 
   return context;
 }
+
+export type UseEntryActionState = {
+  state: CellActionEntryState | undefined;
+  invokeAction: (options?: InvokeArgsOptions) => void;
+};
+
+/**
+ * Subscribes a component to a single action's state for a given `entry`.
+ *
+ * It observes state changes reactively via `observeEntryState` (which is backed
+ * by the action's `addListener`), seeds the initial value synchronously from
+ * `initialEntryState`, and returns a memoized `invokeAction` that forwards
+ * optimistic `updateState` updates back into local state.
+ *
+ * This is the single, unified way to drive an action button - it works the same
+ * for registry actions, legacy context-provider actions and entry actions.
+ */
+export function useEntryActionState(
+  action: RegisteredActionValue | undefined,
+  entry: ZappEntry | ZappFeed
+): UseEntryActionState {
+  const [state, setState] = useState<CellActionEntryState | undefined>(() =>
+    action?.initialEntryState?.(entry)
+  );
+
+  const entryId = (entry as ZappEntry)?.id;
+
+  useEffect(() => {
+    if (!action) return undefined;
+
+    const subscription = observeEntryState(action, entry).subscribe(setState);
+
+    return () => subscription.unsubscribe();
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [action, entryId]);
+
+  const invokeAction = useCallback(
+    (options: InvokeArgsOptions = {}) => {
+      action?.invokeAction?.(entry, { updateState: setState, ...options });
+    },
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+    [action, entryId]
+  );
+
+  return { state, invokeAction };
+}

package/reactHooks/layout/index.ts

@@ -49,7 +49,7 @@ export function useStatusBarHeight() {
   });
 }
 
-export const getNavbarHeight = () => {
+const getNavbarHeight = () => {
   return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
 };
 

package/uiActionsRegistrator/index.ts

@@ -0,0 +1,203 @@
+/* eslint-disable no-dupe-class-members */
+import { Observable } from "rxjs";
+import { createLogger } from "../logger";
+
+const { log_debug, log_warning, log_verbose } = createLogger({
+  subsystem: "UIActionsRegistry",
+  category: "ActionRegistration",
+});
+
+/**
+ * The runtime value of a UI action.
+ *
+ * This is the object that consumers interact with (render buttons for,
+ * invoke on press, read initial state from, etc.). It intentionally keeps an
+ * open shape (`[K: string]: any`) so that both the modern registry-based
+ * actions and the legacy context-provider based actions can be represented by
+ * the same structure.
+ */
+export type RegisteredActionValue = {
+  state?: any;
+  getInitialState?: () => Promise<void>;
+  initialEntryState?: (item: ZappEntry | ZappFeed) => CellActionEntryState;
+  invokeAction: (
+    item: ZappEntry | ZappFeed,
+    options?: InvokeArgsOptions
+  ) => void;
+  isActionAvailable?: (item: ZappEntry | ZappFeed) => boolean;
+  addListener?: (
+    entryId: string,
+    listener: CellActionStateListenerFunction
+  ) => CellActionStateRemoveListenerFunction;
+  /**
+   * Optional RX stream of the action state for a given entry. When not
+   * provided, `observeEntryState` derives one from `initialEntryState` +
+   * `addListener` (see below).
+   */
+  observeEntryState?: (
+    entry: ZappEntry | ZappFeed
+  ) => Observable<CellActionEntryState>;
+  [K: string]: any;
+};
+
+export type RegisteredAction = {
+  identifier: string; // Plugin identifier or synthetic name
+  action: RegisteredActionValue;
+};
+
+/**
+ * A function that, given an optional context (currently just the `entry`),
+ * returns the list of actions it wants to contribute.
+ *
+ * Returning an array is what allows a single provider (plugin or otherwise) to
+ * expose more than one action, and to compute those actions based on the entry.
+ */
+export type UIActionProvider = (params: {
+  entry?: ZappEntry | ZappFeed;
+}) => RegisteredAction[];
+
+/**
+ * Returns an RX `Observable` that emits the action state for `entry`.
+ *
+ * If the action already exposes its own `observeEntryState`, it is used as-is.
+ * Otherwise we build the stream from the legacy imperative API:
+ *  - it immediately emits `initialEntryState(entry)` (if available), and
+ *  - it subscribes to further changes via `addListener(entryId, listener)`,
+ *    unsubscribing automatically when the observable is torn down.
+ *
+ * This lets every action - old or new - be consumed reactively through a single
+ * mechanism, without each consumer having to wire up `addListener` manually.
+ */
+export function observeEntryState(
+  action: RegisteredActionValue | undefined,
+  entry: ZappEntry | ZappFeed
+): Observable<CellActionEntryState> {
+  if (typeof action?.observeEntryState === "function") {
+    return action.observeEntryState(entry);
+  }
+
+  return new Observable<CellActionEntryState>((subscriber) => {
+    const initialState = action?.initialEntryState?.(entry);
+
+    if (initialState !== undefined) {
+      subscriber.next(initialState);
+    }
+
+    const removeListener = action?.addListener?.(
+      String((entry as ZappEntry)?.id),
+      (state: CellActionEntryState) => subscriber.next(state)
+    );
+
+    return () => removeListener?.();
+  });
+}
+
+class UIActionsRegistry {
+  private registeredActions: Record<string, UIActionProvider> = {};
+
+  /**
+   * Register a dynamic action provider under a unique `name`.
+   * The provider can return one or more actions and may use the passed `entry`.
+   * Returns an unregister function.
+   */
+  registerActionProvider(
+    name: string,
+    actionProvider: UIActionProvider
+  ): () => void {
+    const isOverride = Boolean(this.registeredActions[name]);
+
+    if (isOverride) {
+      log_warning(
+        `registerActionProvider: overriding existing provider for "${name}"`,
+        { name }
+      );
+    } else {
+      log_debug(`registerActionProvider: registered "${name}"`, { name });
+    }
+
+    this.registeredActions[name] = actionProvider;
+
+    return () => {
+      // Only remove if it's still the same provider to avoid races where a
+      // newer registration replaced this one.
+      if (this.registeredActions[name] === actionProvider) {
+        delete this.registeredActions[name];
+        log_debug(`registerActionProvider: unregistered "${name}"`, { name });
+      } else {
+        log_debug(
+          `registerActionProvider: skipped unregister for "${name}" – newer provider is active`,
+          { name }
+        );
+      }
+    };
+  }
+
+  /**
+   * Convenience helper to register a single, static action from anywhere in the
+   * app (it does not need to be a plugin). Returns an unregister function.
+   */
+  registerAction(
+    identifier: string,
+    action: RegisteredActionValue
+  ): () => void {
+    log_debug(`registerAction: registering single action "${identifier}"`, {
+      identifier,
+    });
+
+    return this.registerActionProvider(identifier, () => [
+      { identifier, action },
+    ]);
+  }
+
+  getEntryActions(entry: ZappEntry): RegisteredAction[] {
+    const results = Object.keys(this.registeredActions)
+      .map((key) => this.registeredActions[key]({ entry }))
+      .flatMap((a) => a);
+
+    log_verbose(
+      `getEntryActions: resolved ${results.length} action(s) for entry "${entry?.id}"`,
+      { entryId: entry?.id, identifiers: results.map((r) => r.identifier) }
+    );
+
+    return results;
+  }
+
+  getActions(name: string, entry?: ZappEntry | ZappFeed): RegisteredAction[] {
+    if (!this.registeredActions[name]) {
+      log_warning(`getActions: no provider found for "${name}"`, { name });
+
+      return [];
+    }
+
+    const results = this.registeredActions[name]({ entry }) ?? [];
+
+    log_verbose(
+      `getActions: resolved ${results.length} action(s) for "${name}"`,
+      {
+        name,
+        entryId: (entry as ZappEntry)?.id,
+        identifiers: results.map((r) => r.identifier),
+      }
+    );
+
+    return results;
+  }
+
+  /**
+   * Returns the runtime value of the first action registered under `name`, or
+   * `undefined`. This mirrors the shape returned by the legacy `useActions`
+   * hook, easing migration of single-action consumers.
+   */
+  getAction(
+    name: string,
+    entry?: ZappEntry | ZappFeed
+  ): RegisteredActionValue | undefined {
+    return this.getActions(name, entry)[0]?.action;
+  }
+
+  hasAction(name: string): boolean {
+    return Boolean(this.registeredActions[name]);
+  }
+}
+
+export const uiActionsRegistry = new UIActionsRegistry();