@applicaster/zapp-react-native-utils 16.0.0-alpha.3112220329 → 16.0.0-alpha.3202041045

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -1,4 +1,7 @@
-import { parseModalBlocksConfiguration } from "../modalBlocksParser";
+import {
+  getEmptyModalBlocksStructure,
+  parseModalBlocksConfiguration,
+} from "../modalBlocksParser";
 
 // Mock the platform selection logic so it's consistent
 jest.mock("../../reactUtils", () => ({
@@ -151,110 +154,239 @@ describe("parseModalBlocksConfiguration", () => {
     );
   });
 
-  it("should map button.create_new_playlist_asset onto leadingIcon.asset", () => {
+  it("should ignore keys that do not map to a known block sub-component", () => {
     const result = parseModalBlocksConfiguration(
       {
         "button.create_new_playlist_asset":
           "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
       },
       "playlist-experience"
     );
 
-    expect(result.button.leadingIcon.default).toEqual(
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.checkbox.default).toBeUndefined();
+    expect(result.item.actionButtons.default).toBeUndefined();
+  });
+});
+
+describe("getEmptyModalBlocksStructure", () => {
+  it("should return every block with empty containers and no state entries", () => {
+    const result = getEmptyModalBlocksStructure();
+
+    expect(result.header.container).toEqual({});
+    expect(result.item.background).toEqual({});
+    expect(result.button.background).toEqual({});
+    expect(result.action.background).toEqual({});
+
+    expect(result.button.leadingIcon.default).toBeUndefined();
+    expect(result.item.checkbox.default).toBeUndefined();
+    expect(result.item.actionButtons.default).toBeUndefined();
+  });
+
+  it("should return a fresh object on every call", () => {
+    const first = getEmptyModalBlocksStructure();
+    const second = getEmptyModalBlocksStructure();
+
+    expect(first).not.toBe(second);
+    expect(first.header).not.toBe(second.header);
+    expect(first).toEqual(second);
+  });
+
+  it("should be what the parser returns when config or componentName is missing", () => {
+    expect(
+      parseModalBlocksConfiguration(undefined as any, "queue_action")
+    ).toEqual(getEmptyModalBlocksStructure());
+
+    expect(parseModalBlocksConfiguration({ foo: "bar" }, "")).toEqual(
+      getEmptyModalBlocksStructure()
+    );
+  });
+
+  it("should parse section_header title and action_buttons independently of header", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "section_header.title.font_color": "#ABCDEF",
+        "section_header.title.font_size": 13,
+        "section_header.title.ios.font_family": "SFProText-Bold",
+        "section_header.action_buttons.default.background_color":
+          "rgba(62, 62, 62, 1)",
+        "section_header.action_buttons.focus.background_color":
+          "rgba(78, 78, 78, 1)",
+        "section_header.action_buttons.default.font_color": "#FFFFFF",
+        "section_header.action_buttons.font_size": 14,
+        "section_header.action_buttons.border_radius": 16,
+        // Theme modal header — must not leak into sectionHeader
+        queue_action_style_header_title_default_fontColor: "#111111",
+        queue_action_style_header_title_default_fontSize: 22,
+      },
+      "queue_action"
+    );
+
+    expect(result.sectionHeader.title.default).toEqual(
       expect.objectContaining({
-        asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        fontColor: "#ABCDEF",
+        fontSize: 13,
+        fontFamily: "SFProText-Bold",
+      })
+    );
+
+    expect(result.sectionHeader.actionButtons.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(62, 62, 62, 1)",
+        fontColor: "#FFFFFF",
+        fontSize: 14,
+        borderRadius: 16,
+      })
+    );
+
+    expect(result.sectionHeader.actionButtons.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "rgba(78, 78, 78, 1)",
+      })
+    );
+
+    expect(result.header.title.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#111111",
+        fontSize: 22,
       })
     );
   });
 
