@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.14

package/v2Containers/Rcs/index.js.rej

@@ -1,1336 +0,0 @@
-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}
-       />
-     </>
-   );