@capillarytech/creatives-library 8.0.329 → 8.0.330-alpha.1

package/v2Containers/Rcs/index.js

@@ -21,20 +21,42 @@ import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapCard from '@capillarytech/cap-ui-library/CapCard';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
+import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
+import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
+import CapLink from '@capillarytech/cap-ui-library/CapLink';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+
+import {
+  CAP_G01,
+  CAP_SPACE_04,
+  CAP_SPACE_16,
+  CAP_SPACE_24,
+  CAP_SPACE_28,
+  CAP_SPACE_32,
+  CAP_WHITE,
+  CAP_SECONDARY,
+} from '@capillarytech/cap-ui-library/styled/variables';
 
 import CapVideoUpload from '../../v2Components/CapVideoUpload';
 import * as globalActions from '../Cap/actions';
 import CapActionButton from '../../v2Components/CapActionButton';
+import 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';
@@ -44,10 +66,12 @@ import {
   normalizeLibraryLoadedTitleDesc,
   mergeRcsSmsFallBackContentFromDetails,
   mergeRcsSmsFallbackVarMapLayers,
+  extractRegisteredSenderIdsFromSmsFallbackRecord,
   pickFirstSmsFallbackTemplateString,
   syncCardVarMappedSemanticsFromSlots,
   hasMeaningfulSmsFallbackShape,
   getLibrarySmsFallbackApiBaselineFromTemplateData,
+  pickRcsCardVarMappedEntries,
 } from './rcsLibraryHydrationUtils';
 import {
   RCS,
@@ -65,11 +89,14 @@ import {
   RCS_IMG_SIZE,
   RCS_DLT_MODE,
   CTA,
+  AI_CONTENT_BOT_DISABLED,
   RCS_STATUSES,
   TITLE_TEXT,
   MESSAGE_TEXT,
   ALLOWED_EXTENSIONS_VIDEO_REGEX,
   RCS_VIDEO_SIZE,
+  TEMPLATE_HEADER_MAX_LENGTH,
+  TEMPLATE_MESSAGE_MAX_LENGTH,
   RCS_THUMBNAIL_MIN_SIZE,
   RCS_THUMBNAIL_MAX_SIZE,
   contentType,
@@ -77,16 +104,30 @@ 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,
+  descType,
   STANDALONE,
   VERTICAL,
   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_TAG_AREA_FIELD_TITLE,
@@ -118,10 +159,13 @@ import {
   getTemplateStatusType,
   normalizeCardVarMapped,
   coalesceCardVarMappedToTemplate,
+  getRcsSemanticVarNamesSpanningTitleAndDesc,
   resolveCardVarMappedSlotValue,
   sanitizeCardVarMappedValue,
 } from './utils';
 
+
+const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
   const {
     intl,
@@ -146,6 +190,7 @@ export const Rcs = (props) => {
     selectedOfferDetails,
     eventContextTags,
     accountData = {},
+    currentOrgDetails,
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
@@ -153,6 +198,24 @@ export const Rcs = (props) => {
   } = 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 === 'string') return err;
+    if (typeof err === 'number') return String(err);
+    if (typeof err === 'object' && typeof err.message === '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([]);
@@ -176,16 +239,28 @@ export const Rcs = (props) => {
   const [suggestions, setSuggestions] = useState(INITIAL_SUGGESTIONS_DATA_STOP);
   const buttonType = RCS_BUTTON_TYPES.NONE;
   const [suggestionError, setSuggestionError] = useState(true);
+  const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
   const [templateType, setTemplateType] = useState('text_message');
   const [titleVarMappedData, setTitleVarMappedData] = useState({});
   const [descVarMappedData, setDescVarMappedData] = useState({});
   const [titleTextAreaId, setTitleTextAreaId] = useState();
   const [descTextAreaId, setDescTextAreaId] = useState();
   const [assetList, setAssetList] = useState({});
+  const [assetListImage, setAssetListImage] = useState('');
   const [rcsImageSrc, updateRcsImageSrc] = useState('');
   const [rcsVideoSrc, setRcsVideoSrc] = useState({});
   const [rcsThumbnailSrc, setRcsThumbnailSrc] = useState('');
   const [selectedDimension, setSelectedDimension] = useState(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
+  // 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 [templateTitleError, setTemplateTitleError] = useState(false);
   const [cardVarMapped, setCardVarMapped] = useState({});
   /** Bump when hydrated cardVarMapped payload changes so VarSegment TextAreas remount with fresh valueMap (controlled-input sync). */
@@ -236,11 +311,21 @@ export const Rcs = (props) => {
   // Handle close Test and Preview slidebox
   const handleCloseTestAndPreview = useCallback(() => {
     setShowTestAndPreviewSlidebox(false);
+    setIsTestAndPreviewMode(false);
     if (propsHandleCloseTestAndPreview) {
       propsHandleCloseTestAndPreview();
     }
   }, [propsHandleCloseTestAndPreview]);
 
+  // Helper to get RCS orientation from selectedDimension
+  const getRcsOrientation = () => {
+    const isMediaTypeImage = templateMediaType === RCS_MEDIA_TYPES.IMAGE;
+    if (isMediaTypeImage) {
+      return RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL;
+    }
+    // For video
+    return RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL;
+  };
   /** Merge editor slot map into `smsFallbackData` (like `cardVarMapped` for title/desc). */
   const handleSmsFallbackEditorStateChange = useCallback((patch) => {
     setSmsFallbackData((prev) => {
@@ -261,6 +346,12 @@ export const Rcs = (props) => {
   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]);
   useEffect(() => {
     const accountObj = accountData.selectedRcsAccount || {};
     if (!isEmpty(accountObj)) {
@@ -288,6 +379,668 @@ export const Rcs = (props) => {
   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>
+            <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={isEditFlow || !isFullMode}
+            />
+          </CapColumn>
+          <CapColumn span={12}>
+            <CapHeading type="h4" className="rcs-carousel-dimension-label">Card width</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={isEditFlow || !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={(
+            <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">Upload Image</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: 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 */}
+            <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={isEditFlow || !isFullMode}
+                  className="rcs-radio"
+                />
+              </CapColumn>
+            </CapRow>
+
+            <CapRow className="rcs-carousel-media-upload">
+              {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 operations = (
+      <>
+        <CapDivider type="vertical" />
+        <CapButton
+          onClick={addCarouselCard}
+          type="flat"
+          className="add-carousel-content-button"
+          disabled={
+            isEditFlow ||
+            !isFullMode ||
+            MAX_RCS_CAROUSEL_ALLOWED === (carouselData?.length || 0) ||
+            checkDisableAddCarouselButton()
+          }
+        >
+          <CapIcon type="plus" />
+        </CapButton>
+      </>
+    );
+
+    return (
+      <CapRow className="rcs-carousel-section">
+        {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 = [
     {
@@ -296,11 +1049,16 @@ export const Rcs = (props) => {
     },
     {
       value: RCS_MEDIA_TYPES.VIDEO,
-      label: formatMessage(messages.mediaVideo),
+      label: formatMessage(
+        templateType === contentType.carousel
+          ? messages.carouselMediaVideoOption
+          : messages.mediaVideo,
+      ),
     },
   ];
   const aiContentBotDisabled = isAiContentBotDisabled();
 
+
   const updateButtonChange = (data, index) => {
     if (data && data.text) {
       const forbiddenError = forbiddenCharactersValidation(data.text);
@@ -366,10 +1124,16 @@ export const Rcs = (props) => {
         tagModule: getDefaultTags,
         isFullMode,
       }) || {};
-    const errorMsg =
-      (validationResponse?.isBraceError &&
-        formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
-      false;
+      const unsupportedTagsLengthCheck =
+      validationResponse?.unsupportedTags?.length > 0;
+      const errorMsg =
+        (unsupportedTagsLengthCheck &&
+          formatMessage(globalMessages.unsupportedTagsValidationError, {
+            unsupportedTags: validationResponse.unsupportedTags,
+          })) ||
+        (validationResponse.isBraceError &&
+          formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
+        false;
     if (type === TITLE_TEXT) setTemplateTitleError(errorMsg);
     if (type === MESSAGE_TEXT) setTemplateDescError(errorMsg);
   };
@@ -382,10 +1146,60 @@ 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(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+          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) ?? [];
@@ -404,6 +1218,10 @@ export const Rcs = (props) => {
     return null;
   };
 
+  /**
+   * Master-branch resolve: uses numeric slot keys + semantic spanning detection for correct
+   * multi-field variable resolution.
+   */
   const resolveTemplateWithMap = (str = '', slotOffset = 0) => {
     if (!str) return '';
     const arr = splitTemplateVarStringRcs(str);
@@ -418,6 +1236,7 @@ export const Rcs = (props) => {
           key,
           globalSlot,
           isEditLike,
+          rcsSpanningSemanticVarNames.has(key),
         );
         if (isNil(v) || String(v)?.trim?.() === '') return elem;
         return String(v);
@@ -426,12 +1245,45 @@ export const Rcs = (props) => {
     }).join('');
   };
 
+  const buildCarouselCardsForPreview = (cards = []) => (cards || []).map((card = {}) => {
+    const videoThumb = card.thumbnailSrc || card.videoAsset?.videoThumbnail || '';
+    const videoSrc = card.videoAsset?.videoSrc || '';
+    const resolvedTitle = !isFullMode ? resolveTemplateWithMap(card.title || '') : (card.title || '');
+    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(card.description || '') : (card.description || '');
+    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;
@@ -484,21 +1336,42 @@ export const Rcs = (props) => {
     isFullMode,
     isEditFlow,
     cardVarMapped,
+    rcsSpanningSemanticVarNames,
+    carouselData,
+    selectedCarouselHeight,
+    selectedCarouselWidth,
   ]);
 
   const testAndPreviewContent = useMemo(() => getTemplateContent(), [getTemplateContent]);
 
   const paramObj = params || {};
   useEffect(() => {
-    const { id } = paramObj;
-    if (id && isFullMode) {
-      setSpin(true);
-      actions.getTemplateDetails(id, setSpin);
-    }
-    return () => {
-      actions.clearEditResponse();
-    };
-  }, [paramObj.id, isFullMode]);
+  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();
+  };
+  }, [paramObj.id]);
 
   useEffect(() => {
     if (!(isEditFlow || !isFullMode)) return;
@@ -514,7 +1387,7 @@ export const Rcs = (props) => {
       const nextVarMap = {};
       let varOrdinal = 0;
       arr.forEach((elem, idx) => {
-        // RCS placeholders are alphanumeric/underscore (e.g. {{user_name}}), not numeric-only
+        // Mustache tokens: {{1}}, {{user_name}}, {{tag.FORMAT_1}}, etc.
         if (rcsVarTestRegex.test(elem)) {
           const id = `${elem}_${idx}`;
           const varName = getVarNameFromToken(elem);
@@ -525,6 +1398,7 @@ export const Rcs = (props) => {
             varName,
             globalSlot,
             isEditLike,
+            rcsSpanningSemanticVarNames.has(varName),
           );
           nextVarMap[id] = mappedValue;
         }
@@ -534,14 +1408,13 @@ export const Rcs = (props) => {
 
     initField(templateTitle, setTitleVarMappedData, 0);
     initField(templateDesc, setDescVarMappedData, titleTokenCount);
-  }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
+  }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames]);
 
   useEffect(() => {
     if (!isEditFlow && isFullMode) {
       setRcsVideoSrc({});
       updateRcsImageSrc('');
-      setUpdateRcsImageSrc('');
-      updateRcsThumbnailSrc('');
+      setRcsThumbnailSrc('');
       setAssetList({});
     }
   }, [templateMediaType]);
@@ -584,6 +1457,7 @@ export const Rcs = (props) => {
       if (mediaType) {
       setTemplateMediaType(mediaType);
     }
+    const tempOrientation = cardSettings.cardOrientation;
     const tempAlignment = cardSettings.mediaAlignment;
     const tempHeight = mediaData.height;
     
@@ -633,6 +1507,12 @@ export const Rcs = (props) => {
         details,
         'versions.base.content.RCS.rcsContent.cardContent[0]',
       );
+      const rcsContent = get(details, 'versions.base.content.RCS.rcsContent', {});
+      const cardType = (rcsContent?.cardType || '').toString().toLowerCase();
+      
+      setEditFlow(true);
+      setTemplateName(details?.name || details?.creativeName || '');
+   
       const cardFromTop = get(details, 'rcsContent.cardContent[0]');
       const card0 = { ...(cardFromTop || {}), ...(cardFromVersions || {}) };
       const cardVarMappedFromCardContent =
@@ -702,16 +1582,83 @@ export const Rcs = (props) => {
         }
         return hydratedCardVarMappedResult;
       });
+
+      if (cardType === contentType.carousel) {
+        
+        setTemplateType(contentType.carousel);
+        setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
+        const cardSettings = rcsContent?.cardSettings || {};
+        const cardWidth = cardSettings?.cardWidth || SMALL;
+        setSelectedCarouselWidth(cardWidth);
+
+        const cards = Array.isArray(rcsContent?.cardContent) ? 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);
+        }
+        return;
+      }
+
       const mediaType =
         card0.mediaType
         || get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].mediaType', '');
-      if (mediaType === RCS_MEDIA_TYPES.NONE) {
+      if (cardType !== contentType.carousel && mediaType === RCS_MEDIA_TYPES.NONE) {
         setTemplateType(contentType.text_message);
-      } else {
+      } else if (cardType !== contentType.carousel && mediaType !== RCS_MEDIA_TYPES.NONE) {
         setTemplateType(contentType.rich_card);
       }
-      setEditFlow(true);
-      setTemplateName(details?.name || details?.creativeName || '');
+     
       const loadedTitle = loadedTitleForMap;
       const loadedDesc = loadedDescForMap;
       const { normalizedTitle, normalizedDesc } = normalizeLibraryLoadedTitleDesc({
@@ -740,7 +1687,11 @@ export const Rcs = (props) => {
           ?? get(details, 'versions.base.content.RCS.templateApprovalStatus')
           ?? '',
       };
-      templateStatusHelper(cardForStatus);
+      if (isHostInfoBip) {
+        setTemplateStatus('');
+      } else {
+        templateStatusHelper(cardForStatus);
+      }
       const mediaData =
         card0.media != null && card0.media !== ''
           ? card0.media
@@ -780,12 +1731,17 @@ export const Rcs = (props) => {
           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 || '',
@@ -793,6 +1749,10 @@ export const Rcs = (props) => {
           content: nextSmsState.content,
           unicodeValidity: nextSmsState.unicodeValidity,
           varMapped: nextSmsState.rcsSmsFallbackVarMapped || {},
+          senderIds:
+            Array.isArray(registeredSenderIdsFromApi)
+              ? registeredSenderIdsFromApi.join('\u001f')
+              : '',
         });
         if (
           isFullMode
@@ -806,7 +1766,7 @@ export const Rcs = (props) => {
         setSmsFallbackData(null);
       }
     }
-  }, [rcsHydrationDetails, isFullMode]);
+  }, [rcsHydrationDetails, isFullMode, isHostInfoBip]);
 
   useEffect(() => {
     if (templateType === contentType.text_message) {
@@ -884,6 +1844,7 @@ export const Rcs = (props) => {
       query.context = getDefaultTags;
     }
     fetchTagSchemaIfNewQuery(query);
+    globalActions.fetchSchemaForEntity(query);
   };
 
   const replaceNumericPlaceholderWithTagInTemplate = (templateStr, numericVarName, tagName) => {
@@ -892,58 +1853,87 @@ export const Rcs = (props) => {
     return templateStr.replace(re, `{{${tagName}}}`);
   };
 
-  const onTagSelect = (data, areaId, field) => {
-    if (!areaId) return;
-    const sep = areaId.lastIndexOf('_');
-    if (sep === -1) return;
-    const slotSuffix = areaId.slice(sep + 1);
-    if (slotSuffix === '' || isNaN(Number(slotSuffix))) return;
-    const token = areaId.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
-    if (!variableName) return;
-    const isNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(variableName));
-    const fieldStr = field === RCS_TAG_AREA_FIELD_TITLE ? templateTitle : templateDesc;
-    const fieldType = field === RCS_TAG_AREA_FIELD_TITLE ? TITLE_TEXT : MESSAGE_TEXT;
-    const globalSlotForArea = getGlobalSlotIndexForRcsFieldId(areaId, fieldStr, fieldType);
-
-    setCardVarMapped((prev) => {
-      const base = (prev?.[variableName] ?? '').toString();
-      const nextVal = `${base}{{${data}}}`;
-      const next = { ...(prev || {}) };
-      if (isNumericSlot) {
-        delete next[variableName];
-        next[data] = nextVal;
+  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 {
-        // Use the global slot index key only — writing by semantic name (variableName)
-        // would contaminate any other field that shares the same var name (e.g. {{gt}}
-        // in both title and description), causing the label value to bleed across fields.
-        if (globalSlotForArea !== null && globalSlotForArea !== undefined) {
-          next[String(globalSlotForArea + 1)] = nextVal;
-          // Same reasoning as handleRcsVarChange: delete the semantic key so
-          // resolveCardVarMappedSlotValue uses only the numeric slot and the
-          // value cannot bleed across fields that share the same var name.
-          delete next[variableName];
+        // 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;
         } else {
-          next[variableName] = nextVal;
+          updatedCardVarMapped[semanticOrNumericVarName] = mappedValueAfterAppendingTag;
         }
       }
-      return next;
+      return updatedCardVarMapped;
     });
 
-    if (isNumericSlot && (field === RCS_TAG_AREA_FIELD_TITLE || field === RCS_TAG_AREA_FIELD_DESC)) {
-      if (field === RCS_TAG_AREA_FIELD_TITLE) {
-        setTemplateTitle((prev) => {
-          const nextStr = replaceNumericPlaceholderWithTagInTemplate(prev || '', variableName, data);
-          if (nextStr === prev) return prev;
-          setTemplateTitleError(variableErrorHandling(nextStr));
-          return nextStr;
+    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((prev) => {
-          const nextStr = replaceNumericPlaceholderWithTagInTemplate(prev || '', variableName, data);
-          if (nextStr === prev) return prev;
-          setTemplateDescError(variableErrorHandling(nextStr));
-          return nextStr;
+        setTemplateDesc((previousDescription) => {
+          const descriptionAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
+            previousDescription || '',
+            semanticOrNumericVarName,
+            selectedTagNameFromPicker,
+          );
+          if (descriptionAfterReplacingNumericPlaceholder === previousDescription) {
+            return previousDescription;
+          }
+          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
+          setRcsVarSegmentEditorRemountKey((k) => k + 1);
+          return descriptionAfterReplacingNumericPlaceholder;
         });
       }
     }
@@ -953,6 +1943,31 @@ export const Rcs = (props) => {
 
   const onDescTagSelect = (tagName) => onTagSelect(tagName, descTextAreaId, RCS_TAG_AREA_FIELD_DESC);
 
+  const onCarouselTagSelect = (data) => {
+    if (!carouselFocusedVarId) return;
+    const sep = carouselFocusedVarId.lastIndexOf('_');
+    if (sep === -1) return;
+    const token = carouselFocusedVarId.slice(0, sep);
+    const variableName = getVarNameFromToken(token);
+    if (!variableName) return;
+    setCardVarMapped((prev) => {
+      const base = (prev?.[variableName] ?? '').toString();
+      const nextVal = `${base}{{${data}}}`;
+      return {
+        ...(prev || {}),
+        [variableName]: nextVal,
+      };
+    });
+  };
+
+  const onTagSelectFallback = (data) => {
+    const tempMsg = `${fallbackMessage}{{${data}}}`;
+    const error = fallbackMessageErrorHandler(tempMsg);
+    setFallbackMessage(tempMsg);
+    setFallbackMessageError(error);
+  };
+
+
   //removing optout tag for rcs
   const getRcsTags = () => {
     const tempTags = cloneDeep(tags);
@@ -988,15 +2003,14 @@ export const Rcs = (props) => {
       value: contentType.rich_card,
       label: formatMessage(messages.richCard),
     },
-    {
-      value: contentType.carousel,
-      label: (
-        <CapTooltip title={formatMessage(messages.disabledCarouselTooltip)}>
-          {formatMessage(messages.carousel)}
-        </CapTooltip>
-      ),
-      disabled: true,
-    },
+    ...(!isHostInfoBip
+      ? [
+          {
+            value: contentType.carousel,
+            label: formatMessage(messages.carousel),
+          },
+        ]
+      : []),
   ];
 
   const onTemplateNameChange = ({ target: { value } }) => {
@@ -1007,6 +2021,10 @@ 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);
+    }
   };
 
 
@@ -1027,8 +2045,39 @@ 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()) {
@@ -1044,7 +2093,7 @@ export const Rcs = (props) => {
 
   const onTemplateDescChange = ({ target: { value } }) => {
     let errorMessage = false;
-    if(templateType === contentType.text_message && value?.length > RCS_TEXT_MESSAGE_MAX_LENGTH){
+    if(templateType === contentType.text_message && value?.length > (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : 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);
@@ -1057,6 +2106,62 @@ export const Rcs = (props) => {
     setTemplateDescError(error);
   };
 
+
+  const templateDescErrorHandler = (value) => {
+    let errorMessage = false;
+    const { unsupportedTags, isBraceError } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+    }) || {};
+    
+    const maxLength = templateType === contentType.text_message 
+      ? (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH) 
+      : RCS_RICH_CARD_MAX_LENGTH;
+  
+    if (value === '' && isMediaTypeText) {
+      errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
+    } else if (value?.length > maxLength) {
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+    }
+    
+    if (isBraceError) {
+      errorMessage = formatMessage(globalMessages.unbalanacedCurlyBraces);
+    }
+    return errorMessage;
+  };
+
+
+  const onFallbackMessageChange = ({ target: { value } }) => {
+    const error = fallbackMessageErrorHandler(value);
+    setFallbackMessage(value);
+    setFallbackMessageError(error);
+  };
+
+  const fallbackMessageErrorHandler = (value) => {
+    let errorMessage = false;
+    const { unsupportedTags } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+    }) || {};
+    if (value?.length > FALLBACK_MESSAGE_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.fallbackMsgLenError);
+    } else if (unsupportedTags?.length > 0) {
+      errorMessage = formatMessage(
+        globalMessages.unsupportedTagsValidationError,
+        {
+          unsupportedTags,
+        },
+      );
+    }
+    return errorMessage;
+  };
+
   // Check for forbidden characters: square brackets [] and single curly braces {}
   const forbiddenCharactersValidation = (value) => {
     if (!value) return false;
@@ -1101,7 +2206,8 @@ export const Rcs = (props) => {
       if(!isFullMode){
         return false;
       }
-      if (!/^\w+$/.test(paramName)) {
+      // Allow Liquid-style param names: letters, digits, underscore, dots (e.g. dynamic_expiry_date_after_3_days.FORMAT_1)
+      if (!/^[\w.]+$/.test(paramName)) {
         return formatMessage(messages.unknownCharactersError);
       }
     }
@@ -1166,6 +2272,117 @@ const onTitleAddVar = () => {
   setTemplateTitleError(error);
 };
 
+  // Carousel: global variables across the whole carousel (all cards, title+body)
+  const getNextCarouselVarToken = () => {
+    const nums = [];
+    (carouselData || []).forEach((c = {}) => {
+      const s1 = (c.title || '').match(/\{\{(\d+)\}\}/g) || [];
+      const s2 = (c.description || '').match(/\{\{(\d+)\}\}/g) || [];
+      [...s1, ...s2].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 textAreaValue = (idValue, type) => {
+    if (idValue >= 0) {
+      const templateStr = type === TITLE_TEXT ? templateTitle : templateDesc;
+      const templateArr = splitTemplateVarString(templateStr);
+      const token = templateArr?.[idValue] || "";
+      if (token && rcsVarTestRegex.test(token)) {
+        const varName = getVarNameFromToken(token);
+        return (cardVarMapped?.[varName] ?? '').toString();
+      }
+      return "";
+    }
+    return "";
+  };
+
+  // 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 || '';
+    if (!id) return;
+    const sep = id.lastIndexOf('_');
+    if (sep === -1) return;
+    const isInvalidValue = value?.trim() === "";
+    const token = id.slice(0, sep);
+    const variableName = getVarNameFromToken(token);
+
+    if (variableName) {
+      setCardVarMapped((prev) => ({
+        ...prev,
+        [variableName]: isInvalidValue ? "" : value,
+      }));
+    }
+  };
+
+  const setTextAreaId = (e, type) => {
+    // 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 || '');
+    if (!id) return;
+    if (type === TITLE_TEXT) setTitleTextAreaId(id);
+    else setDescTextAreaId(id);
+  };
+
   const renderButtonComponent = () => {
     return (
       <>
@@ -1191,7 +2408,8 @@ const onTitleAddVar = () => {
                         isEditFlow={isEditFlow}
                         isFullMode={isFullMode}
                         maxButtons={MAX_BUTTONS}
-            />
+                        host={hostName}
+          />
       </>
     );
   };
@@ -1214,6 +2432,7 @@ const onTitleAddVar = () => {
           varName,
           globalSlot,
           isEditLike,
+          rcsSpanningSemanticVarNames.has(varName),
         );
       }
     });
@@ -1222,42 +2441,37 @@ const onTitleAddVar = () => {
 
   const titleVarSegmentValueMapById = useMemo(
     () => getRcsValueMap(templateTitle, TITLE_TEXT),
-    [templateTitle, cardVarMapped, isEditFlow, isFullMode],
+    [templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
   );
   const descriptionVarSegmentValueMapById = useMemo(
     () => getRcsValueMap(templateDesc, MESSAGE_TEXT),
-    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode],
+    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
   );
 
-  const handleRcsVarChange = (id, value, type) => {
-    const sep = id.lastIndexOf('_');
-    if (sep === -1) return;
-    const token = id.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
+  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 fieldStr = type === TITLE_TEXT ? templateTitle : templateDesc;
-    const globalSlot = getGlobalSlotIndexForRcsFieldId(id, fieldStr, type);
-    setCardVarMapped((previousVarMap) => {
-      const nextVarMap = { ...previousVarMap };
-      if (globalSlot !== null && globalSlot !== undefined) {
-        // Write by global slot index only — title and description can share the
-        // same var name (e.g. {{gt}}), and writing by semantic name would cause
-        // the description slot to resolve the title's value and vice-versa.
-        const numericKey = String(globalSlot + 1);
-        nextVarMap[numericKey] = coercedSlotValue;
-        // Remove any stale semantic key so resolveCardVarMappedSlotValue never
-        // falls back to it. Guard: when variableName is already the numeric slot
-        // key (e.g. {{1}} at slot 0 → both equal "1"), skip the delete or it
-        // would erase the value we just wrote.
-        if (variableName !== numericKey) {
-          delete nextVarMap[variableName];
-        }
-      } else {
-        nextVarMap[variableName] = coercedSlotValue;
+    const templateStringForField = type === TITLE_TEXT ? templateTitle : templateDesc;
+    const globalVarSlotIndexZeroBased = getGlobalSlotIndexForRcsFieldId(
+      varSegmentCompositeDomId,
+      templateStringForField,
+      type,
+    );
+    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;
       }
-      return nextVarMap;
+      return updatedCardVarMapped;
     });
   };
 
@@ -1278,6 +2492,7 @@ const onTitleAddVar = () => {
         }
         suffix={
           <>
+        
             {(isEditFlow || !isFullMode) ? (
               <TagList
                 label={formatMessage(globalMessages.addLabels)}
@@ -1294,15 +2509,16 @@ const onTitleAddVar = () => {
                 type="flat"
                 isAddBtn
                 onClick={onTitleAddVar}
-                disabled={!!templateTitleError}
+                disabled={templateTitleError}
               >
                 {formatMessage(messages.addVar)}
               </CapButton>
-            )}
+           )}
           </>
-        }
+        }  
       />
-  {(isEditFlow || !isFullMode) ? (
+      
+    {(isEditFlow || !isFullMode) ? (
       <VarSegmentMessageEditor
         key={`rcs-title-vars-${rcsVarSegmentEditorRemountKey}`}
         templateString={templateTitle}
@@ -1336,7 +2552,7 @@ const onTitleAddVar = () => {
 )}
 {!isEditFlow && isFullMode && renderTitleCharacterCount()}
     </>
-  )}
+      )}
 
 {/* Template Message */}
        <CapRow id="rcs-template-message-label">
@@ -1374,9 +2590,10 @@ const onTitleAddVar = () => {
           />
         </CapRow>
         <CapRow className="rcs-create-template-message-input">
-          <div className="rcs_text_area_wrapper">
-            {(isEditFlow || !isFullMode)
-              ? (
+            {/* 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}
@@ -1425,7 +2642,7 @@ const onTitleAddVar = () => {
                 </>
               )
             }
-          </div>
+          </CapRow>
           {(isEditFlow || !isFullMode) && templateDescError && (
             <CapError className="rcs-template-message-error">
               {templateDescError}
@@ -1447,7 +2664,8 @@ const onTitleAddVar = () => {
             />
           )}
         </CapRow>
-        {renderButtonComponent()}
+        {((!isEditFlow && isFullMode) || (isEditFlow && (suggestions?.length ?? 0) > 0)) &&
+          renderButtonComponent()}
       </>
 
     );
@@ -1467,7 +2685,7 @@ const onTitleAddVar = () => {
   // Get max length for description based on template type
   const getDescriptionMaxLength = () => {
     return templateType === contentType.text_message 
-      ? RCS_TEXT_MESSAGE_MAX_LENGTH  // 160 for text message
+      ? (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH)  // 160 for text message
       : RCS_RICH_CARD_MAX_LENGTH;    // 2000 for rich card description
   };
 
@@ -1493,6 +2711,63 @@ const onTitleAddVar = () => {
     );
   };
 
+  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,
+    };
+  };
+
   // Render character count for description/message
   const renderDescriptionCharacterCount = (className = "rcs-character-count") => {
     const currentLength = getDescriptionCharacterCount();
@@ -1508,11 +2783,31 @@ const onTitleAddVar = () => {
     );
   };
 
+  // Carousel: per-card character counts (same limits as rich card)
+  const getCarouselTitleCharacterCount = (cardIndex) => {
+    const t = carouselData?.[cardIndex]?.title || '';
+    return t ? t.length : 0;
+  };
+
+  const getCarouselDescriptionCharacterCount = (cardIndex) => {
+    const d = carouselData?.[cardIndex]?.description || '';
+    return d ? d.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
     if (cardVarMapped && Object.keys(cardVarMapped).length > 0) {
-      const hasTagInMapped = Object.values(cardVarMapped).some((value) => 
+      const hasTagInMapped = Object.values(cardVarMapped).some(value => 
         isTagIncluded(value)
       );
       if (hasTagInMapped) return true;
@@ -1530,6 +2825,14 @@ const onTitleAddVar = () => {
     return false;
   };
 
+  //adding creative dlt fallback sms handlers
+  const addDltMsgHandler = () => {
+    setShowDltContainer(true);
+    setDltMode(RCS_DLT_MODE.TEMPLATES);
+    setDltEditData({});
+    setFallbackMessage('');
+  };
+
   const closeDltContainerHandler = () => {
     setShowDltContainer(false);
     setDltMode('');
@@ -1589,6 +2892,7 @@ const onTitleAddVar = () => {
           isFullMode={isFullMode}
           isDltFromRcs
           onSelectTemplate={rcsDltEditSelectHandler}
+          handlePeviewTemplate={dltFallbackListingPreviewhandler}
         />
       );
     } else if (dltMode === RCS_DLT_MODE.EDIT) {
@@ -1635,7 +2939,8 @@ const onTitleAddVar = () => {
   );
 
   const uploadRcsImage = useCallback((file, type, fileParams, index) => {
-    const isRcsThumbnail = index === 1;
+    setImageError(null);
+    const isRcsThumbnail = isThumbnailAssetIndex(index);
     actions.uploadRcsAsset(file, type, {
       isRcsThumbnail,
       ...fileParams,
@@ -1646,6 +2951,7 @@ const onTitleAddVar = () => {
 
   const setUpdateRcsImageSrc = useCallback(
     (val) => {
+      setAssetListImage(val);
       updateRcsImageSrc(val);
       actions.clearRcsMediaAsset(0); 
     },
@@ -1672,8 +2978,6 @@ const onTitleAddVar = () => {
   const updateOnRcsImageReUpload = useCallback(() => {
     setUpdateRcsImageSrc('');
   }, []);
-
-
   const uploadRcsVideo = (file, type, fileParams) => { 
     actions.uploadRcsAsset(file, type, {
       ...fileParams,
@@ -1705,13 +3009,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="cap-custom-image-upload rcs-image-upload--top-spacing"
+         style={{ paddingTop: '20px' }}
          allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
          imgWidth={RCS_VIDEO_THUMBNAIL_DIMENSIONS[currentDimension].width}
          imgHeight={RCS_VIDEO_THUMBNAIL_DIMENSIONS[currentDimension].height}
@@ -1723,11 +3027,13 @@ const onTitleAddVar = () => {
          updateOnReUpload={updateOnRcsThumbnailReUpload}
          minImgSize={RCS_THUMBNAIL_MIN_SIZE}
          index={1}
+         className="cap-custom-image-upload"
          key={`rcs-uploaded-image-${currentDimension}`}
          imageData={thumbnailData}
          channel={RCS}
          channelSpecificStyle={!isFullMode}
          skipDimensionValidation={true}
+         showReUploadButton={!isEditFlow && isFullMode}
        />
     </>
     )
@@ -1767,6 +3073,7 @@ const onTitleAddVar = () => {
                     </div>
                   ) : (
                 <CapImageUpload
+         style={{ paddingTop: '20px' }}
                   allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
                   imgWidth={RCS_IMAGE_DIMENSIONS[selectedDimension].width}
                   imgHeight={RCS_IMAGE_DIMENSIONS[selectedDimension].height}
@@ -1788,7 +3095,7 @@ const onTitleAddVar = () => {
               
             </>
           );
-        }
+  }
   
   const renderVideoComponent = () => {
     const currentDimension =selectedDimension || Object.keys(RCS_VIDEO_THUMBNAIL_DIMENSIONS)[0];
@@ -1865,6 +3172,36 @@ 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;
@@ -1990,23 +3327,25 @@ const onTitleAddVar = () => {
                         ...(templateTitle?.match(rcsVarRegex) ?? []),
                         ...(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 = {};
-                      const seenSemanticVarNames = new Set();
                       templateVarTokens.forEach((token, slotIndexZeroBased) => {
                         const varName = getVarNameFromToken(token);
                         if (!varName) return;
                         const resolvedRawValue = resolveCardVarMappedSlotValue(
-                          cardVarMapped,
+                          cardVarMappedForRcsCardOnly,
                           varName,
                           slotIndexZeroBased,
                           isSlotMappingMode,
+                          rcsSpanningSemanticVarNames.has(varName),
                         );
                         const sanitizedSlotValue = sanitizeCardVarMappedValue(resolvedRawValue);
                         persistedSlotVarMap[String(slotIndexZeroBased + 1)] = sanitizedSlotValue;
-                        if (!seenSemanticVarNames.has(varName)) {
-                          seenSemanticVarNames.add(varName);
-                          persistedSlotVarMap[varName] = sanitizedSlotValue;
-                        }
                       });
                       return { cardVarMapped: persistedSlotVarMap };
                     })()),
@@ -2023,6 +3362,53 @@ const onTitleAddVar = () => {
                   || 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;
                 return {
                   smsFallBackContent: {
                     smsTemplateName: smsFallbackForPayload.templateName || '',
@@ -2036,6 +3422,9 @@ const onTitleAddVar = () => {
                       && Object.keys(smsFallbackForPayload.rcsSmsFallbackVarMapped).length > 0 && {
                       [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: smsFallbackForPayload.rcsSmsFallbackVarMapped,
                     }),
+                    ...(smsFallbackTemplateConfigs && {
+                      templateConfigs: smsFallbackTemplateConfigs,
+                    }),
                   },
                 };
               })()),
@@ -2058,13 +3447,36 @@ const onTitleAddVar = () => {
       (wecrmAccountId != null && String(wecrmAccountId).trim() !== '')
         ? String(wecrmAccountId)
         : accountId;
-    const rcsForTest = {
+    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. */
+    if (isSlotMappingModeForPreview) {
+      const cardContent = rcsForTest.rcsContent?.cardContent;
+      if (Array.isArray(cardContent) && cardContent[0]) {
+        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: {
@@ -2112,7 +3524,7 @@ const onTitleAddVar = () => {
    * 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(() => {
+ const librarySmsFallbackMergedForValidation = useMemo(() => {
     if (isFullMode) {
       return smsFallbackData;
     }
@@ -2126,6 +3538,8 @@ const onTitleAddVar = () => {
     };
   }, [isFullMode, templateData, smsFallbackData]);
 
+    
+
   const actionCallback = ({ errorMessage, resp }, isEdit) => {
     // eslint-disable-next-line no-undef
     const error = errorMessage?.message || errorMessage;
@@ -2235,7 +3649,13 @@ const onTitleAddVar = () => {
       return true;
     }
     return orderedVarNames.some((name, globalIdx) => {
-      const v = resolveCardVarMappedSlotValue(cardVarMapped, name, globalIdx, true);
+      const v = resolveCardVarMappedSlotValue(
+        cardVarMapped,
+        name,
+        globalIdx,
+        true,
+        rcsSpanningSemanticVarNames.has(name),
+      );
       const s = v == null ? '' : String(v);
       return s.trim() === '';
     });
@@ -2266,7 +3686,7 @@ const onTitleAddVar = () => {
       return true;
     }
 
-    if (isMediaTypeVideo && (rcsVideoSrc.videoSrc === '' || rcsThumbnailSrc === '' || templateTitle === '' || templateDesc === '' )) {
+    if (isMediaTypeVideo && (!rcsVideoSrc.videoSrc || rcsThumbnailSrc === '' || templateTitle === '' || templateDesc === '' )) {
      return true;
     }
     if (buttonType.includes(CTA)) {
@@ -2291,7 +3711,7 @@ const onTitleAddVar = () => {
   };
 
   const isEditDisableDone = () => {
-    if (templateStatus !== RCS_STATUSES.approved) {
+    if (!isHostInfoBip && templateStatus !== RCS_STATUSES.approved) {
       return true;
     }
 
@@ -2385,7 +3805,6 @@ const onTitleAddVar = () => {
     // Slideboxes are rendered outside the page-level spinner to avoid
     // stacking/blur issues during initial loads.
     if (showDltContainer) return null;
-
     return (
       <>
         {templateStatus !== '' && (
@@ -2395,7 +3814,7 @@ const onTitleAddVar = () => {
                 {formatMessage(messages.templateStatusLabel)}
               </CapLabel>
 
-              {templateStatus && (
+              {!isHostInfoBip && templateStatus && (
                 <CapAlert
                   message={getTemplateStatusMessage()}
                   type={getTemplateStatusType(templateStatus)}
@@ -2434,6 +3853,7 @@ const onTitleAddVar = () => {
               )
             )}
             {renderLabel('templateTypeLabel')}
+            
             <CapRadioGroup
               id="select-rcs-template-type"
               options={TEMPLATE_TYPE_OPTIONS}
@@ -2442,23 +3862,29 @@ const onTitleAddVar = () => {
               disabled={(isEditFlow || !isFullMode)}
             />
 
-            {/* Show media only for rich_card or carousel */}
-            {(templateType === contentType.rich_card || templateType === contentType.carousel) && (
+            {templateType === contentType.carousel ? (
+              renderCarouselSection()
+            ) : (
               <>
-                {renderLabel('mediaLabel')}
-                  <CapRadioGroup
-                    options={mediaRadioOptions || []}
-                    value={templateMediaType}
-                    onChange={onTemplateMediaTypeChange}
-                    disabled={(isEditFlow || !isFullMode)}
-                    className="rcs-radio"
-                  />
-                <div className="rcs-container-image">
-                  {getMediaBasedComponent()}
-                </div>
+                {/* Show media only for rich_card */}
+                {templateType === contentType.rich_card && (
+                  <>
+                    {renderLabel('mediaLabel')}
+                    <CapRadioGroup
+                      options={mediaRadioOptions || []}
+                      value={templateMediaType}
+                      onChange={onTemplateMediaTypeChange}
+                      disabled={(isEditFlow || !isFullMode)}
+                      className="rcs-radio"
+                    />
+                    <div className="rcs-container-image">
+                      {getMediaBasedComponent()}
+                    </div>
+                  </>
+                )}
+                {renderTextComponent()}
               </>
             )}
-            {renderTextComponent()}
             <CapDivider className="rcs-fallback-section-divider" />
             {renderFallBackSmsComponent()}
             <div className="rcs-scroll-div" />
@@ -2480,7 +3906,9 @@ const onTitleAddVar = () => {
                   disabled={isDisableDone()}
                   className="rcs-done-btn"
                 >
-                  <FormattedMessage {...messages.sendForApprovalButtonLabel} />
+                  <FormattedMessage 
+                  {...(isHostInfoBip ? messages.doneButtonLabel : messages.sendForApprovalButtonLabel)} 
+                  />
                 </CapButton>
               </div>
               <CapTooltip
@@ -2554,13 +3982,19 @@ const onTitleAddVar = () => {
         content={testAndPreviewContent}
         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]: smsFallbackData?.rcsSmsFallbackVarMapped ?? {},
+              [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: !isFullMode
+                ? mergeRcsSmsFallbackVarMapLayers(
+                  getLibrarySmsFallbackApiBaselineFromTemplateData(templateData),
+                  smsFallbackData,
+                )
+                : mergeRcsSmsFallbackVarMapLayers({}, smsFallbackData),
             }
             : null
         }
@@ -2570,12 +4004,14 @@ const onTitleAddVar = () => {
   );
 };
 
+
 const mapStateToProps = createStructuredSelector({
   rcsData: makeSelectRcs(),
   accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
+  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 const mapDispatchToProps = (dispatch) => ({