-  it("should map item.checkbox_asset and checked_checkbox_asset onto item.checkbox", () => {
+  it("maps text label and now playing font keys onto the label style", () => {
     const result = parseModalBlocksConfiguration(
       {
-        "item.checkbox_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
-        "item.checked_checkbox_asset":
-          "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+        "item.text_label1.ios.font_family": "SFProText-Bold",
+        "item.text_label1.letter_spacing": -0.4,
+        "item.text_label1.text_transform": "uppercase",
+        "now_playing_item.now_playing_label.ios.font_family":
+          "SFProText-Semibold",
+        "now_playing_item.now_playing_label.font_size": 18,
       },
-      "playlist-experience"
+      "queue-action"
     );
 
-    expect(result.item.checkbox.default).toEqual(
+    expect(result.item.textLabel1.default).toEqual(
       expect.objectContaining({
-        asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
-        checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+        fontFamily: "SFProText-Bold",
+        letterSpacing: -0.4,
+        textTransform: "uppercase",
+      })
+    );
+
+    expect(result.nowPlayingItem?.nowPlayingLabel.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "SFProText-Semibold",
+        fontSize: 18,
       })
     );
   });
 
-  it("should map reorder/remove Studio assets onto item.actionButtons", () => {
+  it("maps queue remove and reorder assets onto item action buttons", () => {
     const result = parseModalBlocksConfiguration(
       {
-        "reorder_playlist_item.remove_from_playlist_asset":
-          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        "reorder_playlist_item.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        "item.remove_asset": "https://example.com/remove.png",
+        "item.reorder_handle_asset": "https://example.com/reorder.png",
       },
-      "playlist-experience"
+      "queue-action"
     );
 
     expect(result.item.actionButtons.default).toEqual(
       expect.objectContaining({
-        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        removeAsset: "https://example.com/remove.png",
+        dragAsset: "https://example.com/reorder.png",
       })
     );
   });
 
-  it("should fall back to flavor1 reorder/remove assets", () => {
+  it("maps now playing play and pause assets onto action buttons", () => {
     const result = parseModalBlocksConfiguration(
       {
-        "playlist_experience_assets_flavor1.remove_from_playlist_asset":
-          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        "playlist_experience_assets_flavor1.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        "now_playing_item.play_asset": "https://example.com/play.png",
+        "now_playing_item.pause_asset": "https://example.com/pause.png",
       },
-      "playlist-experience"
+      "queue-action"
     );
 
-    expect(result.item.actionButtons.default).toEqual(
+    expect(result.nowPlayingItem?.actionButtons.default).toEqual(
       expect.objectContaining({
-        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        playAsset: "https://example.com/play.png",
+        pauseAsset: "https://example.com/pause.png",
       })
     );
   });
 
-  it("should fall back to flavor2 reorder/remove assets", () => {
+  it("should leave sectionHeader empty when keys are absent", () => {
+    const result = parseModalBlocksConfiguration(
+      { "item.text_label1.font_color": "#FFFFFF" },
+      "playlist-experience"
+    );
+
+    expect(result.sectionHeader.title).toEqual({ default: {} });
+    expect(result.sectionHeader.actionButtons).toEqual({ default: {} });
+  });
+
+  it("maps playlist button font family and the new green style keys", () => {
     const result = parseModalBlocksConfiguration(
       {
-        "playlist_experience_assets_flavor2.remove_from_playlist_asset":
-          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        "playlist_experience_assets_flavor2.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        "button.title.ios.font_family": "GreycliffCF-Bold",
+        "button.title.inactive_font_color": "#111111",
+        "button.title.focused_font_color": "#222222",
+        "button.title.text_transform": "uppercase",
+        "button.background.inactive_color": "#999999",
+        "button.background.horizontal_gutter": 6,
+        "button.icons.width": 24,
+        "button.icons.height": 24,
       },
       "playlist-experience"
     );
 
-    expect(result.item.actionButtons.default).toEqual(
+    expect(result.button.title.default).toEqual(
       expect.objectContaining({
-        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        fontFamily: "GreycliffCF-Bold",
+        inactiveFontColor: "#111111",
+        textTransform: "uppercase",
+      })
+    );
+
+    // "focused_" is a state prefix, so this key lands on the focused bucket.
+    expect(result.button.title.focused).toEqual(
+      expect.objectContaining({
+        fontColor: "#222222",
+      })
+    );
+
+    expect(result.button.background.default).toEqual(
+      expect.objectContaining({
+        inactiveColor: "#999999",
+        horizontalGutter: 6,
+      })
+    );
+
+    expect(result.button.icons.default).toEqual(
+      expect.objectContaining({
+        width: 24,
+        height: 24,
       })
     );
   });
 
-  it("should ignore playlist-only asset keys for other theme plugins", () => {
+  it("keeps a font-selector object on the button title", () => {
     const result = parseModalBlocksConfiguration(
       {
-        "button.create_new_playlist_asset":
-          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
-        "playlist_experience_assets_flavor1.reorder_handle_asset":
-          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        "button.title.ios.font_family": { fontFamily: "GreycliffCF-Bold" },
       },
-      "queue-action"
+      "playlist-experience"
     );
 
-    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
-    expect(result.item.actionButtons.default?.dragAsset).toBeUndefined();
+    expect(result.button.title.default).toEqual(
+      expect.objectContaining({
+        fontFamily: { fontFamily: "GreycliffCF-Bold" },
+      })
+    );
   });
 });

package/configurationUtils/modalBlocksParser.ts

@@ -7,6 +7,14 @@ export type ModalBlocksConfig = {
     closeButton: Record<string, any>;
     actionButtons: Record<string, any>;
   };
+  /**
+   * Queue Section Header (BB Variant 3) — shared by Next in Queue / Next Up.
+   * Separate from Theme modal `header` so top-title styles do not collide.
+   */
+  sectionHeader: {
+    title: Record<string, any>;
+    actionButtons: Record<string, any>;
+  };
   action: {
     background: Record<string, any>;
     title: Record<string, any>;
@@ -52,10 +60,7 @@ export type ModalBlocksConfig = {
   };
 };
 
-export const parseModalBlocksConfiguration = (
-  configuration: Record<string, any>,
-  componentName: string
-): ModalBlocksConfig => {
+export const getEmptyModalBlocksStructure = (): ModalBlocksConfig => {
   const result: ModalBlocksConfig = {
     header: {
       container: {},
@@ -63,6 +68,10 @@ export const parseModalBlocksConfiguration = (
       closeButton: {},
       actionButtons: {},
     },
+    sectionHeader: {
+      title: {},
+      actionButtons: {},
+    },
     action: {
       background: {},
       title: {},
@@ -106,6 +115,15 @@ export const parseModalBlocksConfiguration = (
     },
   };
 
+  return result;
+};
+
+export const parseModalBlocksConfiguration = (
+  configuration: Record<string, any>,
+  componentName: string
+): ModalBlocksConfig => {
+  const result = getEmptyModalBlocksStructure();
+
   if (!configuration || !componentName) {
     return result;
   }
@@ -148,6 +166,8 @@ export const parseModalBlocksConfiguration = (
     "action_buttons",
   ]);
 
+  parseBlock("section_header", ["title", "action_buttons"]);
+
   parseBlock("action", [
     "background",
     "title",
@@ -190,107 +210,43 @@ export const parseModalBlocksConfiguration = (
 
   parseBlock("button", ["background", "title", "icons", "leading_icon"]);
 
-  // Playlist-experience Studio keys live in this shared parser because modal
-  // blocks are themed by themePluginId. Gate them so other plugins are not
-  // affected by playlist-only asset names.
-  const isPlaylistExperience =
-    normalizedComponentName === "playlist_experience";
-
-  // Studio uploads Create New icon as button.create_new_playlist_asset (not
-  // button.leading_icon.asset). Map it onto leadingIcon so AudioPlayerButton
-  // can override the hardcoded action-type asset.
-  const createNewPlaylistAsset = isPlaylistExperience
-    ? configuration["button.create_new_playlist_asset"] ||
-      configuration[
-        `${normalizedComponentName}_button_create_new_playlist_asset`
-      ]
-    : undefined;
-
-  if (createNewPlaylistAsset) {
-    if (!result.button.leadingIcon.default) {
-      result.button.leadingIcon.default = {};
-    }
-
-    result.button.leadingIcon.default.asset = createNewPlaylistAsset;
-  }
-
-  // Studio checkbox assets are top-level item.* keys (not a parseBlock
-  // sub-component). Map onto item.checkbox so multiSelect can render them.
-  const checkboxAsset =
-    configuration["item.checkbox_asset"] ||
-    configuration[`${normalizedComponentName}_item_checkbox_asset`];
-
-  const checkedCheckboxAsset =
-    configuration["item.checked_checkbox_asset"] ||
-    configuration[`${normalizedComponentName}_item_checked_checkbox_asset`];
-
-  if (checkboxAsset || checkedCheckboxAsset) {
-    if (!result.item.checkbox.default) {
-      result.item.checkbox.default = {};
-    }
-
-    if (checkboxAsset) {
-      result.item.checkbox.default.asset = checkboxAsset;
-    }
-
-    if (checkedCheckboxAsset) {
-      result.item.checkbox.default.checkedAsset = checkedCheckboxAsset;
-    }
-  }
-
-  // Edit Order row icons: prefer reorder_playlist_item.*, then flavor1, then
-  // flavor2 playlist_experience_assets_* (playlist-experience theme only).
-  const removeAsset = isPlaylistExperience
-    ? configuration["reorder_playlist_item.remove_from_playlist_asset"] ||
-      configuration[
-        `${normalizedComponentName}_reorder_playlist_item_remove_from_playlist_asset`
-      ] ||
-      configuration[
-        "playlist_experience_assets_flavor1.remove_from_playlist_asset"
-      ] ||
-      configuration[
-        `${normalizedComponentName}_assets_flavor1_remove_from_playlist_asset`
-      ] ||
-      configuration[
-        "playlist_experience_assets_flavor2.remove_from_playlist_asset"
-      ] ||
-      configuration[
-        `${normalizedComponentName}_assets_flavor2_remove_from_playlist_asset`
-      ]
-    : undefined;
+  // Leaf uploader keys. They are not `<block>_<sub>_<prop>` styles, so
+  // getAllSpecificStyles never sees them.
+  const assignLeafAsset = (
+    block: ModalBlocksConfig["item"] | undefined,
+    key: string,
+    prop: "playAsset" | "pauseAsset" | "removeAsset" | "dragAsset"
+  ) => {
+    if (!block) return;
+
+    const value = configuration[key];
+
+    if (typeof value !== "string" || !value.trim()) return;
+
+    block.actionButtons = {
+      ...block.actionButtons,
+      default: {
+        ...(block.actionButtons?.default || {}),
+        [prop]: value,
+      },
+    };
+  };
 
-  const dragAsset = isPlaylistExperience
-    ? configuration["reorder_playlist_item.reorder_handle_asset"] ||
-      configuration[
-        `${normalizedComponentName}_reorder_playlist_item_reorder_handle_asset`
-      ] ||
-      configuration[
-        "playlist_experience_assets_flavor1.reorder_handle_asset"
-      ] ||
-      configuration[
-        `${normalizedComponentName}_assets_flavor1_reorder_handle_asset`
-      ] ||
-      configuration[
-        "playlist_experience_assets_flavor2.reorder_handle_asset"
-      ] ||
-      configuration[
-        `${normalizedComponentName}_assets_flavor2_reorder_handle_asset`
-      ]
-    : undefined;
+  assignLeafAsset(
+    result.nowPlayingItem,
+    "now_playing_item.play_asset",
+    "playAsset"
+  );
 
-  if (removeAsset || dragAsset) {
-    if (!result.item.actionButtons.default) {
-      result.item.actionButtons.default = {};
-    }
+  assignLeafAsset(
+    result.nowPlayingItem,
+    "now_playing_item.pause_asset",
+    "pauseAsset"
+  );
 
-    if (removeAsset) {
-      result.item.actionButtons.default.removeAsset = removeAsset;
-    }
+  assignLeafAsset(result.item, "item.remove_asset", "removeAsset");
 
-    if (dragAsset) {
-      result.item.actionButtons.default.dragAsset = dragAsset;
-    }
-  }
+  assignLeafAsset(result.item, "item.reorder_handle_asset", "dragAsset");
 
   return result;
 };

package/entryActions/__tests__/buildEntryActions.test.ts

@@ -60,7 +60,7 @@ describe("buildEntryActions - alias & label resolution", () => {
     expect(state.label).toBe("Label Property Action");
   });
 
-  it("resolves entry action with known backend button alias (e.g. add_all_to_queue)", () => {
+  it("humanizes an un-overridden alias and falls back to the placeholder asset", () => {
     const entry = {
       id: "entry-3",
       extensions: {
@@ -71,11 +71,7 @@ describe("buildEntryActions - alias & label resolution", () => {
             dismiss_on_action: true,
           },
           {
-            button: { alias: "add_to_playlist" },
-            actions: [{ type: "test" }],
-          },
-          {
-            button: { alias: "delete_collection" },
+            button: { alias: "custom_unknown_action" },
             actions: [{ type: "test" }],
           },
         ],
@@ -84,42 +80,86 @@ describe("buildEntryActions - alias & label resolution", () => {
 
     const actions = resolveEntryActions(entry as any);
 
-    expect(actions).toHaveLength(3);
+    expect(actions).toHaveLength(2);
 
+    // No built-in alias vocabulary any more: underscores become spaces and
+    // only the first letter is capitalized, so "queue" stays lowercase.
     expect(actions[0].action.initialEntryState(entry as any)).toMatchObject({
       state: 0,
-      label: "Add all to Queue",
+      label: "Add all to queue",
     });
 
     expect(actions[1].action.initialEntryState(entry as any)).toMatchObject({
       state: 0,
-      label: "Add to Playlist",
+      label: "Custom unknown action",
     });
 
-    expect(actions[2].action.initialEntryState(entry as any)).toMatchObject({
-      state: 0,
-      label: "Delete collection",
-    });
+    // The asset has no such fallback: without an override it is the red-box
+    // placeholder, so a missing Studio icon is visible rather than absent.
+    for (const action of actions) {
+      expect(action.action.initialEntryState(entry as any)).toMatchObject({
+        asset: expect.stringMatching(/^data:image\/png;base64,/),
+      });
+    }
   });
 
-  it("formats unknown alias nicely as fallback", () => {
+  it("prefers aliasPresentation overrides over the humanized fallbacks", () => {
+    const deps = {
+      actionExecutor: { handleActions: jest.fn() } as any,
+      actionContext: {},
+      aliasPresentation: {
+        labels: { add_all_to_queue: "Add all to Queue" },
+        assets: { add_all_to_queue: "http://example.com/queue.png" },
+      },
+    };
+
     const entry = {
       id: "entry-4",
       extensions: {
         entry_action: [
           {
-            button: { alias: "custom_unknown_action" },
+            button: { alias: "add_all_to_queue" },
+            actions: [{ type: "test" }],
+          },
+          {
+            button: { alias: "not_overridden" },
             actions: [{ type: "test" }],
           },
         ],
       },
     };
 
-    const actions = resolveEntryActions(entry as any);
+    const actions = buildEntryActions(entry as any, deps);
 
-    expect(actions).toHaveLength(1);
+    expect(actions[0].action.initialEntryState(entry as any)).toMatchObject({
+      label: "Add all to Queue",
+      asset: "http://example.com/queue.png",
+    });
+
+    // Overrides are per-alias, so an alias absent from the map still humanizes.
+    expect(actions[1].action.initialEntryState(entry as any)).toMatchObject({
+      label: "Not overridden",
+    });
+  });
+
+  it("returns no asset when the button has neither iconURL nor alias", () => {
+    const entry = {
+      id: "entry-5",
+      extensions: {
+        entry_action: [
+          {
+            button: { label: "Plain Label" },
+            actions: [{ type: "test" }],
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
     const state = actions[0].action.initialEntryState(entry as any);
-    expect(state.label).toBe("Custom unknown action");
+
+    expect(state.label).toBe("Plain Label");
+    expect(state.asset).toBeUndefined();
   });
 
   it("uses actionExecutor.getActionState for plugin-provided label and asset", () => {
@@ -154,3 +194,42 @@ describe("buildEntryActions - alias & label resolution", () => {
     });
   });
 });
+
+describe("buildEntryActions - invokeAction execution context", () => {
+  it("forwards the List component from invoke options into handleActions", async () => {
+    const handleActions = jest.fn();
+
+    const component = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const deps = {
+      actionExecutor: { handleActions } as any,
+      actionContext: { screenData: { id: "playlist-screen" } },
+    };
+
+    const entry = {
+      id: "entry-1",
+      extensions: {
+        entry_action: [
+          {
+            button: { title: "Edit Name" },
+            actions: [{ type: "refreshComponent" }],
+          },
+        ],
+      },
+    };
+
+    const [action] = buildEntryActions(entry as any, deps);
+
+    await action.action.invokeAction(entry as any, { component });
+
+    expect(handleActions).toHaveBeenCalledWith([{ type: "refreshComponent" }], {
+      entry,
+      entryContext: entry,
+      screenData: { id: "playlist-screen" },
+      component,
+    });
+  });
+});