ordering-ui-admin-external 1.43.64 → 1.43.66

package/src/components/Orders/CurrencyFilter/index.js

@@ -12,6 +12,29 @@ export const CurrencyFilter = (props) => {
 
   const [, t] = useLanguage()
   const [searchValue, setSearchValue] = useState('')
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 5,
+    totalItems: null,
+    totalPages: null
+  })
+
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(currencyList?.length / pageSize)
+    })
+  }
 
   const placeholder = (
     <PlaceholderTitle>
@@ -40,6 +63,16 @@ export const CurrencyFilter = (props) => {
     setCountryTypes(_countryList)
   }, [currencyList, searchValue])
 
+  useEffect(() => {
+    if (currencyList?.length) {
+      setPagination({
+        ...pagination,
+        totalItems: currencyList?.length,
+        totalPages: Math.ceil(currencyList?.length / 10)
+      })
+    }
+  }, [currencyList])
+
   return (
     <MultiSelect
       placeholder={placeholder}
@@ -52,6 +85,10 @@ export const CurrencyFilter = (props) => {
       searchBarIsNotLazyLoad
       searchValue={searchValue}
       handleChangeSearch={(val) => setSearchValue(val)}
+      isHidePagecontrol
+      pagination={pagination}
+      handleChangePage={handleChangePage}
+      handleChangePageSize={handleChangePageSize}
     />
   )
 }

package/src/components/Orders/DeliveriesManager/index.js

@@ -33,7 +33,8 @@ const DeliveriesManagerUI = (props) => {
     timeStatus,
     setTimeStatus,
     isUseQuery,
-    adminsList
+    adminsList,
+    assignableDriverGroupList
   } = props
 
   const [, t] = useLanguage()
@@ -95,6 +96,7 @@ const DeliveriesManagerUI = (props) => {
           setTimeStatus={setTimeStatus}
           setSlaSettingTime={setSlaSettingTime}
           adminsList={adminsList}
+          assignableDriverGroupList={assignableDriverGroupList}
         />
         <OrdersContent>
           <WrapItemView>
@@ -147,7 +149,7 @@ export const DeliveriesManager = (props) => {
     ...props,
     isOnlyDelivery: true,
     UIComponent: DeliveriesManagerUI,
-    driversPropsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification']
+    driversPropsToFetch: ['id', 'name', 'lastname', 'location', 'enabled', 'available', 'busy', 'driver_groups.name', 'driver_groups.id', 'assigned_orders_count', 'last_order_assigned_at', 'last_location_at', 'cellphone', 'photo', 'qualification']
   }
   return <OrdersManageController {...OrdersListControlProps} />
 }

package/src/components/Orders/DriverMapMarkerAndInfo/index.js

@@ -9,7 +9,13 @@ import {
   TextContainer,
   Text
 } from './styles'
