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

package/actionsExecutor/ActionExecutor.ts

@@ -12,7 +12,7 @@ const { log_error, log_debug, log_info } = createLogger({
   category: "General",
 });
 
-class ActionExecutor {
+export class ActionExecutor {
   private registeredActions: Record<string, ActionHandler> = {};
 
   // TODO: Remove context
@@ -101,7 +101,8 @@ class ActionExecutor {
 
   registerAction = <TOptions = Record<string, any>>(
     type: string,
-    handler: ActionHandler<TOptions>
+    handler: ActionHandler<TOptions>,
+    stateResolver?: (entry?: ZappEntry) => any
   ) => {
     if (this.registeredActions[type]) {
       log_error(`registerAction: action type: ${type} already registered`);
@@ -112,11 +113,48 @@ class ActionExecutor {
     this.registeredActions[type] = handler;
     log_debug(`registerAction: action type: ${type} registered`);
 
+    let unregisterState = () => {};
+
+    if (stateResolver) {
+      unregisterState = this.registerActionState(type, stateResolver);
+    }
+
     return () => {
       this.unregisterAction(type);
+      unregisterState();
       log_debug(`registerAction: action type: ${type} un-registered`);
     };
   };
+
+  private actionStates: Record<string, (entry?: ZappEntry) => any> = {};
+
+  registerActionState = (
+    type: string,
+    stateResolver: (entry?: ZappEntry) => any
+  ) => {
+    if (this.actionStates[type]) {
+      log_error(
+        `registerActionState: action type state: ${type} already registered`
+      );
+
+      return () => {};
+    }
+
+    this.actionStates[type] = stateResolver;
+    log_debug(`registerActionState: action type state: ${type} registered`);
+
+    return () => {
+      delete this.actionStates[type];
+
+      log_debug(
+        `registerActionState: action type state: ${type} un-registered`
+      );
+    };
+  };
+
+  getActionState = (type: string, entry?: ZappEntry) => {
+    return this.actionStates[type]?.(entry);
+  };
 }
 
 export const actionExecutor = new ActionExecutor();

package/actionsExecutor/ActionExecutorContext.tsx

@@ -19,9 +19,11 @@ import {
   appRestartAction,
   confirmDialogAction,
   createNavigateToScreenAction,
+  dismissBottomSheetAction,
   localStorageRemoveAction,
   localStorageSetAction,
   localStorageToggleFlagAction,
+  openBottomSheetAction,
   refreshComponentAction,
   screenSetVariableAction,
   screenToggleFlagAction,
@@ -33,6 +35,8 @@ import {
   showToastAction,
 } from "./actions";
 
+import { ACTION_TYPES } from "./consts";
+
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
@@ -41,9 +45,15 @@ export const { log_error, log_info, log_debug } = createLogger({
 export type ActionExecutorContextType = {
   registerAction: <TOptions = Record<string, any>>(
     type: string,
-    handler: ActionHandler<TOptions>
+    handler: ActionHandler<TOptions>,
+    stateResolver?: (entry?: ZappEntry) => any
   ) => void;
   unregisterAction: (type: string) => void;
+  registerActionState: (
+    type: string,
+    stateResolver: (entry?: ZappEntry) => any
+  ) => () => void;
+  getActionState: (type: string, entry?: ZappEntry) => any;
   handleAction: (
     action: ActionType,
     context?: ActionExecutionContext
@@ -63,34 +73,76 @@ type Props = {
 };
 
 const prepareDefaultActions = (actionExecutor) => {
-  actionExecutor.registerAction("localStorageSet", localStorageSetAction);
-  actionExecutor.registerAction("sessionStorageSet", sessionStorageSetAction);
-  actionExecutor.registerAction("localStorageRemove", localStorageRemoveAction);
+  actionExecutor.registerAction(
+    ACTION_TYPES.LOCAL_STORAGE_SET,
+    localStorageSetAction
+  );
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.SESSION_STORAGE_SET,
+    sessionStorageSetAction
+  );
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.LOCAL_STORAGE_REMOVE,
+    localStorageRemoveAction
+  );
 
   actionExecutor.registerAction(
-    "sessionStorageRemove",
+    ACTION_TYPES.SESSION_STORAGE_REMOVE,
     sessionStorageRemoveAction
   );
 
-  actionExecutor.registerAction("refreshComponent", refreshComponentAction);
-  actionExecutor.registerAction("switchLayout", switchLayoutAction);
-  actionExecutor.registerAction("appRestart", appRestartAction);
-  actionExecutor.registerAction("confirmDialog", confirmDialogAction);
-  actionExecutor.registerAction("sendCloudEvent", sendCloudEventAction);
+  actionExecutor.registerAction(
+    ACTION_TYPES.REFRESH_COMPONENT,
+    refreshComponentAction
+  );
+
+  actionExecutor.registerAction(ACTION_TYPES.SWITCH_LAYOUT, switchLayoutAction);
+
+  actionExecutor.registerAction(ACTION_TYPES.APP_RESTART, appRestartAction);
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.CONFIRM_DIALOG,
+    confirmDialogAction
+  );
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.SEND_CLOUD_EVENT,
+    sendCloudEventAction
+  );
 
   actionExecutor.registerAction(
-    "sessionStorageToggleFlag",
+    ACTION_TYPES.SESSION_STORAGE_TOGGLE_FLAG,
     sessionStorageToggleFlagAction
   );
 
   actionExecutor.registerAction(
-    "localStorageToggleFlag",
+    ACTION_TYPES.LOCAL_STORAGE_TOGGLE_FLAG,
     localStorageToggleFlagAction
   );
 
-  actionExecutor.registerAction("screenSetVariable", screenSetVariableAction);
-  actionExecutor.registerAction("screenToggleFlag", screenToggleFlagAction);
-  actionExecutor.registerAction("showToast", showToastAction);
+  actionExecutor.registerAction(
+    ACTION_TYPES.SCREEN_SET_VARIABLE,
+    screenSetVariableAction
+  );
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.SCREEN_TOGGLE_FLAG,
+    screenToggleFlagAction
+  );
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.OPEN_BOTTOM_SHEET,
+    openBottomSheetAction
+  );
+
+  actionExecutor.registerAction(
+    ACTION_TYPES.DISMISS_BOTTOM_SHEET,
+    dismissBottomSheetAction
+  );
+
+  actionExecutor.registerAction(ACTION_TYPES.SHOW_TOAST, showToastAction);
 };
 
 export const ActionExecutorContext =
@@ -108,6 +160,8 @@ export function withActionExecutor(Component) {
       return {
         unregisterAction: _actionExecutor.unregisterAction,
         registerAction: _actionExecutor.registerAction,
+        registerActionState: _actionExecutor.registerActionState,
+        getActionState: _actionExecutor.getActionState,
         handleAction: _actionExecutor.handleAction,
         handleActions: _actionExecutor.handleActions,
         handleEntryActions: _actionExecutor.handleEntryActions,
@@ -130,7 +184,7 @@ export function withActionExecutor(Component) {
 
     useEffect(() => {
       return _actionExecutor.registerAction(
-        "navigateToScreen",
+        ACTION_TYPES.NAVIGATE_TO_SCREEN,
         createNavigateToScreenAction(navigator, rivers, contentTypes)
       );
     }, [navigator, rivers, contentTypes]);

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

@@ -0,0 +1,22 @@
+import { dismissBottomSheetAction } from "../dismissBottomSheet";
+import { dismissModal } from "../../../modalState";
+import { ActionResult } from "../../ActionExecutor";
+
+jest.mock("../../../modalState", () => ({
+  dismissModal: jest.fn(),
+}));
+
+describe("dismissBottomSheetAction", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("calls dismissModal and returns ActionResult.Success", async () => {
+    const result = await dismissBottomSheetAction({
+      type: "dismissBottomSheet",
+    });
+
+    expect(dismissModal).toHaveBeenCalledTimes(1);
+    expect(result).toBe(ActionResult.Success);
+  });
+});

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

@@ -0,0 +1,88 @@
+import { loadItemsFromSource } from "../openBottomSheet";
+
+const mockCall = jest.fn();
+
+jest.mock("@applicaster/zapp-pipes-v2-client", () => ({
+  RequestBuilder: jest.fn().mockImplementation(() => ({
+    setEntryContext: jest.fn().mockReturnThis(),
+    setScreenContext: jest.fn().mockReturnThis(),
+    setUrl: jest.fn().mockReturnThis(),
+    buildAxiosRequest: jest.fn().mockResolvedValue(undefined),
+    call: (...args: any[]) => mockCall(...args),
+  })),
+  PipesClientResponseHelper: jest.fn().mockImplementation(() => ({
+    error: null,
+  })),
+}));
+
+describe("loadItemsFromSource", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns items plus role and behavior from feed.extensions", async () => {
+    mockCall.mockResolvedValueOnce({
+      response: {
+        entry: [{ id: "a", title: "Playlist A", media_group: [] }],
+        extensions: {
+          role: "collection_selector",
+          behavior: {
+            select_mode: "multi",
+            current_selection: ["a"],
+            selector: "extensions.tag",
+          },
+        },
+      },
+    });
+
+    const result = await loadItemsFromSource("https://example.com/feed");
+
+    expect(result.role).toBe("collection_selector");
+
+    expect(result.behavior).toEqual({
+      selectMode: "multi",
+      currentSelection: ["a"],
+      selector: "extensions.tag",
+    });
+
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0].isSelected).toBe(true);
+    expect(result.items[0].title).toBe("Playlist A");
+  });
+
+  it("returns undefined role/behavior when feed has no extensions", async () => {
+    mockCall.mockResolvedValueOnce({
+      response: {
+        entry: [{ id: "1", title: "Plain", media_group: [] }],
+      },
+    });
+
+    const result = await loadItemsFromSource("https://example.com/plain");
+
+    expect(result.role).toBeUndefined();
+    expect(result.behavior).toBeUndefined();
+    expect(result.items).toHaveLength(1);
+  });
+
+  it("preserves events in dynamic_collection_options", async () => {
+    mockCall.mockResolvedValueOnce({
+      response: {
+        entry: [],
+        extensions: {
+          dynamic_collection_options: {
+            operations: "add,remove",
+            events: {
+              add: [{ type: "showTextInput", options: {} }],
+            },
+          },
+        },
+      },
+    });
+
+    const result = await loadItemsFromSource("https://example.com/feed");
+
+    expect(result.dynamicCollection?.events).toEqual({
+      add: [{ type: "showTextInput", options: {} }],
+    });
+  });
+});

