cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/Rcs/index.js

@@ -1,13 +1,12 @@
 /* eslint-disable no-unused-expressions */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import cloneDeep from 'lodash/cloneDeep';
 import isNil from 'lodash/isNil';
-import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
@@ -22,44 +21,34 @@ import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import CapCard from '@capillarytech/cap-ui-library/CapCard';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
-import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
-import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 import CapError from '@capillarytech/cap-ui-library/CapError';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-
-import {
-  CAP_G01,
-  CAP_SPACE_04,
-  CAP_SPACE_16,
-  CAP_SPACE_24,
-  CAP_SPACE_28,
-  CAP_SPACE_32,
-  CAP_WHITE,
-  CAP_SECONDARY,
-} from '@capillarytech/cap-ui-library/styled/variables';
 
 import CapVideoUpload from '../../v2Components/CapVideoUpload';
 import * as globalActions from '../Cap/actions';
 import CapActionButton from '../../v2Components/CapActionButton';
 import { makeSelectRcs, makeSelectAccount } from './selectors';
-import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import {
   isLoadingMetaEntities,
   makeSelectMetaEntities,
   setInjectedTags,
-  selectCurrentOrgDetails,
 } from '../Cap/selectors';
 import * as RcsActions from './actions';
+import { isAiContentBotDisabled } from '../../utils/common';
 import * as TemplatesActions from '../Templates/actions';
 import './index.scss';
