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

package/v2Components/CommonTestAndPreview/index.js

@@ -17,6 +17,9 @@ 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';
@@ -30,8 +33,16 @@ 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,
@@ -86,6 +97,10 @@ import {
   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
@@ -186,6 +201,20 @@ const mapRcsSuggestionForTestMeta = (suggestionRow, index) => ({
         : '',
 });
 
+/**
+ * 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);
+};
+
 /**
  * Preview Component Factory - REMOVED IN PHASE 5
  * Now using UnifiedPreview component for all channels
@@ -252,6 +281,11 @@ const CommonTestAndPreview = (props) => {
   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: '' });
+
   const [previewDevice, setPreviewDevice] = useState(initialDevice);
   const [activePreviewTab, setActivePreviewTab] = useState(PREVIEW_TAB_RCS);
   const [smsFallbackPreviewText, setSmsFallbackPreviewText] = useState(undefined);
@@ -634,19 +668,26 @@ const CommonTestAndPreview = (props) => {
   }, [channel, smsFallbackContent, smsFallbackPreviewText]);
 
   // Build test entities tree data from testCustomers prop
+  // Build test entities tree data from testCustomers prop (includes customers added via addTestCustomer action)
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
       title: 'Groups',
       value: 'groups-node',
       selectable: false,
-      children: testGroups?.map((group) => ({ title: group?.groupName, value: group?.groupId })),
+      children: testGroups?.map((group) => ({
+        title: group?.groupName,
+        value: normalizeTestEntityId(group?.groupId),
+      })),
     };
 
     const customersNode = {
       title: 'Individuals',
       value: 'customers-node',
       selectable: false,
-      children: testCustomers?.map((customer) => ({ title: customer.name, value: customer?.userId })),
+      children: testCustomers?.map((customer) => ({
+        title: customer?.name?.trim() || customer?.email?.trim() || customer?.mobile?.trim() || customer?.userId || customer?.customerId,
+        value: normalizeTestEntityId(customer?.userId ?? customer?.customerId),
+      })) || [],
     };
 
     return [groupsNode, customersNode];
@@ -673,6 +714,93 @@ 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
    */
@@ -912,78 +1040,77 @@ const CommonTestAndPreview = (props) => {
    * rcsMessageContent: { channel, accountId?, rcsRichCardContent: { contentType, cardType, cardSettings, cardContent }, smsFallBackContent? }
    * Then rcsDeliverySettings, executionParams, clientName last.
    */
-  const buildRcsTestMessagePayload = (formDataObj, _contentStr, customValuesObj, deliverySettingsOverride, basePayload, rcsExtra = {}) => {
-    const plainCustom =
-      customValuesObj != null && typeof customValuesObj.toJS === 'function'
-        ? customValuesObj.toJS()
-        : (customValuesObj || {});
-    const userVarMap = Object.fromEntries(
-      Object.entries(plainCustom).filter(([, v]) => v != null && String(v).trim() !== '')
-    );
-    const rcsData = formDataObj?.versions?.base?.content?.RCS ?? formDataObj?.content?.RCS ?? {};
-    const rcsContent = rcsData?.rcsContent || {};
-    const smsFallback = rcsData?.smsFallBackContent || {};
-    let cardContentList = [];
-    if (Array.isArray(rcsContent?.cardContent)) {
-      cardContentList = rcsContent.cardContent;
-    } else if (rcsContent?.cardContent) {
-      cardContentList = [rcsContent.cardContent];
+  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];
     }
-    // Merge test customValues into cardVarMapped (template snapshot + user-entered RCS + fallback SMS tags).
-    const cardContent = cardContentList.map((rcsCard) => {
-      const baseMap = rcsCard.cardVarMapped || {};
-      const mergedCardVarMapped =
-        Object.keys(userVarMap).length > 0 ? { ...baseMap, ...userVarMap } : baseMap;
-      const mediaNorm = rcsCard?.media ? normalizeRcsTestCardMedia(rcsCard.media) : undefined;
-      const suggestionsRaw = Array.isArray(rcsCard?.suggestions) ? rcsCard.suggestions : [];
-      const suggestionsMapped = suggestionsRaw.map((suggestionItem, i) =>
-        mapRcsSuggestionForTestMeta(suggestionItem, i));
+    // 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: rcsCard?.title ?? '',
-        description: rcsCard?.description ?? '',
-        mediaType: rcsCard?.mediaType ?? MEDIA_TYPE_TEXT,
-        ...(mediaNorm && { media: mediaNorm }),
-        ...(Object.keys(mergedCardVarMapped).length > 0 && { cardVarMapped: mergedCardVarMapped }),
-        ...(suggestionsMapped.length > 0 && { suggestions: suggestionsMapped }),
+        title: singleRcsCardPayload?.title ?? '',
+        description: singleRcsCardPayload?.description ?? '',
+        mediaType: singleRcsCardPayload?.mediaType ?? MEDIA_TYPE_TEXT,
+        ...(normalizedCardMediaForTestApi && { media: normalizedCardMediaForTestApi }),
+        ...(suggestionsFormattedForTestMeta.length > 0 && {
+          suggestions: suggestionsFormattedForTestMeta,
+        }),
       };
     });
-    // Prefer parent `smsFallbackContent` snapshot (rcsExtra) — includes VarSegment-resolved body via
-    // getSmsFallbackTextForTagExtraction. Nested formData.smsFallBackContent is often stale vs live editor.
-    const rcsExtraFallbackTemplate = rcsExtra?.smsFallbackTemplateContent;
-    const hasResolvedFallbackBodyFromRcsExtra =
-      rcsExtraFallbackTemplate != null
-      && String(rcsExtraFallbackTemplate).trim() !== '';
-    const smsMessageRaw = hasResolvedFallbackBodyFromRcsExtra
-      ? String(rcsExtraFallbackTemplate)
-      : (smsFallback?.smsContent ?? smsFallback?.message ?? '');
+    const smsFallbackTaggedTemplateBody = pickFirstSmsFallbackTemplateString(
+      smsFallbackFromCreativeForm,
+    ) || '';
     const smsSenderFromDelivery = deliverySettingsOverride?.cdmaSenderId?.includes('|')
       ? deliverySettingsOverride.cdmaSenderId.split('|')[1]
       : deliverySettingsOverride?.cdmaSenderId;
     const deliveryFallbackSmsId =
       typeof smsSenderFromDelivery === 'string' ? smsSenderFromDelivery.trim() : '';
     const creativeFallbackSmsId =
-      smsFallback?.senderId != null ? String(smsFallback.senderId).trim() : '';
+      smsFallbackFromCreativeForm?.senderId != null
+        ? String(smsFallbackFromCreativeForm.senderId).trim()
+        : '';
     const fallbackSmsSenderIdForChannel = deliveryFallbackSmsId || creativeFallbackSmsId || '';
 
     const smsFallBackContent =
-      smsMessageRaw.trim() !== ''
-        ? { message: smsMessageRaw }
+      smsFallbackTaggedTemplateBody.trim() !== ''
+        ? { message: smsFallbackTaggedTemplateBody }
         : undefined;
 
     // accountId: WeCRM account id (not sourceAccountIdentifier) for createMessageMeta
     const accountIdForMeta =
-      rcsContent?.accountId != null && String(rcsContent.accountId).trim() !== ''
-        ? String(rcsContent.accountId)
+      rcsContentFromForm?.accountId != null && String(rcsContentFromForm.accountId).trim() !== ''
+        ? String(rcsContentFromForm.accountId)
         : undefined;
 
     const rcsRichCardContent = {
       contentType: RCS_TEST_META_CONTENT_TYPE_RICHCARD,
-      cardType: rcsContent?.cardType ?? RCS_TEST_META_CARD_TYPE_STANDALONE,
-      cardSettings: rcsContent?.cardSettings ?? {
+      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,
       },
-      ...(cardContent.length > 0 && { cardContent }),
+      ...(cardContentForTestMetaApi.length > 0 && { cardContent: cardContentForTestMetaApi }),
     };
 
     const rcsMessageContent = {
@@ -2763,7 +2890,8 @@ const CommonTestAndPreview = (props) => {
    * Handle slidebox close
    */
   const handleClose = () => {
-    // Reset state when closing
+    // Reset state when closing (includes add-customer modal + tree search state)
+    handleCloseCustomerModal();
     setSelectedCustomer(null);
     setRequiredTags([]);
     setOptionalTags([]);
@@ -3023,16 +3151,132 @@ const CommonTestAndPreview = (props) => {
    * Handle test entities change
    */
   const handleTestEntitiesChange = (value) => {
-    setSelectedTestEntities(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) : '',
+    };
+  };
+
+  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((testGroup) => testGroup.groupId === entityId);
+      const group = testGroups.find((g) => testEntityIdsEqual(g.groupId, entityId));
       if (group) {
         allUserIds.push(...group.userIds);
       } else {
@@ -3055,15 +3299,7 @@ const CommonTestAndPreview = (props) => {
       uniqueUserIds,
       previewData,
       deliveryOverride,
-      channel === CHANNELS.RCS
-        ? {
-          smsFallbackTemplateContent:
-            smsFallbackTextForTagExtraction
-            || smsFallbackContent?.templateContent
-            || smsFallbackContent?.content
-            || '',
-        }
-        : {},
+      {},
     );
 
     actions.createMessageMetaRequested(
@@ -3155,6 +3391,20 @@ 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}
@@ -3167,6 +3417,7 @@ const CommonTestAndPreview = (props) => {
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
+      renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
       senderDetailsByChannel={senderDetailsByChannel}
@@ -3176,6 +3427,8 @@ const CommonTestAndPreview = (props) => {
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
       isChannelSmsFallbackPreviewEnabled={channel === CHANNELS.RCS && !!smsFallbackContent?.templateContent}
+      searchValue={searchValue}
+      setSearchValue={handleTestCustomersSearch}
     />
   );
 
@@ -3185,6 +3438,21 @@ 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">
@@ -3204,14 +3472,18 @@ const CommonTestAndPreview = (props) => {
       show={show}
       size="size-xl"
       content={(
-        <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 */}
+        <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 */}
               {config.enableTestMessage !== false && (
                 <CapRow className="panel-section send-test-section">
                   {renderSendTestMessage()}
@@ -3225,7 +3497,27 @@ const CommonTestAndPreview = (props) => {
               {renderPreview()}
             </CapRow>
           </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>
       )}
     />
   );
@@ -3327,4 +3619,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;