@capillarytech/creatives-library 8.0.257 → 8.0.258

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapImageUpload from '../../../../v2Components/CapImageUpload';
+import CapImageUrlUpload from '../../../../v2Components/CapImageUrlUpload';
+import { WEBPUSH } from '../../../CreativesContainer/constants';
+import {
+  WEBPUSH_MEDIA_TYPES,
+  WEBPUSH_MEDIA_TYPES_OPTIONS,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  WEBPUSH_IMG_SIZE,
+  WEBPUSH_RECOMMENDED_DIMENSIONS,
+  IMAGE_UPLOAD_METHODS,
+} from '../../constants';
+
+/**
+ * MediaSection component - Media type selection and image upload
+ */
+export const MediaSection = ({
+  mediaType,
+  onMediaTypeChange,
+  imageUpload,
+  isLocked,
+  isAnyUploadActive,
+  formatMessage,
+  messages,
+  webPush,
+  isFullMode,
+}) => {
+  const {
+    uploadMethod,
+    imageSrc,
+    imageUrl,
+    isValidating,
+    isUploading,
+    uploadAsset,
+    setUpdateImageSrc,
+    updateOnReUpload,
+    handleUrlChange,
+    handleValidationStateChange,
+    handleUploadStateChange,
+  } = imageUpload;
+
+  const isImageFieldActive = isValidating || isUploading;
+
+  return (
+    <>
+      <CapRow className="creatives-webpush-media">
+        <CapHeading type="h4" className="webpush-media-type">
+          <FormattedMessage {...messages.mediaType} />
+        </CapHeading>
+        <CapSelect.CapCustomSelect
+          width="100%"
+          className="margin-t-4"
+          options={WEBPUSH_MEDIA_TYPES_OPTIONS}
+          value={mediaType}
+          onChange={onMediaTypeChange}
+          disabled={isAnyUploadActive}
+        />
+      </CapRow>
+      {mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && (
+        <>
+          {uploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && (
+            <CapRow
+              className="webpush-image-upload-section"
+              style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+              aria-disabled={isLocked}
+            >
+              <CapImageUpload
+                allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+                imgSize={WEBPUSH_IMG_SIZE}
+                uploadAsset={uploadAsset}
+                isFullMode={isFullMode}
+                imageSrc={imageSrc}
+                updateImageSrc={setUpdateImageSrc}
+                updateOnReUpload={updateOnReUpload}
+                index={0}
+                className="cap-custom-image-upload"
+                key="webpush-uploaded-image"
+                imageData={webPush}
+                channel={WEBPUSH}
+                showReUploadButton
+                recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
+              />
+            </CapRow>
+          )}
+          {uploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && (
+            <CapRow
+              className="webpush-image-url-section"
+              style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+              aria-disabled={isLocked}
+            >
+              <CapImageUrlUpload
+                uploadAsset={uploadAsset}
+                imgSize={WEBPUSH_IMG_SIZE}
+                recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
+                sizeLabel={formatMessage(messages.sizeLimit)}
+                formatLabel={formatMessage(messages.formatTypes)}
+                imageUrl={imageUrl}
+                imageSrc={imageSrc}
+                onUrlChange={handleUrlChange}
+                onValidationStateChange={handleValidationStateChange}
+                onUploadStateChange={handleUploadStateChange}
+                isExternalUploading={isImageFieldActive}
+                disabled={isLocked}
+                className="webpush-image-url-upload"
+                fileNamePrefix="webpush-image"
+              />
+            </CapRow>
+          )}
+        </>
+      )}
+      <CapDivider />
+    </>
+  );
+};
+
+MediaSection.propTypes = {
+  mediaType: PropTypes.string.isRequired,
+  onMediaTypeChange: PropTypes.func.isRequired,
+  imageUpload: PropTypes.object.isRequired,
+  isLocked: PropTypes.bool,
+  isAnyUploadActive: PropTypes.bool,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+  webPush: PropTypes.object,
+  isFullMode: PropTypes.bool,
+};
+
+MediaSection.defaultProps = {
+  isLocked: false,
+  isAnyUploadActive: false,
+  webPush: {},
+  isFullMode: true,
+};
+
+export default MediaSection;
+

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

