cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/Rcs/utils.js

@@ -1,11 +1,27 @@
 import React from 'react';
 import {CapIcon, CapImage, CapLabel, CapDivider } from '@capillarytech/cap-ui-library';
-import { RCS } from './constants';
+import {
+  RCS,
+  RCS_MEDIA_TYPES,
+  RCS_NUMERIC_VAR_NAME_REGEX,
+  RCS_REGEX_META_CHARS_PATTERN,
+  RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
+} from './constants';
 import './index.scss';
 // import { formatMessage } from '../../../utils/intl';
 import messages from './messages';
-import { STATUS_OPTIONS, RCS_BUTTON_TYPES, RCS_STATUSES, RCS_MEDIA_TYPES } from './constants';
-
+import {
+  STATUS_OPTIONS,
+  RCS_BUTTON_TYPES,
+  RCS_STATUSES,
+  rcsVarRegex,
+  rcsVarTestRegex,
+} from './constants';
+import {
+  splitTemplateVarString,
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  isAnyTemplateVarToken,
+} from '../../utils/templateVarUtils';
 
 export const getRcsStatusType = (status) => {
   switch (status) {
@@ -33,6 +49,334 @@ export const getTemplateStatusType = (templateStatus) => {
   }
 };
 
+/**
+ * Global RegExp matching `{{numericVarName}}` in RCS template strings.
+ * `numericVarName` is escaped for regex metacharacters.
+ */
+export function buildRcsNumericMustachePlaceholderRegex(numericVarName) {
+  const escaped = String(numericVarName).replace(RCS_REGEX_META_CHARS_PATTERN, '\\$&');
+  return new RegExp(`\\{\\{${escaped}\\}\\}`, 'g');
+}
+
+export function normalizeCardVarMapped(rawCardVarMapped, orderedTagNames) {
+  if (!rawCardVarMapped || typeof rawCardVarMapped !== 'object') return {};
+  const normalizedMap = {};
+  const templateVarNamesInOrder = Array.isArray(orderedTagNames) ? orderedTagNames : null;
+  const hasOrderedSlots =
+    Boolean(templateVarNamesInOrder?.length);
+  Object.entries(rawCardVarMapped).forEach(([entryKey, entryValue]) => {
+    const trimmedValue = entryValue == null ? '' : String(entryValue).trim();
+    const entryKeyIsNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(entryKey));
+    const mustacheInnerMatch = trimmedValue.match(/^\{\{([^}]+)\}\}$/);
+    const innerFromMustache =
+      mustacheInnerMatch?.[1] != null ? String(mustacheInnerMatch[1]).trim() : null;
+
+    if (innerFromMustache !== null && entryKeyIsNumericSlot) {
+      const slotIndexZeroBased = parseInt(String(entryKey), 10) - 1;
+      const expectedVarForSlot =
+        hasOrderedSlots
+        && slotIndexZeroBased >= 0
+        && slotIndexZeroBased < templateVarNamesInOrder.length
+          ? templateVarNamesInOrder[slotIndexZeroBased]
+          : null;
+      const innerMatchesSlotToken =
+        expectedVarForSlot != null && innerFromMustache === expectedVarForSlot;
+      const legacyUnorderedPlaceholder = !hasOrderedSlots;
+      /* Library: slot "1" + {{user_id_b64}} when token is user_id_b64 → empty semantic. With ordered
+       * slots, only clear when inner matches that slot's template token; else keep (e.g. {{1}}+{{FirstName}}). */
+      const clearNumericSlotMustacheAsUnfilled =
+        !RCS_NUMERIC_VAR_NAME_REGEX.test(innerFromMustache)
+        && (legacyUnorderedPlaceholder || innerMatchesSlotToken);
+      if (clearNumericSlotMustacheAsUnfilled) {
+        const outputKey = innerFromMustache;
+        const existingValue = normalizedMap[outputKey];
+        if (existingValue != null && String(existingValue).trim() !== '') {
+          return;
+        }
+        normalizedMap[outputKey] = '';
+        return;
+      }
+      if (RCS_NUMERIC_VAR_NAME_REGEX.test(innerFromMustache)) {
+        const outputKey = innerFromMustache;
+        const existingValue = normalizedMap[outputKey];
+        if (existingValue != null && String(existingValue).trim() !== '') {
+          return;
+        }
+        normalizedMap[outputKey] = '';
+        return;
+      }
+    }
+
+    if (innerFromMustache !== null && !entryKeyIsNumericSlot) {
+      if (innerFromMustache === String(entryKey)) {
+        const existingValue = normalizedMap[entryKey];
+        if (existingValue != null && String(existingValue).trim() !== '') {
+          return;
+        }
+        normalizedMap[entryKey] = '';
+        return;
+      }
+    }
+
+    if (entryKeyIsNumericSlot && templateVarNamesInOrder?.length) {
+      const slotIndexZeroBased = parseInt(String(entryKey), 10) - 1;
+      if (slotIndexZeroBased >= 0 && slotIndexZeroBased < templateVarNamesInOrder.length) {
+        normalizedMap[templateVarNamesInOrder[slotIndexZeroBased]] = trimmedValue;
+        return;
+      }
+    }
+    normalizedMap[entryKey] = trimmedValue;
+  });
+  return normalizedMap;
+}
+
+/**
+ * Rebuild `cardVarMapped` so keys match the current title/description tokens (title tokens first,
+ * then description), in order. Values are taken from the matching key, else from legacy slot
+ * `1`, `2`, … by index. If there are no `{{...}}` tokens, returns a shallow clone of `raw`.
+ */
+export function coalesceCardVarMappedToTemplate(
+  sourceCardVarMap,
+  templateTitle,
+  templateDesc,
+  rcsVarRegex,
+) {
+  const getVarNameFromToken = (token = '') => token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+  const templateVarTokens = [
+    ...(templateTitle?.match(rcsVarRegex) ?? []),
+    ...(templateDesc?.match(rcsVarRegex) ?? []),
+  ];
+  const lookupSourceMap =
+    sourceCardVarMap != null && typeof sourceCardVarMap === 'object' ? sourceCardVarMap : {};
+  if (!templateVarTokens.length) {
+    return { ...lookupSourceMap };
+  }
+  const coalescedMap = { ...lookupSourceMap };
+  const seenSemanticVarNames = new Set();
+  templateVarTokens.forEach((token, slotIndexZeroBased) => {
+    const semanticVarName = getVarNameFromToken(token);
+    if (!semanticVarName) return;
+    const numericSlotKey = String(slotIndexZeroBased + 1);
+    let valueFromSource = lookupSourceMap[numericSlotKey];
+    if (valueFromSource === undefined || valueFromSource === null) {
+      valueFromSource = lookupSourceMap[semanticVarName];
+    }
+    if (valueFromSource === undefined || valueFromSource === null) {
+      valueFromSource = lookupSourceMap[String(slotIndexZeroBased + 1)];
+    }
+    if (valueFromSource === undefined || valueFromSource === null) {
+      valueFromSource = lookupSourceMap[slotIndexZeroBased + 1];
+    }
+    const trimmedSlotValue = valueFromSource == null ? '' : String(valueFromSource).trim();
+    coalescedMap[numericSlotKey] = trimmedSlotValue;
+    if (!seenSemanticVarNames.has(semanticVarName)) {
+      seenSemanticVarNames.add(semanticVarName);
+      coalescedMap[semanticVarName] = trimmedSlotValue;
+    }
+  });
+  return coalescedMap;
+}
+
+/**
+ * Resolve the personalization value for a variable slot — aligned with createPayload:
+ * per-slot numeric keys `1`, `2`, … win over legacy semantic keys when both exist (duplicate
+ * `{{name}}` in title+desc). If semantic is explicitly cleared to '', that still wins over a
+ * stale numeric value (see tests) — except in embedded library / journey mode (`isLibraryMode`).
+ *
+ * In library mode, campaign payloads often set semantic keys to '' while numeric slot `1`,`2`,…
+ * still holds the value selected in the library; prefer that so VarSegment prepopulates.
+ *
+ * When a numeric slot is present but only whitespace / empty (common after hydration), do not
+ * treat it as authoritative — fall through to the semantic key so preview and payload match the
+ * tag the user selected (e.g. `1: ''` but `promotion_points: '{{newTag}}'`).
+ */
+export function resolveCardVarMappedSlotValue(
+  cardVarMapped,
+  varName,
+  globalSlotIndexZeroBased,
+  isLibraryMode = false,
+) {
+  const varMap = cardVarMapped ?? {};
+  const slotKey = String(globalSlotIndexZeroBased + 1);
+  const semanticEmpty =
+    Object.prototype.hasOwnProperty.call(varMap, varName)
+    && String(varMap[varName] ?? '') === '';
+  const slotNonEmpty =
+    Object.prototype.hasOwnProperty.call(varMap, slotKey)
+    && String(varMap[slotKey] ?? '').trim() !== '';
+
+  if (semanticEmpty && !(isLibraryMode && slotNonEmpty)) {
+    return '';
+  }
+  let numericSlotValue = '';
+  if (Object.prototype.hasOwnProperty.call(varMap, slotKey)) {
+    numericSlotValue = String(varMap[slotKey] ?? '');
+  } else if (Object.prototype.hasOwnProperty.call(varMap, globalSlotIndexZeroBased + 1)) {
+    numericSlotValue = String(varMap[globalSlotIndexZeroBased + 1] ?? '');
+  }
+  if (numericSlotValue.trim() !== '') {
+    return numericSlotValue;
+  }
+  if (Object.prototype.hasOwnProperty.call(varMap, varName)) {
+    return String(varMap[varName] ?? '');
+  }
+  return '';
+}
+
+/** Text-only RCS card: editor shows a single “Text message” field (description); title row is hidden. */
+export function isRcsTextOnlyCardMediaType(mediaType) {
+  return (
+    mediaType === RCS_MEDIA_TYPES.NONE
+    || String(mediaType || '').toUpperCase() === 'TEXT'
+  );
+}
+
+/**
+ * Resolve RCS card title/description for TemplatePreview (e.g. campaign slidebox preview).
+ * Mirrors `resolveTemplateWithMap` in the Rcs editor: title vars use global slots 0..n-1, then description.
+ * For text-only cards (`textOnlyCard`), ignore persisted `title` and resolve description from slot 0 — matches
+ * the editor where only the message body is shown.
+ */
+export function resolveRcsCardPreviewStrings(
+  title,
+  description,
+  cardVarMapped,
+  isLibraryMode = false,
+  textOnlyCard = false,
+) {
+  const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
+  const getVarNameFromToken = (token = '') =>
+    token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+
+  const resolveTemplateWithMap = (str = '', slotOffset = 0) => {
+    if (!str) return '';
+    const arr = splitTemplateVarStringRcs(str);
+    let varOrdinal = 0;
+    return arr
+      .map((elem) => {
+        if (rcsVarTestRegex.test(elem)) {
+          const key = getVarNameFromToken(elem);
+          const globalSlot = slotOffset + varOrdinal;
+          varOrdinal += 1;
+          const v = resolveCardVarMappedSlotValue(
+            cardVarMapped,
+            key,
+            globalSlot,
+            isLibraryMode,
+          );
+          if (v == null || String(v).trim() === '') return elem;
+          return String(v);
+        }
+        return elem;
+      })
+      .join('');
+  };
+
+  const effectiveTitle = textOnlyCard ? '' : String(title || '');
+  const titleVarCount = textOnlyCard
+    ? 0
+    : (effectiveTitle.match(rcsVarRegex) || []).length;
+  return {
+    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, 0),
+    rcsDesc: resolveTemplateWithMap(String(description || ''), titleVarCount),
+  };
+}
+
+/**
+ * Campaign consumer payload: replace each card's `title` / `description` with VarSegment-resolved
+ * tag strings (same rules as {@link resolveRcsCardPreviewStrings}). Root `rcsCardVarMapped` merges
+ * with per-card `cardVarMapped`; `cardVarMapped` on each card is left unchanged for round-trip.
+ */
+export function mapRcsCardContentForConsumerWithResolvedTags(
+  cardContentArray,
+  rootRcsCardVarMapped,
+  isFullMode,
+) {
+  const rootRecord =
+    rootRcsCardVarMapped != null && typeof rootRcsCardVarMapped === 'object'
+      ? rootRcsCardVarMapped
+      : {};
+  const list = Array.isArray(cardContentArray) ? cardContentArray : [];
+  const isLibraryMode = isFullMode !== true;
+  return list.map((card) => {
+    if (!card || typeof card !== 'object') return card;
+    const nested =
+      card.cardVarMapped != null && typeof card.cardVarMapped === 'object'
+        ? card.cardVarMapped
+        : {};
+    const merged = { ...rootRecord, ...nested };
+    const textOnly = isRcsTextOnlyCardMediaType(card.mediaType);
+    const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+      card.title ?? '',
+      card.description ?? '',
+      merged,
+      isLibraryMode,
+      textOnly,
+    );
+    return {
+      ...card,
+      title: rcsTitle,
+      description: rcsDesc,
+    };
+  });
+}
+
+/**
+ * Before save: strip only legacy numeric self-placeholders (`{{1}}`, `{{2}}`, …) mistakenly stored as
+ * slot values. Preserve semantic tokens like `{{FirstName}}` from TagList — those are valid mappings.
+ */
+export function sanitizeCardVarMappedValue(val) {
+  if (val == null) return '';
+  const trimmedDisplayString = String(val).trim();
+  if (/^\{\{\d+\}\}$/.test(trimmedDisplayString)) return '';
+  return String(val);
+}
+
+/**
+ * Same completion rule as SmsTraiEdit RCS fallback — used by `isDisableDone` from
+ * `smsFallbackData.rcsSmsFallbackVarMapped` + template string.
+ * Every variable token (DLT {#…#} or mustache {{…}}) must have a non-empty trimmed value in the map.
+ *
+ * Slot keys are usually `${token}_${segmentIndex}` (same as VarSegmentMessageEditor). Persisted / API
+ * payloads may use `${token}_${varOrdinal}` with a 1-based occurrence index (see SmsTraiEdit init).
+ * We try segment index first, then ordinal — so e.g. template `{#var#}` (segment index 0) still matches
+ * map `{#var#}_1`.
+ *
+ * @param {string} templateText
+ * @param {Record<string, string>} [varSlotValueMap={}]
+ * @returns {boolean}
+ */
+export function areAllRcsSmsFallbackVarSlotsFilled(templateText, varSlotValueMap = {}) {
+  if (!templateText || typeof templateText !== 'string') return true;
+  const segments = splitTemplateVarString(templateText, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  const hasVarToken = segments.some(
+    (segment) =>
+      typeof segment === 'string'
+      && isAnyTemplateVarToken(segment),
+  );
+  if (!hasVarToken) return true;
+  let varOrdinal = 0;
+  return segments.every((segment, segmentIndex) => {
+    if (
+      typeof segment !== 'string'
+      || !isAnyTemplateVarToken(segment)
+    ) return true;
+    varOrdinal += 1;
+    const indexKey = `${segment}_${segmentIndex}`;
+    const ordinalKey = `${segment}_${varOrdinal}`;
+    let mappedSlotValue;
+    if (Object.prototype.hasOwnProperty.call(varSlotValueMap, indexKey)) {
+      mappedSlotValue = varSlotValueMap[indexKey];
+    } else if (Object.prototype.hasOwnProperty.call(varSlotValueMap, ordinalKey)) {
+      mappedSlotValue = varSlotValueMap[ordinalKey];
+    } else {
+      mappedSlotValue = undefined;
+    }
+    if (mappedSlotValue == null) return false;
+    return String(mappedSlotValue).trim() !== '';
+  });
+}
+
 export const getRCSContent = (template) => {
   const renderRcsSuggestionsPreview = (rcsSuggestions) => {
     const renderArray = [];
@@ -84,8 +428,10 @@ export const getRCSContent = (template) => {
     media = {},
     description,
     title,
+    mediaType,
     suggestions = [],
   } = cardContent[0];
+  const isTextOnlyCard = isRcsTextOnlyCardMediaType(mediaType);
   const mediaPreview = media?.thumbnailUrl ? media.thumbnailUrl : media.mediaUrl;
   return (
     <div className="cap-rcs-creatives">
@@ -95,13 +441,15 @@ export const getRCSContent = (template) => {
           className="rcs-listing-image"
         />
       )}
-      <CapLabel
-        type="label19"
-        className="rcs-listing-content title"
-        fontWeight="bold"
-      >
-        {title}
-      </CapLabel>
+      {!isTextOnlyCard && (
+        <CapLabel
+          type="label19"
+          className="rcs-listing-content title"
+          fontWeight="bold"
+        >
+          {title}
+        </CapLabel>
+      )}
       <CapLabel type="label19" className="rcs-listing-content desc">
         {description}
       </CapLabel>

package/app/v2Containers/Sms/Create/index.js

@@ -33,6 +33,10 @@ import injectReducer from '../../../utils/injectReducer';
 import v2SmsCreateReducer from './reducer';
 import * as globalActions from '../../Cap/actions';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
+import {
+  getSmsEmbeddedFooterValidity,
+  getSmsMessageFromFormData,
+} from '../smsFormDataHelpers';
 
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -51,6 +55,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
+      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -140,8 +145,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+    // Only trigger on actual Done click (isGetFormData false -> true). Prevents auto-submit after user fixes brace error.
+    if (!nextProps.isFullMode && nextProps.isGetFormData && !this.props.isGetFormData) {
+      this.setState({ startValidation: true, pendingGetFormData: true });
     } else if (nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -157,7 +163,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           layout: 'SMS',
           type: 'TAG',
           context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+          embedded: this.props.forceFullTagContext
+            ? 'full'
+            : (this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full'),
         };
         if (this.props.getDefaultTags) {
           query.context = this.props.getDefaultTags;
@@ -170,7 +178,20 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
   }
 
+  componentDidUpdate() {
+    if (!this.props.embeddedSmsFallback || typeof this.props.onEmbeddedSmsFooterValidity !== 'function') {
+      return;
+    }
+    // Report validity on every update. The reducer in SmsFallback bails out (returns same
+    // state reference) when the value is unchanged, so no re-render loop is triggered.
+    // Calling unconditionally handles both mutation-based and reference-based FormBuilder updates.
+    this.props.onEmbeddedSmsFooterValidity(getSmsEmbeddedFooterValidity(this.state.formData, this.state.tabCount));
+  }
+
   componentWillUnmount() {
+    if (this.pendingGetFormDataTimeout) {
+      clearTimeout(this.pendingGetFormDataTimeout);
+    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -199,6 +220,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (currentTab) {
       this.setState({currentTab});
     }
+    // Clear footer validation errors on input change so they refresh on next validation
+    if (this.props.showLiquidErrorInFooter) {
+      this.props.showLiquidErrorInFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
+    }
   }
 
   onTagSelect(data, currentTab) {
@@ -266,6 +291,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const result = {};
     result.base = baseData;
+    /* Root field used by FormBuilder; embedded getFormSubscriptionData reads value.base */
+    if (formData['template-name'] !== undefined) {
+      result.base['template-name'] = formData['template-name'];
+    }
     if (this.state.isValid) {
       const msgObj = charCount.updateCharCount(baseData['sms-editor']);
       result.base.msg_count = msgObj.msgCount;
@@ -349,7 +378,25 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({isFormValid, errorData});
+    this.setState({ isFormValid, errorData }, () => {
+      if (this.state.pendingGetFormData && !isFormValid) {
+        this.setState({ pendingGetFormData: false, startValidation: false });
+        // Reset parent's Done state so next Done click is a fresh attempt
+        if (this.props.onValidationFail) {
+          this.props.onValidationFail();
+        }
+        return;
+      }
+      // In library mode with SMS, submit only when FormBuilder calls onSubmit (after liquid validation).
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData && this.props.isFullMode) {
+        if (this.pendingGetFormDataTimeout) {
+          clearTimeout(this.pendingGetFormDataTimeout);
+          this.pendingGetFormDataTimeout = null;
+        }
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+    });
   }
 
   injectMessages(elem) {
@@ -854,7 +901,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       layout: 'SMS',
       type: 'TAG',
       context: (data && data.toLowerCase() === 'all') ? 'default' : (data && data.toLowerCase()),
-      embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+      embedded: this.props.forceFullTagContext
+        ? 'full'
+        : (this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full'),
     };
     this.props.globalActions.fetchSchemaForEntity(query);
   }
@@ -862,10 +911,22 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   removeStandAlone() {
     const schema = _.cloneDeep(this.state.schema);
     const childSections = _.get(schema, 'standalone.sections[0].childSections');
+    if (!childSections || childSections.length <= 2) {
+      return;
+    }
+    /* In-form Save / Test row removed for embedded SMS; slidebox footer (SlideBoxFooter) provides actions — see CreativesContainer. */
     childSections.splice(2, 1);
-    const fields = _.get(childSections, '[1].childSections[0].childSections');//removing template name section
-    fields.splice(0, 1);
-    _.set(childSections, '[1].childSections[0].childSections', fields);
+    /*
+     * Creatives library also drops the standalone template-name block because `SlideBoxHeader` shows the name.
+     * RCS SMS fallback uses the same slidebox footer but no template-name header — keep Creative name in the form.
+     */
+    if (!this.props.embeddedSmsFallback) {
+      const fields = _.get(childSections, '[1].childSections[0].childSections');
+      if (fields && fields.length > 0) {
+        fields.splice(0, 1);
+        _.set(childSections, '[1].childSections[0].childSections', fields);
+      }
+    }
     _.set(schema, 'standalone.sections[0].childSections', childSections);
     this.setState({ schema, loadingStatus: this.state.loadingStatus + 1 });
   }
@@ -911,37 +972,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({startValidation: false});
   }
 
-  getTemplateContent = () => {
-    // Get SMS content from formData
-    if (!this.state.formData || !Array.isArray(this.state.formData) || this.state.formData.length === 0) {
-      return '';
-    }
-    const currentTabData = this.state.formData[this.state.currentTab - 1];
-    if (!currentTabData) {
-      return '';
-    }
-    
-    // PRIORITY 1: Check direct path first (most common for SMS)
-    // This handles: formData[0]['sms-editor']
-    if (currentTabData['sms-editor']) {
-      return currentTabData['sms-editor'];
-    }
-    
-    // PRIORITY 2: Check activeTab structure (for versioned templates)
-    // This handles: formData[0][activeTab]['sms-editor']
-    const activeTab = currentTabData?.activeTab || 'base';
-    if (currentTabData[activeTab]?.['sms-editor']) {
-      return currentTabData[activeTab]['sms-editor'];
-    }
-    
-    // PRIORITY 3: Check base explicitly (fallback)
-    // This handles: formData[0]['base']['sms-editor']
-    if (currentTabData['base']?.['sms-editor']) {
-      return currentTabData['base']['sms-editor'];
-    }
-    
-    return '';
-  }
+  getTemplateContent = () =>
+    getSmsMessageFromFormData(this.state.formData, this.state.currentTab);
 
   handleTestAndPreview = () => {
     // If parent is managing state (props exist), call parent handler
@@ -970,6 +1002,44 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   saveFormData() {
+    /*
+     * RCS SMS fallback slidebox (embeddedSmsFallback): parent passes isFullMode from RCS, but we must not
+     * call createTemplate — that spins CapSpin on createTemplateInProgress and is not the embedded contract.
+     * Same as library: hand off form payload via getFormSubscriptionData.
+     */
+    if (this.props.embeddedSmsFallback && this.props.getFormSubscriptionData) {
+      const { isTemplateNameEmpty, isMessageEmpty } = getSmsEmbeddedFooterValidity(
+        this.state.formData,
+        this.state.tabCount,
+      );
+      if (isTemplateNameEmpty || isMessageEmpty) {
+        this.setState({ startValidation: true, pendingGetFormData: false });
+        if (this.props.onValidationFail) {
+          this.props.onValidationFail();
+        }
+        return;
+      }
+      const payload = this.getFormData();
+      if (!payload.validity) {
+        if (this.props.onValidationFail) {
+          this.props.onValidationFail();
+        }
+        this.setState({ pendingGetFormData: false, startValidation: false });
+        return;
+      }
+      this.props.getFormSubscriptionData(payload);
+      this.setState({ pendingGetFormData: false, startValidation: false });
+      return;
+    }
+    // In library mode: FormBuilder calls onSubmit only after liquid validation succeeds.
+    // Submit to parent here so the slidebox can close with valid data.
+    if (!this.props.isFullMode) {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+      return;
+    }
     //Logic to save in db etc
     const formData = _.cloneDeep(this.state.formData);
     const obj = {};
@@ -1060,6 +1130,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
+                tagListGetPopupContainer={this.props.tagListGetPopupContainer}
+                tagListPopoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
+                tagListPopoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
               />
             </CapColumn>
           </CapRow>
@@ -1072,6 +1146,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           formData={this.state.formData}
           content={this.getTemplateContent()}
           currentChannel={SMS}
+          smsRegister={this.props.smsRegister}
         />
       </div>
     );
@@ -1096,10 +1171,18 @@ Create.propTypes = {
   isLoadingMetaEntities: PropTypes.bool,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
   isTestAndPreviewMode: PropTypes.bool,
+  smsRegister: PropTypes.any,
+  forceFullTagContext: PropTypes.bool,
+  embeddedSmsFallback: PropTypes.bool,
+  onEmbeddedSmsFooterValidity: PropTypes.func,
+  tagListGetPopupContainer: PropTypes.func,
+  tagListPopoverOverlayStyle: PropTypes.object,
+  tagListPopoverOverlayClassName: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({

package/app/v2Containers/Sms/Create/messages.js

@@ -90,6 +90,10 @@ export default defineMessages({
     id: 'creatives.containersV2.Create.validationError',
     defaultMessage: 'Validation error',
   },
+  "unbalancedCurlyBraces": {
+    id: 'creatives.containersV2.Create.unbalancedCurlyBraces',
+    defaultMessage: 'Please close all curly braces in the message.',
+  },
   "smsTemplateCreatedSuccess": {
     id: 'creatives.containersV2.Create.smsTemplateCreatedSuccess',
     defaultMessage: 'SMS Template Created Successfully',