ordering-ui-admin-external 1.30.0 → 1.30.2

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

@@ -11,7 +11,7 @@ var _orderingComponentsAdminExternal = require("ordering-components-admin-extern
 var _BusinessesSelector = require("../BusinessesSelector");
 var _DriversGroupTypeSelector = require("../DriversGroupTypeSelector");
 var _DateTypeSelector = require("../DateTypeSelector");
-var _DriverSelector = require("../DriverSelector");
+var _DriverMultiSelector = require("../DriverMultiSelector");
 var _Shared = require("../../Shared");
 var _DeliveryTypeSelector = require("../DeliveryTypeSelector");
 var _PaymethodTypeSelector = require("../PaymethodTypeSelector");
@@ -19,7 +19,9 @@ var _CountryFilter = require("../CountryFilter");
 var _styles = require("../../../styles");
 var _CurrencyFilter = require("../CurrencyFilter");
 var _utils = require("../../../utils");
+var _FirstSelect = require("../../../styles/Select/FirstSelect");
 var _styles2 = require("./styles");
+var _styles3 = require("../OrdersTable/styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -34,6 +36,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
+  var _filterValues$logisti;
   var open = props.open,
     handleCloseFilterModal = props.handleCloseFilterModal,
     filterValues = props.filterValues,
@@ -59,7 +62,8 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
     handleChangeMetaFieldValue = props.handleChangeMetaFieldValue,
     handleAddMetaField = props.handleAddMetaField,
     handleDeleteMetafield = props.handleDeleteMetafield,
-    handleChangeExternalId = props.handleChangeExternalId;
+    handleChangeExternalId = props.handleChangeExternalId,
+    handleChangeChildFilterValue = props.handleChangeChildFilterValue;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -75,6 +79,32 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
     isShow = _useState4[0],
     setIsShow = _useState4[1];
   var metafieldRef = (0, _react.useRef)();
+  var logisticStatusList = [{
+    value: 0,
+    content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('PENDING', 'Pending'), /*#__PURE__*/_react.default.createElement(_styles3.LogisticStatusDot, {
+      status: 0
+    }))
+  }, {
+    value: 1,
+    content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('IN_PROGRESS', 'In progress'), /*#__PURE__*/_react.default.createElement(_styles3.LogisticStatusDot, {
+      status: 1
+    }))
+  }, {
+    value: 2,
+    content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('IN_QUEUE', 'In queue'), /*#__PURE__*/_react.default.createElement(_styles3.LogisticStatusDot, {
+      status: 2
+    }))
+  }, {
+    value: 3,
+    content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('EXPIRED', 'Expired'), /*#__PURE__*/_react.default.createElement(_styles3.LogisticStatusDot, {
+      status: 3
+    }))
+  }, {
+    value: 4,
+    content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, t('RESOLVED', 'Resolved'), /*#__PURE__*/_react.default.createElement(_styles3.LogisticStatusDot, {
+      status: 4
+    }))
+  }];
   var handleAcceptFilter = function handleAcceptFilter() {
     handleChangeFilterValues(filterValues);
     handleCloseFilterModal();
@@ -149,8 +179,7 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
     filterValues: filterValues,
     businessesList: businessesList,
     handleChangeBusinesses: handleChangeBusinesses
-  }), /*#__PURE__*/_react.default.createElement(_DriverSelector.DriverSelector, {
-    isFilterView: true,
+  }), /*#__PURE__*/_react.default.createElement(_DriverMultiSelector.DriverMultiSelector, {
     drivers: driversList.drivers,
     filterValues: filterValues,
     handleChangeDriver: handleChangeDriver
@@ -171,7 +200,17 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
   })), /*#__PURE__*/_react.default.createElement(_styles2.WrapperRow, null, /*#__PURE__*/_react.default.createElement(_CurrencyFilter.CurrencyFilter, {
     filterValues: filterValues,
     handleChangeCurrency: handleChangeCurrency
-  })), filterValues === null || filterValues === void 0 ? void 0 : filterValues.metafield.map(function (item) {
+  }), /*#__PURE__*/_react.default.createElement(_styles2.SelectWrapper, null, /*#__PURE__*/_react.default.createElement(_FirstSelect.Select, {
+    options: logisticStatusList,
+    className: "select",
+    defaultValue: (_filterValues$logisti = filterValues === null || filterValues === void 0 ? void 0 : filterValues.logisticStatus) !== null && _filterValues$logisti !== void 0 ? _filterValues$logisti : '',
+    placeholder: t('SELECT_LOGISTIC_STATUS', 'Select a logistic status'),
+    onChange: function onChange(value) {
+      return handleChangeChildFilterValue({
+        logisticStatus: value
+      });
+    }
+  }))), filterValues === null || filterValues === void 0 ? void 0 : filterValues.metafield.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_styles2.WrapperRow, {
       key: item.id
     }, /*#__PURE__*/_react.default.createElement(_styles.Input, {

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

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperRow = exports.MultiSelectContainer = exports.FilterGroupListContainer = exports.ButtonGroup = exports.AddMetaFiled = exports.AddInputWrapper = void 0;
+exports.WrapperRow = exports.SelectWrapper = exports.Option = exports.MultiSelectContainer = exports.FilterGroupListContainer = exports.ButtonGroup = exports.AddMetaFiled = exports.AddInputWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -32,4 +32,14 @@ exports.AddInputWrapper = AddInputWrapper;
 var AddMetaFiled = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  color: ", ";\n  cursor: pointer;\n  width: 100%;\n"])), function (props) {
   return props.theme.colors.primary;
 });
