@capillarytech/creatives-library 8.0.330-alpha.0 → 8.0.330

package/v2Components/CommonTestAndPreview/index.js

@@ -8,7 +8,7 @@
 
 import PropTypes from 'prop-types';
 import React, {
-  useState, useEffect, useMemo, useRef, useCallback,
+  useState, useEffect, useMemo, useRef,
 } from 'react';
 import { FormattedMessage } from 'react-intl';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
@@ -17,9 +17,6 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CustomerCreationModal from './CustomerCreationModal';
-import { createTestCustomer } from '../../services/api';
 
 // Import messages and styles
 import messages from './messages';
@@ -31,18 +28,9 @@ import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
 
-import * as Api from '../../services/api';
-import { extractTemplateVariables } from '../../utils/templateVarUtils';
-import AddTestCustomerButton from './AddTestCustomer';
-import ExistingCustomerModal from './ExistingCustomerModal';
 // Import constants
 import {
   CHANNELS,
-  CUSTOMER_MODAL_NEW,
-  CUSTOMER_MODAL_EXISTING,
-  IDENTIFIER_TYPE_EMAIL,
-  IDENTIFIER_TYPE_MOBILE,
-  IDENTIFIER_TYPE_PHONE,
   TEST,
   DESKTOP,
   ANDROID,
@@ -82,138 +70,10 @@ import {
   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 { getCdnUrl } from '../../utils/cdnTransformation';
-import {
-  normalizePreviewApiPayload,
-  extractPreviewFromLiquidResponse,
-  getSmsFallbackTextForTagExtraction,
-} from './previewApiUtils';
-import { pickFirstSmsFallbackTemplateString } from '../../v2Containers/Rcs/rcsLibraryHydrationUtils';
-
-import { isValidEmail, isValidMobile, formatPhoneNumber } from '../../utils/commonUtils';
-import { getMembersLookup } from '../../services/api';
-
-/**
- * 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)
-        : '',
-});
-
-/**
- * CapTreeSelect and group resolution use strict equality; API data may mix numeric and string ids.
- */
-const normalizeTestEntityId = (id) => {
-  if (id === undefined || id === null) return id;
-  return String(id);
-};
-
-const testEntityIdsEqual = (a, b) => {
-  if (a == null && b == null) return true;
-  if (a == null || b == null) return false;
-  return String(a) === String(b);
-};
+// Import utilities
+import { getCdnUrl } from '../../utils/cdnTransformation';
 
 /**
  * Preview Component Factory - REMOVED IN PHASE 5
@@ -225,7 +85,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.
@@ -261,34 +121,19 @@ 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);
-
-  const initialDevice = CHANNELS_USING_ANDROID_PREVIEW_DEVICE.includes(channel) ? ANDROID : DESKTOP;
-  const [searchValue, setSearchValue] = useState("");
-  const [customerModal, setCustomerModal] = useState([false, ""]);
-  const [isCustomerDataLoading, setIsCustomerDataLoading] = useState(false);
-  const [customerData, setCustomerData] = useState({ name: '', email: '', mobile: '', customerId: '' });
-
+  // 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 [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(() => {
@@ -321,22 +166,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;
@@ -345,10 +183,6 @@ 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 });
       }
@@ -360,84 +194,20 @@ const CommonTestAndPreview = (props) => {
   // 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;
@@ -452,8 +222,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,
@@ -486,29 +256,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(() => {
@@ -552,13 +303,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
@@ -604,90 +348,20 @@ 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 from testCustomers prop (includes customers added via addTestCustomer action)
+  // Build test entities tree data
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
       title: 'Groups',
       value: 'groups-node',
       selectable: false,
-      children: testGroups?.map((group) => ({
-        title: group?.groupName,
-        value: normalizeTestEntityId(group?.groupId),
-      })),
+      children: testGroups?.map((group) => ({ title: group?.groupName, value: group?.groupId })),
     };
 
     const customersNode = {
       title: 'Individuals',
       value: 'customers-node',
       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),
-      })) || [],
+      children: testCustomers?.map((customer) => ({ title: customer.name, value: customer?.userId })),
     };
 
     return [groupsNode, customersNode];
@@ -714,93 +388,6 @@ const CommonTestAndPreview = (props) => {
     return resolvedText;
   };
 
-  /**
-   * Common handler for saving test customers (both new and existing)
-   */
-  const handleSaveTestCustomer = async (validationErrors = {}, setIsLoading = () => {}) => {
-    // Check for validation errors before saving (for new customers)
-    if (customerModal[1] === CUSTOMER_MODAL_NEW && (validationErrors.email || validationErrors.mobile)) {
-      return;
-    }
-
-    setIsLoading(true);
-    
-    try {
-      let payload;
-      
-      if (customerModal[1] === CUSTOMER_MODAL_EXISTING) {
-        // For existing customers, use customerId
-        payload = {
-          campaignUserId: customerData.customerId
-        };
-      } else {
-        // For new customers, use customer object
-        payload = {
-          customer: {
-            firstName: customerData.name || "",
-            mobile: customerData.mobile || "",
-            email: customerData.email || ""
-          }
-        };
-      }
-
-      const response = await createTestCustomer(payload);
-      
-
-        // Handle success: add to test customers list and selection (existing and new)
-        if (response && response.success) {
-          CapNotification.success({
-            message: formatMessage(messages.newTestCustomerAddedSuccess),
-          });
-          // API may return customerId in response.response (e.g. { response: { customerId: 438845651 } })
-          const res = response?.response || response;
-          const addedId = customerModal[1] === CUSTOMER_MODAL_EXISTING
-            ? customerData?.customerId || customerData?.campaignUserId
-            : res?.customerId || res?.campaignUserId;
-          if (addedId) {
-            const normalizedAddedId = normalizeTestEntityId(addedId);
-            actions.addTestCustomer({
-              userId: normalizedAddedId,
-              customerId: normalizedAddedId,
-              name: customerData?.name?.trim() || '',
-              email: customerData?.email || '',
-              mobile: customerData?.mobile || '',
-            });
-            setSelectedTestEntities((prev) => (
-              prev.some((id) => testEntityIdsEqual(id, normalizedAddedId))
-                ? prev
-                : [...prev, normalizedAddedId]
-            ));
-          }
-          handleCloseCustomerModal();
-        } else {
-          // Show error notification for unsuccessful response
-          CapNotification.error({
-            message: formatMessage(messages.errorTitle),
-            description: response?.message || formatMessage(messages.failedToAddTestCustomer),
-          });
-        }
-    } catch (error) {
-      CapNotification.error({
-        message: formatMessage(messages.errorTitle),
-        description: error?.message || formatMessage(messages.errorAddingTestCustomer),
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCloseCustomerModal = () => {
-    setCustomerModal([false, ""]);
-    setSearchValue('');
-    setCustomerData({
-      name: '',
-      email: '',
-      mobile: '',
-      customerId: '',
-    });
-  };
-
   /**
    * Prepare payload for preview API based on channel
    */
@@ -873,37 +460,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
    */
@@ -998,7 +554,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,
@@ -1006,7 +562,7 @@ const CommonTestAndPreview = (props) => {
         index,
       };
       if (type === PHONE_NUMBER) {
-        buttonObj.phoneNumber = phoneNumber;
+        buttonObj.phoneNumber = phone_number;
       }
       if (type === URL) {
         buttonObj.url = url;
@@ -1035,130 +591,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,
-        }),
-      };
-    });
-    const smsFallbackTaggedTemplateBody = 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 || '';
-
-    const smsFallBackContent =
-      smsFallbackTaggedTemplateBody.trim() !== ''
-        ? { message: smsFallbackTaggedTemplateBody }
-        : 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,
@@ -1239,12 +672,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,
@@ -1388,7 +821,7 @@ const CommonTestAndPreview = (props) => {
         return {
           ...basePayload,
           whatsappMessageContent: {
-            messageBody: resolvedMessageBody || templateEditorValue || '',
+            messageBody: templateEditorValue || '',
             accountId: formDataObj?.accountId || '',
             sourceAccountIdentifier: sourceAccountIdentifier || formDataObj?.sourceAccountIdentifier || '',
             accountName: formDataObj?.accountName || '',
@@ -1413,7 +846,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
@@ -2515,10 +1957,6 @@ const CommonTestAndPreview = (props) => {
       formatMessage,
       lastModified: formData?.lastModified,
       updatedByName: formData?.updatedByName,
-      smsFallbackContent: isRcsSmsFallbackPreviewEnabled ? smsFallbackContent : null,
-      smsFallbackResolvedText,
-      activePreviewTab,
-      onPreviewTabChange: setActivePreviewTab,
     };
   };
 
@@ -2558,12 +1996,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) {
@@ -2648,61 +2081,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
@@ -2754,22 +2133,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]);
 
@@ -2778,10 +2150,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
    */
@@ -2789,15 +2230,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,
           },
@@ -2806,7 +2249,7 @@ const CommonTestAndPreview = (props) => {
         actions.getPrefilledValuesRequested(payload);
       }
     }
