@capillarytech/creatives-library 8.0.345-alpha.13 → 8.0.345-alpha.15

package/v2Containers/Rcs/index.js.rej

@@ -0,0 +1,1336 @@
+diff a/app/v2Containers/Rcs/index.js b/app/v2Containers/Rcs/index.js	(rejected hunks)
+@@ -1,12 +1,14 @@
+ /* eslint-disable no-unused-expressions */
+ import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
++import { flushSync } from 'react-dom';
+ import { bindActionCreators } from 'redux';
+ import { createStructuredSelector } from 'reselect';
++import { injectIntl, FormattedMessage } from 'react-intl';
+ import get from 'lodash/get';
+ import isEmpty from 'lodash/isEmpty';
+ import cloneDeep from 'lodash/cloneDeep';
+ import isNil from 'lodash/isNil';
++import styled from 'styled-components';
+ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+ import CapRow from '@capillarytech/cap-ui-library/CapRow';
+ import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+@@ -106,18 +131,37 @@ import UnifiedPreview from '../../v2Components/CommonTestAndPreview/UnifiedPrevi
+ import VarSegmentMessageEditor from '../../v2Components/VarSegmentMessageEditor';
+ import { ANDROID, RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
+ import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
++import SmsFallback from '../../v2Components/SmsFallback';
++import { CHANNELS_TO_HIDE_FOR_SMS_ONLY } from '../../v2Components/SmsFallback/constants';
+ import CapImageUpload from '../../v2Components/CapImageUpload';
++import addCreativesIcon from '../Assets/images/addCreativesIllustration.svg';
+ import Templates from '../Templates';
+ import SmsTraiEdit from '../SmsTrai/Edit';
+ import TagList from '../TagList';
+ import { validateTags } from '../../utils/tagValidations';
++import { getCdnUrl } from '../../utils/cdnTransformation';
+ import { isTagIncluded } from '../../utils/commonUtils';
++import { splitTemplateVarString as splitTemplateVarStringUtil } from '../../utils/templateVarUtils';
++import { isTraiDLTEnable } from '../../utils/common';
++import { isUrl, isValidText } from '../Line/Container/Wrapper/utils';
++import {
++  invalidVarRegex,
++  RCS_CTA_URL_TYPE,
++  URL_MAX_LENGTH,
++} from '../../v2Components/CapActionButton/constants';
+ import injectReducer from '../../utils/injectReducer';
+ import v2RcsReducer from './reducer';
++import {
++  normalizeLibraryLoadedTitleDesc,
++  mergeRcsSmsFallBackContentFromDetails,
++  mergeRcsSmsFallbackVarMapLayers,
++  extractRegisteredSenderIdsFromSmsFallbackRecord,
++  pickFirstSmsFallbackTemplateString,
++  syncCardVarMappedSemanticsFromSlots,
++  hasMeaningfulSmsFallbackShape,
++  getLibrarySmsFallbackApiBaselineFromTemplateData,
++  pickRcsCardVarMappedEntries,
++} from './rcsLibraryHydrationUtils';
+ import {
+   areAllRcsSmsFallbackVarSlotsFilled,
+   buildRcsNumericMustachePlaceholderRegex,
+@@ -142,15 +188,17 @@ export const Rcs = (props) => {
+     templatesActions,
+     globalActions,
+     location,
++    handleClose,
+     getDefaultTags,
+     supportedTags,
+     metaEntities,
+     injectedTags,
+     loadingTags,
+     getFormData,
++    isDltEnabled,
+     smsRegister,
+     selectedOfferDetails,
++    currentOrgDetails,
+     eventContextTags,
+     accountData = {},
+     // TestAndPreviewSlidebox props
+@@ -170,71 +236,189 @@ export const Rcs = (props) => {
+   const [templateMediaType, setTemplateMediaType] = useState(
+     RCS_MEDIA_TYPES.NONE,
+   );
++  const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
+   const [templateTitle, setTemplateTitle] = useState('');
+   const [templateDesc, setTemplateDesc] = useState('');
+   const [templateDescError, setTemplateDescError] = useState(false);
+   const [templateStatus, setTemplateStatus] = useState('');
++  const [templateDate, setTemplateDate] = useState('');
++  //fallback
++  const [fallbackMessage, setFallbackMessage] = useState('');
++  const [fallbackMessageError, setFallbackMessageError] = useState(false);
+   //fallback dlt
+   const [showDltContainer, setShowDltContainer] = useState(false);
+   const [dltMode, setDltMode] = useState('');
+   const [dltEditData, setDltEditData] = useState({});
++  const [showDltCard, setShowDltCard] = useState(false);
++  const [fallbackPreviewmode, setFallbackPreviewmode] = useState(false);
++  const [dltPreviewData, setDltPreviewData] = useState('');
++  const [buttonType, setButtonType] = useState(RCS_BUTTON_TYPES.NONE);
+   const [suggestionError, setSuggestionError] = useState(true);
+   const [templateType, setTemplateType] = useState('text_message');
++  const [templateHeader, setTemplateHeader] = useState('');
++  const [templateMessage, setTemplateMessage] = useState('');
++  const [templateHeaderError, setTemplateHeaderError] = useState('');
++  const [templateMessageError, setTemplateMessageError] = useState('');
++  const validVarRegex = /\{\{(\d+)\}\}/g;
++  const [updatedTitleData, setUpdatedTitleData] = useState([]);
++  const [updatedDescData, setUpdatedDescData] = useState([]);
+   const [titleVarMappedData, setTitleVarMappedData] = useState({});
+   const [descVarMappedData, setDescVarMappedData] = useState({});
+   const [titleTextAreaId, setTitleTextAreaId] = useState();
+   const [descTextAreaId, setDescTextAreaId] = useState();
+   const [assetList, setAssetList] = useState({});
++  const [assetListImage, setAssetListImage] = useState('');
+   const [rcsImageSrc, updateRcsImageSrc] = useState('');
+   const [rcsVideoSrc, setRcsVideoSrc] = useState({});
+   const [rcsThumbnailSrc, setRcsThumbnailSrc] = useState('');
+   const [selectedDimension, setSelectedDimension] = useState(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
++  // 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({});
++  /** `undefined` = not hydrated yet; `null` = no fallback / user removed template; object = selected fallback */
++  const [smsFallbackData, setSmsFallbackData] = useState(undefined);
+   /** Bump when hydrated cardVarMapped payload changes so VarSegment TextAreas remount with fresh valueMap (controlled-input sync). */
+   const [rcsVarSegmentEditorRemountKey, setRcsVarSegmentEditorRemountKey] = useState(0);
+   const lastHydratedRcsCardVarSignatureRef = useRef(null);
++  /**
++   * Library: parent often passes a new `templateData` object reference every render. Re-applying the same
++   * SMS fallback snapshot was resetting `smsFallbackData` and caused VarSegment inputs to flicker old/new.
++   */
++  const lastSmsFallbackHydrationKeyRef = useRef(null);
++  /** Skip duplicate /meta/TAG fetches: same query is triggered from multiple mount points. */
++  const lastTagSchemaQueryKeyRef = useRef(null);
+ 
+   /**
+    * Hydrate only from template payload — not from full `rcsData`. Uploads/asset updates change `rcsData`
++   * without changing `templateDetails`; re-running hydration then cleared `smsFallbackData`.
+    */
+   const rcsHydrationDetails = useMemo(
+     () => (isFullMode ? rcsData?.templateDetails : templateData),
+     [isFullMode, rcsData?.templateDetails, templateData],
+   );
+ 
++  // TestAndPreviewSlidebox state
++  const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
++  const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
+ 
++  // Suggestions state (must be declared before any callbacks that reference it)
++  const [suggestions, setSuggestions] = useState([]);
++
++  const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
++
++  // Carousel: reuse existing resolution logic (resolveTemplateWithMap) per card.
++  // This keeps carousel behavior consistent with rich-card/text-message in !isFullMode
++  // and ensures shared variables (eg {{name}} across multiple cards) stay in sync.
++  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 || [],
++    };
++  });
++
++  // Get template content for TestAndPreviewSlidebox
++  // Reference: Based on getRcsPreview() function (lines 2087-2111) which prepares content for TemplatePreview
++  // getRcsPreview ALWAYS uses templateTitle and templateDesc for ALL template types (text_message, rich_card, carousel)
++  // renderTextComponent (lines 1317-1485) also uses templateTitle and templateDesc
++  // Note: templateHeader and templateMessage are defined but NOT used in the component
++  const getTemplateContent = useCallback(() => {
++    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;
++
++    // Build media preview object (same pattern as getRcsPreview)
++    const mediaPreview = {};
++    if (isMediaTypeImage && rcsImageSrc) {
++      mediaPreview.rcsImageSrc = rcsImageSrc;
++    }
++    if (isMediaTypeVideo && !isMediaTypeText) {
++      // For video, use thumbnailSrc as rcsVideoSrc (same as getRcsPreview line 2104)
++      if (rcsThumbnailSrc) {
++        mediaPreview.rcsVideoSrc = rcsThumbnailSrc;
++      } else if (rcsVideoSrc?.videoSrc) {
++        mediaPreview.rcsVideoSrc = rcsVideoSrc.videoSrc;
+       }
++      // Also include thumbnailSrc separately if available
++      if (rcsThumbnailSrc) {
++        mediaPreview.rcsThumbnailSrc = rcsThumbnailSrc;
++      }
++    }
+ 
++    // Build content object
++    // Reference: getRcsPreview (line 2091-2092) uses templateTitle and templateDesc for ALL cases
++    // templateTitle is used for rich_card/carousel title, empty for text_message
++    // templateDesc is used for ALL types (text message body or rich card description)
++    // For UnifiedPreview, we map templateTitle -> templateHeader and templateDesc -> templateMessage
++    const contentObj = {
++      // Map templateTitle to templateHeader and templateDesc to templateMessage
++      templateHeader: templateTitle,
++      templateMessage: templateDesc,
++      ...mediaPreview,
++      ...(suggestions.length > 0 && {
++        suggestions: suggestions,
++      }),
++    };
++
++    return contentObj;
++  }, [
++    templateType,
++    templateMediaType,
++    templateTitle,
++    templateDesc,
++    rcsImageSrc,
++    rcsVideoSrc,
++    rcsThumbnailSrc,
++    suggestions,
++    selectedDimension,
++    carouselData,
++    selectedCarouselHeight,
++    selectedCarouselWidth,
++    // IMPORTANT: carousel preview content resolves variables via cardVarMapped.
++    // Without this dependency, Test&Preview slidebox content can get stale when label values change.
++    cardVarMapped,
++    isFullMode,
++  ]);
+ 
+   // Handle Test and Preview button click
+   const handleTestAndPreview = useCallback(() => {
+     setShowTestAndPreviewSlidebox(true);
++    setIsTestAndPreviewMode(true);
+     if (propsHandleTestAndPreview) {
+       propsHandleTestAndPreview();
+     }
+@@ -446,156 +1393,169 @@ export const Rcs = (props) => {
+     }).join('');
+   };
+ 
+-
+-
++  /** Build map of segment-id → resolved value for VarSegmentMessageEditor. */
++  const getRcsValueMap = (fieldTemplateString, fieldType) => {
++    if (!fieldTemplateString) return {};
++    const titleVarTokenMatches = templateTitle?.match(rcsVarRegex) ?? [];
++    const slotOffset = fieldType === TITLE_TEXT ? 0 : titleVarTokenMatches.length;
++    const templateSegments = splitTemplateVarStringRcs(fieldTemplateString);
++    const segmentIdToResolvedValue = {};
++    let varOrdinal = 0;
++    templateSegments.forEach((segmentToken, segmentIndexInField) => {
++      if (rcsVarTestRegex.test(segmentToken)) {
++        const varSegmentCompositeId = `${segmentToken}_${segmentIndexInField}`;
++        const varName = getVarNameFromToken(segmentToken);
++        const globalSlot = slotOffset + varOrdinal;
++        varOrdinal += 1;
++        segmentIdToResolvedValue[varSegmentCompositeId] = resolveCardVarMappedSlotValue(
++          cardVarMapped,
++          varName,
++          globalSlot,
++          isEditLike,
++          rcsSpanningSemanticVarNames.has(varName),
++        );
+       }
+-
+-
+-
++    });
++    return segmentIdToResolvedValue;
++  };
+ 
++  const titleVarSegmentValueMapById = useMemo(
++    () => getRcsValueMap(templateTitle, TITLE_TEXT),
++    [templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
++  );
++  const descriptionVarSegmentValueMapById = useMemo(
++    () => getRcsValueMap(templateDesc, MESSAGE_TEXT),
++    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
++  );
+ 
++  const handleRcsVarChange = (varSegmentCompositeDomId, value, type) => {
++    const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
++    if (underscoreIndexInCompositeId === -1) return;
++    const mustacheTokenFromCompositeId = varSegmentCompositeDomId.slice(0, underscoreIndexInCompositeId);
++    const variableName = getVarNameFromToken(mustacheTokenFromCompositeId);
++    if (variableName === undefined || variableName === null || variableName === '') return;
++    const isInvalidValue = value?.trim() === '';
++    const coercedSlotValue = isInvalidValue ? '' : value;
++    const templateStringForField = type === TITLE_TEXT ? templateTitle : templateDesc;
++    const globalVarSlotIndexZeroBased = getGlobalSlotIndexForRcsFieldId(
++      varSegmentCompositeDomId,
++      templateStringForField,
++      type,
++    );
++    setCardVarMapped((previousCardVarMapped) => {
++      const updatedCardVarMapped = { ...previousCardVarMapped };
++      // Remove stale semantic key to avoid cross-field bleed for shared variable names.
++      delete updatedCardVarMapped[variableName];
++      if (globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined) {
++        updatedCardVarMapped[String(globalVarSlotIndexZeroBased + 1)] = coercedSlotValue;
++      }
++      return updatedCardVarMapped;
++    });
++  };
+ 
+ 
++  useEffect(() => {
++    if (isFullMode || isEditFlow) return;
++    const tokens = [
++      ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
++      ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
++    ];
++    if (!tokens.length) return;
++    setCardVarMapped((prev) => {
++      const next = { ...(prev || {}) };
++      let changed = false;
++      tokens.forEach((t) => {
++        const name = getVarNameFromToken(t);
++        if (name && !Object.prototype.hasOwnProperty.call(next, name)) {
++          next[name] = '';
++          changed = true;
+         }
+       });
++      return changed ? next : prev;
++    });
++  }, [isFullMode, templateTitle, templateDesc]);
+ 
+ 
++  const RcsLabel = styled.div`
++    display: flex;
++    margin-top: 20px;
++  `;
++  const paramObj = params || {};
+   useEffect(() => {
++  const { id } = paramObj;
++  if (id && isFullMode) {
++    setSpin(true);
++    actions.getTemplateDetails(id, setSpin);
++  }
++  return () => {
++    actions.clearEditResponse();
++  };
++  }, [paramObj.id]);
++
++  useEffect(() => {
++      if (!(isEditFlow || !isFullMode)) return;
++
++      const initField = (targetString, currentVarMap, setVarMap, setUpdated) => {
++        const arr = splitTemplateVarString(targetString);
++        if (!arr?.length) {
++          setVarMap({});
++          setUpdated([]);
++          return;
++        }
++        const nextVarMap = {};
++        const nextUpdated = [...arr];
++        arr.forEach((elem, idx) => {
++          // RCS placeholders are alphanumeric/underscore (e.g. {{user_name}}), not numeric-only
++          if (rcsVarTestRegex.test(elem)) {
++            const id = `${elem}_${idx}`;
++            const varName = getVarNameFromToken(elem);
++            const mappedValue = (cardVarMapped?.[varName] ?? '').toString();
++            nextVarMap[id] = mappedValue;
++            if (mappedValue !== '') {
++              nextUpdated[idx] = mappedValue;
++            } else {
++              nextUpdated[idx] = elem;
++            }
++          }
++        });
++        setVarMap(nextVarMap);
++        setUpdated(nextUpdated);
++      };
++
++      initField(templateTitle, titleVarMappedData, setTitleVarMappedData, setUpdatedTitleData);
++      initField(templateDesc, descVarMappedData, setDescVarMappedData, setUpdatedDescData);
++    }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
++    
++    useEffect(() => {
++      if(!isEditFlow && isFullMode){
+       setRcsVideoSrc({});
+       updateRcsImageSrc('');
+       setUpdateRcsImageSrc('');
+       updateRcsThumbnailSrc('');
+       setAssetList({});
++      }
++     }, [templateMediaType]);
+   
++    const templateStatusHelper = (details) => {
++      const status =
++      get(details, 'versions.base.content.RCS.rcsContent.Status') ||
++      get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
++      switch (status) {
++        case RCS_STATUSES.approved:
+           setTemplateStatus(RCS_STATUSES.approved);
+           break;
++        case RCS_STATUSES.pending:
+           setTemplateStatus(RCS_STATUSES.pending);
+           break;
++        case RCS_STATUSES.awaitingApproval:
+           setTemplateStatus(RCS_STATUSES.awaitingApproval);
+           break;
++        case RCS_STATUSES.unavailable:
+           setTemplateStatus(RCS_STATUSES.unavailable);
+           break;
++        case RCS_STATUSES.rejected:
+           setTemplateStatus(RCS_STATUSES.rejected);
+           break;
+         default:
+           setTemplateStatus(status);
+           break;
+@@ -648,210 +1609,112 @@ export const Rcs = (props) => {
+   };
+   
+   useEffect(() => {
++    const details = isFullMode ? rcsData?.templateDetails : templateData;
+     if (details && Object.keys(details).length > 0) {
++      const rcsContent = get(details, 'versions.base.content.RCS.rcsContent', {});
++      const cardType = (rcsContent?.cardType || '').toString().toLowerCase();
++      if (!isFullMode) {
++        const tempCardVarMapped = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped', {});
++        setCardVarMapped(tempCardVarMapped);
+       }
++      setEditFlow(true);
++      setTemplateName(details.name || '');
++
++      // Carousel edit-mode hydration
++      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 {
++          templateStatusHelper(details);
+         }
++        return;
++      }
++
++      // Standalone edit-mode hydration (existing behavior)
++      const mediaType = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].mediaType', '');
++      if (cardType !== contentType.carousel && mediaType === RCS_MEDIA_TYPES.NONE) {
+         setTemplateType(contentType.text_message);
++      } else if (cardType !== contentType.carousel && mediaType !== RCS_MEDIA_TYPES.NONE) {
+         setTemplateType(contentType.rich_card);
+       }
++      const loadedTitle = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].title', '');
++      const loadedDesc = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].description', '');
++      const loadedMap = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped', {});
++      const normalizedTitle = (!isFullMode && !isEmpty(loadedMap)) ? getUnmappedDesc(loadedTitle, loadedMap) : loadedTitle;
++      const normalizedDesc = (!isFullMode && !isEmpty(loadedMap)) ? getUnmappedDesc(loadedDesc, loadedMap) : loadedDesc;
+       setTemplateTitle(normalizedTitle);
+       setTemplateDesc(normalizedDesc);
++      setSuggestions(get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].suggestions', []));
+       if (isHostInfoBip) {
++        // Infobip doesn't use templateStatusHelper; clear to prevent stale status when switching hosts
+         setTemplateStatus('');
+       } else {
++        templateStatusHelper(details);
+       }
++      const mediaData = get(details, 'versions.base.content.RCS.rcsContent.cardContent[0].media', '');
++      const cardSettings = get(details, 'versions.base.content.RCS.rcsContent.cardSettings', '');
+       setMediaData(mediaData, mediaType, cardSettings);
+-
+     }
++  // NOTE: isEditFlow is intentionally excluded from deps – it is SET inside this
++  // effect (setEditFlow(true)), so including it would cause a second hydration
++  // run that overrides the selectedDimension reset done by the templateType effect.
++  // eslint-disable-next-line react-hooks/exhaustive-deps
++  }, [rcsData, templateData, isFullMode, isHostInfoBip]);
++  
+ 
+   useEffect(() => {
+     if (templateType === contentType.text_message) {
+       setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
++      setTemplateTitle('');
++      setTemplateTitleError('');
+       if (!isEditFlow && isFullMode) {
+         setUpdateRcsImageSrc('');
++        setUpdateRcsVideoSrc({});
+         setRcsVideoSrc({});
+         setSelectedDimension(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
+       }
+@@ -1028,14 +1908,15 @@ export const Rcs = (props) => {
+   };
+   // tag Code end
+ 
++  const renderLabel = (value, showLabel, desc) => {
++    const isTemplateApproved = (templateStatus === RCS_STATUSES.approved);
+     return (
+       <>
++        <RcsLabel>
+           <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
++        </RcsLabel>
+         {desc && (
++          <CapLabel type="label3" style={{ marginBottom: '17px' }}>
+             {formatMessage(messages[desc])}
+           </CapLabel>
+         )}
+@@ -1165,43 +2101,53 @@ export const Rcs = (props) => {
+       if(!isFullMode){
+         return false;
+       }
++      if (!/^\w+$/.test(paramName)) {
+         return formatMessage(messages.unknownCharactersError);
+       }
+     }
+     return false;
+   };
++  
++  const templateHeaderErrorHandler = (value) => {
++    let errorMessage = false;
++    if (value?.length > TEMPLATE_HEADER_MAX_LENGTH) {
++      errorMessage = formatMessage(messages.templateHeaderLengthError);
++    } else {
++      errorMessage = variableErrorHandling(value);
++    }
++    return errorMessage;
++  };
++
++
++  const templateMessageErrorHandler = (value) => {
++    let errorMessage = false;
++    if (value === '') {
++      errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
++    } else if (
++      value?.length
++      > TEMPLATE_MESSAGE_MAX_LENGTH
++    ) {
++      errorMessage = formatMessage(messages.templateMessageLengthError);
++    } else {
++      errorMessage = variableErrorHandling(value);
++    }
++    return errorMessage;
++  };
++
+ 
+   const onMessageAddVar = () => {
++  onAddVar(MESSAGE_TEXT, templateDesc, rcsVarRegex);
+ };
+ 
++const onAddVar = (type, messageContent, regex) => {
++  // Always append the next variable at the end, like WhatsApp
++  const existingVars = messageContent.match(/\{\{(\d+)\}\}/g) || [];
++  const existingNumbers = existingVars.map(v => parseInt(v.match(/\d+/)[0], 10));
+   let nextNumber = 1;
+   while (existingNumbers.includes(nextNumber)) {
+     nextNumber++;
+   }
+-
++  if (nextNumber > 19) {
+     return;
+   }
+   const nextVar = `{{${nextNumber}}}`;
+@@ -1386,14 +2429,14 @@ const onTitleAddVar = () => {
+       value={templateTitle || ""}
+       size="default"
+       data-testid="template_title"
++      errorMessage={normalizeErrorMessage(templateTitleError)}
+       disabled={isEditFlow || !isFullMode}
+     />
+   )}
++</CapRow>
+ {(isEditFlow || !isFullMode) && templateTitleError && (
+   <CapError className="rcs-template-title-error">
++    {normalizeErrorMessage(templateTitleError)}
+   </CapError>
+ )}
+ {!isEditFlow && isFullMode && renderTitleCharacterCount()}
+@@ -1488,15 +2519,13 @@ const onTitleAddVar = () => {
+                 </>
+               )
+             }
++          </CapRow>
+           {(isEditFlow || !isFullMode) && templateDescError && (
+             <CapError className="rcs-template-message-error">
++              {normalizeErrorMessage(templateDescError)}
+             </CapError>
+           )}
++          {!isEditFlow && isFullMode && renderDescriptionCharacterCount()}
+           {!isFullMode && hasTag() && (
+             <CapAlert
+               message={
+@@ -1738,15 +2975,19 @@ const onTitleAddVar = () => {
+   }, []);
+ 
+ 
++  const uploadRcsVideo = (file, type, fileParams, index = 0) => { 
++    setImageError(null);
+     actions.uploadRcsAsset(file, type, {
+       ...fileParams,
+       type: 'video',
+       channel: RCS,
+       isGenerateVideoThumbnail: false,
++    }, index);  
+   };
+ 
++  const updateRcsVideoSrc = (val) => {
++    setRcsVideoSrc(val);
++  };
+   const setUpdateRcsVideoSrc = useCallback((index, val) => {
+     setRcsVideoSrc(val);
+     setAssetList(val); 
+@@ -1817,20 +3060,21 @@ const onTitleAddVar = () => {
+                       value: dim.type,
+                       label: `${dim.label}`
+                     }))}
++                    style={{ marginBottom: '20px' }}
+                   />
+                 </>
+               )}
+                   {(isEditFlow || !isFullMode) ? (
++                    <CapRow className="rcs-image-preview">
+                       <CapImage
+                         src={rcsImageSrc}
+                         alt="RCS Image"
+                         className="rcs-preview-image"
+                       />
++                    </CapRow>
+                   ) : (
+                 <CapImageUpload
++                  style={{ paddingTop: '20px' }}
+                   allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+                   imgWidth={RCS_IMAGE_DIMENSIONS[selectedDimension].width}
+                   imgHeight={RCS_IMAGE_DIMENSIONS[selectedDimension].height}
+@@ -1871,16 +3115,16 @@ const onTitleAddVar = () => {
+                 value: dim.type,
+                 label: `${dim.label}`
+               }))}
++              style={{ marginBottom: '20px' }}
+             />
+             )}
+               {(isEditFlow || !isFullMode) ? (
++                <CapRow className="rcs-video-preview">
+                   <CapImage
+                     src={rcsVideoSrc.videoThumbnail || ''}
+                     className="rcs-preview-video"
+                   />
++                </CapRow>
+               ) : (
+                 <>
+                   <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Video</CapHeading>
+@@ -1925,22 +3170,44 @@ const onTitleAddVar = () => {
+         );
+       }
+     }
++    return renderTextComponent();
++  };
++
++  const getRcsPreview = () => {
++    // Carousel preview: WhatsApp-style static horizontal scroll in UnifiedPreview
++    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 resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
++    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
+     return (
+       <UnifiedPreview
+         channel={RCS}
+@@ -1963,308 +3230,167 @@ const onTitleAddVar = () => {
+     );
+   };
+   
++  const getUnmappedDesc = (str, mapping) => {
++    if (!str) return '';
++    if (!mapping || Object.keys(mapping).length === 0) return str;
++    let result = str;
++    const replacements = [];
++    Object.entries(mapping).forEach(([key, value]) => {
++      const raw = (value ?? '').toString();
++      if (!raw || raw?.trim?.() === '') return;
++      const braced = /^\{\{[\s\S]*\}\}$/.test(raw) ? raw : `{{${raw}}}`;
++      replacements.push({ key, needle: raw });
++      if (braced !== raw) replacements.push({ key, needle: braced });
++    });
++    const seen = new Set();
++    const uniq = replacements
++      .filter(({ key, needle }) => {
++        const id = `${key}::${needle}`;
++        if (seen.has(id)) return false;
++        seen.add(id);
++        return true;
++      })
++      .sort((a, b) => (b.needle.length - a.needle.length));
++
++    uniq.forEach(({ key, needle }) => {
++      if (!needle) return;
++      const escaped = needle.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
++      const regex = new RegExp(escaped, 'g');
++      result = result.replace(regex, `{{${key}}}`);
++    });
++    return result;
++  };
+ 
+-
++  const buildCardVarMappedForText = (titleText = '', descText = '') => {
++    const existingMap = cardVarMapped || {};
++    const uniqueAllowedKeys = Array.from(new Set([
++      ...((titleText.match(rcsVarRegex) || []).map((token) => getVarNameFromToken(token))),
++      ...((descText.match(rcsVarRegex) || []).map((token) => getVarNameFromToken(token))),
++    ].filter(Boolean)));
++
++    return uniqueAllowedKeys.reduce((acc, key) => {
++      acc[key] = Object.prototype.hasOwnProperty.call(existingMap, key) ? existingMap[key] : '';
++      return acc;
++    }, {});
++  };
++
++  const buildStandaloneCardContent = () => {
++    const resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
++    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
++    return [
++      {
++        title: resolvedTitle,
++        description: resolvedDesc,
++        mediaType: templateMediaType,
++        ...(!isMediaTypeText && {media: {
++          mediaUrl: rcsImageSrc || rcsVideoSrc.videoSrc || '',
++          thumbnailUrl: rcsThumbnailSrc || '',
++          height: isMediaTypeImage
++            ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.heightType || MEDIUM
++            : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType || MEDIUM,
++        }}),
++        ...(!isFullMode && (() => ({ cardVarMapped: buildCardVarMappedForText(templateTitle, templateDesc) }))()),
++        ...(suggestions.length > 0 && { suggestions }),
+       }
++    ];
++  };
++
++  const buildCarouselCardContent = () => {
++    return (carouselData || []).map((card = {}) => {
++      const title = card.title || '';
++      const description = card.description || '';
++      const mediaType = card.mediaType || RCS_MEDIA_TYPES.IMAGE;
++      const mediaUrl = mediaType === RCS_MEDIA_TYPES.VIDEO
++        ? (card.videoAsset?.videoSrc || '')
++        : (card.imageSrc || '');
++      const thumbnailUrl = mediaType === RCS_MEDIA_TYPES.VIDEO ? (card.thumbnailSrc || '') : '';
++      return {
++        title,
++        description,
++        mediaType,
++        ...(mediaType !== RCS_MEDIA_TYPES.NONE && {
++          media: {
++            mediaUrl,
++            thumbnailUrl,
++            height: selectedCarouselHeight || MEDIUM,
++          },
+         }),
++        ...(!isFullMode && (() => ({ cardVarMapped: buildCardVarMappedForText(title, description) }))()),
++        ...(Array.isArray(card.suggestions) && card.suggestions.length > 0 && { suggestions: card.suggestions }),
+       };
++    });
++  };
++
++  const buildRcsContent = () => {
++    const isCarouselPayload = templateType === contentType.carousel;
++    const alignment = isMediaTypeImage
++      ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.alignment
++      : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.alignment;
++
++    return {
++      cardType: isCarouselPayload ? "CAROUSEL" : STANDALONE,
++      cardSettings: {
++        ...(isCarouselPayload
++          ? {
++            cardOrientation: VERTICAL,
++            cardWidth: selectedCarouselWidth || SMALL,
++          }
++          : {
++            cardOrientation: isMediaTypeImage
++              ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL
++              : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
++            ...(alignment && { mediaAlignment: alignment }),
++            cardWidth: isFullMode
++              ? SMALL
++              : (isMediaTypeImage
++                ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.heightType || SMALL
++                : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType || SMALL),
++          }),
++      },
++      cardContent: isCarouselPayload ? buildCarouselCardContent() : buildStandaloneCardContent(),
++      // Backend expects this to always be RICHCARD (even for carousel).
++      contentType: RICHCARD,
++      ...(isFullMode && {accountId:accountId, accessToken: accessToken, accountName: accountName, hostName: hostName}),
++    };
++  };
++
++  const createPayload = () => {
++    const base = get(dltEditData, `versions.base`, {});
++    const {
++      template_id: templateId = '',
++      template_name = '',
++      'sms-editor': template = '',
++      header: registeredSenderIds = [],
++    } = base;
+ 
++    return {
+       name: templateName,
+       versions: {
+         base: {
+           content: {
+             RCS: {
++              rcsContent: buildRcsContent(),
++              ...(fallbackMessage && {
++                smsFallBackContent: {
++                  message: fallbackMessage,
++                  ...(isDltEnabled && {
++                    templateConfigs: {
++                      templateId,
++                      templateName: template_name,
++                      template,
++                      registeredSenderIds,
++                    },
++                  }),
+                 },
++              }),
+             },
+           },
+         },
+       },
+       type: RCS,
+     };
+   };
+ 
+-
+-
+   const actionCallback = ({ errorMessage, resp }, isEdit) => {
+     // eslint-disable-next-line no-undef
+     const error = errorMessage?.message || errorMessage;
+@@ -2396,16 +3454,72 @@ const onTitleAddVar = () => {
+       }
+     }
+ 
++    
++    if (templateType === contentType.carousel) {
++      if (!carouselData || carouselData.length < 2) return true;
++      const allValid = (carouselData || []).every((c, i) => isCarouselCardValid(c, i));
++      if (!allValid) return true;
++
++      if (!isFullMode) {
++        const allCarouselVars = new Set();
++        (carouselData || []).forEach((card) => {
++          splitTemplateVarString(card.title || '').filter(elem => rcsVarTestRegex.test(elem)).forEach(v => allCarouselVars.add(v.replace(/^\{\{|\}\}$/g, '')));
++          splitTemplateVarString(card.description || '').filter(elem => rcsVarTestRegex.test(elem)).forEach(v => allCarouselVars.add(v.replace(/^\{\{|\}\}$/g, '')));
++        });
++        const carouselVarArray = Array.from(allCarouselVars);
++        if (carouselVarArray.length > 0) {
++          if (isEmpty(cardVarMapped)) return true;
++          const anyMissing = carouselVarArray.some(name => {
++            const v = cardVarMapped?.[name];
++            if (typeof v !== 'string') return !v;
++            return v.trim() === '';
++          });
++          if (anyMissing) return true;
++        }
++      }
++
++      const hasCarouselErrors = (carouselErrors || []).some(
++        (e) => e && (e.title || e.description)
++      );
++      if (hasCarouselErrors) return true;
++
++      return false;
+     }
+ 
++    if(!isFullMode){
++      const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
++      const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
++      const allVars = Array.from(new Set([ ...titleVars, ...descVars ]));
++
++      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
++        return true;
++      }
++
++      const hasEmptyMapping =
++        cardVarMapped &&
++        Object.keys(cardVarMapped).length > 0 &&
++        Object.entries(cardVarMapped).some(([_, v]) => {
++          if (typeof v !== 'string') return !v; // null/undefined
++          return v.trim() === ''; // empty string
++        });
++
++      if (hasEmptyMapping) {
++        return true;
++      }
++
++      const anyMissing = allVars.some(name => {
++        const v = cardVarMapped?.[name];
++        if (typeof v !== 'string') return !v;
++        return v.trim() === '';
++      });
++      if (anyMissing) {
++        return true;
++      }
+     }
+ 
++      if (isMediaTypeText && templateDesc.trim() === '') {
+       return true;
++
+     }
+     if (isMediaTypeImage && (rcsImageSrc === '' || templateTitle === '' || templateDesc === '' )) {
+       return true;
+@@ -2423,36 +3537,85 @@ const onTitleAddVar = () => {
+         return true;
+       }
+     }
++    if (templateDescError || templateTitleError || fallbackMessageError) {
+       return true;
+     }
+     return false;
+   };
+ 
+   const isEditDisableDone = () => {
++    
+     if (!isHostInfoBip && templateStatus !== RCS_STATUSES.approved) {
+       return true;
+     }
+ 
++    if (!isFullMode) {
++      if (templateName.trim() === '' || templateNameError) {
++        return true;
++      }
+     }
+ 
++    if (templateType === contentType.carousel) {
++      if (!carouselData || carouselData.length < 2) return true;
++      const allValid = (carouselData || []).every((c, i) => isCarouselCardValid(c, i));
++      if (!allValid) return true;
++
++      if (!isFullMode) {
++        const allCarouselVars = new Set();
++        (carouselData || []).forEach((card) => {
++          splitTemplateVarString(card.title || '').filter(elem => rcsVarTestRegex.test(elem)).forEach(v => allCarouselVars.add(v.replace(/^\{\{|\}\}$/g, '')));
++          splitTemplateVarString(card.description || '').filter(elem => rcsVarTestRegex.test(elem)).forEach(v => allCarouselVars.add(v.replace(/^\{\{|\}\}$/g, '')));
++        });
++        const carouselVarArray = Array.from(allCarouselVars);
++        if (carouselVarArray.length > 0) {
++          if (isEmpty(cardVarMapped)) return true;
++          const anyMissing = carouselVarArray.some(name => {
++            const v = cardVarMapped?.[name];
++            if (typeof v !== 'string') return !v;
++            return v.trim() === '';
++          });
++          if (anyMissing) return true;
++        }
++      }
++
++      const hasCarouselErrors = (carouselErrors || []).some(
++        (e) => e && (e.title || e.description)
++      );
++      if (hasCarouselErrors) return true;
++
++      return false;
+     }
+ 
++    if(!isFullMode){
++      const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
++      const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem)).map(v => v.replace(/^\{\{|\}\}$/g, ''));
++      const allVars = Array.from(new Set([ ...titleVars, ...descVars ]));
++
++      if (allVars.length > 0 && isEmpty(cardVarMapped)) {
++        return true;
++      }
++
++      const hasEmptyMapping =
++        cardVarMapped &&
++        Object.keys(cardVarMapped).length > 0 &&
++        Object.entries(cardVarMapped).some(([_, v]) => {
++          if (typeof v !== 'string') return !v; // null/undefined
++          return v.trim() === ''; // empty string
++        });
++
++      if (hasEmptyMapping) {
++        return true;
++      }
++
++      const anyMissing = allVars.some(name => {
++        const v = cardVarMapped?.[name];
++        if (typeof v !== 'string') return !v;
++        return v.trim() === '';
++      });
++      if (anyMissing) {
++        return true;
++      }
++    }
+     if (isMediaTypeText && templateDesc.trim() === '') {
+       return true;
+     }
+@@ -2526,152 +3683,234 @@ const onTitleAddVar = () => {
+     }
+   };
+ 
++  const renderTemplateStatusBar = () => (
++    templateStatus !== '' && (
++      <CapRow className="template-status-container">
++        {renderLabel('templateStatusLabel')}
+ 
+-
++        {!isHostInfoBip && templateStatus && (
++          <CapAlert
++            message={getTemplateStatusMessage()}
++            type={getTemplateStatusType(templateStatus)}
++          />
+         )}
++      </CapRow>
++    )
++  );
+ 
++  const renderTemplateNameSection = () => (
++    isFullMode && (
++      <>
++        <CapHeading type="h4" style={{ marginBottom: '6px' }}>
++          {formatMessage(globalMessages.creativeNameLabel)}
++        </CapHeading>
++        <CapInput
++          id="rcs_template_name_input"
++          data-testid="template_name"
++          onChange={onTemplateNameChange}
++          errorMessage={templateNameError}
++          placeholder={formatMessage(
++            globalMessages.templateNamePlaceholder,
++          )}
++          value={templateName || ''}
++          size="default"
++          disabled={(isEditFlow || !isFullMode)}
++        />
++      </>
++    )
++  );
+ 
++  const renderTemplateTypeSection = () => (
++    <>
++      {renderLabel('templateTypeLabel')}
++      <CapRadioGroup
++        id="select-rcs-template-type"
++        options={TEMPLATE_TYPE_OPTIONS}
++        onChange={onTemplateTypeChange}
++        value={templateType}
++        disabled={(isEditFlow || !isFullMode)}
++      />
++    </>
++  );
+ 
++  const renderMediaSection = () => (
++    (templateType === contentType.rich_card || templateType === contentType.carousel) && (
++      <>
++        {templateType !== contentType.carousel && renderLabel('mediaLabel')}
++        <CapRow className="rcs-container-image">
++          {templateType === contentType.carousel ? renderCarouselSection() : (
+             <>
++              <CapRadioGroup
++                options={mediaRadioOptions || []}
++                value={templateMediaType}
++                onChange={onTemplateMediaTypeChange}
++                disabled={(isEditFlow || !isFullMode)}
++                className="rcs-radio"
++              />
++              {getMediaBasedComponent()}
++            </>
++          )}
++        </CapRow>
++      </>
++    )
++  );
++
++  const renderContentSection = () => (
++    <>
++      {templateType !== contentType.carousel && (
++        <>
++          {renderTextComponent()}
++          <CapDivider className="rcs-content-section-divider" />
++        </>
++      )}
++      {renderFallBackSmsComponent()}
++      <CapRow className="rcs-scroll-div" />
++    </>
++  );
++
++  const renderEditorColumn = () => (
++    <CapColumn span={14}>
++      {renderTemplateStatusBar()}
++      {/* template name */}
++      {renderTemplateNameSection()}
++      {renderTemplateTypeSection()}
++      {/* Show media only for rich_card or carousel */}
++      {renderMediaSection()}
++      {renderContentSection()}
++    </CapColumn>
++  );
++
++  const renderPreviewColumn = () => (
++    <CapColumn span={10} className="rcs-preview-container">
++      {getRcsPreview()}
++    </CapColumn>
++  );
++
++  const renderMainLayout = () => (
++    <CapRow className="cap-rcs-creatives">
++      {renderEditorColumn()}
++      {renderPreviewColumn()}
++    </CapRow>
++  );
++
++  const renderFooter = () => (
++    <CapRow className="rcs-footer">
++      {!isEditFlow && (
++        <>
++          <CapRow className="button-disabled-tooltip-wrapper">
++            <CapButton
++              onClick={onDoneCallback()}
++              disabled={isDisableDone()}
++              className="rcs-done-btn"
++            >
++              <FormattedMessage
++                {...(isHostInfoBip ? messages.doneButtonLabel : messages.sendForApprovalButtonLabel)}
++              />
++            </CapButton>
++          </CapRow>
++          <CapTooltip
++            title={formatMessage(messages.rcsTestPreviewDisabledTooltip)}
++            placement="top"
++          >
++            <CapRow className="button-disabled-tooltip-wrapper">
+               <CapButton
+                 onClick={handleTestAndPreview}
+                 className="rcs-test-preview-btn"
+                 type="secondary"
++                disabled
+               >
+                 <FormattedMessage {...creativesMessages.testAndPreview} />
+               </CapButton>
++            </CapRow>
++          </CapTooltip>
++        </>
++      )}
++      {(!isFullMode || isEditFlow) && (
++        <>
++          <CapRow className="button-disabled-tooltip-wrapper">
++            <CapButton
++              onClick={onEditRcs}
++              disabled={isEditDisableDone()}
++              className="rcs-done-btn"
++            >
++              <FormattedMessage {...messages.doneButtonLabel} />
++            </CapButton>
++          </CapRow>
++        </>
++      )}
++      {isEditFlow && templateStatus === RCS_STATUSES.approved && (
++        <CapButton
++          onClick={handleTestAndPreview}
++          className="rcs-test-preview-btn"
++          type="secondary"
++        >
++          <FormattedMessage {...creativesMessages.testAndPreview} />
++        </CapButton>
++      )}
++    </CapRow>
++  );
++
++  const renderFallbackPreviewSlidebox = () => (
++    fallbackPreviewmode && (
++      <CapSlideBox
++        className="rcs-fallback-preview"
++        show={fallbackPreviewmode}
++        header={(
++          <CapHeading type="h7" className="rcs-fallback-preview__header">
++            {formatMessage(messages.fallbackPreviewtitle)}
++          </CapHeading>
++        )}
++        content={(
++          <>
++            <TemplatePreview 
++              channel={RCS}
++              content={{
++                rcsPreviewContent: {
++                  rcsDesc: tempMsg,
++                },
++              }}
++            />
++            <CapHeading
++              type="h3"
++              className="margin-t-16 rcs-fallback-preview__count"
++            >
++              {formatMessage(messages.totalCharacters, {
++                smsCount: Math.ceil(
++                  tempMsg?.length / FALLBACK_MESSAGE_MAX_LENGTH,
++                ),
++                number: tempMsg.length,
++              })}
++            </CapHeading>
++          </>
++        )}
++        handleClose={() => {
++          setFallbackPreviewmode(false);
++          setDltPreviewData('');
++        }}
++      />
++    )
++  );
++
++  const getMainContent = () => {
++    if (showDltContainer && !fallbackPreviewmode) {
++      const dltSlideBoxContent = showDltContainer && getDltSlideBoxContent();
++      const { dltHeader = '', dltContent = '' } = dltSlideBoxContent;
++      return (
++        <CapSlideBox
++          show={showDltContainer}
++          header={dltHeader}
++          content={dltContent}
++          handleClose={closeDltContainerHandler}
++          size="size-xl"
++        />
++      );
++    }
++
++    return (
++      <>
++        {renderMainLayout()}
++        {renderFooter()}
++        {renderFallbackPreviewSlidebox()}
+       </>
+     );
+   };
+@@ -2680,44 +3919,12 @@ const onTitleAddVar = () => {
+       <CapSpin spinning={loadingTags || spin}>
+         {getMainContent()}
+       </CapSpin>
+-
+-
+       <TestAndPreviewSlidebox
+         show={propsShowTestAndPreviewSlidebox || showTestAndPreviewSlidebox}
+         onClose={handleCloseTestAndPreview}
++        formData={null} // RCS doesn't use formData structure like SMS
++        content={getTemplateContent()}
+         currentChannel={RCS}
+       />
+     </>
+   );