@applicaster/zapp-react-native-utils 15.0.0-rc.127 → 15.0.0-rc.128

package/manifestUtils/_internals/__tests__/index.test.js

@@ -0,0 +1,41 @@
+const {
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
+} = require("..");
+
+describe("manifestUtils/_internals helpers", () => {
+  it("checks a key suffix", () => {
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_button_enabled")
+    ).toBe(true);
+
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_assign_action")
+    ).toBe(false);
+  });
+
+  it("checks key against multiple suffixes", () => {
+    const suffixes = ["font_color", "focused_font_color", "text_transform"];
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_text_transform")
+    ).toBe(true);
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_asset_alignment")
+    ).toBe(false);
+  });
+
+  it("generates stable key names using a prefix", () => {
+    const withMobileButtonPrefix = getKeyWithPrefixGenerator("mobile_button_2");
+
+    expect(withMobileButtonPrefix("display_mode")).toBe(
+      "mobile_button_2_display_mode"
+    );
+
+    expect(withMobileButtonPrefix("asset_enabled")).toBe(
+      "mobile_button_2_asset_enabled"
+    );
+  });
+});

package/manifestUtils/_internals/index.js

@@ -174,6 +174,36 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
   )(fields);
 }
 
+/**
+ * Checks whether a generated manifest field key ends with the given suffix.
+ *
+ * @param {string} suffix
+ * @param {string} key
+ * @returns {boolean}
+ */
+const isKeyHasSuffix = (suffix, key) => key.endsWith(`_${suffix}`);
+
+/**
+ * Checks whether a generated manifest field key ends with any supported suffix.
+ *
+ * @param {string[]} suffixes
+ * @param {string} key
+ * @returns {boolean}
+ */
+const isKeyHasAnyOfSuffixes = (suffixes, key) =>
+  suffixes.some((suffix) => key.endsWith(`_${suffix}`));
+
+/**
+ * Creates a helper that prefixes a manifest field suffix with a shared key stem.
+ *
+ * @param {string} prefix
+ * @returns {(suffix: string) => string}
+ */
+function getKeyWithPrefixGenerator(prefix) {
+  // expect prefix as lower snake case, e.g. "mobile_buttons_container"
+  return (suffix) => `${prefix}_${suffix}`;
+}
+
 module.exports = {
   toSnakeCase,
   toCamelCase,
@@ -185,4 +215,7 @@ module.exports = {
   getDefaultConfiguration,
   compact,
   replaceUnderscoreToSpace,
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
 };

package/manifestUtils/fieldUtils/__tests__/fieldUtils.test.js

@@ -0,0 +1,49 @@
+const {
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+} = require("..");
+
+describe("manifestUtils/fieldUtils", () => {
+  it("appends conditions and adds all_conditions when there is more than one condition", () => {
+    const config = {
+      key: "mobile_button_1_width",
+      conditional_fields: [
+        { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      ],
+    };
+
+    const result = withConditional([
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ])(config);
+
+    expect(result.conditional_fields).toEqual([
+      { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ]);
+
+    expect(result.rules).toBe("all_conditions");
+  });
+
+  it("creates category-prefixed conditional key", () => {
+    expect(
+      getConditionalKey("mobile_buttons_container_position", "styles")
+    ).toBe("styles/mobile_buttons_container_position");
+  });
+
+  it("creates conditional fields with default category and with raw key", () => {
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true)
+    ).toEqual({
+      key: "styles/mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true, null)
+    ).toEqual({
+      key: "mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+  });
+});

package/manifestUtils/fieldUtils/index.js

@@ -0,0 +1,54 @@
+/**
+ * Appends new conditional_fields from conditions array
+ * to config.conditional_fields
+ * if there are more than 1 condition, sets rules to "all_conditions"
+ *
+ * @param {Array<{key: string, condition_value: unknown}>} conditions
+ * @returns {(config: object) => object}
+ */
+const withConditional = (conditions) => (config) => {
+  const conditional_fields = [
+    ...(config.conditional_fields || []),
+    ...conditions,
+  ];
+
+  const next = { ...config, conditional_fields };
+
+  if (conditional_fields.length > 1) {
+    return { ...next, rules: "all_conditions" };
+  }
+
+  return next;
+};
+
+/**
+ * Builds key for conditional fields prepending category, e.g. "styles/mobile_buttons_container_position"
+ *
+ * @param {string} key
+ * @param {string} category
+ * @returns {string}
+ */
+function getConditionalKey(key, category) {
+  return `${category}/${key}`;
+}
+
+/**
+ * Returns a conditional field object for manifest visibility rules.
+ *
+ * @param {string} key
+ * @param {unknown} condition_value
+ * @param {string|null} [category="styles"] Pass `null` to use the key as-is.
+ * @returns {{key: string, condition_value: unknown}}
+ */
+function createConditionalField(key, condition_value, category = "styles") {
+  return {
+    key: category ? getConditionalKey(key, category) : key,
+    condition_value,
+  };
+}
+
+module.exports = {
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+};

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { buildMobileActionButtonGroups } = require("./mobileAction/groups");
 const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
@@ -43,6 +44,7 @@ module.exports = {
   tvMenuLabel,
   tvActionButtonsContainer,
   tvActionButton,
+  buildMobileActionButtonGroups,
   mobileCellLabel,
   tvCellLabel,
   tvBadges,

package/manifestUtils/keys.js

@@ -406,6 +406,232 @@ const TV_ACTION_BUTTON_FIELDS = [
   },
 ];
 
+const mobileActionButtonContainerFields = (positionOptions) => [
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "buttons enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "position",
+    options: positionOptions,
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "align",
+    options: ["left", "center", "right"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "over image position",
+    options: ["center", "top_left", "top_right", "bottom_left", "bottom_right"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin left",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "stacking",
+    options: ["horizontal", "vertical"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "horizontal gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "vertical gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "independent styles",
+  },
+];
+
+const MOBILE_ACTION_BUTTON_FIELDS = [
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "button enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    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: "more" },
+      { text: "add to calendar", value: "add_to_calendar" },
+      { text: "share", value: "share" },
+      { text: "downloads", value: "downloads" },
+      { text: "trailer", value: "trailer_action" },
+      { text: "mute/unmute", value: "mute_unmute" },
+    ],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "display mode",
+    options: ["dynamic", "fixed", "fill"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "width",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "contents alignment",
+    options: ["left", "center", "right"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "background color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "focused background color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "border color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "focused border color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "border size",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "corner radius",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding left",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "asset enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "action asset flavor",
+    options: ["flavor_1", "flavor_2"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "asset alignment",
+    options: ["left", "right", "above", "below"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset height",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset width",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin left",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "label enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "font color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "focused font color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.ios,
+    suffix: "iOS font family",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.android,
+    suffix: "android font family",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "font size",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "line height",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "iOS letter spacing",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "android letter spacing",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "text transform",
+    options: ["default", "lowercase", "uppercase", "capitalize"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin left",
+  },
+];
+
 const TV_MENU_LABEL_FIELDS = [
   {
     type: ZAPPIFEST_FIELDS.switch,
@@ -2134,6 +2360,8 @@ module.exports = {
   TV_COLOR_STATES,
   TV_ACTION_BUTTON_FIELDS,
   tvActionButtonContainerFields,
+  MOBILE_ACTION_BUTTON_FIELDS,
+  mobileActionButtonContainerFields,
   MOBILE_CELL_LABEL_FIELDS,
   TV_CELL_LABEL_FIELDS,
   TV_CELL_BADGE_FIELDS,

package/manifestUtils/mobileAction/button/__tests__/mobileActionButton.test.js

@@ -0,0 +1,168 @@
+import { mobileActionButton } from "..";
+
+describe("mobileActionButton", () => {
+  const defaults = {
+    buttonEnabled: true,
+    assignAction: "navigation_action",
+    displayMode: "dynamic",
+    width: 140,
+    contentsAlignment: "center",
+    backgroundColor: "rgba(1,1,1,1)",
+    focusedBackgroundColor: "rgba(2,2,2,1)",
+    borderColor: "rgba(0,0,0,0)",
+    focusedBorderColor: "rgba(0,0,0,0)",
+    borderSize: 0,
+    cornerRadius: 8,
+    paddingTop: 14,
+    paddingRight: 24,
+    paddingBottom: 14,
+    paddingLeft: 16,
+    assetEnabled: true,
+    actionAssetFlavor: "flavor_1",
+    assetAlignment: "left",
+    assetHeight: 24,
+    assetWidth: 24,
+    assetMarginTop: 0,
+    assetMarginRight: 6,
+    assetMarginBottom: 0,
+    assetMarginLeft: 0,
+    labelEnabled: true,
+    fontColor: "rgba(239,239,239,1)",
+    focusedFontColor: "rgba(239,239,239,1)",
+    iosFontFamily: "Ubuntu-Bold",
+    androidFontFamily: "Ubuntu-Bold",
+    fontSize: 15,
+    lineHeight: 24,
+    iosLetterSpacing: -0.2,
+    androidLetterSpacing: -0.2,
+    textTransform: "default",
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+  };
+
+  it("generates button fields with inferred conditional rules", () => {
+    const result = mobileActionButton({
+      label: "Mobile Button 2",
+      description: "button 2",
+      defaults,
+      isFirstButton: false,
+    });
+
+    expect(result.group).toBe(true);
+
+    const enabledField = result.fields.find(
+      (field) => field.key === "mobile_button_2_button_enabled"
+    );
+
+    expect(enabledField).toBeTruthy();
+
+    expect(enabledField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_buttons_container_buttons_enabled",
+        condition_value: true,
+      },
+    ]);
+
+    const assignActionField = result.fields.find(
+      (field) => field.key === "mobile_button_2_assign_action"
+    );
+
+    expect(assignActionField).toBeTruthy();
+
+    expect(assignActionField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_button_2_button_enabled",
+        condition_value: true,
+      },
+    ]);
+
+    const widthField = result.fields.find(
+      (field) => field.key === "mobile_button_2_width"
+    );
+
+    expect(widthField.rules).toBe("all_conditions");
+
+    expect(widthField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_button_2_button_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_buttons_container_independent_styles",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_button_2_display_mode",
+        condition_value: "fixed",
+      },
+    ]);
+
+    const actionAssetFlavorField = result.fields.find(
+      (field) => field.key === "mobile_button_2_action_asset_flavor"
+    );
+
+    expect(actionAssetFlavorField.rules).toBe("all_conditions");
+
+    expect(actionAssetFlavorField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_button_2_button_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_buttons_container_independent_styles",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_button_2_asset_enabled",
+        condition_value: true,
+      },
+    ]);
+
+    const contentsAlignmentField = result.fields.find(
+      (field) => field.key === "mobile_button_2_contents_alignment"
+    );
+
+    expect(contentsAlignmentField.rules).toBe("all_conditions");
+
+    expect(contentsAlignmentField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_button_2_button_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_buttons_container_independent_styles",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_button_2_display_mode",
+        condition_value: ["fixed", "fill"],
+      },
+    ]);
+  });
+
+  it("keeps first-button fields independent-style agnostic", () => {
+    const result = mobileActionButton({
+      label: "Mobile Button 1",
+      description: "button 1",
+      defaults,
+      isFirstButton: true,
+    });
+
+    const widthField = result.fields.find(
+      (field) => field.key === "mobile_button_1_width"
+    );
+
+    expect(widthField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_button_1_button_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_button_1_display_mode",
+        condition_value: "fixed",
+      },
+    ]);
+  });
+});

package/manifestUtils/mobileAction/button/index.js

@@ -0,0 +1,140 @@
+const { MOBILE_ACTION_BUTTON_FIELDS } = require("../../keys");
+
+const {
+  isKeyHasSuffix,
+  toSnakeCase,
+  generateFieldsFromDefaultsWithoutPrefixedLabel,
+  getKeyWithPrefixGenerator,
+  isKeyHasAnyOfSuffixes,
+} = require("../../_internals");
+
+const { withConditional, createConditionalField } = require("../../fieldUtils");
+
+const { fieldsGroup } = require("../../utils");
+
+/**
+ * Builds a manifest group for a single mobile action button and applies the
+ * conditional visibility rules between container, button, asset, and label fields.
+ *
+ * @param {object} options
+ * @param {string} options.label
+ * @param {string} options.description
+ * @param {object} options.defaults
+ * @param {boolean} options.isFirstButton
+ * @returns {object}
+ */
+function mobileActionButton({ label, description, defaults, isFirstButton }) {
+  const buttonKeyFromLabel = toSnakeCase(label); // "Mobile Button 1" -> "mobile_button_1"
+
+  const generatedFields = generateFieldsFromDefaultsWithoutPrefixedLabel(
+    label,
+    defaults,
+    MOBILE_ACTION_BUTTON_FIELDS
+  );
+
+  const keyPrefixGenerator = getKeyWithPrefixGenerator(buttonKeyFromLabel);
+
+  const containerKeyPrefixGenerator = getKeyWithPrefixGenerator(
+    "mobile_buttons_container"
+  );
+
+  const containerEnabledKey = containerKeyPrefixGenerator("buttons_enabled");
+
+  const independentStylesKey =
+    containerKeyPrefixGenerator("independent_styles");
+
+  const buttonEnabledKey = keyPrefixGenerator("button_enabled");
+  const displayModeKey = keyPrefixGenerator("display_mode");
+  const assetEnabledKey = keyPrefixGenerator("asset_enabled");
+  const labelEnabledKey = keyPrefixGenerator("label_enabled");
+
+  const defaultButtonConditions = [
+    createConditionalField(buttonEnabledKey, true),
+  ];
+
+  const fields = generatedFields.map((field) => {
+    const key = field.key;
+
+    // button_enabled has to be always visible when the container is enabled, as it's the main toggle for the button
+    if (isKeyHasSuffix("button_enabled", key)) {
+      return withConditional([
+        createConditionalField(containerEnabledKey, true),
+      ])(field);
+    }
+
+    // for button at index 1(isFirstButton) return `defaultButtonsConditions`,
+    // the rest buttons lookup depends on independent styles toggle
+    const stylesConditions = isFirstButton
+      ? defaultButtonConditions
+      : [
+          ...defaultButtonConditions,
+          createConditionalField(independentStylesKey, true),
+        ];
+
+    // assign_action depends only on button_enabled
+    if (isKeyHasSuffix("assign_action", key)) {
+      return withConditional(defaultButtonConditions)(field);
+    }
+
+    const conditions = [...stylesConditions];
+
+    // width depends on [display_mode: fixed]
+    if (isKeyHasSuffix("width", key)) {
+      conditions.push(createConditionalField(displayModeKey, "fixed"));
+    }
+
+    // contents_alignment depends on [display_mode: fixed or display_mode: fill]
+    if (isKeyHasSuffix("contents_alignment", key)) {
+      conditions.push(
+        createConditionalField(displayModeKey, ["fixed", "fill"])
+      );
+    }
+
+    // asset styling fields depend on [asset_enabled: true]
+    if (
+      isKeyHasAnyOfSuffixes(
+        [
+          "action_asset_flavor",
+          "asset_alignment",
+          "asset_height",
+          "asset_width",
+          "asset_margin_top",
+          "asset_margin_right",
+          "asset_margin_bottom",
+          "asset_margin_left",
+        ],
+        key
+      )
+    ) {
+      conditions.push(createConditionalField(assetEnabledKey, true));
+    }
+
+    // label styling fields depend on [label_enabled: true]
+    if (
+      isKeyHasAnyOfSuffixes(
+        [
+          "font_color",
+          "focused_font_color",
+          "ios_font_family",
+          "android_font_family",
+          "font_size",
+          "line_height",
+          "ios_letter_spacing",
+          "android_letter_spacing",
+          "text_transform",
+        ],
+        key
+      )
+    ) {
+      conditions.push(createConditionalField(labelEnabledKey, true));
+    }
+
+    return withConditional(conditions)(field);
+  });
+
+  return fieldsGroup(label, description, fields);
+}
+
+module.exports = {
+  mobileActionButton,
+};

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

@@ -0,0 +1,102 @@
+import { mobileActionButtonsContainer } from "..";
+
+describe("mobileActionButtonsContainer", () => {
+  it("generates container fields with inferred conditionals", () => {
+    const result = mobileActionButtonsContainer({
+      label: "Mobile Buttons Container",
+      description: "container",
+      defaults: {
+        buttonsEnabled: false,
+        position: ["over_image", "text_label_1", "text_label_2"],
+        align: "left",
+        overImagePosition: "bottom_left",
+        marginTop: 0,
+        marginRight: 20,
+        marginBottom: 0,
+        marginLeft: 20,
+        stacking: "horizontal",
+        horizontalGutter: 8,
+        verticalGutter: 8,
+        independentStyles: true,
+      },
+    });
+
+    expect(result.group).toBe(true);
+    expect(result.label).toBe("Mobile Buttons Container");
+
+    const enabledField = result.fields.find(
+      (field) => field.key === "mobile_buttons_container_buttons_enabled"
+    );
+
+    expect(enabledField).toBeTruthy();
+    expect(enabledField.type).toBe("switch");
+
+    const positionField = result.fields.find(
+      (field) => field.key === "mobile_buttons_container_position"
+    );
+
+    expect(positionField.options).toEqual([
+      "over_image",
+      "text_label_1",
+      "text_label_2",
+    ]);
+
+    expect(positionField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_buttons_container_buttons_enabled",
+        condition_value: true,
+      },
+    ]);
+
+    const overImagePositionField = result.fields.find(
+      (field) => field.key === "mobile_buttons_container_over_image_position"
+    );
+
+    expect(overImagePositionField.rules).toBe("all_conditions");
+
+    expect(overImagePositionField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_buttons_container_buttons_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_buttons_container_position",
+        condition_value: "over_image",
+      },
+    ]);
+
+    const horizontalGutterField = result.fields.find(
+      (field) => field.key === "mobile_buttons_container_horizontal_gutter"
+    );
+
+    expect(horizontalGutterField.rules).toBe("all_conditions");
+
+    expect(horizontalGutterField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_buttons_container_buttons_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_buttons_container_stacking",
+        condition_value: "horizontal",
+      },
+    ]);
+
+    const verticalGutterField = result.fields.find(
+      (field) => field.key === "mobile_buttons_container_vertical_gutter"
+    );
+
+    expect(verticalGutterField.rules).toBe("all_conditions");
+
+    expect(verticalGutterField.conditional_fields).toEqual([
+      {
+        key: "styles/mobile_buttons_container_buttons_enabled",
+        condition_value: true,
+      },
+      {
+        key: "styles/mobile_buttons_container_stacking",
+        condition_value: "vertical",
+      },
+    ]);
+  });
+});

