@bjsdistribution/dms-client-return 0.0.19 → 0.0.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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.6",
+    "@bjsdistribution/dms-component-library": "0.1.4",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

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

@@ -1,72 +1,72 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { CoverPage } from './Styledfilters';
 import SelectionFilter from './SelectionFilter';
-import { ApiResponse } from '../../types';
-import { useApiHook } from '@bjsdistribution/dms-component-library';
-import {
-  useActionType,
-  useCustomerData,
-  useLocationData,
-  useStatusOrderData,
-} from '../../store';
+// import { ApiResponse } from '../../types';
+// import { useApiHook } from '@bjsdistribution/dms-component-library';
+// import {
+//   useActionType,
+//   useCustomerData,
+//   useLocationData,
+//   useStatusOrderData,
+// } from '../../store';
 
 function HeaderFilter() {
-  const [, setCustomers] = useCustomerData();
-  const [, setActionType] = useActionType();
-  const [, setLocationData] = useLocationData();
-  const [, setStatusOfOrders] = useStatusOrderData();
+  // const [, setCustomers] = useCustomerData();
+  // const [, setActionType] = useActionType();
+  // const [, setLocationData] = useLocationData();
+  // const [, setStatusOfOrders] = useStatusOrderData();
 
   //API for client data
-  const { data: fetchedCustomerData, loading: loading } = useApiHook<
-    ApiResponse
-  >({
-    endpoint: `/customers/`,
-    method: 'GET',
-    pagination: { page: 1, per_page: 50 },
-  });
+  // const { data: fetchedCustomerData, loading: loading } = useApiHook<
+  //   ApiResponse
+  // >({
+  //   endpoint: `/customers/`,
+  //   method: 'GET',
+  //   // pagination: { page: 1, per_page: 50 },
+  // });
 
-  //API for action type
-  const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
-    ApiResponse
-  >({
-    endpoint: `/orders/getStaticData/all/`,
-    method: 'GET',
-    pagination: { page: 1, per_page: 50 },
-  });
+  // //API for action type
+  // const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
+  //   ApiResponse
+  // >({
+  //   endpoint: `/orders/getStaticData/all/`,
+  //   method: 'GET',
+  //   // pagination: { page: 1, per_page: 50 },
+  // });
 
-  //API for return locations
-  const { data: fetchedLocationData, loading: locationloading } = useApiHook<
-    ApiResponse
-  >({
-    endpoint: `/return_locations/`,
-    method: 'GET',
-    pagination: { page: 1, per_page: 50 },
-  });
+  // //API for return locations
+  // const { data: fetchedLocationData, loading: locationloading } = useApiHook<
+  //   ApiResponse
+  // >({
+  //   endpoint: `/return_locations/`,
+  //   method: 'GET',
+  //   pagination: { page: 1, per_page: 50 },
+  // });
 
-  useEffect(() => {
-    if (fetchedCustomerData && fetchedCustomerData?.data) {
-      setCustomers(fetchedCustomerData?.data);
-    }
-  }, [loading, fetchedCustomerData]);
+  // useEffect(() => {
+  //   if (fetchedCustomerData && fetchedCustomerData?.data) {
+  //     setCustomers(fetchedCustomerData?.data);
+  //   }
+  // }, [loading]);
 
-  useEffect(() => {
-    if (fetchedStaticData && fetchedStaticData?.data) {
-      setActionType(
-        fetchedStaticData?.data?.flatMap(
-          (i: any) => i?.order_product_return_action
-        )
-      );
-      setStatusOfOrders(
-        fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
-      );
-    }
-  }, [actionLoading, fetchedStaticData]);
+  // useEffect(() => {
+  //   if (fetchedStaticData && fetchedStaticData?.data) {
+  //     setActionType(
+  //       fetchedStaticData?.data?.flatMap(
+  //         (i: any) => i?.order_product_return_action
+  //       )
+  //     );
+  //     setStatusOfOrders(
+  //       fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
+  //     );
+  //   }
+  // }, [actionLoading]);
 
-  useEffect(() => {
-    if (fetchedLocationData && fetchedLocationData?.data) {
-      setLocationData(fetchedLocationData?.data);
-    }
-  }, [locationloading, fetchedLocationData]);
+  // useEffect(() => {
+  //   if (fetchedLocationData && fetchedLocationData?.data) {
+  //     setLocationData(fetchedLocationData?.data);
+  //   }
+  // }, [locationloading]);
 
   return (
     <CoverPage>

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

@@ -17,6 +17,7 @@ import {
   useNewReturnPayload,
   useReturnPayload,
   useSelectAll,
+  useSelectedConfirmLoc,
   useSelectedOrders,
 } from '../../store';
 import { filtersReducerAtom } from './filterStore';
@@ -55,6 +56,7 @@ function SelectionFilter() {
   const [, setGrouped] = useGroupedPayload();
   const [, setSelectedReturnOrder] = useSelectedOrders();
   const [, setSelectAll] = useSelectAll();
+  const [, setCheck] = useSelectedConfirmLoc();
 
   //client options
   const clientOptions = customers?.map((option: any) => ({
@@ -116,6 +118,7 @@ function SelectionFilter() {
     setNewPayload([]);
     setGrouped([]);
     setSelectAll(false);
+    setCheck([]);
   };
 
   useEffect(() => {
@@ -152,57 +155,70 @@ function SelectionFilter() {
   }, [storedUuid, locationData]);
 
   //location change
-  const handleLocationChange = (value: any, option: DefaultOptionType) => {
-    const selectedLabel = option?.label as string;
+  const handleLocationChange = (value: any) => {
     setSelectedLocationValue(value);
-
-    if (selectedLocationValue === selectedLabel) {
-      dispatch({
-        type: 'CLEAR_ALL_FILTERS',
-        payload: null,
-      });
-    }
   };
 
   //action type
   const handleActionClick = (value: any) => {
     setSelectedFilterValue(value);
-    if (selectedFilterValue === value) {
-      dispatch({
-        type: 'CLEAR_ALL_FILTERS',
-        payload: null,
-      });
-    }
   };
+  const storedName = localStorage.getItem('clientName');
+  const storedClientId = localStorage.getItem('clientId');
 
   //Apply filters
   const applyFilters = () => {
     if (storedName) {
       setClientLabel(storedName);
     }
+    //client value
     if (storedClientId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
         payload: storedClientId,
       });
+      // Reset to the first page
+      dispatch({
+        type: 'SET_PAGE',
+        payload: 1,
+      });
+    } else {
+      dispatch({
+        type: 'SET_CLIENT_FILTER',
+        payload: [],
+      });
     }
+    //action value
     if (selectedFilterValue) {
       dispatch({
         type: 'SET_ACTIONS_FILTER',
         payload: selectedFilterValue,
       });
+      // Reset to the first page
+      dispatch({
+        type: 'SET_PAGE',
+        payload: 1,
+      });
     }
-
-    if (selectedLocationValue) {
+    //location value
+    if (selectedLocationValue && selectedLocationValue.length > 0) {
       dispatch({
         type: 'SET_LOCATION_FILTER',
         payload: selectedLocationValue,
       });
+      // Reset to the first page
+      dispatch({
+        type: 'SET_PAGE',
+        payload: 1,
+      });
     }
   };
 
-  const storedName = localStorage.getItem('clientName');
-  const storedClientId = localStorage.getItem('clientId');
+  useEffect(() => {
+    return () => {
+      dispatch({ type: 'CLEAR_CLIENT' });
+    };
+  }, []);
 
   useEffect(() => {
     if (storedClientId) {
@@ -221,6 +237,21 @@ function SelectionFilter() {
     }
   }, [storedName, selectedFilterValue, selectedLocationValue]);
 
+  useEffect(() => {}, [location.pathname]);
+
+  useEffect(() => {
+    if (!selectedFilterValue || selectedFilterValue === null) {
+      dispatch({ type: 'CLEAR_ACTION' });
+    }
+    if (
+      !selectedLocationValue ||
+      (Array.isArray(selectedLocationValue) &&
+        selectedLocationValue.length === 0)
+    ) {
+      dispatch({ type: 'CLEAR_LOC' });
+    }
+  }, [selectedFilterValue, selectedLocationValue]);
+
   return (
     <Wrapper>
       <FilterRow>
@@ -236,34 +267,38 @@ function SelectionFilter() {
             />
           </FilterColumn>
 
-          <FilterColumn>
-            <Label>Action Type</Label>
-            <StyledAntSelect
-              options={actionTypeOptions}
-              placeholder="Select Action Type"
-              value={selectedFilterValue}
-              onChange={handleActionClick}
-              style={{ minWidth: '14vw' }}
-              allowClear
-            />
-          </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={
-                filteredLocationOptions?.length > 0
-                  ? filteredLocationOptions
-                  : LocationOptions
-              }
-              value={selectedLocationValue}
-              placeholder="Select Location"
-              onChange={handleLocationChange}
-              style={{ minWidth: '14vw' }}
-              allowClear
-              mode="multiple"
-            />
-          </FilterColumn>
+              <FilterColumn>
+                <Label>Location </Label>
+                <StyledAntSelect
+                  options={
+                    filteredLocationOptions?.length > 0
+                      ? filteredLocationOptions
+                      : LocationOptions
+                  }
+                  value={selectedLocationValue}
+                  placeholder="Select Location"
+                  onChange={handleLocationChange}
+                  style={{ minWidth: '14vw' }}
+                  allowClear
+                  mode="multiple"
+                />
+              </FilterColumn>
+            </>
+          ) : null}
         </LeftColumn>
         <RightColumn>
           <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>
@@ -280,6 +315,10 @@ const StyledAntSelect = styled(Select)`
     /* width: 22vw; */
     border-radius: 22px;
   }
+  .ant-select-clear {
+    top: 40% !important;
+    font-size: 18px !important;
+  }
 `;
 
 export default SelectionFilter;

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

@@ -129,6 +129,7 @@ export const FilterColumn = styled.div`
 export const RightColumn = styled.div`
   flex-direction: row;
   display: flex;
+  gap: 15px;
 `;
 
 export const LeftColumn = styled.div`

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

@@ -25,7 +25,7 @@ interface FilterState {
 // let todayDate = new Date();
 const initialState: FilterState = {
   'x-filters': [],
-  'x-pagination': { page: 1, per_page: 5 },
+  'x-pagination': { page: 1, per_page: 50 },
 };
 
 const filterReducer = (state: FilterState, action: any): FilterState => {
@@ -98,6 +98,22 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ],
       };
 
+    case 'CLEAR_CLIENT':
+      return {
+        ...state,
+        'x-filters': state['x-filters'].filter(
+          f => f.field !== 'order.customer_id'
+        ),
+      };
+
+    case 'CLEAR_ACTION':
+      return {
+        ...state,
+        'x-filters': state['x-filters'].filter(
+          f => f.field !== 'product_return_action_id'
+        ),
+      };
+
     case 'CLEAR_LOC':
       return {
         ...state,

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

@@ -3,29 +3,28 @@ import {
   //useItemsPerPage,
   useLoading,
   //UsePaginationData,
-  useTableName,
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
 import { useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
-import { useAtom, useClientData } from '../order-view/store';
+import { useClientData } from '../order-view/store';
 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 Pagination from './table-view/Pagination';
-import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
+// import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
 
 function ReturnMainTable() {
-  const [state] = useAtom(overviewfiltersReducerAtom);
+  // const [state] = useAtom(overviewfiltersReducerAtom);
   // const [paginationObj] = UsePaginationData();
   // const [, setCurrentPage] = useState(1);
   // const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
-  const { 'x-pagination': pagination } = state;
+  // const { 'x-pagination': pagination } = state;
   // const { page, total } = paginationObj;
-  const [selectedClient] = useTableName();
+  // const [selectedClient] = useTableName();
   // const [, setPaginationObject] = UsePaginationData();
   const [isScrolled] = useStickyStatus();
   const [, setLoading] = useLoading();
@@ -47,7 +46,7 @@ function ReturnMainTable() {
   }>({
     endpoint: `/return_orders/get/client-returns/`,
     method: 'GET',
-    pagination: pagination,
+    pagination: { page: 1, per_page: 200 },
   });
 
   useEffect(() => {
@@ -67,6 +66,8 @@ function ReturnMainTable() {
     }
   }, [staticDataLoading]);
 
+  const getClient = localStorage.getItem('clientName');
+
   return (
     <>
       <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
@@ -76,7 +77,7 @@ function ReturnMainTable() {
           <Container>
             <Row>
               <Text>Client Return</Text>
-              {selectedClient ? <ReturnFilter /> : <Filters />}
+              {getClient ? <ReturnFilter /> : <Filters />}
             </Row>
             <ReturnTable />
           </Container>

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 // import RouterHeader from '../header/route-header/RouterHeader';
-import HeaderFilter from '../header-filters/HeaderFilter';
+// import HeaderFilter from '../header-filters/HeaderFilter';
 import OrderTable from './table/OrderTable';
 import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
 import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
@@ -22,12 +22,16 @@ const ReturnAfterTable = () => {
   const [, setLoading] = useLoading();
   const [state] = useAtom(filtersReducerReturnAtom);
   const { 'x-filters': filters, 'x-pagination': pagination } = state;
-
+  const splitPath = (str: any) => {
+    const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
+    return parts;
+  };
+  const paths = splitPath(location.pathname);
   const [paginationObj] = UsePaginationReturnData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
   const [, setPaginationObject] = UsePaginationData();
-
+  console.log(paths, 'paths');
   const { page, total } = paginationObj;
 
   const handlePageChange = (page: number) => {
@@ -68,7 +72,7 @@ const ReturnAfterTable = () => {
       <DashBoardWrapper>
         {/* <RouterHeader /> */}
         <div className="Tableconatiner">
-          <HeaderFilter />
+          {/* <HeaderFilter /> */}
           <Container>
             <ReturnOrderFilter />
             <OrderTable />
@@ -89,7 +93,7 @@ const ReturnAfterTable = () => {
 };
 const Container = styled.div`
   position: relative;
-  top: -30px;
+  /* top: -30px; */
 `;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {

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

@@ -1,4 +1,4 @@
-import { AntSelect, Checkbox } from '@bjsdistribution/dms-component-library';
+import { AntSelect } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import React, { useEffect, useRef } from 'react';
 import { Skeleton } from 'antd';
@@ -113,9 +113,9 @@ const OrderTable = ({ loadingskeleton }: any) => {
         <StyledTable>
           <thead>
             <tr>
-              <th className="emailInvoiceCheckbox">
+              {/* <th className="emailInvoiceCheckbox">
                 <Checkbox checked={false} />
-              </th>
+              </th> */}
               <th className="emailInvoiceNo">Created</th>
               <th>Return Location</th>
               <th>Pick Up Location</th>
@@ -161,12 +161,12 @@ const OrderTable = ({ loadingskeleton }: any) => {
                 const statusClass = getStatusClass(status);
                 return (
                   <tr key={item.id}>
-                    <td>
+                    {/* <td>
                       <Checkbox
                         checked={false}
                         // onChange={() => handleSelectInvoice(item.id)}
                       />
-                    </td>
+                    </td> */}
                     <td>{formatDate(new Date(item?.created_at))}</td>
                     <td>
                       {displayValueOrNA(item?.return_locations?.location_name)}

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

@@ -29,6 +29,7 @@ const initialState: FilterState = {
 };
 
 const filterReducer = (state: FilterState, action: any): FilterState => {
+  console.log(action,'action')
   switch (action.type) {
     case 'SET_DATE_FILTER':
       return {