@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.256

package/v2Containers/WebPush/Create/components/MessageSection.test.js

@@ -1,268 +0,0 @@
-import React from 'react';
-import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
-import MessageSection from './MessageSection';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapEmojiPicker from '@capillarytech/cap-ui-library/CapEmojiPicker';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
-
-describe('MessageSection', () => {
-  const mockFormatMessage = jest.fn((message, values) => {
-    if (values) {
-      return `${values.currentLength}/${values.maxLength}`;
-    }
-    return message?.defaultMessage || message?.id || message;
-  });
-  const mockOnChange = jest.fn();
-  const mockHandleMessageTextAreaRef = jest.fn();
-
-  const mockMessages = {
-    message: {
-      id: 'app.webpush.message',
-      defaultMessage: 'Message',
-    },
-    messagePlaceholder: {
-      id: 'app.webpush.messagePlaceholder',
-      defaultMessage: 'Enter message',
-    },
-    characterCount: {
-      id: 'app.webpush.characterCount',
-      defaultMessage: '{currentLength}/{maxLength}',
-    },
-  };
-
-  const defaultProps = {
-    value: 'Test Message',
-    error: '',
-    onChange: mockOnChange,
-    formatMessage: mockFormatMessage,
-    messages: mockMessages,
-    tagList: null,
-    messageCountRef: null,
-    messageTextAreaRef: null,
-    handleMessageTextAreaRef: mockHandleMessageTextAreaRef,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<MessageSection {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render main container with correct class', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const container = wrapper.find('.creatives-webpush-message');
-      expect(container.exists()).toBe(true);
-    });
-
-    it('should render heading', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const heading = wrapper.find(CapHeading).find('.webpush-message');
-      expect(heading.exists()).toBe(true);
-    });
-
-    it('should render CapEmojiPicker.Wrapper', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const emojiPicker = wrapper.find(CapEmojiPicker.Wrapper);
-      expect(emojiPicker.exists()).toBe(true);
-      expect(emojiPicker.prop('value')).toBe('Test Message');
-    });
-
-    it('should render CapInput.TextArea with correct props', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.exists()).toBe(true);
-      expect(textArea.prop('id')).toBe('webpush-message-input');
-      expect(textArea.prop('value')).toBe('Test Message');
-      expect(textArea.prop('size')).toBe('default');
-      expect(textArea.prop('isRequired')).toBe(true);
-      expect(textArea.prop('autosize')).toEqual({ minRows: 3, maxRows: 5 });
-    });
-
-    it('should render placeholder correctly', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.messagePlaceholder);
-    });
-
-    it('should render Divider', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const divider = wrapper.find(CapDivider).find('.webpush-message-divider');
-      expect(divider.exists()).toBe(true);
-    });
-  });
-
-  describe('Tag List', () => {
-    it('should render tagList when provided', () => {
-      const tagList = <div className="test-tag-list">Tag List</div>;
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} tagList={tagList} />
-      );
-      const tagListContainer = wrapper.find('.webpush-message-taglist');
-      expect(tagListContainer.exists()).toBe(true);
-      expect(tagListContainer.contains(tagList)).toBe(true);
-    });
-
-    it('should render empty tagList container when tagList prop is not provided', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const tagListContainer = wrapper.find('.webpush-message-taglist');
-      expect(tagListContainer.exists()).toBe(true);
-      // Check that no tagList content is rendered (CapRow itself may have internal structure)
-      expect(tagListContainer.find('.test-tag-list').exists()).toBe(false);
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('should not render error when error is empty', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} error="" />);
-      const error = wrapper.find(CapError);
-      expect(error.exists()).toBe(false);
-    });
-
-    it('should render error when error is provided', () => {
-      const errorMessage = 'Message is required';
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} error={errorMessage} />
-      );
-      const error = wrapper.find(CapError).find('.webpush-template-message-error');
-      expect(error.exists()).toBe(true);
-    });
-
-    it('should pass error to CapInput.TextArea', () => {
-      const errorMessage = 'Message is required';
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} error={errorMessage} />
-      );
-      const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.prop('errorMessage')).toBeDefined();
-    });
-  });
-
-  describe('Character Count', () => {
-    it('should render character count when SHOW_CHARACTER_COUNT is true', () => {
-      const messageCountRef = React.createRef();
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} messageCountRef={messageCountRef} />
-      );
-      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
-      expect(characterCount.exists()).toBe(true);
-    });
-
-    it('should display correct character count', () => {
-      const messageCountRef = React.createRef();
-      const wrapper = mountWithIntl(
-        <MessageSection
-          {...defaultProps}
-          value="Test Message"
-          messageCountRef={messageCountRef}
-        />
-      );
-      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
-      expect(characterCount.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.characterCount, {
-        currentLength: 12,
-        maxLength: MESSAGE_MAX_LENGTH,
-      });
-    });
-
-    it('should render character count span with ref', () => {
-      const messageCountRef = React.createRef();
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} messageCountRef={messageCountRef} />
-      );
-      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
-      expect(characterCount.exists()).toBe(true);
-    });
-  });
-
-  describe('TextArea Ref Handling', () => {
-    it('should call handleMessageTextAreaRef with setInputRef', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.prop('setInputRef')).toBe(mockHandleMessageTextAreaRef);
-    });
-
-    it('should pass messageTextAreaRef to CapEmojiPicker.Wrapper', () => {
-      const messageTextAreaRef = React.createRef();
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} messageTextAreaRef={messageTextAreaRef} />
-      );
-      const emojiPicker = wrapper.find(CapEmojiPicker.Wrapper);
-      expect(emojiPicker.prop('textAreaRef')).toBe(messageTextAreaRef);
-    });
-  });
-
-  describe('User Interactions', () => {
-    it('should call onChange when textarea value changes', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const textArea = wrapper.find(CapInput.TextArea);
-      const event = { target: { value: 'New Message' } };
-      textArea.prop('onChange')(event);
-      expect(mockOnChange).toHaveBeenCalledWith(event);
-    });
-
-    it('should call onChange from CapEmojiPicker.Wrapper', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
-      const emojiPicker = wrapper.find(CapEmojiPicker.Wrapper);
-      emojiPicker.prop('onChange')('New Message');
-      expect(mockOnChange).toHaveBeenCalledWith('New Message');
-    });
-  });
-
-  describe('Default Props', () => {
-    it('should use default error when not provided', () => {
-      const wrapper = mountWithIntl(
-        <MessageSection
-          value="Test"
-          onChange={mockOnChange}
-          formatMessage={mockFormatMessage}
-          messages={mockMessages}
-          handleMessageTextAreaRef={mockHandleMessageTextAreaRef}
-        />
-      );
-      const error = wrapper.find(CapError);
-      expect(error.exists()).toBe(false);
-    });
-
-    it('should use default tagList when not provided', () => {
-      const wrapper = mountWithIntl(
-        <MessageSection
-          value="Test"
-          onChange={mockOnChange}
-          formatMessage={mockFormatMessage}
-          messages={mockMessages}
-          handleMessageTextAreaRef={mockHandleMessageTextAreaRef}
-        />
-      );
-      const tagListContainer = wrapper.find('.webpush-message-taglist');
-      expect(tagListContainer.exists()).toBe(true);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle empty value', () => {
-      const wrapper = mountWithIntl(<MessageSection {...defaultProps} value="" />);
-      const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.prop('value')).toBe('');
-    });
-
-    it('should handle long value', () => {
-      const longValue = 'A'.repeat(100);
-      const wrapper = mountWithIntl(
-        <MessageSection {...defaultProps} value={longValue} />
-      );
-      const textArea = wrapper.find(CapInput.TextArea);
-      expect(textArea.prop('value')).toBe(longValue);
-    });
-  });
-});
-

