ordering-ui-admin-external 1.33.1 → 1.35.0

package/src/components/Stores/BusinessPlaceGroupList/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, BusinessPlaceGroupList as BusinessPlaceGroupListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Button, LinkButton } from '../../../styles'
@@ -7,6 +7,7 @@ import { ChevronRight, CheckSquareFill, Square } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { BusinessPlaceGroup } from '../BusinessPlaceGroup'
 import { Modal } from '../../Shared'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -32,7 +33,6 @@ export const BusinessPlaceGroupListUI = (props) => {
     getMultiCheckStatus
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -49,9 +49,7 @@ export const BusinessPlaceGroupListUI = (props) => {
     setOpenDetail(false)
     setSelectedPlace(null)
     setIsExtendExtraOpen(false)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}`)
+    removeQueryToUrl(['place_group'])
   }
 
   const handleUpdateSelectedPlaceGroup = (placeGroup) => {
@@ -62,9 +60,7 @@ export const BusinessPlaceGroupListUI = (props) => {
     if (e?.target?.closest('.check-box')) return
     handleOpenDetail(placeGroup)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&place_group=${placeGroup.id}`)
+      addQueryToUrl({ place_group: placeGroup.id })
     }
   }
 

package/src/components/Stores/BusinessPreorderDetails/index.js

@@ -120,7 +120,7 @@ export const BusinessPreorderDetails = (props) => {
           {t('SAVE', 'Save')}
         </Button>
       </PreorderTimeWrapper>
-      {/* <Divider />
+      <Divider />
       <BusinessCateringDelivery
         minutes={minutes}
         type='catering_delivery'
@@ -135,7 +135,7 @@ export const BusinessPreorderDetails = (props) => {
         changePreorderConfigs={changePreorderConfigs}
         disabled={actionStatus?.loading}
       />
-      <Margin /> */}
+      <Margin />
     </BusinessPreorderContainer>
   )
 }

package/src/components/Stores/BusinessProductList/index.js

