@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.16

package/v2Components/CommonTestAndPreview/index.js

@@ -31,13 +31,7 @@ import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
 
-import * as Api from '../../services/api';
-import {
-  smsTemplateHasMustacheTags,
-  buildSyntheticSmsMustacheTags,
-  normalizeRcsTestCardMedia,
-  mapRcsSuggestionForTestMeta,
-} from './utils';
+// Import constants
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
 // Import constants
@@ -87,23 +81,12 @@ import {
   IMAGE,
   VIDEO,
   URL,
-  PREVIEW_TAB_RCS,
-  PREVIEW_TAB_SMS_FALLBACK,
   CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
   DAYS,
-  RCS_TEST_META_CONTENT_TYPE_RICHCARD,
-  RCS_TEST_META_CARD_TYPE_STANDALONE,
-  RCS_TEST_META_CARD_ORIENTATION_VERTICAL,
-  RCS_TEST_META_CARD_WIDTH_SMALL,
 } from './constants';
-import { getCdnUrl } from '../../utils/cdnTransformation';
-import {
-  normalizePreviewApiPayload,
-  extractPreviewFromLiquidResponse,
-  getSmsFallbackTextForTagExtraction,
-} from './previewApiUtils';
-import { pickFirstSmsFallbackTemplateString } from '../../v2Containers/Rcs/rcsLibraryHydrationUtils';
 
+// Import utilities
+import { getCdnUrl } from '../../utils/cdnTransformation';
 import { isValidEmail, isValidMobile, formatPhoneNumber } from '../../utils/commonUtils';
 import { getMembersLookup } from '../../services/api';
 
@@ -126,32 +109,6 @@ const filterUsableGsmSendersForDomain = (domain, gsmSenders, { skipDomainNameEch
   });
 };
 
-/** Preview payload from Redux may be an Immutable Map — normalize for React state. */
-const toPlainPreviewData = (data) => {
-  if (data == null) return null;
-  const plain = typeof data.toJS === 'function' ? data.toJS() : data;
-  return normalizePreviewApiPayload(plain);
-};
-
-/**
- * Merge existing customValues with tag keys from categorized groups.
- * Each group is { required, optional } (arrays of tag objects with fullPath).
- * Preserves existing values; adds '' for any tag key not yet present.
- * Reusable for RCS+fallback and any flow that needs to ensure customValues has keys for tags.
- */
-const mergeCustomValuesWithTagKeys = (prev, ...categorizedGroups) => {
-  const next = { ...(prev || {}) };
-  categorizedGroups.forEach((group) => {
-    [...(group.required || []), ...(group.optional || [])].forEach((tag) => {
-      const key = tag?.fullPath;
-      if (key && next[key] === undefined) next[key] = '';
-    });
-  });
-  return next;
-};
-
-/** True when `body` contains `{{name}}` mustache tokens (user-fillable personalization tags).
- *  DLT `{#name#}` slots are pre-bound template variables and are intentionally excluded. */
 
 /**
  * CapTreeSelect and group resolution use strict equality; API data may mix numeric and string ids.
@@ -177,7 +134,7 @@ const testEntityIdsEqual = (a, b) => {
  */
 const CommonTestAndPreview = (props) => {
   const {
-    intl: { formatMessage, locale: userLocale = 'en' },
+    intl: { formatMessage },
     show,
     onClose,
     channel, // The channel: 'EMAIL', 'SMS', 'RCS', etc.
@@ -213,23 +170,13 @@ 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);
 
@@ -240,8 +187,6 @@ const CommonTestAndPreview = (props) => {
   const [customerData, setCustomerData] = useState({ name: '', email: '', mobile: '', customerId: '' });
 
   const [previewDevice, setPreviewDevice] = useState(initialDevice);
-  const [activePreviewTab, setActivePreviewTab] = useState(PREVIEW_TAB_RCS);
-  const [smsFallbackPreviewText, setSmsFallbackPreviewText] = useState(undefined);
   // Track if a preview call has been made (to know when to use previewDataHtml vs raw content)
   const [hasPreviewCallBeenMade, setHasPreviewCallBeenMade] = useState(false);
   const [previewDataHtml, setPreviewDataHtml] = useState(() => {
@@ -274,22 +219,15 @@ 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, CHANNELS.RCS];
+  const channelsWithDeliverySettings = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP];
   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)
+  // Fetch sender details and WeCRM accounts when Test & Preview opens for SMS/Email/WhatsApp
   useEffect(() => {
     if (!show || !channel) {
       return;
@@ -298,99 +236,39 @@ 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 = '', cdmaSenderId = '', senderEmail = '', senderMobNum = '',
+      domainId = '', gsmSenderId = '', senderEmail = '', senderMobNum = '',
     } = testPreviewDeliverySettings[channel] || {};
-    const isEmptySelection = !domainId && !gsmSenderId && !cdmaSenderId && !senderEmail && !senderMobNum;
+    const isEmptySelection = !domainId && !gsmSenderId && !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)))
+    const smsDomains = channel === CHANNELS.SMS && smsTraiDltEnabled
+      ? domains.filter((domain) => (domain.gsmSenders || []).some((gsm) => registeredSenderIds.includes(gsm.value)))
       : domains;
     const [defaultDomain] = domains;
     const [firstSmsDomain] = smsDomains;