-export const DriverMapMarkerAndInfo = (props) => {
+
+const DriverMapMarkerPropsAreEqual = (prevProps, nextProps) => {
+  return JSON.stringify(prevProps.driver) === JSON.stringify(nextProps.driver) &&
+  prevProps.timeStatus === nextProps.timeStatus
+}
+
+export const DriverMapMarkerAndInfo = React.memo((props) => {
   const {
     driver,
     timeStatus
@@ -84,4 +90,4 @@ export const DriverMapMarkerAndInfo = (props) => {
       </WrapperMapMarker>
     </>
   )
-}
+}, DriverMapMarkerPropsAreEqual)

package/src/components/Orders/DriverMultiSelector/index.js

@@ -145,6 +145,7 @@ export const DriverMultiSelector = (props) => {
   const DriversControlProps = {
     ...props,
     UIComponent: DriverMultiSelectorUI,
+    disableDriverLocationsSockets: true,
     paginationSettings: {
       initialPage: 1,
       pageSize: 10,

package/src/components/Orders/DriversGroupTypeSelector/index.js

@@ -15,6 +15,12 @@ export const DriversGroupTypeSelector = (props) => {
   const [{ dictionary }] = useLanguage()
 
   const [searchValue, setSearchValue] = useState('')
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 5,
+    totalItems: null,
+    totalPages: null
+  })
 
   const placeholder = (
     <PlaceholderTitle>
@@ -24,6 +30,23 @@ export const DriversGroupTypeSelector = (props) => {
   const [groupTypes, setGroupTypes] = useState([])
   const groupTypesLoading = [{ value: 'default', content: <Option>{dictionary?.GROUP_LOADING ?? 'Group loading'}...</Option> }]
 
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(groupTypes?.length / pageSize)
+    })
+  }
+
   useEffect(() => {
     const _groupList = []
     if (!driverGroupList.loading) {
@@ -45,6 +68,16 @@ export const DriversGroupTypeSelector = (props) => {
     setGroupTypes(_groupList)
   }, [driverGroupList, searchValue])
 
+  useEffect(() => {
+    if (groupTypes?.length) {
+      setPagination({
+        ...pagination,
+        totalItems: groupTypes?.length,
+        totalPages: Math.ceil(groupTypes?.length / 10)
+      })
+    }
+  }, [groupTypes])
+
   return (
     <>
       {!driverGroupList.loading ? (
@@ -58,6 +91,10 @@ export const DriversGroupTypeSelector = (props) => {
           searchBarIsNotLazyLoad
           searchValue={searchValue}
           handleChangeSearch={(val) => setSearchValue(val)}
+          isHidePagecontrol
+          pagination={pagination}
+          handleChangePage={handleChangePage}
+          handleChangePageSize={handleChangePageSize}
         />
       ) : (
         <MultiSelect

package/src/components/Orders/DriversList/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { getStarWidth } from '../../../utils'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -7,8 +7,10 @@ import {
   DriverCard,
   WrapperImage,
   DriverInfo,
+  PaginationWrapper
 } from './styles'
 import { Driver } from './Driver'
+import { Pagination } from '../../Shared'
 
 export const DriversList = (props) => {
   const {
@@ -24,7 +26,13 @@ export const DriversList = (props) => {
   } = props
 
   const { width } = useWindowSize()
-
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 10,
+    totalItems: null,
+    totalPages: null
+  })
+  const drivers = driversIsOnline ? onlineDrivers : offlineDrivers
   const handleClickDriver = (e, driver) => {
     const isInvalid = e.target.closest('.driver-orders')
     if (isInvalid) return
@@ -40,6 +48,40 @@ export const DriversList = (props) => {
     handleOpenDriverOrders(driver)
   }
 
+  const filterFunction = (_, index) => {
+    const validation = pagination?.currentPage === 1
+      ? index < (pagination.pageSize * pagination.currentPage)
+      : (index >= (pagination.pageSize * (pagination.currentPage - 1))) && (index < (pagination.pageSize * pagination.currentPage))
+    return validation
+  }
+
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(drivers?.length / pageSize)
+    })
+  }
+
+  useEffect(() => {
+    if (drivers?.length) {
+      setPagination({
+        ...pagination,
+        totalItems: drivers?.length,
+        totalPages: Math.ceil(drivers?.length / 10)
+      })
+    }
+  }, [drivers])
+
   return (
     <DriversListContainer showCompressedInfo={showCompressedInfo}>
       {loading ? (
@@ -64,7 +106,7 @@ export const DriversList = (props) => {
         </>
       ) : (
         <>
-          {(driversIsOnline ? onlineDrivers : offlineDrivers).map(driver => (
+          {drivers.filter(filterFunction).map(driver => (
             <Driver
               key={driver?.id}
               driver={driver}
@@ -78,6 +120,17 @@ export const DriversList = (props) => {
           ))}
         </>
       )}
+      {drivers?.length > 0 && (
+        <PaginationWrapper>
+          <Pagination
+            currentPage={pagination?.currentPage}
+            totalPages={pagination?.totalPages}
+            handleChangePage={handleChangePage}
+            handleChangePageSize={handleChangePageSize}
+            defaultPageSize={pagination?.pageSize}
+          />
+        </PaginationWrapper>
+      )}
     </DriversListContainer>
   )
 }

package/src/components/Orders/DriversList/styles.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 
 export const DriversListContainer = styled.div`
   padding: 15px 0px;
+  position: relative;
   @media (min-width: 992px) {
     ${({ showCompressedInfo }) => showCompressedInfo && css`
       padding: 0px 0px;
@@ -25,7 +26,7 @@ export const DriverCard = styled.div`
   &:hover {
     background-color: ${props => props.theme.colors.lightPrimary};
   }
-  
+
   ${({ active }) => active && css`
     background-color: ${props => props.theme.colors.lightPrimary};
     border: 1px solid ${props => props.theme.colors.primary};
@@ -172,3 +173,13 @@ export const Timestatus = styled.div`
     background-color: #E63757;
   `}
 `
+
+export const PaginationWrapper = styled.div`
+  position: sticky;
+  bottom: 0px;
+  background: #fff;
+  justify-content: center;
+  > div {
+    padding: 10px 5px 0px 5px;
+  }
+`

package/src/components/Orders/InterActOrderMarker/index.js

@@ -10,7 +10,15 @@ import {
   MapMarkerImg
 } from './styles'
 
-export const InterActOrderMarker = (props) => {
+const InterActOrderMarkerPropsAreEqual = (prevProps, nextProps) => {
+  return prevProps.image === nextProps.image &&
+    JSON.stringify(prevProps.customer) === JSON.stringify(nextProps.customer) &&
+    JSON.stringify(prevProps.business) === JSON.stringify(nextProps.business) &&
+    prevProps.timeStatus === nextProps.timeStatus &&
+    JSON.stringify(prevProps.driver) === JSON.stringify(nextProps.driver)
+}
+
+export const InterActOrderMarker = React.memo((props) => {
   const {
     image,
     customer,
@@ -165,4 +173,4 @@ export const InterActOrderMarker = (props) => {
       </WrapperMapMarker>
     </>
   )
-}
+}, InterActOrderMarkerPropsAreEqual)

package/src/components/Orders/OrdersContentHeader/index.js

@@ -31,6 +31,7 @@ export const OrdersContentHeader = (props) => {
     handleChangeSearch,
     searchValue,
     driverGroupList,
+    assignableDriverGroupList,
     driversList,
     citiesList,
     paymethodsList,
@@ -98,6 +99,7 @@ export const OrdersContentHeader = (props) => {
             <OrdersHeaderFilterGroup
               isSelectedOrders={isSelectedOrders}
               driverGroupList={driverGroupList}
+              assignableDriverGroupList={assignableDriverGroupList}
               driversList={driversList}
               searchValue={searchValue}
               handleChangeFilterValues={handleChangeFilterValues}

package/src/components/Orders/OrdersDashboardList/index.js

@@ -35,7 +35,8 @@ export const OrdersDashboardList = (props) => {
     isSearchByCustomerPhone: isShowSearchFilters,
     isSearchByDriverName: isShowSearchFilters,
     isSearchByBusinessName: true,
-    driverId: props.driverId
+    driverId: props.driverId,
+    getDriversByControls: true
   }
 
   return (

package/src/components/Orders/OrdersFilterGroup/index.js

@@ -234,8 +234,8 @@ const OrdersFilterGroupUI = (props) => {
           <WrapperRow>
             <DriversGroupTypeSelector
               driverGroupList={driverGroupList}
-              handleChangeGroup={handleChangeGroup}
-              filterValues={filterValues.groupTypes}
+              handleChangeGroup={handleChangeGroupUnassigned}
+              filterValues={filterValues.groupTypesUnassigned}
               title={t('DRIVER_GROUP_ASSIGNED', 'Driver group (assigned)')}
             />
             <BusinessesSelector
@@ -243,12 +243,6 @@ const OrdersFilterGroupUI = (props) => {
               businessesList={businessesList}
               handleChangeBusinesses={handleChangeBusinesses}
             />
-            {/* <DriversGroupTypeSelector
-              driverGroupList={driverGroupList}
-              handleChangeGroup={handleChangeGroupUnassigned}
-              filterValues={filterValues.groupTypesUnassigned}
-              title={t('DRIVER_GROUP_NOT_ASSIGNED', 'Driver group (general)')}
-            /> */}
           </WrapperRow>
           {/* <WrapperRow>
             <BusinessesSelector

package/src/components/Orders/OrdersHeaderFilterGroup/index.js

@@ -12,15 +12,13 @@ import { SearchBar } from '../../Shared'
 const OrdersHeaderFilterGroupUI = (props) => {
   const {
     filterValues,
-    searchValue,
-    driverGroupList,
     driversList,
     handleChangeDriver,
     handleChangeFilterValues,
     handleChangeExternalId,
-    handleChangeGroupUnassigned,
-    handleChangeSearch,
-    isSelectedOrders
+    handleChangeGroup,
+    isSelectedOrders,
+    assignableDriverGroupList
   } = props
 
   const [{ dictionary }] = useLanguage()
@@ -76,21 +74,12 @@ const OrdersHeaderFilterGroupUI = (props) => {
             handleChangeDriver={handleChangeDriver}
           />
         )}
-        {!loading && configFilter.includes('driver_group_general') && (
-          // <DriversGroupTypeSelector
-          //   driverGroupList={driverGroupList}
-          //   handleChangeGroup={handleChangeGroupUnassigned}
-          //   filterValues={filterValues.groupTypesUnassigned}
-          //   title={dictionary?.DRIVER_GROUP_NOT_ASSIGNED ?? 'Driver group (general)'}
-          // />
-          <SearchBar
-            customClass='external_id'
-            isCustomLayout
-            hideSearchIcon
-            lazyLoad
-            onSearch={handleChangeSearch}
-            search={searchValue || ''}
-            placeholder={dictionary?.SEARCH_BY_STORE_NAME || 'Store name'}
+        {!loading && configFilter.includes('driver_group') && (
+          <DriversGroupTypeSelector
+            driverGroupList={assignableDriverGroupList}
+            handleChangeGroup={handleChangeGroup}
+            filterValues={filterValues.driverGroupBusinessIds}
+            title={dictionary?.DRIVER_GROUP_ASSIGNABLE ?? 'Driver group (assignable)'}
           />
         )}
       </WrapperRow>

package/src/components/Orders/OrdersHeaderFilterGroup/styles.js

@@ -9,7 +9,7 @@ export const WrapperRow = styled.div`
   & > div {
     width: 100%;
     height: 47px;
-    max-width: 1000px;
+    max-width: 300px;
     margin-right: 10px;
     background-color: ${props => props.theme.colors.secundary};
     border: none;

package/src/components/Orders/OrdersManager/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useConfig, useLanguage, useSession, OrdersManage as OrdersManageController } from 'ordering-components-admin-external'
+import { OrdersManage as OrdersManageController, useConfig, useLanguage, useSession } from 'ordering-components-admin-external'
 import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
 import { OrdersContentHeader } from '../OrdersContentHeader'
 import { OrderDetails } from '../OrderDetails'
@@ -19,7 +19,6 @@ import { OrdersDashboard } from '../OrdersDashboard'
 import { OrderStatusSubFilter } from '../OrderStatusSubFilter'
 import { OrderNotification } from '../OrderNotification'
 import { WizardOrders } from '../WizardOrders'
-import { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 
 const OrdersManagerUI = (props) => {
   const {
@@ -27,6 +26,7 @@ const OrdersManagerUI = (props) => {
     isSelectedOrders,
     searchValue,
     driverGroupList,
+    assignableDriverGroupList,
     driversList,
     paymethodsList,
     businessesList,
@@ -52,7 +52,8 @@ const OrdersManagerUI = (props) => {
     setAllowColumns,
     timeStatus,
     setTimeStatus,
-    isUseQuery
+    isUseQuery,
+    disableDriverLocationsSockets
   } = props
 
   const [, t] = useLanguage()
@@ -179,6 +180,7 @@ const OrdersManagerUI = (props) => {
           isSelectedOrders={isSelectedOrders}
           title={t('ORDERS_LIST', 'Orders list')}
           searchValue={searchValue}
+          assignableDriverGroupList={assignableDriverGroupList}
           driverGroupList={driverGroupList}
           driversList={driversList}
           citiesList={citiesList}
@@ -196,6 +198,7 @@ const OrdersManagerUI = (props) => {
           setTimeStatus={setTimeStatus}
           setSlaSettingTime={setSlaSettingTime}
           isLateralBar={isLateralBar}
+          disableDriverLocationsSockets={disableDriverLocationsSockets}
         />
         <OrderStatusFilterBar
           isUseQuery={isUseQuery}

package/src/components/Orders/PaymethodTypeSelector/index.js

@@ -16,6 +16,29 @@ export const PaymethodTypeSelector = (props) => {
   const [searchValue, setSearchValue] = useState('')
   const placeholder = <PlaceholderTitle>{t('SELECT_PAYMETHOD', 'Select paymethod')}</PlaceholderTitle>
   const paymthodsLoading = [{ value: 'default', content: <Option>{t('PAYMETHODS_LOADING', 'Paymethods loading')}...</Option> }]
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 5,
+    totalItems: null,
+    totalPages: null
+  })
+
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(paymethodsTypes?.length / pageSize)
+    })
+  }
 
   useEffect(() => {
     const _paymthodsOptionList = []
@@ -39,6 +62,16 @@ export const PaymethodTypeSelector = (props) => {
     setPaymethodsTypes(_paymthodsOptionList)
   }, [paymethodsList, searchValue])
 
+  useEffect(() => {
+    if (paymethodsTypes?.length) {
+      setPagination({
+        ...pagination,
+        totalItems: paymethodsTypes?.length,
+        totalPages: Math.ceil(paymethodsTypes?.length / 10)
+      })
+    }
+  }, [paymethodsTypes])
+
   return (
     <>
       {!paymethodsList.loading ? (
@@ -53,6 +86,10 @@ export const PaymethodTypeSelector = (props) => {
           searchBarIsNotLazyLoad
           searchValue={searchValue}
           handleChangeSearch={(val) => setSearchValue(val)}
+          isHidePagecontrol
+          pagination={pagination}
+          handleChangePage={handleChangePage}
+          handleChangePageSize={handleChangePageSize}
         />
       ) : (
         <MultiSelect

package/src/components/Shared/CitySelector/index.js

@@ -25,6 +25,29 @@ const CitySelectorUI = (props) => {
   const [cityOptions, setCityOptions] = useState([])
   const [searchValue, setSearchValue] = useState('')
   const placeholder = <PlaceholderTitle isDefault={isDefault}>{t('SELECT_CITY', 'Select City')}</PlaceholderTitle>
+  const [pagination, setPagination] = useState({
+    currentPage: 1,
+    pageSize: 5,
+    totalItems: null,
+    totalPages: null
+  })
+
+  const handleChangePage = (page) => {
+    setPagination({
+      ...pagination,
+      currentPage: page
+    })
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(((pagination?.currentPage - 1) * pagination?.pageSize + 1) / pageSize)
+    setPagination({
+      ...pagination,
+      currentPage: expectedPage,
+      pageSize,
+      totalPages: Math.ceil(cityOptions?.length / pageSize)
+    })
+  }
 
   useEffect(() => {
     if (citiesList?.loading) return
@@ -47,6 +70,16 @@ const CitySelectorUI = (props) => {
     }
   }, [cityOptions, isAddMode])
 
+  useEffect(() => {
+    if (cityOptions?.length) {
+      setPagination({
+        ...pagination,
+        totalItems: cityOptions?.length,
+        totalPages: Math.ceil(cityOptions?.length / 10)
+      })
+    }
+  }, [cityOptions])
+
   return (
     <>
       {citiesList?.loading ? (
@@ -75,6 +108,10 @@ const CitySelectorUI = (props) => {
               searchBarIsNotLazyLoad
               searchValue={searchValue}
               handleChangeSearch={(val) => setSearchValue(val)}
+              isHidePagecontrol
+              pagination={pagination}
+              handleChangePage={handleChangePage}
+              handleChangePageSize={handleChangePageSize}
             />
           )}
         </>

package/src/contexts/FilterValuesContext/index.js

@@ -35,9 +35,9 @@ export const FilterValuesProvider = ({ children }) => {
     customerEmail: null,
     customerCellphone: null,
     customerLastname: null,
-    administratorIds: [],
     coupon: null,
-    offerId: null
+    offerId: null,
+    administratorIds: []
   })
 
   const handleFilterValues = (filterValues) => {

package/src/styles/MultiSelect/index.js

@@ -45,7 +45,8 @@ export const MultiSelect = (props) => {
     handleChangePageSize,
     useLazyPagination,
     isLoading,
-    optionsPosition
+    optionsPosition,
+    isHidePagecontrol
   } = props
 
   const [open, setOpen] = useState(false)
@@ -242,6 +243,7 @@ export const MultiSelect = (props) => {
                 handleChangePage={handlerChangePage}
                 handleChangePageSize={handleChangePageSize}
                 defaultPageSize={pagination?.pageSize}
+                isHidePagecontrol={isHidePagecontrol}
               />
             </PaginationWrapper>
           )}

package/template/pages/AllInOne/index.js

@@ -3,12 +3,16 @@ import { HelmetTags } from '../../components/HelmetTags'
 import { AllInOne as AllInOneController } from '../../../src/components/Orders'
 import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 import settings from '../../config.json'
+import { useFilterValues } from '../../../src/contexts/FilterValuesContext'
 
 export const AllInOne = (props) => {
+  const [filterValues] = useFilterValues()
+
   const ordersListProps = {
     ...props,
     isUseQuery: true,
     useBatchSockets: settings?.use_batch_sockets,
+    defaultFilterValues: filterValues,
     onOrderRedirect: (orderId) => {
       if (!orderId) {
         return removeQueryToUrl(['id', 'section', 'tab'])

package/template/pages/DeliveriesManager/index.js

@@ -3,14 +3,18 @@ import { HelmetTags } from '../../components/HelmetTags'
 import { DeliveriesManager as DeliveriesManagerController } from '../../../src/components/Orders'
 import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 import settings from '../../config.json'
+import { useFilterValues } from '../../../src/contexts/FilterValuesContext'
 
 export const DeliveriesManager = (props) => {
+  const [filterValues] = useFilterValues()
+
   const deliveriesManagerProps = {
     ...props,
     isUseQuery: true,
     franchiseId: settings?.franchiseId,
     useBatchSockets: settings?.use_batch_sockets,
     useFranchiseImages: settings?.use_franchise_images,
+    defaultFilterValues: filterValues,
     onOrderRedirect: (orderId) => {
       if (!orderId) {
         return removeQueryToUrl(['id'])