ordering-ui-admin-external 1.14.3 → 1.15.1

package/src/components/Settings/PlaceListing/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, PlaceList as PlaceListController } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { Button, IconButton, Switch } from '../../../styles'
@@ -76,6 +77,8 @@ const PlaceListingUI = (props) => {
     handleSeveralDeleteZones
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
@@ -135,10 +138,19 @@ const PlaceListingUI = (props) => {
     setOpenCity(true)
   }
 
-  const handleClickCity = (e, city) => {
-    const isInvalid = e.target.closest('.city-checkbox') || e.target.closest('.city-enabled') || e.target.closest('.city-actions')
+  const handleClickCity = (e, city, isInitialRender) => {
+    const isInvalid = e?.target?.closest('.city-checkbox') || e?.target?.closest('.city-enabled') || e?.target?.closest('.city-actions')
     if (isInvalid) return
     handleOpenCityDetails(city)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?country=${city.country_id}&city=${city.id}`)
+    }
+  }
+
+  const handleCloseCityDetail = () => {
+    setSelectedCity(null)
+    setOpenCity(false)
+    history.replace(`${location.pathname}`)
   }
 
   const handleOpenZoneDropdownDetails = (zone) => {
@@ -159,6 +171,29 @@ const PlaceListingUI = (props) => {
     cleanChagesState()
   }, [showOption])
 
+  useEffect(() => {
+    if (countriesState.loading) return
+    const countryId = query.get('country')
+    const cityId = query.get('city')
+    if (countryId && cityId) {
+      setShowOption('cities')
+      const initCountry = countriesState.countries.find(country => country.id === Number(countryId))
+      if (initCountry) {
+        const initCity = initCountry.cities.find(city => city.id === Number(cityId))
+        if (initCity) {
+          handleClickCity(null, initCity, true)
+        }
+      }
+    }
+  }, [countriesState.loading])
+
+  useEffect(() => {
+    const zone = query.get('zone')
+    if (zone) {
+      setShowOption('zones')
+    }
+  }, [])
+
   return (
     <>
       <PlaceListContainer>
@@ -430,10 +465,7 @@ const PlaceListingUI = (props) => {
           sidebarId='city-details'
           defaultSideBarWidth={550}
           open={openCity}
-          onClose={() => {
-            setSelectedCity(null)
-            setOpenCity(false)
-          }}
+          onClose={() => handleCloseCityDetail()}
           showExpandIcon
         >
           <CityDetails

package/src/components/Settings/Settings/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 { useTheme } from 'styled-components'
 import { useLanguage, useEvent, useConfig, Settings as SettingsController } from 'ordering-components-admin-external'
 import { SettingItemUI } from '../SettingItemUI'
@@ -11,6 +11,7 @@ import { SideBar } from '../../Shared'
 import { CheckoutFieldsSetting } from '../CheckoutFieldsSetting'
 import { AddressFieldsSetting } from '../AddressFieldsSetting'
 import { LanguageSetting } from '../LanguageSetting'
+import { SitesAuthSettings } from '../SitesAuthSettings'
 import { MultiCountrySettings } from '../MultiCountrySettings'
 
 import {
@@ -31,28 +32,21 @@ const SettingsUI = (props) => {
     handChangeConfig
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
   const [{ configs }] = useConfig()
   const isMulticountryEnabled = configs?.multicountry?.value
 
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
-  const { search } = useLocation()
-
   const [isOpenDescription, setIsOpenDescription] = useState(false)
   const [selectedCategory, setSelectedCategory] = useState(null)
   const [isOpenSettingDetails, setIsOpenSettingDetails] = useState(null)
+  const [openSitesAuthSettings, setOpenSitesAuthSettings] = useState(false)
   const [openMultiCountrySettings, setOpenMultiCountrySettings] = useState(false)
   const [moveDistance, setMoveDistance] = useState(0)
 
-  let category
-
-  if (search) {
-    const data = search.substring(1).split('&')
-    category = data[0]
-  }
-
-  const categoryId = category && category.split('=')[1]
   const [events] = useEvent()
 
   const settingPageList = {
@@ -74,43 +68,77 @@ const SettingsUI = (props) => {
     }
   }
 
-  const handleOpenDescription = (category) => {
+  const handleOpenDescription = (category, isInitialRender) => {
     setIsOpenSettingDetails(null)
+    setOpenSitesAuthSettings(false)
     setOpenMultiCountrySettings(false)
     setIsOpenDescription(true)
     setSelectedCategory(category)
-    onBasicSettingsRedirect({ category: category?.id })
     handChangeConfig && handChangeConfig(false)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=${category?.id}`)
+    }
   }
 
