@capillarytech/creatives-library 9.0.12 → 9.0.13-alpha.0

package/v2Components/FormBuilder/Functional/tests/sms.shell.parity.test.js

@@ -0,0 +1,329 @@
+/**
+ * SMS Shell PARITY tests — the same behavioral contracts the PR0 characterization
+ * suite pins against the Classic monolith, asserted here against the NEW functional
+ * Shell. These two suites together are the Stage A gate: the Shell must reproduce
+ * Classic's SMS behavior (render, onChange shape, validation, save flow, parent
+ * bridge, edit hydration) exactly.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { render, screen, fireEvent, act } from '../../../../utils/test-utils';
+import { response as smsSchemaResponse } from '../../../../v2Containers/Sms/initialSchema';
+
+// TagList (rendered for the tag-list field) is an auth-guarded container; neutralize
+// the route guard the same way the container tests do.
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+
+// eslint-disable-next-line import/first
+import FunctionalFormBuilder from '../index';
+
+// Attach capture handlers onto the schema nodes, exactly as the container's
+// injectEvents step does (records args + `this` binding for the parent bridge).
+const injectHandlers = (schema) => {
+  const registry = {};
+  const attach = (field) => {
+    if (!field || !field.id || !field.supportedEvents) return;
+    field.injectedEvents = {};
+    field.supportedEvents.forEach((event) => {
+      const record = { calls: [], contexts: [] };
+      registry[`${field.id}:${event}`] = record;
+      field.injectedEvents[event] = function capture(...args) {
+        record.calls.push(args);
+        record.contexts.push(this);
+      };
+    });
+  };
+  const walk = (section) => {
+    if (!section) return;
+    if (section.type === 'parent') (section.childSections || []).forEach(walk);
+    else if (section.type === 'multicols') {
+      (section.inputFields || []).forEach((r) => (r.cols || []).forEach(attach));
+      (section.actionFields || []).forEach((r) => (r.cols || []).forEach(attach));
+    } else if (section.type === 'col-label') {
+      (section.inputFields || []).forEach(attach);
+      (section.actionFields || []).forEach(attach);
+    }
+  };
+  ((schema.standalone && schema.standalone.sections) || []).forEach(walk);
+  return registry;
+};
+
+const buildSmsSchema = () => {
+  const schema = _.cloneDeep(smsSchemaResponse.metaEntities[0].definition);
+  const registry = injectHandlers(schema);
+  return { schema, registry };
+};
+
+const buildProps = (overrides = {}) => ({
+  formData: {},
+  channel: 'SMS',
+  location: { pathname: '/sms/create', query: { type: false, module: 'default' } },
+  usingTabContainer: true,
+  isFullMode: true,
+  isEdit: false,
+  startValidation: false,
+  checkValidation: false,
+  currentTab: 1,
+  tabCount: 1,
+  tags: [],
+  injectedTags: {},
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  onFormValidityChange: jest.fn(),
+  stopValidation: jest.fn(),
+  ...overrides,
+});
+
+const renderShell = (props) => {
+  const utils = render(<FunctionalFormBuilder {...props} />);
+  return { ...utils, rerenderWith: (next) => utils.rerender(<FunctionalFormBuilder {...next} />) };
+};
+
+const lastCall = (fn) => fn.mock.calls[fn.mock.calls.length - 1];
+
+describe('SMS Shell parity — rendering', () => {
+  it('renders every active SMS field with the same labels/placeholders as Classic', () => {
+    const { schema } = buildSmsSchema();
+    renderShell(buildProps({ schema }));
+    expect(screen.getByPlaceholderText('Enter template name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Please input sms template content.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Allow Unicode characters')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Preview and Test')).toBeInTheDocument();
+  });
+});
+
+describe('SMS Shell parity — mount validity', () => {
+  it('emits onFormValidityChange(false, errorData) with template-name flagged at ROOT and sms-editor under tab 0', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    renderShell(props);
+    expect(props.onFormValidityChange).toHaveBeenCalled();
+    const [isValid, errorData] = lastCall(props.onFormValidityChange);
+    expect(isValid).toBe(false);
+    expect(errorData['template-name']).toBe(true);
+    expect(errorData[0]['sms-editor']).toBeTruthy();
+  });
+});
+
+describe('SMS Shell parity — onChange contract', () => {
+  it('typing in sms-editor writes formData[0] + mirrors base, emits onChange(formData, tabCount, currentTab, fieldSchema)', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    renderShell(props);
+
+    fireEvent.change(screen.getByPlaceholderText('Please input sms template content.'), {
+      target: { value: 'hello world' },
+    });
+
+    expect(props.onChange).toHaveBeenCalled();
+    const [formData, tabCount, currentTab, fieldSchema] = lastCall(props.onChange);
+    expect(tabCount).toBe(1);
+    expect(currentTab).toBe(1);
+    expect(fieldSchema.id).toBe('sms-editor');
+    expect(formData[0]['sms-editor']).toBe('hello world');
+    expect(formData[0].base).toBe(true);
+    expect(formData.base['sms-editor']).toBe('hello world');
+    expect(formData[0]['unicode-validity']).toBe(false);
+  });
+
+  it('template-name is high-frequency: DOM updates immediately, onChange debounced (~300ms), written at ROOT', () => {
+    jest.useFakeTimers();
+    try {
+      const { schema } = buildSmsSchema();
+      const props = buildProps({ schema });
+      renderShell(props);
+      props.onChange.mockClear();
+
+      const nameInput = screen.getByPlaceholderText('Enter template name');
+      fireEvent.change(nameInput, { target: { value: 'My SMS' } });
+
+      expect(nameInput).toHaveValue('My SMS');
+      expect(props.onChange).not.toHaveBeenCalled();
+
+      act(() => {
+        jest.advanceTimersByTime(350);
+      });
+
+      expect(props.onChange).toHaveBeenCalled();
+      expect(lastCall(props.onChange)[0]['template-name']).toBe('My SMS');
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});
+
+describe('SMS Shell parity — validation & save (startValidation rising edge)', () => {
+  const typeNameAndContent = (content) => {
+    jest.useFakeTimers();
+    fireEvent.change(screen.getByPlaceholderText('Enter template name'), { target: { value: 'My SMS' } });
+    act(() => {
+      jest.advanceTimersByTime(350);
+    });
+    jest.useRealTimers();
+    fireEvent.change(screen.getByPlaceholderText('Please input sms template content.'), { target: { value: content } });
+  };
+
+  it('unicode content + checkbox OFF blocks save: invalid, unicode error, stopValidation, no onSubmit', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+
+    typeNameAndContent('नमस्ते');
+    rerenderWith({ ...props, startValidation: true });
+
+    const [isValid, errorData] = lastCall(props.onFormValidityChange);
+    expect(isValid).toBe(false);
+    expect(errorData[0]['unicode-validity']).toBe(true);
+    expect(props.stopValidation).toHaveBeenCalled();
+    expect(props.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('unicode content + checkbox ON is valid and submits (isFullMode skips liquid)', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+
+    typeNameAndContent('नमस्ते');
+    fireEvent.click(screen.getByLabelText('Allow Unicode characters'));
+    rerenderWith({ ...props, startValidation: true });
+
+    const [isValid] = lastCall(props.onFormValidityChange);
+    expect(isValid).toBe(true);
+    expect(props.onSubmit).toHaveBeenCalledTimes(1);
+    const [submitted] = lastCall(props.onSubmit);
+    expect(submitted['template-name']).toBe('My SMS');
+    expect(submitted[0]['sms-editor']).toBe('नमस्ते');
+    expect(submitted[0]['unicode-validity']).toBe(true);
+  });
+
+  it('plain ASCII content with a name is valid and submits', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+
+    typeNameAndContent('hello world');
+    rerenderWith({ ...props, startValidation: true });
+
+    expect(lastCall(props.onFormValidityChange)[0]).toBe(true);
+    expect(props.onSubmit).toHaveBeenCalledTimes(1);
+    expect(lastCall(props.onSubmit)[0][0]['sms-editor']).toBe('hello world');
+  });
+});
+
+describe('SMS Shell parity — error display gating (checkValidation)', () => {
+  it('does NOT show the template-name error on mount (create) — matches Classic', () => {
+    const { schema } = buildSmsSchema();
+    renderShell(buildProps({ schema }));
+    // invalid on mount, but the message must not be displayed until Save
+    expect(screen.queryByText('Template name cannot be empty.')).toBeNull();
+  });
+
+  it('does NOT show errors on edit-load of an existing template', () => {
+    const { schema } = buildSmsSchema();
+    const tab0 = { 'sms-editor': 'Body', 'unicode-validity': false, base: true, tabKey: 'k1' };
+    renderShell(buildProps({ schema, isEdit: true, formData: { 'template-name': 'Name', 0: tab0, base: tab0 } }));
+    expect(screen.queryByText('Template name cannot be empty.')).toBeNull();
+  });
+
+  it('reveals the template-name error after validation is triggered (Save)', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+    rerenderWith({ ...props, startValidation: true }); // empty name -> reveal error
+    expect(screen.getByText('Template name cannot be empty.')).toBeInTheDocument();
+  });
+
+  it('reveals the template-name error after Save and CLEARS it live as the user types a valid name (no blur needed)', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+
+    // Save with an empty name -> error revealed.
+    rerenderWith({ ...props, startValidation: true });
+    expect(screen.getByText('Template name cannot be empty.')).toBeInTheDocument();
+
+    // The container resets startValidation after the failed save (stopValidation).
+    rerenderWith({ ...props, startValidation: false });
+
+    // Typing a valid name re-validates while validation is active and clears the
+    // error immediately — no blur required. (The input has no antd suffix, so this
+    // toggle does not remount it; focus is retained in the browser.)
+    const nameInput = screen.getByPlaceholderText('Enter template name');
+    fireEvent.change(nameInput, { target: { value: 'My SMS' } });
+    expect(nameInput).toHaveValue('My SMS');
+    expect(screen.queryByText('Template name cannot be empty.')).toBeNull();
+  });
+
+  it('does not feed errorMessage into CapInput (no antd suffix -> no remount-on-toggle); border via status', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+    rerenderWith({ ...props, startValidation: true });
+
+    // The message is rendered in the cap-ui label error span, not as an input suffix.
+    const message = screen.getByText('Template name cannot be empty.');
+    expect(message).toHaveClass('component-with-label-error-message');
+  });
+
+  it('empty SMS body after Save shows the red border ONLY — no inline message (matches Classic)', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    const { rerenderWith } = renderShell(props);
+    rerenderWith({ ...props, startValidation: true });
+    // template-name (a plain input) shows its inline error.
+    expect(screen.getByText('Template name cannot be empty.')).toBeInTheDocument();
+    // The SMS body shows the error BORDER only — Classic never shows a message for
+    // an empty/generic body (neither inline nor footer). The generic body text and
+    // the schema's raw string must NOT appear.
+    expect(screen.queryByText('Please check the message content for unsupported/missing tags')).toBeNull();
+    expect(screen.queryByText('Template content has unsupported/missing tags!')).toBeNull();
+    const textarea = screen.getByPlaceholderText('Please input sms template content.');
+    expect(textarea.closest('.error-form-builder')).not.toBeNull();
+  });
+});
+
+describe('SMS Shell parity — parent bridge', () => {
+  it('clicking Save invokes the injected saveFormData handler with `this`=parent and val.id as 2nd arg', () => {
+    const { schema, registry } = buildSmsSchema();
+    const parentSentinel = { iAmTheContainer: true };
+    renderShell(buildProps({ schema, parent: parentSentinel }));
+
+    fireEvent.click(screen.getByText('Save'));
+
+    const record = registry['save-button:saveFormData'];
+    expect(record.calls).toHaveLength(1);
+    expect(record.calls[0][1]).toBe('save-button');
+    expect(record.contexts[0]).toBe(parentSentinel);
+  });
+
+  it('blurring the template-name (a high-frequency field) re-validates — mirrors Classic handleFieldBlur', () => {
+    const { schema } = buildSmsSchema();
+    const props = buildProps({ schema });
+    renderShell(props);
+    const nameInput = screen.getByPlaceholderText('Enter template name');
+    fireEvent.change(nameInput, { target: { value: 'My SMS' } });
+    props.onFormValidityChange.mockClear();
+    fireEvent.blur(nameInput);
+    // onFieldBlur flushes + re-validates -> emits a fresh validity result
+    expect(props.onFormValidityChange).toHaveBeenCalled();
+  });
+});
+
+describe('SMS Shell parity — edit hydration', () => {
+  it('renders saved template data passed via the formData prop', () => {
+    const { schema } = buildSmsSchema();
+    const tab0 = { 'sms-editor': 'Existing body', 'unicode-validity': false, base: true, tabKey: 'k1' };
+    renderShell(buildProps({
+      schema,
+      isEdit: true,
+      formData: { 'template-name': 'Existing name', 0: tab0, base: tab0 },
+    }));
+    expect(screen.getByPlaceholderText('Enter template name')).toHaveValue('Existing name');
+    expect(screen.getByPlaceholderText('Please input sms template content.')).toHaveValue('Existing body');
+  });
+});

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

@@ -0,0 +1,162 @@
+/**
+ * Unit tests for the SMS field renderers. Each renderer is invoked as a plain
+ * function and its returned element tree is inspected — this exercises the
+ * conditional branches (showError, senderId, embedded filter, submit-button
+ * guard, refs) without mounting the heavy UnifiedPreview / TagList subtrees.
+ */
+import {
+  InputField, TextAreaField, CheckboxField, ButtonField, TagListField, SmsPreviewField, DivField,
+} from '../renderers/smsRenderers';
+import { isAiContentBotDisabled } from '../../../../utils/common';
+
+jest.mock('../../../../utils/common', () => ({ isAiContentBotDisabled: jest.fn(() => true) }));
+
+// CapColumn children: either a single element or an array — normalize to an array.
+const kids = (el) => {
+  const c = el.props.children;
+  return Array.isArray(c) ? c.filter(Boolean) : [c].filter(Boolean);
+};
+
+describe('InputField', () => {
+  const field = {
+    id: 'template-name', type: 'input', width: 18, errorMessage: 'Name required',
+  };
+
+  it('shows the error span + status=error when validation triggered and error present', () => {
+    const el = InputField({
+      field, value: '', error: true, onChange: () => {}, onBlur: () => {}, renderContext: { checkValidation: true },
+    });
+    const [input, span] = kids(el);
+    expect(input.props.status).toBe('error');
+    expect(span.props.children).toBe('Name required');
+  });
+
+  it('no error span when validation not triggered', () => {
+    const el = InputField({
+      field, value: 'x', error: true, onChange: () => {}, onBlur: () => {}, renderContext: { checkValidation: false },
+    });
+    const [input, span] = kids(el);
+    expect(input.props.status).toBeUndefined();
+    expect(span).toBeUndefined();
+  });
+});
+
+describe('TextAreaField', () => {
+  const field = { id: 'sms-editor', type: 'textarea', width: 18 };
+
+  it('surfaces the resolved (brace) message inline when an error is present', () => {
+    const el = TextAreaField({
+      field, value: 'abc {{x', error: 'tagBracketCountMismatchError', resolvedError: 'Invalid label', onChange: () => {}, renderContext: { checkValidation: true, channel: 'SMS' },
+    });
+    const [textarea] = kids(el);
+    expect(textarea.props.errorMessage).toBe('Invalid label');
+  });
+
+  it('empty-content error only shows after validation is triggered', () => {
+    const noTrigger = TextAreaField({
+      field, value: '', error: 'genericValidationError', resolvedError: '', onChange: () => {}, renderContext: { checkValidation: false, channel: 'SMS' },
+    });
+    expect(kids(noTrigger)[0].props.className).toBe('');
+  });
+
+  it('renders the AskAira content bot for SMS when AI content is enabled, and wires setText', () => {
+    isAiContentBotDisabled.mockReturnValueOnce(false);
+    const onChange = jest.fn();
+    const el = TextAreaField({
+      field, value: 'hi', error: false, resolvedError: '', onChange, renderContext: { checkValidation: false, channel: 'SMS' },
+    });
+    const askAira = kids(el).find((c) => c && c.props && typeof c.props.setText === 'function');
+    expect(askAira).toBeTruthy();
+    askAira.props.setText('generated');
+    expect(onChange).toHaveBeenCalledWith('generated');
+  });
+});
+
+describe('CheckboxField', () => {
+  const field = {
+    id: 'unicode-validity', type: 'checkbox', width: 18, errorMessage: 'Unicode detected',
+  };
+
+  it('passes errorMessage to the checkbox when validation triggered + error', () => {
+    const el = CheckboxField({
+      field, value: false, error: true, onChange: () => {}, renderContext: { checkValidation: true },
+    });
+    const [checkbox] = kids(el);
+    expect(checkbox.props.errorMessage).toBe('Unicode detected');
+    expect(checkbox.props.className).toBe('error');
+  });
+
+  it('no errorMessage when not triggered', () => {
+    const el = CheckboxField({
+      field, value: true, error: false, onChange: () => {}, renderContext: { checkValidation: false },
+    });
+    expect(kids(el)[0].props.errorMessage).toBe('');
+  });
+});
+
+describe('ButtonField', () => {
+  it('renders a button for metaType=submit-button and wires onEvent', () => {
+    const onEvent = jest.fn();
+    const el = ButtonField({ field: { id: 'save', metaType: 'submit-button', submitAction: 'saveFormData', value: 'Save' }, onEvent });
+    const [button] = kids(el);
+    button.props.onClick({ foo: 1 });
+    expect(onEvent).toHaveBeenCalledWith('saveFormData', { foo: 1 });
+  });
+
+  it('renders nothing for a non-submit button', () => {
+    expect(ButtonField({ field: { id: 'x', metaType: 'other' }, onEvent: () => {} })).toBeNull();
+  });
+});
+
+describe('TagListField', () => {
+  it('disables module filter in embedded mode', () => {
+    const embedded = TagListField({ field: { id: 'tagList' }, onEvent: () => {}, renderContext: { location: { query: { type: 'embedded' } } } });
+    expect(kids(embedded)[0].props.moduleFilterEnabled).toBe(false);
+  });
+
+  it('enables module filter outside embedded mode', () => {
+    const full = TagListField({ field: { id: 'tagList' }, onEvent: () => {}, renderContext: { location: { query: { type: 'full' } } } });
+    expect(kids(full)[0].props.moduleFilterEnabled).toBe(true);
+  });
+
+  it('forwards a tag selection through onEvent', () => {
+    const onEvent = jest.fn();
+    const el = TagListField({ field: { id: 'tagList' }, onEvent, renderContext: {} });
+    kids(el)[0].props.onTagSelect({ tag: 'name' });
+    expect(onEvent).toHaveBeenCalledWith('onTagSelect', { tag: 'name' });
+  });
+});
+
+describe('SmsPreviewField', () => {
+  const field = { id: 'sms-preview', channel: 'SMS' };
+
+  it('uses the Unicode senderId when the unicode checkbox is on', () => {
+    const el = SmsPreviewField({ field, renderContext: { legacyFormData: { 0: { 'sms-editor': 'hi', 'unicode-validity': true } } } });
+    expect(kids(el)[0].props.senderId).toBe('Unicode');
+  });
+
+  it('uses the ASCII senderId when off, and tolerates a missing legacyFormData', () => {
+    const el = SmsPreviewField({ field, renderContext: {} });
+    expect(kids(el)[0].props.senderId).toBe('ASCII');
+  });
+
+  it('falls back to the SMS channel when the field has none', () => {
+    const el = SmsPreviewField({ field: { id: 'sms-preview' }, renderContext: {} });
+    expect(kids(el)[0].props.channel).toBe('SMS');
+  });
+});
+
+describe('DivField', () => {
+  it('renders the derived text and forwards the ref for its id', () => {
+    const ref = { current: null };
+    const el = DivField({ field: { id: 'sms-count', width: 18 }, renderContext: { legacyFormData: { 0: { 'sms-count': '2 SMS' } }, refs: { 'sms-count': ref } } });
+    const [div] = kids(el);
+    expect(div.props.children).toBe('2 SMS');
+    expect(div.ref).toBe(ref); // React exposes ref on element.ref, not props.ref
+  });
+
+  it('falls back to field.value and tolerates missing refs', () => {
+    const el = DivField({ field: { id: 'x', value: 'fallback', width: 18 }, renderContext: {} });
+    expect(kids(el)[0].props.children).toBe('fallback');
+  });
+});

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

