ordering-ui-admin-external 1.14.3 → 1.15.0

package/src/components/Stores/BusinessDeliveryPickupMore/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 { BusinessDeliveryDetails } from '../BusinessDeliveryDetails'
 import { BusinessPickupDetails } from '../BusinessPickupDetails'
@@ -17,6 +18,8 @@ export const BusinessDeliveryPickupMore = (props) => {
     setIsExtendExtraOpen
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [selectedTab, setSelectedTab] = useState('delivery')
 
@@ -31,6 +34,24 @@ export const BusinessDeliveryPickupMore = (props) => {
     setIsExtendExtraOpen(false)
   }, [selectedTab])
 
+  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}`)
+    }
+  }
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleTabClick(tab, true)
+    } else {
+      handleTabClick('delivery')
+    }
+  }, [])
+
   return (
     <Container>
       <h1>{t('DELIVERY_PICKUP_MORE', 'Delivery, pickup & more')}</h1>
@@ -40,7 +61,7 @@ export const BusinessDeliveryPickupMore = (props) => {
             <Tab
               key={tab.key}
               active={tab.key === selectedTab}
-              onClick={() => setSelectedTab(tab.key)}
+              onClick={() => handleTabClick(tab.key)}
             >
               {tab.content}
             </Tab>

package/src/components/Stores/BusinessDeliveryZoneDetails/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,
   BusinessDeliveryZone as BusinessDeliveryZoneController
@@ -34,6 +35,8 @@ const BusinessDeliveryZoneDetailsUI = (props) => {
     handleSuccessUpdate
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -55,6 +58,26 @@ 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}`)
+    }
+  }
+
+  useEffect(() => {
+    const zoneTab = query.get('zone_tab')
+    if (zoneTab) {
+      handleTabClick(zoneTab, true)
+    } else {
+      handleTabClick('information')
+    }
+  }, [])
+
   return (
     <>
       <Container>
@@ -81,7 +104,7 @@ const BusinessDeliveryZoneDetailsUI = (props) => {
             <Tab
               key={tab.key}
               active={selectedMenuOption === tab.key}
-              onClick={() => setSelectedMenuOption(tab.key)}
+              onClick={() => handleTabClick(tab.key)}
             >
               {tab.content}
             </Tab>

package/src/components/Stores/BusinessDeliveryZoneList/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 { BusinessDeliveryZoneDetails } from '../BusinessDeliveryZoneDetails'
 import { SideBar } from '../../Shared'
@@ -23,6 +24,8 @@ export const BusinessDeliveryZoneList = (props) => {
     handleChangeAllZoneState
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [isOpenDetails, setIsOpenDetails] = useState(false)
   const [curZone, setCurZone] = useState(null)
@@ -31,16 +34,40 @@ 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}`)
   }
 
-  const handleOpenZone = (e, zone) => {
-    const isInvalid = e.target.closest('.zone-enabled')
+  const handleOpenZone = (e, zone, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.zone-enabled')
     if (isInvalid) return
     setCurZone(zone)
     setIsExtendExtraOpen(true)
     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}`)
+    }
   }
 
