@capillarytech/creatives-library 8.0.298 → 8.0.299-alpha.4

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';
@@ -27,10 +30,16 @@ import LeftPanelContent from './LeftPanelContent';
 import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
-
+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,
@@ -74,6 +83,8 @@ import {
 
 // Import utilities
 import { getCdnUrl } from '../../utils/cdnTransformation';
+import { isValidEmail, isValidMobile } from '../../utils/commonUtils';
+import { getMembersLookup } from '../../services/api';
 
 /**
  * Preview Component Factory - REMOVED IN PHASE 5
@@ -130,6 +141,11 @@ const CommonTestAndPreview = (props) => {
   const [customValues, setCustomValues] = useState({});
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
+  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;
@@ -155,6 +171,9 @@ const CommonTestAndPreview = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately (EMAIL only)
   const previousBeeContentRef = useRef(''); // Track previous BEE content (EMAIL only)
+  // Container for notifications so they render inside the slidebox (visible in campaigns/library mode)
+  const notificationContainerRef = useRef(null);
+  const getNotificationContainer = () => notificationContainerRef.current || document.body;
   // Delivery settings for Test and Preview (SMS, Email, WhatsApp) — user selection only
   const [testPreviewDeliverySettings, setTestPreviewDeliverySettings] = useState({
     [CHANNELS.SMS]: {
@@ -348,7 +367,7 @@ const CommonTestAndPreview = (props) => {
     return content || '';
   }, [channel, formData, currentTab, beeContent, content, beeInstance]);
 
-  // Build test entities tree data
+  // Build test entities tree data from testCustomers prop (includes customers added via addTestCustomer action)
   const testEntitiesTreeData = useMemo(() => {
     const groupsNode = {
       title: 'Groups',
@@ -361,7 +380,10 @@ const CommonTestAndPreview = (props) => {
       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: customer?.userId ?? customer?.customerId,
+      })) || [],
     };
 
     return [groupsNode, customersNode];
@@ -388,6 +410,94 @@ const CommonTestAndPreview = (props) => {
     return resolvedText;
   };
 
+  /**
+   * Common handler for saving test customers (both new and existing)
+   */
+  const handleSaveTestCustomer = async (validationErrors = {},setIsLoading = false) => {
+    // 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 = {
+          customerId: 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),
+            getContainer: getNotificationContainer,
+          });
+          // 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
+            : res?.customerId;
+          if (addedId) {
+            actions.addTestCustomer({
+              userId: addedId,
+              customerId: addedId,
+              name: customerData?.name?.trim() || '',
+              email: customerData?.email || '',
+              mobile: customerData?.mobile || '',
+            });
+            setSelectedTestEntities((prev) => [...prev, addedId]);
+          }
+          handleCloseCustomerModal();
+        } else {
+          // Show error notification for unsuccessful response
+          CapNotification.error({
+            message: formatMessage(messages.errorTitle),
+            description: response?.message || formatMessage(messages.failedToAddTestCustomer),
+            getContainer: getNotificationContainer,
+          });
+        }
+    } catch (error) {
+      if (customerModal[1] === CUSTOMER_MODAL_EXISTING) {
+        // Show error notification for caught exceptions (existing customers only)
+        CapNotification.error({
+          message: formatMessage(messages.errorTitle),
+          description: error?.message || formatMessage(messages.errorAddingTestCustomer),
+          getContainer: getNotificationContainer,
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCloseCustomerModal = () => {
+    setCustomerModal([false, ""]);
+    setSearchValue('');
+    setCustomerData({
+      name: '',
+      email: '',
+      mobile: '',
+      customerId: '',
+    });
+  };
+
   /**
    * Prepare payload for preview API based on channel
    */
@@ -2418,6 +2528,7 @@ const CommonTestAndPreview = (props) => {
     } catch (error) {
       CapNotification.error({
         message: formatMessage(messages.invalidJSON),
+        getContainer: getNotificationContainer,
       });
     }
   };
@@ -2464,6 +2575,7 @@ const CommonTestAndPreview = (props) => {
     } catch (error) {
       CapNotification.error({
         message: formatMessage(messages.previewUpdateError),
+        getContainer: getNotificationContainer,
       });
     }
   };
@@ -2472,7 +2584,6 @@ const CommonTestAndPreview = (props) => {
    * Handle extract tags
    */
   const handleExtractTags = () => {
-    // Get content based on channel
     let contentToExtract = getCurrentContent;
 
     if (channel === CHANNELS.EMAIL && formData) {
@@ -2512,6 +2623,110 @@ const CommonTestAndPreview = (props) => {
     setSelectedTestEntities(value);
   };
 
+  /**
+   * 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 = searchValue || '';
+    
+    // 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 = String(entityId);
+        setSelectedTestEntities((prev) =>
+          prev.includes(id) ? prev : [...prev, id]
+        );
+      }
+      setSearchValue('');
+      CapNotification.success({
+        message: formatMessage(messages.customerAlreadyInTestList),
+        getContainer: getNotificationContainer,
+      });
+      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({ title: formatMessage(messages.errorTitle), message: errorMessage, getContainer: getNotificationContainer });
+        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) {
+          setSelectedTestEntities((prev) =>
+            prev.includes(customerIdFromLookup) ? prev : [...prev, customerIdFromLookup]
+          );
+          setSearchValue('');
+          CapNotification.success({
+            message: formatMessage(messages.customerAlreadyInTestList),
+            getContainer: getNotificationContainer,
+          });
+          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),
+        getContainer: getNotificationContainer,
+      });
+    } finally {
+      setIsCustomerDataLoading(false);
+    }
+  };
+  
   /**
    * Handle send test message
    */
@@ -2558,10 +2773,12 @@ const CommonTestAndPreview = (props) => {
           if (result) {
             CapNotification.success({
               message: formatMessage(messages.testMessageSent),
+              getContainer: getNotificationContainer,
             });
           } else {
             CapNotification.error({
               message: formatMessage(messages.testMessageFailed),
+              getContainer: getNotificationContainer,
             });
           }
         });
@@ -2630,6 +2847,7 @@ const CommonTestAndPreview = (props) => {
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
+      renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
       senderDetailsOptions={senderDetailsByChannel[channel]}
@@ -2638,6 +2856,8 @@ const CommonTestAndPreview = (props) => {
       isLoadingSenderDetails={isLoadingSenderDetails}
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
+      searchValue={searchValue}
+      setSearchValue={setSearchValue}
     />
   );
 
@@ -2647,6 +2867,20 @@ const CommonTestAndPreview = (props) => {
     />
   );
 
+  const renderAddTestCustomerButton = () => {
+    const value = searchValue || "";
+    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">
@@ -2666,14 +2900,19 @@ 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 */}
+        <div ref={notificationContainerRef} className="common-test-and-preview-notification-container" style={{ position: 'relative', height: '100%' }}>
+        <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()}
@@ -2687,7 +2926,28 @@ const CommonTestAndPreview = (props) => {
               {renderPreview()}
             </CapRow>
           </CapRow>
-        </CapRow>
+          {customerModal[0] && customerModal[1] === CUSTOMER_MODAL_EXISTING && (
+            <ExistingCustomerModal
+              customerData={customerData}
+              setCustomerModal={setCustomerModal}
+              customerModal={customerModal}
+              channel={channel}
+              onSave={handleSaveTestCustomer}
+            />
+          )}
+          {customerModal[0] && customerModal[1] === CUSTOMER_MODAL_NEW && (
+            <CustomerCreationModal
+              customerData={customerData}
+              setCustomerData={setCustomerData}
+              setCustomerModal={setCustomerModal}
+              customerModal={customerModal}
+              onSave={handleSaveTestCustomer}
+              channel={channel}
+            />
+          )}
+          </CapRow>
+        </CapSpin>
+        </div>
       )}
     />
   );
@@ -2789,4 +3049,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,72 @@ 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',
+  },
+  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',
@@ -32,6 +94,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',
@@ -120,6 +210,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);
+  });
+});