ordering-ui-admin-external 1.14.3 → 1.15.1

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, 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'
@@ -41,6 +42,8 @@ export const PaymethodOptionStripeConnect = (props) => {
     handleDeletePaymethod
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -120,6 +123,25 @@ export const PaymethodOptionStripeConnect = (props) => {
     if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
+  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}`)
+    }
+  }
+
+  useEffect(() => {
+    const payemthodTab = query.get('payemthod_tab')
+    if (payemthodTab) {
+      handleTabClick(Number(payemthodTab), true)
+    } else {
+      handleTabClick(0)
+    }
+  }, [])
+
   return (
     <>
       <Container id='stripe_connect'>
@@ -151,21 +173,21 @@ export const PaymethodOptionStripeConnect = (props) => {
         <TabsContainer>
           <Tab
             active={paymentTabs === 0}
-            onClick={() => setPaymentTabs(0)}
+            onClick={() => handleTabClick(0)}
           >
             {t('GENERAL', 'General')}
           </Tab>
           {sitesState?.sites?.length > 0 && (
             <Tab
               active={paymentTabs === 1}
-              onClick={() => setPaymentTabs(1)}
+              onClick={() => handleTabClick(1)}
             >
               {t('CHANNELS', 'Channels')}
             </Tab>
           )}
           <Tab
             active={paymentTabs === 2}
-            onClick={() => setPaymentTabs(2)}
+            onClick={() => handleTabClick(2)}
           >
             {t('ORDER_TYPE', 'Order type')}
           </Tab>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, 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'
@@ -38,6 +39,8 @@ export const PaymethodOptionStripeRedirect = (props) => {
     handleDeletePaymethod
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -125,6 +128,25 @@ export const PaymethodOptionStripeRedirect = (props) => {
     if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.sites, changesState?.allowed_order_types])
 
+  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}`)
+    }
+  }
+
+  useEffect(() => {
+    const payemthodTab = query.get('payemthod_tab')
+    if (payemthodTab) {
+      handleTabClick(Number(payemthodTab), true)
+    } else {
+      handleTabClick(0)
+    }
+  }, [])
+
   return (
     <>
       <Container id='stripe_redirect'>
@@ -156,21 +178,21 @@ export const PaymethodOptionStripeRedirect = (props) => {
         <TabsContainer>
           <Tab
             active={paymentTabs === 0}
-            onClick={() => setPaymentTabs(0)}
+            onClick={() => handleTabClick(0)}
           >
             {t('GENERAL', 'General')}
           </Tab>
           {sitesState?.sites?.length > 0 && (
             <Tab
               active={paymentTabs === 1}
-              onClick={() => setPaymentTabs(1)}
+              onClick={() => handleTabClick(1)}
             >
               {t('CHANNELS', 'Channels')}
             </Tab>
           )}
           <Tab
             active={paymentTabs === 2}
-            onClick={() => setPaymentTabs(2)}
+            onClick={() => handleTabClick(2)}
           >
             {t('ORDER_TYPE', 'Order type')}
           </Tab>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { ProductDetatils as ProductDetatilsController } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { MoreSidebarLayout, Personalization } from '../../Shared'
@@ -38,22 +39,32 @@ const ProductDetailsUI = (props) => {
     handleChangeRibbon,
     cleanFormState
   } = props
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const { width } = useWindowSize()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
   const [isExtendExtraOpen, setIsExtendExtraOpen] = useState(false)
   const [showOption, setShowOption] = useState(null)
 
-  const handleShowOption = (option) => {
+  const handleShowOption = (option, isInitialRender) => {
     setIsExtendExtraOpen(false)
     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}`)
+    }
   }
 
   const handleCloseExtraOpen = () => {
     setIsExtendExtraOpen(false)
     setExtraOpen(false)
     setShowOption(null)
+    const category = query.get('category')
+    const product = query.get('product')
+    history.replace(`${location.pathname}?category=${category}&product=${product}`)
   }
 
   const actionSidebar = (value) => {
@@ -115,6 +126,13 @@ const ProductDetailsUI = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
+  useEffect(() => {
+    const section = query.get('section')
+    if (section) {
+      handleShowOption(section, true)
+    }
+  }, [])
+
   return (
     <Container id='product_details'>
       {(!isExtendExtraOpen || width < 1000) && (

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ProductExtras as ProductExtrasController } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button, Checkbox } from '../../../styles'
@@ -42,6 +43,8 @@ const ProductExtrasUI = (props) => {
     handleDragEnd,
     handleUpdateExtraState
   } = props
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -54,17 +57,27 @@ const ProductExtrasUI = (props) => {
   const [extraIds, setExtraIds] = useState([])
   const [isCheckboxClicked, setIsCheckboxClicked] = useState(false)
 
-  const handleOpenExtraDetails = (e, extra) => {
-    if (e.target.closest('.extra-checkbox') || e.target.closest('.draggable-dots')) return
+  const handleOpenExtraDetails = (e, extra, isInitialRender) => {
+    if (e?.target?.closest('.extra-checkbox') || e?.target?.closest('.draggable-dots')) return
     setIsExtendExtraOpen(true)
     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}`)
+    }
   }
 
   const handleCloseExtraDetails = () => {
     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}`)
   }
 
   const addExtraListener = (e) => {
@@ -112,6 +125,14 @@ const ProductExtrasUI = (props) => {
     }
   }, [productState, extrasState])
 
+  useEffect(() => {
+    const extraId = query.get('extra')
+    if (extraId) {
+      const initExtra = extrasState?.extras.find(extra => extra.id === Number(extraId))
+      initExtra && handleOpenExtraDetails(null, initExtra, true)
+    }
+  }, [])
+
   return (
     <MainContainer>
       <ProductExtrasContainer>

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button } from '../../../styles'
@@ -20,23 +21,43 @@ export const ProductIngredient = (props) => {
     setIsExtendExtraOpen
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [openDetails, setOpenDetails] = useState(false)
   const [currentIngredient, setCurrentIngredient] = useState(null)
 
-  const handleOpenIngredient = (ingredient) => {
+  const handleOpenIngredient = (ingredient, isInitialRender) => {
     setCurrentIngredient(ingredient)
     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}`)