@@ -0,0 +1,95 @@
+/**
+ * Unit tests for the legacy-formData codec.
+ * The headline contract is the round-trip law: toLegacy(fromLegacy(x)) ≡ x.
+ */
+
+import { fromLegacy, toLegacy } from '../core/store/toLegacyFormData';
+
+describe('toLegacyFormData codec', () => {
+  describe('round-trip law: toLegacy(fromLegacy(x)) deep-equals x', () => {
+    it('SMS single-tab shape', () => {
+      const tab0 = { 'sms-editor': 'hello', 'unicode-validity': false, base: true, tabKey: 'k0' };
+      const legacy = { 'template-name': 'My SMS', 0: tab0, base: tab0 };
+      expect(toLegacy(fromLegacy(legacy, { channel: 'SMS' }))).toEqual(legacy);
+    });
+
+    it('empty/new SMS shape (single base tab, blank fields)', () => {
+      const tab0 = { 'sms-editor': '', 'unicode-validity': false, base: true, tabKey: 'k0' };
+      const legacy = { 'template-name': '', 0: tab0, base: tab0 };
+      expect(toLegacy(fromLegacy(legacy))).toEqual(legacy);
+    });
+
+    it('multi-tab shape with a named non-base tab (future channels)', () => {
+      const t0 = { 'sms-editor': 'a', base: true, tabKey: 'k0' };
+      const t1 = { 'sms-editor2': 'b', name: 'Version 2', tabKey: 'k1' };
+      const legacy = { 'template-name': 'n', 0: t0, 1: t1, base: t0 };
+      expect(toLegacy(fromLegacy(legacy))).toEqual(legacy);
+    });
+
+    it('base tab that is not index 0', () => {
+      const t0 = { x: 'a', tabKey: 'k0' };
+      const t1 = { x: 'b', base: true, tabKey: 'k1' };
+      const legacy = { 0: t0, 1: t1, base: t1 };
+      const round = toLegacy(fromLegacy(legacy));
+      expect(round).toEqual(legacy);
+    });
+  });
+
+  describe('fromLegacy parsing', () => {
+    it('with no args returns an empty normalized state (default params)', () => {
+      const state = fromLegacy();
+      expect(state.root).toEqual({});
+      expect(state.tabs).toEqual([]);
+      expect(state.meta.channel).toBeNull();
+    });
+
+    it('tolerates a numeric key whose value is missing', () => {
+      const state = fromLegacy({ 0: undefined });
+      expect(state.tabs).toHaveLength(1);
+      expect(state.tabs[0].fields).toEqual({});
+    });
+
+    it('separates root (standalone) fields from numeric tabs and drops the alias', () => {
+      const tab0 = { 'sms-editor': 'hi', base: true, tabKey: 'k0' };
+      const state = fromLegacy({ 'template-name': 'X', 0: tab0, base: tab0 }, { channel: 'SMS' });
+      expect(state.meta.channel).toBe('SMS');
+      expect(state.root).toEqual({ 'template-name': 'X' });
+      expect(state.tabs).toHaveLength(1);
+      expect(state.tabs[0].fields).toEqual({ 'sms-editor': 'hi' });
+      expect(state.tabs[0].base).toBe(true);
+      expect(state.tabs[0].tabKey).toBe('k0');
+      expect(state.meta.baseTabIndex).toBe(0);
+    });
+
+    it('computes baseTabIndex from the base flag', () => {
+      const state = fromLegacy({ 0: { x: 'a' }, 1: { x: 'b', base: true } });
+      expect(state.meta.baseTabIndex).toBe(1);
+    });
+
+    it('defaults baseTabIndex to 0 when no tab is flagged base', () => {
+      const state = fromLegacy({ 0: { x: 'a' } });
+      expect(state.meta.baseTabIndex).toBe(0);
+    });
+
+    it('does not mutate the input tab objects', () => {
+      const tab0 = { 'sms-editor': 'hi', base: true };
+      fromLegacy({ 0: tab0, base: tab0 });
+      expect(tab0).toEqual({ 'sms-editor': 'hi', base: true });
+    });
+  });
+
+  describe('toLegacy serialization', () => {
+    it('makes formData.base the SAME reference as the base tab', () => {
+      const state = fromLegacy({ 'template-name': 'X', 0: { 'sms-editor': 'hi', base: true, tabKey: 'k0' } });
+      const legacy = toLegacy(state);
+      expect(legacy.base).toBe(legacy[0]); // alias identity, not a copy
+    });
+
+    it('omits the base key on non-base tabs (matches legacy)', () => {
+      const state = fromLegacy({ 0: { x: 'a', base: true, tabKey: 'k0' }, 1: { x: 'b', tabKey: 'k1' } });
+      const legacy = toLegacy(state);
+      expect('base' in legacy[1]).toBe(false);
+      expect(legacy[0].base).toBe(true);
+    });
+  });
+});

package/v2Components/FormBuilder/_formBuilder.scss

@@ -46,6 +46,14 @@
 .error .error-message{
   top: revert;
 }
+// SMS message-body error ("Invalid label, please close all curly braces"):
+// drop the default top gap and add breathing room below the message box.
+.sms-message-content {
+  .component-with-label-error-message {
+    margin-top: 0 !important;
+    margin-bottom: 8px !important;
+  }
+}
 .tabs-error {
   .ant-tabs-ink-bar .ant-tabs-ink-bar-animated {
     background-color: #F34F56;