package/v2Containers/WebPush/Create/components/NotificationTitleSection.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import {
-  NOTIFICATION_TITLE_MAX_LENGTH,
-  SHOW_CHARACTER_COUNT,
-} from '../../constants';
-
-/**
- * NotificationTitleSection component - Notification title input with tags and character count
- */
-export const NotificationTitleSection = ({
-  value,
-  error,
-  onChange,
-  formatMessage,
-  messages,
-  tagList,
-  titleCountRef,
-}) => {
-  const renderCharacterCount = () => {
-    if (!SHOW_CHARACTER_COUNT) return null;
-
-    const maxLength = NOTIFICATION_TITLE_MAX_LENGTH;
-
-    return (
-      <CapLabel type="label2" className="webpush-character-count">
-        <span ref={titleCountRef}>
-          {formatMessage(messages.characterCount, {
-            currentLength: value.length,
-            maxLength,
-          })}
-        </span>
-      </CapLabel>
-    );
-  };
-
-  return (
-    <CapRow className="creatives-webpush-title">
-      <CapRow className="tooltip-add-label-container webpush-title-taglist">
-        {tagList}
-      </CapRow>
-      <CapHeading type="h4" className="webpush-title">
-        <FormattedMessage {...messages.notificationTitle} />
-      </CapHeading>
-      <CapInput
-        id="webpush-notification-title-input"
-        value={value}
-        onChange={onChange}
-        placeholder={formatMessage(messages.notificationTitlePlaceholder)}
-        size="default"
-        isRequired
-        maxLength={NOTIFICATION_TITLE_MAX_LENGTH}
-        errorMessage={
-          error && (
-            <CapError className="webpush-template-title-error">{error}</CapError>
-          )
-        }
-      />
-      {renderCharacterCount()}
-    </CapRow>
-  );
-};
-
-NotificationTitleSection.propTypes = {
-  value: PropTypes.string.isRequired,
-  error: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  formatMessage: PropTypes.func.isRequired,
-  messages: PropTypes.object.isRequired,
-  tagList: PropTypes.node,
-  titleCountRef: PropTypes.object,
-};
-
-NotificationTitleSection.defaultProps = {
-  error: '',
-  tagList: null,
-  titleCountRef: null,
-};
-
-export default NotificationTitleSection;
-

