@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/components/SidePanel/CustomQRCode/styles.scss

@@ -0,0 +1,149 @@
+.qr-card{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    border: 0.5px solid #0000003D;
+    padding: 8px;
+    border-radius: 4px;
+    position: relative;
+    cursor: pointer;
+
+    .qr-card-content{
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .actions-container{
+        position: absolute;
+        right: 12px;
+        top: 10px;
+    }
+
+    .actions{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 7px;
+        transition: all 0.3s ease;
+
+        &:hover{
+          background-color: #f5f5f5;
+          border-radius: 4px;
+        }
+    }
+
+    .actions-wrapper{
+        position: absolute;
+        top: calc(100% + 4px);
+        right: -8px;
+        background-color: #FFFFFF;
+        padding: 12px 8px;
+        box-shadow: 2px 8px 24px 0px #00000029;
+        gap: 6px;
+        display: flex;
+        flex-direction: column;
+        border-radius: 4px;
+        z-index: 10;
+        min-width: 100px;
+
+        &.actions-wrapper-up {
+            top: auto;
+            bottom: calc(100% + 4px);
+        }
+
+        .action-item{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s ease;
+
+            &:hover{
+                background-color: #f5f5f5;
+            }
+        }
+    }
+}
+
+// V2 Styles for API-driven functionality
+.qr-section-v2-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  .qr-code-wrapper-sticky {
+    flex-shrink: 0;
+  }
+}
+
+.qr-codes-list-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin-top: 16px;
+}
+
+.qr-codes-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  
+  .loading-state, .empty-state {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .loading-more {
+    padding: 10px;
+    text-align: center;
+  }
+}
+
+.qr-input-wrapper{
+    label{
+      font-weight: 600;
+      line-height: 19px;
+    }
+    &:not(:first-child){
+      margin-top: 15px;
+    }
+  }
+
+  .qr-input-wrapper-v2{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    label{
+      font-weight: 500;
+      line-height: 19px;
+    }
+  }
+  .qr-submit-btn{
+    width: 100%;
+    padding: 10px;
+    background-color: #5e5e5e;
+    box-shadow: inset 0 0 0 1px #11141833,0 1px 2px #1114181a;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    &:focus{
+      outline: none;
+    }
+    &:hover{
+      background-color: #383838;
+    }
+  }
+

package/src/components/SidePanel/CustomUploads/V2/index.tsx