@@ -0,0 +1,341 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import MediaSection from './MediaSection';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import {
+  WEBPUSH_MEDIA_TYPES,
+  IMAGE_UPLOAD_METHODS,
+} from '../../constants';
+
+// Mock CapImageUpload
+jest.mock('../../../../v2Components/CapImageUpload', () => {
+  const React = require('react');
+  return function MockCapImageUpload(props) {
+    return (
+      <div data-testid="cap-image-upload" className="cap-image-upload-mock">
+        <div>CapImageUpload</div>
+        <div>imageSrc: {props.imageSrc}</div>
+        <div>channel: {props.channel}</div>
+      </div>
+    );
+  };
+});
+
+// Mock CapImageUrlUpload
+jest.mock('../../../../v2Components/CapImageUrlUpload', () => {
+  const React = require('react');
+  return function MockCapImageUrlUpload(props) {
+    return (
+      <div data-testid="cap-image-url-upload" className="cap-image-url-upload-mock">
+        <div>CapImageUrlUpload</div>
+        <div>imageUrl: {props.imageUrl}</div>
+        <div>imageSrc: {props.imageSrc}</div>
+        <div>disabled: {props.disabled ? 'true' : 'false'}</div>
+      </div>
+    );
+  };
+});
+
+describe('MediaSection', () => {
+  const mockFormatMessage = jest.fn((message) => message?.defaultMessage || message?.id || message);
+  const mockOnMediaTypeChange = jest.fn();
+
+  const mockMessages = {
+    mediaType: {
+      id: 'app.webpush.mediaType',
+      defaultMessage: 'Media Type',
+    },
+    sizeLimit: {
+      id: 'app.webpush.sizeLimit',
+      defaultMessage: 'Size limit',
+    },
+    formatTypes: {
+      id: 'app.webpush.formatTypes',
+      defaultMessage: 'Format types',
+    },
+  };
+
+  const mockImageUpload = {
+    uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+    imageSrc: '',
+    imageUrl: '',
+    isValidating: false,
+    isUploading: false,
+    uploadAsset: jest.fn(),
+    setUpdateImageSrc: jest.fn(),
+    updateOnReUpload: jest.fn(),
+    handleUrlChange: jest.fn(),
+    handleValidationStateChange: jest.fn(),
+    handleUploadStateChange: jest.fn(),
+  };
+
+  const defaultProps = {
+    mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+    onMediaTypeChange: mockOnMediaTypeChange,
+    imageUpload: mockImageUpload,
+    isLocked: false,
+    isAnyUploadActive: false,
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+    webPush: {},
+    isFullMode: true,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<MediaSection {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render main container with correct class', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const container = wrapper.find('.creatives-webpush-media');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('should render heading', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const heading = wrapper.find(CapHeading).find('.webpush-media-type');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('should render CapSelect.CapCustomSelect with correct props', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.exists()).toBe(true);
+      expect(select.prop('width')).toBe('100%');
+      expect(select.prop('className')).toBe('margin-t-4');
+      expect(select.prop('value')).toBe(WEBPUSH_MEDIA_TYPES.NONE);
+      expect(select.prop('disabled')).toBe(false);
+    });
+
+    it('should render Divider', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const divider = wrapper.find(CapDivider);
+      expect(divider.exists()).toBe(true);
+    });
+  });
+
+  describe('Media Type Selection', () => {
+    it('should call onMediaTypeChange when select changes', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      select.prop('onChange')(WEBPUSH_MEDIA_TYPES.IMAGE);
+      expect(mockOnMediaTypeChange).toHaveBeenCalledWith(WEBPUSH_MEDIA_TYPES.IMAGE);
+    });
+
+    it('should disable select when isAnyUploadActive is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection {...defaultProps} isAnyUploadActive={true} />
+      );
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.prop('disabled')).toBe(true);
+    });
+  });
+
+  describe('Image Upload - UPLOAD_IMAGE Method', () => {
+    it('should render CapImageUpload when mediaType is IMAGE and uploadMethod is UPLOAD_IMAGE', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+            imageSrc: 'path/to/image.jpg',
+          }}
+        />
+      );
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(true);
+    });
+
+    it('should not render CapImageUpload when mediaType is NONE', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(false);
+    });
+
+    it('should apply locked styles when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          isLocked={true}
+        />
+      );
+      const uploadSection = wrapper.find('.webpush-image-upload-section').first();
+      expect(uploadSection.exists()).toBe(true);
+      expect(uploadSection.prop('aria-disabled')).toBe(true);
+    });
+
+    it('should not apply locked styles when isLocked is false', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          isLocked={false}
+        />
+      );
+      const uploadSection = wrapper.find('.webpush-image-upload-section');
+      expect(uploadSection.exists()).toBe(true);
+    });
+  });
+
+  describe('Image Upload - ADD_IMAGE_URL Method', () => {
+    it('should render CapImageUrlUpload when mediaType is IMAGE and uploadMethod is ADD_IMAGE_URL', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+            imageUrl: 'https://example.com/image.jpg',
+          }}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+
+    it('should not render CapImageUrlUpload when mediaType is NONE', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(false);
+    });
+
+    it('should apply locked styles when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+          }}
+          isLocked={true}
+        />
+      );
+      const urlSection = wrapper.find('.webpush-image-url-section').first();
+      expect(urlSection.exists()).toBe(true);
+      expect(urlSection.prop('aria-disabled')).toBe(true);
+    });
+
+    it('should pass disabled prop to CapImageUrlUpload when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+          }}
+          isLocked={true}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+  });
+
+  describe('Image Upload State', () => {
+    it('should set isImageFieldActive when isValidating is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+            isValidating: true,
+          }}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+
+    it('should set isImageFieldActive when isUploading is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+            isUploading: true,
+          }}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default isLocked when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.NONE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.prop('disabled')).toBe(false);
+    });
+
+    it('should use default isAnyUploadActive when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.NONE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.prop('disabled')).toBe(false);
+    });
+
+    it('should use default webPush when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(true);
+    });
+
+    it('should use default isFullMode when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(true);
+    });
+  });
+});
+

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