package/actionsExecutor/actions/__tests__/openBottomSheet.customContent.test.ts

@@ -0,0 +1,76 @@
+import { openBottomSheetAction } from "../openBottomSheet";
+import { ActionResult } from "../../ActionExecutor";
+import { openBottomSheetModal } from "../../../modalState/store";
+import { modalOrchestrator } from "../../../modalState/ModalOrchestrator";
+
+jest.mock("../../../modalState/store", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../../../modalState/ModalOrchestrator", () => ({
+  modalOrchestrator: {
+    open: jest.fn(),
+  },
+  isPresentSubMenuAction: jest.requireActual("../../../modalState/types")
+    .isPresentSubMenuAction,
+}));
+
+describe("openBottomSheetAction custom content", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("opens default sheet with contentComponent body props", async () => {
+    const CustomContent = function CustomContent() {
+      return null;
+    };
+
+    const result = await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Create Playlist" },
+        content: {
+          component: CustomContent,
+          props: {
+            inputLabel: "Name your playlist",
+            buttonLabel: "Create",
+            defaultValue: "",
+            submitAction: { type: "sendCloudEvent", options: {} },
+          },
+        },
+      },
+    } as any);
+
+    expect(result).toBe(ActionResult.Success);
+    expect(openBottomSheetModal).toHaveBeenCalledTimes(1);
+    expect(modalOrchestrator.open).not.toHaveBeenCalled();
+
+    const args = (openBottomSheetModal as jest.Mock).mock.calls[0][0];
+    // Default ModalComponent provides the standard header
+    expect(args.ModalBottomSheetContent).toBeUndefined();
+
+    expect(args.modalBottomSheetContentProps).toMatchObject({
+      title: "Create Playlist",
+      contentComponent: CustomContent,
+      contentComponentProps: {
+        inputLabel: "Name your playlist",
+        buttonLabel: "Create",
+        defaultValue: "",
+      },
+    });
+  });
+
+  it("returns Error when neither list data nor content.component is provided", async () => {
+    const result = await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Empty" },
+        content: {},
+      },
+    } as any);
+
+    expect(result).toBe(ActionResult.Error);
+    expect(openBottomSheetModal).not.toHaveBeenCalled();
+    expect(modalOrchestrator.open).not.toHaveBeenCalled();
+  });
+});