+import {
+  normalizeLibraryLoadedTitleDesc,
+  mergeRcsSmsFallBackContentFromDetails,
+  mergeRcsSmsFallbackVarMapLayers,
+  pickFirstSmsFallbackTemplateString,
+  syncCardVarMappedSemanticsFromSlots,
+  hasMeaningfulSmsFallbackShape,
+  getLibrarySmsFallbackApiBaselineFromTemplateData,
+} from './rcsLibraryHydrationUtils';
 import {
   RCS,
   SMS,
@@ -76,14 +65,11 @@ import {
   RCS_IMG_SIZE,
   RCS_DLT_MODE,
   CTA,
-  AI_CONTENT_BOT_DISABLED,
   RCS_STATUSES,
   TITLE_TEXT,
   MESSAGE_TEXT,
   ALLOWED_EXTENSIONS_VIDEO_REGEX,
   RCS_VIDEO_SIZE,
-  TEMPLATE_HEADER_MAX_LENGTH,
-  TEMPLATE_MESSAGE_MAX_LENGTH,
   RCS_THUMBNAIL_MIN_SIZE,
   RCS_THUMBNAIL_MAX_SIZE,
   contentType,
@@ -96,35 +82,45 @@ import {
   MAX_BUTTONS,
   INITIAL_SUGGESTIONS_DATA_STOP,
   RCS_BUTTON_TYPES,
-  titletype,
-  descType,
   STANDALONE,
   VERTICAL,
   SMALL,
   MEDIUM,
   RICHCARD,
+  RCS_NUMERIC_VAR_NAME_REGEX,
+  RCS_TAG_AREA_FIELD_TITLE,
+  RCS_TAG_AREA_FIELD_DESC,
 } from './constants';
 import globalMessages from '../Cap/messages';
 import messages from './messages';
 import creativesMessages from '../CreativesContainer/messages';
 import withCreatives from '../../hoc/withCreatives';
 import UnifiedPreview from '../../v2Components/CommonTestAndPreview/UnifiedPreview';
-import { ANDROID } from '../../v2Components/CommonTestAndPreview/constants';
+import VarSegmentMessageEditor from '../../v2Components/VarSegmentMessageEditor';
+import { ANDROID, RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
+import { splitTemplateVarString } from '../../utils/templateVarUtils';
 import CapImageUpload from '../../v2Components/CapImageUpload';
-import addCreativesIcon from '../Assets/images/addCreativesIllustration.svg';
 import Templates from '../Templates';
 import SmsTraiEdit from '../SmsTrai/Edit';
+import SmsFallback from '../../v2Components/SmsFallback';
+import { CHANNELS_TO_HIDE_FOR_SMS_ONLY } from '../../v2Components/SmsFallback/constants';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
-import { getCdnUrl } from '../../utils/cdnTransformation';
+import { isTraiDLTEnable } from '../../utils/common';
 import { isTagIncluded } from '../../utils/commonUtils';
 import injectReducer from '../../utils/injectReducer';
 import v2RcsReducer from './reducer';
-import { getTemplateStatusType } from './utils';
-
+import {
+  areAllRcsSmsFallbackVarSlotsFilled,
+  buildRcsNumericMustachePlaceholderRegex,
+  getTemplateStatusType,
+  normalizeCardVarMapped,
+  coalesceCardVarMappedToTemplate,
+  resolveCardVarMappedSlotValue,
+  sanitizeCardVarMappedValue,
+} from './utils';
 
-const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
   const {
     intl,
@@ -138,18 +134,17 @@ export const Rcs = (props) => {
     templatesActions,
     globalActions,
     location,
-    handleClose,
     getDefaultTags,
     supportedTags,
     metaEntities,
     injectedTags,
     loadingTags,
     getFormData,
-    isDltEnabled,
     smsRegister,
+    orgUnitId,
     selectedOfferDetails,
-    currentOrgDetails,
     eventContextTags,
+    waitEventContextTags,
     accountData = {},
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
@@ -158,8 +153,8 @@ export const Rcs = (props) => {
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
-  const { CapCustomCardList } = CapCustomCard;
   const [isEditFlow, setEditFlow] = useState(false);
+  const isEditLike = isEditFlow || !isFullMode;
   const [tags, updateTags] = useState([]);
   const [spin, setSpin] = useState(false);
   //template
@@ -168,112 +163,71 @@ export const Rcs = (props) => {
   const [templateMediaType, setTemplateMediaType] = useState(
     RCS_MEDIA_TYPES.NONE,
   );
-  const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [templateTitle, setTemplateTitle] = useState('');
   const [templateDesc, setTemplateDesc] = useState('');
   const [templateDescError, setTemplateDescError] = useState(false);
   const [templateStatus, setTemplateStatus] = useState('');
-  const [templateDate, setTemplateDate] = useState('');
-  //fallback
-  const [fallbackMessage, setFallbackMessage] = useState('');
-  const [fallbackMessageError, setFallbackMessageError] = useState(false);
   //fallback dlt
   const [showDltContainer, setShowDltContainer] = useState(false);
   const [dltMode, setDltMode] = useState('');
   const [dltEditData, setDltEditData] = useState({});
-  const [showDltCard, setShowDltCard] = useState(false);
-  const [fallbackPreviewmode, setFallbackPreviewmode] = useState(false);
-  const [dltPreviewData, setDltPreviewData] = useState('');
+  /** `undefined` = not hydrated yet; `null` = no fallback / user removed template; object = selected fallback */
+  const [smsFallbackData, setSmsFallbackData] = useState(undefined);
   const [suggestions, setSuggestions] = useState(INITIAL_SUGGESTIONS_DATA_STOP);
-  const [buttonType, setButtonType] = useState(RCS_BUTTON_TYPES.NONE);
+  const buttonType = RCS_BUTTON_TYPES.NONE;
   const [suggestionError, setSuggestionError] = useState(true);
   const [templateType, setTemplateType] = useState('text_message');
-  const [templateHeader, setTemplateHeader] = useState('');
-  const [templateMessage, setTemplateMessage] = useState('');
-  const [templateHeaderError, setTemplateHeaderError] = useState('');
-  const [templateMessageError, setTemplateMessageError] = useState('');
-  const validVarRegex = /\{\{(\d+)\}\}/g;
-  const [updatedTitleData, setUpdatedTitleData] = useState([]);
-  const [updatedDescData, setUpdatedDescData] = useState([]);
   const [titleVarMappedData, setTitleVarMappedData] = useState({});
   const [descVarMappedData, setDescVarMappedData] = useState({});
   const [titleTextAreaId, setTitleTextAreaId] = useState();
   const [descTextAreaId, setDescTextAreaId] = useState();
   const [assetList, setAssetList] = useState({});
-  const [assetListImage, setAssetListImage] = useState('');
   const [rcsImageSrc, updateRcsImageSrc] = useState('');
   const [rcsVideoSrc, setRcsVideoSrc] = useState({});
   const [rcsThumbnailSrc, setRcsThumbnailSrc] = useState('');
   const [selectedDimension, setSelectedDimension] = useState(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
-  const [imageError, setImageError] = useState(null);
   const [templateTitleError, setTemplateTitleError] = useState(false);
   const [cardVarMapped, setCardVarMapped] = useState({});
+  /** Bump when hydrated cardVarMapped payload changes so VarSegment TextAreas remount with fresh valueMap (controlled-input sync). */
+  const [rcsVarSegmentEditorRemountKey, setRcsVarSegmentEditorRemountKey] = useState(0);
+  const lastHydratedRcsCardVarSignatureRef = useRef(null);
+
+  /**
+   * Hydrate only from template payload — not from full `rcsData`. Uploads/asset updates change `rcsData`
+   * without changing `templateDetails`; re-running hydration then cleared `smsFallbackData`, so the SMS
+   * fallback card / content stopped appearing until re-selected.
+   */
+  const rcsHydrationDetails = useMemo(
+    () => (isFullMode ? rcsData?.templateDetails : templateData),
+    [isFullMode, rcsData?.templateDetails, templateData],
+  );
 
-  // TestAndPreviewSlidebox state
-  const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
-  const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
-
-  const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
-
-  // Get template content for TestAndPreviewSlidebox
-  // Reference: Based on getRcsPreview() function (lines 2087-2111) which prepares content for TemplatePreview
-  // getRcsPreview ALWAYS uses templateTitle and templateDesc for ALL template types (text_message, rich_card, carousel)
-  // renderTextComponent (lines 1317-1485) also uses templateTitle and templateDesc
-  // Note: templateHeader and templateMessage are defined but NOT used in the component
-  const getTemplateContent = useCallback(() => {
-    const isMediaTypeImage = templateMediaType === RCS_MEDIA_TYPES.IMAGE;
-    const isMediaTypeVideo = templateMediaType === RCS_MEDIA_TYPES.VIDEO;
-    const isMediaTypeText = templateMediaType === RCS_MEDIA_TYPES.NONE;
-
-    // Build media preview object (same pattern as getRcsPreview)
-    const mediaPreview = {};
-    if (isMediaTypeImage && rcsImageSrc) {
-      mediaPreview.rcsImageSrc = rcsImageSrc;
-    }
-    if (isMediaTypeVideo && !isMediaTypeText) {
-      // For video, use thumbnailSrc as rcsVideoSrc (same as getRcsPreview line 2104)
-      if (rcsThumbnailSrc) {
-        mediaPreview.rcsVideoSrc = rcsThumbnailSrc;
-      } else if (rcsVideoSrc?.videoSrc) {
-        mediaPreview.rcsVideoSrc = rcsVideoSrc.videoSrc;
-      }
-      // Also include thumbnailSrc separately if available
-      if (rcsThumbnailSrc) {
-        mediaPreview.rcsThumbnailSrc = rcsThumbnailSrc;
+  /** Skip duplicate /meta/TAG fetches: same query is triggered from (1) useEffect below, (2) title TagList mount, (3) description TagList mount — each calls getTagsforContext('Outbound'). */
+  const lastTagSchemaQueryKeyRef = useRef(null);
+  /**
+   * Library: parent often passes a new `templateData` object reference every render. Re-applying the same
+   * SMS fallback snapshot was resetting `smsFallbackData` and caused VarSegment inputs to flicker old/new.
+   */
+  const lastSmsFallbackHydrationKeyRef = useRef(null);
+
+  const fetchTagSchemaIfNewQuery = useCallback(
+    (query) => {
+      const key = JSON.stringify(query);
+      if (lastTagSchemaQueryKeyRef.current === key) {
+        return;
       }
-    }
-
-    // Build content object
-    // Reference: getRcsPreview (line 2091-2092) uses templateTitle and templateDesc for ALL cases
-    // templateTitle is used for rich_card/carousel title, empty for text_message
-    // templateDesc is used for ALL types (text message body or rich card description)
-    // For UnifiedPreview, we map templateTitle -> templateHeader and templateDesc -> templateMessage
-    const contentObj = {
-      // Map templateTitle to templateHeader and templateDesc to templateMessage
-      templateHeader: templateTitle,
-      templateMessage: templateDesc,
-      ...mediaPreview,
-      ...(suggestions.length > 0 && {
-        suggestions: suggestions,
-      }),
-    };
+      lastTagSchemaQueryKeyRef.current = key;
+      globalActions.fetchSchemaForEntity(query);
+    },
+    [globalActions],
+  );
 
-    return contentObj;
-  }, [
-    templateMediaType,
-    templateTitle,
-    templateDesc,
-    rcsImageSrc,
-    rcsVideoSrc,
-    rcsThumbnailSrc,
-    suggestions,
-    selectedDimension,
-  ]);
+  // TestAndPreviewSlidebox state
+  const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
 
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
     setShowTestAndPreviewSlidebox(true);
-    setIsTestAndPreviewMode(true);
     if (propsHandleTestAndPreview) {
       propsHandleTestAndPreview();
     }
@@ -282,23 +236,24 @@ export const Rcs = (props) => {
   // Handle close Test and Preview slidebox
   const handleCloseTestAndPreview = useCallback(() => {
     setShowTestAndPreviewSlidebox(false);
-    setIsTestAndPreviewMode(false);
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
   }, [propsHandleCloseTestAndPreview]);
 
-  // Helper to get RCS orientation from selectedDimension
-  const getRcsOrientation = () => {
-    const isMediaTypeImage = templateMediaType === RCS_MEDIA_TYPES.IMAGE;
-    if (isMediaTypeImage) {
-      return RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL;
-    }
-    // For video
-    return RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL;
-  };
+  /** Merge editor slot map into `smsFallbackData` (like `cardVarMapped` for title/desc). */
+  const handleSmsFallbackEditorStateChange = useCallback((patch) => {
+    setSmsFallbackData((prev) => {
+      if (!patch || typeof patch !== 'object') return prev;
+      // Merge even when `prev` is null so tag/slot updates apply on top of `smsFromApiShape` in createPayload.
+      return { ...(prev || {}), ...patch };
+    });
+  }, []);
 
+  /** RCS template save / edit API: `rcsContent.accountId` must stay `sourceAccountIdentifier` (pairs with accessToken). */
   const [accountId, setAccountId] = useState('');
+  /** WeCRM list row `id` — only for CommonTestAndPreview → createMessageMeta payload, not for template save. */
+  const [wecrmAccountId, setWecrmAccountId] = useState('');
   const [accessToken, setAccessToken] = useState('');
   const [hostName, setHostName] = useState('');
   const [accountName, setAccountName] = useState('');
@@ -306,14 +261,23 @@ export const Rcs = (props) => {
     const accountObj = accountData.selectedRcsAccount || {};
     if (!isEmpty(accountObj)) {
       const {
+        id: wecrmId,
         sourceAccountIdentifier = '',
         configs = {},
       } = accountObj;
-      
       setAccountId(sourceAccountIdentifier);
+      setWecrmAccountId(
+        wecrmId != null && String(wecrmId).trim() !== '' ? String(wecrmId) : '',
+      );
       setAccessToken(configs.accessToken || '');
       setHostName(accountObj.hostName || '');
       setAccountName(accountObj.name || '');
+    } else {
+      setAccountId('');
+      setWecrmAccountId('');
+      setAccessToken('');
+      setHostName('');
+      setAccountName('');
     }
   }, [accountData.selectedRcsAccount]);
 
@@ -331,10 +295,7 @@ export const Rcs = (props) => {
       label: formatMessage(messages.mediaVideo),
     },
   ];
-  const { accessibleFeatures = [] } = currentOrgDetails || {};
-  const isAiContentBotDisabled = accessibleFeatures?.includes(
-    AI_CONTENT_BOT_DISABLED
-  );
+  const aiContentBotDisabled = isAiContentBotDisabled();
 
   const updateButtonChange = (data, index) => {
     if (data && data.text) {
@@ -372,7 +333,9 @@ export const Rcs = (props) => {
     if (isFullMode) return;
     if (loadingTags || !tags || tags.length === 0) return;
     const templateStr = type === TITLE_TEXT ? templateTitle : templateDesc;
-    const resolved = resolveTemplateWithMap(templateStr); // placeholders -> mapped value (or '')
+    const slotOffset =
+      type === TITLE_TEXT ? 0 : (templateTitle ? templateTitle.match(rcsVarRegex) || [] : []).length;
+    const resolved = resolveTemplateWithMap(templateStr, slotOffset); // placeholders -> mapped value (or '')
     if (!resolved) {
       if (type === TITLE_TEXT) setTemplateTitleError(false);
       if (type === MESSAGE_TEXT) setTemplateDescError(false);
@@ -394,23 +357,15 @@ export const Rcs = (props) => {
     const validationResponse =
       validateTags({
         content: contentForValidation,
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-      eventContextTags,
-      isFullMode,
-    }) || {};
-    const unsupportedTagsLengthCheck =
-      validationResponse?.unsupportedTags?.length > 0;
-      const errorMsg =
-        (unsupportedTagsLengthCheck &&
-          formatMessage(globalMessages.unsupportedTagsValidationError, {
-            unsupportedTags: validationResponse.unsupportedTags,
-          })) ||
-        (validationResponse.isBraceError &&
-          formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
-        false;
+        tagsParam: tags,
+        location,
+        tagModule: getDefaultTags,
+        isFullMode,
+      }) || {};
+    const errorMsg =
+      (validationResponse?.isBraceError &&
+        formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
+      false;
     if (type === TITLE_TEXT) setTemplateTitleError(errorMsg);
     if (type === MESSAGE_TEXT) setTemplateDescError(errorMsg);
   };
@@ -425,13 +380,41 @@ export const Rcs = (props) => {
 
   const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '');
 
-  const resolveTemplateWithMap = (str = '') => {
+  const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
+
+  /** Global slot index (0-based, title vars then desc) for a VarSegmentMessageEditor `id` (`{{tok}}_segIdx`), or null if not found. */
+  const getGlobalSlotIndexForRcsFieldId = (varSegmentCompositeId, fieldTemplateStr, fieldType) => {
+    const titleVarTokenMatches = templateTitle?.match(rcsVarRegex) ?? [];
+    const offset = fieldType === TITLE_TEXT ? 0 : titleVarTokenMatches.length;
+    const templateSegments = splitTemplateVarStringRcs(fieldTemplateStr ?? '');
+    let varOrdinal = 0;
+    for (let segmentIndexInField = 0; segmentIndexInField < templateSegments.length; segmentIndexInField += 1) {
+      const segmentToken = templateSegments[segmentIndexInField];
+      if (rcsVarTestRegex.test(segmentToken)) {
+        if (`${segmentToken}_${segmentIndexInField}` === varSegmentCompositeId) {
+          return offset + varOrdinal;
+        }
+        varOrdinal += 1;
+      }
+    }
+    return null;
+  };
+
+  const resolveTemplateWithMap = (str = '', slotOffset = 0) => {
     if (!str) return '';
-    const arr = splitTemplateVarString(str);
+    const arr = splitTemplateVarStringRcs(str);
+    let varOrdinal = 0;
     return arr.map((elem) => {
       if (rcsVarTestRegex.test(elem)) {
         const key = getVarNameFromToken(elem);
-        const v = cardVarMapped?.[key];
+        const globalSlot = slotOffset + varOrdinal;
+        varOrdinal += 1;
+        const v = resolveCardVarMappedSlotValue(
+          cardVarMapped,
+          key,
+          globalSlot,
+          isEditLike,
+        );
         if (isNil(v) || String(v)?.trim?.() === '') return elem;
         return String(v);
       }
@@ -439,107 +422,154 @@ export const Rcs = (props) => {
     }).join('');
   };
 
+  /**
+   * Content for TestAndPreviewSlidebox — apply cardVarMapped whenever the slot editor is shown
+   * (VarSegmentMessageEditor: isEditFlow || !isFullMode). Full-mode create without edit uses plain
+   * TextArea only — no mapping. Full-mode + edit uses slots; !isFullMode alone is not enough.
+   */
+  const getTemplateContent = useCallback(() => {
+    const isMediaTypeImage = templateMediaType === RCS_MEDIA_TYPES.IMAGE;
+    const isMediaTypeVideo = templateMediaType === RCS_MEDIA_TYPES.VIDEO;
+    const isMediaTypeText = templateMediaType === RCS_MEDIA_TYPES.NONE;
 
-  useEffect(() => {
-    if (isFullMode || isEditFlow) return;
-    const tokens = [
-      ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
-      ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
-    ];
-    if (!tokens.length) return;
-    setCardVarMapped((prev) => {
-      const next = { ...(prev || {}) };
-      let changed = false;
-      tokens.forEach((t) => {
-        const name = getVarNameFromToken(t);
-        if (name && !Object.prototype.hasOwnProperty.call(next, name)) {
-          next[name] = '';
-          changed = true;
-        }
-      });
-      return changed ? next : prev;
-    });
-  }, [isFullMode, templateTitle, templateDesc]);
+    const isSlotMappingMode = isEditFlow || !isFullMode;
+    const titleVarCountForResolve = isMediaTypeText
+      ? 0
+      : ((templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []).length);
+    const resolvedTitle = isMediaTypeText
+      ? ''
+      : (isSlotMappingMode ? resolveTemplateWithMap(templateTitle, 0) : templateTitle);
+    const resolvedDesc = isSlotMappingMode
+      ? resolveTemplateWithMap(templateDesc, titleVarCountForResolve)
+      : templateDesc;
 
+    const mediaPreview = {};
+    if (isMediaTypeImage && rcsImageSrc) {
+      mediaPreview.rcsImageSrc = rcsImageSrc;
+    }
+    if (isMediaTypeVideo && !isMediaTypeText) {
+      if (rcsThumbnailSrc) {
+        mediaPreview.rcsVideoSrc = rcsThumbnailSrc;
+      } else if (rcsVideoSrc?.videoSrc) {
+        mediaPreview.rcsVideoSrc = rcsVideoSrc.videoSrc;
+      }
+      if (rcsThumbnailSrc) {
+        mediaPreview.rcsThumbnailSrc = rcsThumbnailSrc;
+      }
+    }
+
+    const contentObj = {
+      templateHeader: resolvedTitle,
+      templateMessage: resolvedDesc,
+      ...mediaPreview,
+      ...(suggestions.length > 0 && {
+        suggestions: suggestions,
+      }),
+    };
+
+    return contentObj;
+  }, [
+    templateMediaType,
+    templateTitle,
+    templateDesc,
+    rcsImageSrc,
+    rcsVideoSrc,
+    rcsThumbnailSrc,
+    suggestions,
+    selectedDimension,
+    isFullMode,
+    isEditFlow,
+    cardVarMapped,
+  ]);
+
+  const testAndPreviewContent = useMemo(() => getTemplateContent(), [getTemplateContent]);
 
-  const RcsLabel = styled.div`
-    display: flex;
-    margin-top: 20px;
-  `;
   const paramObj = params || {};
   useEffect(() => {
-  const { id } = paramObj;
-  if (id && isFullMode) {
-    setSpin(true);
-    actions.getTemplateDetails(id, setSpin);
-  }
-  return () => {
-    actions.clearEditResponse();
-  };
-  }, [paramObj.id]);
+    const { id } = paramObj;
+    if (id && isFullMode) {
+      setSpin(true);
+      actions.getTemplateDetails(id, setSpin);
+    }
+    return () => {
+      actions.clearEditResponse();
+    };
+  }, [paramObj.id, isFullMode]);
 
   useEffect(() => {
-      if (!(isEditFlow || !isFullMode)) return;
-
-      const initField = (targetString, currentVarMap, setVarMap, setUpdated) => {
-        const arr = splitTemplateVarString(targetString);
-        if (!arr?.length) {
-          setVarMap({});
-          setUpdated([]);
-          return;
+    if (!(isEditFlow || !isFullMode)) return;
+
+    const titleTokenCount = (templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []).length;
+
+    const initField = (targetString, setVarMap, slotOffset) => {
+      const arr = splitTemplateVarStringRcs(targetString);
+      if (!arr?.length) {
+        setVarMap({});
+        return;
+      }
+      const nextVarMap = {};
+      let varOrdinal = 0;
+      arr.forEach((elem, idx) => {
+        // RCS placeholders are alphanumeric/underscore (e.g. {{user_name}}), not numeric-only
+        if (rcsVarTestRegex.test(elem)) {
+          const id = `${elem}_${idx}`;
+          const varName = getVarNameFromToken(elem);
+          const globalSlot = slotOffset + varOrdinal;
+          varOrdinal += 1;
+          const mappedValue = resolveCardVarMappedSlotValue(
+            cardVarMapped,
+            varName,
+            globalSlot,
+            isEditLike,
+          );
+          nextVarMap[id] = mappedValue;
         }
-        const nextVarMap = {};
-        const nextUpdated = [...arr];
-        arr.forEach((elem, idx) => {
-          // RCS placeholders are alphanumeric/underscore (e.g. {{user_name}}), not numeric-only
-          if (rcsVarTestRegex.test(elem)) {
-            const id = `${elem}_${idx}`;
-            const varName = getVarNameFromToken(elem);
-            const mappedValue = (cardVarMapped?.[varName] ?? '').toString();
-            nextVarMap[id] = mappedValue;
-            if (mappedValue !== '') {
-              nextUpdated[idx] = mappedValue;
-            } else {
-              nextUpdated[idx] = elem;
-            }
-          }
-        });
-        setVarMap(nextVarMap);
-        setUpdated(nextUpdated);
-      };
+      });
+      setVarMap(nextVarMap);
+    };
 
-      initField(templateTitle, titleVarMappedData, setTitleVarMappedData, setUpdatedTitleData);
-      initField(templateDesc, descVarMappedData, setDescVarMappedData, setUpdatedDescData);
-    }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
-    
-    useEffect(() => {
-      if(!isEditFlow && isFullMode){
+    initField(templateTitle, setTitleVarMappedData, 0);
+    initField(templateDesc, setDescVarMappedData, titleTokenCount);
+  }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
+
+  useEffect(() => {
+    if (!isEditFlow && isFullMode) {
       setRcsVideoSrc({});
       updateRcsImageSrc('');
       setUpdateRcsImageSrc('');
       updateRcsThumbnailSrc('');
       setAssetList({});
-      }
-     }, [templateMediaType]);
+    }
+  }, [templateMediaType]);
   
-    const templateStatusHelper = (details) => {
-      const status = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
-      switch (status) {
-        case RCS_STATUSES.approved:
+    /** Status on first card — same merged card as title/description/cardVarMapped (library may only set rcsContent at root). */
+    const templateStatusHelper = (cardContentFirst) => {
+      const raw =
+        cardContentFirst?.Status
+        ?? cardContentFirst?.status
+        ?? cardContentFirst?.approvalStatus
+        ?? '';
+      const status = typeof raw === 'string' ? raw.trim() : String(raw);
+      const n = status.toLowerCase();
+      switch (n) {
+        case 'approved':
           setTemplateStatus(RCS_STATUSES.approved);
           break;
-        case RCS_STATUSES.pending:
+        case 'pending':
           setTemplateStatus(RCS_STATUSES.pending);
           break;
-        case RCS_STATUSES.awaitingApproval:
+        case 'awaitingapproval':
           setTemplateStatus(RCS_STATUSES.awaitingApproval);
           break;
-        case RCS_STATUSES.unavailable:
+        case 'unavailable':
           setTemplateStatus(RCS_STATUSES.unavailable);
           break;
-        case RCS_STATUSES.rejected:
+        case 'rejected':
           setTemplateStatus(RCS_STATUSES.rejected);
           break;
+        case 'created':
+          setTemplateStatus(RCS_STATUSES.created);
+          break;
         default:
           setTemplateStatus(status);
           break;
@@ -550,7 +580,6 @@ export const Rcs = (props) => {
       if (mediaType) {
       setTemplateMediaType(mediaType);
     }
-    const tempOrientation = cardSettings.cardOrientation;
     const tempAlignment = cardSettings.mediaAlignment;
     const tempHeight = mediaData.height;
     
@@ -593,44 +622,197 @@ export const Rcs = (props) => {
   };
   
   useEffect(() => {
-    const details = isFullMode ? rcsData?.templateDetails : templateData;
+    const details = rcsHydrationDetails;
     if (details && Object.keys(details).length > 0) {
-      if (!isFullMode) {
-        const tempCardVarMapped = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped', {});
-        setCardVarMapped(tempCardVarMapped);
+      // Library/campaign: match SMS fallback — read from versions… and from top-level rcsContent (getCreativesData / parent shape).
+      const cardFromVersions = get(
+        details,
+        'versions.base.content.RCS.rcsContent.cardContent[0]',
+      );
+      const cardFromTop = get(details, 'rcsContent.cardContent[0]');
+      const card0 = { ...(cardFromTop || {}), ...(cardFromVersions || {}) };
+      const cardVarMappedFromCardContent =
+        card0?.cardVarMapped != null && typeof card0.cardVarMapped === 'object'
+          ? card0.cardVarMapped
+          : {};
+      const cardVarMappedFromRootMirror =
+        details?.rcsCardVarMapped != null && typeof details.rcsCardVarMapped === 'object'
+          ? details.rcsCardVarMapped
+          : {};
+      // Root mirror from getCreativesData / getFormData — campaigns often preserve flat fields when
+      // nested versions.cardContent[0].cardVarMapped is dropped on reload.
+      const mergedCardVarMappedFromPayload = {
+        ...cardVarMappedFromRootMirror,
+        ...cardVarMappedFromCardContent,
+      };
+      const loadedTitleForMap = card0?.title != null ? String(card0.title) : '';
+      const loadedDescForMap = card0?.description != null ? String(card0.description) : '';
+      const hydratedCardVarPayloadSignature = `${loadedTitleForMap}\u0000${loadedDescForMap}\u0000${JSON.stringify(
+        Object.keys(mergedCardVarMappedFromPayload)
+          .sort()
+          .reduce((accumulator, mapKey) => {
+            accumulator[mapKey] = mergedCardVarMappedFromPayload[mapKey];
+            return accumulator;
+          }, {}),
+      )}`;
+      if (lastHydratedRcsCardVarSignatureRef.current !== hydratedCardVarPayloadSignature) {
+        lastHydratedRcsCardVarSignatureRef.current = hydratedCardVarPayloadSignature;
+        setRcsVarSegmentEditorRemountKey((previousKey) => previousKey + 1);
       }
-      const mediaType = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].mediaType', '');
+      const tokenListForMap = [
+        ...(loadedTitleForMap ? loadedTitleForMap.match(rcsVarRegex) ?? [] : []),
+        ...(loadedDescForMap ? loadedDescForMap.match(rcsVarRegex) ?? [] : []),
+      ];
+      const orderedTagNamesForMap = tokenListForMap.map((token) => getVarNameFromToken(token)).filter(Boolean);
+      // Full-mode library/API payloads need normalize for legacy slot shapes. Campaign round-trip from
+      // getFormData already stores TagList values as {{TagName}}; normalize can strip or remap them.
+      const cardVarMappedBeforeCoalesce = isFullMode
+        ? normalizeCardVarMapped(mergedCardVarMappedFromPayload, orderedTagNamesForMap)
+        : { ...mergedCardVarMappedFromPayload };
+      const cardVarMappedAfterCoalesce = coalesceCardVarMappedToTemplate(
+        cardVarMappedBeforeCoalesce,
+        loadedTitleForMap,
+        loadedDescForMap,
+        rcsVarRegex,
+      );
+      const cardVarMappedAfterNumericSlotSync = !isFullMode
+        ? syncCardVarMappedSemanticsFromSlots(
+          cardVarMappedAfterCoalesce,
+          loadedTitleForMap,
+          loadedDescForMap,
+          rcsVarRegex,
+        )
+        : cardVarMappedAfterCoalesce;
+      const hydratedCardVarMappedResult = { ...cardVarMappedAfterNumericSlotSync };
+      // Pre-populate variable/tag mappings while opening an existing template in edit flows
+      setCardVarMapped((previousVarMapState) => {
+        const previousVarMap = previousVarMapState ?? {};
+        if (previousVarMap === hydratedCardVarMappedResult) return previousVarMapState;
+        const previousVarMapKeys = Object.keys(previousVarMap);
+        const nextVarMapKeys = Object.keys(hydratedCardVarMappedResult);
+        if (previousVarMapKeys.length === nextVarMapKeys.length) {
+          const allSlotValuesMatchPrevious = previousVarMapKeys.every(
+            (key) => previousVarMap[key] === hydratedCardVarMappedResult[key],
+          );
+          if (allSlotValuesMatchPrevious) return previousVarMapState;
+        }
+        return hydratedCardVarMappedResult;
+      });
+      const mediaType =
+        card0.mediaType
+        || get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].mediaType', '');
       if (mediaType === RCS_MEDIA_TYPES.NONE) {
         setTemplateType(contentType.text_message);
       } else {
         setTemplateType(contentType.rich_card);
       }
       setEditFlow(true);
-      setTemplateName(details.name || '');
-      const loadedTitle = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].title', '');
-      const loadedDesc = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].description', '');
-      const loadedMap = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped', {});
-      const normalizedTitle = (!isFullMode && !isEmpty(loadedMap)) ? getUnmappedDesc(loadedTitle, loadedMap) : loadedTitle;
-      const normalizedDesc = (!isFullMode && !isEmpty(loadedMap)) ? getUnmappedDesc(loadedDesc, loadedMap) : loadedDesc;
+      setTemplateName(details?.name || details?.creativeName || '');
+      const loadedTitle = loadedTitleForMap;
+      const loadedDesc = loadedDescForMap;
+      const { normalizedTitle, normalizedDesc } = normalizeLibraryLoadedTitleDesc({
+        loadedTitle,
+        loadedDesc,
+        isFullMode,
+        cardVarMappedAfterHydration: hydratedCardVarMappedResult,
+        rcsVarRegex,
+      });
       setTemplateTitle(normalizedTitle);
       setTemplateDesc(normalizedDesc);
-      setSuggestions(get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].suggestions', []));
-      templateStatusHelper(details);
-      const mediaData = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].media', '');
-      const cardSettings = get(details, 'versions.base.content.RCS.rcsContent.cardSettings', '');
+      setSuggestions(
+        Array.isArray(card0.suggestions)
+          ? card0.suggestions
+          : get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].suggestions', []),
+      );
+      const cardForStatus = {
+        ...card0,
+        Status:
+          card0.Status
+          ?? card0.status
+          ?? card0.approvalStatus
+          ?? get(details, 'templateStatus')
+          ?? get(details, 'approvalStatus')
+          ?? get(details, 'creativeStatus')
+          ?? get(details, 'versions.base.content.RCS.templateApprovalStatus')
+          ?? '',
+      };
+      templateStatusHelper(cardForStatus);
+      const mediaData =
+        card0.media != null && card0.media !== ''
+          ? card0.media
+          : get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].media', '');
+      const cardSettings =
+        get(details, 'versions.base.content.RCS.rcsContent.cardSettings', '')
+        || get(details, 'rcsContent.cardSettings', '');
       setMediaData(mediaData, mediaType, cardSettings);
+
+      const smsFallbackContent = mergeRcsSmsFallBackContentFromDetails(details);
+      const base = get(smsFallbackContent, 'versions.base', {});
+      const updatedEditor = base['updated-sms-editor'] ?? base['sms-editor'];
+      const smsEditor = base['sms-editor'];
+      const fromNested = Array.isArray(updatedEditor)
+        ? updatedEditor.join('')
+        : (typeof updatedEditor === 'string' ? updatedEditor : (smsEditor || ''));
+      const fallbackMessage = smsFallbackContent.smsContent
+        || smsFallbackContent.smsTemplateContent
+        || smsFallbackContent.message
+        || fromNested
+        || '';
+      const varMappedFromPayload = smsFallbackContent[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] || {};
+      const hasVarMapped = Object.keys(varMappedFromPayload).length > 0;
+      const hasFallbackPayload =
+        smsFallbackContent
+        && Object.keys(smsFallbackContent).length > 0
+        && (
+          !!smsFallbackContent.smsTemplateName
+          || !!fallbackMessage
+          || hasVarMapped
+        );
+      if (hasFallbackPayload) {
+        if (!fallbackMessage && !hasVarMapped && process.env.NODE_ENV !== 'production') {
+          console.warn('[RCS SMS Fallback] No message text found in API response. Inspect shape:', smsFallbackContent);
+        }
+        const unicodeFromApi =
+          typeof smsFallbackContent.unicodeValidity === 'boolean'
+            ? smsFallbackContent.unicodeValidity
+            : (typeof base['unicode-validity'] === 'boolean' ? base['unicode-validity'] : true);
+        const nextSmsState = {
+          templateName: smsFallbackContent.smsTemplateName || '',
+          content: fallbackMessage,
+          templateContent: fallbackMessage,
+          unicodeValidity: unicodeFromApi,
+          ...(hasVarMapped && { rcsSmsFallbackVarMapped: varMappedFromPayload }),
+        };
+        const hydrationKey = JSON.stringify({
+          creativeKey: details._id || details.name || details.creativeName || '',
+          templateName: nextSmsState.templateName,
+          content: nextSmsState.content,
+          unicodeValidity: nextSmsState.unicodeValidity,
+          varMapped: nextSmsState.rcsSmsFallbackVarMapped || {},
+        });
+        if (
+          isFullMode
+          || lastSmsFallbackHydrationKeyRef.current !== hydrationKey
+        ) {
+          lastSmsFallbackHydrationKeyRef.current = hydrationKey;
+          setSmsFallbackData(nextSmsState);
+        }
+      } else if (isFullMode || lastSmsFallbackHydrationKeyRef.current !== '__EMPTY__') {
+        lastSmsFallbackHydrationKeyRef.current = '__EMPTY__';
+        setSmsFallbackData(null);
+      }
     }
-  }, [rcsData, templateData, isFullMode, isEditFlow]);
-  
+  }, [rcsHydrationDetails, isFullMode]);
 
   useEffect(() => {
     if (templateType === contentType.text_message) {
       setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
-      setTemplateTitle('');
-      setTemplateTitleError('');
+      // Full-mode create only: switching to plain text clears draft title/media. Never clear when
+      // hydrating library/edit (would wipe templateData after load) — regression seen after SMS fallback work.
       if (!isEditFlow && isFullMode) {
+        setTemplateTitle('');
+        setTemplateTitleError('');
         setUpdateRcsImageSrc('');
-        setUpdateRcsVideoSrc({});
         setRcsVideoSrc({});
         setSelectedDimension(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
       }
@@ -657,7 +839,8 @@ export const Rcs = (props) => {
     if (!showDltContainer) {
       const { type, module } = location.query || {};
       const isEmbedded = type === EMBEDDED;
-      const context = isEmbedded ? module : DEFAULT;
+      // Match TagList initial fetch (getTagsforContext('Outbound') → context "outbound") so we do not request a different context than the two TagList headers.
+      const context = isEmbedded ? module : 'outbound';
       const embedded = isEmbedded ? type : FULL;
       const query = {
         layout: SMS,
@@ -668,9 +851,9 @@ export const Rcs = (props) => {
       if (getDefaultTags) {
         query.context = getDefaultTags;
       }
-      globalActions.fetchSchemaForEntity(query);
+      fetchTagSchemaIfNewQuery(query);
     }
-  }, [showDltContainer]);
+  }, [showDltContainer, fetchTagSchemaIfNewQuery]);
 
   useEffect(() => {
     let tag = get(metaEntities, `tags.standard`, []);
@@ -693,39 +876,72 @@ export const Rcs = (props) => {
       context,
       embedded,
     };
-    globalActions.fetchSchemaForEntity(query);
+    if (getDefaultTags) {
+      query.context = getDefaultTags;
+    }
+    fetchTagSchemaIfNewQuery(query);
+  };
+
+  const replaceNumericPlaceholderWithTagInTemplate = (templateStr, numericVarName, tagName) => {
+    if (!templateStr || !numericVarName || !tagName) return templateStr;
+    const re = buildRcsNumericMustachePlaceholderRegex(numericVarName);
+    return templateStr.replace(re, `{{${tagName}}}`);
   };
 
-  const onTagSelect = (data, areaId) => {
+  const onTagSelect = (data, areaId, field) => {
     if (!areaId) return;
     const sep = areaId.lastIndexOf('_');
     if (sep === -1) return;
-    const numId = Number(areaId.slice(sep + 1));
-    if (isNaN(numId)) return;
+    const slotSuffix = areaId.slice(sep + 1);
+    if (slotSuffix === '' || isNaN(Number(slotSuffix))) return;
     const token = areaId.slice(0, sep);
     const variableName = getVarNameFromToken(token);
     if (!variableName) return;
+    const isNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(variableName));
+    const fieldStr = field === RCS_TAG_AREA_FIELD_TITLE ? templateTitle : templateDesc;
+    const fieldType = field === RCS_TAG_AREA_FIELD_TITLE ? TITLE_TEXT : MESSAGE_TEXT;
+    const globalSlotForArea = getGlobalSlotIndexForRcsFieldId(areaId, fieldStr, fieldType);
+
     setCardVarMapped((prev) => {
       const base = (prev?.[variableName] ?? '').toString();
       const nextVal = `${base}{{${data}}}`;
-      return {
-        ...(prev || {}),
-        [variableName]: nextVal,
-      };
+      const next = { ...(prev || {}) };
+      if (isNumericSlot) {
+        delete next[variableName];
+        next[data] = nextVal;
+      } else {
+        next[variableName] = nextVal;
+        // resolveCardVarMappedSlotValue prefers numeric slot keys ("1","2",…) over semantic names;
+        // hydration may set "1": ''. Use global slot index — suffix is segment index (includes static text), not var ordinal.
+        if (globalSlotForArea !== null && globalSlotForArea !== undefined) {
+          next[String(globalSlotForArea + 1)] = nextVal;
+        }
+      }
+      return next;
     });
-  };
-
-  const onTitleTagSelect = (data) => onTagSelect(data, titleTextAreaId);
-
-  const onDescTagSelect = (data) => onTagSelect(data, descTextAreaId);
 
-  const onTagSelectFallback = (data) => {
-    const tempMsg = `${fallbackMessage}{{${data}}}`;
-    const error = fallbackMessageErrorHandler(tempMsg);
-    setFallbackMessage(tempMsg);
-    setFallbackMessageError(error);
+    if (isNumericSlot && (field === RCS_TAG_AREA_FIELD_TITLE || field === RCS_TAG_AREA_FIELD_DESC)) {
+      if (field === RCS_TAG_AREA_FIELD_TITLE) {
+        setTemplateTitle((prev) => {
+          const nextStr = replaceNumericPlaceholderWithTagInTemplate(prev || '', variableName, data);
+          if (nextStr === prev) return prev;
+          setTemplateTitleError(variableErrorHandling(nextStr));
+          return nextStr;
+        });
+      } else {
+        setTemplateDesc((prev) => {
+          const nextStr = replaceNumericPlaceholderWithTagInTemplate(prev || '', variableName, data);
+          if (nextStr === prev) return prev;
+          setTemplateDescError(variableErrorHandling(nextStr));
+          return nextStr;
+        });
+      }
+    }
   };
 
+  const onTitleTagSelect = (tagName) => onTagSelect(tagName, titleTextAreaId, RCS_TAG_AREA_FIELD_TITLE);
+
+  const onDescTagSelect = (tagName) => onTagSelect(tagName, descTextAreaId, RCS_TAG_AREA_FIELD_DESC);
 
   //removing optout tag for rcs
   const getRcsTags = () => {
@@ -738,15 +954,14 @@ export const Rcs = (props) => {
   };
   // tag Code end
 
-  const renderLabel = (value, showLabel, desc) => {
-    const isTemplateApproved = (templateStatus === RCS_STATUSES.approved);
+  const renderLabel = (value, desc) => {
     return (
       <>
-        <RcsLabel>
+        <div className="rcs-form-section-heading">
           <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
-        </RcsLabel>
+        </div>
         {desc && (
-          <CapLabel type="label3" style={{ marginBottom: '17px' }}>
+          <CapLabel type="label3" className="rcs-form-field-caption">
             {formatMessage(messages[desc])}
           </CapLabel>
         )}
@@ -832,64 +1047,6 @@ export const Rcs = (props) => {
     setTemplateDescError(error);
   };
 
-
-  const templateDescErrorHandler = (value) => {
-    let errorMessage = false;
-    const { unsupportedTags, isBraceError } = validateTags({
-      content: value,
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-      isFullMode,
-    }) || {};
-    
-    const maxLength = templateType === contentType.text_message 
-      ? RCS_TEXT_MESSAGE_MAX_LENGTH 
-      : RCS_RICH_CARD_MAX_LENGTH;
-  
-    if (value === '' && isMediaTypeText) {
-      errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
-    } else if (value?.length > maxLength) {
-      errorMessage = formatMessage(messages.templateMessageLengthError);
-    }
-    
-    if (isBraceError) {
-      errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
-    }
-    return errorMessage;
-  };
-
-
-  const onFallbackMessageChange = ({ target: { value } }) => {
-    const error = fallbackMessageErrorHandler(value);
-    setFallbackMessage(value);
-    setFallbackMessageError(error);
-  };
-
-  const fallbackMessageErrorHandler = (value) => {
-    let errorMessage = false;
-    const { unsupportedTags } = validateTags({
-      content: value,
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-      isFullMode,
-    }) || {};
-    if (value?.length > FALLBACK_MESSAGE_MAX_LENGTH) {
-      errorMessage = formatMessage(messages.fallbackMsgLenError);
-    } else if (unsupportedTags?.length > 0) {
-      errorMessage = formatMessage(
-        globalMessages.unsupportedTagsValidationError,
-        {
-          unsupportedTags,
-        },
-      );
-    }
-    return errorMessage;
-  };
-
   // Check for forbidden characters: square brackets [] and single curly braces {}
   const forbiddenCharactersValidation = (value) => {
     if (!value) return false;
@@ -940,39 +1097,12 @@ export const Rcs = (props) => {
     }
     return false;
   };
-  
-  const templateHeaderErrorHandler = (value) => {
-    let errorMessage = false;
-    if (value?.length > TEMPLATE_HEADER_MAX_LENGTH) {
-      errorMessage = formatMessage(messages.templateHeaderLengthError);
-    } else {
-      errorMessage = variableErrorHandling(value);
-    }
-    return errorMessage;
-  };
-
-
-  const templateMessageErrorHandler = (value) => {
-    let errorMessage = false;
-    if (value === '') {
-      errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
-    } else if (
-      value?.length
-      > TEMPLATE_MESSAGE_MAX_LENGTH
-    ) {
-      errorMessage = formatMessage(messages.templateMessageLengthError);
-    } else {
-      errorMessage = variableErrorHandling(value);
-    }
-    return errorMessage;
-  };
-
 
   const onMessageAddVar = () => {
-  onAddVar(MESSAGE_TEXT, templateDesc, rcsVarRegex);
+  onAddVar(templateDesc);
 };
 
-const onAddVar = (type, messageContent, regex) => {
+const onAddVar = (messageContent) => {
   // Always append the next variable at the end, like WhatsApp
   const existingVars = messageContent.match(/\{\{(\d+)\}\}/g) || [];
   const existingNumbers = existingVars.map(v => parseInt(v.match(/\d+/)[0], 10));
@@ -1012,66 +1142,6 @@ const onTitleAddVar = () => {
   setTemplateTitleError(error);
 };
 
-  
-const splitTemplateVarString = (str) => {
-  if (!str) return [];
-  const validVarArr = str.match(rcsVarRegex) || [];
-  const templateVarArray = [];
-  let content = str;
-  while (content?.length !== 0) {
-    const index = content.indexOf(validVarArr?.[0]);
-    if (index !== -1) {
-      templateVarArray.push(content.substring(0, index));
-      templateVarArray.push(validVarArr?.[0]);
-      content = content.substring(index + validVarArr?.[0]?.length, content?.length);
-      validVarArr?.shift();
-    } else {
-      templateVarArray.push(content);
-      break;
-    }
-  }
-  return templateVarArray.filter(Boolean);
-};
-
-  const textAreaValue = (idValue, type) => {
-    if (idValue >= 0) {
-      const templateStr = type === TITLE_TEXT ? templateTitle : templateDesc;
-      const templateArr = splitTemplateVarString(templateStr);
-      const token = templateArr?.[idValue] || "";
-      if (token && rcsVarTestRegex.test(token)) {
-        const varName = getVarNameFromToken(token);
-        return (cardVarMapped?.[varName] ?? '').toString();
-      }
-      return "";
-    }
-    return "";
-  };
-
-  const textAreaValueChange = (e, type) => {
-    const value = e?.target?.value ?? '';
-    const id = e?.target?.id || e?.currentTarget?.id || '';
-    if (!id) return;
-    const sep = id.lastIndexOf('_');
-    if (sep === -1) return;
-    const isInvalidValue = value?.trim() === "";
-    const token = id.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
-
-    if (variableName) {
-      setCardVarMapped((prev) => ({
-        ...prev,
-        [variableName]: isInvalidValue ? "" : value,
-      }));
-    }
-  };
-
-  const setTextAreaId = (e, type) => {
-    const id = e?.target?.id || e?.currentTarget?.id || '';
-    if (!id) return;
-    if (type === TITLE_TEXT) setTitleTextAreaId(id);
-    else setDescTextAreaId(id);
-  };
-
   const renderButtonComponent = () => {
     return (
       <>
@@ -1102,39 +1172,56 @@ const splitTemplateVarString = (str) => {
     );
   };
   
-  const renderedRCSEditMessage = (descArray, type) => {
-    const renderArray = [];
-    if (descArray?.length) {
-      descArray.forEach((elem, index) => {
-        if (rcsVarTestRegex.test(elem)) {
-          // Variable input
-          renderArray.push(
-            <TextArea
-              id={`${elem}_${index}`}
-              key={`${elem}_${index}`}
-              placeholder={`enter the value for ${elem}`}
-              autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={e => textAreaValueChange(e, type)}
-              value={textAreaValue(index, type)}
-              onFocus={(e) => setTextAreaId(e, type)}
-            />
-          );
-        } else if (elem) {
-          // Static text
-          renderArray.push(
-            <TextArea
-              key={`static_${index}`}
-              value={elem}
-              autosize={{ minRows: 1, maxRows: 3 }}
-              disabled
-              className="rcs-edit-template-message-static-textarea"
-              style={{ background: '#fafafa', color: '#888' }}
-            />
-          );
-        }
-      });
-    }
-    return renderArray;
+  const getRcsValueMap = (fieldTemplateString, fieldType) => {
+    if (!fieldTemplateString) return {};
+    const titleVarTokenMatches = templateTitle?.match(rcsVarRegex) ?? [];
+    const slotOffset = fieldType === TITLE_TEXT ? 0 : titleVarTokenMatches.length;
+    const templateSegments = splitTemplateVarStringRcs(fieldTemplateString);
+    const segmentIdToResolvedValue = {};
+    let varOrdinal = 0;
+    templateSegments.forEach((segmentToken, segmentIndexInField) => {
+      if (rcsVarTestRegex.test(segmentToken)) {
+        const varSegmentCompositeId = `${segmentToken}_${segmentIndexInField}`;
+        const varName = getVarNameFromToken(segmentToken);
+        const globalSlot = slotOffset + varOrdinal;
+        varOrdinal += 1;
+        segmentIdToResolvedValue[varSegmentCompositeId] = resolveCardVarMappedSlotValue(
+          cardVarMapped,
+          varName,
+          globalSlot,
+          isEditLike,
+        );
+      }
+    });
+    return segmentIdToResolvedValue;
+  };
+
+  const titleVarSegmentValueMapById = useMemo(
+    () => getRcsValueMap(templateTitle, TITLE_TEXT),
+    [templateTitle, cardVarMapped, isEditFlow, isFullMode],
+  );
+  const descriptionVarSegmentValueMapById = useMemo(
+    () => getRcsValueMap(templateDesc, MESSAGE_TEXT),
+    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode],
+  );
+
+  const handleRcsVarChange = (id, value, type) => {
+    const sep = id.lastIndexOf('_');
+    if (sep === -1) return;
+    const token = id.slice(0, sep);
+    const variableName = getVarNameFromToken(token);
+    if (variableName === undefined || variableName === null || variableName === '') return;
+    const isInvalidValue = value?.trim() === '';
+    const coercedSlotValue = isInvalidValue ? '' : value;
+    const fieldStr = type === TITLE_TEXT ? templateTitle : templateDesc;
+    const globalSlot = getGlobalSlotIndexForRcsFieldId(id, fieldStr, type);
+    setCardVarMapped((previousVarMap) => {
+      const nextVarMap = { ...previousVarMap, [variableName]: coercedSlotValue };
+      if (globalSlot !== null && globalSlot !== undefined) {
+        nextVarMap[String(globalSlot + 1)] = coercedSlotValue;
+      }
+      return nextVarMap;
+    });
   };
 
   const renderTextComponent = () => {
@@ -1178,10 +1265,19 @@ const splitTemplateVarString = (str) => {
           </>
         }
       />
-   <div className="rcs_text_area_wrapper">
   {(isEditFlow || !isFullMode) ? (
-      renderedRCSEditMessage(splitTemplateVarString(templateTitle), TITLE_TEXT)
+      <VarSegmentMessageEditor
+        key={`rcs-title-vars-${rcsVarSegmentEditorRemountKey}`}
+        templateString={templateTitle}
+        valueMap={titleVarSegmentValueMapById}
+        onChange={(id, value) => handleRcsVarChange(id, value, TITLE_TEXT)}
+        onFocus={(id) => setTitleTextAreaId(id)}
+        varRegex={rcsVarRegex}
+        placeholderPrefix=""
+        getPlaceholder={() => formatMessage(messages.rcsVarSlotPlaceholder)}
+      />
   ) : (
+    <div className="rcs_text_area_wrapper">
     <CapInput
       className={`rcs-template-title-input ${
         !isTemplateApproved ? "rcs-edit-disabled" : ""
@@ -1194,8 +1290,8 @@ const splitTemplateVarString = (str) => {
       errorMessage={templateTitleError}
       disabled={isEditFlow || !isFullMode}
     />
+    </div>
   )}
-</div>
 {(isEditFlow || !isFullMode) && templateTitleError && (
   <CapError className="rcs-template-title-error">
     {templateTitleError}
@@ -1243,7 +1339,18 @@ const splitTemplateVarString = (str) => {
         <CapRow className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
             {(isEditFlow || !isFullMode)
-              ? renderedRCSEditMessage(splitTemplateVarString(templateDesc), MESSAGE_TEXT)
+              ? (
+                <VarSegmentMessageEditor
+                  key={`rcs-desc-vars-${rcsVarSegmentEditorRemountKey}`}
+                  templateString={templateDesc}
+                  valueMap={descriptionVarSegmentValueMapById}
+                  onChange={(id, value) => handleRcsVarChange(id, value, MESSAGE_TEXT)}
+                  onFocus={(id) => setDescTextAreaId(id)}
+                  varRegex={rcsVarRegex}
+                  placeholderPrefix=""
+                  getPlaceholder={() => formatMessage(messages.rcsVarSlotPlaceholder)}
+                />
+              )
               : (
                 <>
                   <TextArea
@@ -1265,7 +1372,7 @@ const splitTemplateVarString = (str) => {
                     data-testid="rcs_text_area"
                     disabled={(isEditFlow || !isFullMode)}
                   />
-                  {!isAiContentBotDisabled && !isEditFlow && (
+                  {!aiContentBotDisabled && !isEditFlow && (
                     <CapAskAira.ContentGenerationBot
                       text={templateDesc || ""}
                       setText={(text) => onTemplateDescChange({ target: { value: text } })}
@@ -1287,7 +1394,9 @@ const splitTemplateVarString = (str) => {
               {templateDescError}
             </CapError>
           )}
-          {!isEditFlow && isFullMode && renderDescriptionCharacterCount()}
+          {(isEditFlow || !isFullMode)
+            ? renderDescriptionCharacterCount('rcs-character-count rcs-character-count--compact')
+            : (!isEditFlow && isFullMode && renderDescriptionCharacterCount())}
           {!isFullMode && hasTag() && (
             <CapAlert
               message={
@@ -1307,18 +1416,6 @@ const splitTemplateVarString = (str) => {
     );
   };
 
- 
-  const fallbackSmsLength = () => (
-    <CapLabel type="label1" className="fallback-sms-length">
-      {formatMessage(messages.totalCharacters, {
-        smsCount: Math.ceil(
-          fallbackMessage?.length / FALLBACK_MESSAGE_MAX_LENGTH,
-        ),
-        number: fallbackMessage?.length,
-      })}
-    </CapLabel>
-  );
-
   // Get character count for title (rich card only)
   const getTitleCharacterCount = () => {
     if (templateType === contentType.text_message) return 0;
@@ -1378,7 +1475,7 @@ const splitTemplateVarString = (str) => {
   const hasTag = () => {
     // Check cardVarMapped values for tags
     if (cardVarMapped && Object.keys(cardVarMapped).length > 0) {
-      const hasTagInMapped = Object.values(cardVarMapped).some(value => 
+      const hasTagInMapped = Object.values(cardVarMapped).some((value) => 
         isTagIncluded(value)
       );
       if (hasTagInMapped) return true;
@@ -1396,14 +1493,6 @@ const splitTemplateVarString = (str) => {
     return false;
   };
 
-  //adding creative dlt fallback sms handlers
-  const addDltMsgHandler = () => {
-    setShowDltContainer(true);
-    setDltMode(RCS_DLT_MODE.TEMPLATES);
-    setDltEditData({});
-    setFallbackMessage('');
-  };
-
   const closeDltContainerHandler = () => {
     setShowDltContainer(false);
     setDltMode('');
@@ -1426,68 +1515,17 @@ const splitTemplateVarString = (str) => {
     const fallMsg = get(tempData, `versions.base.updated-sms-editor`, []).join(
       '',
     );
+    const templateNameFromDlt = get(dltEditData, 'name', '')
+      || get(tempData, 'versions.base.name', '')
+      || '';
     closeDltContainerHandler();
     setDltEditData(tempData);
-    setFallbackMessage(fallMsg);
-    setFallbackMessageError(fallMsg?.length > FALLBACK_MESSAGE_MAX_LENGTH);
-    setShowDltCard(true);
-  };
-
-  const rcsDltCardDeleteHandler = () => {
-    closeDltContainerHandler();
-    setDltEditData({});
-    setFallbackMessage('');
-    setFallbackMessageError(false);
-    setShowDltCard(false);
-  };
-
-  const dltFallbackListingPreviewhandler = (data) => {
-    const {
-      'updated-sms-editor': updatedSmsEditor = [],
-      'sms-editor': smsEditor = '',
-    } = data.versions.base || {};
-    setFallbackPreviewmode(true);
-    setDltPreviewData(
-      updatedSmsEditor === '' ? smsEditor : updatedSmsEditor.join(''),
-    );
-  };
-
-  const getDltContentCardList = (content, channel) => {
-    const extra = [
-      <CapIcon
-        type="edit"
-        style={{ marginRight: '8px' }}
-        onClick={() => rcsDltEditSelectHandler(dltEditData)}
-      />,
-      <CapDropdown
-        overlay={(
-          <CapMenu>
-            <>
-              <CapMenu.Item
-                className="ant-dropdown-menu-item"
-                onClick={() => setFallbackPreviewmode(true)}
-              >
-                {formatMessage(globalMessages.preview)}
-              </CapMenu.Item>
-              <CapMenu.Item
-                className="ant-dropdown-menu-item"
-                onClick={rcsDltCardDeleteHandler}
-              >
-                {formatMessage(globalMessages.delete)}
-              </CapMenu.Item>
-            </>
-          </CapMenu>
-        )}
-      >
-        <CapIcon type="more" />
-      </CapDropdown>,
-    ];
-    return {
-      title: channel,
-      content,
-      cardType: channel,
-      extra,
-    };
+    const unicodeFromDlt = get(tempData, 'versions.base.unicode-validity');
+    setSmsFallbackData({
+      templateName: templateNameFromDlt,
+      content: fallMsg,
+      ...(typeof unicodeFromDlt === 'boolean' ? { unicodeValidity: unicodeFromDlt } : {}),
+    });
   };
 
   const getDltSlideBoxContent = () => {
@@ -1514,7 +1552,6 @@ const splitTemplateVarString = (str) => {
           isFullMode={isFullMode}
           isDltFromRcs
           onSelectTemplate={rcsDltEditSelectHandler}
-          handlePeviewTemplate={dltFallbackListingPreviewhandler}
         />
       );
     } else if (dltMode === RCS_DLT_MODE.EDIT) {
@@ -1535,147 +1572,32 @@ const splitTemplateVarString = (str) => {
     return { dltHeader, dltContent };
   };
 
-  const renderFallBackSmsComponent = () => {
-    // Completely disable fallback functionality when DLT is disabled
-   return null;
-    
-    // const contentArr = [];
-    // const showAddCreativeBtnForDlt = isDltEnabled && !showDltCard;
-    // const showCardForDlt = isDltEnabled && showDltCard;
-    // const showNonDltFallbackComp = !showAddCreativeBtnForDlt && !showCardForDlt;
-    // //pushing common fallback sms headings
-    // contentArr.push(
-    //   <CapRow
-    //     style={{
-    //       marginBottom: isDltEnabled ? '20px' : '10px',
-    //     }}
-    //   >
-    //     <CapHeader
-    //       title={(
-    //         <CapRow type="flex">
-    //           <CapHeading type="h4">
-    //             {formatMessage(messages.fallbackLabel)}
-    //           </CapHeading>
-    //           <CapTooltipWithInfo
-    //             placement="right"
-    //             infoIconProps={{
-    //               style: { marginLeft: '4px', marginTop: '3px' },
-    //             }}
-    //             title={formatMessage(messages.fallbackToolTip)}
-    //           />
-    //         </CapRow>
-    //       )}
-    //       description={formatMessage(messages.fallbackDesc)}
-    //       suffix={
-    //         isDltEnabled ? null : (
-    //           <CapButton
-    //             type="flat"
-    //             className="fallback-preview-btn"
-    //             prefix={<CapIcon type="eye" />}
-    //             style={{ color: CAP_SECONDARY.base }}
-    //             onClick={() => setFallbackPreviewmode(true)}
-    //             disabled={fallbackMessage === '' || fallbackMessageError}
-    //           >
-    //             {formatMessage(globalMessages.preview)}
-    //           </CapButton>
-    //         )
-    //       }
-    //     />
-    //   </CapRow>,
-    // );
-
-    //dlt is enabled, and dlt content is not yet added, show button to add dlt creative
-    // showAddCreativeBtnForDlt
-    //   && contentArr.push(
-    //     <CapCard className="rcs-dlt-fallback-card">
-    //       <CapRow type="flex" justify="center" align="middle">
-    //         <CapColumn span={10}>
-    //           <CapImage src={addCreativesIcon} />
-    //         </CapColumn>
-    //         <CapColumn span={14}>
-    //           <CapButton
-    //             className="add-dlt-btn"
-    //             type="secondary"
-    //             onClick={addDltMsgHandler}
-    //           >
-    //             {formatMessage(messages.addSmsCreative)}
-    //           </CapButton>
-    //         </CapColumn>
-    //       </CapRow>
-    //     </CapCard>,
-    //   );
-
-    // //dlt is enabled and dlt content is added, show it in a card
-    // showCardForDlt
-    //   && contentArr.push(
-    //     <CapCustomCardList
-    //       cardList={[getDltContentCardList(fallbackMessage, SMS)]}
-    //       className="rcs-dlt-card"
-    //     />,
-    //     fallbackMessageError && (
-    //       <CapError className="rcs-fallback-len-error">
-    //         {formatMessage(messages.fallbackMsgLenError)}
-    //       </CapError>
-    //     ),
-    //   );
-
-    // //dlt is not enabled, show non dlt text area
-    // showNonDltFallbackComp
-    //   && contentArr.push(
-    //     <>
-    //       <CapRow>
-    //         <CapHeader
-    //           title={(
-    //             <CapHeading type="h4">
-    //               {formatMessage(messages.fallbackTextAreaLabel)}
-    //             </CapHeading>
-    //           )}
-    //           suffix={(
-    //             <TagList
-    //               label={formatMessage(globalMessages.addLabels)}
-    //               onTagSelect={onTagSelectFallback}
-    //               location={location}
-    //               tags={tags || []}
-    //               onContextChange={handleOnTagsContextChange}
-    //               injectedTags={injectedTags || {}}
-    //               selectedOfferDetails={selectedOfferDetails}
-    //             />
-    //           )}
-    //         />
-    //       </CapRow>
-    //       <div className="rcs_fallback_msg_textarea_wrapper">
-    //         <TextArea
-    //           id="rcs_fallback_message_textarea"
-    //           autosize={{ minRows: 3, maxRows: 5 }}
-    //           placeholder={formatMessage(messages.fallbackMsgPlaceholder)}
-    //           onChange={onFallbackMessageChange}
-    //           errorMessage={fallbackMessageError}
-    //           value={fallbackMessage || ""}
-    //         />
-    //         {!isAiContentBotDisabled && (
-    //           <CapAskAira.ContentGenerationBot
-    //             text={fallbackMessage || ""}
-    //             setText={(text) => {
-    //               onFallbackMessageChange({ target: { value: text } });
-    //             }}
-    //             iconPlacement="float-br"
-    //             rootStyle={{
-    //               bottom: "0.5rem",
-    //               right: "0.5rem",
-    //               position: "absolute",
-    //             }}
-    //           />
-    //         )}
-    //       </div>
-    //       <CapRow>{fallbackSmsLength()}</CapRow>
-    //     </>
-    //   );
-
-    // return <>{contentArr}</>;
-  };
+  const renderFallBackSmsComponent = () => (
+    <SmsFallback
+      value={smsFallbackData}
+      onChange={setSmsFallbackData}
+      parentLocation={location}
+      smsRegister={smsRegister}
+      isFullMode={isFullMode}
+      selectedOfferDetails={selectedOfferDetails}
+      channelsToHide={CHANNELS_TO_HIDE_FOR_SMS_ONLY}
+      sectionTitle={
+        smsFallbackData
+          ? formatMessage(messages.fallbackLabel)
+          : formatMessage(messages.smsFallbackOptional)
+      }
+      templateListTitle={formatMessage(creativesMessages.creativeTemplates)}
+      templateListDescription={formatMessage(creativesMessages.creativeTemplatesDesc)}
+      /* Full-mode: card layout only while drafting a new template; after send for approval or when a template is loaded, use inline layout. */
+      showAsCard={isFullMode && !isEditFlow && templateStatus === ''}
+      disableSelectTemplate={isEditFlow}
+      eventContextTags={eventContextTags}
+      onRcsFallbackEditorStateChange={handleSmsFallbackEditorStateChange}
+      isRcsEditFlow={isEditFlow}
+    />
+  );
 
   const uploadRcsImage = useCallback((file, type, fileParams, index) => {
-    setImageError(null);
     const isRcsThumbnail = index === 1;
     actions.uploadRcsAsset(file, type, {
       isRcsThumbnail,
@@ -1687,7 +1609,6 @@ const splitTemplateVarString = (str) => {
 
   const setUpdateRcsImageSrc = useCallback(
     (val) => {
-      setAssetListImage(val);
       updateRcsImageSrc(val);
       actions.clearRcsMediaAsset(0); 
     },
@@ -1717,7 +1638,6 @@ const splitTemplateVarString = (str) => {
 
 
   const uploadRcsVideo = (file, type, fileParams) => { 
-    setImageError(null);
     actions.uploadRcsAsset(file, type, {
       ...fileParams,
       type: 'video',
@@ -1726,9 +1646,6 @@ const splitTemplateVarString = (str) => {
     });  
   };
 
-  const updateRcsVideoSrc = (val) => {
-    setRcsVideoSrc(val);
-  };
   const setUpdateRcsVideoSrc = useCallback((index, val) => {
     setRcsVideoSrc(val);
     setAssetList(val); 
@@ -1757,7 +1674,7 @@ const splitTemplateVarString = (str) => {
     <>
        <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Thumbnail</CapHeading>
        <CapImageUpload
-         style={{ paddingTop: '20px' }}
+         className="cap-custom-image-upload rcs-image-upload--top-spacing"
          allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
          imgWidth={RCS_VIDEO_THUMBNAIL_DIMENSIONS[currentDimension].width}
          imgHeight={RCS_VIDEO_THUMBNAIL_DIMENSIONS[currentDimension].height}
@@ -1769,7 +1686,6 @@ const splitTemplateVarString = (str) => {
          updateOnReUpload={updateOnRcsThumbnailReUpload}
          minImgSize={RCS_THUMBNAIL_MIN_SIZE}
          index={1}
-         className="cap-custom-image-upload"
          key={`rcs-uploaded-image-${currentDimension}`}
          imageData={thumbnailData}
          channel={RCS}
@@ -1800,7 +1716,7 @@ const splitTemplateVarString = (str) => {
                       value: dim.type,
                       label: `${dim.label}`
                     }))}
-                    style={{ marginBottom: '20px' }}
+                    className="rcs-dimension-select--bottom-spacing"
                   />
                 </>
               )}
@@ -1814,7 +1730,6 @@ const splitTemplateVarString = (str) => {
                     </div>
                   ) : (
                 <CapImageUpload
-                  style={{ paddingTop: '20px' }}
                   allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
                   imgWidth={RCS_IMAGE_DIMENSIONS[selectedDimension].width}
                   imgHeight={RCS_IMAGE_DIMENSIONS[selectedDimension].height}
@@ -1825,7 +1740,7 @@ const splitTemplateVarString = (str) => {
                   updateImageSrc={setUpdateRcsImageSrc}
                   updateOnReUpload={updateOnRcsImageReUpload}
                   index={0}
-                  className="cap-custom-image-upload"
+                  className="cap-custom-image-upload rcs-image-upload--top-spacing"
                   key={`rcs-uploaded-image-${selectedDimension}`}
                   imageData={rcsData}
                   channel={RCS}
@@ -1855,7 +1770,7 @@ const splitTemplateVarString = (str) => {
                 value: dim.type,
                 label: `${dim.label}`
               }))}
-              style={{ marginBottom: '20px' }}
+              className="rcs-dimension-select--bottom-spacing"
             />
             )}
               {(isEditFlow || !isFullMode) ? (
@@ -1915,8 +1830,16 @@ const splitTemplateVarString = (str) => {
   const getRcsPreview = () => {
     
     const dimensionObj = RCS_IMAGE_DIMENSIONS[selectedDimension];
-    const resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
-    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
+    const isSlotMappingMode = isEditFlow || !isFullMode;
+    const titleVarCountForResolve = isMediaTypeText
+      ? 0
+      : ((templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []).length);
+    const resolvedTitle = isMediaTypeText
+      ? ''
+      : (isSlotMappingMode ? resolveTemplateWithMap(templateTitle, 0) : templateTitle);
+    const resolvedDesc = isSlotMappingMode
+      ? resolveTemplateWithMap(templateDesc, titleVarCountForResolve)
+      : templateDesc;
     return (
       <UnifiedPreview
         channel={RCS}
@@ -1939,51 +1862,65 @@ const splitTemplateVarString = (str) => {
     );
   };
   
-  const getUnmappedDesc = (str, mapping) => {
-    if (!str) return '';
-    if (!mapping || Object.keys(mapping).length === 0) return str;
-    let result = str;
-    const replacements = [];
-    Object.entries(mapping).forEach(([key, value]) => {
-      const raw = (value ?? '').toString();
-      if (!raw || raw?.trim?.() === '') return;
-      const braced = /^\{\{[\s\S]*\}\}$/.test(raw) ? raw : `{{${raw}}}`;
-      replacements.push({ key, needle: raw });
-      if (braced !== raw) replacements.push({ key, needle: braced });
-    });
-    const seen = new Set();
-    const uniq = replacements
-      .filter(({ key, needle }) => {
-        const id = `${key}::${needle}`;
-        if (seen.has(id)) return false;
-        seen.add(id);
-        return true;
-      })
-      .sort((a, b) => (b.needle.length - a.needle.length));
-
-    uniq.forEach(({ key, needle }) => {
-      if (!needle) return;
-      const escaped = needle.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-      const regex = new RegExp(escaped, 'g');
-      result = result.replace(regex, `{{${key}}}`);
-    });
-    return result;
-  };
-
   const createPayload = () => {
-    const base = get(dltEditData, `versions.base`, {});
-    const {
-      template_id: templateId = '',
-      template_name = '',
-      'sms-editor': template = '',
-      header: registeredSenderIds = [],
-    } = base;
-    const resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
-    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
+    const isSlotMappingMode = isEditFlow || !isFullMode;
     const alignment = isMediaTypeImage
       ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.alignment
       : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.alignment;
 
+    const heightTypeForCardWidth = isMediaTypeText
+      ? undefined
+      : isMediaTypeImage
+        ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.heightType
+        : isMediaTypeVideo
+          ? RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType
+          : undefined;
+    const cardWidthFromSelection =
+      heightTypeForCardWidth === MEDIUM ? MEDIUM : SMALL;
+
+    /** Library: merge props + state so SMS fallback is not dropped when local state is empty but templateData has consumer data. */
+    const smsFromApiShape = getLibrarySmsFallbackApiBaselineFromTemplateData(templateData);
+    const smsFallbackMerged = !isFullMode
+      ? (() => {
+        const local =
+          smsFallbackData && typeof smsFallbackData === 'object' ? smsFallbackData : {};
+        return {
+          ...smsFromApiShape,
+          ...local,
+          rcsSmsFallbackVarMapped: mergeRcsSmsFallbackVarMapLayers(smsFromApiShape, local),
+        };
+      })()
+      : (smsFallbackData || {});
+    const smsFallbackForPayload = (() => {
+      if (isFullMode) {
+        return hasMeaningfulSmsFallbackShape(smsFallbackData) ? smsFallbackData : null;
+      }
+      const mapped = {
+        templateName:
+          smsFallbackMerged.templateName
+          || smsFallbackMerged.smsTemplateName
+          || '',
+        // Use `||` so empty `content` does not block campaign/API `message` (common in embedded flows).
+        content:
+          smsFallbackMerged.content
+          || smsFallbackMerged.smsContent
+          || smsFallbackMerged.smsTemplateContent
+          || smsFallbackMerged.message
+          || '',
+        templateContent:
+          pickFirstSmsFallbackTemplateString(smsFallbackMerged)
+          || '',
+        ...(typeof smsFallbackMerged.unicodeValidity === 'boolean'
+          && { unicodeValidity: smsFallbackMerged.unicodeValidity }),
+        ...(smsFallbackMerged[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]
+          && Object.keys(smsFallbackMerged[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]).length > 0 && {
+          [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]:
+            smsFallbackMerged[RCS_SMS_FALLBACK_VAR_MAPPED_PROP],
+        }),
+      };
+      return hasMeaningfulSmsFallbackShape(mapped) ? mapped : null;
+    })();
+
     const payload = {
       name: templateName,
       versions: {
@@ -1995,12 +1932,14 @@ const splitTemplateVarString = (str) => {
                 cardSettings: {
                   cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
                   ...(alignment && { mediaAlignment: alignment }),
-                  cardWidth: SMALL,
+                  cardWidth: cardWidthFromSelection,
                 },
                 cardContent: [
                   {
-                    title: resolvedTitle,
-                    description: resolvedDesc,
+                    // Persist raw template copy + cardVarMapped — not resolveTemplateWithMap output — so library
+                    // / getFormData round-trip keeps {{…}} and slot values (resolved strings broke reopen hydration).
+                    title: templateTitle,
+                    description: templateDesc,
                     mediaType: templateMediaType,
                     ...(!isMediaTypeText && {media: {
                       mediaUrl: rcsImageSrc || rcsVideoSrc.videoSrc || '',
@@ -2009,23 +1948,30 @@ const splitTemplateVarString = (str) => {
                         ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.heightType || MEDIUM
                         : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType || MEDIUM,
                     }}),
-                    ...(!isFullMode && (() => {
-                      const tokens = [
-                        ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
-                        ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
+                    ...(isSlotMappingMode && (() => {
+                      const templateVarTokens = [
+                        ...(templateTitle?.match(rcsVarRegex) ?? []),
+                        ...(templateDesc?.match(rcsVarRegex) ?? []),
                       ];
-                      const allowedKeys = tokens
-                        .map((t) => getVarNameFromToken(t))
-                        .filter(Boolean);
-                      const nextMap = {};
-                      allowedKeys.forEach((k) => {
-                        if (Object.prototype.hasOwnProperty.call(cardVarMapped || {}, k)) {
-                          nextMap[k] = cardVarMapped[k];
-                        } else {
-                          nextMap[k] = '';
+                      const persistedSlotVarMap = {};
+                      const seenSemanticVarNames = new Set();
+                      templateVarTokens.forEach((token, slotIndexZeroBased) => {
+                        const varName = getVarNameFromToken(token);
+                        if (!varName) return;
+                        const resolvedRawValue = resolveCardVarMappedSlotValue(
+                          cardVarMapped,
+                          varName,
+                          slotIndexZeroBased,
+                          isSlotMappingMode,
+                        );
+                        const sanitizedSlotValue = sanitizeCardVarMappedValue(resolvedRawValue);
+                        persistedSlotVarMap[String(slotIndexZeroBased + 1)] = sanitizedSlotValue;
+                        if (!seenSemanticVarNames.has(varName)) {
+                          seenSemanticVarNames.add(varName);
+                          persistedSlotVarMap[varName] = sanitizedSlotValue;
                         }
                       });
-                      return { cardVarMapped: nextMap };
+                      return { cardVarMapped: persistedSlotVarMap };
                     })()),
                     ...(suggestions.length > 0 && { suggestions }),
                   }
@@ -2033,17 +1979,29 @@ const splitTemplateVarString = (str) => {
                 contentType: isFullMode ? templateType : RICHCARD,
                 ...(isFullMode && {accountId:accountId, accessToken: accessToken, accountName: accountName, hostName: hostName}),
               },
-              smsFallBackContent: {
-                message: fallbackMessage,
-                ...(isDltEnabled && {
-                  templateConfigs: {
-                    templateId,
-                    templateName: template_name,
-                    template,
-                    registeredSenderIds,
+              ...(smsFallbackForPayload && (() => {
+                const smsBodyText =
+                  smsFallbackForPayload.content
+                  || smsFallbackForPayload.templateContent
+                  || smsFallbackForPayload.message
+                  || smsFallbackForPayload.smsContent
+                  || '';
+                return {
+                  smsFallBackContent: {
+                    smsTemplateName: smsFallbackForPayload.templateName || '',
+                    smsContent: smsBodyText,
+                    // cap-campaigns-v2 `normalizeRcsMessageContentForApi` only serializes `message` (+ templateConfigs); without this key SMS fallback is dropped on send.
+                    message: smsBodyText,
+                    ...(typeof smsFallbackForPayload.unicodeValidity === 'boolean' && {
+                      unicodeValidity: smsFallbackForPayload.unicodeValidity,
+                    }),
+                    ...(smsFallbackForPayload.rcsSmsFallbackVarMapped
+                      && Object.keys(smsFallbackForPayload.rcsSmsFallbackVarMapped).length > 0 && {
+                      [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: smsFallbackForPayload.rcsSmsFallbackVarMapped,
+                    }),
                   },
-                }),
-              },
+                };
+              })()),
             },
           },
         },
@@ -2053,6 +2011,84 @@ const splitTemplateVarString = (str) => {
     return payload;
   };
 
+  /** Shape expected by CommonTestAndPreview buildRcsTestMessagePayload (versions.base.content.RCS). */
+  const testPreviewFormData = useMemo(() => {
+    const payload = createPayload();
+    const rcs = payload?.versions?.base?.content?.RCS;
+    if (!rcs) return null;
+    // createMessageMeta uses WeCRM `id` when present; else template API account id (sourceAccountIdentifier).
+    const accountIdForCreateMessageMeta =
+      (wecrmAccountId != null && String(wecrmAccountId).trim() !== '')
+        ? String(wecrmAccountId)
+        : accountId;
+    const rcsForTest = {
+      ...rcs,
+      rcsContent: {
+        ...rcs.rcsContent,
+        ...(accountIdForCreateMessageMeta ? { accountId: accountIdForCreateMessageMeta } : {}),
+      },
+    };
+    const out = {
+      versions: {
+        base: {
+          content: {
+            RCS: rcsForTest,
+          },
+        },
+      },
+    };
+    const fb = smsFallbackData;
+    if (fb && (fb.smsTemplateId || fb.templateContent || fb.content)) {
+      out.templateConfigs = {
+        templateId: fb.smsTemplateId || '',
+        template: fb.templateContent || fb.content || '',
+        traiDltEnabled: isTraiDLTEnable(isFullMode, smsRegister),
+        registeredSenderIds: Array.isArray(fb.registeredSenderIds) ? fb.registeredSenderIds : [],
+      };
+    }
+    return out;
+  }, [
+    templateName,
+    templateTitle,
+    templateDesc,
+    templateMediaType,
+    cardVarMapped,
+    suggestions,
+    rcsImageSrc,
+    rcsVideoSrc,
+    rcsThumbnailSrc,
+    selectedDimension,
+    smsFallbackData,
+    isFullMode,
+    isEditFlow,
+    templateType,
+    accountId,
+    wecrmAccountId,
+    accessToken,
+    accountName,
+    hostName,
+    smsRegister,
+  ]);
+
+  /**
+   * Library/campaign: `createPayload` merges root + nested `smsFallBackContent` from `templateData`
+   * with `smsFallbackData`. Done/slot validation must use the same merge — otherwise local state can
+   * miss `templateContent` / var map while the parent payload still has them (DLT campaigns).
+   */
+  const librarySmsFallbackMergedForValidation = useMemo(() => {
+    if (isFullMode) {
+      return smsFallbackData;
+    }
+    const smsFromApiShape = getLibrarySmsFallbackApiBaselineFromTemplateData(templateData);
+    const local =
+      smsFallbackData && typeof smsFallbackData === 'object' ? smsFallbackData : {};
+    return {
+      ...smsFromApiShape,
+      ...local,
+      rcsSmsFallbackVarMapped: mergeRcsSmsFallbackVarMapLayers(smsFromApiShape, local),
+    };
+  }, [isFullMode, templateData, smsFallbackData]);
+
   const actionCallback = ({ errorMessage, resp }, isEdit) => {
     // eslint-disable-next-line no-undef
     const error = errorMessage?.message || errorMessage;
@@ -2082,6 +2118,9 @@ const splitTemplateVarString = (str) => {
       _id: params?.id,
       validity: true,
       type: RCS,
+      // CreativesContainer closes the slide box *after* getCreativesData runs so the parent receives
+      // the RCS payload first (closing immediately used to skip getCreativesData → empty "Add creative").
+      closeSlideBoxAfterSubmit: !isFullMode,
     };
     getFormData(formDataParams);
   };
@@ -2095,6 +2134,7 @@ const splitTemplateVarString = (str) => {
       actionCallback({ resp, errorMessage });
       setSpin(false); // Always turn off spinner
       if (!errorMessage) {
+        setTemplateStatus(RCS_STATUSES.pending);
         onCreateComplete();
       }
     });
@@ -2106,6 +2146,64 @@ const splitTemplateVarString = (str) => {
     }
   };
 
+  /** When a fallback SMS row exists, require non-empty body (trimmed) and filled var slots (DLT). */
+  const smsFallbackBlocksDone = () => {
+    // Non-DLT library: user removed SMS fallback (local null) but template still carries fallback — block Done.
+    if (
+      !isFullMode
+      && !isTraiDLTEnable(isFullMode, smsRegister)
+      && smsFallbackData == null
+      && hasMeaningfulSmsFallbackShape(
+        getLibrarySmsFallbackApiBaselineFromTemplateData(templateData),
+      )
+    ) {
+      return true;
+    }
+    if (!smsFallbackData) return false;
+    // Full-mode (Send for approval): SMS fallback is optional. Tag-slot mapping is a display/preview
+    // concern, not a structural requirement for approval — the registered SMS template body stands on
+    // its own. Never block the Send for approval button due to missing or unfilled fallback var slots.
+    if (isFullMode) return false;
+    const merged = librarySmsFallbackMergedForValidation;
+    const templateText = pickFirstSmsFallbackTemplateString(merged);
+    if (!templateText) {
+      return true;
+    }
+    const rawVarMap =
+      merged.rcsSmsFallbackVarMapped
+      || merged['rcs-sms-fallback-var-mapped'];
+    const varMap =
+      rawVarMap != null && typeof rawVarMap === 'object' ? rawVarMap : {};
+    return !areAllRcsSmsFallbackVarSlotsFilled(templateText, varMap);
+  };
+
+  /**
+   * Library / campaigns (`!isFullMode`): card slots are often stored on numeric keys (`1`,`2`,…) while
+   * semantic keys stay `""` from API round-trip. `resolveCardVarMappedSlotValue` matches createPayload
+   * / preview — naive `cardVarMapped[name]` wrongly kept Done disabled for DLT.
+   */
+  const isLibraryCampaignCardVarMappingIncomplete = () => {
+    if (isFullMode) return false;
+    const titleTokens = splitTemplateVarStringRcs(templateTitle).filter((elem) =>
+      rcsVarTestRegex.test(elem),
+    );
+    const descTokens = splitTemplateVarStringRcs(templateDesc).filter((elem) =>
+      rcsVarTestRegex.test(elem),
+    );
+    const orderedVarNames = [
+      ...titleTokens.map((t) => t.replace(/^\{\{|\}\}$/g, '')),
+      ...descTokens.map((t) => t.replace(/^\{\{|\}\}$/g, '')),
+    ];
+    if (orderedVarNames.length > 0 && isEmpty(cardVarMapped)) {
+      return true;
+    }
+    return orderedVarNames.some((name, globalIdx) => {
+      const v = resolveCardVarMappedSlotValue(cardVarMapped, name, globalIdx, true);
+      const s = v == null ? '' : String(v);
+      return s.trim() === '';
+    });
+  };
+
   const isDisableDone = () => {
     if(isEditFlow){
       return false;
@@ -2116,40 +2214,16 @@ const splitTemplateVarString = (str) => {
       }
     }
 
-    if(!isFullMode){
-      const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
-      const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
-      const allVars = Array.from(new Set([ ...titleVars, ...descVars ]));
-
-      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
-        return true;
-      }
-
-      const hasEmptyMapping =
-        cardVarMapped &&
-        Object.keys(cardVarMapped).length > 0 &&
-        Object.entries(cardVarMapped).some(([_, v]) => {
-          if (typeof v !== 'string') return !v; // null/undefined
-          return v.trim() === ''; // empty string
-        });
-
-      if (hasEmptyMapping) {
-        return true;
-      }
-
-      const anyMissing = allVars.some(name => {
-        const v = cardVarMapped?.[name];
-        if (typeof v !== 'string') return !v;
-        return v.trim() === '';
-      });
-      if (anyMissing) {
-        return true;
-      }
+    if (isLibraryCampaignCardVarMappingIncomplete()) {
+      return true;
     }
 
-      if (isMediaTypeText && templateDesc.trim() === '') {
+    if (smsFallbackBlocksDone()) {
       return true;
+    }
 
+    if (isMediaTypeText && templateDesc.trim() === '') {
+      return true;
     }
     if (isMediaTypeImage && (rcsImageSrc === '' || templateTitle === '' || templateDesc === '' )) {
       return true;
@@ -2167,53 +2241,36 @@ const splitTemplateVarString = (str) => {
         return true;
       }
     }
-    if (templateDescError || templateTitleError || fallbackMessageError) {
+    if (templateDescError || templateTitleError) {
+      return true;
+    }
+    if (
+      smsFallbackData?.content
+      && smsFallbackData.content.length > FALLBACK_MESSAGE_MAX_LENGTH
+    ) {
       return true;
     }
     return false;
   };
 
   const isEditDisableDone = () => {
-    
     if (templateStatus !== RCS_STATUSES.approved) {
       return true;
     }
 
-    if (!isFullMode) {
-      if (templateName.trim() === '' || templateNameError) {
-        return true;
-      }
+    // if (!isFullMode) {
+    //   if (templateName.trim() === '' || templateNameError) {
+    //     return true;
+    //   }
+    // }
+    if (isLibraryCampaignCardVarMappingIncomplete()) {
+      return true;
     }
-    if(!isFullMode){
-      const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
-      const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
-      const allVars = Array.from(new Set([ ...titleVars, ...descVars ]));
-
-      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
-        return true;
-      }
-
-      const hasEmptyMapping =
-        cardVarMapped &&
-        Object.keys(cardVarMapped).length > 0 &&
-        Object.entries(cardVarMapped).some(([_, v]) => {
-          if (typeof v !== 'string') return !v; // null/undefined
-          return v.trim() === ''; // empty string
-        });
 
-      if (hasEmptyMapping) {
-        return true;
-      }
-
-      const anyMissing = allVars.some(name => {
-        const v = cardVarMapped?.[name];
-        if (typeof v !== 'string') return !v;
-        return v.trim() === '';
-      });
-      if (anyMissing) {
-        return true;
-      }
+    if (smsFallbackBlocksDone()) {
+      return true;
     }
+
     if (isMediaTypeText && templateDesc.trim() === '') {
       return true;
     }
@@ -2232,7 +2289,13 @@ const splitTemplateVarString = (str) => {
         return true;
       }
     }
-    if (templateTitleError || templateDescError || fallbackMessageError) {
+    if (templateTitleError || templateDescError) {
+      return true;
+    }
+    if (
+      smsFallbackData?.content
+      && smsFallbackData.content.length > FALLBACK_MESSAGE_MAX_LENGTH
+    ) {
       return true;
     }
     return false;
@@ -2282,52 +2345,56 @@ const splitTemplateVarString = (str) => {
   };
 
   const getMainContent = () => {
-    if (showDltContainer && !fallbackPreviewmode) {
-      const dltSlideBoxContent = showDltContainer && getDltSlideBoxContent();
-      const { dltHeader = '', dltContent = '' } = dltSlideBoxContent;
-      return (
-        <CapSlideBox
-          show={showDltContainer}
-          header={dltHeader}
-          content={dltContent}
-          handleClose={closeDltContainerHandler}
-          size="size-xl"
-        />
-      );
-    }
+    // Slideboxes are rendered outside the page-level spinner to avoid
+    // stacking/blur issues during initial loads.
+    if (showDltContainer) return null;
 
     return (
       <>
-        {templateStatus !== '' && (<CapRow className="template-status-container">
-          <CapLabel type="label2">
-            {formatMessage(messages.templateStatusLabel)}
-          </CapLabel>
-
-          {templateStatus && (
-            <CapAlert
-              message={getTemplateStatusMessage()}
-              type={getTemplateStatusType(templateStatus)}
-            />
-          )}
-        </CapRow>
+        {templateStatus !== '' && (
+          <CapRow className="template-status-container">
+            <CapColumn span={14}>
+              <CapLabel type="label2">
+                {formatMessage(messages.templateStatusLabel)}
+              </CapLabel>
+
+              {templateStatus && (
+                <CapAlert
+                  message={getTemplateStatusMessage()}
+                  type={getTemplateStatusType(templateStatus)}
+                />
+              )}
+            </CapColumn>
+          </CapRow>
         )}
-        <CapRow className="cap-rcs-creatives">
+        <CapRow className={`cap-rcs-creatives ${isEditLike ? 'rcs-edit-mode' : ''}`}>
           <CapColumn span={14}>
             {/* template name */}
             {isFullMode && (
-              <CapInput
-                id="rcs_template_name_input"
-                data-testid="template_name"
-                onChange={onTemplateNameChange}
-                errorMessage={templateNameError}
-                placeholder={formatMessage(
-                  globalMessages.templateNamePlaceholder,
-                )}
-                value={templateName || ''}
-                size="default"
-                label={formatMessage(globalMessages.creativeNameLabel)}
-                disabled={(isEditFlow || !isFullMode)}
-              />
+              isEditFlow ? (
+                <div className="rcs-creative-name-readonly">
+                  <CapHeading type="h4">
+                    {formatMessage(globalMessages.creativeNameLabel)}
+                  </CapHeading>
+                  <CapHeading type="h5" className="rcs-creative-name-value">
+                    {templateName || '-'}
+                  </CapHeading>
+                </div>
+              ) : (
+                <CapInput
+                  id="rcs_template_name_input"
+                  data-testid="template_name"
+                  onChange={onTemplateNameChange}
+                  errorMessage={templateNameError}
+                  placeholder={formatMessage(
+                    globalMessages.templateNamePlaceholder,
+                  )}
+                  value={templateName || ''}
+                  size="default"
+                  label={formatMessage(globalMessages.creativeNameLabel)}
+                  disabled={(isEditFlow || !isFullMode)}
+                />
+              )
             )}
             {renderLabel('templateTypeLabel')}
             <CapRadioGroup
@@ -2355,7 +2422,7 @@ const splitTemplateVarString = (str) => {
               </>
             )}
             {renderTextComponent()}
-            <CapDivider style={{ margin: `${CAP_SPACE_28} 0` }} />
+            <CapDivider className="rcs-fallback-section-divider" />
             {renderFallBackSmsComponent()}
             <div className="rcs-scroll-div" />
           </CapColumn>
@@ -2367,7 +2434,8 @@ const splitTemplateVarString = (str) => {
 
        
         <div className="rcs-footer">
-          {!isEditFlow && (
+          {/* Full-mode create only: send-for-approval + disabled test/preview. Library mode uses Done below — onDoneCallback() is undefined when !isFullMode, so do not render this row (avoids a no-op primary button). */}
+          {!isEditFlow && isFullMode && (
           <>
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
@@ -2388,7 +2456,6 @@ const splitTemplateVarString = (str) => {
                     className="rcs-test-preview-btn"
                     type="secondary"
                     disabled={true}
-                    style={{ marginLeft: "8px" }}
                   >
                     <FormattedMessage {...creativesMessages.testAndPreview} />
                   </CapButton>
@@ -2421,51 +2488,6 @@ const splitTemplateVarString = (str) => {
             </>
           )}
         </div>
-
-
-        {fallbackPreviewmode && (
-          <CapSlideBox
-            className="rcs-fallback-preview"
-            show={fallbackPreviewmode}
-            header={(
-              <CapHeading type="h7" style={{ color: CAP_G01 }}>
-                {formatMessage(messages.fallbackPreviewtitle)}
-              </CapHeading>
-            )}
-            content={(
-              <>
-                <UnifiedPreview
-                  channel={RCS}
-                  content={{
-                    rcsPreviewContent: {
-                      rcsDesc: tempMsg,
-                    },
-                  }}
-                  device={ANDROID}
-                  showDeviceToggle={false}
-                  showHeader={false}
-                  formatMessage={formatMessage}
-                />
-                <CapHeading
-                  type="h3"
-                  style={{ textAlign: 'center' }}
-                  className="margin-t-16"
-                >
-                  {formatMessage(messages.totalCharacters, {
-                    smsCount: Math.ceil(
-                      tempMsg?.length / FALLBACK_MESSAGE_MAX_LENGTH,
-                    ),
-                    number: tempMsg.length,
-                  })}
-                </CapHeading>
-              </>
-            )}
-            handleClose={() => {
-              setFallbackPreviewmode(false);
-              setDltPreviewData('');
-            }}
-          />
-        )}
       </>
     );
   };
@@ -2474,12 +2496,38 @@ const splitTemplateVarString = (str) => {
       <CapSpin spinning={loadingTags || spin}>
         {getMainContent()}
       </CapSpin>
+
+      {showDltContainer && (() => {
+        const { dltHeader = '', dltContent = '' } = getDltSlideBoxContent() || {};
+        return (
+          <CapSlideBox
+            show={showDltContainer}
+            header={dltHeader}
+            content={dltContent}
+            handleClose={closeDltContainerHandler}
+            size="size-xl"
+          />
+        );
+      })()}
+
       <TestAndPreviewSlidebox
         show={propsShowTestAndPreviewSlidebox || showTestAndPreviewSlidebox}
         onClose={handleCloseTestAndPreview}
-        formData={null} // RCS doesn't use formData structure like SMS
-        content={getTemplateContent()}
+        formData={testPreviewFormData}
+        content={testAndPreviewContent}
         currentChannel={RCS}
+        orgUnitId={orgUnitId}
+        smsFallbackContent={
+          smsFallbackData && (smsFallbackData.templateContent || smsFallbackData.content)
+            ? {
+              templateContent:
+                smsFallbackData.templateContent || smsFallbackData.content || '',
+              templateName: smsFallbackData.templateName || '',
+              [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: smsFallbackData?.rcsSmsFallbackVarMapped ?? {},
+            }
+            : null
+        }
+        smsRegister={smsRegister}
       />
     </>
   );
@@ -2491,7 +2539,6 @@ const mapStateToProps = createStructuredSelector({
   metaEntities: makeSelectMetaEntities(),
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
-  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 const mapDispatchToProps = (dispatch) => ({