@bjsdistribution/dms-client-return 0.0.32 → 0.0.34

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -1,6 +1,5 @@
-import { AntSelect } from '@bjsdistribution/dms-component-library';
-import { Empty } from 'antd';
-import React, { useEffect, useRef } from 'react';
+import { Empty, notification, Select } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
 // import { useSelectedOrders } from '../../../store';
 import { useOrderId, useReturnAfterOrderData } from '../../../order-view/store';
@@ -17,18 +16,28 @@ import { usePrintOptionTOggle } from '../../store/store';
 import { NavLink } from 'react-router-dom';
 import { displayValueOrNA, formatDate } from '../../shared/utlis';
 import PrintDropDown from '../../shared/elements/PrintDropDown';
+import {
+  useAssignData,
+  useAssignPayload,
+  useCallApiAgain,
+} from '../../../store';
+import styled from 'styled-components';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../common/interface';
+import Loader from '../../header/loader/Loader';
 
 const OrderTable = ({ loadingskeleton }: any) => {
   // const [, setSelectedReturnOrder] = useSelectedOrders();
   // const [selectAll, setSelectAll] = useState(false);
-  // const defaultSelectStyle = { width: '100%' };
-  const defaultPopupClassName = 'dropDownStyle';
-  const defaultSelectWrapperClass = 'rounded';
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
-
+  const [assignData] = useAssignData();
+  const [, setOrderId] = useOrderId();
   const [returnAfterOrder] = useReturnAfterOrderData();
+  const [assignPayload, setAssignPayload] = useAssignPayload();
+  const [, setAssign] = useState<boolean>(false);
+  const [, setCallAPi] = useCallApiAgain();
 
   const OpenDropDown = (index: number) => {
     setPrintToggle(prevIndex => (prevIndex === index ? null : index));
@@ -77,18 +86,6 @@ const OrderTable = ({ loadingskeleton }: any) => {
   //     }
   //   });
   // };
-  // console.log('', returnAfterOrder);
-
-  const assigneOptions = [
-    {
-      label: 'BJS Distribution',
-      value: 'bjs-dist',
-    },
-    {
-      label: 'Haulage',
-      value: 'haulage',
-    },
-  ];
 
   const getStatusClass = (status: string) => {
     switch (status) {
@@ -111,10 +108,60 @@ const OrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
-  const [, setOrderId] = useOrderId();
-  // console.log(id, 'idid');
+  // API for Assign
+  const {
+    data: actionResponse,
+    setShouldPerformAction: setAssignAction,
+    loading: AssignLoading,
+    error: apiError,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `return_orders/update/assign/`,
+    method: 'PUT',
+    body: [assignPayload],
+    performAction: false,
+  });
+
+  //client options
+  const assignOptions = assignData?.map((option: any) => ({
+    label: option?.type?.charAt(0)?.toUpperCase() + option?.type?.slice(1),
+    value: option?.bjs_delivery,
+  }));
+
+  const handleAssignPayload = (Id: number, value: boolean) => {
+    setCallAPi(false);
+    setAssign(value);
+    setAssignPayload({
+      ...assignPayload,
+      return_order_id: Id,
+      bjs_delivery: value,
+    });
+    setAssignAction(true);
+  };
+
+  useEffect(() => {
+    //@ts-ignore
+    if (actionResponse?.code === 200) {
+      setCallAPi(true);
+      notification.success({
+        message: 'Success',
+        // @ts-ignore
+        description: `${actionResponse?.message}`,
+      });
+      // @ts-ignore
+    } else if (apiError?.detail) {
+      notification.error({
+        message: 'Failure',
+        // @ts-ignore
+        description: `${apiError?.detail[0]?.msg}`,
+      });
+    }
+  }, [actionResponse, apiError]);
+
   return (
     <>
+      {AssignLoading && <Loader />}
       <StyledTableWrapper className="fortables">
         <StyledTable>
           <thead>
@@ -122,7 +169,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
               {/* <th className="emailInvoiceCheckbox">
                 <Checkbox checked={false} />
               </th> */}
-              <th className="emailInvoiceNo">Created</th>
+              <th>Created</th>
               <th>Return Location</th>
               <th>Pick Up Location</th>
               <th>Recipient</th>
@@ -215,17 +262,15 @@ const OrderTable = ({ loadingskeleton }: any) => {
                       {item?.weight && item?.weight !== null ? 'KG' : ''}
                     </td>
                     <td>{displayValueOrNA(item?.cube)}</td>
-                    <td>
-                      <AntSelect
-                        options={assigneOptions}
+                    <td key={item.id}>
+                      <StyledAntSelect
+                        options={assignOptions}
                         placeholder="Select"
-                        onChange={() => {}}
-                        // defaultValue={item?.assign || ''}
-                        // style={defaultSelectStyle}
-                        disabled // onSearch={handleSearch}
-                        showSearch
-                        popupClassName={defaultPopupClassName}
-                        selectWrapperClass={defaultSelectWrapperClass}
+                        onChange={(value: any) =>
+                          handleAssignPayload(item?.id, value)
+                        }
+                        style={{ width: '150px' }}
+                        value={item?.bjs_delivery}
                       />
                     </td>
                     <td>
@@ -287,4 +332,15 @@ const OrderTable = ({ loadingskeleton }: any) => {
   );
 };
 
+const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+  .ant-select-clear {
+    top: 40% !important;
+    font-size: 18px !important;
+  }
+`;
+
 export default OrderTable;

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnFilterStore.ts

@@ -1,5 +1,4 @@
 import { atom, useAtom } from 'jotai';
-// import { formatDate } from '../shared/utlis';
 import { format } from 'date-fns';
 
 const date = atom(new Date());
@@ -29,7 +28,6 @@ const initialState: FilterState = {
 };
 
 const filterReducer = (state: FilterState, action: any): FilterState => {
-  console.log(action,'action')
   switch (action.type) {
     case 'SET_DATE_FILTER':
       return {
@@ -81,6 +79,24 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ],
       };
 
+    // case 'CLEAR_CLIENT':
+    //   return {
+    //     ...state,
+    //     'x-filters': state['x-filters'].filter(f => f.field !== 'customer_id'),
+    //   };
+
+    // case 'CLEAR_STATUS_ORDER':
+    //   return {
+    //     ...state,
+    //     'x-filters': state['x-filters'].filter(f => f.field !== 'status_id'),
+    //   };
+
+    case 'CLEAR_DATE':
+      return {
+        ...state,
+        'x-filters': state['x-filters'].filter(f => f.field !== 'created_at'),
+      };
+
     case 'SET_PAGE':
       return {
         ...state,

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnOrderFilter.tsx

@@ -30,7 +30,7 @@ const ReturnOrderFilter = () => {
   const [statusOfOrder] = useStatusOrderData();
   const [selectedClient, setSelectedClient] = useState<any | null>();
   const [statusOrder, setStatusOfOrder] = useState<any | null>();
-  console.log(selectedClient, 'fffffselectedClient');
+
   const zoneOptions = [
     { label: 'Zone 1', value: 'zone1' },
     { label: 'Zone 2', value: 'zone2' },
@@ -41,11 +41,9 @@ const ReturnOrderFilter = () => {
   // date change here
   const handleDateChange = (date: any | null) => {
     setSelectedDate(date ? date?.$d : null);
-    console.log(selectedDate, 'selected');
   };
   useEffect(() => {
     if (selectedDate) {
-      console.log(selectedDate, 'selected');
       dispatch({
         type: 'SET_DATE_FILTER',
         payload: selectedDate,
@@ -62,9 +60,8 @@ const ReturnOrderFilter = () => {
     label:
       option?.customer_name?.charAt(0)?.toUpperCase() +
       option?.customer_name?.slice(1),
-    value: option?.id,
+    value: option?.customer_id,
   }));
-  console.log(clientOptions, 'clientOptions');
   //status of order
   const orderOptions = statusOfOrder?.map((option: any) => ({
     label:
@@ -74,7 +71,6 @@ const ReturnOrderFilter = () => {
   }));
   const handleClientChange = (value: any) => {
     if (value === selectedClient) return;
-    console.log(value, 'value');
     setSelectedClient(value);
     dispatch({
       type: 'SET_CLIENT_FILTER',
@@ -88,7 +84,6 @@ const ReturnOrderFilter = () => {
   };
   const handleStatusOfOrder = (value: any) => {
     if (value === statusOfOrder) return;
-    console.log(value, 'value');
     setStatusOfOrder(value);
     dispatch({
       type: 'SET_STATUS_ORDER_FILTER',
@@ -106,6 +101,14 @@ const ReturnOrderFilter = () => {
     setStatusOfOrder(null);
     dispatch({ type: 'CLEAR_ALL_FILTER' });
   };
+
+  //clearing filters
+  useEffect(() => {
+    if (selectedDate === null) {
+      dispatch({ type: 'CLEAR_DATE' });
+    }
+  }, [selectedDate]);
+
   return (
     <>
       <StyledFiter>
@@ -130,6 +133,7 @@ const ReturnOrderFilter = () => {
                   format="DD/MM/YY"
                   placeholder="Date"
                   needConfirm
+                  allowClear
                 />
               </StyledDatePicker>
             </div>
@@ -145,6 +149,8 @@ const ReturnOrderFilter = () => {
                   onChange={handleStatusOfOrder}
                   style={{ minWidth: '130px' }}
                   value={statusOrder}
+                  // allowClear
+                  // onClear={handleClearStatus}
                 />
               </StyledAntSelect>
             </div>
@@ -160,6 +166,7 @@ const ReturnOrderFilter = () => {
                   onChange={handleClientChange}
                   value={selectedClient}
                   style={{ width: '125px', border: 'none' }}
+                  // allowClear
                 />
               </StyledAntSelect>
             </div>
@@ -237,5 +244,9 @@ export const StyledAntSelect = styled.div`
     box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
     top: 16px;
   }
+  .ant-select-clear {
+    top: 40% !important;
+    font-size: 18px !important;
+  }
 `;
 export default ReturnOrderFilter;

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

@@ -6,15 +6,14 @@ import {
   Text,
 } from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
-import { useParams } from 'react-router-dom';
 
 const ReturnFilter = () => {
-  const { clientName } = useParams();
+  const storedName = localStorage.getItem('clientName');
 
   return (
     <>
       <StyledFiter>
-        <Text> {clientName}</Text>
+        <Text>{storedName}</Text>
         <StyledFIlterELements>
           <StyledTableFilter />
         </StyledFIlterELements>

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

@@ -194,7 +194,9 @@ const ReturnOrderTable = () => {
           account_number: createReturn?.account_number,
           customer_id: +createReturn?.customer_id,
           products: [legacy_product_id],
-          return_action: [order_product_return_action?.type] || null,
+          return_action: order_product_return_action?.type
+            ? [order_product_return_action.type]
+            : null,
           return_location_token: return_location || null,
         };
 
@@ -279,7 +281,7 @@ const ReturnOrderTable = () => {
               <th>Product Location</th>
               <th>Return Location</th>
               <th>Recipient</th>
-              {/* <th>Return Action Type</th> */}
+              <th>Return Action</th>
               <th>Code</th>
               <th>Description</th>
               <th>Part</th>
@@ -366,9 +368,9 @@ const ReturnOrderTable = () => {
                       </li>
                     </ul>
                   </td>
-                  {/* <td>
+                  <td>
                     {displayValueOrNA(item?.order_product_return_action?.type)}
-                  </td> */}
+                  </td>
                   <td>{displayValueOrNA(item?.code)}</td>
                   <td>{displayValueOrNA(item?.description)}</td>
                   <td>{displayValueOrNA(item?.parts_count)}</td>

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

@@ -515,15 +515,16 @@ export const StyledTable = styled.table`
 
 // Styled components
 export const StyledTableWrapper = styled.div`
-  overflow-x: auto;
   max-height: 60vh;
+  overflow-x: auto;
   scrollbar-width: none;
+  min-height: 50vh;
 
   .fortables {
-    overflow-x: auto;
     max-height: 60vh;
+    overflow-x: auto;
     scrollbar-width: none;
-    min-height: 60vh;
+    min-height: 50vh;
   }
   /* height: 600px; */
   /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */

package/src/components/order-daily-overview/store/store.ts

@@ -56,6 +56,11 @@ export function useSelectedClient() {
   return useAtom(selectedClient);
 }
 
+const clientTableId = atom<number | null>(null);
+export function useIdForTableName() {
+  return useAtom(clientTableId);
+}
+
 const clientTableName = atom<string | null>(null);
 export function useTableName() {
   return useAtom(clientTableName);
@@ -92,6 +97,16 @@ export const useItemsPerReturnPage = () => {
   return useAtom(atomItemsPerReturnPage);
 };
 
+//stats data overview
+export const UsePaginationOverviewData = () => {
+  return useAtom(atomPaginationData);
+};
+
+const atomItemsPerOverviewPage = atom<number>(50);
+export const useItemsPerOverviewPage = () => {
+  return useAtom(atomItemsPerOverviewPage);
+};
+
 const countStatus = atom<any>([]);
 export const useCountData = () => {
   return useAtom(countStatus);

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

@@ -26,10 +26,10 @@ interface ApiResponse {
   data: [];
 }
 
-const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
+const ReturnTable: React.FC = () => {
   const [clientData] = useClientData();
   const [updatedData, setUpdatedData] = useState<any>([]);
-  const [, setLoading] = useLoading();
+  const [statsLoading, setLoading] = useLoading();
   const [, setOrderStaticData] = useOrderStaticData();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const navigate = useNavigate();
@@ -54,11 +54,13 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
   useEffect(() => {
     const updatedClientData = clientData?.map(client => {
       const matchingCustomer = customers?.find(
-        (customer: any) => customer?.id === client?.customer_id
+        (customer: any) => customer?.customer_id === client?.customer_id
       );
       return {
         ...client,
-        uuid: matchingCustomer ? matchingCustomer?.uuid : null,
+        account_number: matchingCustomer
+          ? matchingCustomer?.account_number
+          : null,
       };
     });
     setUpdatedData(updatedClientData);
@@ -68,11 +70,11 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
   const handleRedirect = (
     customerName: string,
     customerId: number,
-    customerUuid: string
+    account_number: string
   ) => {
     localStorage.setItem('clientName', customerName);
     localStorage.setItem('clientId', customerId?.toString());
-    localStorage.setItem('uuid', customerUuid);
+    localStorage.setItem('account_number', account_number);
 
     if (customerId) {
       dispatch({
@@ -89,8 +91,10 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
         payload: [],
       });
     }
-    const selectedClientString = customerName?.replace(/\s+/g, '-');
-    navigate(`filter/${selectedClientString}`);
+    navigate(`filter/${customerId}`);
+
+    //forlocal
+    // navigate(`/filter/${customerId}`);
   };
 
   return (
@@ -113,7 +117,7 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
             </tr>
           </thead>
           <tbody>
-            {loadingskeleton ? (
+            {statsLoading ? (
               <tr>
                 <td colSpan={11}>
                   <Skeleton active />
@@ -138,7 +142,7 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
                         handleRedirect(
                           key?.customer_name,
                           key?.customer_id,
-                          key?.uuid
+                          key?.account_number
                         )
                       }
                       style={{
@@ -153,7 +157,7 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
                     <td>
                       <ColumStyle>
                         <GreyBox>
-                          {key?.return_orders}
+                          {key?.orders}
                           {/* </div> */}
                         </GreyBox>
                       </ColumStyle>
@@ -169,6 +173,7 @@ const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
                         <GreyBox>{key?.RTS}</GreyBox>
                       </ColumStyle>
                     </td>
+
                     <td>
                       <ColumStyle>
                         <GreyBox>{key?.PENDING}</GreyBox>

package/src/components/order-daily-overview/table/table-data/styles.ts

@@ -59,7 +59,7 @@ export const StyledTable = styled.table`
         }
       }
       .emailInvoiceNo {
-        padding-left: 0px;
+        padding-left: 12px;
       }
       .emailInvoiceShare {
         width: 100px;
@@ -604,7 +604,7 @@ export const StyledFilterBtnIcon = styled.div`
   align-items: center;
   border-radius: 20px;
   border: 1px solid #e2e0db;
-  background: #f1f5f6;
+  background: #b2b3b3;
   .cross {
     position: relative;
     &:after {

package/src/components/order-view/details-filters/left-side-filters/dropdowns/MenuDropDown.tsx

@@ -1,29 +1,25 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useAtom } from 'jotai';
-import { countReducerAtom } from '../../../store';
+import { useCurrentAction } from '../../../store';
 import DropDownItem from './DropDownItem';
 import DropDownMenu from './DropDownMenu';
 import { DropDownContainer } from './DropdownStyles';
 import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
-// import { countReducerAtom } from '../../../store/store';
 
 const Options = [
-  { label: 'Add Order Resource ', value: 'add-order-resources' },
+  // { label: 'Add Order Resource ', value: 'add-order-resources' },
   { label: 'Split Order ', value: 'split-order' },
 ];
 
 const MenuDropDown: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const [, dispatch] = useAtom(countReducerAtom);
   const dropdownRef = useRef<HTMLDivElement>(null);
-
+  const [, setCurrentAction] = useCurrentAction();
   const handleClick = () => {
     setIsOpen(prev => !prev);
   };
 
-  const handleSelect = (value: string) => {
-    console.log(`Selected: ${value}`);
-    dispatch({ type: value });
+  const handleSelect = (selectedOption: any) => {
+    setCurrentAction(selectedOption);
     setIsOpen(false);
   };
 

package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx

@@ -21,9 +21,10 @@ const Options = [
 const OptionsDropDown: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const [action, setCurrentAction] = useCurrentAction();
+  const [, setCurrentAction] = useCurrentAction();
   const [hold] = useIsOnHoldOrder();
-  console.log(action, 'action');
+
+  // console.log(action, 'action');
   const handleClick = () => {
     setIsOpen(prev => !prev);
   };
@@ -36,7 +37,6 @@ const OptionsDropDown: React.FC = () => {
     }
   });
   const handleSelect = (selectedOption: any) => {
-    console.log(selectedOption);
     setCurrentAction(selectedOption);
     setIsOpen(false);
   };

package/src/components/order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn.tsx

@@ -14,7 +14,7 @@ const PrintDropDownReturn = ({
   console.log(legacyProductId, 'legacyProductId');
 
   const downloadFiles = () => {
-    const url = `https://toolbox.bjshomedelivery.com/offload/return_label?gsit_products_id=${legacyProductId}`;
+    const url = `https://us.toolbox.bjshomedelivery.com/offload/return_label?gsit_products_id=${legacyProductId}`;
     window.open(url, '_blank'); // Opens the URL in a new tab
   };
 

package/src/components/order-view/general-information/Status.tsx

@@ -63,7 +63,7 @@ const renderIcon = (value: any, orderStatus: any) => {
       } else if (status.delivered === true && status.completed === true) {
         return <SuccessIcon />;
       } else if (status.delivered === true && status.completed === false) {
-        return <RouteIcon />;
+        return <RouteIcon />; //orange
       } else {
         return <ConfirmedIcon />;
       }

package/src/components/order-view/general-information/dropdowns/Print.tsx

@@ -10,7 +10,7 @@ function Print() {
   const [orderDetails] = useOrderDetails();
   const gsitId = orderDetails?.gsit_order_id;
   const dropdownRef = useRef<HTMLDivElement>(null);
-  console.log(gsitId, 'gsitId');
+  // console.log(gsitId, 'gsitId');
   const [isOpen, setIsOpen] = useState(false);
 
   const handleClick = () => {