ordering-ui-admin-external 1.25.1 → 1.26.1

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

@@ -1,10 +1,17 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { useLanguage, SettingsList as SettingsListController } from 'ordering-components-admin-external'
 import { SettingsSelectUI } from '../SettingsSelectUI'
-import { Accordion, AccordionContext, useAccordionToggle } from 'react-bootstrap'
-import { Button } from '../../../styles'
+import { Accordion, AccordionContext, useAccordionToggle, OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Button, IconButton } from '../../../styles'
 import { Alert } from '../../Shared'
-import { NotificationSettingContainer, AccordionTitle, GeneralWrapper, ToggleItemWrapper } from './styles'
+import { InfoCircle } from 'react-bootstrap-icons'
+import {
+  NotificationSettingContainer,
+  AccordionTitle,
+  GeneralWrapper,
+  ToggleItemWrapper,
+  TitleWrapper
+} from './styles'
 import {
   FormGroupText,
   CheckBoxWrapper,
@@ -36,9 +43,22 @@ const NotificationSettingUI = (props) => {
     'onesignal_orderingweb_id',
     'onesignal_dashboardweb_id',
     'driver_close_distance',
-    'notification_toast'
+    'notification_toast',
+    'notification_times_repeat',
+    'notification_each_time_repeat',
+    'notification_superadmin_repeat',
+    'notification_business_repeat',
+    'notification_driver_repeat'
   ]
 
+  const tooltips = {
+    notification_times_repeat: t('MAX_TIMES_TO_REPEAT_15', 'Max times to repeat = 15'),
+    notification_each_time_repeat: t('EACH_TIME_SETTING_SET_IN_SECONDS', 'Each time setting set in seconds'),
+    notification_superadmin_repeat: t('NOTIFICATION_REPEAT_WORKS_WITH_PENDING_READY', 'Notification repeat works only with Pending (0) and Order Ready (4) status'),
+    notification_business_repeat: t('PENDING_STATUS_WORKS_FOR_ADMIN_DRIVER_BUSINESS_USER', 'Pending status works for admin, driver, business user'),
+    notification_driver_repeat: t('ORDER_READY_WORKS_WITH_DRIVER_USER', 'Order Ready works only with driver user')
+  }
+
   const [general, setGeneral] = useState(null)
   const [superAdmin, setSuperAdmin] = useState(null)
   const [business, setBusiness] = useState(null)
@@ -93,7 +113,26 @@ const NotificationSettingUI = (props) => {
                     {
                       config.type === 1 && (
                         <FormGroupText className='form-group'>
-                          <label>{config?.name}</label>
+                          <TitleWrapper>
+                            <label>{config?.name}</label>
+                            {tooltips?.[config?.key] && (
+                              <OverlayTrigger
+                                placement='bottom'
+                                overlay={
+                                  <Tooltip>
+                                    {tooltips?.[config?.key]}
+                                  </Tooltip>
+                                }
+                              >
+                                <IconButton
+                                  color='primary'
+                                  className='tour_btn'
+                                >
+                                  <InfoCircle />
+                                </IconButton>
+                              </OverlayTrigger>
+                            )}
+                          </TitleWrapper>
                           {config?.description && <Description>{config?.description}</Description>}
                           <input
                             type='text'
@@ -107,11 +146,35 @@ const NotificationSettingUI = (props) => {
                     }
                     {
                       config.type === 2 && (
-                        <SettingsSelectUI
-                          config={config}
-                          defaultValue={config?.value}
-                          handleSelectChange={(value) => handleInputChange(value, config?.id)}
-                        />
+                        <>
+                          <TitleWrapper>
+                            <label>{config?.name}</label>
+                            {tooltips?.[config?.key] && (
+                              <OverlayTrigger
+                                placement='bottom'
+                                overlay={
+                                  <Tooltip>
+                                    {tooltips?.[config?.key]}
+                                  </Tooltip>
+                                }
+                              >
+                                <IconButton
+                                  color='primary'
+                                  className='tour_btn'
+                                >
+                                  <InfoCircle />
+                                </IconButton>
+                              </OverlayTrigger>
+                            )}
+                          </TitleWrapper>
+                          {config?.description && <Description>{config?.description}</Description>}
+                          <SettingsSelectUI
+                            noHeader
+                            config={config}
+                            defaultValue={config?.value}
+                            handleSelectChange={(value) => handleInputChange(value, config?.id)}
+                          />
+                        </>
                       )
                     }
                   </div>

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

@@ -22,3 +22,22 @@ export const ToggleItemWrapper = styled.div`
     background: ${props => props.theme?.colors.borderColor};
   `}
 `
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  label {
+    margin-bottom: 0 !important;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`

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

@@ -15,7 +15,8 @@ import {
 export const SettingsSelectUI = (props) => {
   const {
     config,
-    handleSelectChange
+    handleSelectChange,
+    noHeader
   } = props
 
   const [, t] = useLanguage()
@@ -55,14 +56,16 @@ export const SettingsSelectUI = (props) => {
 
   return (
     <SettingsSelectContainer>
-      <SelectHeader>
-        {
-          config?.name && (
-            <label>{config?.name}</label>
-          )
-        }
-        {config?.description && <p>{config?.description}</p>}
-      </SelectHeader>
+      {!noHeader && (
+        <SelectHeader>
+          {
+            config?.name && (
+              <label>{config?.name}</label>
+            )
+          }
+          {config?.description && <p>{config?.description}</p>}
+        </SelectHeader>
+      )}
       {
         options ? (
           <SelectContent>

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

@@ -7,6 +7,8 @@ import 'react-date-range/dist/theme/default.css'
 import { Calendar4 } from 'react-bootstrap-icons'
 import { Button } from '../../../styles'
 import { Container, CalendarWrapper } from './styles'
+import * as locales from 'react-date-range/dist/locale'
+import { getLocale } from '../../../utils'
 
 export const RangeCalendar = (props) => {
   const {
@@ -18,7 +20,7 @@ export const RangeCalendar = (props) => {
     minDate
   } = props
 
-  const [, t] = useLanguage()
+  const [state, t] = useLanguage()
   const [dateRange, setDateRange] = useState([
     {
       startDate: null,
@@ -111,6 +113,7 @@ export const RangeCalendar = (props) => {
           <CalendarWrapper ref={calendarRef} isLeft={isLeft}>
             {isSingleDate ? (
               <Calendar
+                locale={getLocale(state?.language?.code, locales)}
                 date={date}
                 onChange={(date) => handleChangeSingleDate(date)}
                 minDate={minDate || new Date('1922-01-01')}
@@ -118,10 +121,13 @@ export const RangeCalendar = (props) => {
             ) : (
               <DateRange
                 editableDateInputs
+                locale={getLocale(state?.language?.code, locales)}
                 onChange={item => handleChangeDates(item)}
                 moveRangeOnFirstSelection={false}
                 ranges={dateRange}
                 minDate={minDate || new Date('1922-01-01')}
+                startDatePlaceholder={t('EARLY', 'Early')}
+                endDatePlaceholder={t('CONTINUOUS', 'Continuous')}
               />
             )}
           </CalendarWrapper>

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

@@ -1,16 +1,18 @@
 import React, { useRef, useEffect } from 'react'
-import { SearchContainer } from './styles'
-import IosSearch from '@meronex/icons/ios/IosSearch'
+import { Search, XCircle } from 'react-bootstrap-icons'
+import {
+  SearchContainer
+} from './styles'
 
 export const SearchBar = (props) => {
   const {
     onSearch,
     search,
     placeholder,
-    isCustomLayout,
     lazyLoad,
     customClass
   } = props
+
   let timeout = null
   let previousSearch
   const el = useRef()
@@ -35,6 +37,11 @@ export const SearchBar = (props) => {
     previousSearch = e.target.value
   }
 
+  const handleClear = () => {
+    onSearch('')
+    el.current.value = ''
+  }
+
   useEffect(() => {
     el.current.onkeyup = onChangeSearch
   }, [])
@@ -46,9 +53,11 @@ export const SearchBar = (props) => {
   }, [search])
 
   return (
-    <SearchContainer isCustomLayout={isCustomLayout} className={customClass || ''}>
-      <IosSearch />
+    <SearchContainer className={customClass || ''}>
       <input type='text' ref={el} name='search' placeholder={placeholder} autoComplete='off' />
+      {el.current?.value
+        ? <XCircle className='close' onClick={handleClear} />
+        : <Search />}
     </SearchContainer>
   )
 }

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

@@ -2,30 +2,20 @@ import styled, { css } from 'styled-components'
 
 export const SearchContainer = styled.div`
   position: relative;
-
-  svg {
-    position: absolute;
-    top: 10px;
-    ${props => props.theme?.rtl ? css`
-      right: 15px;
-    ` : css`
-      left: 15px;
-    `}
-    font-size: 20px;
-    color: ${props => props.theme.colors.lightGray};
-  }
+  display: flex;
+  align-items: center;
 
   > input {
-    width: 250px;
+    width: 100%;
     border: 1px solid ${props => props.theme.colors.borderColor} !important;
     background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
-    border-radius: 22px;
     outline: none;
-    padding: 10px 8px;
+    padding: 10px 15px;
+    border-radius: 8px;
     ${props => props.theme?.rtl ? css`
-      padding-right: 40px;
-    ` : css`
       padding-left: 40px;
+    ` : css`
+      padding-right: 40px;
     `}
     font-size: 14px;
     color: ${props => props.theme.colors.headingColor};
@@ -35,23 +25,20 @@ export const SearchContainer = styled.div`
     }
   }
 
-  ${({ isCustomLayout }) => isCustomLayout && css`
-    input {
-      border-radius: 8px;
-      width: 100%;
-      padding: 10px 15px;
-    }
+  svg {
+    position: absolute;
+    ${props => props.theme?.rtl ? css`
+      left: 15px;
+    ` : css`
+      right: 15px;
+    `}
+    font-size: 16px;
+    color: ${props => props.theme.colors.lightGray};
 
-    svg {
-      ${props => props.theme?.rtl ? css`
-        right: initial;
-        left: 10px;
-      ` : css`
-        left: initial;
-        right: 10px;
-      `}
+    &.close {
+      cursor: pointer;
     }
-  `}
+  }
 
   @media (max-width: 1200px) {
     flex: 1;

package/src/components/SidebarMenu/index.js

@@ -81,14 +81,20 @@ const SidebarMenuUI = (props) => {
       pageName: 'drivers',
       url: '/drivers'
     },
+    // {
+    //   id: 4,
+    //   title: t('ALL_IN_ONE', 'All in one'),
+    //   pageName: 'all_in_one',
+    //   url: '/all-in-one'
+    // },
     {
-      id: 4,
+      id: 5,
       title: t('APPOINTMENTS', 'Appointments'),
       pageName: 'appointments',
       url: '/appointments'
     },
     {
-      id: 5,
+      id: 6,
       title: t('GIFT_CARD_MANAGER', 'Gift card manager'),
       pageName: 'giftCards',
       url: '/gift-cards'
@@ -156,12 +162,12 @@ const SidebarMenuUI = (props) => {
       pageName: 'driver_app',
       url: '/my-products/driver-app'
     },
-    {
-      id: 5,
-      title: t('POS_APP', 'POS'),
-      pageName: 'pos_app',
-      url: '/my-products/pos-app'
-    },
+    // {
+    //   id: 5,
+    //   title: t('POS_APP', 'POS'),
+    //   pageName: 'pos_app',
+    //   url: '/my-products/pos-app'
+    // },
     {
       id: 6,
       title: t('CALL_CENTER_APP', 'Call center'),
@@ -493,6 +499,7 @@ const SidebarMenuUI = (props) => {
                           location.pathname === '/orders' ||
                           location.pathname === '/deliveries' ||
                           location.pathname === '/drivers' ||
+                          location.pathname === '/all-in-one' ||
                           location.pathname === '/appointments' ||
                           location.pathname === '/gift-cards'
                         }

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

@@ -5,7 +5,7 @@ import { UserDetails as UserDetailsController, useLanguage, useSession } from 'o
 import { UserDetailsMenu } from '../UserDetailsMenu'
 import { UserProfileForm } from '../UserProfileForm'
 import { AddressList } from '../../Delivery'
-import { OrdersManager } from '../../Orders'
+import { OrdersManager } from '../../Orders/OrdersManager'
 import { BusinessManagerBusinesses } from '../BusinessManagerBusinesses'
 import { ArrowsAngleContract, ArrowsAngleExpand, Envelope, Phone, ThreeDots } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'