@bjsdistribution/dms-client-return 0.0.40 → 0.0.42

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.40",
+  "version": "0.0.42",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.1.4",
+    "@bjsdistribution/dms-component-library": "0.1.11",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/common/services-slider/ServiceSlider.tsx

@@ -52,7 +52,7 @@ const Container = styled.div`
   display: flex;
   gap: 10px;
   align-items: center;
-  cursor: not-allowed;
+  /* cursor: not-allowed; */
   flex: 1;
 `;
 

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -20,13 +20,12 @@ import {
   useSelectedAction,
   useSelectedClient,
   useSelectedLocation,
-  useIdForTableName,
   useLoading,
-  useTableName,
 } from '../store/store';
 import styled from 'styled-components';
 import { Select } from 'antd';
 import { useLocationOptions } from '../../order-view/store';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 export const clickedState = atom<boolean>(false);
 
@@ -39,15 +38,26 @@ function SelectionFilter() {
     setSelectedLocationValue,
   ] = useSelectedLocation();
   const [selectedClient, setSelectedClient] = useSelectedClient();
-  const [, setClientIdForTable] = useIdForTableName();
   const [isButtonEnabled, setIsButtonEnabled] = useState(false);
   const [, setReturnPayload] = useReturnPayload();
   const [load] = useLoading();
-  const [, setTableName] = useTableName();
   const [clearState, setClear] = useClearState();
   const [actionTypeOptions, setActionTypeOptions] = useActionTypeOptions();
   const [locationOptions, setLocationOptions] = useLocationOptions();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
 
