@applicaster/zapp-react-native-utils 16.0.0-alpha.4004661200 → 16.0.0-alpha.4065452341

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";
@@ -25,6 +25,7 @@ import {
   localStorageRemoveAction,
   localStorageSetAction,
   localStorageToggleFlagAction,
+  createPresentScreenAction,
   openBottomSheetAction,
   refreshComponentAction,
   screenSetVariableAction,
@@ -157,6 +158,7 @@ export function withActionExecutor(Component) {
     const navigator = useNavigation();
     const rivers = useRivers();
     const contentTypes = useContentTypes();
+    const presentScreen = usePresentScreen();
 
     const handlers = useMemo(() => {
       return {
@@ -191,6 +193,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/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__/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

@@ -27,6 +27,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;
+  };
+}

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

@@ -9,6 +9,7 @@ export const ACTION_TYPES = {
   PRESENT_SUB_MENU: "presentSubMenu",
   SEND_CLOUD_EVENT: "sendCloudEvent",
   NAVIGATE_TO_SCREEN: "navigateToScreen",
+  PRESENT_SCREEN: "presentScreen",
   GO_BACK: "goBack",
   GO_HOME: "goHome",
   SHOW_TOAST: "showToast",

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -176,6 +176,27 @@ describe("getAllSpecificStyles", () => {
       });
     });
 
+    it("should normalize Studio focus alias onto focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focus_background_color: "#FF3B30",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles.focused).toEqual({
+        backgroundColor: "#FF3B30",
+      });
+
+      expect(outStyles.focus).toBeUndefined();
+    });
+
     it("should handle selected state", () => {
       const outStyles = {};