-  const handleOpenSettingDetails = (item) => {
+  const handleOpenSettingDetails = (item, isInitialRender) => {
     setIsOpenDescription(false)
+    setOpenSitesAuthSettings(false)
     setOpenMultiCountrySettings(false)
     setSelectedCategory(null)
     setIsOpenSettingDetails(item)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=${item}`)
+    }
+  }
+
+  const handleOpenSites = (isInitialRender) => {
+    setIsOpenDescription(false)
+    setIsOpenSettingDetails(null)
+    setOpenSitesAuthSettings(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=sites`)
+    }
+  }
+
+  const handleOpenMultiCountry = (isInitialRender) => {
+    setIsOpenDescription(false)
+    setIsOpenSettingDetails(null)
+    setOpenMultiCountrySettings(true)
+    if (!isInitialRender) {
+      history.replace(`${location.pathname}?category=multi_country`)
+    }
   }
 
   const handleBackRedirect = () => {
     setIsOpenDescription(false)
     setSelectedCategory(null)
-    onBasicSettingsRedirect({ category: null })
+    setIsOpenSettingDetails(null)
+    setMoveDistance(0)
+    setOpenMultiCountrySettings(false)
+    setOpenSitesAuthSettings(false)
+    history.replace(`${location.pathname}`)
   }
 
   useEffect(() => {
+    if (categoryList.loading) return
+    const categoryId = query.get('category')
     if (categoryId) {
-      onBasicSettingsRedirect({ category: categoryId })
-      setIsOpenDescription(true)
-    } else {
-      setIsOpenDescription(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (categoryId && categoryList?.categories?.length > 0) {
-      const categorySelected = categoryList?.categories.find(item => item?.id === parseInt(categoryId))
-      setSelectedCategory(categorySelected)
+      if (isNaN(Number(categoryId))) {
+        if (categoryId === 'sites') {
+          handleOpenSites(true)
+        } else if (categoryId === 'multi_country') {
+          handleOpenMultiCountry(true)
+        } else {
+          handleOpenSettingDetails(categoryId, true)
+        }
+      } else {
+        const categorySelected = categoryList?.categories.find(item => item?.id === parseInt(categoryId))
+        if (categorySelected) {
+          handleOpenDescription(categorySelected, true)
+        }
+      }
     }
-  }, [categoryList?.categories])
+  }, [categoryList.loading])
 
   return (
     <>
@@ -180,14 +208,21 @@ const SettingsUI = (props) => {
                   active={isOpenSettingDetails === 'address'}
                 />
               </SettingItemWrapper>
+              <SettingItemWrapper
+                className='col-md-4 col-sm-6'
+                onClick={() => handleOpenSites()}
+              >
+                <SettingItemUI
+                  title={t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')}
+                  description={t('SITES_LOGIN_SIGNUP_SETTINGS_DESC', 'Advanced sites login/sign up settings')}
+                  icon={<GearFill />}
+                  active={openSitesAuthSettings}
+                />
+              </SettingItemWrapper>
               {isMulticountryEnabled && (
                 <SettingItemWrapper
                   className='col-md-4 col-sm-6'
-                  onClick={() => {
-                    setIsOpenDescription(false)
-                    setIsOpenSettingDetails(null)
-                    setOpenMultiCountrySettings(true)
-                  }}
+                  onClick={() => handleOpenMultiCountry()}
                 >
                   <SettingItemUI
                     title={t('MULTI_COUNTRY_SETTINGS', 'Multi country settings')}
@@ -245,15 +280,22 @@ const SettingsUI = (props) => {
           />
         )
       }
+      {openSitesAuthSettings && (
+        <SideBar
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+          open={openSitesAuthSettings}
+          onClose={() => handleBackRedirect()}
+        >
+          <SitesAuthSettings setMoveDistance={setMoveDistance} />
+        </SideBar>
+      )}
       {openMultiCountrySettings && (
         <SideBar
           defaultSideBarWidth={500 + moveDistance}
           moveDistance={moveDistance}
           open={openMultiCountrySettings}
-          onClose={() => {
-            setMoveDistance(0)
-            setOpenMultiCountrySettings(false)
-          }}
+          onClose={() => handleBackRedirect()}
         >
           <MultiCountrySettings setMoveDistance={setMoveDistance} />
         </SideBar>
@@ -264,7 +306,7 @@ const SettingsUI = (props) => {
             sidebarId='setting-details'
             defaultSideBarWidth={550}
             open={isOpenSettingDetails}
-            onClose={() => setIsOpenSettingDetails(null)}
+            onClose={() => handleBackRedirect()}
             showExpandIcon
           >
             {isOpenSettingDetails === 'checkout' && (

package/src/components/Settings/SettingsDetail/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { XLg, LifePreserver, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
@@ -35,6 +36,8 @@ export const SettingsDetail = (props) => {
     isUpdateConfig
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -102,13 +105,17 @@ export const SettingsDetail = (props) => {
     vid.play()
   }
 
-  const handleExtraOpen = (isMoreInfo) => {
+  const handleExtraOpen = (isMoreInfo, isInitialRender) => {
     if (isMoreInfo) {
       setExtraInfoOpen(true)
       setExtraSubCatOpen(false)
     } else {
       setExtraInfoOpen(false)
       setExtraSubCatOpen(true)
+      if (!isInitialRender) {
+        const category = query.get('category')
+        history.replace(`${location.pathname}?category=${category}&more=settings`)
+      }
     }
   }
 
@@ -136,6 +143,13 @@ export const SettingsDetail = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleExtraOpen(false, true)
+    }
+  }, [])
+
   return (
     <Container
       id='catDescription'

package/src/components/Settings/SitesAuthSettings/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, SitesAuthSettings as SitesAuthSettingsController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
@@ -25,6 +26,8 @@ const SitesAuthSettingsUI = (props) => {
     handleChangeConfig
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -32,15 +35,21 @@ const SitesAuthSettingsUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [isExpand, setIsExpand] = useState(false)
 
-  const handleOpenSiteSettingDetails = (siteId) => {
+  const handleOpenSiteSettingDetails = (siteId, isInitialRender) => {
     handleGetSiteConfigs(siteId)
     setSelectedSiteId(siteId)
     setMoveDistance(500)
+    if (!isInitialRender) {
+      const category = query.get('category')
+      history.replace(`${location.pathname}?category=${category}&site=${siteId}`)
+    }
   }
 
   const handleCloseDetails = () => {
     setSelectedSiteId(null)
     setMoveDistance(0)
+    const category = query.get('category')
+    history.replace(`${location.pathname}?category=${category}`)
   }
 
   const expandSideBar = () => {
@@ -59,6 +68,14 @@ const SitesAuthSettingsUI = (props) => {
     }
   }, [actionState.error])
 
+  useEffect(() => {
+    if (sitesState.loading) return
+    const site = query.get('site')
+    if (site) {
+      handleOpenSiteSettingDetails(Number(site), true)
+    }
+  }, [sitesState.loading])
+
   return (
     <>
       <SitesListContainer>

package/src/components/SidebarMenu/index.js

@@ -224,8 +224,6 @@ const SidebarMenuUI = (props) => {
     }
   ]
 
-  const buisnessOwnerUsersMenuIncluded = [3]
-
   const settingsSubMenus = [
     {
       id: 1,

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

@@ -42,7 +42,7 @@ export const BusinessDetails = (props) => {
       <h2>{t('BUSINESS_DETAILS', 'Business details')}</h2>
       <ContentWrapper>
         <FormControl>
-          <label>{t('BUSINESS_NAME', 'Business Name')}</label>
+          <label>{t('BUSINESS_NAME', 'Business Name')}<sup>*</sup></label>
           <Input
             name='name'
             placeholder={t('NAME', 'Name')}
@@ -72,15 +72,6 @@ export const BusinessDetails = (props) => {
             />
           )}
         </FormControl>
-        <FormControl>
-          <label>{t('ZIPCODE', 'Zipcode')}</label>
-          <Input
-            name='zipcode'
-            placeholder={t('ZIPCODE', 'Zipcode')}
-            defaultValue={formState?.changes?.zipcode ?? ''}
-            onChange={handleChangeInput}
-          />
-        </FormControl>
         <GoogleMapContainer>
           <label>{t('GOOGLE_PLACE_ID', 'Google place ID')}</label>
           <p>{placeId ?? googleMapsApiKey}</p>

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

@@ -21,6 +21,10 @@ export const FormControl = styled.div`
     font-size: 14px;
     line-height: 24px;
     margin-bottom: 12px;
+    sup {
+      color: ${props => props.theme.colors.danger};
+      font-size: 13px;
+    }
   }
   input {
     width: 100%;