ordering-ui-admin-external 1.33.1 → 1.35.0

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

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Pagination } from '../../Shared'
 import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
 import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 import { Switch, LinkButton } from '../../../styles'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   DriversCompaniesContainer,
@@ -28,14 +30,18 @@ export const DriversCompaniesList = (props) => {
     handleUpdateDriversCompany,
     handleSelectCompany,
     selectedCompanyList,
-    handleAllSelectCompany
+    handleAllSelectCompany,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
 
   // Change page
-  const [currentPage, setCurrentPage] = useState(1)
-  const [companiesPerPage, setCompaniesPerPage] = useState(10)
+  const [currentPage, setCurrentPage] = useState(Number(defaultPage) || 1)
+  const [companiesPerPage, setCompaniesPerPage] = useState(Number(defaultPageSize) || 10)
 
   // Get current companies
   const [currentCompanies, setCurrentCompanies] = useState([])
@@ -91,6 +97,14 @@ export const DriversCompaniesList = (props) => {
     handleOpenDetails(company)
   }
 
+  useEffect(() => {
+    if (!isUseQuery || !currentPage || !companiesPerPage || !totalPages) return
+    addQueryToUrl({
+      page: currentPage,
+      pageSize: companiesPerPage
+    })
+  }, [currentPage, companiesPerPage, totalPages])
+
   return (
     <>
       <DriversCompaniesContainer>

package/src/components/Delivery/DriversCompaniesListing/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,
   DriversCompaniesList as DriversCompaniesListController
@@ -11,6 +11,7 @@ import { Alert, Confirm, SearchBar, SideBar } from '../../Shared'
 import { DriversCompaniesList } from '../DriversCompaniesList'
 import { DriversCompanyDetailsForm } from '../DriversCompanyDetailsForm'
 import { DriversCompanyAddForm } from '../DriversCompanyAddForm'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   DriversCompaniesListContainer,
@@ -31,10 +32,10 @@ const DriversCompaniesListingUI = (props) => {
     handleSelectCompany,
     selectedCompanyList,
     handleAllSelectCompany,
-    handleDeleteSelectedCompanies
+    handleDeleteSelectedCompanies,
+    isUseQuery
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
@@ -54,7 +55,7 @@ const DriversCompaniesListingUI = (props) => {
     }
     setOpenDetails(true)
     if (!isInitialRender) {
-      history.replace(`${location.pathname}?id=${driverCompany?.id}`)
+      addQueryToUrl({ id: driverCompany?.id })
     }
   }
 
@@ -82,7 +83,7 @@ const DriversCompaniesListingUI = (props) => {
     setCurDriversCompanyId(null)
     setOpenDetails(false)
     setIsAddMode(false)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id', 'tab'])
   }
 
   useEffect(() => {
@@ -142,6 +143,7 @@ const DriversCompaniesListingUI = (props) => {
           handleSelectCompany={handleSelectCompany}
           selectedCompanyList={selectedCompanyList}
           handleAllSelectCompany={handleAllSelectCompany}
+          isUseQuery={isUseQuery}
         />
       ) : (
         <DriversCompanyAddForm

package/src/components/Delivery/DriversCompanyDetailsForm/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,
   DriversCompanyDetails as DriversCompanyDetailsController
@@ -12,6 +12,7 @@ import { Alert, Confirm, DragScroll } from '../../Shared'
 import { DriversCompanyGeneralDetails } from '../DriversCompanyGeneralDetails'
 import { DriversCompanyScheduleDetails } from '../DriversCompanyScheduleDetails'
 import { DriversCompanyWebhooksDetails } from '../DriversCompanyWebhooksDetails'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   DetailsContainer,
@@ -33,7 +34,6 @@ const DriversCompanyDetailsFormUI = (props) => {
     handleDeleteDriversCompany
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -88,8 +88,7 @@ const DriversCompanyDetailsFormUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setCurrentTabItem(tab)
     if (!isInitialRender) {
-      const id = query.get('id')
-      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Delivery/DriversGroupDetails/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 {
   useLanguage,
   useConfig,
@@ -17,6 +17,7 @@ import { DriversGroupLogistics } from '../DriversGroupLogistics'
 import { DriversGroupLogs } from '../DriversGroupLogs'
 import { DriverGroupDeliveryDetails } from '../DriversGroupDeliveryDetails'
 import { useWindowSize } from '../../../hooks/useWindowSize'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   DetailsContainer,
@@ -40,7 +41,6 @@ const DriversGroupDetailsUI = (props) => {
     driversGroupId
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -126,8 +126,7 @@ const DriversGroupDetailsUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setShowMenu(tab)
     if (!isInitialRender) {
-      const id = query.get('id')
-      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Delivery/DriversGroupLogistics/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 } from 'ordering-components-admin-external'
 import { Circle, RecordCircleFill, ChevronRight } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -8,6 +8,7 @@ import { SideBar, Modal } from '../../Shared'
 import { DriversGroupOrders } from '../DriversGroupOrders'
 import { DriversGroupAutoassign } from '../DriversGroupAutoassign'
 import { DriversMarkAsBusy } from '../DriversMarkAsBusy'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   LogisticsContainer,
@@ -27,7 +28,6 @@ export const DriversGroupLogistics = (props) => {
     actionDisabled
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -43,9 +43,7 @@ export const DriversGroupLogistics = (props) => {
     }
 
     if (!isInitialRender) {
-      const id = query.get('id')
-      const tab = query.get('tab')
-      history.replace(`${location.pathname}?id=${id}&tab=${tab}&config=${option}`)
+      addQueryToUrl({ config: option })
     }
   }
 

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
@@ -6,6 +7,7 @@ import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Switch, LinkButton } from '../../../styles'
 import { Pagination } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   DriversGroupsContainer,
@@ -35,14 +37,18 @@ export const DriversGroupsList = (props) => {
     isFromStore,
     handleSelectGroup,
     handleAllSelectGroup,
-    actionDisabled
+    actionDisabled,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
 
   // Change page
-  const [currentPage, setCurrentPage] = useState(1)
-  const [groupsPerPage, setGroupsPerPage] = useState(10)
+  const [currentPage, setCurrentPage] = useState(Number(defaultPage) || 1)
+  const [groupsPerPage, setGroupsPerPage] = useState(Number(defaultPageSize) || 10)
 
   // Get current groups
   const [currentGroups, setCurrentGroups] = useState([])
@@ -92,6 +98,14 @@ export const DriversGroupsList = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (!isUseQuery || !currentPage || !groupsPerPage || !totalPages) return
+    addQueryToUrl({
+      page: currentPage,
+      pageSize: groupsPerPage
+    })
+  }, [currentPage, groupsPerPage, totalPages])
+
   return (
     <>
       <DriversGroupsContainer>

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

@@ -3,7 +3,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, DriversGroupsList as DriversGroupsListController } from 'ordering-components-admin-external'
 import { List as MenuIcon, LifePreserver } from 'react-bootstrap-icons'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { getStorageItem, removeStorageItem } from '../../../utils'
+import { getStorageItem, removeStorageItem, addQueryToUrl, removeQueryToUrl } from '../../../utils'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, SearchBar, SideBar } from '../../Shared'
@@ -35,7 +35,8 @@ const DriversGroupsListingUI = (props) => {
     handleUpdateDriversGroup,
     handleDeleteDriversGroup,
     driversCompanyList,
-    actionDisabled
+    actionDisabled,
+    isUseQuery
   } = props
 
   const history = useHistory()
@@ -66,9 +67,9 @@ const DriversGroupsListingUI = (props) => {
       setTimeout(() => {
         setCurrentTourStep(5)
       }, 50)
-      history.replace(`${location.pathname}`)
+      removeQueryToUrl(['id'])
     } else {
-      history.replace(`${location.pathname}?id=${driverGroup.id}`)
+      addQueryToUrl({ id: driverGroup.id })
     }
   }
 
@@ -127,7 +128,7 @@ const DriversGroupsListingUI = (props) => {
     setCurDriversGroup(null)
     setOpenDetails(false)
     setIsTourOpen(false)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id'])
   }
 
   useEffect(() => {
@@ -208,6 +209,7 @@ const DriversGroupsListingUI = (props) => {
             handleSelectGroup={handleSelectGroup}
             handleAllSelectGroup={handleAllSelectGroup}
             actionDisabled={actionDisabled}
+            isUseQuery={isUseQuery}
           />
         ) : (
           <DriversGroupAddForm

package/src/components/Delivery/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 { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -16,6 +16,8 @@ import { DriverGroupSetting } from '../DriverGroupSetting'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
 import { Switch, Button, IconButton } from '../../../styles'
 import { ActionsForm } from '../UserFormDetails/styles'
+import { addQueryToUrl } from '../../../utils'
+
 import {
   UserName,
   SavedPlaces,
@@ -42,7 +44,6 @@ export const UserDetailsUI = (props) => {
     actionDisabled
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -67,13 +68,7 @@ export const UserDetailsUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setCurrentMenuSelected(tab)
     if (!isInitialRender) {
-      const id = query.get('id')
-      const section = query.get('section')
-      if (section) {
-        history.replace(`${location.pathname}?id=${id}&section=${section}&tab=${tab}`)
-      } else {
-        history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
-      }
+      addQueryToUrl({ tab: tab })
     }
   }
 

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

@@ -164,6 +164,14 @@ export const UserFormDetailsUI = (props) => {
     emailInput.current.value = e.target.value?.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
   }
 
+  const handleExternalIdPaste = (event) => {
+    event.preventDefault()
+    const pastedData = event.clipboardData.getData('text/plain')
+    const sanitizedData = pastedData.replace(/\s/g, '').replace(/[^\d]/g, '')
+    document.execCommand('insertText', false, sanitizedData)
+    handleChangeSwtich('external_id', sanitizedData)
+  }
+
   useEffect(() => {
     if (Object.keys(formMethods.errors).length > 0) {
       const content = Object.values(formMethods.errors).map(error => error.message)
@@ -289,6 +297,7 @@ export const UserFormDetailsUI = (props) => {
                       e.preventDefault()
                     }
                   }}
+                  onPaste={handleExternalIdPaste}
                 />
                 <InputWrapper isTimezone>
                   <DefaultSelect

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

@@ -8,6 +8,7 @@ import { Envelope, Phone } from 'react-bootstrap-icons'
 
 import { Switch, LinkButton } from '../../../styles'
 import { Pagination, ConfirmAdmin } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   UsersConatiner,
@@ -42,7 +43,8 @@ export const UsersList = (props) => {
     isDriversManagersPage,
     actionDisabled,
     setSelectedUsers,
-    handleChangeAvailable
+    handleChangeAvailable,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -109,6 +111,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/Marketing/AdBannersListing/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 { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton } from '../../../styles'
@@ -7,6 +7,7 @@ import { List as MenuIcon, HouseDoor, ViewStacked, Shop, InfoCircle } from 'reac
 import { PostionItemUI } from './PostionItemUI'
 import { SideBar } from '../../Shared'
 import { PageBanners } from '../PageBanner'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   AdBannersListingContainer,
@@ -17,7 +18,6 @@ import {
 } from './styles'
 
 export const AdBannersListing = (props) => {
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
@@ -76,14 +76,15 @@ export const AdBannersListing = (props) => {
     const selectedItem = bannerPositions.find(item => item.key === key)
     setOpenPositionDetail(selectedItem)
     if (!isInitialRender) {
-      history.replace(`${location.pathname}?position=${key}`)
+      removeQueryToUrl(['banner'])
+      addQueryToUrl({ position: key })
     }
   }
 
   const handleCloseDetails = () => {
     setOpenPositionDetail(null)
     setMoveDistance(0)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['position', 'banner'])
   }
 
   useEffect(() => {

package/src/components/Marketing/CampaignDetail/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 { useTheme } from 'styled-components'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useLanguage, CampaignDetail as CampaignDetailController } from 'ordering-components-admin-external'
@@ -7,6 +7,7 @@ import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstr
 import { Confirm, Alert } from '../../Shared'
 import { CampaignDetailGeneral } from '../CampaignDetailGeneral'
 import { CampaignDetailContent } from '../CampaignDetailContent'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   CampaignDetailContainer,
@@ -29,7 +30,6 @@ const CampaignDetailUI = (props) => {
     handleDeleteCampaign
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -83,8 +83,7 @@ const CampaignDetailUI = (props) => {
     setSelectedOption(tab)
 
     if (!isInitialRender) {
-      const id = query.get('id')
-      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Marketing/CampaignList/index.js

@@ -1,8 +1,9 @@
-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 { Switch, LinkButton } from '../../../styles'
 import { ColumnAllowSettingPopover, Pagination, Modal } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -25,7 +26,8 @@ export const CampaignList = (props) => {
     handleOpenDetail,
     selectedCampaign,
     handleUpdateCampaign,
-    setSelectedCampaign
+    setSelectedCampaign,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -123,6 +125,14 @@ export const CampaignList = (props) => {
     setOpenModal(true)
   }
 
+  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/Marketing/CampaignListing/index.js

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { SideBar } from '../../Shared'
 import { CampaignDetail } from '../CampaignDetail'
 import { CampaignHeader } from '../CampaignHeader'
 import { CampaignList } from '../CampaignList'
 import { CampaignListing as CampaignListingController } from 'ordering-components-admin-external'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
+
 import {
   CampaignListingContainer
 } from './styles'
 
 export const CampaignListingUI = (props) => {
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedCampaign, setSelectedCampaign] = useState(null)
@@ -20,13 +21,13 @@ export const CampaignListingUI = (props) => {
     setSelectedCampaign(action)
     setSelectedCampaignId(action?.id)
     setIsOpenDetail(true)
-    action && history.replace(`${location.pathname}?id=${action?.id}`)
+    addQueryToUrl({ id: action?.id })
   }
 
   const handleCloseDetail = () => {
     setIsOpenDetail(false)
     setSelectedCampaign(null)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id'])
   }
 
   useEffect(() => {
@@ -72,11 +73,19 @@ export const CampaignListingUI = (props) => {
 }
 
 export const CampaignListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const campaignListingProps = {
     ...props,
     UIComponent: CampaignListingUI,
     isSearchByContactType: true,
-    isSearchByName: true
+    isSearchByName: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return <CampaignListingController {...campaignListingProps} />
 }

package/src/components/Marketing/EnterprisePromotionList/index.js

@@ -5,6 +5,7 @@ import { useTheme } from 'styled-components'
 import { Image as ImageIcon } from 'react-bootstrap-icons'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
 import { Switch, LinkButton } from '../../../styles'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   PromotionListContainer,
@@ -39,7 +40,8 @@ export const EnterprisePromotionList = (props) => {
     handleDrop,
     handleDragEnd,
     handleEnablePromotion,
-    isPromotionBottom
+    isPromotionBottom,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
@@ -107,6 +109,14 @@ export const EnterprisePromotionList = (props) => {
     }
   }, [promotionListState.promotions, 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 (
     <>
       <PromotionListContainer eventDisabled={eventDisabled}>

package/src/components/Marketing/EnterprisePromotionListing/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 { useConfig, useSession, useLanguage, EnterprisePromotionList as EnterprisePromontioListController } from 'ordering-components-admin-external'
 import { List as MenuIcon } from 'react-bootstrap-icons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
@@ -8,6 +8,7 @@ import { Alert, SearchBar, SideBar } from '../../Shared'
 import { EnterprisePromotionList } from '../EnterprisePromotionList'
 import { EnterprisePromotionDetails } from '../EnterprisePromotionDetails'
 import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   PromotionsListingContainer,
@@ -29,7 +30,6 @@ const EnterprisePromotionListingUI = (props) => {
     handleSuccessDeletePromotion
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
@@ -53,7 +53,7 @@ const EnterprisePromotionListingUI = (props) => {
     setCurPromotionId(promotion?.id)
     setOpenDetails(true)
     if (promotion) {
-      history.replace(`${location.pathname}?id=${promotion?.id}`)
+      addQueryToUrl({ id: promotion?.id })
     }
   }
 
@@ -62,7 +62,7 @@ const EnterprisePromotionListingUI = (props) => {
     setSideBarWidth(600)
     setOpenDetails(false)
     setSelectedPromotion(null)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id'])
   }
 
   useEffect(() => {
@@ -167,9 +167,17 @@ const EnterprisePromotionListingUI = (props) => {
 }
 
 export const EnterprisePromotionListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
   const enterpisePromotionsProps = {
     ...props,
-    UIComponent: EnterprisePromotionListingUI
+    UIComponent: EnterprisePromotionListingUI,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    }
   }
   return <EnterprisePromontioListController {...enterpisePromotionsProps} />
 }