package/manifestUtils/mobileAction/container/index.js

@@ -0,0 +1,73 @@
+const { mobileActionButtonContainerFields } = require("../../keys");
+
+const {
+  isKeyHasSuffix,
+  toSnakeCase,
+  generateFieldsFromDefaultsWithoutPrefixedLabel,
+  getKeyWithPrefixGenerator,
+} = require("../../_internals");
+
+const { withConditional, createConditionalField } = require("../../fieldUtils");
+
+const { fieldsGroup } = require("../../utils");
+
+/**
+ * Builds the manifest group for the mobile action buttons container and wires
+ * child field visibility to the container-level toggles and layout selections.
+ *
+ * @param {object} options
+ * @param {string} options.label
+ * @param {string} options.description
+ * @param {object} options.defaults
+ * @returns {object}
+ */
+function mobileActionButtonsContainer({ label, description, defaults }) {
+  const containerKeyFromLabel = toSnakeCase(label); // "Mobile Buttons Container" -> "mobile_buttons_container"
+
+  const generatedFields = generateFieldsFromDefaultsWithoutPrefixedLabel(
+    label,
+    defaults,
+    mobileActionButtonContainerFields(defaults.position)
+  );
+
+  const keyPrefixGenerator = getKeyWithPrefixGenerator(containerKeyFromLabel);
+
+  const enabledKey = keyPrefixGenerator("buttons_enabled");
+  const positionKey = keyPrefixGenerator("position");
+  const stackingKey = keyPrefixGenerator("stacking");
+
+  const defaultConditions = [createConditionalField(enabledKey, true)];
+
+  const fields = generatedFields.map((field) => {
+    const key = field.key;
+
+    if (isKeyHasSuffix("buttons_enabled", key)) {
+      return field;
+    }
+
+    const conditions = [...defaultConditions];
+
+    // over_image_position depends on [positionKey: over_image]
+    if (isKeyHasSuffix("over_image_position", key)) {
+      conditions.push(createConditionalField(positionKey, "over_image"));
+    }
+
+    // horizontal_gutter depends on [stackingKey: horizontal]
+    if (isKeyHasSuffix("horizontal_gutter", key)) {
+      conditions.push(createConditionalField(stackingKey, "horizontal"));
+    }
+
+    // vertical_gutter depends on [stackingKey: vertical]
+    if (isKeyHasSuffix("vertical_gutter", key)) {
+      conditions.push(createConditionalField(stackingKey, "vertical"));
+    }
+
+    return withConditional(conditions)(field);
+  });
+
+  return fieldsGroup(label, description, fields);
+}
+
+module.exports = {
+  mobileActionButtonsContainer,
+};

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

