@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

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

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

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