ordering-ui-admin-external 1.2.0 → 1.3.1

package/src/components/Orders/OrdersTable/styles.js

@@ -216,6 +216,7 @@ export const WrapperImage = styled.div`
   width: 45px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   border-radius: 7.6px;
+  position: relative;
 
   img {
     width: 100%;
@@ -368,3 +369,35 @@ export const Timer = styled.div`
     color: #E63757;
   }
 `
+
+export const OrdersCountWrapper = styled.div`
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  background-color: ${props => props.theme.colors.backgroundInfo};
+  color: ${props => props.theme.colors.primary};
+  font-weight: 400;
+  font-size: 9px;
+  line-height: 12px;
+  padding: 2px 5px;
+  position: absolute;
+  top: -9px;
+  right: -5px;
+  ${props => props.theme.rtl && css`
+    left: -5px;
+    right: initial;
+  `}
+
+  ${({ isNew }) => isNew && css`
+    background-color: ${props => props.theme.colors.lightGreen};
+    color: ${props => props.theme.colors.success};
+  `}
+`
+export const DragTh = styled.th`
+  cursor: pointer;
+  ${({ selectedDragOver }) => selectedDragOver && css`
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+`

package/src/components/Orders/index.js

@@ -44,6 +44,7 @@ import { OrdersListing } from './OrdersListing'
 import { OrdersTable } from './OrdersTable'
 import { OrdersCards } from './OrdersCards'
 import { ReviewCustomer } from './ReviewCustomer'
+import { CountryFilter } from './CountryFilter'
 
 export {
   Appointments,
@@ -90,5 +91,6 @@ export {
   OrdersListing,
   OrdersTable,
   OrdersCards,
-  ReviewCustomer
+  ReviewCustomer,
+  CountryFilter
 }

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

@@ -13,13 +13,14 @@ export const SettingItemUI = (props) => {
   const {
     isSkeleton,
     active,
+    disabledFeature,
     icon,
     title,
     description
   } = props
 
   return (
-    <SettingItemContainer active={!isSkeleton && active}>
+    <SettingItemContainer active={!isSkeleton && active} disabledFeature={disabledFeature}>
       <IconWrapper>
         {
           isSkeleton

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

@@ -15,6 +15,11 @@ export const SettingItemContainer = styled.div`
     border: 1px solid #2C7BE5 !important;
   `}
 
+  ${({ disabledFeature }) => disabledFeature && css`
+    background-color: ${props => props.theme?.colors.disabled} !important;
+    cursor: not-allowed;
+  `}
+
   &:hover {
     background: #E9F2FE;
   }

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

@@ -102,17 +102,6 @@ const SettingsUI = (props) => {
     }
   }, [categoryList?.categories])
 
-  // useEffect(() => {
-  //   if (Object.keys(configs).length > 0) {
-  //     const _configs = [
-  //       configs?.stripe_connect_sandbox,
-  //       { ...configs?.stripe_connect_client_id, name: t('CLIENT_ID_SANDBOX') },
-  //       { ...configs?.stripe_connect_client_id_sandbox, name: t('CLIENT_ID_PRODUCTION') }
-  //     ]
-  //     setStripeConnectConfigs([..._configs])
-  //   }
-  // }, [configs])
-
   return (
     <>
       <BasicSettingsContainer>

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { XLg, LifePreserver } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, useSession } from 'ordering-components-admin-external'
 import { IconButton } from '../../../styles'
 import { Modal, NotFoundSource } from '../../Shared'
 import MdcPlayCircle from '@meronex/icons/mdc/MdcPlayCircle'
@@ -10,7 +10,7 @@ import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
 import { EmailSetting } from '../EmailSetting'
 import { NotificationSetting } from '../NotificationSetting'
 import { SettingsList } from '../SettingsList'
-
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 import {
   Container,
   DescriptionContent,
@@ -43,7 +43,9 @@ export const SettingsDetail = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [extraInfoOpen, setExtraInfoOpen] = useState(false)
   const [extraSubCatOpen, setExtraSubCatOpen] = useState(false)
-
+  const [isDisabledFeature, setIsDisabledFeature] = useState(false)
+  const [{ configs }] = useConfig()
+  const [{ user }] = useSession()
   const actionSidebar = (value) => {
     setIsMenuOpen(value)
 
@@ -130,6 +132,22 @@ export const SettingsDetail = (props) => {
     return () => document.removeEventListener('keydown', onCloseSidebar)
   }, [open])
 
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && user && category) {
+      const featureList = { wallet: 'cash_wallet' }
+
+      if (Object.keys(featureList).every(feature => feature !== category?.key)) {
+        setIsDisabledFeature(false)
+        return
+      }
+      if (!Object.keys(configs).includes(featureList[category?.key]) && user?.level === 0) {
+        setIsDisabledFeature(true)
+        return
+      }
+      setIsDisabledFeature(false)
+    }
+  }, [configs, category])
+
   return (
     <Container
       id='catDescription'
@@ -179,13 +197,14 @@ export const SettingsDetail = (props) => {
                 </video>
               </VideoContainer>
             )}
