ordering-ui-admin-external 1.43.30 → 1.43.32

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

@@ -17,21 +17,21 @@ const DriverGroupsListingUI = (props) => {
     pagination,
     searchValue,
     onSearch,
-    getPageBusinesses,
+    getHeaderDriversGroups,
     isOpen,
     close,
-    changeDriverGroupState,
+    changeDriverGroupState
   } = props
   const [, t] = useLanguage()
   const dropdownReference = useRef()
 
   const handleChangePage = (page) => {
-    getPageBusinesses(pagination.pageSize, page)
+    getHeaderDriversGroups(page, pagination.pageSize)
   }
 
   const handleChangePageSize = (pageSize) => {
     const expectedPage = Math.ceil(pagination.from / pageSize)
-    getPageBusinesses(pageSize, expectedPage)
+    getHeaderDriversGroups(expectedPage, pageSize)
   }
 
   const closeSelect = (e) => {
@@ -74,31 +74,30 @@ const DriverGroupsListingUI = (props) => {
             ))
           ) : (
             <>
-              {driversGroupsState.groups.map(driver_group => (
-                <OptionItem key={driver_group.id}
-                onClick={() => changeDriverGroupState(driver_group)}
+              {driversGroupsState.groups.map(driverGroup => (
+                <OptionItem
+                  key={driverGroup.id}
+                  onClick={() => changeDriverGroupState(driverGroup)}
                 >
                   <div>
-                    <b>{driver_group?.name}</b>
-                    <p>{t('DRIVERS', 'Drivers:')} {driver_group?.drivers?.length}</p>
+                    <b>{driverGroup?.name}</b>
+                    <p>{t('DRIVERS', 'Drivers:')} {driverGroup?.drivers?.length}</p>
                   </div>
                 </OptionItem>
               ))}
             </>
           )}
         </DriverGroupList>
-        {pagination && pagination?.total > 0 && (
+        {pagination && pagination?.totalPages > 0 && (
           <WrapperPagination className='pagination-container'>
-            {pagination?.total && (
-              <Pagination
-                currentPage={pagination.currentPage}
-                totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
-                handleChangePage={handleChangePage}
-                defaultPageSize={pagination.pageSize}
-                handleChangePageSize={handleChangePageSize}
-                isHidePagecontrol
-              />
-            )}
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={pagination?.totalPages}
+              handleChangePage={handleChangePage}
+              defaultPageSize={pagination.pageSize}
+              handleChangePageSize={handleChangePageSize}
+              isHidePagecontrol
+            />
           </WrapperPagination>
         )}
       </SelectHeaderContent>
@@ -114,9 +113,10 @@ export const DriverGroupSelectHeader = (props) => {
     isHeaderComponent: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 6,
+      pageSize: 5,
       controlType: 'pages'
     },
+    propsToFetch: ['id', 'enabled', 'drivers', 'name']
   }
   return (
     <DriverGroupsListController {...driverGroupsListingProps} />

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import { useLanguage, useUtils, DriversGroupLogs as DriversGroupLogsController, useConfig } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Modal, Pagination } from '../../Shared'
+import { getAttributeName } from '../../../utils'
 
 import {
   DriversGroupLogsContainer,
@@ -40,38 +41,6 @@ export const DriversGroupLogsUI = (props) => {
   const [{ configs }] = useConfig()
   const formatTime = configs?.general_hour_format?.value
 
-  const getAttributeName = (key) => {
-    const attributes = [
-      { key: 'autoassign_amount_drivers', content: t('AUTO_ASSIGN_GROUP_ORDERS_TO_DRIVERS', 'Auto assign the order of group to this amount of drivers') },
-      { key: 'orders_group_max_orders', content: t('MAX_NUMBER_ORDERS', 'Maximum Number of Orders') },
-      { key: 'autoassign_autoaccept_by_driver', content: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Accepted by Driver') },
-      { key: 'orders_group_max_time_between', content: t('MAX_ORDER_TIME_BETWEEN', 'Maximum time between orders in seconds') },
-      { key: 'orders_group_max_distance_between_pickup', content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters') },
-      { key: 'orders_group_max_distance_between_delivery', content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters') },
-      { key: 'orders_group_use_maps_api', content: t('USE_MAPS_API', 'Use maps api') },
-      { key: 'orders_group_max_time_between_pickup', content: t('MAX_DISTANCE_BETWEEN_BUSINESS', 'Maximum distance between businesses in meters') },
-      { key: 'orders_group_max_time_between_delivery', content: t('MAX_DISTANCE_BETWEEN_DELIVERY', 'Maximum distance between deliveries in meters') },
-      { key: 'autoassign_forced_assignment', content: t('AUTO_ASSIGN_FORCED_ASSIGNMENT', 'Forced assignment') },
-      { key: 'autoassign_customer_max_distance_from_business', content: t('MAX_CUSTOMER_DISTANCE_FROM_BUSINESS', 'Max distance between customer and business') },
-      { key: 'autoassign_initial_radius', content: t('INITIAL_RADIUS', 'Initial radius in meters') },
-      { key: 'autoassign_increment_radius', content: t('INCREMENT_RADIUS', 'Radius increase in meters') },
-      { key: 'autoassign_max_radius', content: t('MAX_RADIUS', 'Maximum radius in meters') },
-      { key: 'autoassign_autoreject_time', content: t('AUTO_REJECT_ORDER_GROUP_AFTER', 'Auto reject Orders After') },
-      { key: 'autoassign_max_orders', content: t('MAX_AMOUNT_ORDERS_PER_DRIVER', 'Maximum amount of orders per drivers') },
-      { key: 'autoassign_max_in_pending', content: t('ORDER_PENDING', 'Pending') },
-      { key: 'available', content: t('AVAILABLE', 'Available') },
-      { key: 'enabled', content: t('ENABLED', 'Enabled') },
-      { key: 'last_available_at', content: t('LAST_AVAILABLE_AT', 'Last available at') },
-      { key: 'busy', content: t('BUSY', 'Busy') }
-    ]
-    const found = attributes.find(attribute => attribute.key === key)
-    if (found) {
-      return found.content
-    } else {
-      return key
-    }
-  }
-
   const handleChangePage = (page) => {
     getDriversGroupLogs(page, 10)
   }

package/src/components/Delivery/DriversTimeDisplay/UserList.js

@@ -60,19 +60,19 @@ export const DeliveryUsersListing = (props) => {
     getDrivers(expectedPage, pageSize, selectedGroup?.id)
   }
 
-  const getDatesInRange = (date_range) => {
-    const start = moment(date_range[0])
-    const end = moment(date_range[1])
-    const dates = [];
+  const getDatesInRange = (dateRange) => {
+    const start = moment(dateRange[0])
+    const end = moment(dateRange[1])
+    const dates = []
 
-    let current = start;
+    let current = start
 
     while (current <= end) {
       dates.push(current.format('YYYY-MM-DD'))
       current = current.clone().add(1, 'days')
     }
 
-    return dates;
+    return dates
   }
 
   const handleHourBlockWidth = (block) => {
@@ -103,7 +103,7 @@ export const DeliveryUsersListing = (props) => {
           cellSections={21.5}
           onClick={() => handleSelectDriver(user, block)}
         >
-          <UserName>{`${!!user?.name ? user?.name : ''} ${!!user?.lastname ? user?.lastname : ''}`}</UserName>
+          <UserName>{`${user?.name ?? ''} ${user?.lastname ?? ''}`}</UserName>
           <p>{moment(block.start).format(hourFormat)} - {moment(block.end).format(hourFormat)}</p>
         </Block>
       </td>
@@ -112,32 +112,35 @@ export const DeliveryUsersListing = (props) => {
   const handleBlockWeekToShow = (block, user, allBlocks, blockByDay) => {
     if (!block) return
     return block.start && block.end && (
-      blockByDay?.length === 1 ?
-        <Block
-          innerWidth={106}
-          rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
-          cellPosition={4}
-          cellWidth={160}
-          cellSections={6.67}
-          onClick={() => handleSelectDriver(user, block)}
-        >
-          <p>{moment(block.start).format(hourFormat)} - {moment(block.end).format(hourFormat)}</p>
-        </Block>
-        :
-        <ButtonWrapper
-          rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
-          cellPosition={moment(block?.start).hour()}
-          cellWidth={160}
-          cellSections={6.67}
-        >
-          <Button
-            color='lightPrimary'
-            borderRadius='8px'
-            onClick={() => setStackEventsState({ open: true, events: blockByDay, user: user })}
+      blockByDay?.length === 1
+        ? (
+          <Block
+            innerWidth={106}
+            rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
+            cellPosition={4}
+            cellWidth={160}
+            cellSections={6.67}
+            onClick={() => handleSelectDriver(user, block)}
+          >
+            <p>{moment(block.start).format(hourFormat)} - {moment(block.end).format(hourFormat)}</p>
+          </Block>
+        )
+        : (
+          <ButtonWrapper
+            rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
+            cellPosition={moment(block?.start).hour()}
+            cellWidth={160}
+            cellSections={6.67}
           >
-            {blockByDay?.length} {t('BLOCKS', 'Blocks')}
-          </Button>
-        </ButtonWrapper>
+            <Button
+              color='lightPrimary'
+              borderRadius='8px'
+              onClick={() => setStackEventsState({ open: true, events: blockByDay, user: user })}
+            >
+              {blockByDay?.length} {t('BLOCKS', 'Blocks')}
+            </Button>
+          </ButtonWrapper>
+        )
     )
   }
 
@@ -148,15 +151,6 @@ export const DeliveryUsersListing = (props) => {
     })
   }
 
-  useEffect(() => {
-    if (driversList.loading || driversList?.users?.length > 0 || paginationProps.totalPages <= 1) return
-    if (paginationProps.currentPage !== paginationProps.totalPages) {
-      handleChangePage(paginationProps.currentPage)
-    } else {
-      handleChangePage(paginationProps.currentPage - 1)
-    }
-  }, [driversList?.users, paginationProps])
-
   return (
     <UsersListingContainer>
       <UsersConatiner>

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

@@ -26,13 +26,13 @@ import {
   DeleteWrapper,
   OrderStatusTypeSelectWrapper,
   StackedBlock,
-  DriverMultiSelectorContainer,
-  WrapperRow,
-  WarningMessage
+  WarningMessage,
+  FiltContainer
 } from './styles'
 import { Select } from '../../../styles/Select'
 import { DriverMultiSelector } from '../../Orders/DriverMultiSelector'
 import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
+import MdClose from '@meronex/icons/md/MdClose'
 
 const DriversTimeDisplayUI = (props) => {
   const {
@@ -78,7 +78,10 @@ const DriversTimeDisplayUI = (props) => {
     handleSetInitialStates,
     filterValues,
     handleChangeDriver,
-    handleClearFilters
+    handleClearFilters,
+    setFiltOption,
+    filtOption,
+    handleClearDriversList
   } = props
 
   const [, t] = useLanguage()
@@ -128,11 +131,24 @@ const DriversTimeDisplayUI = (props) => {
     }
   ]
 
-  const changeDriverGroupState = (_driverGroup) => {
+  const handleCleanFilters = () => {
     setShowSelectHeader(false)
+    handleClearFilters()
+  }
+
+  const changeDriverGroupState = (_driverGroup) => {
+    if (_driverGroup?.id === selectedGroup?.id) return
+    handleCleanFilters()
     setSelectedGroup(_driverGroup)
   }
 
+  const handleCloseFiltOption = () => {
+    setSelectedGroup(null)
+    setFiltOption(null)
+    handleClearDriversList()
+    handleCleanFilters()
+  }
+
   const handleChangeDate = (date1, date2) => {
     const diff = moment(date2).diff(date1, 'days')
     if (diff > 31) {
@@ -269,6 +285,11 @@ const DriversTimeDisplayUI = (props) => {
     setScheduleOptions(_scheduleOptions)
   }
 
+  const handleChangeFiltOption = (option) => {
+    setFiltOption(option)
+    option === 'driver_groups' && setShowSelectHeader(true)
+  }
+
   useEffect(() => {
     const isTodayOrPastDate = moment(selectedDate).format('YYYY-MM-DD') <= moment().format('YYYY-MM-DD')
     const date = moment(selectedDate).format('YYYY-MM-DD')
@@ -388,9 +409,61 @@ const DriversTimeDisplayUI = (props) => {
               <div>
                 <h1>{t('DRIVERS_TIME_DISPLAY', 'Drivers time display')}</h1>
                 <DriverGroupSelectorWrapper>
-                  <DriverGroupName onClick={() => setShowSelectHeader(!showSelectHeader)}>
-                    {t('SELECT_DRIVER_GROUP', 'Select a driver group')}
-                  </DriverGroupName>
+                  <span className='calendar'>{t('CALENDAR', 'Calendar')}</span>
+                  <ChevronRight />
+                  {!filtOption ? (
+                    <>
+                      <DriverGroupName className='calendar' onClick={() => handleChangeFiltOption('driver_groups')}>{t('SELECT_DRIVER_GROUPS', 'Select driver groups')}</DriverGroupName>
+                      <span> {t('OR', 'Or')} </span>
+                      <DriverGroupName className='calendar' onClick={() => handleChangeFiltOption('drivers')}>{t('SELECT_DRIVERS', 'Select drivers')}</DriverGroupName>
+                    </>
+                  ) : (
+                    <FiltContainer>
+                      <DriverGroupName
+                        className='calendar'
+                        onClick={() => filtOption === 'driver_groups' ? setShowSelectHeader(!showSelectHeader) : {}}
+                      >
+                        {filtOption === 'driver_groups' ? t('DRIVER_GROUPS', 'driver groups') : t('DRIVERS', 'drivers')}
+                      </DriverGroupName>
+                      <Button
+                        circle
+                        outline
+                        color='primary'
+                        type='reset'
+                        className='remove_option'
+                        onClick={() => handleCloseFiltOption()}
+                      >
+                        <MdClose />
+                      </Button>
+                    </FiltContainer>
+                  )}
+                  <ChevronRight />
+                  {(selectedGroup || (filtOption === 'drivers')) && (
+                    <>
+                      {selectedGroup && (
+                        <>
+                          <span>{selectedGroup?.name}</span>
+                          <ChevronRight />
+                          <span>{t('DRIVERS', 'DRIVERS')}</span>
+                          <ChevronRight />
+                        </>
+                      )}
+                      <DriverMultiSelector
+                        isSearchByName
+                        useDriversByProps={selectedGroup}
+                        drivers={selectedGroup?.drivers}
+                        disableSocketRoomDriver
+                        useTextStyle
+                        hideChevronIcon
+                        autoOpen={filtOption === 'drivers'}
+                        filterValues={filterValues}
+                        handleChangeDriver={handleChangeDriver}
+                        andText={t('AND', 'And')}
+                        textClassnames='calendar'
+                        optionsPosition='left'
+                      />
+                    </>
+                  )}
                   {showSelectHeader && (
                     <DriverGroupSelectHeader
                       close={() => setShowSelectHeader(false)}
@@ -398,36 +471,17 @@ const DriversTimeDisplayUI = (props) => {
                       changeDriverGroupState={changeDriverGroupState}
                     />
                   )}
-                  <ChevronRight />
-                  <span className='calendar'>{t('CALENDAR', 'Calendar')}</span>
-                  {selectedGroup && (
-                    <>
-                      <ChevronRight />
-                      <span>{selectedGroup?.name}</span>
-                    </>
+                  {(filterValues?.driverIds?.length > 0) && (
+                    <WarningMessage>
+                      <TiWarningOutline />
+                      <span>{t('FILTER_APPLIED', 'Filters applied')}</span>
+                      <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
+                    </WarningMessage>
                   )}
                 </DriverGroupSelectorWrapper>
               </div>
 
-              {(filterValues?.driverIds?.length > 0) && (
-                <WarningMessage>
-                  <TiWarningOutline />
-                  <span>{t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')}</span>
-                  <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
-                </WarningMessage>
-              )}
               <DriversGroupCalendarWrapper>
-                {selectedGroup && (
-                  <WrapperRow wrapperWidth={400}>
-                    <DriverMultiSelectorContainer>
-                      <DriverMultiSelector
-                        disableSocketRoomDriver
-                        filterValues={filterValues}
-                        handleChangeDriver={handleChangeDriver}
-                      />
-                    </DriverMultiSelectorContainer>
-                  </WrapperRow>
-                )}
                 <AnalyticsCalendar {...props} handleChangeDate={handleChangeDate} />
               </DriversGroupCalendarWrapper>
             </HeaderWrapper>
@@ -554,7 +608,8 @@ export const DriversTimeDisplay = (props) => {
       initialPage: 1,
       pageSize: 10,
       controlType: 'pages'
-    }
+    },
+    propsToFetch: ['id', 'enabled', 'name', 'email', 'level', 'lastname', 'delivery_blocks', 'photo']
   }
   return (
     <CalendarDriversListController {...driversTimeDisplayProps} />

package/src/components/Delivery/DriversTimeDisplay/styles.js

@@ -63,7 +63,7 @@ export const DriverGroupSelectorWrapper = styled.div`
   width: fit-content;
   margin: 3px 0;
 
-  > span {
+  span {
     font-size: 14px;
     color: ${props => props.theme.colors.secundaryLight};
     &.calendar {
@@ -942,10 +942,10 @@ export const WarningMessage = styled.div`
   padding: 0px 15px;
   box-sizing: border-box;
   margin: 10px 0px 0px 0px !important;
-
-  right: 0px;
+  max-width: 250px;
+  left: 0px;
   ${props => props.theme?.rtl && css`
-    left: 0px;
+    right: 0px;
     right: initial;
   `}
 
@@ -991,3 +991,21 @@ export const WarningMessage = styled.div`
     }
   }
 `
+
+export const FiltContainer = styled.div`
+  display: inline-block;
+  position: relative;
+  button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: transparent;
+    width: 20px;
+    height: 20px;
+    transform: translate(140%, -50%);
+    top: 5px;
+    right: 10px;
+  }
+`

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

@@ -21,14 +21,29 @@ const DriverMultiSelectorUI = (props) => {
     small,
     padding,
     handleChangeDriver,
-    filterValues
+    filterValues,
+    useTextStyle,
+    hideChevronIcon,
+    andText,
+    textClassnames,
+    pagination,
+    handleChangePage,
+    handleChangePageSize,
+    useDriversByProps,
+    setSearchValue,
+    searchValue,
+    optionsPosition
   } = props
 
   const [{ dictionary }] = useLanguage()
   const theme = useTheme()
   const [driversMultiOptionList, setDriversMultiOptionList] = useState([])
-  const [searchValue, setSearchValue] = useState(null)
-  const driversLoading = [{ value: 'default', content: <Option small={small}>{dictionary?.LOADING ?? 'loading'}...</Option> }]
+
+  const driversLoading = [{
+    value: 'default',
+    content: <Option small={small}>{dictionary?.LOADING ?? 'loading'}...</Option>,
+    showOnSelected: useTextStyle ? dictionary?.LOADING ?? 'loading' : null
+  }]
 
   useEffect(() => {
     const _driversOptionList = [
@@ -36,7 +51,8 @@ const DriverMultiSelectorUI = (props) => {
         value: 'default',
         content: <Option padding='0px'><span>{dictionary?.SELECT_DRIVER ?? 'Select driver'}</span></Option>,
         color: 'primary',
-        showDisable: true
+        showDisable: true,
+        showOnSelected: useTextStyle ? dictionary?.SELECT_DRIVER ?? 'Select driver' : null
       }
     ]
     if (!driversList.loading) {
@@ -62,7 +78,8 @@ const DriverMultiSelectorUI = (props) => {
                 </DriverNameContainer>
               </OptionContent>
             </Option>
-          )
+          ),
+          showOnSelected: useTextStyle ? driver.name : null
         }
       })
 
@@ -78,22 +95,37 @@ const DriverMultiSelectorUI = (props) => {
 
   return (
     <>
-      {!driversList.loading ? (
+      {!driversList.loading || (!useDriversByProps && pagination) ? (
         <MultiSelect
-          defaultValue={filterValues.driverIds}
+          isLoading={driversList.loading}
+          useLazyPagination={!useDriversByProps}
+          searchBarIsNotLazyLoad={useDriversByProps}
+          useTextStyle={useTextStyle}
+          hideChevronIcon={hideChevronIcon}
+          andText={andText}
+          textClassnames={textClassnames}
+          defaultValue={driversList.loading && !useDriversByProps ? 'loading' : filterValues.driverIds}
           placeholder={Placeholder}
-          options={driversMultiOptionList}
+          options={driversList.loading && !useDriversByProps ? driversLoading : driversMultiOptionList}
           optionInnerMargin='10px'
           optionInnerMaxHeight='150px'
+          optionsPosition={optionsPosition}
           onChange={(driver) => handleChangeDriver(driver)}
           isShowSearchBar
           searchBarIsCustomLayout
-          searchBarIsNotLazyLoad
           searchValue={searchValue}
           handleChangeSearch={(val) => setSearchValue(val)}
+          pagination={pagination}
+          handleChangePage={handleChangePage}
+          handleChangePageSize={handleChangePageSize}
         />
       ) : (
         <MultiSelect
+          searchBarIsNotLazyLoad={useDriversByProps}
+          useTextStyle={useTextStyle}
+          hideChevronIcon={hideChevronIcon}
+          andText={andText}
+          textClassnames={textClassnames}
           defaultValue='default'
           options={driversLoading}
           optionInnerMargin='10px'
@@ -101,7 +133,6 @@ const DriverMultiSelectorUI = (props) => {
           className='driver-select'
           isShowSearchBar
           searchBarIsCustomLayout
-          searchBarIsNotLazyLoad
           searchValue={searchValue}
           handleChangeSearch={(val) => setSearchValue(val)}
         />
@@ -114,6 +145,11 @@ export const DriverMultiSelector = (props) => {
   const DriversControlProps = {
     ...props,
     UIComponent: DriverMultiSelectorUI,
+    paginationSettings: {
+      initialPage: 1,
+      pageSize: 10,
+      controlType: 'pages'
+    },
     propsToFetch: ['id', 'name', 'lastname', 'cellphone', 'photo']
   }
   return (

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

@@ -19,6 +19,7 @@ import { BusinessOrderingChannels } from '../BusinessOrderingChannels'
 import { BusinessFrontLayout } from '../BusinessFrontLayout'
 // import { BusinessPublishing } from '../BusinessPublishing'
 import { BusinessPlaceGroupList } from '../BusinessPlaceGroupList'
+import { BusinessLogs } from '../BusinessLogs'
 import { SpoonityApiKey } from '../SpoonityApiKey'
 
 import { MoreSidebarLayout, Personalization, Alert } from '../../Shared'
@@ -348,6 +349,11 @@ export const BusinessDetailsUI = (props) => {
               spoonityKeyState={spoonityKeyState}
             />
           )}
+          {selectedItem === 'logs' && (
+            <BusinessLogs
+              businessId={businessState?.business?.id}
+            />
+          )}
         </MoreSidebarLayout>
       )}