@capillarytech/creatives-library 9.0.57-alpha.4 → 9.0.57-alpha.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.57-alpha.4",
+  "version": "9.0.57-alpha.6",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -78,14 +78,10 @@ const FormBuilderShell = (props) => {
 
   const [state, dispatch] = useReducer(formReducer, channel, createInitialState);
   const [errorData, setErrorData] = useState({});
-  // Field error MESSAGES are hidden until the user triggers validation (clicks
-  // Save / "Done"), matching the class component's `checkValidation` gate. errorData
-  // is still computed + emitted via onFormValidityChange on mount; only the inline
-  // display is gated. Can also be driven by the container's checkValidation prop.
+  // Error DISPLAY is gated until a save attempt (Classic's checkValidation);
+  // errorData itself is still computed and emitted in the background.
   const [internalCheckValidation, setInternalCheckValidation] = useState(false);
-  // Container-driven confirmation modal (MOBILEPUSH single-platform save). The
-  // container owns the content (setModalContent -> showModal/modal props); the
-  // shell owns visibility after a click, mirroring Classic's local showModal state.
+  // Single-platform save modal: container owns content, shell owns visibility (Classic parity).
   const [modalVisible, setModalVisible] = useState(false);
 
   // refs to latest values for use inside stable/debounced callbacks
@@ -135,9 +131,7 @@ const FormBuilderShell = (props) => {
     ...extra,
   });
 
-  // Footer state (mirrors Classic's `liquidErrorMessage`). Holds the last
-  // {STANDARD_ERROR_MSG, LIQUID_ERROR_MSG} so standard- and liquid-error pushes don't
-  // clobber each other before forwarding to the container's showLiquidErrorInFooter.
+  // Classic's liquidErrorMessage: keeps STANDARD/LIQUID footer errors from clobbering each other.
   const footerRef = useRef({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
   const liquidEnabled = Boolean(adapter.config?.features?.liquid);
   // Classic passes null as the footer's tab argument for SMS and the live 1-based
@@ -153,11 +147,8 @@ const FormBuilderShell = (props) => {
     }
   };
 
-  // Footer-eligible body message for `legacy`, or [] when none. Full mode shows
-  // errors inline instead, so the footer is suppressed there; library mode keeps
-  // the old flow (message goes to the footer). The extended ctx (errorData,
-  // currentTab, schema, checkValidation) feeds the MPUSH footer echo — the SMS
-  // descriptor derives everything from `legacy` and ignores the extras.
+  // Footer body message for `legacy` ([] when none). Full mode shows errors inline,
+  // so the footer is suppressed there; library mode keeps the old footer flow.
   const standardFooterMsg = (legacy, result) => {
     if (isFullMode || !adapter.getEditorErrorDescriptor || !intl) return [];
     const descriptor = adapter.getEditorErrorDescriptor(legacy, {
@@ -233,16 +224,12 @@ const FormBuilderShell = (props) => {
     }
   }, [schemaReady]);
 
-  // Classic's validateForm tail always emits onFormValidityChange (Classic.js:1361)
-  // and runs on every schema change (542-559), deep-unequal parent push (516-537)
-  // and tags change (569-578) — display stays gated. The MPUSH containers gate
-  // their save flows on that maintained validity (Create/index.js:101), so these
-  // background emissions are load-bearing. SMS keeps its shipped behavior.
+  // Classic validates + emits on every schema/parent/tags change (Classic.js:516-578, 1361);
+  // the MPUSH containers gate their save flows on that validity. SMS keeps shipped behavior.
   const validateOnExternalChange = Boolean(adapter.config?.features?.validateOnExternalChange);
 
-  // Background emissions must read the POST-dispatch state (a stateRef snapshot can
-  // be stale mid container-setState-cascade): hydration-family effects only ARM this
-  // flag; the [state]-keyed effect below emits once the new state has rendered.
+  // Background emissions must read POST-dispatch state (stateRef can be stale mid
+  // container-setState-cascade): effects ARM these; the [state] effect below emits.
   const pendingBackgroundValidateRef = useRef(false);
   const pendingEmitChangeRef = useRef(false);
 
@@ -262,9 +249,8 @@ const FormBuilderShell = (props) => {
   }, [schema]);
 
   // ---- re-hydrate on a GENUINE external parent push (edit load / discard / copy) ----
-  // No dependency array on purpose: the parent may mutate the same formData object
-  // in place (MOBILEPUSH copy-content, tag insertion), which a [parentFormData]-keyed
-  // effect would never see. The deep-compare guard keeps this a no-op on quiet renders.
+  // Contract: parent pushes must arrive as NEW references (all containers comply);
+  // the deep-compare guards below are the real gate, mirroring Classic's CWRP (Classic.js:516).
   useEffect(() => {
     if (!didInitRef.current || !isNonEmpty(parentFormData)) return;
     if (isEqual(parentFormData, lastSeenParentRef.current)) return; // nothing new from the parent
@@ -278,13 +264,12 @@ const FormBuilderShell = (props) => {
       if (propsRef.current.isEdit) {
         emittedTabCountRef.current = propsRef.current.tabCount || emittedTabCountRef.current;
       }
-      // Classic validates on every deep-unequal parent push (Classic.js:516-537) —
-      // this is what turns the container's isFormValid true before Create/Done.
+      // Classic validates on every deep-unequal parent push (Classic.js:516-537).
       if (validateOnExternalChange) {
         pendingBackgroundValidateRef.current = true;
       }
     }
-  });
+  }, [parentFormData]);
 
   // ---- background validity / formData emission from the SETTLED state (see flags above) ----
   useEffect(() => {
@@ -300,9 +285,8 @@ const FormBuilderShell = (props) => {
     }
   }, [state]);
 