@@ -177,7 +177,7 @@ export const BusinessProductList = (props) => {
                     (isLazyLoadProducts ? categoryState.products : currentProducts).sort((a, b) => a.rank - b.rank).map((product, i) => (
                       <SingleBusinessProduct
                         {...props}
-                        key={i}
+                        key={`${product?.id}_${i}`}
                         productDetailsId={productDetailsId}
                         product={product}
                         allowColumns={allowColumns}

package/src/components/Stores/BusinessProductsCategoyDetails/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 Skeleton from 'react-loading-skeleton'
 import { useLanguage, BusinessProductsCategoyDetails as BusinessProductsCategoyDetailsController } from 'ordering-components-admin-external'
 import { ArrowsAngleContract, ArrowsAngleExpand, ThreeDots } from 'react-bootstrap-icons'
@@ -9,7 +9,7 @@ import { Alert, Confirm } from '../../Shared'
 import { IconButton, Switch } from '../../../styles'
 import { SeoOptions } from '../SeoOptions'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-
+import { addQueryToUrl } from '../../../utils'
 import { BusinessCategoryInfoSettingList } from '../BusinessCategoryInfoSettingList'
 import { BusinessProductsCategoyInfo } from '../BusinessProductsCategoyInfo'
 
@@ -44,7 +44,6 @@ const BusinessProductsCategoyDetailsUI = (props) => {
     handleTutorialSkip
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -94,8 +93,7 @@ const BusinessProductsCategoyDetailsUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setSelctedInfoItem(tab)
     if (!isInitialRender) {
-      const category = query.get('category')
-      history.replace(`${location.pathname}?category=${category}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Stores/BusinessProductsListing/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import BisDownArrow from '@meronex/icons/bi/BisDownArrow'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -29,6 +29,7 @@ import { ImportersButton } from '../ImportersButton'
 import { AddBusinessForm } from '../AddBusinessForm'
 import { ProductStep } from '../ProductStep'
 import { BusinessAddStore } from '../BusinessAddStore'
+import { addQueryToUrl, removeQueryToUrl, checkSiteUrl } from '../../../utils'
 
 import {
   CategoryProductsContainer,
@@ -47,7 +48,6 @@ import {
   ColumnsAllowWrapper,
   ButtonWrapper
 } from './styles'
-import { checkSiteUrl } from '../../../utils'
 
 const BusinessProductsListingUI = (props) => {
   const {
@@ -82,7 +82,6 @@ const BusinessProductsListingUI = (props) => {
     siteState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -139,7 +138,7 @@ const BusinessProductsListingUI = (props) => {
       setCategorySelected(category)
       setOpenSidebar('category_details')
       if (!isInitialRender) {
-        history.replace(`${location.pathname}?category=${category.id}`)
+        addQueryToUrl({ category: category.id })
       }
     } else {
       setCurrentCategory(null)
@@ -155,7 +154,7 @@ const BusinessProductsListingUI = (props) => {
     })
     setCurrentCategory(null)
     setOpenSidebar(null)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['category'])
   }
 
   const handleOpenProductDetails = (product, isInitialRender) => {
@@ -320,7 +319,7 @@ const BusinessProductsListingUI = (props) => {
                       <span
                         className='business'
                         onClick={() => {
-                          history.replace(`${location.pathname}?id=${businessState?.business?.id}`)
+                          addQueryToUrl({ id: businessState?.business?.id })
                           setOpenSidebar('business_details')
                         }}
                       >
@@ -522,7 +521,10 @@ const BusinessProductsListingUI = (props) => {
           businessId={selectedBusiness?.id || businessState?.business?.id}
           handleSucessRemoveBusiness={() => handleStoresRedirect()}
           // handleSucessUpdateBusiness={handleSucessUpdateBusiness}
-          onClose={() => setOpenSidebar(null)}
+          onClose={() => {
+            setOpenSidebar(null)
+            removeQueryToUrl(['id'])
+          }}
           businessTypes={businessTypes}
           setBusinessTypes={setBusinessTypes}
         />

package/src/components/Stores/BusinessSharedMenuProducts/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,
   BusinessSharedMenuProducts as BusinessSharedMenuProductsController
@@ -9,6 +9,7 @@ import { Modal, SearchBar, SideBar } from '../../Shared'
 import { BusinessSharedMenuProductDetails } from '../BusinessSharedMenuProductDetails'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { ChevronRight } from 'react-bootstrap-icons'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   MenuProductsContainer,
@@ -26,7 +27,6 @@ const BusinessSharedMenuProductsUI = (props) => {
     handleChangeInput
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -42,11 +42,7 @@ const BusinessSharedMenuProductsUI = (props) => {
     setIsOpenDetails(true)
 
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const tab = query.get('tab')
-      const menu = query.get('menu')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&menu=${menu}&product=${product.id}`)
+      addQueryToUrl({ product: product.id })
     }
   }
 
@@ -54,11 +50,7 @@ const BusinessSharedMenuProductsUI = (props) => {
     setIsOpenDetails(false)
     setCurrentProduct(null)
     setIsOpenSharedProduct(false)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    const tab = query.get('tab')
-    const menu = query.get('menu')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&menu=${menu}`)
+    removeQueryToUrl(['product'])
   }
 
   useEffect(() => {

package/src/components/Stores/BusinessSync/index.js

@@ -1,9 +1,10 @@
 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 { BusinessSyncBasic } from '../BusinessSyncBasic'
 import { BusinessSyncItsaCheckmate } from '../BusinessSyncItsaCheckmate'
 import { BusinessSyncStore } from '../BusinessSyncStore'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -15,7 +16,6 @@ import {
 export const BusinessSync = (props) => {
   const { handleParentSidebarMove } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedOption, setSelectedOption] = useState('deliverect')
@@ -29,8 +29,7 @@ export const BusinessSync = (props) => {
     handleParentSidebarMove(0)
     setSelectedOption(key)
     if (!isInitialRender) {
-      const header = query.get('header')
-      history.replace(`${location.pathname}?header=${header}&tab=${key}`)
+      addQueryToUrl({ tab: key })
     }
   }
 

package/src/components/Stores/BusinessTypes/index.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { Alert, SearchBar, Modal, SideBar } from '../../Shared'
 import { ChevronRight, Square, CheckSquareFill } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import BsCardImage from '@meronex/icons/bs/BsCardImage'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -32,7 +33,6 @@ export const BusinessTypes = (props) => {
     setIsExtendExtraOpen
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -51,21 +51,14 @@ export const BusinessTypes = (props) => {
     setSelectedBusinessType(category)
     setIsExtendExtraOpen(true)
     setIsOpenTypeDetail(true)
-
-    const businessId = query.get('id')
-    const section = query.get('section')
-    const tab = query.get('tab')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&business_type=${category?.id}`)
+    addQueryToUrl({ business_type: category?.id })
   }
 
   const handleCloseDetail = () => {
     setIsOpenTypeDetail(false)
     setIsExtendExtraOpen(false)
     setSelectedBusinessType(null)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    const tab = query.get('tab')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}`)
+    removeQueryToUrl(['business_type'])
   }
 
   const handleSelectBusinessTypes = (typeId) => {

package/src/components/Stores/BusinessWalletsList/index.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, useConfig, BusinessWalletsList as BusinessWalletsListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { ChevronRight } from 'react-bootstrap-icons'
 import { SideBar } from '../../Shared'
 import { Select } from '../../../styles/Select/FirstSelect'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   WalletsListContainer,
@@ -25,7 +26,6 @@ const BusinessWalletsListUI = (props) => {
     handleUpdateWallet
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
@@ -52,9 +52,7 @@ const BusinessWalletsListUI = (props) => {
     setIsExtendExtraOpen(true)
     setIsOpenDetails(true)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&wallet=${config.id}`)
+      addQueryToUrl({ wallet: config.id })
     }
   }
   const handleCloseWallet = () => {
@@ -62,9 +60,7 @@ const BusinessWalletsListUI = (props) => {
     setIsOpenDetails(false)
     setIsExtendExtraOpen(false)
     setCurrentConfig(null)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}`)
+    removeQueryToUrl(['wallet'])
   }
 
   useEffect(() => {

package/src/components/Stores/BusinessWebhooks/index.js

@@ -48,18 +48,20 @@ const BusinessWebhooksUI = (props) => {
     { value: 'orders_pickup_failed_driver', content: t('ORDERS_PICKUP_FAILED_DRIVER') },
     { value: 'orders_delivery_completed_driver', content: t('ORDERS_DELIVERY_COMPLETED_DRIVER') },
     { value: 'orders_delivery_failed_driver', content: t('ORDERS_DELIVERY_FAILED_DRIVER') },
+    { value: 'orders_unassigned_driver', content: t('ORDERS_UNASSIGNED_DRIVER', 'Order unassigned driver') },
     { value: 'preorder_updated', content: t('PREORDER_UPDATED', 'Preorder updated') },
-    { value: 'drivers_changes', content: t('DRIVERS_CHANGES', 'Driver changes') },
+    { value: 'drivers_changes', content: t('DRIVERS_CHANGES', 'Driver changes') }
   ]
 
   const timeList = [
     { value: '', content: t('SELECT_DELAY', 'Select a delay') },
     { value: '0', content: t('IMMEDIATELY', 'Immediately') },
-    { value: 'delivery_time', content: t('DELIVERY_TIME', 'Delivery time') },
-    { value: 'pickup_time', content: t('PICKUP_TIME', 'Pickup time') },
     { value: '300', content: `5 ${t('MINUTES', 'Minutes')}` },
     { value: '600', content: `10 ${t('MINUTES', 'Minutes')}` },
-    { value: '900', content: `15 ${t('MINUTES', 'Minutes')}` }
+    { value: '900', content: `15 ${t('MINUTES', 'Minutes')}` },
+    { value: 'delivery_time', content: t('DELIVERY_TIME', 'Delivery time') },
+    { value: 'pickup_time', content: t('PICKUP_TIME', 'Pickup time') },
+    { value: 'preparation_time', content: t('PREPARATION_TIME', 'Preparation time') }
   ]
 
   const closeAlert = () => {

package/src/components/Stores/BusinessesList/index.js

@@ -5,6 +5,7 @@ import { Button, Switch, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { SingleBusiness } from '../SingleBusiness'
 import { CheckSquareFill, Square } from 'react-bootstrap-icons'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   BusinessListContainer,
@@ -39,7 +40,8 @@ export const BusinessesList = (props) => {
     selectedBusinessActiveState,
     setBusinessIds,
     handleGotToAdd,
-    citiesList
+    citiesList,
+    isUseQuery
   } = props
 
   const theme = useTheme()
@@ -124,6 +126,14 @@ export const BusinessesList = (props) => {
     setIsAllChecked(_isAllChecked)
   }, [JSON.stringify(businessList.businesses), businessIds])
 
+  useEffect(() => {
+    if (!isUseQuery || !pagination?.currentPage || !pagination?.pageSize || !pagination?.total) return
+    addQueryToUrl({
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize
+    })
+  }, [pagination?.currentPage, pagination?.pageSize, pagination?.total])
+
   return (
     <>
       {viewMethod === 'list' && (

package/src/components/Stores/BusinessesListing/index.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, useEvent, DashboardBusinessList as BusinessListController } from 'ordering-components-admin-external'
 import BsGrid from '@meronex/icons/bs/BsGrid'
 import BsViewList from '@meronex/icons/bs/BsViewList'
-import { getStorageItem, setStorageItem } from '../../../utils'
+import { getStorageItem, setStorageItem, removeQueryToUrl, addQueryToUrl } from '../../../utils'
 import { Modal, SideBar } from '../../Shared'
 import { useTheme } from 'styled-components'
 
@@ -53,10 +53,10 @@ const BusinessesListingUI = (props) => {
     filterValues,
     businessTypeSelected,
     inActiveBusinesses,
-    citiesList
+    citiesList,
+    isUseQuery
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -158,18 +158,19 @@ const BusinessesListingUI = (props) => {
     }
     if (method === 'card') {
       getPageBusinesses(50, 1)
+      removeQueryToUrl(['page', 'pageSize'])
     }
   }
 
   const handleOpenSync = () => {
     setOpenSync(true)
-    history.replace(`${location.pathname}?header=sync`)
+    addQueryToUrl({ header: 'sync' })
   }
 
   const handleCloseSync = () => {
     setMoveDistance(0)
     setOpenSync(false)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['header', 'tab'])
   }
 
   useEffect(() => {
@@ -203,6 +204,7 @@ const BusinessesListingUI = (props) => {
         {!noBusinesses && (
           <ViewContainer>
             <BusinessActiveStateFilter
+              isUseQuery={isUseQuery}
               selectedBusinessActiveState={selectedBusinessActiveState}
               handleChangeBusinessActiveState={handleChangeBusinessActiveState}
             />
@@ -269,6 +271,7 @@ const BusinessesListingUI = (props) => {
             selectedBusinessActiveState={selectedBusinessActiveState}
             handleGotToAdd={handleGotToAdd}
             citiesList={citiesList}
+            isUseQuery={isUseQuery && viewMethod === 'list'}
           />
         )}
       </BusinessListingContainer>
@@ -332,13 +335,24 @@ const BusinessesListingUI = (props) => {
 }
 
 export const BusinessesListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultPage = query.get('page') || 1
+  const defaultPageSize = query.get('pageSize') || 10
+  const defaultActive = query.get('active')
+
   const businessListingProps = {
     ...props,
     UIComponent: BusinessesListingUI,
     asDashboard: true,
     isSearchByBusinessName: true,
     isSearchByBusinessEmail: true,
-    isSearchByBusinessPhone: true
+    isSearchByBusinessPhone: true,
+    paginationSettings: {
+      initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
+      pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
+      controlType: 'pages'
+    },
+    defaultActive: defaultActive ? defaultActive === 'true' : true
   }
   return (
     <BusinessListController {...businessListingProps} />

package/src/components/Stores/ImportersButton/index.js

@@ -1,15 +1,15 @@
 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 { Upload } from 'react-bootstrap-icons'
 import { Button } from '../../../styles'
 import { ImportersListing } from '../ImportersListing'
 import { SideBar } from '../../Shared'
 import { CsvImportButtonWrapper } from './styles'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 export const ImportersButton = (props) => {
   const { setOpenSidebar } = props
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [openImporters, setOpenImporters] = useState(false)
@@ -18,13 +18,12 @@ export const ImportersButton = (props) => {
   const handleOpenImporters = () => {
     setOpenSidebar && setOpenSidebar('importer')
     setOpenImporters(true)
-
-    history.replace(`${location.pathname}?header=importers`)
+    addQueryToUrl({ header: 'importers' })
   }
 
   const handleCloseImporters = () => {
     setOpenImporters(false)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['header'])
   }
 
   useEffect(() => {

package/src/components/Stores/PaymentOption/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 RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
@@ -10,6 +10,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -35,7 +36,6 @@ export const PaymentOption = (props) => {
     handleDeletePaymethod
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -125,10 +125,7 @@ export const PaymentOption = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setPaymentTabs(tab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const paymethod = query.get('paymethod')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&paymethod=${paymethod}&payemthod_tab=${tab}`)
+      addQueryToUrl({ payemthod_tab: tab })
     }
   }
 