-  }, [selectedCustomer, allTags.length, activeChannelForActions, activePreviewTab]);
+  }, [selectedCustomer]);
 
   /**
    * Update custom values with prefilled values from API
@@ -2817,7 +2260,7 @@ 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] || '';
       });
 
@@ -2825,17 +2268,16 @@ const CommonTestAndPreview = (props) => {
 
       // Update preview with prefilled values (this is a valid preview call trigger)
       const payload = preparePreviewPayload(
-        activeChannelForActions,
+        channel,
         formData || {},
-        activeContentForActions,
+        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)
@@ -2890,8 +2332,7 @@ const CommonTestAndPreview = (props) => {
    * Handle slidebox close
    */
   const handleClose = () => {
-    // Reset state when closing (includes add-customer modal + tree search state)
-    handleCloseCustomerModal();
+    // Reset state when closing
     setSelectedCustomer(null);
     setRequiredTags([]);
     setOptionalTags([]);
@@ -2929,7 +2370,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);
   };
 
   /**
@@ -2943,7 +2388,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
@@ -2979,17 +2428,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)
     const payload = preparePreviewPayload(
-      activeChannelForActions,
+      channel,
       formData || {},
-      activeContentForActions,
+      getCurrentContent,
       emptyValues,
       selectedCustomer
     );
@@ -3004,15 +2453,13 @@ const CommonTestAndPreview = (props) => {
   const handleUpdatePreview = async () => {
     try {
       const payload = preparePreviewPayload(
-        activeChannelForActions,
+        channel,
         formData || {},
-        activeContentForActions,
+        getCurrentContent,
         customValues,
         selectedCustomer
       );
       await actions.updatePreviewRequested(payload);
-
-      await syncSmsFallbackPreview(customValues, selectedCustomer);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
     } catch (error) {
       CapNotification.error({
@@ -3022,115 +2469,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([]);
@@ -3138,9 +2495,10 @@ const CommonTestAndPreview = (props) => {
       return;
     }
 
+    // Extract tags
     setTagsExtracted(true);
     const { templateSubject, templateContent } = prepareTagExtractionPayload(
-      activeChannelForActions,
+      channel,
       formData || {},
       contentToExtract
     );
@@ -3151,132 +2509,16 @@ const CommonTestAndPreview = (props) => {
    * Handle test entities change
    */
   const handleTestEntitiesChange = (value) => {
-    if (!Array.isArray(value)) {
-      if (value == null || value === '') {
-        setSelectedTestEntities([]);
-        return;
-      }
-      setSelectedTestEntities([normalizeTestEntityId(value)]);
-      return;
-    }
-    setSelectedTestEntities(value.map((v) => normalizeTestEntityId(v)));
-  };
-
-  /**
-   * Map API customerDetails item to our customerData shape
-   */
-  const mapCustomerDetailsToCustomerData = (detail, identifierValue) => {
-    const firstName = detail.firstName || '';
-    const lastName = detail.lastName || '';
-    const name = [firstName, lastName].filter(Boolean).join(' ').trim() || '';
-    const getIdentifierValue = (type) => {
-      const fromIdentifiers = detail.identifiers?.find((i) => i.type === type)?.value;
-      if (fromIdentifiers) return fromIdentifiers;
-      const fromCommChannels = detail.commChannels?.find((c) => c.type === type)?.value;
-      return fromCommChannels || (channel === CHANNELS.EMAIL && type === IDENTIFIER_TYPE_EMAIL ? identifierValue : channel === CHANNELS.SMS && type === IDENTIFIER_TYPE_MOBILE ? identifierValue : '');
-    };
-    return {
-      name,
-      email: channel === CHANNELS.EMAIL ? (getIdentifierValue(IDENTIFIER_TYPE_EMAIL) || identifierValue) : (getIdentifierValue(IDENTIFIER_TYPE_EMAIL) || ''),
-      mobile: channel === CHANNELS.SMS ? (getIdentifierValue(IDENTIFIER_TYPE_MOBILE) || getIdentifierValue(IDENTIFIER_TYPE_PHONE) || identifierValue) : (getIdentifierValue(IDENTIFIER_TYPE_MOBILE) || getIdentifierValue(IDENTIFIER_TYPE_PHONE) || ''),
-      customerId: detail.userId != null ? String(detail.userId) : '',
-    };
+    setSelectedTestEntities(value);
   };
 
