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

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js

@@ -1,152 +0,0 @@
-/**
- * ValidationErrorDisplay Component Tests
- *
- * Tests for the ValidationErrorDisplay component that integrates with ErrorInfoNote.
- */
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import ValidationErrorDisplay from '../index';
-
-// Mock ErrorInfoNote component
-jest.mock('../../../../ErrorInfoNote', () => {
-  return function MockErrorInfoNote({ errorMessages }) {
-    const liquidErrors = errorMessages?.LIQUID_ERROR_MSG || [];
-    const standardErrors = errorMessages?.STANDARD_ERROR_MSG || [];
-    const hasErrors = liquidErrors.length > 0 || standardErrors.length > 0;
-
-    if (!hasErrors) return null;
-
-    return (
-      <div data-testid="error-info-note">
-        {liquidErrors.map((msg, index) => (
-          <div key={`liquid-${index}`} data-testid="error-message">
-            {msg}
-          </div>
-        ))}
-        {standardErrors.map((msg, index) => (
-          <div key={`standard-${index}`} data-testid="error-message">
-            {msg}
-          </div>
-        ))}
-      </div>
-    );
-  };
-});
-
-describe('ValidationErrorDisplay', () => {
-  it('renders standard errors when validation has issues', () => {
-    const mockValidation = {
-      getAllIssues: () => [
-        { message: 'Missing closing tag', severity: 'error', line: 5, column: 10 },
-        { message: 'Invalid attribute', severity: 'error', line: 7 }
-      ],
-      isClean: () => false,
-      isValidating: false
-    };
-
-    render(<ValidationErrorDisplay validation={mockValidation} />);
-
-    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
-    const errorMessages = screen.getAllByTestId('error-message');
-    expect(errorMessages).toHaveLength(2);
-    expect(errorMessages[0]).toHaveTextContent('Missing closing tag Line 5, Char 10.');
-    expect(errorMessages[1]).toHaveTextContent('Invalid attribute Line 7.');
-  });
-
-  it('renders liquid errors separately', () => {
-    const mockValidation = {
-      getAllIssues: () => [
-        { message: 'Invalid liquid syntax', severity: 'error', source: 'liquid-validator', line: 3 },
-        { message: 'HTML error', severity: 'error', source: 'htmlhint', line: 10 }
-      ],
-      isClean: () => false,
-      isValidating: false
-    };
-
-    render(<ValidationErrorDisplay validation={mockValidation} />);
-
-    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
-    const errorMessages = screen.getAllByTestId('error-message');
-    expect(errorMessages).toHaveLength(2);
-    // First should be liquid error, second should be standard error
-    expect(errorMessages[0]).toHaveTextContent('Invalid liquid syntax Line 3.');
-    expect(errorMessages[1]).toHaveTextContent('HTML error Line 10.');
-  });
-
-  it('does not render when validation has no errors', () => {
-    const mockValidation = {
-      getAllIssues: () => [],
-      isClean: () => true,
-      isValidating: false
-    };
-
-    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
-
-    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('does not render when validation is null', () => {
-    const { container } = render(<ValidationErrorDisplay validation={null} />);
-
-    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('does not render when validation is in progress', () => {
-    const mockValidation = {
-      getAllIssues: () => [],
-      isClean: () => false,
-      isValidating: true
-    };
-
-    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
-
-    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('applies custom className', () => {
-    const mockValidation = {
-      getAllIssues: () => [{ message: 'Error', severity: 'error' }],
-      isClean: () => false,
-      isValidating: false
-    };
-
-    const { container } = render(
-      <ValidationErrorDisplay validation={mockValidation} className="custom-class" />
-    );
-
-    const wrapper = container.querySelector('.validation-error-display');
-    expect(wrapper).toHaveClass('custom-class');
-  });
-
-  it('handles inapp variant correctly', () => {
-    const mockValidation = {
-      getAllIssues: () => [{ message: 'Mobile error', severity: 'error' }],
-      isClean: () => false,
-      isValidating: false
-    };
-
-    render(<ValidationErrorDisplay validation={mockValidation} variant="inapp" />);
-
-    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
-    expect(screen.getByTestId('error-message')).toHaveTextContent('Mobile error');
-  });
-
-  it('includes rule information in error messages when available', () => {
-    const mockValidation = {
-      getAllIssues: () => [
-        { message: 'Alt attribute required', severity: 'error', rule: 'alt-require', line: 5 }
-      ],
-      isClean: () => false,
-      isValidating: false
-    };
-
-    render(<ValidationErrorDisplay validation={mockValidation} />);
-
-    expect(screen.getByTestId('error-message')).toHaveTextContent('Alt attribute required Line 5. • alt-require');
-  });
-});

package/v2Containers/EmailWrapper/tests/EmailWrapperView.test.js

@@ -1,214 +0,0 @@
-import React from 'react';
-import { render, fireEvent, within, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils'
-import { initialReducer } from '../../../initialReducer';
-import EmailWrapperView from '../components/EmailWrapperView';
-import { EmailWrapperViewMockProps } from '../mockdata/mockdata';
-import { EMAIL_CREATE_MODES } from '../constants';
-import history from '../../../utils/history';
-
-// This mock needs to be before any imports
-jest.mock('../../../v2Containers/Email', () => ({
-  __esModule: true,
-  default: () => <div data-testid="email-create-container" />,
-}));
-
-// Mock react-router
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: jest.fn(),
-    replace: jest.fn(),
-    go: jest.fn(),
-    goBack: jest.fn(),
-    goForward: jest.fn(),
-    location: { search: '' }
-  }),
-}));
-
-// Mock redux-auth-wrapper
-jest.mock('redux-auth-wrapper/history4/redirect', () => ({
-  connectedRouterRedirect: () => (Component) => Component,
-}));
-
-// Mock react-router
-jest.mock('connected-react-router', () => ({
-  push: jest.fn(),
-  replace: jest.fn(),
-  go: jest.fn(),
-  goBack: jest.fn(),
-  goForward: jest.fn(),
-}));
-
-// Mock the saga injector
-jest.mock('@capillarytech/vulcan-react-sdk/utils/injectSaga', () => ({
-  __esModule: true,
-  default: () => (Component) => Component,
-}));
-
-
-const initialState = {
-  cap: { loading: false, error: null },
-  router: { location: { pathname: '/' } }
-};
-
-describe('EmailWrapperView', () => {
-  let store;
-
-  beforeAll(() => {
-    store = configureStore(initialState, initialReducer, history);
-  });
-
-  const renderWithProviders = (component) => {
-    return render(
-      <Provider store={store}>
-        <IntlProvider locale="en" messages={{}}>
-          {component}
-        </IntlProvider>
-      </Provider>
-    );
-  };
-
-  it('renders mode selection UI when step is modeSelection', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'modeSelection',
-    };
-
-    const { getByText } = renderWithProviders(<EmailWrapperView {...props} />);
-    expect(getByText('Create using editor')).toBeInTheDocument();
-    expect(getByText('Upload zip file')).toBeInTheDocument();
-  });
-
-  it('shows template name input in full mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const input = container.querySelector('.ant-input');
-    expect(input).toBeInTheDocument();
-    expect(input.value).toBe(props.templateName);
-  });
-
-  it('handles template name changes', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      onTemplateNameChange: jest.fn(),
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const input = container.querySelector('.ant-input');
-    expect(input).toBeInTheDocument();
-
-    // Create a change event and fire it
-    fireEvent.change(input, { target: { value: 'New Template Name' } });
-
-    // Just verify that the function was called
-    expect(props.onTemplateNameChange).toHaveBeenCalled();
-  });
-
-  it('shows upload button when in upload mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      uploadButtonLabel: 'Upload',
-    };
-
-    const { getByText, container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Find the "Upload zip file" section
-    const modeSelectionSection = getByText('Upload zip file').closest('div');
-
-    // Find any button in the upload section
-    const uploadButton = container.querySelector('.ant-btn');
-
-    // Verify that we found an upload button
-    expect(uploadButton).toBeInTheDocument();
-    expect(uploadButton.textContent).toContain('Upload');
-  });
-
-  it('shows loading spinner when uploading', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isUploading: true,
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      step: 'modeSelection',
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const spinner = container.querySelector('.ant-spin');
-    expect(spinner).toBeInTheDocument();
-  });
-
-  it('shows content creation UI when not in mode selection', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'contentCreation',
-      isShowEmailCreate: true,
-    };
-
-    const { getByTestId } = renderWithProviders(<EmailWrapperView {...props} />);
-    expect(getByTestId('email-create-container')).toBeInTheDocument();
-  });
-
-  it('disables upload button when template name is empty in full mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      templateName: '',
-      isTemplateNameEmpty: true,
-      uploadButtonLabel: 'Upload',
-    };
-
-    const { getByText, container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Find the Upload section
-    getByText('Upload zip file');
-
-    // Find button in the container
-    const uploadButton = container.querySelector('.ant-btn');
-
-    // Check if the button is disabled
-    expect(uploadButton).toBeDisabled();
-  });
-
-  it('shows error message when template name is empty during upload', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      templateName: '',
-      isTemplateNameEmpty: true,
-      // Add errorMessage directly to the props
-      errorMessage: 'Please enter template name',
-      intl: {
-        formatMessage: () => 'Please enter template name',
-      },
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Look for error feedback in the Ant Design form
-    const errorElement = container.querySelector('.ant-form-item-explain');
-
-    if (errorElement) {
-      expect(errorElement.textContent).toContain('Please enter template name');
-    } else {
-      // If the standard error element is not found, look for any element containing the error text
-      const allText = container.textContent;
-      expect(allText).toContain('Please enter template name');
-    }
-  });
-});

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

