@applicaster/zapp-react-native-utils 16.0.0-alpha.4416921324 → 16.0.0-alpha.4548770949

package/actionUtils/index.ts

@@ -3,5 +3,7 @@ import { isTV } from "../reactUtils";
 
 export const resolveDefaultAssetUri = (source: string | number): string =>
   isTV()
-    ? (source as string)
+    ? typeof source === "number"
+      ? Image.resolveAssetSource(source)?.uri || ""
+      : (source as string)
     : Image.resolveAssetSource(source as number)?.uri || "";

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
@@ -56,7 +56,6 @@ 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 @@ 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;
@@ -101,7 +110,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 +122,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

@@ -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,10 +18,16 @@ import { createLogger } from "../logger";
 import {
   appRestartAction,
   confirmDialogAction,
+  showAlertAction,
+  createGoBackAction,
+  createGoHomeAction,
   createNavigateToScreenAction,
+  dismissBottomSheetAction,
   localStorageRemoveAction,
   localStorageSetAction,
   localStorageToggleFlagAction,
+  createPresentScreenAction,
+  openBottomSheetAction,
   refreshComponentAction,
   screenSetVariableAction,
   screenToggleFlagAction,
@@ -33,6 +39,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 +49,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 +77,78 @@ 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.SHOW_ALERT, showAlertAction);
 
   actionExecutor.registerAction(
-    "sessionStorageToggleFlag",
+    ACTION_TYPES.SEND_CLOUD_EVENT,
+    sendCloudEventAction
+  );
+
+  actionExecutor.registerAction(
+    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 =
@@ -103,11 +161,14 @@ export function withActionExecutor(Component) {
     const navigator = useNavigation();
     const rivers = useRivers();
     const contentTypes = useContentTypes();
+    const presentScreen = usePresentScreen();
 
     const handlers = useMemo(() => {
       return {
         unregisterAction: _actionExecutor.unregisterAction,
         registerAction: _actionExecutor.registerAction,
+        registerActionState: _actionExecutor.registerActionState,
+        getActionState: _actionExecutor.getActionState,
         handleAction: _actionExecutor.handleAction,
         handleActions: _actionExecutor.handleActions,
         handleEntryActions: _actionExecutor.handleEntryActions,
@@ -130,11 +191,32 @@ export function withActionExecutor(Component) {
 
     useEffect(() => {
       return _actionExecutor.registerAction(
-        "navigateToScreen",
+        ACTION_TYPES.NAVIGATE_TO_SCREEN,
         createNavigateToScreenAction(navigator, rivers, contentTypes)
       );
     }, [navigator, rivers, contentTypes]);
 
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        ACTION_TYPES.PRESENT_SCREEN,
+        createPresentScreenAction(presentScreen)
+      );
+    }, [presentScreen]);
+
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        ACTION_TYPES.GO_BACK,
+        createGoBackAction(navigator)
+      );
+    }, [navigator]);
+
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        ACTION_TYPES.GO_HOME,
+        createGoHomeAction(navigator)
+      );
+    }, [navigator]);
+
     return (
       <ActionExecutorContext.Provider value={handlers}>
         <Component {...props} />

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/__tests__/StorageActions.test.ts

@@ -0,0 +1,98 @@
+import { ActionResult } from "../ActionExecutor";
+import { localStorageToggleFlag } from "../StorageActions";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "../consts";
+import { postEvent } from "../../reactHooks/useSubscriberFor";
+
+jest.mock("../ActionExecutorContext", () => ({
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+jest.mock("../../reactHooks/useSubscriberFor", () => ({
+  postEvent: jest.fn(),
+}));
+
+// In-memory stand-in for the storage-backed provider; the limit check under
+// test lives in storageToggleFlag, not in the provider.
+const mockStore: Record<string, string[]> = {};
+
+jest.mock("../../storage/StorageMultiSelectProvider", () => ({
+  StorageMultiSelectProvider: {
+    getProvider: (keyNamespace: string) => ({
+      getSelectedAsync: async () => [...(mockStore[keyNamespace] ?? [])],
+      addItem: async (item: string) => {
+        mockStore[keyNamespace] = [...(mockStore[keyNamespace] ?? []), item];
+      },
+      removeItem: async (item: string) => {
+        mockStore[keyNamespace] = (mockStore[keyNamespace] ?? []).filter(
+          (it) => it !== item
+        );
+      },
+    }),
+  },
+}));
+
+const KEY = "user_preferences.teams";
+
+// Entries of a team selection feed with explicit tap actions
+// (localStorageToggleFlag with key and selector).
+const teamEntry = (n: number) =>
+  ({
+    id: `team-${n}`,
+    title: `Team ${n}`,
+    type: { value: "action" },
+    extensions: { tag: `TEAM ${n}` },
+  }) as unknown as ZappEntry;
+
+const tapAction = (extraOptions = {}) =>
+  ({
+    type: "localStorageToggleFlag",
+    options: { key: KEY, selector: "extensions.tag", ...extraOptions },
+  }) as unknown as ActionType;
+
+const tapTeams = async (count: number, extraOptions = {}) => {
+  const results: ActionResult[] = [];
+
+  for (let n = 1; n <= count; n++) {
+    results.push(
+      await localStorageToggleFlag(
+        { entry: teamEntry(n) },
+        tapAction(extraOptions)
+      )
+    );
+  }
+
+  return results;
+};
+
+describe("localStorageToggleFlag max_items", () => {
+  beforeEach(() => {
+    delete mockStore[KEY];
+    jest.clearAllMocks();
+  });
+
+  it("blocks the 11th team when max_items is in the action options", async () => {
+    const results = await tapTeams(11, { max_items: "10" });
+
+    expect(results.slice(0, 10)).toEqual(Array(10).fill(ActionResult.Success));
+    expect(results[10]).toBe(ActionResult.Cancel);
+    expect(mockStore[KEY]).toHaveLength(10);
+
+    expect(postEvent).toHaveBeenCalledWith(
+      TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT,
+      [expect.objectContaining({ maxItems: "10", tag: "TEAM 11" })]
+    );
+  });
+
+  it("still lets a selected team be removed at the limit", async () => {
+    await tapTeams(10, { max_items: "10" });
+
+    const result = await localStorageToggleFlag(
+      { entry: teamEntry(1) },
+      tapAction({ max_items: "10" })
+    );
+
+    expect(result).toBe(ActionResult.Success);
+    expect(mockStore[KEY]).toHaveLength(9);
+  });
+});

package/actionsExecutor/__tests__/feedDecorator.test.ts

@@ -0,0 +1,91 @@
+import { decorateFeed } from "../feedDecorator";
+
+const preferenceFeed = (selectMode: string) =>
+  ({
+    id: "agree-component",
+    title: "I agree to the terms",
+    type: { value: "feed" },
+    extensions: {
+      role: "preference_editor",
+      preference_editor_options: {
+        key: "agree",
+        scope: "screen",
+        select_mode: selectMode,
+      },
+    },
+    entry: [
+      {
+        id: "I agree to the terms-agree",
+        title: "I agree to the terms",
+        type: { value: "action" },
+        extensions: { tag: "true" },
+      },
+    ],
+  }) as unknown as ZappFeed;
+
+describe("decorateFeed", () => {
+  it("decorates single select feeds with screenSetVariable", () => {
+    const decorated = decorateFeed(preferenceFeed("single"));
+
+    expect(decorated.extensions.behavior).toEqual(
+      expect.objectContaining({
+        select_mode: "single",
+        current_selection: "@{screen/agree}",
+      })
+    );
+
+    expect(decorated.entry[0].extensions.tap_actions.actions[0].type).toBe(
+      "screenSetVariable"
+    );
+  });
+
+  it("decorates multi select feeds with screenToggleFlag", () => {
+    const decorated = decorateFeed(preferenceFeed("multi"));
+
+    expect(decorated.extensions.behavior.select_mode).toBe("multi");
+
+    expect(decorated.entry[0].extensions.tap_actions.actions[0].type).toBe(
+      "screenToggleFlag"
+    );
+  });
+
+  it("leaves a feed without the preference_editor role untouched", () => {
+    const feed = preferenceFeed("single");
+    feed.extensions.role = undefined;
+
+    const decorated = decorateFeed(feed);
+
+    expect(decorated.extensions.behavior).toBeUndefined();
+    expect(decorated.entry[0].extensions.tap_actions).toBeUndefined();
+  });
+});
+
+describe("decorateFeed max_items", () => {
+  const toggleAction = (feed: ZappFeed) =>
+    decorateFeed(feed).entry[0].extensions.tap_actions.actions[0];
+
+  it.each([
+    ["screen", "screenToggleFlag"],
+    ["session", "sessionStorageToggleFlag"],
+    ["ctx", "localStorageToggleFlag"],
+  ])("passes max_items to the %s toggle action", (scope, type) => {
+    const feed = preferenceFeed("multi");
+    feed.extensions.preference_editor_options.scope = scope;
+    feed.extensions.preference_editor_options.max_items = "10";
+
+    const toggle = toggleAction(feed);
+
+    expect(toggle.type).toBe(type);
+    expect(toggle.options).toEqual({ key: "agree", max_items: 10 });
+  });
+
+  it.each([undefined, 0, "0", "ten", -1])(
+    "does not set a limit for max_items %p",
+    (maxItems) => {
+      const feed = preferenceFeed("multi");
+      feed.extensions.preference_editor_options.max_items = maxItems;
+
+      expect(toggleAction(feed).options).toEqual({ key: "agree" });
+    }
+  );
+});

package/actionsExecutor/__tests__/screenToggleFlag.test.ts

@@ -0,0 +1,90 @@
+import { ActionExecutor, ActionResult } from "../ActionExecutor";
+import { screenToggleFlagAction } from "../actions/screenToggleFlag";
+
+jest.mock("../ActionExecutorContext", () => ({
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+jest.mock("../StorageActions", () => ({
+  onMaxTagsReached: jest.fn(),
+}));
+
+// not used here, but it pulls the native bridge logger in at import time
+jest.mock("../../storage/ScreenSingleValueProvider", () => ({}));
+
+jest.mock("../../logger", () => ({
+  createLogger: () => ({
+    log_error: jest.fn(),
+    log_debug: jest.fn(),
+    log_info: jest.fn(),
+  }),
+}));
+
+const mockSelected: string[] = [];
+
+jest.mock("../../storage/ScreenStateMultiSelectProvider", () => ({
+  ScreenMultiSelectProvider: {
+    getProvider: () => ({
+      getSelectedAsync: async () => [...mockSelected],
+      addItem: async (item: string) => {
+        mockSelected.push(item);
+      },
+      removeItem: async (item: string) => {
+        mockSelected.splice(mockSelected.indexOf(item), 1);
+      },
+    }),
+  },
+}));
+
+const toggleAction = (options = {}) =>
+  ({
+    type: "screenToggleFlag",
+    options: { key: "teams", selector: "extensions.tag", ...options },
+  }) as unknown as ActionType;
+
+const context = (tag: string) => ({
+  screenRoute: "/screen",
+  screenStateStore: {},
+  entry: { id: tag, extensions: { tag } },
+});
+
+describe("screenToggleFlagAction at the max_items limit", () => {
+  beforeEach(() => {
+    mockSelected.length = 0;
+  });
+
+  it("returns the cancellation so the chained actions do not run", async () => {
+    const afterToggle = jest.fn();
+    const executor = new ActionExecutor();
+
+    executor.registerAction("screenToggleFlag", screenToggleFlagAction);
+
+    executor.registerAction("sendCloudEvent", async () => {
+      afterToggle();
+
+      return ActionResult.Success;
+    });
+
+    mockSelected.push("A", "B");
+
+    const result = await executor.handleActions(
+      [toggleAction({ max_items: 2 }), { type: "sendCloudEvent" }],
+      context("C") as never
+    );
+
+    expect(result).toBe(ActionResult.Cancel);
+    expect(afterToggle).not.toHaveBeenCalled();
+    expect(mockSelected).toEqual(["A", "B"]);
+  });
+
+  it("lets the chain continue below the limit", async () => {
+    const result = await screenToggleFlagAction(
+      toggleAction({ max_items: 2 }),
+      context("A") as never
+    );
+
+    expect(result).toBe(ActionResult.Success);
+    expect(mockSelected).toEqual(["A"]);
+  });
+});

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

@@ -0,0 +1,25 @@
+import { dismissBottomSheetAction } from "../dismissBottomSheet";
+import { dismissModal } from "../../../modalState";
+import { ActionResult } from "../../ActionExecutor";
+
+jest.mock("../../../modalState", () => ({
+  dismissModal: jest.fn(),
+  modalOrchestrator: {
+    close: 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);
+  });
+});