package/v2Containers/WebPush/Create/components/NotificationTitleSection.test.js

@@ -1,210 +0,0 @@
-import React from 'react';
-import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
-import NotificationTitleSection from './NotificationTitleSection';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import { NOTIFICATION_TITLE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
-
-describe('NotificationTitleSection', () => {
-  const mockFormatMessage = jest.fn((message, values) => {
-    if (values) {
-      return `${values.currentLength}/${values.maxLength}`;
-    }
-    return message?.defaultMessage || message?.id || message;
-  });
-  const mockOnChange = jest.fn();
-
-  const mockMessages = {
-    notificationTitle: {
-      id: 'app.webpush.notificationTitle',
-      defaultMessage: 'Notification Title',
-    },
-    notificationTitlePlaceholder: {
-      id: 'app.webpush.notificationTitlePlaceholder',
-      defaultMessage: 'Enter notification title',
-    },
-    characterCount: {
-      id: 'app.webpush.characterCount',
-      defaultMessage: '{currentLength}/{maxLength}',
-    },
-  };
-
-  const defaultProps = {
-    value: 'Test Title',
-    error: '',
-    onChange: mockOnChange,
-    formatMessage: mockFormatMessage,
-    messages: mockMessages,
-    tagList: null,
-    titleCountRef: null,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<NotificationTitleSection {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render main container with correct class', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
-      const container = wrapper.find('.creatives-webpush-title');
-      expect(container.exists()).toBe(true);
-    });
-
-    it('should render heading', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
-      const heading = wrapper.find(CapHeading).find('.webpush-title');
-      expect(heading.exists()).toBe(true);
-    });
-
-    it('should render CapInput', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-    });
-
-    it('should render placeholder correctly', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.notificationTitlePlaceholder);
-    });
-  });
-
-  describe('Tag List', () => {
-    it('should render tagList when provided', () => {
-      const tagList = <div className="test-tag-list">Tag List</div>;
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection {...defaultProps} tagList={tagList} />
-      );
-      const tagListContainer = wrapper.find('.webpush-title-taglist');
-      expect(tagListContainer.exists()).toBe(true);
-    });
-
-    it('should render empty tagList container when not provided', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
-      const tagListContainer = wrapper.find('.webpush-title-taglist');
-      expect(tagListContainer.exists()).toBe(true);
-      // Check that no tagList content is rendered (CapRow itself may have internal structure)
-      expect(tagListContainer.find('.test-tag-list').exists()).toBe(false);
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('should not render error when error is empty', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} error="" />);
-      const error = wrapper.find(CapError);
-      expect(error.exists()).toBe(false);
-    });
-
-    it('should render error when error is provided', () => {
-      const errorMessage = 'Title is required';
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection {...defaultProps} error={errorMessage} />
-      );
-      const error = wrapper.find(CapError).find('.webpush-template-title-error');
-      expect(error.exists()).toBe(true);
-    });
-  });
-
-  describe('Character Count', () => {
-    it('should render character count when SHOW_CHARACTER_COUNT is true', () => {
-      const titleCountRef = React.createRef();
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection {...defaultProps} titleCountRef={titleCountRef} />
-      );
-      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
-      expect(characterCount.exists()).toBe(true);
-    });
-
-    it('should display correct character count', () => {
-      const titleCountRef = React.createRef();
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection
-          {...defaultProps}
-          value="Test"
-          titleCountRef={titleCountRef}
-        />
-      );
-      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
-      expect(characterCount.exists()).toBe(true);
-    });
-  });
-
-  describe('User Interactions', () => {
-    it('should call onChange when input value changes', () => {
-      const wrapper = mountWithIntl(<NotificationTitleSection {...defaultProps} />);
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-      // CapInput onChange is tested through integration
-    });
-  });
-
-  describe('Default Props', () => {
-    it('should use default error when not provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection
-          value="Test"
-          onChange={mockOnChange}
-          formatMessage={mockFormatMessage}
-          messages={mockMessages}
-        />
-      );
-      const error = wrapper.find(CapError);
-      expect(error.exists()).toBe(false);
-    });
-
-    it('should use default tagList when not provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection
-          value="Test"
-          onChange={mockOnChange}
-          formatMessage={mockFormatMessage}
-          messages={mockMessages}
-        />
-      );
-      const tagListContainer = wrapper.find('.webpush-title-taglist');
-      expect(tagListContainer.exists()).toBe(true);
-    });
-
-    it('should use default titleCountRef when not provided', () => {
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection
-          value="Test"
-          onChange={mockOnChange}
-          formatMessage={mockFormatMessage}
-          messages={mockMessages}
-        />
-      );
-      const characterCount = wrapper.find(CapLabel).find('.webpush-character-count');
-      expect(characterCount.exists()).toBe(true);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle empty value', () => {
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection {...defaultProps} value="" />
-      );
-      const input = wrapper.find(CapInput);
-      expect(input.prop('value')).toBe('');
-    });
-
-    it('should handle long value up to maxLength', () => {
-      const longValue = 'A'.repeat(NOTIFICATION_TITLE_MAX_LENGTH);
-      const wrapper = mountWithIntl(
-        <NotificationTitleSection {...defaultProps} value={longValue} />
-      );
-      const input = wrapper.find(CapInput);
-      expect(input.exists()).toBe(true);
-    });
-  });
-});
-

package/v2Containers/WebPush/Create/components/TemplateNameSection.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-
-/**
- * TemplateNameSection component - Template name input (shown only in full mode)
- */
-export const TemplateNameSection = ({
-  isFullMode,
-  value,
-  error,
-  onChange,
-  formatMessage,
-  messages,
-}) => {
-  if (!isFullMode) return null;
-
-  return (
-    <>
-      <CapRow className="input-group creative-name-container">
-        <CapInput
-          id="webpush-template-name-input"
-          className="webpush-template-name-input"
-          label={formatMessage(messages.creativeName)}
-          placeholder={formatMessage(messages.creativeNamePlaceholder)}
-          value={value}
-          onChange={onChange}
-          size="default"
-          status={error ? 'error' : ''}
-          help={error ? formatMessage(messages.emptyTemplateErrorMessage) : ''}
-        />
-      </CapRow>
-      <CapDivider />
-    </>
-  );
-};
-
-TemplateNameSection.propTypes = {
-  isFullMode: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  error: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  formatMessage: PropTypes.func.isRequired,
-  messages: PropTypes.object.isRequired,
-};
-
-TemplateNameSection.defaultProps = {
-  error: false,
-};
-
-export default TemplateNameSection;
-