+  useEffect(() => {
+    const zoneId = query.get('zone')
+    if (zoneId) {
+      const initZone = business?.zones?.find(zone => zone.id === Number(zoneId))
+      if (initZone) {
+        setTimeout(() => {
+          handleOpenZone(null, initZone, true)
+        }, 500)
+      }
+    }
+  }, [])
+
   return (
     <>
       <ZoneContainer>

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
+import { useHistory, useLocation } from 'react-router-dom'
 import { BusinessInfoSettingList } from '../BusinessInfoSettingList'
 import { BusinessOwners } from '../BusinessOwners'
 import { BusinessTypes } from '../BusinessTypes'
@@ -31,13 +32,31 @@ 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}`)
+  }
+
   useEffect(() => {
     setIsExtendExtraOpen(false)
   }, [selectedInfoItem])
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      setSelctedInfoItem(tab)
+    } else {
+      handleSelectInfoItem('information')
+    }
+  }, [])
+
   return (
     <>
       <Container>
@@ -45,7 +64,7 @@ export const BusinessDetail = (props) => {
           <h1>{t('STORE_DETAILS', 'Store details')}</h1>
           <BusinessInfoSettingList
             selectedInfoItem={selectedInfoItem}
-            handleSelectInfoItem={setSelctedInfoItem}
+            handleSelectInfoItem={handleSelectInfoItem}
           />
           {selectedInfoItem === 'information' && (
             <BusinessInformation

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, 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'
@@ -48,6 +49,8 @@ export const BusinessDetailsUI = (props) => {
     handleUpdatePreorderConfigs
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [{ user }] = useSession()
@@ -81,16 +84,22 @@ export const BusinessDetailsUI = (props) => {
     }
   }
 
-  const handleSelectedItem = (item) => {
+  const handleSelectedItem = (item, isInitialRender) => {
     setIsExtendExtraOpen(false)
     setSelectedItem(item)
     setExtraOpen(true)
+    if (!isInitialRender) {
+      const businessId = query.get('id')
+      history.replace(`${location.pathname}?id=${businessId}&section=${item}`)
+    }
   }
 
   const handleCloseExtraOpen = () => {
     setIsExtendExtraOpen(false)
     setExtraOpen(false)
     setSelectedItem(null)
+    const businessId = query.get('id')
+    history.replace(`${location.pathname}?id=${businessId}`)
   }
 
   useEffect(() => {
@@ -139,6 +148,14 @@ export const BusinessDetailsUI = (props) => {
     })
   }, [actionStatus?.error])
 
+  useEffect(() => {
+    if (businessState?.loading) return
+    const detailKey = query.get('section')
+    if (detailKey) {
+      handleSelectedItem(detailKey, true)
+    }
+  }, [businessState?.loading])
+
   return (
     <BarContainer id='business_details_bar'>
       {(!isExtendExtraOpen || width < 1000) && (

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

@@ -36,7 +36,8 @@ import {
   GroceriesProductListWrapper,
   GroceriesCategoryListWrapper,
   GroceriesProductListContent,
-  ActionButtonWrapper
+  ActionButtonWrapper,
+  SendCustomLayoutWrapper
 } from './styles'
 
 export const BusinessFrontLayout = (props) => {
@@ -199,6 +200,17 @@ export const BusinessFrontLayout = (props) => {
             </LayoutBoxWrapper>
           )}
         </LayoutContentWrappper>
+        <SendCustomLayoutWrapper>
+          <p>{t('SEND_CUSTOM_LAYOUT_IDEA_DESCRIPTION', 'Would you like another kind of layout for your business menu? Send us your idea! We will take at it and help you make your idea a reality.')}</p>
+          <Button
+            outline
+            borderRadius='8px'
+            color='primary'
+            onClick={() => window.open('https://www.ordering.co/quote-project-request', '_blank')}
+          >
+            {t('SEND_CUSTOM_LAYOUT_IDEA', 'Send custom layout idea')}
+          </Button>
+        </SendCustomLayoutWrapper>
       </BusinessFrontLayoutContainer>
       <ActionButtonWrapper>
         <Button color='primary' onClick={handleSaveLayout}>{t('SAVE', 'Save')}</Button>

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

@@ -414,3 +414,14 @@ export const ActionButtonWrapper = styled.div`
     margin: 20px;
   }
 `
+
+export const SendCustomLayoutWrapper = styled.div`
+  margin: 20px 10px;
+  p {
+    font-size: 14px;
+  }
+  button {
+    height: 44px;
+    width: 100%;
+  }
+`

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, 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'
@@ -31,6 +32,9 @@ const BusinessMenuUI = (props) => {
     setIsSelectedSharedMenus,
     sitesState
   } = props
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -40,6 +44,7 @@ const BusinessMenuUI = (props) => {
   const [isOpenSharedProduct, setIsOpenSharedProduct] = useState(false)
   const [searchValue, setSearchValue] = useState('')
   const [menuList, setMenuList] = useState([])
+  const [initMenuId, setInitMenuId] = useState(null)
 
   const handleOpenOptions = (name, menu) => {
     setCurrentMenu(menu)
@@ -47,17 +52,30 @@ const BusinessMenuUI = (props) => {
     setShowOption(name)
   }
 
-  const handleCloseOption = () => {
+  const handleCloseOption = (isTab) => {
     setShowOption(null)
     setIsExtendExtraOpen(false)
     setIsOpenSharedProduct(false)
     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}`)
