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

package/dist/dms-client-return.esm.js

@@ -7800,9 +7800,10 @@ function UploadIcon(props) {
 }
 
 var _templateObject$1k, _templateObject2$Z, _templateObject3$u, _templateObject4$f, _templateObject5$9, _templateObject6$3, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13;
+// Store uploaded files
 var uploadedFilesAtom = /*#__PURE__*/atom([]);
-// Allowed photo and video file types
-var fileTypes = ['image/jpeg', 'image/png', 'video/mp4'];
+// Allowed photo MIME types
+var allowedFileTypes = ['image/jpeg', 'image/png'];
 function DocFileUpload() {
   var _useAtom = useAtom(uploadedFilesAtom),
     uploadedFiles = _useAtom[0],
@@ -7811,35 +7812,57 @@ function DocFileUpload() {
     dragging = _useState[0],
     setDragging = _useState[1];
   var fileInputRef = useRef(null);
+  var isDuplicate = function isDuplicate(file) {
+    return uploadedFiles == null ? void 0 : uploadedFiles.some(function (existing) {
+      return (existing == null ? void 0 : existing.name) === (file == null ? void 0 : file.name) && (existing == null ? void 0 : existing.size) === (file == null ? void 0 : file.size) && (existing == null ? void 0 : existing.lastModified) === (file == null ? void 0 : file.lastModified);
+    });
+  };
   var handleFileUpload = function handleFileUpload(files) {
-    if (files) {
-      var validFiles = Array.from(files).filter(function (file) {
-        return fileTypes.includes(file.type);
-      });
-      if (validFiles.length > 0) {
-        setUploadedFiles(function (prev) {
-          return [].concat(prev, validFiles);
-        });
-        validFiles.forEach(function (file) {
-          notification.success({
-            message: 'Success',
-            description: file.name + " added successfully."
-          });
-        });
+    if (!files) return;
+    var validFiles = [];
+    var rejectedFiles = [];
+    Array.from(files).forEach(function (file) {
+      var isValidType = allowedFileTypes == null ? void 0 : allowedFileTypes.includes(file.type);
+      var isNew = !isDuplicate(file);
+      if (isValidType && isNew) {
+        validFiles == null || validFiles.push(file);
       } else {
-        notification.error({
-          message: 'Error',
-          description: 'Only photos (JPEG, PNG) and videos (MP4) are allowed.'
-        });
+        rejectedFiles == null || rejectedFiles.push(file);
       }
+    });
+    if ((validFiles == null ? void 0 : validFiles.length) > 0) {
+      setUploadedFiles(function (prev) {
+        return [].concat(prev, validFiles);
+      });
+      validFiles == null || validFiles.forEach(function (file) {
+        return notification.success({
+          message: 'Success',
+          description: file.name + " added successfully."
+        });
+      });
+    }
+    if ((rejectedFiles == null ? void 0 : rejectedFiles.length) > 0) {
+      notification.error({
+        message: 'Some files were not added',
+        description: 'Either they were duplicates or not JPEG/PNG format.'
+      });
     }
   };
+  var handleRemoveFile = function handleRemoveFile(indexToRemove) {
+    var updated = uploadedFiles == null ? void 0 : uploadedFiles.filter(function (_, i) {
+      return i !== indexToRemove;
+    });
+    setUploadedFiles(updated);
+    notification.info({
+      message: 'File Removed'
+    });
+  };
   var handleDragOver = function handleDragOver(e) {
     e.preventDefault();
     setDragging(true);
   };
   var handleDragLeave = function handleDragLeave() {
-    setDragging(false);
+    return setDragging(false);
   };
   var handleDrop = function handleDrop(e) {
     e.preventDefault();
@@ -7848,11 +7871,11 @@ function DocFileUpload() {
   };
   var handleInputChange = function handleInputChange(e) {
     handleFileUpload(e.target.files);
+    e.target.value = ''; // Allow re-upload of same file
   };
   var handleButtonClick = function handleButtonClick() {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
+    var _fileInputRef$current;
+    return (_fileInputRef$current = fileInputRef.current) == null ? void 0 : _fileInputRef$current.click();
   };
   return React.createElement(MainContainer$7, null, React.createElement(DraggerContainer, {
     onDragOver: handleDragOver,
@@ -7860,37 +7883,44 @@ function DocFileUpload() {
     onDrop: handleDrop,
     dragging: dragging
   }, React.createElement(Container$P, null, React.createElement(UploadButton, {
-    colors: "secondary",
+    type: "button",
     shape: "rounded",
     onClick: handleButtonClick
   }, "UPLOAD FILE"), React.createElement(FileInput, {
     type: "file",
-    required: true,
+    accept: allowedFileTypes.join(','),
     multiple: true,
     onChange: handleInputChange,
-    accept: "image/jpeg, image/png, video/mp4",
     ref: fileInputRef
-  }), React.createElement(IconContainer$3, null, React.createElement(UploadIcon, null)), React.createElement(TextContainer$2, null, React.createElement(Text1, null, "or drag and drop your file "), React.createElement(Text2, null, "Photos (JPEG, PNG) or Videos (MP4) Only")))), uploadedFiles.length > 0 && React.createElement(UploadedFilesContainer, null, React.createElement(FilesTitle, null, "Uploaded Files:"), React.createElement(FilesList, null, uploadedFiles.map(function (file, index) {
+  }), React.createElement(IconContainer$3, null, React.createElement(UploadIcon, null)), React.createElement(TextContainer$2, null, React.createElement(Text1, null, "or drag and drop your files"), React.createElement(Text2, null, "Photos (JPEG, PNG) Only")))), uploadedFiles.length > 0 && React.createElement(UploadedFilesContainer, null, React.createElement(FilesTitle, null, "Uploaded Files:"), React.createElement(FilesList, null, uploadedFiles == null ? void 0 : uploadedFiles.map(function (file, index) {
     return React.createElement(FileItem, {
-      key: index
-    }, file.name, " - ", (file.size / 1024).toFixed(2), " KB");
+      key: file.name + "-" + index
+    }, file.name, " - ", (file.size / 1024).toFixed(2), " KB", React.createElement(CrossIcon, {
+      style: {
+        cursor: 'pointer',
+        marginLeft: 8
+      },
+      onClick: function onClick() {
+        return handleRemoveFile(index);
+      }
+    }));
   }))));
 }
 var MainContainer$7 = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var DraggerContainer = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 6px;\n  border-radius: 30px;\n  border: ", ";\n  background-color: #fff;\n  transition: border-color 0.3s ease;\n  cursor: pointer;\n"])), function (props) {
   return props.dragging ? '2px dashed #0465ac' : '1px solid #e0e2e7';
 });
-var Text2 = /*#__PURE__*/styled.p(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #bcbab7;\n  text-align: center;\n  font-family: 'Roboto', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  text-transform: lowercase;\n  padding: 0;\n  margin: 0;\n"])));
-var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Text1 = /*#__PURE__*/styled.p(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #aea9a1;\n  text-align: left;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: lowercase;\n  padding: 0;\n  margin: 0;\n"])));
+var Container$P = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  padding: 6px;\n  align-items: center;\n  border-radius: 30px;\n  background: #fff;\n"])));
+var UploadButton = /*#__PURE__*/styled(Button)(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  padding: 7px 20px;\n  height: auto;\n  border-radius: 20px;\n"])));
+var FileInput = /*#__PURE__*/styled.input(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 var IconContainer$3 = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px dashed #0465ac;\n  padding: 5px;\n  display: flex;\n  align-items: center;\n"])));
-var UploadButton = /*#__PURE__*/styled(Button)(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 16px;\n  font-size: 14px;\n  padding: 7px 20px;\n"])));
-var Container$P = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  padding: 6px;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 30px;\n  background: #fff;\n"])));
-var FileInput = /*#__PURE__*/styled.input(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Text1 = /*#__PURE__*/styled.p(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #aea9a1;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  margin: 0;\n"])));
+var Text2 = /*#__PURE__*/styled.p(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #bcbab7;\n  font-family: 'Roboto', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  margin: 0;\n"])));
 var UploadedFilesContainer = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  border-top: 1px solid #e0e2e7;\n  padding-top: 10px;\n"])));
 var FilesTitle = /*#__PURE__*/styled.h4(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  color: #0465ac;\n"])));
-var FilesList = /*#__PURE__*/styled.ul(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  padding: 0;\n"])));
-var FileItem = /*#__PURE__*/styled.li(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  color: #333;\n  margin: 5px 0;\n"])));
+var FilesList = /*#__PURE__*/styled.ul(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  max-height: 200px;\n  list-style-type: none;\n  padding: 0;\n"])));
+var FileItem = /*#__PURE__*/styled.li(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  color: #333;\n  margin: 5px 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 
 var _templateObject$1l, _templateObject2$_, _templateObject3$v, _templateObject4$g, _templateObject5$a;
 function AddResources() {
@@ -7947,14 +7977,13 @@ function AddResources() {
       setSelectedType(selectedOption.value);
     }
   };
-  console.log(uploadedFiles, 'filesfiles');
   var handleSubmit = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var formData, response;
+      var formData, response, _err$response, _err$response2, err, status, rawError, errMsg;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (uploadedFiles) {
+            if (!(!uploadedFiles || uploadedFiles.length === 0)) {
               _context.next = 3;
               break;
             }
@@ -7964,11 +7993,9 @@ function AddResources() {
             return _context.abrupt("return");
           case 3:
             formData = new FormData();
-            if (uploadedFiles) {
-              Array.from(uploadedFiles).forEach(function (uploadedFiles) {
-                formData.append('files', uploadedFiles); // Adjust the key as per your API requirement
-              });
-            }
+            uploadedFiles.forEach(function (file) {
+              formData.append('files', file); // Adjust key as per API
+            });
             _context.prev = 5;
             _context.next = 8;
             return callResourcesAPI({
@@ -7980,18 +8007,32 @@ function AddResources() {
             notification.success({
               message: 'Files uploaded successfully'
             });
-            onClose(); // Close modal after successful upload
+            onClose(); // Close modal
             setResources(false);
             setTimeout(function () {
               setResources(true);
             }, 1000);
-            _context.next = 19;
+            _context.next = 24;
             break;
           case 16:
             _context.prev = 16;
             _context.t0 = _context["catch"](5);
-            console.error('Upload failed:', _context.t0);
-          case 19:
+            err = _context.t0;
+            status = err == null || (_err$response = err.response) == null ? void 0 : _err$response.status;
+            rawError = (err == null || (_err$response2 = err.response) == null || (_err$response2 = _err$response2.data) == null ? void 0 : _err$response2.error) || '';
+            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 != null && err.message) {
+              errMsg = err.message;
+            }
+            notification.error({
+              message: 'Upload Failed',
+              description: errMsg
+            });
+          case 24:
           case "end":
             return _context.stop();
         }