ordering-ui-admin-external 1.42.16 → 1.43.0

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

@@ -18,6 +18,7 @@ var _OrdersDashboard = require("../OrdersDashboard");
 var _OrderStatusSubFilter = require("../OrderStatusSubFilter");
 var _OrderNotification = require("../OrderNotification");
 var _WizardOrders = require("../WizardOrders");
+var _OrdersHeaderFilterGroup = require("../OrdersHeaderFilterGroup");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -231,6 +232,10 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
     setTimeStatus: setTimeStatus,
     setSlaSettingTime: setSlaSettingTime,
     isLateralBar: isLateralBar
+  }), /*#__PURE__*/_react.default.createElement(_OrdersHeaderFilterGroup.OrdersHeaderFilterGroup, {
+    driverGroupList: driverGroupList,
+    driversList: driversList,
+    handleChangeFilterValues: handleChangeFilterValues
   }), /*#__PURE__*/_react.default.createElement(_OrderStatusFilterBar.OrderStatusFilterBar, {
     isUseQuery: isUseQuery,
     selectedOrderStatus: ordersStatusGroup,

package/_modules/components/Settings/SettingsList/index.js

@@ -154,7 +154,7 @@ var SettingsListUI = exports.SettingsListUI = function SettingsListUI(props) {
     width: 70,
     height: 44
   })), !settingsState.error && !settingsState.loading && configs && !settingsState.API && /*#__PURE__*/_react.default.createElement(_styles2.GeneralContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.FormContainer, null, configs.length > 0 && configs.map(function (config, i) {
-    var _config$options, _config$options2, _config$options3, _config$options4, _config$value;
+    var _config$options, _config$options2, _config$options3, _config$options4, _config$options5, _config$options6, _config$value;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: i
     }, config.type === 1 && /*#__PURE__*/_react.default.createElement(_styles2.FormGroupText, {
@@ -183,7 +183,23 @@ var SettingsListUI = exports.SettingsListUI = function SettingsListUI(props) {
       handleSelectChange: function handleSelectChange(value) {
         return handleInputChange(value, config === null || config === void 0 ? void 0 : config.id);
       }
-    })), config.type === 3 && /*#__PURE__*/_react.default.createElement(_styles2.CheckBoxWrapper, null, (config === null || config === void 0 ? void 0 : config.name) && /*#__PURE__*/_react.default.createElement("label", null, config === null || config === void 0 ? void 0 : config.name), (config === null || config === void 0 ? void 0 : config.description) && /*#__PURE__*/_react.default.createElement("p", null, config === null || config === void 0 ? void 0 : config.description), (config === null || config === void 0 || (_config$options = config.options) === null || _config$options === void 0 ? void 0 : _config$options.length) > 0 && (config === null || config === void 0 || (_config$options2 = config.options) === null || _config$options2 === void 0 ? void 0 : _config$options2.map(function (item, j) {
+    })), config.type === 3 && /*#__PURE__*/_react.default.createElement(_styles2.CheckBoxWrapper, null, (config === null || config === void 0 ? void 0 : config.name) && /*#__PURE__*/_react.default.createElement("label", null, config === null || config === void 0 ? void 0 : config.name), (config === null || config === void 0 ? void 0 : config.description) && /*#__PURE__*/_react.default.createElement("p", null, config === null || config === void 0 ? void 0 : config.description), (config === null || config === void 0 ? void 0 : config.key) !== 'filter_order_options' && (config === null || config === void 0 || (_config$options = config.options) === null || _config$options === void 0 ? void 0 : _config$options.length) > 0 && (config === null || config === void 0 || (_config$options2 = config.options) === null || _config$options2 === void 0 ? void 0 : _config$options2.map(function (item, j) {
+      return /*#__PURE__*/_react.default.createElement(_styles2.FormGroupWrapper, {
+        key: j
+      }, /*#__PURE__*/_react.default.createElement(_styles2.FormGroupCheck, {
+        className: "checkbox"
+      }, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("input", {
+        type: "checkbox",
+        name: item === null || item === void 0 ? void 0 : item.value,
+        "data-id": config === null || config === void 0 ? void 0 : config.id,
+        defaultChecked: config === null || config === void 0 ? void 0 : config.value.split('|').includes(item === null || item === void 0 ? void 0 : item.value),
+        onChange: function onChange(e) {
+          return handleCheckBoxChange(e, true, config === null || config === void 0 ? void 0 : config.value);
+        }
+      }), t(item.text.toUpperCase(), item.text.replace(/_/g, ' ').toLowerCase()))));
+    })), (config === null || config === void 0 ? void 0 : config.key) === 'filter_order_options' && (config === null || config === void 0 || (_config$options3 = config.options) === null || _config$options3 === void 0 ? void 0 : _config$options3.length) > 0 && (config === null || config === void 0 || (_config$options4 = config.options) === null || _config$options4 === void 0 ? void 0 : _config$options4.filter(function (option) {
+      return option.value === 'external_id' || option.value === 'driver' || option.value === 'driver_group_general';
+    }).map(function (item, j) {
       return /*#__PURE__*/_react.default.createElement(_styles2.FormGroupWrapper, {
         key: j
       }, /*#__PURE__*/_react.default.createElement(_styles2.FormGroupCheck, {
@@ -207,7 +223,7 @@ var SettingsListUI = exports.SettingsListUI = function SettingsListUI(props) {
       },
       className: "form-control",
       placeholder: "placeholder"
-    })) : /*#__PURE__*/_react.default.createElement(_styles2.CheckBoxWrapper, null, (config === null || config === void 0 ? void 0 : config.name) && /*#__PURE__*/_react.default.createElement("label", null, config === null || config === void 0 ? void 0 : config.name), (config === null || config === void 0 ? void 0 : config.description) && /*#__PURE__*/_react.default.createElement("p", null, config === null || config === void 0 ? void 0 : config.description), (config === null || config === void 0 || (_config$options3 = config.options) === null || _config$options3 === void 0 ? void 0 : _config$options3.length) > 0 && (config === null || config === void 0 || (_config$options4 = config.options) === null || _config$options4 === void 0 ? void 0 : _config$options4.map(function (item, j) {
+    })) : /*#__PURE__*/_react.default.createElement(_styles2.CheckBoxWrapper, null, (config === null || config === void 0 ? void 0 : config.name) && /*#__PURE__*/_react.default.createElement("label", null, config === null || config === void 0 ? void 0 : config.name), (config === null || config === void 0 ? void 0 : config.description) && /*#__PURE__*/_react.default.createElement("p", null, config === null || config === void 0 ? void 0 : config.description), (config === null || config === void 0 || (_config$options5 = config.options) === null || _config$options5 === void 0 ? void 0 : _config$options5.length) > 0 && (config === null || config === void 0 || (_config$options6 = config.options) === null || _config$options6 === void 0 ? void 0 : _config$options6.map(function (item, j) {
       return /*#__PURE__*/_react.default.createElement(_styles2.FormGroupWrapper, {
         key: j
       }, /*#__PURE__*/_react.default.createElement(_styles2.FormGroupCheck, {

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

@@ -246,7 +246,8 @@ var CustomersListing = exports.CustomersListing = function CustomersListing(prop
       initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
       pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
       controlType: 'pages'
-    }
+    },
+    propsToFetch: ['name', 'lastname', 'email', 'phone', 'photo', 'cellphone', 'loyalty_level', 'loyalty_level_id', 'country_phone_code', 'city_id', 'city', 'address', 'addresses', 'address_notes', 'dropdown_option_id', 'dropdown_option', 'location', 'zipcode', 'level', 'enabled', 'middle_name', 'second_lastname', 'birthdate', 'phone_verified', 'email_verified', 'wallets', 'orders_count', 'push_tokens']
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.UsersList, customersProps);
 };

package/_modules/contexts/FilterValuesContext/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterValuesProvider = exports.FilterValuesContext = void 0;
+exports.useFilterValues = useFilterValues;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * Create FilterValuesContext
+ * This context will manage the info between pages and provide an easy interface
+ */
+var FilterValuesContext = exports.FilterValuesContext = /*#__PURE__*/(0, _react.createContext)();
+
+/**
+  * Custom provider to mange shared info
+  * @param {props} props
+  */
+var FilterValuesProvider = exports.FilterValuesProvider = function FilterValuesProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)({
+      orderId: null,
+      externalId: null,
+      groupTypes: [],
+      groupTypesUnassigned: [],
+      dateType: null,
+      deliveryFromDatetime: null,
+      deliveryEndDatetime: null,
+      businessIds: [],
+      driverIds: [],
+      driverGroupIds: [],
+      cityIds: [],
+      statuses: [],
+      deliveryTypes: [],
+      paymethodIds: [],
+      countryCode: [],
+      currency: [],
+      metafield: [],
+      logisticStatus: null,
+      assigned: null,
+      driverGroupBusinessIds: [],
+      customerName: null,
+      customerEmail: null,
+      customerCellphone: null,
+      customerLastname: null
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    filterValues = _useState2[0],
+    setFilterValues = _useState2[1];
+  var handleFilterValues = function handleFilterValues(filterValues) {
+    setFilterValues(filterValues);
+  };
+  var functions = {
+    handleFilterValues: handleFilterValues
+  };
+  return /*#__PURE__*/_react.default.createElement(FilterValuesContext.Provider, {
+    value: [filterValues, functions]
+  }, children);
+};
+
+// hook context
+
+function useFilterValues() {
+  var filterValuesManager = _react.default.useContext(FilterValuesContext);
+  return filterValuesManager || [{}, function () {}];
+}

package/_modules/index.js

@@ -1161,6 +1161,18 @@ Object.defineProperty(exports, "EnterprisePromotionSpecficProducts", {
     return _Marketing.EnterprisePromotionSpecficProducts;
   }
 });
+Object.defineProperty(exports, "FilterValuesContext", {
+  enumerable: true,
+  get: function get() {
+    return _FilterValuesContext.FilterValuesContext;
+  }
+});
+Object.defineProperty(exports, "FilterValuesProvider", {
+  enumerable: true,
+  get: function get() {
+    return _FilterValuesContext.FilterValuesProvider;
+  }
+});
 Object.defineProperty(exports, "ForgotPasswordForm", {
   enumerable: true,
   get: function get() {
@@ -2481,6 +2493,12 @@ Object.defineProperty(exports, "setStorageItem", {
     return _utils.setStorageItem;
   }
 });
+Object.defineProperty(exports, "useFilterValues", {
+  enumerable: true,
+  get: function get() {
+    return _FilterValuesContext.useFilterValues;
+  }
+});
 Object.defineProperty(exports, "useInfoShare", {
   enumerable: true,
   get: function get() {
@@ -2547,6 +2565,7 @@ var _ThemeContext = require("./contexts/ThemeContext");
 var _ConfigFileContext = require("./contexts/ConfigFileContext");
 var _ProjectContext = require("./contexts/ProjectContext");
 var _InfoShareContext = require("./contexts/InfoShareContext");
+var _FilterValuesContext = require("./contexts/FilterValuesContext");
 var _useOnlineStatus = require("./hooks/useOnlineStatus");
 var _useWindowSize = require("./hooks/useWindowSize");
 var _Buttons = require("./styles/Buttons");

package/index-template.js

@@ -8,6 +8,7 @@ import { Integrations } from '@sentry/tracing'
 import { ThemeProvider } from './src/contexts/ThemeContext'
 import { ConfigFileContext } from './src/contexts/ConfigFileContext'
 import { InfoShareProvider } from './src/contexts/InfoShareContext'
+import { FilterValuesProvider } from './src/contexts/FilterValuesContext'
 import { ProjectProvider } from './src/contexts/ProjectContext'
 import { Toast } from './src/styles/Toast'
 import theme from './template/theme.json'
@@ -658,8 +659,10 @@ const RouteApp = () => {
           <OrderingProvider Alert={Alert}>
             <InfoShareProvider>
               <ProjectProvider>
-                <Router />
-                <Toast />
+                <FilterValuesProvider>
+                  <Router />
+                  <Toast />
+                </FilterValuesProvider>
               </ProjectProvider>
             </InfoShareProvider>
           </OrderingProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.42.16",
+  "version": "1.43.0",
   "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.42.11",
+    "ordering-components-admin-external": "1.43.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

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

@@ -1,15 +1,21 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useSession } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
-import { Input, Button, SecondSelect as DefaultSelect } from '../../../styles'
+import { Input, Button, SecondSelect as DefaultSelect, Checkbox } from '../../../styles'
 import { Alert } from '../../Shared'
 import { DriversGroupDrivers } from '../DriversGroupDrivers'
 import { DriversGroupCompanies } from '../DriversGroupCompanies'
 
 import {
   Container,
-  InputWrapper
+  DriverManagerContainer,
+  DriverManagerWrapper,
+  Image,
+  InputWrapper,
+  ManagerInfoContainer,
+  WrapperImage
 } from './styles'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
 export const DriversGroupGeneralForm = (props) => {
   const {
@@ -21,7 +27,9 @@ export const DriversGroupGeneralForm = (props) => {
     handleAddDriversGroup,
     actionDisabled,
     isTourOpen,
-    handleNextClick
+    handleNextClick,
+    selectedDriverManager,
+    handleSelectDriverManager
   } = props
 
   const [, t] = useLanguage()
@@ -34,13 +42,6 @@ export const DriversGroupGeneralForm = (props) => {
     { value: 1, content: t('DRIVER_COMPANIES', 'Driver companies') }
   ]
 
-  const driversManagersOptions = driversManagers.map(manager => {
-    return {
-      value: manager.id,
-      content: <div>{manager?.name} {manager?.lastname}</div>
-    }
-  })
-
   const priorityOptions = [
     { value: -1, content: t('LOW', 'Low') },
     { value: 0, content: t('NORMAL', 'Normal') },
@@ -127,17 +128,34 @@ export const DriversGroupGeneralForm = (props) => {
           autoComplete='off'
         />
       </InputWrapper>
+
       {user?.level !== 5 && (
         <InputWrapper>
           <label>{t('DRIVER_MANAGER', 'Driver manager')}</label>
-          <DefaultSelect
-            isSecondIcon
-            placeholder={t('SELECT_MANAGER', 'Select driver manager')}
-            options={driversManagersOptions}
-            defaultValue={changesState?.administrator_id ?? driversGroupState.driversGroup?.administrator_id}
-            optionInnerMaxHeight='60vh'
-            onChange={val => handleChangesState({ administrator_id: val })}
-          />
+          <DriverManagerContainer>
+            {driversManagers.map(driverManager => (
+              <DriverManagerWrapper
+                key={driverManager.id}
+              >
+                <Checkbox
+                  value={driverManager?.id}
+                  checked={selectedDriverManager.includes(driverManager.id)}
+                  onChange={e => handleSelectDriverManager(driverManager.id, e.target.checked)}
+                />
+                <WrapperImage>
+                  {driverManager?.photo ? (
+                    <Image bgimage={driverManager?.photo} alt='driverManager' />
+                  ) : (
+                    <FaUserAlt />
+                  )}
+                </WrapperImage>
+                <ManagerInfoContainer>
+                  <p>{driverManager?.name}</p>
+                  <p>{driverManager?.email}</p>
+                </ManagerInfoContainer>
+              </DriverManagerWrapper>
+            ))}
+          </DriverManagerContainer>
         </InputWrapper>
       )}
       <InputWrapper>

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const Container = styled.form`
@@ -42,3 +43,85 @@ export const InputWrapper = styled.div`
     }
   }
 `
+
+export const DriverManagerContainer = styled.div`
+  height: calc(100% - 130px);
+  overflow: auto;
+  max-height: 250px;
+`
+
+export const DriverManagerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+
+  p {
+    margin: 0px;
+    font-size: 12px;
+  }
+
+  ${({ isDisabed }) => isDisabed && css`
+    pointer-events: none;
+  `}
+`
+
+export const ManagerInfoContainer = styled.div`
+  p {
+    margin: 0px;
+    &:first-child {
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    &:last-child {
+      font-size: 12px;
+      color: ${props => props.theme.colors.lightGray};
+    }
+  }
+`
+
+export const WrapperImage = styled.div`
+  max-width: 40px;
+  max-height: 40px;
+  height: 40px;
+  width: 40px;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    border: 1px solid #E3E3E3;
+  `}
+  border-radius: 8px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 7px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  margin: 0 10px;
+`
+
+const ImageStyled = 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 Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -92,7 +92,8 @@ export const AdvancedSettings = (props) => {
     { name: t('DESCRIPTION', 'Description'), type: 'hidden', path: 'business_view.components.products.components.product.components.description.hidden' },
     { name: t('IMAGE', 'Image'), type: 'hidden', path: 'business_view.components.products.components.product.components.image.hidden' },
     { name: t('POSITION', 'Position'), type: 'position', path: 'business_view.components.products.components.product.components.image.position' },
-    { name: t('ADD_TO_CART_BUTTON', 'Add to cart button'), type: 'hidden', path: 'business_view.components.products.components.add_to_cart_button.hidden' }
+    { name: t('ADD_TO_CART_BUTTON', 'Add to cart button'), type: 'hidden', path: 'business_view.components.products.components.add_to_cart_button.hidden' },
+    { name: t('FAVORITE', 'Favorite'), type: 'hidden', path: 'business_view.components.products.components.product.components.favorite.hidden' }
   ]
 
   const reviewsPopups = [

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useLanguage, useSession, OrdersManage as OrdersManageController } from 'ordering-components-admin-external'
+import { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
 import { OrdersContentHeader } from '../OrdersContentHeader'
 import { OrderDetails } from '../OrderDetails'
@@ -229,6 +230,11 @@ const OrdersManagerUI = (props) => {
               />
             </DriversContainer>
             <OrdersContainer showCompressedInfo>
+              <OrdersHeaderFilterGroup
+                driverGroupList={driverGroupList}
+                driversList={driversList}
+                handleChangeFilterValues={handleChangeFilterValues}
+              />
               <OrderStatusFilterBar
                 isUseQuery={isUseQuery}
                 selectedOrderStatus={ordersStatusGroup}

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

@@ -116,6 +116,8 @@ const DeliveriesManagerUI = (props) => {
               numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
               isUseQuery={isUseQuery}
               franchisesList={props.franchisesList}
+              driverGroupList={driverGroupList}
+              handleChangeFilterValues={handleChangeFilterValues}
             />
           </WrapItemView>
         </OrdersContent>

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useConfig } from 'ordering-components-admin-external'
 import { DeliveriesLocation } from '../DeliveriesLocation'
 import { OrdersDashboardList } from '../OrdersDashboardList'
+import { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
 import { OrderStatusSubFilter } from '../OrderStatusSubFilter'
 
@@ -22,7 +23,9 @@ export const DeliveryDashboard = (props) => {
     handleSelectedSubOrderStatus,
     ordersAmountByStatus,
     setOrdersAmountByStatus,
-    isUseQuery
+    isUseQuery,
+    driverGroupList,
+    handleChangeFilterValues
   } = props
 
   const ordersDashboardListProps = {
@@ -52,6 +55,11 @@ export const DeliveryDashboard = (props) => {
   return (
     <DeliveryDashboardContainer>
       <OrdersContainer>
+         <OrdersHeaderFilterGroup
+            driverGroupList={driverGroupList}
+            driversList={driversList}
+            handleChangeFilterValues={handleChangeFilterValues}
+          />
         <FilterContainer>
           <OrderStatusFilterBar
             isUseQuery={isUseQuery}

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

@@ -24,16 +24,17 @@ const DriverMultiSelectorUI = (props) => {
     filterValues
   } = props
 
-  const [, t] = useLanguage()
+  const [{ dictionary }] = 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> }]
+  const driversLoading = [{ value: 'default', content: <Option small={small}>{dictionary?.LOADING ?? 'loading'}...</Option> }]
+
   useEffect(() => {
     const _driversOptionList = [
       {
         value: 'default',
-        content: <Option padding='0px'><span>{t('SELECT_DRIVER', 'Select driver')}</span></Option>,
+        content: <Option padding='0px'><span>{dictionary?.SELECT_DRIVER ?? 'Select driver'}</span></Option>,
         color: 'primary',
         showDisable: true
       }
@@ -57,7 +58,7 @@ const DriverMultiSelectorUI = (props) => {
               <OptionContent>
                 <DriverNameContainer className='driver-info'>
                   <DriverName small={small}>{driver.name} {driver.lastname}</DriverName>
-                  <DriverText small={small}>{t('DRIVER', 'Driver')}</DriverText>
+                  <DriverText small={small}>{dictionary?.DRIVER ?? 'Driver'}</DriverText>
                 </DriverNameContainer>
               </OptionContent>
             </Option>
@@ -73,7 +74,7 @@ const DriverMultiSelectorUI = (props) => {
     }
   }, [driversList, defaultValue, searchValue])
 
-  const Placeholder = <PlaceholderTitle>{t('SELECT_DRIVER', 'Select driver')}</PlaceholderTitle>
+  const Placeholder = <PlaceholderTitle>{dictionary?.SELECT_DRIVER ?? 'Select driver'}</PlaceholderTitle>
 
   return (
     <>

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

@@ -12,7 +12,7 @@ export const DriversGroupTypeSelector = (props) => {
     title
   } = props
 
-  const [, t] = useLanguage()
+  const [{ dictionary }] = useLanguage()
 
   const [searchValue, setSearchValue] = useState('')
 
@@ -22,7 +22,7 @@ export const DriversGroupTypeSelector = (props) => {
     </PlaceholderTitle>
   )
   const [groupTypes, setGroupTypes] = useState([])
-  const groupTypesLoading = [{ value: 'default', content: <Option>{t('GROUP_LOADING', 'Group loading')}...</Option> }]
+  const groupTypesLoading = [{ value: 'default', content: <Option>{dictionary?.GROUP_LOADING ?? 'Group loading'}...</Option> }]
 
   useEffect(() => {
     const _groupList = []

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

@@ -4,6 +4,8 @@ export const PlaceholderTitle = styled.div`
   display: flex;
   align-items: center;
   padding: 10px;
+  line-height:15px;
+  font-size:14px;
 `
 
 export const Option = styled.div`

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LogisticInformation as LogisticInformationController, useLanguage, useUtils } from 'ordering-components-admin-external'
+import { LogisticInformation as LogisticInformationController, useLanguage, useUtils, useConfig } from 'ordering-components-admin-external'
 import Skeleton from 'react-loading-skeleton'
 import { Button } from '../../../styles'
 import {
@@ -13,7 +13,8 @@ const LogisticInformationUI = (props) => {
   const { logisticInformation, getLogistics } = props
   const [, t] = useLanguage()
 
-  const [{ parseDate, parseDistance }] = useUtils()
+  const [{ parseDate, parseNumber }] = useUtils()
+  const [configState] = useConfig()
 
   const getOrderStatus = (status) => {
     const orderStatus = [
@@ -50,6 +51,23 @@ const LogisticInformationUI = (props) => {
     return objectStatus && objectStatus
   }
 
+  const calculateDistanceParse = (distance, options = {}) => {
+    distance = parseFloat(distance) || 0
+    let unit = options?.unit || 'KM'
+    if (configState.configs.distance_unit_km?.value === '1') {
+      unit = 'KM'
+    }
+    if (configState.configs.distance_unit?.value) {
+      unit = configState.configs.distance_unit?.value
+    }
+    if (unit.toUpperCase() === 'MI') {
+      const dist = distance * 0.621371 / 1000
+      return `${parseNumber(dist, options)} ${t('MI', 'mi')}`
+    } else {
+      return `${parseNumber(distance / 1000, options)} ${t('KM', 'km')}`
+    }
+  }
+
   return (
     <>
       {logisticInformation.loading ? (
@@ -77,7 +95,7 @@ const LogisticInformationUI = (props) => {
               </Button>
               <BubbleConsole>
                 <UppercaseText><strong>{t('DISTANCE_CUSTOMER_FROM_BUSINESS', 'DISTANCE FROM CUSTOMER TO BUSINESS')}</strong></UppercaseText>
-                : {parseDistance((logisticInformation?.data?.distance_customer_from_business / 1000))}
+                : {calculateDistanceParse((logisticInformation?.data?.distance_customer_from_business))}
               </BubbleConsole>
               <>
                 <BubbleConsole>

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

@@ -264,7 +264,7 @@ export const OrdersCards = (props) => {
                         }
                       </p>
                     </div>
-                  )}
+                   )}
                 </CardHeading>
                 {isMessagesView && order?.unread_count > 0 && (
                   <UnreadMessageCounter>