@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

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

@@ -1,143 +0,0 @@
-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 || isLocked}
-        />
-      </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}
-                disabled={isLocked}
-              />
-            </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

@@ -1,341 +0,0 @@
-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

@@ -1,103 +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 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;
-