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

package/src/components/order-view/notification/index.tsx

@@ -22,7 +22,15 @@ import {
   useAllOrderStatus,
 } from '../order-actions/store';
 import { useParams, useSearchParams } from 'react-router-dom';
-
+import { useClientPortal } from '../../store';
+import { Skeleton } from 'antd';
+type ReminderResponse = {
+  data: ApiResponse[];
+  stats_count: {
+    pending: number;
+    overdue: number;
+  };
+};
 interface ApiResponse {
   message: string;
   code: number;
@@ -44,7 +52,7 @@ function Notification() {
   const [closedReminders, setCloseReminders] = useState([]);
   const [activeTasks, setActiveTasks] = useState([]);
   const [closedTasks, setCloseTasks] = useState([]);
-  const [idOfRoute, setRouteId] = useRouteId();
+  const [idOfRoute] = useRouteId();
   const [, setStatusVal] = useAllOrderStatus();
   const [searchParams] = useSearchParams();
   const [orderAlertsData, setOrderAlertsData] = useOrderAlertsData();
@@ -52,6 +60,7 @@ function Notification() {
   const { id } = useParams();
   const [orderId, setOrderId] = useOrderId();
   const routeId = orderData?.order_routes?.route_id;
+  const [isClientPortal] = useClientPortal();
 
   useEffect(() => {
     if (orderIdParams) {
@@ -73,7 +82,12 @@ function Notification() {
     endpoint: `/v1/task/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: orderId }],
+    filters: isClientPortal
+      ? [
+          { field: 'is_private', op: '=', value: 'false' },
+          { field: 'order_id', op: '=', value: orderId },
+        ]
+      : [{ field: 'order_id', op: '=', value: orderId }],
   });
 
   //reminder get
@@ -81,15 +95,20 @@ function Notification() {
     data: fetchedReminderData,
     loading: reminderLoading,
     fetchData: callReminderApi,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
+  } = useAxios<ReminderResponse>({
     endpoint: `/v1/task/reminder/get/`,
     method: 'GET',
     pagination: { is_pagination: false },
     filters: [{ field: 'order_id', op: '=', value: orderId }],
   });
 
+  //reminder data set
+  useEffect(() => {
+    if (fetchedReminderData && fetchedReminderData?.data) {
+      setReminderNotifyData(fetchedReminderData?.data);
+    }
+  }, [fetchedReminderData]);
+
   useEffect(() => {
     setStatusVal(orderData?.status_value);
   }, [orderData?.status_value]);
@@ -107,13 +126,6 @@ function Notification() {
     }
   }, [unresolvedLoading, fetchedUnresolvedData]);
 
-  //reminder data set
-  useEffect(() => {
-    if (fetchedReminderData && fetchedReminderData?.data) {
-      setReminderNotifyData(fetchedReminderData?.data);
-    }
-  }, [reminderLoading]);
-
   // Route API calling...
   const { data: fetchedData, fetchData: fetchRoute } = useAxios<{
     data: ApiResponse[];
@@ -126,9 +138,6 @@ function Notification() {
     if (idOfRoute !== null && idOfRoute !== undefined) {
       fetchRoute();
     }
-    return () => {
-      setRouteId(null);
-    };
   }, [idOfRoute]);
 
   const {
@@ -153,7 +162,7 @@ function Notification() {
       if (orderId == null) return;
 
       try {
-        await callReminderApi();
+        !isClientPortal && (await callReminderApi());
         await callUnresolvedTaskApi();
         await callOrderAlertsApi();
       } catch (error) {
@@ -245,11 +254,80 @@ function Notification() {
             </StyledTab>
           </TabsData>
         </Container>
-        {unresolvedLoading || reminderLoading ? (
-          <Loader>
-            <Spinner />
-            <Text>Fetching Notifications...</Text>
-          </Loader>
+        {unresolvedLoading || reminderLoading || alertsApiLoading ? (
+          <>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <Skeleton.Avatar active size="small" shape="circle" />
+              <Skeleton.Input
+                active
+                style={{
+                  width: '100%',
+                  height: 12,
+                  borderRadius: 4,
+                }}
+              />
+            </div>
+          </>
         ) : taskData?.length > 0 ||
           reminderNotifyData?.length > 0 ||
           orderData ? (
@@ -280,32 +358,6 @@ const Container = styled.div`
   border-bottom: 1px solid #ccc;
 `;
 
-const Loader = styled.div`
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
-const Spinner = styled.div`
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #3a3630;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
 const FlagContainer = styled.div`
   padding: 8px;
   background-color: #3a3630;
@@ -391,11 +443,4 @@ const TabsWrapper = styled.div`
   }
 `;
 
-const Text = styled.div`
-  color: var(--tonal-brown-651, #6a7378);
-  font-family: Lato;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 600;
-`;
 export default Notification;

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 (