-exports.AddMetaFiled = AddMetaFiled;
+exports.AddMetaFiled = AddMetaFiled;
+var SelectWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    > div {\n    width: 100%;\n    border: none;\n    height: 100%;\n\n    > div:first-child {\n      height: 100%;\n      background-color: ", ";\n      border: none;\n      border-radius: 7.6px;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 24px;\n      padding-left: 20px;\n    }\n    .list {\n      background-color: ", ";\n      border: none;\n      \n      .list-wrapper {\n        > div {\n          padding: 6px 10px;\n          &:hover {\n            background-color: #f2f5f7;\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.secundary;
+}, function (props) {
+  return props.theme.colors.secundary;
+});
+exports.SelectWrapper = SelectWrapper;
+var Option = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.theme.colors.secundaryContrast;
+});
+exports.Option = Option;

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

@@ -155,7 +155,7 @@ var UsersList = function UsersList(props) {
     onClick: function onClick() {
       return handleSelecteAllUser();
     }
-  }, !(usersList !== null && usersList !== void 0 && usersList.loading) && isAllChecked ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CheckSquareFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Square, null)), t('USER', 'User'))), /*#__PURE__*/_react.default.createElement("th", null, t('PHONE', 'Phone')), /*#__PURE__*/_react.default.createElement("th", null, t('TYPE', 'Type')), /*#__PURE__*/_react.default.createElement("th", {
+  }, !(usersList !== null && usersList !== void 0 && usersList.loading) && isAllChecked ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CheckSquareFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Square, null)), t('ID', 'Id'))), /*#__PURE__*/_react.default.createElement("th", null, t('USER', 'User')), /*#__PURE__*/_react.default.createElement("th", null, t('PHONE', 'Phone')), /*#__PURE__*/_react.default.createElement("th", null, t('TYPE', 'Type')), /*#__PURE__*/_react.default.createElement("th", {
     className: "amout-orders "
   }, t('AMOUNT_OF_ORDERS', 'Amount of orders')), /*#__PURE__*/_react.default.createElement("th", null, t('ACTION', 'Action')))), usersList.loading ? _toConsumableArray(Array((paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.pageSize) || 10).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement("tbody", {
@@ -163,7 +163,9 @@ var UsersList = function UsersList(props) {
     }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles2.UserMainInfo, null, /*#__PURE__*/_react.default.createElement(_styles2.CheckBoxWrapper, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       width: 20,
       height: 20
-    })), /*#__PURE__*/_react.default.createElement(_styles2.WrapperImage, {
+    })), /*#__PURE__*/_react.default.createElement(_styles2.InfoBlock, null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 70
+    }))))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles2.UserMainInfo, null, /*#__PURE__*/_react.default.createElement(_styles2.WrapperImage, {
       isSkeleton: true
     }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       width: 45,
@@ -198,7 +200,9 @@ var UsersList = function UsersList(props) {
       onClick: function onClick() {
         return handleSelectedUsers(user.id);
       }
-    }, selectedUsers.includes(user.id) ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CheckSquareFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Square, null)), /*#__PURE__*/_react.default.createElement(_styles2.WrapperImage, null, user !== null && user !== void 0 && user.photo ? /*#__PURE__*/_react.default.createElement(_styles2.Image, {
+    }, selectedUsers.includes(user.id) ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CheckSquareFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Square, null)), /*#__PURE__*/_react.default.createElement(_styles2.InfoBlock, null, /*#__PURE__*/_react.default.createElement("p", {
+      className: "bold"
+    }, user === null || user === void 0 ? void 0 : user.id)))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles2.UserMainInfo, null, /*#__PURE__*/_react.default.createElement(_styles2.WrapperImage, null, user !== null && user !== void 0 && user.photo ? /*#__PURE__*/_react.default.createElement(_styles2.Image, {
       bgimage: optimizeImage(user === null || user === void 0 ? void 0 : user.photo, 'h_50,c_limit')
     }) : /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null), isCustomer && /*#__PURE__*/_react.default.createElement(_styles2.OrdersCountWrapper, {
       isNew: (user === null || user === void 0 ? void 0 : user.orders_count) === 0

package/_modules/components/Users/UsersList/styles.js

@@ -17,7 +17,7 @@ var UsersConatiner = _styledComponents.default.div(_templateObject || (_template
 exports.UsersConatiner = UsersConatiner;
 var UserTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: auto;\n"])));
 exports.UserTableWrapper = UserTableWrapper;
-var UsersTable = _styledComponents.default.table(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - 10px);\n  min-width: 900px;\n  color: ", ";\n\n  td, th {\n    padding: 10px 0;\n    font-size: 14px;\n    &:first-child {\n      width: 40%;\n    }\n    &:nth-child(2) {\n      width: 20%;\n    }\n\n    &:nth-child(4),\n    \n    &:nth-child(5) {\n      width: 10%;\n    }\n  }\n\n  thead {\n    tr {\n      border-bottom: solid 1px ", ";\n      th {\n        white-space: nowrap;\n        &.amout-orders {\n          width: 15%;\n        }\n      }\n    }\n  }\n\n  tbody {\n    border-bottom: 1px solid ", ";\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &.active {\n      background-color: ", ";\n      td {\n        border-top: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n      }\n    }\n  }\n"])), function (props) {
+var UsersTable = _styledComponents.default.table(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - 10px);\n  min-width: 900px;\n  color: ", ";\n\n  td, th {\n    padding: 10px 0;\n    font-size: 14px;\n    &:first-child {\n      width: 10%;\n    }\n    &:nth-child(2) {\n      width: 35%;\n    }\n    &:nth-child(3) {\n      width: 20%;\n    }\n\n    &:nth-child(5),\n    \n    &:nth-child(6) {\n      width: 10%;\n    }\n  }\n\n  thead {\n    tr {\n      border-bottom: solid 1px ", ";\n      th {\n        white-space: nowrap;\n        &.amout-orders {\n          width: 15%;\n        }\n      }\n    }\n  }\n\n  tbody {\n    border-bottom: 1px solid ", ";\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &.active {\n      background-color: ", ";\n      td {\n        border-top: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme$colors;
   return (_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.headingColor;
 }, function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.30.0",
+  "version": "1.30.2",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.30.0",
+    "ordering-components-admin-external": "1.30.2",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

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

@@ -208,6 +208,13 @@ const DriversGroupAutoassignUI = (props) => {
           </div>
         </RowGroupContainer>
       )}
+      <CheckboxWrapper isPadding>
+        <Checkbox
+          checked={changesState?.autoassign_groupable_individual_orders_only ?? curDriversGroup?.autoassign_groupable_individual_orders_only}
+          onChange={e => onChangeSave({ autoassign_groupable_individual_orders_only: e.target.checked })}
+        />
+        <span>{t('DO_NOT_ASSIGN_MORE_THAN_1_ORDER_IF_ORDER_CAN_NOT_GROUPED', 'Do not assign more than 1 order IF the order can’t be grouped')}</span>
+      </CheckboxWrapper>
     </AutoassignContainer>
   )
 }

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

@@ -119,6 +119,10 @@ export const CheckboxWrapper = styled.div`
   display: flex;
   align-items: center;
 
+  ${({ isPadding }) => isPadding && css`
+    padding-bottom: 20px;
+  `}
+
   span {
     font-size: 14px;
     ${props => props.theme?.rtl ? css`

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

@@ -33,6 +33,7 @@ export const Option = styled.div`
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 350px;
+    font-size: 14px;
   }
 
   @media (max-width: 576px) {

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

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, DriversList as DriversController } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { MultiSelect } from '../../../styles/MultiSelect'
+
+import {
+  Option,
+  OptionContent,
+  DriverNameContainer,
+  WrapperDriverImage,
+  DriverImage,
+  DriverName,
+  DriverText,
+  PlaceholderTitle
+} from './styles'
+
+const DriverMultiSelectorUI = (props) => {
+  const {
+    driversList,
+    defaultValue,
+    isPhoneView,
+    small,
+    padding,
+    handleChangeDriver,
+    filterValues
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [driversMultiOptionList, setDriversMultiOptionList] = useState([])
+  const [searchValue, setSearchValue] = useState(null)
+  const driversLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+  useEffect(() => {
+    const _driversOptionList = [
+      {
+        value: 'default',
+        content: <Option padding='0px'><span>{t('SELECT_DRIVER', 'Select driver')}</span></Option>,
+        color: 'primary',
+        showDisable: true
+      }
+    ]
+    if (!driversList.loading) {
+      let _driverList
+      if (searchValue) {
+        _driverList = driversList.drivers.filter(driver => (driver.name + driver.lastname).toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      } else {
+        _driverList = driversList.drivers
+      }
+      const _driversOptionListTemp = _driverList.map((driver, i) => {
+        return {
+          value: driver.id,
+          showDisable: true,
+          content: (
+            <Option small={small} isPhoneView={isPhoneView} padding={padding}>
+              <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>
+          )
+        }
+      })
+
+      setDriversMultiOptionList(_driversOptionListTemp)
+
+      for (const option of _driversOptionListTemp) {
+        _driversOptionList.push(option)
+      }
+    }
+  }, [driversList, defaultValue, searchValue])
+
+  const Placeholder = <PlaceholderTitle>{t('SELECT_DRIVER', 'Select driver')}</PlaceholderTitle>
+
+  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
+          defaultValue='default'
+          options={driversLoading}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          className='driver-select'
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
+        />
+      )}
+    </>
+  )
+}
+
+export const DriverMultiSelector = (props) => {
+  const DriversControlProps = {
+    ...props,
+    UIComponent: DriverMultiSelectorUI,
+    propsToFetch: ['id', 'name', 'lastname', 'cellphone', 'photo']
+  }
+  return (
+    <>
+      <DriversController {...DriversControlProps} />
+    </>
+  )
+}

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

@@ -0,0 +1,150 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors?.headingColor};
+  padding: ${({ padding }) => padding || '5px 10px'};
+  white-space: nowrap;
+  ${({ isPhoneView }) => isPhoneView && css`
+    width: 100%;
+  `}
+  ${({ isRemove }) => isRemove && css`
+    color: ${props => props.theme.colors.danger};
+    padding: 3px 10px;
+    font-size: 14px;
+  `}
+
+  img {
+    width: 45px;
+    border-radius: 8px;
+  }
+
+  ${({ small }) => small && css`
+    padding: ${({ padding }) => padding || '5px 0px'};
+    img {
+      width: 25px;
+    }
+  `}
+
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 350px;
+  }
+
+  @media (max-width: 576px) {
+    padding: ${({ padding }) => padding || '5px 0px'};
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+    span {
+      max-width: 280px;
+    }
+  }
+`
+
+export const OptionContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const DriverNameContainer = styled.div`
+  line-height: 1.3;
+  color: #263238;
+`
+
+export const DriverName = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: ${props => props.theme.colors.headingColor};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  margin: 0px;
+
+  ${({ small }) => small && css`
+    font-weight: 400;
+  `}
+
+  @media (max-width: 576px) {
+    max-width: 90px;
+  }
+`
+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;
+  height: 45px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  ${({ small }) => small && css`
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    svg {
+      padding: 3px;
+    }
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 8px;
+  ` : css`
+    margin-right: 8px;
+  `}
+`
+const DriverImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 8px;
+`
+export const DriverImage = (props) => {
+  return (
+    <DriverImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </DriverImageStyled>
+  )
+}
+
+export const PlaceholderTitle = styled(Option)`
+  padding: 10px;
+
+  ${({ isSingle }) => isSingle && css`
+    padding: 0px;
+    font-size: 14px;
+  `}
+`