@capillarytech/creatives-library 8.0.325 → 8.0.327-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,
@@ -87,6 +98,9 @@ import {
   getSmsFallbackTextForTagExtraction,
 } from './previewApiUtils';
 
+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).
@@ -186,6 +200,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 +280,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 +667,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 +713,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
    */
@@ -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 {
@@ -3155,6 +3399,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 +3425,7 @@ const CommonTestAndPreview = (props) => {
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
+      renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
       senderDetailsByChannel={senderDetailsByChannel}
@@ -3176,6 +3435,8 @@ const CommonTestAndPreview = (props) => {
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
       isChannelSmsFallbackPreviewEnabled={channel === CHANNELS.RCS && !!smsFallbackContent?.templateContent}
+      searchValue={searchValue}
+      setSearchValue={handleTestCustomersSearch}
     />
   );
 
@@ -3185,6 +3446,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 +3480,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 +3505,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 +3627,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;

package/v2Components/CommonTestAndPreview/messages.js

@@ -8,10 +8,84 @@ import { defineMessages } from 'react-intl';
 export const scope = 'app.v2Components.TestAndPreviewSlidebox';
 
 export default defineMessages({
+  mobileAlreadyExists: {
+    id: `${scope}.mobileAlreadyExists`,
+    defaultMessage: 'This phone number matches with already existing user profile. Please remove or use a different number.',
+  },
+  customerNamePlaceholder: {
+    id: `${scope}.customerNamePlaceholder`,
+    defaultMessage: 'Enter the name',
+  },
+  customerEmailPlaceholder: {
+    id: `${scope}.customerEmailPlaceholder`,
+    defaultMessage: 'Enter the Email',
+  },
+  customerMobilePlaceholder: {
+    id: `${scope}.customerMobilePlaceholder`,
+    defaultMessage: 'Enter the Mobile Number',
+  },
+  customerAlreadyInTestList: {
+    id: `${scope}.customerAlreadyInTestList`,
+    defaultMessage: 'This customer is already in the test customers list.',
+  },
+  emailAlreadyExists: {
+    id: `${scope}.emailAlreadyExists`,
+    defaultMessage: 'This email matches with already existing user profile. Please remove or use a different email.',
+  },
+  customerName: {
+    id: `${scope}.customerName`,
+    defaultMessage: 'Name',
+  },
+  customerNameOptional: {
+    id: `${scope}.customerNameOptional`,
+    defaultMessage: '(Optional)',
+  },
+  customerCreationInvalidEmail: {
+    id: `${scope}.customerCreationInvalidEmail`,
+    defaultMessage: 'Please enter a valid email address',
+  },
+  customerCreationInvalidMobile: {
+    id: `${scope}.customerCreationInvalidMobile`,
+    defaultMessage: 'Please enter a valid mobile number',
+  },
+  customerEmail: {
+    id: `${scope}.customerEmail`,
+    defaultMessage: 'Email',
+  },
+  customerMobile: {
+    id: `${scope}.customerMobileNumber`,
+    defaultMessage: 'Mobile Number',
+  },
+  saveButton: {
+    id: `${scope}.saveButton`,
+    defaultMessage: 'Save',
+  },
+  cancelButton: {
+    id: `${scope}.cancelButton`,
+    defaultMessage: 'Cancel',
+  },
+  customerID: {
+    id: `${scope}.customerID`,
+    defaultMessage: 'Customer ID',
+  },
+  existingCustomerModalDescription: {
+    id: `${scope}.existingCustomerModalDescription`,
+    defaultMessage: 'This user profile already exists in the system. Would you like to add them to Test Customer list?'
+  },
+
+  customerCreationModalTitle: {
+    id: `${scope}.customerCreationModalTitle`,
+    defaultMessage: 'Add new test customer',
+  },
+  customerCreationModalDescription: {
+    id: `${scope}.customerCreationModalDescription`,
+    defaultMessage: 'This customer profile will be available for testing across multiple communication channels.',
+  },
   testAndPreviewHeader: {
     id: `${scope}.testAndPreviewHeader`,
     defaultMessage: 'Preview and Test',
   },
+
   customerSearchTitle: {
     id: `${scope}.customerSearchTitle`,
     defaultMessage: 'Customer',
@@ -46,6 +120,34 @@ export default defineMessages({
     id: `${scope}.showJSON`,
     defaultMessage: 'Show JSON',
   },
+  addTestCustomer: {
+    id: `${scope}.addTestCustomer`,
+    defaultMessage: 'Add as Test Customer',
+  },
+  addTestCustomerWithValue: {
+    id: `${scope}.addTestCustomerWithValue`,
+    defaultMessage: 'Add {searchValue} as Test Customer',
+  },
+  memberLookupError: {
+    id: `${scope}.memberLookupError`,
+    defaultMessage: 'Unable to look up customer. Please try again.',
+  },
+  newTestCustomerAddedSuccess: {
+    id: `${scope}.newTestCustomerAddedSuccess`,
+    defaultMessage: 'New test customer added successfully!',
+  },
+  errorTitle: {
+    id: `${scope}.errorTitle`,
+    defaultMessage: 'Error',
+  },
+  failedToAddTestCustomer: {
+    id: `${scope}.failedToAddTestCustomer`,
+    defaultMessage: 'Failed to add test customer',
+  },
+  errorAddingTestCustomer: {
+    id: `${scope}.errorAddingTestCustomer`,
+    defaultMessage: 'An error occurred while adding test customer',
+  },
   discardCustomValues: {
     id: `${scope}.discardCustomValues`,
     defaultMessage: 'Discard custom values',
@@ -150,6 +252,10 @@ export default defineMessages({
     id: `${scope}.testCustomersPlaceholder`,
     defaultMessage: 'Search and select a group or individual test customers',
   },
+  noMatchingOptions: {
+    id: `${scope}.noMatchingOptions`,
+    defaultMessage: 'No matching options',
+  },
   updatingPreview: {
     id: `${scope}.updatingPreview`,
     defaultMessage: 'Updating preview with the latest changes',

package/v2Components/CommonTestAndPreview/reducer.js

@@ -20,6 +20,7 @@ import {
   GET_TEST_CUSTOMERS_REQUESTED,
   GET_TEST_CUSTOMERS_SUCCESS,
   GET_TEST_CUSTOMERS_FAILURE,
+  ADD_TEST_CUSTOMER,
   GET_TEST_GROUPS_REQUESTED,
   GET_TEST_GROUPS_SUCCESS,
   GET_TEST_GROUPS_FAILURE,
@@ -216,6 +217,15 @@ const previewAndTestReducer = (state = initialState, action) => {
       return state.set('isFetchingTestCustomers', false)
         .set('fetchTestCustomersError', action.payload.error);
 
+    case ADD_TEST_CUSTOMER: {
+      const raw = state.get('testCustomers');
+      const list = Array.isArray(raw) ? raw : (raw && raw.toArray ? raw.toArray().map((i) => (i && i.toJS ? i.toJS() : i)) : []);
+      const customer = action.payload.customer;
+      const newId = customer.userId || customer.customerId;
+      if (list.some((c) => (c.userId || c.customerId) === newId)) return state;
+      return state.set('testCustomers', list.concat([customer]));
+    }
+
     // Test Groups
     case GET_TEST_GROUPS_REQUESTED:
       return state.set('isFetchingTestGroups', true)

package/v2Components/CommonTestAndPreview/tests/AddTestCustomer.test.js

@@ -0,0 +1,66 @@
+/**
+ * Tests for AddTestCustomerButton Component
+ *
+ * The parent (index.js) only renders this button when channel is EMAIL/SMS and value is valid.
+ * This component always renders the button when mounted; visibility is the parent's responsibility.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import AddTestCustomerButton from '../AddTestCustomer';
+
+const mockMessages = {
+  'app.v2Components.TestAndPreviewSlidebox.addTestCustomerWithValue': 'Add {searchValue} as Test Customer',
+};
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {children}
+  </IntlProvider>
+);
+
+describe('AddTestCustomerButton', () => {
+  const defaultProps = {
+    searchValue: 'user@example.com',
+    handleAddTestCustomer: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render button with searchValue in message', () => {
+    render(
+      <TestWrapper>
+        <AddTestCustomerButton {...defaultProps} />
+      </TestWrapper>
+    );
+    const button = screen.getByRole('button', { name: /add.*test customer/i });
+    expect(button).toBeTruthy();
+  });
+
+  it('should show searchValue in button text', () => {
+    render(
+      <TestWrapper>
+        <AddTestCustomerButton {...defaultProps} searchValue="user@example.com" />
+      </TestWrapper>
+    );
+    expect(screen.getByRole('button', { name: /user@example.com/i })).toBeTruthy();
+  });
+
+  it('should call handleAddTestCustomer when button is clicked', () => {
+    const handleAddTestCustomer = jest.fn();
+    render(
+      <TestWrapper>
+        <AddTestCustomerButton
+          searchValue="user@example.com"
+          handleAddTestCustomer={handleAddTestCustomer}
+        />
+      </TestWrapper>
+    );
+    const button = screen.getByRole('button', { name: /add.*test customer/i });
+    fireEvent.click(button);
+    expect(handleAddTestCustomer).toHaveBeenCalledTimes(1);
+  });
+});