@applicaster/zapp-react-native-utils 16.0.0-alpha.1593888345 → 16.0.0-alpha.1733304298

package/cellUtils/index.ts

@@ -12,6 +12,7 @@ import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
+import { isTrue } from "../booleanUtils";
 
 const CUSTOM_KEY = "other";
 
@@ -572,3 +573,42 @@ export const hasTextLabelsEnabled = (
     return Boolean(value);
   });
 };
+
+/**
+ * Reads the mobile buttons container "buttons enabled" switch from cell styles.
+ */
+export const getButtonsEnabled = (styles?: Record<string, any>): boolean => {
+  return isTrue(styles?.mobile_buttons_container_buttons_enabled);
+};
+
+/**
+ * Reads the mobile buttons container "cell navigation enabled" switch from cell styles.
+ */
+export const getCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean => {
+  return isTrue(styles?.mobile_buttons_container_cell_navigation_enabled);
+};
+
+/**
+ * Whether tapping a cell outside its action buttons triggers the cell's navigation.
+ * Always true when the buttons are disabled.
+ * @param buttonsEnabled the cell's "buttons enabled" switch value
+ * @param cellNavigationEnabled the cell's "cell navigation enabled" switch value
+ */
+export const isCellNavigationEnabled = (
+  buttonsEnabled: unknown,
+  cellNavigationEnabled: unknown
+): boolean => !isTrue(buttonsEnabled) || isTrue(cellNavigationEnabled);
+
+/**
+ * Whether tapping a mobile cell outside its action buttons triggers the cell's navigation,
+ * read from the cell styles.
+ */
+export const getIsCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean =>
+  isCellNavigationEnabled(
+    getButtonsEnabled(styles),
+    getCellNavigationEnabled(styles)
+  );

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,250 @@ 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();
+  });
+
+  it("parses the generic button leading icon asset", () => {
+    const result = parseModalBlocksConfiguration(
+      { "button.leading_icon.asset": "https://example.com/add.png" },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBe(
+      "https://example.com/add.png"
+    );
+  });
+});
+
+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({
+        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({
-        asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        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.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontFamily: "SFProText-Bold",
+        letterSpacing: -0.4,
+        textTransform: "uppercase",
+      })
     );
 
-    expect(result.item.checkbox.default).toEqual(
+    expect(result.nowPlayingItem?.nowPlayingLabel.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-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({
+        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({
-        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
-        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        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;
 };