@capillarytech/creatives-library 8.0.299-alpha.7 → 8.0.299

package/v2Components/CommonTestAndPreview/index.js

@@ -410,7 +410,7 @@ const CommonTestAndPreview = (props) => {
   /**
    * Common handler for saving test customers (both new and existing)
    */
-  const handleSaveTestCustomer = async (validationErrors = {},setIsLoading = false) => {
+  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;
@@ -2676,7 +2676,10 @@ const CommonTestAndPreview = (props) => {
 
       if (!success) {
         const errorMessage = response?.message || response?.status?.message || formatMessage(messages.memberLookupError);
-        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage });
+        CapNotification.error({
+          message: formatMessage(messages.memberLookupError),
+          description: errorMessage,
+        });
         return;
       }
 
@@ -2710,6 +2713,7 @@ const CommonTestAndPreview = (props) => {
     } catch {
       CapNotification.error({
         message: formatMessage(messages.memberLookupError),
+        description: formatMessage(messages.memberLookupError),
       });
     } finally {
       setIsCustomerDataLoading(false);

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

@@ -361,6 +361,7 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
         message: 'Unable to look up customer. Please try again.',
+        description: 'Unable to look up customer. Please try again.',
       })));
       expect(screen.queryByText(/add new test customer/i)).toBeFalsy();
     });
@@ -573,7 +574,8 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await clickAddTestCustomer();
       await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
-        message: 'Merged customer found',
+        message: 'Unable to look up customer. Please try again.',
+        description: 'Merged customer found',
       })));
       expect(screen.queryByText(/add new test customer/i)).toBeFalsy();
       expect(screen.queryByText(/this user profile already exists/i)).toBeFalsy();
@@ -595,7 +597,8 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await clickAddTestCustomer();
       await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
-        message: 'Server error',
+        message: 'Unable to look up customer. Please try again.',
+        description: 'Server error',
       })));
       expect(screen.queryByText(/add new test customer/i)).toBeFalsy();
       expect(screen.queryByText(/this user profile already exists/i)).toBeFalsy();
@@ -617,6 +620,7 @@ describe('CommonTestAndPreview – Add Test Customer flow', () => {
       await clickAddTestCustomer();
       await waitFor(() => expect(CapNotification.error).toHaveBeenCalledWith(expect.objectContaining({
         message: 'Unable to look up customer. Please try again.',
+        description: 'Unable to look up customer. Please try again.',
       })));
     });
   });

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

@@ -0,0 +1,172 @@
+/**
+ * Tests for CustomValuesEditor Component
+ */
+
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
+import CustomValuesEditor from '../CustomValuesEditor';
+
+const scope = 'app.v2Components.TestAndPreviewSlidebox';
+const mockMessages = {
+  [`${scope}.extractingTags`]: 'Extracting tags...',
+  [`${scope}.valuesMissing`]: 'Some values are missing',
+  [`${scope}.showJSON`]: 'Show JSON',
+  [`${scope}.personalizationTags`]: 'Personalization Tags',
+  [`${scope}.customValues`]: 'Custom Values',
+  [`${scope}.enterValue`]: 'Enter value',
+  [`${scope}.discardCustomValues`]: 'Discard custom values',
+  [`${scope}.updatePreview`]: 'Update Preview',
+};
+
+const TestWrapper = ({ children }) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {children}
+  </IntlProvider>
+);
+
+TestWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+describe('CustomValuesEditor', () => {
+  const defaultProps = {
+    isExtractingTags: false,
+    isUpdatePreviewDisabled: false,
+    showJSON: false,
+    setShowJSON: jest.fn(),
+    customValues: { 'user.firstName': 'John', 'user.lastName': 'Doe' },
+    handleJSONTextChange: jest.fn(),
+    extractedTags: [
+      { name: 'firstName', fullPath: 'user.firstName' },
+      { name: 'lastName', fullPath: 'user.lastName' },
+    ],
+    requiredTags: [{ name: 'firstName', fullPath: 'user.firstName' }],
+    optionalTags: [{ name: 'lastName', fullPath: 'user.lastName' }],
+    handleCustomValueChange: jest.fn(),
+    handleDiscardCustomValues: jest.fn(),
+    handleUpdatePreview: jest.fn(),
+    isUpdatingPreview: false,
+    formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders loading state when isExtractingTags is true', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} isExtractingTags />
+      </TestWrapper>
+    );
+    expect(screen.getByText('Extracting tags...')).toBeInTheDocument();
+  });
+
+  it('renders values missing message when isUpdatePreviewDisabled is true', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} isUpdatePreviewDisabled />
+      </TestWrapper>
+    );
+    expect(screen.getByText(/Some values are missing/i)).toBeInTheDocument();
+  });
+
+  it('renders Show JSON toggle and calls setShowJSON when toggled', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} />
+      </TestWrapper>
+    );
+    expect(screen.getByText('Show JSON')).toBeInTheDocument();
+    const switchInput = document.querySelector('input[type="checkbox"]');
+    if (switchInput) {
+      fireEvent.click(switchInput);
+      expect(defaultProps.setShowJSON).toHaveBeenCalled();
+    }
+  });
+
+  it('renders JSON editor when showJSON is true', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} showJSON />
+      </TestWrapper>
+    );
+    const textarea = document.querySelector('textarea.json-textarea');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea.value).toContain('user.firstName');
+  });
+
+  it('calls handleJSONTextChange when JSON textarea is changed', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} showJSON />
+      </TestWrapper>
+    );
+    const textarea = document.querySelector('textarea.json-textarea');
+    fireEvent.change(textarea, { target: { value: '{"foo":"bar"}' } });
+    expect(defaultProps.handleJSONTextChange).toHaveBeenCalledWith('{"foo":"bar"}');
+  });
+
+  it('renders required and optional tag inputs when showJSON is false', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} />
+      </TestWrapper>
+    );
+    expect(screen.getByText('Personalization Tags')).toBeInTheDocument();
+    expect(screen.getByText('Custom Values')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('John')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Doe')).toBeInTheDocument();
+  });
+
+  it('calls handleCustomValueChange when tag input is changed', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} />
+      </TestWrapper>
+    );
+    const inputs = document.querySelectorAll('input[type="text"]');
+    fireEvent.change(inputs[0], { target: { value: 'Jane' } });
+    expect(defaultProps.handleCustomValueChange).toHaveBeenCalledWith('user.firstName', 'Jane');
+  });
+
+  it('calls handleDiscardCustomValues when Discard button is clicked', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} />
+      </TestWrapper>
+    );
+    const discardBtn = screen.getByText(/Discard custom values/i);
+    fireEvent.click(discardBtn);
+    expect(defaultProps.handleDiscardCustomValues).toHaveBeenCalled();
+  });
+
+  it('calls handleUpdatePreview when Update Preview button is clicked', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor {...defaultProps} />
+      </TestWrapper>
+    );
+    const updateBtn = screen.getByText('Update Preview');
+    fireEvent.click(updateBtn);
+    expect(defaultProps.handleUpdatePreview).toHaveBeenCalled();
+  });
+
+  it('renders nothing for tags table when extractedTags is empty', () => {
+    render(
+      <TestWrapper>
+        <CustomValuesEditor
+          {...defaultProps}
+          extractedTags={[]}
+          requiredTags={[]}
+          optionalTags={[]}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getByText(/Show JSON/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Personalization Tags/i)).not.toBeInTheDocument();
+  });
+});

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