package/src/components/Stores/PaymentOptionMethods/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 RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
@@ -9,6 +9,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -41,7 +42,6 @@ export const PaymentOptionMethods = (props) => {
     title
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -133,10 +133,7 @@ export const PaymentOptionMethods = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setPaymentTabs(tab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const paymethod = query.get('paymethod')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&paymethod=${paymethod}&payemthod_tab=${tab}`)
+      addQueryToUrl({ payemthod_tab: tab })
     }
   }
 

package/src/components/Stores/PaymentOptionPaypal/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 RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
@@ -9,6 +9,7 @@ import { useTheme } from 'styled-components'
 import { ThreeDots, XLg } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { Confirm } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -39,7 +40,6 @@ export const PaymentOptionPaypal = (props) => {
     handleDeletePaymethod
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -133,10 +133,7 @@ export const PaymentOptionPaypal = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setPaymentTabs(tab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const paymethod = query.get('paymethod')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&paymethod=${paymethod}&payemthod_tab=${tab}`)
+      addQueryToUrl({ payemthod_tab: tab })
     }
   }
 

package/src/components/Stores/PaymentOptionSquare/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, PaymentOptionSquare as PaymentOptionSquareController } from 'ordering-components-admin-external'
 import { Button, IconButton, Input, Checkbox } from '../../../styles'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -12,6 +12,7 @@ import { TabOption, TabOptionName } from '../PaymentOptionStripeDirect/styles'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
 import SiSquare from '@meronex/icons/si/SiSquare'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -44,7 +45,6 @@ const PaymentOptionSquareUI = (props) => {
     handleChangeSandbox
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -115,10 +115,7 @@ const PaymentOptionSquareUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setPaymentTabs(tab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const paymethod = query.get('paymethod')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&paymethod=${paymethod}&payemthod_tab=${tab}`)
+      addQueryToUrl({ payemthod_tab: tab })
     }
   }