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

package/utils/imageUrlUpload.js

@@ -1,141 +0,0 @@
-/**
- * Utility functions for uploading images from URLs
- * 
- * NOTE: CORS-limited; will be replaced with backend implementation.
- * Flow currently hidden (not removed) from frontend.
- */
-
-import {
-  DEFAULT_ALLOWED_CONTENT_TYPES,
-  MIME_TYPE_TO_EXTENSION,
-  DEFAULT_IMAGE_EXTENSION,
-} from '../v2Components/CapImageUrlUpload/constants';
-
-/**
- * Fetches an image from a URL
- * 
- * @param {string} url - The image URL to fetch
- * @returns {Promise<Response>} - The fetch response object
- * @throws {Error} - If the fetch fails (network/CORS error)
- */
-export const fetchImageFromUrl = async (url) => {
-  const trimmedUrl = url?.trim() || '';
-  
-  if (!trimmedUrl) {
-    throw new Error('URL is required');
-  }
-
-  // CORS-limited: fails for images without proper CORS headers
-  const response = await fetch(trimmedUrl, {
-    method: 'GET',
-    redirect: 'follow',
-    mode: 'cors',
-  });
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
-  }
-
-  return response;
-};
-
-/**
- * Helper function to upload image from URL
- * Fetches image, validates content type and size, converts to File, and uploads via uploadAsset
- * 
- * @param {string} url - The image URL to upload
- * @param {Function} formatMessage - React Intl formatMessage function
- * @param {Object} messages - React Intl messages object
- * @param {Function} uploadAssetFn - Function to upload the asset (file, type, fileParams)
- * @param {string} fileNamePrefix - Prefix for the generated file name
- * @param {number} maxSize - Maximum file size in bytes
- * @param {string[]} allowedContentTypes - Array of allowed MIME types (defaults to DEFAULT_ALLOWED_CONTENT_TYPES)
- * @returns {Promise<{success: boolean, error: string}>} - Result object with success status and error message
- * 
- * @example
- * const result = await uploadImageFromUrlHelper(
- *   'https://example.com/image.jpg',
- *   formatMessage,
- *   messages,
- *   uploadAsset,
- *   'my-image',
- *   5000000,
- *   ['image/jpeg', 'image/png']
- * );
- */
-export const uploadImageFromUrlHelper = async (
-  url,
-  formatMessage,
-  messages,
-  uploadAssetFn,
-  fileNamePrefix,
-  maxSize,
-  allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
-) => {
-  const trimmedUrl = url?.trim() || '';
-  
-  try {
-    const response = await fetchImageFromUrl(trimmedUrl);
-
-    // Validate Content-Type
-    const contentType = response.headers?.get('Content-Type') || '';
-    const normalizedContentType = contentType.split(';')[0].toLowerCase().trim();
-    
-    if (!allowedContentTypes.includes(normalizedContentType)) {
-      return {
-        success: false,
-        error: formatMessage(messages.imageTypeInvalid),
-      };
-    }
-
-    const blob = await response.blob();
-    
-    if (blob.size > maxSize) {
-      return {
-        success: false,
-        error: formatMessage(messages.imageSizeInvalid),
-      };
-    }
-
-    // Load image to get dimensions and verify validity
-    return new Promise((resolve) => {
-      const img = new Image();
-      const objectUrl = URL.createObjectURL(blob);
-      
-      img.onload = () => {
-        const extension = MIME_TYPE_TO_EXTENSION[normalizedContentType] || DEFAULT_IMAGE_EXTENSION;
-        const fileName = `${fileNamePrefix}.${extension}`;
-        const file = new File([blob], fileName, { type: blob.type });
-        const fileParams = {
-          width: img.width,
-          height: img.height,
-          error: false,
-        };
-        
-        uploadAssetFn(file, 'image', fileParams);
-        URL.revokeObjectURL(objectUrl);
-        
-        resolve({
-          success: true,
-          error: '',
-        });
-      };
-      
-      img.onerror = () => {
-        URL.revokeObjectURL(objectUrl);
-        resolve({
-          success: false,
-          error: formatMessage(messages.imageLoadError),
-        });
-      };
-      
-      img.src = objectUrl;
-    });
-  } catch (error) {
-    return {
-      success: false,
-      error: formatMessage(messages.imageLoadError),
-    };
-  }
-};
-

