@applicaster/zapp-react-native-utils 15.1.15-alpha.4236143002 → 15.1.15

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

@@ -18,6 +18,7 @@ import { createLogger } from "../logger";
 import {
   appRestartAction,
   confirmDialogAction,
+  showAlertAction,
   createGoBackAction,
   createGoHomeAction,
   createNavigateToScreenAction,
@@ -109,6 +110,8 @@ const prepareDefaultActions = (actionExecutor) => {
     confirmDialogAction
   );
 
+  actionExecutor.registerAction(ACTION_TYPES.SHOW_ALERT, showAlertAction);
+
   actionExecutor.registerAction(
     ACTION_TYPES.SEND_CLOUD_EVENT,
     sendCloudEventAction

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__/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/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";

package/actionsExecutor/actions/showAlert.ts

@@ -0,0 +1,51 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { showAlertDialog } from "../../alertUtils";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the showAlert action.
+ */
+export interface ShowAlertOptions {
+  /** Dialog title (required) */
+  title: string;
+
+  /** Dialog message */
+  message?: string;
+
+  /** Dismiss button text. Defaults to "OK" */
+  okButtonText?: string;
+}
+
+/**
+ * Tells the user something and waits for them to acknowledge it.
+ *
+ * One button, because there is nothing to decide. Use `confirmDialog` when the
+ * user is choosing between going on and backing out; a `confirmDialog` without
+ * a cancel label still renders two buttons, the second one blank.
+ *
+ * Always resolves to Success: dismissing a notice is not a cancellation, so the
+ * rest of the chain runs.
+ */
+export const showAlertAction: ActionHandler<ShowAlertOptions> = async (
+  action
+): Promise<ActionResult> => {
+  log_info("handleAction: showAlert event");
+
+  const options = action.options as ShowAlertOptions;
+
+  return new Promise<ActionResult>((resolve) => {
+    showAlertDialog({
+      title: options?.title,
+      message: options?.message,
+      okButtonText: options?.okButtonText || "OK",
+      completion: () => resolve(ActionResult.Success),
+    });
+  });
+};

package/actionsExecutor/actions/showToast.ts

@@ -5,7 +5,7 @@ import { postEvent } from "../../reactHooks/useSubscriberFor";
 
 export const CONFIRMATION_TOAST_SOURCE = "confirmation";
 
-export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
+export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 5000;
 
 /**
  * Shows a mobile confirmation toast with Theme defaults from
@@ -13,7 +13,7 @@ export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
  *
  * This action is confirmation-only by design: it always stamps
  * `source: "confirmation"` (so Theme confirmation styles apply) and defaults
- * `timeout` to 1000 ms. Non-confirmation toasts (e.g. Offline Experience)
+ * `timeout` to 5000 ms. Non-confirmation toasts (e.g. Offline Experience)
  * must post on the shared `"showToast"` event bus directly and omit `source`.
  * Callers may override individual style fields; Theme supplies the rest.
  *

package/actionsExecutor/consts.ts

@@ -20,6 +20,7 @@ export const ACTION_TYPES = {
   SWITCH_LAYOUT: "switchLayout",
   APP_RESTART: "appRestart",
   CONFIRM_DIALOG: "confirmDialog",
+  SHOW_ALERT: "showAlert",
   SCREEN_SET_VARIABLE: "screenSetVariable",
   SCREEN_TOGGLE_FLAG: "screenToggleFlag",
 } as const;

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -12,6 +12,12 @@ const generalContent = () => ({
         label: "Navigation Bar",
         placeholder: "Choose Nav Bar",
       },
+      {
+        key: "hide_menu",
+        type: "switch",
+        label: "Hide Menu",
+        initial_value: false,
+      },
     ],
   },
   styles: {

package/modalState/__tests__/useModalStoreState.test.ts

@@ -0,0 +1,142 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { modalStore, useModalStoreState } from "../";
+
+const item = { id: "river-general", name: "Test Modal" };
+const props = { entry: { id: "modal-entry-1" } };
+
+const openModal = () =>
+  act(() => {
+    modalStore.getState().openModal({ item, props } as any);
+  });
+
+// Counts every render of the hook so the tests can assert on subscription
+// behaviour, not just on the returned value.
+const renderModalStoreState = (skipSubscription?: boolean) => {
+  const renders = { count: 0 };
+
+  const view = renderHook(() => {
+    renders.count += 1;
+
+    return skipSubscription === undefined
+      ? useModalStoreState()
+      : useModalStoreState(skipSubscription);
+  });
+
+  return { ...view, renders };
+};
+
+describe("useModalStoreState", () => {
+  afterEach(() => {
+    act(() => {
+      modalStore.getState().dismissModal();
+    });
+  });
+
+  describe("when subscribed (default)", () => {
+    it("returns the live modal state when called without arguments", () => {
+      const { result } = renderModalStoreState();
+
+      expect(result.current.visible).toBe(false);
+
+      openModal();
+
+      expect(result.current.visible).toBe(true);
+      expect(result.current.screen).toBe(item);
+      expect(result.current.props).toBe(props);
+    });
+
+    it("re-renders the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(false);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBeGreaterThan(rendersBeforeOpen);
+    });
+
+    // Counterpart to "returns a stable reference across store updates": an open
+    // modal is the one point where a live subscription and a skipped one hold
+    // different references, which is what makes that assertion meaningful.
+    it("returns a new reference while the modal is open", () => {
+      const { result } = renderModalStoreState(false);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      expect(result.current).not.toBe(firstValue);
+    });
+  });
+
+  describe("when subscription is skipped", () => {
+    it("reports an empty modal state even while a modal is open", () => {
+      openModal();
+
+      expect(modalStore.getState().modalState.visible).toBe(true);
+
+      const { result } = renderModalStoreState(true);
+
+      expect(result.current).toMatchObject({
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      });
+    });
+
+    it("does not re-render the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(true);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBe(rendersBeforeOpen);
+    });
+
+    // The skipped branch has to hand back a module-level constant. Returning a
+    // fresh object would fail zustand's Object.is check and re-render on every
+    // store notification - the opposite of what skipping is for.
+    it("returns a stable reference across store updates", () => {
+      const { result } = renderModalStoreState(true);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      // Asserted while the modal is open: dismissing resets the store to the
+      // very same initialModalState object, so an end-to-end round trip would
+      // hold this identity even for a live subscription.
+      expect(result.current).toBe(firstValue);
+
+      act(() => {
+        modalStore.getState().dismissModal();
+      });
+
+      expect(result.current).toBe(firstValue);
+    });
+  });
+
+  it("picks up the current modal state when it starts subscribing", () => {
+    let skipSubscription = true;
+
+    const { result, rerender } = renderHook(() =>
+      useModalStoreState(skipSubscription)
+    );
+
+    openModal();
+
+    expect(result.current.visible).toBe(false);
+
+    skipSubscription = false;
+
+    act(() => {
+      rerender(undefined);
+    });
+
+    expect(result.current.visible).toBe(true);
+    expect(result.current.screen).toBe(item);
+  });
+});

package/modalState/store.ts

@@ -98,5 +98,12 @@ export const openBottomSheetModal = ({
   });
 };
 
-export const useModalStoreState = (): ModalState =>
-  useModalStore<ModalState>((state) => state.modalState);
+/**
+ * Pass `skipSubscription` from callers that render outside of a modal: the
+ * selector then returns the stable `initialModalState` reference, so the
+ * component is never re-rendered by modal state it does not read.
+ */
+export const useModalStoreState = (skipSubscription = false): ModalState =>
+  useModalStore<ModalState>((state) =>
+    skipSubscription ? initialModalState : state.modalState
+  );

package/modalState/useBottomSheetContent.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { MenuItem, modalOrchestrator } from "./ModalOrchestrator";
@@ -45,7 +45,9 @@ export const useBottomSheetContent = (props: Props): Return => {
   // Subscribe to the viewModel state changes
   useEffect(() => {
     return viewModel?.subscribe((nextState) => {
-      setState(nextState);
+      setState((state) => {
+        return state === nextState ? state : nextState;
+      });
     });
   }, [viewModel]);
 
@@ -65,16 +67,19 @@ export const useBottomSheetContent = (props: Props): Return => {
    * - If the item was a leaf action (not a submenu), triggers viewModel.refetch()
    *   so that checkmarks (isSelected) reflect the updated server state.
    */
-  const handleItemPress = async (item: MenuItem) => {
-    const actions = getMenuItemActions(item);
-    const isSubMenu = actions.some(isPresentSubMenuAction);
+  const handleItemPress = useCallback(
+    async (item: MenuItem) => {
+      const actions = getMenuItemActions(item);
+      const isSubMenu = actions.some(isPresentSubMenuAction);
 
-    await onPress(item);
+      await onPress(item);
 
-    if (!isSubMenu) {
-      await viewModel?.refetch();
-    }
-  };
+      if (!isSubMenu) {
+        await viewModel?.refetch();
+      }
+    },
+    [onPress, viewModel]
+  );
 
   const goBackOrClose = React.useCallback(() => {
     if (modalOrchestrator.canGoBack) {
@@ -82,7 +87,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     } else {
       modalOrchestrator.close();
     }
-  }, [modalOrchestrator.canGoBack]);
+  }, []);
 
   return {
     items: viewModel?.editableCollection ? editableItems : state?.items,
@@ -94,7 +99,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     canGoBack: modalOrchestrator.canGoBack,
     handleItemPress,
     goBackOrClose,
-    close: () => modalOrchestrator.close(),
+    close: useCallback(() => modalOrchestrator.close(), []),
     role: state?.role,
     behavior: state?.behavior,
     dynamicCollection: state?.dynamicCollection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.1.15-alpha.4236143002",
+  "version": "15.1.15",
   "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.15-alpha.4236143002",
+    "@applicaster/applicaster-types": "15.1.15",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
-import { renderHook } from "@testing-library/react-hooks";
+import { act, render, renderHook } from "@testing-library/react-native";
 import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
 
 const plugins = [];
 
@@ -45,6 +46,9 @@ const videoItem = {
   type: { value: "video" },
 };
 
+const modalEntry = { id: "modal-entry-1" };
+const modalPathname = `${ROUTE_TYPES.MODAL}/${rivers["river-general"].id}`;
+
 const mockGetStackForPathname = jest.fn().mockReturnValue(homeStack);
 
 const mainStackNavigator = {
@@ -168,6 +172,45 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
+// Reports every render of useRoute so the tests below can assert on route
+// transitions and on subscription behaviour, not just on a one-shot result.
+function RouteProbe({ onRender }: { onRender: (route: any) => void }) {
+  onRender(useRoute());
+
+  return null;
+}
+
+const openRiverModal = () =>
+  act(() => {
+    modalStore.getState().openModal({
+      item: rivers["river-general"] as any,
+      props: { entry: modalEntry },
+    });
+  });
+
+const renderRouteProbe = (pathname: string, onRender: (route: any) => void) => {
+  const tree = (currentPathname: string) => (
+    <Provider store={store}>
+      <ScreenDataContext.Provider value={homeStack.state}>
+        <NavigationContext.Provider value={videoModalNavigator}>
+          <PathnameContext.Provider value={currentPathname}>
+            <RouteProbe onRender={onRender} />
+          </PathnameContext.Provider>
+        </NavigationContext.Provider>
+      </ScreenDataContext.Provider>
+    </Provider>
+  );
+
+  const { rerender } = render(tree(pathname));
+
+  return {
+    navigateTo: (nextPathname: string) =>
+      act(() => {
+        rerender(tree(nextPathname));
+      }),
+  };
+};
+
 describe("navigation", () => {
   describe("useRoute", () => {
     describe("Main stack components", () => {
@@ -233,6 +276,86 @@ describe("navigation", () => {
         );
       });
     });
+
+    describe("store subscriptions", () => {
+      afterEach(() => {
+        act(() => {
+          modalStore.getState().dismissModal();
+        });
+      });
+
+      // Every hook in useRoute must run on every render. When the modal and
+      // hook-modal subscriptions lived inside the route branches, walking a
+      // single mounted component through the route types changed the hook
+      // count and React threw "Rendered more hooks than during the previous
+      // render".
+      it("keeps a stable hook order when the route type changes", () => {
+        let route: any;
+
+        const { navigateTo } = renderRouteProbe(homeStack.route, (current) => {
+          route = current;
+        });
+
+        expect(route.screenData.id).toEqual(entry.id);
+        expect(route.screenData.targetScreen.id).toEqual(screen.id);
+
+        openRiverModal();
+        navigateTo(modalPathname);
+
+        expect(route.pathname).toEqual(modalPathname);
+        expect(route.screenData.id).toEqual(rivers["river-general"].id);
+
+        navigateTo(hooksModalPathname);
+
+        expect(route.pathname).toEqual(hooksModalPathname);
+
+        expect(route.screenData.id).toEqual(
+          hookModalContextState.state.screenData.payload.id
+        );
+
+        navigateTo(videoModalPathname);
+
+        expect(route.pathname).toEqual(videoModalPathname);
+        expect(route.screenData.id).toEqual(videoItem.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-player"].id
+        );
+
+        navigateTo(homeStack.route);
+
+        expect(route.pathname).toEqual(homeStack.route);
+        expect(route.screenData.id).toEqual(entry.id);
+      });
+
+      it("does not re-render a non-modal route when modal state changes", () => {
+        let renders = 0;
+
+        renderRouteProbe(homeStack.route, () => {
+          renders += 1;
+        });
+
+        const rendersBeforeOpen = renders;
+
+        openRiverModal();
+
+        expect(renders).toBe(rendersBeforeOpen);
+      });
+
+      it("re-renders a modal route when modal state changes", () => {
+        let route: any;
+
+        renderRouteProbe(modalPathname, (current) => {
+          route = current;
+        });
+
+        expect(route.screenData).toEqual({});
+
+        openRiverModal();
+
+        expect(route.screenData.id).toEqual(rivers["river-general"].id);
+      });
+    });
   });
 
   describe("isNavBarVisible", () => {

package/reactHooks/navigation/useRoute.ts

@@ -48,14 +48,18 @@ export const useRoute = (
     "contentTypes",
   ]);
 
-  const modalState = useModalStoreState();
-
-  const modalScreenData = modalState.screen;
-
+  // useRoute runs in every cell, so both modal stores are subscribed to only on
+  // the routes that actually read them. Off those routes the selectors return a
+  // stable reference, which keeps an unrelated modal opening or closing from
+  // re-rendering the whole tree.
   const hookModalScreenData = useHookModalScreenData(
     !isHookModalPathname(pathname)
   );
 
+  const modalState = useModalStoreState(!isModalPathname(pathname));
+
+  const modalScreenData = modalState.screen;
+
   const videoModalScreenData =
     navigator?.videoModalState?.item &&
     legacyScreenData(