@bjsdistribution/dms-client-return 0.1.11-prod → 0.1.12-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.11-prod",
+  "version": "0.1.12-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-view/order-actions/actions/add-resources/DocFileUpload.tsx

@@ -1,51 +1,75 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
-import { Button } from '@bjsdistribution/dms-component-library';
+import { Button, CrossIcon } from '@bjsdistribution/dms-component-library';
 import UploadIcon from '../../../../../assets/icons/UploadIcon';
 import { atom, useAtom } from 'jotai';
 import { notification } from 'antd';
-
+// Store uploaded files
 export const uploadedFilesAtom = atom<File[]>([]);
 
-// Allowed photo and video file types
-const fileTypes = ['image/jpeg', 'image/png', 'video/mp4'];
+// Allowed photo MIME types
+const allowedFileTypes = ['image/jpeg', 'image/png'];
 
 function DocFileUpload() {
   const [uploadedFiles, setUploadedFiles] = useAtom(uploadedFilesAtom);
   const [dragging, setDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const isDuplicate = (file: File) =>
+    uploadedFiles?.some(
+      existing =>
+        existing?.name === file?.name &&
+        existing?.size === file?.size &&
+        existing?.lastModified === file?.lastModified
+    );
+
   const handleFileUpload = (files: FileList | null) => {
-    if (files) {
-      const validFiles = Array.from(files).filter(file =>
-        fileTypes.includes(file.type)
-      );
+    if (!files) return;
+
+    const validFiles: File[] = [];
+    const rejectedFiles: File[] = [];
+
+    Array.from(files).forEach(file => {
+      const isValidType = allowedFileTypes?.includes(file.type);
+      const isNew = !isDuplicate(file);
 
-      if (validFiles.length > 0) {
-        setUploadedFiles(prev => [...prev, ...validFiles]);
-        validFiles.forEach(file => {
-          notification.success({
-            message: 'Success',
-            description: `${file.name} added successfully.`,
-          });
-        });
+      if (isValidType && isNew) {
+        validFiles?.push(file);
       } else {
-        notification.error({
-          message: 'Error',
-          description: 'Only photos (JPEG, PNG) and videos (MP4) are allowed.',
-        });
+        rejectedFiles?.push(file);
       }
+    });
+
+    if (validFiles?.length > 0) {
+      setUploadedFiles(prev => [...prev, ...validFiles]);
+      validFiles?.forEach(file =>
+        notification.success({
+          message: 'Success',
+          description: `${file.name} added successfully.`,
+        })
+      );
+    }
+
+    if (rejectedFiles?.length > 0) {
+      notification.error({
+        message: 'Some files were not added',
+        description: 'Either they were duplicates or not JPEG/PNG format.',
+      });
     }
   };
 
+  const handleRemoveFile = (indexToRemove: number) => {
+    const updated = uploadedFiles?.filter((_, i) => i !== indexToRemove);
+    setUploadedFiles(updated);
+    notification.info({ message: 'File Removed' });
+  };
+
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
     setDragging(true);
   };
 
-  const handleDragLeave = () => {
-    setDragging(false);
-  };
+  const handleDragLeave = () => setDragging(false);
 
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
@@ -55,13 +79,10 @@ function DocFileUpload() {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     handleFileUpload(e.target.files);
+    e.target.value = ''; // Allow re-upload of same file
   };
 
-  const handleButtonClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  };
+  const handleButtonClick = () => fileInputRef.current?.click();
 
   return (
     <MainContainer>
@@ -73,7 +94,7 @@ function DocFileUpload() {
       >
         <Container>
           <UploadButton
-            colors="secondary"
+            type="button"
             shape="rounded"
             onClick={handleButtonClick}
           >
@@ -81,30 +102,32 @@ function DocFileUpload() {
           </UploadButton>
           <FileInput
             type="file"
-            required
+            accept={allowedFileTypes.join(',')}
             multiple
             onChange={handleInputChange}
-            accept="image/jpeg, image/png, video/mp4"
             ref={fileInputRef}
           />
           <IconContainer>
             <UploadIcon />
           </IconContainer>
           <TextContainer>
-            <Text1>or drag and drop your file </Text1>
-            <Text2>Photos (JPEG, PNG) or Videos (MP4) Only</Text2>
+            <Text1>or drag and drop your files</Text1>
+            <Text2>Photos (JPEG, PNG) Only</Text2>
           </TextContainer>
         </Container>
       </DraggerContainer>
 
-      {/* Uploaded Files List */}
       {uploadedFiles.length > 0 && (
         <UploadedFilesContainer>
           <FilesTitle>Uploaded Files:</FilesTitle>
           <FilesList>
-            {uploadedFiles.map((file, index) => (
-              <FileItem key={index}>
+            {uploadedFiles?.map((file, index) => (
+              <FileItem key={`${file.name}-${index}`}>
                 {file.name} - {(file.size / 1024).toFixed(2)} KB
+                <CrossIcon
+                  style={{ cursor: 'pointer', marginLeft: 8 }}
+                  onClick={() => handleRemoveFile(index)}
+                />
               </FileItem>
             ))}
           </FilesList>
@@ -129,30 +152,24 @@ const DraggerContainer = styled.div<{ dragging: boolean }>`
   cursor: pointer;
 `;
 
-const Text2 = styled.p`
-  color: #bcbab7;
-  text-align: center;
-  font-family: 'Roboto', sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  text-transform: lowercase;
-  padding: 0;
-  margin: 0;
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  padding: 6px;
+  align-items: center;
+  border-radius: 30px;
+  background: #fff;
 `;
 
-const TextContainer = styled.div``;
-
-const Text1 = styled.p`
-  color: #aea9a1;
-  text-align: left;
-  font-family: 'Roboto', sans-serif;
+const UploadButton = styled(Button)`
   font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  text-transform: lowercase;
-  padding: 0;
-  margin: 0;
+  padding: 7px 20px;
+  height: auto;
+  border-radius: 20px;
+`;
+
+const FileInput = styled.input`
+  display: none;
 `;
 
 const IconContainer = styled.div`
@@ -162,24 +179,22 @@ const IconContainer = styled.div`
   align-items: center;
 `;
 
-const UploadButton = styled(Button)`
-  height: 16px;
-  font-size: 14px;
-  padding: 7px 20px;
-`;
+const TextContainer = styled.div``;
 
-const Container = styled.div`
-  display: flex;
-  gap: 8px;
-  padding: 6px;
-  align-items: center;
-  align-self: stretch;
-  border-radius: 30px;
-  background: #fff;
+const Text1 = styled.p`
+  color: #aea9a1;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0;
 `;
 
-const FileInput = styled.input`
-  display: none;
+const Text2 = styled.p`
+  color: #bcbab7;
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin: 0;
 `;
 
 const UploadedFilesContainer = styled.div`
@@ -195,6 +210,8 @@ const FilesTitle = styled.h4`
 `;
 
 const FilesList = styled.ul`
+  overflow: auto;
+  max-height: 200px;
   list-style-type: none;
   padding: 0;
 `;
@@ -204,6 +221,9 @@ const FileItem = styled.li`
   font-size: 14px;
   color: #333;
   margin: 5px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 export default DocFileUpload;

package/src/components/order-view/order-actions/actions/add-resources/index.tsx

@@ -66,38 +66,55 @@ function AddResources() {
       setSelectedType(selectedOption.value);
     }
   };
-  console.log(uploadedFiles, 'filesfiles');
+
   const handleSubmit = async () => {
-    if (!uploadedFiles) {
+    if (!uploadedFiles || uploadedFiles.length === 0) {
       notification.error({ message: 'No files selected' });
       return;
     }
 
     const formData = new FormData();
-    if (uploadedFiles) {
-      Array.from(uploadedFiles).forEach(uploadedFiles => {
-        formData.append('files', uploadedFiles); // Adjust the key as per your API requirement
-      });
-    }
+    uploadedFiles.forEach(file => {
+      formData.append('files', file); // Adjust key as per API
+    });
 
     try {
-      let response = (await callResourcesAPI({
+      const response = (await callResourcesAPI({
         payload: formData,
       })) as {
         code: number | null;
         error?: string | null | undefined;
         [key: string]: any;
       };
+
       console.log('Upload successful:', response);
       notification.success({ message: 'Files uploaded successfully' });
-      onClose(); // Close modal after successful upload
+
+      onClose(); // Close modal
       setResources(false);
 
       setTimeout(() => {
         setResources(true);
       }, 1000);
     } catch (error) {
-      console.error('Upload failed:', error);
+      const err = error as any;
+      const status = err?.response?.status;
+      const rawError = err?.response?.data?.error || '';
+
+      let errMsg = 'An unexpected error occurred.';
+
+      if (status === 413) {
+        errMsg = 'File is too large. Please upload a smaller file.';
+      } else if (rawError.includes('413')) {
+        errMsg = 'File size exceeds the allowed limit.';
+      } else if (err?.message) {
+        errMsg = err.message;
+      }
+
+      notification.error({
+        message: 'Upload Failed',
+        description: errMsg,
+      });
     }
   };