@@ -1,108 +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 CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapImageUpload from '../../../../v2Components/CapImageUpload';
-import { WEBPUSH_BRAND_ICON } from '../../../CreativesContainer/constants';
-import {
-  BRAND_ICON_OPTIONS,
-  ALLOWED_IMAGE_EXTENSIONS_REGEX,
-  WEBPUSH_BRAND_ICON_SIZE,
-  WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS,
-} from '../../constants';
-
-/**
- * BrandIconSection component - Brand icon/logo upload options
- */
-export const BrandIconSection = ({
-  brandIconOption,
-  onBrandIconChange,
-  brandIconUpload,
-  isLocked,
-  isAnyUploadActive,
-  formatMessage,
-  messages,
-  webPush,
-  isFullMode,
-}) => {
-  const {
-    imageSrc: brandIconSrc,
-    uploadAsset: uploadBrandIconAsset,
-    setUpdateImageSrc: setUpdateBrandIconSrc,
-    updateOnReUpload: updateOnBrandIconReUpload,
-  } = brandIconUpload;
-
-  const brandIconOptions = [
-    { value: BRAND_ICON_OPTIONS.DONT_SHOW, label: formatMessage(messages.dontShow) },
-    { value: BRAND_ICON_OPTIONS.UPLOAD_IMAGE, label: formatMessage(messages.uploadImage) },
-    // NOTE: Commented out due to technical blocker - "Add image URL" option for Brand icon/logo
-    // { value: BRAND_ICON_OPTIONS.ADD_IMAGE_URL, label: formatMessage(messages.addImageUrl) },
-  ];
-
-  return (
-    <>
-      <CapRow className="creatives-webpush-brand-icon">
-        <CapHeading type="h4" className="webpush-brand-icon">
-          <FormattedMessage {...messages.brandIconLogo} />
-        </CapHeading>
-        <CapRadioGroup
-          options={brandIconOptions}
-          value={brandIconOption}
-          onChange={onBrandIconChange}
-          disabled={isAnyUploadActive}
-        />
-      </CapRow>
-      {brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && (
-        <CapRow
-          className="webpush-brand-icon-upload-section"
-          style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-          aria-disabled={isLocked}
-        >
-          <CapImageUpload
-            allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-            imgSize={WEBPUSH_BRAND_ICON_SIZE}
-            uploadAsset={uploadBrandIconAsset}
-            isFullMode={isFullMode}
-            imageSrc={brandIconSrc}
-            updateImageSrc={setUpdateBrandIconSrc}
-            updateOnReUpload={updateOnBrandIconReUpload}
-            index={1}
-            className="cap-custom-image-upload"
-            key="webpush-brand-icon-uploaded-image"
-            imageData={webPush}
-            channel={WEBPUSH_BRAND_ICON}
-            showReUploadButton
-            recommendedDimensions={WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS}
-            disabled={isLocked}
-          />
-        </CapRow>
-      )}
-      <CapDivider />
-    </>
-  );
-};
-
-BrandIconSection.propTypes = {
-  brandIconOption: PropTypes.string.isRequired,
-  onBrandIconChange: PropTypes.func.isRequired,
-  brandIconUpload: PropTypes.object.isRequired,
-  isLocked: PropTypes.bool,
-  isAnyUploadActive: PropTypes.bool,
-  formatMessage: PropTypes.func.isRequired,
-  messages: PropTypes.object.isRequired,
-  webPush: PropTypes.object,
-  isFullMode: PropTypes.bool,
-};
-
-BrandIconSection.defaultProps = {
-  isLocked: false,
-  isAnyUploadActive: false,
-  webPush: {},
-  isFullMode: true,
-};
-
-export default BrandIconSection;
-

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

