@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.359-alpha.1

package/v2Components/CommonTestAndPreview/index.js

@@ -31,7 +31,8 @@ import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
 
-// Import constants
+import * as Api from '../../services/api';
+import { extractTemplateVariables } from '../../utils/templateVarUtils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
 // Import constants
@@ -81,11 +82,24 @@ import {
   IMAGE,
   VIDEO,
   URL,
-  CHANNELS_USING_ANDROID_PREVIEW_DEVICE
+  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,
+  SMS_MUSTACHE_TAG_PATTERN,
 } 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';
 
@@ -108,6 +122,85 @@ 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. */
+const smsTemplateHasMustacheTags = (body) =>
+  typeof body === 'string' && SMS_MUSTACHE_TAG_PATTERN.test(body);
+
+/**
+ * Build tag rows from `{{…}}` mustache tokens only — DLT `{#…#}` slots are excluded because
+ * they are pre-bound template variables, not user-fillable personalization tags.
+ * Passing a mustache-only captureRegex to extractTemplateVariables skips the DLT branch.
+ * A non-global regex is used so ensureGlobalRegexForExecLoop creates a fresh instance on each call.
+ */
+const buildSyntheticSmsMustacheTags = (body = '') => {
+  if (!body || typeof body !== 'string') return [];
+  return extractTemplateVariables(body, /\{\{([^}]+)\}\}/).map((name) => ({
+    name,
+    metaData: { userDriven: false },
+    children: [],
+  }));
+};
+
+/** RCS createMessageMeta: media shape (mediaUrl, thumbnailUrl, height string). */
+const normalizeRcsTestCardMedia = (media) => {
+  if (!media || typeof media !== 'object') return undefined;
+  const mediaUrl =
+    media.mediaUrl != null && String(media.mediaUrl).trim() !== ''
+      ? String(media.mediaUrl)
+      : media.url != null && String(media.url).trim() !== ''
+        ? String(media.url)
+        : '';
+  const thumbnailUrl = media.thumbnailUrl != null ? String(media.thumbnailUrl) : '';
+  const height = media.height != null ? String(media.height) : undefined;
+  const out = { mediaUrl, thumbnailUrl };
+  if (height) out.height = height;
+  return out;
+};
+
+/** RCS createMessageMeta: suggestion shape (index, type, text, phoneNumber, url, postback). */
+const mapRcsSuggestionForTestMeta = (suggestionRow, index) => ({
+  index,
+  type: suggestionRow?.type ?? '',
+  text: suggestionRow?.text != null ? String(suggestionRow.text) : '',
+  phoneNumber:
+    suggestionRow?.phoneNumber != null
+      ? String(suggestionRow.phoneNumber)
+      : suggestionRow?.phone_number != null
+        ? String(suggestionRow.phone_number)
+        : '',
+  url: suggestionRow?.url !== undefined ? suggestionRow.url : null,
+  postback:
+    suggestionRow?.postback != null
+      ? String(suggestionRow.postback)
+      : suggestionRow?.text != null
+        ? String(suggestionRow.text)
+        : '',
+});
 
 /**
  * CapTreeSelect and group resolution use strict equality; API data may mix numeric and string ids.
@@ -133,7 +226,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.
@@ -169,13 +262,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);
 
@@ -186,10 +289,10 @@ 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);
-  // Viber: tag values applied to preview only after explicit Update preview / Discard (not while typing)
-  const [viberPreviewTagValues, setViberPreviewTagValues] = useState(null);
   const [previewDataHtml, setPreviewDataHtml] = useState(() => {
     // Initialize preview data based on channel
     if (channel === CHANNELS.EMAIL && formData) {
@@ -220,15 +323,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;
@@ -237,39 +347,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;
@@ -284,8 +454,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,
@@ -318,10 +488,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(() => {
@@ -365,6 +554,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
@@ -410,7 +606,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 = {
@@ -419,7 +678,7 @@ const CommonTestAndPreview = (props) => {
       selectable: false,
       children: testGroups?.map((group) => ({
         title: group?.groupName,
-        value: 'group:' + normalizeTestEntityId(group?.groupId),
+        value: normalizeTestEntityId(group?.groupId),
       })),
     };
 
@@ -429,7 +688,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),
       })) || [],
     };
 
@@ -457,144 +716,6 @@ const CommonTestAndPreview = (props) => {
     return resolvedText;
   };
 
-  const getViberMergedFormData = useCallback((formDataOverride) => {
-    const formDataObj = formDataOverride && typeof formDataOverride === 'object'
-      ? formDataOverride
-      : (formData && typeof formData === 'object' ? formData : {});
-    let contentObj = {};
-    if (content && typeof content === 'object') {
-      contentObj = content;
-    } else if (typeof content === 'string' && content.trim()) {
-      try {
-        contentObj = JSON.parse(content);
-      } catch (e) {
-        contentObj = {};
-      }
-    }
-    const previewCards = formDataObj.viberPreviewContent?.cards
-      ?? formDataObj.cards
-      ?? contentObj.viberPreviewContent?.cards
-      ?? contentObj.cards;
-    const mergedPreview = {
-      ...(contentObj.viberPreviewContent || {}),
-      ...(formDataObj.viberPreviewContent || {}),
-      ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
-    };
-    return {
-      ...contentObj,
-      ...formDataObj,
-      ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
-      ...(Object.keys(mergedPreview).length ? { viberPreviewContent: mergedPreview } : {}),
-    };
-  }, [formData, content]);
-
-  const getViberCarouselCardsFromFormData = (formDataObj) => {
-    const previewCards = formDataObj?.viberPreviewContent?.cards;
-    if (Array.isArray(previewCards) && previewCards.length) {
-      return previewCards;
-    }
-    const rootCards = formDataObj?.cards;
-    if (Array.isArray(rootCards) && rootCards.length) {
-      return rootCards;
-    }
-    return [];
-  };
-
-  const getViberTagExtractionContent = (formDataObj, contentStr = '') => {
-    const messageText = formDataObj?.messageContent
-      || formDataObj?.viberPreviewContent?.messageContent
-      || contentStr
-      || '';
-    const cardFieldTexts = getViberCarouselCardsFromFormData(formDataObj).flatMap((card) => {
-      const fields = [card?.text || ''];
-      (card?.buttons || []).forEach((button) => {
-        fields.push(button?.title || '', button?.action || '');
-      });
-      return fields;
-    });
-    return [messageText, ...cardFieldTexts]
-      .filter((value) => typeof value === 'string' && value.trim())
-      .join(' ');
-  };
-
-  const resolveViberCarouselCards = (cards, tagValues) => {
-    if (!Array.isArray(cards) || !tagValues || !Object.keys(tagValues).length) {
-      return cards;
-    }
-    return cards.map((card) => ({
-      ...card,
-      text: resolveTagsInText(card?.text || '', tagValues),
-      buttons: (card?.buttons || []).map((button) => ({
-        ...button,
-        title: resolveTagsInText(button?.title || '', tagValues),
-        action: resolveTagsInText(button?.action || '', tagValues),
-      })),
-    }));
-  };
-
-  const applyViberCustomValuesToContent = (contentObj, tagValues) => {
-    if (!contentObj || typeof contentObj !== 'object' || !tagValues || !Object.keys(tagValues).length) {
-      return contentObj;
-    }
-    const result = { ...contentObj };
-    if (typeof result.messageContent === 'string') {
-      result.messageContent = resolveTagsInText(result.messageContent, tagValues);
-    }
-    if (Array.isArray(result.cards)) {
-      result.cards = resolveViberCarouselCards(result.cards, tagValues);
-    }
-    if (result.viberPreviewContent && typeof result.viberPreviewContent === 'object') {
-      const preview = result.viberPreviewContent;
-      result.viberPreviewContent = {
-        ...preview,
-        messageContent: resolveTagsInText(preview.messageContent || '', tagValues),
-        cards: resolveViberCarouselCards(preview.cards, tagValues),
-      };
-    }
-    return result;
-  };
-
-  const mergeViberPreviewWithResolved = (base, resolved) => {
-    if (!resolved || typeof resolved !== 'object') {
-      return base && typeof base === 'object' ? base : {};
-    }
-    const baseObj = base && typeof base === 'object' ? base : {};
-    const basePreview = baseObj.viberPreviewContent || {};
-    const resolvedPreview = resolved.viberPreviewContent || {};
-    const baseCards = basePreview.cards || baseObj.cards || [];
-    const resolvedCards = resolvedPreview.cards || resolved.cards || [];
-    const mergedCards = baseCards.length
-      ? baseCards.map((card, index) => {
-        const resolvedCard = resolvedCards[index];
-        if (!resolvedCard) {
-          return card;
-        }
-        return {
-          ...card,
-          ...(resolvedCard.text != null ? { text: resolvedCard.text } : {}),
-          ...(resolvedCard.mediaUrl != null ? { mediaUrl: resolvedCard.mediaUrl } : {}),
-          buttons: (card.buttons || []).map((button, buttonIndex) => ({
-            ...button,
-            ...(resolvedCard.buttons?.[buttonIndex] || {}),
-          })),
-        };
-      })
-      : resolvedCards;
-    const resolvedMessage = resolved.messageContent ?? resolvedPreview.messageContent;
-
-    return {
-      ...baseObj,
-      ...resolved,
-      viberPreviewContent: {
-        ...basePreview,
-        ...resolvedPreview,
-        type: resolvedPreview.type || basePreview.type || baseObj.type,
-        cards: mergedCards.length ? mergedCards : (resolvedPreview.cards || basePreview.cards),
-        ...(resolvedMessage != null ? { messageContent: resolvedMessage } : {}),
-      },
-    };
-  };
-
   /**
    * Common handler for saving test customers (both new and existing)
    */
