@capillarytech/creatives-library 9.0.56 → 9.0.57-alpha.0

package/v2Components/FormBuilder/Functional/tests/mpushRenderers.test.js

@@ -0,0 +1,368 @@
+/**
+ * Unit tests for the MPUSH field renderers — each renderer is invoked as a plain
+ * function and its element tree inspected, exercising the conditional branches
+ * (error gating, message resolution, value-resolution chains, upload handlers)
+ * without mounting the heavy subtrees.
+ */
+import {
+  MpushInputField, MpushTextAreaField, MpushCheckboxField, RadioGroupField,
+  SelectField, UploadField, MpushDivField, IconField, MobilePushPreviewField,
+  createMpushRegistry,
+} from '../renderers/mpushRenderers';
+import { TagListField } from '../renderers/smsRenderers';
+import { ERROR_VALUE } from '../channels/mobilepush/config';
+import { isAiContentBotDisabled } from '../../../../utils/common';
+
+jest.mock('../../../../utils/common', () => ({ isAiContentBotDisabled: jest.fn(() => true) }));
+
+const intl = { formatMessage: (d) => d.defaultMessage || d.id };
+
+const kids = (el) => {
+  const c = el.props.children;
+  return (Array.isArray(c) ? c : [c]).filter(Boolean);
+};
+
+describe('MpushInputField', () => {
+  const field = { id: 'secondary-cta-0-label', width: 18, errorMessage: 'Label required' };
+
+  it('message resolution: personalization > brace > schema errorMessage; hidden without checkValidation', () => {
+    const base = { field, onChange: () => {}, renderContext: { checkValidation: true, intl } };
+    expect(kids(MpushInputField({ ...base, value: '', error: true }))[0].props.errorMessage)
+      .toBe('Label required');
+    expect(kids(MpushInputField({ ...base, value: 'a {{b', error: ERROR_VALUE.BRACKET }))[0].props.errorMessage)
+      .toContain('curly braces');
+    expect(kids(MpushInputField({
+      ...base,
+      value: 'hi {{first_name}}',
+      error: true,
+      renderContext: { checkValidation: true, intl, restrictPersonalization: true },
+    }))[0].props.errorMessage).toContain('Personalization');
+    expect(kids(MpushInputField({
+      ...base, value: '', error: true, renderContext: { checkValidation: false, intl },
+    }))[0].props.errorMessage).toBe('');
+  });
+});
+
+describe('MpushTextAreaField', () => {
+  const field = { id: 'message-editor', width: 18, errorMessage: 'Message required' };
+
+  it('inline message shows only under checkValidation; AskAira renders when AI enabled', () => {
+    const base = { field, onChange: jest.fn(), renderContext: { checkValidation: true, intl } };
+    expect(kids(MpushTextAreaField({ ...base, value: '', error: true }))[0].props.errorMessage)
+      .toBe('Message required');
+    isAiContentBotDisabled.mockReturnValueOnce(false);
+    const el = MpushTextAreaField({ ...base, value: 'hi', error: false });
+    const bot = kids(el).find((c) => typeof c.props?.setText === 'function');
+    expect(bot).toBeTruthy();
+    bot.props.setText('generated');
+    expect(base.onChange).toHaveBeenCalledWith('generated');
+  });
+
+  it('falls back to AI-disabled when the flag reader throws', () => {
+    isAiContentBotDisabled.mockImplementationOnce(() => { throw new Error('no auth'); });
+    const el = MpushTextAreaField({
+      field, value: 'hi', error: false, onChange: () => {}, renderContext: { checkValidation: false, intl },
+    });
+    expect(kids(el).length).toBe(1); // textarea only, no bot
+  });
+});
+
+describe('MpushCheckboxField', () => {
+  const field = {
+    id: 'add-pri-cta', width: 18, submitAction: 'addPrimaryCta', errorMessage: 'err',
+  };
+
+  it('toggle commits the value AND fires the injected submit-action', () => {
+    const onChange = jest.fn();
+    const onEvent = jest.fn();
+    const el = MpushCheckboxField({
+      field, value: false, error: false, onChange, onEvent, renderContext: {},
+    });
+    kids(el)[0].props.onChange({ target: { checked: true } });
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(onEvent).toHaveBeenCalledWith('addPrimaryCta', true);
+  });
+
+  it('no submit-action => only the value commit; disabled + hoverText wraps in a tooltip', () => {
+    const onEvent = jest.fn();
+    const plain = MpushCheckboxField({
+      field: { id: 'x' }, value: false, error: false, onChange: () => {}, onEvent, renderContext: {},
+    });
+    kids(plain)[0].props.onChange({ target: { checked: true } });
+    expect(onEvent).not.toHaveBeenCalled();
+
+    const wrapped = MpushCheckboxField({
+      field: { ...field, disabled: true, hoverText: 'not configured' },
+      value: false,
+      error: false,
+      onChange: () => {},
+      renderContext: {},
+    });
+    expect(kids(wrapped)[0].props.title).toBe('not configured');
+  });
+});
+
+describe('RadioGroupField', () => {
+  const field = {
+    id: 'cta-deeplink', width: 18, options: ['Deeplink', 'External Link'], value: 'Deeplink', errorMessage: 'pick one',
+  };
+  const build = (legacyFormData, overrides = {}) => RadioGroupField({
+    field,
+    error: false,
+    onChange: () => {},
+    onEvent: () => {},
+    renderContext: { legacyFormData, activeTabIndex: 0, ...overrides },
+    ...overrides,
+  });
+
+  it('value resolution chain: tab value -> root value -> schema default (Classic handleSetRadioValue)', () => {
+    expect(kids(build({ 0: { 'cta-deeplink': 'External Link' } }))[0].props.value).toBe('External Link');
+    expect(kids(build({ 0: {}, 'cta-deeplink': 'External Link' }))[0].props.value).toBe('External Link');
+    expect(kids(build({ 0: { 'cta-deeplink': '' } }))[0].props.value).toBe('Deeplink'); // '' falls through
+  });
+
+  it('change commits the value and fires the injected onChange with the commit signature', () => {
+    const onChange = jest.fn();
+    const onEvent = jest.fn();
+    const el = RadioGroupField({
+      field, error: false, onChange, onEvent, renderContext: { legacyFormData: { 0: {} } },
+    });
+    kids(el)[0].props.onChange({ target: { value: 'External Link' } });
+    expect(onChange).toHaveBeenCalledWith('External Link');
+    expect(onEvent).toHaveBeenCalledWith('onChange', 'External Link');
+  });
+});
+
+describe('SelectField', () => {
+  const field = {
+    id: 'cta-deeplink-select', width: 18, options: [{ label: 'A', value: 'a' }], errorMessage: 'Select a deeplink',
+  };
+
+  it('formData `${id}-options` overrides the schema options; selection fires both callbacks', () => {
+    const onChange = jest.fn();
+    const onEvent = jest.fn();
+    const override = [{ label: 'B', value: 'b' }];
+    const el = SelectField({
+      field,
+      value: '',
+      error: false,
+      onChange,
+      onEvent,
+      renderContext: { legacyFormData: { 'cta-deeplink-select-options': override } },
+    });
+    const [select] = kids(el);
+    expect(select.props.options).toBe(override);
+    select.props.onSelect('b');
+    expect(onChange).toHaveBeenCalledWith('b');
+    expect(onEvent).toHaveBeenCalledWith('onSelect', 'b');
+  });
+
+  it('error span shows only under checkValidation', () => {
+    const base = { field, value: '', error: true, onChange: () => {}, onEvent: () => {} };
+    expect(kids(SelectField({ ...base, renderContext: { checkValidation: true } })).length).toBe(2);
+    expect(kids(SelectField({ ...base, renderContext: { checkValidation: false } })).length).toBe(1);
+  });
+});
+
+describe('UploadField', () => {
+  const field = {
+    id: 'image-upload', width: 6, label: 'Add image', showPreview: true,
+    supportedExtensions: '.png,.jpg', submitAction: 'onUpload',
+    previewProps: { placeholder: 'No image', errorMessage: 'Image required' },
+  };
+  // CapColumn > [WithLabel(preview), form > [input, CapButton]]
+  const parts = (el) => {
+    const [preview, form] = kids(el);
+    const [input, button] = kids(form);
+    return { preview, input, button };
+  };
+
+  it('error display honors checkValidation OR startValidation (the one Classic exception)', () => {
+    const base = { field, value: '', error: true, onEvent: () => {} };
+    expect(parts(UploadField({ ...base, renderContext: { startValidation: true } })).preview.props.ifError).toBe(true);
+    expect(parts(UploadField({ ...base, renderContext: { checkValidation: true } })).preview.props.ifError).toBe(true);
+    expect(parts(UploadField({ ...base, renderContext: {} })).preview.props.ifError).toBe(false);
+  });
+
+  it('file change: no file => no event; wrong extension fires the wrong-file event and CONTINUES (Classic parity)', () => {
+    const createObjectURL = jest.fn(() => 'blob:x');
+    window.URL.createObjectURL = createObjectURL;
+    const onEvent = jest.fn();
+    const { input } = parts(UploadField({
+      field, value: '', error: false, onEvent, renderContext: {},
+    }));
+
+    input.props.onChange({ target: { files: [] } });
+    expect(onEvent).not.toHaveBeenCalled();
+
+    const file = { name: 'notes.txt', size: 100 };
+    input.props.onChange({ target: { files: [file], value: null } });
+    expect(onEvent).toHaveBeenCalledWith('onUpload', { file, type: 'wrong file' });
+    expect(createObjectURL).toHaveBeenCalledWith(file); // no early return
+  });
+
+  it('image load reports dimensions and the >5MB error flag', () => {
+    window.URL.createObjectURL = jest.fn(() => 'blob:x');
+    const images = [];
+    const RealImage = global.Image;
+    global.Image = class { constructor() { images.push(this); } };
+    try {
+      const onEvent = jest.fn();
+      const { input } = parts(UploadField({
+        field, value: '', error: false, onEvent, renderContext: {},
+      }));
+      const file = { name: 'big.png', size: 6e6 };
+      input.props.onChange({ target: { files: [file], value: null } });
+      const img = images[images.length - 1];
+      img.width = 300;
+      img.height = 200;
+      img.onload();
+      expect(onEvent).toHaveBeenCalledWith('onUpload', {
+        file, type: 'image', fileParams: { width: 300, height: 200, error: true },
+      });
+    } finally {
+      global.Image = RealImage;
+    }
+  });
+
+  it('the add-photo button opens the hidden file input (and no-ops when it is absent)', () => {
+    const { button } = parts(UploadField({
+      field, value: '', error: false, onEvent: () => {}, renderContext: {},
+    }));
+    const preventDefault = jest.fn();
+    button.props.onClick({ preventDefault }); // no #image-upload in DOM -> no-op branch
+    expect(preventDefault).toHaveBeenCalled();
+
+    const host = document.createElement('form');
+    host.id = 'image-upload';
+    const fileInput = document.createElement('input');
+    fileInput.id = 'fileName';
+    host.appendChild(fileInput);
+    document.body.appendChild(host);
+    const click = jest.spyOn(fileInput, 'click');
+    try {
+      button.props.onClick({ preventDefault: () => {} });
+      expect(click).toHaveBeenCalled();
+      button.props.onClick(); // the no-event guard branch
+      expect(click).toHaveBeenCalledTimes(2);
+    } finally {
+      document.body.removeChild(host);
+    }
+  });
+
+  it('renders the image when a value exists, the placeholder otherwise', () => {
+    const withImage = parts(UploadField({
+      field, value: 'https://cdn/img.png', error: false, onEvent: () => {}, renderContext: {},
+    }));
+    const withoutImage = parts(UploadField({
+      field, value: '', error: false, onEvent: () => {}, renderContext: {},
+    }));
+    expect(withImage.preview).toBeTruthy();
+    expect(withoutImage.preview).toBeTruthy();
+  });
+});
+
+describe('MpushDivField', () => {
+  const field = { id: 'copy-android-content', value: 'Copy content', submitAction: 'onClick' };
+
+  it('value resolves from the ACTIVE tab first; DOM id gets the pane suffix on pane 2', () => {
+    const el = MpushDivField({
+      field,
+      onEvent: () => {},
+      renderContext: { legacyFormData: { 0: { 'copy-android-content': 'from tab' } }, activeTabIndex: 0, paneTabIndex: 1 },
+    });
+    expect(el.props.children).toBe('from tab');
+    expect(el.props.id).toBe('copy-android-content2');
+    const androidPane = MpushDivField({
+      field, onEvent: () => {}, renderContext: { legacyFormData: {}, activeTabIndex: 0, paneTabIndex: 0 },
+    });
+    expect(androidPane.props.id).toBe('copy-android-content');
+    expect(androidPane.props.children).toBe('Copy content'); // schema fallback
+  });
+
+  it('click fires the submit-action; onInput takes the tail onChange path', () => {
+    const onEvent = jest.fn();
+    const el = MpushDivField({ field, onEvent, renderContext: {} });
+    el.props.onClick('payload');
+    expect(onEvent).toHaveBeenCalledWith('onClick', 'payload');
+    el.props.onInput({ stopPropagation: () => {}, target: { textContent: 'typed' } });
+    expect(onEvent).toHaveBeenCalledWith('onChange', 'typed');
+  });
+});
+
+describe('IconField', () => {
+  it('click fires the submit-action; no action => no event', () => {
+    const onEvent = jest.fn();
+    IconField({ field: { id: 'cta-deeplink-delete', submitAction: 'onDelete' }, onEvent })
+      .props.onClick('x');
+    expect(onEvent).toHaveBeenCalledWith('onDelete', 'x');
+    IconField({ field: { id: 'plain-icon' }, onEvent: jest.fn() }).props.onClick('x');
+    expect(onEvent).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('tag-list rendering (shared TagListField)', () => {
+  it('CLASSIC PARITY PIN: column takes field.width and field.style (semantic path, Classic.js:3730-3769)', () => {
+    // the container-spliced CTA tagLists position "Add label" via style
+    // (marginRight 24%/10%) — Classic's semantic tag-list case honors both.
+    const field = {
+      id: 'title-tagList',
+      label: 'Add label',
+      offset: 3,
+      style: { marginRight: '10%', display: 'flex', justifyContent: 'end', width: '100%' },
+    };
+    const el = TagListField({ field, onEvent: jest.fn(), renderContext: {} });
+    expect(el.props.span).toBe(''); // no width -> '' exactly like Classic
+    expect(el.props.offset).toBe(3);
+    expect(el.props.style).toEqual(field.style);
+    expect(el.props.children.props.label).toBe('Add label');
+  });
+
+  it('bridges onTagSelect through onEvent', () => {
+    const onEvent = jest.fn();
+    const el = TagListField({ field: { id: 'title-tagList' }, onEvent, renderContext: {} });
+    el.props.children.props.onTagSelect({ definition: { value: 'x' } });
+    expect(onEvent).toHaveBeenCalledWith('onTagSelect', { definition: { value: 'x' } });
+  });
+});
+
+describe('MobilePushPreviewField', () => {
+  const field = {
+    id: 'mobile-push-preview',
+    content: {
+      title: 'message-title', message: 'message-editor', secondaryCta1: 'secondary-cta-0-label', secondaryCta2: 'secondary-cta-1-label', appName: 'My App',
+    },
+  };
+
+  it('builds both platform contents from the ACTIVE tab (Classic quirk) with CTA labels', () => {
+    const el = MobilePushPreviewField({
+      field,
+      renderContext: {
+        intl,
+        activeTabIndex: 0,
+        legacyFormData: {
+          0: {
+            'message-title': 'T', 'message-editor': 'B', image: 'img.png', 'secondary-cta-0-label': 'Buy', 'secondary-cta-1-label': 'Skip',
+          },
+        },
+      },
+    });
+    const [preview] = kids(el);
+    expect(preview.props.content.androidContent).toEqual(preview.props.content.iosContent);
+    expect(preview.props.content.androidContent.header).toBe('T');
+    expect(preview.props.content.androidContent.actions).toEqual([{ label: 'Buy' }, { label: 'Skip' }]);
+    expect(preview.props.showDeviceToggle).toBe(false);
+  });
+
+  it('returns null when the active tab is absent', () => {
+    expect(MobilePushPreviewField({ field, renderContext: { legacyFormData: {} } })).toBeNull();
+  });
+});
+
+describe('createMpushRegistry', () => {
+  it('resolves every MPUSH field type to a renderer', () => {
+    const registry = createMpushRegistry();
+    ['input', 'textarea', 'checkbox', 'radioGroup', 'select', 'upload', 'div', 'icon', 'mobile-push-preview']
+      .forEach((type) => expect(registry.resolve(type)).toBeTruthy());
+  });
+});

package/v2Components/FormBuilder/Functional/tests/schemaForm.test.js

@@ -37,4 +37,21 @@ describe('SchemaForm', () => {
     const { getAllByTestId } = render(<SchemaForm schema={schema} renderContext={renderContext} />);
     expect(getAllByTestId('stub').length).toBe(2);
   });
+
+  it('skips inactive and non-tabs containers; renders an active tabs container (id-less key fallback)', () => {
+    const schema = {
+      containers: [
+        { id: 'off', type: 'tabs', isActive: false, panes: [{ sections: [] }] },
+        { id: 'other', type: 'accordion' },
+        { type: 'tabs', panes: [{ sections: [] }] }, // no id -> index key fallback
+      ],
+    };
+    const { container } = render(
+      <SchemaForm
+        schema={schema}
+        renderContext={{ ...renderContext, onTabSwitch: () => {}, intl: { locale: 'en' } }}
+      />,
+    );
+    expect(container.querySelectorAll('.ant-tabs').length).toBe(1);
+  });
 });

package/v2Components/FormBuilder/Functional/tests/tabsContainer.test.js

@@ -0,0 +1,110 @@
+/**
+ * Unit tests for TabsContainer — pane/key binding, unsupported-pane skipping,
+ * header hiding for ja-JP, and the tab-switch bridge.
+ */
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import TabsContainer from '../layout/TabsContainer';
+
+const Stub = () => <span data-testid="stub" />;
+const registry = { resolve: () => Stub };
+
+const buildContext = (overrides = {}) => ({
+  registry,
+  state: { root: {}, tabs: [{ fields: {}, tabKey: 'kA' }, { fields: {}, tabKey: 'kI' }] },
+  errorData: {},
+  activeTabIndex: 0,
+  onFieldChange: () => {},
+  onFieldBlur: () => {},
+  onEvent: () => {},
+  onTabSwitch: jest.fn(),
+  intl: { locale: 'en', formatMessage: (d) => d.defaultMessage || d.id },
+  ...overrides,
+});
+
+const headerSection = (label) => ({
+  type: 'col-label',
+  inputFields: [{ id: `hdr-${label}`, type: 'div', value: label }],
+});
+
+const buildContainer = (overrides = {}) => ({
+  id: 'pane',
+  type: 'tabs',
+  panes: [
+    { sectionsHeaders: [headerSection('Android')], sections: [] },
+    { sectionsHeaders: [headerSection('iOS')], sections: [] },
+  ],
+  ...overrides,
+});
+
+describe('TabsContainer', () => {
+  it('renders nothing without panes', () => {
+    const { container } = render(<TabsContainer container={null} renderContext={buildContext()} />);
+    expect(container.textContent).toBe('');
+    const { container: c2 } = render(
+      <TabsContainer container={{ id: 'pane', type: 'tabs', panes: [] }} renderContext={buildContext()} />,
+    );
+    expect(c2.textContent).toBe('');
+  });
+
+  it('skips isSupported:false panes WITHOUT reserving a tab index (pane->tab binding shifts)', () => {
+    const container = buildContainer();
+    container.panes[0].isSupported = false;
+    const { container: dom } = render(
+      <TabsContainer container={container} renderContext={buildContext()} />,
+    );
+    // only the iOS pane renders, bound to tab 0 (key 'kA' — the shifted binding)
+    expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(1);
+  });
+
+  it('hides the tab-header sections for the ja-JP locale', () => {
+    const context = buildContext({ intl: { locale: 'ja-JP', formatMessage: (d) => d.id } });
+    const { queryAllByTestId } = render(
+      <TabsContainer container={buildContainer()} renderContext={context} />,
+    );
+    expect(queryAllByTestId('stub').length).toBe(0);
+  });
+
+  it('falls back to container.tabContent.sections when a pane has no sectionsHeaders', () => {
+    const container = buildContainer({
+      panes: [{ sections: [] }, { sections: [] }],
+      tabContent: { sections: [headerSection('shared')] },
+    });
+    const { getAllByTestId } = render(
+      <TabsContainer container={container} renderContext={buildContext()} />,
+    );
+    expect(getAllByTestId('stub').length).toBeGreaterThan(0);
+  });
+
+  it('a tab-header click routes through onTabSwitch with the clicked tabKey', () => {
+    const context = buildContext();
+    const { container: dom } = render(
+      <TabsContainer container={buildContainer()} renderContext={context} />,
+    );
+    fireEvent.click(dom.querySelectorAll('.ant-tabs-tab')[1]);
+    expect(context.onTabSwitch).toHaveBeenCalledWith(expect.objectContaining({ id: 'pane' }), 'kI');
+  });
+
+  it('an out-of-range active index falls back to the first pane key', () => {
+    const context = buildContext({
+      activeTabIndex: 5,
+      state: { root: {}, tabs: [{ fields: {} }, { fields: {} }] },
+    });
+    const { container: dom } = render(
+      <TabsContainer container={buildContainer()} renderContext={context} />,
+    );
+    expect(dom.querySelectorAll('.ant-tabs-tab-active').length).toBe(1);
+  });
+
+  it('key-less tabs fall back to the pane index for both pane keys and the active key', () => {
+    const context = buildContext({
+      state: { root: {}, tabs: [{ fields: {} }, { fields: {} }] },
+    });
+    const { container: dom } = render(
+      <TabsContainer container={buildContainer()} renderContext={context} />,
+    );
+    // both panes render and one is active — the fallback chains agree
+    expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(2);
+    expect(dom.querySelectorAll('.ant-tabs-tab-active').length).toBe(1);
+  });
+});

package/v2Components/FormBuilder/_formBuilder.scss

@@ -67,6 +67,14 @@
     margin: auto;
   }
 }