@@ -1,172 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import messages from '../messages';
-import { isValidHttpUrl } from '../utils/urlValidation';
-import { WEBPUSH_BUTTON_TYPES, BUTTON_TEXT_MAX_LENGTH } from '../../constants';
-
-const ButtonForm = ({
-  buttonType, // 'primary' or 'secondary'
-  formatMessage,
-  onSave,
-  onCancel,
-  initialData,
-  isEditMode,
-}) => {
-  const [buttonText, setButtonText] = useState(initialData?.text || '');
-  const [buttonUrl, setButtonUrl] = useState(initialData?.url || '');
-  const [buttonTextError, setButtonTextError] = useState('');
-  const [buttonUrlError, setButtonUrlError] = useState('');
-
-  const validateButtonText = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.buttonTextRequired);
-    }
-    return '';
-  }, [formatMessage]);
-
-  const validateButtonUrl = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.buttonUrlRequired);
-    }
-
-    if (!isValidHttpUrl(value)) {
-      return formatMessage(messages.buttonUrlInvalid);
-    }
-
-    return '';
-  }, [formatMessage]);
-
-  const handleButtonTextChange = useCallback((e) => {
-    const { value } = e.target;
-    setButtonText(value);
-    const nextError = validateButtonText(value);
-    setButtonTextError((prev) => (prev === nextError ? prev : nextError));
-  }, [validateButtonText]);
-
-  const handleButtonUrlChange = useCallback((e) => {
-    const { value } = e.target;
-    setButtonUrl(value);
-    const nextError = validateButtonUrl(value);
-    setButtonUrlError((prev) => (prev === nextError ? prev : nextError));
-  }, [validateButtonUrl]);
-
-  const handleSave = useCallback(() => {
-    const textError = validateButtonText(buttonText);
-    const urlError = validateButtonUrl(buttonUrl);
-
-    if (textError || urlError) {
-      setButtonTextError(textError);
-      setButtonUrlError(urlError);
-      return;
-    }
-
-    onSave({
-      text: buttonText.trim(),
-      url: buttonUrl.trim(),
-      type: buttonType,
-    });
-  }, [buttonText, buttonUrl, buttonType, onSave, validateButtonText, validateButtonUrl]);
-
-  const handleCancel = useCallback(() => {
-    onCancel();
-  }, [onCancel]);
-
-  const isSaveDisabled = !buttonText.trim() || !buttonUrl.trim() || buttonTextError || buttonUrlError;
-
-  const renderCharacterCountSuffix = () => {
-    const currentLength = buttonText.length;
-    const maxLength = BUTTON_TEXT_MAX_LENGTH;
-
-    return (
-      <span className="button-character-count-suffix">
-        {`${currentLength}/${maxLength}`}
-      </span>
-    );
-  };
-
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter' && !isSaveDisabled) {
-      e.preventDefault();
-      handleSave();
-    }
-  }, [handleSave, isSaveDisabled]);
-
-  return (
-    <div className="webpush-button-form" onKeyDown={handleKeyDown}>
-      <CapRow className="button-form-row">
-        <CapHeading type="h4" className="button-form-heading">
-          <FormattedMessage {...messages.buttonText} />
-        </CapHeading>
-        <div className="button-form-field">
-          <CapInput
-            id={`webpush-button-text-input-${buttonType}`}
-            placeholder={formatMessage(messages.buttonTextPlaceholder)}
-            value={buttonText}
-            onChange={handleButtonTextChange}
-            maxLength={BUTTON_TEXT_MAX_LENGTH}
-            size="default"
-            status={buttonTextError ? 'error' : ''}
-            help={buttonTextError || ''}
-            suffix={renderCharacterCountSuffix()}
-          />
-        </div>
-      </CapRow>
-      <CapRow className="button-form-row">
-        <CapHeading type="h4" className="button-form-heading">
-          <FormattedMessage {...messages.buttonUrlLabel} />
-        </CapHeading>
-        <CapInput
-          id={`webpush-button-url-input-${buttonType}`}
-          placeholder={formatMessage(messages.buttonUrlPlaceholder)}
-          value={buttonUrl}
-          onChange={handleButtonUrlChange}
-          size="default"
-          status={buttonUrlError ? 'error' : ''}
-          help={buttonUrlError || ''}
-        />
-      </CapRow>
-      <CapRow className="button-form-actions">
-        <CapButton
-          type="primary"
-          onClick={handleSave}
-          disabled={isSaveDisabled}
-          className="button-form-save"
-        >
-          <FormattedMessage {...messages.saveButton} />
-        </CapButton>
-        <CapButton
-          type="secondary"
-          onClick={handleCancel}
-          className="button-form-cancel"
-        >
-          <FormattedMessage {...(isEditMode ? messages.cancelButton : messages.deleteButton)} />
-        </CapButton>
-      </CapRow>
-    </div>
-  );
-};
-
-ButtonForm.propTypes = {
-  buttonType: PropTypes.oneOf([WEBPUSH_BUTTON_TYPES.PRIMARY, WEBPUSH_BUTTON_TYPES.SECONDARY]).isRequired,
-  formatMessage: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  initialData: PropTypes.shape({
-    text: PropTypes.string,
-    url: PropTypes.string,
-  }),
-  isEditMode: PropTypes.bool,
-};
-
-ButtonForm.defaultProps = {
-  initialData: null,
-  isEditMode: false,
-};
-
-export default ButtonForm;
-