@bjsdistribution/dms-client-return 0.1.60-prod → 0.1.61-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.60-prod",
+  "version": "0.1.61-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/header/route-header/search/SearchType.tsx

@@ -11,6 +11,7 @@ import { ClientData } from '../../../common/interface';
 import { notification } from 'antd';
 import { overviewfiltersReducerAtom } from '../../../header-filters/overViewFilter';
 import { UsePaginationOverviewData } from '../../../store/store';
+import { useStatsLoading } from '../../../store/store';
 
 const SearchType = () => {
   const [searchText, setSearchText] = useState('');
@@ -18,6 +19,7 @@ const SearchType = () => {
   const [debouncedSearchText, setDebouncedSearchText] = useInternalSearchText();
   const [state] = useAtom(overviewfiltersReducerAtom);
   const [, setPaginationObject] = UsePaginationOverviewData();
+  const [, setStatsLoading] = useStatsLoading();
   const didMountRef = useRef(false);
   const { 'x-filters': filters, 'x-pagination': pagination } = state;
 
@@ -54,7 +56,7 @@ const SearchType = () => {
     if (searchData && Array.isArray(searchData?.data)) {
       setClientData(searchData?.data);
     }
-  }, [searchData, loading]);
+  }, [searchData]);
 
   const handleClear = () => {
     setSearchText('');
@@ -76,6 +78,14 @@ const SearchType = () => {
     filters: filters,
   });
 
+  useEffect(() => {
+    if (debouncedSearchText && debouncedSearchText?.length > 0) {
+      setStatsLoading(loading);
+    } else {
+      setStatsLoading(statsDataLoading);
+    }
+  }, [loading, statsDataLoading, debouncedSearchText]);
+
   useEffect(() => {
     if (fetchedClientData && fetchedClientData.data) {
       const result = fetchedClientData?.data;

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

@@ -16,6 +16,7 @@ import {
   useClientPortal,
   useCustomerData,
   useReturnPayload,
+  useFlatCustomerData,
 } from '../../store';
 import { filtersReducerAtom } from './filterStore';
 import {
@@ -31,10 +32,11 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAxios } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../common/interface';
 
+
 export const clickedState = atom<boolean>(false);
 
 function SelectionFilter() {
-  const [customers, setCustomers] = useCustomerData();
+  const [customers] = useCustomerData();
   const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [
@@ -49,9 +51,10 @@ function SelectionFilter() {
   const [actionTypeOptions, setActionTypeOptions] = useActionTypeOptions();
   const [locationOptions, setLocationOptions] = useLocationOptions();
   const [searchParams] = useSearchParams();
-  const [clientPortal] = useClientPortal();
   const navigate = useNavigate();
+  const [clientPortal] = useClientPortal();
   const [clientLoading] = useClientLoading();
+
   //API for client data
   const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
@@ -61,41 +64,63 @@ function SelectionFilter() {
     //@ts-ignore
     pagination: { is_pagination: false },
   });
-  //need to fix
+
+  const [flatCustomers, setFlatCustomers] = useFlatCustomerData();
+
   useEffect(() => {
     if (!clientPortal && !clientLoading) {
-      fetchData();
+      if (!flatCustomers || flatCustomers.length === 0) {
+        fetchData();
+      }
     }
   }, [clientLoading]);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
-      setCustomers(fetchedCustomerData?.data);
+      setFlatCustomers(fetchedCustomerData?.data);
     }
   }, [loading]);
+
   //new codee
   const urlCustomerId = searchParams.get('customerId');
   const urlActiontype = searchParams.get('type');
 
-  const selectedCustomer = customers?.find(
+  // Used strictly for getting the account number for the API payload (works for both parent and children)
+  const selectedFlatCustomer = flatCustomers?.find(
     (customer: any) => customer?.customer_id?.toString() === urlCustomerId
   );
-  const accountNumber = selectedCustomer?.account_number;
+  const accountNumber = selectedFlatCustomer?.account_number;
+
+  // Used strictly for retrieving children bundling IDs (only populates if it's a parent)
+  const selectedGroupedCustomer = customers?.find(
+    (customer: any) => customer?.customer_id?.toString() === urlCustomerId
+  );
+
+  const getFilterPayload = () => {
+    let payload: any = urlCustomerId;
+    if (selectedGroupedCustomer?.children && selectedGroupedCustomer?.children?.length > 0) {
+      payload = [
+        urlCustomerId,
+        ...selectedGroupedCustomer?.children?.map((child: any) => child?.customer_id?.toString())
+      ];
+    }
+    return payload;
+  };
 
   //customer name
-  const clientOptions = customers
-    ?.filter(
-      (option: any) => 'customer_id' in option && option.customer_id != null
-    )
-    .map((option: any) => ({
-      label:
-        option?.customer_name?.charAt(0)?.toUpperCase() +
-        option?.customer_name?.slice(1),
-      value: option?.customer_id,
-      actions: option?.actions,
-      return_locations: option?.return_locations,
-      account_number: option?.account_number,
-    }));
+  const clientOptions = [...(flatCustomers || []), ...(customers || [])]
+    .filter((v, i, a) => a?.findIndex((t: any) => t?.customer_id?.toString() === v?.customer_id?.toString()) === i)
+    .filter((option: any) => option?.customer_id != null)
+    .map((option: any) => {
+      const name = String(option?.customer_name || option?.trading_as || '');
+      return {
+        label: name.charAt(0)?.toUpperCase() + name?.slice(1),
+        value: Number(option?.customer_id),
+        actions: option?.actions,
+        return_locations: option?.return_locations,
+        account_number: option?.account_number,
+      };
+    });
 
   //client change
   const handleClientChange = (value: any, option: any) => {
@@ -108,22 +133,22 @@ function SelectionFilter() {
     if (filteredClient) {
       const mappedActions = Array.isArray(filteredClient?.actions)
         ? filteredClient?.actions?.map((action: any) => ({
-            label: action,
-            value: action,
-          }))
+          label: action,
+          value: action,
+        }))
         : [];
 
       setActionTypeOptions(mappedActions);
 
       const mappedLocations = Array.isArray(filteredClient?.return_locations)
         ? filteredClient.return_locations
-            .filter(
-              (location: any) => location?.location_name && location?.token
-            )
-            .map((location: any) => ({
-              label: location.location_name,
-              value: location.token,
-            }))
+          .filter(
+            (location: any) => location?.location_name && location?.token
+          )
+          .map((location: any) => ({
+            label: location.location_name,
+            value: location.token,
+          }))
         : [];
 
       setLocationOptions(mappedLocations);
@@ -156,24 +181,24 @@ function SelectionFilter() {
       if (filteredClient) {
         const mappedActions = Array.isArray(filteredClient?.actions)
           ? filteredClient?.actions?.map((action: any) => ({
-              label: action,
-              value: action,
-            }))
+            label: action,
+            value: action,
+          }))
           : [];
 
         setActionTypeOptions(mappedActions);
 
         const mappedLocations = Array.isArray(filteredClient?.return_locations)
           ? filteredClient.return_locations
-              .filter((location: any) => {
-                const name = location?.location_name;
-                const token = location?.token;
-                return name && name !== 'null' && token && token !== 'null';
-              })
-              .map((location: any) => ({
-                label: location?.location_name,
-                value: location?.token,
-              }))
+            .filter((location: any) => {
+              const name = location?.location_name;
+              const token = location?.token;
+              return name && name !== 'null' && token && token !== 'null';
+            })
+            .map((location: any) => ({
+              label: location?.location_name,
+              value: location?.token,
+            }))
           : [];
 
         setLocationOptions(mappedLocations);
@@ -219,18 +244,18 @@ function SelectionFilter() {
     setActionTypeOptions(
       Array.isArray(clientActions)
         ? clientActions?.map(action => ({
-            label: action,
-            value: action,
-          }))
+          label: action,
+          value: action,
+        }))
         : []
     );
 
     setLocationOptions(
       Array.isArray(clientLocations)
         ? clientLocations?.map(location => ({
-            label: location?.location_name,
-            value: location?.token,
-          }))
+          label: location?.location_name,
+          value: location?.token,
+        }))
         : []
     );
 