+// Functional MPUSH upload field (values identical to Classic's inline styles).
+.fb-upload-file-input {
+  display: none;
+}
+.fb-upload-placeholder {
+  width: 100%;
+  text-align: center;
+}
 .disabled {
   pointer-events: none;
   border-bottom: 1px solid #C2C2C2 !important;

package/v2Components/FormBuilder/index.js

@@ -6,10 +6,11 @@
  * monolith, frozen) and the new functional implementation (./Functional)
  * based on the per-channel, per-org feature flag.
  *
- * Phase 1 migrates SMS only, behind `ENABLE_NEW_FORMBUILDER_SMS`. The new path
- * is taken ONLY when (a) the org has that flag AND (b) this FormBuilder instance
- * is rendering the SMS channel. Every other channel — and every org without the
- * flag — keeps using Classic with byte-identical behavior. The flag defaults
+ * Phase 1 migrated SMS behind `ENABLE_NEW_FORMBUILDER_SMS`; Phase 2 migrates
+ * MOBILEPUSH behind `ENABLE_NEW_FORMBUILDER_MPUSH`. The new path is taken ONLY
+ * when (a) the org has that channel's flag AND (b) this FormBuilder instance is
+ * rendering that channel. Every other channel — and every org without the
+ * flag — keeps using Classic with byte-identical behavior. The flags default
  * OFF, so until rollout this gate always renders Classic.
  *
  * This component is a pure pass-through: no defaultProps, no prop mapping, no
@@ -21,24 +22,45 @@
 import React, { useState } from 'react';
 import ClassicFormBuilder from './Classic';
 import FunctionalFormBuilder from './Functional';
-import { hasNewFormBuilderEnabledForSms } from '../../utils/common';
-import { SMS } from '../../v2Containers/CreativesContainer/constants';
+import {
+  hasNewFormBuilderEnabledForSms,
+  hasNewFormBuilderEnabledForMpush,
+} from '../../utils/common';
+import { SMS, MOBILE_PUSH } from '../../v2Containers/CreativesContainer/constants';
+
+// Session-level QA override / kill switch (see "Feature Flag Rollout Strategy" in
+// the design docs): a localStorage key named after the flag ('true'/'false')
+// beats the org flag for THIS browser session only. Lets QA exercise the new
+// path before org provisioning, and support disable it for a single affected
+// user without a config change. Any storage failure falls back to the org flag.
+const readChannelFlag = (orgFlagReader, flagName) => {
+  try {
+    const override = window.localStorage.getItem(flagName);
+    if (override === 'true') return true;
+    if (override === 'false') return false;
+  } catch (e) { /* storage unavailable -> org flag */ }
+  return Boolean(orgFlagReader());
+};
 
 const FormBuilder = (props) => {
   // The try/catch guards the early bootstrap / test case where window.capAuth is not yet initialized — any failure routes safely to Classic.
-  const [isSmsNewBuilderOrg] = useState(() => {
+  const [newBuilderFlags] = useState(() => {
     try {
-      console.log('### ENABLE_NEW_FORMBUILDER_SMS enabled for org:', hasNewFormBuilderEnabledForSms());
-      return Boolean(hasNewFormBuilderEnabledForSms());
+      const flags = {
+        [SMS]: readChannelFlag(hasNewFormBuilderEnabledForSms, 'ENABLE_NEW_FORMBUILDER_SMS'),
+        [MOBILE_PUSH]: readChannelFlag(hasNewFormBuilderEnabledForMpush, 'ENABLE_NEW_FORMBUILDER_MPUSH'),
+      };
+      console.log('### FormBuilder V3 per-channel flags for org:', flags);
+      return flags;
     } catch (e) {
-      return false;
+      return {};
     }
   });
 
+  // Derived every render: the schema (and therefore the channel) arrives asynchronously.
   const channel = (props?.channel || props.schema?.channel)?.toUpperCase();
 
-  const useNewFormBuilder = isSmsNewBuilderOrg && channel === SMS;
-  return useNewFormBuilder ? (
+  return newBuilderFlags[channel] ? (
     <FunctionalFormBuilder {...props} />
   ) : (
     <ClassicFormBuilder {...props} />