ordering-ui-admin-external 1.30.0 → 1.30.2

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

@@ -3,7 +3,6 @@ import { useLanguage, DriversList as DriversController } from 'ordering-componen
 import { useTheme } from 'styled-components'
 import { Select } from '../../../styles/Select'
 import { Select as FirstSelect } from '../../../styles/Select/FirstSelect'
-import { MultiSelect } from '../../../styles/MultiSelect'
 
 import {
   Option,
@@ -12,24 +11,22 @@ import {
   WrapperDriverImage,
   DriverImage,
   DriverName,
-  DriverText,
-  PlaceholderTitle
+  OptionInnerContainer,
+  SelectWrapper
 } from './styles'
 
 const DriverSelectorUI = (props) => {
   const {
+    driverActionStatus,
+    companyActionStatus,
     isFirstSelect,
     order,
     driversList,
     defaultValue,
     isPhoneView,
-    isFilterView,
     small,
     padding,
-    orderView,
     handleAssignDriver,
-    handleChangeDriver,
-    filterValues,
     isTourOpen,
     setCurrentTourStep,
     handleOpenMessages
@@ -39,47 +36,48 @@ const DriverSelectorUI = (props) => {
   const theme = useTheme()
   const [defaultOption, setDefaultOption] = useState(null)
   const [driversOptionList, setDriversOptionList] = useState([])
-  const [driversMultiOptionList, setDriversMultiOptionList] = useState([])
   const [searchValue, setSearchValue] = useState(null)
-  const driversLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+  const driversLoading = [{ value: 'default', content: <Option small={small}><span>{t('LOADING', 'loading')}...</span></Option> }]
+
+  const getOption = (driver) => {
+    return {
+      value: driver.id,
+      disabled: !(driver?.enabled && driver?.available && !driver?.busy),
+      content: (
+        <Option small={small} isPhoneView={isPhoneView} padding={padding}>
+          <OptionInnerContainer>
+            <WrapperDriverImage small={small} className='driver-photo'>
+              <DriverImage bgimage={driver.photo || theme.images.icons?.noDriver} small={small} />
+            </WrapperDriverImage>
+            <OptionContent>
+              <DriverNameContainer className='driver-info'>
+                <DriverName small={small}>{driver.name} {driver.lastname} <span className='assigned-orders'>({driver?.assigned_orders_count} {t('ASSIGNED_ORDERS', 'Assigned orders')})</span></DriverName>
+              </DriverNameContainer>
+            </OptionContent>
+          </OptionInnerContainer>
+        </Option>
+      )
+    }
+  }
+
   useEffect(() => {
     const _driversOptionList = [
       {
         value: 'default',
-        content: (
-          <Option
-            padding={orderView ? padding : '0px'}
-          >
-            {orderView ? (
-              <>
-                <WrapperDriverImage small={small} className='driver-photo'>
-                  <DriverImage bgimage={theme?.images?.icons?.noDriver} small={small} />
-                </WrapperDriverImage>
-                <OptionContent>
-                  <DriverNameContainer className='driver-info'>
-                    <DriverName small={small}>{t('NO_DRIVER', 'No Driver')}</DriverName>
-                  </DriverNameContainer>
-                </OptionContent>
-              </>
-            ) : (
-              <span>{t('SELECT_DRIVER', 'Select driver')}</span>
-            )}
-          </Option>
-        ),
+        content: <Option padding='0px'><span>{t('SELECT_DRIVER', 'Select driver')}</span></Option>,
         color: 'primary',
-        disabled: !isFilterView,
+        disabled: true,
         showDisable: true
       }
     ]
-    if (!isFilterView) {
-      _driversOptionList.push({
-        value: 'remove',
-        content: (
-          <Option isRemove><span>{t('REMOVE_DRIVER', 'Remove assigned driver')}</span></Option>
-        ),
-        disabled: defaultValue === 'default'
-      })
-    }
+    _driversOptionList.push({
+      value: 'remove',
+      content: (
+        <Option isRemove><span>{t('REMOVE_DRIVER', 'Remove assigned driver')}</span></Option>
+      ),
+      disabled: defaultValue === 'default'
+    })
+
     if (!driversList.loading) {
       let _driverList
       if (searchValue) {
@@ -87,44 +85,54 @@ const DriverSelectorUI = (props) => {
       } else {
         _driverList = driversList.drivers
       }
-      const _driversOptionListTemp = _driverList.map((driver, i) => {
-        return {
-          value: driver.id,
-          showDisable: isFilterView ? true : !(isFilterView || (driver?.available && !driver?.busy)),
-          content: (
-            <Option small={small} isPhoneView={isPhoneView} padding={padding} isFilterView={isFilterView}>
-              <WrapperDriverImage small={small} className='driver-photo'>
-                <DriverImage bgimage={driver.photo || theme.images.icons?.noDriver} small={small} />
-              </WrapperDriverImage>
-              <OptionContent>
-                <DriverNameContainer className='driver-info'>
-                  <DriverName small={small}>{driver.name} {driver.lastname}</DriverName>
-                  <DriverText small={small}>{t('DRIVER', 'Driver')}</DriverText>
-                </DriverNameContainer>
-              </OptionContent>
-            </Option>
-          )
-        }
-      })
+      const availableDrivers = _driverList.filter(driver => driver?.enabled && driver?.available && !driver?.busy)
+      if (availableDrivers.length) {
+        _driversOptionList.push({
+          value: 'available',
+          content: <Option><span>{t('AVAILABLE', 'Available')}</span></Option>,
+          disabled: true
+        })
+        availableDrivers.forEach(driver => {
+          _driversOptionList.push(getOption(driver))
+        })
+      }
 
-      setDriversMultiOptionList(_driversOptionListTemp)
+      const busyDrivers = _driverList.filter(driver => driver?.enabled && driver?.available && driver?.busy)
+      if (busyDrivers.length) {
+        _driversOptionList.push({
+          value: 'busy',
+          content: <Option><span>{t('BUSY', 'Busy')}</span></Option>,
+          disabled: true
+        })
+        busyDrivers.forEach(driver => {
+          _driversOptionList.push(getOption(driver))
+        })
+      }
 
-      for (const option of _driversOptionListTemp) {
-        _driversOptionList.push(option)
+      const notAvailableDrivers = _driverList.filter(driver => driver?.enabled && !driver?.available)
+      if (notAvailableDrivers.length) {
+        _driversOptionList.push({
+          value: 'not_available',
+          content: <Option><span>{t('NOT_AVAILABLE', 'Not available')}</span></Option>,
+          disabled: true
+        })
+        notAvailableDrivers.forEach(driver => {
+          _driversOptionList.push(getOption(driver))
+        })
       }
     }
     setDriversOptionList(_driversOptionList)
   }, [driversList, defaultValue, searchValue])
 
+  useEffect(() => {
+    if (!companyActionStatus?.error && !driverActionStatus?.error) return
+    setAlertState({
+      open: true,
+      content: companyActionStatus?.error || driverActionStatus?.error
+    })
+  }, [companyActionStatus?.error, driverActionStatus?.error])
+
   const changeDriver = (driverId) => {
-    if (isFilterView) {
-      if (driverId === 'default') {
-        handleChangeDriver(null)
-      } else {
-        handleChangeDriver(driverId)
-      }
-      return
-    }
     if (driverId === 'default') return
     if (driverId === 'remove') {
       driverId = null
@@ -142,95 +150,58 @@ const DriverSelectorUI = (props) => {
     setDefaultOption(defaultValue)
   }, [defaultValue])
 
-  const Placeholder = <PlaceholderTitle>{t('SELECT_DRIVER', 'Select driver')}</PlaceholderTitle>
-
   const handleSearch = (val) => {
     setSearchValue(val)
   }
 
-  if (isFilterView) {
-    return (
-      <>
-        {!driversList.loading ? (
-          <MultiSelect
-            defaultValue={filterValues.driverIds}
-            placeholder={Placeholder}
-            options={driversMultiOptionList}
-            optionInnerMargin='10px'
-            optionInnerMaxHeight='150px'
-            onChange={(driver) => handleChangeDriver(driver)}
-            isShowSearchBar
-            searchBarIsCustomLayout
-            searchBarIsNotLazyLoad
-            searchValue={searchValue}
-            handleChangeSearch={(val) => setSearchValue(val)}
-          />
-        ) : (
-          <MultiSelect
+  return (
+    <SelectWrapper>
+      {!driversList.loading ? (
+        <>
+          {isFirstSelect ? (
+            <FirstSelect
+              defaultValue={defaultOption || 'default'}
+              options={driversOptionList}
+              optionInnerMaxHeight='200px'
+              onChange={(driverId) => changeDriver(driverId)}
+              isShowSearchBar
+              searchBarPlaceholder={t('SEARCH', 'Search')}
+              searchBarIsCustomLayout
+              searchBarIsNotLazyLoad
+              searchValue={searchValue}
+              handleChangeSearch={handleSearch}
+              className='driver-select'
+            />
+          ) : (
+            <Select
+              defaultValue={defaultOption || 'default'}
+              options={driversOptionList}
+              optionInnerMaxHeight='200px'
+              onChange={(driverId) => changeDriver(driverId)}
+              isShowSearchBar
+              searchBarIsNotLazyLoad
+              searchBarPlaceholder={t('SEARCH', 'Search')}
+              searchBarIsCustomLayout
+              searchValue={searchValue}
+              handleChangeSearch={handleSearch}
+              className='driver-select'
+            />
+          )}
+        </>
+      ) : (
+        <>
+          <Select
+            placeholder={t('SELECT_DRIVER', 'Select driver')}
             defaultValue='default'
             options={driversLoading}
             optionInnerMargin='10px'
-            optionInnerMaxHeight='150px'
+            optionInnerMaxHeight='200px'
             className='driver-select'
-            isShowSearchBar
-            searchBarIsCustomLayout
-            searchBarIsNotLazyLoad
-            searchValue={searchValue}
-            handleChangeSearch={(val) => setSearchValue(val)}
           />
-        )}
-      </>
-    )
-  } else {
-    return (
-      <>
-        {!driversList.loading ? (
-          <>
-            {isFirstSelect ? (
-              <FirstSelect
-                defaultValue={defaultOption || 'default'}
-                options={driversOptionList}
-                optionInnerMaxHeight='200px'
-                onChange={(driverId) => changeDriver(driverId)}
-                isShowSearchBar
-                searchBarPlaceholder={t('SEARCH', 'Search')}
-                searchBarIsCustomLayout
-                searchBarIsNotLazyLoad
-                searchValue={searchValue}
-                handleChangeSearch={handleSearch}
-                className='driver-select'
-              />
-            ) : (
-              <Select
-                defaultValue={defaultOption || 'default'}
-                options={driversOptionList}
-                optionInnerMaxHeight='200px'
-                onChange={(driverId) => changeDriver(driverId)}
-                isShowSearchBar
-                searchBarIsNotLazyLoad
-                searchBarPlaceholder={t('SEARCH', 'Search')}
-                searchBarIsCustomLayout
-                searchValue={searchValue}
-                handleChangeSearch={handleSearch}
-                className='driver-select'
-              />
-            )}
-          </>
-        ) : (
-          <>
-            <Select
-              placeholder={t('SELECT_DRIVER', 'Select driver')}
-              defaultValue='default'
-              options={driversLoading}
-              optionInnerMargin='10px'
-              optionInnerMaxHeight='200px'
-              className='driver-select'
-            />
-          </>
-        )}
-      </>
-    )
-  }
+        </>
+      )}
+    </SelectWrapper>
+  )
 }
 
 export const DriverSelector = (props) => {

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

@@ -1,6 +1,16 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 
+export const SelectWrapper = styled.div`
+  .header {
+    > div {
+      > div {
+        padding: 0;
+      }
+    }
+  }
+`
+
 export const Option = styled.div`
   display: flex;
   align-items: center;
@@ -29,6 +39,7 @@ export const Option = styled.div`
   `}
 
   span {
+    font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -37,19 +48,22 @@ export const Option = styled.div`
 
   @media (max-width: 576px) {
     padding: ${({ padding }) => padding || '5px 0px'};
-    ${({ isFilterView }) => isFilterView && css`
-      ${props => props.theme?.rtl ? css`
-        margin-right: 10px;
-      ` : css`
-        margin-left: 10px;
-      `}
-    `}
     span {
       max-width: 280px;
     }
   }
 `
 
+export const OptionInnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    padding-right: 20px;
+  ` : css`
+    padding-left: 20px;
+  `}
+`
+
 export const OptionContent = styled.div`
   flex: 1;
   display: flex;
@@ -70,7 +84,7 @@ export const DriverName = styled.p`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: 150px;
+  max-width: 350px;
   margin: 0px;
 
   ${({ small }) => small && css`
@@ -78,16 +92,9 @@ export const DriverName = styled.p`
   `}
 
   @media (max-width: 576px) {
-    max-width: 90px;
+    max-width: 150px;
   }
 `
-export const DriverText = styled.span`
-  font-size: 12px;
-  color: ${props => props.theme.colors.lightGray};
-  ${({ small }) => small && css`
-    display: none;
-  `}
-`
 
 export const WrapperDriverImage = styled.div`
   width: 45px;
@@ -141,12 +148,3 @@ export const DriverImage = (props) => {
     </DriverImageStyled>
   )
 }
-
-export const PlaceholderTitle = styled(Option)`
-  padding: 10px;
-
-  ${({ isSingle }) => isSingle && css`
-    padding: 0px;
-    font-size: 14px;
-  `}
-`

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

@@ -19,6 +19,7 @@ import {
   DriverInfoContainer,
   DriverInfo,
   DriverSelectorContainer,
+  CompanySelectorContainer,
   CutsomerDetail,
   CustomerInfoTable,
   ToggleItemWrapper,
@@ -217,7 +218,7 @@ export const OrderContactInformation = (props) => {
       {order?.delivery_type === 1 && !isServiceOrder && (
         <>
           {!order?.driver_id && (
-            <DriverSelectorContainer>
+            <CompanySelectorContainer>
               <p>{t('DRIVER_COMPANY', 'Driver company')}</p>
               <CompanySelector
                 small
@@ -230,7 +231,7 @@ export const OrderContactInformation = (props) => {
                 isOrderDrivers
                 orderId={order?.id}
               />
-            </DriverSelectorContainer>
+            </CompanySelectorContainer>
           )}
           {!order?.driver_company_id && (
             <DriverSelectorContainer>

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

@@ -108,7 +108,7 @@ export const DriverInfoContainer = styled.div`
 `
 export const DriverInfo = styled(BusinessInfo)``
 
-export const DriverSelectorContainer = styled.div`
+export const CompanySelectorContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 23px;
@@ -133,11 +133,31 @@ export const DriverSelectorContainer = styled.div`
       }
     }
   }
+`
+export const DriverSelectorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 23px;
+  margin-bottom: 13px;
+  > p {
+    font-size: 14px;
+    margin-top: 0;
+    margin-bottom: 15px;
+  }
+  > div {
+    width: 100%;
+    border-radius: 8px;
+    background-color: ${props => props.theme.colors?.secundary};
 
-  @media (max-width: 576px) {
     > div {
-      p {
-        max-width: initial;
+      > div {
+        &:first-child {
+          border: none;
+          height: 50px;
+        }
+        > div:first-child {
+          color: ${props => props.theme.colors?.headingColor};
+        }
       }
     }
   }

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

@@ -60,7 +60,7 @@ export const OrdersContentHeader = (props) => {
       _filterApplied = filterValues?.groupTypes?.length || filterValues.businessIds.length > 0 || filterValues.cityIds.length > 0 ||
         filterValues.deliveryEndDatetime !== null || filterValues.deliveryFromDatetime !== null || filterValues.deliveryTypes.length > 0 ||
         filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0 || filterValues?.metafield?.length > 0 ||
-        filterValues?.externalId
+        filterValues?.externalId || filterValues?.logisticStatus !== null
     }
     setFilterApplied(_filterApplied)
   }, [filterValues])

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

@@ -4,7 +4,7 @@ import { useLanguage, OrdersFilter as OrdersFilterController } from 'ordering-co
 import { BusinessesSelector } from '../BusinessesSelector'
 import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
 import { DateTypeSelector } from '../DateTypeSelector'
-import { DriverSelector } from '../DriverSelector'
+import { DriverMultiSelector } from '../DriverMultiSelector'
 import { CitySelector, Modal } from '../../Shared'
 // import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { DeliveryTypeSelector } from '../DeliveryTypeSelector'
@@ -13,6 +13,7 @@ import { CountryFilter } from '../CountryFilter'
 import { Button, IconButton, Input } from '../../../styles'
 import { CurrencyFilter } from '../CurrencyFilter'
 import { getUniqueId } from '../../../utils'
+import { Select } from '../../../styles/Select/FirstSelect'
 
 import {
   FilterGroupListContainer,
@@ -20,8 +21,11 @@ import {
   // MultiSelectContainer,
   ButtonGroup,
   AddInputWrapper,
-  AddMetaFiled
+  AddMetaFiled,
+  SelectWrapper,
+  Option
 } from './styles'
+import { LogisticStatusDot } from '../OrdersTable/styles'
 
 const OrdersFilterGroupUI = (props) => {
   const {
@@ -51,7 +55,8 @@ const OrdersFilterGroupUI = (props) => {
     handleChangeMetaFieldValue,
     handleAddMetaField,
     handleDeleteMetafield,
-    handleChangeExternalId
+    handleChangeExternalId,
+    handleChangeChildFilterValue
   } = props
 
   const [, t] = useLanguage()
@@ -59,6 +64,14 @@ const OrdersFilterGroupUI = (props) => {
   const [isShow, setIsShow] = useState(false)
   const metafieldRef = useRef()
 
+  const logisticStatusList = [
+    { value: 0, content: <Option>{t('PENDING', 'Pending')}<LogisticStatusDot status={0} /></Option> },
+    { value: 1, content: <Option>{t('IN_PROGRESS', 'In progress')}<LogisticStatusDot status={1} /></Option> },
+    { value: 2, content: <Option>{t('IN_QUEUE', 'In queue')}<LogisticStatusDot status={2} /></Option> },
+    { value: 3, content: <Option>{t('EXPIRED', 'Expired')}<LogisticStatusDot status={3} /></Option> },
+    { value: 4, content: <Option>{t('RESOLVED', 'Resolved')}<LogisticStatusDot status={4} /></Option> }
+  ]
+
   const handleAcceptFilter = () => {
     handleChangeFilterValues(filterValues)
     handleCloseFilterModal()
@@ -140,8 +153,7 @@ const OrdersFilterGroupUI = (props) => {
             businessesList={businessesList}
             handleChangeBusinesses={handleChangeBusinesses}
           />
-          <DriverSelector
-            isFilterView
+          <DriverMultiSelector
             drivers={driversList.drivers}
             filterValues={filterValues}
             handleChangeDriver={handleChangeDriver}
@@ -181,6 +193,15 @@ const OrdersFilterGroupUI = (props) => {
             filterValues={filterValues}
             handleChangeCurrency={handleChangeCurrency}
           />
+          <SelectWrapper>
+            <Select
+              options={logisticStatusList}
+              className='select'
+              defaultValue={filterValues?.logisticStatus ?? ''}
+              placeholder={t('SELECT_LOGISTIC_STATUS', 'Select a logistic status')}
+              onChange={(value) => handleChangeChildFilterValue({ logisticStatus: value })}
+            />
+          </SelectWrapper>
         </WrapperRow>
         {filterValues?.metafield.map(item => (
           <WrapperRow key={item.id}>

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

@@ -149,3 +149,44 @@ export const AddMetaFiled = styled.span`
   cursor: pointer;
   width: 100%;
 `
+
+export const SelectWrapper = styled.div`
+    > div {
+    width: 100%;
+    border: none;
+    height: 100%;
+
+    > div:first-child {
+      height: 100%;
+      background-color: ${props => props.theme.colors.secundary};
+      border: none;
+      border-radius: 7.6px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      padding-left: 20px;
+    }
+    .list {
+      background-color: ${props => props.theme.colors.secundary};
+      border: none;
+      
+      .list-wrapper {
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.secundaryContrast};
+  display: flex;
+  align-items: center;
+`

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

@@ -138,9 +138,10 @@ export const UsersList = (props) => {
                         <Square />
                       )}
                     </CheckBoxWrapper>
-                    {t('USER', 'User')}
+                    {t('ID', 'Id')}
                   </AllCheckWrapper>
                 </th>
+                <th>{t('USER', 'User')}</th>
                 <th>{t('PHONE', 'Phone')}</th>
                 <th>{t('TYPE', 'Type')}</th>
                 <th className='amout-orders '>{t('AMOUNT_OF_ORDERS', 'Amount of orders')}</th>
@@ -156,6 +157,13 @@ export const UsersList = (props) => {
                         <CheckBoxWrapper>
                           <Skeleton width={20} height={20} />
                         </CheckBoxWrapper>
+                        <InfoBlock>
+                          <p><Skeleton width={70} /></p>
+                        </InfoBlock>
+                      </UserMainInfo>
+                    </td>
+                    <td>
+                      <UserMainInfo>
                         <WrapperImage isSkeleton>
                           <Skeleton width={45} height={45} />
                         </WrapperImage>
@@ -201,6 +209,13 @@ export const UsersList = (props) => {
                             <Square />
                           )}
                         </CheckBoxWrapper>
+                        <InfoBlock>
+                          <p className='bold'>{user?.id}</p>
+                        </InfoBlock>
+                      </UserMainInfo>
+                    </td>
+                    <td>
+                      <UserMainInfo>
                         <WrapperImage>
                           {user?.photo ? (
                             <Image bgimage={optimizeImage(user?.photo, 'h_50,c_limit')} />