package/v2Components/CapImageUrlUpload/constants.js

@@ -1,26 +0,0 @@
-// Default allowed content types for image URL validation
-export const DEFAULT_ALLOWED_CONTENT_TYPES = ['image/jpeg', 'image/jpg', 'image/png'];
-
-// Default maximum file size (5MB)
-export const DEFAULT_MAX_SIZE = 5000000;
-
-// Default allowed extensions regex
-export const DEFAULT_ALLOWED_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
-
-// MIME type to file extension mapping
-export const MIME_TYPE_TO_EXTENSION = {
-  'image/jpeg': 'jpg',
-  'image/jpg': 'jpg',
-  'image/png': 'png',
-};
-
-// Default image extension fallback
-export const DEFAULT_IMAGE_EXTENSION = 'png';
-
-// Upload status state machine states
-export const UPLOAD_STATUS = {
-  IDLE: 'idle',
-  UPLOADING: 'uploading',
-  WAITING: 'waiting',
-};
-

package/v2Components/CapImageUrlUpload/index.js

@@ -1,365 +0,0 @@
-/**
- *
- * CapImageUrlUpload
- *
- * A modular component for uploading images from a URL.
- * Validates URL format, image type, and size before uploading to gallery.
- * Can be used in any form context (creatives, profiles, etc.)
- */
-
-import React, { useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import messages from './messages';
-import { DEFAULT_ALLOWED_CONTENT_TYPES, DEFAULT_MAX_SIZE, UPLOAD_STATUS } from './constants';
-import { fetchImageFromUrl, uploadImageFromUrlHelper } from '../../utils/imageUrlUpload';
-import './index.scss';
-
-function CapImageUrlUpload(props) {
-  const {
-    intl,
-    uploadAsset,
-    imgSize = DEFAULT_MAX_SIZE,
-    allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
-    recommendedDimensions = [],
-    sizeLabel = '',
-    formatLabel = '',
-    imageUrl = '',
-    imageSrc = '', // Secure file path from parent after upload completes
-    onUrlChange,
-    onValidationStateChange, // Callback to notify parent of validation state
-    onUploadStateChange, // Callback to notify parent of upload state
-    isExternalUploading = false, // Upload state from parent (e.g., redux)
-    className = '',
-    placeholder,
-    disabled = false,
-    fileNamePrefix = 'image',
-  } = props;
-
-  const { formatMessage } = intl ?? {};
-  const { CapHeadingSpan } = CapHeading;
-  
-  const [isValidating, setIsValidating] = useState(false);
-  const [isInternalUploading, setIsInternalUploading] = useState(false);
-  const [error, setError] = useState('');
-  // State machine for upload lifecycle
-  const [uploadStatus, setUploadStatus] = useState(UPLOAD_STATUS.IDLE);
-
-  /**
-   * Validate image URL
-   * Checks URL format, fetches as Blob, validates Content-Type, file size, and image validity
-   */
-  const validateImageUrl = useCallback(async (url) => {
-    const trimmedUrl = url?.trim() || '';
-    
-    if (!trimmedUrl) {
-      return { isValid: false, error: '' };
-    }
-
-    setIsValidating(true);
-    setError('');
-
-    try {
-      // Validate URL format
-      let urlObj;
-      try {
-        urlObj = new URL(trimmedUrl);
-        if (!['http:', 'https:'].includes(urlObj.protocol)) {
-          setIsValidating(false);
-          return {
-            isValid: false,
-            error: formatMessage(messages.imageUrlInvalid),
-          };
-        }
-      } catch (urlError) {
-        setIsValidating(false);
-        return {
-          isValid: false,
-          error: formatMessage(messages.imageUrlInvalid),
-        };
-      }
-
-      // Fetch image as Blob to check file size
-      let response;
-      try {
-        response = await fetchImageFromUrl(trimmedUrl);
-      } catch (fetchError) {
-        setIsValidating(false);
-        return {
-          isValid: false,
-          error: formatMessage(messages.imageLoadError),
-        };
-      }
-
-      // Validate Content-Type
-      const contentType = response.headers?.get('Content-Type') || '';
-      const normalizedContentType = contentType.split(';')[0].toLowerCase().trim();
-      
-      if (!allowedContentTypes.includes(normalizedContentType)) {
-        setIsValidating(false);
-        return {
-          isValid: false,
-          error: formatMessage(messages.imageTypeInvalid),
-        };
-      }
-
-      // Validate file size
-      const blob = await response.blob();
-      if (blob.size > imgSize) {
-        setIsValidating(false);
-        return {
-          isValid: false,
-          error: formatMessage(messages.imageSizeInvalid),
-        };
-      }
-
-      // Verify image validity by loading in Image object
-      return new Promise((resolve) => {
-        const img = new Image();
-        const objectUrl = URL.createObjectURL(blob);
-        
-        img.onload = () => {
-          URL.revokeObjectURL(objectUrl);
-          setIsValidating(false);
-          resolve({
-            isValid: true,
-            error: '',
-          });
-        };
-        
-        img.onerror = () => {
-          URL.revokeObjectURL(objectUrl);
-          setIsValidating(false);
-          resolve({
-            isValid: false,
-            error: formatMessage(messages.imageLoadError),
-          });
-        };
-        
-        img.src = objectUrl;
-      });
-    } catch (error) {
-      setIsValidating(false);
-      return {
-        isValid: false,
-        error: formatMessage(messages.imageLoadError),
-      };
-    }
-  }, [formatMessage, allowedContentTypes, imgSize]);
-
-  /**
-   * Upload image from URL to media gallery
-   * Fetches image, converts to File, uploads via uploadAsset
-   */
-  const uploadImageFromUrl = useCallback(async (url) => {
-    setIsInternalUploading(true);
-    setUploadStatus(UPLOAD_STATUS.UPLOADING);
-    
-    // Notify parent that upload is starting
-    if (onUploadStateChange) {
-      onUploadStateChange(true);
-    }
-    
-    const result = await uploadImageFromUrlHelper(
-      url,
-      formatMessage,
-      messages,
-      uploadAsset,
-      fileNamePrefix,
-      imgSize,
-      allowedContentTypes,
-    );
-    
-    setIsInternalUploading(false);
-    
-    // Check if imageSrc is already available (handles React batching/timing issues)
-    if (result.success && imageSrc && imageSrc !== '') {
-      // Upload already complete - imageSrc was set before we entered waiting state
-      setUploadStatus(UPLOAD_STATUS.IDLE);
-      if (onUploadStateChange) {
-        onUploadStateChange(false);
-      }
-    } else if (result.success) {
-      // Transition to waiting state - we've triggered the upload, now wait for imageSrc
-      setUploadStatus(UPLOAD_STATUS.WAITING);
-    } else {
-      // Upload failed
-      setUploadStatus(UPLOAD_STATUS.IDLE);
-      if (onUploadStateChange) {
-        onUploadStateChange(false);
-      }
-    }
-    
-    return result;
-  }, [formatMessage, uploadAsset, fileNamePrefix, imgSize, allowedContentTypes, onUploadStateChange, imageSrc]);
-
-  /**
-   * Handle image URL change
-   * Validates URL and triggers upload on success
-   */
-  const handleImageUrlChange = useCallback(async (e) => {
-    const url = e.target.value;
-    const trimmedUrl = url?.trim() || '';
-    
-    // Reset upload status when URL changes
-    setUploadStatus(UPLOAD_STATUS.IDLE);
-    
-    // Call parent's onUrlChange if provided
-    if (onUrlChange) {
-      onUrlChange(url);
-    }
-    
-    if (trimmedUrl !== '') {
-      // Notify parent that validation is starting
-      if (onValidationStateChange) {
-        onValidationStateChange(true);
-      }
-      
-      const validation = await validateImageUrl(trimmedUrl);
-      
-      // Notify parent that validation is complete
-      if (onValidationStateChange) {
-        onValidationStateChange(false);
-      }
-      
-      if (!validation.isValid) {
-        setError(validation.error);
-        if (onUploadStateChange) {
-          onUploadStateChange(false);
-        }
-      } else {
-        setError('');
-        // Upload image from URL when validation succeeds
-        const uploadResult = await uploadImageFromUrl(trimmedUrl);
-        if (!uploadResult.success) {
-          setError(uploadResult.error);
-          if (onUploadStateChange) {
-            onUploadStateChange(false);
-          }
-        }
-      }
-    } else {
-      setError('');
-      if (onValidationStateChange) {
-        onValidationStateChange(false);
-      }
-      if (onUploadStateChange) {
-        onUploadStateChange(false);
-      }
-    }
-  }, [validateImageUrl, uploadImageFromUrl, onUrlChange, onValidationStateChange, onUploadStateChange]);
-
-  /**
-   * Monitor upload status and imageSrc to detect when upload is complete
-   * Handles React batching and timing issues by checking state transitions
-   */
-  useEffect(() => {
-    if ((uploadStatus === UPLOAD_STATUS.UPLOADING || uploadStatus === UPLOAD_STATUS.WAITING) && imageSrc && imageSrc !== '') {
-      // Upload is complete - we have the secure file path
-      setUploadStatus(UPLOAD_STATUS.IDLE);
-      
-      // Notify parent that upload is complete
-      if (onUploadStateChange) {
-        onUploadStateChange(false);
-      }
-    }
-  }, [uploadStatus, imageSrc, onUploadStateChange]);
-
-  // Determine if we should show "uploading" state
-  // Show uploading when:
-  // 1. Internal upload is in progress, OR
-  // 2. External upload is in progress (from parent's redux), OR
-  // 3. State machine indicates we're uploading or waiting for completion
-  const isActuallyUploading = isInternalUploading || isExternalUploading || uploadStatus !== UPLOAD_STATUS.IDLE;
-
-  return (
-    <div className={`cap-image-url-upload ${className}`}>
-      <CapInput
-        className="image-url-input"
-        placeholder={placeholder || formatMessage(messages.imageUrlPlaceholder)}
-        value={imageUrl}
-        onChange={handleImageUrlChange}
-        size="default"
-        errorMessage={
-          error && (
-            <CapError className="image-url-error">
-              {error}
-            </CapError>
-          )
-        }
-        disabled={disabled || isValidating || isActuallyUploading}
-      />
-      
-      {isValidating && (
-        <CapLabel type="label2" className="validation-label">
-          <FormattedMessage {...messages.validatingUrl} />
-        </CapLabel>
-      )}
-      
-      {isActuallyUploading && !isValidating && (
-        <CapLabel type="label2" className="uploading-label">
-          <FormattedMessage {...messages.uploadingImage} />
-        </CapLabel>
-      )}
-      
-      <div className="webpush-image-specs">
-        {recommendedDimensions?.length > 0 && (
-          <CapHeadingSpan type="label2" className="image-dimension">
-            <FormattedMessage
-              {...messages.recommendedDimensions}
-              values={{
-                dimensions: recommendedDimensions
-                  .map((dim) => `${dim.width} x ${dim.height}px`)
-                  .join(', '),
-              }}
-            />
-          </CapHeadingSpan>
-        )}
-        
-        {sizeLabel && (
-          <CapHeadingSpan type="label2" className="image-size">
-            {sizeLabel}
-          </CapHeadingSpan>
-        )}
-        
-        {formatLabel && (
-          <CapHeadingSpan type="label2" className="image-format">
-            {formatLabel}
-          </CapHeadingSpan>
-        )}
-      </div>
-    </div>
-  );
-}
-
-CapImageUrlUpload.propTypes = {
-  intl: intlShape.isRequired,
-  uploadAsset: PropTypes.func.isRequired,
-  imgSize: PropTypes.number,
-  allowedContentTypes: PropTypes.arrayOf(PropTypes.string),
-  recommendedDimensions: PropTypes.arrayOf(
-    PropTypes.shape({
-      width: PropTypes.number.isRequired,
-      height: PropTypes.number.isRequired,
-    })
-  ),
-  sizeLabel: PropTypes.string,
-  formatLabel: PropTypes.string,
-  imageUrl: PropTypes.string,
-  imageSrc: PropTypes.string, // Secure file path from parent after upload completes
-  onUrlChange: PropTypes.func,
-  onValidationStateChange: PropTypes.func, // Callback(isValidating: bool)
-  onUploadStateChange: PropTypes.func, // Callback(isUploading: bool)
-  isExternalUploading: PropTypes.bool, // Upload state from parent (e.g., redux)
-  className: PropTypes.string,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.bool,
-  fileNamePrefix: PropTypes.string,
-};
-
-export default injectIntl(CapImageUrlUpload);
-

package/v2Components/CapImageUrlUpload/index.scss

@@ -1,35 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-@mixin cap-image-url-spec-text {
-  .image-dimension,
-  .image-size,
-  .image-format {
-    color: $CAP_G01;
-  }
-}
-
-.cap-image-url-upload {
-  .image-url-input {
-    width: 100%;
-  }
-
-  .validation-label,
-  .uploading-label {
-    margin-top: $CAP_SPACE_08;
-  }
-
-  .image-url-error {
-    margin-top: $CAP_SPACE_04;
-  }
-
-  .webpush-image-specs {
-    @include cap-image-url-spec-text;
-  }
-
-  .webpush-container & {
-    .webpush-image-specs {
-      @include cap-image-url-spec-text;
-    }
-  }
-}
-

package/v2Components/CapImageUrlUpload/messages.js

@@ -1,47 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const scope = 'app.v2Components.CapImageUrlUpload';
-
-export default defineMessages({
-  imageUrlPlaceholder: {
-    id: `${scope}.imageUrlPlaceholder`,
-    defaultMessage: 'Enter image URL',
-  },
-  imageUrlInvalid: {
-    id: `${scope}.imageUrlInvalid`,
-    defaultMessage: 'Please enter a valid image URL',
-  },
-  imageTypeInvalid: {
-    id: `${scope}.imageTypeInvalid`,
-    defaultMessage: 'Invalid image type. Only JPEG, JPG, and PNG formats are allowed',
-  },
-  imageSizeInvalid: {
-    id: `${scope}.imageSizeInvalid`,
-    defaultMessage: 'Image size exceeds the maximum limit',
-  },
-  imageLoadError: {
-    id: `${scope}.imageLoadError`,
-    defaultMessage: 'Failed to load image. Please check the URL and try again',
-  },
-  validatingUrl: {
-    id: `${scope}.validatingUrl`,
-    defaultMessage: 'Validating image URL...',
-  },
-  uploadingImage: {
-    id: `${scope}.uploadingImage`,
-    defaultMessage: 'Uploading image to gallery...',
-  },
-  recommendedDimensions: {
-    id: `${scope}.recommendedDimensions`,
-    defaultMessage: 'Recommended dimensions: {dimensions}',
-  },
-  sizeLimit: {
-    id: `${scope}.sizeLimit`,
-    defaultMessage: 'Size upto: {size}',
-  },
-  formatTypes: {
-    id: `${scope}.formatTypes`,
-    defaultMessage: 'Format: {formats}',
-  },
-});
-