-  const handleAddTestCustomer = async () => {
-    const identifierType = channel === CHANNELS.EMAIL ? IDENTIFIER_TYPE_EMAIL : IDENTIFIER_TYPE_MOBILE;
-    const searchValueToCheck = channel === CHANNELS.SMS
-      ? formatPhoneNumber((searchValue || '').trim())
-      : (searchValue || '').trim();
-    
-    // Check if this customer is already in the test customers list
-    const existingTestCustomer = testCustomers?.find(customer => {
-      if (channel === CHANNELS.EMAIL) {
-        return customer.email === searchValueToCheck;
-      } else if (channel === CHANNELS.SMS) {
-        return customer.mobile === searchValueToCheck;
-      }
-      return false;
-    });
-
-    if (existingTestCustomer) {
-      const entityId = existingTestCustomer.userId ?? existingTestCustomer.customerId;
-      if (entityId != null) {
-        const id = normalizeTestEntityId(entityId);
-        setSelectedTestEntities((prev) => (
-          prev.some((existing) => testEntityIdsEqual(existing, id)) ? prev : [...prev, id]
-        ));
-      }
-      setSearchValue('');
-      CapNotification.success({
-        message: formatMessage(messages.customerAlreadyInTestList),
-      });
-      return;
-    }
-
-    setIsCustomerDataLoading(true);
-
-    try {
-      const response = await getMembersLookup(identifierType, searchValueToCheck);
-      const success = response?.success && !response?.status?.isError;
-      const res = response?.response || {};
-      const exists = res.exists || false;
-      const details = res.customerDetails || [];
-
-      if (!success) {
-        const errorMessage = response?.message || response?.status?.message || formatMessage(messages.memberLookupError);
-        CapNotification.error({
-          message: formatMessage(messages.memberLookupError),
-          description: errorMessage,
-        });
-        return;
-      }
-
-      if (exists && details.length > 0) {
-        const mapped = mapCustomerDetailsToCustomerData(details[0], searchValueToCheck);
-        const customerIdFromLookup = mapped.customerId;
-        const alreadyInTestListByCustomerId = customerIdFromLookup && testCustomers?.some(
-          (c) => String(c?.customerId) === customerIdFromLookup || String(c?.userId) === customerIdFromLookup
-        );
-        if (alreadyInTestListByCustomerId) {
-          const id = normalizeTestEntityId(customerIdFromLookup);
-          setSelectedTestEntities((prev) => (
-            prev.some((existing) => testEntityIdsEqual(existing, id)) ? prev : [...prev, id]
-          ));
-          setSearchValue('');
-          CapNotification.success({
-            message: formatMessage(messages.customerAlreadyInTestList),
-          });
-          return;
-        }
-        setCustomerData(mapped);
-        setCustomerModal([true, CUSTOMER_MODAL_EXISTING]);
-      } else {
-        setCustomerData({
-          name: '',
-          email: channel === CHANNELS.EMAIL ? searchValueToCheck : '',
-          mobile: channel === CHANNELS.SMS ? searchValueToCheck : '',
-          customerId: '',
-        });
-        setCustomerModal([true, CUSTOMER_MODAL_NEW]);
-      }
-    } catch {
-      CapNotification.error({
-        message: formatMessage(messages.memberLookupError),
-        description: formatMessage(messages.memberLookupError),
-      });
-    } finally {
-      setIsCustomerDataLoading(false);
-    }
-  };
-  
   /**
    * Handle send test message
    */
   const handleSendTestMessage = () => {
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
-      const group = testGroups.find((g) => testEntityIdsEqual(g.groupId, entityId));
+      const group = testGroups.find((g) => g.groupId === entityId);
       if (group) {
         allUserIds.push(...group.userIds);
       } else {
@@ -3285,12 +2527,11 @@ const CommonTestAndPreview = (props) => {
     });
     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 || {},
@@ -3298,8 +2539,7 @@ const CommonTestAndPreview = (props) => {
       customValues,
       uniqueUserIds,
       previewData,
-      deliveryOverride,
-      {},
+      deliveryOverride
     );
 
     actions.createMessageMetaRequested(
@@ -3332,10 +2572,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}
@@ -3353,29 +2594,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: channel === CHANNELS.RCS && smsFallbackContent?.templateContent ? messages.smsFallbackTagsSectionTitle : null,
-          requiredTags: smsFallbackRequiredTags,
-          optionalTags: smsFallbackOptionalTags,
-        },
-      ]}
+      extractedTags={extractedTags}
+      requiredTags={requiredTags}
+      optionalTags={optionalTags}
       handleCustomValueChange={handleCustomValueChange}
       handleDiscardCustomValues={handleDiscardCustomValues}
       handleUpdatePreview={handleUpdatePreview}