@@ -0,0 +1,127 @@
+import { buildMobileActionButtonGroups } from "..";
+
+describe("buildMobileActionButtonGroups", () => {
+  it("builds the container and three button groups with shared defaults", () => {
+    const groups = buildMobileActionButtonGroups({
+      containerDefaults: {
+        position: ["over_image", "text_label_1", "text_label_2"],
+      },
+    });
+
+    expect(groups).toHaveLength(4);
+
+    expect(groups.map((group) => group.label)).toEqual([
+      "Mobile Buttons Container",
+      "Mobile Button 1",
+      "Mobile Button 2",
+      "Mobile Button 3",
+    ]);
+
+    const containerFields = groups[0].fields;
+
+    const positionField = containerFields.find(
+      (field) => field.key === "mobile_buttons_container_position"
+    );
+
+    const buttonsEnabledField = containerFields.find(
+      (field) => field.key === "mobile_buttons_container_buttons_enabled"
+    );
+
+    expect(positionField.options).toEqual([
+      "over_image",
+      "text_label_1",
+      "text_label_2",
+    ]);
+
+    expect(buttonsEnabledField.initial_value).toBe(false);
+
+    const button1Fields = groups[1].fields;
+
+    const button1EnabledField = button1Fields.find(
+      (field) => field.key === "mobile_button_1_button_enabled"
+    );
+
+    const button1AssignActionField = button1Fields.find(
+      (field) => field.key === "mobile_button_1_assign_action"
+    );
+
+    const button1BackgroundColorField = button1Fields.find(
+      (field) => field.key === "mobile_button_1_background_color"
+    );
+
+    expect(button1EnabledField.initial_value).toBe(true);
+    expect(button1AssignActionField.initial_value).toBe("navigation_action");
+
+    expect(button1BackgroundColorField.initial_value).toBe(
+      "rgba(254, 20, 72, 1)"
+    );
+
+    const button2Fields = groups[2].fields;
+
+    const button2EnabledField = button2Fields.find(
+      (field) => field.key === "mobile_button_2_button_enabled"
+    );
+
+    const button2AssignActionField = button2Fields.find(
+      (field) => field.key === "mobile_button_2_assign_action"
+    );
+
+    expect(button2EnabledField.initial_value).toBe(false);
+    expect(button2AssignActionField.initial_value).toBe("secondary_navigation");
+
+    const button3Fields = groups[3].fields;
+
+    const button3EnabledField = button3Fields.find(
+      (field) => field.key === "mobile_button_3_button_enabled"
+    );
+
+    const button3AssignActionField = button3Fields.find(
+      (field) => field.key === "mobile_button_3_assign_action"
+    );
+
+    expect(button3EnabledField.initial_value).toBe(false);
+
+    expect(button3AssignActionField.initial_value).toBe(
+      "local_storage_favourites_action"
+    );
+  });
+
+  it("merges container, shared button, and per-button overrides", () => {
+    const groups = buildMobileActionButtonGroups({
+      containerDefaults: {
+        align: "center",
+        position: ["over_image"],
+      },
+      sharedButtonDefaults: {
+        assetAlignment: "right",
+      },
+      buttonOverrides: {
+        2: {
+          buttonEnabled: true,
+          assignAction: "downloads",
+        },
+      },
+    });
+
+    const alignField = groups[0].fields.find(
+      (field) => field.key === "mobile_buttons_container_align"
+    );
+
+    const button1AssetAlignmentField = groups[1].fields.find(
+      (field) => field.key === "mobile_button_1_asset_alignment"
+    );
+
+    const button2EnabledField = groups[2].fields.find(
+      (field) => field.key === "mobile_button_2_button_enabled"
+    );
+
+    const button2AssignActionField = groups[2].fields.find(
+      (field) => field.key === "mobile_button_2_assign_action"
+    );
+
+    expect(alignField.initial_value).toBe("center");
+    expect(button1AssetAlignmentField.initial_value).toBe("right");
+    expect(button2EnabledField.initial_value).toBe(true);
+    expect(button2AssignActionField.initial_value).toBe("downloads");
+  });
+});

