ordering-ui-admin-external 1.14.3 → 1.15.1

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
+import { useHistory, 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'
@@ -31,6 +32,8 @@ export const BusinessTypes = (props) => {
     setIsExtendExtraOpen
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -41,19 +44,28 @@ export const BusinessTypes = (props) => {
   const [selectedBusinessType, setSelectedBusinessType] = useState(null)
   const [isOpenTypeDetail, setIsOpenTypeDetail] = useState(false)
 
-  const handleOpenBusinessTypeDetail = (e, category) => {
-    const isInvalid = e.target.closest('.business-type-checkbox')
+  const handleOpenBusinessTypeDetail = (category, e) => {
+    const isInvalid = e?.target?.closest('.business-type-checkbox')
     if (isInvalid) return
 
     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}`)
   }
 
   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}`)
   }
 
   const handleSelectBusinessTypes = (typeId) => {
@@ -101,6 +113,16 @@ export const BusinessTypes = (props) => {
     setFilteredBusinessTypes([...updatedBusinessTypes])
   }, [businessTypes, searchVal])
 
+  useEffect(() => {
+    const businessTypeId = query.get('business_type')
+    if (businessTypeId) {
+      const initBusinessType = businessTypes.find(type => type.id === Number(businessTypeId))
+      setTimeout(() => {
+        handleOpenBusinessTypeDetail(initBusinessType)
+      }, 500)
+    }
+  }, [])
+
   return (
     <Container>
       <SearchWrapper>
@@ -118,7 +140,7 @@ export const BusinessTypes = (props) => {
             <BusinessTypeContainer
               key={category?.id}
               active={selectedBusinessType?.id === category?.id}
-              onClick={(evt) => handleOpenBusinessTypeDetail(evt, category)}
+              onClick={(evt) => handleOpenBusinessTypeDetail(category, evt)}
             >
               <BusinessTypeInfoWrapper>
                 <CheckBoxWrapper
@@ -144,7 +166,7 @@ export const BusinessTypes = (props) => {
 
       <AddNewBusinessTypeContainer>
         <AddNewBusinessTypeTitle
-          onClick={(evt) => handleOpenBusinessTypeDetail(evt, null)}
+          onClick={(evt) => handleOpenBusinessTypeDetail(null, evt)}
         >
           {t('ADD_NEW_BUSINESS_CATEGORY', 'Add new business category')}
         </AddNewBusinessTypeTitle>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, 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'
@@ -24,6 +25,8 @@ const BusinessWalletsListUI = (props) => {
     handleUpdateWallet
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [isOpenDetails, setIsOpenDetails] = useState(false)
@@ -42,18 +45,26 @@ const BusinessWalletsListUI = (props) => {
     wallet_credit_point_enabled: t('WALLET_CREDIT_POINT_ENABLED', 'Wallet credit point enabled')
   }
 
-  const handleOpenWallet = (config) => {
+  const handleOpenWallet = (config, isInitialRender) => {
     setIsOpenWalletDetails(true)
     handleClosePaymethodDetails()
     setCurrentConfig(config)
     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}`)
+    }
   }
   const handleCloseWallet = () => {
     setIsOpenWalletDetails(false)
     setIsOpenDetails(false)
     setIsExtendExtraOpen(false)
     setCurrentConfig(null)
+    const businessId = query.get('id')
+    const section = query.get('section')
+    history.replace(`${location.pathname}?id=${businessId}&section=${section}`)
   }
 
   useEffect(() => {
@@ -71,6 +82,17 @@ const BusinessWalletsListUI = (props) => {
     setCurrentConfig(null)
   }, [isClose])
 
+  useEffect(() => {
+    if (loyaltyPlanState.loading || walletsListState.loading) return
+    const walletId = query.get('wallet')
+    if (walletId) {
+      const initWallet = walletsListState.wallets.find(wallet => wallet.id === Number(walletId))
+      if (initWallet) {
+        handleOpenWallet(initWallet, true)
+      }
+    }
+  }, [loyaltyPlanState.loading, walletsListState.loading])
+
   return (
     <>
       {(loyaltyPlanState.loading || walletsListState.loading) ? (

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, 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'
@@ -55,6 +55,7 @@ const BusinessesListingUI = (props) => {
     inActiveBusinesses
   } = props
 
+  const history = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -128,7 +129,6 @@ const BusinessesListingUI = (props) => {
     if (id === null) setOpenBusinessDetails(false)
     else {
       setDetailsBusinessId(id)
-      onBusinessRedirect && onBusinessRedirect(id)
       setOpenBusinessDetails(true)
     }
   }, [])
@@ -162,17 +162,26 @@ const BusinessesListingUI = (props) => {
 
   const handleOpenSync = () => {
     setOpenSync(true)
+    history.replace(`${location.pathname}?header=sync`)
   }
 
   const handleCloseSync = () => {
     setMoveDistance(0)
     setOpenSync(false)
+    history.replace(`${location.pathname}`)
   }
 
   useEffect(() => {
     handleSetStorage()
   }, [])
 
+  useEffect(() => {
+    const header = query.get('header')
+    if (header === 'sync') {
+      setOpenSync(true)
+    }
+  }, [])
+
   return (
     <>
       <BusinessListingContainer isAdd={openAddBusiness}>

package/src/components/Stores/ImportersButton/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 { Upload } from 'react-bootstrap-icons'
 import { Button } from '../../../styles'
@@ -7,17 +8,37 @@ import { SideBar } from '../../Shared'
 import { CsvImportButtonWrapper } from './styles'
 
 export const ImportersButton = (props) => {
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [openImporters, setOpenImporters] = useState(false)
   const [extraOpen, setExtraOpen] = useState(false)
 
+  const handleOpenImporters = () => {
+    setOpenImporters(true)
+
+    history.replace(`${location.pathname}?header=importers`)
+  }
+
+  const handleCloseImporters = () => {
+    setOpenImporters(false)
+    history.replace(`${location.pathname}`)
+  }
+
+  useEffect(() => {
+    const header = query.get('header')
+    if (header === 'importers') {
+      setOpenImporters(true)
+    }
+  }, [])
+
   return (
     <>
       <CsvImportButtonWrapper>
         <Button
           borderRadius='8px'
           color='lightPrimary'
-          onClick={() => setOpenImporters(true)}
+          onClick={handleOpenImporters}
         >
           {t('IMPORTERS', 'Importers')}
           <Upload />
@@ -28,7 +49,7 @@ export const ImportersButton = (props) => {
           defaultSideBarWidth={extraOpen ? 1000 : 500}
           moveDistance={extraOpen ? 500 : 0}
           open={openImporters}
-          onClose={() => setOpenImporters(false)}
+          onClose={handleCloseImporters}
           showExpandIcon
         >
           <ImportersListing

package/src/components/Stores/PaymentOption/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'
@@ -34,6 +35,8 @@ export const PaymentOption = (props) => {
     handleDeletePaymethod
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -41,12 +44,11 @@ export const PaymentOption = (props) => {
   const [paymentTabs, setPaymentTabs] = useState(sitesState?.sites?.length > 0 ? 0 : 1)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
-  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
-  const [all, setAll] = useState(!!!filteredOptions?.length)
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {
-
-    let data = {}
+    const data = {}
     if (values?.value === 'All') {
       data[values.key] = []
       setAll(!all)
@@ -63,7 +65,7 @@ export const PaymentOption = (props) => {
 
       data[values.key] = array.length > 0 ? array : []
       if (values.key === 'sites') {
-        setAll(!!!data?.sites?.length)
+        setAll(!data?.sites?.length)
       }
     }
     handleChangeBusinessPaymentState(data)
@@ -120,6 +122,25 @@ export const PaymentOption = (props) => {
     if (Object.keys(changes).length > 0) setLocalState(JSON.parse(JSON.stringify(changes)))
   }, [changesState?.allowed_order_types, changesState?.sites])
 
+  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='payment_method_option'>
@@ -152,14 +173,14 @@ export const PaymentOption = (props) => {
           {sitesState?.sites?.length > 0 && (
             <Tab
               active={paymentTabs === 0}
-              onClick={() => setPaymentTabs(0)}
+              onClick={() => handleTabClick(0)}
             >
               {t('CHANNELS', 'Channels')}
             </Tab>
           )}
           <Tab
             active={paymentTabs === 1}
-            onClick={() => setPaymentTabs(1)}
+            onClick={() => handleTabClick(1)}
           >
             {t('ORDER_TYPE', 'Order type')}
           </Tab>
@@ -167,7 +188,7 @@ export const PaymentOption = (props) => {
         {paymentTabs === 0 && sitesState?.sites?.length > 0 && (
           <>
             <TabOption
-              key={'all'}
+              key='all'
               onClick={() => setPaymethodInfo({ key: 'sites', value: 'All' })}
             >
               {all ? (

package/src/components/Stores/PaymentOptionMethods/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'
@@ -40,6 +41,8 @@ export const PaymentOptionMethods = (props) => {
     title
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -127,6 +130,25 @@ export const PaymentOptionMethods = (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={id}>
@@ -158,21 +180,21 @@ export const PaymentOptionMethods = (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/PaymentOptionPaypal/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 PaymentOptionPaypal = (props) => {
     handleDeletePaymethod
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -127,6 +130,25 @@ export const PaymentOptionPaypal = (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='paypal'>
@@ -158,21 +180,21 @@ export const PaymentOptionPaypal = (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/PaymentOptionSquare/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, 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'
@@ -43,6 +44,8 @@ const PaymentOptionSquareUI = (props) => {
     handleChangeSandbox
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -109,6 +112,25 @@ const PaymentOptionSquareUI = (props) => {
     })
   }, [actionState?.error])
 
+  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='payment_method_square'>
@@ -140,21 +162,21 @@ const PaymentOptionSquareUI = (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/PaymentOptionStripeDirect/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 PaymentOptionStripeDirect = (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 PaymentOptionStripeDirect = (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_direct'>
@@ -156,21 +178,21 @@ export const PaymentOptionStripeDirect = (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/PaymethodOptionPaypalExpress/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 PaymethodOptionPaypalExpress = (props) => {
     handleDeletePaymethod
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -121,6 +124,25 @@ export const PaymethodOptionPaypalExpress = (props) => {
     }
   }, [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='paypal_express'>
@@ -152,21 +174,21 @@ export const PaymethodOptionPaypalExpress = (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>