+    }
   }
 
-  const handleOpenEdit = (e, menu) => {
-    const isInvalid = e.target.closest('.business_checkbox_control')
+  const handleOpenEdit = (e, menu, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.business_checkbox_control')
     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}`)
+    }
   }
 
   useEffect(() => {
@@ -66,6 +84,39 @@ const BusinessMenuUI = (props) => {
     setMenuList(filteredMenus)
   }, [JSON.stringify(businessMenusState.menus), JSON.stringify(businessMenusState.menusShared), searchValue, isSelectedSharedMenus])
 
+  const handleTabClick = (isShared, isInitialRender) => {
+    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}`)
+    }
+  }
+
+  useEffect(() => {
+    if (businessMenusState.loading || !initMenuId) return
+    const tab = query.get('tab')
+    const updatedMenus = [...(tab === 'shared_menus' ? businessMenusState?.menusShared : businessMenusState?.menus)]
+    const selectedMenu = updatedMenus.find(menu => menu.id === Number(initMenuId))
+    handleOpenEdit(null, selectedMenu, true)
+  }, [initMenuId, businessMenusState.loading])
+
+  useEffect(() => {
+    const tab = query.get('tab')
+    const menuId = query.get('menu')
+    setInitMenuId(menuId)
+    if (tab === 'shared_menus') {
+      handleTabClick(true, true)
+    } else {
+      handleTabClick(false, true)
+    }
+    return () => {
+      setInitMenuId(null)
+    }
+  }, [])
+
   return (
     <MainContainer>
       <MenuContainer isHide={isOpenSharedProduct}>
@@ -83,19 +134,13 @@ const BusinessMenuUI = (props) => {
         <TabsContainer>
           <Tab
             active={!isSelectedSharedMenus}
-            onClick={() => {
-              handleCloseOption()
-              setIsSelectedSharedMenus(false)
-            }}
+            onClick={() => handleTabClick(false)}
           >
             {t('MENU_V21', 'Menu')}
           </Tab>
           <Tab
             active={isSelectedSharedMenus}
-            onClick={() => {
-              handleCloseOption()
-              setIsSelectedSharedMenus(true)
-            }}
+            onClick={() => handleTabClick(true)}
           >
             {t('SHARED_MENUS', 'Shared menus')}
           </Tab>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   useLanguage,
   BusinessMenuOptions as BusinessMenuOptionsController
@@ -38,6 +39,8 @@ const BusinessMenuOptionsUI = (props) => {
     sitesState
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const theme = useTheme()
   const [, t] = useLanguage()
   const { width } = useWindowSize()
@@ -88,6 +91,28 @@ const BusinessMenuOptionsUI = (props) => {
     }
   }, [menu])
 
+  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}`)
+  }
+
+  useEffect(() => {
+    if (isSelectedSharedMenus) {
+
+    } else {
+      const settingTab = query.get('setting_tab')
+      if (settingTab) {
+        handleTabClick(settingTab)
+      } else {
+        handleTabClick('basic')
+      }
+    }
+  }, [isSelectedSharedMenus])
+
   return (
     <>
       <Container id='menu_options'>
@@ -131,14 +156,14 @@ const BusinessMenuOptionsUI = (props) => {
               <AutoScroll innerScroll scrollId='menu_options'>
                 <Tab
                   active={selectedMenuOption === 'basic'}
-                  onClick={() => setSelectedMenuOption('basic')}
+                  onClick={() => handleTabClick('basic')}
                 >
                   {t('BASIC', 'Basic')}
                 </Tab>
                 {sitesState?.sites?.length > 0 && (
                   <Tab
                     active={selectedMenuOption === 'channels'}
-                    onClick={() => setSelectedMenuOption('channels')}
+                    onClick={() => handleTabClick('channels')}
                   >
                     {t('CHANNELS', 'Channels')}
                   </Tab>
@@ -146,7 +171,7 @@ const BusinessMenuOptionsUI = (props) => {
                 {Object.keys(menu).length > 0 && (
                   <Tab
                     active={selectedMenuOption === 'share_with'}
-                    onClick={() => setSelectedMenuOption('share_with')}
+                    onClick={() => handleTabClick('share_with')}
                   >
                     {t('SHARE_WITH', 'Share with')}
                   </Tab>

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Button, Input } from '../../../styles'
 import { Alert } from '../../Shared'
@@ -22,6 +23,8 @@ export const BusinessOrderingChannels = (props) => {
     setFormState
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [slug, setSlug] = useState('')
   const [selectedOption, setSelectedOption] = useState('custom_slug')
@@ -55,8 +58,13 @@ export const BusinessOrderingChannels = (props) => {
     })
   }
 
-  const handleChangeOption = (key) => {
-    setSelectedOption(key)
+  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}`)
+    }
   }
 
   useEffect(() => {
@@ -68,6 +76,15 @@ export const BusinessOrderingChannels = (props) => {
     if (business) setSlug(business?.slug)
   }, [business])
 
+  useEffect(() => {
+    const tab = query.get('tab')
+    if (tab) {
+      handleChangeOption(tab, true)
+    } else {
+      handleChangeOption('custom_slug')
+    }
+  }, [])
+
   return (
     <>
       <BusinessOrderingChannelsContainer>

package/src/components/Stores/BusinessPaymentMethods/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 {
   useLanguage,
@@ -64,6 +65,8 @@ const BusinessPaymentMethodsUI = (props) => {
     handleTutorialContinue
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const { width } = useWindowSize()
@@ -106,8 +109,8 @@ const BusinessPaymentMethodsUI = (props) => {
     return found
   }
 
-  const handleOpenEdit = (e, paymethodId, paymethodGateway) => {
-    const inValid = e.target.closest('.paymethod-checkbox')
+  const handleOpenEdit = (e, paymethodId, paymethodGateway, isInitialRender) => {
+    const inValid = e?.target?.closest('.paymethod-checkbox')
     if (inValid) return true
     if (!isTutorialMode && isCheckFoundBusinessPaymethod(paymethodId)) {
       setSelectedPaymethodGateway(paymethodGateway)
@@ -116,6 +119,11 @@ const BusinessPaymentMethodsUI = (props) => {
       setIsEdit(true)
       setIsExtendExtraOpen(true)
     }
+    if (!isInitialRender) {
+      const businessId = query.get('id')
+      const section = query.get('section')
+      history.replace(`${location.pathname}?id=${businessId}&section=${section}&paymethod=${paymethodId}`)
+    }
   }
 
   const handleClickCheckBox = (id) => {
@@ -140,6 +148,9 @@ 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}`)
   }
 
   useEffect(() => {
@@ -153,6 +164,17 @@ const BusinessPaymentMethodsUI = (props) => {
     setSelectedBusinessPaymethod(updatedPaymethod)
   }, [businessPaymethodsState?.paymethods, selectedBusinessPaymethod])
 
+  useEffect(() => {
+    if (paymethodsList.loading || businessPaymethodsState.loading) return
+    const paymethodId = query.get('paymethod')
+    if (paymethodId) {
+      const initPaymethod = paymethodsList.paymethods.find(paymethod => paymethod.id === Number(paymethodId))
+      if (initPaymethod) {
+        handleOpenEdit(null, initPaymethod.id, initPaymethod.gateway, true)
+      }
+    }
+  }, [paymethodsList.loading, businessPaymethodsState.loading])
+
   return (
     <MainContainer>
       <PaymentMethodsContainer isOpenWalletDetails={isOpenWalletDetails}>