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

package/v2Components/CapImageUrlUpload/index.js

@@ -0,0 +1,455 @@
+/**
+ *
+ * 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

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

@@ -0,0 +1,47 @@
+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}',
+  },
+});
+

package/v2Containers/App/constants.js

@@ -40,6 +40,7 @@ export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
 export const TRACK_CREATE_VIBER = 'createViber';
 export const TRACK_CREATE_FACEBOOK = 'createFacebook';
+export const TRACK_CREATE_WEBPUSH = 'createWebPush';
 
 export const CREATE = 'create';
 export const EDIT = 'edit';
@@ -54,6 +55,7 @@ export const EMAIL = 'email';
 export const ASSETS = 'assets';
 export const ZALO = 'zalo';
 export const INAPP = 'inapp';
+export const WEBPUSH = 'webpush';
 
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 
@@ -65,6 +67,7 @@ export const TRACK_EDIT_IMAGE = 'editImage';
 export const TRACK_EDIT_LINE = 'editLine';
 export const TRACK_EDIT_VIBER = 'editViber';
 export const TRACK_EDIT_FACEBOOK = 'editFacebook';
+export const TRACK_EDIT_WEBPUSH = 'editWebPush';
 
 export const CHANNEL_CREATE_TRACK_MAPPING = {
   sms: TRACK_CREATE_SMS,
@@ -75,6 +78,7 @@ export const CHANNEL_CREATE_TRACK_MAPPING = {
   line: TRACK_CREATE_LINE,
   viber: TRACK_CREATE_VIBER,
   facebook: TRACK_CREATE_FACEBOOK,
+  webpush: TRACK_CREATE_WEBPUSH,
 };
 
 export const CHANNEL_EDIT_TRACK_MAPPING = {
@@ -86,6 +90,7 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   line: TRACK_EDIT_LINE,
   viber: TRACK_EDIT_VIBER,
   facebook: TRACK_EDIT_FACEBOOK,
+  webpush: TRACK_EDIT_WEBPUSH,
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -1950,6 +1950,7 @@ new message content.",
         "creatives.containersV2.WeChat.templateName": "Template Name",
         "creatives.containersV2.WeChat.wechatCreateSuccess": "WeChat template mapped successfully",
         "creatives.containersV2.WeChat.wechatEditSuccess": "WeChat template edited successfully",
+        "creatives.containersV2.WebPush.addLabels": "Add labels",
         "creatives.containersV2.Whatsapp.IncorrectCategoryError": "INCORRECT CATEGORY: Message content different from expected content in the category selected. Refer {here} for expected content in each category.",
         "creatives.containersV2.Whatsapp.accountUpdate": "Account update",
         "creatives.containersV2.Whatsapp.accountUpdateTooltip": "Let customers know about updates or changes to their accounts.",