ordering-ui-admin-external 1.13.3 → 1.14.0

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

@@ -183,6 +183,7 @@ export const IntegrationListing = (props) => {
           defaultSideBarWidth={600}
           open={showOption === 'plugins'}
           onClose={() => handleCloseSettings()}
+          showExpandIcon
         >
           <PluginList />
         </SideBar>
@@ -194,6 +195,7 @@ export const IntegrationListing = (props) => {
           defaultSideBarWidth={768}
           open={showOption === 'webhooks'}
           onClose={() => handleCloseSettings()}
+          showExpandIcon
         >
           <WebhookList />
         </SideBar>
@@ -205,6 +207,7 @@ export const IntegrationListing = (props) => {
           defaultSideBarWidth={700}
           open={showOption === 'apiKeys'}
           onClose={() => handleCloseSettings()}
+          showExpandIcon
         >
           <ApiKeysList />
         </SideBar>

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

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import { DragScroll, Modal } from '../../Shared'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
-import { XLg, Check2Circle } from 'react-bootstrap-icons'
+import { XLg, Check2Circle, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
@@ -30,6 +30,7 @@ export const ItsaCheckmate = (props) => {
   const { width } = useWindowSize()
 
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   const toggleMainContent = () => {
     if (width <= 500) {
@@ -43,6 +44,13 @@ export const ItsaCheckmate = (props) => {
     }
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (width < 1000) return
     if (settingsOpen) {
@@ -105,6 +113,14 @@ export const ItsaCheckmate = (props) => {
       <ItsaCheckmateContainer>
         <DescriptionHeader>
           <HeaderIcons>
+            {width > 576 && !settingsOpen && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
             <IconButton
               color='black'
               onClick={onClose}

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

@@ -3,7 +3,7 @@ import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-comp
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
-import { XLg } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
@@ -32,6 +32,7 @@ const LalaMoveConnectUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   const toggleMainContent = () => {
     if (width <= 500) {
@@ -49,6 +50,13 @@ const LalaMoveConnectUI = (props) => {
     window.open(link, '_blank')
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState?.error) return
     setAlertState({
@@ -148,6 +156,14 @@ const LalaMoveConnectUI = (props) => {
       <LalaMoveConnectContainer>
         <DescriptionHeader>
           <HeaderIcons>
+            {width > 576 && !settingsOpen && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
             <IconButton
               color='black'
               onClick={onClose}

package/src/components/Settings/LanguageTransTable/styles.js

@@ -81,5 +81,5 @@ export const TransBottomContainer = styled.div`
 export const AddNewTransButton = styled.div`
   cursor: pointer;
   font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `

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

@@ -3,7 +3,7 @@ import { useLanguage, ApiKeysList as ApiKeysListController } from 'ordering-comp
 import { Button, IconButton } from '../../../styles'
 import { Alert, Confirm, DragScroll, Modal } from '../../Shared'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
-import { XLg } from 'react-bootstrap-icons'
+import { ArrowsAngleContract, ArrowsAngleExpand, XLg } from 'react-bootstrap-icons'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
@@ -32,6 +32,7 @@ const PickerExpressUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
 
   const toggleMainContent = () => {
     if (width <= 500) {
@@ -49,6 +50,13 @@ const PickerExpressUI = (props) => {
     window.open(link, '_blank')
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!actionState?.error) return
     setAlertState({
@@ -148,6 +156,14 @@ const PickerExpressUI = (props) => {
       <PickerExpressContainer>
         <DescriptionHeader>
           <HeaderIcons>
+            {width > 576 && !settingsOpen && (
+              <IconButton
+                color='black'
+                onClick={expandSidebar}
+              >
+                {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+              </IconButton>
+            )}
             <IconButton
               color='black'
               onClick={onClose}

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

@@ -434,6 +434,7 @@ const PlaceListingUI = (props) => {
             setSelectedCity(null)
             setOpenCity(false)
           }}
+          showExpandIcon
         >
           <CityDetails
             city={selectedCity}

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

@@ -331,5 +331,5 @@ export const PagesBottomContainer = styled.div`
 export const AddNewPageButton = styled.div`
   cursor: pointer;
   font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
 `

package/src/components/Settings/PluginList/styles.js

@@ -34,6 +34,14 @@ export const Header = styled.div`
   button {
     height: 42px;
   }
+
+  @media (min-width: 576px) {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 70px;
+    ` : css`
+      margin-right: 70px;
+    `}
+  }
 `
 
 export const PluginsTable = styled.table`

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

@@ -265,6 +265,7 @@ const SettingsUI = (props) => {
             defaultSideBarWidth={550}
             open={isOpenSettingDetails}
             onClose={() => setIsOpenSettingDetails(null)}
+            showExpandIcon
           >
             {isOpenSettingDetails === 'checkout' && (
               <CheckoutFieldsSetting />

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { XLg, LifePreserver } from 'react-bootstrap-icons'
+import { XLg, LifePreserver, ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useLanguage } from 'ordering-components-admin-external'
@@ -41,6 +41,8 @@ export const SettingsDetail = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraInfoOpen, setExtraInfoOpen] = useState(false)
   const [extraSubCatOpen, setExtraSubCatOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
+
   const actionSidebar = (value) => {
     setIsMenuOpen(value)
 
@@ -49,6 +51,13 @@ export const SettingsDetail = (props) => {
     }
   }
 
+  const expandSidebar = () => {
+    const element = document.getElementById('catDescription')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   const toggleMainContent = () => {
     if (isMenuOpen) {
       if (width <= 500) {
@@ -162,6 +171,14 @@ export const SettingsDetail = (props) => {
           <Content>
             <CategoryName>
               <p>{category.name}</p>
+              {width > 576 && !extraInfoOpen && !extraSubCatOpen && (
+                <IconButton
+                  color='black'
+                  onClick={expandSidebar}
+                >
+                  {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+                </IconButton>
+              )}
             </CategoryName>
             <Description>{category?.description}</Description>
             {

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

@@ -92,6 +92,15 @@ export const Content = styled.div`
 `
 
 export const CategoryName = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-right: 25px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0;
+    margin-left: 25px;
+  `}
+
   p {
     font-weight: bold;
     font-size: 20px;

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

@@ -105,7 +105,7 @@ export const SettingsImage = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -4,12 +4,16 @@ import Skeleton from 'react-loading-skeleton'
 import BsChevronRight from '@meronex/icons/bs/BsChevronRight'
 import { Alert, SideBar } from '../../Shared'
 import { SiteSettingDetails } from '../SiteSettingDetails'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 import {
   SitesListContainer,
   SitesWrapper,
-  SiteItem
+  SiteItem,
+  Header
 } from './styles'
+import { IconButton } from '../../../styles'
+import { ArrowsAngleContract, ArrowsAngleExpand } from 'react-bootstrap-icons'
 
 const SitesAuthSettingsUI = (props) => {
   const {
@@ -22,8 +26,11 @@ const SitesAuthSettingsUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const { width } = useWindowSize()
+
   const [selectedSiteId, setSelectedSiteId] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isExpand, setIsExpand] = useState(false)
 
   const handleOpenSiteSettingDetails = (siteId) => {
     handleGetSiteConfigs(siteId)
@@ -36,6 +43,13 @@ const SitesAuthSettingsUI = (props) => {
     setMoveDistance(0)
   }
 
+  const expandSideBar = () => {
+    const element = document.getElementById('sideSlider')
+    if (isExpand) element.style.width = '500px'
+    else element.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (actionState.error) {
       setAlertState({
@@ -48,7 +62,17 @@ const SitesAuthSettingsUI = (props) => {
   return (
     <>
       <SitesListContainer>
-        <h1>{t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')}</h1>
+        <Header>
+          <h1>{t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')}</h1>
+          {width > 576 && !selectedSiteId && (
+            <IconButton
+              color='black'
+              onClick={expandSideBar}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+        </Header>
         {sitesState.loading ? (
           <SitesWrapper>
             {[...Array(5).keys()].map(i => (

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

@@ -1,17 +1,30 @@
 import styled, { css } from 'styled-components'
 
 export const SitesListContainer = styled.div`
-  padding: 26px 20px;
+  padding: 20px;
   box-sizing: border-box;
   width: 100%;
   overflow-x: hidden;
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
 
   h1 {
     font-weight: 700;
     font-size: 20px;
     margin: 0;
   }
+
+  margin-right: 35px;
+  ${props => props.theme.rtl && css`
+    margin-left: 35px;
+    margin-right: 0;
+  `}
 `
+
 export const SitesWrapper = styled.div`
   margin-top: 35px;
   border: 1px solid ${props => props.theme.colors.borderColor};

package/src/components/Settings/WebhookList/styles.js

@@ -27,6 +27,14 @@ export const Header = styled.div`
   button {
     height: 42px;
   }
+
+  @media (min-width: 576px) {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 65px;
+    ` : css`
+      margin-right: 65px;
+    `}
+  }
 `
 
 export const WebhookListTable = styled.table`

package/src/components/Shared/Modal/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { XLg } from 'react-bootstrap-icons'
-import { Popup, useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, Popup } from 'ordering-components-admin-external'
 import { Button, IconButton } from '../../../styles'
 import {
   ModalDialog,
@@ -18,6 +18,7 @@ const ModalUI = (props) => {
     onAccept,
     onCancel,
     onClose,
+    onRemove,
     acceptText,
     cancelText,
     isTransparent,
@@ -32,6 +33,11 @@ const ModalUI = (props) => {
     }
   }
 
+  const handleClose = () => {
+    if (onRemove) onRemove()
+    else onClose()
+  }
+
   useEffect(() => {
     if (!props.open) return
     document.addEventListener('keydown', onCloseModal)
@@ -53,7 +59,7 @@ const ModalUI = (props) => {
           <ModalIcon className='modal-close-icon'>
             <IconButton
               color='black'
-              onClick={() => onClose()}
+              onClick={handleClose}
             >
               <XLg />
             </IconButton>
@@ -73,7 +79,6 @@ const ModalUI = (props) => {
             {onCancel && <Button color='primary' onClick={() => onCancel()}>{cancelText || t('CANCEL')}</Button>}
           </ModalActions>)}
       </ModalDialogInnerContainer>
-      
     </ModalDialog>
   )
 }

package/src/components/Shared/ProtectedRoute/index.js

@@ -22,7 +22,13 @@ export const ProtectedRoute = (props) => {
           )}
         </>
       ) : (
-        <Redirect to='/login' />
+        <Redirect to={{
+          pathname: '/login',
+          state: {
+            from: path
+          }
+        }}
+        />
       )}
     </Route>
   )

package/src/components/Shared/SideBar/index.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { XLg } from 'react-bootstrap-icons'
+import { XLg, ArrowsAngleExpand, ArrowsAngleContract } from 'react-bootstrap-icons'
 import { IconButton } from '../../../styles'
 import {
-  BarContainer
+  BarContainer,
+  IconButtonWrapper
 } from './styles'
 
 export const SideBar = (props) => {
@@ -14,12 +15,15 @@ export const SideBar = (props) => {
     isBorderShow,
     noAnimation,
     handleCloseWizard,
-    IconTop
+    IconTop,
+    showExpandIcon,
+    sidebarId
   } = props
 
   const sideBarRef = useRef(null)
   const { width } = useWindowSize()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isExpand, setIsExpand] = useState(false)
   const sideBarWidth = defaultSideBarWidth || 500
 
   const actionSidebar = (value) => {
@@ -51,6 +55,12 @@ export const SideBar = (props) => {
     }
   }
 
+  const expandSideBar = () => {
+    if (isExpand) sideBarRef.current.style.width = `${sideBarWidth}px`
+    else sideBarRef.current.style.width = '100vw'
+    setIsExpand(prev => !prev)
+  }
+
   useEffect(() => {
     if (!open) return
     document.addEventListener('keydown', onCloseSidebar)
@@ -64,14 +74,24 @@ export const SideBar = (props) => {
         isBorderShow={isBorderShow}
         moveDistance={moveDistance}
         noAnimation={noAnimation}
-        IconTop={IconTop}
+        id={sidebarId ?? 'sideSlider'}
       >
-        <IconButton
-          color='black'
-          onClick={() => props.onClose()}
-        >
-          <XLg />
-        </IconButton>
+        <IconButtonWrapper IconTop={IconTop}>
+          {width > 576 && showExpandIcon && (
+            <IconButton
+              color='black'
+              onClick={() => expandSideBar()}
+            >
+              {isExpand ? <ArrowsAngleContract /> : <ArrowsAngleExpand />}
+            </IconButton>
+          )}
+          <IconButton
+            color='black'
+            onClick={() => props.onClose()}
+          >
+            <XLg />
+          </IconButton>
+        </IconButtonWrapper>
         {props.children}
       </BarContainer>
     </>

package/src/components/Shared/SideBar/styles.js

@@ -29,21 +29,20 @@ export const BarContainer = styled.div`
     right: 0;
     padding-right: ${({ moveDistance }) => moveDistance ? `${moveDistance}px` : '0px'};
   `}
+`
 
-  > button {
-    position: absolute;
-    z-index: 10;
-    top: 20px;
-    ${props => props.theme?.rtl ? css`
-      left: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
-    ` : css`
-      right: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
-    `}
-  }
-
+export const IconButtonWrapper = styled.div`
+  position: absolute;
+  z-index: 10;
+  top: 20px;
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    left: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
+  ` : css`
+    right: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
+  `}
   ${({ IconTop }) => IconTop && css`
-    > button {
-      top: ${IconTop}
-    }
+    top: ${IconTop}
   `}
 `

package/src/components/SidebarMenu/index.js

@@ -562,7 +562,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 2) && (
+                  {(sessionState?.user?.level === 0) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='4'
@@ -579,10 +579,7 @@ const SidebarMenuUI = (props) => {
                       <Accordion.Collapse eventKey='4'>
                         <MenuContent>
                           {
-                            (sessionState?.user?.level === 2
-                              ? usersSubMenus.filter(menu => buisnessOwnerUsersMenuIncluded.includes(menu.id))
-                              : usersSubMenus
-                            ).map(item => (
+                            usersSubMenus.map(item => (
                               item.pageName === 'professionals' ? (
                                 isEnabledAppointmentsFeature && (
                                   <SubMenu
@@ -645,7 +642,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 5 || sessionState?.user?.level === 2) && (
+                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 5) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='7'

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

@@ -372,7 +372,7 @@ const AddBusinessFormUI = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -156,7 +156,7 @@ export const Images = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -138,7 +138,7 @@ export const Photos = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -74,7 +74,6 @@ export const BusinessAddStore = () => {
               handleChangeAddress(e)
             }}
             autoComplete='new-password'
-            countryCode={configs?.country_autocomplete?.value || '*'}
             types={['restaurant']}
           />
           <p>{t('START_TYPING_THEN_SELECT_AN_ADDRESS_FROM_THE_LIST', 'Start typing  then select an address from the list')}</p>