ordering-ui-admin-external 1.33.1 → 1.35.0

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

@@ -1,6 +1,9 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { AutoScroll } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
+
 import {
   ActiveStateFilterContainer,
   InnerContainer,
@@ -10,10 +13,27 @@ import {
 export const BusinessActiveStateFilter = (props) => {
   const {
     selectedBusinessActiveState,
-    handleChangeBusinessActiveState
+    handleChangeBusinessActiveState,
+    isUseQuery
   } = props
 
   const [, t] = useLanguage()
+  const query = new URLSearchParams(useLocation().search)
+  const defaultActive = query.get('active')
+
+  const handleClickTab = (active) => {
+    handleChangeBusinessActiveState(active)
+    addQueryToUrl({ active: active })
+  }
+
+  useEffect(() => {
+    if (!isUseQuery) return
+    if (defaultActive) {
+      handleChangeBusinessActiveState(defaultActive === 'true')
+      return
+    }
+    addQueryToUrl({ active: 'true' })
+  }, [])
 
   return (
     <>
@@ -22,13 +42,13 @@ export const BusinessActiveStateFilter = (props) => {
           <AutoScroll innerScroll scrollId='userActiveState'>
             <Tab
               active={selectedBusinessActiveState}
-              onClick={() => handleChangeBusinessActiveState()}
+              onClick={() => handleClickTab(true)}
             >
               {t('ACTIVE', 'Active')}
             </Tab>
             <Tab
               active={!selectedBusinessActiveState}
-              onClick={() => handleChangeBusinessActiveState()}
+              onClick={() => handleClickTab(false)}
             >
               {t('INACTIVE', 'Inactive')}
             </Tab>

package/src/components/Stores/BusinessAdd/BusinessDetails/index.js

@@ -81,7 +81,7 @@ export const BusinessDetails = (props) => {
                 apiKey={configs?.google_maps_api_key?.value}
                 location={formState?.changes?.location ?? defaultPosition}
                 mapControls={googleMapsControls}
-                handleChangeCenter={handleChangeCenter}
+                // handleChangeCenter={handleChangeCenter}
                 isFitCenter
               />
             </WrapperMap>

package/src/components/Stores/BusinessAdd/OrderTypePriceLevel/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, useConfig } from 'ordering-components-admin-external'
 import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
 import {
   Container,
@@ -11,14 +11,17 @@ import {
 export const OrderTypePriceLevel = (props) => {
   const { formState, changeFormState } = props
 
+  const [{ configs }] = useConfig()
   const [, t] = useLanguage()
 
+  const priceSymbol = configs?.format_number_currency?.value?.trim()
+
   const priceList = [
-    { key: '1', value: '$' },
-    { key: '2', value: '$$' },
-    { key: '3', value: '$$$' },
-    { key: '4', value: '$$$$' },
-    { key: '5', value: '$$$$$' }
+    { key: '1', value: `${priceSymbol}` },
+    { key: '2', value: `${Array(2).fill(priceSymbol).join('')}` },
+    { key: '3', value: `${Array(3).fill(priceSymbol).join('')}` },
+    { key: '4', value: `${Array(4).fill(priceSymbol).join('')}` },
+    { key: '5', value: `${Array(5).fill(priceSymbol).join('')}` }
   ]
 
   return (

package/src/components/Stores/BusinessAdd/PaymentMethods/index.js

@@ -36,7 +36,7 @@ export const PaymentMethods = (props) => {
         {!paymethodsList?.loading && paymethodsList?.paymethods.map((paymethod, idx) => (
           <PaymethodItem key={paymethod?.id} isBorderTop={idx === 0} onClick={() => handleChangeIds(paymethod.id)}>
             {paymethodIds.includes(paymethod?.id) ? <CheckSquareFill className='enabled' /> : <Square />}
-            <span>{paymethod?.name}</span>
+            <span>{t(paymethod?.gateway?.toUpperCase(), paymethod?.name)}</span>
           </PaymethodItem>
         ))}
       </ContentWrapper>

package/src/components/Stores/BusinessBrandListing/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,
   useUtils,
@@ -13,6 +13,8 @@ import { useTheme } from 'styled-components'
 import { Alert, SearchBar, SideBar } from '../../Shared'
 import { BusinessBrandGENDetail } from '../BusinessBrandGENDetail'
 import { BusinessBrandBUSIDetail } from '../BusinessBrandBUSIDetail'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
+
 import {
   BrandListingContainer,
   HeaderContainer,
@@ -48,7 +50,6 @@ const BusinessBrandListingUI = (props) => {
     setOpenDetail
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -67,7 +68,7 @@ const BusinessBrandListingUI = (props) => {
   const handleCloseSidebar = () => {
     setOpenDetail(false)
     setSelectedBrand(null)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id', 'tab'])
   }
 
   const handleOpenSideBar = (id) => {
@@ -93,7 +94,7 @@ const BusinessBrandListingUI = (props) => {
     if (isInvalid) return
     handleOpenSideBar(brandId)
     if (!isInitialRender) {
-      history.replace(`${location.pathname}?id=${brandId}`)
+      addQueryToUrl({ id: brandId })
     }
   }
 
@@ -144,8 +145,7 @@ const BusinessBrandListingUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setSelectedType(tab)
     if (!isInitialRender) {
-      const id = query.get('id')
-      history.replace(`${location.pathname}?id=${id}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Stores/BusinessDeliveryPickupMore/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 } from 'ordering-components-admin-external'
 import { BusinessDeliveryDetails } from '../BusinessDeliveryDetails'
 import { BusinessPickupDetails } from '../BusinessPickupDetails'
 import { BusinessEta } from '../BusinessEta'
 import { DragScroll } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -18,7 +19,6 @@ export const BusinessDeliveryPickupMore = (props) => {
     setIsExtendExtraOpen
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedTab, setSelectedTab] = useState('delivery')
@@ -37,9 +37,7 @@ export const BusinessDeliveryPickupMore = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setSelectedTab(tab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Stores/BusinessDeliveryZoneDetails/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,
   BusinessDeliveryZone as BusinessDeliveryZoneController
@@ -10,6 +10,7 @@ import { ThreeDots } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { Confirm } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -35,7 +36,6 @@ const BusinessDeliveryZoneDetailsUI = (props) => {
     handleSuccessUpdate
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -61,11 +61,7 @@ const BusinessDeliveryZoneDetailsUI = (props) => {
   const handleTabClick = (zoneTab, isInitialRender) => {
     setSelectedMenuOption(zoneTab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const tab = query.get('tab')
-      const zone = query.get('zone')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&zone=${zone}&zone_tab=${zoneTab}`)
+      addQueryToUrl({ zone_tab: zoneTab })
     }
   }
 

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

@@ -1,10 +1,11 @@
 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 { BusinessDeliveryZoneDetails } from '../BusinessDeliveryZoneDetails'
 import { SideBar } from '../../Shared'
 import { ChevronRight } from 'react-bootstrap-icons'
 import { Checkbox, LinkButton } from '../../../styles'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   ZoneContainer,
@@ -24,7 +25,6 @@ export const BusinessDeliveryZoneList = (props) => {
     handleChangeAllZoneState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [isOpenDetails, setIsOpenDetails] = useState(false)
@@ -34,11 +34,7 @@ export const BusinessDeliveryZoneList = (props) => {
     setIsOpenDetails(false)
     setIsExtendExtraOpen(false)
     setCurZone(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(['zone', 'zone_tab'])
   }
 
   const handleOpenZone = (e, zone, isInitialRender) => {
@@ -49,10 +45,7 @@ export const BusinessDeliveryZoneList = (props) => {
     setIsOpenDetails(true)
 
     if (!isInitialRender) {
-      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}&zone=${zone?.id}`)
+      addQueryToUrl({ zone: zone?.id })
     }
   }
 

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { BusinessInfoSettingList } from '../BusinessInfoSettingList'
 import { BusinessOwners } from '../BusinessOwners'
 import { BusinessTypes } from '../BusinessTypes'
@@ -9,6 +9,8 @@ import { BusinessImages } from '../BusinessImages'
 import { BusinessVideos } from '../BusinessVideos'
 import { SeoOptions } from '../SeoOptions'
 import { BusinessInformation } from '../BusinessInformation'
+import { addQueryToUrl } from '../../../utils'
+
 import {
   InfoConatiner,
   Container
@@ -32,16 +34,13 @@ export const BusinessDetail = (props) => {
     handleUpdateBusinessState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedInfoItem, setSelctedInfoItem] = useState('information')
 
   const handleSelectInfoItem = (tab) => {
     setSelctedInfoItem(tab)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}`)
+    addQueryToUrl({ tab: tab })
   }
 
   useEffect(() => {

package/src/components/Stores/BusinessDetails/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 { useSession, useLanguage, BusinessDetails as BusinessDetailsController } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { BusinessSummary } from '../BusinessSummary'
@@ -22,6 +22,7 @@ import { BusinessPlaceGroupList } from '../BusinessPlaceGroupList'
 import { SpoonityApiKey } from '../SpoonityApiKey'
 
 import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   BarContainer
@@ -55,7 +56,6 @@ export const BusinessDetailsUI = (props) => {
     siteState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -101,8 +101,7 @@ export const BusinessDetailsUI = (props) => {
     setSelectedItem(item)
     setExtraOpen(true)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      history.replace(`${location.pathname}?id=${businessId}&section=${item}`)
+      addQueryToUrl({ section: item })
     }
   }
 
@@ -110,8 +109,7 @@ export const BusinessDetailsUI = (props) => {
     setIsExtendExtraOpen(false)
     setExtraOpen(false)
     setSelectedItem(null)
-    const businessId = query.get('id')
-    history.replace(`${location.pathname}?id=${businessId}`)
+    removeQueryToUrl(['section', 'tab', 'business_type', 'paymethod', 'payemthod_tab', 'setting_tab', 'menu', 'zone', 'zone_tab', 'wallet'])
   }
 
   useEffect(() => {

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory } from 'react-router-dom'
 import {
   useLanguage,
   useUtils,
@@ -11,6 +10,8 @@ import { List as MenuIcon } from 'react-bootstrap-icons'
 import { Button, IconButton, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 import { Alert, SearchBar, SideBar, ColumnAllowSettingPopover } from '../../Shared'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
+
 import {
   BrandListingContainer,
   HeaderContainer,
@@ -35,7 +36,6 @@ const BusinessDeviceListingUI = (props) => {
     handleUpdateDeviceList
   } = props
 
-  const history = useHistory()
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ optimizeImage }] = useUtils()
@@ -63,7 +63,7 @@ const BusinessDeviceListingUI = (props) => {
   const handleCloseSidebar = () => {
     setIsOpen(false)
     setSelectedDevice(null)
-    history.replace(`${location.pathname}`)
+    removeQueryToUrl(['id'])
   }
 
   const handleOpenSideBar = (id) => {
@@ -88,7 +88,7 @@ const BusinessDeviceListingUI = (props) => {
     if (isInvalid) return
     handleOpenSideBar(brandId)
     if (!isInitialRender) {
-      history.replace(`${location.pathname}?id=${brandId}`)
+      addQueryToUrl({ id: brandId })
     }
   }
 

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import { useLanguage, DragAndDrop, ExamineClick, BusinessFormDetails as BusinessFormDetailsController } from 'ordering-components-admin-external'
+import { useLanguage, DragAndDrop, ExamineClick, BusinessFormDetails as BusinessFormDetailsController, useConfig } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, Modal, ImageCrop, ColorPicker } from '../../Shared'
 import { bytesConverter, shape, ribbonValues } from '../../../utils'
@@ -47,17 +47,19 @@ const BusinessInformationUI = (props) => {
 
   const formMethods = useForm()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
   const headerImageInputRef = useRef(null)
   const logoImageInputRef = useRef(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+  const priceSymbol = configs?.format_number_currency?.value?.trim()
 
   const priceList = [
-    { key: '1', value: '$' },
-    { key: '2', value: '$$' },
-    { key: '3', value: '$$$' },
-    { key: '4', value: '$$$$' },
-    { key: '5', value: '$$$$$' }
+    { key: '1', value: `${priceSymbol}` },
+    { key: '2', value: `${Array(2).fill(priceSymbol).join('')}` },
+    { key: '3', value: `${Array(3).fill(priceSymbol).join('')}` },
+    { key: '4', value: `${Array(4).fill(priceSymbol).join('')}` },
+    { key: '5', value: `${Array(5).fill(priceSymbol).join('')}` }
   ]
 
   const socialOriginalURL = {

package/src/components/Stores/BusinessInformation/styles.js

@@ -299,6 +299,7 @@ export const PriceFilterItem = styled.div`
     font-weight: 400;
     font-size: 14px;
     margin-left: 8px;
+    text-wrap: nowrap;
     ${props => props.theme.rtl && css`
       margin-right: 8px;
       margin-left: 0px;

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, BusinessMenu as BusinessMenuController } from 'ordering-components-admin-external'
 import { BusinessMenuOptions } from '../BusinessMenuOptions'
 import { Confirm, Modal, SearchBar } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button, Checkbox, LinkButton } from '../../../styles'
 import { ChevronRight } from 'react-bootstrap-icons'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   MainContainer,
@@ -33,7 +34,6 @@ const BusinessMenuUI = (props) => {
     sitesState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -59,10 +59,7 @@ const BusinessMenuUI = (props) => {
     setCurrentMenu(null)
     if (!isTab) {
       setInitMenuId(null)
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const tab = isSelectedSharedMenus ? 'shared_menus' : 'menu'
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}`)
+      removeQueryToUrl(['menu', 'product'])
     }
   }
 
@@ -71,10 +68,7 @@ const BusinessMenuUI = (props) => {
     if (isInvalid) return
     handleOpenOptions('option', menu)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      const tab = isSelectedSharedMenus ? 'shared_menus' : 'menu'
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&menu=${menu.id}`)
+      addQueryToUrl({ menu: menu.id })
     }
   }
 
@@ -88,10 +82,8 @@ const BusinessMenuUI = (props) => {
     handleCloseOption(true)
     setIsSelectedSharedMenus(isShared)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
       const tab = isShared ? 'shared_menus' : 'menu'
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

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

@@ -28,7 +28,6 @@ export const BusinessMenuBasicOptions = (props) => {
     selectedProducts,
     setSelectedProducts,
     handleChangeScheduleState,
-
     subCategoriesList
   } = props
   const [, t] = useLanguage()
@@ -40,7 +39,9 @@ export const BusinessMenuBasicOptions = (props) => {
     { value: 2, key: 'pickup', content: t('PICKUP', 'Pickup') },
     { value: 3, key: 'eatin', content: t('EAT_IN', 'Eat in') },
     { value: 4, key: 'curbside', content: t('CURBSIDE', 'Curbside') },
-    { value: 5, key: 'driver_thru', content: t('DRIVE_THRU', 'Drive thru') }
+    { value: 5, key: 'driver_thru', content: t('DRIVE_THRU', 'Drive thru') },
+    { value: 7, key: 'catering_delivery', content: t('CATERING_DELIVERY', 'Catering delivery') },
+    { value: 8, key: 'catering_pickup', content: t('CATERING_PICKUP', 'Catering pickup') }
   ]
 
   const closeAlert = () => {

package/src/components/Stores/BusinessMenuOptions/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,
   BusinessMenuOptions as BusinessMenuOptionsController
@@ -15,6 +15,7 @@ import { BusinessMenuBasicOptions } from '../BusinessMenuBasicOptions'
 import { BusinessMenuCustomFields } from '../BusinessMenuCustomFields'
 import { BusinessSharedMenuProducts } from '../BusinessSharedMenuProducts'
 import { BusinessMenuChannels } from '../BusinessMenuChannels'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -39,7 +40,6 @@ const BusinessMenuOptionsUI = (props) => {
     sitesState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -93,11 +93,7 @@ const BusinessMenuOptionsUI = (props) => {
 
   const handleTabClick = (settingTab) => {
     setSelectedMenuOption(settingTab)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    const tab = isSelectedSharedMenus ? 'shared_menus' : 'menu'
-    const menu = query.get('menu')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}&menu=${menu}&setting_tab=${settingTab}`)
+    addQueryToUrl({ setting_tab: settingTab })
   }
 
   useEffect(() => {

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

@@ -1,8 +1,9 @@
 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 { Button, Input } from '../../../styles'
 import { Alert } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   BusinessOrderingChannelsContainer,
@@ -23,7 +24,6 @@ export const BusinessOrderingChannels = (props) => {
     setFormState
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [slug, setSlug] = useState('')
@@ -61,9 +61,7 @@ export const BusinessOrderingChannels = (props) => {
   const handleChangeOption = (tab, isInitialRender) => {
     setSelectedOption(tab)
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Stores/BusinessPaymentMethods/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 {
   useLanguage,
@@ -21,6 +21,7 @@ import { PaymentOptionPaypal } from '../PaymentOptionPaypal'
 import { PaymentOptionSquare } from '../PaymentOptionSquare'
 import { PaymentOptionMethods } from '../PaymentOptionMethods'
 import { BusinessWalletsList } from '../BusinessWalletsList'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   MainContainer,
@@ -65,7 +66,6 @@ const BusinessPaymentMethodsUI = (props) => {
     handleTutorialContinue
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
@@ -83,7 +83,9 @@ const BusinessPaymentMethodsUI = (props) => {
     { value: 2, text: t('PICKUP', 'Pickup') },
     { value: 3, text: t('EATIN', 'Eatin') },
     { value: 4, text: t('CURBSIDE', 'Curbside') },
-    { value: 5, text: t('DRIVER_THRU', 'Driver thru') }
+    { value: 5, text: t('DRIVER_THRU', 'Driver thru') },
+    { value: 7, text: t('CATERING_DELIVERY', 'Catering delivery') },
+    { value: 8, text: t('CATERING_PICKUP', 'Catering pickup') }
   ]
 
   const methodsPay = ['google_pay', 'apple_pay']
@@ -120,9 +122,7 @@ const BusinessPaymentMethodsUI = (props) => {
       setIsExtendExtraOpen(true)
     }
     if (!isInitialRender) {
-      const businessId = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?id=${businessId}&section=${section}&paymethod=${paymethodId}`)
+      addQueryToUrl({ paymethod: paymethodId })
     }
   }
 
@@ -148,9 +148,7 @@ const BusinessPaymentMethodsUI = (props) => {
     setIsEdit(false)
     setSelectedBusinessPaymethod(null)
     setIsSuccessDeleted(false)
-    const businessId = query.get('id')
-    const section = query.get('section')
-    history.replace(`${location.pathname}?id=${businessId}&section=${section}`)
+    removeQueryToUrl(['paymethod'])
   }
 
   useEffect(() => {