@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

package/v2Components/CapImageUrlUpload/constants.js

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

package/v2Components/CapImageUrlUpload/index.js

@@ -1,455 +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, useRef } 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, MIME_TYPE_TO_EXTENSION, DEFAULT_IMAGE_EXTENSION } from './constants';
-import './index.scss';
-
-/**
- * Helper function to upload image from URL
- * Fetches image, validates content type and size, converts to File, and uploads via uploadAsset
- */
-const uploadImageFromUrlHelper = async (
-  url,
-  formatMessage,
-  messages,
-  uploadAssetFn,
-  fileNamePrefix,
-  maxSize,
-  allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
-) => {
-  const trimmedUrl = url?.trim() || '';
-  
-  try {
-    const response = await fetch(trimmedUrl, {
-      method: 'GET',
-      redirect: 'follow',
-    });
-
-    if (!response.ok) {
-      return {
-        success: 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)) {
-      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),
-    };
-  }
-};
-
-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('');
-  const [isWaitingForUploadComplete, setIsWaitingForUploadComplete] = useState(false);
-  
-  // Track if we're waiting for imageSrc after triggering upload
-  const uploadTriggeredRef = useRef(false);
-
-  /**
-   * 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 fetch(trimmedUrl, {
-          method: 'GET',
-          redirect: 'follow',
-        });
-
-        if (!response.ok) {
-          setIsValidating(false);
-          return {
-            isValid: false,
-            error: formatMessage(messages.imageLoadError),
-          };
-        }
-      } 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);
-    uploadTriggeredRef.current = true;
-    setIsWaitingForUploadComplete(true);
-    
-    // Notify parent that upload is starting
-    if (onUploadStateChange) {
-      onUploadStateChange(true);
-    }
-    
-    const result = await uploadImageFromUrlHelper(
-      url,
-      formatMessage,
-      messages,
-      uploadAsset,
-      fileNamePrefix,
-      imgSize,
-      allowedContentTypes,
-    );
-    
-    setIsInternalUploading(false);
-    
-    // Don't set waiting to false yet - wait for imageSrc to be populated
-    return result;
-  }, [formatMessage, uploadAsset, fileNamePrefix, imgSize, allowedContentTypes, onUploadStateChange]);
-
-  /**
-   * 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 completion tracking when URL changes
-    uploadTriggeredRef.current = false;
-    setIsWaitingForUploadComplete(false);
-    
-    // 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);
-          setIsWaitingForUploadComplete(false);
-          if (onUploadStateChange) {
-            onUploadStateChange(false);
-          }
-        }
-      }
-    } else {
-      setError('');
-      setIsWaitingForUploadComplete(false);
-      if (onValidationStateChange) {
-        onValidationStateChange(false);
-      }
-      if (onUploadStateChange) {
-        onUploadStateChange(false);
-      }
-    }
-  }, [validateImageUrl, uploadImageFromUrl, onUrlChange, onValidationStateChange, onUploadStateChange]);
-
-  /**
-   * Monitor imageSrc to detect when upload is complete
-   * Once imageSrc is populated after upload, we can stop showing "uploading"
-   */
-  useEffect(() => {
-    if (uploadTriggeredRef.current && imageSrc && imageSrc !== '') {
-      // Upload is complete - we have the secure file path
-      setIsWaitingForUploadComplete(false);
-      uploadTriggeredRef.current = false;
-      
-      // Notify parent that upload is complete
-      if (onUploadStateChange) {
-        onUploadStateChange(false);
-      }
-    }
-  }, [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. We're waiting for imageSrc after upload was triggered
-  const isActuallyUploading = isInternalUploading || isExternalUploading || isWaitingForUploadComplete;
-
-  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 && 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}',
-  },
-});
-