@applicaster/zapp-react-native-utils 16.0.0-alpha.1263110541 → 16.0.0-alpha.1334507601

package/actionsExecutor/ActionExecutor.ts

@@ -56,7 +56,6 @@ export class ActionExecutor {
     context?: ActionExecutionContext
   ): Promise<ActionResult> => {
     for (const action of actionTypes) {
-      // TODO: Handle action result error
       const result = await this.handleAction(action, context);
 
       if (result === ActionResult.Cancel) {
@@ -64,6 +63,16 @@ export class ActionExecutor {
 
         return result;
       }
+
+      if (result === ActionResult.Error) {
+        // Everything after a failed step was written for a state that never
+        // happened — the event was refused, the screen never opened — so
+        // running it is how a chain ends up telling the user their mail was
+        // sent when it was not.
+        log_error(`handleActions: action: ${action.type} failed`, { action });
+
+        return result;
+      }
     }
 
     return ActionResult.Success;

package/actionsExecutor/ActionExecutorContext.tsx

@@ -9,7 +9,7 @@ import { ActionExecutionContext, ActionHandler } from "./types";
 import { batchRemoveAllFromNamespaceForStorage } from "../zappFrameworkUtils/localStorageHelper";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 
-import { useNavigation, useRivers } from "../reactHooks";
+import { useNavigation, usePresentScreen, useRivers } from "../reactHooks";
 import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
 import { APP_EVENTS } from "../appUtils/events";
@@ -18,6 +18,7 @@ import { createLogger } from "../logger";
 import {
   appRestartAction,
   confirmDialogAction,
+  showAlertAction,
   createGoBackAction,
   createGoHomeAction,
   createNavigateToScreenAction,
@@ -25,6 +26,7 @@ import {
   localStorageRemoveAction,
   localStorageSetAction,
   localStorageToggleFlagAction,
+  createPresentScreenAction,
   openBottomSheetAction,
   refreshComponentAction,
   screenSetVariableAction,
@@ -109,6 +111,8 @@ const prepareDefaultActions = (actionExecutor) => {
     confirmDialogAction
   );
 
+  actionExecutor.registerAction(ACTION_TYPES.SHOW_ALERT, showAlertAction);
+
   actionExecutor.registerAction(
     ACTION_TYPES.SEND_CLOUD_EVENT,
     sendCloudEventAction
@@ -157,6 +161,7 @@ export function withActionExecutor(Component) {
     const navigator = useNavigation();
     const rivers = useRivers();
     const contentTypes = useContentTypes();
+    const presentScreen = usePresentScreen();
 
     const handlers = useMemo(() => {
       return {
@@ -191,6 +196,13 @@ export function withActionExecutor(Component) {
       );
     }, [navigator, rivers, contentTypes]);
 
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        ACTION_TYPES.PRESENT_SCREEN,
+        createPresentScreenAction(presentScreen)
+      );
+    }, [presentScreen]);
+
     useEffect(() => {
       return _actionExecutor.registerAction(
         ACTION_TYPES.GO_BACK,

package/actionsExecutor/__tests__/ActionExecutor.test.ts

@@ -0,0 +1,71 @@
+import { ActionExecutor, ActionResult } from "../ActionExecutor";
+
+jest.mock("../../logger", () => ({
+  createLogger: () => ({
+    log_error: jest.fn(),
+    log_debug: jest.fn(),
+    log_info: jest.fn(),
+  }),
+}));
+
+describe("handleActions", () => {
+  const executor = () => {
+    const ran: string[] = [];
+    const actionExecutor = new ActionExecutor();
+
+    const register = (type: string, result?: ActionResult) =>
+      actionExecutor.registerAction(type, async () => {
+        ran.push(type);
+
+        return result as ActionResult;
+      });
+
+    register("ok", ActionResult.Success);
+    register("fails", ActionResult.Error);
+    register("cancels", ActionResult.Cancel);
+    register("recover", ActionResult.Success);
+    register("after", ActionResult.Success);
+
+    return { actionExecutor, ran };
+  };
+
+  // Everything after a failed step was written for a state that never
+  // happened: the event was refused, the screen never opened.
+  it("stops when an action fails", async () => {
+    const { actionExecutor, ran } = executor();
+
+    const result = await actionExecutor.handleActions([
+      { type: "fails" },
+      { type: "after" },
+    ]);
+
+    expect(ran).toEqual(["fails"]);
+    expect(result).toBe(ActionResult.Error);
+  });
+
+  it("still stops on a cancel", async () => {
+    const { actionExecutor, ran } = executor();
+
+    const result = await actionExecutor.handleActions([
+      { type: "cancels" },
+      { type: "after" },
+    ]);
+
+    expect(ran).toEqual(["cancels"]);
+    expect(result).toBe(ActionResult.Cancel);
+  });
+
+  // An action nobody registered never ran, which is a misconfigured feed
+  // rather than a step that failed. It is stepped over, as it always was.
+  it("steps over an action with no handler", async () => {
+    const { actionExecutor, ran } = executor();
+
+    const result = await actionExecutor.handleActions([
+      { type: "nobody-registered-this" },
+      { type: "after" },
+    ]);
+
+    expect(ran).toEqual(["after"]);
+    expect(result).toBe(ActionResult.Success);
+  });
+});

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

@@ -4,6 +4,9 @@ import { ActionResult } from "../../ActionExecutor";
 
 jest.mock("../../../modalState", () => ({
   dismissModal: jest.fn(),
+  modalOrchestrator: {
+    close: jest.fn(),
+  },
 }));
 
 describe("dismissBottomSheetAction", () => {

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

@@ -1,5 +1,5 @@
 import { openBottomSheetAction } from "../openBottomSheet";
-import { ActionResult } from "../../ActionExecutor";
+import { actionExecutor, ActionResult } from "../../ActionExecutor";
 import { modalOrchestrator } from "../../../modalState/ModalOrchestrator";
 
 jest.mock("../../../modalState/store", () => ({
@@ -97,4 +97,116 @@ describe("openBottomSheetAction inline items", () => {
     expect(modalOrchestrator.replace).toHaveBeenCalledTimes(1);
     expect(modalOrchestrator.open).not.toHaveBeenCalled();
   });
+
+  it("executes all actions in tap_actions when onItemPress is called", async () => {
+    const multiActionSheet = {
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Target Playlists" },
+        content: {
+          role: "collection_selector",
+          behavior: { selectMode: "none", currentSelection: [] },
+          items: [
+            {
+              id: "playlist-1",
+              title: "My Playlist",
+              extensions: {
+                tap_actions: {
+                  actions: [
+                    {
+                      type: "sendCloudEvent",
+                      options: { subject: "add_collection_to_collection" },
+                    },
+                    {
+                      type: "showToast",
+                      options: { message: "Added to playlist" },
+                    },
+                    { type: "dismissBottomSheet", options: {} },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    } as any;
+
+    await openBottomSheetAction(multiActionSheet);
+
+    const [menu, onItemPress] = (modalOrchestrator.open as jest.Mock).mock
+      .calls[0];
+
+    expect(menu.content.items[0].actions).toHaveLength(3);
+
+    const handleActionsSpy = jest
+      .spyOn(actionExecutor, "handleActions")
+      .mockResolvedValue(ActionResult.Success);
+
+    await onItemPress(menu.content.items[0]);
+
+    expect(handleActionsSpy).toHaveBeenCalledWith(
+      [
+        {
+          type: "sendCloudEvent",
+          options: { subject: "add_collection_to_collection" },
+        },
+        {
+          type: "showToast",
+          options: { message: "Added to playlist" },
+        },
+        { type: "dismissBottomSheet", options: {} },
+      ],
+      expect.objectContaining({
+        entry: menu.content.items[0],
+      })
+    );
+
+    handleActionsSpy.mockRestore();
+  });
+
+  it("executes preceding actions and excludes presentSubMenu from actionExecutor", async () => {
+    const subMenuSheet = {
+      type: "openBottomSheet",
+      options: {
+        header: { title: "Menu" },
+        content: {
+          items: [
+            {
+              id: "item-with-submenu",
+              title: "More Options",
+              extensions: {
+                tap_actions: {
+                  actions: [
+                    { type: "sendAnalytics", options: { event: "click_more" } },
+                    {
+                      type: "presentSubMenu",
+                      menu: { content: { title: "Sub Options", items: [] } },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    } as any;
+
+    await openBottomSheetAction(subMenuSheet);
+
+    const [menu, onItemPress] = (modalOrchestrator.open as jest.Mock).mock
+      .calls[0];
+
+    const handleActionsSpy = jest
+      .spyOn(actionExecutor, "handleActions")
+      .mockResolvedValue(ActionResult.Success);
+
+    await onItemPress(menu.content.items[0]);
+
+    expect(handleActionsSpy).toHaveBeenCalledWith(
+      [{ type: "sendAnalytics", options: { event: "click_more" } }],
+      expect.objectContaining({ entry: menu.content.items[0] })
+    );
+
+    handleActionsSpy.mockRestore();
+  });
 });

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

@@ -0,0 +1,127 @@
+import { createPresentScreenAction } from "../presentScreen";
+import { ActionResult } from "../../ActionExecutor";
+
+const contextEntry = { id: "context-entry" } as any;
+
+const succeeded = { success: true, cancelled: false };
+
+const cancelled = { success: false, cancelled: true };
+
+describe("presentScreenAction", () => {
+  let presentScreen: jest.Mock;
+  let presentScreenAction: ReturnType<typeof createPresentScreenAction>;
+
+  beforeEach(() => {
+    presentScreen = jest.fn().mockResolvedValue(succeeded);
+    presentScreenAction = createPresentScreenAction(presentScreen);
+  });
+
+  it("presents the screen named by typeMapping", async () => {
+    await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock" },
+    });
+
+    expect(presentScreen).toHaveBeenCalledWith({
+      typeMapping: "parent_lock",
+      entry: undefined,
+    });
+  });
+
+  it("fails without presenting anything when typeMapping is missing", async () => {
+    const result = await presentScreenAction({
+      type: "presentScreen",
+      options: {},
+    });
+
+    expect(result).toBe(ActionResult.Error);
+    expect(presentScreen).not.toHaveBeenCalled();
+  });
+
+  it("resolves the '@{entry/}' token to the entry from the execution context", async () => {
+    await presentScreenAction(
+      {
+        type: "presentScreen",
+        options: { typeMapping: "parent_lock", entry: "@{entry/}" },
+      },
+      { entry: contextEntry }
+    );
+
+    expect(presentScreen).toHaveBeenCalledWith({
+      typeMapping: "parent_lock",
+      entry: contextEntry,
+    });
+  });
+
+  it("presents an entry supplied inline in the options", async () => {
+    const inlineEntry = { id: "inline-entry" } as any;
+
+    await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock", entry: inlineEntry },
+    });
+
+    expect(presentScreen).toHaveBeenCalledWith({
+      typeMapping: "parent_lock",
+      entry: inlineEntry,
+    });
+  });
+
+  it("fails without presenting anything when the entry option is not an object", async () => {
+    const result = await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock", entry: "not-an-entry" as any },
+    });
+
+    expect(result).toBe(ActionResult.Error);
+    expect(presentScreen).not.toHaveBeenCalled();
+  });
+
+  it("succeeds when the presented screen reports success", async () => {
+    presentScreen.mockResolvedValue(succeeded);
+
+    const result = await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock" },
+    });
+
+    expect(result).toBe(ActionResult.Success);
+  });
+
+  it("cancels the action chain when the presented screen is cancelled", async () => {
+    presentScreen.mockResolvedValue(cancelled);
+
+    const result = await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock" },
+    });
+
+    expect(result).toBe(ActionResult.Cancel);
+  });
+
+  it("cancels the action chain when the presented screen reports failure", async () => {
+    presentScreen.mockResolvedValue({ success: false, cancelled: false });
+
+    const result = await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock" },
+    });
+
+    expect(result).toBe(ActionResult.Cancel);
+  });
+
+  it("errors when the screen could not be presented at all", async () => {
+    presentScreen.mockResolvedValue({
+      success: false,
+      cancelled: false,
+      error: "can not resolve screen type mapping: parent_lock",
+    });
+
+    const result = await presentScreenAction({
+      type: "presentScreen",
+      options: { typeMapping: "parent_lock" },
+    });
+
+    expect(result).toBe(ActionResult.Error);
+  });
+});

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

@@ -0,0 +1,49 @@
+import { showAlertAction } from "../showAlert";
+import { ActionResult } from "../../ActionExecutor";
+import { showAlertDialog } from "../../../alertUtils";
+
+jest.mock("../../../alertUtils", () => ({
+  showAlertDialog: jest.fn(),
+}));
+
+const dialog = showAlertDialog as jest.Mock;
+
+const dismiss = () => dialog.mock.calls[0][0].completion();
+
+describe("showAlert", () => {
+  beforeEach(() => dialog.mockReset());
+
+  it("shows the notice and resolves once it is dismissed", async () => {
+    const result = showAlertAction({
+      type: "showAlert",
+      options: { title: "Locked", message: "Ask the account owner." },
+    });
+
+    expect(dialog).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Locked",
+        message: "Ask the account owner.",
+        okButtonText: "OK",
+      })
+    );
+
+    dismiss();
+
+    // Dismissing a notice is not a cancellation: the chain carries on.
+    await expect(result).resolves.toBe(ActionResult.Success);
+  });
+
+  it("takes the dismiss label from the action", async () => {
+    const result = showAlertAction({
+      type: "showAlert",
+      options: { title: "Locked", okButtonText: "Got it" },
+    });
+
+    expect(dialog).toHaveBeenCalledWith(
+      expect.objectContaining({ okButtonText: "Got it" })
+    );
+
+    dismiss();
+    await result;
+  });
+});

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

@@ -31,7 +31,7 @@ describe("showToastAction", () => {
         message: "Added to queue",
         extraMessage: "Extra info",
         style: undefined,
-        timeout: 1000,
+        timeout: 5000,
         source: "confirmation",
       },
     ]);
@@ -78,7 +78,7 @@ describe("showToastAction", () => {
         message: undefined,
         extraMessage: undefined,
         style: undefined,
-        timeout: 1000,
+        timeout: 5000,
         source: "confirmation",
       },
     ]);

package/actionsExecutor/actions/dismissBottomSheet.ts

@@ -1,5 +1,5 @@
 /// <reference types="@applicaster/applicaster-types" />
-import { dismissModal } from "../../modalState";
+import { dismissModal, modalOrchestrator } from "../../modalState";
 import { ActionResult } from "../ActionExecutor";
 import { ActionHandler } from "../types";
 import { createLogger } from "../../logger";
@@ -16,6 +16,7 @@ export const dismissBottomSheetAction: ActionHandler<
   any
 > = async (): Promise<ActionResult> => {
   log_info("handleAction: dismissBottomSheet");
+  modalOrchestrator.close();
   dismissModal();
 
   return ActionResult.Success;

package/actionsExecutor/actions/index.ts

@@ -15,6 +15,8 @@ export { appRestartAction } from "./appRestart";
 
 export { confirmDialogAction } from "./confirmDialog";
 
+export { showAlertAction } from "./showAlert";
+
 export { sendCloudEventAction } from "./sendCloudEvent";
 
 export { sessionStorageToggleFlagAction } from "./sessionStorageToggleFlag";
@@ -27,6 +29,8 @@ export { screenToggleFlagAction } from "./screenToggleFlag";
 
 export { createNavigateToScreenAction } from "./navigateToScreen";
 
+export { createPresentScreenAction } from "./presentScreen";
+
 export { createGoBackAction } from "./goBack";
 
 export { createGoHomeAction } from "./goHome";

package/actionsExecutor/actions/openBottomSheet.ts

@@ -8,6 +8,7 @@ import { modalOrchestrator } from "../../modalState/ModalOrchestrator";
 import { openBottomSheetModal } from "../../modalState/store";
 import {
   DynamicCollectionOptions,
+  getMenuItemActions,
   isPresentSubMenuAction,
   Menu,
   MenuItem,
@@ -91,6 +92,7 @@ export function entryToMenuItem(
     icon: firstImage?.src,
     isSelected: currentSelection.includes(itemId),
     action: primaryAction,
+    actions: tapActions,
     entryActions: entry.extensions?.entry_action || [],
   };
 }
@@ -206,7 +208,10 @@ export async function openBottomSheetAction(
           items: [],
           onPress: () => {},
           contentComponent: content.component,
-          contentComponentProps: content.props || {},
+          contentComponentProps: {
+            ...(content.props || {}),
+            actionContext: context,
+          },
         },
       });
 
@@ -275,6 +280,7 @@ export async function openBottomSheetAction(
         dynamicCollection,
         themePluginId,
         styleOverrides: styleOverrides ?? content?.styleOverrides,
+        context,
       },
     };
 
@@ -288,18 +294,21 @@ export async function openBottomSheetAction(
      *   reference it.
      */
     const onItemPress = async (item: MenuItem): Promise<void> => {
-      if (!item.action || isPresentSubMenuAction(item.action)) {
-        // Submenu navigation is handled internally by the orchestrator
-        return;
-      }
+      const actions = getMenuItemActions(item);
 
-      await actionExecutor.handleAction(
-        item.action as ActionType,
-        {
-          ...context,
-          entry: item as any,
-        } as any
+      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) {

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;
+  };
+}