@@ -0,0 +1,542 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { StoreType } from 'polotno/model/store';
+import { getCrop } from 'polotno/utils/image';
+
+// redux
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../../../../redux/store';
+
+// Utils
+import { getPublicApiKey, getType } from '../../../../utils/helper';
+import { allowedImageTypes } from '../../../../utils/constants';
+
+// Actions
+import { success } from '../../../../redux/actions/snackbarActions';
+
+// Components
+import DialogV2 from '../../../../components/GenericUIBlocks/Dialog/V2';
+
+// Icons
+// @ts-ignore
+import Upload from '../../../../assets/images/templates/upload-image.svg';
+// @ts-ignore
+import Trash from '../../../../assets/images/templates/trash-upload.svg';
+// @ts-ignore
+import Download from '../../../../assets/images/templates/download.svg';
+// @ts-ignore
+import ConfirmCloseIcon from '../../../../assets/images/modal-icons/confirm-close-icon';
+
+// Styles
+import './styles.scss';
+
+interface BrandingImage {
+  id: string | number;
+  url: string;
+  type: string;
+  name?: string;
+  meta?: any;
+}
+
+interface CustomUploadsV2Props {
+  store: StoreType;
+  onGetBrandingImages?: (payload: any) => Promise<any>;
+  onDeleteBrandingImage?: (id: string | number) => Promise<void>;
+  onUploadBrandingImage?: (payload: any) => Promise<any>;
+}
+
+const cancelDialogStylesV2 = {
+  maxWidth: '567px',
+  minHeight: 'auto',
+  padding: '40px',
+};
+
+export const CustomUploadsV2 = observer(({
+  store,
+  onGetBrandingImages,
+  onDeleteBrandingImage,
+  onUploadBrandingImage,
+}: CustomUploadsV2Props) => {
+  const [images, setImages] = useState<BrandingImage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [activeDropdown, setActiveDropdown] = useState<string | number | null>(null);
+  const [imageCache, setImageCache] = useState<Map<string, string>>(new Map());
+  const [openDeleteImage, setOpenDeleteImage] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<BrandingImage | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dropdownRefs = useRef<Map<string | number, HTMLDivElement>>(new Map());
+  const imagesGridRef = useRef<HTMLDivElement>(null);
+  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isLoadingRef = useRef(false);
+  const dispatch: AppDispatch = useDispatch();
+
+  const loadBrandingImages = useCallback(async (page: number = 1, append: boolean = false, loading = true) => {
+    if (!onGetBrandingImages) return;
+
+    // Prevent multiple simultaneous calls
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+
+    if (page === 1 && loading) {
+      setIsLoading(true);
+    } else {
+      setIsLoadingMore(true);
+    }
+
+    try {
+      const payload = {
+        page,
+        pageSize: 15
+      };
+
+      const brandingImages = await onGetBrandingImages(payload);
+
+      if (brandingImages && Array.isArray(brandingImages.rows)) {
+        const normalized = brandingImages.rows.map((img: any) => ({
+          id: img.id,
+          url: img.fileUrl,
+          type: img.type.toLowerCase(), // Convert to lowercase for consistency
+          name: img.name,
+          meta: img.meta
+        })) as BrandingImage[];
+
+        if (append && page > 1) {
+          // Merge with existing images, avoiding duplicates
+          setImages(prevImages => {
+            const existingIds = new Set(prevImages.map(img => img.id));
+            const newImages = normalized.filter(img => !existingIds.has(img.id));
+            return [...prevImages, ...newImages];
+          });
+        } else {
+          // Replace images for initial load
+          setImages(normalized);
+        }
+
+        // Update pagination state using API response pagination info
+        const hasMorePages = brandingImages.currentPage < brandingImages.lastPage;
+        setHasMore(hasMorePages);
+        setCurrentPage(brandingImages.currentPage);
+      } else {
+        if (!append) {
+          setImages([]);
+        }
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error('Failed to load branding images:', error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadingMore(false);
+      isLoadingRef.current = false;
+    }
+  }, [onGetBrandingImages]);
+
+  // Handle loading more images on scroll
+  const loadMoreImages = useCallback(async () => {
+    if (!hasMore || isLoadingMore || isLoading) return;
+    await loadBrandingImages(currentPage + 1, true);
+  }, [hasMore, isLoadingMore, isLoading, currentPage, loadBrandingImages]);
+
+  // Debounced scroll handler
+  const handleScroll = useCallback(() => {
+    if (!imagesGridRef.current || !hasMore || isLoadingMore || isLoading) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = imagesGridRef.current;
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+    // Load more when scrolled 80% of the way down
+    if (scrollPercentage > 0.75) {
+      // Clear existing timeout
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current);
+      }
+
+      // Debounce the API call by 300ms
+      loadingTimeoutRef.current = setTimeout(() => {
+        loadMoreImages();
+      }, 300);
+    }
+  }, [hasMore, isLoadingMore, isLoading, loadMoreImages]);
+
+  const handleOpenDeleteImage = () => {
+    setOpenDeleteImage(true);
+    setActiveDropdown(null);
+  };
+
+  const handleCloseDeleteImage = () => {
+    setOpenDeleteImage(false);
+  };
+
+  // Handle file validation
+  const validateFile = (file: File): boolean => {
+    if (!file || !allowedImageTypes.includes(file.type)) {
+      console.log('Only image files with extensions JPEG, PNG, or SVG are allowed.');
+      return false;
+    }
+    if (file.size >= 5 * 1024 * 1024) { // 5MB limit
+      console.log('File size must be under 5MB.');
+      return false;
+    }
+    return true;
+  };
+
+  const getImageDimensions = (file: File): Promise<{ width: number; height: number }> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+  
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          resolve({ width: img.width, height: img.height });
+        };
+        img.onerror = reject;
+        img.src = e.target?.result as string;
+      };
+  
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+
+  // Handle file upload
+  const handleFileUpload = async (files: FileList) => {
+    if (!files.length) return;
+
+    setIsUploading(true);
+    try {
+      for (const file of Array.from(files)) {
+        if (!validateFile(file)) {
+          continue;
+        }
+
+        if (onUploadBrandingImage) {
+          const formData = new FormData();
+          let { width, height } = await getImageDimensions(file);
+          const metaData = {
+            width, height
+          }
+          formData.append('image', file);
+          formData.append('meta_data', JSON.stringify(metaData));
+          await onUploadBrandingImage(formData);
+          // Reset pagination and reload from first page
+          setCurrentPage(1);
+          setHasMore(true);
+          await loadBrandingImages(1, false, false);
+        } else {
+          const localUrl = URL.createObjectURL(file);
+          const type = getType(file);
+
+          const tempImage: BrandingImage = {
+            id: `temp-${Date.now()}-${Math.random()}`,
+            url: localUrl,
+            type,
+            name: file.name,
+          };
+
+          setImages((prev) => [...prev, tempImage]);
+
+          // Cache the image URL
+          setImageCache(
+            (prev) => new Map(prev.set(tempImage.url, tempImage.url))
+          );
+        }
+      }
+    } catch (error) {
+      console.error('Upload failed:', error);
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  // Handle delete image
+  const handleDeleteImage = async (imageId: string | number) => {
+    if (!onDeleteBrandingImage) return;
+
+    try {
+      await onDeleteBrandingImage(imageId);
+      setImages(prev => prev.filter(img => img.id !== imageId));
+      setActiveDropdown(null);
+
+      // Clean up cache
+      const imageToDelete = images.find(img => img.id === imageId);
+      if (imageToDelete?.url.startsWith('blob:')) {
+        URL.revokeObjectURL(imageToDelete.url);
+      }
+      setImageCache(prev => {
+        const newCache = new Map(prev);
+        newCache.delete(imageToDelete?.url || '');
+        return newCache;
+      });
+    } catch (error) {
+      console.error('Failed to delete image:', error);
+    }
+  };
+
+  // Handle download image
+  const handleDownloadImage = async (image: BrandingImage) => {
+    try {
+      const response = await fetch(image.url, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${getPublicApiKey()}`,
+        },
+      });
+
+      if (!response.ok) throw new Error('Failed to download image');
+
+      // Convert response to Blob
+      const blob = await response.blob();
+
+      // Create a temporary object URL for download
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = image.name || `branding-image-${image.id}.png`;
+      document.body.appendChild(link);
+      link.click();
+
+      // Clean up
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      setActiveDropdown(null);
+    } catch (error) {
+      console.error('Download failed:', error);
+    }
+
+  };
+
+  // Handle image selection for canvas
+  const handleImageSelect = async (image: BrandingImage, pos?: { x: number; y: number }, element?: any) => {
+    const imageUrl = image.url;
+    const type = image.type;
+
+    const imageMetaData = typeof image?.meta?.data === 'string' ? JSON.parse(image?.meta?.data) : image?.meta?.data || {};
+    let width = imageMetaData?.width || 100;
+    let height = imageMetaData?.height || 100;
+
+    if (element && element.type === 'svg' && element.contentEditable && type === 'image') {
+      element.set({ maskSrc: imageUrl });
+      return;
+    }
+
+    if (element && element.type === 'image' && element.contentEditable && type === 'image') {
+      const crop = getCrop(element, { width, height });
+      element.set({ src: imageUrl, ...crop });
+      return;
+    }
+
+    const scale = Math.min(store.width / width, store.height / height, 1);
+    width = width * scale;
+    height = height * scale;
+
+    const x = (pos?.x || store.width / 2) - width / 2;
+    const y = (pos?.y || store.height / 2) - height / 2;
+
+    store.activePage?.addElement({
+      type: type === 'svg' ? type : 'image',
+      //@ts-ignore
+      src: imageUrl,
+      x,
+      y,
+      width,
+      height,
+    });
+  };
+
+  // Handle dropdown toggle
+  const toggleDropdown = (imageId: string | number, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setActiveDropdown(activeDropdown === imageId ? null : imageId);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (activeDropdown) {
+        const dropdownElement = dropdownRefs.current.get(activeDropdown);
+        if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+          setActiveDropdown(null);
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [activeDropdown]);
+
+  // Load images on mount
+  useEffect(() => {
+    loadBrandingImages(1, false);
+  }, []);
+
+  // Setup scroll event listener
+  useEffect(() => {
+    const gridElement = imagesGridRef.current;
+    if (gridElement) {
+      gridElement.addEventListener('scroll', handleScroll);
+      return () => {
+        gridElement.removeEventListener('scroll', handleScroll);
+        // Clean up timeout on unmount
+        if (loadingTimeoutRef.current) {
+          clearTimeout(loadingTimeoutRef.current);
+        }
+      };
+    }
+  }, [hasMore, isLoadingMore, isLoading, currentPage, handleScroll]);
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      images.forEach(image => {
+        if (image.url.startsWith('blob:')) {
+          URL.revokeObjectURL(image.url);
+        }
+      });
+    };
+  }, []);
+
+  return (
+    <div className="custom-uploads-v2">
+
+      {/* Upload Section */}
+      <div className="upload-section">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".jpg,.jpeg,.png,.svg"
+          multiple
+          className="file-input"
+          onChange={(e) => e.target.files && handleFileUpload(e.target.files)}
+        />
+
+        <button
+          className={`upload-button ${isUploading ? 'uploading' : ''}`}
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isUploading}
+        >
+          <img src={Upload} alt="upload" />
+          <span className="button-text">
+            {isUploading ? 'Uploading...' : 'Upload Image'}
+          </span>
+        </button>
+      </div>
+
+      {/* Header */}
+      <div className="upload-header">
+        <div className="upload-constraints">
+          <div className="format-text">
+            Accepted File Formats: JPEG, PNG, SVG
+          </div>
+          <div className="size-text">
+            Max Size: 5MB
+          </div>
+          <div className="quality-note">
+            Use high-res images for best print quality.
+          </div>
+        </div>
+      </div>
+
+      {/* Images Grid */}
+      <div className="images-grid" ref={imagesGridRef}>
+        {isLoading ? (
+          <div className="loading-state">Loading images...</div>
+        ) : images.length === 0 ? (
+          <div className="empty-state">No images uploaded yet</div>
+        ) : (
+          <>
+            {images.map((image) => (
+              <div key={image.id} className="image-item">
+                <div
+                  className="image-wrapper"
+                  onClick={() => handleImageSelect(image)}
+                >
+                  <img
+                    src={image.url}
+                    alt={image.name || 'Branding image'}
+                    className="image-preview"
+                    loading="lazy"
+                  />
+                  <div
+                    className="image-menu"
+                    onClick={(e) => toggleDropdown(image.id, e)}
+                  >
+                    <div className="menu-dots">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Dropdown Menu */}
+                {activeDropdown === image.id && (
+                  <div
+                    ref={(el) => {
+                      if (el) dropdownRefs.current.set(image.id, el);
+                    }}
+                    className="dropdown-menu"
+                  >
+                    {onDeleteBrandingImage && <button
+                      className="dropdown-item"
+                      onClick={() => {
+                        setSelectedImage(image);
+                        handleOpenDeleteImage();
+                      }}
+                      disabled={!onDeleteBrandingImage}
+                    >
+                      <img src={Trash} alt="trash" />
+                      Delete
+                    </button>}
+                    <button
+                      className="dropdown-item"
+                      onClick={() => handleDownloadImage(image)}
+                    >
+                      <img src={Download} alt="download" />
+                      Download
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))
+            }
+
+            {/* Loading indicator for pagination */}
+            {isLoadingMore && (
+              <div className="loading-more">
+                <div className="loading-state">Loading more images...</div>
+              </div>
+            )}
+          </>
+        )}
+
+        <DialogV2
+          icon={<ConfirmCloseIcon fill='var(--primary-color)' />}
+          customStyles={cancelDialogStylesV2}
+          open={openDeleteImage}
+          handleClose={handleCloseDeleteImage}
+          title='Delete Image'
+          subHeading=''
+          description='Are you sure you want to delete this image?'
+          onSubmit={() => {
+            handleDeleteImage(selectedImage?.id as string | number);
+            handleCloseDeleteImage();
+          }}
+          onCancel={handleCloseDeleteImage}
+          cancelText='No'
+          submitText='Yes'
+          isGallery={false}
+        />
+      </div>
+    </div>
+  );
+});
+
+export default CustomUploadsV2;