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

package/v2Components/CommonTestAndPreview/index.js

@@ -31,7 +31,13 @@ import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
 
-// Import constants
+import * as Api from '../../services/api';
+import {
+  smsTemplateHasMustacheTags,
+  buildSyntheticSmsMustacheTags,
+  normalizeRcsTestCardMedia,
+  mapRcsSuggestionForTestMeta,
+} from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
 // Import constants
@@ -81,12 +87,23 @@ import {
   IMAGE,
   VIDEO,
   URL,
+  PREVIEW_TAB_RCS,
+  PREVIEW_TAB_SMS_FALLBACK,
   CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
   DAYS,
+  RCS_TEST_META_CONTENT_TYPE_RICHCARD,
+  RCS_TEST_META_CARD_TYPE_STANDALONE,
+  RCS_TEST_META_CARD_ORIENTATION_VERTICAL,
+  RCS_TEST_META_CARD_WIDTH_SMALL,
 } from './constants';
-
-// Import utilities
 import { getCdnUrl } from '../../utils/cdnTransformation';
+import {
+  normalizePreviewApiPayload,
+  extractPreviewFromLiquidResponse,
+  getSmsFallbackTextForTagExtraction,
+} from './previewApiUtils';
+import { pickFirstSmsFallbackTemplateString } from '../../v2Containers/Rcs/rcsLibraryHydrationUtils';
+
 import { isValidEmail, isValidMobile, formatPhoneNumber } from '../../utils/commonUtils';
 import { getMembersLookup } from '../../services/api';
 
@@ -109,6 +126,32 @@ const filterUsableGsmSendersForDomain = (domain, gsmSenders, { skipDomainNameEch
   });
 };
 
