@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.21-dev

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,
+      });
     }
   };
 

package/src/components/order-view/order-actions/actions/cancel-order/ReturnAction.tsx

@@ -1,15 +1,36 @@
+import { useCancelOrderProducts, useOrderStaticData } from '../../../store';
+import { CancelOrderProductsType } from '../../../types';
 import OrderActionsDropdown from '../../Dropdown';
 import React from 'react';
 function ReturnAction() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [orderStaticData] = useOrderStaticData();
+  const [, setCancelOrderProducts] = useCancelOrderProducts();
+  // const onSearch = () => {};
+
+  const returnActionOptions = orderStaticData?.order_product_return_action?.map(
+    (option: any) => ({
+      label: option?.value,
+      value: option?.value,
+    })
+  );
+
+  const onSelect = (selectedValue: any) => {
+    setCancelOrderProducts((prev: CancelOrderProductsType[]) =>
+      prev?.map((item: any) => ({
+        ...item,
+        action: 'return',
+        return_action: selectedValue,
+      }))
+    );
+  };
+
   return (
     <OrderActionsDropdown
       label="Return Action"
       placeholder="Select Return Action"
-      options={[]}
+      options={returnActionOptions}
       onSelect={onSelect}
-      onSearch={onSearch}
+      // onSearch={onSearch}
     />
   );
 }

package/src/components/order-view/order-actions/actions/cancel-order/ReturnReason.tsx

@@ -1,15 +1,35 @@
+import { useCancelOrderProducts, useOrderStaticData } from '../../../store';
+import { CancelOrderProductsType } from '../../../types';
 import OrderActionsDropdown from '../../Dropdown';
 import React from 'react';
 function ReturnReason() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [orderStaticData] = useOrderStaticData();
+  const [, setCancelOrderProducts] = useCancelOrderProducts();
+
+  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
+    (option: any) => ({
+      label: option?.reason,
+      value: option?.reason,
+    })
+  );
+  const onSelect = (selectedValue: any) => {
+    setCancelOrderProducts((prev: CancelOrderProductsType[]) =>
+      prev?.map((item: any) => ({
+        ...item,
+        action: 'return',
+        return_reason: selectedValue,
+      }))
+    );
+  };
+  // const onSearch = () => {};
+
   return (
     <OrderActionsDropdown
       label="Return Reason"
       placeholder="Select Return Reason"
-      options={[]}
+      options={returnReasonsOptions}
       onSelect={onSelect}
-      onSearch={onSearch}
+      // onSearch={onSearch}
     />
   );
 }

package/src/components/order-view/order-actions/actions/clear-booking-status/ClearBookingStatus.tsx

@@ -16,7 +16,11 @@ import { ApiResponse, OrdersType } from '../../../types';
 import { useLoading } from '../../../../order-daily-overview/store/store';
 import { notification } from 'antd';
 
-const ClearBookingStatus = () => {
+interface IProps {
+  callOrderAlertsApi: any;
+}
+
+const ClearBookingStatus = (props: IProps) => {
   const [orderId] = useOrderId();
   const [, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
@@ -41,13 +45,16 @@ const ClearBookingStatus = () => {
     method: 'GET',
     performAction: false,
   });
-
+  const callOrdersApi = async () => {
+    await props?.callOrderAlertsApi();
+  };
   useEffect(() => {
     setLoading(loading);
     if (fetchedData && fetchedData?.data) {
       const requiredData = fetchedData?.data;
       setOrderDetails(requiredData[0]);
       setPrevOrderDetails(requiredData[0]);
+      callOrdersApi();
       setCurrentAction(undefined);
     }
     if (

package/src/components/order-view/order-actions/actions/confirm-order/index.tsx

@@ -26,7 +26,11 @@ import { compareOrderDetailsStates, filterObject } from '../../../utils';
 import { format } from 'date-fns';
 import { useConfirmOrderDate } from '../../store';
 
-function ConfirmOrder() {
+interface IProps {
+  callOrderAlertsApi: any;
+}
+
+function ConfirmOrder(props: IProps) {
   const [, setCurrentAction] = useCurrentAction();
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
@@ -201,6 +205,7 @@ function ConfirmOrder() {
       case 'no_contact':
         // await confirmDeliveryDate();
         notificationCall();
+        await fetchStatusData();
         break;
 
       case 'precall':
@@ -209,6 +214,7 @@ function ConfirmOrder() {
         }
         // await confirmDeliveryDate();
         sendComs();
+        await fetchStatusData();
         break;
       default:
         break;
@@ -247,9 +253,6 @@ function ConfirmOrder() {
       }
     }
 
-    // Execute actions first
-    await executeActions();
-
     const keysToRemovefromOrders = [
       'order_locked',
       'order_communications',
@@ -288,8 +291,6 @@ function ConfirmOrder() {
         [key: string]: any;
       };
 
-      await executeSendComs();
-
       if (response?.data?.length > 0) {
         const updatedOrder = response?.data[0];
         setOrderDetails(updatedOrder);
@@ -300,10 +301,15 @@ function ConfirmOrder() {
       }
     }
 
+    // Execute actions first
+    await executeActions();
+    await executeSendComs();
+
     if (orderId && deliveryDate) {
       const formattedDate = format(new Date(deliveryDate), 'yyyy-MM-dd');
       setDeliveryDate(formattedDate);
     }
+    await props?.callOrderAlertsApi();
 
     setCurrentAction(undefined);
   };

package/src/components/order-view/order-actions/actions/confirm-order/tables/NotesTable.tsx

@@ -27,6 +27,7 @@ function NotesTable() {
     endpoint: 'audit_logs/modules/',
     method: 'GET',
     pagination: { page: 1, per_page: 100 },
+    showLoader: false,
   });
   useEffect(() => {
     if (!apiLoading && fetchedData?.data) {