package/manifestUtils/mobileAction/groups/defaults.js

@@ -0,0 +1,75 @@
+const DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS = {
+  buttonsEnabled: false,
+  align: "left",
+  overImagePosition: "bottom_left",
+  marginTop: 0,
+  marginRight: 20,
+  marginBottom: 0,
+  marginLeft: 20,
+  stacking: "horizontal",
+  horizontalGutter: 8,
+  verticalGutter: 8,
+  independentStyles: true,
+};
+
+const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
+  displayMode: "dynamic",
+  width: 140,
+  contentsAlignment: "center",
+  backgroundColor: "rgba(62, 62, 62, 1)",
+  focusedBackgroundColor: "rgba(46, 46, 46, 1)",
+  borderColor: "rgba(0, 0, 0, 0)",
+  focusedBorderColor: "rgba(0, 0, 0, 0)",
+  borderSize: 0,
+  cornerRadius: 8,
+  paddingTop: 14,
+  paddingRight: 24,
+  paddingBottom: 14,
+  paddingLeft: 16,
+  assetEnabled: true,
+  actionAssetFlavor: "flavor_1",
+  assetAlignment: "left",
+  assetHeight: 24,
+  assetWidth: 24,
+  assetMarginTop: 0,
+  assetMarginRight: 6,
+  assetMarginBottom: 0,
+  assetMarginLeft: 0,
+  labelEnabled: true,
+  fontColor: "rgba(239, 239, 239, 1)",
+  focusedFontColor: "rgba(239, 239, 239, 1)",
+  iosFontFamily: "Ubuntu-Bold",
+  androidFontFamily: "Ubuntu-Bold",
+  fontSize: 15,
+  lineHeight: 24,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: -0.2,
+  textTransform: "default",
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+};
+
+const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {
+  1: {
+    buttonEnabled: true,
+    assignAction: "navigation_action",
+    backgroundColor: "rgba(254, 20, 72, 1)",
+    focusedBackgroundColor: "rgba(213, 8, 54, 1)",
+  },
+  2: {
+    buttonEnabled: false,
+    assignAction: "secondary_navigation",
+  },
+  3: {
+    buttonEnabled: false,
+    assignAction: "local_storage_favourites_action",
+  },
+};
+
+module.exports = {
+  DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS,
+  DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS,
+  DEFAULT_MOBILE_ACTION_BUTTON_PRESETS,
+};

