ordering-ui-admin-external 1.43.25 → 1.43.28

package/src/components/Delivery/UserDetails/index.js

@@ -54,7 +54,8 @@ export const UserDetailsUI = (props) => {
   const [isPersonalization, setIsPersonalization] = useState(false)
   const [isExpand, setIsExpand] = useState(false)
   const [{ configs }] = useConfig()
-  const disableSchedule = configs?.allow_driver_manager_update_driver_schedule?.value === '0' && user?.level === 5
+  const viewOnly = user?.readOnlyAdmin || user?.readOnlyDeliveryManager
+  const disableSchedule = (configs?.allow_driver_manager_update_driver_schedule?.value === '0' && user?.level === 5) || viewOnly
   const isWhiteLabel = configs?.white_label_module?.value
   const expandSidebar = () => {
     const element = document.getElementById('user_lateral_bar')

package/src/components/Orders/AdminsSelector/index.js

@@ -63,7 +63,7 @@ export const AdminsSelector = (props) => {
 
   return (
     <>
-      {!adminsList?.loading && adminsList?.admins?.length > 0 ? (
+      {!adminsList?.loading ? (
         <MultiSelect
           defaultValue={filterValues.administratorIds}
           placeholder={Placeholder}
@@ -94,4 +94,3 @@ export const AdminsSelector = (props) => {
     </>
   )
 }
-

package/src/components/Orders/DeliveriesManager/index.js

@@ -32,7 +32,8 @@ const DeliveriesManagerUI = (props) => {
     numberOfOrdersBySubstatus,
     timeStatus,
     setTimeStatus,
-    isUseQuery
+    isUseQuery,
+    adminsList
   } = props
 
   const [, t] = useLanguage()
@@ -93,6 +94,7 @@ const DeliveriesManagerUI = (props) => {
           setFilterModalOpen={setFilterModalOpen}
           setTimeStatus={setTimeStatus}
           setSlaSettingTime={setSlaSettingTime}
+          adminsList={adminsList}
         />
         <OrdersContent>
           <WrapItemView>

package/src/components/Orders/OrderBill/index.js

@@ -15,7 +15,8 @@ export const OrderBill = (props) => {
     order,
     actionStatus,
     handleRefundPaymentsStripe,
-    handleOrderRefund
+    handleOrderRefund,
+    viewOnly
   } = props
 
   const isGiftCardOrder = order?.products?.[0]?.type === 'gift_card'
@@ -284,7 +285,7 @@ export const OrderBill = (props) => {
           </tbody>
         </table>
       )}
-      {!isGiftCardOrder && (
+      {!isGiftCardOrder && !viewOnly && (
         <RefundToWallet
           order={order}
           actionStatus={actionStatus}
@@ -377,7 +378,7 @@ export const OrderBill = (props) => {
         </table>
       )}
 
-      {!isGiftCardOrder && !order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
+      {!isGiftCardOrder && !order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && !viewOnly && (
         <RefundButtonWrapper>
           <Button
             color='primary'

package/src/components/Orders/OrderContactInformation/index.js

@@ -51,6 +51,7 @@ export const OrderContactInformation = (props) => {
   const [{ optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
   const googleInputRef = useRef(null)
+  const readOnlyBusinessOwner = user?.readOnlyBusinessOwner
 
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const isDisableDriverCompanies = configs?.disable_companies_order_details?.value === '1'
@@ -211,10 +212,12 @@ export const OrderContactInformation = (props) => {
                 </ReviewButton>
               )}
             </InfoContent>
-            <ActionIconWrapper>
-              <Pencil className='edit-icon' onClick={handleEdit} />
-              <ChevronDown className='down-arrow' />
-            </ActionIconWrapper>
+            {!readOnlyBusinessOwner && (
+              <ActionIconWrapper>
+                <Pencil className='edit-icon' onClick={handleEdit} />
+                <ChevronDown className='down-arrow' />
+              </ActionIconWrapper>
+            )}
           </CustomerInfo>
         </ContextAwareToggle>
         <Accordion.Collapse eventKey='1'>
@@ -348,7 +351,7 @@ export const OrderContactInformation = (props) => {
       </Accordion>
       {deliveryTypes.includes(order?.delivery_type) && !isServiceOrder && (
         <>
-          {!order?.driver_id && !isDisableDriverCompanies && (
+          {!order?.driver_id && !isDisableDriverCompanies && !readOnlyBusinessOwner && (
             <CompanySelectorContainer>
               <p>{t('DRIVER_COMPANY', 'Driver company')}</p>
               <CompanySelector
@@ -365,7 +368,7 @@ export const OrderContactInformation = (props) => {
               />
             </CompanySelectorContainer>
           )}
-          {!order?.driver_company_id && !commentInfoState?.open && (
+          {!order?.driver_company_id && !commentInfoState?.open && !readOnlyBusinessOwner && (
             <DriverSelectorContainer>
               <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
               <DriverSelector

package/src/components/Orders/OrderDetails/index.js

@@ -104,6 +104,10 @@ const OrderDetailsUI = (props) => {
   const [commentInfoState, setCommentInfostate] = useState({ open: false, driverId: null })
   const cateringTypes = [7, 8]
   const placeSpotEnabled = [3, 4]
+  const readOnlyBusinessOwner = user?.readOnlyBusinessOwner
+  const readOnlyDeliveryManager = user?.readOnlyDeliveryManager
+  const readOnlyAdmin = user?.readOnlyAdmin
+
   const {
     order,
     loading
@@ -375,6 +379,7 @@ const OrderDetailsUI = (props) => {
                 deliveryType={order?.delivery_type}
                 defaultValue={parseInt(order.status)}
                 handleUpdateOrderStatus={handleUpdateOrderStatus}
+                viewOnly={(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner)}
               />
             </OrderStatusSelectorWrapper>
           </OrderStatus>
@@ -445,6 +450,7 @@ const OrderDetailsUI = (props) => {
               actionStatus={actionStatus}
               handleRefundPaymentsStripe={handleRefundPaymentsStripe}
               handleOrderRefund={handleOrderRefund}
+              viewOnly={(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner)}
             />
           </div>
           <DetailBottom />

package/src/components/Orders/OrderStatusTypeSelector/index.js

@@ -20,7 +20,8 @@ export const OrderStatusTypeSelector = (props) => {
     filterValues,
     handleUpdateOrderStatus,
     handleChangeMultiOrdersStatus,
-    handleChangeOrderStatus
+    handleChangeOrderStatus,
+    viewOnly
   } = props
 
   const [, t] = useLanguage()
@@ -551,6 +552,7 @@ export const OrderStatusTypeSelector = (props) => {
             isShowSearchBar
             searchValue={searchValue}
             handleChangeSearch={handleChangeSearch}
+            isDisabled={viewOnly}
           />
         ) : (
           <Select

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

@@ -69,6 +69,7 @@ export const TopRightSection = styled.div`
   flex-direction: column-reverse;
   flex-wrap: nowrap;
   margin: 5px 0px 10px 15px;
+  overflow: auto;
 
   ${({ isCustomLayout }) => !isCustomLayout && css`
     justify-content: flex-end;

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

@@ -21,6 +21,9 @@ export const InputPhoneNumber = (props) => {
 
   const isValidPhoneNumber = (number) => {
     if (!number) return
+    if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+      return true
+    }
     const numberParser = parsePhoneNumber(number)
     return numberParser?.isValid()
   }

package/src/components/SidebarMenu/index.js

@@ -60,7 +60,9 @@ const SidebarMenuUI = (props) => {
   const windowSize = useWindowSize()
   const isPoweredByOrderingModule = configs?.powered_by_ordering_module?.value
   const isEnabledAppointmentsFeature = configs?.appointments?.value
-
+  const readOnlyBusinessOwner = sessionState?.user?.readOnlyBusinessOwner
+  const readOnlyDeliveryManager = sessionState?.user?.readOnlyDeliveryManager
+  const readOnlyAdmin = sessionState?.user?.readOnlyAdmin
   const [showMessage, setShowMessage] = useState(false)
 
   const ordersSubMenus = [
@@ -344,28 +346,28 @@ const SidebarMenuUI = (props) => {
       title: t('DRIVER_MANAGERS', 'Drivers manager'),
       pageName: 'drivers_managers',
       url: '/delivery/drivers-managers',
-      enabled: sessionState?.user?.level === 0
+      enabled: sessionState?.user?.level === 0 && !(readOnlyAdmin || readOnlyDeliveryManager)
     },
     {
       id: 3,
       title: t('DELIVERY_COMPANIES', 'Delivery companies'),
       pageName: 'drivers_companies',
       url: '/delivery/drivers-companies',
-      enabled: sessionState?.user?.level === 0
+      enabled: sessionState?.user?.level === 0 && !(readOnlyAdmin || readOnlyDeliveryManager)
     },
     {
       id: 4,
       title: t('DELIVERY_AUTOMATION', 'Delivery automation'),
       pageName: 'drivers_groups',
       url: '/delivery/drivers-groups',
-      enabled: sessionState?.user?.level === 5 || sessionState?.user?.level === 0
+      enabled: (sessionState?.user?.level === 5 || sessionState?.user?.level === 0) && !(readOnlyAdmin || readOnlyDeliveryManager)
     },
     {
       id: 5,
       title: t('DRIVERS_TIME_DISPLAY', 'Drivers time display'),
       pageName: 'drivers_time_display',
       url: '/delivery/drivers-time-display',
-      enabled: sessionState?.user?.level === 5 || sessionState?.user?.level === 0
+      enabled: (sessionState?.user?.level === 5 || sessionState?.user?.level === 0) && !(readOnlyAdmin || readOnlyDeliveryManager)
     }
   ]
 
@@ -512,7 +514,7 @@ const SidebarMenuUI = (props) => {
                     </Button>
                   )} */}
 
-                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8 && (
+                  {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8 && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='0'
@@ -548,8 +550,8 @@ const SidebarMenuUI = (props) => {
                         <MenuContent>
                           {ordersSubMenus.map(item => (
                             !(sessionState?.user?.level === 2 && item.pageName === 'drivers') &&
-                            !((sessionState?.user?.level === 2 || sessionState?.user?.level === 5) && item.pageName === 'giftCards') &&
-                            !(sessionState?.user?.level === 5 && item.pageName === 'appointments') && (
+                            !((sessionState?.user?.level === 2 || sessionState?.user?.level === 5 || readOnlyAdmin) && item.pageName === 'giftCards') &&
+                            !((sessionState?.user?.level === 5 || readOnlyAdmin) && item.pageName === 'appointments') && (
                               item.pageName === 'appointments' ? (
                                 isEnabledAppointmentsFeature && (
                                   <SubMenu
@@ -576,7 +578,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && (
+                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='2'
@@ -590,7 +592,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && (
+                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='3'
@@ -619,7 +621,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 2) && (
+                  {(sessionState?.user?.level === 0 || sessionState?.user?.level === 2) && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='4'
@@ -666,7 +668,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && (
+                  {(sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8) && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='5'
@@ -735,14 +737,14 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level === 0 && (
+                  {sessionState?.user?.level === 0 && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='8'
                         active={
                           location.pathname === '/marketing/promotions-enterprise' ||
                           location.pathname === '/marketing/campaign' ||
-                          location.pathname === '/marketing/ad-banners'||
+                          location.pathname === '/marketing/ad-banners' ||
                           location.pathname === '/loyalty/rewards-programs' ||
                           location.pathname === '/loyalty/levels' ||
                           location.pathname === '/loyalty/reports' ||
@@ -769,7 +771,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {/* {sessionState?.user?.level === 0 && (
+                  {/* {sessionState?.user?.level === 0 && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='9'
@@ -798,7 +800,7 @@ const SidebarMenuUI = (props) => {
                     </MenuContainer>
                   )}
 
-                  {sessionState?.user?.level === 0 && (
+                  {sessionState?.user?.level === 0 && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <ContextAwareToggle
                         eventKey='10'
@@ -825,7 +827,7 @@ const SidebarMenuUI = (props) => {
                       </Accordion.Collapse>
                     </MenuContainer>
                   )} */}
-                  {sessionState?.user?.level === 0 && (
+                  {sessionState?.user?.level === 0 && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
                     <MenuContainer>
                       <span>{t('SALES_CHANNELS_AND_PRODUCTS', 'Sales channels and products')}</span>
                       <ContextAwareToggle
@@ -861,77 +863,79 @@ const SidebarMenuUI = (props) => {
                   )}
                 </Accordion>
               </div>
-              <div className='d-flex flex-column mt-4'>
-                <LanguageSelectorContainer>
-                  <LanguageSelector />
-                </LanguageSelectorContainer>
-                {sessionState?.user?.level === 0 && (
-                  <Accordion>
-                    <MenuContainer>
-                      <ContextAwareToggle
-                        eventKey='5'
-                        active={
-                          location.pathname === '/settings/basic' ||
-                          location.pathname === '/settings/operation' ||
-                          location.pathname === '/settings/plugin' ||
-                          location.pathname === '/settings/pages' ||
-                          location.pathname === '/settings/integrations' ||
-                          location.pathname === '/settings/places' ||
-                          location.pathname === '/settings/advanced' ||
-                          location.pathname === '/settings/language' ||
-                          location.pathname === '/settings/logs'
-                        }
-                      >
-                        <GearIcon />
-                        <span>{t('SETTINGS', 'Settings')}</span>
-                      </ContextAwareToggle>
-                      <Accordion.Collapse eventKey='5'>
-                        <MenuContent>
-                          {settingsSubMenus.map(item => (
-                            <SubMenu
-                              key={item.id}
-                              active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
-                              onClick={() => handleGoToPage({ page: item.pageName })}
-                            >
-                              {firstLetterCapital(item.title)}
-                            </SubMenu>
-                          ))}
-                        </MenuContent>
-                      </Accordion.Collapse>
-                    </MenuContainer>
-                  </Accordion>
-                )}
-                {/* {sessionState?.user?.level === 0 && (
-                  <Button
-                    className='d-flex align-items-center'
-                    variant={location.pathname === '/ordering-products' && 'primary'}
-                    onClick={() => handleGoToPage({ page: 'ordering_products' })}
-                  >
-                    <WindowDock />
-                    <span>{t('ORDERING_PRODUCTS', 'Ordering products')}</span>
-                  </Button>
-                )} */}
-                {sessionState?.user?.level === 0 && (
-                  <Button
-                    className='d-flex align-items-center'
-                    variant={location.pathname === '/support' && 'primary'}
-                    onClick={() => handleGoToPage({ page: 'support' })}
-                  >
-                    <HeadsetIcon />
-                    <span>{t('SUPPORT', 'Support')}</span>
-                  </Button>
-                )}
-                {sessionState?.user?.level === 0 && (
-                  <Button
-                    className='d-flex align-items-center'
-                    variant={false}
-                    onClick={() => handleClickBilling()}
-                  >
-                    <Cash />
-                    <span>{t('BILLING', 'Billing')}</span>
-                  </Button>
-                )}
-              </div>
+              {!(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner) && (
+                <div className='d-flex flex-column mt-4'>
+                  <LanguageSelectorContainer>
+                    <LanguageSelector />
+                  </LanguageSelectorContainer>
+                  {sessionState?.user?.level === 0 && (
+                    <Accordion>
+                      <MenuContainer>
+                        <ContextAwareToggle
+                          eventKey='5'
+                          active={
+                            location.pathname === '/settings/basic' ||
+                            location.pathname === '/settings/operation' ||
+                            location.pathname === '/settings/plugin' ||
+                            location.pathname === '/settings/pages' ||
+                            location.pathname === '/settings/integrations' ||
+                            location.pathname === '/settings/places' ||
+                            location.pathname === '/settings/advanced' ||
+                            location.pathname === '/settings/language' ||
+                            location.pathname === '/settings/logs'
+                          }
+                        >
+                          <GearIcon />
+                          <span>{t('SETTINGS', 'Settings')}</span>
+                        </ContextAwareToggle>
+                        <Accordion.Collapse eventKey='5'>
+                          <MenuContent>
+                            {settingsSubMenus.map(item => (
+                              <SubMenu
+                                key={item.id}
+                                active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
+                                onClick={() => handleGoToPage({ page: item.pageName })}
+                              >
+                                {firstLetterCapital(item.title)}
+                              </SubMenu>
+                            ))}
+                          </MenuContent>
+                        </Accordion.Collapse>
+                      </MenuContainer>
+                    </Accordion>
+                  )}
+                  {/* {sessionState?.user?.level === 0 && (
+                    <Button
+                      className='d-flex align-items-center'
+                      variant={location.pathname === '/ordering-products' && 'primary'}
+                      onClick={() => handleGoToPage({ page: 'ordering_products' })}
+                    >
+                      <WindowDock />
+                      <span>{t('ORDERING_PRODUCTS', 'Ordering products')}</span>
+                    </Button>
+                  )} */}
+                  {sessionState?.user?.level === 0 && (
+                    <Button
+                      className='d-flex align-items-center'
+                      variant={location.pathname === '/support' && 'primary'}
+                      onClick={() => handleGoToPage({ page: 'support' })}
+                    >
+                      <HeadsetIcon />
+                      <span>{t('SUPPORT', 'Support')}</span>
+                    </Button>
+                  )}
+                  {sessionState?.user?.level === 0 && (
+                    <Button
+                      className='d-flex align-items-center'
+                      variant={false}
+                      onClick={() => handleClickBilling()}
+                    >
+                      <Cash />
+                      <span>{t('BILLING', 'Billing')}</span>
+                    </Button>
+                  )}
+                </div>
+              )}
             </SidebarContent>
             <UserInfo
               id='user_info'

package/src/components/Users/UserAddForm/index.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   useLanguage,
+  useConfig,
   DragAndDrop,
   ExamineClick,
   UserFormDetails as UserFormDetailsController
@@ -10,6 +11,7 @@ import { Input, Button } from '../../../styles'
 import { Alert, InputPhoneNumber, Modal, ImageCrop } from '../../Shared'
 import { UserTypeSelector } from '../UserTypeSelector'
 import parsePhoneNumber from 'libphonenumber-js'
+import { formatPhoneNumber } from 'react-phone-number-input'
 import { sortInputFields, bytesConverter } from '../../../utils'
 import Skeleton from 'react-loading-skeleton'
 import BiImage from '@meronex/icons/bi/BiImage'
@@ -46,6 +48,7 @@ const UserAddFormUI = (props) => {
   } = props
   const formMethods = useForm()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
 
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
@@ -133,6 +136,9 @@ const UserAddFormUI = (props) => {
     }
     if (isValid) {
       phoneNumberParser = parsePhoneNumber(number)
+      if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+        if (phoneNumberParser?.nationalNumber) phoneNumberParser.nationalNumber = formatPhoneNumber(number)
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {

package/src/components/Users/UserFormDetails/index.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useLanguage, useCustomer } from 'ordering-components-admin-external'
+import { useLanguage, useCustomer, useConfig } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
+import { formatPhoneNumber } from 'react-phone-number-input'
 import { Alert, InputPhoneNumber, RangeCalendar } from '../../Shared'
 import { sortInputFields } from '../../../utils'
 import { Switch, Input, Button } from '../../../styles'
@@ -43,6 +44,7 @@ export const UserFormDetailsUI = (props) => {
 
   const formMethods = useForm()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
 
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
@@ -143,16 +145,20 @@ export const UserFormDetailsUI = (props) => {
     }
     if (isValid) {
       phoneNumberParser = parsePhoneNumber(number)
+
+      if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+        if (phoneNumberParser?.nationalNumber) phoneNumberParser.nationalNumber = formatPhoneNumber(number)
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: phoneNumberParser?.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: phoneNumberParser?.nationalNumber
         }
       }
     }

package/src/styles/MultiSelect/index.js

@@ -112,16 +112,18 @@ export const MultiSelect = (props) => {
               <React.Fragment key={selectedOption.value}>
                 <MultiSelectOption>
                   {selectedOption.showOnSelected || selectedOption.content}
-                  <Button
-                    circle
-                    outline
-                    color='primary'
-                    type='reset'
-                    className='remove_option'
-                    onClick={() => onChange && onChange(selectedOption.value)}
-                  >
-                    <MdClose />
-                  </Button>
+                  {selectedOption?.value !== 'default' && (
+                    <Button
+                      circle
+                      outline
+                      color='primary'
+                      type='reset'
+                      className='remove_option'
+                      onClick={() => onChange && onChange(selectedOption.value)}
+                    >
+                      <MdClose />
+                    </Button>
+                  )}
                 </MultiSelectOption>
               </React.Fragment>
             ))}

package/template/app.js

@@ -106,6 +106,9 @@ export const App = () => {
   const onlineStatus = useOnlineStatus()
   const { height } = useWindowSize()
 
+  const readOnlyBusinessOwner = user?.readOnlyBusinessOwner
+  const readOnlyDeliveryManager = user?.readOnlyDeliveryManager
+  const readOnlyAdmin = user?.readOnlyAdmin
   const cannyAppId = '5b05e5e2d3f6c47201694ad4'
   const isPastDue = projectStatus.project?.current_status === 'past_due'
   const showBanner = auth && isPastDue
@@ -232,7 +235,7 @@ export const App = () => {
                     <Route exact path='/'>
                       {
                         auth
-                          ? (user?.level !== 5 && user?.level !== 8)
+                          ? ((user?.level !== 5 && user?.level !== 8) && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner))
                             ? <Redirect to='/home' />
                             : user?.level === 8 ? <Redirect to='/profile' /> : <Redirect to='/orders' />
                           : (queryProject && queryToken)
@@ -291,7 +294,7 @@ export const App = () => {
                     <Route exact path='/home'>
                       {
                         auth
-                          ? (user?.level !== 5 && user?.level !== 8)
+                          ? ((user?.level !== 5 && user?.level !== 8) && !(readOnlyAdmin || readOnlyDeliveryManager || readOnlyBusinessOwner))
                             ? <Home />
                             : user?.level === 8 ? <Redirect to='/profile' /> : <Redirect to='/orders' />
                           : <Redirect to='/login' />