@@ -647,11 +768,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();
@@ -715,13 +835,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 {
@@ -750,11 +890,48 @@ const CommonTestAndPreview = (props) => {
           messageBody: contentStr,
         };
 
+      case CHANNELS.WEBPUSH:
+        return {
+          ...basePayload,
+          messageBody: contentStr,
+        };
+
       default:
         return basePayload;
     }
   };
 
+  /**
+   * 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
    */
@@ -778,11 +955,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 {
@@ -796,13 +994,17 @@ const CommonTestAndPreview = (props) => {
           templateContent: formDataObj?.bodyText || contentStr,
         };
 
-      case CHANNELS.VIBER: {
-        const viberFormData = getViberMergedFormData(formDataObj);
+      case CHANNELS.VIBER:
         return {
-          templateSubject: viberFormData?.messageTitle || '',
-          templateContent: getViberTagExtractionContent(viberFormData, contentStr),
+          templateSubject: formDataObj?.messageTitle || '',
+          templateContent: contentStr,
+        };
+
+      case CHANNELS.WEBPUSH:
+        return {
+          templateSubject: formDataObj?.content?.title || '',
+          templateContent: contentStr,
         };
-      }
 
       case CHANNELS.ZALO: {
         // For Zalo, extract content from templateListParams array
@@ -851,7 +1053,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,
@@ -859,7 +1061,7 @@ const CommonTestAndPreview = (props) => {
         index,
       };
       if (type === PHONE_NUMBER) {
-        buttonObj.phoneNumber = phone_number;
+        buttonObj.phoneNumber = phoneNumber;
       }
       if (type === URL) {
         buttonObj.url = url;
@@ -888,7 +1090,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,
@@ -969,12 +1323,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,
@@ -1118,7 +1472,7 @@ const CommonTestAndPreview = (props) => {
         return {
           ...basePayload,
           whatsappMessageContent: {
-            messageBody: templateEditorValue || '',
+            messageBody: resolvedMessageBody || templateEditorValue || '',
             accountId: formDataObj?.accountId || '',
             sourceAccountIdentifier: sourceAccountIdentifier || formDataObj?.sourceAccountIdentifier || '',
             accountName: formDataObj?.accountName || '',
@@ -1143,16 +1497,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
@@ -1691,16 +2036,11 @@ const CommonTestAndPreview = (props) => {
         // 1. formDataObj from getTemplateContent (contains both viberPreviewContent and payload fields)
         // 2. formDataObj[0] (array format - legacy)
         // 3. contentStr (direct string - legacy)
-        // Merge content prop so listing / preview-only flows include carousel card tags
-        const viberFormData = getViberMergedFormData(formDataObj);
-        formDataObj = viberFormData;
 
         let messageText = '';
         let imageData = null;
         let videoData = null;
         let buttonData = null;
-        let cardsData = [];
-        let messageType = '';
         let accountId = null;
         let accountDetails = null;
         let scenarioKey = '';
@@ -1715,8 +2055,6 @@ const CommonTestAndPreview = (props) => {
           imageData = formDataObj.image || null;
           videoData = formDataObj.video || null;
           buttonData = formDataObj.button || null;
-          cardsData = formDataObj.cards || [];
-          messageType = formDataObj.type || '';
           accountId = formDataObj.accountId || null;
           accountDetails = formDataObj.accountDetails || null;
           scenarioKey = formDataObj.scenarioKey || VIBER_API_SCENARIO_KEY;
@@ -1743,8 +2081,6 @@ const CommonTestAndPreview = (props) => {
               url: formDataObj?.buttonURL || '',
             };
           }
-          cardsData = viberPreview.cards || formDataObj?.cards || [];
-          messageType = viberPreview.type || formDataObj?.type || '';
           // Extract account info from parent formDataObj if available
           accountId = formDataObj.accountId || null;
           accountDetails = formDataObj.accountDetails || null;
@@ -1787,10 +2123,6 @@ const CommonTestAndPreview = (props) => {
           text: messageText,
         };
 
-        if (messageType === CHANNELS.VIBER) {
-          messageType = '';
-        }
-
         // Add image if present
         if (imageData && imageData.url) {
           viberContent.image = {
@@ -1819,34 +2151,9 @@ const CommonTestAndPreview = (props) => {
           }
         }
 
-        if (messageType === MEDIA_TYPE_CAROUSEL || (Array.isArray(cardsData) && cardsData.length)) {
-          viberContent.type = MEDIA_TYPE_CAROUSEL;
-          viberContent.cards = (cardsData || []).map((card) => ({
-            text: card?.text || '',
-            mediaUrl: card?.mediaUrl || '',
-            buttons: (card?.buttons || []).map((button) => ({
-              title: button?.title || '',
-              action: button?.action || '',
-            })),
-          }));
-          delete viberContent.button;
-        }
-
-        // Resolve tags in text/cards if custom values are provided
-        if (customValuesObj && Object.keys(customValuesObj).length > 0) {
-          if (viberContent.text) {
-            viberContent.text = resolveTagsInText(viberContent.text, customValuesObj);
-          }
-          if (Array.isArray(viberContent.cards)) {
-            viberContent.cards = resolveViberCarouselCards(viberContent.cards, customValuesObj);
-          }
-          if (viberContent.button) {
-            viberContent.button = {
-              ...viberContent.button,
-              text: resolveTagsInText(viberContent.button.text || '', customValuesObj),
-              url: resolveTagsInText(viberContent.button.url || '', customValuesObj),
-            };
-          }
+        // Resolve tags in text if custom values are provided
+        if (customValuesObj && Object.keys(customValuesObj).length > 0 && viberContent.text) {
+          viberContent.text = resolveTagsInText(viberContent.text, customValuesObj);
         }
 
         // Build messageBody JSON string
@@ -1981,6 +2288,42 @@ const CommonTestAndPreview = (props) => {
         };
       }
 
+      case CHANNELS.WEBPUSH: {
+        const webpushData = (typeof formDataObj === 'object' && formDataObj !== null)
+          ? formDataObj
+          : {};
+        const innerContent = webpushData?.content || {};
+
+        const resolvedTitle = resolveTagsInText(innerContent?.title || '', customValuesObj);
+        const resolvedMessage = resolveTagsInText(innerContent?.message || '', customValuesObj);
+
+        return {
+          ...basePayload,
+          webPushMessageContent: {
+            channel: CHANNELS.WEBPUSH,
+            accountId: webpushData?.accountId || null,
+            content: {
+              title: resolvedTitle,
+              message: resolvedMessage,
+              ...(innerContent?.iconImageUrl && { iconImageUrl: innerContent.iconImageUrl }),
+              ...(innerContent?.cta && { cta: innerContent.cta }),
+              ...(innerContent?.expandableDetails && { expandableDetails: innerContent.expandableDetails }),
+            },
+            messageSubject: webpushData?.messageSubject || resolvedTitle || '',
+          },
+          webPushDeliverySettings: {
+            channelSettings: {
+              channel: CHANNELS.WEBPUSH,
+              notificationTtl: {
+                duration: 7,
+                timeUnit: DAYS,
+              },
+            },
+            additionalSettings: {},
+          },
+        };
+      }
+
       default:
         return basePayload;
     }
@@ -1993,6 +2336,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 = {};
@@ -2012,7 +2395,7 @@ const CommonTestAndPreview = (props) => {
       contentObj = hasPreviewCallBeenMade && previewDataHtml?.resolvedBody
         ? previewDataHtml.resolvedBody
         : getCurrentContent || '';
-    } else if (channel === CHANNELS.WHATSAPP) {
+    } else if ([CHANNELS.WHATSAPP, CHANNELS.WEBPUSH].includes(channel)) {
       // For WhatsApp, content is an object with templateMsg, media, CTA, etc.
       // Content comes from WhatsApp component state, passed via content prop
       let resolvedContent = null;
@@ -2054,42 +2437,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
@@ -2190,39 +2545,33 @@ const CommonTestAndPreview = (props) => {
       // Only use previewDataHtml if preview call was made
       if (hasPreviewCallBeenMade && previewDataHtml?.resolvedBody) {
         resolvedContent = previewDataHtml.resolvedBody;
-        if (typeof resolvedContent === 'string') {
-          try {
-            resolvedContent = JSON.parse(resolvedContent);
-          } catch (e) {
-            resolvedContent = null;
-          }
-        }
       }
 
-      // Parse content if it's a string, then merge with formData for carousel + tags in all entry flows
-      let parsedViberContent = getViberMergedFormData();
-      if (!parsedViberContent || typeof parsedViberContent !== 'object') {
-        parsedViberContent = {};
+      // Parse content if it's a string
+      let parsedViberContent = content;
+      if (typeof content === 'string') {
+        try {
+          parsedViberContent = JSON.parse(content);
+        } catch (e) {
+          parsedViberContent = {};
+        }
       }
-      // Merge template preview state with API resolved body so carousel type/cards survive slim responses
+      // Use resolvedContent if available (from preview call), otherwise use raw content
       if (resolvedContent && typeof resolvedContent === 'object') {
-        const base = parsedViberContent && typeof parsedViberContent === 'object' ? parsedViberContent : {};
-        contentObj = mergeViberPreviewWithResolved(base, resolvedContent);
-        if (base.accountName && !contentObj.accountName) {
-          contentObj.accountName = base.accountName;
+        contentObj = { ...resolvedContent };
+        // Merge in accountName and brandName from raw content if not in resolvedContent
+        if (parsedViberContent?.accountName && !contentObj.accountName) {
+          contentObj.accountName = parsedViberContent.accountName;
         }
-        if (base.brandName && !contentObj.brandName) {
-          contentObj.brandName = base.brandName;
+        if (parsedViberContent?.brandName && !contentObj.brandName) {
+          contentObj.brandName = parsedViberContent.brandName;
         }
       } else {
-        contentObj = parsedViberContent && typeof parsedViberContent === 'object' ? parsedViberContent : {};
-      }
-      if (
-        hasPreviewCallBeenMade
-        && viberPreviewTagValues
-        && Object.keys(viberPreviewTagValues).length > 0
-      ) {
-        contentObj = applyViberCustomValuesToContent(contentObj, viberPreviewTagValues);
+        // Use raw content if no preview call was made or resolvedContent is not available
+        contentObj = {...parsedViberContent, messageContent: resolvedContent};
+        if (resolvedContent) {
+          contentObj.viberPreviewContent = {...parsedViberContent?.viberPreviewContent, messageContent: resolvedContent};
+        }
       }
     } else if (channel === CHANNELS.ZALO) {
       // For Zalo, content is an object with templatePreviewUrl, templateStatus, etc.
@@ -2298,6 +2647,10 @@ const CommonTestAndPreview = (props) => {
       formatMessage,
       lastModified: formData?.lastModified,
       updatedByName: formData?.updatedByName,
+      smsFallbackContent: isRcsSmsFallbackPreviewEnabled ? smsFallbackContent : null,
+      smsFallbackResolvedText,
+      activePreviewTab,
+      onPreviewTabChange: setActivePreviewTab,
     };
   };
 
@@ -2337,7 +2690,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) {
@@ -2422,7 +2780,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
@@ -2474,17 +2886,22 @@ const CommonTestAndPreview = (props) => {
       setSelectedCustomer(null);
       setRequiredTags([]);
       setOptionalTags([]);
+      setSmsFallbackExtractedTags([]);
+      setSmsFallbackRequiredTags([]);
+      setSmsFallbackOptionalTags([]);
+      setIsExtractingSmsFallbackTags(false);
       setCustomValues({});
       setShowJSON(false);
       setTagsExtracted(false);
       setPreviewDevice(DESKTOP);
-      setHasPreviewCallBeenMade(false);
-      setViberPreviewTagValues(null);
+      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]);
 
@@ -2493,79 +2910,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
    */
@@ -2573,17 +2921,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,
           },
@@ -2592,7 +2938,7 @@ const CommonTestAndPreview = (props) => {
         actions.getPrefilledValuesRequested(payload);
       }
     }
-  }, [selectedCustomer]);
+  }, [selectedCustomer, allTags.length, activeChannelForActions, activePreviewTab]);
 
   /**
    * Update custom values with prefilled values from API
@@ -2603,29 +2949,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);
 
-      // Viber: do not auto-resolve tags in preview; user must click Update preview
-      if (channel === CHANNELS.VIBER) {
-        return;
-      }
-
       // 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)
@@ -2691,7 +3037,6 @@ const CommonTestAndPreview = (props) => {
     setPreviewDevice(DESKTOP);
     setPreviewDataHtml('');
     setHasPreviewCallBeenMade(false); // Reset preview call flag
-    setViberPreviewTagValues(null);
     setSelectedTestEntities([]);
     setBeeContent('');
     previousBeeContentRef.current = '';
@@ -2720,11 +3065,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());
   };
 
   /**
@@ -2733,17 +3074,12 @@ const CommonTestAndPreview = (props) => {
   const handleClearSelection = () => {
     setSelectedCustomer(null);
     setHasPreviewCallBeenMade(false); // Reset flag when customer is cleared
-    setViberPreviewTagValues(null);
 
     // Clear all preview errors when customer is cleared
     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
@@ -2779,23 +3115,23 @@ 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
     );
-    if (channel === CHANNELS.VIBER) {
-      setViberPreviewTagValues({ ...emptyValues });
-    }
     actions.updatePreviewRequested(payload);
     setHasPreviewCallBeenMade(true); // Mark that preview call was made
   };
@@ -2806,17 +3142,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
       );
-      if (channel === CHANNELS.VIBER) {
-        setViberPreviewTagValues({ ...customValues });
-      }
       await actions.updatePreviewRequested(payload);
+
+      await syncSmsFallbackPreview(customValues, selectedCustomer);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
     } catch (error) {
       CapNotification.error({
@@ -2826,27 +3169,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;
-    } else if (channel === CHANNELS.VIBER) {
-      contentToExtract = getViberTagExtractionContent(getViberMergedFormData(), contentToExtract);
     }
+    return contentToExtract;
+  };
 
-    // Check for personalization tags (excluding unsubscribe)
+  /**
+   * Handle extract tags
+   */
+  const handleExtractTags = () => {
+    if (channel === CHANNELS.RCS) {
+      applyRcsSmsFallbackTagExtraction();
+      return;
+    }
+
+    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([]);
@@ -2854,10 +3285,9 @@ const CommonTestAndPreview = (props) => {
       return;
     }
 
-    // Extract tags
     setTagsExtracted(true);
     const { templateSubject, templateContent } = prepareTagExtractionPayload(
-      channel,
+      activeChannelForActions,
       formData || {},
       contentToExtract
     );
@@ -2919,7 +3349,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]
         ));
@@ -2956,7 +3386,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]
           ));
@@ -2993,26 +3423,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 || {},
@@ -3020,7 +3445,8 @@ const CommonTestAndPreview = (props) => {
       customValues,
       uniqueUserIds,
       previewData,
-      deliveryOverride
+      deliveryOverride,
+      {},
     );
 
     actions.createMessageMetaRequested(
@@ -3053,11 +3479,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}
@@ -3075,15 +3500,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}
@@ -3099,18 +3538,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 = () => (
@@ -3128,12 +3562,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}
     />
@@ -3147,14 +3582,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}
       />
     );