@applicaster/zapp-react-native-utils 16.0.0-rc.12 → 16.0.0-rc.121

package/manifestUtils/fieldUtils/index.js

@@ -1,3 +1,121 @@
+const { ZAPPIFEST_FIELDS } = require("../keys");
+const { toCamelCase } = require("../_internals");
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+/**
+ * Parses a CSS margin/padding shorthand string into [top, right, bottom, left].
+ *
+ * 1 value  → all four sides
+ * 2 values → top/bottom, right/left
+ * 3 values → top, right/left, bottom
+ * 4 values → top, right, bottom, left
+ *
+ * @param {string} str
+ * @returns {[number, number, number, number]}
+ */
+function parseShorthand(str) {
+  const parts = String(str).trim().split(/\s+/).map(Number);
+
+  switch (parts.length) {
+    case 1:
+      return [parts[0], parts[0], parts[0], parts[0]];
+    case 2:
+      return [parts[0], parts[1], parts[0], parts[1]];
+    case 3:
+      return [parts[0], parts[1], parts[2], parts[1]];
+    case 4:
+      return parts;
+    default:
+      throw new Error(
+        `Shorthand expects 1–4 space-separated values, got ${parts.length}: "${str}"`
+      );
+  }
+}
+
+function spacingFields(prefix, initialValues) {
+  const platforms = Object.keys(initialValues);
+
+  const parsed = Object.fromEntries(
+    platforms.map((p) => [p, parseShorthand(initialValues[p])])
+  );
+
+  return SIDES.map((side, i) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+    initialValue: Object.fromEntries(platforms.map((p) => [p, parsed[p][i]])),
+  }));
+}
+
+/**
+ * Generates four margin field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "margin"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 0 20", tv: "0 0 90" }
+ * @returns {object[]}
+ */
+function margin(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Generates four padding field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "padding"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 20", tv: "0 124" }
+ * @returns {object[]}
+ */
+function padding(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Returns a flat camelCase defaults object for a spacing shorthand.
+ * e.g. marginDefaults("margin", "0 0 20") → { marginTop: 0, marginRight: 0, marginBottom: 20, marginLeft: 0 }
+ *
+ * @param {string} suffix - e.g. "margin" or "padding"
+ * @param {string} shorthand - CSS-like shorthand string
+ * @returns {Record<string, number>}
+ */
+function spacingDefaults(suffix, shorthand) {
+  const values = parseShorthand(shorthand);
+
+  return Object.fromEntries(
+    SIDES.map((side, i) => [toCamelCase(`${suffix} ${side}`), values[i]])
+  );
+}
+
+function marginDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+function paddingDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+/**
+ * Returns four field descriptors (top/right/bottom/left) with only suffix and type — no initialValue.
+ * Used when defaults are stored separately in the subgroup spec.
+ *
+ * @param {string} prefix - e.g. "margin" or "padding"
+ * @returns {object[]}
+ */
+function marginFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
+function paddingFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
 /**
  * Appends new conditional_fields from conditions array
  * to config.conditional_fields
@@ -48,6 +166,13 @@ function createConditionalField(key, condition_value, category = "styles") {
 }
 
 module.exports = {
+  parseShorthand,
+  margin,
+  padding,
+  marginDefaults,
+  paddingDefaults,
+  marginFields,
+  paddingFields,
   withConditional,
   getConditionalKey,
   createConditionalField,

package/manifestUtils/index.js

@@ -24,6 +24,7 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
+const { getModalBlockStyles, getModalLocalizations } = require("./modalBlocks");
 
 const {
   secondaryImage,
@@ -54,4 +55,6 @@ module.exports = {
   getUpdatedSecondaryImageKeys,
   DEFAULT_GRADIENT_IMAGE,
   compact,
+  getModalBlockStyles,
+  getModalLocalizations,
 };

package/manifestUtils/keys.js

@@ -43,6 +43,7 @@ const TV_PLATFORMS = [
   "tvos_for_quickbrick",
   "samsung_tv",
   "lg_tv",
+  "vidaa",
   "vizio",
 ];
 
@@ -411,6 +412,12 @@ const mobileActionButtonContainerFields = (positionOptions) => [
     type: ZAPPIFEST_FIELDS.switch,
     suffix: "buttons enabled",
   },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "cell navigation enabled",
+    label_tooltip:
+      "Controls whether tapping on the cell (outside the buttons) triggers its navigation behavior. When disabled, only the configured buttons are interactive. Useful for Home screens (tap anywhere to open) vs. Details screens (only buttons should work).",
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "position",
@@ -471,7 +478,6 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     suffix: "assign action",
     options: [
       { text: "primary navigation", value: "navigation_action" },
-      { text: "secondary navigation", value: "secondary_navigation" },
       { text: "favorite", value: "local_storage_favourites_action" },
       { text: "more", value: "open-modal-bottom-sheet-cell-action" },
       { text: "add to calendar", value: "add_to_calendar_action" },
@@ -630,6 +636,14 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "margin left",
   },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "horizontal gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "vertical gutter",
+  },
 ];
 
 const TV_MENU_LABEL_FIELDS = [

package/manifestUtils/mobileAction/button/index.js

@@ -129,6 +129,22 @@ function mobileActionButton({ label, description, defaults, isFirstButton }) {
       conditions.push(createConditionalField(labelEnabledKey, true));
     }
 
+    const assetAlignmentKey = keyPrefixGenerator("asset_alignment");
+
+    // horizontal_gutter fields depends on [asset_alignment: left or asset_alignment: right]
+    if (isKeyHasSuffix("horizontal_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["left", "right"])
+      );
+    }
+
+    // vertical_gutter fields depends on [asset_alignment: above or asset_alignment: below]
+    if (isKeyHasSuffix("vertical_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["above", "below"])
+      );
+    }
+
     return withConditional(conditions)(field);
   });
 

package/manifestUtils/mobileAction/container/__tests__/mobileActionButtonsContainer.test.js

@@ -7,6 +7,7 @@ describe("mobileActionButtonsContainer", () => {
       description: "container",
       defaults: {
         buttonsEnabled: false,
+        cellNavigationEnabled: false,
         position: ["over_image", "text_label_1", "text_label_2"],
         align: "left",
         overImagePosition: "bottom_left",
@@ -31,6 +32,26 @@ describe("mobileActionButtonsContainer", () => {
     expect(enabledField).toBeTruthy();
     expect(enabledField.type).toBe("switch");
 
+    const cellNavigationField = result.fields.find(
+      (field) =>
+        field.key === "mobile_buttons_container_cell_navigation_enabled"
+    );
+
+    expect(cellNavigationField).toMatchObject({
+      type: "switch",
+      label: "Cell navigation enabled",
+      initial_value: false,
+      label_tooltip: expect.stringContaining(
+        "Controls whether tapping on the cell"
+      ),
+      conditional_fields: [
+        {
+          key: "styles/mobile_buttons_container_buttons_enabled",
+          condition_value: true,
+        },
+      ],
+    });
+
     const positionField = result.fields.find(
       (field) => field.key === "mobile_buttons_container_position"
     );

package/manifestUtils/mobileAction/container/index.js

@@ -49,7 +49,9 @@ function mobileActionButtonsContainer({ label, description, defaults }) {
 
     // over_image_position depends on [positionKey: over_image]
     if (isKeyHasSuffix("over_image_position", key)) {
-      conditions.push(createConditionalField(positionKey, "over_image"));
+      conditions.push(
+        createConditionalField(positionKey, defaults.position[0])
+      );
     }
 
     // horizontal_gutter depends on [stackingKey: horizontal]

package/manifestUtils/mobileAction/groups/__tests__/buildMobileActionButtonGroups.test.js

@@ -67,7 +67,7 @@ describe("buildMobileActionButtonGroups", () => {
     );
 
     expect(button2EnabledField.initial_value).toBe(false);
-    expect(button2AssignActionField.initial_value).toBe("secondary_navigation");
+    expect(button2AssignActionField.initial_value).toBe("trailer_action");
 
     const button3Fields = groups[3].fields;
 

package/manifestUtils/mobileAction/groups/defaults.js

@@ -1,5 +1,6 @@
 const DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS = {
   buttonsEnabled: false,
+  cellNavigationEnabled: false,
 
   align: "left",
   overImagePosition: "bottom_left",
@@ -33,7 +34,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   assetHeight: 24,
   assetWidth: 24,
   assetMarginTop: 0,
-  assetMarginRight: 6,
+  assetMarginRight: 0,
   assetMarginBottom: 0,
   assetMarginLeft: 0,
   labelEnabled: true,
@@ -50,6 +51,8 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   marginRight: 0,
   marginBottom: 0,
   marginLeft: 0,
+  horizontalGutter: 8,
+  verticalGutter: 8,
 };
 
 const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {
@@ -61,7 +64,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {
   },
   2: {
     buttonEnabled: false,
-    assignAction: "secondary_navigation",
+    assignAction: "trailer_action",
   },
   3: {
     buttonEnabled: false,

package/manifestUtils/modalBlocks.js

@@ -0,0 +1,304 @@
+function getModalBlockStyles({ prefix }) {
+  return [
+    {
+      group: true,
+      label: "Header Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_backgroundColor`,
+          label: "Header Background Color",
+          initial_value: "rgba(30,30,30,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_borderBottomColor`,
+          label: "Header Border Bottom Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_container_default_borderBottomSize`,
+          label: "Header Border Bottom Size",
+          initial_value: 0,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_title_default_fontColor`,
+          label: "Header Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_fontSize`,
+          label: "Header Title Font Size",
+          initial_value: 18,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_lineHeight`,
+          label: "Header Title Line Height",
+          initial_value: 32,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_default_backgroundColor`,
+          label: "Close Button Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_hover_backgroundColor`,
+          label: "Close Button Hover Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_header_close_button_asset`,
+          label: "Close Button Icon Asset",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_backgroundColor`,
+          label: "Header Action Button Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_hover_backgroundColor`,
+          label: "Header Action Button Hover Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_fontColor`,
+          label: "Header Action Button Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_fontSize`,
+          label: "Header Action Button Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_borderRadius`,
+          label: "Header Action Button Radius",
+          initial_value: 16,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Item Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_default_backgroundColor`,
+          label: "Item Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_focus_backgroundColor`,
+          label: "Item Focus/Touch Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_borderRadius`,
+          label: "Item Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingTop`,
+          label: "Item Padding Top",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingBottom`,
+          label: "Item Padding Bottom",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingLeft`,
+          label: "Item Padding Left",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingRight`,
+          label: "Item Padding Right",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_width`,
+          label: "Item Image Width",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_height`,
+          label: "Item Image Height",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_borderRadius`,
+          label: "Item Image Radius",
+          initial_value: 6,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_1_default_fontColor`,
+          label: "Item Title Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_1_default_fontSize`,
+          label: "Item Title Font Size",
+          initial_value: 15,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_2_default_fontColor`,
+          label: "Item Subtitle Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_2_default_fontSize`,
+          label: "Item Subtitle Font Size",
+          initial_value: 13,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Action Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_default_backgroundColor`,
+          label: "Action Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_hover_backgroundColor`,
+          label: "Action Hover/Touch Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_borderRadius`,
+          label: "Action Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingTop`,
+          label: "Action Padding Top",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingBottom`,
+          label: "Action Padding Bottom",
+          initial_value: 14,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_title_default_fontColor`,
+          label: "Action Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_title_default_fontSize`,
+          label: "Action Title Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_action_trailing_icon_chevron_asset`,
+          label: "Action Chevron Asset",
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Button Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_default_backgroundColor`,
+          label: "Button Background Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_focus_backgroundColor`,
+          label: "Button Focus Color",
+          initial_value: "#E0E0E0",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_inactive_backgroundColor`,
+          label: "Button Inactive Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_background_default_borderRadius`,
+          label: "Button Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_title_default_fontColor`,
+          label: "Button Title Color",
+          initial_value: "#000000",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_title_default_fontSize`,
+          label: "Button Title Font Size",
+          initial_value: 15,
+        },
+      ],
+    },
+  ];
+}
+
+function getModalLocalizations({ prefix }) {
+  return [
+    {
+      type: "text_input",
+      label: "Queue Header Title",
+      key: `${prefix}_header_title`,
+      initial_value: "Queue",
+    },
+    {
+      type: "text_input",
+      label: "Go To Queue Action Label",
+      key: `${prefix}_label_go_to_queue`,
+      initial_value: "Go To Queue",
+    },
+  ];
+}
+
+module.exports = {
+  getModalBlockStyles,
+  getModalLocalizations,
+};

package/manifestUtils/platformIsTV.js

@@ -4,6 +4,7 @@ function platformIsTV(platform) {
     "android_tv_for_quickbrick",
     "amazon_fire_tv_for_quickbrick",
     "lg_tv",
+    "vidaa",
     "samsung_tv",
     "web",
     "vizio",