package/manifestUtils/mobileAction/groups/index.js

@@ -0,0 +1,80 @@
+const { mobileActionButtonsContainer } = require("../container");
+const { mobileActionButton } = require("../button");
+
+const {
+  DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS,
+  DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS,
+  DEFAULT_MOBILE_ACTION_BUTTON_PRESETS,
+} = require("./defaults");
+
+const CONTAINER_GROUP_LABEL = "Mobile Buttons Container"; // NOTE: used as key – "Mobile Buttons Container" -> "mobile_buttons_container"
+
+const CONTAINER_GROUP_DESCRIPTION =
+  "Configuration for mobile action buttons container";
+
+const BUTTON_GROUPS = [
+  {
+    index: 1,
+    label: "Mobile Button 1",
+    description: "Primary mobile action button",
+  },
+  {
+    index: 2,
+    label: "Mobile Button 2",
+    description: "Secondary mobile action button",
+  },
+  {
+    index: 3,
+    label: "Mobile Button 3",
+    description: "Tertiary mobile action button",
+  },
+];
+
+/**
+ * Builds the shared mobile action button manifest groups while letting each
+ * plugin supply only its supported insertion positions and explicit overrides.
+ *
+ * @param {object} options
+ * @param {object} [options.containerDefaults={}]
+ * @param {object} [options.sharedButtonDefaults={}]
+ * @param {Record<number, object>} [options.buttonOverrides={}]
+ * @returns {object[]}
+ */
+function buildMobileActionButtonGroups({
+  containerDefaults = {},
+  sharedButtonDefaults = {},
+  buttonOverrides = {},
+}) {
+  const groups = [
+    mobileActionButtonsContainer({
+      label: CONTAINER_GROUP_LABEL,
+      description: CONTAINER_GROUP_DESCRIPTION,
+      defaults: {
+        ...DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS,
+        ...containerDefaults,
+      },
+    }),
+  ];
+
+  BUTTON_GROUPS.forEach(({ index, label, description }) => {
+    groups.push(
+      mobileActionButton({
+        isFirstButton: index === 1,
+        label,
+        description,
+        defaults: {
+          ...DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS,
+          ...sharedButtonDefaults,
+          ...DEFAULT_MOBILE_ACTION_BUTTON_PRESETS[index],
+          ...(buttonOverrides[index] || {}),
+        },
+      })
+    );
+  });
+
+  return groups;
+}
+
+module.exports = {
+  buildMobileActionButtonGroups,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-rc.127",
+  "version": "15.0.0-rc.128",
   "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.0.0-rc.127",
+    "@applicaster/applicaster-types": "15.0.0-rc.128",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",