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

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

@@ -0,0 +1,174 @@
+/**
+ * Unit tests for CustomerCreationModal
+ *
+ * Email/mobile are read-only; lookup runs in parent (index.js) before the modal opens.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
+import CustomerCreationModal from '../CustomerCreationModal';
+import { CHANNELS, CUSTOMER_MODAL_NEW } from '../constants';
+
+const mockMessages = {
+  'app.v2Components.TestAndPreviewSlidebox.customerCreationModalTitle': 'Add new test customer',
+  'app.v2Components.TestAndPreviewSlidebox.customerCreationModalDescription': 'This customer profile will be available for testing.',
+  'app.v2Components.TestAndPreviewSlidebox.customerName': 'Name',
+  'app.v2Components.TestAndPreviewSlidebox.customerNameOptional': '(Optional)',
+  'app.v2Components.TestAndPreviewSlidebox.customerNamePlaceholder': 'Enter the name',
+  'app.v2Components.TestAndPreviewSlidebox.customerEmailPlaceholder': 'Enter the Email',
+  'app.v2Components.TestAndPreviewSlidebox.customerMobilePlaceholder': 'Enter the Mobile Number',
+  'app.v2Components.TestAndPreviewSlidebox.saveButton': 'Save',
+  'app.v2Components.TestAndPreviewSlidebox.cancelButton': 'Cancel',
+  'app.v2Components.TestAndPreviewSlidebox.customerEmail': 'Email',
+  'app.v2Components.TestAndPreviewSlidebox.customerMobileNumber': 'Mobile Number',
+};
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {children}
+  </IntlProvider>
+);
+TestWrapper.propTypes = { children: PropTypes.node };
+
+describe('CustomerCreationModal', () => {
+  const defaultProps = {
+    customerModal: [true, CUSTOMER_MODAL_NEW],
+    onCloseCustomerModal: jest.fn(),
+    channel: CHANNELS.EMAIL,
+    customerData: { name: '', email: '', mobile: '' },
+    setCustomerData: jest.fn(),
+    onSave: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal with title and form fields when visible (EMAIL)', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} channel={CHANNELS.EMAIL} />
+      </TestWrapper>
+    );
+    expect(screen.getByText(/add new test customer/i)).toBeTruthy();
+    expect(screen.getByPlaceholderText(/enter the name/i)).toBeTruthy();
+    expect(screen.getByPlaceholderText(/enter the email/i)).toBeTruthy();
+    expect(screen.queryByPlaceholderText(/enter the mobile number/i)).toBeNull();
+    expect(screen.getByRole('button', { name: /save/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeTruthy();
+  });
+
+  it('renders mobile field when channel is SMS', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.SMS}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getByPlaceholderText(/enter the mobile number/i)).toBeTruthy();
+    expect(screen.queryByPlaceholderText(/enter the email/i)).toBeNull();
+  });
+
+  it('calls onCloseCustomerModal when Cancel is clicked', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} />
+      </TestWrapper>
+    );
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(defaultProps.onCloseCustomerModal).toHaveBeenCalled();
+  });
+
+  it('calls setCustomerData when name input changes', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} />
+      </TestWrapper>
+    );
+    fireEvent.change(screen.getByPlaceholderText(/enter the name/i), { target: { value: 'John' } });
+    expect(defaultProps.setCustomerData).toHaveBeenCalledWith(expect.objectContaining({ name: 'John' }));
+  });
+
+  it('calls onSave when Save is clicked with empty validation object', async () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} customerData={{ name: '', email: 'a@b.co', mobile: '' }} />
+      </TestWrapper>
+    );
+    const saveBtn = screen.getByRole('button', { name: /save/i });
+    fireEvent.click(saveBtn);
+    await waitFor(() => expect(defaultProps.onSave).toHaveBeenCalled());
+    expect(defaultProps.onSave).toHaveBeenCalledWith(
+      { email: '', mobile: '' },
+      expect.any(Function),
+    );
+  });
+
+  it('disables Save when required email is missing (EMAIL channel)', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.EMAIL}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    const saveBtn = screen.getByRole('button', { name: /save/i });
+    expect(saveBtn.disabled).toBe(true);
+  });
+
+  it('disables Save when required mobile is missing (SMS channel)', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.SMS}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    const saveBtn = screen.getByRole('button', { name: /save/i });
+    expect(saveBtn.disabled).toBe(true);
+  });
+
+  it('shows (Optional) on name label when channel is SMS', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.SMS}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getAllByText(/\(optional\)/i)).toHaveLength(1);
+  });
+
+  it('shows (Optional) on name label when channel is EMAIL', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.EMAIL}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getAllByText(/\(optional\)/i)).toHaveLength(1);
+  });
+
+  it('renders modal description', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} />
+      </TestWrapper>
+    );
+    expect(screen.getByText(/this customer profile will be available for testing/i)).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,114 @@
+/**
+ * Unit tests for ExistingCustomerModal
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
+import ExistingCustomerModal from '../ExistingCustomerModal';
+import { CHANNELS, CUSTOMER_MODAL_EXISTING } from '../constants';
+
+const mockMessages = {
+  'app.v2Components.TestAndPreviewSlidebox.customerCreationModalTitle': 'Add new test customer',
+  'app.v2Components.TestAndPreviewSlidebox.existingCustomerModalDescription': 'This user profile already exists in the system.',
+  'app.v2Components.TestAndPreviewSlidebox.saveButton': 'Save',
+  'app.v2Components.TestAndPreviewSlidebox.cancelButton': 'Cancel',
+  'app.v2Components.TestAndPreviewSlidebox.customerEmail': 'Email',
+  'app.v2Components.TestAndPreviewSlidebox.customerMobileNumber': 'Mobile Number',
+  'app.v2Components.TestAndPreviewSlidebox.customerID': 'Customer ID',
+};
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {children}
+  </IntlProvider>
+);
+TestWrapper.propTypes = { children: PropTypes.node };
+
+describe('ExistingCustomerModal', () => {
+  const defaultProps = {
+    customerModal: [true, CUSTOMER_MODAL_EXISTING],
+    onCloseCustomerModal: jest.fn(),
+    customerData: { name: 'John Doe', email: 'john@example.com', mobile: '', customerId: 'cust-123' },
+    channel: CHANNELS.EMAIL,
+    onSave: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal with customer details when visible', () => {
+    render(
+      <TestWrapper>
+        <ExistingCustomerModal {...defaultProps} />
+      </TestWrapper>
+    );
+    expect(screen.getByText(/add new test customer/i)).toBeTruthy();
+    expect(screen.getByText(/this user profile already exists/i)).toBeTruthy();
+    expect(screen.getByText('John Doe')).toBeTruthy();
+    expect(screen.getByText(/john@example.com/)).toBeTruthy();
+    expect(screen.getByText(/cust-123/)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /save/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeTruthy();
+  });
+
+  it('shows mobile when channel is SMS', () => {
+    render(
+      <TestWrapper>
+        <ExistingCustomerModal
+          {...defaultProps}
+          channel={CHANNELS.SMS}
+          customerData={{ name: 'Jane', email: '', mobile: '9123456789', customerId: 'cust-456' }}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getByText(/9123456789/)).toBeTruthy();
+  });
+
+  it('calls onCloseCustomerModal when Cancel is clicked', () => {
+    render(
+      <TestWrapper>
+        <ExistingCustomerModal {...defaultProps} />
+      </TestWrapper>
+    );
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(defaultProps.onCloseCustomerModal).toHaveBeenCalled();
+  });
+
+  it('calls onSave when Save is clicked', () => {
+    render(
+      <TestWrapper>
+        <ExistingCustomerModal {...defaultProps} />
+      </TestWrapper>
+    );
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+    expect(defaultProps.onSave).toHaveBeenCalled();
+    expect(defaultProps.onSave.mock.calls[0][0]).toEqual({});
+    expect(typeof defaultProps.onSave.mock.calls[0][1]).toBe('function');
+  });
+
+  it('shows dash for missing name', () => {
+    render(
+      <TestWrapper>
+        <ExistingCustomerModal {...defaultProps} customerData={{ name: '', email: 'a@b.co', mobile: '', customerId: 'c1' }} />
+      </TestWrapper>
+    );
+    expect(screen.getByText('-')).toBeTruthy();
+  });
+
+  it('does not show email row when channel is EMAIL but customerData.email is empty', () => {
+    render(
+      <TestWrapper>
+        <ExistingCustomerModal
+          {...defaultProps}
+          customerData={{ name: 'No Email', email: '', mobile: '', customerId: 'c2' }}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getByText('No Email')).toBeTruthy();
+    expect(screen.getByText('Customer ID')).toBeTruthy();
+    expect(screen.getByText('c2')).toBeTruthy();
+  });
+});

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

@@ -135,6 +135,10 @@ describe('SendTestMessage', () => {
     isLoadingSenderDetails: false,
     smsTraiDltEnabled: false,
     registeredSenderIds: [],
+    isChannelSmsFallbackPreviewEnabled: false,
+    renderAddTestCustomerButton: jest.fn(() => null),
+    searchValue: '',
+    setSearchValue: jest.fn(),
   };
 
   beforeEach(() => {
@@ -634,35 +638,51 @@ describe('SendTestMessage', () => {
     });
   });
 
-  describe('whatsappAccountFromForm with null/undefined formData', () => {
-    it('passes whatsappAccountFromForm as undefined when channel is WHATSAPP and formData is null', () => {
+  describe('notFoundContent (Add as test customer)', () => {
+    it('should call renderAddTestCustomerButton and use result as notFoundContent', () => {
+      const renderAddTestCustomerButton = jest.fn(() => (
+        <button type="button" data-testid="add-test-customer-btn">
+          Add as test customer
+        </button>
+      ));
+      const props = {
+        ...defaultProps,
+        renderAddTestCustomerButton,
+      };
       render(
         <TestWrapper>
-          <SendTestMessage
-            {...defaultProps}
-            channel="WHATSAPP"
-            formData={null}
-          />
+          <SendTestMessage {...props} />
         </TestWrapper>
       );
-      const el = screen.getByTestId('delivery-settings');
-      const data = JSON.parse(el.getAttribute('data-props'));
-      expect(data.whatsappAccountFromForm).toBeUndefined();
+      expect(renderAddTestCustomerButton).toHaveBeenCalled();
     });
 
-    it('passes whatsappAccountFromForm as undefined when channel is WHATSAPP and formData is undefined', () => {
+    it('should render notFoundContent as a clickable button when provided', () => {
+      const onAddClick = jest.fn();
+      const renderAddTestCustomerButton = jest.fn(() => (
+        <button type="button" data-testid="add-test-customer-btn" onClick={onAddClick}>
+          Add as test customer
+        </button>
+      ));
+      const props = {
+        ...defaultProps,
+        renderAddTestCustomerButton,
+      };
       render(
         <TestWrapper>
-          <SendTestMessage
-            {...defaultProps}
-            channel="WHATSAPP"
-            formData={undefined}
-          />
+          <SendTestMessage {...props} />
         </TestWrapper>
       );
-      const el = screen.getByTestId('delivery-settings');
-      const data = JSON.parse(el.getAttribute('data-props'));
-      expect(data.whatsappAccountFromForm).toBeUndefined();
+      // Assert component wiring: renderAddTestCustomerButton must have been called during render.
+      expect(renderAddTestCustomerButton).toHaveBeenCalled();
+      // Assert the returned element has the expected shape.
+      const notFoundContent = renderAddTestCustomerButton.mock.results[0].value;
+      expect(notFoundContent).toBeTruthy();
+      expect(notFoundContent.type).toBe('button');
+      expect(notFoundContent.props['data-testid']).toBe('add-test-customer-btn');
+      // Assert clicking the button triggers the handler.
+      notFoundContent.props.onClick();
+      expect(onAddClick).toHaveBeenCalled();
     });
   });
 });

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

@@ -54,8 +54,13 @@ import {
   // API Channel Constants
   API_CHANNEL_PUSH,
   // Identifier Type Constants
-  IDENTIFIER_TYPE_MOBILE,
   IDENTIFIER_TYPE_EMAIL,
+  IDENTIFIER_TYPE_MOBILE,
+  IDENTIFIER_TYPE_PHONE,
+  INPUT_HAS_ERROR_CLASS,
+  // Validation Regex
+  EMAIL_REGEX,
+  PHONE_REGEX,
   // Channel Name Constants
   CHANNEL_NAME_INAPP,
   // Channel Mapping Constants
@@ -206,6 +211,31 @@ describe('CommonTestAndPreview Constants', () => {
     });
   });
 
+  describe('Identifier Type Constants', () => {
+    it('should export identifier type constants', () => {
+      expect(IDENTIFIER_TYPE_EMAIL).toBe('email');
+      expect(IDENTIFIER_TYPE_MOBILE).toBe('mobile');
+      expect(IDENTIFIER_TYPE_PHONE).toBe('phone');
+    });
+  });
+
+  describe('Validation Regex', () => {
+    it('should export EMAIL_REGEX that validates email format', () => {
+      expect(EMAIL_REGEX.test('user@example.com')).toBe(true);
+      expect(EMAIL_REGEX.test('invalid')).toBe(false);
+    });
+    it('should export PHONE_REGEX that validates phone format', () => {
+      expect(PHONE_REGEX.test('9123456789')).toBe(true);
+      expect(PHONE_REGEX.test('123')).toBe(false);
+    });
+  });
+
+  describe('Input has error class', () => {
+    it('should export INPUT_HAS_ERROR_CLASS', () => {
+      expect(INPUT_HAS_ERROR_CLASS).toBe(' has-input-error');
+    });
+  });
+
   describe('Channel Name Constants', () => {
     it('should export channel name constants', () => {
       expect(CHANNEL_NAME_INAPP).toBe('INAPP');

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

@@ -81,6 +81,12 @@ jest.mock('../../../utils/cdnTransformation', () => ({
   getCdnUrl: jest.fn(({ url }) => `cdn_${url}`),
 }));
 
+// Mock services/api for add test customer flow
+jest.mock('../../../services/api', () => ({
+  getMembersLookup: jest.fn(),
+  createTestCustomer: jest.fn(),
+}));
+
 // Mock messages - using actual message IDs from messages.js
 const mockMessages = {
   'app.v2Components.TestAndPreviewSlidebox.testAndPreviewHeader': { defaultMessage: 'Preview and Test' },
@@ -126,6 +132,7 @@ describe('CommonTestAndPreview', () => {
     clearPreviewErrors: jest.fn(),
     getSenderDetailsRequested: jest.fn(),
     getWeCrmAccountsRequested: jest.fn(),
+    addTestCustomer: jest.fn(),
   };
 
   const defaultProps = {
@@ -1578,6 +1585,35 @@ describe('CommonTestAndPreview', () => {
 
       expect(screen.getByTestId('send-test-message')).toBeTruthy();
     });
+
+    it('should show error notification when sendTestMessageRequested callback receives false', async () => {
+      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
+      mockActions.createMessageMetaRequested.mockImplementation((payload, metaId, cb) => {
+        if (cb) cb({ entity: 'meta-123' });
+      });
+      mockActions.sendTestMessageRequested.mockImplementation((payload, cb) => {
+        if (cb) cb(false);
+      });
+      const props = {
+        ...defaultProps,
+        selectedTestEntities: ['user-1'],
+        testGroups: [],
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+
+      expect(lastSendTestMessageProps).toBeTruthy();
+      expect(lastSendTestMessageProps.handleSendTestMessage).toBeDefined();
+      lastSendTestMessageProps.handleSendTestMessage();
+
+      await waitFor(() => {
+        expect(CapNotification.error).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('Content Extraction', () => {

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

@@ -24,6 +24,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,
@@ -611,6 +612,76 @@ describe('previewAndTestReducer', () => {
     });
   });
 
+  describe('ADD_TEST_CUSTOMER', () => {
+    it('should add new customer to testCustomers list', () => {
+      const customer = {
+        userId: 'cust-1',
+        customerId: 'cust-1',
+        name: 'John',
+        email: 'john@example.com',
+        mobile: '',
+      };
+      const action = {
+        type: ADD_TEST_CUSTOMER,
+        payload: { customer },
+      };
+      const result = previewAndTestReducer(initialState, action);
+
+      const list = result.get('testCustomers');
+      expect(Array.isArray(list) ? list.length : list.size).toBe(1);
+      const first = Array.isArray(list) ? list[0] : list.get(0);
+      const id = first.userId != null ? first.userId : first.get('userId');
+      const name = first.name != null ? first.name : first.get('name');
+      expect(id).toBe('cust-1');
+      expect(name).toBe('John');
+    });
+
+    it('should not add duplicate customer when userId already in list', () => {
+      const existing = fromJS([
+        { userId: 'cust-1', customerId: 'cust-1', name: 'John', email: 'john@example.com', mobile: '' },
+      ]);
+      const stateWithCustomer = initialState.set('testCustomers', existing);
+      const customer = {
+        userId: 'cust-1',
+        customerId: 'cust-1',
+        name: 'John Updated',
+        email: 'john@example.com',
+        mobile: '',
+      };
+      const action = {
+        type: ADD_TEST_CUSTOMER,
+        payload: { customer },
+      };
+      const result = previewAndTestReducer(stateWithCustomer, action);
+
+      const list = result.get('testCustomers');
+      expect(Array.isArray(list) ? list.length : list.size).toBe(1);
+      const first = Array.isArray(list) ? list[0] : list.get(0);
+      const name = first.name != null ? first.name : first.get('name');
+      expect(name).toBe('John');
+    });
+
+    it('should use customerId when userId is missing', () => {
+      const customer = {
+        customerId: 'cust-2',
+        name: 'Jane',
+        email: 'jane@example.com',
+        mobile: '',
+      };
+      const action = {
+        type: ADD_TEST_CUSTOMER,
+        payload: { customer },
+      };
+      const result = previewAndTestReducer(initialState, action);
+
+      const list = result.get('testCustomers');
+      expect(Array.isArray(list) ? list.length : list.size).toBe(1);
+      const first = Array.isArray(list) ? list[0] : list.get(0);
+      const id = first.customerId != null ? first.customerId : first.get('customerId');
+      expect(id).toBe('cust-2');
+    });
+  });
+
   describe('GET_TEST_GROUPS_REQUESTED', () => {
     it('should set fetching flag and clear error', () => {
       const action = { type: GET_TEST_GROUPS_REQUESTED };

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

@@ -431,6 +431,23 @@ describe('CommonTestAndPreview Selectors', () => {
       // Should handle null gracefully - returns null when prefilledValues is null
       expect(result).toBeNull();
     });
+
+    it('should return undefined when commonTestAndPreview substate is missing', () => {
+      const selector = makeSelectPrefilledValues();
+      const result = selector(fromJS({}));
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return null when prefilledValues is undefined', () => {
+      const stateWithUndefined = fromJS({
+        commonTestAndPreview: {},
+      });
+      const selector = makeSelectPrefilledValues();
+      const result = selector(stateWithUndefined);
+
+      expect(result).toBeNull();
+    });
   });
 
   describe('makeSelectTestMessageResponse', () => {