@@ -0,0 +1,103 @@
+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 CapEmojiPicker from '@capillarytech/cap-ui-library/CapEmojiPicker';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
+
+/**
+ * MessageSection component - Message textarea with tags, emoji picker, and character count
+ */
+export const MessageSection = ({
+  value,
+  error,
+  onChange,
+  formatMessage,
+  messages,
+  tagList,
+  messageCountRef,
+  messageTextAreaRef,
+  handleMessageTextAreaRef,
+}) => {
+  const renderCharacterCount = () => {
+    if (!SHOW_CHARACTER_COUNT) return null;
+
+    const maxLength = MESSAGE_MAX_LENGTH;
+
+    return (
+      <CapLabel type="label2" className="webpush-character-count">
+        <span ref={messageCountRef}>
+          {formatMessage(messages.characterCount, {
+            currentLength: value.length,
+            maxLength,
+          })}
+        </span>
+      </CapLabel>
+    );
+  };
+
+  return (
+    <>
+      <CapRow className="creatives-webpush-message">
+        <CapRow className="tooltip-add-label-container webpush-message-taglist">
+          {tagList}
+        </CapRow>
+        <CapHeading type="h4" className="webpush-message">
+          <FormattedMessage {...messages.message} />
+        </CapHeading>
+        <CapEmojiPicker.Wrapper
+          value={value}
+          onChange={onChange}
+          textAreaRef={messageTextAreaRef}
+        >
+          <CapInput.TextArea
+            id="webpush-message-input"
+            value={value}
+            onChange={onChange}
+            placeholder={formatMessage(messages.messagePlaceholder)}
+            size="default"
+            isRequired
+            autosize={{ minRows: 3, maxRows: 5 }}
+            setInputRef={handleMessageTextAreaRef}
+            errorMessage={
+              error && (
+                <CapError className="webpush-template-message-error">
+                  {error}
+                </CapError>
+              )
+            }
+          />
+        </CapEmojiPicker.Wrapper>
+        {renderCharacterCount()}
+      </CapRow>
+      <CapDivider className="webpush-message-divider" />
+    </>
+  );
+};
+
+MessageSection.propTypes = {
+  value: PropTypes.string.isRequired,
+  error: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+  tagList: PropTypes.node,
+  messageCountRef: PropTypes.object,
+  messageTextAreaRef: PropTypes.object,
+  handleMessageTextAreaRef: PropTypes.func.isRequired,
+};
+
+MessageSection.defaultProps = {
+  error: '',
+  tagList: null,
+  messageCountRef: null,
+  messageTextAreaRef: null,
+};
+
+export default MessageSection;
+