@bjsdistribution/dms-client-return 0.0.32 → 0.0.34

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -1,30 +1,31 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   StyledTable,
   StyledTableWrapper,
 } from '../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import ActionIcon from '../../../../assets/icons/ActionIcon';
-import { useSelectedOrders } from '../../../store';
+// import { useSelectedOrders } from '../../../store';
 import { useOrderId, useOrderStaticData, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
 import Loader from '../../../order-daily-overview/header/loader/Loader';
 import { notification } from 'antd';
+import { useSelectedProducts } from '../../../store';
 
 const ReturnProductTable = () => {
-  const [selectedInvoices] = useSelectedOrders();
+  const [selectedProducts, setSelectedProducts] = useSelectedProducts();
   const [selectAll, setSelectAll] = useState(false);
   const [productData, setProductData] = useProductDetails();
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [orderId] = useOrderId();
 
-  const handleActionClick = useCallback((id: number) => {
+  const handleActionClick = (id: number) => {
     setSelectedRowId(id);
-  }, []);
+  };
 
   const {
     data: isresponse,
-    setShouldPerformAction: setaction,
+    setShouldPerformAction: setAction,
     loading,
   } = useApiHook<{
     data: ApiResponse[];
@@ -39,33 +40,43 @@ const ReturnProductTable = () => {
     if (isresponse && isresponse.data) {
       notification.success({
         message: 'Success',
-        description:
-          //@ts-ignore
-          isresponse?.message ||
-          'An error has occurred. Please try again later.',
+        description: 'An error has occurred. Please try again later.',
       });
       handleRemoveRow();
       setSelectedRowId(null);
     }
   }, [isresponse]);
 
-  const handleRemoveRow = useCallback(() => {
+  const handleRemoveRow = () => {
     if (selectedRowId !== null) {
       setProductData((prevData: any) =>
         prevData.filter((item: any) => item.id !== selectedRowId)
       );
     }
-  }, [selectedRowId, setProductData]);
+  };
 
-  const onDeleteProducts = useCallback(() => {
-    setaction(true);
-  }, [setaction, selectedRowId]);
+  const onDeleteProducts = () => {
+    setAction(true);
+  };
 
-  const handleSelectAll = useCallback(() => {
-    setSelectAll(prevSelectAll => !prevSelectAll);
-  }, []);
+  const handleSelectAll = () => {
+    if (selectAll) {
+      setSelectedProducts([]);
+    } else {
+      const allProductIds = productData.map((product: any) => product.id);
+      setSelectedProducts(allProductIds);
+    }
+    setSelectAll(!selectAll);
+  };
+
+  const handleSelectProduct = (id: number) => {
+    setSelectedProducts((prevSelected: any) =>
+      prevSelected.includes(id)
+        ? prevSelected.filter((selectedId: any) => selectedId !== id)
+        : [...prevSelected, id]
+    );
+  };
 
-  // const returnreason =
   const [orderStaticData] = useOrderStaticData();
 
   const returnReasonsOptions = orderStaticData?.return_reasons?.map(
@@ -79,23 +90,18 @@ const ReturnProductTable = () => {
     const matchedReason = returnReasonsOptions?.find(
       (option: any) => option.value === returnReasonId
     );
-    return matchedReason ? matchedReason.label : 'N/A'; // Return label or 'N/A' if no match found
+    return matchedReason ? matchedReason.label : 'N/A';
   };
 
   return (
     <div>
       {loading && <Loader title="Deleting" />}
-      <StyledTableWrapper id="tableScrolling">
+      <StyledTableWrapper id="tableScrolling" className="orderProductTable">
         <StyledTable>
           <thead>
             <tr>
-              <th className="emailInvoiceCheckbox">
-                <Checkbox
-                  checked={selectAll}
-                  onChange={handleSelectAll}
-                  disabled={true}
-                  style={{ cursor: 'not-allowed' }}
-                />
+              <th className="emailproductsCheckbox">
+                <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th>
               <th>Location</th>
               <th>Sender</th>
@@ -107,29 +113,28 @@ const ReturnProductTable = () => {
             </tr>
           </thead>
           <tbody>
-            {productData && productData.length > 0 ? (
-              productData.map((invoice: any) => (
-                <tr key={invoice.id}>
+            {productData && productData?.length > 0 ? (
+              productData?.map((product: any) => (
+                <tr key={product.id}>
                   <td>
                     <Checkbox
-                      checked={selectedInvoices.some(
-                        selectedInvoice => selectedInvoice.id === invoice.id
-                      )}
-                      style={{ cursor: 'not-allowed' }}
+                      checked={selectedProducts?.includes(product?.id)}
+                      onChange={() => handleSelectProduct(product?.id)}
                     />
                   </td>
-                  <td>{'N/A'}</td>
-                  <td>{'N/A'}</td>
-                  <td>{invoice.code}</td>
-                  <td>{invoice.description}</td>
+                  <td>{product?.orders_products_stock?.location || 'N/A'}</td>
                   <td>
-                    {getReturnReasonLabel(invoice?.return_reason_id)}
-                  </td>{' '}
+                    {product?.order_data?.order_recipient?.recipient_name}{' '}
+                    {product?.order_data?.order_recipient?.postcode}
+                  </td>
+                  <td>{product?.code}</td>
+                  <td>{product?.description}</td>
+                  <td>{getReturnReasonLabel(product?.return_reason_id)}</td>
                   <td>1 of 1</td>
                   <td>
                     <div
                       onClick={() => {
-                        handleActionClick(invoice.id);
+                        handleActionClick(product?.id);
                         onDeleteProducts();
                       }}
                       style={{ cursor: 'pointer' }}

package/src/components/order-view/store.ts

@@ -475,7 +475,12 @@ const popupReducer = (state: any, action: any) => {
   } else if (action.type === 'addProduct') {
     state = 'addProduct';
     return { state };
-  } else if (action.type === 'deleteProduct') {
+  }
+  else if (action.type === 'split-order') {
+    state = 'split-order';
+    return { state };
+  }  
+  else if (action.type === 'deleteProduct') {
     state = 'deleteProduct';
     return { state };
   } else if (action.type === 'defectsModal') {

package/src/components/store.ts

@@ -1,5 +1,9 @@
 import { atom, useAtom } from 'jotai';
-import { CreateReturnPayload, SelectDateType } from './types';
+import {
+  AssignUpdatePayload,
+  CreateReturnPayload,
+  SelectDateType,
+} from './types';
 
 export const filtersInitialValue = {
   date: {
@@ -16,6 +20,11 @@ export const CreateReturnInitial = {
   return_action: [],
 };
 
+export const AssignUpdateInitial = {
+  return_order_id: 0,
+  bjs_delivery: false,
+};
+
 export const triggerApiCallAtom = atom(false);
 
 const staticData = atom<any>({});
@@ -53,6 +62,18 @@ const final = atom<any[]>([]);
 
 const clearState = atom<boolean>(false);
 
+const assignData = atom<any[]>([]);
+
+const assignPayload = atom<AssignUpdatePayload>(AssignUpdateInitial);
+
+const callAPIAgain = atom<boolean>(true);
+
+const actionTypeOptions = atom<any[]>([]);
+
+const locationOptions = atom<any[]>([]);
+
+const selectedProductsMove = atom<any>([]);
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -141,6 +162,29 @@ function useClearState() {
   return useAtom(clearState);
 }
 
+function useAssignData() {
+  return useAtom(assignData);
+}
+
+function useAssignPayload() {
+  return useAtom(assignPayload);
+}
+
+function useCallApiAgain() {
+  return useAtom(callAPIAgain);
+}
+
+function useActionTypeOptions() {
+  return useAtom(actionTypeOptions);
+}
+
+function useLocationOptions() {
+  return useAtom(locationOptions);
+}
+function useSelectedProducts() {
+  return useAtom(selectedProductsMove);
+}
+
 export {
   useAtom,
   useFilter,
@@ -164,4 +208,10 @@ export {
   usePostLoading,
   useFinalPayload,
   useClearState,
+  useAssignData,
+  useAssignPayload,
+  useCallApiAgain,
+  useActionTypeOptions,
+  useLocationOptions,
+  useSelectedProducts,
 };

package/src/components/types.ts

@@ -227,3 +227,8 @@ export type CreateReturnPayload = {
   products: number[];
   return_action: string[];
 };
+
+export type AssignUpdatePayload = {
+  return_order_id: number | null;
+  bjs_delivery: boolean;
+};

package/src/index.tsx

@@ -3,35 +3,40 @@ import { Route, Routes, useNavigate } from 'react-router-dom';
 import OrderView from './components/order-view';
 import ReturnTable from './components/order-daily-overview/return-order-table/ReturnTable';
 import ReturnAfterTable from './components/order-daily-overview/return-after-table/ReturnAfterTable';
-import { useTableName } from './components/order-daily-overview/store/store';
+import {
+  useIdForTableName,
+  useTableName,
+} from './components/order-daily-overview/store/store';
 import ReturnMainTable from './components/order-daily-overview';
 import { notification } from 'antd';
 import RouterHeader from './components/order-daily-overview/header/route-header/RouterHeader';
 import {
   useActionType,
-  // useAtom,
+  useActionTypeOptions,
+  useAssignData,
   useCustomerData,
   useLocationData,
   useStatusOrderData,
 } from './components/store';
 import { ApiResponse } from './components/types';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
-// import { filtersReducerAtom } from './components/order-daily-overview/header-filters/filterStore';
+import { useLocationOptions } from './components/order-view/store';
 
 function ReturnClient() {
   notification.config({
     top: 80,
   });
   const LoadingMessage = () => <div>Loading...</div>;
-  const [selectedClient] = useTableName();
+  const [selectedClientId] = useIdForTableName();
   const navigate = useNavigate();
-  let selectedClientString = selectedClient?.replace(/\s+/g, '-');
-  selectedClientString = selectedClientString?.toLowerCase();
   const [, setCustomers] = useCustomerData();
   const [, setActionType] = useActionType();
   const [, setLocationData] = useLocationData();
   const [, setStatusOfOrders] = useStatusOrderData();
-  // const [dispatchvalue] = useAtom(filtersReducerAtom);
+  const [, setAssignData] = useAssignData();
+  const [, setActionTypeOptions] = useActionTypeOptions();
+  const [, setLocationOptions] = useLocationOptions();
+  const [, setTableName] = useTableName();
 
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
@@ -42,26 +47,27 @@ function ReturnClient() {
     if (paths[paths.length - 1] === 'returnclient') {
       localStorage.removeItem('clientName');
       localStorage.removeItem('clientId');
-      localStorage.removeItem('uuid');
-      // dispatch({ type: 'CLEAR_CLIENT' });
+      localStorage.removeItem('account_number');
+      setActionTypeOptions([]);
+      setLocationOptions([]);
+      setTableName('');
     }
   }, [location.pathname]);
 
   useEffect(() => {
-    if (selectedClient) {
-      const selectedClientString = selectedClient.replace(/\s+/g, '-');
-      navigate(`filter/${selectedClientString}`);
+    if (selectedClientId) {
+      navigate(`filter/${selectedClientId}`);
     }
-  }, [selectedClient]);
+  }, [selectedClientId]);
 
   //API for client data
   const { data: fetchedCustomerData, loading: loading } = useApiHook<
     ApiResponse
   >({
-    endpoint: `/customers/`,
+    endpoint: `/return_orders/customers/`,
     method: 'GET',
     //@ts-ignore
-    pagination: { is_pagination: false },
+    pagination: { page: 1, per_page: 50 },
   });
 
   //API for action type
@@ -99,6 +105,9 @@ function ReturnClient() {
       setStatusOfOrders(
         fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
       );
+      setAssignData(
+        fetchedStaticData?.data?.flatMap((i: any) => i?.assign_client)
+      );
     }
   }, [actionLoading]);
 
@@ -121,7 +130,7 @@ function ReturnClient() {
 
           <Route path="order-return" element={<ReturnAfterTable />} />
           <Route path="order-return/:id" element={<OrderView />} />
-          <Route path="filter/:clientName" element={<ReturnTable />} />
+          <Route path="filter/:clientId" element={<ReturnTable />} />
 
           {/* <Route
           path=""