ordering-ui-admin-external 1.14.2 → 1.15.0

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
@@ -26,6 +27,8 @@ const PickerExpressUI = (props) => {
     onClose
   } = props
 
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const { width } = useWindowSize()
 
@@ -78,12 +81,33 @@ const PickerExpressUI = (props) => {
     toggleMainContent()
   }, [width])
 
+  const handleOpenMore = (isInitialRender) => {
+    setSettingsOpen(true)
+    if (!isInitialRender) {
+      const id = query.get('id')
+      history.replace(`${location.pathname}?id=${id}&more=settings`)
+    }
+  }
+
+  const handleCloseDescription = () => {
+    setSettingsOpen(false)
+    const id = query.get('id')
+    history.replace(`${location.pathname}?id=${id}`)
+  }
+
+  useEffect(() => {
+    const more = query.get('more')
+    if (more === 'settings') {
+      handleOpenMore(true)
+    }
+  }, [])
+
   const LalaMoveConnectDescription = () => {
     return (
       <CategoryExtraContent>
         <IconButton
           color='black'
-          onClick={() => setSettingsOpen(false)}
+          onClick={() => handleCloseDescription()}
         >
           <XLg />
         </IconButton>
@@ -179,7 +203,7 @@ const PickerExpressUI = (props) => {
         <Description>
           {t('CONNECT_WITH_PICKER_EXPRESS_DESCRIPTION', 'If you have already worked with Pickerexpress or are running your business with Pickerexpress and Ordering simultaneously, this integration will help you connect both platforms and assign orders through them, making your job easy and automated.')}
         </Description>
-        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => setSettingsOpen(true)}>
+        <Button color='primary' borderRadius='8px' className='all-setting' onClick={() => handleOpenMore()}>
           <span>{t('SETTINGS', 'All settings')}</span>
           <BsArrowRight />
         </Button>

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%;