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

package/v2Components/CommonTestAndPreview/index.js

@@ -8,7 +8,7 @@
 
 import PropTypes from 'prop-types';
 import React, {
-  useState, useEffect, useMemo, useRef,
+  useState, useEffect, useMemo, useRef, useCallback,
 } from 'react';
 import { FormattedMessage } from 'react-intl';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
@@ -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';
@@ -28,9 +31,17 @@ import CustomValuesEditor from './CustomValuesEditor';
 import SendTestMessage from './SendTestMessage';
 import PreviewSection from './PreviewSection';
 
+// Import constants
+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,
@@ -70,10 +81,47 @@ import {
   IMAGE,
   VIDEO,
   URL,
+  CHANNELS_USING_ANDROID_PREVIEW_DEVICE
 } from './constants';
 
 // Import utilities
 import { getCdnUrl } from '../../utils/cdnTransformation';
+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;
+  });
+};
+
+
+/**
+ * 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
@@ -130,9 +178,13 @@ const CommonTestAndPreview = (props) => {
   const [customValues, setCustomValues] = useState({});
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
-  // 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 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);
   // Track if a preview call has been made (to know when to use previewDataHtml vs raw content)
   const [hasPreviewCallBeenMade, setHasPreviewCallBeenMade] = useState(false);
@@ -189,6 +241,14 @@ const CommonTestAndPreview = (props) => {
     }
   }, [show, channel, orgUnitId, actions]);
 
+  useEffect(() => {
+    if (!show) {
+      setCustomerModal([false, '']);
+      setSearchValue('');
+      setCustomerData({ name: '', email: '', mobile: '', customerId: '' });
+    }
+  }, [show]);
+
   const findDefault = (arr) => (arr && arr.find((x) => x.default)) || (arr && arr[0]) || {};
 
   // Auto-set default delivery setting when sender details load (campaigns-style: first domain + default/first sender)
@@ -349,19 +409,26 @@ const CommonTestAndPreview = (props) => {
   }, [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',
       value: 'groups-node',
       selectable: false,
-      children: testGroups?.map((group) => ({ title: group?.groupName, value: group?.groupId })),
+      children: testGroups?.map((group) => ({
+        title: group?.groupName,
+        value: 'group:' + 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: 'customer:' + normalizeTestEntityId(customer?.userId ?? customer?.customerId),
+      })) || [],
     };
 
     return [groupsNode, customersNode];
@@ -388,6 +455,94 @@ 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 || '',
+            });
+            const prefixedAddedId = 'customer:' + normalizedAddedId;
+            setSelectedTestEntities((prev) => (
+              prev.some((id) => id === prefixedAddedId)
+                ? prev
+                : [...prev, prefixedAddedId]
+            ));
+          }
+          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
    */
@@ -2332,7 +2487,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([]);
@@ -2509,20 +2665,142 @@ 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 = 'customer:' + 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 = 'customer:' + 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) => g.groupId === entityId);
-      if (group) {
-        allUserIds.push(...group.userIds);
+      if (String(entityId).startsWith('group:')) {
+        const rawId = String(entityId).slice('group:'.length);
+        const group = testGroups.find((g) => testEntityIdsEqual(g.groupId, rawId));
+        if (group) {
+          allUserIds.push(...group.userIds);
+        }
       } else {
-        allUserIds.push(entityId);
+        const rawId = String(entityId).startsWith('customer:')
+          ? String(entityId).slice('customer:'.length)
+          : String(entityId);
+        allUserIds.push(Number(rawId));
       }
     });
     const uniqueUserIds = [...new Set(allUserIds)];
@@ -2618,6 +2896,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}
@@ -2630,6 +2922,7 @@ const CommonTestAndPreview = (props) => {
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
+      renderAddTestCustomerButton={renderAddTestCustomerButton}
       formatMessage={formatMessage}
       deliverySettings={testPreviewDeliverySettings[channel]}
       senderDetailsOptions={senderDetailsByChannel[channel]}
@@ -2638,6 +2931,8 @@ const CommonTestAndPreview = (props) => {
       isLoadingSenderDetails={isLoadingSenderDetails}
       smsTraiDltEnabled={smsTraiDltEnabled}
       registeredSenderIds={registeredSenderIds}
+      searchValue={searchValue}
+      setSearchValue={handleTestCustomersSearch}
     />
   );
 
@@ -2647,6 +2942,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">
@@ -2666,14 +2976,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()}
@@ -2687,7 +3001,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>
       )}
     />
   );
@@ -2789,4 +3123,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',
@@ -32,6 +106,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 +222,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,17 @@ 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;
+      if (!customer) return state;
+      const newId = customer.userId || customer.customerId;
+      if (!newId) return state;
+      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/sagas.js

@@ -159,9 +159,10 @@ export function* getBulkCustomerDetails({fetchedUserIds}) {
         const emailIdentifier = profile?.identifiers?.find(
           (identifier) => identifier.type === IDENTIFIER_TYPE_EMAIL,
         );
+        const nameParts = [profile?.firstName, profile?.lastName].filter(Boolean);
         return {
           userId: item?.entity?.id,
-          name: `${profile?.firstName} ${profile?.lastName}`,
+          name: nameParts.join(' '),
           mobile: mobileIdentifier?.value,
           email: emailIdentifier?.value,
         };