@capillarytech/creatives-library 9.0.56-alpha.7 → 9.0.56-betaa.0

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -1,7 +1,8 @@
 /**
- * FormBuilderShell — the functional FormBuilder (Phase 1: SMS). Owns form state in a
- * useReducer, bridges to the legacy formData contract via the codec, and validates
- * through the channel adapter. Stage A keeps the channel containers unchanged.
+ * FormBuilderShell — the functional FormBuilder (Phase 1: SMS; Phase 2: MOBILEPUSH).
+ * Owns form state in a useReducer, bridges to the legacy formData contract via the
+ * codec, and validates/submits through the channel adapter. Stage A keeps the
+ * channel containers unchanged.
  */
 
 import React, {
@@ -10,14 +11,19 @@ import React, {
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapModal from '@capillarytech/cap-ui-library/CapModal';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import formReducer, {
   createInitialState,
   hydrate,
   fieldChanged,
+  setActiveTab,
+  reconcileSchema,
 } from './core/store/formReducer';
 import { toLegacy, fromLegacy } from './core/store/toLegacyFormData';
-import initializeFormState from './core/schema/initializeFormState';
+import initializeFormState, { reconcileFormState } from './core/schema/initializeFormState';
 import { getChannelAdapter } from './channels/registry';
 import { createSmsRegistry } from './renderers/smsRenderers';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
@@ -26,7 +32,9 @@ import { SMS } from '../../../v2Containers/CreativesContainer/constants';
 import { DEFAULT as DEFAULT_MODULE, EMBEDDED } from '../../../constants/unified';
 import formMessages from '../messages';
 import SchemaForm from './layout/SchemaForm';
-import { ACTIVE_TAB_INDEX, EDITOR_ERROR_KIND, HIGH_FREQ_FIELDS } from './constants';
+import {
+  ACTIVE_TAB_INDEX, DATA_COMMIT_EVENTS, DATA_COMMIT_FIELD_TYPES, EDITOR_ERROR_KIND, HIGH_FREQ_FIELDS,
+} from './constants';
 
 const isNonEmpty = (obj) => obj && Object.keys(obj).length > 0;
 
@@ -34,9 +42,6 @@ const buildInitialState = (schema, parentFormData, channel) => (isNonEmpty(paren
   ? fromLegacy(parentFormData, { channel })
   : initializeFormState(schema || {}));
 
-// Phase 1: only SMS has renderers. Later channels return their own registry.
-const registryFor = () => createSmsRegistry();
-
 const FormBuilderShell = (props) => {
   const {
     schema,
@@ -58,11 +63,19 @@ const FormBuilderShell = (props) => {
     waitEventContextTags,
     restrictPersonalization,
     refs,
+    currentTab: currentTabProp,
+    showModal,
+    modal,
   } = props;
 
   const channel = (channelProp || schema?.channel || SMS).toUpperCase();
   const adapter = getChannelAdapter(channel);
-  const registry = useMemo(() => registryFor(), [channel]);
+  // Channels ship their own registry via the adapter; SMS predates the hook and
+  // stays on its original factory.
+  const registry = useMemo(
+    () => (adapter?.createRegistry ? adapter.createRegistry() : createSmsRegistry()),
+    [channel],
+  );
 
   const [state, dispatch] = useReducer(formReducer, channel, createInitialState);
   const [errorData, setErrorData] = useState({});
@@ -71,6 +84,10 @@ const FormBuilderShell = (props) => {
   // is still computed + emitted via onFormValidityChange on mount; only the inline
   // display is gated. Can also be driven by the container's checkValidation prop.
   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.
+  const [modalVisible, setModalVisible] = useState(false);
 
   // refs to latest values for use inside stable/debounced callbacks
   const stateRef = useRef(state);
@@ -80,6 +97,25 @@ const FormBuilderShell = (props) => {
   const lastEmittedRef = useRef(null);
   const didInitRef = useRef(false);
   const prevStartValidationRef = useRef(startValidation);
+  const prevSchemaRef = useRef(null);
+  // Deep snapshot of the last parent formData we processed. The MOBILEPUSH
+  // containers mutate their formData IN PLACE (copy-content, tag insertion), so a
+  // reference-keyed effect would miss genuine pushes — we deep-compare on every
+  // render instead, exactly like Classic's componentWillReceiveProps.
+  const lastSeenParentRef = useRef(null);
+  // Platform validity flags from the last save-validation (MOBILEPUSH android/ios
+  // modal contract): Classic keeps these in state only after a validate pass.
+  const platformRef = useRef(null);
+  // Content snapshot of the tags prop for the tags-change re-validation
+  // (Classic.js:569-578) — containers rebuild the array each render, so identity
+  // is useless. Seeded by the init effect (init already validates with those tags).
+  const lastTagsRef = useRef(null);
+  const lastNextStateRef = useRef(null);
+  // GOLDEN parity (pinned by mpush.characterization): Classic emits
+  // this.state.tabCount in onChange, which starts at 1 and is mirrored from the
+  // tabCount PROP only when hydrating from a parent formData push (edit sync) —
+  // so the MPUSH create flow emits tabCount 1 even though the containers pass 2.
+  const emittedTabCountRef = useRef(1);
 
   // Stable handler identities for the memoized FieldSlot: these wrappers delegate to
   // the latest handler bodies (via a ref), so React.memo can bail out on sibling changes.
@@ -91,11 +127,20 @@ const FormBuilderShell = (props) => {
   const isEmbedded = location?.query?.type === EMBEDDED;
   const currentModule = tagModule || location?.query?.module || DEFAULT_MODULE;
 
-  const runValidate = (legacy) => adapter.validate(legacy, {
+  const activeTabIndex = state?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX;
+  const currentTab = activeTabIndex + 1; // legacy 1-based (MOBILEPUSH: 1=Android, 2=iOS)
+  const tabCount = state?.tabs?.length || 1;
+  const hasTabs = Boolean(adapter?.config?.features?.tabs);
+
+  const runValidate = (legacy, extra = {}) => adapter.validate(legacy, {
     tags: propsRef.current.tags,
     isFullMode,
     isEmbedded,
     currentModule,
+    restrictPersonalization: propsRef.current.restrictPersonalization,
+    currentTab: (stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX) + 1,
+    schema: propsRef.current.schema,
+    ...extra,
   });
 
   // Footer state (mirrors Classic's `liquidErrorMessage`). Holds the last
@@ -103,45 +148,66 @@ const FormBuilderShell = (props) => {
   // clobber each other before forwarding to the container's showLiquidErrorInFooter.
   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
+  // currentTab for every other channel (Classic.js:1352, 1487).
+  const footerTabArg = () => (adapter.config?.footerTabArg === 'currentTab'
+    ? (stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX) + 1
+    : null);
 
   const pushFooter = (next) => {
     footerRef.current = { ...footerRef.current, ...next };
     if (propsRef.current.showLiquidErrorInFooter) {
-      propsRef.current.showLiquidErrorInFooter(
-        footerRef.current,
-        channel === SMS ? null : propsRef.current.currentTab,
-      );
+      propsRef.current.showLiquidErrorInFooter(footerRef.current, footerTabArg());
     }
   };
 
-  // Footer-eligible body message (brace/missing-tag) for `legacy`, or [] when none.
-  // Full mode shows the brace error inline instead, so the footer is suppressed there;
-  // library mode keeps the old flow (message goes to the footer).
-  const standardFooterMsg = (legacy) => {
+  // 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.
+  const standardFooterMsg = (legacy, result) => {
     if (isFullMode || !adapter.getEditorErrorDescriptor || !intl) return [];
     const descriptor = adapter.getEditorErrorDescriptor(legacy, {
       tags: propsRef.current.tags,
       isFullMode,
       currentModule,
+      errorData: result?.errorData,
+      currentTab: (stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX) + 1,
+      schema: propsRef.current.schema,
+      checkValidation: internalCheckValidation
+        || Boolean(propsRef.current.checkValidation)
+        || Boolean(propsRef.current.startValidation),
+      restrictPersonalization: propsRef.current.restrictPersonalization,
     });
-    return descriptor ? [intl.formatMessage(descriptor.message, descriptor.values)] : [];
+    if (!descriptor) return [];
+    if (descriptor.text) return [descriptor.text];
+    return [intl.formatMessage(descriptor.message, descriptor.values)];
   };
 
   const emitValidity = (result, legacy) => {
     setErrorData(result.errorData);
+    if (result.platform) platformRef.current = result.platform;
     if (propsRef.current.onFormValidityChange) {
       propsRef.current.onFormValidityChange(result.isValid, result.errorData);
     }
     // Footer: clear standard errors when the form is valid; otherwise surface the
-    // brace/missing-tag message (empty/generic => none). Liquid errors are preserved.
+    // body-error message (empty/generic gated per channel). Liquid errors are preserved.
     if (liquidEnabled) {
-      pushFooter({ STANDARD_ERROR_MSG: result.isValid ? [] : standardFooterMsg(legacy) });
+      pushFooter({ STANDARD_ERROR_MSG: result.isValid ? [] : standardFooterMsg(legacy, result) });
     }
   };
 
   const emitChange = (legacy, field) => {
     lastEmittedRef.current = legacy;
-    if (propsRef.current.onChange) propsRef.current.onChange(legacy, 1, 1, field);
+    if (propsRef.current.onChange) {
+      propsRef.current.onChange(
+        legacy,
+        emittedTabCountRef.current,
+        (stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX) + 1,
+        field,
+      );
+    }
   };
 
   const debouncedEmit = useMemo(
@@ -151,30 +217,130 @@ const FormBuilderShell = (props) => {
   useEffect(() => () => debouncedEmit.cancel(), [debouncedEmit]);
 
   // ---- initialize once the (possibly async) schema is ready, then validate+emit ----
-  const schemaReady = Boolean(schema?.standalone);
+  const schemaReady = Boolean(schema?.standalone || schema?.containers?.length);
   useEffect(() => {
     if (schemaReady && !didInitRef.current) {
       didInitRef.current = true;
+      prevSchemaRef.current = schema;
       const init = buildInitialState(schema, propsRef.current.formData, channel);
+      if (isNonEmpty(propsRef.current.formData)) {
+        lastSeenParentRef.current = cloneDeep(propsRef.current.formData);
+        // Classic mirrors the tabCount prop only alongside a parent formData sync.
+        emittedTabCountRef.current = propsRef.current.tabCount || init.tabs?.length || 1;
+      }
       dispatch(hydrate(init));
+      lastTagsRef.current = cloneDeep(propsRef.current.tags || null);
       const legacy = toLegacy(init);
       emitValidity(runValidate(legacy), legacy);
     }
   }, [schemaReady]);
 
-  // ---- re-hydrate on a GENUINE external parent push (edit load / discard) ----
+  // 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.
+  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.
+  const pendingBackgroundValidateRef = useRef(false);
+
+  // ---- reconcile on a genuine schema change (CTA splices, text<->image swap) ----
+  // Runs inside the reducer (reconcileSchema) — see the action's note on stale snapshots.
+  useEffect(() => {
+    if (!didInitRef.current || !schema || prevSchemaRef.current === schema) return;
+    prevSchemaRef.current = schema;
+    dispatch(reconcileSchema(schema, reconcileFormState));
+    // Classic re-validates on EVERY schema change (Classic.js:542-559).
+    const validationActive = propsRef.current.startValidation || internalCheckValidation || Boolean(propsRef.current.checkValidation);
+    if (validationActive || validateOnExternalChange) {
+      pendingBackgroundValidateRef.current = true;
+    }
+  }, [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.
   useEffect(() => {
     if (!didInitRef.current || !isNonEmpty(parentFormData)) return;
+    if (isEqual(parentFormData, lastSeenParentRef.current)) return; // nothing new from the parent
+    lastSeenParentRef.current = cloneDeep(parentFormData);
     const current = toLegacy(stateRef.current);
     const isEcho = isEqual(parentFormData, lastEmittedRef.current) || isEqual(parentFormData, current);
-    if (!isEcho) dispatch(hydrate(fromLegacy(parentFormData, { channel })));
-  }, [parentFormData]);
+    if (!isEcho) {
+      dispatch(hydrate(fromLegacy(parentFormData, { channel })));
+      // Classic mirrors the tabCount prop only alongside a parent formData sync.
+      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.
+      if (validateOnExternalChange) {
+        pendingBackgroundValidateRef.current = true;
+      }
+    }
+  });
+
+  // ---- background validity emission from the SETTLED state (see flag above) ----
+  useEffect(() => {
+    if (!didInitRef.current || !pendingBackgroundValidateRef.current) return;
+    pendingBackgroundValidateRef.current = false;
+    const legacy = toLegacy(state);
+    emitValidity(runValidate(legacy), legacy);
+  }, [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.
+  useEffect(() => {
+    if (!didInitRef.current || !validateOnExternalChange) return;
+    const nextTags = propsRef.current.tags;
+    if (!Array.isArray(nextTags) || !nextTags.length) return;
+    if (isEqual(nextTags, lastTagsRef.current)) return;
+    lastTagsRef.current = cloneDeep(nextTags);
+    const legacy = toLegacy(stateRef.current);
+    emitValidity(runValidate(legacy), legacy);
+  });
+
+  // ---- container-driven tab position (MOBILEPUSH: Create forces iOS when Android unsupported) ----
+  useEffect(() => {
+    if (!hasTabs || typeof currentTabProp !== 'number') return;
+    dispatch(setActiveTab(currentTabProp - 1));
+  }, [currentTabProp, hasTabs]);
+
+  // ---- container-driven modal visibility (mirrors Classic's props->state modal sync) ----
+  useEffect(() => {
+    setModalVisible(Boolean(showModal));
+  }, [showModal, modal]);
 
   // Submit a form that passed sync validation (mirrors Classic onSubmitWrapper).
-  // Full mode submits directly; outside it, liquid-supported channels run liquid-tag
+  // 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.
-  const submitValidForm = (legacy, validErrorData) => {
+  const submitValidForm = (legacy, validErrorData, { singleTab = null } = {}) => {
     const currentProps = propsRef.current;
+
+    if (typeof adapter.runSubmitPipeline === 'function') {
+      adapter.runSubmitPipeline(legacy, {
+        isFullMode,
+        singleTab,
+        currentTab: (stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX) + 1,
+        baseLanguage: currentProps.baseLanguage,
+        getLiquidTags: currentProps.actions?.getLiquidTags,
+        formatMessage: currentProps.intl?.formatMessage,
+        messages: formMessages,
+      }, {
+        onSubmit: (payload) => currentProps.onSubmit && currentProps.onSubmit(payload),
+        pushFooter,
+        stopValidation: () => currentProps.stopValidation && currentProps.stopValidation(),
+        onFormValidityChange: (isValid, nextErrorData) => currentProps.onFormValidityChange
+          && currentProps.onFormValidityChange(isValid, nextErrorData !== undefined ? nextErrorData : validErrorData),
+      });
+      return;
+    }
+
     const runLiquid = liquidEnabled && !isFullMode;
     const getLiquidTags = currentProps.actions?.getLiquidTags;
     if (!runLiquid || typeof getLiquidTags !== 'function') {
@@ -201,18 +367,28 @@ const FormBuilderShell = (props) => {
     });
   };
 
-  // ---- startValidation rising edge -> validate, then save or stop ----
+  // ---- startValidation rising edge -> validate, then save / prompt / stop ----
   useEffect(() => {
     if (startValidation && !prevStartValidationRef.current) {
       setInternalCheckValidation(true); // reveal field error messages from now on
       debouncedEmit.flush();
       const legacy = toLegacy(stateRef.current);
-      const result = runValidate(legacy);
-      emitValidity(result, legacy);
-      if (result.isValid) {
-        submitValidForm(legacy, result.errorData);
-      } else if (propsRef.current.stopValidation) {
-        propsRef.current.stopValidation();
+      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.
+        setErrorData(result.errorData);
+        if (propsRef.current.setModalContent) propsRef.current.setModalContent(result.singlePlatformPrompt);
+      } else {
+        emitValidity(result, legacy);
+        if (result.isValid) {
+          submitValidForm(legacy, result.errorData);
+        } else if (propsRef.current.stopValidation) {
+          propsRef.current.stopValidation();
+        }
       }
     }
     prevStartValidationRef.current = startValidation;
@@ -224,18 +400,20 @@ const FormBuilderShell = (props) => {
   const resolvedFieldErrors = useMemo(() => {
     if (!isFullMode) return {}; // library mode: unchanged old flow (footer only)
     const editorId = adapter.config?.fieldIds?.editor;
-    const editorError = editorId && errorData?.[ACTIVE_TAB_INDEX]?.[editorId];
+    const editorError = editorId && errorData?.[activeTabIndex]?.[editorId];
     if (!editorError || !adapter.getEditorErrorDescriptor || !intl) return {};
     const descriptor = adapter.getEditorErrorDescriptor(toLegacy(stateRef.current), { tags, isFullMode, currentModule });
     if (descriptor?.kind !== EDITOR_ERROR_KIND.BRACE) return {};
     return { [editorId]: intl.formatMessage(descriptor.message, descriptor.values) };
-  }, [errorData, intl, isFullMode, currentModule]);
+  }, [errorData, intl, isFullMode, currentModule, activeTabIndex]);
 
   // ---- field change ----
   const onFieldChange = (field, value) => {
-    const tabIndex = field.standalone ? null : ACTIVE_TAB_INDEX;
+    const liveActiveTab = stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX;
+    const tabIndex = field.standalone ? null : liveActiveTab;
     const action = fieldChanged({ fieldId: field.id, value, tabIndex });
     const nextState = formReducer(stateRef.current, action);
+    lastNextStateRef.current = nextState;
     dispatch(action); // immediate UI update on next render
     const legacy = toLegacy(nextState);
 
@@ -245,11 +423,13 @@ const FormBuilderShell = (props) => {
       emitChange(legacy, field);
     }
 
-    // Re-validate on change while errors are being shown, so a revealed error clears
-    // as soon as the field becomes valid. Focus-safe because renderers don't toggle
-    // CapInput's antd suffix (see InputField), so the <input> never remounts.
+    // Re-validate on change while errors are shown, so a revealed error clears as
+    // soon as the field becomes valid.
     const validationActive = propsRef.current.startValidation || internalCheckValidation || Boolean(propsRef.current.checkValidation);
-    const validateLive = liquidEnabled && !isFullMode;
+    // Classic re-validates pre-save typing only under startValidation (Classic.js:334-345);
+    // MPUSH opts out of live validation via features.liveValidation:false, SMS keeps it.
+    const validateLive = liquidEnabled && !isFullMode
+      && adapter.config?.features?.liveValidation !== false;
     if (validationActive || validateLive) {
       emitValidity(runValidate(legacy), legacy);
     }
@@ -266,14 +446,78 @@ const FormBuilderShell = (props) => {
   };
 
   // ---- 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]
   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.
+      injected.call(parent, data, field.id);
+      const fresh = initializeFormState(propsRef.current.schema || {});
+      lastEmittedRef.current = null;
+      lastSeenParentRef.current = null;
+      dispatch(hydrate(fresh));
+      setErrorData({});
+      setInternalCheckValidation(false);
+      const legacy = toLegacy(fresh);
+      emitValidity(runValidate(legacy), legacy);
+      return;
+    }
     if (eventName === 'onTagSelect') {
-      injected.call(propsRef.current.parent, data, 1, field); // Classic signature
+      injected.call(parent, data, (stateRef.current?.meta?.activeTabIndex ?? ACTIVE_TAB_INDEX) + 1, field);
+    } else if (
+      DATA_COMMIT_EVENTS.has(eventName)
+      && DATA_COMMIT_FIELD_TYPES.has(field.type)
+      && adapter.config?.features?.bridgeFieldEvents
+    ) {
+      injected.call(parent, true, toLegacy(lastNextStateRef.current || stateRef.current), field);
     } else {
-      injected.call(propsRef.current.parent, data, field.id); // saveFormData / onClick
+      injected.call(parent, data, field.id); // saveFormData / onClick / onUpload / div onInput / …
+    }
+  };
+
+  // ---- 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.
+  const onTabSwitch = (container, key) => {
+    const tabs = stateRef.current?.tabs || [];
+    let index = tabs.findIndex((tab) => `${tab?.tabKey}` === `${key}`);
+    if (index === -1) {
+      const numeric = Number(key);
+      index = Number.isNaN(numeric) ? 0 : numeric;
     }
+    dispatch(setActiveTab(index));
+    const injected = container?.injectedEvents?.onTabChange;
+    if (typeof injected === 'function') injected.call(propsRef.current.parent, index + 1);
+  };
+
+  // ---- confirmation modal (container-owned content, adapter-owned OK semantics) ----
+  const handleModalOk = (ev) => {
+    // antd v6 wraps button text in a <span>; use currentTarget so the button id resolves.
+    const id = (ev?.currentTarget && ev.currentTarget.id) || ev?.target?.id;
+    setModalVisible(false);
+    if (adapter.modals?.handleOk) {
+      adapter.modals.handleOk(id, {
+        platform: platformRef.current,
+        submitSingleTab: (singleTab) => {
+          const legacy = toLegacy(stateRef.current);
+          submitValidForm(legacy, errorData, { singleTab });
+        },
+      });
+    }
+  };
+
+  const handleModalCancel = () => {
+    setModalVisible(false);
+    if (propsRef.current.handleCancelModal) propsRef.current.handleCancelModal();
   };
 
   // Point the stable wrappers at the latest handler bodies (read at call time).
@@ -286,11 +530,16 @@ const FormBuilderShell = (props) => {
     errorData,
     registry,
     checkValidation: internalCheckValidation || Boolean(checkValidation),
-    activeTabIndex: ACTIVE_TAB_INDEX,
-    currentTab: 1,
+    // Classic's upload case is the only renderer that ALSO honors startValidation
+    // for error display (Classic.js:3663) — exposed separately for it.
+    startValidation: Boolean(startValidation),
+    activeTabIndex,
+    currentTab,
+    tabCount,
     onFieldChange: stableOnFieldChange,
     onFieldBlur: stableOnFieldBlur,
     onEvent: stableOnEvent,
+    onTabSwitch,
     resolvedFieldErrors,
     legacyFormData: toLegacy(state),
     channel,
@@ -314,9 +563,27 @@ const FormBuilderShell = (props) => {
   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.
+  const confirmModal = adapter.modals && modal && (
+    <CapModal
+      visible={modalVisible}
+      title={modal.title || ''}
+      onCancel={handleModalCancel}
+      footer={[
+        <CapButton key="back" onClick={handleModalCancel}>Cancel</CapButton>,
+        <CapButton key="submit" type="primary" id={modal.id} onClick={handleModalOk}>Yes</CapButton>,
+      ]}
+    >
+      {modal.body || ''}
+    </CapModal>
+  );
+
   return (
     <CapSpin spinning={spinning} tip={spinTip}>
       <SchemaForm schema={schema} renderContext={renderContext} />
+      {confirmModal}
     </CapSpin>
   );
 };
@@ -348,6 +615,10 @@ FormBuilderShell.propTypes = {
   waitEventContextTags: PropTypes.object,
   restrictPersonalization: PropTypes.bool,
   refs: PropTypes.object,
+  // Tabbed channels (MOBILEPUSH): container-pushed tab position + confirmation modal.
+  currentTab: PropTypes.number,
+  showModal: PropTypes.bool,
+  modal: PropTypes.object,
 };
 
 FormBuilderShell.defaultProps = {
@@ -361,6 +632,9 @@ FormBuilderShell.defaultProps = {
   waitEventContextTags: {},
   restrictPersonalization: false,
   refs: undefined,
+  currentTab: undefined,
+  showModal: false,
+  modal: null,
 };
 
 export default FormBuilderShell;

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

@@ -0,0 +1,10 @@
+/**
+ * MOBILEPUSH submit payload — identity, exactly like Classic: the container
+ * receives the full legacy formData object and builds the API payload itself
+ * (getTransformedData). Note that getChannelData has NO MOBILEPUSH branch —
+ * Classic short-circuits before reaching it (Classic.js:1402-1405) — so this
+ * adapter must never call it.
+ */
+const buildSubmitPayload = (legacyFormData) => legacyFormData;
+
+export default buildSubmitPayload;

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

@@ -0,0 +1,82 @@
+/**
+ * MOBILEPUSH channel config — declarative capabilities + field ids for the MPUSH
+ * adapter. MOBILEPUSH is a two-tab channel (Android=tab 0, iOS=tab 1); iOS field
+ * ids carry the legacy `2` suffix (message-editor2). The containers mutate the
+ * schema at runtime (CTA row splices), so the engine's reconcile path is active.
+ */
+import { MOBILE_PUSH } from '../../../../../v2Containers/CreativesContainer/constants';
+import { TEMPLATE_NAME_FIELD } from '../../constants';
+
+// The exact legacy error VALUE written for brace mismatches — containers pattern
+// on it (string ≠ boolean true matters: Classic's cross-tab toast reacts only to
+// boolean true). Mirrors errorMessageForTags.TAG_BRACKET_COUNT_MISMATCH_ERROR.
+export const ERROR_VALUE = {
+  BRACKET: 'tagBracketCountMismatchError',
+};
+
+// Legacy tab semantics: 1-based currentTab, 1=Android, 2=iOS (Classic.js:483-486).
+export const TABS = {
+  ANDROID: 0,
+  IOS: 1,
+  /** iOS field ids get suffix '2'; Android none (Classic.js:967). */
+  suffixFor: (tabIndex) => (tabIndex > 0 ? `${Number(tabIndex) + 1}` : ''),
+};
+
+export const fieldIds = {
+  name: TEMPLATE_NAME_FIELD, // root field
+  editor: 'message-editor', // per-tab, suffixed on iOS
+  title: 'message-title', // per-tab, suffixed on iOS
+  image: 'image', // per-tab (imageSchema only), same id on both panes
+  bracketError: 'bracket-error',
+};
+
+// The 13 fixed CTA/deeplink rules of Classic's validateForm MPUSH block
+// (Classic.js:1037-1135), in source order. kind: 'empty' => `=== ""` fails
+// (absent key passes); kind: 'url' => isValidExternalLink semantics.
+export const CTA_RULES = [
+  { key: 'cta-deeplink-select', kind: 'empty' },
+  { key: 'cta-deeplink2-select', kind: 'empty' },
+  { key: 'cta-deeplink-text', kind: 'url' },
+  { key: 'cta-deeplink2-text', kind: 'url' },
+  { key: 'secondary-cta-0-link', kind: 'empty' },
+  { key: 'secondary-cta-0-label', kind: 'empty' },
+  { key: 'cta-deeplink-secondary-cta-0-text', kind: 'url' },
+  { key: 'cta-deeplink-secondary-cta-0-select', kind: 'empty' },
+  { key: 'secondary-cta-1-label', kind: 'empty' },
+  { key: 'cta-deeplink-secondary-cta-1-text', kind: 'url' },
+  { key: 'cta-deeplink-secondary-cta-1-select', kind: 'empty' },
+  { key: 'cta-deeplink-secondary-cta-1-text2', kind: 'url' },
+  { key: 'cta-deeplink-secondary-cta-1-select2', kind: 'empty' },
+];
+
+export default {
+  channel: MOBILE_PUSH,
+  fieldIds,
+  // Classic passes the live 1-based currentTab as showLiquidErrorInFooter's second
+  // argument for MPUSH (Classic.js:1352, 1487); SMS is the only null channel.
+  footerTabArg: 'currentTab',
+  features: {
+    tabs: true,
+    versions: false,
+    languages: false,
+    unicode: false,
+    liquid: true, // LIQUID_SUPPORTED_CHANNELS member; pipeline runs only outside isFullMode
+    askAira: true, // textarea only (Classic.js:2927)
+    preview: true,
+    imageUpload: true,
+    cta: true,
+    // Bridge checkbox/radio/select commit events to the container-injected handlers
+    // with the performFormDataUpdate signature (true, formData, field). MPUSH-only.
+    bridgeFieldEvents: true,
+    // MPUSH keeps the inline textarea error even though liquid is supported
+    // (Classic.js:2908-2915) — encoded in the MPUSH renderers.
+    inlineErrorWithLiquid: true,
+    // Classic re-validates typing only under startValidation (Classic.js:334-345):
+    // no pre-save errorData, so no tag/footer message before a save attempt.
+    liveValidation: false,
+    // Validity is still maintained in the background (Classic validates + emits on
+    // parent pushes / schema changes / tags changes, Classic.js:516-578, 1361) —
+    // the containers gate their save flows on it (Create/index.js:101).
+    validateOnExternalChange: true,
+  },
+};