+/** Preview payload from Redux may be an Immutable Map — normalize for React state. */
+const toPlainPreviewData = (data) => {
+  if (data == null) return null;
+  const plain = typeof data.toJS === 'function' ? data.toJS() : data;
+  return normalizePreviewApiPayload(plain);
+};
+
+/**
+ * Merge existing customValues with tag keys from categorized groups.
+ * Each group is { required, optional } (arrays of tag objects with fullPath).
+ * Preserves existing values; adds '' for any tag key not yet present.
+ * Reusable for RCS+fallback and any flow that needs to ensure customValues has keys for tags.
+ */
+const mergeCustomValuesWithTagKeys = (prev, ...categorizedGroups) => {
+  const next = { ...(prev || {}) };
+  categorizedGroups.forEach((group) => {
+    [...(group.required || []), ...(group.optional || [])].forEach((tag) => {
+      const key = tag?.fullPath;
+      if (key && next[key] === undefined) next[key] = '';
+    });
+  });
+  return next;
+};
+
+/** True when `body` contains `{{name}}` mustache tokens (user-fillable personalization tags).
+ *  DLT `{#name#}` slots are pre-bound template variables and are intentionally excluded. */
 
 /**
  * CapTreeSelect and group resolution use strict equality; API data may mix numeric and string ids.
@@ -134,7 +177,7 @@ const testEntityIdsEqual = (a, b) => {
  */
 const CommonTestAndPreview = (props) => {
   const {
-    intl: { formatMessage },
+    intl: { formatMessage, locale: userLocale = 'en' },
     show,
     onClose,
     channel, // The channel: 'EMAIL', 'SMS', 'RCS', etc.
@@ -170,13 +213,23 @@ const CommonTestAndPreview = (props) => {
     ...additionalProps
   } = props;
 
+  const smsFallbackContent = additionalProps?.smsFallbackContent;
+  const smsFallbackTextForTagExtraction = useMemo(
+    () => getSmsFallbackTextForTagExtraction(smsFallbackContent),
+    [smsFallbackContent],
+  );
   // ============================================
   // STATE MANAGEMENT
   // ============================================
   const [selectedCustomer, setSelectedCustomer] = useState(null);
   const [requiredTags, setRequiredTags] = useState([]);
   const [optionalTags, setOptionalTags] = useState([]);
+  const [smsFallbackExtractedTags, setSmsFallbackExtractedTags] = useState([]);
+  const [smsFallbackRequiredTags, setSmsFallbackRequiredTags] = useState([]);
+  const [smsFallbackOptionalTags, setSmsFallbackOptionalTags] = useState([]);
+  const [isExtractingSmsFallbackTags, setIsExtractingSmsFallbackTags] = useState(false);
   const [customValues, setCustomValues] = useState({});
+  const previewCustomValuesRef = useRef({});
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
 
@@ -187,6 +240,8 @@ const CommonTestAndPreview = (props) => {
   const [customerData, setCustomerData] = useState({ name: '', email: '', mobile: '', customerId: '' });
 
   const [previewDevice, setPreviewDevice] = useState(initialDevice);
+  const [activePreviewTab, setActivePreviewTab] = useState(PREVIEW_TAB_RCS);
+  const [smsFallbackPreviewText, setSmsFallbackPreviewText] = useState(undefined);
   // Track if a preview call has been made (to know when to use previewDataHtml vs raw content)
   const [hasPreviewCallBeenMade, setHasPreviewCallBeenMade] = useState(false);
   const [previewDataHtml, setPreviewDataHtml] = useState(() => {
@@ -219,15 +274,22 @@ const CommonTestAndPreview = (props) => {
     [CHANNELS.WHATSAPP]: {
       domainId: null, senderMobNum: '', sourceAccountIdentifier: '',
     },
+    [CHANNELS.RCS]: {
+      domainId: null,
+      domainGatewayMapId: null,
+      gsmSenderId: '',
+      smsFallbackDomainId: null,
+      cdmaSenderId: '', // gsmSenderId = RCS sender (domainId|senderId), cdmaSenderId = SMS fallback
+    },
   });
 
-  const channelsWithDeliverySettings = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP];
+  const channelsWithDeliverySettings = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP, CHANNELS.RCS];
   const formDataForSendTest = formData ?? (content && typeof content === 'object' && !Array.isArray(content) ? content : formData);
   const smsTemplateConfigs = formDataForSendTest?.templateConfigs || {};
   const smsTraiDltEnabled = !!smsTemplateConfigs?.traiDltEnabled;
   const registeredSenderIds = smsTemplateConfigs?.registeredSenderIds || [];
 
-  // Fetch sender details and WeCRM accounts when Test & Preview opens for SMS/Email/WhatsApp
+  // Fetch sender details and WeCRM accounts when Test & Preview opens (SMS, Email, WhatsApp, RCS — same process)
   useEffect(() => {
     if (!show || !channel) {
       return;
@@ -236,39 +298,99 @@ const CommonTestAndPreview = (props) => {
       if (actions.getSenderDetailsRequested) {
         actions.getSenderDetailsRequested({ channel, orgUnitId: orgUnitId ?? -1 });
       }
+      // SMS domains/senders are needed for RCS delivery UI (fallback row + slidebox) whenever RCS is open — not only when fallback body exists.
+      if (channel === CHANNELS.RCS && actions.getSenderDetailsRequested) {
+        actions.getSenderDetailsRequested({ channel: CHANNELS.SMS, orgUnitId: orgUnitId ?? -1 });
+      }
       if (channel === CHANNELS.WHATSAPP && actions.getWeCrmAccountsRequested) {
         actions.getWeCrmAccountsRequested({ sourceName: CHANNELS.WHATSAPP });
       }
     }
   }, [show, channel, orgUnitId, actions]);
 
-  useEffect(() => {
-    if (!show) {
-      setCustomerModal([false, '']);
-      setSearchValue('');
-      setCustomerData({ name: '', email: '', mobile: '', customerId: '' });
-    }
-  }, [show]);
-
   const findDefault = (arr) => (arr && arr.find((x) => x.default)) || (arr && arr[0]) || {};
 
   // Auto-set default delivery setting when sender details load (campaigns-style: first domain + default/first sender)
   useEffect(() => {
     if (!channel || !channelsWithDeliverySettings.includes(channel)) return;
+
+    if (channel === CHANNELS.RCS) {
+      const rcsDomainRows = senderDetailsByChannel?.[CHANNELS.RCS] || [];
+      const smsFallbackDomainRows = senderDetailsByChannel?.[CHANNELS.SMS] || [];
+      if (!rcsDomainRows.length) return;
+
+      const currentRcsDeliverySettings = testPreviewDeliverySettings?.[CHANNELS.RCS] || {};
+      const isRcsGsmSenderUnset = !currentRcsDeliverySettings?.gsmSenderId;
+      const isSmsFallbackSenderUnset = !currentRcsDeliverySettings?.cdmaSenderId;
+      const isRcsDeliveryFullyUnset = isRcsGsmSenderUnset && isSmsFallbackSenderUnset;
+      const shouldOnlyFillSmsFallbackSender =
+        !isRcsGsmSenderUnset && isSmsFallbackSenderUnset && smsFallbackDomainRows.length > 0;
+
+      if (!isRcsDeliveryFullyUnset && !shouldOnlyFillSmsFallbackSender) return;
+
+      const firstRcsDomain = rcsDomainRows[0];
+      const firstSmsFallbackDomain = smsFallbackDomainRows[0];
+      const usableRcsGsmSenders = filterUsableGsmSendersForDomain(
+        firstRcsDomain,
+        firstRcsDomain?.gsmSenders,
+        { skipDomainNameEchoFilter: true },
+      );
+      const usableSmsFallbackGsmSenders = firstSmsFallbackDomain
+        ? filterUsableGsmSendersForDomain(firstSmsFallbackDomain, firstSmsFallbackDomain?.gsmSenders)
+        : [];
+      const defaultRcsGsmSender = usableRcsGsmSenders[0];
+      const defaultSmsFallbackGsmSender = usableSmsFallbackGsmSenders[0];
+      const rcsSenderCompositeValue =
+        firstRcsDomain?.domainId != null && defaultRcsGsmSender?.value != null
+          ? `${firstRcsDomain.domainId}|${defaultRcsGsmSender.value}`
+          : (defaultRcsGsmSender?.value || '');
+      const smsFallbackSenderCompositeValue =
+        firstSmsFallbackDomain?.domainId != null && defaultSmsFallbackGsmSender?.value != null
+          ? `${firstSmsFallbackDomain.domainId}|${defaultSmsFallbackGsmSender.value}`
+          : (defaultSmsFallbackGsmSender?.value || '');
+
+      setTestPreviewDeliverySettings((prev) => {
+        const previousRcsSettings = prev?.[CHANNELS.RCS] || {};
+        if (shouldOnlyFillSmsFallbackSender) {
+          if (!smsFallbackSenderCompositeValue) return prev;
+          return {
+            ...prev,
+            [CHANNELS.RCS]: {
+              ...previousRcsSettings,
+              smsFallbackDomainId: firstSmsFallbackDomain?.domainId ?? null,
+              cdmaSenderId: smsFallbackSenderCompositeValue,
+            },
+          };
+        }
+        return {
+          ...prev,
+          [CHANNELS.RCS]: {
+            domainId: firstRcsDomain?.domainId ?? null,
+            domainGatewayMapId: firstRcsDomain?.dgmId ?? null,
+            gsmSenderId: rcsSenderCompositeValue,
+            smsFallbackDomainId: firstSmsFallbackDomain?.domainId ?? null,
+            cdmaSenderId: smsFallbackSenderCompositeValue,
+          },
+        };
+      });
+      return;
+    }
+
     const domains = senderDetailsByChannel[channel];
     if (!domains || domains.length === 0) return;
     const {
-      domainId = '', gsmSenderId = '', senderEmail = '', senderMobNum = '',
+      domainId = '', gsmSenderId = '', cdmaSenderId = '', senderEmail = '', senderMobNum = '',
     } = testPreviewDeliverySettings[channel] || {};
-    const isEmptySelection = !domainId && !gsmSenderId && !senderEmail && !senderMobNum;
+    const isEmptySelection = !domainId && !gsmSenderId && !cdmaSenderId && !senderEmail && !senderMobNum;
     if (!isEmptySelection) return;
 
     const whatsappAccountFromForm = channel === CHANNELS.WHATSAPP ? formData?.accountName : undefined;
     const matchedWhatsappAccount = whatsappAccountFromForm
       ? (wecrmAccounts || []).find((account) => account?.name === whatsappAccountFromForm)
       : null;
-    const smsDomains = channel === CHANNELS.SMS && smsTraiDltEnabled
-      ? domains.filter((domain) => (domain.gsmSenders || []).some((gsm) => registeredSenderIds.includes(gsm.value)))
+    const smsDomains = channel === CHANNELS.SMS && smsTraiDltEnabled && registeredSenderIds?.length
+      ? domains.filter((domain) => (domain?.gsmSenders || []).some((gsm) =>
+        registeredSenderIds?.includes(gsm?.value)))
       : domains;
     const [defaultDomain] = domains;
     const [firstSmsDomain] = smsDomains;
@@ -283,8 +405,8 @@ const CommonTestAndPreview = (props) => {
       const next = { ...prev };
       if (channel === CHANNELS.SMS) {
         const smsGsmSenders = smsTraiDltEnabled
-          ? (firstDomain.gsmSenders || []).filter((gsm) => registeredSenderIds.includes(gsm.value))
-          : firstDomain.gsmSenders;
+          ? (firstDomain?.gsmSenders || []).filter((gsm) => registeredSenderIds?.includes(gsm?.value))
+          : firstDomain?.gsmSenders;
         next[channel] = {
           domainId: firstDomain.domainId,
           domainGatewayMapId: firstDomain.dgmId,
@@ -317,10 +439,29 @@ const CommonTestAndPreview = (props) => {
   // MEMOIZED VALUES
   // ============================================
 
+  const allTags = useMemo(
+    () => [...requiredTags, ...optionalTags, ...smsFallbackRequiredTags, ...smsFallbackOptionalTags],
+    [requiredTags, optionalTags, smsFallbackRequiredTags, smsFallbackOptionalTags]
+  );
+
+  const allRequiredTags = useMemo(
+    () => [...requiredTags, ...smsFallbackRequiredTags],
+    [requiredTags, smsFallbackRequiredTags]
+  );
+
+  const buildEmptyValues = useCallback(
+    () => allTags.reduce((acc, tag) => {
+      const key = tag?.fullPath;
+      if (key) acc[key] = '';
+      return acc;
+    }, {}),
+    [allTags]
+  );
+
   // Check if update preview button should be disabled
   const isUpdatePreviewDisabled = useMemo(() => (
-    requiredTags.some((tag) => !customValues[tag.fullPath])
-  ), [requiredTags, customValues]);
+    allRequiredTags.some((tag) => !customValues[tag.fullPath])
+  ), [allRequiredTags, customValues]);
 
   // Get current content based on channel and editor type
   const getCurrentContent = useMemo(() => {
@@ -364,6 +505,13 @@ const CommonTestAndPreview = (props) => {
           return currentTabData.base['sms-editor'];
         }
       }
+      // DLT / Test & Preview shape: { templateConfigs: { template, templateId, ... } }
+      if (formData.templateConfigs?.template) {
+        const smsDltTemplateValue = formData.templateConfigs.template;
+        if (typeof smsDltTemplateValue === 'string') return smsDltTemplateValue;
+        if (Array.isArray(smsDltTemplateValue)) return smsDltTemplateValue.join('');
+        return '';
+      }
     }
 
     // SMS channel fallback - if formData is not available, use content directly
@@ -416,7 +564,70 @@ const CommonTestAndPreview = (props) => {
     return content || '';
   }, [channel, formData, currentTab, beeContent, content, beeInstance]);
 
-  // Build test entities tree data
+  const leftPanelExtractedTags = useMemo(() => {
+    if (channel === CHANNELS.SMS) {
+      const smsEditorBody = typeof getCurrentContent === 'string' ? getCurrentContent : '';
+      if (!smsTemplateHasMustacheTags(smsEditorBody)) return [];
+      const extractTagsFromApi = extractedTags ?? [];
+      if (extractTagsFromApi.length > 0) return extractTagsFromApi;
+      return buildSyntheticSmsMustacheTags(smsEditorBody);
+    }
+    const hasFallbackSmsBody = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+    if (channel === CHANNELS.RCS && hasFallbackSmsBody) {
+      const rcsPrimaryTags = extractedTags ?? [];
+      const fallbackSmsTextForTags = smsFallbackTextForTagExtraction ?? '';
+      const fallbackSmsTagRows = smsTemplateHasMustacheTags(fallbackSmsTextForTags)
+        ? (smsFallbackExtractedTags?.length > 0
+          ? smsFallbackExtractedTags
+          : buildSyntheticSmsMustacheTags(fallbackSmsTextForTags))
+        : [];
+      const mergedRcsAndFallbackTags = [...rcsPrimaryTags, ...fallbackSmsTagRows];
+      if (mergedRcsAndFallbackTags.length > 0) return mergedRcsAndFallbackTags;
+      return buildSyntheticSmsMustacheTags(fallbackSmsTextForTags);
+    }
+    return extractedTags ?? [];
+  }, [
+    channel,
+    extractedTags,
+    getCurrentContent,
+    smsFallbackContent,
+    smsFallbackExtractedTags,
+    smsFallbackTextForTagExtraction,
+  ]);
+
+  const isRcsSmsFallbackPreviewEnabled =
+    channel === CHANNELS.RCS
+    && !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+  // Only treat as SMS when user is on the Fallback SMS tab — not whenever fallback exists (RCS tab needs RCS preview API).
+  const isSmsFallbackTabActive = isRcsSmsFallbackPreviewEnabled && activePreviewTab === PREVIEW_TAB_SMS_FALLBACK;
+  const activeChannelForActions = isSmsFallbackTabActive ? CHANNELS.SMS : channel;
+  // VarSegment slot values live in rcsSmsFallbackVarMapped; raw templateContent alone is stale for /preview Body.
+  const resolvedSmsFallbackBodyForPreviewTab =
+    smsFallbackTextForTagExtraction
+    || smsFallbackContent?.templateContent
+    || smsFallbackContent?.content
+    || '';
+  const activeContentForActions = isSmsFallbackTabActive
+    ? resolvedSmsFallbackBodyForPreviewTab
+    : getCurrentContent;
+
+  /**
+   * SMS fallback pane must show /preview API result when user updated preview on that tab (plain text).
+   * Skip when resolvedBody is RCS-shaped (e.g. user last previewed on RCS tab).
+   */
+  // smsFallbackPreviewText is the single source of truth for the resolved SMS fallback preview.
+  // It is set only by syncSmsFallbackPreview (called from handleUpdatePreview and the
+  // prefilled-values effect) and reset to undefined on discard / slidebox close.
+  // Using previewDataHtml as a fallback is unsafe because that state is shared with the primary
+  // RCS preview and can contain stale SMS or RCS content.
+  const smsFallbackResolvedText = useMemo(() => {
+    const hasFallbackBody = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+    if (channel !== CHANNELS.RCS || !hasFallbackBody) return undefined;
+    if (smsFallbackPreviewText != null) return smsFallbackPreviewText;
+    return undefined;
+  }, [channel, smsFallbackContent, smsFallbackPreviewText]);
+
+  // Build test entities tree data from testCustomers prop
   // Build test entities tree data from testCustomers prop (includes customers added via addTestCustomer action)
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
@@ -425,7 +636,7 @@ const CommonTestAndPreview = (props) => {
       selectable: false,
       children: testGroups?.map((group) => ({
         title: group?.groupName,
-        value: 'group:' + normalizeTestEntityId(group?.groupId),
+        value: normalizeTestEntityId(group?.groupId),
       })),
     };
 
@@ -435,7 +646,7 @@ const CommonTestAndPreview = (props) => {
       selectable: false,
       children: testCustomers?.map((customer) => ({
         title: customer?.name?.trim() || customer?.email?.trim() || customer?.mobile?.trim() || customer?.userId || customer?.customerId,
-        value: 'customer:' + normalizeTestEntityId(customer?.userId ?? customer?.customerId),
+        value: normalizeTestEntityId(customer?.userId ?? customer?.customerId),
       })) || [],
     };
 
@@ -515,11 +726,10 @@ const CommonTestAndPreview = (props) => {
               email: customerData?.email || '',
               mobile: customerData?.mobile || '',
             });
-            const prefixedAddedId = 'customer:' + normalizedAddedId;
             setSelectedTestEntities((prev) => (
-              prev.some((id) => id === prefixedAddedId)
+              prev.some((id) => testEntityIdsEqual(id, normalizedAddedId))
                 ? prev
-                : [...prev, prefixedAddedId]
+                : [...prev, normalizedAddedId]
             ));
           }
           handleCloseCustomerModal();
@@ -583,13 +793,33 @@ const CommonTestAndPreview = (props) => {
           whatsappContent: formDataObj?.whatsappContent,
         };
 
-      case CHANNELS.RCS:
+      case CHANNELS.RCS: {
+        // For carousel, replace {{N}} tokens in carouselData with resolved semantic vars from
+        // formData.cardContent so the preview API can resolve {{member.firstName}} etc.
+        const formDataCardContent =
+          formDataObj?.versions?.base?.content?.RCS?.rcsContent?.cardContent
+          ?? formDataObj?.content?.RCS?.rcsContent?.cardContent;
+        let parsedRcs = {};
+        try { parsedRcs = JSON.parse(contentStr); } catch (e) { parsedRcs = typeof contentStr === 'object' ? contentStr : {}; }
+        if (Array.isArray(parsedRcs.carouselData) && Array.isArray(formDataCardContent) && formDataCardContent.length > 0) {
+          const resolvedCarouselData = parsedRcs.carouselData.map((card, idx) => {
+            const formCard = formDataCardContent[idx] || {};
+            return {
+              ...card,
+              title: formCard.title || card.title,
+              bodyText: formCard.description || card.bodyText,
+            };
+          });
+          return {
+            ...basePayload,
+            messageBody: JSON.stringify({ ...parsedRcs, carouselData: resolvedCarouselData }),
+          };
+        }
         return {
           ...basePayload,
           messageBody: contentStr,
-        //   messageTitle: resolveTagsInText(formDataObj?.rcsTitle || '', customValuesObj),
-        //   rcsDesc: formDataObj?.rcsDesc,
         };
+      }
 
       case CHANNELS.INAPP:
         return {
@@ -629,6 +859,37 @@ const CommonTestAndPreview = (props) => {
     }
   };
 
+  /**
+   * When RCS has SMS fallback, refresh fallback preview text via the same Liquid /preview API
+   * (separate call with SMS channel + fallback template body). Used after primary preview updates.
+   */
+  const syncSmsFallbackPreview = async (customValuesForResolve, selectedCustomerObj) => {
+    const fallbackBodyForLiquidPreview =
+      getSmsFallbackTextForTagExtraction(smsFallbackContent)
+      || smsFallbackContent?.templateContent
+      || smsFallbackContent?.content
+      || '';
+    if (channel !== CHANNELS.RCS || !String(fallbackBodyForLiquidPreview).trim()) return;
+    try {
+      const smsFallbackPayload = preparePreviewPayload(
+        CHANNELS.SMS,
+        formData || {},
+        fallbackBodyForLiquidPreview,
+        customValuesForResolve,
+        selectedCustomerObj
+      );
+      const fallbackResponse = await Api.updateEmailPreview(smsFallbackPayload);
+      const fallbackPreview = extractPreviewFromLiquidResponse(fallbackResponse);
+      setSmsFallbackPreviewText(
+        typeof fallbackPreview?.resolvedBody === 'string'
+          ? fallbackPreview.resolvedBody
+          : undefined
+      );
+    } catch (e) {
+      /* keep existing smsFallbackPreviewText on failure */
+    }
+  };
+
   /**
    * Prepare payload for tag extraction based on channel
    */
@@ -652,11 +913,32 @@ const CommonTestAndPreview = (props) => {
           templateContent: contentStr,
         };
 
-      case CHANNELS.RCS:
+      case CHANNELS.RCS: {
+        // Carousel templates don't have rcsTitle/rcsDesc — their content lives in cardContent[].
+        // Use the resolved card strings from formDataObj (resolved by resolveTemplateWithMap in
+        // testPreviewFormData) so the extraction API receives actual Capillary tag expressions
+        // instead of numeric {{1}}/{{2}} placeholders.
+        const rcsCardContentArr =
+          formDataObj?.versions?.base?.content?.RCS?.rcsContent?.cardContent
+          ?? formDataObj?.content?.RCS?.rcsContent?.cardContent;
+        if (Array.isArray(rcsCardContentArr) && rcsCardContentArr.length > 0) {
+          const carouselTagText = rcsCardContentArr
+            .map((c) => `${c.title || ''} ${c.description || ''}`)
+            .join(' ')
+            .trim();
+          if (carouselTagText) {
+            return {
+              templateSubject: formDataObj?.rcsTitle || '',
+              templateContent: carouselTagText,
+            };
+          }
+        }
+        // Standalone (non-carousel) card: use rcsTitle/rcsDesc directly.
         return {
           templateSubject: formDataObj?.rcsTitle || '',
           templateContent: formDataObj?.rcsDesc || contentStr,
         };
+      }
 
       case CHANNELS.INAPP:
         return {
@@ -729,7 +1011,7 @@ const CommonTestAndPreview = (props) => {
     } = carousel || {};
     const buttonData = buttons.map((button, index) => {
       const {
-        type, text, phone_number, urlType, url,
+        type, text, phone_number: phoneNumber, urlType, url,
       } = button || {};
       const buttonObj = {
         type,
@@ -737,7 +1019,7 @@ const CommonTestAndPreview = (props) => {
         index,
       };
       if (type === PHONE_NUMBER) {
-        buttonObj.phoneNumber = phone_number;
+        buttonObj.phoneNumber = phoneNumber;
       }
       if (type === URL) {
         buttonObj.url = url;
@@ -766,7 +1048,159 @@ const CommonTestAndPreview = (props) => {
     };
   });
 
-  const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj, deliverySettingsOverride) => {
+  /**
+   * Build createMessageMeta payload for RCS (test message).
+   * rcsMessageContent: { channel, accountId?, rcsRichCardContent: { contentType, cardType, cardSettings, cardContent }, smsFallBackContent? }
+   * Then rcsDeliverySettings, executionParams, clientName last.
+   */
+  const buildRcsTestMessagePayload = (
+    creativeFormData,
+    _unusedEditorContentString,
+    _customValuesObj,
+    deliverySettingsOverride,
+    basePayload,
+    _rcsTestMetaExtras = {},
+  ) => {
+    const rcsSectionFromForm =
+      creativeFormData?.versions?.base?.content?.RCS ?? creativeFormData?.content?.RCS ?? {};
+    const rcsContentFromForm = rcsSectionFromForm?.rcsContent || {};
+    const smsFallbackFromCreativeForm = rcsSectionFromForm?.smsFallBackContent || {};
+    let rcsCardPayloadList = [];
+    if (Array.isArray(rcsContentFromForm?.cardContent)) {
+      rcsCardPayloadList = rcsContentFromForm.cardContent;
+    } else if (rcsContentFromForm?.cardContent) {
+      rcsCardPayloadList = [rcsContentFromForm.cardContent];
+    }
+    // Raw title/description with template tags; SMS fallback uses tagged template fields (pickFirst…).
+    const cardContentForTestMetaApi = rcsCardPayloadList.map((singleRcsCardPayload) => {
+      const normalizedCardMediaForTestApi = singleRcsCardPayload?.media
+        ? normalizeRcsTestCardMedia(singleRcsCardPayload.media)
+        : undefined;
+      const suggestionsFromCard = Array.isArray(singleRcsCardPayload?.suggestions)
+        ? singleRcsCardPayload.suggestions
+        : [];
+      const suggestionsFormattedForTestMeta = suggestionsFromCard.map((suggestionItem, index) =>
+        mapRcsSuggestionForTestMeta(suggestionItem, index));
+      return {
+        title: singleRcsCardPayload?.title ?? '',
+        description: singleRcsCardPayload?.description ?? '',
+        mediaType: singleRcsCardPayload?.mediaType ?? MEDIA_TYPE_TEXT,
+        ...(normalizedCardMediaForTestApi && { media: normalizedCardMediaForTestApi }),
+        ...(suggestionsFormattedForTestMeta.length > 0 && {
+          suggestions: suggestionsFormattedForTestMeta,
+        }),
+      };
+    });
+    // Use the component-level smsFallbackContent prop (has rcsSmsFallbackVarMapped) so DLT
+    // {#var#} slots are converted to {{tagName}} mustache tags before sending to createMessageMeta.
+    const smsFallbackTaggedTemplateBody =
+      getSmsFallbackTextForTagExtraction(smsFallbackContent)
+      || pickFirstSmsFallbackTemplateString(smsFallbackFromCreativeForm)
+      || '';
+    const smsSenderFromDelivery = deliverySettingsOverride?.cdmaSenderId?.includes('|')
+      ? deliverySettingsOverride.cdmaSenderId.split('|')[1]
+      : deliverySettingsOverride?.cdmaSenderId;
+    const deliveryFallbackSmsId =
+      typeof smsSenderFromDelivery === 'string' ? smsSenderFromDelivery.trim() : '';
+    const creativeFallbackSmsId =
+      smsFallbackFromCreativeForm?.senderId != null
+        ? String(smsFallbackFromCreativeForm.senderId).trim()
+        : '';
+    const fallbackSmsSenderIdForChannel = deliveryFallbackSmsId || creativeFallbackSmsId || '';
+
+    // For DLT orgs: include templateConfigs inside smsFallBackContent so createMessageMeta
+    // receives the DLT template ID, registered sender IDs, and body alongside the message.
+    // Priority: smsFallBackContent.templateConfigs from the RCS payload (clean API shape,
+    // built by createPayload) → fallback to root-level formData.templateConfigs (strip the
+    // UI-only traiDltEnabled flag before sending to the API).
+    const smsFallbackTemplateConfigsForApi = (() => {
+      if (
+        smsFallbackFromCreativeForm?.templateConfigs
+        && typeof smsFallbackFromCreativeForm.templateConfigs === 'object'
+      ) {
+        return smsFallbackFromCreativeForm.templateConfigs;
+      }
+      const rootTc = creativeFormData?.templateConfigs;
+      if (rootTc && typeof rootTc === 'object') {
+        // eslint-disable-next-line no-unused-vars
+        const { traiDltEnabled: _uiFlag, ...tcForApi } = rootTc;
+        return Object.keys(tcForApi).length > 0 ? tcForApi : null;
+      }
+      return null;
+    })();
+
+    const smsFallBackContent =
+      smsFallbackTaggedTemplateBody.trim() !== ''
+        ? {
+            message: smsFallbackTaggedTemplateBody,
+            ...(smsFallbackTemplateConfigsForApi && {
+              templateConfigs: smsFallbackTemplateConfigsForApi,
+            }),
+          }
+        : undefined;
+
+    // accountId: WeCRM account id (not sourceAccountIdentifier) for createMessageMeta
+    const accountIdForMeta =
+      rcsContentFromForm?.accountId != null && String(rcsContentFromForm.accountId).trim() !== ''
+        ? String(rcsContentFromForm.accountId)
+        : undefined;
+
+    const rcsRichCardContent = {
+      contentType: RCS_TEST_META_CONTENT_TYPE_RICHCARD,
+      cardType: rcsContentFromForm?.cardType ?? RCS_TEST_META_CARD_TYPE_STANDALONE,
+      cardSettings: rcsContentFromForm?.cardSettings ?? {
+        cardOrientation: RCS_TEST_META_CARD_ORIENTATION_VERTICAL,
+        cardWidth: RCS_TEST_META_CARD_WIDTH_SMALL,
+      },
+      ...(cardContentForTestMetaApi.length > 0 && { cardContent: cardContentForTestMetaApi }),
+    };
+
+    const rcsMessageContent = {
+      channel: CHANNELS.RCS,
+      ...(accountIdForMeta && { accountId: accountIdForMeta }),
+      rcsRichCardContent,
+      ...(smsFallBackContent && { smsFallBackContent }),
+    };
+    const rcsComposite = deliverySettingsOverride?.gsmSenderId ?? '';
+    const [rcsDomainId, rcsSenderId] = rcsComposite.includes('|') ? rcsComposite.split('|') : ['', rcsComposite];
+    const rcsDeliverySettings = {
+      channelSettings: {
+        channel: CHANNELS.RCS,
+        rcsSender: (rcsSenderId || deliverySettingsOverride?.rcsSender) ?? '',
+        domainId:
+          rcsDomainId !== '' && rcsDomainId !== undefined && !Number.isNaN(Number(rcsDomainId))
+            ? Number(rcsDomainId)
+            : (deliverySettingsOverride?.domainId ?? 0),
+        fallbackSmsSenderId: fallbackSmsSenderIdForChannel,
+      },
+      additionalSettings: {
+        useTinyUrl: false,
+        encryptUrl: false,
+        linkTrackingEnabled: false,
+        bypassControlUser: false,
+        userSubscriptionDisabled: false,
+      },
+    };
+    const { clientName: baseClientName = CLIENT_NAME_CREATIVES, ...restBase } = basePayload;
+    return {
+      ...restBase,
+      rcsMessageContent,
+      rcsDeliverySettings,
+      executionParams: {},
+      clientName: baseClientName,
+    };
+  };
+
+  const prepareTestMessagePayload = (
+    channelType,
+    formDataObj,
+    contentStr,
+    customValuesObj,
+    recipientDetails,
+    previewDataObj,
+    deliverySettingsOverride,
+    rcsExtra = {},
+  ) => {
     // Base payload structure common to all channels
     const basePayload = {
       ouId: -1,
@@ -847,12 +1281,12 @@ const CommonTestAndPreview = (props) => {
           },
           smsDeliverySettings: {
             channelSettings: {
+              channel: CHANNELS.SMS,
               gsmSenderId: deliverySettingsOverride?.gsmSenderId ?? '',
               domainId: deliverySettingsOverride?.domainId ?? null,
               domainGatewayMapId: deliverySettingsOverride?.domainGatewayMapId ?? '',
               targetNdnc: false,
               cdmaSenderId: deliverySettingsOverride?.cdmaSenderId ?? '',
-              channel: CHANNELS.SMS,
             },
             additionalSettings: {
               useTinyUrl: false,
@@ -996,7 +1430,7 @@ const CommonTestAndPreview = (props) => {
         return {
           ...basePayload,
           whatsappMessageContent: {
-            messageBody: templateEditorValue || '',
+            messageBody: resolvedMessageBody || templateEditorValue || '',
             accountId: formDataObj?.accountId || '',
             sourceAccountIdentifier: sourceAccountIdentifier || formDataObj?.sourceAccountIdentifier || '',
             accountName: formDataObj?.accountName || '',
@@ -1021,16 +1455,7 @@ const CommonTestAndPreview = (props) => {
       }
 
       case CHANNELS.RCS:
-        return {
-          ...basePayload,
-          rcsMessageContent: {
-            channel: CHANNELS.RCS,
-            messageBody: contentStr,
-            rcsType: additionalProps?.rcsType,
-            rcsImageSrc: formDataObj?.rcsImageSrc,
-            rcsSuggestions: formDataObj?.rcsSuggestions,
-          },
-        };
+        return buildRcsTestMessagePayload(formDataObj, contentStr, customValuesObj, deliverySettingsOverride, basePayload, rcsExtra);
 
       case CHANNELS.INAPP: {
         // InApp payload structure similar to MobilePush
@@ -1869,6 +2294,46 @@ const CommonTestAndPreview = (props) => {
    *
    * IMPORTANT: Use raw content/formData initially, only use previewDataHtml if preview call was made
    */
+  // Memoized RCS carousel content: only recomputes when the API response or raw template changes,
+  // NOT on every customValues keystroke. Uses previewCustomValuesRef captured at Update Preview time.
+  const rcsCarouselContentObj = useMemo(() => {
+    if (channel !== CHANNELS.RCS) return null;
+    let resolvedContent = null;
+    if (hasPreviewCallBeenMade && previewDataHtml?.resolvedBody) {
+      resolvedContent = previewDataHtml.resolvedBody;
+      if (typeof resolvedContent === 'string') {
+        try { resolvedContent = JSON.parse(resolvedContent); } catch (e) { resolvedContent = null; }
+      }
+    }
+    if (resolvedContent && typeof resolvedContent === 'object') return resolvedContent;
+
+    let rawRcs = content;
+    if (typeof rawRcs === 'string') {
+      try { rawRcs = JSON.parse(rawRcs); } catch (e) { rawRcs = content; }
+    }
+    const snapCustomValues = previewCustomValuesRef.current;
+    const hasEnteredValues = snapCustomValues && Object.keys(snapCustomValues).some((k) => snapCustomValues[k]);
+    if (hasPreviewCallBeenMade && hasEnteredValues && Array.isArray(rawRcs?.carouselData)) {
+      const formDataCardContent =
+        formData?.versions?.base?.content?.RCS?.rcsContent?.cardContent
+        ?? formData?.content?.RCS?.rcsContent?.cardContent
+        ?? [];
+      return {
+        ...rawRcs,
+        carouselData: rawRcs.carouselData.map((card, idx) => {
+          const formCard = formDataCardContent[idx] || {};
+          return {
+            ...card,
+            title: resolveTagsInText(formCard.title || card.title || '', snapCustomValues),
+            bodyText: resolveTagsInText(formCard.description || card.bodyText || '', snapCustomValues),
+          };
+        }),
+      };
+    }
+    return rawRcs || {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData]);
+
   const prepareUnifiedPreviewProps = () => {
     // Prepare content based on channel
     let contentObj = {};
@@ -1930,42 +2395,14 @@ const CommonTestAndPreview = (props) => {
         contentObj = parsedContent || {};
       }
     } else if (channel === CHANNELS.RCS) {
-      // For RCS, content is an object with rcsTitle, rcsDesc, rcsImageSrc, suggestions, etc.
-      // Content comes from RCS component state, passed via content prop
-      let resolvedContent = null;
-
-      // Only use previewDataHtml if preview call was made
-      if (hasPreviewCallBeenMade && previewDataHtml?.resolvedBody) {
-        resolvedContent = previewDataHtml.resolvedBody;
-
-        // Handle case where resolvedBody might be a JSON string
-        if (typeof resolvedContent === 'string') {
-          try {
-            resolvedContent = JSON.parse(resolvedContent);
-          } catch (e) {
-            // If parsing fails, treat as null so we fall back to content
-            resolvedContent = null;
-          }
-        }
-      }
-
-      // Parse content if it's a string
+      // rcsCarouselContentObj is a useMemo that handles both the API-response path and the
+      // client-side fallback. It is stable across keystrokes (only recomputes when
+      // hasPreviewCallBeenMade / previewDataHtml / content / formData change).
       let parsedRcsContent = content;
       if (typeof content === 'string') {
-        try {
-          parsedRcsContent = JSON.parse(content);
-        } catch (e) {
-          parsedRcsContent = content;
-        }
-      }
-
-      // Use resolvedContent if available (from preview call), otherwise use raw content
-      if (resolvedContent && typeof resolvedContent === 'object') {
-        contentObj = { ...resolvedContent };
-      } else {
-        // Use raw content if no preview call was made or resolvedContent is not available
-        contentObj = parsedRcsContent || {};
+        try { parsedRcsContent = JSON.parse(content); } catch (e) { parsedRcsContent = content; }
       }
+      contentObj = rcsCarouselContentObj || parsedRcsContent || {};
     } else if (channel === CHANNELS.INAPP) {
       // For InApp, content is an object with androidContent and iosContent (similar to MobilePush)
       // Content comes from InApp component state, passed via content prop
@@ -2168,6 +2605,10 @@ const CommonTestAndPreview = (props) => {
       formatMessage,
       lastModified: formData?.lastModified,
       updatedByName: formData?.updatedByName,
+      smsFallbackContent: isRcsSmsFallbackPreviewEnabled ? smsFallbackContent : null,
+      smsFallbackResolvedText,
+      activePreviewTab,
+      onPreviewTabChange: setActivePreviewTab,
     };
   };
 
@@ -2207,7 +2648,12 @@ const CommonTestAndPreview = (props) => {
   }, [show, beeInstance, currentTab, channel]);
 
   /**
-   * Initial data load when slidebox opens
+   * Initial data load when slidebox opens.
+   * EXTRACT TAGS CALL SITES (on open/edit RCS):
+   * 1. Here (non-email): actions.extractTagsRequested() at line ~2161 when show is true.
+   * 2. RCS SMS fallback useEffect below: Api.extractTagsWithMetaData() for fallback message.
+   * 3. handleExtractTags() (user clicks "Enter custom values for tags") – not from effects.
+   * The "Process extracted tags" effect only processes API results and must not call extract again.
    */
   useEffect(() => {
     if (show) {
@@ -2292,7 +2738,61 @@ const CommonTestAndPreview = (props) => {
         actions.getTestGroupsRequested();
       }
     }
-  }, [show, beeInstance, currentTab, channel]);
+    // getCurrentContent: RCS applies cardVarMapped → placeholder resolution; re-extract when it changes.
+  }, [show, beeInstance, currentTab, channel, getCurrentContent]);
+
+  /**
+   * RCS with SMS fallback: extract tags for fallback SMS content as well
+   * (so we can show a separate "Fallback SMS tags" section in left panel).
+   */
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!show || channel !== CHANNELS.RCS) {
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    if (!smsFallbackContent?.templateContent && !smsFallbackContent?.content) {
+      setSmsFallbackExtractedTags([]);
+      setSmsFallbackRequiredTags([]);
+      setSmsFallbackOptionalTags([]);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    setIsExtractingSmsFallbackTags(true);
+    (async () => {
+      try {
+        const fallbackBodyForExtractApi = getSmsFallbackTextForTagExtraction(smsFallbackContent);
+        const payload = {
+          messageTitle: '',
+          messageBody: fallbackBodyForExtractApi || '',
+        };
+        const response = await Api.extractTagsWithMetaData(payload); //not using saga action here because we dont store fallbacksms related data in store but only in useState since this is only used in RCS SMS fallback
+        let smsFallbackTagTree = response?.data ?? [];
+        if (!Array.isArray(smsFallbackTagTree)) smsFallbackTagTree = [];
+        if (!smsTemplateHasMustacheTags(fallbackBodyForExtractApi)) {
+          smsFallbackTagTree = [];
+        } else if (smsFallbackTagTree.length === 0) {
+          smsFallbackTagTree = buildSyntheticSmsMustacheTags(fallbackBodyForExtractApi);
+        }
+        if (cancelled) return;
+        setSmsFallbackExtractedTags(smsFallbackTagTree);
+      } catch (e) {
+        if (cancelled) return;
+        setSmsFallbackExtractedTags([]);
+      } finally {
+        if (!cancelled) setIsExtractingSmsFallbackTags(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [show, channel, smsFallbackContent]);
 
   /**
    * Email-specific: Handle content updates for both BEE and CKEditor
@@ -2344,15 +2844,22 @@ const CommonTestAndPreview = (props) => {
       setSelectedCustomer(null);
       setRequiredTags([]);
       setOptionalTags([]);
+      setSmsFallbackExtractedTags([]);
+      setSmsFallbackRequiredTags([]);
+      setSmsFallbackOptionalTags([]);
+      setIsExtractingSmsFallbackTags(false);
       setCustomValues({});
       setShowJSON(false);
       setTagsExtracted(false);
       setPreviewDevice(DESKTOP);
+      setActivePreviewTab(PREVIEW_TAB_RCS);
+      setSmsFallbackPreviewText(undefined);
       setSelectedTestEntities([]);
       actions.clearPrefilledValues();
     } else {
       // Reset device to initialDevice when opening (Android for mobile channels, Desktop for others)
       setPreviewDevice(initialDevice);
+      setActivePreviewTab(PREVIEW_TAB_RCS);
     }
   }, [show, initialDevice]);
 
@@ -2361,79 +2868,10 @@ const CommonTestAndPreview = (props) => {
    */
   useEffect(() => {
     if (previewData) {
-      setPreviewDataHtml(previewData);
+      setPreviewDataHtml(toPlainPreviewData(previewData));
     }
   }, [previewData]);
 
-  /**
-   * Process extracted tags and categorize them
-   */
-  useEffect(() => {
-    // Categorize tags into required and optional
-    const required = [];
-    const optional = [];
-    let hasPersonalizationTags = false;
-
-    if (extractedTags?.length > 0) {
-      const processTag = (tag, parentPath = '') => {
-        const currentPath = parentPath ? `${parentPath}.${tag.name}` : tag.name;
-
-        // Skip unsubscribe tag for input fields
-        if (tag?.name === UNSUBSCRIBE_TAG_NAME) {
-          return;
-        }
-
-        hasPersonalizationTags = true;
-
-        if (tag?.metaData?.userDriven === false) {
-          required.push({
-            ...tag,
-            fullPath: currentPath,
-          });
-        } else if (tag?.metaData?.userDriven === true) {
-          optional.push({
-            ...tag,
-            fullPath: currentPath,
-          });
-        }
-
-        if (tag?.children?.length > 0) {
-          tag.children.forEach((child) => processTag(child, currentPath));
-        }
-      };
-
-      extractedTags.forEach((tag) => processTag(tag));
-
-      if (hasPersonalizationTags) {
-        setRequiredTags(required);
-        setOptionalTags(optional);
-        setTagsExtracted(true); // Mark tags as extracted and processed
-
-        // Initialize custom values for required tags
-        const initialValues = {};
-        required.forEach((tag) => {
-          initialValues[tag?.fullPath] = '';
-        });
-        optional.forEach((tag) => {
-          initialValues[tag?.fullPath] = '';
-        });
-        setCustomValues(initialValues);
-      } else {
-        // Reset all tag-related state if no personalization tags
-        setRequiredTags([]);
-        setOptionalTags([]);
-        setCustomValues({});
-        setTagsExtracted(false);
-      }
-    } else {
-      // Reset all tag-related state if no tags
-      setRequiredTags([]);
-      setOptionalTags([]);
-      setCustomValues({});
-      setTagsExtracted(false);
-    }
-  }, [extractedTags]);
-
   /**
    * Handle customer selection and fetch prefilled values
    */
@@ -2441,17 +2879,15 @@ const CommonTestAndPreview = (props) => {
     if (selectedCustomer && config.enableCustomerSearch !== false) {
       setTagsExtracted(true); // Auto-open custom values editor
 
-      // Get all available tags
-      const allTags = [...requiredTags, ...optionalTags];
       const requiredTagObj = {};
-      requiredTags.forEach((tag) => {
+      allRequiredTags.forEach((tag) => {
         requiredTagObj[tag?.fullPath] = '';
       });
       if (allTags.length > 0) {
         const payload = preparePreviewPayload(
-          channel,
+          activeChannelForActions,
           formData || {},
-          getCurrentContent,
+          activeContentForActions,
           {
             ...requiredTagObj,
           },
@@ -2460,7 +2896,7 @@ const CommonTestAndPreview = (props) => {
         actions.getPrefilledValuesRequested(payload);
       }
     }
-  }, [selectedCustomer]);
+  }, [selectedCustomer, allTags.length, activeChannelForActions, activePreviewTab]);
 
   /**
    * Update custom values with prefilled values from API
@@ -2471,24 +2907,29 @@ const CommonTestAndPreview = (props) => {
     if (prefilledValues && selectedCustomer) {
       // Always replace all values with prefilled values
       const updatedValues = {};
-      [...requiredTags, ...optionalTags].forEach((tag) => {
+      allTags.forEach((tag) => {
         updatedValues[tag?.fullPath] = prefilledValues[tag?.fullPath] || '';
       });
 
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values (this is a valid preview call trigger)
+      // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped.
+      // SMS fallback preview is kept in sync by syncSmsFallbackPreview via smsFallbackPreviewText.
+      const previewChannelForPrefill = channel === CHANNELS.RCS ? CHANNELS.RCS : activeChannelForActions;
+      const previewContentForPrefill = channel === CHANNELS.RCS ? getCurrentContent : activeContentForActions;
       const payload = preparePreviewPayload(
-        channel,
+        previewChannelForPrefill,
         formData || {},
-        getCurrentContent,
+        previewContentForPrefill,
         updatedValues,
         selectedCustomer
       );
       actions.updatePreviewRequested(payload);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
+      void syncSmsFallbackPreview(updatedValues, selectedCustomer);
     }
-  }, [JSON.stringify(prefilledValues), selectedCustomer]);
+  }, [JSON.stringify(prefilledValues), selectedCustomer, activeChannelForActions, activePreviewTab]);
 
   /**
    * Map channel constants to display names (lowercase for message)
@@ -2582,11 +3023,7 @@ const CommonTestAndPreview = (props) => {
     setTagsExtracted(true); // Auto-open custom values editor
 
     // Clear any existing values while waiting for prefilled values
-    const emptyValues = {};
-    [...requiredTags, ...optionalTags].forEach((tag) => {
-      emptyValues[tag?.fullPath] = '';
-    });
-    setCustomValues(emptyValues);
+    setCustomValues(buildEmptyValues());
   };
 
   /**
@@ -2600,11 +3037,7 @@ const CommonTestAndPreview = (props) => {
     actions.clearPreviewErrors();
 
     // Initialize empty values for all tags
-    const emptyValues = {};
-    [...requiredTags, ...optionalTags].forEach((tag) => {
-      emptyValues[tag?.fullPath] = '';
-    });
-    setCustomValues(emptyValues);
+    setCustomValues(buildEmptyValues());
 
     // Don't make preview call when clearing selection - just reset to raw content
     // Preview will be shown using raw formData/content
@@ -2640,17 +3073,20 @@ const CommonTestAndPreview = (props) => {
    */
   const handleDiscardCustomValues = () => {
     // Initialize empty values for all tags
-    const emptyValues = {};
-    [...requiredTags, ...optionalTags].forEach((tag) => {
-      emptyValues[tag?.fullPath] = '';
-    });
+    const emptyValues = buildEmptyValues();
     setCustomValues(emptyValues);
 
+    // Reset SMS fallback preview so it shows raw template (with {{tags}} visible) after discard
+    setSmsFallbackPreviewText(undefined);
+
     // Update preview with empty values (this is a valid preview call trigger)
+    // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped.
+    const previewChannelForDiscard = channel === CHANNELS.RCS ? CHANNELS.RCS : activeChannelForActions;
+    const previewContentForDiscard = channel === CHANNELS.RCS ? getCurrentContent : activeContentForActions;
     const payload = preparePreviewPayload(
-      channel,
+      previewChannelForDiscard,
       formData || {},
-      getCurrentContent,
+      previewContentForDiscard,
       emptyValues,
       selectedCustomer
     );
@@ -2664,14 +3100,24 @@ const CommonTestAndPreview = (props) => {
    */
   const handleUpdatePreview = async () => {
     try {
+      // Capture customValues at click time so the carousel preview only updates here,
+      // not on every subsequent keystroke.
+      previewCustomValuesRef.current = customValues;
+      // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped,
+      // even when the user triggers update from the SMS fallback tab.
+      // SMS fallback preview is kept in sync by syncSmsFallbackPreview via smsFallbackPreviewText.
+      const previewChannel = channel === CHANNELS.RCS ? CHANNELS.RCS : activeChannelForActions;
+      const previewContent = channel === CHANNELS.RCS ? getCurrentContent : activeContentForActions;
       const payload = preparePreviewPayload(
-        channel,
+        previewChannel,
         formData || {},
-        getCurrentContent,
+        previewContent,
         customValues,
         selectedCustomer
       );
       await actions.updatePreviewRequested(payload);
+
+      await syncSmsFallbackPreview(customValues, selectedCustomer);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
     } catch (error) {
       CapNotification.error({
@@ -2681,25 +3127,115 @@ const CommonTestAndPreview = (props) => {
   };
 
   /**
-   * Handle extract tags
+   * Categorize extracted tags into required/optional.
    */
-  const handleExtractTags = () => {
-    // Get content based on channel
-    let contentToExtract = getCurrentContent;
+  const categorizeTags = (tagsTree = []) => {
+    const required = [];
+    const optional = [];
+    let hasPersonalizationTags = false;
+    const processTag = (tag, parentPath = '') => {
+      const currentPath = parentPath ? `${parentPath}.${tag.name}` : tag.name;
+
+      // Skip unsubscribe tag for input fields
+      if (tag?.name === UNSUBSCRIBE_TAG_NAME) return;
+
+      hasPersonalizationTags = true;
+      const userDriven = tag?.metaData?.userDriven;
+      if (userDriven === true) {
+        optional.push({ ...tag, fullPath: currentPath });
+      } else {
+        // false or missing (SMS/DLT extract often omits metaData) → required for test values
+        required.push({ ...tag, fullPath: currentPath });
+      }
+
+      if (tag?.children?.length > 0) {
+        tag.children.forEach((child) => processTag(child, currentPath));
+      }
+    };
+
+    (tagsTree || []).forEach((tag) => processTag(tag));
+    return { required, optional, hasPersonalizationTags };
+  };
 
+  /**
+   * Apply tag extraction when content comes from RCS + SMS fallback (no API call).
+   */
+  const applyRcsSmsFallbackTagExtraction = () => {
+    const rcsPrimaryCategorized = categorizeTags(extractedTags ?? []);
+    const fallbackSmsResolvedForTags = smsFallbackTextForTagExtraction ?? '';
+    let fallbackSmsTagTree = smsFallbackExtractedTags?.length > 0
+      ? smsFallbackExtractedTags
+      : buildSyntheticSmsMustacheTags(fallbackSmsResolvedForTags);
+    if (!smsTemplateHasMustacheTags(fallbackSmsResolvedForTags)) {
+      fallbackSmsTagTree = [];
+    }
+    const fallbackSmsCategorized = categorizeTags(fallbackSmsTagTree);
+    setRequiredTags(rcsPrimaryCategorized.required);
+    setOptionalTags(rcsPrimaryCategorized.optional);
+    setSmsFallbackRequiredTags(fallbackSmsCategorized.required);
+    setSmsFallbackOptionalTags(fallbackSmsCategorized.optional);
+    setTagsExtracted(
+      rcsPrimaryCategorized.hasPersonalizationTags || fallbackSmsCategorized.hasPersonalizationTags,
+    );
+    setCustomValues((prev) => mergeCustomValuesWithTagKeys(prev, rcsPrimaryCategorized, fallbackSmsCategorized));
+  };
+
+  /**
+   * When extract-tags API returns, map Redux `extractedTags` into required/optional so
+   * CustomValuesEditor shows personalization fields (effect was previously commented out).
+   * RCS + SMS fallback: merge primary + fallback tag trees when fallback template exists.
+   */
+  useEffect(() => {
+    if (!show) return;
+    const hasFallbackSmsTemplate = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+    if (channel === CHANNELS.RCS && hasFallbackSmsTemplate) {
+      applyRcsSmsFallbackTagExtraction();
+      return;
+    }
+    const smsEditorBody = typeof getCurrentContent === 'string' ? getCurrentContent : '';
+    let smsTagSource = channel === CHANNELS.SMS && (!extractedTags || extractedTags.length === 0)
+      ? buildSyntheticSmsMustacheTags(smsEditorBody)
+      : (extractedTags ?? []);
+    if (channel === CHANNELS.SMS && !smsTemplateHasMustacheTags(smsEditorBody)) {
+      smsTagSource = [];
+    }
+    const { required, optional, hasPersonalizationTags } = categorizeTags(smsTagSource);
+    setRequiredTags(required);
+    setOptionalTags(optional);
+    setTagsExtracted(hasPersonalizationTags);
+    setCustomValues((prev) => mergeCustomValuesWithTagKeys(prev, { required, optional }, { required: [], optional: [] }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- applyRcsSmsFallbackTagExtraction closes over latest extractedTags/smsFallbackExtractedTags
+  }, [show, extractedTags, channel, smsFallbackContent, smsFallbackExtractedTags, getCurrentContent, smsFallbackTextForTagExtraction]);
+
+  /**
+   * Get content to run tag extraction on (channel-specific).
+   */
+  const getContentForTagExtraction = () => {
+    let contentToExtract = activeContentForActions;
     if (channel === CHANNELS.EMAIL && formData) {
       const currentTabData = formData[currentTab - 1];
       const activeTab = currentTabData?.activeTab;
       const templateContent = currentTabData?.[activeTab]?.['template-content'];
       contentToExtract = templateContent || contentToExtract;
     }
+    return contentToExtract;
+  };
+
+  /**
+   * Handle extract tags
+   */
+  const handleExtractTags = () => {
+    if (channel === CHANNELS.RCS) {
+      applyRcsSmsFallbackTagExtraction();
+      return;
+    }
 
-    // Check for personalization tags (excluding unsubscribe)
+    const contentToExtract = getContentForTagExtraction();
     const tags = contentToExtract.match(/{{[^}]+}}/g) || [];
     const hasPersonalizationTags = tags.some((tag) => !tag.includes(UNSUBSCRIBE_TAG_NAME));
+    const onlyUnsubscribe = !hasPersonalizationTags && tags.length === 1 && tags[0].includes(UNSUBSCRIBE_TAG_NAME);
 
-    if (!hasPersonalizationTags && tags.length === 1 && tags[0].includes(UNSUBSCRIBE_TAG_NAME)) {
-      // If only unsubscribe tag is present, show noTagsExtracted message
+    if (onlyUnsubscribe) {
       setTagsExtracted(false);
       setRequiredTags([]);
       setOptionalTags([]);
@@ -2707,10 +3243,9 @@ const CommonTestAndPreview = (props) => {
       return;
     }
 
-    // Extract tags
     setTagsExtracted(true);
     const { templateSubject, templateContent } = prepareTagExtractionPayload(
-      channel,
+      activeChannelForActions,
       formData || {},
       contentToExtract
     );
@@ -2772,7 +3307,7 @@ const CommonTestAndPreview = (props) => {
     if (existingTestCustomer) {
       const entityId = existingTestCustomer.userId ?? existingTestCustomer.customerId;
       if (entityId != null) {
-        const id = 'customer:' + normalizeTestEntityId(entityId);
+        const id = normalizeTestEntityId(entityId);
         setSelectedTestEntities((prev) => (
           prev.some((existing) => testEntityIdsEqual(existing, id)) ? prev : [...prev, id]
         ));
@@ -2809,7 +3344,7 @@ const CommonTestAndPreview = (props) => {
           (c) => String(c?.customerId) === customerIdFromLookup || String(c?.userId) === customerIdFromLookup
         );
         if (alreadyInTestListByCustomerId) {
-          const id = 'customer:' + normalizeTestEntityId(customerIdFromLookup);
+          const id = normalizeTestEntityId(customerIdFromLookup);
           setSelectedTestEntities((prev) => (
             prev.some((existing) => testEntityIdsEqual(existing, id)) ? prev : [...prev, id]
           ));
@@ -2846,26 +3381,21 @@ const CommonTestAndPreview = (props) => {
   const handleSendTestMessage = () => {
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
-      if (String(entityId).startsWith('group:')) {
-        const rawId = String(entityId).slice('group:'.length);
-        const group = testGroups.find((g) => testEntityIdsEqual(g.groupId, rawId));
-        if (group) {
-          allUserIds.push(...group.userIds);
-        }
+      const group = testGroups.find((g) => testEntityIdsEqual(g.groupId, entityId));
+      if (group) {
+        allUserIds.push(...group.userIds);
       } else {
-        const rawId = String(entityId).startsWith('customer:')
-          ? String(entityId).slice('customer:'.length)
-          : String(entityId);
-        allUserIds.push(Number(rawId));
+        allUserIds.push(entityId);
       }
     });
     const uniqueUserIds = [...new Set(allUserIds)];
 
-    const deliveryOverride = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP].includes(channel)
+    const deliveryOverride = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP, CHANNELS.RCS].includes(channel)
       ? testPreviewDeliverySettings[channel]
       : null;
 
-    // Create initial payload based on channel
+    // createMessageMeta must match the creative channel and full creative (RCS + SMS fallback in one meta).
+    // Do not use activeChannelForActions / activeContentForActions — those follow the RCS vs Fallback SMS *preview* tab.
     const initialPayload = prepareTestMessagePayload(
       channel,
       formData || content || {},
@@ -2873,7 +3403,8 @@ const CommonTestAndPreview = (props) => {
       customValues,
       uniqueUserIds,
       previewData,
-      deliveryOverride
+      deliveryOverride,
+      {},
     );
 
     actions.createMessageMetaRequested(
@@ -2906,11 +3437,10 @@ const CommonTestAndPreview = (props) => {
   // ============================================
   // RENDER HELPER FUNCTIONS
   // ============================================
-
   const renderLeftPanelContent = () => (
     <LeftPanelContent
-      isExtractingTags={isExtractingTags}
-      extractedTags={extractedTags}
+      isExtractingTags={isExtractingTags || isExtractingSmsFallbackTags}
+      extractedTags={leftPanelExtractedTags}
       selectedCustomer={selectedCustomer}
       handleCustomerSelect={handleCustomerSelect}
       handleSearchCustomer={handleSearchCustomer}
@@ -2928,15 +3458,29 @@ const CommonTestAndPreview = (props) => {
 
   const renderCustomValuesEditor = () => (
     <CustomValuesEditor
-      isExtractingTags={isExtractingTags}
+      isExtractingTags={isExtractingTags || isExtractingSmsFallbackTags}
       isUpdatePreviewDisabled={isUpdatePreviewDisabled}
       showJSON={showJSON}
       setShowJSON={setShowJSON}
       customValues={customValues}
       handleJSONTextChange={handleJSONTextChange}
-      extractedTags={extractedTags}
-      requiredTags={requiredTags}
-      optionalTags={optionalTags}
+      sections={[
+        {
+          key: channel,
+          title:
+            channel === CHANNELS.RCS
+              ? messages.rcsTagsSectionTitle
+              : messages[`${channel}TagsSectionTitle`],
+          requiredTags,
+          optionalTags,
+        },
+        {
+          key: PREVIEW_TAB_SMS_FALLBACK,
+          title: isRcsSmsFallbackPreviewEnabled ? messages.smsFallbackTagsSectionTitle : null,
+          requiredTags: smsFallbackRequiredTags,
+          optionalTags: smsFallbackOptionalTags,
+        },
+      ]}
       handleCustomValueChange={handleCustomValueChange}
       handleDiscardCustomValues={handleDiscardCustomValues}
       handleUpdatePreview={handleUpdatePreview}
@@ -2952,18 +3496,13 @@ const CommonTestAndPreview = (props) => {
     }));
   };
 
-  /** Trim pasted emails (trailing CR/LF). SMS: strip non-digits so pasted formatted numbers match isValidMobile / API. */
+  /** Trim pasted emails (trailing CR/LF). Allow any input for SMS; valid-only check is in renderAddTestCustomerButton. */
   const handleTestCustomersSearch = useCallback((value) => {
     if (value == null || value === '') {
       setSearchValue('');
       return;
     }
-    const raw = String(value).trim();
-    if (channel === CHANNELS.SMS) {
-      setSearchValue(formatPhoneNumber(raw));
-    } else {
-      setSearchValue(raw);
-    }
+    setSearchValue(String(value).trim());
   }, [channel]);
 
   const renderSendTestMessage = () => (
@@ -2981,12 +3520,13 @@ const CommonTestAndPreview = (props) => {
       renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
-      senderDetailsOptions={senderDetailsByChannel[channel]}
+      senderDetailsByChannel={senderDetailsByChannel}
       wecrmAccounts={wecrmAccounts}
       onSaveDeliverySettings={handleSaveDeliverySettings}
       isLoadingSenderDetails={isLoadingSenderDetails}
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
+      isChannelSmsFallbackPreviewEnabled={isRcsSmsFallbackPreviewEnabled}
       searchValue={searchValue}
       setSearchValue={handleTestCustomersSearch}
     />
@@ -3000,14 +3540,13 @@ const CommonTestAndPreview = (props) => {
 
   const renderAddTestCustomerButton = () => {
     const raw = (searchValue || '').trim();
-    const value = channel === CHANNELS.SMS ? formatPhoneNumber(raw) : raw;
     const showAddButton =
       [CHANNELS.EMAIL, CHANNELS.SMS].includes(channel) &&
-      (channel === CHANNELS.EMAIL ? isValidEmail(value) : isValidMobile(value));
+      (channel === CHANNELS.EMAIL ? isValidEmail(raw) : isValidMobile(formatPhoneNumber(raw)));
     if (!showAddButton) return null;
     return (
       <AddTestCustomerButton
-        searchValue={value}
+        searchValue={channel === CHANNELS.SMS ? formatPhoneNumber(raw) : raw}
         handleAddTestCustomer={handleAddTestCustomer}
       />
     );