cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Components/CommonTestAndPreview/index.js

@@ -8,7 +8,7 @@
 
 import PropTypes from 'prop-types';
 import React, {
-  useState, useEffect, useMemo, useRef,
+  useState, useEffect, useMemo, useRef, useCallback,
 } from 'react';
 import { FormattedMessage } from 'react-intl';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
@@ -28,7 +28,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 {
   CHANNELS,
   TEST,
@@ -65,10 +66,125 @@ import {
   IN_APP_CHANNEL_NAME,
   MOBILE_PUSH_CHANNEL_NAME,
   CHANNEL,
+  PHONE_NUMBER,
+  DYNAMIC_URL,
+  IMAGE,
+  VIDEO,
+  URL,
+  PREVIEW_TAB_RCS,
+  PREVIEW_TAB_SMS_FALLBACK,
+  CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
+  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';
+
+/**
+ * Drop empty GSM rows. RCS/DLT responses often set gsm_sender_id equal to domainName — keep those rows
+ * for RCS defaults (ModifyDeliverySettings uses the same rule for the sender dropdown).
+ */
+const filterUsableGsmSendersForDomain = (domain, gsmSenders, { skipDomainNameEchoFilter = false } = {}) => {
+  const normalizedDomainName =
+    domain?.domainName != null ? String(domain.domainName).trim().toLowerCase() : '';
+  return (gsmSenders || []).filter((gsmSenderRow) => {
+    const rawValue = gsmSenderRow?.value;
+    if (rawValue == null) return false;
+    const trimmedSenderValue = String(rawValue).trim();
+    if (!trimmedSenderValue) return false;
+    const senderMatchesDomainLabel =
+      normalizedDomainName && trimmedSenderValue.toLowerCase() === normalizedDomainName;
+    if (!skipDomainNameEchoFilter && senderMatchesDomainLabel) return false;
+    return true;
+  });
+};
+
+/** 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)
+        : '',
+});
 
 /**
  * Preview Component Factory - REMOVED IN PHASE 5
@@ -80,7 +196,7 @@ import { getCdnUrl } from '../../utils/cdnTransformation';
  */
 const CommonTestAndPreview = (props) => {
   const {
-    intl: { formatMessage },
+    intl: { formatMessage, locale: userLocale = 'en' },
     show,
     onClose,
     channel, // The channel: 'EMAIL', 'SMS', 'RCS', etc.
@@ -105,6 +221,10 @@ const CommonTestAndPreview = (props) => {
     updatePreviewErrors,
     fetchPrefilledValuesError,
     fetchPrefilledValuesErrors,
+    senderDetailsByChannel = {},
+    wecrmAccounts = [],
+    isLoadingSenderDetails = false,
+    orgUnitId = -1,
     // Email-specific props
     beeInstance,
     currentTab = 1,
@@ -112,19 +232,29 @@ 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 [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
-  // Initialize device based on channel: SMS uses Android/iOS, others use Desktop/Mobile
-  // Initialize device based on channel: SMS, WhatsApp, RCS, InApp, MobilePush, and Viber use Android/iOS, others use Desktop/Mobile
-  const initialDevice = (channel === CHANNELS.SMS || channel === CHANNELS.WHATSAPP || channel === CHANNELS.RCS || channel === CHANNELS.INAPP || channel === CHANNELS.MOBILEPUSH || channel === CHANNELS.VIBER) ? ANDROID : DESKTOP;
+
+  const initialDevice = CHANNELS_USING_ANDROID_PREVIEW_DEVICE.includes(channel) ? ANDROID : DESKTOP;
   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(() => {
@@ -146,15 +276,205 @@ const CommonTestAndPreview = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately (EMAIL only)
   const previousBeeContentRef = useRef(''); // Track previous BEE content (EMAIL only)
+  // Delivery settings for Test and Preview (SMS, Email, WhatsApp) — user selection only
+  const [testPreviewDeliverySettings, setTestPreviewDeliverySettings] = useState({
+    [CHANNELS.SMS]: {
+      domainId: null, domainGatewayMapId: null, gsmSenderId: '', cdmaSenderId: '',
+    },
+    [CHANNELS.EMAIL]: {
+      domainId: null, domainGatewayMapId: null, senderEmail: '', senderLabel: '', senderReplyTo: '',
+    },
+    [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, 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 (SMS, Email, WhatsApp, RCS — same process)
+  useEffect(() => {
+    if (!show || !channel) {
+      return;
+    }
+    if (channelsWithDeliverySettings.includes(channel)) {
+      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]);
+
+  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 = '', cdmaSenderId = '', senderEmail = '', senderMobNum = '',
+    } = testPreviewDeliverySettings[channel] || {};
+    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 && registeredSenderIds?.length
+      ? domains.filter((domain) => (domain?.gsmSenders || []).some((gsm) =>
+        registeredSenderIds?.includes(gsm?.value)))
+      : domains;
+    const [defaultDomain] = domains;
+    const [firstSmsDomain] = smsDomains;
+    let firstDomain = defaultDomain;
+    if (channel === CHANNELS.WHATSAPP && matchedWhatsappAccount?.sourceAccountIdentifier) {
+      firstDomain = domains.find((domain) => domain?.sourceAccountIdentifier === matchedWhatsappAccount.sourceAccountIdentifier) || defaultDomain;
+    } else if (channel === CHANNELS.SMS) {
+      firstDomain = firstSmsDomain;
+    }
+    if (!firstDomain) return;
+    setTestPreviewDeliverySettings((prev) => {
+      const next = { ...prev };
+      if (channel === CHANNELS.SMS) {
+        const smsGsmSenders = smsTraiDltEnabled
+          ? (firstDomain?.gsmSenders || []).filter((gsm) => registeredSenderIds?.includes(gsm?.value))
+          : firstDomain?.gsmSenders;
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          domainGatewayMapId: firstDomain.dgmId,
+          gsmSenderId: findDefault(smsGsmSenders)?.value || smsGsmSenders?.[0]?.value || '',
+          cdmaSenderId: findDefault(firstDomain.cdmaSenders)?.value || '',
+        };
+      } else if (channel === CHANNELS.EMAIL) {
+        const defSender = findDefault(firstDomain.emailSenders);
+        const defReply = findDefault(firstDomain.emailRepliers);
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          domainGatewayMapId: firstDomain.dgmId,
+          senderEmail: defSender?.value || '',
+          senderLabel: defSender?.label || '',
+          senderReplyTo: defReply?.value || '',
+        };
+      } else if (channel === CHANNELS.WHATSAPP) {
+        const accId = firstDomain.sourceAccountIdentifier;
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          senderMobNum: firstDomain.gsmSenders?.[0]?.value || '',
+          sourceAccountIdentifier: matchedWhatsappAccount?.sourceAccountIdentifier || accId || '',
+        };
+      }
+      return next;
+    });
+  }, [channel, formData?.accountName, senderDetailsByChannel, smsTraiDltEnabled, registeredSenderIds, wecrmAccounts]);
 
   // ============================================
   // 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(() => {
@@ -198,6 +518,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
@@ -243,7 +570,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
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
       title: 'Groups',
@@ -355,6 +745,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
    */
@@ -442,7 +863,175 @@ const CommonTestAndPreview = (props) => {
    * Prepare payload for test message sending based on channel
    * Updated to match API structure with ouId, sourceEntityId, module, deliverySettings, etc.
    */
-  const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj) => {
+
+  const getCarouselMappedData = (carouselData = []) => carouselData.map((carousel) => {
+    const {
+      bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate,
+    } = carousel || {};
+    const buttonData = buttons.map((button, index) => {
+      const {
+        type, text, phone_number: phoneNumber, urlType, url,
+      } = button || {};
+      const buttonObj = {
+        type,
+        text,
+        index,
+      };
+      if (type === PHONE_NUMBER) {
+        buttonObj.phoneNumber = phoneNumber;
+      }
+      if (type === URL) {
+        buttonObj.url = url;
+        if (urlType === DYNAMIC_URL) {
+          const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
+          buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
+        }
+      }
+      return buttonObj;
+    });
+    return {
+      body: bodyText,
+      cardVarMapped,
+      bodyTemplate,
+      media: {
+        ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
+          url: imageUrl,
+        }),
+        ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
+          url: videoUrl,
+          previewUrl: videoPreviewImg,
+        }),
+      },
+      buttons: buttonData,
+      mediaType: mediaType?.toUpperCase(),
+    };
+  });
+
+  /**
+   * Build createMessageMeta payload for RCS (test message).
+   * rcsMessageContent: { channel, accountId?, rcsRichCardContent: { contentType, cardType, cardSettings, cardContent }, smsFallBackContent? }
+   * Then rcsDeliverySettings, executionParams, clientName last.
+   */
+  const buildRcsTestMessagePayload = (formDataObj, _contentStr, customValuesObj, deliverySettingsOverride, basePayload, rcsExtra = {}) => {
+    const plainCustom =
+      customValuesObj != null && typeof customValuesObj.toJS === 'function'
+        ? customValuesObj.toJS()
+        : (customValuesObj || {});
+    const userVarMap = Object.fromEntries(
+      Object.entries(plainCustom).filter(([, v]) => v != null && String(v).trim() !== '')
+    );
+    const rcsData = formDataObj?.versions?.base?.content?.RCS ?? formDataObj?.content?.RCS ?? {};
+    const rcsContent = rcsData?.rcsContent || {};
+    const smsFallback = rcsData?.smsFallBackContent || {};
+    let cardContentList = [];
+    if (Array.isArray(rcsContent?.cardContent)) {
+      cardContentList = rcsContent.cardContent;
+    } else if (rcsContent?.cardContent) {
+      cardContentList = [rcsContent.cardContent];
+    }
+    // Merge test customValues into cardVarMapped (template snapshot + user-entered RCS + fallback SMS tags).
+    const cardContent = cardContentList.map((rcsCard) => {
+      const baseMap = rcsCard.cardVarMapped || {};
+      const mergedCardVarMapped =
+        Object.keys(userVarMap).length > 0 ? { ...baseMap, ...userVarMap } : baseMap;
+      const mediaNorm = rcsCard?.media ? normalizeRcsTestCardMedia(rcsCard.media) : undefined;
+      const suggestionsRaw = Array.isArray(rcsCard?.suggestions) ? rcsCard.suggestions : [];
+      const suggestionsMapped = suggestionsRaw.map((suggestionItem, i) =>
+        mapRcsSuggestionForTestMeta(suggestionItem, i));
+      return {
+        title: rcsCard?.title ?? '',
+        description: rcsCard?.description ?? '',
+        mediaType: rcsCard?.mediaType ?? MEDIA_TYPE_TEXT,
+        ...(mediaNorm && { media: mediaNorm }),
+        ...(Object.keys(mergedCardVarMapped).length > 0 && { cardVarMapped: mergedCardVarMapped }),
+        ...(suggestionsMapped.length > 0 && { suggestions: suggestionsMapped }),
+      };
+    });
+    // Prefer parent `smsFallbackContent` snapshot (rcsExtra) — includes VarSegment-resolved body via
+    // getSmsFallbackTextForTagExtraction. Nested formData.smsFallBackContent is often stale vs live editor.
+    const rcsExtraFallbackTemplate = rcsExtra?.smsFallbackTemplateContent;
+    const hasResolvedFallbackBodyFromRcsExtra =
+      rcsExtraFallbackTemplate != null
+      && String(rcsExtraFallbackTemplate).trim() !== '';
+    const smsMessageRaw = hasResolvedFallbackBodyFromRcsExtra
+      ? String(rcsExtraFallbackTemplate)
+      : (smsFallback?.smsContent ?? smsFallback?.message ?? '');
+    const smsSenderFromDelivery = deliverySettingsOverride?.cdmaSenderId?.includes('|')
+      ? deliverySettingsOverride.cdmaSenderId.split('|')[1]
+      : deliverySettingsOverride?.cdmaSenderId;
+    const deliveryFallbackSmsId =
+      typeof smsSenderFromDelivery === 'string' ? smsSenderFromDelivery.trim() : '';
+    const creativeFallbackSmsId =
+      smsFallback?.senderId != null ? String(smsFallback.senderId).trim() : '';
+    const fallbackSmsSenderIdForChannel = deliveryFallbackSmsId || creativeFallbackSmsId || '';
+
+    const smsFallBackContent =
+      smsMessageRaw.trim() !== ''
+        ? { message: smsMessageRaw }
+        : undefined;
+
+    // accountId: WeCRM account id (not sourceAccountIdentifier) for createMessageMeta
+    const accountIdForMeta =
+      rcsContent?.accountId != null && String(rcsContent.accountId).trim() !== ''
+        ? String(rcsContent.accountId)
+        : undefined;
+
+    const rcsRichCardContent = {
+      contentType: RCS_TEST_META_CONTENT_TYPE_RICHCARD,
+      cardType: rcsContent?.cardType ?? RCS_TEST_META_CARD_TYPE_STANDALONE,
+      cardSettings: rcsContent?.cardSettings ?? {
+        cardOrientation: RCS_TEST_META_CARD_ORIENTATION_VERTICAL,
+        cardWidth: RCS_TEST_META_CARD_WIDTH_SMALL,
+      },
+      ...(cardContent.length > 0 && { cardContent }),
+    };
+
+    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,
@@ -468,6 +1057,14 @@ const CommonTestAndPreview = (props) => {
           ? resolveTagsInText(subject, customValuesObj)
           : subject;
 
+        const emailChannelSettings = {
+          channel: CHANNELS.EMAIL,
+          senderLabel: deliverySettingsOverride?.senderLabel ?? '',
+          senderId: deliverySettingsOverride?.senderEmail ?? '',
+          replyToId: deliverySettingsOverride?.senderReplyTo ?? '',
+          domainGatewayMapId: deliverySettingsOverride?.domainGatewayMapId ?? '',
+          domainId: deliverySettingsOverride?.domainId ?? '',
+        };
         return {
           ...basePayload,
           emailDeliverySettings: {
@@ -478,12 +1075,7 @@ const CommonTestAndPreview = (props) => {
               skipRateLimit: false,
               bypassControlUser: false,
             },
-            channelSettings: {
-              channel: CHANNELS.EMAIL,
-              senderLabel: '',
-              senderId: '',
-              replyToId: '',
-            },
+            channelSettings: emailChannelSettings,
           },
           emailMessageContent: {
             channel: CHANNELS.EMAIL,
@@ -520,8 +1112,12 @@ const CommonTestAndPreview = (props) => {
           },
           smsDeliverySettings: {
             channelSettings: {
-              gsmSenderId: '',
-              domainId: null,
+              channel: CHANNELS.SMS,
+              gsmSenderId: deliverySettingsOverride?.gsmSenderId ?? '',
+              domainId: deliverySettingsOverride?.domainId ?? null,
+              domainGatewayMapId: deliverySettingsOverride?.domainGatewayMapId ?? '',
+              targetNdnc: false,
+              cdmaSenderId: deliverySettingsOverride?.cdmaSenderId ?? '',
             },
             additionalSettings: {
               useTinyUrl: false,
@@ -653,20 +1249,21 @@ const CommonTestAndPreview = (props) => {
 
         // Add carousel data if mediaType is CAROUSEL
         if (mediaType === MEDIA_TYPE_CAROUSEL && formDataObj?.carouselData) {
-          templateConfigs.cards = formDataObj.carouselData;
+          templateConfigs.cards = getCarouselMappedData(formDataObj.carouselData);
           templateConfigs.mediaType = formDataObj?.carouselMediaType?.toUpperCase() || MEDIA_TYPE_IMAGE;
         }
 
-        // Extract delivery settings
-        const senderMobNum = formDataObj?.senderMobNum || additionalProps?.senderMobNum || '';
-        const domainId = formDataObj?.domainId || additionalProps?.domainId || null;
+        // Extract delivery settings (override from Test & Preview delivery settings when present)
+        const senderMobNum = deliverySettingsOverride?.senderMobNum ?? formDataObj?.senderMobNum ?? additionalProps?.senderMobNum ?? '';
+        const domainId = deliverySettingsOverride?.domainId ?? formDataObj?.domainId ?? additionalProps?.domainId ?? null;
+        const sourceAccountIdentifier = deliverySettingsOverride?.sourceAccountIdentifier ?? formDataObj?.sourceAccountIdentifier ?? '';
 
         return {
           ...basePayload,
           whatsappMessageContent: {
-            messageBody: templateEditorValue || '',
+            messageBody: resolvedMessageBody || templateEditorValue || '',
             accountId: formDataObj?.accountId || '',
-            sourceAccountIdentifier: formDataObj?.sourceAccountIdentifier || '',
+            sourceAccountIdentifier: sourceAccountIdentifier || formDataObj?.sourceAccountIdentifier || '',
             accountName: formDataObj?.accountName || '',
             templateConfigs,
             channel: CHANNELS.WHATSAPP,
@@ -689,16 +1286,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
@@ -1800,6 +2388,10 @@ const CommonTestAndPreview = (props) => {
       formatMessage,
       lastModified: formData?.lastModified,
       updatedByName: formData?.updatedByName,
+      smsFallbackContent: isRcsSmsFallbackPreviewEnabled ? smsFallbackContent : null,
+      smsFallbackResolvedText,
+      activePreviewTab,
+      onPreviewTabChange: setActivePreviewTab,
     };
   };
 
@@ -1839,7 +2431,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) {
@@ -1924,7 +2521,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
@@ -1976,15 +2627,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]);
 
@@ -1993,79 +2651,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
    */
@@ -2073,17 +2662,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,
           },
@@ -2092,7 +2679,7 @@ const CommonTestAndPreview = (props) => {
         actions.getPrefilledValuesRequested(payload);
       }
     }
-  }, [selectedCustomer]);
+  }, [selectedCustomer, allTags.length, activeChannelForActions, activePreviewTab]);
 
   /**
    * Update custom values with prefilled values from API
@@ -2103,7 +2690,7 @@ 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] || '';
       });
 
@@ -2111,16 +2698,17 @@ const CommonTestAndPreview = (props) => {
 
       // Update preview with prefilled values (this is a valid preview call trigger)
       const payload = preparePreviewPayload(
-        channel,
+        activeChannelForActions,
         formData || {},
-        getCurrentContent,
+        activeContentForActions,
         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)
@@ -2213,11 +2801,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());
   };
 
   /**
@@ -2231,11 +2815,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
@@ -2271,17 +2851,17 @@ 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)
     const payload = preparePreviewPayload(
-      channel,
+      activeChannelForActions,
       formData || {},
-      getCurrentContent,
+      activeContentForActions,
       emptyValues,
       selectedCustomer
     );
@@ -2296,13 +2876,15 @@ const CommonTestAndPreview = (props) => {
   const handleUpdatePreview = async () => {
     try {
       const payload = preparePreviewPayload(
-        channel,
+        activeChannelForActions,
         formData || {},
-        getCurrentContent,
+        activeContentForActions,
         customValues,
         selectedCustomer
       );
       await actions.updatePreviewRequested(payload);
+
+      await syncSmsFallbackPreview(customValues, selectedCustomer);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
     } catch (error) {
       CapNotification.error({
@@ -2312,25 +2894,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;
+  };
 
-    // 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([]);
@@ -2338,10 +3010,9 @@ const CommonTestAndPreview = (props) => {
       return;
     }
 
-    // Extract tags
     setTagsExtracted(true);
     const { templateSubject, templateContent } = prepareTagExtractionPayload(
-      channel,
+      activeChannelForActions,
       formData || {},
       contentToExtract
     );
@@ -2361,7 +3032,7 @@ const CommonTestAndPreview = (props) => {
   const handleSendTestMessage = () => {
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
-      const group = testGroups.find((g) => g.groupId === entityId);
+      const group = testGroups.find((testGroup) => testGroup.groupId === entityId);
       if (group) {
         allUserIds.push(...group.userIds);
       } else {
@@ -2370,14 +3041,29 @@ const CommonTestAndPreview = (props) => {
     });
     const uniqueUserIds = [...new Set(allUserIds)];
 
-    // Create initial payload based on channel
+    const deliveryOverride = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP, CHANNELS.RCS].includes(channel)
+      ? testPreviewDeliverySettings[channel]
+      : null;
+
+    // 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 || {},
       getCurrentContent,
       customValues,
       uniqueUserIds,
-      previewData
+      previewData,
+      deliveryOverride,
+      channel === CHANNELS.RCS
+        ? {
+          smsFallbackTemplateContent:
+            smsFallbackTextForTagExtraction
+            || smsFallbackContent?.templateContent
+            || smsFallbackContent?.content
+            || '',
+        }
+        : {},
     );
 
     actions.createMessageMetaRequested(
@@ -2410,11 +3096,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}
@@ -2432,15 +3117,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: channel === CHANNELS.RCS && smsFallbackContent?.templateContent ? messages.smsFallbackTagsSectionTitle : null,
+          requiredTags: smsFallbackRequiredTags,
+          optionalTags: smsFallbackOptionalTags,
+        },
+      ]}
       handleCustomValueChange={handleCustomValueChange}
       handleDiscardCustomValues={handleDiscardCustomValues}
       handleUpdatePreview={handleUpdatePreview}
@@ -2449,6 +3148,13 @@ const CommonTestAndPreview = (props) => {
     />
   );
 
+  const handleSaveDeliverySettings = (values) => {
+    setTestPreviewDeliverySettings((prev) => ({
+      ...prev,
+      [channel]: values,
+    }));
+  };
+
   const renderSendTestMessage = () => (
     <SendTestMessage
       isFetchingTestCustomers={isFetchingTestCustomers}
@@ -2457,11 +3163,19 @@ const CommonTestAndPreview = (props) => {
       handleTestEntitiesChange={handleTestEntitiesChange}
       selectedTestEntities={selectedTestEntities}
       handleSendTestMessage={handleSendTestMessage}
-      formData={formData}
+      formData={formDataForSendTest}
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
       formatMessage={formatMessage}
+      deliverySettings={testPreviewDeliverySettings[channel]}
+      senderDetailsByChannel={senderDetailsByChannel}
+      wecrmAccounts={wecrmAccounts}
+      onSaveDeliverySettings={handleSaveDeliverySettings}
+      isLoadingSenderDetails={isLoadingSenderDetails}
+      smsTraiDltEnabled={smsTraiDltEnabled}
+      registeredSenderIds={registeredSenderIds}
+      isChannelSmsFallbackPreviewEnabled={channel === CHANNELS.RCS && !!smsFallbackContent?.templateContent}
     />
   );
 
@@ -2562,6 +3276,10 @@ CommonTestAndPreview.propTypes = {
   })),
   isSendingTestMessage: PropTypes.bool.isRequired,
   intl: PropTypes.object.isRequired,
+  senderDetailsByChannel: PropTypes.object,
+  wecrmAccounts: PropTypes.array,
+  isLoadingSenderDetails: PropTypes.bool,
+  orgUnitId: PropTypes.number,
 
   // Email-specific props
   beeInstance: PropTypes.object,
@@ -2597,6 +3315,10 @@ CommonTestAndPreview.defaultProps = {
   rcsOrientation: null,
   rcsIosPreview: false,
   templateLayoutType: null,
+  senderDetailsByChannel: {},
+  wecrmAccounts: [],
+  isLoadingSenderDetails: false,
+  orgUnitId: -1,
 };
 
 // ============================================