@@ -405,8 +283,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,
@@ -439,29 +317,10 @@ 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(() => (
-    allRequiredTags.some((tag) => !customValues[tag.fullPath])
-  ), [allRequiredTags, customValues]);
+    requiredTags.some((tag) => !customValues[tag.fullPath])
+  ), [requiredTags, customValues]);
 
   // Get current content based on channel and editor type
   const getCurrentContent = useMemo(() => {
@@ -505,13 +364,6 @@ 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
@@ -564,70 +416,7 @@ const CommonTestAndPreview = (props) => {
     return content || '';
   }, [channel, formData, currentTab, beeContent, content, beeInstance]);
 
-  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
   // Build test entities tree data from testCustomers prop (includes customers added via addTestCustomer action)
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
@@ -636,7 +425,7 @@ const CommonTestAndPreview = (props) => {
       selectable: false,
       children: testGroups?.map((group) => ({
         title: group?.groupName,
-        value: normalizeTestEntityId(group?.groupId),
+        value: 'group:' + normalizeTestEntityId(group?.groupId),
       })),
     };
 
@@ -646,7 +435,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: normalizeTestEntityId(customer?.userId ?? customer?.customerId),
+        value: 'customer:' + normalizeTestEntityId(customer?.userId ?? customer?.customerId),
       })) || [],
     };
 
@@ -726,10 +515,11 @@ const CommonTestAndPreview = (props) => {
               email: customerData?.email || '',
               mobile: customerData?.mobile || '',
             });
+            const prefixedAddedId = 'customer:' + normalizedAddedId;
             setSelectedTestEntities((prev) => (
-              prev.some((id) => testEntityIdsEqual(id, normalizedAddedId))
+              prev.some((id) => id === prefixedAddedId)
                 ? prev
-                : [...prev, normalizedAddedId]
+                : [...prev, prefixedAddedId]
             ));
           }
           handleCloseCustomerModal();
@@ -793,33 +583,13 @@ const CommonTestAndPreview = (props) => {
           whatsappContent: formDataObj?.whatsappContent,
         };
 
-      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 }),
-          };
-        }
+      case CHANNELS.RCS:
         return {
           ...basePayload,
           messageBody: contentStr,
+        //   messageTitle: resolveTagsInText(formDataObj?.rcsTitle || '', customValuesObj),
+        //   rcsDesc: formDataObj?.rcsDesc,
         };