@@ -238,7 +263,7 @@ function SelectionFilter() {
     if (urlCustomerId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: urlCustomerId,
+        payload: getFilterPayload(),
       });
       dispatch({
         type: 'SET_PAGE',
@@ -282,7 +307,7 @@ function SelectionFilter() {
     }
   }, [selectedClient, selectedFilterValue, selectedLocationValue]);
 
-  useEffect(() => {}, [location.pathname]);
+  useEffect(() => { }, [location.pathname]);
 
   useEffect(() => {
     if (!selectedFilterValue || selectedFilterValue === null) {
@@ -314,7 +339,7 @@ function SelectionFilter() {
     if (urlCustomerId && urlActiontype) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: urlCustomerId,
+        payload: getFilterPayload(),
       });
       setSelectedClient(+urlCustomerId);
 
@@ -331,7 +356,7 @@ function SelectionFilter() {
     } else if (urlCustomerId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: urlCustomerId,
+        payload: getFilterPayload(),
       });
       setSelectedClient(+urlCustomerId);
       dispatch({
@@ -339,7 +364,7 @@ function SelectionFilter() {
         payload: 1,
       });
     }
-  }, [urlCustomerId]);
+  }, [urlCustomerId, customers]);
 
   const handleClearAction = () => {
     dispatch({ type: 'CLEAR_ACTION' });
@@ -362,7 +387,7 @@ function SelectionFilter() {
                 placeholder="Select Client Name"
                 onChange={handleClientChange}
                 style={{ minWidth: '250px' }}
-                value={selectedClient}
+                value={clientOptions?.length > 0 ? selectedClient || undefined : undefined}
                 allowClear
                 onClear={handleClear}
                 filterOption={(input: any, option: any) =>
@@ -380,7 +405,7 @@ function SelectionFilter() {
                   <StyledAntSelect
                     options={actionTypeOptions}
                     placeholder="Select Action Type"
-                    value={selectedFilterValue}
+                    value={actionTypeOptions?.length > 0 ? selectedFilterValue || undefined : undefined}
                     onChange={handleActionClick}
                     style={{ minWidth: '200px' }}
                     allowClear
@@ -392,7 +417,7 @@ function SelectionFilter() {
                   <Label>Location </Label>
                   <StyledAntSelect
                     options={locationOptions}
-                    value={selectedLocationValue}
+                    value={locationOptions?.length > 0 ? selectedLocationValue || undefined : undefined}
                     placeholder="Select Location"
                     onChange={handleLocationChange}
                     style={{ minWidth: '200px' }}

package/src/components/order-daily-overview/header-filters/filterStore.ts

@@ -64,7 +64,7 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
           ...state['x-filters'].filter(f => f.field !== 'customer_id'),
           {
             field: 'customer_id',
-            op: '=',
+            op: Array?.isArray(action?.payload) ? 'in' : '=',
             value: action.payload,
           },
         ],

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

@@ -57,7 +57,7 @@ function ReturnMainTable() {
   const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
   >({
-    endpoint: `/v1/return/product/customers/`,
+    endpoint: `/v1/return/product/customers/?grouped=true`,
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },