@bjsdistribution/dms-client-return 0.0.9 → 0.0.11

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -1,13 +1,14 @@
-import {
-  Checkbox,
-  displayValueOrNA,
-  useApiHook,
-} from '@bjsdistribution/dms-component-library';
+import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import { useAtom } from 'jotai';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
-import { useSelectedOrders } from '../../../store';
+import {
+  useGroupedPayload,
+  useNewReturnPayload,
+  useReturnPayload,
+  useSelectedOrders,
+} from '../../../store';
 import { useReturnData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
@@ -17,7 +18,7 @@ import { useLoading, usePrintOptionTOggle } from '../../store/store';
 import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
 import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
-
+import { displayValueOrNA } from '../../shared/utlis';
 const ReturnOrderTable = ({ loadingskeleton }: any) => {
   const [state] = useAtom(filtersReducerAtom);
 
@@ -29,6 +30,9 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+  const [createReturn, setReturnPayload] = useReturnPayload();
+  const [newpayload, setNewPayload] = useNewReturnPayload();
+  const [, setGrouped] = useGroupedPayload();
 
   const OpenDropDown = (index: number) => {
     setPrintToggle(prevIndex => (prevIndex === index ? null : index));
@@ -70,9 +74,23 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
     setSelectAll(e.target.checked);
     if (e.target.checked) {
       setSelectedReturnOrder(
-        returnData.map((invoice: any) => ({
-          id: invoice.id,
-          status_id: 3,
+        returnData?.map((loc: any) => ({
+          id: loc.id,
+          return_locations: loc?.return_locations,
+          return_location: loc?.return_location,
+          products: loc.id,
+          order_product_return_action: loc?.order_product_return_action,
+          return_location_token: loc?.return_locations?.token,
+        }))
+      );
+      setNewPayload(
+        returnData?.map((loc: any) => ({
+          id: loc.id,
+          account_number: createReturn?.account_number,
+          customer_id: createReturn?.customer_id,
+          products: loc.id,
+          return_action: loc?.order_product_return_action?.type || null,
+          return_location_token: loc?.return_locations?.token,
         }))
       );
     } else {
@@ -80,37 +98,118 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
-  const handleSelectInvoice = (id: any) => {
-    setSelectedReturnOrder((prevSelectedInvoices: any) => {
-      const isSelected = prevSelectedInvoices?.some(
-        (invoice: any) => invoice.id === id
+  const handleSelectOrderReturn = (
+    id: any,
+    return_location: any,
+    return_locations: any,
+    order_product_return_action: any
+  ) => {
+    setSelectedReturnOrder((prevSelectedLocations: any) => {
+      const isSelected = prevSelectedLocations?.some(
+        (loc: any) => loc.id === id
       );
 
       if (isSelected) {
-        return prevSelectedInvoices.filter((invoice: any) => invoice.id !== id);
+        const updatedSelectedLocations = prevSelectedLocations.filter(
+          (loc: any) => loc.id !== id
+        );
+
+        setReturnPayload(prevState => ({
+          ...prevState,
+          products: id,
+          return_action: order_product_return_action?.type || null,
+          return_location_token: return_locations?.token || null,
+        }));
+
+        setNewPayload((prevPayload: any) =>
+          prevPayload.filter((item: any) => item.id !== id)
+        );
+
+        return updatedSelectedLocations;
       } else {
-        return [...prevSelectedInvoices, { id, status_id: 3 }];
+        const newReturnPayload = {
+          id,
+          account_number: createReturn?.account_number,
+          customer_id: createReturn?.customer_id,
+          products: id,
+          return_action: order_product_return_action?.type || null,
+          return_location_token: return_locations?.token || null,
+        };
+
+        setNewPayload((prevPayload: any) => [...prevPayload, newReturnPayload]);
+
+        setReturnPayload(prevState => ({
+          ...prevState,
+          products: id,
+          return_action: order_product_return_action?.type || null,
+          return_location_token: return_locations?.token || null,
+        }));
+
+        return [
+          ...prevSelectedLocations,
+          {
+            id,
+            return_location,
+            return_locations,
+            order_product_return_action,
+          },
+        ];
       }
     });
   };
+
+  useEffect(() => {
+    if (newpayload?.length === 0) return;
+
+    const groupedPayload = newpayload?.reduce((acc: any, item: any) => {
+      const { return_location_token } = item;
+
+      if (!return_location_token) {
+        acc.push(item);
+      } else {
+        if (!acc[return_location_token]) {
+          acc[return_location_token] = {
+            ...item,
+            products: [],
+            return_action: [],
+          };
+        }
+
+        acc[return_location_token].products = [
+          ...acc[return_location_token].products,
+          ...item.products,
+        ];
+
+        acc[return_location_token].return_action = [
+          ...acc[return_location_token].return_action,
+          ...item.return_action,
+        ];
+      }
+
+      return acc;
+    }, []);
+
+    const mergedPayload = Object.values(groupedPayload);
+    setGrouped(mergedPayload);
+  }, [newpayload]);
+
   return (
     <>
-      <StyledTableWrapper id="tableScrolling">
+      <StyledTableWrapper>
         <StyledTable>
           <thead>
             <tr>
               <th className="emailInvoiceCheckbox">
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th>
-              {/* <th className="emailInvoiceNo">Invoice No.</th> */}
               <th>Product Location</th>
               <th>Return Location</th>
               <th>Recipient</th>
               <th>Code</th>
-              <th> Description</th>
+              <th>Description</th>
               <th>Part</th>
               <th>Weight</th>
-              <th> CBM</th>
+              <th>CBM</th>
               <th>Return Reason</th>
               <th>Collected</th>
               <th>Collection Reason</th>
@@ -142,12 +241,21 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                         (selectedInvoice: any) =>
                           selectedInvoice?.id === item.id
                       )}
-                      onChange={() => handleSelectInvoice(item.id)}
+                      onChange={() =>
+                        handleSelectOrderReturn(
+                          item.id,
+                          item.return_location,
+                          item.return_locations,
+                          item.order_product_return_action
+                        )
+                      }
                     />
                   </td>
 
                   <td>
-                    {displayValueOrNA(item?.orders_products_stock?.location)}
+                    {item?.orders_products_stock?.location ? null : (
+                      <div className="awaiting">Awating</div>
+                    )}
                   </td>
 
                   <td> {displayValueOrNA(item?.return_location)}</td>
@@ -174,7 +282,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                   </td>
                   <td>{displayValueOrNA(item?.code)}</td>
                   <td>{displayValueOrNA(item?.description)}</td>
-                  <td>N/A</td>
+                  <td>{displayValueOrNA(item?.parts_count)}</td>
                   <td>{displayValueOrNA(item?.weight)}KG</td>
                   <td>{displayValueOrNA(item?.cube)}</td>
                   <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -386,6 +386,20 @@ export const StyledTable = styled.table`
           border-radius: 22px;
           background: rgba(41, 204, 106, 0.15);
         }
+        .awaiting {
+          display: flex;
+          min-width: 85px;
+          padding: 6px 10px;
+          justify-content: center;
+          align-items: center;
+          gap: 5px;
+          border-radius: 22px;
+          background: rgba(233, 82, 82, 0.15);
+          color: #e95252;
+          font-family: 'Open Sans';
+          font-size: 12px;
+          font-weight: 600;
+        }
         ul > li > a {
           text-decoration: none !important;
           color: #0099ff;
@@ -498,7 +512,7 @@ export const StyledTableWrapper = styled.div`
   overflow-x: auto;
   max-height: calc(100vh - 396px);
   scrollbar-width: none;
-  height: 400px;
+  height: 600px;
   /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
   &::-webkit-scrollbar {
     width: 5px;

package/src/components/order-daily-overview/shared/utlis.ts

@@ -74,5 +74,11 @@ export const formatDate = (date: any) => {
 
 export const displayValueOrNA = (value: any) => {
   const isBlankArray = Array.isArray(value) && value.length === 0;
-  return value && !isBlankArray ? value : '--';
+  if (value === 0) {
+    return 0;
+  }
+  if (value === 'NA' || value === undefined || value === null || isBlankArray) {
+    return 'NA';
+  }
+  return value;
 };

package/src/components/order-daily-overview/table/ReturnTable.tsx

@@ -49,6 +49,8 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
               <th>Client</th>
               <th>Orders</th>
               <th>Products</th>
+              <th>RTS</th>
+              <th>Pending</th>
               <th>Dispose</th>
               <th>Re-allocate</th>
               <th>Re-Del</th>
@@ -105,6 +107,16 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
                         <GreyBox>{key?.return_order_products}</GreyBox>
                       </ColumStyle>
                     </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.RTS}</GreyBox>
+                      </ColumStyle>
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.PENDING}</GreyBox>
+                      </ColumStyle>
+                    </td>
                     <td>
                       <ColumStyle>
                         <GreyBox>{key?.DISPOSE}</GreyBox>

package/src/components/order-view/hooks/useGetEventNotes.tsx

@@ -1,5 +1,6 @@
 import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
 import { getCookie } from '../utils';
+import { notification } from 'antd';
 // import { useOrderDetails, useOrderProductSystemLogs } from '../store';
 
 function useGetEventNotes() {
@@ -25,7 +26,13 @@ function useGetEventNotes() {
         const json = await response.json();
         const detail = json?.detail;
         const msg = detail[0]?.msg;
-        console.error('Error response:', msg);
+        // console.error('Error response:', msg);
+
+        notification.error({
+          message: 'Error',
+          description:
+            `${msg}` || 'An error has occurred. Please try again later.',
+        });
         // setLoading(false);
         return [];
       }
@@ -35,7 +42,13 @@ function useGetEventNotes() {
       }
       return [];
     } catch (err) {
-      console.error('Error fetching data:', err);
+      // console.error('Error fetching data:', err);
+      notification.error({
+        message: 'Error',
+        description:
+          `${err}` || 'An error has occurred. Please try again later.',
+      });
+
       return [];
     } finally {
       //   setLoading(false);

package/src/components/order-view/hooks/useGetSystemLogs.tsx

@@ -1,6 +1,7 @@
 import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
 import { getCookie } from '../utils';
 import { useOrderDetails, useOrderProductSystemLogs } from '../store';
+import { notification } from 'antd';
 
 function useSystemLogs() {
   const ssoToken = getCookie('id_token');
@@ -36,7 +37,13 @@ function useSystemLogs() {
         const json = await response.json();
         const detail = json?.detail;
         const msg = detail[0]?.msg;
-        console.error('Error response:', msg);
+        // console.error('Error response:', msg);
+
+        notification.error({
+          message: 'Error',
+          description:
+            `${msg}` || 'An error has occurred. Please try again later.',
+        });
         // setLoading(false);
         return [];
       }
@@ -48,7 +55,12 @@ function useSystemLogs() {
       }
       return [];
     } catch (err) {
-      console.error('Error fetching data:', err);
+      // console.error('Error fetching data:', err);
+      notification.error({
+        message: 'Error',
+        description:
+          `${err}` || 'An error has occurred. Please try again later.',
+      });
       return [];
     } finally {
       //   setLoading(false);

package/src/components/order-view/hooks/useUpdateOrder.ts

@@ -1,5 +1,6 @@
 import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
 import { getCookie } from '../utils';
+import { notification } from 'antd';
 
 function useUpdateOrder() {
   let controller: AbortController;
@@ -32,11 +33,21 @@ function useUpdateOrder() {
         throw new Error('response is not ok');
       }
       const json = await response.json();
-      alert('Order has been updated');
+      // alert('Order has been updated');
+      notification.success({
+        message: 'Success',
+        description: 'Order has been updated.',
+      });
       return json;
     } catch (err) {
       //   setLoading(false);
-      console.log(err, 'error');
+      // console.log(err, 'error');
+
+      notification.error({
+        message: 'Error',
+        description:
+          `${err}` || 'An error has occurred. Please try again later.',
+      });
     } finally {
       //   setLoading(false); // Set loading to false after fetching
     }

package/src/components/order-view/modalsPopup/CreateReturnModal.tsx

@@ -1,27 +1,24 @@
 import { Alert, Checkbox } from '@bjsdistribution/dms-component-library';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { useLocationData } from '../../store';
+import { useSelectedOrders } from '../../store';
 
 const CreateReturnModal = () => {
-  const [, setSelectedLocations] = useState<any[]>();
-  const [locationData] = useLocationData();
+  const [selectedlocation, setSelectedLocations] = useState<any[]>([]);
+  const [selectedReturnOrder] = useSelectedOrders();
 
-  const handleSelectLocations = (id: any) => {
-    setSelectedLocations((prevSelectedLocations: any) => {
-      const isSelected = prevSelectedLocations?.some(
-        (location: any) => location.id === id
-      );
+  const handleSelectLocations = (id: number) => {
+    setSelectedLocations((prevSelectedLocations: number[]) => {
+      const isSelected = prevSelectedLocations.includes(id);
 
       if (isSelected) {
-        return prevSelectedLocations.filter(
-          (invoice: any) => invoice.id !== id
-        );
+        return prevSelectedLocations.filter(selectedId => selectedId !== id);
       } else {
-        return [...prevSelectedLocations, { id, status_id: 3 }];
+        return [...prevSelectedLocations, id];
       }
     });
   };
+
   return (
     <Wrapper>
       <Alert
@@ -33,9 +30,9 @@ const CreateReturnModal = () => {
       />
       <Container>
         <ul style={{ listStyle: 'none', padding: 0 }}>
-          {locationData?.map((invoice: any) => (
+          {selectedReturnOrder?.map((returnLoc: any) => (
             <li
-              key={invoice.id}
+              key={returnLoc.id}
               style={{
                 marginBottom: '8px',
                 display: 'flex',
@@ -43,11 +40,11 @@ const CreateReturnModal = () => {
               }}
             >
               <Checkbox
-                checked={true}
-                onChange={() => handleSelectLocations(invoice.id)}
+                checked={selectedlocation.includes(returnLoc.id)}
+                onChange={() => handleSelectLocations(returnLoc.id)}
               />
               <StyledText style={{ marginLeft: '8px' }}>
-                {invoice.location_name}
+                {returnLoc?.return_location}
               </StyledText>
             </li>
           ))}

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -15,16 +15,17 @@ import {
 
 import ProductAction from './ProductAction';
 // import DeleteProduct from './DeleteProduct';
-import AddProduct from './AddProduct';
+// import AddProduct from './AddProduct';
 import logsTable from './qclogs/logsTable';
 import DefectsModal from './DefectsModal';
 import repackModal from './RepackModal';
 import { ApiResponse } from '../types';
 import CreateReturnModal from './CreateReturnModal';
+import { useNewReturnPayload } from '../../store';
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
   const [,] = useProductDetails();
-  const [orderProduct, setOrderProduct] = useCreateOrderProducts();
+  const [orderProduct] = useCreateOrderProducts();
   const [orderId] = useOrderId();
   const [selectedRows] = useDeleteProdsID();
   const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
@@ -32,6 +33,7 @@ const ModalManager = () => {
   const [selectedProductId] = useAtom(selectedProductIdAtom);
   const [selectedTab] = useAtom(selectedTabKeyAtom);
   const [, setIsFormValid] = useState(false);
+  const [newPayload, setNewPayload] = useNewReturnPayload();
 
   console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
 
@@ -89,71 +91,71 @@ const ModalManager = () => {
   // };
 
   // API block for creating product order
-  const {
-    data: response,
-    setShouldPerformAction: setOrderAction,
-  } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `order/order_products/create/`,
-    method: 'POST',
-    body: [orderProduct],
-    performAction: false,
-  });
+  // const {
+  //   data: response,
+  //   setShouldPerformAction: setOrderAction,
+  // } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `order/order_products/create/`,
+  //   method: 'POST',
+  //   body: [orderProduct],
+  //   performAction: false,
+  // });
 
-  const validateAddForm = () => {
-    if (!Array.isArray(orderProduct)) return false;
+  // const validateAddForm = () => {
+  //   if (!Array.isArray(orderProduct)) return false;
 
-    return orderProduct.every(
-      (product: any) =>
-        product.code !== '' &&
-        product.description !== '' &&
-        product.weight !== 0 &&
-        product.cube !== 0 &&
-        product.order_product_type_id !== 0 &&
-        product.sku !== ''
-    );
-  };
+  //   return orderProduct.every(
+  //     (product: any) =>
+  //       product.code !== '' &&
+  //       product.description !== '' &&
+  //       product.weight !== 0 &&
+  //       product.cube !== 0 &&
+  //       product.order_product_type_id !== 0 &&
+  //       product.sku !== ''
+  //   );
+  // };
 
-  useEffect(() => {
-    setAddIsFormValid(validateAddForm());
-  }, [orderProduct]);
+  // useEffect(() => {
+  //   setAddIsFormValid(validateAddForm());
+  // }, [orderProduct]);
 
-  const onAddOrderProduct = () => {
-    if (isAddFormValid) {
-      setOrderProduct((prev: any) =>
-        prev.map((product: any) => ({
-          ...product,
-          order_id: orderId,
-        }))
-      );
-      setOrderAction(true);
-    } else {
-      console.log('Please fill in all required fields before proceeding.');
-    }
-  };
+  // const onAddOrderProduct = () => {
+  //   if (isAddFormValid) {
+  //     setOrderProduct((prev: any) =>
+  //       prev.map((product: any) => ({
+  //         ...product,
+  //         order_id: orderId,
+  //       }))
+  //     );
+  //     setOrderAction(true);
+  //   } else {
+  //     console.log('Please fill in all required fields before proceeding.');
+  //   }
+  // };
 
-  useEffect(() => {
-    if (response && response?.data) {
-      dispatch({ type: 'close' });
-    }
-  }, [response]);
+  // useEffect(() => {
+  //   if (response && response?.data) {
+  //     dispatch({ type: 'close' });
+  //   }
+  // }, [response]);
 
-  const [isAddFormValid, setAddIsFormValid] = useState(false);
+  // const [isAddFormValid, setAddIsFormValid] = useState(false);
 
-  const AddMore = () => {
-    setOrderProduct((prevProducts: any) => [
-      ...prevProducts,
-      {
-        code: '',
-        description: '',
-        sku: '',
-        weight: '',
-        cube: '',
-        order_product_type_id: '',
-      },
-    ]);
-  };
+  // const AddMore = () => {
+  //   setOrderProduct((prevProducts: any) => [
+  //     ...prevProducts,
+  //     {
+  //       code: '',
+  //       description: '',
+  //       sku: '',
+  //       weight: '',
+  //       cube: '',
+  //       order_product_type_id: '',
+  //     },
+  //   ]);
+  // };
 
   // api block for the create product order
   const {
@@ -224,6 +226,30 @@ const ModalManager = () => {
     }
   }, [updateResponse]);
 
+  //Confirm return popup
+  const { data: response, setShouldPerformAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `return_orders/`,
+    method: 'POST',
+    body: [newPayload],
+    performAction: false,
+  });
+  const handleConfirmReturn = () => {
+    const payloadWithoutId = newPayload?.map(({ id, ...rest }: any) => ({
+      ...rest,
+    }));
+
+    console.log(response);
+
+    if (payloadWithoutId) {
+      setNewPayload(payloadWithoutId);
+      setShouldPerformAction(true);
+    } else {
+      setShouldPerformAction(false);
+    }
+  };
+
   return (
     <>
       {popupName?.state == 'create-return' && (
@@ -239,7 +265,9 @@ const ModalManager = () => {
               {
                 name: 'Submit',
                 btnStyle: 'rounded',
+                onClick: handleConfirmReturn,
                 type: 'button',
+                disabled: !newPayload,
               },
             ],
 
@@ -277,7 +305,7 @@ const ModalManager = () => {
         />
       )} */}
 
-      {popupName?.state === 'addProduct' && (
+      {/* {popupName?.state === 'addProduct' && (
         <AntModal
           openStatus={popupName?.state === 'addProduct'}
           closeModal={closeModal}
@@ -306,7 +334,7 @@ const ModalManager = () => {
           width={1104}
           classNameAdd={'globalPopup'}
         />
-      )}
+      )} */}
       {popupName?.state === 'qclog' && (
         <AntModal
           openStatus={popupName?.state === 'qclog'}