ordering-ui-admin-external 1.33.1 → 1.35.0

package/src/components/Stores/PaymentOptionStripeDirect/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 PaymentOptionStripeDirect = (props) => {
     handleDeletePaymethod
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -131,10 +131,7 @@ export const PaymentOptionStripeDirect = (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/PaymethodOptionPaypalExpress/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 PaymethodOptionPaypalExpress = (props) => {
     handleDeletePaymethod
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -127,10 +127,7 @@ export const PaymethodOptionPaypalExpress = (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/PaymethodOptionStripeConnect/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 BilStripe from '@meronex/icons/bi/BilStripe'
 import { Button, Input, IconButton } from '../../../styles'
@@ -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,
@@ -42,7 +43,6 @@ export const PaymethodOptionStripeConnect = (props) => {
     handleDeletePaymethod
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -126,10 +126,7 @@ export const PaymethodOptionStripeConnect = (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/PaymethodOptionStripeRedirect/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 PaymethodOptionStripeRedirect = (props) => {
     handleDeletePaymethod
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -131,10 +131,7 @@ export const PaymethodOptionStripeRedirect = (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/ProductDetails/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 { ProductDetatils as ProductDetatilsController } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { MoreSidebarLayout, Personalization } from '../../Shared'
@@ -12,6 +12,7 @@ import { ProductVideos } from '../ProductVideos'
 import { ProductMainDetails } from '../ProductMainDetails'
 import { BusinessServiceProfessionals } from '../BusinessServiceProfessionals'
 import { ServiceDetail } from '../ServiceDetail'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   Container
@@ -39,7 +40,7 @@ const ProductDetailsUI = (props) => {
     handleChangeRibbon,
     cleanFormState
   } = props
-  const history = useHistory()
+
   const query = new URLSearchParams(useLocation().search)
   const { width } = useWindowSize()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -53,9 +54,7 @@ const ProductDetailsUI = (props) => {
     setShowOption(option)
     setExtraOpen(true)
     if (!isInitialRender) {
-      const category = query.get('category')
-      const product = query.get('product')
-      history.replace(`${location.pathname}?category=${category}&product=${product}&section=${option}`)
+      addQueryToUrl({ section: option })
     }
   }
 
@@ -63,9 +62,7 @@ const ProductDetailsUI = (props) => {
     setIsExtendExtraOpen(false)
     setExtraOpen(false)
     setShowOption(null)
-    const category = query.get('category')
-    const product = query.get('product')
-    history.replace(`${location.pathname}?category=${category}&product=${product}`)
+    removeQueryToUrl(['section', 'tab', 'tag', 'ingredient', 'extra'])
   }
 
   const actionSidebar = (value) => {

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useLanguage, ProductExtras as ProductExtrasController } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { Button, Checkbox, LinkButton } from '../../../styles'
+import { Button, Checkbox, IconButton, Input, LinkButton } from '../../../styles'
 import { Alert, Confirm, Modal } from '../../Shared'
 import { ProductExtraOptions } from '../ProductExtraOptions'
-import { ChevronRight } from 'react-bootstrap-icons'
+import { ChevronRight, Pencil } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   MainContainer,
@@ -18,7 +19,10 @@ import {
   Details,
   ExtraAddForm,
   AddButtonWrapper,
-  DragImageWrapper
+  DragImageWrapper,
+  OptionNameWrapper,
+  ExtraOptionEditContainer,
+  FormControl
 } from './styles'
 
 const ProductExtrasUI = (props) => {
@@ -42,7 +46,6 @@ const ProductExtrasUI = (props) => {
     handleUpdateExtraState,
     setExtrasState
   } = props
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -52,10 +55,14 @@ const ProductExtrasUI = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
 
   const [openExtraDetails, setOpenExtraDetails] = useState(false)
+  const [openExtraEdit, setOpenExtraEdit] = useState(false)
   const [currentExtra, setCurrentExtra] = useState(null)
   const [extraIds, setExtraIds] = useState([])
   const [isCheckboxClicked, setIsCheckboxClicked] = useState(false)
   const [timer, setTimer] = useState(null)
+  const [extraSelected, setExtraSelected] = useState(null)
+
+  const extraInputRef = useRef()
 
   const handleOpenExtraDetails = (e, extra, isInitialRender) => {
     if (e?.target?.closest('.extra-checkbox') || e?.target?.closest('.draggable-dots')) return
@@ -63,10 +70,7 @@ const ProductExtrasUI = (props) => {
     setCurrentExtra(extra)
     setOpenExtraDetails(true)
     if (!isInitialRender) {
-      const category = query.get('category')
-      const product = query.get('product')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}&extra=${extra.id}`)
+      addQueryToUrl({ extra: extra.id })
     }
   }
 
@@ -74,10 +78,7 @@ const ProductExtrasUI = (props) => {
     setOpenExtraDetails(false)
     setIsExtendExtraOpen(false)
     setCurrentExtra(null)
-    const category = query.get('category')
-    const product = query.get('product')
-    const section = query.get('section')
-    history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}`)
+    removeQueryToUrl(['extra'])
   }
 
   const handleExtraState = (id, checked) => {
@@ -89,6 +90,17 @@ const ProductExtrasUI = (props) => {
     setIsCheckboxClicked(true)
   }
 
+  const handleOpenEdit = (event, extra) => {
+    event.stopPropagation()
+    setExtraSelected(extra)
+    setOpenExtraEdit(true)
+  }
+
+  const handleCloseEdit = () => {
+    setOpenExtraEdit(false)
+    setExtraSelected(null)
+  }
+
   const onChangeAddExtraInput = (e) => {
     e.persist()
     clearTimeout(timer)
@@ -100,6 +112,21 @@ const ProductExtrasUI = (props) => {
     setTimer(_timer)
   }
 
+  const handleChangeExtra = async (id, changes) => {
+    if (!extraInputRef?.current?.value) {
+      setAlertState({
+        open: true,
+        content: [t(
+          'VALIDATION_ERROR_REQUIRED',
+          'Name is required'
+        ).replace('_attribute_', t('NAME', 'Name'))]
+      })
+      return
+    }
+    await handleUpdateExtraState(id, changes)
+    handleCloseEdit()
+  }
+
   useEffect(() => {
     let _extraIds = []
     if (productState.product?.extras) {
@@ -175,7 +202,12 @@ const ProductExtrasUI = (props) => {
                 />
               </CheckboxContainer>
               <MoreContainer>
-                <span>{extra.name}</span>
+                <OptionNameWrapper>
+                  <span className='name'>{extra.name}</span>
+                  <IconButton onClick={(e) => handleOpenEdit(e, extra)}>
+                    <Pencil />
+                  </IconButton>
+                </OptionNameWrapper>
                 <Details>
                   <ChevronRight />
                 </Details>
@@ -248,6 +280,25 @@ const ProductExtrasUI = (props) => {
           )}
         </>
       )}
+      <Modal
+        width='760px'
+        open={openExtraEdit}
+        onClose={() => handleCloseEdit()}
+        padding='20px'
+      >
+        <ExtraOptionEditContainer>
+          <h2>{t('PRODUCT_OPTION', 'Product option')}</h2>
+          <FormControl>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              placeholder={t('NAME', 'Name')}
+              defaultValue={extraSelected?.name}
+              ref={extraInputRef}
+            />
+          </FormControl>
+          <Button color='primary' onClick={() => handleChangeExtra(extraSelected?.id, { name: extraInputRef?.current?.value })}>{t('SAVE', 'Save')}</Button>
+        </ExtraOptionEditContainer>
+      </Modal>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}
         content={alertState.content}

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

@@ -81,11 +81,51 @@ export const MoreContainer = styled.div`
     font-size: 20px;
     color: ${props => props.theme.colors.headingColor};
   }
+`
 
-  > span {
+export const OptionNameWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  > span.name {
     font-size: 14px;
     padding: 0 10px;
   }
+  button {
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    svg {
+      font-size: 14px;
+    }
+  }
+`
+
+export const ExtraOptionEditContainer = styled.div`
+  padding: 20px;
+
+  > h2 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 30px;
+  }
+  button {
+    display: block;
+    margin-top: 30px;
+    height: 44px;
+    border-radius: 8px;
+    margin-left: auto;
+  }
+`
+
+export const FormControl = styled.div`
+  label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
 `
 
 export const Details = styled.div`

package/src/components/Stores/ProductIngredient/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 } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button, LinkButton } from '../../../styles'
 import { ProductIngredientDetails } from '../ProductIngredientDetails'
 import { Modal } from '../../Shared'
 import { ChevronRight } from 'react-bootstrap-icons'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   MainContainer,
@@ -21,7 +22,6 @@ export const ProductIngredient = (props) => {
     setIsExtendExtraOpen
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -33,10 +33,7 @@ export const ProductIngredient = (props) => {
     setIsExtendExtraOpen(true)
     setOpenDetails(true)
     if (!isInitialRender) {
-      const category = query.get('category')
-      const product = query.get('product')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}&ingredient=${ingredient?.id}`)
+      addQueryToUrl({ ingredient: ingredient?.id })
     }
   }
 
@@ -44,10 +41,7 @@ export const ProductIngredient = (props) => {
     setOpenDetails(false)
     setIsExtendExtraOpen(false)
     setCurrentIngredient(null)
-    const category = query.get('category')
-    const product = query.get('product')
-    const section = query.get('section')
-    history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}`)
+    removeQueryToUrl(['ingredient'])
   }
 
   useEffect(() => {

package/src/components/Stores/ProductMainDetails/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 } from 'ordering-components-admin-external'
 import { DragScroll } from '../../Shared'
 import { SeoOptions } from '../SeoOptions'
 import { ProductDetatilsInformation } from '../ProductDetatilsInformation'
 import { ProductDetailsAdvanced } from '../ProductDetailsAdvanced'
 import { ProductTagsList } from '../ProductTagsList'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -34,7 +35,7 @@ export const ProductMainDetails = (props) => {
     setFees,
     cleanFormState
   } = props
-  const history = useHistory()
+
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
 
@@ -49,10 +50,7 @@ export const ProductMainDetails = (props) => {
     setSelectedOption(tab)
     setIsExtendExtraOpen(false)
     if (!isInitialRender) {
-      const category = query.get('category')
-      const product = query.get('product')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Stores/ProductTagsList/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, ProductTagsList as ProductTagsController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { SearchBar, SideBar } from '../../Shared'
 import { Button, Checkbox, LinkButton } from '../../../styles'
 import { ChevronRight, Image as ImageIcon } from 'react-bootstrap-icons'
 import { ProductTagDetails } from '../ProductTagDetails'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   TagsListContainer,
@@ -33,7 +34,6 @@ const ProductTagsListUI = (props) => {
     handleSelectAllTags
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedTag, setSelectedTag] = useState(null)
@@ -48,11 +48,7 @@ const ProductTagsListUI = (props) => {
     setIsOpenTagDetail(true)
 
     if (!isInitialRender) {
-      const category = query.get('category')
-      const product = query.get('product')
-      const section = query.get('section')
-      const tab = query.get('tab')
-      history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}&tab=${tab}&tag=${tag?.id}`)
+      addQueryToUrl({ tag: tag?.id })
     }
   }
 
@@ -60,11 +56,7 @@ const ProductTagsListUI = (props) => {
     setIsOpenTagDetail(false)
     setIsExtendExtraOpen(false)
     setSelectedTag(null)
-    const category = query.get('category')
-    const product = query.get('product')
-    const section = query.get('section')
-    const tab = query.get('tab')
-    history.replace(`${location.pathname}?category=${category}&product=${product}&section=${section}&tab=${tab}`)
+    removeQueryToUrl(['tag'])
   }
 
   useEffect(() => {

package/src/components/Users/CustomerCashWallet/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, UserWallet as UserWalletController } from 'ordering-components-admin-external'
 import { CustomerCashWalletDetails } from '../CustomerCashWalletDetails'
 import { CustomerWalletEvents } from '../CustomerWalletEvents'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -11,7 +12,6 @@ import {
 } from './styles'
 
 const CustomerCashWalletUI = (props) => {
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [showOption, setShowOption] = useState('cash_wallet')
@@ -19,10 +19,7 @@ const CustomerCashWalletUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setShowOption(tab)
     if (!isInitialRender) {
-      const enabled = query.get('enabled')
-      const id = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${section}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }
 

package/src/components/Users/CustomerDetails/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 {
   UserDetails as UserDetailsController,
   useLanguage,
@@ -13,6 +13,7 @@ import { UserDetails } from '../UserDetails'
 import { CustomerCashWallet } from '../CustomerCashWallet'
 import { Confirm, SideBar } from '../../Shared'
 import { IconButton, Switch } from '../../../styles'
+import { addQueryToUrl, removeQueryToUrl } from '../../../utils'
 
 import {
   DetailsContainer,
@@ -36,16 +37,17 @@ const CustomerDetailsUI = (props) => {
     handleDeleteUser,
     handleParentSidebarMove,
     handleChangeActiveUser,
-    setSideBarWidth
+    setSideBarWidth,
+    userId
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const { width } = useWindowSize()
 
+  const firstRender = useRef(true)
   const [showOption, setShowOption] = useState(null)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isOpenMenu, setIsOpenMenu] = useState(false)
@@ -77,10 +79,9 @@ const CustomerDetailsUI = (props) => {
     handleParentSidebarMove(isExpand ? width / 2 : 500)
     setIsOpenMenu(true)
     if (!isInitialRender) {
-      const enabled = query.get('enabled')
-      const id = query.get('id')
-      history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${key}`)
+      addQueryToUrl({ section: key })
     }
+    firstRender.current = false
   }
 
   const handleCloseMenu = () => {
@@ -89,9 +90,7 @@ const CustomerDetailsUI = (props) => {
     setShowOption(null)
     setIsOpenMenu(false)
     setMenuMoveDistance(0)
-    const enabled = query.get('enabled')
-    const id = query.get('id')
-    history.replace(`${location.pathname}?eanbled=${enabled}&id=${id}`)
+    removeQueryToUrl(['section', 'tab'])
   }
 
   const expandSidebar = () => {
@@ -102,10 +101,13 @@ const CustomerDetailsUI = (props) => {
   }
 
   useEffect(() => {
+    if (firstRender.current) return
     handleParentSidebarMove(0)
     setIsOpenMenu(false)
     setShowOption(null)
-  }, [userState?.user?.id])
+    setSideBarWidth(500)
+    removeQueryToUrl(['section', 'tab'])
+  }, [userId])
 
   useEffect(() => {
     if (userState.loading) return

package/src/components/Users/CustomerPointsWallet/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, UserWallet as UserWalletController } from 'ordering-components-admin-external'
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import { CustomerWalletEvents } from '../CustomerWalletEvents'
 import { Button, Input, TextArea } from '../../../styles'
 import { Alert } from '../../Shared'
+import { addQueryToUrl } from '../../../utils'
 
 import {
   Container,
@@ -33,7 +34,6 @@ const CustomerPointsWalletUI = (props) => {
     handleReduceWalletMoney
   } = props
 
-  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -44,10 +44,7 @@ const CustomerPointsWalletUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setShowOption(tab)
     if (!isInitialRender) {
-      const enabled = query.get('enabled')
-      const id = query.get('id')
-      const section = query.get('section')
-      history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${section}&tab=${tab}`)
+      addQueryToUrl({ tab: tab })
     }
   }