ordering-ui-admin-external 1.25.0 → 1.26.0

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/Stores/ImporterHelpContent/index.js

@@ -14,38 +14,38 @@ export const ImporterHelpContent = (props) => {
   return (
     <>
       <SubjectTitle>{t('HOW_TO_USE_IMPORTER', 'How to use the importer?')}</SubjectTitle>
-      <TitleContent>Follow the next steps to use our Importer system.</TitleContent>
+      <TitleContent>{t('HOW_TO_USE_IMPORTER_CONTENT', 'Follow the next steps to use our Importer system.')}</TitleContent>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>1.</TitleNumber> Select your importer.</TitleHeader>
-        <TitleContent>Using our list of default importers, you can select the importer that you require according to your needs.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_1_NUM', '1.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_1', 'Select your importer.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_1_CONTENT', 'Using our list of default importers, you can select the importer that you require according to your needs.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>2.</TitleNumber> Download the Sample CSV.</TitleHeader>
-        <TitleContent>Download the CSV that is inside of our default importers list and your importer selection to be able to edit it.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_2_NUM', '2.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_2', 'Download the Sample CSV.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_2_CONTENT', 'Download the CSV that is inside of our default importers list and your importer selection to be able to edit it.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>3.</TitleNumber> Prepare your importer.</TitleHeader>
-        <TitleContent>Using our list of default importers, you can have an idea of the required fields to import/update according to your needs. Please consider that all importers start with 0(this is considered the first column) to N number of columns.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_3_NUM', '3.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_3', 'Prepare your importer.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_3_CONTENT', 'Using our list of default importers, you can have an idea of the required fields to import/update according to your needs. Please consider that all importers start with 0(this is considered the first column) to N number of columns.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>4.</TitleNumber> Prepare your CSV file.</TitleHeader>
-        <TitleContent>Verify that your CSV file has the same fields of your importer and in the same order, please consider that like the importer, this needs to stars with 0(the first column) to N number of columns.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_4_NUM', '4.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_4', 'Prepare your CSV file.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_4_CONTENT', 'Verify that your CSV file has the same fields of your importer and in the same order, please consider that like the importer, this needs to stars with 0(the first column) to N number of columns.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>5.</TitleNumber> Import fields.</TitleHeader>
-        <TitleContent>Open your recently created importer and verify that has the same fields and order of your CSV file.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_5_NUM', '5.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_5', 'Import fields.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_5_CONTENT', 'Open your recently created importer and verify that has the same fields and order of your CSV file.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>6.</TitleNumber> Update existing importer fields.</TitleHeader>
-        <TitleContent>Open the importer that you want to use to update fields of your dashboard. You can use the same CSV file to import new fields and update already created fields.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_6_NUM', '6.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_6', 'Update existing importer fields.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_6_CONTENT', 'Open the importer that you want to use to update fields of your dashboard. You can use the same CSV file to import new fields and update already created fields.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>7.</TitleNumber> Upload your CSV.</TitleHeader>
-        <TitleContent>Select your recently created importer from the importer list and upload your edited CSV file with the upload button.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_7_NUM', '7.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_7', 'Upload your CSV.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_8_CONTENT', 'Select your recently created importer from the importer list and upload your edited CSV file with the upload button.')}</TitleContent>
       </TitleWrapper>
       <TitleWrapper>
-        <TitleHeader><TitleNumber>8.</TitleNumber> Verify the import.</TitleHeader>
-        <TitleContent>Wait until the import process ends and verify the changes in the section that you select to use your importer.</TitleContent>
+        <TitleHeader><TitleNumber>{t('IMPORTER_INSTRUCTIONS_8_NUM', '8.')}</TitleNumber>{t('IMPORTER_INSTRUCTIONS_8', 'Verify the import.')}</TitleHeader>
+        <TitleContent>{t('IMPORTER_INSTRUCTIONS_8_CONTENT', 'Wait until the import process ends and verify the changes in the section that you select to use your importer.')}</TitleContent>
       </TitleWrapper>
     </>
   )

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

@@ -16,7 +16,7 @@ export const ImportersButton = (props) => {
   const [extraOpen, setExtraOpen] = useState(false)
 
   const handleOpenImporters = () => {
-    setOpenSidebar('importer')
+    setOpenSidebar && setOpenSidebar('importer')
     setOpenImporters(true)
 
     history.replace(`${location.pathname}?header=importers`)
@@ -49,7 +49,7 @@ export const ImportersButton = (props) => {
       {openImporters && (
         <SideBar
           defaultSideBarWidth={extraOpen ? 1000 : 500}
-          moveDistance={extraOpen ? 500 : 0}
+          moveDistance={extraOpen ? 500 : 20}
           open={openImporters}
           onClose={handleCloseImporters}
           showExpandIcon

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'