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

package/src/components/SidePanel/CustomUploads/V2/styles.scss

@@ -0,0 +1,267 @@
+.custom-uploads-v2 {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family);
+  padding: 14px;
+
+  .upload-header {
+    margin-bottom: 20px;
+
+    .upload-title {
+      font-size: 14px;
+      margin-bottom: 12px;
+      padding-top: 5px;
+      color: #1c2127;
+    }
+
+    .upload-constraints {
+      .format-text, .size-text {
+        font-size: 12px;
+        font-weight: 500 !important;
+        font-family: var(--font-family);
+        color: #000;
+        margin-bottom: 4px;
+      }
+
+      .quality-note {
+        font-size: 12px;
+        font-weight: 400 !important;
+        color: #00000066;
+      }
+    }
+  }
+
+  .upload-section {
+    margin-bottom: 16px;
+
+    .file-input {
+      display: none;
+    }
+
+    .upload-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 10px 16px;
+      background-color: #FFFFFF;
+      border: 0.5px solid #0000003D;
+      border-radius: 4px;
+      box-shadow: 0px 2px 6px 0px #0000000A;
+      color: #000;
+      font-size: 14px;
+      font-weight: 400;
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      &:hover{
+        background-color: #f5f5f5;
+      }
+
+      &:focus:not(:disabled) {
+        background-color: #ffffff;
+        outline: none;
+      }
+
+      &:active:not(:disabled) {
+        background-color: #f5f5f5;
+      }
+
+      &.uploading,
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+        background-color: #f6f7f9;
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        color: #5c7080;
+        flex-shrink: 0;
+      }
+
+      .button-text {
+        color: #1c2127;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .images-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 12px;
+    overflow-y: auto;
+
+    .loading-state, .empty-state {
+      grid-column: 1 / -1;
+      text-align: center;
+      padding: 40px 20px;
+      color: #6a737d;
+      font-size: 14px;
+    }
+
+    .image-item {
+      position: relative;
+
+      .image-wrapper {
+        position: relative;
+        border-radius: 6px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+        background: #f6f8fa;
+        border: 1px solid #e1e4e8;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+          .image-menu {
+            opacity: 1;
+          }
+        }
+
+        .image-preview {
+          width: 100%;
+          height: 120px;
+          object-fit: cover;
+          display: block;
+        }
+
+        .image-menu {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          opacity: 0;
+          transition: opacity 0.2s ease;
+          cursor: pointer;
+          z-index: 2;
+
+          .menu-dots {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 2px;
+            padding: 4px;
+            background: #fff;
+            border-radius: 4px;
+            backdrop-filter: blur(4px);
+            width: 16px;
+            height: 16px;
+            border-radius: 4px;
+
+            span {
+              width: 1.6px;
+              height: 1.6px;
+              background: #28303F;
+              border-radius: 50%;
+            }
+          }
+
+          &:hover .menu-dots {
+            background: #fff;
+          }
+        }
+      }
+
+      .dropdown-menu {
+        position: absolute;
+        top: 32px;
+        right: 0px;
+        background: white;
+        border: 1px solid #e1e4e8;
+        border-radius: 4px;
+        box-shadow: 2px 8px 24px 0px #00000029;
+        z-index: 1000;
+        min-width: 120px;
+        overflow: hidden;
+        padding: 12px 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .dropdown-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+          border: none;
+          background: none;
+          font-size: 12px;
+          font-family: var(--font-family);
+          font-weight: 300 !important;
+          color: #000000;
+          cursor: pointer;
+          transition: background-color 0.15s ease;
+          text-align: left;
+          height: 22px;
+          border-radius: 4px;
+
+          &:hover {
+            background-color: #f6f8fa;
+          }
+
+          &:focus {
+            background-color: #f6f8fa;
+            outline: none;
+          }
+
+          &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+
+            &:hover {
+              background-color: transparent;
+            }
+          }
+
+          .item-icon {
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Media queries for responsiveness
+@media (max-width: 768px) {
+  .custom-uploads-v2 {
+    .images-grid {
+      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+      gap: 8px;
+
+      .image-item .image-wrapper .image-preview {
+        height: 100px;
+      }
+    }
+
+    .upload-section .upload-area {
+      padding: 16px;
+      min-height: 100px;
+
+      .upload-icon svg {
+        width: 32px;
+        height: 32px;
+      }
+
+      .upload-text {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .custom-uploads-v2 {
+    .images-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}

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

@@ -0,0 +1,301 @@
+import React, { useEffect, useState } from 'react';
+
+// Third Party Libraries
+import { observer } from 'mobx-react-lite';
+import type { StoreType } from 'polotno/model/store';
+import {
+  ImagesGrid,
+  UploadSection as DefaultUploadSection,
+  SectionTab,
+} from 'polotno/side-panel';
+import { getImageSize, getCrop } from 'polotno/utils/image';
+
+// Hooks
+import { useDispatch, useSelector } from 'react-redux';
+
+// Actions
+import { uploadFile } from '../../../redux/actions/templateActions';
+import { failure } from '../../../redux/actions/snackbarActions';
+import { SET_UPLOADED_IMAGES } from '../../../redux/actions/action-types';
+import { AppDispatch, RootState } from '../../../redux/store';
+
+// Utils
+import { getType } from '../../../utils/helper';
+import { allowedImageTypes } from '../../../utils/constants';
+import { MESSAGES } from '../../../utils/message';
+
+// V2 Component
+import CustomUploadsV2 from './V2';
+
+
+interface UploadPanelProps {
+  store: StoreType;
+}
+
+export const UploadPanel = observer(({ store }: UploadPanelProps) => {
+  const [images, setImages] = useState<
+    Array<{
+      url: string;
+      type: string;
+    }>
+  >([]);
+  const [isUploading, setUploading] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+
+  const dispatch: AppDispatch = useDispatch();
+
+  const uploadedImages = useSelector(
+    (state: RootState) => state.templates.uploadedImages
+  );
+
+  const load = async () => {
+    if (uploadedImages) {
+      setLoading(true);
+      setImages(uploadedImages);
+      setLoading(false);
+    }
+  };
+
+  const validateFile = (file: File) => {
+    if (!file || !allowedImageTypes.includes(file?.type)) {
+      dispatch(
+        failure(MESSAGES.TEMPLATE.CUSTOM_UPLOAD_SECTION.TYPE_VALIDATION)
+      );
+      return false;
+    }
+    if (file.size >= 7300000) {
+      // 5MB limit
+      dispatch(
+        failure(MESSAGES.TEMPLATE.CUSTOM_UPLOAD_SECTION.SIZE_VALIDATION)
+      );
+      return false;
+    }
+    return true;
+  };
+
+  const handleFileInput = async (e: any) => {
+    try {
+      const { target } = e;
+      for (const file of target.files) {
+        const type = getType(file);
+        const validate = validateFile(file);
+        if (!validate) {
+          target.value = null;
+          return;
+        }
+        setUploading(true);
+        const uploadedFile = await uploadFile(file);
+        const allImages = [...images, { url: uploadedFile, type }];
+        setImages(allImages);
+        dispatch({ type: SET_UPLOADED_IMAGES, payload: allImages });
+      }
+      setUploading(false);
+      target.value = null;
+    } catch (error) {
+      return error;
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ height: '40px', paddingTop: '5px' }}>
+        {MESSAGES.TEMPLATE.CUSTOM_UPLOAD_SECTION.HEADING}
+      </div>
+      <div style={{ height: '35px' }}>
+        <strong>
+          {MESSAGES.TEMPLATE.CUSTOM_UPLOAD_SECTION.ACCEPTED_FORMATS}
+        </strong>
+      </div>
+      <div style={{ height: '35px' }}>
+        <strong>{MESSAGES.TEMPLATE.CUSTOM_UPLOAD_SECTION.MAX_SIZE}</strong>
+      </div>
+      <div style={{ marginBottom: '15px' }}>
+        <strong>Note:</strong> {MESSAGES.TEMPLATE.CUSTOM_UPLOAD_SECTION.NOTE}
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <label htmlFor="input-file">
+          {isUploading ? (
+            <button
+              type="button"
+              className="bp5-button bp5-disabled bp5-loading bp5-intent-primary"
+              style={{
+                width: '100%',
+                backgroundColor: 'rgb(246, 247, 249)',
+                boxShadow:
+                  'rgba(17, 20, 24, 0.2) 0px 0px 0px 1px inset, rgba(17, 20, 24, 0.1) 0px 1px 2px',
+                color: 'rgb(28, 33, 39)',
+              }}
+              disabled
+            >
+              <div
+                aria-label="loading"
+                className="bp5-spinner bp5-button-spinner"
+              >
+                <div className="bp5-spinner-animation">
+                  <svg
+                    width="20"
+                    height="20"
+                    strokeWidth="16"
+                    viewBox="-3 -3 106 106"
+                  >
+                    <path
+                      className="bp5-spinner-track"
+                      d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+                    />
+                    <path
+                      className="bp5-spinner-head"
+                      d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+                      pathLength="280"
+                      strokeDasharray="280 280"
+                      strokeDashoffset="210"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="custom-upload-image-btn bp5-button bp5-intent-primary"
+              style={{
+                width: '100%',
+                backgroundColor: '#f6f7f9',
+                boxShadow: 'inset 0 0 0 1px #11141833, 0 1px 2px #1114181a',
+                color: '#1c2127',
+              }}
+              onClick={() => document.getElementById('input-file')?.click()}
+            >
+              <svg
+                data-icon="upload"
+                width="16"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm3 8c-.28 0-.53-.11-.71-.29L9 6.41V12c0 .55-.45 1-1 1s-1-.45-1-1V6.41l-1.29 1.3a1.003 1.003 0 01-1.42-1.42l3-3C7.47 3.11 7.72 3 8 3s.53.11.71.29l3 3A1.003 1.003 0 0111 8z"
+                  fillRule="evenodd"
+                />
+              </svg>
+              <span className="bp5-button-text"> Upload Image</span>
+            </button>
+          )}
+          <input
+            type="file"
+            id="input-file"
+            style={{ display: 'none' }}
+            onChange={handleFileInput}
+            multiple
+          />
+        </label>
+      </div>
+      <ImagesGrid
+        images={images}
+        getPreview={(image) => image?.url}
+        crossOrigin={undefined}
+        isLoading={isLoading}
+        onSelect={async (item, pos, element) => {
+          const image = item?.url;
+          const type = item?.type;
+
+          let { width, height } = await getImageSize(image);
+
+          if (
+            element &&
+            element.type === 'svg' &&
+            element.contentEditable &&
+            type === 'image'
+          ) {
+            element.set({ maskSrc: image });
+            return;
+          }
+
+          if (
+            element &&
+            element.type === 'image' &&
+            element.contentEditable &&
+            type == 'image'
+          ) {
+            const crop = getCrop(element, {
+              width,
+              height,
+            });
+            element.set({ src: image, ...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,
+            // @ts-ignore
+            src: image,
+            x,
+            y,
+            width,
+            height,
+          });
+        }}
+      />
+    </div>
+  );
+});
+
+DefaultUploadSection.Panel = UploadPanel;
+
+// V2 Component with callback-based functionality
+interface CustomUploadsV2Props {
+  store: StoreType;
+  onGetBrandingImages?: (payload: any) => Promise<any>;
+  onDeleteBrandingImage?: (id: string | number) => Promise<void>;
+  onUploadBrandingImage?: (payload: any) => Promise<any>;
+}
+
+export const CustomUploadsV2Panel = observer(({
+  store,
+  onGetBrandingImages,
+  onDeleteBrandingImage,
+  onUploadBrandingImage,
+}: CustomUploadsV2Props) => {
+  return (
+    onGetBrandingImages ? <CustomUploadsV2
+      store={store}
+      onGetBrandingImages={onGetBrandingImages}
+      onDeleteBrandingImage={onDeleteBrandingImage}
+      onUploadBrandingImage={onUploadBrandingImage}
+    /> :
+      <UploadPanel store={store} />
+  );
+});
+
+// V2 Section Configuration
+export const CustomUploadsV2Section = {
+  name: 'uploads',
+  Tab: (props: any) => (
+    <SectionTab name="Uploads" {...props}>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+      </svg>
+    </SectionTab>
+  ),
+  Panel: CustomUploadsV2Panel,
+};
+
+export default UploadPanel;
+export { CustomUploadsV2 };