@capillarytech/creatives-library 9.0.61 → 9.0.63-alpha.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,19 +63,26 @@ 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({});
-  // 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);
+  // 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
   const stateRef = useRef(state);
@@ -80,6 +92,18 @@ const FormBuilderShell = (props) => {
   const lastEmittedRef = useRef(null);
   const didInitRef = useRef(false);
   const prevStartValidationRef = useRef(startValidation);
+  const prevSchemaRef = useRef(null);
+  // Deep snapshot of the last processed parent formData — containers mutate it in
+  // place (copy-content, tag insertion), so pushes are deep-compared, not ref-keyed.
+  const lastSeenParentRef = useRef(null);
+  // android/ios validity from the last save-validation (single-platform modal contract).
+  const platformRef = useRef(null);
+  // Content snapshot of the tags prop (containers rebuild the array each render).
+  const lastTagsRef = useRef(null);
+  const lastNextStateRef = useRef(null);
+  // GOLDEN parity: Classic emits tabCount starting at 1, mirroring the prop only
+  // on a parent formData sync — the create flow emits 1 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,57 +115,82 @@ 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
-  // {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
+  // 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 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, {
       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(
@@ -150,31 +199,139 @@ const FormBuilderShell = (props) => {
   );
   useEffect(() => () => debouncedEmit.cancel(), [debouncedEmit]);
 
+  // Classic pushes formData up on init and on every schema re-init (Classic.js:1906-1911 ->
+  // 740-748); the MPUSH copy-content handlers read that copy. MPUSH-only, SMS unchanged.
+  const emitFormDataOnSchemaSync = Boolean(adapter.config?.features?.emitFormDataOnSchemaSync);
+
   // ---- 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);
+      if (emitFormDataOnSchemaSync) emitChange(legacy); // seed the container's formData copy
+
     }
   }, [schemaReady]);
 
-  // ---- re-hydrate on a GENUINE external parent push (edit load / discard) ----
+  // 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 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);
+
+  // ---- 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;
+    }
+    // Classic re-emits onChange after a schema-change re-init (Classic.js:1908-1909).
+    if (emitFormDataOnSchemaSync) pendingEmitChangeRef.current = true;
+  }, [schema]);
+
+  // ---- re-hydrate on a GENUINE external parent push (edit load / discard / copy) ----
+  // 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
+    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 })));
+    if (!isEcho) {
+      dispatch(hydrate(fromLegacy(parentFormData, { channel })));
+      // Classic mirrors the tabCount prop on a data sync only in EDIT mode (Classic.js:446-447);
+      // adopting the create flow's hardcoded 2 makes the emptiness check scan the empty iOS tab.
+      if (propsRef.current.isEdit) {
+        emittedTabCountRef.current = propsRef.current.tabCount || emittedTabCountRef.current;
+      }
+      // Classic validates on every deep-unequal parent push (Classic.js:516-537).
+      if (validateOnExternalChange) {
+        pendingBackgroundValidateRef.current = true;
+      }
+    }
   }, [parentFormData]);
 
-  // Submit a form that passed sync validation (mirrors Classic onSubmitWrapper).
-  // 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) => {
+  // ---- background validity / formData emission from the SETTLED state (see flags above) ----
+  useEffect(() => {
+    if (!didInitRef.current || (!pendingBackgroundValidateRef.current && !pendingEmitChangeRef.current)) return;
+    const legacy = toLegacy(state);
+    if (pendingBackgroundValidateRef.current) {
+      pendingBackgroundValidateRef.current = false;
+      emitValidity(runValidate(legacy), legacy);
+    }
+    if (pendingEmitChangeRef.current) {
+      pendingEmitChangeRef.current = false;
+      emitChange(legacy);
+    }
+  }, [state]);
+
+  // ---- 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;
+    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 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;
+
+    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') {
@@ -191,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: () => {
@@ -201,41 +357,50 @@ 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.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 {
+        emitValidity(result, legacy);
+        if (result.isValid) {
+          submitValidForm(legacy, result.errorData);
+        } else if (propsRef.current.stopValidation) {
+          propsRef.current.stopValidation();
+        }
       }
     }
     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;
-    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,19 +410,22 @@ 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;
-    if (validationActive || validateLive) {
+    // 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;
+    // MPUSH: Classic re-validates every change via the container round-trip (Classic.js:516-537)
+    // — keeps the container's isFormValid current for the library Done gate; display stays gated.
+    if (validationActive || validateLive || validateOnExternalChange) {
       emitValidity(runValidate(legacy), legacy);
     }
   };
 
-  // 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();
@@ -265,32 +433,93 @@ const FormBuilderShell = (props) => {
     emitValidity(runValidate(legacy), legacy);
   };
 
-  // ---- parent bridge: invoke container-injected handlers (Stage A compat) ----
+  // ---- 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 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;
+      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: 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}`);
+    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).
   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),
-    activeTabIndex: ACTIVE_TAB_INDEX,
-    currentTab: 1,
+    // Upload is the one renderer that also honors startValidation for display (Classic.js:3663).
+    startValidation: Boolean(startValidation),
+    activeTabIndex,
+    currentTab,
+    tabCount,
     onFieldChange: stableOnFieldChange,
     onFieldBlur: stableOnFieldBlur,
     onEvent: stableOnEvent,
+    onTabSwitch,
     resolvedFieldErrors,
     legacyFormData: toLegacy(state),
     channel,
@@ -308,15 +537,33 @@ 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) : '';
 
+  // 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}
+      width={520}
+      title={modal.title || ''}
+      onCancel={handleModalCancel}
+      footer={[
+        <CapButton key="back" onClick={handleModalCancel}>{intl.formatMessage(formMessages.cancel)}</CapButton>,
+        <CapButton key="submit" type="primary" id={modal.id} onClick={handleModalOk}>
+          {intl.formatMessage(formMessages.yes)}
+        </CapButton>,
+      ]}
+    >
+      {modal.body || ''}
+    </CapModal>
+  );
+
   return (
     <CapSpin spinning={spinning} tip={spinTip}>
       <SchemaForm schema={schema} renderContext={renderContext} />
+      {confirmModal}
     </CapSpin>
   );
 };
@@ -340,6 +587,7 @@ FormBuilderShell.propTypes = {
   tagModule: PropTypes.string,
   tags: PropTypes.array,
   checkValidation: PropTypes.bool,
+  isEdit: PropTypes.bool,
   injectedTags: PropTypes.object,
   onContextChange: PropTypes.func,
   // Shapes match TagList's own contract (array of offer objects / keyed-by-blockId map).
@@ -348,6 +596,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 +613,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;