ordering-ui-admin-external 1.33.1 → 1.35.0

package/src/components/BusinessIntelligence/ReviewsListing/index.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import React, { useEffect, useState, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { List as MenuIcon, CaretDownFill } from 'react-bootstrap-icons'
@@ -9,6 +9,7 @@ import { BusinessReviewList } from '../BusinessReviewList'
 import { UsersReviewList } from '../UsersReviewList'
 import { BusinessSelectHeader } from '../../Stores/BusinessSelectHeader'
 import { ReviewProductsListing } from '../ReviewProductsListing'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   ReviewsListingContainer,
@@ -22,11 +23,20 @@ import {
 } from './styles'
 
 export const ReviewsListing = (props) => {
-  const history = useHistory()
+  const {
+    isUseQuery
+  } = props
+
   const query = new URLSearchParams(useLocation().search)
+  const defaultTab = query.get('tab')
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
+
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
-  const [showOption, setShowOption] = useState('business')
+
+  const firstRender = useRef(true)
+  const [showOption, setShowOption] = useState(defaultTab || 'business')
   const [searchValue, setSearchValue] = useState(null)
   const [showSelect, setShowSelect] = useState(false)
   const [business, setBusiness] = useState('')
@@ -36,15 +46,18 @@ export const ReviewsListing = (props) => {
     setShowSelect(false)
     setBusiness(business)
     setBusinessId(business.id)
-    const tab = query.get('tab')
-    history.replace(`${location.pathname}?tab=${tab}&business=${business.id}`)
+    addQueryToUrl({ business: business.id })
   }
 
   const handleChangeOption = (option, isInitialRender) => {
-    setShowOption(option)
-    if (option === 'products' && !businessId) setShowSelect(true)
     if (!isInitialRender) {
-      history.replace(`${location.pathname}?tab=${option}`)
+      firstRender.current = false
+      removeQueryToUrl(['page', 'pageSize', 'business', 'category', 'product', 'id'])
+      addQueryToUrl({ tab: option })
+    }
+    setShowOption(option)
+    if (option === 'products' && !businessId) {
+      setShowSelect(true)
     }
   }
 
@@ -144,30 +157,61 @@ export const ReviewsListing = (props) => {
           </Tab>
         </Tabs>
         {showOption === 'business' && (
-          <BusinessReviewList parentSearchValue={searchValue} handleOpenProducts={handleOpenProducts} />
+          <BusinessReviewList
+            parentSearchValue={searchValue}
+            handleOpenProducts={handleOpenProducts}
+            isUseQuery={isUseQuery}
+            paginationSettings={{
+              initialPage: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
+          />
         )}
         {showOption === 'drivers' && (
           <UsersReviewList
             defaultUserTypesSelected={[4]}
             parentSearchValue={searchValue}
+            isUseQuery={isUseQuery}
+            paginationSettings={{
+              initialPage: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
           />
         )}
         {showOption === 'customers' && (
           <UsersReviewList
             defaultUserTypesSelected={[3]}
             parentSearchValue={searchValue}
+            isUseQuery={isUseQuery}
+            paginationSettings={{
+              initialPage: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
           />
         )}
         {showOption === 'professionals' && (
           <UsersReviewList
             defaultUserTypesSelected={[8]}
             parentSearchValue={searchValue}
+            isUseQuery={isUseQuery}
+            paginationSettings={{
+              initialPage: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+              pageSize: isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+              controlType: 'pages'
+            }}
           />
         )}
         {showOption === 'products' && businessId && (
           <ReviewProductsListing
             parentSearchValue={searchValue}
             businessId={businessId}
+            isUseQuery={isUseQuery}
+            defaultPage={isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPage) : 1}
+            defaultPageSize={isUseQuery && firstRender.current && !isNaN(defaultPage) ? Number(defaultPageSize) : 10}
+            firstRender={firstRender.current}
           />
         )}
       </ReviewsListingContainer>

package/src/components/BusinessIntelligence/UsersReviewList/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,
   useUtils,
@@ -9,6 +9,7 @@ import Skeleton from 'react-loading-skeleton'
 import { StarFill, PersonFill } from 'react-bootstrap-icons'
 import { Pagination, SideBar } from '../../Shared'
 import { UserReviewDetails } from '../UserReviewDetails'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   ReviewsTable,
@@ -28,10 +29,10 @@ const DriversReviewListUI = (props) => {
     paginationProps,
     getUsers,
     onSearch,
-    defaultUserTypesSelected
+    defaultUserTypesSelected,
+    isUseQuery
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ optimizeImage, parseNumber }] = useUtils()
@@ -66,16 +67,14 @@ const DriversReviewListUI = (props) => {
     if (isInvalid) return
     handleOpenReview(user)
     if (!isInitialRender) {
-      const tab = query.get('tab')
-      history.replace(`${location.pathname}?tab=${tab}&id=${user.id}`)
+      addQueryToUrl({ id: user.id })
     }
   }
 
   const handleCloseReviewDetails = () => {
     setCurUser(null)
     setOpenReview(false)
-    const tab = query.get('tab')
-    history.replace(`${location.pathname}?tab=${tab}`)
+    removeQueryToUrl(['id'])
   }
 
   useEffect(() => {
@@ -86,6 +85,14 @@ const DriversReviewListUI = (props) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (!isUseQuery || !paginationProps?.currentPage || !paginationProps?.pageSize || !paginationProps?.totalPages) return
+    addQueryToUrl({
+      page: paginationProps.currentPage,
+      pageSize: paginationProps.pageSize
+    })
+  }, [paginationProps?.currentPage, paginationProps?.pageSize, paginationProps?.totalPages])
+
   return (
     <>
       <ReviewsTable>

package/src/components/CartRecovery/OpenCartList/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 // import { Square, CheckSquareFill } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
@@ -8,6 +8,8 @@ import {
 } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
+
 import {
   CartsContainer,
   Table,
@@ -31,7 +33,8 @@ export const OpenCartList = (props) => {
     getCartList,
     // handleSelectedCartIds,
     // setSelectedCartIds,
-    handleOpenCartDetail
+    handleOpenCartDetail,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -118,6 +121,14 @@ export const OpenCartList = (props) => {
   //   setIsAllChecked(_isAllChecked)
   // }, [cartList.carts, selectedCartIds])
 
+  useEffect(() => {
+    if (!isUseQuery || !pagination?.currentPage || !pagination?.pageSize || !pagination?.totalPages) return
+    addQueryToUrl({
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize
+    })
+  }, [pagination?.currentPage, pagination?.pageSize, pagination?.totalPages])
+
   return (
     <>
       <CartsContainer id='cartTable'>
@@ -226,11 +237,10 @@ export const OpenCartList = (props) => {
               </CartBody>
             ))
           ) : (
-            cartList.carts.map((cart, i) => (
+            cartList.carts.map(cart => (
               <CartBody
-                key={i}
+                key={cart?.id}
                 className={parseInt(cartDetailId) === cart.id ? 'active' : ''}
-
                 onClick={(e) => handleClickCart(cart, e)}
               >
                 <tr>

package/src/components/CartRecovery/OpenCartListing/index.js

@@ -29,7 +29,9 @@ const OpenCartListingUI = (props) => {
     cartList,
     pagination,
     getCartList,
-    onCartRedirect
+    onCartRedirect,
+    handleSuccessDeleteCart,
+    isUseQuery
   } = props
 
   const query = new URLSearchParams(useLocation().search)
@@ -110,6 +112,7 @@ const OpenCartListingUI = (props) => {
                 getCartList={getCartList}
                 handleSelectedCartIds={handleSelectedCartIds}
                 handleOpenCartDetail={handleOpenCartDetail}
+                isUseQuery={isUseQuery}
               />
             </WrapItemView>
           </OpenCartsInnerContent>
@@ -121,6 +124,7 @@ const OpenCartListingUI = (props) => {
           cart={detailsCart}
           cartId={cartDetailId}
           onClose={() => handleBackRedirect()}
+          handleSuccessDeleteCart={handleSuccessDeleteCart}
         />
       )}
       {totalSelectedOrder > 0 && (
@@ -129,16 +133,23 @@ const OpenCartListingUI = (props) => {
         </WrapperIndicator>
       )}
     </>
-
   )
 }
 
 export const OpenCartListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const openCartsProps = {
     ...props,
     UIComponent: OpenCartListingUI,
     isSearchByCartId: true,
-    isSearchByCityName: true
+    isSearchByCityName: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return <OpenCartListingController {...openCartsProps} />
 }

package/src/components/CartRecovery/OpenCartsDetail/index.js

@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils, OpenCartsDetail as OpenCartsDetailController } from 'ordering-components-admin-external'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import { useTheme } from 'styled-components'
 import { ProductItemAccordion } from '../../Orders/ProductItemAccordion'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { OpenCartBill } from '../OpenCartBill'
 import { OpenCartsContactInformation } from '../OpenCartsContactInformation'
-import { NotFoundSource } from '../../Shared'
+import { NotFoundSource, Confirm } from '../../Shared'
 import { IconButton as ButtonLink } from '../../../styles'
-import { ArrowsAngleContract, ArrowsAngleExpand, XLg as CloseIcon } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg as CloseIcon, ThreeDots } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 
 import {
@@ -16,7 +18,8 @@ import {
   HeaderContainer,
   OrderInfoWrapper,
   ButtonGroup,
-  SkeletonWrapper
+  SkeletonWrapper,
+  ActionSelectorWrapper
 } from './styles'
 
 const OpenCartsDetailUI = (props) => {
@@ -24,15 +27,18 @@ const OpenCartsDetailUI = (props) => {
     isSelectedOrders,
     open,
     handleBackRedirect,
-    cartState
+    cartState,
+    handleDeleteCart
   } = props
 
+  const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [{ parseDate }] = useUtils()
 
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isExpand, setIsExpand] = useState(false)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
   const actionSidebar = (value) => {
     setIsMenuOpen(value)
@@ -74,6 +80,17 @@ const OpenCartsDetailUI = (props) => {
     setIsExpand(prev => !prev)
   }
 
+  const onDeleteCart = (cart) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_CART', 'Are you sure that you want to delete this cart?'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleDeleteCart(cart)
+      }
+    })
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -116,6 +133,17 @@ const OpenCartsDetailUI = (props) => {
                       {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
                     </ButtonLink>
                   )}
+                  <ActionSelectorWrapper>
+                    <DropdownButton
+                      menuAlign={theme?.rtl ? 'left' : 'right'}
+                      title={<ThreeDots />}
+                      id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+                    >
+                      <Dropdown.Item onClick={() => onDeleteCart(cartState?.cart)}>
+                        {t('DELETE', 'Delete')}
+                      </Dropdown.Item>
+                    </DropdownButton>
+                  </ActionSelectorWrapper>
                   <ButtonLink
                     color='black'
                     onClick={() => props.onClose() && props.onClose()}
@@ -154,6 +182,18 @@ const OpenCartsDetailUI = (props) => {
           onClickButton={handleBackRedirect}
         />
       )}
+
+      <Confirm
+        width='700px'
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
     </Container>
   )
 }

package/src/components/CartRecovery/OpenCartsDetail/styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components'
+import { darken } from 'polished'
 
 export const Container = styled.div`
   display: flex;
@@ -113,3 +114,56 @@ export const SkeletonWrapper = styled.div`
     width: 100%;
   }
 `
+export const ActionSelectorWrapper = styled.div`
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px 5px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`

package/src/components/CartRecovery/RecoveryActionDetail/index.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, RecoveryActionDetail as RecoveryActionDetailController } from 'ordering-components-admin-external'
 import { Alert, Confirm } from '../../Shared'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { IconButton, Switch } from '../../../styles'
 import { useTheme } from 'styled-components'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   RecoveryActionDetailContainer,
@@ -31,7 +32,6 @@ const RecoveryActionDetailUI = (props) => {
     handleDeleteRecoveryAction
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -57,8 +57,7 @@ const RecoveryActionDetailUI = (props) => {
     }
     setSelectedOption(key)
     if (!isInitialRender) {
-      const id = query.get('id')
-      history.replace(`${location.pathname}?id=${id}&tab=${key}`)
+      addQueryToUrl({ tab: key })
     }
   }
 

package/src/components/CartRecovery/RecoveryActionList/index.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage } from 'ordering-components-admin-external'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
 import { Switch, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -22,7 +23,8 @@ export const RecoveryActionList = (props) => {
     getRecoveryList,
     handleOpenDetail,
     handleUpdateAction,
-    selectedAction
+    selectedAction,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -73,6 +75,14 @@ export const RecoveryActionList = (props) => {
     handleOpenDetail(action)
   }
 
+  useEffect(() => {
+    if (!isUseQuery || !paginationProps?.currentPage || !paginationProps?.pageSize || !paginationProps?.totalPages) return
+    addQueryToUrl({
+      page: paginationProps.currentPage,
+      pageSize: paginationProps.pageSize
+    })
+  }, [paginationProps?.currentPage, paginationProps?.pageSize, paginationProps?.totalPages])
+
   return (
     <>
       <Container>

package/src/components/CartRecovery/RecoveryActionListing/index.js

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { RecoveryActionListing as RecoveryActionListingController } from 'ordering-components-admin-external'
 import { RecoveryActionHeader } from '../RecoveryActionHeader'
 import { RecoveryActionList } from '../RecoveryActionList'
 import { SideBar } from '../../Shared'
 import { RecoveryActionDetail } from '../RecoveryActionDetail'
 import { RecoveryActionAdd } from '../RecoveryActionAdd'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   RecoveryActionsContainer
 } from './styles'
 
 const RecoveryActionListingUI = (props) => {
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedAction, setSelectedAction] = useState(null)
@@ -23,7 +23,7 @@ const RecoveryActionListingUI = (props) => {
     setIsOpenDetail(false)
     setSelectedAction(null)
     setIsAddMode(false)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id', 'tab'])
   }
 
   const handleOpenDetail = (action, isInitialRender) => {
@@ -32,13 +32,13 @@ const RecoveryActionListingUI = (props) => {
     setIsOpenDetail(true)
     if (!Object.keys(action || {}).length) {
       setIsAddMode(true)
-      history.replace(`${location.pathname}`)
+      removeQueryToUrl(['id'])
       return
     } else {
       setIsAddMode(false)
     }
     if (action && !isInitialRender) {
-      history.replace(`${location.pathname}?id=${action.id}`)
+      addQueryToUrl({ id: action.id })
     }
   }
 
@@ -92,11 +92,19 @@ const RecoveryActionListingUI = (props) => {
 }
 
 export const RecoveryActionListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const recoveryActionsProps = {
     ...props,
     UIComponent: RecoveryActionListingUI,
     isSearchByName: true,
-    isSearchByDescription: true
+    isSearchByDescription: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return <RecoveryActionListingController {...recoveryActionsProps} />
 }

package/src/components/Delivery/DeliveryUsersListing/index.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import React, { useState, useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, UsersList as UsersListController } from 'ordering-components-admin-external'
-import { getStorageItem, removeStorageItem, setStorageItem } from '../../../utils'
+import { getStorageItem, removeStorageItem, setStorageItem, addQueryToUrl } from '../../../utils'
 
 import { UsersListingHeader } from '../UsersListingHeader'
 import { UserTypeFilter } from '../UserTypeFilter'
@@ -52,12 +52,13 @@ const DeliveryUsersListingUI = (props) => {
     actionDisabled,
     driversGroupsState,
     setSelectedUsers,
-    actionStatus
+    actionStatus,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
+  const firstRender = useRef(true)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
   const [openUser, setOpenUser] = useState(null)
@@ -79,7 +80,7 @@ const DeliveryUsersListingUI = (props) => {
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
-    history.replace(`${location.pathname}?id=${user.id}`)
+    addQueryToUrl({ id: user.id })
   }
 
   const handleOpenUserAddForm = () => {
@@ -105,7 +106,7 @@ const DeliveryUsersListingUI = (props) => {
   }
 
   useEffect(() => {
-    if (usersList.loading) return
+    if (usersList.loading || !firstRender.current) return
     const id = query.get('id')
     if (id === null) {
       !isDriversManagersPage && setIsOpenUserDetails(false)
@@ -118,6 +119,7 @@ const DeliveryUsersListingUI = (props) => {
       }
       setIsOpenUserDetails(true)
     }
+    firstRender.current = false
   }, [usersList])
 
   const handleCloseAddForm = () => {
@@ -210,6 +212,7 @@ const DeliveryUsersListingUI = (props) => {
           handleOpenUserAddForm={handleOpenUserAddForm}
           actionDisabled={actionDisabled}
           setSelectedUsers={setSelectedUsers}
+          isUseQuery={isUseQuery}
         />
       </UsersListingContainer>
 
@@ -268,13 +271,21 @@ const DeliveryUsersListingUI = (props) => {
 }
 
 export const DeliveryUsersListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const usersListingProps = {
     ...props,
     UIComponent: DeliveryUsersListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,
     isSearchByUserName: true,
-    isDriver: true
+    isDriver: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return (
     <UsersListController {...usersListingProps} />