@@ -3391,20 +2618,6 @@ const CommonTestAndPreview = (props) => {
     }));
   };
 
-  /** 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;
-    }
-    const raw = String(value).trim();
-    if (channel === CHANNELS.SMS) {
-      setSearchValue(formatPhoneNumber(raw));
-    } else {
-      setSearchValue(raw);
-    }
-  }, [channel]);
-
   const renderSendTestMessage = () => (
     <SendTestMessage
       isFetchingTestCustomers={isFetchingTestCustomers}
@@ -3417,18 +2630,14 @@ const CommonTestAndPreview = (props) => {
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
-      renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
-      senderDetailsByChannel={senderDetailsByChannel}
+      senderDetailsOptions={senderDetailsByChannel[channel]}
       wecrmAccounts={wecrmAccounts}
       onSaveDeliverySettings={handleSaveDeliverySettings}
       isLoadingSenderDetails={isLoadingSenderDetails}
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
-      isChannelSmsFallbackPreviewEnabled={channel === CHANNELS.RCS && !!smsFallbackContent?.templateContent}
-      searchValue={searchValue}
-      setSearchValue={handleTestCustomersSearch}
     />
   );
 
@@ -3438,21 +2647,6 @@ const CommonTestAndPreview = (props) => {
     />
   );
 
-  const renderAddTestCustomerButton = () => {
-    const raw = (searchValue || '').trim();
-    const value = channel === CHANNELS.SMS ? formatPhoneNumber(raw) : raw;
-    const showAddButton =
-      [CHANNELS.EMAIL, CHANNELS.SMS].includes(channel) &&
-      (channel === CHANNELS.EMAIL ? isValidEmail(value) : isValidMobile(value));
-    if (!showAddButton) return null;
-    return (
-      <AddTestCustomerButton
-        searchValue={value}
-        handleAddTestCustomer={handleAddTestCustomer}
-      />
-    );
-  };
-
   // Header content for the slidebox
   const slideboxHeader = (
     <CapRow className="test-preview-header">
@@ -3472,18 +2666,14 @@ const CommonTestAndPreview = (props) => {
       show={show}
       size="size-xl"
       content={(
-        <CapSpin
-          spinning={isCustomerDataLoading}
-          className={`common-test-preview-lookup-spin ${isCustomerDataLoading ? 'common-test-preview-customer-loading' : ''}`}
-        >
-          <CapRow className="test-preview-container">
-            <CapRow className="test-and-preview-panels">
-              {/* Left Panel */}
-              <CapRow className="left-panel">
-                {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}
-                <CapDivider className="panel-divider" />
-
-                {/* Send Test Message Section */}
+        <CapRow className="test-preview-container">
+          <CapRow className="test-and-preview-panels">
+            {/* Left Panel */}
+            <CapRow className="left-panel">
+              {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}
+              <CapDivider className="panel-divider" />
+
+              {/* Send Test Message Section */}
               {config.enableTestMessage !== false && (
                 <CapRow className="panel-section send-test-section">
                   {renderSendTestMessage()}
@@ -3497,27 +2687,7 @@ const CommonTestAndPreview = (props) => {
               {renderPreview()}
             </CapRow>
           </CapRow>
-          {customerModal[0] && customerModal[1] === CUSTOMER_MODAL_EXISTING && (
-            <ExistingCustomerModal
-              customerData={customerData}
-              onCloseCustomerModal={handleCloseCustomerModal}
-              customerModal={customerModal}
-              channel={channel}
-              onSave={handleSaveTestCustomer}
-            />
-          )}
-          {customerModal[0] && customerModal[1] === CUSTOMER_MODAL_NEW && (
-            <CustomerCreationModal
-              customerData={customerData}
-              setCustomerData={setCustomerData}
-              onCloseCustomerModal={handleCloseCustomerModal}
-              customerModal={customerModal}
-              onSave={handleSaveTestCustomer}
-              channel={channel}
-            />
-          )}
-          </CapRow>
-        </CapSpin>
+        </CapRow>
       )}
     />
   );
@@ -3619,4 +2789,4 @@ CommonTestAndPreview.defaultProps = {
 // Note: Redux connection is handled by the wrapper components (e.g., TestAndPreviewSlidebox)
 // This component receives all Redux props (including intl) from its parent
 
-export default CommonTestAndPreview;
+export default CommonTestAndPreview;