package/actionsExecutor/actions/__tests__/openBottomSheet.inlineItems.test.ts

@@ -0,0 +1,130 @@
+import { openBottomSheetAction } from "../openBottomSheet";
+import { ActionResult } from "../../ActionExecutor";
+import { modalOrchestrator } from "../../../modalState/ModalOrchestrator";
+
+jest.mock("../../../modalState/store", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../../../modalState/ModalOrchestrator", () => ({
+  modalOrchestrator: {
+    open: jest.fn(),
+    replace: jest.fn(),
+    stackSize: 0,
+  },
+  isPresentSubMenuAction: jest.requireActual("../../../modalState/types")
+    .isPresentSubMenuAction,
+}));
+
+describe("openBottomSheetAction inline items", () => {
+  const HeaderComponent = function HeaderComponent() {
+    return null;
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (modalOrchestrator as any).stackSize = 0;
+  });
+
+  const speedSheetAction = {
+    type: "openBottomSheet",
+    options: {
+      header: { title: "Playback Speed" },
+      content: {
+        role: "collection_selector",
+        behavior: {
+          selectMode: "single",
+          currentSelection: ["1"],
+        },
+        items: [
+          {
+            id: "0.8",
+            title: "0.8x",
+            extensions: {
+              tap_actions: {
+                actions: [
+                  { type: "setPlaybackSpeed", options: { value: 0.8 } },
+                ],
+              },
+            },
+          },
+          {
+            id: "1",
+            title: "1x",
+            extensions: {
+              tap_actions: {
+                actions: [{ type: "setPlaybackSpeed", options: { value: 1 } }],
+              },
+            },
+          },
+        ],
+      },
+    },
+  } as any;
+
+  it("opens orchestrator with inline items and marks current selection", async () => {
+    const result = await openBottomSheetAction(speedSheetAction);
+
+    expect(result).toBe(ActionResult.Success);
+    expect(modalOrchestrator.open).toHaveBeenCalledTimes(1);
+    expect(modalOrchestrator.replace).not.toHaveBeenCalled();
+
+    const [menu] = (modalOrchestrator.open as jest.Mock).mock.calls[0];
+
+    expect(menu.content.items[0].isSelected).toBe(false);
+
+    expect(menu.content.items[1]).toMatchObject({
+      id: "1",
+      title: "1x",
+      isSelected: true,
+      action: { type: "setPlaybackSpeed", options: { value: 1 } },
+    });
+  });
+
+  it("pushes a new sheet by default even when another sheet is already open", async () => {
+    (modalOrchestrator as any).stackSize = 1;
+
+    await openBottomSheetAction(speedSheetAction);
+
+    expect(modalOrchestrator.open).toHaveBeenCalledTimes(1);
+    expect(modalOrchestrator.replace).not.toHaveBeenCalled();
+  });
+
+  it("replaces the current sheet when options.replace is true", async () => {
+    (modalOrchestrator as any).stackSize = 1;
+
+    await openBottomSheetAction({
+      ...speedSheetAction,
+      options: { ...speedSheetAction.options, replace: true },
+    });
+
+    expect(modalOrchestrator.replace).toHaveBeenCalledTimes(1);
+    expect(modalOrchestrator.open).not.toHaveBeenCalled();
+  });
+
+  it("forwards a custom header component and its props onto the menu", async () => {
+    await openBottomSheetAction({
+      type: "openBottomSheet",
+      options: {
+        header: {
+          title: "Sleep Timer",
+          component: HeaderComponent,
+          componentProps: { timerDate: 123 },
+        },
+        content: {
+          items: [{ id: "5", title: "5 minutes" }],
+        },
+      },
+    } as any);
+
+    const [menu] = (modalOrchestrator.open as jest.Mock).mock.calls[0];
+
+    expect(menu.header).toEqual({
+      title: "Sleep Timer",
+      subtitle: undefined,
+      icon: undefined,
+      component: HeaderComponent,
+      componentProps: { timerDate: 123 },
+    });
+  });
+});

package/actionsExecutor/actions/dismissBottomSheet.ts

@@ -0,0 +1,22 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { dismissModal } 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");
+  dismissModal();
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/index.ts

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