+    }
   }
 
   const handleCloseDetails = () => {
     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}`)
   }
 
+  useEffect(() => {
+    const ingredientId = query.get('ingredient')
+    if (ingredientId) {
+      const initIngredient = product.ingredients.find(ingredient => ingredient.id === Number(ingredientId))
+      initIngredient && handleOpenIngredient(initIngredient, true)
+    }
+  }, [])
+
   return (
     <MainContainer>
       <IngredientContainer>

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { DragScroll } from '../../Shared'
 import { SeoOptions } from '../SeoOptions'
@@ -33,6 +34,8 @@ export const ProductMainDetails = (props) => {
     setFees,
     cleanFormState
   } = props
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
 
   const [selectedOption, setSelectedOption] = useState('information')
@@ -42,11 +45,26 @@ export const ProductMainDetails = (props) => {
     { key: 'labels', content: t('LABELS', 'Labels') },
     { key: 'seo_options', content: t('SEO_OPTIONS', 'SEO options') }
   ]
-  const handleSelectOption = (tab) => {
+  const handleSelectOption = (tab, isInitialRender) => {
     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}`)
+    }
   }
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleSelectOption(tab, true)
+    } else {
+      handleSelectOption(selectedOption)
+    }
+  }, [])
+
   return (
     <Container maxLimit={isExtendExtraOpen}>
       <h1>{t('PRODUCT_DETAILS', 'Product details')}</h1>

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, 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'
@@ -32,25 +33,49 @@ const ProductTagsListUI = (props) => {
     handleSelectAllTags
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedTag, setSelectedTag] = useState(null)
   const [isOpenTagDetail, setIsOpenTagDetail] = useState(false)
 
-  const handleOpenProductTagDetail = (e, tag) => {
-    const isInvalid = e.target.closest('.product-tag-checkbox')
+  const handleOpenProductTagDetail = (e, tag, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.product-tag-checkbox')
     if (isInvalid) return
 
     setSelectedTag(tag)
     setIsExtendExtraOpen(true)
     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}`)
+    }
   }
 
   const handleCloseDetail = () => {
     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}`)
   }
 
+  useEffect(() => {
+    if (tagsState.loading) return
+    const tagId = query.get('tag')
+    if (tagId) {
+      const initTag = tagsState.tags.find(tag => tag.id === Number(tagId))
+      handleOpenProductTagDetail(null, initTag, true)
+    }
+  }, [tagsState.loading])
+
   return (
     <>
       <TagsListContainer>

package/src/components/Users/CustomerCashWallet/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, UserWallet as UserWalletController } from 'ordering-components-admin-external'
 import { CustomerCashWalletDetails } from '../CustomerCashWalletDetails'
 import { CustomerWalletEvents } from '../CustomerWalletEvents'
@@ -10,22 +11,43 @@ import {
 } from './styles'
 
 const CustomerCashWalletUI = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [showOption, setShowOption] = useState('cash_wallet')
 
+  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}`)
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(showOption)
+    }
+  }, [])
+
   return (
     <Container>
       <h1>{t('CASH_WALLET', 'Cash wallet')}</h1>
       <Tabs>
         <Tab
           active={showOption === 'cash_wallet'}
-          onClick={() => setShowOption('cash_wallet')}
+          onClick={() => handleTabClick('cash_wallet')}
         >
           {t('CASH_WALLET', 'Cash wallet')}
         </Tab>
         <Tab
           active={showOption === 'history'}
-          onClick={() => setShowOption('history')}
+          onClick={() => handleTabClick('history')}
         >
           {t('TRANSACTION_HISTORY', 'Transaction history')}
         </Tab>

package/src/components/Users/CustomerDetails/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   UserDetails as UserDetailsController,
   useLanguage,
@@ -37,6 +38,8 @@ const CustomerDetailsUI = (props) => {
     handleChangeActiveUser
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -67,10 +70,15 @@ const CustomerDetailsUI = (props) => {
     })
   }
 
-  const handleClickMenu = (key) => {
+  const handleClickMenu = (key, isInitialRender) => {
     setShowOption(key)
     handleParentSidebarMove(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}`)