-      }
 
       case CHANNELS.INAPP:
         return {
@@ -859,37 +629,6 @@ 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
    */
@@ -913,32 +652,11 @@ const CommonTestAndPreview = (props) => {
           templateContent: contentStr,
         };
 
-      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.
+      case CHANNELS.RCS:
         return {
           templateSubject: formDataObj?.rcsTitle || '',
           templateContent: formDataObj?.rcsDesc || contentStr,
         };
-      }
 
       case CHANNELS.INAPP:
         return {
@@ -1011,7 +729,7 @@ const CommonTestAndPreview = (props) => {
     } = carousel || {};
     const buttonData = buttons.map((button, index) => {
       const {
-        type, text, phone_number: phoneNumber, urlType, url,
+        type, text, phone_number, urlType, url,
       } = button || {};
       const buttonObj = {
         type,
@@ -1019,7 +737,7 @@ const CommonTestAndPreview = (props) => {
         index,
       };
       if (type === PHONE_NUMBER) {
-        buttonObj.phoneNumber = phoneNumber;
+        buttonObj.phoneNumber = phone_number;
       }
       if (type === URL) {
         buttonObj.url = url;
@@ -1048,159 +766,7 @@ const CommonTestAndPreview = (props) => {
     };
   });
 
-  /**
-   * 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 = {},
-  ) => {
+  const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj, deliverySettingsOverride) => {
     // Base payload structure common to all channels
     const basePayload = {
       ouId: -1,
@@ -1281,12 +847,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,
@@ -1430,7 +996,7 @@ const CommonTestAndPreview = (props) => {
         return {
           ...basePayload,
           whatsappMessageContent: {
-            messageBody: resolvedMessageBody || templateEditorValue || '',
+            messageBody: templateEditorValue || '',
             accountId: formDataObj?.accountId || '',
             sourceAccountIdentifier: sourceAccountIdentifier || formDataObj?.sourceAccountIdentifier || '',
             accountName: formDataObj?.accountName || '',
@@ -1455,7 +1021,16 @@ const CommonTestAndPreview = (props) => {
       }
 
       case CHANNELS.RCS:
-        return buildRcsTestMessagePayload(formDataObj, contentStr, customValuesObj, deliverySettingsOverride, basePayload, rcsExtra);
+        return {
+          ...basePayload,
+          rcsMessageContent: {
+            channel: CHANNELS.RCS,
+            messageBody: contentStr,
+            rcsType: additionalProps?.rcsType,
+            rcsImageSrc: formDataObj?.rcsImageSrc,
+            rcsSuggestions: formDataObj?.rcsSuggestions,
+          },
+        };
 
       case CHANNELS.INAPP: {
         // InApp payload structure similar to MobilePush
@@ -2294,46 +1869,6 @@ 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 = {};
@@ -2395,14 +1930,42 @@ const CommonTestAndPreview = (props) => {
         contentObj = parsedContent || {};
       }
     } else if (channel === CHANNELS.RCS) {
-      // 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).
+      // 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
       let parsedRcsContent = content;
       if (typeof content === 'string') {
-        try { parsedRcsContent = JSON.parse(content); } catch (e) { parsedRcsContent = content; }
+        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 || {};
       }
-      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
@@ -2605,10 +2168,6 @@ const CommonTestAndPreview = (props) => {
       formatMessage,
       lastModified: formData?.lastModified,
       updatedByName: formData?.updatedByName,
-      smsFallbackContent: isRcsSmsFallbackPreviewEnabled ? smsFallbackContent : null,
-      smsFallbackResolvedText,
-      activePreviewTab,
-      onPreviewTabChange: setActivePreviewTab,
     };
   };
 
@@ -2648,12 +2207,7 @@ const CommonTestAndPreview = (props) => {
   }, [show, beeInstance, currentTab, channel]);
 
   /**
-   * 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.
+   * Initial data load when slidebox opens
    */
   useEffect(() => {
     if (show) {
@@ -2738,61 +2292,7 @@ const CommonTestAndPreview = (props) => {
         actions.getTestGroupsRequested();
       }
     }
-    // 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]);
+  }, [show, beeInstance, currentTab, channel]);
 
   /**
    * Email-specific: Handle content updates for both BEE and CKEditor
@@ -2844,22 +2344,15 @@ 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]);
 
@@ -2868,10 +2361,79 @@ const CommonTestAndPreview = (props) => {
    */
   useEffect(() => {
     if (previewData) {
-      setPreviewDataHtml(toPlainPreviewData(previewData));
+      setPreviewDataHtml(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
    */
@@ -2879,15 +2441,17 @@ 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 = {};
-      allRequiredTags.forEach((tag) => {
+      requiredTags.forEach((tag) => {
         requiredTagObj[tag?.fullPath] = '';
       });
       if (allTags.length > 0) {
         const payload = preparePreviewPayload(
-          activeChannelForActions,
+          channel,
           formData || {},
-          activeContentForActions,
+          getCurrentContent,
           {
             ...requiredTagObj,
           },
@@ -2896,7 +2460,7 @@ const CommonTestAndPreview = (props) => {
         actions.getPrefilledValuesRequested(payload);
       }
     }
-  }, [selectedCustomer, allTags.length, activeChannelForActions, activePreviewTab]);
+  }, [selectedCustomer]);
 
   /**
    * Update custom values with prefilled values from API
@@ -2907,29 +2471,24 @@ const CommonTestAndPreview = (props) => {
     if (prefilledValues && selectedCustomer) {
       // Always replace all values with prefilled values
       const updatedValues = {};
-      allTags.forEach((tag) => {
+      [...requiredTags, ...optionalTags].forEach((tag) => {
         updatedValues[tag?.fullPath] = prefilledValues[tag?.fullPath] || '';
       });
 
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values (this is a valid preview call trigger)
-      // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped.
-      // SMS fallback preview is kept in sync by syncSmsFallbackPreview via smsFallbackPreviewText.
-      const previewChannelForPrefill = channel === CHANNELS.RCS ? CHANNELS.RCS : activeChannelForActions;
-      const previewContentForPrefill = channel === CHANNELS.RCS ? getCurrentContent : activeContentForActions;
       const payload = preparePreviewPayload(
-        previewChannelForPrefill,
+        channel,
         formData || {},
-        previewContentForPrefill,
+        getCurrentContent,
         updatedValues,
         selectedCustomer
       );
       actions.updatePreviewRequested(payload);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
-      void syncSmsFallbackPreview(updatedValues, selectedCustomer);
     }
-  }, [JSON.stringify(prefilledValues), selectedCustomer, activeChannelForActions, activePreviewTab]);
+  }, [JSON.stringify(prefilledValues), selectedCustomer]);
 
   /**
    * Map channel constants to display names (lowercase for message)
@@ -3023,7 +2582,11 @@ const CommonTestAndPreview = (props) => {
     setTagsExtracted(true); // Auto-open custom values editor
 
     // Clear any existing values while waiting for prefilled values
-    setCustomValues(buildEmptyValues());
+    const emptyValues = {};
+    [...requiredTags, ...optionalTags].forEach((tag) => {
+      emptyValues[tag?.fullPath] = '';
+    });
+    setCustomValues(emptyValues);
   };
 
   /**
@@ -3037,7 +2600,11 @@ const CommonTestAndPreview = (props) => {
     actions.clearPreviewErrors();
 
     // Initialize empty values for all tags
-    setCustomValues(buildEmptyValues());
+    const emptyValues = {};
+    [...requiredTags, ...optionalTags].forEach((tag) => {
+      emptyValues[tag?.fullPath] = '';
+    });
+    setCustomValues(emptyValues);
 
     // Don't make preview call when clearing selection - just reset to raw content
     // Preview will be shown using raw formData/content
@@ -3073,20 +2640,17 @@ const CommonTestAndPreview = (props) => {
    */
   const handleDiscardCustomValues = () => {
     // Initialize empty values for all tags
-    const emptyValues = buildEmptyValues();
+    const emptyValues = {};
+    [...requiredTags, ...optionalTags].forEach((tag) => {
+      emptyValues[tag?.fullPath] = '';
+    });
     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(
-      previewChannelForDiscard,
+      channel,
       formData || {},
-      previewContentForDiscard,
+      getCurrentContent,
       emptyValues,
       selectedCustomer
     );
@@ -3100,24 +2664,14 @@ 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(
-        previewChannel,
+        channel,
         formData || {},
-        previewContent,
+        getCurrentContent,
         customValues,
         selectedCustomer
       );
       await actions.updatePreviewRequested(payload);
-
-      await syncSmsFallbackPreview(customValues, selectedCustomer);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
     } catch (error) {
       CapNotification.error({
@@ -3127,115 +2681,25 @@ const CommonTestAndPreview = (props) => {
   };
 
   /**
-   * Categorize extracted tags into required/optional.
-   */
-  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.
+   * Handle extract tags
    */
-  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]);
+  const handleExtractTags = () => {
+    // Get content based on channel
+    let contentToExtract = getCurrentContent;
 
-  /**
-   * Get content to run tag extraction on (channel-specific).
-   */
-  const getContentForTagExtraction = () => {
-    let contentToExtract = activeContentForActions;
     if (channel === CHANNELS.EMAIL && formData) {
       const currentTabData = formData[currentTab - 1];
       const activeTab = currentTabData?.activeTab;
       const templateContent = currentTabData?.[activeTab]?.['template-content'];
       contentToExtract = templateContent || contentToExtract;
     }
-    return contentToExtract;
-  };
-
-  /**
-   * Handle extract tags
-   */
-  const handleExtractTags = () => {
-    if (channel === CHANNELS.RCS) {
-      applyRcsSmsFallbackTagExtraction();
-      return;
-    }
 
-    const contentToExtract = getContentForTagExtraction();
+    // Check for personalization tags (excluding unsubscribe)
     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 (onlyUnsubscribe) {
+    if (!hasPersonalizationTags && tags.length === 1 && tags[0].includes(UNSUBSCRIBE_TAG_NAME)) {
+      // If only unsubscribe tag is present, show noTagsExtracted message
       setTagsExtracted(false);
       setRequiredTags([]);
       setOptionalTags([]);
@@ -3243,9 +2707,10 @@ const CommonTestAndPreview = (props) => {
       return;
     }
 
+    // Extract tags
     setTagsExtracted(true);
     const { templateSubject, templateContent } = prepareTagExtractionPayload(
-      activeChannelForActions,
+      channel,
       formData || {},
       contentToExtract
     );
@@ -3307,7 +2772,7 @@ const CommonTestAndPreview = (props) => {
     if (existingTestCustomer) {
       const entityId = existingTestCustomer.userId ?? existingTestCustomer.customerId;
       if (entityId != null) {
-        const id = normalizeTestEntityId(entityId);
+        const id = 'customer:' + normalizeTestEntityId(entityId);
         setSelectedTestEntities((prev) => (
           prev.some((existing) => testEntityIdsEqual(existing, id)) ? prev : [...prev, id]
         ));
@@ -3344,7 +2809,7 @@ const CommonTestAndPreview = (props) => {
           (c) => String(c?.customerId) === customerIdFromLookup || String(c?.userId) === customerIdFromLookup
         );
         if (alreadyInTestListByCustomerId) {
-          const id = normalizeTestEntityId(customerIdFromLookup);
+          const id = 'customer:' + normalizeTestEntityId(customerIdFromLookup);
           setSelectedTestEntities((prev) => (
             prev.some((existing) => testEntityIdsEqual(existing, id)) ? prev : [...prev, id]
           ));
@@ -3381,21 +2846,26 @@ const CommonTestAndPreview = (props) => {
   const handleSendTestMessage = () => {
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
-      const group = testGroups.find((g) => testEntityIdsEqual(g.groupId, entityId));
-      if (group) {
-        allUserIds.push(...group.userIds);
+      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);
+        }
       } else {
-        allUserIds.push(entityId);
+        const rawId = String(entityId).startsWith('customer:')
+          ? String(entityId).slice('customer:'.length)
+          : String(entityId);
+        allUserIds.push(Number(rawId));
       }
     });
     const uniqueUserIds = [...new Set(allUserIds)];
 
-    const deliveryOverride = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP, CHANNELS.RCS].includes(channel)
+    const deliveryOverride = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP].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.
+    // Create initial payload based on channel
     const initialPayload = prepareTestMessagePayload(
       channel,
       formData || content || {},
@@ -3403,8 +2873,7 @@ const CommonTestAndPreview = (props) => {
       customValues,
       uniqueUserIds,
       previewData,
-      deliveryOverride,
-      {},
+      deliveryOverride
     );
 
     actions.createMessageMetaRequested(
@@ -3437,10 +2906,11 @@ const CommonTestAndPreview = (props) => {
   // ============================================
   // RENDER HELPER FUNCTIONS
   // ============================================
+
   const renderLeftPanelContent = () => (
     <LeftPanelContent
-      isExtractingTags={isExtractingTags || isExtractingSmsFallbackTags}
-      extractedTags={leftPanelExtractedTags}
+      isExtractingTags={isExtractingTags}
+      extractedTags={extractedTags}
       selectedCustomer={selectedCustomer}
       handleCustomerSelect={handleCustomerSelect}
       handleSearchCustomer={handleSearchCustomer}
@@ -3458,29 +2928,15 @@ const CommonTestAndPreview = (props) => {
 
   const renderCustomValuesEditor = () => (
     <CustomValuesEditor
-      isExtractingTags={isExtractingTags || isExtractingSmsFallbackTags}
+      isExtractingTags={isExtractingTags}
       isUpdatePreviewDisabled={isUpdatePreviewDisabled}
       showJSON={showJSON}
       setShowJSON={setShowJSON}
       customValues={customValues}
       handleJSONTextChange={handleJSONTextChange}
-      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,
-        },
-      ]}
+      extractedTags={extractedTags}
+      requiredTags={requiredTags}
+      optionalTags={optionalTags}
       handleCustomValueChange={handleCustomValueChange}
       handleDiscardCustomValues={handleDiscardCustomValues}
       handleUpdatePreview={handleUpdatePreview}
@@ -3496,13 +2952,18 @@ const CommonTestAndPreview = (props) => {
     }));
   };
 
-  /** Trim pasted emails (trailing CR/LF). Allow any input for SMS; valid-only check is in renderAddTestCustomerButton. */
+  /** Trim pasted emails (trailing CR/LF). SMS: strip non-digits so pasted formatted numbers match isValidMobile / API. */
   const handleTestCustomersSearch = useCallback((value) => {
     if (value == null || value === '') {
       setSearchValue('');
       return;
     }
-    setSearchValue(String(value).trim());
+    const raw = String(value).trim();
+    if (channel === CHANNELS.SMS) {
+      setSearchValue(formatPhoneNumber(raw));
+    } else {
+      setSearchValue(raw);
+    }
   }, [channel]);
 
   const renderSendTestMessage = () => (
@@ -3520,13 +2981,12 @@ const CommonTestAndPreview = (props) => {
       renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
-      senderDetailsByChannel={senderDetailsByChannel}
+      senderDetailsOptions={senderDetailsByChannel[channel]}
       wecrmAccounts={wecrmAccounts}
       onSaveDeliverySettings={handleSaveDeliverySettings}
       isLoadingSenderDetails={isLoadingSenderDetails}
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
-      isChannelSmsFallbackPreviewEnabled={isRcsSmsFallbackPreviewEnabled}
       searchValue={searchValue}
       setSearchValue={handleTestCustomersSearch}
     />
@@ -3540,13 +3000,14 @@ 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(raw) : isValidMobile(formatPhoneNumber(raw)));
+      (channel === CHANNELS.EMAIL ? isValidEmail(value) : isValidMobile(value));
     if (!showAddButton) return null;
     return (
       <AddTestCustomerButton
-        searchValue={channel === CHANNELS.SMS ? formatPhoneNumber(raw) : raw}
+        searchValue={value}
         handleAddTestCustomer={handleAddTestCustomer}
       />
     );