@capillarytech/creatives-library 9.0.13-alpha.1 → 9.0.13-beta.0

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -0,0 +1,369 @@
+/**
+ * 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.
+ */
+
+import React, {
+  useReducer, useRef, useEffect, useState, useMemo, useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import formReducer, {
+  createInitialState,
+  hydrate,
+  fieldChanged,
+} from './core/store/formReducer';
+import { toLegacy, fromLegacy } from './core/store/toLegacyFormData';
+import initializeFormState from './core/schema/initializeFormState';
+import { getChannelAdapter } from './channels/registry';
+import { createSmsRegistry } from './renderers/smsRenderers';
+import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
+import { REQUEST } from '../../../v2Containers/Cap/constants';
+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';
+
+const isNonEmpty = (obj) => obj && Object.keys(obj).length > 0;
+
+const buildInitialState = (schema, parentFormData, channel) => (isNonEmpty(parentFormData)
+  ? 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,
+    formData: parentFormData,
+    isFullMode,
+    startValidation,
+    location,
+    channel: channelProp,
+    intl,
+    liquidExtractionInProgress,
+    metaDataStatus,
+    tagModule,
+    tags,
+    checkValidation,
+    injectedTags,
+    onContextChange,
+    selectedOfferDetails,
+    eventContextTags,
+    waitEventContextTags,
+    restrictPersonalization,
+    refs,
+  } = props;
+
+  const channel = (channelProp || schema?.channel || SMS).toUpperCase();
+  const adapter = getChannelAdapter(channel);
+  const registry = useMemo(() => registryFor(), [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.
+  const [internalCheckValidation, setInternalCheckValidation] = useState(false);
+
+  // refs to latest values for use inside stable/debounced callbacks
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  const lastEmittedRef = useRef(null);
+  const didInitRef = useRef(false);
+  const prevStartValidationRef = useRef(startValidation);
+
+  // 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.
+  const handlersRef = useRef({});
+  const stableOnFieldChange = useCallback((field, value) => handlersRef.current.onFieldChange(field, value), []);
+  const stableOnFieldBlur = useCallback((field) => handlersRef.current.onFieldBlur(field), []);
+  const stableOnEvent = useCallback((field, eventName, data) => handlersRef.current.onEvent(field, eventName, data), []);
+
+  const isEmbedded = location?.query?.type === EMBEDDED;
+  const currentModule = tagModule || location?.query?.module || DEFAULT_MODULE;
+
+  const runValidate = (legacy) => adapter.validate(legacy, {
+    tags: propsRef.current.tags,
+    isFullMode,
+    isEmbedded,
+    currentModule,
+  });
+
+  // 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.
+  const footerRef = useRef({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
+  const liquidEnabled = Boolean(adapter.config?.features?.liquid);
+
+  const pushFooter = (next) => {
+    footerRef.current = { ...footerRef.current, ...next };
+    if (propsRef.current.showLiquidErrorInFooter) {
+      propsRef.current.showLiquidErrorInFooter(
+        footerRef.current,
+        channel === SMS ? null : propsRef.current.currentTab,
+      );
+    }
+  };
+
+  // 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) => {
+    if (isFullMode || !adapter.getEditorErrorDescriptor || !intl) return [];
+    const descriptor = adapter.getEditorErrorDescriptor(legacy, {
+      tags: propsRef.current.tags,
+      isFullMode,
+      currentModule,
+    });
+    return descriptor ? [intl.formatMessage(descriptor.message, descriptor.values)] : [];
+  };
+
+  const emitValidity = (result, legacy) => {
+    setErrorData(result.errorData);
+    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.
+    if (liquidEnabled) {
+      pushFooter({ STANDARD_ERROR_MSG: result.isValid ? [] : standardFooterMsg(legacy) });
+    }
+  };
+
+  const emitChange = (legacy, field) => {
+    lastEmittedRef.current = legacy;
+    if (propsRef.current.onChange) propsRef.current.onChange(legacy, 1, 1, field);
+  };
+
+  const debouncedEmit = useMemo(
+    () => debounce((legacy, field) => emitChange(legacy, field), 300),
+    [],
+  );
+  useEffect(() => () => debouncedEmit.cancel(), [debouncedEmit]);
+
+  // ---- initialize once the (possibly async) schema is ready, then validate+emit ----
+  const schemaReady = Boolean(schema?.standalone);
+  useEffect(() => {
+    if (schemaReady && !didInitRef.current) {
+      didInitRef.current = true;
+      const init = buildInitialState(schema, propsRef.current.formData, channel);
+      dispatch(hydrate(init));
+      const legacy = toLegacy(init);
+      emitValidity(runValidate(legacy), legacy);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schemaReady]);
+
+  // ---- re-hydrate on a GENUINE external parent push (edit load / discard) ----
+  useEffect(() => {
+    if (!didInitRef.current || !isNonEmpty(parentFormData)) return;
+    const current = toLegacy(stateRef.current);
+    const isEcho = isEqual(parentFormData, lastEmittedRef.current) || isEqual(parentFormData, current);
+    if (!isEcho) dispatch(hydrate(fromLegacy(parentFormData, { channel })));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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) => {
+    const currentProps = propsRef.current;
+    const runLiquid = liquidEnabled && !isFullMode;
+    const getLiquidTags = currentProps.actions?.getLiquidTags;
+    if (!runLiquid || typeof getLiquidTags !== 'function') {
+      if (currentProps.onSubmit) currentProps.onSubmit(adapter.buildSubmitPayload(legacy));
+      return;
+    }
+    const content = adapter.getLiquidContent
+      ? adapter.getLiquidContent(legacy, { baseLanguage: currentProps.baseLanguage })
+      : adapter.buildSubmitPayload(legacy);
+    validateLiquidTemplateContent(content, {
+      getLiquidTags,
+      formatMessage: currentProps.intl.formatMessage,
+      messages: formMessages,
+      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.
+        if (currentProps.onFormValidityChange) currentProps.onFormValidityChange(false, validErrorData);
+      },
+      onSuccess: () => {
+        if (currentProps.onSubmit) currentProps.onSubmit(adapter.buildSubmitPayload(legacy));
+      },
+    });
+  };
+
+  // ---- startValidation rising edge -> validate, then save or 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();
+      }
+    }
+    prevStartValidationRef.current = startValidation;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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.
+  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];
+    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) };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errorData, intl, isFullMode, currentModule]);
+
+  // ---- field change ----
+  const onFieldChange = (field, value) => {
+    const tabIndex = field.standalone ? null : ACTIVE_TAB_INDEX;
+    const action = fieldChanged({ fieldId: field.id, value, tabIndex });
+    const nextState = formReducer(stateRef.current, action);
+    dispatch(action); // immediate UI update on next render
+    const legacy = toLegacy(nextState);
+
+    if (HIGH_FREQ_FIELDS.includes(field.id)) {
+      debouncedEmit(legacy, field); // debounce only the parent notification
+    } else {
+      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.
+    const validationActive = propsRef.current.startValidation || internalCheckValidation || Boolean(propsRef.current.checkValidation);
+    if (validationActive) {
+      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.
+  const onFieldBlur = (field) => {
+    if (!field || !HIGH_FREQ_FIELDS.includes(field.id)) return;
+    debouncedEmit.flush();
+    const legacy = toLegacy(stateRef.current);
+    emitValidity(runValidate(legacy), legacy);
+  };
+
+  // ---- parent bridge: invoke container-injected handlers (Stage A compat) ----
+  const onEvent = (field, eventName, data) => {
+    const injected = field.injectedEvents?.[eventName];
+    if (typeof injected !== 'function') return;
+    if (eventName === 'onTagSelect') {
+      injected.call(propsRef.current.parent, data, 1, field); // Classic signature
+    } else {
+      injected.call(propsRef.current.parent, data, field.id); // saveFormData / onClick
+    }
+  };
+
+  // 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).
+  const renderContext = {
+    state,
+    errorData,
+    registry,
+    checkValidation: internalCheckValidation || Boolean(checkValidation),
+    activeTabIndex: ACTIVE_TAB_INDEX,
+    currentTab: 1,
+    onFieldChange: stableOnFieldChange,
+    onFieldBlur: stableOnFieldBlur,
+    onEvent: stableOnEvent,
+    resolvedFieldErrors,
+    legacyFormData: toLegacy(state),
+    channel,
+    isFullMode,
+    tags,
+    injectedTags,
+    location,
+    intl,
+    onContextChange,
+    selectedOfferDetails,
+    eventContextTags,
+    waitEventContextTags,
+    restrictPersonalization,
+    userLocale: 'en',
+    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.
+  const spinning = Boolean((liquidEnabled && liquidExtractionInProgress) || metaDataStatus === REQUEST);
+  const spinTip = intl?.formatMessage ? intl.formatMessage(formMessages.liquidSpinText) : '';
+
+  return (
+    <CapSpin spinning={spinning} tip={spinTip}>
+      <SchemaForm schema={schema} renderContext={renderContext} />
+    </CapSpin>
+  );
+};
+
+FormBuilderShell.propTypes = {
+  schema: PropTypes.object,
+  formData: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  startValidation: PropTypes.bool,
+  location: PropTypes.object,
+  channel: PropTypes.string,
+  // Redux-sourced (via the connected wrapper in ./index.js), used by the
+  // non-isFullMode liquid path and the loading overlay.
+  actions: PropTypes.object,
+  liquidExtractionInProgress: PropTypes.bool,
+  metaDataStatus: PropTypes.string,
+  showLiquidErrorInFooter: PropTypes.func,
+  baseLanguage: PropTypes.string,
+  intl: PropTypes.object,
+  // Forwarded to the render context / field renderers (tag-list, preview, etc.).
+  tagModule: PropTypes.string,
+  tags: PropTypes.array,
+  checkValidation: PropTypes.bool,
+  injectedTags: PropTypes.object,
+  onContextChange: PropTypes.func,
+  // Shapes match TagList's own contract (array of offer objects / keyed-by-blockId map).
+  selectedOfferDetails: PropTypes.array,
+  eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
+  restrictPersonalization: PropTypes.bool,
+  refs: PropTypes.object,
+};
+
+FormBuilderShell.defaultProps = {
+  tagModule: '',
+  tags: [],
+  checkValidation: false,
+  injectedTags: {},
+  onContextChange: undefined,
+  selectedOfferDetails: [],
+  eventContextTags: [],
+  waitEventContextTags: {},
+  restrictPersonalization: false,
+  refs: undefined,
+};
+
+export default FormBuilderShell;

package/v2Components/FormBuilder/Functional/channels/registry.js

@@ -0,0 +1,17 @@
+/**
+ * channels/registry — channelKey -> adapter. The shell resolves the adapter by
+ * `schema.channel`; core/layout never import channels directly. Adding a channel
+ * is a new folder + one line here.
+ */
+import smsAdapter from './sms';
+
+const adapters = {
+  SMS: smsAdapter,
+};
+
+export const getChannelAdapter = (channel) => {
+  const key = typeof channel === 'string' ? channel.toUpperCase() : '';
+  return adapters[key] || null;
+};
+
+export default getChannelAdapter;

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

@@ -0,0 +1,9 @@
+/**
+ * SMS submit payload — the class component calls props.onSubmit(this.state.formData)
+ * directly for SMS (Classic.js onSubmitWrapper, isFullMode path). So the payload IS
+ * the legacy formData; no transform. Kept as an explicit adapter hook so other
+ * channels (EMAIL's HTML preprocess, etc.) can diverge without touching the shell.
+ */
+export default function buildSubmitPayload(legacyFormData) {
+  return legacyFormData;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * SMS channel config — declarative capabilities + field ids for the SMS adapter.
+ * SMS is the simplest channel: a single template (no tabs/versions/languages).
+ */
+import { SMS } from '../../../../../v2Containers/CreativesContainer/constants';
+
+// SMS is single-tab: its body and editor errors always live under tab index 0.
+export const SMS_TAB = 0;
+
+// Field ids the SMS schema uses — shared by validate / getEditorErrorDescriptor so
+// the magic strings live in exactly one place.
+export const fieldIds = {
+  name: 'template-name', // standalone (root) field
+  editor: 'sms-editor', // tab-0 field (the SMS body)
+  unicode: 'unicode-validity', // tab-0 checkbox
+};
+
+export default {
+  channel: SMS,
+  fieldIds,
+  features: {
+    versions: false,
+    languages: false,
+    tabs: false,
+    unicode: true,
+    liquid: true, // SMS is in LIQUID_SUPPORTED_CHANNELS (only runs outside isFullMode)
+    askAira: true,
+    preview: true,
+  },
+};

package/v2Components/FormBuilder/Functional/channels/sms/getEditorErrorDescriptor.js

@@ -0,0 +1,46 @@
+/**
+ * Maps an SMS message-body error to an intl descriptor: brace (kind 'brace', shown
+ * inline + footer) or missing-tag (kind 'missing', footer only, library mode).
+ * Returns null for valid/empty/generic content — matching the old flow's placement.
+ */
+import { validateTagsCore } from '../../../../../utils/tagValidations';
+import { DEFAULT as DEFAULT_MODULE } from '../../../../../constants/unified';
+import globalMessages from '../../../../../v2Containers/Cap/messages';
+import formMessages from '../../../messages';
+import { EDITOR_ERROR_KIND } from '../../constants';
+import { fieldIds, SMS_TAB } from './config';
+
+export default function getEditorErrorDescriptor(legacyFormData = {}, options = {}) {
+  const tab = legacyFormData[SMS_TAB] || {};
+  const content = tab[fieldIds.editor];
+
+  // Empty body -> border only, no footer message (matches Classic).
+  if (!content) return null;
+
+  const { tags = [], isFullMode, currentModule = DEFAULT_MODULE } = options;
+  const tagValidation = validateTagsCore({
+    contentForBraceCheck: content,
+    contentForUnsubscribeScan: content,
+    tags,
+    currentModule,
+    isFullMode,
+    initialMissingTags: [],
+    includeIsContentEmpty: true,
+  });
+  if (tagValidation?.valid !== false) return null;
+
+  // `kind` lets the shell decide placement: the brace error is shown BELOW the
+  // message box (inline) in addition to the footer; missing-tag is footer-only.
+  if (tagValidation?.isBraceError) {
+    return { message: globalMessages.unbalanacedCurlyBraces, kind: EDITOR_ERROR_KIND.BRACE };
+  }
+  if (tagValidation?.missingTags?.length) {
+    return {
+      message: formMessages.missingTagsValidationError,
+      values: { missingTags: tagValidation.missingTags.join(', ') },
+      kind: EDITOR_ERROR_KIND.MISSING,
+    };
+  }
+  // Generic tag failure -> border only, no footer message (matches Classic).
+  return null;
+}

package/v2Components/FormBuilder/Functional/channels/sms/getLiquidContent.js

@@ -0,0 +1,13 @@
+/**
+ * SMS liquid content — the string handed to the liquid-tag extraction/validation
+ * API in non-isFullMode (library/embedded) mode. Mirrors Classic.onSubmitWrapper:
+ *   content = getChannelData(channel, formData, baseLanguage)
+ * which for SMS is `${base['sms-editor']} ${template-name}`. Kept in the adapter
+ * so the shell never names a channel; getChannelData itself is the shared util.
+ */
+import { getChannelData } from '../../../../../utils/commonUtils';
+import { SMS } from '../../../../../v2Containers/CreativesContainer/constants';
+
+export default function getLiquidContent(legacyFormData, { baseLanguage } = {}) {
+  return getChannelData(SMS, legacyFormData, baseLanguage);
+}

package/v2Components/FormBuilder/Functional/channels/sms/index.js

@@ -0,0 +1,22 @@
+/**
+ * SMS channel adapter — the isolation unit for SMS. Bundles config + the pure
+ * validate + payload builder. The shell looks this up via channels/registry by
+ * `schema.channel`; it imports nothing from other channels.
+ */
+import { SMS } from '../../../../../v2Containers/CreativesContainer/constants';
+import config from './config';
+import validate from './validate';
+import buildSubmitPayload from './buildSubmitPayload';
+import getLiquidContent from './getLiquidContent';
+import getEditorErrorDescriptor from './getEditorErrorDescriptor';
+
+const smsAdapter = {
+  channel: SMS,
+  config,
+  validate,
+  buildSubmitPayload,
+  getLiquidContent,
+  getEditorErrorDescriptor,
+};
+
+export default smsAdapter;

package/v2Components/FormBuilder/Functional/channels/sms/tests/getEditorErrorDescriptor.test.js

@@ -0,0 +1,52 @@
+/**
+ * Unit tests for the SMS message-body error → message-descriptor mapping. These
+ * are the messages shown INLINE below the message box (the MPUSH-style placement).
+ */
+import getEditorErrorDescriptor from '../getEditorErrorDescriptor';
+import globalMessages from '../../../../../../v2Containers/Cap/messages';
+import formMessages from '../../../../messages';
+import * as tagValidations from '../../../../../../utils/tagValidations';
+
+const fd = (content) => ({ 'template-name': 'n', 0: { 'sms-editor': content, base: true } });
+const ctx = { tags: [], isFullMode: true, currentModule: 'default' };
+
+describe('getEditorErrorDescriptor (SMS)', () => {
+  it('unbalanced braces -> unbalanacedCurlyBraces descriptor tagged kind:brace (shown inline + footer)', () => {
+    const d = getEditorErrorDescriptor(fd('abc {{full_name'), ctx);
+    expect(d).toEqual({ message: globalMessages.unbalanacedCurlyBraces, kind: 'brace' });
+  });
+
+  it('valid content -> null (no error)', () => {
+    expect(getEditorErrorDescriptor(fd('hello world'), ctx)).toBeNull();
+  });
+
+  it('tolerates default args (no formData / no options)', () => {
+    expect(getEditorErrorDescriptor()).toBeNull(); // no tab 0 -> empty content -> null
+    expect(getEditorErrorDescriptor(fd('hello world'))).toBeNull(); // valid content, default options
+  });
+
+  it('empty content -> null (border only, no footer message — matches Classic)', () => {
+    expect(getEditorErrorDescriptor(fd(''), ctx)).toBeNull();
+    expect(getEditorErrorDescriptor({ 0: {} }, ctx)).toBeNull();
+  });
+
+  // When the tag core reports missing tags, the descriptor maps them to the
+  // missing-tag message + kind. (SMS passes initialMissingTags:[] so this path is
+  // forward-looking; we stub the core to verify the mapping contract directly.)
+  it('maps a missing-tag core result -> missingTagsValidationError descriptor (kind:missing)', () => {
+    jest.spyOn(tagValidations, 'validateTagsCore').mockReturnValue({ valid: false, missingTags: ['unsubscribe', 'name'], isBraceError: false });
+    const d = getEditorErrorDescriptor(fd('hi'), { tags: [], isFullMode: false });
+    expect(d).toEqual({
+      message: formMessages.missingTagsValidationError,
+      values: { missingTags: 'unsubscribe, name' },
+      kind: 'missing',
+    });
+    tagValidations.validateTagsCore.mockRestore();
+  });
+
+  it('returns null for a non-brace, non-missing invalid result (generic body failure)', () => {
+    jest.spyOn(tagValidations, 'validateTagsCore').mockReturnValue({ valid: false, missingTags: [], isBraceError: false });
+    expect(getEditorErrorDescriptor(fd('hi'), { tags: [], isFullMode: false })).toBeNull();
+    tagValidations.validateTagsCore.mockRestore();
+  });
+});

package/v2Components/FormBuilder/Functional/channels/sms/tests/getLiquidContent.test.js

@@ -0,0 +1,25 @@
+/**
+ * Unit tests for the SMS liquid-content builder. Covers both the with-options
+ * and the default-options (no second arg) call shapes.
+ */
+import getLiquidContent from '../getLiquidContent';
+
+const fd = (content, name) => ({
+  'template-name': name,
+  0: { 'sms-editor': content, base: true },
+  base: { 'sms-editor': content, base: true },
+});
+
+describe('getLiquidContent (SMS)', () => {
+  it('builds the channel content string from the base tab + name', () => {
+    const out = getLiquidContent(fd('hello world', 'My SMS'), { baseLanguage: 'en' });
+    expect(typeof out).toBe('string');
+    expect(out).toContain('hello world');
+  });
+
+  it('works without an options argument (default {})', () => {
+    const out = getLiquidContent(fd('hi there', 'N'));
+    expect(typeof out).toBe('string');
+    expect(out).toContain('hi there');
+  });
+});

package/v2Components/FormBuilder/Functional/channels/sms/tests/validate.test.js

@@ -0,0 +1,87 @@
+/**
+ * Unit tests for the pure SMS validator (mirrors the Classic SMS validateForm
+ * block). Operates on the legacy formData shape; returns legacy errorData.
+ */
+
+import validateSms, { ERROR } from '../validate';
+import * as tagValidations from '../../../../../../utils/tagValidations';
+
+const fd = ({ name = 'My SMS', content = 'hello world', unicode = false } = {}) => ({
+  'template-name': name,
+  0: { 'sms-editor': content, 'unicode-validity': unicode, base: true, tabKey: 'k0' },
+});
+
+const baseCtx = { tags: [], isFullMode: true, isEmbedded: false, currentModule: 'default' };
+
+describe('validateSms', () => {
+  it('valid: ascii content + name', () => {
+    const { isValid, errorData } = validateSms(fd(), baseCtx);
+    expect(isValid).toBe(true);
+    expect(errorData['template-name']).toBe(false);
+    expect(errorData[0]['sms-editor']).toBe(false);
+    expect(errorData[0]['unicode-validity']).toBe(false);
+  });
+
+  it('tolerates default args (no formData / no options)', () => {
+    // empty form, default options -> empty content + required name both flagged
+    const { isValid, errorData } = validateSms();
+    expect(isValid).toBe(false);
+    expect(errorData[0]['sms-editor']).toBe(ERROR.GENERIC);
+    expect(errorData['template-name']).toBe(true);
+  });
+
+  it('invalid: empty content flags sms-editor with a generic error', () => {
+    const { isValid, errorData } = validateSms(fd({ content: '' }), baseCtx);
+    expect(isValid).toBe(false);
+    expect(errorData[0]['sms-editor']).toBe(ERROR.GENERIC);
+  });
+
+  it('invalid: empty template-name (non-embedded) flags template-name at root', () => {
+    const { isValid, errorData } = validateSms(fd({ name: '' }), baseCtx);
+    expect(isValid).toBe(false);
+    expect(errorData['template-name']).toBe(true);
+  });
+
+  it('invalid: unicode content with the checkbox OFF', () => {
+    const { isValid, errorData } = validateSms(fd({ content: 'नमस्ते', unicode: false }), baseCtx);
+    expect(isValid).toBe(false);
+    expect(errorData[0]['unicode-validity']).toBe(true);
+  });
+
+  it('valid: unicode content with the checkbox ON', () => {
+    const { isValid, errorData } = validateSms(fd({ content: 'नमस्ते', unicode: true }), baseCtx);
+    expect(isValid).toBe(true);
+    expect(errorData[0]['unicode-validity']).toBe(false);
+  });
+
+  it('embedded: template-name is not required', () => {
+    const { isValid, errorData } = validateSms(fd({ name: '' }), { ...baseCtx, isEmbedded: true });
+    expect(errorData['template-name']).toBe(false);
+    expect(isValid).toBe(true);
+  });
+
+  it('invalid: unbalanced braces flag a bracket error on sms-editor', () => {
+    const { isValid, errorData } = validateSms(fd({ content: 'hi {{name}' }), baseCtx);
+    expect(isValid).toBe(false);
+    expect(errorData[0]['sms-editor']).toBe(ERROR.BRACKET);
+    expect(errorData[0]['bracket-error']).toBe(ERROR.BRACKET);
+  });
+
+  it('maps a missing-tag core result -> MISSING_TAG editor error', () => {
+    // SMS passes initialMissingTags:[] so the core never reports missing tags in
+    // practice; stub it to verify validateSms maps a missing-tag result correctly.
+    jest.spyOn(tagValidations, 'validateTagsCore').mockReturnValue({ valid: false, missingTags: ['unsubscribe'], isBraceError: false });
+    const { isValid, errorData } = validateSms(fd({ content: 'hi' }), { ...baseCtx, isFullMode: false });
+    expect(isValid).toBe(false);
+    expect(errorData[0]['sms-editor']).toBe(ERROR.MISSING_TAG);
+    tagValidations.validateTagsCore.mockRestore();
+  });
+
+  it('falls back to a generic error when the core returns a non-object', () => {
+    jest.spyOn(tagValidations, 'validateTagsCore').mockReturnValue(undefined);
+    const { isValid, errorData } = validateSms(fd({ content: 'hi' }), baseCtx);
+    expect(isValid).toBe(false);
+    expect(errorData[0]['sms-editor']).toBe(ERROR.GENERIC);
+    tagValidations.validateTagsCore.mockRestore();
+  });
+});