@@ -313,4 +313,154 @@ describe('CustomerCreationModal', () => {
     jest.advanceTimersByTime(1000);
     jest.useRealTimers();
   });
+
+  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('disables Save and Cancel during lookup', async () => {
+    let resolveLookup;
+    mockGetMembersLookup.mockImplementation(() => new Promise((resolve) => { resolveLookup = resolve; }));
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} customerData={{ name: '', email: '', mobile: '' }} />
+      </TestWrapper>
+    );
+    const emailInput = screen.getByPlaceholderText(/enter the email/i);
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /save/i }).disabled).toBe(true);
+      expect(screen.getByRole('button', { name: /cancel/i }).disabled).toBe(true);
+    });
+    resolveLookup({ success: true, status: {}, response: { exists: false, customerDetails: [] } });
+  });
+
+  it('shows email already exists when lookup returns "merged customer found"', async () => {
+    jest.useFakeTimers();
+    mockGetMembersLookup.mockResolvedValue({
+      success: false,
+      message: 'Merged customer found',
+      status: {},
+      response: {},
+    });
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} customerData={{ name: '', email: '', mobile: '' }} />
+      </TestWrapper>
+    );
+    const emailInput = screen.getByPlaceholderText(/enter the email/i);
+    fireEvent.change(emailInput, { target: { value: 'merged@example.com' } });
+    jest.advanceTimersByTime(600);
+    await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalledWith('email', 'merged@example.com'));
+    await waitFor(() => {
+      expect(screen.queryByText(/this email already exists|already existing user profile/i)).toBeTruthy();
+    }, { timeout: 1000 });
+    jest.useRealTimers();
+  });
+
+  it('does not show already exists when lookup returns success: false with other message', async () => {
+    jest.useFakeTimers();
+    mockGetMembersLookup.mockResolvedValue({
+      success: false,
+      message: 'Server error',
+      status: {},
+      response: {},
+    });
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} customerData={{ name: '', email: '', mobile: '' }} />
+      </TestWrapper>
+    );
+    const emailInput = screen.getByPlaceholderText(/enter the email/i);
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    jest.advanceTimersByTime(600);
+    await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(screen.queryByText(/this email already exists/i)).toBeFalsy();
+    });
+    jest.useRealTimers();
+  });
+
+  it('does not show already exists when response has status.isError', async () => {
+    jest.useFakeTimers();
+    mockGetMembersLookup.mockResolvedValue({
+      success: true,
+      status: { isError: true },
+      response: { exists: false, customerDetails: [] },
+    });
+    render(
+      <TestWrapper>
+        <CustomerCreationModal {...defaultProps} customerData={{ name: '', email: '', mobile: '' }} />
+      </TestWrapper>
+    );
+    const emailInput = screen.getByPlaceholderText(/enter the email/i);
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    jest.advanceTimersByTime(600);
+    await waitFor(() => expect(mockGetMembersLookup).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(screen.queryByText(/this email already exists/i)).toBeFalsy();
+    });
+    jest.useRealTimers();
+  });
+
+  it('shows (Optional) for email when channel is SMS', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.SMS}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    const optionals = screen.getAllByText(/\(optional\)/i);
+    expect(optionals.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('shows (Optional) for mobile when channel is EMAIL', () => {
+    render(
+      <TestWrapper>
+        <CustomerCreationModal
+          {...defaultProps}
+          channel={CHANNELS.EMAIL}
+          customerData={{ name: '', email: '', mobile: '' }}
+        />
+      </TestWrapper>
+    );
+    expect(screen.getAllByText(/\(optional\)/i).length).toBeGreaterThanOrEqual(2);
+  });
+
+  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/index.test.js

@@ -1585,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', () => {