+    }
   }
 
   const handleCloseMenu = () => {
@@ -78,6 +86,9 @@ 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}`)
   }
 
   const expandSidebar = () => {
@@ -97,6 +108,14 @@ const CustomerDetailsUI = (props) => {
     if (isOpenMenu) setIsExpand(false)
   }, [isOpenMenu])
 
+  useEffect(() => {
+    if (userState.loading) return
+    const section = query.get('section')
+    if (section) {
+      handleClickMenu(section, true)
+    }
+  }, [userState.loading])
+
   return (
     <>
       <DetailsContainer>

package/src/components/Users/CustomerPointsWallet/index.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, 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'
@@ -19,23 +20,44 @@ const CustomerPointsWalletUI = (props) => {
     user
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [showOption, setShowOption] = useState('points_wallet')
 
+  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}`)
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(showOption)
+    }
+  }, [])
+
   return (
     <Container>
       <h1>{t('POINTS_WALLET', 'Points wallet')}</h1>
       <Tabs>
         <Tab
           active={showOption === 'points_wallet'}
-          onClick={() => setShowOption('points_wallet')}
+          onClick={() => handleTabClick('points_wallet')}
         >
           {t('POINTS_WALLET', 'Points wallet')}
         </Tab>
         <Tab
           active={showOption === 'history'}
-          onClick={() => setShowOption('history')}
+          onClick={() => handleTabClick('history')}
         >
           {t('TRANSACTION_HISTORY', 'Transaction history')}
         </Tab>

package/src/components/Users/CustomersListing/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   UsersList as UsersListController,
   useLanguage
@@ -44,7 +44,6 @@ const CustomersListingUI = (props) => {
     handleSelectedUsers,
     deleteUsersActionState,
     handleDeleteSeveralUsers,
-    onUserRedirect,
     handleSuccessUpdate,
     handleSuccessAddUser,
     handleSuccessDeleteUser,
@@ -56,6 +55,7 @@ const CustomersListingUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [queryId, setQueryId] = useState(null)
   const [isOpenUserDetails, setIsOpenUserDetails] = useState(false)
@@ -74,11 +74,13 @@ const CustomersListingUI = (props) => {
     setOpenUser(null)
     setQueryId(null)
     moveDistance && setMoveDistance(0)
-    onUserRedirect()
+    const enabled = selectedUserActiveState ? 'active' : 'inactive'
+    history.replace(`${location.pathname}?enabled=${enabled}`)
   }
 
   const handleOpenUserDetails = (user) => {
-    onUserRedirect(user?.id)
+    const enabled = selectedUserActiveState ? 'active' : 'inactive'
+    history.replace(`${location.pathname}?enabled=${enabled}&id=${user?.id}`)
     setOpenUser(user)
     setOpenUserAddForm(false)
     setIsOpenUserDetails(true)
@@ -218,8 +220,11 @@ const CustomersListingUI = (props) => {
 }
 
 export const CustomersListing = (props) => {
+  const query = new URLSearchParams(useLocation().search)
+  const defaultUserActiveState = query.get('enabled') !== 'inactive'
   const customersProps = {
     ...props,
+    defaultUserActiveState,
     UIComponent: CustomersListingUI,
     isSearchByUserEmail: true,
     isSearchByUserPhone: true,

package/src/components/Users/ProfessionalDetail/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import Skeleton from 'react-loading-skeleton'
 import { ThreeDots, Calendar4Event, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
@@ -34,6 +35,8 @@ export const ProfessionalDetailUI = (props) => {
     actionStatus
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [adminUserState] = useSession()
   const [, t] = useLanguage()
@@ -86,6 +89,29 @@ export const ProfessionalDetailUI = (props) => {
     }
   }, [actionStatus.error])
 
+  const handleTabClick = (tab, isInitialRender) => {
+    setCurrentMenuSelected(tab)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      const enabled = query.get('enabled')
+      const section = query.get('section')
+      if (section) {
+        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&section=${section}&tab=${tab}`)
+      } else {
+        history.replace(`${location.pathname}?enabled=${enabled}&id=${id}&tab=${tab}`)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick(currentMenuSelected)
+    }
+  }, [])
+
   return (
     <>
       <DetailsHeader>
@@ -153,7 +179,7 @@ export const ProfessionalDetailUI = (props) => {
       </DetailsHeader>
       <UserDetailsMenu
         currentMenuSelected={currentMenuSelected}
-        handleChangeMenu={setCurrentMenuSelected}
+        handleChangeMenu={handleTabClick}
         isProfessional
       />
       {!userState?.loading && userState?.user && (