ordering-ui-admin-external 1.33.1 → 1.35.0

package/src/components/Users/CustomersListing/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import {
   UsersList as UsersListController,
   useLanguage
@@ -14,6 +14,7 @@ import { UsersDeleteButton } from '../UsersDeleteButton'
 import { UsersExportCSV } from '../UsersExportCSV'
 import { Button } from '../../../styles'
 import { X as CloseIcon } from 'react-bootstrap-icons'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   UsersListingContainer,
@@ -51,11 +52,11 @@ const CustomersListingUI = (props) => {
     orderFilterValue,
     handleChangeOrderFilterValue,
     handleChangeMultiFilterValues,
-    multiFilterValues
+    multiFilterValues,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -76,13 +77,11 @@ const CustomersListingUI = (props) => {
     setQueryId(null)
     setSideBarWidth(500)
     moveDistance && setMoveDistance(0)
-    const enabled = selectedUserActiveState ? 'active' : 'inactive'
-    history.replace(`${location.pathname}?enabled=${enabled}`)
+    removeQueryToUrl(['id', 'section', 'tab'])
   }
 
   const handleOpenUserDetails = (user) => {
-    const enabled = selectedUserActiveState ? 'active' : 'inactive'
-    history.replace(`${location.pathname}?enabled=${enabled}&id=${user?.id}`)
+    addQueryToUrl({ id: user?.id })
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
@@ -181,6 +180,7 @@ const CustomersListingUI = (props) => {
           handleOpenUserDetails={handleOpenUserDetails}
           handleOpenUserAddForm={handleOpenUserAddForm}
           setSelectedUsers={setSelectedUsers}
+          isUseQuery={isUseQuery}
         />
       </UsersListingContainer>
 
@@ -224,13 +224,20 @@ const CustomersListingUI = (props) => {
 export const CustomersListing = (props) => {
   const query = new URLSearchParams(useLocation().search)
   const defaultUserActiveState = query.get('enabled') !== 'inactive'
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const customersProps = {
     ...props,
     defaultUserActiveState,
     UIComponent: CustomersListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,
-    isSearchByUserName: true
+    isSearchByUserName: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return (
     <UsersListController {...customersProps} />

package/src/components/Users/ProfessionalDetail/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { ThreeDots, Calendar4Event, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -12,6 +12,7 @@ import { ProfessionalSchedule } from '../ProfessionalSchedule'
 import { ProfessionalBusinessService } from '../ProfessionalBusinessService'
 import { UserMetaFields } from '../UserMetaFields'
 import { Button, IconButton, Switch } from '../../../styles'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   DetailsHeader,
@@ -35,7 +36,6 @@ export const ProfessionalDetailUI = (props) => {
     actionStatus
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [adminUserState] = useSession()
@@ -92,14 +92,7 @@ export const ProfessionalDetailUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setCurrentMenuSelected(tab)
     if (!isInitialRender) {
-      const id = query.get('id')
-      const enabled = query.get('enabled')
-      const section = query.get('section')
-      if (section) {
-        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${section}&tab=${tab}`)
-      } else {
-        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&tab=${tab}`)
-      }
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Users/ProfessionalList/index.js

@@ -6,6 +6,7 @@ import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Envelope, Phone, CheckSquareFill, Square } from 'react-bootstrap-icons'
 import { Switch, LinkButton } from '../../../styles'
 import { ConfirmAdmin, Pagination, ColumnAllowSettingPopover } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   UsersConatiner,
@@ -36,7 +37,8 @@ export const ProfessionalList = (props) => {
     handleSelectedUsers,
     handleOpenUserDetails,
     handleOpenUserAddForm,
-    setSelectedUsers
+    setSelectedUsers,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -143,6 +145,14 @@ export const ProfessionalList = (props) => {
     setIsAllChecked(_isAllChecked)
   }, [usersList.users, selectedUsers])
 
+  useEffect(() => {
+    if (!isUseQuery || !paginationProps?.currentPage || !paginationProps?.pageSize || !paginationProps?.totalPages) return
+    addQueryToUrl({
+      page: paginationProps.currentPage,
+      pageSize: paginationProps.pageSize
+    })
+  }, [paginationProps?.currentPage, paginationProps?.pageSize, paginationProps?.totalPages])
+
   return (
     <>
       <UsersConatiner>

package/src/components/Users/ProfessionalListing/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, useConfig, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { ProfessionalList } from '../ProfessionalList'
 import { UsersListingHeader } from '../UsersListingHeader'
@@ -11,6 +11,7 @@ import { UsersDeleteButton } from '../UsersDeleteButton'
 import { UsersExportCSV } from '../UsersExportCSV'
 import { Button } from '../../../styles'
 import { OccupationsFilter } from '../OccupationsFilter'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   UsersListingContainer,
@@ -49,13 +50,13 @@ const ProfessionalListingUI = (props) => {
     handleSelectOccupation,
     setSelectedUsers,
     handleChangeMultiFilterValues,
-    multiFilterValues
+    multiFilterValues,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -69,13 +70,11 @@ const ProfessionalListingUI = (props) => {
     setIsOpenUserDetails(false)
     setOpenUser(null)
     setQueryId(null)
-    const enabled = selectedUserActiveState ? 'active' : 'inactive'
-    history.replace(`${location.pathname}?enabled=${enabled}`)
+    removeQueryToUrl(['id', 'tab'])
   }
 
   const handleOpenUserDetails = (user) => {
-    const enabled = selectedUserActiveState ? 'active' : 'inactive'
-    history.replace(`${location.pathname}?enabled=${enabled}&id=${user?.id}`)
+    addQueryToUrl({ id: user?.id })
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
@@ -169,6 +168,7 @@ const ProfessionalListingUI = (props) => {
               handleOpenUserDetails={handleOpenUserDetails}
               handleOpenUserAddForm={handleOpenUserAddForm}
               setSelectedUsers={setSelectedUsers}
+              isUseQuery={isUseQuery}
             />
           </>
         ) : (
@@ -220,6 +220,8 @@ const ProfessionalListingUI = (props) => {
 export const ProfessionalListing = (props) => {
   const query = new URLSearchParams(useLocation().search)
   const defaultUserActiveState = query.get('enabled') !== 'inactive'
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const usersListingProps = {
     ...props,
     defaultUserActiveState,
@@ -227,7 +229,12 @@ export const ProfessionalListing = (props) => {
     UIComponent: ProfessionalListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,
-    isSearchByUserName: true
+    isSearchByUserName: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return (
     <UsersListController {...usersListingProps} />

package/src/components/Users/UserActiveStateFilter/index.js

@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { DragScroll } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
+
 import {
   UserActiveStateFilterContainer,
   Tab
@@ -13,18 +15,17 @@ export const UserActiveStateFilter = (props) => {
     handleChangeUserActiveState
   } = props
 
-  const history = useHistory()
   const [, t] = useLanguage()
   const query = new URLSearchParams(useLocation().search)
   const defaultEnabled = query.get('enabled')
   const onChangeUserActiveState = (enabled) => {
-    history.replace(`${location.pathname}?enabled=${enabled}`)
+    addQueryToUrl({ enabled: enabled })
     handleChangeUserActiveState()
   }
 
   useEffect(() => {
     if (defaultEnabled) return
-    history.replace(`${location.pathname}?enabled=active`)
+    addQueryToUrl({ enabled: 'active' })
   }, [])
 
   return (

package/src/components/Users/UserDetails/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { UserDetails as UserDetailsController, useLanguage, useSession } from 'ordering-components-admin-external'
 import { UserDetailsMenu } from '../UserDetailsMenu'
@@ -14,6 +14,7 @@ import { Confirm, PushTokens } from '../../Shared'
 import { Personalization } from '../../Shared/Personalization'
 import { UserMetaFields } from '../UserMetaFields'
 import { IconButton, Switch } from '../../../styles'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   DetailsHeader,
@@ -37,7 +38,6 @@ export const UserDetailsUI = (props) => {
     handleChangeActiveUser
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [adminUserState] = useSession()
@@ -71,14 +71,7 @@ export const UserDetailsUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setCurrentMenuSelected(tab)
     if (!isInitialRender) {
-      const enabled = query.get('enabled')
-      const id = query.get('id')
-      const section = query.get('section')
-      if (section) {
-        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${section}&tab=${tab}`)
-      } else {
-        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&tab=${tab}`)
-      }
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Users/UsersList/index.js

@@ -6,6 +6,7 @@ import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Envelope, Phone, CheckSquareFill, Square } from 'react-bootstrap-icons'
 import { Switch, LinkButton } from '../../../styles'
 import { ConfirmAdmin, Pagination } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   UsersConatiner,
@@ -38,7 +39,8 @@ export const UsersList = (props) => {
     handleOpenUserDetails,
     handleOpenUserAddForm,
     setSelectedUsers,
-    isCustomer
+    isCustomer,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -118,6 +120,14 @@ export const UsersList = (props) => {
     }
   }, [usersList.users, paginationProps])
 
+  useEffect(() => {
+    if (!isUseQuery || !paginationProps?.currentPage || !paginationProps?.pageSize || !paginationProps?.totalPages) return
+    addQueryToUrl({
+      page: paginationProps.currentPage,
+      pageSize: paginationProps.pageSize
+    })
+  }, [paginationProps?.currentPage, paginationProps?.pageSize, paginationProps?.totalPages])
+
   return (
     <>
       <UsersConatiner>

package/src/components/Users/UsersListing/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
 import { UsersList } from '../UsersList'
 import { UsersListingHeader } from '../UsersListingHeader'
@@ -10,6 +10,7 @@ import { SideBar } from '../../Shared'
 import { UserAddForm } from '../UserAddForm'
 import { UsersDeleteButton } from '../UsersDeleteButton'
 import { UsersExportCSV } from '../UsersExportCSV'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 import { Button } from '../../../styles'
 
 import {
@@ -44,11 +45,11 @@ const UsersListingUI = (props) => {
     handleSuccessDeleteUser,
     setSelectedUsers,
     handleChangeMultiFilterValues,
-    multiFilterValues
+    multiFilterValues,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -59,13 +60,11 @@ const UsersListingUI = (props) => {
     setIsOpenUserDetails(false)
     setOpenUser(null)
     setQueryId(null)
-    const enabled = selectedUserActiveState ? 'active' : 'inactive'
-    history.replace(`${location.pathname}?enabled=${enabled}`)
+    removeQueryToUrl(['id', 'tab'])
   }
 
   const handleOpenUserDetails = (user) => {
-    const enabled = selectedUserActiveState ? 'active' : 'inactive'
-    history.replace(`${location.pathname}?enabled=${enabled}&id=${user?.id}`)
+    addQueryToUrl({ id: user?.id })
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
@@ -148,6 +147,7 @@ const UsersListingUI = (props) => {
           handleOpenUserDetails={handleOpenUserDetails}
           handleOpenUserAddForm={handleOpenUserAddForm}
           setSelectedUsers={setSelectedUsers}
+          isUseQuery={isUseQuery}
         />
       </UsersListingContainer>
 
@@ -183,13 +183,20 @@ const UsersListingUI = (props) => {
 export const UsersListing = (props) => {
   const query = new URLSearchParams(useLocation().search)
   const defaultUserActiveState = query.get('enabled') !== 'inactive'
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const usersListingProps = {
     ...props,
     defaultUserActiveState,
     UIComponent: UsersListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,
-    isSearchByUserName: true
+    isSearchByUserName: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return (
     <UsersListController {...usersListingProps} />

package/src/index.js

@@ -400,7 +400,7 @@ import {
 import { LogoutButton } from './components/LogoutButton'
 import { LanguageSelector } from './components/LanguageSelector'
 
-import { capitalize, verifyDecimals, setStorageItem, getStorageItem } from './utils'
+import { capitalize, verifyDecimals, setStorageItem, getStorageItem, addQueryToUrl, removeQueryToUrl } from './utils'
 
 // contexts
 import { ThemeContext, ThemeProvider, useTheme } from './contexts/ThemeContext'
@@ -821,6 +821,8 @@ export {
   verifyDecimals,
   setStorageItem,
   getStorageItem,
+  addQueryToUrl,
+  removeQueryToUrl,
 
   // contexts
   ThemeContext,

package/src/utils/index.js

@@ -556,3 +556,30 @@ export const stringToSlug = str => {
 export const getCurrenySymbol = (code) => {
   return CURRENCY?.[code]?.symbol ?? code
 }
+
+export const queryStringToObject = url => {
+  const params = new URLSearchParams(url.split('?')[1])
+  return Object.fromEntries(params)
+}
+
+export const addQueryToUrl = (newObj) => {
+  const queryObj = queryStringToObject(location.href)
+  for (const key in newObj) {
+    queryObj[key] = newObj[key]
+  }
+  const query = new URLSearchParams(queryObj)
+  history.replaceState(null, '', `${location.pathname}?${query}`)
+}
+
+export const removeQueryToUrl = (removeKeys) => {
+  const queryObj = queryStringToObject(location.href)
+  for (const key of removeKeys) {
+    delete queryObj[key]
+  }
+  if (Object.keys(queryObj).length) {
+    const query = new URLSearchParams(queryObj)
+    history.replaceState(null, '', `${location.pathname}?${query}`)
+  } else {
+    history.replaceState(null, '', `${location.pathname}`)
+  }
+}

package/template/pages/AllInOne/index.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent } from 'ordering-components-admin-external'
 import { AllInOne as AllInOneController } from '../../../src/components/Orders'
+import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 
 export const AllInOne = (props) => {
-  const [events] = useEvent()
   const ordersListProps = {
     ...props,
+    isUseQuery: true,
     onOrderRedirect: (orderId) => {
       if (!orderId) {
-        return events.emit('go_to_page', { page: 'all_in_one', replace: true })
+        return removeQueryToUrl(['id', 'section', 'tab'])
       }
-      return events.emit('go_to_page', { page: 'all_in_one', search: `?id=${orderId}` })
+      return addQueryToUrl({ id: orderId })
     }
   }
   return (

package/template/pages/BusinessesList/index.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent } from 'ordering-components-admin-external'
 import { BusinessesListing } from '../../../src/components/Stores'
+import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 
 export const BusinessesList = (props) => {
-  const [events] = useEvent()
   const businessesProps = {
     ...props,
+    isUseQuery: true,
     onBusinessRedirect: (businessId) => {
       if (!businessId) {
-        return events.emit('go_to_page', { page: 'businesses', replace: true })
+        return removeQueryToUrl(['id', 'section', 'tab', 'business_type', 'paymethod', 'payemthod_tab', 'setting_tab', 'menu', 'product', 'zone', 'zone_tab', 'wallet'])
       }
-      return events.emit('go_to_page', { page: 'businesses', search: `?id=${businessId}` })
+      return addQueryToUrl({ id: businessId })
     }
   }
   return (

package/template/pages/CampaignListing/index.js

@@ -3,10 +3,14 @@ import { HelmetTags } from '../../components/HelmetTags'
 import { CampaignListing as CampaignListingController } from '../../../src/components/Marketing'
 
 export const CampaignListing = (props) => {
+  const campaignListProps = {
+    ...props,
+    isUseQuery: true
+  }
   return (
     <>
       <HelmetTags page='campaign' />
-      <CampaignListingController {...props} />
+      <CampaignListingController {...campaignListProps} />
     </>
   )
 }

package/template/pages/CustomersList/index.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent, useLanguage } from 'ordering-components-admin-external'
+import { useLanguage } from 'ordering-components-admin-external'
 import { CustomersListing } from '../../../src/components/Users'
+import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 
 export const CustomersList = (props) => {
   const [, t] = useLanguage()
-  const [events] = useEvent()
   const customersProps = {
     ...props,
+    isUseQuery: true,
     headerTitle: t('CUSTOMERS', 'Customers'),
     defaultUserTypesSelected: [3],
     propsToFetch: [
@@ -19,9 +20,9 @@ export const CustomersList = (props) => {
     ],
     onUserRedirect: (userId) => {
       if (!userId) {
-        return events.emit('go_to_page', { page: 'customers', replace: true })
+        return removeQueryToUrl(['id', 'section', 'tab'])
       }
-      return events.emit('go_to_page', { page: 'customers', search: `?id=${userId}` })
+      return addQueryToUrl({ id: userId })
     }
   }
   return (

package/template/pages/DeliveriesManager/index.js

@@ -1,16 +1,17 @@
 import React from 'react'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent } from 'ordering-components-admin-external'
 import { DeliveriesManager as DeliveriesManagerController } from '../../../src/components/Orders'
+import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
+
 export const DeliveriesManager = (props) => {
-  const [events] = useEvent()
   const deliveriesManagerProps = {
     ...props,
+    isUseQuery: true,
     onOrderRedirect: (orderId) => {
       if (!orderId) {
-        return events.emit('go_to_page', { page: 'deliveries', replace: true })
+        return removeQueryToUrl(['id'])
       }
-      return events.emit('go_to_page', { page: 'deliveries', search: `?id=${orderId}` })
+      return addQueryToUrl({ id: orderId })
     }
   }
   return (

package/template/pages/DeliveryDriversList/index.js

@@ -1,22 +1,23 @@
 import React from 'react'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent, useLanguage } from 'ordering-components-admin-external'
+import { useLanguage } from 'ordering-components-admin-external'
 import { DeliveryUsersListing } from '../../../src/components/Delivery'
+import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 
 export const DeliveryDriversList = (props) => {
-  const [events] = useEvent()
   const [, t] = useLanguage()
   const usersProps = {
     ...props,
+    isUseQuery: true,
     headerTitle: t('DRIVERS', 'Drivers'),
     defaultUserTypesSelected: [4],
     disabledActiveStateCondition: true,
     isDriversPage: true,
     onUserRedirect: (userId) => {
       if (!userId) {
-        return events.emit('go_to_page', { page: 'delivery_drivers', replace: true })
+        return removeQueryToUrl(['id', 'tab'])
       }
-      return events.emit('go_to_page', { page: 'delivery_drivers', search: `?id=${userId}` })
+      return addQueryToUrl({ id: userId })
     }
   }
   return (

package/template/pages/DriversCompaniesList/index.js

@@ -3,10 +3,14 @@ import { HelmetTags } from '../../components/HelmetTags'
 import { DriversCompaniesListing as DriversCompaniesListingController } from '../../../src/components/Delivery'
 
 export const DriversCompaniesList = (props) => {
+  const driversCompaniesProps = {
+    ...props,
+    isUseQuery: true
+  }
   return (
     <>
       <HelmetTags page='drivers_companies' />
-      <DriversCompaniesListingController {...props} />
+      <DriversCompaniesListingController {...driversCompaniesProps} />
     </>
   )
 }

package/template/pages/DriversGroupsList/index.js

@@ -3,10 +3,14 @@ import { HelmetTags } from '../../components/HelmetTags'
 import { DriversGroupsListing as DriversGroupsListingController } from '../../../src/components/Delivery'
 
 export const DriversGroupsList = (props) => {
+  const driverGroupsProps = {
+    ...props,
+    isUseQuery: true
+  }
   return (
     <>
       <HelmetTags page='drivers_groups' />
-      <DriversGroupsListingController {...props} />
+      <DriversGroupsListingController {...driverGroupsProps} />
     </>
   )
 }

package/template/pages/DriversManagersList/index.js

@@ -1,22 +1,23 @@
 import React from 'react'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent, useLanguage } from 'ordering-components-admin-external'
+import { useLanguage } from 'ordering-components-admin-external'
 import { DeliveryUsersListing as DriversManagersListingController } from '../../../src/components/Delivery'
+import { addQueryToUrl, removeQueryToUrl } from '../../../src/utils'
 
 export const DriversManagersList = (props) => {
   const [, t] = useLanguage()
-  const [events] = useEvent()
   const usersProps = {
     ...props,
+    isUseQuery: true,
     headerTitle: t('DRIVERS_MANAGERS', 'Drivers managers'),
     defaultUserTypesSelected: [5],
     disabledActiveStateCondition: true,
     isDriversManagersPage: true,
     onUserRedirect: (userId) => {
       if (!userId) {
-        return events.emit('go_to_page', { page: 'driver_managers', replace: true })
+        return removeQueryToUrl(['id', 'tab'])
       }
-      return events.emit('go_to_page', { page: 'driver_managers', search: `?id=${userId}` })
+      return addQueryToUrl({ id: userId })
     }
   }
   return (

package/template/pages/EnterprisePromotionList/index.js

@@ -5,6 +5,7 @@ import { EnterprisePromotionListing } from '../../../src/components/Marketing'
 export const EnterprisePromotionList = (props) => {
   const enterprisePromotionListProps = {
     ...props,
+    isUseQuery: true,
     isSearchByPromotionName: true,
     isSearchByPromotionDescription: true
   }