@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

package/v2Containers/Rcs/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable no-unused-expressions */
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, 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';
@@ -34,14 +35,6 @@ 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 CapTab from '@capillarytech/cap-ui-library/CapTab';
-import { flushSync } from 'react-dom';
-import { isUrl, isValidText } from '../Line/Container/Wrapper/utils';
-import {
-  invalidVarRegex,
-  RCS_CTA_URL_TYPE,
-  URL_MAX_LENGTH,
-} from '../../v2Components/CapActionButton/constants';
 
 import {
   CAP_G01,
@@ -57,30 +50,17 @@ import {
 import CapVideoUpload from '../../v2Components/CapVideoUpload';
 import * as globalActions from '../Cap/actions';
 import CapActionButton from '../../v2Components/CapActionButton';
-import TemplatePreview from '../../v2Components/TemplatePreview';
 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,
-  extractRegisteredSenderIdsFromSmsFallbackRecord,
-  pickFirstSmsFallbackTemplateString,
-  syncCardVarMappedSemanticsFromSlots,
-  hasMeaningfulSmsFallbackShape,
-  getLibrarySmsFallbackApiBaselineFromTemplateData,
-  pickRcsCardVarMappedEntries,
-} from './rcsLibraryHydrationUtils';
 import {
   RCS,
   SMS,
@@ -97,7 +77,6 @@ import {
   RCS_IMG_SIZE,
   RCS_DLT_MODE,
   CTA,
-  AI_CONTENT_BOT_DISABLED,
   RCS_STATUSES,
   TITLE_TEXT,
   MESSAGE_TEXT,
@@ -112,15 +91,9 @@ import {
   rcsVarTestRegex,
   RCS_IMAGE_DIMENSIONS,
   RCS_TEXT_MESSAGE_MAX_LENGTH,
-  RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP,
   RCS_RICH_CARD_MAX_LENGTH,
   RCS_VIDEO_THUMBNAIL_DIMENSIONS,
-  RCS_CAROUSEL_IMAGE_DIMENSIONS,
-  RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS,
-  RCS_CAROUSEL_IMG_SIZE,
-  RCS_CAROUSEL_VIDEO_SIZE,
   MAX_BUTTONS,
-  INITIAL_SUGGESTIONS,
   INITIAL_SUGGESTIONS_DATA_STOP,
   RCS_BUTTON_TYPES,
   titletype,
@@ -130,50 +103,25 @@ import {
   SMALL,
   MEDIUM,
   RICHCARD,
-  HOST_INFOBIP,
-  HOST_ICS,
-  CAROUSEL_HEIGHT_OPTIONS,
-  CAROUSEL_WIDTH_OPTIONS,
-  STOP,
-  RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS,
-  RCS_NUMERIC_VAR_NAME_REGEX,
-  RCS_NUMERIC_VAR_TOKEN_REGEX,
-  RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
-  RCS_TAG_AREA_FIELD_TITLE,
-  RCS_TAG_AREA_FIELD_DESC,
-  REGEX_SPECIAL_CHARS_ESCAPE_PATTERN,
-  JS_TYPES,
 } 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 VarSegmentMessageEditor from '../../v2Components/VarSegmentMessageEditor';
-import { ANDROID, RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
+import { ANDROID } 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 { isTraiDLTEnable } from '../../utils/common';
+import { getCdnUrl } from '../../utils/cdnTransformation';
 import { isTagIncluded } from '../../utils/commonUtils';
 import injectReducer from '../../utils/injectReducer';
 import v2RcsReducer from './reducer';
-import {
-  areAllRcsSmsFallbackVarSlotsFilled,
-  buildRcsNumericMustachePlaceholderRegex,
-  getTemplateStatusType,
-  normalizeCardVarMapped,
-  coalesceCardVarMappedToTemplate,
-  getRcsSemanticVarNamesSpanningTitleAndDesc,
-  resolveCardVarMappedSlotValue,
-  sanitizeCardVarMappedValue,
-} from './utils';
+import { getTemplateStatusType } from './utils';
 
 
 const { Group: CapCheckboxGroup } = CapCheckbox;
@@ -190,46 +138,28 @@ export const Rcs = (props) => {
     templatesActions,
     globalActions,
     location,
+    handleClose,
     getDefaultTags,
     supportedTags,
     metaEntities,
     injectedTags,
     loadingTags,
     getFormData,
+    isDltEnabled,
     smsRegister,
-    orgUnitId,
     selectedOfferDetails,
     eventContextTags,
+    waitEventContextTags,
     accountData = {},
-    currentOrgDetails,
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
-    handleClose,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
   const { CapCustomCardList } = CapCustomCard;
-
-  // Defensive: React cannot render plain objects as children (crashes with
-  // "Objects are not valid as a React child"). Some campaigns (!isFullMode) flows
-  // can accidentally set an error state to an object (e.g. `{}`).
-  const normalizeErrorMessage = (err) => {
-    if (!err) return '';
-    if (React.isValidElement(err)) return err;
-    if (typeof err === JS_TYPES.STRING) return err;
-    if (typeof err === JS_TYPES.NUMBER) return String(err);
-    if (typeof err === JS_TYPES.OBJECT && typeof err.message === JS_TYPES.STRING) return err.message;
-    try {
-      return JSON.stringify(err);
-    } catch (e) {
-      return String(err);
-    }
-  };
-
   const [isEditFlow, setEditFlow] = useState(false);
-  const isEditLike = isEditFlow || !isFullMode;
   const [tags, updateTags] = useState([]);
   const [spin, setSpin] = useState(false);
   //template
@@ -238,21 +168,33 @@ 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({});
-  /** `undefined` = not hydrated yet; `null` = no fallback / user removed template; object = selected fallback */
-  const [smsFallbackData, setSmsFallbackData] = useState(undefined);
+  const [showDltCard, setShowDltCard] = useState(false);
+  const [fallbackPreviewmode, setFallbackPreviewmode] = useState(false);
+  const [dltPreviewData, setDltPreviewData] = useState('');
   const [suggestions, setSuggestions] = useState(INITIAL_SUGGESTIONS_DATA_STOP);
-  const buttonType = RCS_BUTTON_TYPES.NONE;
+  const [buttonType, setButtonType] = useState(RCS_BUTTON_TYPES.NONE);
   const [suggestionError, setSuggestionError] = useState(true);
-  const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
   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();
@@ -263,58 +205,75 @@ export const Rcs = (props) => {
   const [rcsVideoSrc, setRcsVideoSrc] = useState({});
   const [rcsThumbnailSrc, setRcsThumbnailSrc] = useState('');
   const [selectedDimension, setSelectedDimension] = useState(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
-  // Carousel (UI-only) state
-  const [selectedCarousel, setSelectedCarousel] = useState('');
-  const [selectedCarouselHeight, setSelectedCarouselHeight] = useState(MEDIUM);
-  const [selectedCarouselWidth, setSelectedCarouselWidth] = useState(SMALL);
-  const [carouselData, setCarouselData] = useState([]);
-  const [carouselErrors, setCarouselErrors] = useState([]); // [{ title: string|false, description: string|false }]
-  const [activeCarouselIndex, setActiveCarouselIndex] = useState('0');
-  const [carouselResetNonce, setCarouselResetNonce] = useState(0);
-  const [carouselFocusedVarId, setCarouselFocusedVarId] = useState('');
-   const [imageError, setImageError] = useState(null);
+  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],
-  );
-
-  /** 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;
-      }
-      lastTagSchemaQueryKeyRef.current = key;
-      globalActions.fetchSchemaForEntity(query);
-    },
-    [globalActions],
-  );
 
   // 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;
+      }
+    }
+
+    // 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,
+      }),
+    };
+
+    return contentObj;
+  }, [
+    templateMediaType,
+    templateTitle,
+    templateDesc,
+    rcsImageSrc,
+    rcsVideoSrc,
+    rcsThumbnailSrc,
+    suggestions,
+    selectedDimension,
+  ]);
 
   // Handle Test and Preview button click
   const handleTestAndPreview = useCallback(() => {
     setShowTestAndPreviewSlidebox(true);
+    setIsTestAndPreviewMode(true);
     if (propsHandleTestAndPreview) {
       propsHandleTestAndPreview();
     }
@@ -338,758 +297,31 @@ export const Rcs = (props) => {
     // 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;
-      // Bail out when no template has been selected yet — SmsTraiEdit fires
-      // onRcsFallbackEditorStateChange on mount (unicodeValidity, varMapped),
-      // which would create a non-null smsFallbackData from nothing and cause
-      // the card to appear as "Untitled creative" before any save.
-      if (!prev) return prev;
-      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('');
-  const isHostInfoBip = hostName === HOST_INFOBIP;
-  const isHostIcs = hostName === HOST_ICS;
-
-  useEffect(() => {
-    setSuggestions(isHostIcs ? INITIAL_SUGGESTIONS_DATA_STOP : []);
-  }, [isHostIcs]);
   const [rcsAccount, setRcsAccount] = useState('');
   useEffect(() => {
     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 || '');
       setRcsAccount(accountObj.id || '');
-    } else {
-      setAccountId('');
-      setWecrmAccountId('');
-      setAccessToken('');
-      setHostName('');
-      setAccountName('');
     }
   }, [accountData.selectedRcsAccount]);
 
   const isMediaTypeText = templateMediaType === RCS_MEDIA_TYPES.NONE;
   const isMediaTypeImage = templateMediaType === RCS_MEDIA_TYPES.IMAGE;
   const isMediaTypeVideo = templateMediaType === RCS_MEDIA_TYPES.VIDEO;
-  const isCarouselType = templateType === contentType.carousel;
-
-  const MAX_RCS_CAROUSEL_ALLOWED = 10;
-  // Uploads for RCS are stored in redux under dynamic keys `uploadedAssetData${index}`.
-  // Carousel needs per-card indices; otherwise all cards "restore" the last uploaded asset
-  // and show the same media/thumbnail.
-  const RCS_CAROUSEL_ASSET_INDEX_BASE = 10; // keep away from standalone indices 0 (media) and 1 (thumbnail)
-  const getCarouselImageAssetIndex = (cardIndex) =>
-    RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3);
-  const getCarouselVideoAssetIndex = (cardIndex) =>
-    RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3) + 1;
-  const getCarouselThumbnailAssetIndex = (cardIndex) =>
-    RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3) + 2;
-  const isThumbnailAssetIndex = (index) => {
-    if (index === 1) return true; // standalone thumbnail
-    if (index >= RCS_CAROUSEL_ASSET_INDEX_BASE) {
-      return ((index - RCS_CAROUSEL_ASSET_INDEX_BASE) % 3) === 2; // carousel thumbnail slot
-    }
-    return false;
-  };
-
-  // Carousel dimension key: `${HEIGHT}_${WIDTH}` (e.g., SHORT_SMALL)
-  const getCarouselDimensionKey = () => `${selectedCarouselHeight}_${selectedCarouselWidth}`;
-
-  const clearCarouselCardMedia = (cardIndex, { clearImage = true, clearVideo = true, clearThumb = true } = {}) => {
-    setCarouselData((prev = []) => {
-      const updated = cloneDeep(prev);
-      if (!updated?.[cardIndex]) return updated;
-      if (clearImage) updated[cardIndex].imageSrc = '';
-      if (clearVideo) updated[cardIndex].videoAsset = {};
-      if (clearThumb) updated[cardIndex].thumbnailSrc = '';
-      return updated;
-    });
-
-    if (clearImage) actions.clearRcsMediaAsset(getCarouselImageAssetIndex(cardIndex));
-    if (clearVideo) actions.clearRcsMediaAsset(getCarouselVideoAssetIndex(cardIndex));
-    if (clearThumb) actions.clearRcsMediaAsset(getCarouselThumbnailAssetIndex(cardIndex));
-  };
-
-  const resetCarouselMediaForAllCards = () => {
-    setCarouselData((prev = []) => {
-      const updated = cloneDeep(prev);
-      updated.forEach((card) => {
-        if (!card) return;
-        card.imageSrc = '';
-        card.videoAsset = {};
-        card.thumbnailSrc = '';
-      });
-      return updated;
-    });
-    (carouselData || []).forEach((_, idx) => {
-      actions.clearRcsMediaAsset(getCarouselImageAssetIndex(idx));
-      actions.clearRcsMediaAsset(getCarouselVideoAssetIndex(idx));
-      actions.clearRcsMediaAsset(getCarouselThumbnailAssetIndex(idx));
-    });
-    // Force tab panes to remount after global reset (some tab implementations cache inactive panes)
-    setCarouselResetNonce((n) => n + 1);
-  };
-
-  const RCS_CAROUSEL_INITIAL_CARD = {
-    title: '',
-    description: '',
-    mediaType: RCS_MEDIA_TYPES.IMAGE, // per-card
-    imageSrc: '',
-    videoAsset: {}, // CapVideoUpload object shape
-    thumbnailSrc: '',
-    suggestions: [],
-  };
-
-  const RCS_CAROUSEL_INITIAL_FIRST_CARD = {
-    ...RCS_CAROUSEL_INITIAL_CARD,
-    suggestions: cloneDeep(RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS),
-  };
-
-  const ensureFirstCardDefaultPhoneSuggestions = (cards) => {
-    const next = cloneDeep(cards || []);
-    if (next.length === 0) return next;
-    const s = next[0].suggestions;
-    if (!Array.isArray(s) || s.length === 0) {
-      next[0] = {
-        ...next[0],
-        suggestions: cloneDeep(RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS),
-      };
-    }
-    return next;
-  };
-
-  // Always use functional updates: image upload completes in CapImageUpload's useEffect and calls
-  // updateImageSrc → this handler. If we cloned carouselData from render, we'd overwrite title/body/
-  // suggestions typed since the last commit (stale closure).
-  const handleCarouselValueChange = (carouselIndex, fields) => {
-    setCarouselData((prev = []) => {
-      const updated = cloneDeep(prev);
-      if (!updated[carouselIndex]) return prev;
-      fields.forEach(({ fieldName, value }) => {
-        updated[carouselIndex][fieldName] = value;
-      });
-      return updated;
-    });
-  };
-
-  const updateCarouselErrors = (carouselIndex, patch) => {
-    setCarouselErrors((prev = []) => {
-      const next = Array.isArray(prev) ? [...prev] : [];
-      next[carouselIndex] = { ...(next[carouselIndex] || {}), ...patch };
-      return next;
-    });
-  };
-
-  const deleteCarouselCard = (index) => {
-    let nextIdx = 0;
-    flushSync(() => {
-      setCarouselData((prev = []) => {
-        const updated = cloneDeep(prev);
-        if (index < 0 || index >= updated.length) return updated;
-        updated.splice(index, 1);
-        nextIdx = Math.max(0, Math.min(index - 1, updated.length - 1));
-        return ensureFirstCardDefaultPhoneSuggestions(updated);
-      });
-    });
-    setCarouselErrors((prev = []) => {
-      const next = Array.isArray(prev) ? [...prev] : [];
-      next.splice(index, 1);
-      return next;
-    });
-    setActiveCarouselIndex(`${nextIdx}`);
-  };
-
-  const carouselButtonTextHasForbiddenChars = (value) => {
-    if (!value) return false;
-    if (value.includes('[') || value.includes(']')) return true;
-    const withoutValidVariables = value.replace(/\{\{[^}]*\}\}/g, '');
-    if (withoutValidVariables.includes('{') || withoutValidVariables.includes('}')) return true;
-    return false;
-  };
-
-  const isCompleteSavedCarouselSuggestion = (s) => {
-    if (!s || !s.isSaved) return false;
-    const text = (s.text || '').trim();
-    if (!text || !isValidText(text) || carouselButtonTextHasForbiddenChars(text)) return false;
-    if (s.type === RCS_BUTTON_TYPES.PHONE_NUMBER) {
-      return String(s.phoneNumber || '').length >= 5;
-    }
-    if (s.type === RCS_BUTTON_TYPES.CTA) {
-      const url = String(s.url || '').trim();
-      if (!url || url.length > URL_MAX_LENGTH) return false;
-      const subtype = s.urlType || RCS_CTA_URL_TYPE.STATIC;
-      if (subtype === RCS_CTA_URL_TYPE.DYNAMIC) {
-        return true;
-      }
-      if (!isUrl(url)) return false;
-      const varMatches = url.match(invalidVarRegex);
-      return !(varMatches && varMatches.length > 0);
-    }
-    if (s.type === RCS_BUTTON_TYPES.QUICK_REPLY) {
-      return true;
-    }
-    return false;
-  };
-
-  const isCarouselCardValid = (card, cardIndex) => {
-    if (!card) return false;
-    if (!card.title || !card.title.trim()) return false;
-    if ((card.title || '').length > TEMPLATE_TITLE_MAX_LENGTH) return false;
-    if (!card.description || !card.description.trim()) return false;
-    if ((card.description || '').length > RCS_RICH_CARD_MAX_LENGTH) return false;
-    let mediaOk = false;
-    if (card.mediaType === RCS_MEDIA_TYPES.IMAGE) {
-      mediaOk = !!(card.imageSrc && String(card.imageSrc).trim());
-    } else if (card.mediaType === RCS_MEDIA_TYPES.VIDEO) {
-      const hasVideo = !!(card.videoAsset && card.videoAsset.videoSrc && String(card.videoAsset.videoSrc).trim());
-      const hasThumb = !!(card.thumbnailSrc && String(card.thumbnailSrc).trim());
-      mediaOk = hasVideo && hasThumb;
-    } else {
-      return false;
-    }
-    if (!mediaOk) return false;
-    if (cardIndex === 0) {
-      const sugg = Array.isArray(card.suggestions) ? card.suggestions : [];
-      if (!sugg.some(isCompleteSavedCarouselSuggestion)) return false;
-    }
-    return true;
-  };
-
-  const checkDisableAddCarouselButton = () => {
-    const idx = parseInt(activeCarouselIndex, 10);
-    const activeCard = carouselData?.[idx];
-    return !isCarouselCardValid(activeCard, idx);
-  };
-
-  const addCarouselCard = () => {
-    let newIndex = 0;
-    flushSync(() => {
-      setCarouselData((prev = []) => {
-        const updated = cloneDeep(prev);
-        updated.push(cloneDeep(RCS_CAROUSEL_INITIAL_CARD));
-        newIndex = updated.length - 1;
-        return updated;
-      });
-    });
-    setCarouselErrors((prev = []) => ([...(Array.isArray(prev) ? prev : []), {}]));
-    setActiveCarouselIndex(`${newIndex}`);
-  };
-
-  // Initialize carousel data when switching to carousel type
-  useEffect(() => {
-    if (!isCarouselType) return;
-    if (!carouselData || carouselData.length === 0) {
-      setCarouselData([cloneDeep(RCS_CAROUSEL_INITIAL_FIRST_CARD)]);
-      setCarouselErrors([{}]);
-      setActiveCarouselIndex('0');
-    }
-  }, [isCarouselType]);
-
-  // keep derived carousel key in sync
-  useEffect(() => {
-    if (!isCarouselType) return;
-    if (!selectedCarouselHeight || !selectedCarouselWidth) return;
-    // Required format: HEIGHT_WIDTH
-    setSelectedCarousel(`${selectedCarouselHeight}_${selectedCarouselWidth}`);
-  }, [isCarouselType, selectedCarouselHeight, selectedCarouselWidth]);
-
-  const renderCarouselDimensionSelection = () => {
-    if (!isCarouselType) return null;
-    return (
-      <CapRow className="rcs-carousel-dimension-section">
-        <CapRow gutter={16} className="rcs-carousel-dimension-row">
-          <CapColumn span={12}>
-            <CapHeading type="h4" className="rcs-carousel-dimension-label">Card height</CapHeading>
-            {isEditFlow ? (
-              <CapHeading type="h5" className="rcs-creative-name-value">
-                {CAROUSEL_HEIGHT_OPTIONS.find((option) => option.value === selectedCarouselHeight)?.label || '-'}
-              </CapHeading>
-            ) : (
-              <CapSelect
-                id="rcs-carousel-height-select"
-                value={selectedCarouselHeight}
-                onChange={(val) => {
-                  // Like rich-card dimension changes: clear media so user re-uploads matching new dimensions.
-                  resetCarouselMediaForAllCards();
-                  setSelectedCarouselHeight(val);
-                }}
-                options={CAROUSEL_HEIGHT_OPTIONS}
-                disabled={!isFullMode}
-              />
-            )}
-          </CapColumn>
-          <CapColumn span={12}>
-            <CapHeading type="h4" className="rcs-carousel-dimension-label">Card width</CapHeading>
-            {isEditFlow ? (
-              <CapHeading type="h5" className="rcs-creative-name-value">
-                {CAROUSEL_WIDTH_OPTIONS.find((option) => option.value === selectedCarouselWidth)?.label || '-'}
-              </CapHeading>
-            ) : (
-              <CapSelect
-                id="rcs-carousel-width-select"
-                value={selectedCarouselWidth}
-                onChange={(val) => {
-                  // Like rich-card dimension changes: clear media so user re-uploads matching new dimensions.
-                  resetCarouselMediaForAllCards();
-                  setSelectedCarouselWidth(val);
-                }}
-                options={CAROUSEL_WIDTH_OPTIONS}
-                disabled={!isFullMode}
-              />
-            )}
-          </CapColumn>
-        </CapRow>
-        {!!selectedCarousel && (
-          <CapLabel type="label3" className="rcs-carousel-selected-dimension">
-            Selected: {selectedCarousel}
-          </CapLabel>
-        )}
-      </CapRow>
-    );
-  };
-
-  // Reuse rich-card buttons UI per carousel card
-  const renderButtonComponentForCarouselCard = (cardIndex) => {
-    const card = carouselData?.[cardIndex] || {};
-    const suggestionsForCard = card.suggestions || [];
-    return (
-      <>
-        <CapHeader
-          className="rcs-button-cta"
-          title={(
-            <CapRow type="flex">
-              <CapHeading type="h4">
-                {formatMessage(messages.btnLabel)}
-              </CapHeading>
-            </CapRow>
-          )}
-          description={!isEditFlow && (
-            <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
-          )}
-        />
-        <CapActionButton
-          buttonType={RCS_BUTTON_TYPES.NONE}
-          updateButtonChange={(data, btnIndex) => {
-            // Match existing behavior: allow CapActionButton to manage save gating.
-            const updated = cloneDeep(suggestionsForCard);
-            if (btnIndex === MAX_BUTTONS) {
-              handleCarouselValueChange(cardIndex, [{ fieldName: 'suggestions', value: data }]);
-              return;
-            }
-            updated[btnIndex] = data;
-            handleCarouselValueChange(cardIndex, [{ fieldName: 'suggestions', value: updated }]);
-          }}
-          deleteButtonHandler={(btnIndex) => {
-            if (cardIndex === 0 && btnIndex === 0) {
-              return;
-            }
-            const savedCount = (suggestionsForCard || []).filter((x) => x && x.isSaved).length;
-            const target = (suggestionsForCard || []).find((s) => s && s.index === btnIndex);
-            if (cardIndex === 0 && target?.isSaved && savedCount <= 1) {
-              return;
-            }
-            const updated = cloneDeep(suggestionsForCard)
-              .filter((i) => i.index !== btnIndex)
-              .map((i, idx) => ({ ...i, index: idx }));
-            handleCarouselValueChange(cardIndex, [{ fieldName: 'suggestions', value: updated }]);
-          }}
-          suggestions={suggestionsForCard}
-          isEditFlow={isEditFlow}
-          isFullMode={isFullMode}
-          maxButtons={MAX_BUTTONS}
-          host={hostName}
-          minSavedSuggestions={cardIndex === 0 ? 1 : 0}
-          hideDeleteSuggestionIndexes={cardIndex === 0 ? [0] : []}
-        />
-      </>
-    );
-  };
-
-  const renderCarouselCardMedia = (cardIndex) => {
-    const card = carouselData?.[cardIndex] || {};
-    const dimKey = getCarouselDimensionKey();
-
-    if (card.mediaType === RCS_MEDIA_TYPES.VIDEO) {
-      return (
-        <>
-          <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Video</CapHeading>
-          <CapVideoUpload
-            index={getCarouselVideoAssetIndex(cardIndex)}
-            allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX}
-            videoSize={RCS_CAROUSEL_VIDEO_SIZE}
-            isFullMode={isFullMode}
-            uploadAsset={uploadRcsVideo}
-            uploadedAssetList={card.videoAsset || {}}
-            onVideoUploadUpdateAssestList={(_, val) => {
-              handleCarouselValueChange(cardIndex, [{ fieldName: 'videoAsset', value: val }]);
-            }}
-            videoData={rcsData}
-            className="cap-custom-video-upload"
-            formClassName={"rcs-video-upload"}
-            channel={RCS}
-            errorMessage={formatMessage(messages.videoErrorMessage)}
-            showVideoNameAndDuration={false}
-            showReUploadButton={!isEditFlow && isFullMode}
-            channelSpecificStyle={!isFullMode}
-          />
-
-          <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Thumbnail</CapHeading>
-          <CapImageUpload
-            allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-            imgWidth={RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS?.[dimKey]?.width}
-            imgHeight={RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS?.[dimKey]?.height}
-            imgSize={RCS_THUMBNAIL_MAX_SIZE}
-            uploadAsset={uploadRcsImage}
-            isFullMode={isFullMode}
-            imageSrc={card.thumbnailSrc}
-            updateImageSrc={(val) => handleCarouselValueChange(cardIndex, [{ fieldName: 'thumbnailSrc', value: val }])}
-            updateOnReUpload={() => handleCarouselValueChange(cardIndex, [{ fieldName: 'thumbnailSrc', value: '' }])}
-            minImgSize={RCS_THUMBNAIL_MIN_SIZE}
-            index={getCarouselThumbnailAssetIndex(cardIndex)}
-            className="cap-custom-image-upload"
-            key={`rcs-carousel-thumb-${cardIndex}-${dimKey}`}
-            imageData={rcsData}
-            channel={RCS}
-            channelSpecificStyle={!isFullMode}
-            skipDimensionValidation={true}
-            showReUploadButton={!isEditFlow && isFullMode}
-            disabled={isEditFlow || !isFullMode}
-          />
-        </>
-      );
-    }
-
-    // Default: IMAGE
-    return (
-      <>
-        <CapHeading type="h4" className="rcs-image-dimensions-label">{formatMessage(messages.mediaImage)}</CapHeading>
-        <CapImageUpload
-          allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-          imgWidth={RCS_CAROUSEL_IMAGE_DIMENSIONS?.[dimKey]?.width}
-          imgHeight={RCS_CAROUSEL_IMAGE_DIMENSIONS?.[dimKey]?.height}
-          imgSize={RCS_CAROUSEL_IMG_SIZE}
-          uploadAsset={uploadRcsImage}
-          isFullMode={isFullMode}
-          imageSrc={card.imageSrc}
-          updateImageSrc={(val) => handleCarouselValueChange(cardIndex, [{ fieldName: 'imageSrc', value: val }])}
-          updateOnReUpload={() => handleCarouselValueChange(cardIndex, [{ fieldName: 'imageSrc', value: '' }])}
-          index={getCarouselImageAssetIndex(cardIndex)}
-          className="cap-custom-image-upload"
-          key={`rcs-carousel-image-${cardIndex}-${dimKey}`}
-          imageData={rcsData}
-          channel={RCS}
-          channelSpecificStyle={!isFullMode}
-          skipDimensionValidation={true}
-          showReUploadButton={!isEditFlow && isFullMode}
-          disabled={isEditFlow || !isFullMode}
-        />
-      </>
-    );
-  };
-
-  const renderCarouselCardButtons = (cardIndex) => {
-    return renderButtonComponentForCarouselCard(cardIndex);
-  };
-
-  const getCarouselTabPanes = () => {
-    return (carouselData || []).map((card, index) => {
-      return {
-        key: String(index),
-        tab: index + 1,
-        content: (
-          <CapCard
-            title={`Card ${index + 1}`}
-            extra={
-              !isEditFlow &&
-              (carouselData.length === 1 ? (
-                <CapTooltip title={formatMessage(messages.rcsCarouselMinCardDeleteTooltip)}>
-                  <span className="button-disabled-tooltip-wrapper rcs-carousel-delete-tooltip-wrap">
-                    <CapButton
-                      className="rcs-carousel-card-delete"
-                      type="flat"
-                      onClick={() => deleteCarouselCard(index)}
-                      disabled
-                      aria-label={formatMessage(messages.rcsCarouselMinCardDeleteTooltip)}
-                    >
-                      <CapIcon type="delete" />
-                    </CapButton>
-                  </span>
-                </CapTooltip>
-              ) : (
-                <CapButton
-                  className="rcs-carousel-card-delete"
-                  type="flat"
-                  onClick={() => deleteCarouselCard(index)}
-                  aria-label={formatMessage(globalMessages.delete)}
-                >
-                  <CapIcon type="delete" />
-                </CapButton>
-              ))
-            }
-            className="rcs-carousel-card"
-          >
-            {/* Media selection should be at top of card */}
-            {isEditFlow ? (
-              <div className="rcs-creative-name-readonly">
-                <CapHeading type="h4">{formatMessage(messages.mediaTypeLabel)}</CapHeading>
-                <CapHeading type="h5" className="rcs-creative-name-value">
-                  {mediaRadioOptions.find((option) => option.value === card.mediaType)?.label || '-'}
-                </CapHeading>
-              </div>
-            ) : (
-              <CapRow className="rcs-carousel-media-selection">
-                <CapColumn className="rcs-carousel-media-selection-heading">
-                  <CapHeading type="h4">{formatMessage(messages.mediaTypeLabel)}</CapHeading>
-                </CapColumn>
-                <CapColumn>
-                  <CapRadioGroup
-                    id={`rcs-carousel-media-radio-${index}`}
-                    options={mediaRadioOptions}
-                    value={card.mediaType}
-                    onChange={({ target: { value } }) => {
-                      // Reset media fields when switching type
-                      if (value === RCS_MEDIA_TYPES.IMAGE) {
-                        // Switching to IMAGE: clear video + thumbnail uploads so they don't auto-restore.
-                        clearCarouselCardMedia(index, { clearImage: false, clearVideo: true, clearThumb: true });
-                        handleCarouselValueChange(index, [
-                          { fieldName: 'mediaType', value },
-                          { fieldName: 'videoAsset', value: {} },
-                          { fieldName: 'thumbnailSrc', value: '' },
-                        ]);
-                      } else {
-                        // Switching to VIDEO: clear image upload so it doesn't auto-restore.
-                        clearCarouselCardMedia(index, { clearImage: true, clearVideo: false, clearThumb: false });
-                        handleCarouselValueChange(index, [
-                          { fieldName: 'mediaType', value },
-                          { fieldName: 'imageSrc', value: '' },
-                        ]);
-                      }
-                    }}
-                    disabled={!isFullMode}
-                    className="rcs-radio"
-                  />
-                </CapColumn>
-              </CapRow>
-            )}
-
-            <CapRow className={`rcs-carousel-media-upload ${isEditFlow ? 'rcs-carousel-media-upload--readonly-above' : ''}`}>
-              {renderCarouselCardMedia(index)}
-            </CapRow>
-
-            {/* Title after media */}
-            <CapRow className="rcs-carousel-card-row">
-              <CapHeader
-                className="rcs-template-title-label"
-                title={<CapHeading type="h4">Card title</CapHeading>}
-                suffix={
-                  (isEditFlow || !isFullMode) ? (
-                    <TagList
-                      label={formatMessage(globalMessages.addLabels)}
-                      onTagSelect={onCarouselTagSelect}
-                      location={location}
-                      tags={getRcsTags()}
-                      onContextChange={handleOnTagsContextChange}
-                      injectedTags={injectedTags || {}}
-                      selectedOfferDetails={selectedOfferDetails}
-                    />
-                  ) : (
-                    <CapButton
-                      data-testid={`rcs-carousel-title-add-var-${index}`}
-                      type="flat"
-                      isAddBtn
-                      onClick={() => appendVarToCarouselField(index, 'title')}
-                      disabled={!!carouselErrors?.[index]?.title}
-                    >
-                      {formatMessage(messages.addVar)}
-                    </CapButton>
-                  )
-                }
-              />
-              <CapRow className="rcs_text_area_wrapper">
-                {(isEditFlow || !isFullMode) ? (
-                  renderCarouselEditMessage(card.title || '')
-                ) : (
-                  <CapInput
-                    value={card.title || ''}
-                    placeholder={formatMessage(messages.templateTitlePlaceholder)}
-                    onChange={({ target: { value } }) => {
-                      let error = false;
-                      if (value?.length > TEMPLATE_TITLE_MAX_LENGTH) {
-                        error = formatMessage(messages.templateHeaderLengthError);
-                      } else {
-                        error = variableErrorHandling(value);
-                      }
-                      updateCarouselErrors(index, { title: error });
-                      handleCarouselValueChange(index, [{ fieldName: 'title', value }]);
-                    }}
-                    disabled={isEditFlow || !isFullMode}
-                    errorMessage={carouselErrors?.[index]?.title}
-                  />
-                )}
-              </CapRow>
-            </CapRow>
-            {!isEditFlow && (
-              <CapRow className="rcs-carousel-character-count-row">
-                {renderCarouselCharacterCount(
-                  getCarouselTitleCharacterCount(index),
-                  getTitleMaxLength(),
-                )}
-              </CapRow>
-            )}
-
-            {/* Description after title */}
-            <CapRow className="rcs-carousel-card-row">
-              <CapHeader
-                title={<CapHeading type="h4">Card body text</CapHeading>}
-                suffix={
-                  (isEditFlow || !isFullMode) ? (
-                    <TagList
-                      label={formatMessage(globalMessages.addLabels)}
-                      onTagSelect={onCarouselTagSelect}
-                      location={location}
-                      tags={getRcsTags()}
-                      onContextChange={handleOnTagsContextChange}
-                      injectedTags={injectedTags || {}}
-                      selectedOfferDetails={selectedOfferDetails}
-                    />
-                  ) : (
-                    <CapButton
-                      data-testid={`rcs-carousel-desc-add-var-${index}`}
-                      type="flat"
-                      isAddBtn
-                      onClick={() => appendVarToCarouselField(index, 'description')}
-                      disabled={!!carouselErrors?.[index]?.description}
-                    >
-                      {formatMessage(messages.addVar)}
-                    </CapButton>
-                  )
-                }
-              />
-              <CapRow className="rcs_text_area_wrapper">
-                {(isEditFlow || !isFullMode) ? (
-                  renderCarouselEditMessage(card.description || '')
-                ) : (
-                  <TextArea
-                    autosize={{ minRows: 3, maxRows: 5 }}
-                    value={card.description || ''}
-                    placeholder={formatMessage(messages.templateDescPlaceholder)}
-                    onChange={({ target: { value } }) => {
-                      let error = false;
-                      if (value?.length > RCS_RICH_CARD_MAX_LENGTH) {
-                        error = formatMessage(messages.templateMessageLengthError);
-                      } else {
-                        error = variableErrorHandling(value);
-                      }
-                      updateCarouselErrors(index, { description: error });
-                      handleCarouselValueChange(index, [{ fieldName: 'description', value }]);
-                    }}
-                    disabled={isEditFlow || !isFullMode}
-                    errorMessage={
-                      carouselErrors?.[index]?.description && (
-                        <CapError className="rcs-template-message-error">
-                          {carouselErrors[index].description}
-                        </CapError>
-                      )
-                    }
-                  />
-                )}
-              </CapRow>
-            </CapRow>
-            {!isEditFlow && (
-              <CapRow className="rcs-carousel-character-count-row">
-                {renderCarouselCharacterCount(
-                  getCarouselDescriptionCharacterCount(index),
-                  getDescriptionMaxLength(),
-                )}
-              </CapRow>
-            )}
-
-            <CapDivider className="rcs-carousel-card-divider" />
-            {renderCarouselCardButtons(index)}
-          </CapCard>
-        ),
-      };
-    });
-  };
-
-  const renderCarouselSection = () => {
-    if (!isCarouselType) return null;
-
-    const isMaxCarouselCardsReached = MAX_RCS_CAROUSEL_ALLOWED === (carouselData?.length || 0);
-    const addCardTooltipTitle = isMaxCarouselCardsReached
-      ? formatMessage(messages.rcsCarouselMaxCardTooltip, { max: MAX_RCS_CAROUSEL_ALLOWED })
-      // "Set up the first card" only makes sense while creating a new template —
-      // in edit flow the cards already exist, so don't show it there.
-      : (!isEditFlow && checkDisableAddCarouselButton() ? formatMessage(messages.rcsCarouselAddCardDisabledTooltip) : '');
-
-    // No "+" in edit flow (cards can't be added there) — and with no "+", the
-    // divider before it has nothing to separate, so skip both together instead
-    // of rendering a dangling divider.
-    const operations = isEditFlow ? null : (
-      <>
-        <CapDivider type="vertical" />
-        <CapTooltip title={addCardTooltipTitle}>
-          <span className="button-disabled-tooltip-wrapper">
-            <CapButton
-              onClick={addCarouselCard}
-              type="flat"
-              className="add-carousel-content-button"
-              disabled={
-                isEditFlow ||
-                !isFullMode ||
-                isMaxCarouselCardsReached ||
-                checkDisableAddCarouselButton()
-              }
-            >
-              <CapIcon type="plus" />
-            </CapButton>
-          </span>
-        </CapTooltip>
-      </>
-    );
-
-    return (
-      <CapRow className={`rcs-carousel-section ${isEditFlow ? 'rcs-carousel-section--readonly-above' : ''}`}>
-        {renderCarouselDimensionSelection()}
-        <CapRow className="rcs-carousel-tab">
-          <CapTab
-            key={`rcs-carousel-tab-${carouselResetNonce}`}
-            defaultActiveKey="0"
-            activeKey={activeCarouselIndex}
-            tabBarExtraContent={operations}
-            onChange={(key) => {
-              setActiveCarouselIndex(`${key}`);
-              // reset focused var when switching cards (as per requirement)
-              setCarouselFocusedVarId('');
-            }}
-            panes={getCarouselTabPanes()}
-          />
-        </CapRow>
-      </CapRow>
-    );
-  };
 
   const mediaRadioOptions = [
     {
@@ -1098,16 +330,11 @@ export const Rcs = (props) => {
     },
     {
       value: RCS_MEDIA_TYPES.VIDEO,
-      label: formatMessage(
-        templateType === contentType.carousel
-          ? messages.carouselMediaVideoOption
-          : messages.mediaVideo,
-      ),
+      label: formatMessage(messages.mediaVideo),
     },
   ];
   const aiContentBotDisabled = isAiContentBotDisabled();
 
-
   const updateButtonChange = (data, index) => {
     if (data && data.text) {
       const forbiddenError = forbiddenCharactersValidation(data.text);
@@ -1144,9 +371,7 @@ export const Rcs = (props) => {
     if (isFullMode) return;
     if (loadingTags || !tags || tags.length === 0) return;
     const templateStr = type === TITLE_TEXT ? templateTitle : templateDesc;
-    const slotOffset =
-      type === TITLE_TEXT ? 0 : (templateTitle ? templateTitle.match(rcsVarRegex) || [] : []).length;
-    const resolved = resolveTemplateWithMap(templateStr, slotOffset); // placeholders -> mapped value (or '')
+    const resolved = resolveTemplateWithMap(templateStr); // placeholders -> mapped value (or '')
     if (!resolved) {
       if (type === TITLE_TEXT) setTemplateTitleError(false);
       if (type === MESSAGE_TEXT) setTemplateDescError(false);
@@ -1156,7 +381,7 @@ export const Rcs = (props) => {
     let contentForValidation = resolved;
     const placeholderTokens = templateStr.match(rcsVarRegex) || [];
     placeholderTokens.forEach((t) => {
-      const escaped = t.replace(REGEX_SPECIAL_CHARS_ESCAPE_PATTERN, '\\$&');
+      const escaped = t.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
       contentForValidation = contentForValidation.replace(new RegExp(escaped, 'g'), '');
     });
     if (!contentForValidation.trim()) {
@@ -1173,16 +398,10 @@ export const Rcs = (props) => {
         tagModule: getDefaultTags,
         isFullMode,
       }) || {};
-      const unsupportedTagsLengthCheck =
-      validationResponse?.unsupportedTags?.length > 0;
-      const errorMsg =
-        (unsupportedTagsLengthCheck &&
-          formatMessage(globalMessages.unsupportedTagsValidationError, {
-            unsupportedTags: validationResponse.unsupportedTags,
-          })) ||
-        (validationResponse.isBraceError &&
-          formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
-        false;
+    const errorMsg =
+      (validationResponse?.isBraceError &&
+        formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
+      false;
     if (type === TITLE_TEXT) setTemplateTitleError(errorMsg);
     if (type === MESSAGE_TEXT) setTemplateDescError(errorMsg);
   };
@@ -1195,98 +414,15 @@ export const Rcs = (props) => {
     validateResolvedTagsForType(MESSAGE_TEXT);
   }, [cardVarMapped, templateDesc, tags, injectedTags, loadingTags]);
 
-  useEffect(() => {
-    if (isFullMode || !isCarouselType) return;
-    if (loadingTags || !tags || tags.length === 0) return;
-    (carouselData || []).forEach((card, idx) => {
-      ['title', 'description'].forEach((field) => {
-        const templateStr = card?.[field] || '';
-        if (!templateStr) return;
-        const resolved = resolveTemplateWithMap(templateStr);
-        if (!resolved) {
-          updateCarouselErrors(idx, { [field]: false });
-          return;
-        }
-        let contentForValidation = resolved;
-        const placeholderTokens = templateStr.match(rcsVarRegex) || [];
-        placeholderTokens.forEach((t) => {
-          const escaped = t.replace(REGEX_SPECIAL_CHARS_ESCAPE_PATTERN, '\\$&');
-          contentForValidation = contentForValidation.replace(new RegExp(escaped, 'g'), '');
-        });
-        if (!contentForValidation.trim()) {
-          updateCarouselErrors(idx, { [field]: false });
-          return;
-        }
-        const validationResponse = validateTags({
-          content: contentForValidation,
-          tagsParam: tags,
-          injectedTagsParams: injectedTags,
-          location,
-          tagModule: getDefaultTags,
-          eventContextTags,
-          isFullMode,
-        }) || {};
-        const errorMsg =
-          (validationResponse?.unsupportedTags?.length > 0 &&
-            formatMessage(globalMessages.unsupportedTagsValidationError, {
-              unsupportedTags: validationResponse.unsupportedTags,
-            })) ||
-          (validationResponse.isBraceError &&
-            formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
-          false;
-        updateCarouselErrors(idx, { [field]: errorMsg });
-      });
-    });
-  }, [cardVarMapped, carouselData, tags, injectedTags, loadingTags, isCarouselType]);
-
   const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '');
 
-  const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
-
-  /** Same `{{tag}}` in both title and description must not share one semantic map entry. */
-  const rcsSpanningSemanticVarNames = useMemo(
-    () => getRcsSemanticVarNamesSpanningTitleAndDesc(templateTitle, templateDesc, rcsVarRegex),
-    [templateTitle, templateDesc],
-  );
-
-  /** 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;
-  };
-
-  /**
-   * Master-branch resolve: uses numeric slot keys + semantic spanning detection for correct
-   * multi-field variable resolution.
-   */
-  const resolveTemplateWithMap = (str = '', slotOffset = 0) => {
+  const resolveTemplateWithMap = (str = '') => {
     if (!str) return '';
-    const arr = splitTemplateVarStringRcs(str);
-    let varOrdinal = 0;
+    const arr = splitTemplateVarString(str);
     return arr.map((elem) => {
       if (rcsVarTestRegex.test(elem)) {
         const key = getVarNameFromToken(elem);
-        const globalSlot = slotOffset + varOrdinal;
-        varOrdinal += 1;
-        const v = resolveCardVarMappedSlotValue(
-          cardVarMapped,
-          key,
-          globalSlot,
-          isEditLike,
-          rcsSpanningSemanticVarNames.has(key),
-        );
+        const v = cardVarMapped?.[key];
         if (isNil(v) || String(v)?.trim?.() === '') return elem;
         return String(v);
       }
@@ -1294,145 +430,39 @@ export const Rcs = (props) => {
     }).join('');
   };
 
-  const buildCarouselCardsForPreview = (cards = []) => {
-    // Track cumulative variable slot index across all cards so resolveTemplateWithMap
-    // uses the correct globalSlot → slotKey for each token (e.g. card 1's {{3}} needs
-    // slotOffset=2 so slotKey becomes "3", not "1").
-    let slotOffset = 0;
-    return (cards || []).map((card = {}) => {
-      const rawTitle = card.title || '';
-      const rawDesc = card.description || '';
-      const titleVarCount = (rawTitle.match(rcsVarRegex) || []).length;
-      const descVarCount = (rawDesc.match(rcsVarRegex) || []).length;
-      const resolvedTitle = !isFullMode
-        ? resolveTemplateWithMap(rawTitle, slotOffset)
-        : rawTitle;
-      const resolvedDesc = !isFullMode
-        ? resolveTemplateWithMap(rawDesc, slotOffset + titleVarCount)
-        : rawDesc;
-      if (!isFullMode) {
-        slotOffset += titleVarCount + descVarCount;
-      }
-      const videoThumb = card.thumbnailSrc || card.videoAsset?.videoThumbnail || '';
-      const videoSrc = card.videoAsset?.videoSrc || '';
-      return {
-        mediaType: (card.mediaType || '').toLowerCase(),
-        imageSrc: card.imageSrc || '',
-        videoSrc,
-        videoPreviewImg: videoThumb,
-        title: resolvedTitle,
-        bodyText: resolvedDesc,
-        suggestions: card.suggestions || [],
-      };
-    });
-  };
-
-  /**
-   * 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(() => {
-    if (templateType === contentType.carousel) {
-      const carouselDimKey = getCarouselDimensionKey();
-      const carouselImgDims =
-        RCS_CAROUSEL_IMAGE_DIMENSIONS[carouselDimKey] || RCS_CAROUSEL_IMAGE_DIMENSIONS.MEDIUM_MEDIUM;
-      const carouselVidDims =
-        RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS[carouselDimKey]
-        || RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS.MEDIUM_MEDIUM;
-      return {
-        carouselData: buildCarouselCardsForPreview(carouselData),
-        carouselPreviewDimensions: {
-          imageWidth: carouselImgDims.width,
-          imageHeight: carouselImgDims.height,
-          videoThumbWidth: carouselVidDims.width,
-          videoThumbHeight: carouselVidDims.height,
-        },
-      };
-    }
-    const isMediaTypeImage = templateMediaType === RCS_MEDIA_TYPES.IMAGE;
-    const isMediaTypeVideo = templateMediaType === RCS_MEDIA_TYPES.VIDEO;
-    const isMediaTypeText = templateMediaType === RCS_MEDIA_TYPES.NONE;
-
-    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,
-    rcsSpanningSemanticVarNames,
-    carouselData,
-    selectedCarouselHeight,
-    selectedCarouselWidth,
-  ]);
+  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 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);
-  } else if (!id && isFullMode) {
-    // Create New: clear standalone media and ALL possible carousel card Redux slots.
-    // Redux persists across mounts so we must clear unconditionally (carouselData may be [] on fresh mount).
-    updateRcsImageSrc('');
-    setRcsVideoSrc({});
-    setRcsThumbnailSrc('');
-    setAssetList({});
-    setEditFlow(false);
-    actions.clearRcsMediaAsset(0);
-    actions.clearRcsMediaAsset(1);
-    for (let cardIdx = 0; cardIdx < MAX_RCS_CAROUSEL_ALLOWED; cardIdx += 1) {
-      actions.clearRcsMediaAsset(getCarouselImageAssetIndex(cardIdx));
-      actions.clearRcsMediaAsset(getCarouselVideoAssetIndex(cardIdx));
-      actions.clearRcsMediaAsset(getCarouselThumbnailAssetIndex(cardIdx));
-    }
-    setCarouselData([]);
-    setCarouselErrors([]);
   }
   return () => {
     actions.clearEditResponse();
@@ -1440,68 +470,59 @@ export const Rcs = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-    if (!(isEditFlow || !isFullMode)) return;
-
-    const titleTokenCount = (templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []).length;
+      if (!(isEditFlow || !isFullMode)) return;
 
-    const initField = (targetString, setVarMap, slotOffset) => {
-      const arr = splitTemplateVarStringRcs(targetString);
-      if (!arr?.length) {
-        setVarMap({});
-        return;
-      }
-      const nextVarMap = {};
-      let varOrdinal = 0;
-      arr.forEach((elem, idx) => {
-        // Mustache tokens: {{1}}, {{user_name}}, {{tag.FORMAT_1}}, etc.
-        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,
-            rcsSpanningSemanticVarNames.has(varName),
-          );
-          nextVarMap[id] = mappedValue;
+      const initField = (targetString, currentVarMap, setVarMap, setUpdated) => {
+        const arr = splitTemplateVarString(targetString);
+        if (!arr?.length) {
+          setVarMap({});
+          setUpdated([]);
+          return;
         }
-      });
-      setVarMap(nextVarMap);
-    };
-
-    initField(templateTitle, setTitleVarMappedData, 0);
-    initField(templateDesc, setDescVarMappedData, titleTokenCount);
-  }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames]);
+        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);
+      };
 
-  useEffect(() => {
-    if (!isEditFlow && isFullMode) {
+      initField(templateTitle, titleVarMappedData, setTitleVarMappedData, setUpdatedTitleData);
+      initField(templateDesc, descVarMappedData, setDescVarMappedData, setUpdatedDescData);
+    }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
+    
+    useEffect(() => {
+      if(!isEditFlow && isFullMode){
       setRcsVideoSrc({});
       updateRcsImageSrc('');
-      setRcsThumbnailSrc('');
+      setUpdateRcsImageSrc('');
+      updateRcsThumbnailSrc('');
       setAssetList({});
-    }
-  }, [templateMediaType]);
+      }
+     }, [templateMediaType]);
   
-    /** 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) {
+    const templateStatusHelper = (details) => {
+      const status = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
+      switch (status) {
         case RCS_STATUSES.approved:
           setTemplateStatus(RCS_STATUSES.approved);
           break;
         case RCS_STATUSES.pending:
           setTemplateStatus(RCS_STATUSES.pending);
           break;
-        case RCS_STATUSES.awaitingApproval.toLowerCase():
+        case RCS_STATUSES.awaitingApproval:
           setTemplateStatus(RCS_STATUSES.awaitingApproval);
           break;
         case RCS_STATUSES.unavailable:
@@ -1510,9 +531,6 @@ export const Rcs = (props) => {
         case RCS_STATUSES.rejected:
           setTemplateStatus(RCS_STATUSES.rejected);
           break;
-        case RCS_STATUSES.created:
-          setTemplateStatus(RCS_STATUSES.created);
-          break;
         default:
           setTemplateStatus(status);
           break;
@@ -1566,357 +584,48 @@ export const Rcs = (props) => {
   };
   
   useEffect(() => {
-    const details = rcsHydrationDetails;
+    const details = isFullMode ? rcsData?.templateDetails : templateData;
     if (details && Object.keys(details).length > 0) {
-      // 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 rcsContent = get(details, 'versions.base.content.RCS.rcsContent', {});
-      const cardType = (rcsContent?.cardType || '').toString();
-      
-      setEditFlow(true);
-      setTemplateName(details?.name || details?.creativeName || '');
-   
-      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 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;
-      });
-
-      if (cardType.toUpperCase() === contentType.carousel) {
-
-        setTemplateType(contentType.carousel);
-        setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
-        // Library/campaign payloads can store cardSettings/cardContent at the flat top-level
-        // `rcsContent` instead of nested under versions.base.content.RCS (same fallback already
-        // used for the rich_card media lookup below, line ~1793). Without it, cardWidth/height
-        // silently fall back to SMALL/MEDIUM, mismatching the dimensions the thumbnail was
-        // actually uploaded at and causing object-fit:cover to crop the preview image.
-        const cardSettings = rcsContent?.cardSettings
-          || get(details, 'rcsContent.cardSettings', {});
-        const cardWidth = cardSettings?.cardWidth || SMALL;
-        setSelectedCarouselWidth(cardWidth);
-
-        const cards = Array.isArray(rcsContent?.cardContent)
-          ? rcsContent.cardContent
-          : get(details, 'rcsContent.cardContent', []);
-        const firstHeight = cards?.[0]?.media?.height || MEDIUM;
-        setSelectedCarouselHeight(firstHeight);
-        setSelectedCarousel(`${firstHeight}_${cardWidth}`);
-        setActiveCarouselIndex('0');
-
-        const hydratedCards = cards.map((c = {}, idx) => {
-          const mediaType = c.mediaType;
-          const media = c.media || {};
-          const mediaUrl = media.mediaUrl || '';
-          const thumbUrl = media.thumbnailUrl || '';
-          const rawSuggestions = Array.isArray(c.suggestions) ? c.suggestions : [];
-          const suggestions = idx === 0 && rawSuggestions.length === 0
-            ? cloneDeep(RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS)
-            : rawSuggestions;
-          return {
-            title: c.title || '',
-            description: c.description || '',
-            mediaType,
-            imageSrc: mediaType === RCS_MEDIA_TYPES.IMAGE ? mediaUrl : '',
-            videoAsset: mediaType === RCS_MEDIA_TYPES.VIDEO ? {
-              videoSrc: mediaUrl,
-              previewUrl: thumbUrl,
-              videoThumbnail: thumbUrl,
-              videoName: c?.media?.videoName || '',
-            } : {},
-            thumbnailSrc: mediaType === RCS_MEDIA_TYPES.VIDEO ? thumbUrl : '',
-            suggestions,
-          };
-        });
-        setCarouselData(
-          hydratedCards.length > 0
-            ? ensureFirstCardDefaultPhoneSuggestions(hydratedCards)
-            : [cloneDeep(RCS_CAROUSEL_INITIAL_FIRST_CARD)],
-        );
-        setCarouselErrors(new Array(hydratedCards.length > 0 ? hydratedCards.length : 1).fill({}));
-
-        // Status bar uses first card's Status, keep existing behavior.
-       if (isHostInfoBip) {
-          setTemplateStatus('');
-        } else {
-          const firstCard = cards?.[0] || {};
-          const cardForCarouselStatus = {
-            ...firstCard,
-            Status:
-              firstCard.Status
-              ?? firstCard.status
-              ?? firstCard.approvalStatus
-              ?? get(details, 'templateStatus')
-              ?? get(details, 'approvalStatus')
-              ?? get(details, 'creativeStatus')
-              ?? get(details, 'versions.base.content.RCS.templateApprovalStatus')
-              ?? '',
-          };
-          templateStatusHelper(cardForCarouselStatus);
-        }
-
-        // Hydrate SMS fallback for carousel — same logic as for non-carousel types below.
-        // Without this the early `return` skips fallback hydration entirely, so reopening
-        // a carousel template never restores the saved SMS fallback data.
-        const carouselSmsFallbackContent = mergeRcsSmsFallBackContentFromDetails(details);
-        const carouselSmsBase = get(carouselSmsFallbackContent, 'versions.base', {});
-        const carouselUpdatedEditor = carouselSmsBase['updated-sms-editor'] ?? carouselSmsBase['sms-editor'];
-        const carouselSmsEditor = carouselSmsBase['sms-editor'];
-        const carouselFromNested = Array.isArray(carouselUpdatedEditor)
-          ? carouselUpdatedEditor.join('')
-          : (typeof carouselUpdatedEditor === 'string' ? carouselUpdatedEditor : (carouselSmsEditor || ''));
-        const carouselFallbackMessage = carouselSmsFallbackContent.smsContent
-          || carouselSmsFallbackContent.smsTemplateContent
-          || carouselSmsFallbackContent.message
-          || carouselFromNested
-          || '';
-        const carouselVarMappedFromPayload = carouselSmsFallbackContent[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] || {};
-        const carouselHasVarMapped = Object.keys(carouselVarMappedFromPayload).length > 0;
-        const carouselHasFallbackPayload =
-          carouselSmsFallbackContent
-          && Object.keys(carouselSmsFallbackContent).length > 0
-          && (
-            !!carouselSmsFallbackContent.smsTemplateName
-            || !!carouselFallbackMessage
-            || carouselHasVarMapped
-          );
-        if (carouselHasFallbackPayload) {
-          const carouselUnicodeFromApi =
-            typeof carouselSmsFallbackContent.unicodeValidity === 'boolean'
-              ? carouselSmsFallbackContent.unicodeValidity
-              : (typeof carouselSmsBase['unicode-validity'] === 'boolean' ? carouselSmsBase['unicode-validity'] : true);
-          const carouselRegisteredSenderIds =
-            extractRegisteredSenderIdsFromSmsFallbackRecord(carouselSmsFallbackContent);
-          const carouselNextSmsState = {
-            templateName: carouselSmsFallbackContent.smsTemplateName || '',
-            content: carouselFallbackMessage,
-            templateContent: carouselFallbackMessage,
-            unicodeValidity: carouselUnicodeFromApi,
-            ...(carouselHasVarMapped && { rcsSmsFallbackVarMapped: carouselVarMappedFromPayload }),
-            ...(Array.isArray(carouselRegisteredSenderIds) && carouselRegisteredSenderIds.length > 0
-              ? { registeredSenderIds: carouselRegisteredSenderIds }
-              : {}),
-          };
-          const carouselHydrationKey = JSON.stringify({
-            creativeKey: details._id || details.name || details.creativeName || '',
-            templateName: carouselNextSmsState.templateName,
-            content: carouselNextSmsState.content,
-            unicodeValidity: carouselNextSmsState.unicodeValidity,
-            varMapped: carouselNextSmsState.rcsSmsFallbackVarMapped || {},
-            senderIds: Array.isArray(carouselRegisteredSenderIds)
-              ? carouselRegisteredSenderIds.join('')
-              : '',
-          });
-          if (isFullMode || lastSmsFallbackHydrationKeyRef.current !== carouselHydrationKey) {
-            lastSmsFallbackHydrationKeyRef.current = carouselHydrationKey;
-            setSmsFallbackData(carouselNextSmsState);
-          }
-        } else if (isFullMode || lastSmsFallbackHydrationKeyRef.current !== '__EMPTY__') {
-          lastSmsFallbackHydrationKeyRef.current = '__EMPTY__';
-          setSmsFallbackData(null);
-        }
-
-        return;
+      if (!isFullMode) {
+        const tempCardVarMapped = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped', {});
+        setCardVarMapped(tempCardVarMapped);
       }
-
-      const mediaType =
-        card0.mediaType
-        || get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].mediaType', '');
-      if (cardType.toUpperCase() !== contentType.carousel && mediaType === RCS_MEDIA_TYPES.NONE) {
+      const mediaType = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].mediaType', '');
+      if (mediaType === RCS_MEDIA_TYPES.NONE) {
         setTemplateType(contentType.text_message);
-      } else if (cardType.toUpperCase() !== contentType.carousel && mediaType !== RCS_MEDIA_TYPES.NONE) {
+      } else {
         setTemplateType(contentType.rich_card);
       }
-     
-      const loadedTitle = loadedTitleForMap;
-      const loadedDesc = loadedDescForMap;
-      const { normalizedTitle, normalizedDesc } = normalizeLibraryLoadedTitleDesc({
-        loadedTitle,
-        loadedDesc,
-        isFullMode,
-        cardVarMappedAfterHydration: hydratedCardVarMappedResult,
-        rcsVarRegex,
-      });
+      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;
       setTemplateTitle(normalizedTitle);
       setTemplateDesc(normalizedDesc);
-      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')
-          ?? '',
-      };
-      if (isHostInfoBip) {
-        setTemplateStatus('');
-      } else {
-        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', '');
+      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', '');
       setMediaData(mediaData, mediaType, cardSettings);
       if (details?.edit) {
         const rcsAccountId = get(details, 'versions.base.content.RCS.rcsContent.accountId', '');
         setRcsAccount(rcsAccountId);
       }
-
-      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 registeredSenderIdsFromApi =
-          extractRegisteredSenderIdsFromSmsFallbackRecord(smsFallbackContent);
-        const nextSmsState = {
-          templateName: smsFallbackContent.smsTemplateName || '',
-          content: fallbackMessage,
-          templateContent: fallbackMessage,
-          unicodeValidity: unicodeFromApi,
-          ...(hasVarMapped && { rcsSmsFallbackVarMapped: varMappedFromPayload }),
-          ...(Array.isArray(registeredSenderIdsFromApi) && registeredSenderIdsFromApi.length > 0
-            ? { registeredSenderIds: registeredSenderIdsFromApi }
-            : {}),
-        };
-        const hydrationKey = JSON.stringify({
-          creativeKey: details._id || details.name || details.creativeName || '',
-          templateName: nextSmsState.templateName,
-          content: nextSmsState.content,
-          unicodeValidity: nextSmsState.unicodeValidity,
-          varMapped: nextSmsState.rcsSmsFallbackVarMapped || {},
-          senderIds:
-            Array.isArray(registeredSenderIdsFromApi)
-              ? registeredSenderIdsFromApi.join('\u001f')
-              : '',
-        });
-        if (
-          isFullMode
-          || lastSmsFallbackHydrationKeyRef.current !== hydrationKey
-        ) {
-          lastSmsFallbackHydrationKeyRef.current = hydrationKey;
-          setSmsFallbackData(nextSmsState);
-        }
-      } else if (isFullMode || lastSmsFallbackHydrationKeyRef.current !== '__EMPTY__') {
-        lastSmsFallbackHydrationKeyRef.current = '__EMPTY__';
-        setSmsFallbackData(null);
-      }
     }
-  }, [rcsHydrationDetails, isFullMode, isHostInfoBip]);
+  }, [rcsData, templateData, isFullMode, isEditFlow]);
+  
 
   useEffect(() => {
     if (templateType === contentType.text_message) {
       setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
-      // 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.
+      setTemplateTitle('');
+      setTemplateTitleError('');
       if (!isEditFlow && isFullMode) {
-        setTemplateTitle('');
-        setTemplateTitleError('');
         setUpdateRcsImageSrc('');
+        setUpdateRcsVideoSrc({});
         setRcsVideoSrc({});
         setSelectedDimension(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
       }
@@ -1943,8 +652,7 @@ export const Rcs = (props) => {
     if (!showDltContainer) {
       const { type, module } = location.query || {};
       const isEmbedded = type === EMBEDDED;
-      // 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 context = isEmbedded ? module : DEFAULT;
       const embedded = isEmbedded ? type : FULL;
       const query = {
         layout: SMS,
@@ -1955,9 +663,9 @@ export const Rcs = (props) => {
       if (getDefaultTags) {
         query.context = getDefaultTags;
       }
-      fetchTagSchemaIfNewQuery(query);
+      globalActions.fetchSchemaForEntity(query);
     }
-  }, [showDltContainer, fetchTagSchemaIfNewQuery]);
+  }, [showDltContainer]);
 
   useEffect(() => {
     let tag = get(metaEntities, `tags.standard`, []);
@@ -1980,128 +688,16 @@ export const Rcs = (props) => {
       context,
       embedded,
     };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
-    }
-    fetchTagSchemaIfNewQuery(query);
     globalActions.fetchSchemaForEntity(query);
   };
 
-  const replaceNumericPlaceholderWithTagInTemplate = (templateStr, numericVarName, tagName) => {
-    if (!templateStr || !numericVarName || !tagName) return templateStr;
-    const re = buildRcsNumericMustachePlaceholderRegex(numericVarName);
-    return templateStr.replace(re, `{{${tagName}}}`);
-  };
-
-  const onTagSelect = (selectedTagNameFromPicker, varSegmentCompositeDomId, tagAreaField) => {
-    if (!varSegmentCompositeDomId) return;
-    const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
-    if (underscoreIndexInCompositeId === -1) return;
-    const segmentIndexSuffix = varSegmentCompositeDomId.slice(underscoreIndexInCompositeId + 1);
-    if (segmentIndexSuffix === '' || isNaN(Number(segmentIndexSuffix))) return;
-    const mustacheTokenFromCompositeId = varSegmentCompositeDomId.slice(0, underscoreIndexInCompositeId);
-    const semanticOrNumericVarName = getVarNameFromToken(mustacheTokenFromCompositeId);
-    if (!semanticOrNumericVarName) return;
-    const isNumericPlaceholderSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(semanticOrNumericVarName));
-    const templateStringForField =
-      tagAreaField === RCS_TAG_AREA_FIELD_TITLE ? templateTitle : templateDesc;
-    const titleOrMessageFieldType =
-      tagAreaField === RCS_TAG_AREA_FIELD_TITLE ? TITLE_TEXT : MESSAGE_TEXT;
-    const globalVarSlotIndexZeroBased = getGlobalSlotIndexForRcsFieldId(
-      varSegmentCompositeDomId,
-      templateStringForField,
-      titleOrMessageFieldType,
-    );
-    const cardVarMappedNumericSlotKey =
-      globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined
-        ? String(globalVarSlotIndexZeroBased + 1)
-        : null;
-
-    setCardVarMapped((previousCardVarMapped) => {
-      const updatedCardVarMapped = { ...(previousCardVarMapped || {}) };
-      if (isNumericPlaceholderSlot) {
-        const existingValueBeforeAppend = (
-          previousCardVarMapped?.[semanticOrNumericVarName] ?? ''
-        ).toString();
-        const mappedValueAfterAppendingTag = `${existingValueBeforeAppend}{{${selectedTagNameFromPicker}}}`;
-        delete updatedCardVarMapped[semanticOrNumericVarName];
-        updatedCardVarMapped[selectedTagNameFromPicker] = mappedValueAfterAppendingTag;
-      } else {
-        // Same semantic token (e.g. {{adv}}) in title and body must not share one map key for
-        // "existing value" — that appends the new tag onto the other field. Match handleRcsVarChange:
-        // read/write the global numeric slot only and drop the shared semantic key.
-        const existingValueBeforeAppend = cardVarMappedNumericSlotKey
-          ? String(previousCardVarMapped?.[cardVarMappedNumericSlotKey] ?? '')
-          : String(previousCardVarMapped?.[semanticOrNumericVarName] ?? '');
-        const mappedValueAfterAppendingTag = `${existingValueBeforeAppend}{{${selectedTagNameFromPicker}}}`;
-        delete updatedCardVarMapped[semanticOrNumericVarName];
-        if (cardVarMappedNumericSlotKey) {
-          updatedCardVarMapped[cardVarMappedNumericSlotKey] = mappedValueAfterAppendingTag;
-          // Sync all other intra-field occurrences of the same variable (cross-field slots stay independent)
-          const fieldOffset = titleOrMessageFieldType === TITLE_TEXT ? 0 : (templateTitle?.match(rcsVarRegex) ?? []).length;
-          const fieldSegments = splitTemplateVarStringRcs(templateStringForField ?? '');
-          let varOrdinal = 0;
-          for (let i = 0; i < fieldSegments.length; i++) {
-            if (rcsVarTestRegex.test(fieldSegments[i])) {
-              const slotVarName = getVarNameFromToken(fieldSegments[i]);
-              const globalSlot = fieldOffset + varOrdinal;
-              varOrdinal += 1;
-              if (slotVarName === semanticOrNumericVarName && globalSlot !== globalVarSlotIndexZeroBased) {
-                updatedCardVarMapped[String(globalSlot + 1)] = mappedValueAfterAppendingTag;
-              }
-            }
-          }
-        } else {
-          updatedCardVarMapped[semanticOrNumericVarName] = mappedValueAfterAppendingTag;
-        }
-      }
-      return updatedCardVarMapped;
-    });
-
-    if (
-      isNumericPlaceholderSlot
-      && (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC)
-    ) {
-      if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE) {
-        setTemplateTitle((previousTitle) => {
-          const titleAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
-            previousTitle || '',
-            semanticOrNumericVarName,
-            selectedTagNameFromPicker,
-          );
-          if (titleAfterReplacingNumericPlaceholder === previousTitle) return previousTitle;
-          setTemplateTitleError(variableErrorHandling(titleAfterReplacingNumericPlaceholder));
-          // Remount segment editor: tag insert replaces {{n}} with e.g. {{tag.FORMAT_1}} — slot ids change; avoids stale UI vs manual typing in full-mode TextArea
-          setRcsVarSegmentEditorRemountKey((k) => k + 1);
-          return titleAfterReplacingNumericPlaceholder;
-        });
-      } else {
-        setTemplateDesc((previousDescription) => {
-          const descriptionAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
-            previousDescription || '',
-            semanticOrNumericVarName,
-            selectedTagNameFromPicker,
-          );
-          if (descriptionAfterReplacingNumericPlaceholder === previousDescription) {
-            return previousDescription;
-          }
-          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
-          setRcsVarSegmentEditorRemountKey((k) => k + 1);
-          return descriptionAfterReplacingNumericPlaceholder;
-        });
-      }
-    }
-  };
-
-  const onTitleTagSelect = (tagName) => onTagSelect(tagName, titleTextAreaId, RCS_TAG_AREA_FIELD_TITLE);
-
-  const onDescTagSelect = (tagName) => onTagSelect(tagName, descTextAreaId, RCS_TAG_AREA_FIELD_DESC);
-
-  const onCarouselTagSelect = (data) => {
-    if (!carouselFocusedVarId) return;
-    const sep = carouselFocusedVarId.lastIndexOf('_');
+  const onTagSelect = (data, areaId) => {
+    if (!areaId) return;
+    const sep = areaId.lastIndexOf('_');
     if (sep === -1) return;
-    const token = carouselFocusedVarId.slice(0, sep);
+    const numId = Number(areaId.slice(sep + 1));
+    if (isNaN(numId)) return;
+    const token = areaId.slice(0, sep);
     const variableName = getVarNameFromToken(token);
     if (!variableName) return;
     setCardVarMapped((prev) => {
@@ -2114,6 +710,10 @@ export const Rcs = (props) => {
     });
   };
 
+  const onTitleTagSelect = (data) => onTagSelect(data, titleTextAreaId);
+
+  const onDescTagSelect = (data) => onTagSelect(data, descTextAreaId);
+
   const onTagSelectFallback = (data) => {
     const tempMsg = `${fallbackMessage}{{${data}}}`;
     const error = fallbackMessageErrorHandler(tempMsg);
@@ -2133,14 +733,15 @@ export const Rcs = (props) => {
   };
   // tag Code end
 
-  const renderLabel = (value, desc) => {
+  const renderLabel = (value, showLabel, desc) => {
+    const isTemplateApproved = (templateStatus === RCS_STATUSES.approved);
     return (
       <>
-        <div className="rcs-form-section-heading">
+        <RcsLabel>
           <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
-        </div>
+        </RcsLabel>
         {desc && (
-          <CapLabel type="label3" className="rcs-form-field-caption">
+          <CapLabel type="label3" style={{ marginBottom: '17px' }}>
             {formatMessage(messages[desc])}
           </CapLabel>
         )}
@@ -2159,8 +760,13 @@ export const Rcs = (props) => {
     },
     {
       value: contentType.carousel,
-      label: formatMessage(messages.carousel),
-    }
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledCarouselTooltip)}>
+          {formatMessage(messages.carousel)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
   ];
 
   const onTemplateNameChange = ({ target: { value } }) => {
@@ -2171,10 +777,6 @@ export const Rcs = (props) => {
 
   const onTemplateTypeChange = ({ target: { value } }) => {
     setTemplateType(value);
-    // Carousel has per-card media; keep template-level media type neutral.
-    if (value === contentType.carousel) {
-      setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
-    }
   };
 
 
@@ -2195,39 +797,8 @@ export const Rcs = (props) => {
   const onTemplateMediaTypeChange = ({ target: { value } }) => {
     setTemplateMediaType(value);
   };
-  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"
-            />
-          );
-        }
-      });
-    }
-    return renderArray;
-  };
+
+
   const onTemplateTitleChange = ({ target: { value } }) => {
     let errorMessage = false;
     if (templateType === contentType.rich_card && !value.trim()) {
@@ -2243,7 +814,7 @@ export const Rcs = (props) => {
 
   const onTemplateDescChange = ({ target: { value } }) => {
     let errorMessage = false;
-    if(templateType === contentType.text_message && value?.length > (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH)){
+    if(templateType === contentType.text_message && value?.length > RCS_TEXT_MESSAGE_MAX_LENGTH){
       errorMessage = formatMessage(messages.templateMessageLengthError);
      } else if(templateType === contentType.rich_card && value?.length > RCS_RICH_CARD_MAX_LENGTH){
       errorMessage = formatMessage(messages.templateMessageLengthError);
@@ -2259,16 +830,16 @@ export const Rcs = (props) => {
 
   const templateDescErrorHandler = (value) => {
     let errorMessage = false;
-    const { unsupportedTags, isBraceError } = validateTags({
+    const { isBraceError } = validateTags({
       content: value,
       tagsParam: tags,
-      injectedTagsParams: injectedTags,
       location,
       tagModule: getDefaultTags,
+      isFullMode,
     }) || {};
     
     const maxLength = templateType === contentType.text_message 
-      ? (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH) 
+      ? RCS_TEXT_MESSAGE_MAX_LENGTH 
       : RCS_RICH_CARD_MAX_LENGTH;
   
     if (value === '' && isMediaTypeText) {
@@ -2291,25 +862,10 @@ export const Rcs = (props) => {
   };
 
   const fallbackMessageErrorHandler = (value) => {
-    let errorMessage = false;
-    const { unsupportedTags } = validateTags({
-      content: value,
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-    }) || {};
     if (value?.length > FALLBACK_MESSAGE_MAX_LENGTH) {
-      errorMessage = formatMessage(messages.fallbackMsgLenError);
-    } else if (unsupportedTags?.length > 0) {
-      errorMessage = formatMessage(
-        globalMessages.unsupportedTagsValidationError,
-        {
-          unsupportedTags,
-        },
-      );
+      return formatMessage(messages.fallbackMsgLenError);
     }
-    return errorMessage;
+    return false;
   };
 
   // Check for forbidden characters: square brackets [] and single curly braces {}
@@ -2356,43 +912,53 @@ export const Rcs = (props) => {
       if(!isFullMode){
         return false;
       }
-      // Allow Liquid-style param names: letters, digits, underscore, dots (e.g. dynamic_expiry_date_after_3_days.FORMAT_1)
-      if (!/^[\w.]+$/.test(paramName)) {
+      if (!/^\w+$/.test(paramName)) {
         return formatMessage(messages.unknownCharactersError);
       }
     }
     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(templateDesc);
+  onAddVar(MESSAGE_TEXT, templateDesc, rcsVarRegex);
 };
 
-/**
- * Returns the smallest positive integer not already used as a `{{N}}` variable
- * in either the title or description fields, or null if the limit (19) is reached.
- * Scans both fields so title and description vars never share the same number
- * (duplicate numbers would share a cardVarMapped key and bleed values across fields).
- */
-const getNextRcsNumericVarNumber = (titleStr, descStr) => {
-  const allExistingVars = [
-    ...(titleStr.match(RCS_NUMERIC_VAR_TOKEN_REGEX) || []),
-    ...(descStr.match(RCS_NUMERIC_VAR_TOKEN_REGEX) || []),
-  ];
-  const existingNumbers = allExistingVars.flatMap(v => {
-    const m = v.match(/\d+/);
-    return m ? [parseInt(m[0], 10)] : [];
-  });
+const onAddVar = (type, messageContent, regex) => {
+  // 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));
   let nextNumber = 1;
   while (existingNumbers.includes(nextNumber)) {
     nextNumber++;
   }
-  return nextNumber > 19 ? null : nextNumber;
-};
-
-const onAddVar = (messageContent) => {
-  const nextNumber = getNextRcsNumericVarNumber(templateTitle, messageContent);
-  if (nextNumber === null) {
+  if (nextNumber > 19) {
     return;
   }
   const nextVar = `{{${nextNumber}}}`;
@@ -2404,13 +970,15 @@ const onAddVar = (messageContent) => {
 };
 
 const onTitleAddVar = () => {
-  // Scan both title AND description so the new title var number doesn't
-  // duplicate a number already used in the description. Duplicate numeric
-  // names would share the same cardVarMapped semantic key, causing the
-  // description slot to reflect the title slot value and vice-versa.
+  // Always append the next variable at the end, like WhatsApp
   const messageContent = templateTitle;
-  const nextNumber = getNextRcsNumericVarNumber(templateTitle, templateDesc);
-  if (nextNumber === null) {
+  const existingVars = messageContent.match(/\{\{(\d+)\}\}/g) || [];
+  const existingNumbers = existingVars.map(v => parseInt(v.match(/\d+/)[0], 10));
+  let nextNumber = 1;
+  while (existingNumbers.includes(nextNumber)) {
+    nextNumber++;
+  }
+  if (nextNumber > 19) {
     return;
   }
   const nextVar = `{{${nextNumber}}}`;
@@ -2422,35 +990,26 @@ const onTitleAddVar = () => {
   setTemplateTitleError(error);
 };
 
-  // Carousel: global variables across the whole carousel (all cards, title+body)
-  const getNextCarouselVarToken = () => {
-    const nums = [];
-    (carouselData || []).forEach((c = {}) => {
-      const titleMatches = (c.title || '').match(RCS_NUMERIC_VAR_TOKEN_REGEX) || [];
-      const descMatches = (c.description || '').match(RCS_NUMERIC_VAR_TOKEN_REGEX) || [];
-      [...titleMatches, ...descMatches].forEach((tok) => {
-        const n = parseInt((tok.match(/\d+/) || [])[0], 10);
-        if (!Number.isNaN(n)) nums.push(n);
-      });
-    });
-    const existing = new Set(nums);
-    let nextNumber = 1;
-    while (existing.has(nextNumber)) nextNumber++;
-    if (nextNumber > 19) return '';
-    return `{{${nextNumber}}}`;
-  };
-
-  const appendVarToCarouselField = (cardIndex, fieldName) => {
-    const token = getNextCarouselVarToken();
-    if (!token) return;
-    setCarouselData((prev = []) => {
-      const updated = cloneDeep(prev);
-      if (!updated[cardIndex]) return prev;
-      const current = (updated[cardIndex][fieldName] || '').toString();
-      updated[cardIndex][fieldName] = `${current}${token}`;
-      return updated;
-    });
-  };
+  
+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) {
@@ -2466,46 +1025,6 @@ const onTitleAddVar = () => {
     return "";
   };
 
-  // Carousel: render variable-value editor for a given template string (title/description).
-  // This matches rich-card/text edit behavior: static pieces are read-only, variable tokens are editable.
-  const renderCarouselEditMessage = (templateStr) => {
-    const renderArray = [];
-    const templateArr = splitTemplateVarString(templateStr);
-    if (templateArr?.length) {
-      templateArr.forEach((elem, index) => {
-        if (rcsVarTestRegex.test(elem)) {
-          const varName = getVarNameFromToken(elem);
-          renderArray.push(
-            <div key={`${elem}_${index}`} className="var-segment-message-editor__var-slot">
-              <TextArea
-                id={`${elem}_${index}`}
-                placeholder={`enter the value for ${elem}`}
-                autosize={{ minRows: 1, maxRows: 3 }}
-                onChange={(e) => textAreaValueChange(e, TITLE_TEXT)}
-                value={varName ? ((cardVarMapped?.[varName] ?? '').toString()) : ''}
-                onFocus={(e) => {
-                  const id = e?.target?.id || e?.currentTarget?.id || '';
-                  setCarouselFocusedVarId(id);
-                }}
-              />
-            </div>
-          );
-        } else if (elem) {
-          renderArray.push(
-            <CapHeading
-              key={`static_${index}`}
-              type="h4"
-              className="rcs-edit-template-message-split"
-            >
-              {elem}
-            </CapHeading>
-          );
-        }
-      });
-    }
-    return <CapRow className="rcs-edit-template-message-input">{renderArray}</CapRow>;
-  };
-
   const textAreaValueChange = (e, type) => {
     const value = e?.target?.value ?? '';
     const id = e?.target?.id || e?.currentTarget?.id || '';
@@ -2525,9 +1044,7 @@ const onTitleAddVar = () => {
   };
 
   const setTextAreaId = (e, type) => {
-    // VarSegmentMessageEditor calls onFocus(id) with a plain string; DOM events
-    // have an `.target.id` shape. Support both.
-    const id = typeof e === 'string' ? e : (e?.target?.id || e?.currentTarget?.id || '');
+    const id = e?.target?.id || e?.currentTarget?.id || '';
     if (!id) return;
     if (type === TITLE_TEXT) setTitleTextAreaId(id);
     else setDescTextAreaId(id);
@@ -2546,12 +1063,10 @@ const onTitleAddVar = () => {
             </CapRow>
           }
           description={
-            !isEditFlow && (
-              <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
-            )
+            <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
           }
         />
-
+        
         <CapActionButton
                         buttonType={buttonType}
                         updateButtonChange={updateButtonChange}
@@ -2560,85 +1075,44 @@ const onTitleAddVar = () => {
                         isEditFlow={isEditFlow}
                         isFullMode={isFullMode}
                         maxButtons={MAX_BUTTONS}
-                        host={hostName}
-          />
+            />
       </>
     );
   };
   
-  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,
-          rcsSpanningSemanticVarNames.has(varName),
-        );
-      }
-    });
-    return segmentIdToResolvedValue;
-  };
-
-  const titleVarSegmentValueMapById = useMemo(
-    () => getRcsValueMap(templateTitle, TITLE_TEXT),
-    [templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
-  );
-  const descriptionVarSegmentValueMapById = useMemo(
-    () => getRcsValueMap(templateDesc, MESSAGE_TEXT),
-    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
-  );
-
-  const handleRcsVarChange = (varSegmentCompositeDomId, value, type) => {
-    const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
-    if (underscoreIndexInCompositeId === -1) return;
-    const mustacheTokenFromCompositeId = varSegmentCompositeDomId.slice(0, underscoreIndexInCompositeId);
-    const variableName = getVarNameFromToken(mustacheTokenFromCompositeId);
-    if (variableName === undefined || variableName === null || variableName === '') return;
-    const isInvalidValue = value?.trim() === '';
-    const coercedSlotValue = isInvalidValue ? '' : value;
-    const templateStringForField = type === TITLE_TEXT ? templateTitle : templateDesc;
-    const globalVarSlotIndexZeroBased = getGlobalSlotIndexForRcsFieldId(
-      varSegmentCompositeDomId,
-      templateStringForField,
-      type,
-    );
-    const fieldOffset = type === TITLE_TEXT ? 0 : (templateTitle?.match(rcsVarRegex) ?? []).length;
-    setCardVarMapped((previousCardVarMapped) => {
-      const updatedCardVarMapped = { ...previousCardVarMapped };
-      // Remove stale semantic key: keeping it causes every other slot sharing the same
-      // variable name (e.g. {{adv}} in both title and description) to read the same value
-      // via the semantic-key fallback in resolveCardVarMappedSlotValue.
-      delete updatedCardVarMapped[variableName];
-      if (globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined) {
-        updatedCardVarMapped[String(globalVarSlotIndexZeroBased + 1)] = coercedSlotValue;
-        // Sync all other intra-field occurrences of the same variable (cross-field slots stay independent)
-        const fieldSegments = splitTemplateVarStringRcs(templateStringForField ?? '');
-        let varOrdinal = 0;
-        for (let i = 0; i < fieldSegments.length; i++) {
-          if (rcsVarTestRegex.test(fieldSegments[i])) {
-            const slotVarName = getVarNameFromToken(fieldSegments[i]);
-            const globalSlot = fieldOffset + varOrdinal;
-            varOrdinal += 1;
-            if (slotVarName === variableName && globalSlot !== globalVarSlotIndexZeroBased) {
-              updatedCardVarMapped[String(globalSlot + 1)] = coercedSlotValue;
-            }
-          }
+  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 updatedCardVarMapped;
-    });
+      });
+    }
+    return renderArray;
   };
 
   const renderTextComponent = () => {
@@ -2658,7 +1132,6 @@ const onTitleAddVar = () => {
         }
         suffix={
           <>
-        
             {(isEditFlow || !isFullMode) ? (
               <TagList
                 label={formatMessage(globalMessages.addLabels)}
@@ -2675,28 +1148,18 @@ const onTitleAddVar = () => {
                 type="flat"
                 isAddBtn
                 onClick={onTitleAddVar}
-                disabled={templateTitleError}
+                disabled={!!templateTitleError}
               >
                 {formatMessage(messages.addVar)}
               </CapButton>
-           )}
+            )}
           </>
-        }  
-      />
-      
-    {(isEditFlow || !isFullMode) ? (
-      <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">
+  {(isEditFlow || !isFullMode) ? (
+      renderedRCSEditMessage(splitTemplateVarString(templateTitle), TITLE_TEXT)
   ) : (
-    <div className="rcs_text_area_wrapper">
     <CapInput
       className={`rcs-template-title-input ${
         !isTemplateApproved ? "rcs-edit-disabled" : ""
@@ -2709,8 +1172,8 @@ const onTitleAddVar = () => {
       errorMessage={templateTitleError}
       disabled={isEditFlow || !isFullMode}
     />
-    </div>
   )}
+</div>
 {(isEditFlow || !isFullMode) && templateTitleError && (
   <CapError className="rcs-template-title-error">
     {templateTitleError}
@@ -2718,7 +1181,7 @@ const onTitleAddVar = () => {
 )}
 {!isEditFlow && isFullMode && renderTitleCharacterCount()}
     </>
-      )}
+  )}
 
 {/* Template Message */}
        <CapRow useLegacy id="rcs-template-message-label">
@@ -2756,21 +1219,9 @@ const onTitleAddVar = () => {
           />
         </CapRow>
         <CapRow useLegacy className="rcs-create-template-message-input">
-            {/* Edit/library: segmented inputs (split on {{…}}). Full-mode create: single TextArea below — manual entry there never hits segment split. TagList replaces {{n}} in template string here. */}
-          <CapRow className="rcs_text_area_wrapper">
-            {(isEditFlow || !isFullMode)?
-              (
-                <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)}
-                />
-              )
+          <div className="rcs_text_area_wrapper">
+            {(isEditFlow || !isFullMode)
+              ? renderedRCSEditMessage(splitTemplateVarString(templateDesc), MESSAGE_TEXT)
               : (
                 <>
                   <TextArea
@@ -2808,15 +1259,13 @@ const onTitleAddVar = () => {
                 </>
               )
             }
-          </CapRow>
+          </div>
           {(isEditFlow || !isFullMode) && templateDescError && (
             <CapError className="rcs-template-message-error">
               {templateDescError}
             </CapError>
           )}
-          {(isEditFlow || !isFullMode)
-            ? renderDescriptionCharacterCount('rcs-character-count rcs-character-count--compact')
-            : (!isEditFlow && isFullMode && renderDescriptionCharacterCount())}
+          {!isEditFlow && isFullMode && renderDescriptionCharacterCount()}
           {!isFullMode && hasTag() && (
             <CapAlert
               message={
@@ -2830,13 +1279,24 @@ const onTitleAddVar = () => {
             />
           )}
         </CapRow>
-        {((!isEditFlow && isFullMode) || (isEditFlow && (suggestions?.length ?? 0) > 0)) &&
-          renderButtonComponent()}
+        {renderButtonComponent()}
       </>
 
     );
   };
 
+ 
+  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;
@@ -2851,7 +1311,7 @@ const onTitleAddVar = () => {
   // Get max length for description based on template type
   const getDescriptionMaxLength = () => {
     return templateType === contentType.text_message 
-      ? (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH)  // 160 for text message
+      ? RCS_TEXT_MESSAGE_MAX_LENGTH  // 160 for text message
       : RCS_RICH_CARD_MAX_LENGTH;    // 2000 for rich card description
   };
 
@@ -2877,58 +1337,6 @@ const onTitleAddVar = () => {
     );
   };
 
-  const rcsDltCardDeleteHandler = () => {
-    closeDltContainerHandler();
-    setDltEditData({});
-    setFallbackMessage('');
-    setFallbackMessageError(false);
-  };
-
-  const dltFallbackListingPreviewhandler = (data) => {
-    const {
-      'updated-sms-editor': updatedSmsEditor = [],
-      'sms-editor': smsEditor = '',
-    } = data.versions.base || {};
-  };
-
-  const getDltContentCardList = (content, channel) => {
-    const extra = [
-      <CapIcon
-        type="edit"
-        className="rcs-dlt-edit-icon"
-        onClick={() => rcsDltEditSelectHandler(dltEditData)}
-      />,
-      <CapDropdown
-        overlay={(
-          <CapMenu>
-            <>
-              <CapMenu.Item
-                className="ant-dropdown-menu-item"
-                onClick={() => {}}
-              >
-                {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,
-    };
-  };
-
   // Render character count for description/message
   const renderDescriptionCharacterCount = (className = "rcs-character-count") => {
     const currentLength = getDescriptionCharacterCount();
@@ -2944,26 +1352,6 @@ const onTitleAddVar = () => {
     );
   };
 
-  // Carousel: per-card character counts (same limits as rich card)
-  const getCarouselTitleCharacterCount = (cardIndex) => {
-    const titleText = carouselData?.[cardIndex]?.title || '';
-    return titleText ? titleText.length : 0;
-  };
-
-  const getCarouselDescriptionCharacterCount = (cardIndex) => {
-    const descriptionText = carouselData?.[cardIndex]?.description || '';
-    return descriptionText ? descriptionText.length : 0;
-  };
-
-  const renderCarouselCharacterCount = (currentLength, maxLength, className = "rcs-character-count") => (
-    <CapLabel type="label1" className={className}>
-      {formatMessage(messages.templateMessageLength, {
-        currentLength,
-        maxLength,
-      })}
-    </CapLabel>
-  );
-
   // Check if any RCS variables contain tags (similar to Zalo hasTag logic)
   const hasTag = () => {
     // Check cardVarMapped values for tags
@@ -3006,27 +1394,78 @@ const onTitleAddVar = () => {
     setDltEditData(data);
   };
 
-  const rcsDltEditCompletionHandler = (data) => {
-    const tempData = {
-      versions: {
-        // eslint-disable-next-line no-undef
-        base: data?.value?.base || {},
-      },
+  const rcsDltEditCompletionHandler = (data) => {
+    const tempData = {
+      versions: {
+        // eslint-disable-next-line no-undef
+        base: data?.value?.base || {},
+      },
+    };
+    const fallMsg = get(tempData, `versions.base.updated-sms-editor`, []).join(
+      '',
+    );
+    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 fallMsg = get(tempData, `versions.base.updated-sms-editor`, []).join(
-      '',
-    );
-    const templateNameFromDlt = get(dltEditData, 'name', '')
-      || get(tempData, 'versions.base.name', '')
-      || '';
-    closeDltContainerHandler();
-    setDltEditData(tempData);
-    const unicodeFromDlt = get(tempData, 'versions.base.unicode-validity');
-    setSmsFallbackData({
-      templateName: templateNameFromDlt,
-      content: fallMsg,
-      ...(typeof unicodeFromDlt === 'boolean' ? { unicodeValidity: unicodeFromDlt } : {}),
-    });
   };
 
   const getDltSlideBoxContent = () => {
@@ -3074,34 +1513,148 @@ const onTitleAddVar = () => {
     return { dltHeader, dltContent };
   };
 
-  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 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 || ""}
+    //         />
+    //         {!aiContentBotDisabled && (
+    //           <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 uploadRcsImage = useCallback((file, type, fileParams, index) => {
     setImageError(null);
-    const isRcsThumbnail = isThumbnailAssetIndex(index);
+    const isRcsThumbnail = index === 1;
     actions.uploadRcsAsset(file, type, {
       isRcsThumbnail,
       ...fileParams,
@@ -3139,7 +1692,10 @@ const onTitleAddVar = () => {
   const updateOnRcsImageReUpload = useCallback(() => {
     setUpdateRcsImageSrc('');
   }, []);
+
+
   const uploadRcsVideo = (file, type, fileParams) => { 
+    setImageError(null);
     actions.uploadRcsAsset(file, type, {
       ...fileParams,
       type: 'video',
@@ -3148,6 +1704,9 @@ const onTitleAddVar = () => {
     });  
   };
 
+  const updateRcsVideoSrc = (val) => {
+    setRcsVideoSrc(val);
+  };
   const setUpdateRcsVideoSrc = useCallback((index, val) => {
     setRcsVideoSrc(val);
     setAssetList(val); 
@@ -3170,13 +1729,13 @@ const onTitleAddVar = () => {
     updateRcsThumbnailSrc('');
   };
 
-   const renderThumbnailComponent = () => {
+  const renderThumbnailComponent = () => {
     const currentDimension = selectedDimension || Object.keys(RCS_VIDEO_THUMBNAIL_DIMENSIONS)[0];
     return !isEditFlow && (
     <>
        <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Thumbnail</CapHeading>
        <CapImageUpload
-         className="rcs-image-upload-with-top-padding"
+         style={{ paddingTop: '20px' }}
          allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
          imgWidth={RCS_VIDEO_THUMBNAIL_DIMENSIONS[currentDimension].width}
          imgHeight={RCS_VIDEO_THUMBNAIL_DIMENSIONS[currentDimension].height}
@@ -3194,7 +1753,6 @@ const onTitleAddVar = () => {
          channel={RCS}
          channelSpecificStyle={!isFullMode}
          skipDimensionValidation={true}
-         showReUploadButton={!isEditFlow && isFullMode}
        />
     </>
     )
@@ -3220,7 +1778,7 @@ const onTitleAddVar = () => {
                       value: dim.type,
                       label: `${dim.label}`
                     }))}
-                    className="rcs-dimension-select--bottom-spacing"
+                    style={{ marginBottom: '20px' }}
                   />
                 </>
               )}
@@ -3234,7 +1792,7 @@ const onTitleAddVar = () => {
                     </div>
                   ) : (
                 <CapImageUpload
-         className="rcs-image-upload-with-top-padding"
+                  style={{ paddingTop: '20px' }}
                   allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
                   imgWidth={RCS_IMAGE_DIMENSIONS[selectedDimension].width}
                   imgHeight={RCS_IMAGE_DIMENSIONS[selectedDimension].height}
@@ -3245,7 +1803,7 @@ const onTitleAddVar = () => {
                   updateImageSrc={setUpdateRcsImageSrc}
                   updateOnReUpload={updateOnRcsImageReUpload}
                   index={0}
-                  className="cap-custom-image-upload rcs-image-upload--top-spacing"
+                  className="cap-custom-image-upload"
                   key={`rcs-uploaded-image-${selectedDimension}`}
                   imageData={rcsData}
                   channel={RCS}
@@ -3256,7 +1814,7 @@ const onTitleAddVar = () => {
               
             </>
           );
-  }
+        }
   
   const renderVideoComponent = () => {
     const currentDimension =selectedDimension || Object.keys(RCS_VIDEO_THUMBNAIL_DIMENSIONS)[0];
@@ -3275,7 +1833,7 @@ const onTitleAddVar = () => {
                 value: dim.type,
                 label: `${dim.label}`
               }))}
-              className="rcs-dimension-select--bottom-spacing"
+              style={{ marginBottom: '20px' }}
             />
             )}
               {(isEditFlow || !isFullMode) ? (
@@ -3333,48 +1891,10 @@ const onTitleAddVar = () => {
   };
 
   const getRcsPreview = () => {
-
-    if (templateType === contentType.carousel) {
-      const cardsForPreview = buildCarouselCardsForPreview(carouselData);
-      const carouselDimKey = getCarouselDimensionKey();
-      const carouselImgDims =
-        RCS_CAROUSEL_IMAGE_DIMENSIONS[carouselDimKey] || RCS_CAROUSEL_IMAGE_DIMENSIONS.MEDIUM_MEDIUM;
-      const carouselVidDims =
-        RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS[carouselDimKey]
-        || RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS.MEDIUM_MEDIUM;
-      // Debug log for embedded/library mode preview payload (carousel)
-      // eslint-disable-next-line no-console
-      return (
-        <UnifiedPreview
-          channel={RCS}
-          content={{
-            carouselData: cardsForPreview,
-            carouselPreviewDimensions: {
-              imageWidth: carouselImgDims.width,
-              imageHeight: carouselImgDims.height,
-              videoThumbWidth: carouselVidDims.width,
-              videoThumbHeight: carouselVidDims.height,
-            },
-          }}
-          device={ANDROID}
-          showDeviceToggle={false}
-          showHeader={false}
-          formatMessage={formatMessage}
-        />
-      );
-    }
     
     const dimensionObj = RCS_IMAGE_DIMENSIONS[selectedDimension];
-    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 resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
+    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
     return (
       <UnifiedPreview
         channel={RCS}
@@ -3397,108 +1917,51 @@ const onTitleAddVar = () => {
     );
   };
   
+  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 isSlotMappingMode = isEditFlow || !isFullMode;
+    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 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 carouselCardContent = isCarouselType
-      ? (carouselData || []).map((card = {}) => {
-          const cardMediaType = card.mediaType;
-          const isCardVideo = cardMediaType === RCS_MEDIA_TYPES.VIDEO;
-          const isCardImage = cardMediaType === RCS_MEDIA_TYPES.IMAGE;
-          const mediaUrl = isCardVideo
-            ? (card.videoAsset?.videoSrc || '')
-            : (card.imageSrc || '');
-          const thumbnailUrl = isCardVideo
-            ? (card.thumbnailSrc || card.videoAsset?.videoThumbnail || '')
-            : '';
-          const cardVarTokens = [
-            ...((card.title || '').match(rcsVarRegex) ?? []),
-            ...((card.description || '').match(rcsVarRegex) ?? []),
-          ];
-          const cardVarMappedForCard = {};
-          if (isSlotMappingMode && cardVarTokens.length > 0) {
-            cardVarTokens.forEach((token) => {
-              const varName = getVarNameFromToken(token);
-              if (!varName) return;
-              cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(cardVarMapped?.[varName] ?? '');
-            });
-          }
-          return {
-            title: card.title || '',
-            description: card.description || '',
-            mediaType: cardMediaType,
-            ...((isCardImage || isCardVideo) && {
-              media: {
-                mediaUrl,
-                thumbnailUrl,
-                height: selectedCarouselHeight || MEDIUM,
-                ...(isCardVideo && card.videoAsset?.videoName && { videoName: card.videoAsset.videoName }),
-              },
-            }),
-            ...(Array.isArray(card.suggestions) && card.suggestions.length > 0 && {
-              suggestions: card.suggestions,
-            }),
-            ...(Object.keys(cardVarMappedForCard).length > 0 && { cardVarMapped: cardVarMappedForCard }),
-          };
-        })
-      : null;
-
     const payload = {
       name: templateName,
       versions: {
@@ -3507,22 +1970,16 @@ const onTitleAddVar = () => {
             RCS: {
               rcsContent: {
                 ...(rcsAccount && !isFullMode && { accountId: rcsAccount }),
-                cardType: isCarouselType ? contentType.carousel : STANDALONE,
-                cardSettings: isCarouselType
-                  ? { cardOrientation: VERTICAL, cardWidth: selectedCarouselWidth || SMALL }
-                  : {
-                      cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
-                      ...(alignment && { mediaAlignment: alignment }),
-                      cardWidth: SMALL,
-                    },
-                cardContent: isCarouselType
-                  ? carouselCardContent
-                  : [
+                cardType: STANDALONE,
+                cardSettings: {
+                  cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
+                  ...(alignment && { mediaAlignment: alignment }),
+                  cardWidth: SMALL,
+                },
+                cardContent: [
                   {
-                    // 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,
+                    title: resolvedTitle,
+                    description: resolvedDesc,
                     mediaType: templateMediaType,
                     ...(!isMediaTypeText && {media: {
                       mediaUrl: rcsImageSrc || rcsVideoSrc.videoSrc || '',
@@ -3531,32 +1988,23 @@ const onTitleAddVar = () => {
                         ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.heightType || MEDIUM
                         : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType || MEDIUM,
                     }}),
-                    ...(isSlotMappingMode && (() => {
-                      const templateVarTokens = [
-                        ...(templateTitle?.match(rcsVarRegex) ?? []),
-                        ...(templateDesc?.match(rcsVarRegex) ?? []),
+                    ...(!isFullMode && (() => {
+                      const tokens = [
+                        ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
+                        ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
                       ];
-                      const cardVarMappedForRcsCardOnly = pickRcsCardVarMappedEntries(
-                        cardVarMapped,
-                      );
-                      // Persist numeric slot keys only ("1","2",…) — avoids duplicating the same value under
-                      // semantic names (e.g. both "1" and dynamic_expiry_date_after_3_days.FORMAT_1). Hydration
-                      // and coalesceCardVarMappedToTemplate still resolve from numeric keys + template tokens.
-                      const persistedSlotVarMap = {};
-                      templateVarTokens.forEach((token, slotIndexZeroBased) => {
-                        const varName = getVarNameFromToken(token);
-                        if (!varName) return;
-                        const resolvedRawValue = resolveCardVarMappedSlotValue(
-                          cardVarMappedForRcsCardOnly,
-                          varName,
-                          slotIndexZeroBased,
-                          isSlotMappingMode,
-                          rcsSpanningSemanticVarNames.has(varName),
-                        );
-                        const sanitizedSlotValue = sanitizeCardVarMappedValue(resolvedRawValue);
-                        persistedSlotVarMap[String(slotIndexZeroBased + 1)] = sanitizedSlotValue;
+                      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] = '';
+                        }
                       });
-                      return { cardVarMapped: persistedSlotVarMap };
+                      return { cardVarMapped: nextMap };
                     })()),
                     ...(suggestions.length > 0 && { suggestions }),
                   }
@@ -3564,109 +2012,17 @@ const onTitleAddVar = () => {
                 contentType: isFullMode ? templateType : RICHCARD,
                 ...(isFullMode && {accountId:accountId, accessToken: accessToken, accountName: accountName, hostName: hostName}),
               },
-              ...(smsFallbackForPayload && (() => {
-                const smsBodyText =
-                  smsFallbackForPayload.content
-                  || smsFallbackForPayload.templateContent
-                  || smsFallbackForPayload.message
-                  || smsFallbackForPayload.smsContent
-                  || '';
-                /**
-                 * Campaigns `getTraiSenderIds` / Iris read `smsFallBackContent.templateConfigs.registeredSenderIds`.
-                 * Library `smsFallbackForPayload` omits ids — use merged state (`smsFallbackMerged`) like test preview.
-                 */
-                const m = smsFallbackMerged || {};
-                const tcSibling = m.templateConfigs && typeof m.templateConfigs === 'object'
-                  ? m.templateConfigs
-                  : {};
-                const smsFallbackTemplateId =
-                  (m.smsTemplateId != null && String(m.smsTemplateId).trim() !== ''
-                    ? String(m.smsTemplateId)
-                    : '')
-                  || (tcSibling.templateId != null && String(tcSibling.templateId).trim() !== ''
-                    ? String(tcSibling.templateId)
-                    : '');
-                const smsFallbackTemplateStr =
-                  pickFirstSmsFallbackTemplateString(m)
-                  || (typeof m.templateContent === 'string' ? m.templateContent : '')
-                  || (typeof tcSibling.template === 'string' ? tcSibling.template : '')
-                  || '';
-                const smsFallbackTemplateName =
-                  m.templateName
-                  || m.smsTemplateName
-                  || tcSibling.templateName
-                  || tcSibling.name
-                  || '';
-                const registeredSenderIdsForPayload = Array.isArray(m.registeredSenderIds)
-                  ? m.registeredSenderIds
-                  : Array.isArray(tcSibling.registeredSenderIds)
-                    ? tcSibling.registeredSenderIds
-                    : Array.isArray(tcSibling.header)
-                      ? tcSibling.header
-                      : null;
-                const hasRegisteredSenderIds = Array.isArray(registeredSenderIdsForPayload);
-                const smsFallbackTemplateConfigs =
-                  smsFallbackTemplateId || hasRegisteredSenderIds
-                    ? {
-                        ...(smsFallbackTemplateId && { templateId: smsFallbackTemplateId }),
-                        ...(smsFallbackTemplateStr && { template: smsFallbackTemplateStr }),
-                        ...(smsFallbackTemplateName && {
-                          templateName: smsFallbackTemplateName,
-                        }),
-                        ...(hasRegisteredSenderIds && {
-                          registeredSenderIds: registeredSenderIdsForPayload,
-                        }),
-                      }
-                    : null;
-                const isDltCampaign = !isFullMode && isTraiDLTEnable(isFullMode, smsRegister);
-                return {
-                  smsFallBackContent: isFullMode
-                    ? {
-                        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,
-                        }),
-                        ...(smsFallbackTemplateConfigs && {
-                          templateConfigs: smsFallbackTemplateConfigs,
-                        }),
-                      }
-                    : {
-                        // Round-trip storage: full shape so reopening the editor restores template
-                        // name, sender IDs, and var mappings. normalizeRcsMessageContentForApi
-                        // (called in CreativesContainer getCreativesData) strips this to
-                        // { message, templateConfigs } before the API call — the extra fields here
-                        // are only used for re-hydration, never sent to the API.
-                        message: smsBodyText,
-                        ...(smsFallbackForPayload.templateName && {
-                          smsTemplateName: smsFallbackForPayload.templateName,
-                        }),
-                        ...(smsFallbackForPayload.templateContent && {
-                          templateContent: smsFallbackForPayload.templateContent,
-                        }),
-                        ...(typeof smsFallbackForPayload.unicodeValidity === 'boolean' && {
-                          unicodeValidity: smsFallbackForPayload.unicodeValidity,
-                        }),
-                        ...(Array.isArray(registeredSenderIdsForPayload) && {
-                          registeredSenderIds: registeredSenderIdsForPayload,
-                        }),
-                        ...(smsFallbackForPayload[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]
-                          && Object.keys(smsFallbackForPayload[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]).length > 0 && {
-                          [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]:
-                            smsFallbackForPayload[RCS_SMS_FALLBACK_VAR_MAPPED_PROP],
-                        }),
-                        ...(isDltCampaign && smsFallbackTemplateConfigs && {
-                          templateConfigs: smsFallbackTemplateConfigs,
-                        }),
-                      },
-                };
-              })()),
+              smsFallBackContent: {
+                message: fallbackMessage,
+                ...(isDltEnabled && {
+                  templateConfigs: {
+                    templateId,
+                    templateName: template_name,
+                    template,
+                    registeredSenderIds,
+                  },
+                }),
+              },
             },
           },
         },
@@ -3676,141 +2032,6 @@ const onTitleAddVar = () => {
     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 isSlotMappingModeForPreview = isEditFlow || !isFullMode;
-    let rcsForTest = {
-      ...rcs,
-      rcsContent: {
-        ...rcs.rcsContent,
-        ...(accountIdForCreateMessageMeta ? { accountId: accountIdForCreateMessageMeta } : {}),
-      },
-    };
-    /** Approval payload keeps numeric-only `cardVarMapped`; preview APIs still need semantic keys. */
-    const cardContent = rcsForTest.rcsContent?.cardContent;
-    if (Array.isArray(cardContent) && cardContent[0]) {
-      if (isCarouselType) {
-        // Carousel: resolve {{N}} slot tokens to the actual tag expressions / static values the
-        // user mapped via cardVarMapped. Run this for ALL modes (create, edit, consumer) so that:
-        //  - buildRcsTestMessagePayload sends real Capillary tag names to the test API, and
-        //  - prepareTagExtractionPayload can extract tag metadata from the card content.
-        // Track cumulative slotOffset across cards: each card's title/description vars occupy
-        // sequential global slot indices ({{1}},{{2}} in card 0; {{3}},{{4}} in card 1, …).
-        // Without the offset, every card restarts at slotKey="1" and resolves against card 0's
-        // mappings, causing tags from card 1+ to be missing or wrong.
-        let carouselSlotOffset = 0;
-        rcsForTest = {
-          ...rcsForTest,
-          rcsContent: {
-            ...rcsForTest.rcsContent,
-            cardContent: cardContent.map((card) => {
-              const rawTitle = card.title || '';
-              const rawDesc = card.description || '';
-              const titleVarCount = (rawTitle.match(rcsVarRegex) || []).length;
-              const descVarCount = (rawDesc.match(rcsVarRegex) || []).length;
-              const resolvedTitle = resolveTemplateWithMap(rawTitle, carouselSlotOffset);
-              const resolvedDesc = resolveTemplateWithMap(rawDesc, carouselSlotOffset + titleVarCount);
-              carouselSlotOffset += titleVarCount + descVarCount;
-              return { ...card, title: resolvedTitle, description: resolvedDesc };
-            }),
-          },
-        };
-      } else if (isSlotMappingModeForPreview) {
-        // Standalone card: coalesce cardVarMapped with the template's slot names so the preview
-        // API receives a correctly-keyed var map for non-carousel templates.
-        const fullCardVarMapped = coalesceCardVarMappedToTemplate(
-          pickRcsCardVarMappedEntries(cardVarMapped),
-          templateTitle,
-          templateDesc,
-          rcsVarRegex,
-        );
-        rcsForTest = {
-          ...rcsForTest,
-          rcsContent: {
-            ...rcsForTest.rcsContent,
-            cardContent: [
-              { ...cardContent[0], cardVarMapped: fullCardVarMapped },
-              ...cardContent.slice(1),
-            ],
-          },
-        };
-      }
-    }
-    const out = {
-      versions: {
-        base: {
-          content: {
-            RCS: rcsForTest,
-          },
-        },
-      },
-    };
-    // Use the smsFallbackTemplateConfigs already built by createPayload() — it uses smsFallbackMerged
-    // which merges smsFromApiShape (API baseline with templateId, registeredSenderIds, templateName, etc.)
-    // with local smsFallbackData state. Reading raw smsFallbackData here would miss the API-sourced
-    // smsTemplateId in campaign mode (smsFallbackMerged = { ...smsFromApiShape, ...local } there).
-    // This also keeps templateName (and all other fields) in sync with the approval payload automatically.
-    const smsFallbackTcFromPayload = rcs?.rcsContent?.smsFallBackContent?.templateConfigs;
-    if (smsFallbackTcFromPayload && typeof smsFallbackTcFromPayload === 'object') {
-      out.templateConfigs = {
-        ...smsFallbackTcFromPayload,
-        traiDltEnabled: isTraiDLTEnable(isFullMode, smsRegister),
-      };
-    }
-    return out;
-  }, [
-    templateName,
-    templateTitle,
-    templateDesc,
-    templateMediaType,
-    cardVarMapped,
-    carouselData,
-    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;
@@ -3840,9 +2061,6 @@ const onTitleAddVar = () => {
       _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);
   };
@@ -3856,7 +2074,6 @@ const onTitleAddVar = () => {
       actionCallback({ resp, errorMessage });
       setSpin(false); // Always turn off spinner
       if (!errorMessage) {
-        setTemplateStatus(RCS_STATUSES.pending);
         onCreateComplete();
       }
     });
@@ -3868,91 +2085,6 @@ const onTitleAddVar = () => {
     }
   };
 
-  /** 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(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '')),
-      ...descTokens.map((t) => t.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '')),
-    ];
-    if (orderedVarNames.length > 0 && isEmpty(cardVarMapped)) {
-      return true;
-    }
-    return orderedVarNames.some((name, globalIdx) => {
-      const v = resolveCardVarMappedSlotValue(
-        cardVarMapped,
-        name,
-        globalIdx,
-        true,
-        rcsSpanningSemanticVarNames.has(name),
-      );
-      const s = v == null ? '' : String(v);
-      return s.trim() === '';
-    });
-  };
-
-  const isCarouselLibraryIncomplete = () => {
-    if (!isCarouselType || isFullMode) return false;
-    if ((carouselErrors || []).some((err) => err?.title || err?.description)) return true;
-    // Block if any card's title or description has no content at all (no static text and no variable tokens).
-    const hasEmptyField = (carouselData || []).some((card) =>
-      ['title', 'description'].some((field) => !(card?.[field] || '').trim())
-    );
-    if (hasEmptyField) return true;
-    const unfilledVar = (carouselData || []).some((card) =>
-      ['title', 'description'].some((field) => {
-        const tokens = splitTemplateVarStringRcs(card?.[field] || '').filter((t) => rcsVarTestRegex.test(t));
-        return tokens.some((t) => {
-          const name = t.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
-          const v = cardVarMapped?.[name];
-          return v == null || String(v).trim() === '';
-        });
-      })
-    );
-    return unfilledVar;
-  };
-
   const isDisableDone = () => {
     if(isEditFlow){
       return false;
@@ -3963,26 +2095,46 @@ const onTitleAddVar = () => {
       }
     }
 
-    if (isCarouselLibraryIncomplete()) {
-      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 (isLibraryCampaignCardVarMappingIncomplete()) {
-      return true;
-    }
+      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
+        return true;
+      }
 
-    if (smsFallbackBlocksDone()) {
-      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 (!isCarouselType && isMediaTypeText && templateDesc.trim() === '') {
+      if (isMediaTypeText && templateDesc.trim() === '') {
       return true;
+
     }
-    if (!isCarouselType && isMediaTypeImage && (rcsImageSrc === '' || templateTitle === '' || templateDesc === '' )) {
+    if (isMediaTypeImage && (rcsImageSrc === '' || templateTitle === '' || templateDesc === '' )) {
       return true;
     }
 
-    if (!isCarouselType && isMediaTypeVideo && (!rcsVideoSrc.videoSrc || rcsThumbnailSrc === '' || templateTitle === '' || templateDesc === '' )) {
+    if (isMediaTypeVideo && (rcsVideoSrc.videoSrc === '' || rcsThumbnailSrc === '' || templateTitle === '' || templateDesc === '' )) {
      return true;
     }
     if (buttonType.includes(CTA)) {
@@ -3994,60 +2146,72 @@ const onTitleAddVar = () => {
         return true;
       }
     }
-    if (templateDescError || templateTitleError) {
-      return true;
-    }
-    if (
-      smsFallbackData?.content
-      && smsFallbackData.content.length > FALLBACK_MESSAGE_MAX_LENGTH
-    ) {
+    if (templateDescError || templateTitleError || fallbackMessageError) {
       return true;
     }
     return false;
   };
 
   const isEditDisableDone = () => {
-    if (isFullMode && !isHostInfoBip && templateStatus !== RCS_STATUSES.approved) {
+    
+    if (templateStatus !== RCS_STATUSES.approved) {
       return true;
     }
 
-    if (isCarouselLibraryIncomplete()) {
-      return true;
+    if (!isFullMode) {
+      if (templateName.trim() === '' || templateNameError) {
+        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 (isLibraryCampaignCardVarMappingIncomplete()) {
-      return true;
-    }
+      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
+        return true;
+      }
 
-    if (smsFallbackBlocksDone()) {
-      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;
+      }
 
-    if (!isCarouselType && isMediaTypeText && templateDesc.trim() === '') {
+      const anyMissing = allVars.some(name => {
+        const v = cardVarMapped?.[name];
+        if (typeof v !== 'string') return !v;
+        return v.trim() === '';
+      });
+      if (anyMissing) {
+        return true;
+      }
+    }
+    if (isMediaTypeText && templateDesc.trim() === '') {
       return true;
     }
-    if (!isCarouselType && isMediaTypeImage && rcsImageSrc === '') {
+    if (isMediaTypeImage && rcsImageSrc === '') {
       return true;
     }
-    if (!isCarouselType && isMediaTypeVideo && (rcsThumbnailSrc === '' || rcsVideoSrc.videoSrc === '')) {
+    if(isMediaTypeVideo && (rcsThumbnailSrc === '' || rcsVideoSrc.videoSrc === '')) {
       return true;
     }
 
     if (buttonType.includes(CTA)) {
-      const hasValidButtons = suggestions.every(suggestion =>
+      const hasValidButtons = suggestions.every(suggestion => 
         suggestion.text && suggestion.url && !suggestionError && !forbiddenCharactersValidation(suggestion.text)
       );
       if (!hasValidButtons) {
         return true;
       }
     }
-    if (templateTitleError || templateDescError) {
-      return true;
-    }
-    if (
-      smsFallbackData?.content
-      && smsFallbackData.content.length > FALLBACK_MESSAGE_MAX_LENGTH
-    ) {
+    if (templateTitleError || templateDescError || fallbackMessageError) {
       return true;
     }
     return false;
@@ -4097,111 +2261,85 @@ const onTitleAddVar = () => {
   };
 
   const getMainContent = () => {
-    // Slideboxes are rendered outside the page-level spinner to avoid
-    // stacking/blur issues during initial loads.
-    if (showDltContainer) return null;
+    if (showDltContainer && !fallbackPreviewmode) {
+      const dltSlideBoxContent = showDltContainer && getDltSlideBoxContent();
+      const { dltHeader = '', dltContent = '' } = dltSlideBoxContent;
+      return (
+        <CapSlideBox
+          show={showDltContainer}
+          header={dltHeader}
+          content={dltContent}
+          handleClose={closeDltContainerHandler}
+          size="size-xl"
+        />
+      );
+    }
+
     return (
       <>
-        {templateStatus !== '' && (
-          <CapRow useLegacy className="template-status-container">
-            <CapColumn span={14}>
-              <CapLabel type="label2">
-                {formatMessage(messages.templateStatusLabel)}
-              </CapLabel>
-
-              {!isHostInfoBip && templateStatus && (
-                <CapAlert
-                  message={getTemplateStatusMessage()}
-                  type={getTemplateStatusType(templateStatus)}
-                />
-              )}
-            </CapColumn>
-          </CapRow>
+        {templateStatus !== '' && (<CapRow useLegacy className="template-status-container">
+          <CapLabel type="label2">
+            {formatMessage(messages.templateStatusLabel)}
+          </CapLabel>
+
+          {templateStatus && (
+            <CapAlert
+              message={getTemplateStatusMessage()}
+              type={getTemplateStatusType(templateStatus)}
+            />
+          )}
+        </CapRow>
         )}
-        <CapRow className={`cap-rcs-creatives ${isEditLike ? 'rcs-edit-mode' : ''}`}>
+        <CapRow className="cap-rcs-creatives">
           <CapColumn span={14}>
             {/* template name */}
             {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)}
-                />
-              )
-            )}
-            {isEditFlow ? (
-              <div className="rcs-creative-name-readonly">
-                <CapHeading type="h4">
-                  {formatMessage(messages.templateTypeLabel)}
-                </CapHeading>
-                <CapHeading type="h5" className="rcs-creative-name-value">
-                  {TEMPLATE_TYPE_OPTIONS.find((option) => option.value === templateType)?.label || '-'}
-                </CapHeading>
-              </div>
-            ) : (
-              <>
-                {renderLabel('templateTypeLabel')}
-                <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
-                <CapRadioGroup
-                    id="select-rcs-template-type"
-                    options={TEMPLATE_TYPE_OPTIONS}
-                    onChange={onTemplateTypeChange}
-                    value={templateType}
-                    disabled={!isFullMode}
-                  />
-                </ConfigProvider>
-              </>
+              <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')}
+            <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+              <CapRadioGroup
+                id="select-rcs-template-type"
+                options={TEMPLATE_TYPE_OPTIONS}
+                onChange={onTemplateTypeChange}
+                value={templateType}
+                disabled={(isEditFlow || !isFullMode)}
+              />
+            </ConfigProvider>
 
-            {templateType === contentType.carousel ? (
-              renderCarouselSection()
-            ) : (
+            {/* Show media only for rich_card or carousel */}
+            {(templateType === contentType.rich_card || templateType === contentType.carousel) && (
               <>
-                {/* Show media only for rich_card */}
-                {templateType === contentType.rich_card && (
-                  <>
-                    {renderLabel('mediaLabel')}
-                    <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+                {renderLabel('mediaLabel')}
+                  <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
                     <CapRadioGroup
-                        options={mediaRadioOptions || []}
-                        value={templateMediaType}
-                        onChange={onTemplateMediaTypeChange}
-                        disabled={(isEditFlow || !isFullMode)}
-                        className="rcs-radio"
-                      />
-                      </ConfigProvider>
+                      options={mediaRadioOptions || []}
+                      value={templateMediaType}
+                      onChange={onTemplateMediaTypeChange}
+                      disabled={(isEditFlow || !isFullMode)}
+                      className="rcs-radio"
+                    />
+                  </ConfigProvider>
                 <div className="rcs-container-image">
-                      {getMediaBasedComponent()}
-                    </div>
-                  </>
-                )}
-                {renderTextComponent()}
-              </>
-            )}
-            {(!isEditFlow || hasMeaningfulSmsFallbackShape(smsFallbackData)) && (
-              <>
-                <CapDivider className="rcs-fallback-section-divider" />
-                {renderFallBackSmsComponent()}
+                  {getMediaBasedComponent()}
+                </div>
               </>
             )}
+            {renderTextComponent()}
+            <CapDivider style={{ margin: `${CAP_SPACE_28} 0` }} />
+            {renderFallBackSmsComponent()}
             <div className="rcs-scroll-div" />
           </CapColumn>
           <CapColumn span={8} offset={2}>
@@ -4212,8 +2350,7 @@ const onTitleAddVar = () => {
 
        
         <div className="rcs-footer">
-          {/* 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 && (
+          {!isEditFlow && (
           <>
               <div className="button-disabled-tooltip-wrapper">
                 <CapButton
@@ -4221,9 +2358,7 @@ const onTitleAddVar = () => {
                   disabled={isDisableDone()}
                   className="rcs-done-btn"
                 >
-                  <FormattedMessage 
-                  {...(isHostInfoBip ? messages.doneButtonLabel : messages.sendForApprovalButtonLabel)} 
-                  />
+                  <FormattedMessage {...messages.sendForApprovalButtonLabel} />
                 </CapButton>
               </div>
               <CapTooltip
@@ -4236,6 +2371,7 @@ const onTitleAddVar = () => {
                     className="rcs-test-preview-btn"
                     type="secondary"
                     disabled={true}
+                    style={{ marginLeft: "8px" }}
                   >
                     <FormattedMessage {...creativesMessages.testAndPreview} />
                   </CapButton>
@@ -4256,7 +2392,7 @@ const onTitleAddVar = () => {
               </div>
           </>
           )}
-          {isEditFlow && (isHostInfoBip || templateStatus === RCS_STATUSES.approved) && (
+          {isEditFlow && templateStatus === RCS_STATUSES.approved && (
             <>
               <CapButton
                 onClick={handleTestAndPreview}
@@ -4268,6 +2404,51 @@ const onTitleAddVar = () => {
             </>
           )}
         </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', width: '100%' }}
+                  className="margin-t-16"
+                >
+                  {formatMessage(messages.totalCharacters, {
+                    smsCount: Math.ceil(
+                      tempMsg?.length / FALLBACK_MESSAGE_MAX_LENGTH,
+                    ),
+                    number: tempMsg.length,
+                  })}
+                </CapHeading>
+              </>
+            )}
+            handleClose={() => {
+              setFallbackPreviewmode(false);
+              setDltPreviewData('');
+            }}
+          />
+        )}
       </>
     );
   };
@@ -4276,57 +2457,23 @@ const onTitleAddVar = () => {
       <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={testPreviewFormData}
-        content={testAndPreviewContent}
+        formData={null} // RCS doesn't use formData structure like SMS
+        content={getTemplateContent()}
         currentChannel={RCS}
-        orgUnitId={orgUnitId}
-        rcsTestPreviewOptions={{ isLibraryMode: !isFullMode }}
-        smsFallbackContent={
-          smsFallbackData && (smsFallbackData.templateContent || smsFallbackData.content)
-            ? {
-              templateContent:
-                smsFallbackData.templateContent || smsFallbackData.content || '',
-              templateName: smsFallbackData.templateName || '',
-              [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: !isFullMode
-                ? mergeRcsSmsFallbackVarMapLayers(
-                  getLibrarySmsFallbackApiBaselineFromTemplateData(templateData),
-                  smsFallbackData,
-                )
-                : mergeRcsSmsFallbackVarMapLayers({}, smsFallbackData),
-            }
-            : null
-        }
-        smsRegister={smsRegister}
       />
     </>
   );
 };
 
-
 const mapStateToProps = createStructuredSelector({
   rcsData: makeSelectRcs(),
   accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
-  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 const mapDispatchToProps = (dispatch) => ({