-  // ---- re-validate when the tag catalog changes (Classic.js:569-578) ----
-  // The containers rebuild the tags array every render (Create/index.js:1928), so
-  // compare by content, not identity. Emits validity only; display stays gated.
+  // ---- re-validate on a tags-catalog change (Classic.js:569-578) — containers rebuild
+  // the array every render, so compare by content; emits validity only, display stays gated ----
   useEffect(() => {
     if (!didInitRef.current || !validateOnExternalChange) return;
     const nextTags = propsRef.current.tags;
@@ -324,11 +308,8 @@ const FormBuilderShell = (props) => {
     setModalVisible(Boolean(showModal));
   }, [showModal, modal]);
 
-  // Submit a form that passed sync validation (mirrors Classic onSubmitWrapper).
-  // Channels with their own pipeline (MOBILEPUSH: validateMobilePushContent) run it
-  // through adapter.runSubmitPipeline; otherwise the default liquid flow applies:
-  // full mode submits directly; outside it, liquid-supported channels run liquid-tag
-  // validation first — a clean result submits, an error goes to the footer and blocks.
+  // Submit after sync validation (Classic onSubmitWrapper): adapter.runSubmitPipeline
+  // when the channel has one, else the default liquid flow (validate outside full mode).
   const submitValidForm = (legacy, validErrorData, { singleTab = null } = {}) => {
     const currentProps = propsRef.current;
 
@@ -367,8 +348,7 @@ const FormBuilderShell = (props) => {
       onError: ({ standardErrors, liquidErrors }) => {
         pushFooter({ STANDARD_ERROR_MSG: standardErrors, LIQUID_ERROR_MSG: liquidErrors });
         if (currentProps.stopValidation) currentProps.stopValidation();
-        // Classic passes the (clean) sync errorData here: the footer carries the
-        // liquid error, not a per-field error.
+        // Classic passes the clean sync errorData: the footer carries the liquid error.
         if (currentProps.onFormValidityChange) currentProps.onFormValidityChange(false, validErrorData);
       },
       onSuccess: () => {
@@ -386,10 +366,8 @@ const FormBuilderShell = (props) => {
       const result = runValidate(legacy, { isSave: true });
       if (result.platform) platformRef.current = result.platform;
       if (result.singlePlatformPrompt) {
-        // Classic parity (Classic.js:1180-1204): the single-platform confirmation
-        // takes over — errorData is stored, the container builds the modal, and
-        // NOTHING else runs: no validity emission, no footer push, no
-        // stopValidation, no submit. The modal is the only continuation.
+        // Classic.js:1180-1204: the single-platform modal takes over — store errorData
+        // and STOP (no validity emission, footer push, stopValidation, or submit).
         setErrorData(result.errorData);
         if (propsRef.current.setModalContent) propsRef.current.setModalContent(result.singlePlatformPrompt);
       } else {
@@ -404,9 +382,8 @@ const FormBuilderShell = (props) => {
     prevStartValidationRef.current = startValidation;
   }, [startValidation]);
 
-  // Inline (below-the-box) message map. The only change vs the old flow: in full mode
-  // the brace error shows inline instead of the footer. Library mode and all other
-  // body errors keep the old placement.
+  // Inline message map: in full mode the brace error shows inline instead of the
+  // footer; library mode and all other body errors keep the old placement.
   const resolvedFieldErrors = useMemo(() => {
     if (!isFullMode) return {}; // library mode: unchanged old flow (footer only)
     const editorId = adapter.config?.fieldIds?.editor;
@@ -447,9 +424,8 @@ const FormBuilderShell = (props) => {
     }
   };
 
-  // Re-validate the high-frequency inputs (template-name/subject) on blur,
-  // unconditionally — mirroring Classic's handleFieldBlur. Flush the debounced
-  // onChange first so the parent has the latest typed value before we validate.
+  // Blur on high-freq inputs re-validates unconditionally (Classic handleFieldBlur);
+  // flush the debounced onChange first so the parent holds the latest value.
   const onFieldBlur = (field) => {
     if (!field || !HIGH_FREQ_FIELDS.includes(field.id)) return;
     debouncedEmit.flush();
@@ -457,21 +433,16 @@ const FormBuilderShell = (props) => {
     emitValidity(runValidate(legacy), legacy);
   };
 
-  // ---- parent bridge: invoke container-injected handlers (Stage A compat) ----
-  // Signatures mirror Classic exactly:
-  //  - onTagSelect          -> (data, currentTab, field)          [Classic.js:2588-2591]
-  //  - data-commit events   -> (true, updatedLegacyFormData, field) [performFormDataUpdate]
-  //    (checkbox submit-actions, radio onChange, select onSelect — MOBILEPUSH only,
-  //     gated on config.features.bridgeFieldEvents so SMS behavior is untouched)
-  //  - everything else      -> (data, field.id)                   [callChildEvent tail]
+  // ---- parent bridge: container-injected handlers, Classic-exact signatures ----
+  // onTagSelect (data, tab, field); data-commit events (true, formData, field) MPUSH-only;
+  // everything else takes callChildEvent's tail (data, field.id).
   const onEvent = (field, eventName, data) => {
     const injected = field.injectedEvents?.[eventName];
     if (typeof injected !== 'function') return;
     const parent = propsRef.current.parent;
     if (eventName === 'discardValues') {
-      // Classic resets its own state on discard (callChildEvent 2617-2625); the
-      // create-flow container then pushes EMPTY formData, which rehydrate ignores —
-      // so the local re-init must happen here.
+      // Classic self-resets on discard (2617-2625); the container's empty push is
+      // ignored by rehydrate, so the local re-init happens here.
       injected.call(parent, data, field.id);
       const fresh = initializeFormState(propsRef.current.schema || {});
       lastEmittedRef.current = null;
@@ -496,9 +467,8 @@ const FormBuilderShell = (props) => {
     }
   };
 
-  // ---- tab switch (from TabsContainer): state dispatch + container bridge ----
-  // Replaces Classic's DOM scan (Classic.js:2526-2551) with the same observable
-  // contract: the container's injected onTabChange receives the 1-based index.
+  // ---- tab switch: replaces Classic's DOM scan (2526-2551) with the same contract —
+  // the container's injected onTabChange receives the 1-based index ----
   const onTabSwitch = (container, key) => {
     const tabs = stateRef.current?.tabs || [];
     let index = tabs.findIndex((tab) => `${tab?.tabKey}` === `${key}`);
@@ -535,15 +505,13 @@ const FormBuilderShell = (props) => {
   // Point the stable wrappers at the latest handler bodies (read at call time).
   handlersRef.current = { onFieldChange, onFieldBlur, onEvent };
 
-  // Render context handed to every field renderer (the `renderContext` prop the
-  // renderers / Section / FieldSlot consume).
+  // Render context consumed by every field renderer / Section / FieldSlot.
   const renderContext = {
     state,
     errorData,
     registry,
     checkValidation: internalCheckValidation || Boolean(checkValidation),
-    // Classic's upload case is the only renderer that ALSO honors startValidation
-    // for error display (Classic.js:3663) — exposed separately for it.
+    // Upload is the one renderer that also honors startValidation for display (Classic.js:3663).
     startValidation: Boolean(startValidation),
     activeTabIndex,
     currentTab,
@@ -569,17 +537,12 @@ const FormBuilderShell = (props) => {
     refs,
   };
 
-  // Loading overlay — mirrors Classic: spin while liquid-tag extraction is in
-  // progress (only for liquid-supported channels) or while the layout metadata
-  // is still being fetched.
+  // Classic's overlay: spin during liquid-tag extraction or while layout metadata loads.
   const spinning = Boolean((liquidEnabled && liquidExtractionInProgress) || metaDataStatus === REQUEST);
   const spinTip = intl?.formatMessage ? intl.formatMessage(formMessages.liquidSpinText) : '';
 
-  // Confirmation modal (Classic getModal 'confirm' variant, Classic.js:597-641).
-  // Only channels that declare modal semantics render it (MOBILEPUSH); the footer's
-  // primary button carries the modal id — that id IS the handleOk dispatch key.
-  // width 520 = the antd Modal default Classic renders (Classic.js:601);
-  // CapModal's own default (324) wraps the single-platform prompt to two lines.
+  // Classic's 'confirm' modal (597-641), MOBILEPUSH only; the primary button's id is the
+  // handleOk dispatch key. width 520 matches Classic's antd default (CapModal's 324 wraps).
   const confirmModal = adapter.modals && modal && (
     <CapModal
       open={modalVisible}

package/v2Components/FormBuilder/Functional/channels/mobilepush/validate.js

@@ -12,7 +12,8 @@ import { DEFAULT as DEFAULT_MODULE, ANDROID, IOS } from '../../../../../constant
 import { TEMPLATE_NAME_FIELD } from '../../constants';
 import { ERROR_VALUE, TABS, CTA_RULES } from './config';
 
-const isTabKey = (key) => /^\d+$/.test(`${key}`);
+const TAB_KEY_REGEX = /^\d+$/;
+const isTabKey = (key) => TAB_KEY_REGEX.test(`${key}`);
 
 // Tab metadata keys skipped when seeding a tab's error map (Classic.js:1627-1656).
 const ERROR_SEED_SKIP_KEYS = ['tabKey', 'base', 'selectedLanguages'];

package/v2Components/FormBuilder/Functional/constants.js

@@ -49,6 +49,9 @@ export const MEMOIZED_TYPES = new Set([
 
 // Fallback active tab for single-tab channels (SMS). Tabbed channels keep the live
 // value in reducer state (meta.activeTabIndex).
+// Image types the MPUSH upload accepts (Classic.js:2746 wrong-file check).
+export const ALLOWED_IMAGE_EXTENSIONS = /(\.bmp|\.jpeg|\.png|\.gif|\.avif|\.jpg)$/i;
+
 export const ACTIVE_TAB_INDEX = 0;
 
 // Injected events called with Classic's performFormDataUpdate signature

package/v2Components/FormBuilder/Functional/layout/TabsContainer.js

@@ -14,8 +14,6 @@ import PropTypes from 'prop-types';
 import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import Section from './Section';
 
-const JAPANESE_LOCALE = 'ja-JP';
-
 const hasTabKey = (key) => key !== undefined && key !== '';
 
 const TabsContainer = ({ container, renderContext }) => {
@@ -23,7 +21,6 @@ const TabsContainer = ({ container, renderContext }) => {
 
   const tabs = renderContext?.state?.tabs || [];
   const activeTabIndex = renderContext?.activeTabIndex ?? 0;
-  const hideHeaders = renderContext?.intl?.locale === JAPANESE_LOCALE;
 
   const renderedPanes = [];
   let supportedOrdinal = 0; // class parity: only supported panes advance the index
@@ -44,9 +41,10 @@ const TabsContainer = ({ container, renderContext }) => {
       // stays cheap through the FieldSlot memo boundaries. Lazy activation is a
       // deliberate post-rollout follow-up (see the MPUSH design doc §9).
       forceRender: true,
+      // The div wrapper + onInput stop are Classic verbatim (Classic.js:4278).
       tab: (
         <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
-          {!hideHeaders && headerSections.map((section, index) => (
+          {headerSections.map((section, index) => (
             <Section key={`hdr-${index}`} section={section} renderContext={paneContext} />
           ))}
         </div>
@@ -67,11 +65,9 @@ const TabsContainer = ({ container, renderContext }) => {
 
   return (
     <CapTab
-      className={`cap-tabs-${container.id}`}
+      className={`cap-tabs-${container.id} fb-tabs-full-width`}
       activeKey={resolvedActiveKey}
-      defaultActiveKey={resolvedActiveKey}
       onChange={(key) => renderContext?.onTabSwitch?.(container, key)}
-      style={{ width: '100%' }}
       panes={renderedPanes}
     />
   );

package/v2Components/FormBuilder/Functional/renderers/mpushRenderers.js

@@ -28,14 +28,12 @@ import formMessages from '../../messages';
 import { isAiContentBotDisabled } from '../../../../utils/common';
 import { hasPersonalizationTags } from '../../../../utils/commonUtils';
 import { createFieldRegistry } from '../core/schema/fieldRegistry';
-import { FIELD_TYPE } from '../constants';
+import { ALLOWED_IMAGE_EXTENSIONS, FIELD_TYPE } from '../constants';
 import { ButtonField, TagListField } from './smsRenderers';
 import { ERROR_VALUE } from '../channels/mobilepush/config';
 
 const { TextArea } = CapInput;
 
-// Image types the upload accepts (Classic.js:2746 wrong-file check).
-const ALLOWED_IMAGE_EXTENSIONS = /(\.bmp|\.jpeg|\.png|\.gif|\.avif|\.jpg)$/i;
 
 const dataFieldPropTypes = {
   field: PropTypes.object.isRequired,
@@ -96,7 +94,7 @@ export const MpushTextAreaField = ({
   field, value, error, onChange, renderContext,
 }) => {
   let aiDisabled = true;
-  try { aiDisabled = isAiContentBotDisabled(); } catch (e) { aiDisabled = true; }
+  try { aiDisabled = isAiContentBotDisabled(); } catch (e) { console.error(e); aiDisabled = true; }
   // Classic-observable behavior: errorData is only ever computed under
   // startValidation (Classic.js:334-345), so NO editor error — empty or tag —
   // is visible before a save attempt. checkValidation is true exactly in the

package/v2Components/FormBuilder/Functional/tests/manual.typingPerf.test.js

@@ -0,0 +1,135 @@
+/**
+ * MANUAL perf probe (skipped by default): per-keystroke JS cost, Classic vs
+ * Functional, over the real embedded Create container. jsdom has no paint, so
+ * this measures the render+effects side of typing lag as an A/B comparison.
+ * Run: RUN_PERF=1 TZ=UTC npx jest --config internals/testing/jest.unit.config.js manual.typingPerf
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { Router } from 'react-router-dom';
+import { render, act, fireEvent } from '../../../../utils/test-utils';
+import history from '../../../../utils/history';
+import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
+import { Create } from '../../../../v2Containers/MobilePush/Create';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
+const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+const intl = { formatMessage: (d) => (d && (d.defaultMessage || d.id)) || '', locale: 'en' };
+const DEEPLINKS = JSON.stringify([{ name: 'Home Page', link: 'app://home', keys: ['user_id'] }]);
+const selectedAccount = {
+  id: 'acc-1', name: 'Acc', sourceTypeName: 'SOME_SDK', sourceAccountIdentifier: 'lic-1',
+  configs: { android: '1', ios: '1', deeplink: DEEPLINKS },
+};
+
+const buildProps = () => ({
+  intl,
+  params: { mode: 'text' },
+  route: { name: 'create' },
+  location: { pathname: '/mobilepush/create/text', query: { module: 'default', type: 'embedded' } },
+  router: { push: jest.fn() },
+  isFullMode: false,
+  isGetFormData: false,
+  isLoadingMetaEntities: false,
+  metaEntities: {},
+  Create: { createTemplateInProgress: false },
+  Edit: {},
+  Templates: { selectedWeChatAccount: selectedAccount },
+  actions: new Proxy({}, { get: (t, n) => { if (!t[n]) t[n] = jest.fn(); return t[n]; } }), // eslint-disable-line no-param-reassign
+  globalActions: { fetchSchemaForEntity: jest.fn(), addMessageToQueue: jest.fn(), setInjectedTags: jest.fn() },
+  getFormLibraryData: jest.fn(),
+  onValidationFail: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  onPersonalizationTokensChange: jest.fn(),
+  onContentValidityChange: jest.fn(),
+  getLiquidTags: jest.fn(),
+  injectedTags: {},
+});
+
+const setNativeValue = (el, value) => {
+  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), 'value').set.call(el, value);
+};
+
+const measureFlow = (flag, { withCta = false, longContent = 0 } = {}) => {
+  mockMpushFlag = flag;
+  const props = buildProps();
+  const ui = (p) => (
+    <Router history={history}>
+      <Create {...p} />
+    </Router>
+  );
+  const utils = render(ui(props));
+  const meta = { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } };
+  act(() => { utils.rerender(ui({ ...props, metaEntities: meta })); });
+
+  if (withCta) {
+    const pane = document.querySelectorAll('.ant-tabs-tabpane')[0] || document;
+    const label = Array.from(pane.querySelectorAll('label')).find((l) => /action link/i.test(l.textContent || ''));
+    const cb = (label && label.querySelector('input[type="checkbox"]')) || pane.querySelector('input[type="checkbox"]');
+    act(() => { fireEvent.click(cb); });
+  }
+
+  const editor = document.getElementById('message-editor');
+  let text = 'The quick brown fox jumped over the lazy dog and kept typing more content ';
+  if (longContent) {
+    // long-message scenario incl. personalization tags — catches superlinear
+    // per-keystroke validation/render costs that short content hides.
+    text = 'Hello {{first_name}}, your offer {{offer_id}} is waiting. '.repeat(Math.ceil(longContent / 58));
+  }
+  // warm-up keystrokes (JIT/styles)
+  for (let i = 0; i < 5; i++) {
+    text += 'w';
+    setNativeValue(editor, text);
+    act(() => { fireEvent.change(editor, { target: { value: text } }); });
+  }
+  const N = 30;
+  const t0 = performance.now();
+  for (let i = 0; i < N; i++) {
+    text += String.fromCharCode(97 + (i % 26));
+    setNativeValue(editor, text);
+    act(() => { fireEvent.change(editor, { target: { value: text } }); });
+  }
+  const perKey = (performance.now() - t0) / N;
+  utils.unmount();
+  mockMpushFlag = false;
+  return perKey;
+};
+
+const describePerf = process.env.RUN_PERF ? describe : describe.skip;
+describePerf('MANUAL typing perf (RUN_PERF=1 to enable)', () => {
+  it('per-keystroke JS cost, Classic vs Functional', () => {
+    const classicPlain = measureFlow(false);
+    const functionalPlain = measureFlow(true);
+    const classicCta = measureFlow(false, { withCta: true });
+    const functionalCta = measureFlow(true, { withCta: true });
+    const classicLong5k = measureFlow(false, { longContent: 5000 });
+    const functionalLong5k = measureFlow(true, { longContent: 5000 });
+    const classicLong20k = measureFlow(false, { longContent: 20000 });
+    const functionalLong20k = measureFlow(true, { longContent: 20000 });
+    // eslint-disable-next-line no-console
+    console.log(JSON.stringify({
+      classicPlain: `${classicPlain.toFixed(1)} ms/key`,
+      functionalPlain: `${functionalPlain.toFixed(1)} ms/key`,
+      classicWithCta: `${classicCta.toFixed(1)} ms/key`,
+      functionalWithCta: `${functionalCta.toFixed(1)} ms/key`,
+      classicLong5k: `${classicLong5k.toFixed(1)} ms/key`,
+      functionalLong5k: `${functionalLong5k.toFixed(1)} ms/key`,
+      classicLong20k: `${classicLong20k.toFixed(1)} ms/key`,
+      functionalLong20k: `${functionalLong20k.toFixed(1)} ms/key`,
+    }, null, 1));
+    expect(true).toBe(true);
+  });
+});

package/v2Components/FormBuilder/Functional/tests/mpush.ctaFlows.parity.test.js

@@ -37,6 +37,13 @@ jest.mock('../../../../services/api', () => ({
   getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
 }));
 
+// The gate is purely org-flag controlled — drive the flow via the flag reader.
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
 const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
 
 const intl = {
@@ -235,10 +242,10 @@ describe.each([
   ['Functional', 'true'],
 ])('CTA flows parity — %s', (flow, flagValue) => {
   beforeEach(() => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', flagValue);
+    mockMpushFlag = flagValue === 'true';
   });
   afterEach(() => {
-    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
+    mockMpushFlag = false;
   });
 
   it('deeplink option WITHOUT params: no extra input, save proceeds', () => {

package/v2Components/FormBuilder/Functional/tests/mpush.editContainer.parity.test.js

@@ -30,6 +30,13 @@ jest.mock('../../../../services/api', () => ({
   getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
 }));
 
+// The gate is purely org-flag controlled — drive the flow via the flag reader.
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
 const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
 
 const intl = {
@@ -122,18 +129,18 @@ const runEditContainer = () => {
 
 describe('SCRATCH v3: REAL Edit container over the gated FormBuilder', () => {
   afterEach(() => {
-    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
+    mockMpushFlag = false;
   });
 
   it('Functional path (flag on) populates the fields', () => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'true');
+    mockMpushFlag = true;
     const r = runEditContainer();
     expect(r.titleValue).toBe('Saved A title');
     expect(r.editorValue).toBe('Saved A body');
   });
 
   it('Classic path (flag off) populates the fields', () => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'false');
+    mockMpushFlag = false;
     const r = runEditContainer();
     expect(r.titleValue).toBe('Saved A title');
     expect(r.editorValue).toBe('Saved A body');

package/v2Components/FormBuilder/Functional/tests/mpush.libraryValidity.parity.test.js

@@ -21,6 +21,13 @@ jest.mock('../../../../services/api', () => ({
   getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
 }));
 
+// The gate is purely org-flag controlled — drive the flow via the flag reader.
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
 const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
 
 const intl = {
@@ -81,12 +88,12 @@ describe.each([
   ['Functional', 'true'],
 ])('library-mode validity parity — %s', (flow, flagValue) => {
   beforeEach(() => {
-    window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', flagValue);
+    mockMpushFlag = flagValue === 'true';
     jest.useFakeTimers();
   });
   afterEach(() => {
     jest.useRealTimers();
-    window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
+    mockMpushFlag = false;
   });
 
   it('isFormValid flips true after typing valid content (Done gate) and content-emptiness reports live', () => {

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

@@ -1,6 +1,6 @@
 /**
  * Unit tests for TabsContainer — pane/key binding, unsupported-pane skipping,
- * header hiding for ja-JP, and the tab-switch bridge.
+ * locale-independent headers, and the tab-switch bridge.
  */
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
@@ -57,12 +57,12 @@ describe('TabsContainer', () => {
     expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(1);
   });
 
-  it('hides the tab-header sections for the ja-JP locale', () => {
+  it('renders the tab-header sections for every locale (Classic has no locale gating)', () => {
     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);
+    expect(queryAllByTestId('stub').length).toBeGreaterThan(0);
   });
 
   it('falls back to container.tabContent.sections when a pane has no sectionsHeaders', () => {

package/v2Components/FormBuilder/_formBuilder.scss

@@ -71,6 +71,9 @@
 .fb-upload-file-input {
   display: none;
 }
+.fb-tabs-full-width {
+  width: 100%;
+}
 .fb-upload-placeholder {
   width: 100%;
   text-align: center;

package/v2Components/FormBuilder/index.js

@@ -28,30 +28,15 @@ import {
 } 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.
+  // One-time org-flag read (API-provisioned via Auth.hasFeatureAccess); the try/catch
+  // guards early bootstrap where window.capAuth is not ready — any failure routes to Classic.
   const [newBuilderFlags] = useState(() => {
     try {
-      const flags = {
-        [SMS]: readChannelFlag(hasNewFormBuilderEnabledForSms, 'ENABLE_NEW_FORMBUILDER_SMS'),
-        [MOBILE_PUSH]: readChannelFlag(hasNewFormBuilderEnabledForMpush, 'ENABLE_NEW_FORMBUILDER_MPUSH'),
+      return {
+        [SMS]: Boolean(hasNewFormBuilderEnabledForSms()),
+        [MOBILE_PUSH]: Boolean(hasNewFormBuilderEnabledForMpush()),
       };
-      console.log('### FormBuilder V3 per-channel flags for org:', flags);
-      return flags;
     } catch (e) {
       return {};
     }

package/v2Components/FormBuilder/tests/entryGate.test.js

@@ -145,29 +145,22 @@ describe('FormBuilder entry gate — routing', () => {
     });
   });
 
-  describe('localStorage session override (QA enabler / kill switch)', () => {
+  describe('the gate is purely org-flag controlled (no localStorage override)', () => {
     afterEach(() => {
       window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_MPUSH');
-      window.localStorage.removeItem('ENABLE_NEW_FORMBUILDER_SMS');
     });
 
-    it("'true' override routes the channel to Functional even with the org flag OFF", () => {
+    it('a localStorage key does NOT enable the new path when the org flag is OFF', () => {
       window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'true');
       renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-functional')).toBeInTheDocument();
+      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
     });
 
-    it("'false' override (kill switch) forces Classic even with the org flag ON", () => {
+    it('a localStorage key does NOT disable the new path when the org flag is ON', () => {
       hasNewFormBuilderEnabledForMpush.mockReturnValue(true);
       window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'false');
       renderGate({ schema: { channel: 'MOBILEPUSH' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
-    });
-
-    it('an override on one channel does not affect the other', () => {
-      window.localStorage.setItem('ENABLE_NEW_FORMBUILDER_MPUSH', 'true');
-      renderGate({ schema: { channel: 'SMS' } });
-      expect(screen.getByTestId('impl-classic')).toBeInTheDocument();
+      expect(screen.getByTestId('impl-functional')).toBeInTheDocument();
     });
   });