+  //new codee
+  const urlCustomerId = searchParams.get('customerId');
+  const urlActiontype = searchParams.get('type');
+
+  const selectedCustomer = customers?.find(
+    (customer: any) => customer?.customer_id.toString() === urlCustomerId
+  );
+
+  const accountNumber = selectedCustomer?.account_number;
+
+  //customer name
   const clientOptions = customers
     ?.filter(
       (option: any) => 'customer_id' in option && option.customer_id != null
@@ -64,49 +74,54 @@ function SelectionFilter() {
 
   //client change
   const handleClientChange = (value: any, option: any) => {
-    // console.log(value, 'value');
     setSelectedClient(value);
 
-    localStorage.setItem('clientName', option?.label);
-    localStorage.setItem('clientId', value?.toString());
-    localStorage.setItem('account_number', option?.account_number);
+    const filteredClient = clientOptions?.find(
+      (client: any) => client?.value == value
+    );
+
+    if (filteredClient) {
+      const mappedActions = Array.isArray(filteredClient?.actions)
+        ? filteredClient?.actions?.map((action: any) => ({
+            label: action,
+            value: action,
+          }))
+        : [];
+
+      setActionTypeOptions(mappedActions);
+
+      const mappedLocations = Array.isArray(filteredClient?.return_locations)
+        ? filteredClient?.return_locations?.map((location: any) => ({
+            label: location?.location_name,
+            value: location?.token,
+          }))
+        : [];
+
+      setLocationOptions(mappedLocations);
+    }
 
     //set payload
     setReturnPayload((prevState: any) => ({
       ...prevState,
       account_number: option?.account_number,
-      customer_id: value,
+      customer_id: +value,
     }));
   };
 
-  const storedName = localStorage.getItem('clientName');
-  const storedClientId = localStorage.getItem('clientId');
-  const storedAccountNumber = localStorage.getItem('account_number');
-
-  useEffect(() => {
-    if (storedClientId !== selectedClient) {
-      localStorage.removeItem('clientDetails');
-      localStorage.removeItem('clientActions');
-      localStorage.removeItem('clientLocations');
-    }
-  }, [storedClientId]);
-
   useEffect(() => {
-    if (storedClientId && storedAccountNumber) {
+    if (urlCustomerId && accountNumber) {
       setReturnPayload((prevState: any) => ({
         ...prevState,
-        account_number: storedAccountNumber,
-        customer_id: storedClientId,
+        account_number: accountNumber,
+        customer_id: +urlCustomerId,
       }));
     }
-  }, [storedClientId, storedAccountNumber]);
+  }, [accountNumber, urlCustomerId]);
 
   useEffect(() => {
-    const storedClientId = localStorage.getItem('clientId');
-
-    if (storedClientId && clientOptions?.length > 0) {
+    if (urlCustomerId && clientOptions?.length > 0) {
       const filteredClient = clientOptions?.find(
-        (client: any) => client?.value == storedClientId
+        (client: any) => client?.value == urlCustomerId
       );
 
       if (filteredClient) {
@@ -144,17 +159,18 @@ function SelectionFilter() {
   //Apply filters
   const applyFilters = () => {
     if (selectedClient) {
-      setClientIdForTable(selectedClient);
-    }
-    if (storedName) {
-      setTableName(storedName);
+      const queryParams = new URLSearchParams({
+        customerId: selectedClient?.toString(),
+      });
+
+      navigate(`/filter?${queryParams.toString()}`);
     }
+
     const selectedClientValue = clientOptions?.find(
       (client: any) => client?.value === selectedClient
     );
 
     const clientActions = selectedClientValue?.actions || [];
-
     const clientLocations = selectedClientValue?.return_locations || [];
 
     setActionTypeOptions(
@@ -176,10 +192,10 @@ function SelectionFilter() {
     );
 
     //client value
-    if (storedClientId) {
+    if (urlCustomerId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: storedClientId,
+        payload: urlCustomerId,
       });
       dispatch({
         type: 'SET_PAGE',
@@ -215,24 +231,13 @@ function SelectionFilter() {
     }
   };
 
-  // const storedName = localStorage.getItem('clientName');
-
   useEffect(() => {
-    if (storedClientId) {
-      dispatch({
-        type: 'SET_CLIENT_FILTER',
-        payload: storedClientId,
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (storedClientId || selectedFilterValue || selectedLocationValue) {
+    if (selectedClient || selectedFilterValue || selectedLocationValue) {
       setIsButtonEnabled(true);
     } else {
       setIsButtonEnabled(false);
     }
-  }, [storedClientId, selectedFilterValue, selectedLocationValue]);
+  }, [selectedClient, selectedFilterValue, selectedLocationValue]);
 
   useEffect(() => {}, [location.pathname]);
 
@@ -251,7 +256,7 @@ function SelectionFilter() {
 
   const handleClear = () => {
     setClear(false);
-    localStorage.removeItem('clientDetails');
+    dispatch({ type: 'CLEAR_CLIENT' });
     setClear(true);
   };
 
@@ -262,6 +267,46 @@ function SelectionFilter() {
     }
   }, [clearState]);
 
+  useEffect(() => {
+    if (urlCustomerId && urlActiontype) {
+      dispatch({
+        type: 'SET_CLIENT_FILTER',
+        payload: urlCustomerId,
+      });
+      setSelectedClient(+urlCustomerId);
+
+      dispatch({
+        type: 'SET_ACTIONS_FILTER',
+        payload: urlActiontype,
+      });
+      setSelectedFilterValue(urlActiontype);
+
+      dispatch({
+        type: 'SET_PAGE',
+        payload: 1,
+      });
+    } else if (urlCustomerId) {
+      dispatch({
+        type: 'SET_CLIENT_FILTER',
+        payload: urlCustomerId,
+      });
+      setSelectedClient(+urlCustomerId);
+      dispatch({
+        type: 'SET_PAGE',
+        payload: 1,
+      });
+    }
+  }, [urlCustomerId]);
+
+  const handleClearAction = () => {
+    dispatch({ type: 'CLEAR_ACTION' });
+
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.delete('type');
+
+    navigate(`?${searchParams.toString()}`, { replace: true });
+  };
+
   return (
     <Wrapper>
       <FilterRow>
@@ -272,40 +317,38 @@ function SelectionFilter() {
               options={clientOptions}
               placeholder="Select Client Name"
               onChange={handleClientChange}
-              style={{ minWidth: '14vw' }}
-              value={storedName}
+              style={{ minWidth: '150px' }}
+              value={selectedClient}
               allowClear
               onClear={handleClear}
             />
           </FilterColumn>
 
-          {/* {storedName && location.pathname.includes(`filter/`) ? ( */}
-          <>
-            <FilterColumn>
-              <Label>Action Type</Label>
-              <StyledAntSelect
-                options={actionTypeOptions}
-                placeholder="Select Action Type"
-                value={selectedFilterValue}
-                onChange={handleActionClick}
-                style={{ minWidth: '14vw' }}
-                allowClear
-              />
-            </FilterColumn>
-
-            <FilterColumn>
-              <Label>Location </Label>
-              <StyledAntSelect
-                options={locationOptions}
-                value={selectedLocationValue}
-                placeholder="Select Location"
-                onChange={handleLocationChange}
-                style={{ minWidth: '14vw' }}
-                allowClear
-                mode="multiple"
-              />
-            </FilterColumn>
-          </>
+          <FilterColumn>
+            <Label>Action Type</Label>
+            <StyledAntSelect
+              options={actionTypeOptions}
+              placeholder="Select Action Type"
+              value={selectedFilterValue}
+              onChange={handleActionClick}
+              style={{ minWidth: '150px' }}
+              allowClear
+              onClear={handleClearAction}
+            />
+          </FilterColumn>
+
+          <FilterColumn>
+            <Label>Location </Label>
+            <StyledAntSelect
+              options={locationOptions}
+              value={selectedLocationValue}
+              placeholder="Select Location"
+              onChange={handleLocationChange}
+              style={{ minWidth: '14vw' }}
+              allowClear
+              mode="multiple"
+            />
+          </FilterColumn>
         </LeftColumn>
         <RightColumn>
           <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>

package/src/components/order-daily-overview/index.tsx

@@ -3,7 +3,6 @@ import {
   useItemsPerOverviewPage,
   useStatsLoading,
   UsePaginationOverviewData,
-  useTableName,
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
@@ -15,9 +14,9 @@ import { ClientData } from './common/interface';
 import ReturnFilter from './return-order-table/return-orders-filters/ReturnFilter';
 import { Text } from './filters/FilterStyle';
 import ReturnTable from './table/ReturnTable';
-import { notification } from 'antd';
 import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
 import Pagination from './table-view/Pagination';
+import { notification } from 'antd';
 
 function ReturnMainTable() {
   const [state] = useAtom(overviewfiltersReducerAtom);
@@ -30,7 +29,10 @@ function ReturnMainTable() {
   const [isScrolled] = useStickyStatus();
   const [, setLoading] = useStatsLoading();
   const [, setClientData] = useClientData();
-  const [tableName] = useTableName();
+  // const [tableName] = useTableName();
+  const queryParams = new URLSearchParams(location.search);
+
+  const customerId = queryParams.get('customerId');
 
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
@@ -78,7 +80,7 @@ function ReturnMainTable() {
           <Container>
             <Row>
               <Text>Client Return</Text>
-              {tableName ? <ReturnFilter /> : <Filters />}
+              {customerId ? <ReturnFilter /> : <Filters />}
             </Row>
             <ReturnTable />
           </Container>

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

@@ -54,29 +54,73 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
       };
 
     case 'SET_CLIENT_FILTER':
+      if (action.payload) {
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'customer_id'),
+            {
+              field: 'customer_id',
+              op: '=',
+              value: action.payload,
+            },
+          ],
+        };
+      } else {
+        return {
+          ...state,
+          'x-filters': state['x-filters'].filter(
+            f => f.field !== 'customer_id'
+          ),
+        };
+      }
+
+    case 'CLEAR_CLIENT_FILTER':
       return {
         ...state,
-        'x-filters': [
-          ...state['x-filters'].filter(f => f.field !== 'customer_id'),
-          {
-            field: 'customer_id',
-            op: '=',
-            value: action.payload,
-          },
-        ],
+        'x-filters': state['x-filters'].filter(f => f.field !== 'customer_id'),
       };
 
     case 'SET_STATUS_ORDER_FILTER':
+      if (action.payload) {
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'status_id'),
+            {
+              field: 'status_id',
+              op: '=',
+              value: action.payload,
+            },
+          ],
+        };
+      } else {
+        return {
+          ...state,
+          'x-filters': state['x-filters'].filter(f => f.field !== 'status_id'),
+        };
+      }
+
+      case 'SET_ASSIGNEE_FILTER':
+        return {
+          ...state,
+          'x-filters': action.payload !== null
+            ? [
+                ...state['x-filters'].filter(f => f.field !== 'bjs_delivery'),
+                {
+                  field: 'bjs_delivery',
+                  op: '=',
+                  value: action.payload,
+                },
+              ]
+            : state['x-filters'].filter(f => f.field !== 'bjs_delivery'),
+        };
+      
+
+    case 'CLEAR_STATUS_ORDER_FILTER':
       return {
         ...state,
-        'x-filters': [
-          ...state['x-filters'].filter(f => f.field !== 'status_id'),
-          {
-            field: 'status_id',
-            op: '=',
-            value: action.payload,
-          },
-        ],
+        'x-filters': state['x-filters'].filter(f => f.field !== 'status_id'),
       };
 
     // case 'CLEAR_CLIENT':

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

@@ -14,7 +14,11 @@ import { DatePicker, Select } from 'antd';
 import { useAtom } from '../../../order-view/store';
 import styled from 'styled-components';
 import dayjs from 'dayjs';
-import { useCustomerData, useStatusOrderData } from '../../../store';
+import {
+  useAssignData,
+  useCustomerData,
+  useStatusOrderData,
+} from '../../../store';
 import StatusIcon from '../../../../assets/icons/StatusIcon';
 import AssigneIcon from '../../../../assets/icons/AssigneIcon';
 import {
@@ -30,14 +34,9 @@ const ReturnOrderFilter = () => {
   const [statusOfOrder] = useStatusOrderData();
   const [selectedClient, setSelectedClient] = useState<any | null>();
   const [statusOrder, setStatusOfOrder] = useState<any | null>();
+  const [selectedAssignee, setSelectedAssignee] = useState<any | null>();
+  const [assignData] = useAssignData();
 
-  const zoneOptions = [
-    { label: 'Zone 1', value: 'zone1' },
-    { label: 'Zone 2', value: 'zone2' },
-    { label: 'Zone 3', value: 'zone3' },
-    { label: 'Zone 4', value: 'zone4' },
-    { label: 'Zone 5', value: 'zone5' },
-  ];
   // date change here
   const handleDateChange = (date: any | null) => {
     setSelectedDate(date ? date?.$d : null);
@@ -95,13 +94,56 @@ const ReturnOrderFilter = () => {
       payload: 1,
     });
   };
+
+  const handleAssigneeChange = (value: any) => {
+    const bjsDeliveryValue = assignData.find(client => client.id === value)
+      ?.bjs_delivery;
+    if (bjsDeliveryValue === undefined) return;
+    setSelectedAssignee(value);
+    dispatch({
+      type: 'SET_ASSIGNEE_FILTER',
+      payload: bjsDeliveryValue,
+    });
+    dispatch({
+      type: 'SET_PAGE',
+      payload: 1,
+    });
+  };
+
+  const handleClearAssignee = () => {
+    setSelectedAssignee(null);
+    dispatch({
+      type: 'SET_ASSIGNEE_FILTER',
+      payload: null,
+    });
+    dispatch({
+      type: 'SET_PAGE',
+      payload: 1,
+    });
+  };
+
   const handleClearAll = () => {
     setSelectedDate(null);
     setSelectedClient(null);
     setStatusOfOrder(null);
+    setSelectedAssignee(null);
     dispatch({ type: 'CLEAR_ALL_FILTER' });
   };
 
+  const handleClear = () => {
+    dispatch({
+      type: 'CLEAR_STATUS_ORDER_FILTER',
+    });
+
+    setStatusOfOrder(null);
+  };
+
+  const handleClearClient = () => {
+    dispatch({
+      type: 'CLEAR_CLIENT_FILTER',
+    });
+    setSelectedClient(null);
+  };
   //clearing filters
   useEffect(() => {
     if (selectedDate === null) {
@@ -149,8 +191,8 @@ const ReturnOrderFilter = () => {
                   onChange={handleStatusOfOrder}
                   style={{ minWidth: '130px' }}
                   value={statusOrder}
-                  // allowClear
-                  // onClear={handleClearStatus}
+                  onClear={handleClear}
+                  allowClear
                 />
               </StyledAntSelect>
             </div>
@@ -166,29 +208,37 @@ const ReturnOrderFilter = () => {
                   onChange={handleClientChange}
                   value={selectedClient}
                   style={{ width: '125px', border: 'none' }}
-                  // allowClear
+                  allowClear
+                  onClear={handleClearClient}
                 />
               </StyledAntSelect>
             </div>
-            <div
-              className="datefilter"
-              style={{ pointerEvents: 'none', opacity: 0.5 }}
-            >
+
+            <div className="datefilter">
               <div className="dateiconcontainer">
                 <AssigneIcon />
               </div>
               <StyledAntSelect>
                 <Select
-                  options={zoneOptions}
+                  options={assignData?.map(client => ({
+                    label: client.type,
+                    value: client.id,
+                  }))}
                   className="custom-select"
-                  placeholder="Asignee"
-                  onChange={() => {}}
+                  placeholder="Assignee"
+                  onChange={handleAssigneeChange}
+                  value={selectedAssignee}
                   style={{ minWidth: '100px' }}
-                  disabled
+                  allowClear
+                  onClear={handleClearAssignee}
                 />
               </StyledAntSelect>
             </div>
-            {selectedDate || statusOrder || selectedClient ? (
+
+            {selectedDate ||
+            statusOrder ||
+            selectedClient ||
+            selectedAssignee ? (
               <>
                 <ClearAll onClick={handleClearAll}>
                   <StyledFilterBtnIcon>

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

@@ -8,12 +8,13 @@ import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
 import ModalManager from '../../order-view/modalsPopup/ModalManager';
 import { useItemsPerPage, UsePaginationData } from '../store/store';
 import Pagination from '../table-view/Pagination';
+// import { useLocation } from 'react-router-dom';
 
 const ReturnTable = () => {
   const [paginationObj] = UsePaginationData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
-
+  // const location = useLocation();
   const { page, total } = paginationObj;
 
   const handlePageChange = (page: number) => {
@@ -23,6 +24,12 @@ const ReturnTable = () => {
     setItemsPerPage(itemsPerPage);
   };
 
+  // useEffect(() => {
+  //   const queryParams = new URLSearchParams(location.search);
+
+  //   const clientId = queryParams.get('customerId');
+  // }, [location]);
+
   return (
     <div>
       <DashBoardWrapper>

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

@@ -6,14 +6,25 @@ import {
   Text,
 } from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
+import { useCustomerData } from '../../../store';
 
 const ReturnFilter = () => {
-  const storedName = localStorage.getItem('clientName');
+  const [customers] = useCustomerData();
+
+  const queryParams = new URLSearchParams(location.search);
+  const customerId = queryParams.get('customerId');
+
+  const selectedCustomer = customers?.find(
+    (customer: any) => customer?.customer_id?.toString() === customerId
+  );
+
+  const customerName = selectedCustomer?.customer_name;
+  // const accountNumber = selectedCustomer?.account_number;
 
   return (
     <>
       <StyledFiter>
-        <Text>{storedName}</Text>
+        <Text>{customerName}</Text>
         <StyledFIlterELements>
           <StyledTableFilter />
         </StyledFIlterELements>

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

@@ -47,7 +47,7 @@ export const useLoading = () => {
   return useAtom(loadingState);
 };
 
-const selectedAction = atom<number | null>(null);
+const selectedAction = atom<string | null>(null);
 export function useSelectedAction() {
   return useAtom(selectedAction);
 }