-            <AllSetting onClick={() => handleExtraOpen(false)}>
+            <AllSetting onClick={() => !isDisabledFeature && handleExtraOpen(false)} isDisabledFeature={isDisabledFeature}>
               <span>{t('SETTINGS', 'All settings')}</span>
               <BsArrowRight />
             </AllSetting>
           </Content>
         )}
       </DescriptionContent>
+      {isDisabledFeature && (<DisabledFeatureAlert />)}
       {extraInfoOpen && category.support_url && (
         <>
           {width >= 1000 ? (

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

@@ -141,13 +141,20 @@ export const AllSetting = styled.div`
   user-select: none;
   cursor: pointer;
   margin-top: 36px;
+  ${({ isDisabledFeature }) => css`
+    cursor: ${props => isDisabledFeature ? 'not-allowed' : 'pointer'};
+  `}
   span {
     font-weight: 600;
     font-size: 14px;
-    color: #03459E;
+    ${({ isDisabledFeature }) => css`
+      color: ${props => isDisabledFeature ? props.theme.colors?.disabled : '#03459E'};
+    `}
   }
   svg {
-    color: #03459E;
+    ${({ isDisabledFeature }) => css`
+      color: ${props => isDisabledFeature ? props.theme.colors?.disabled : '#03459E'};
+    `}
   }
 `
 

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, SettingsList as SettingsListController } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, useSession, SettingsList as SettingsListController } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert, NotFoundSource } from '../../Shared'
 import { Button } from '../../../styles'
 import { SettingsSelectUI } from '../SettingsSelectUI'
 import { SettingsCountryFilter } from '../SettingsCountryFilter'
 import { SettingsImage } from '../SettingsImage'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 import {
   SettingsListContainer,
   GeneralContainer,
@@ -25,6 +26,7 @@ export const SettingsListUI = (props) => {
   const {
     settingsState,
     configs,
+    category,
     formState,
     onCloseSettingsList,
     handleCheckBoxChange,
@@ -34,8 +36,11 @@ export const SettingsListUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [configState] = useConfig()
+  const [isDisabledFeature, setIsDisabledFeature] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-
+  const [{ user }] = useSession()
+  const featureName = 'advanced_logistics'
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -98,6 +103,21 @@ export const SettingsListUI = (props) => {
     }
   }, [settingsState?.result])
 
+  useEffect(() => {
+    if (category?.key === 'autoassign' && !configState?.loading &&
+      Object.keys(configState?.configs).length > 0 && !formState?.loading &&
+      formState?.finalResult.length > 0 && user) {
+      const autoassignType = formState?.changes?.find(change => change?.key === 'autoassign_type')?.value ||
+        formState?.finalResult?.find(re => re?.key === 'autoassign_type')?.value
+      if (!Object.keys(configState?.configs).includes(featureName) &&
+        user?.level === 0 && autoassignType === 'enterprise') {
+        setIsDisabledFeature(true)
+        return
+      }
+      setIsDisabledFeature(false)
+    }
+  }, [configState, formState])
+
   return (
     <>
       <SettingsListContainer>
@@ -260,10 +280,17 @@ export const SettingsListUI = (props) => {
           )
         }
       </SettingsListContainer>
+      {isDisabledFeature && (<DisabledFeatureAlert />)}
       {
         settingsState?.changes?.length > 0 && (
           <SubmitBtnWrapper>
-            <Button color='primary' onClick={handleSubmit}>{t('SAVE', 'Save')}</Button>
+            <Button
+              color='primary'
+              onClick={handleSubmit}
+              disabled={isDisabledFeature}
+            >
+              {t('SAVE', 'Save')}
+            </Button>
           </SubmitBtnWrapper>
         )
       }

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

@@ -21,6 +21,7 @@ export const ColorBox = styled.div`
   min-width: 44px;
   margin-right: 10px;
   background-color: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.borderColor};
 
   ${props => props.theme.rtl && css`
     margin-left: 10px;

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

@@ -92,10 +92,10 @@ export const ColumnAllowSettingPopover = (props) => {
           {optionsDefault.map(option => (
             <AllowItem
               key={option.value}
-              isChecked={allowColumns[option.value]}
+              isChecked={allowColumns?.[option.value]?.visable}
               onClick={() => handleChangeAllowColumns(option.value)}
             >
-              {allowColumns[option.value] ? (
+              {allowColumns?.[option.value]?.visable ? (
                 <RiCheckboxFill />
               ) : (
                 <RiCheckboxBlankLine />

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

@@ -8,7 +8,8 @@ export const SearchBar = (props) => {
     search,
     placeholder,
     isCustomLayout,
-    lazyLoad
+    lazyLoad,
+    customClass
   } = props
   let timeout = null
   let previousSearch
@@ -45,7 +46,7 @@ export const SearchBar = (props) => {
   }, [search])
 
   return (
-    <SearchContainer isCustomLayout={isCustomLayout}>
+    <SearchContainer isCustomLayout={isCustomLayout} className={customClass || ''}>
       <IosSearch />
       <input type='text' ref={el} name='search' placeholder={placeholder} autoComplete='off' />
     </SearchContainer>

package/src/components/SidebarMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react'
+import React, { useEffect, useContext, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { LogoutButton } from '../LogoutButton'
 import {
@@ -251,6 +251,21 @@ export const SidebarMenu = (props) => {
     }
   ]
 
+  const driverManagerSubMenus = [
+    {
+      id: 1,
+      title: t('DRIVERS', 'Drivers'),
+      pageName: 'delivery_drivers',
+      url: '/delivery/drivers-list'
+    },
+    {
+      id: 2,
+      title: t('DRIVERS_GROUPS', 'Drivers groups'),
+      pageName: 'drivers_groups',
+      url: '/delivery/drivers-groups'
+    }
+  ]
+
   const marketingSubmenus = [
     {
       id: 1,
@@ -483,7 +498,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level === 0 && (
+                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 5) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='7'
@@ -499,7 +514,7 @@ export const SidebarMenu = (props) => {
                       </ContextAwareToggle>
                       <Accordion.Collapse eventKey='7'>
                         <MenuContent>
-                          {deliverySubmenus.map(item => (
+                          {(sessionState?.user?.level === 5 ? driverManagerSubMenus : deliverySubmenus).map(item => (
                             <SubMenu
                               key={item.id}
                               active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
@@ -513,7 +528,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && (
+                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='8'
@@ -541,7 +556,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && (
+                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='9'
@@ -570,7 +585,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level !== 5 && (
+                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='10'
@@ -637,7 +652,7 @@ export const SidebarMenu = (props) => {
                     </MenuContainer>
                   </Accordion>
                 )}
-                {sessionState?.user?.level !== 5 && (
+                {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 2 && (
                   <Button
                     className='d-flex align-items-center'
                     variant={location.pathname === '/ordering-products' && 'primary'}

package/src/components/SidebarMenu/styles.js

@@ -160,6 +160,14 @@ export const MenuContainer = styled.div`
     width: 100%;
     text-align: initial;
   }
+
+  ${({ disabledFeature }) => disabledFeature && css`
+    background-color: ${props => props.theme.colors.disabled};
+    cursor: not-allowed;
+    > button {
+      pointer-events: none;
+    }
+  `}
 `
 
 export const MenuContent = styled.div`
@@ -183,6 +191,11 @@ export const SubMenu = styled.div`
   ${({ active }) => active && css`
     color: ${props => props.theme.colors.primary};
   `}
+  ${({ disabledFeature }) => disabledFeature && css`
+    background-color: ${props => props.theme.colors.disabled}!important;
+    cursor: not-allowed;
+  `}
+
   ${props => props.theme?.rtl ? css`
     padding-right: 40px;
   ` : css`

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, BusinessMenu as BusinessMenuController } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, useSession, BusinessMenu as BusinessMenuController } from 'ordering-components-admin-external'
 import { BusinessMenuOptions } from '../BusinessMenuOptions'
 import { Confirm, Modal, SearchBar } from '../../Shared'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { Button, Checkbox } from '../../../styles'
 import { ChevronRight } from 'react-bootstrap-icons'
+import { DisabledFeatureAlert } from '../../DisabledFeatureAlert'
 
 import {
   MainContainer,
@@ -32,6 +33,8 @@ const BusinessMenuUI = (props) => {
     sitesState
   } = props
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ user }] = useSession()
   const { width } = useWindowSize()
 
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -40,6 +43,8 @@ const BusinessMenuUI = (props) => {
   const [isOpenSharedProduct, setIsOpenSharedProduct] = useState(false)
   const [searchValue, setSearchValue] = useState('')
   const [menuList, setMenuList] = useState([])
+  const [isDisabledFeature, setIsDisabledFeature] = useState(false)
+  const featureName = 'shared_menus'
 
   const handleOpenOptions = (name, menu) => {
     setCurrentMenu(menu)
@@ -66,6 +71,16 @@ const BusinessMenuUI = (props) => {
     setMenuList(filteredMenus)
   }, [JSON.stringify(businessMenusState.menus), JSON.stringify(businessMenusState.menusShared), searchValue, isSelectedSharedMenus])
 
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && user) {
+      if (!Object.keys(configs).includes(featureName) && user?.level === 0 && isSelectedSharedMenus) {
+        setIsDisabledFeature(true)
+        return
+      }
+      setIsDisabledFeature(false)
+    }
+  }, [configs, isSelectedSharedMenus])
+
   return (
     <MainContainer>
       <MenuContainer isHide={isOpenSharedProduct}>
@@ -75,6 +90,7 @@ const BusinessMenuUI = (props) => {
             borderRadius='8px'
             color='lightPrimary'
             onClick={() => handleOpenOptions('option', {})}
+            disabled={isDisabledFeature}
           >
             {t('ADD_MENU', 'Add menu')}
           </Button>
@@ -100,7 +116,7 @@ const BusinessMenuUI = (props) => {
             {t('SHARED_MENUS', 'Shared menus')}
           </Tab>
         </TabsContainer>
-        <SearchBarWrapper>
+        <SearchBarWrapper isDisabledFeature={isDisabledFeature}>
           <SearchBar
             isCustomLayout
             lazyLoad
@@ -129,7 +145,8 @@ const BusinessMenuUI = (props) => {
             key={menu.id}
             isBorderTop={index === 0}
             active={menu.id === currentMenu?.id}
-            onClick={(e) => handleOpenEdit(e, menu)}
+            onClick={(e) => !isDisabledFeature && handleOpenEdit(e, menu)}
+            isDisabledFeature={isDisabledFeature}
           >
             <CheckboxWrapper
               className='business_checkbox_control'
@@ -151,6 +168,7 @@ const BusinessMenuUI = (props) => {
           </AddMenuButton>
         )}
       </MenuContainer>
+      {isDisabledFeature && (<DisabledFeatureAlert />)}
       {width >= 1000 ? (
         <>
           {showOption === 'option' && (

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

@@ -73,6 +73,14 @@ export const MeunItem = styled.div`
     margin: 0 3px;
     font-size: 13px;
   }
+
+  ${({ isDisabledFeature }) => isDisabledFeature && css`
+      cursor: not-allowed;
+      opacity: 0.4;
+      &:hover {
+        background-color: ${props => props.theme.colors.white};
+      }
+  `}
 `
 
 export const MenuName = styled.span`
@@ -124,10 +132,21 @@ export const Tab = styled.div`
   ${({ active }) => !active && css`
     color: ${props => props.theme.colors?.lightGray};
   `}
+
+  ${({ disabledFeature }) => disabledFeature && css`
+    cursor: not-allowed;
+  `}
 `
 
 export const SearchBarWrapper = styled.div`
   margin-bottom: 15px;
+  ${({ isDisabledFeature }) => isDisabledFeature && css`
+      cursor: not-allowed;
+      > div {
+        pointer-events: none;
+        opacity: 0.4;
+      }
+  `}
 `
 export const SelectButtonGroup = styled.div`
   display: flex;

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

@@ -159,6 +159,12 @@ export const Tab = styled.div`
   ${({ active }) => !active && css`
     color: ${props => props.theme.colors.lightGray};
   `}
+
+  ${({ disabledFeature }) => disabledFeature && css`
+    background-color: ${props => props.theme.colors.disabled};
+    border-radius: 5px;
+    cursor: not-allowed;
+  `}
 `
 
 export const BusinessMenuBasicContainer = styled.div`