ordering-ui-admin-external 1.43.18 → 1.43.20

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

@@ -8,6 +8,7 @@ exports.OrdersDashboardSLAControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _FirstSelect = require("../../../styles/Select/FirstSelect");
+var _OrderDashboardSLASetting = require("../OrderDashboardSLASetting");
 var _styles = require("./styles");
 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; }
@@ -22,7 +23,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 var OrdersDashboardSLAControls = exports.OrdersDashboardSLAControls = function OrdersDashboardSLAControls(props) {
-  var setTimeStatus = props.setTimeStatus;
+  var setTimeStatus = props.setTimeStatus,
+    setSlaSettingTime = props.setSlaSettingTime;
   var _useState = (0, _react.useState)('default'),
     _useState2 = _slicedToArray(_useState, 2),
     defaultOptionValue = _useState2[0],
@@ -31,6 +33,10 @@ var OrdersDashboardSLAControls = exports.OrdersDashboardSLAControls = function O
     _useState4 = _slicedToArray(_useState3, 2),
     filteredTimeStatus = _useState4[0],
     setFilteredTimeStatus = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    settingOptionOpen = _useState6[0],
+    setSettingOptionOpen = _useState6[1];
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -66,8 +72,18 @@ var OrdersDashboardSLAControls = exports.OrdersDashboardSLAControls = function O
     }, /*#__PURE__*/_react.default.createElement(_styles.Timestatus, {
       timeState: "delayed"
     }), /*#__PURE__*/_react.default.createElement("p", null, t('DELAYED', 'Delayed')))
+  }, {
+    value: 'sla_settings',
+    name: t('SLA_SETTING', 'SLA’s settings'),
+    content: /*#__PURE__*/_react.default.createElement(_styles.Option, {
+      noPadding: true
+    }, /*#__PURE__*/_react.default.createElement("p", null, t('SLA_SETTING', 'SLA’s settings')))
   }];
   var changeOrderTimeStatus = function changeOrderTimeStatus(val) {
+    if (val === 'sla_settings') {
+      setSettingOptionOpen(true);
+      return;
+    }
     setDefaultOptionValue(val);
     if (val === 'default') {
       setTimeStatus(null);
@@ -98,5 +114,9 @@ var OrdersDashboardSLAControls = exports.OrdersDashboardSLAControls = function O
     isShowSearchBar: true,
     searchBarPlaceholder: t('SEARCH', 'Search'),
     handleChangeSearch: handleChangeSearch
-  })));
+  })), settingOptionOpen && /*#__PURE__*/_react.default.createElement(_OrderDashboardSLASetting.OrderDashboardSLASetting, {
+    setSlaSettingTime: setSlaSettingTime,
+    settingOptionOpen: settingOptionOpen,
+    setSettingOptionOpen: setSettingOptionOpen
+  }));
 };

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

@@ -17,7 +17,7 @@ var OrdersDashboardSLAControlsContainer = exports.OrdersDashboardSLAControlsCont
   var _props$theme2;
   return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        margin-right: 5px;\n      "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        margin-left: 5px;\n      "])));
 });
-var OrderTimeStatusSelectWrapper = exports.OrderTimeStatusSelectWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .timeStatusSelect {\n    width: 168px;\n    height: 43px;\n    line-height: 43px;\n    border: none;\n    background: #F8F9FA;\n    margin: 0 10px;\n    >div:first-child {\n      height: 100%;\n    }\n  }\n\n  .list-wrapper {\n    min-width: 168px;\n  }\n\n  .search-bar-container {\n    padding: 7px 11px;\n    width: 100%;\n    input {\n      border-radius: 7.6px;\n      width: 100%;\n    }\n  }\n\n  .search-bar-container {\n    svg {\n      top: 13px;\n    }\n    input {\n      height: 40px;\n    }\n  }\n"])));
+var OrderTimeStatusSelectWrapper = exports.OrderTimeStatusSelectWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .timeStatusSelect {\n    width: fit-content;\n    height: 43px;\n    line-height: 43px;\n    border: none;\n    background: #F8F9FA;\n    margin: 0 10px;\n    >div:first-child {\n      height: 100%;\n    }\n  }\n\n  .list-wrapper {\n    min-width: 168px;\n  }\n\n  .search-bar-container {\n    padding: 7px 11px;\n    width: 100%;\n    input {\n      border-radius: 7.6px;\n      width: 100%;\n    }\n  }\n\n  .search-bar-container {\n    svg {\n      top: 13px;\n    }\n    input {\n      height: 40px;\n    }\n  }\n"])));
 var Option = exports.Option = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 5px 10px;\n  column-gap: 5px;\n\n  p {\n    margin: 0px;\n    white-space: nowrap;\n    font-size: 14px;\n    line-height: 26px;\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.secundaryContrast;
 }, function (_ref) {

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

@@ -20,6 +20,7 @@ var _PaymethodTypeSelector = require("../PaymethodTypeSelector");
 var _CountryFilter = require("../CountryFilter");
 var _styles = require("../../../styles");
 var _CurrencyFilter = require("../CurrencyFilter");
+var _AdminsSelector = require("../AdminsSelector");
 var _utils = require("../../../utils");
 var _FirstSelect = require("../../../styles/Select/FirstSelect");
 var _FilterValuesContext = require("../../../contexts/FilterValuesContext");
@@ -52,6 +53,7 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
     paymethodsList = props.paymethodsList,
     businessesList = props.businessesList,
     citiesList = props.citiesList,
+    adminsList = props.adminsList,
     handleChangeGroup = props.handleChangeGroup,
     handleChangeDateType = props.handleChangeDateType,
     handleChangeFromDate = props.handleChangeFromDate,
@@ -68,6 +70,7 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
     handleChangeCurrency = props.handleChangeCurrency,
     handleChangeMetaFieldValue = props.handleChangeMetaFieldValue,
     handleAddMetaField = props.handleAddMetaField,
+    handleChangeAdmin = props.handleChangeAdmin,
     handleDeleteMetafield = props.handleDeleteMetafield,
     handleChangeExternalId = props.handleChangeExternalId,
     handleChangeChildFilterValue = props.handleChangeChildFilterValue,
@@ -335,7 +338,11 @@ var OrdersFilterGroupUI = function OrdersFilterGroupUI(props) {
         assigned: value
       });
     }
-  }))), filterValues === null || filterValues === void 0 ? void 0 : filterValues.metafield.map(function (item) {
+  })), /*#__PURE__*/_react.default.createElement(_AdminsSelector.AdminsSelector, {
+    filterValues: filterValues,
+    adminsList: adminsList,
+    handleChangeAdmin: handleChangeAdmin
+  })), 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/OrdersHeaderFilterGroup/styles.js

@@ -10,14 +10,13 @@ var _templateObject, _templateObject2, _templateObject3;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var WrapperRow = exports.WrapperRow = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100% !important;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding-top: 10px;\n  padding-bottom: 0px;\n\n  & > div {\n    width: 100%;\n    height: 47px;\n    max-width: 1000px;\n    margin-right: 10px;\n    margin-bottom: 20px;\n    background-color: ", ";\n    border: none;\n    font-size: 14px;\n    border-radius: 8px;\n    > div:first-child {\n      height: 100%;\n    }\n  }\n\n  .order-status-multi-select {\n    p {\n      padding: 0;\n      color: ", " !important;\n    }\n  }\n\n  .date-filter-container {\n    z-index: 100;\n  }\n\n  input {\n    width: 100%;\n    height: 47px;\n    padding: 10px 25px;\n    box-sizing: border-box;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    -moz-appearance: textfield;\n  }\n\n  .close {\n    right: 8px;\n  }\n\n  .external_id {\n    @media (max-width: 1200px) {\n    flex: auto;\n  }\n\n  }\n\n  @media (min-width: 992px) {\n    flex-direction: row;\n  }\n\n  ", "\n"])), function (props) {
+var WrapperRow = exports.WrapperRow = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding-bottom: 0px;\n\n  & > div {\n    width: 100%;\n    height: 47px;\n    max-width: 1000px;\n    margin-right: 10px;\n    background-color: ", ";\n    border: none;\n    font-size: 14px;\n    border-radius: 8px;\n    > div:first-child {\n      height: 100%;\n    }\n  }\n\n  .order-status-multi-select {\n    p {\n      padding: 0;\n      color: ", " !important;\n    }\n  }\n\n  .date-filter-container {\n    z-index: 100;\n  }\n\n  input {\n    width: 100%;\n    height: 47px;\n    padding: 10px 25px;\n    box-sizing: border-box;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    -moz-appearance: textfield;\n  }\n\n  .close {\n    right: 8px;\n  }\n\n  .external_id {\n    @media (max-width: 1200px) {\n     flex: auto;\n    }\n  }\n\n  @media (max-width: 798px) {\n    flex-direction: column !important;\n    padding: 10px 15px 0 0px;\n    & > div {\n      margin-top: 15px;\n    }\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.secundary;
 }, function (props) {
   return props.theme.colors.headingColor;
 }, function (_ref) {
-  var wrapperWidth = _ref.wrapperWidth,
-    isSelectedOrders = _ref.isSelectedOrders;
-  return wrapperWidth < 992 && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex-direction: column !important;\n      padding: ", ";\n  "])), !isSelectedOrders && '15px 10px 0 10px');
+  var isSelectedOrders = _ref.isSelectedOrders;
+  return isSelectedOrders && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex-direction: column !important;\n      padding: ", ";\n      & > div {\n        margin-top: 15px;\n      }\n  "])), !isSelectedOrders && '10px 15px 0 0px');
 });
 var Option = exports.Option = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  padding: 5px;\n"])), function (props) {
   return props.theme.colors.secundaryContrast;

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

@@ -41,6 +41,7 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
     paymethodsList = props.paymethodsList,
     businessesList = props.businessesList,
     citiesList = props.citiesList,
+    adminsList = props.adminsList,
     ordersStatusGroup = props.ordersStatusGroup,
     filterValues = props.filterValues,
     deletedOrderIds = props.deletedOrderIds,
@@ -219,6 +220,7 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
     citiesList: citiesList,
     paymethodsList: paymethodsList,
     businessesList: businessesList,
+    adminsList: adminsList,
     handleChangeSearch: handleChangeSearch,
     handleChangeFilterValues: handleChangeFilterValues,
     selectedOrderIds: selectedOrderIds,
@@ -232,13 +234,6 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
     setTimeStatus: setTimeStatus,
     setSlaSettingTime: setSlaSettingTime,
     isLateralBar: isLateralBar
-  }), /*#__PURE__*/_react.default.createElement(_OrdersHeaderFilterGroup.OrdersHeaderFilterGroup, {
-    isSelectedOrders: isSelectedOrders,
-    driverGroupList: driverGroupList,
-    driversList: driversList,
-    searchValue: searchValue,
-    handleChangeFilterValues: handleChangeFilterValues,
-    handleChangeSearch: handleChangeSearch
   }), /*#__PURE__*/_react.default.createElement(_OrderStatusFilterBar.OrderStatusFilterBar, {
     isUseQuery: isUseQuery,
     selectedOrderStatus: ordersStatusGroup,

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

@@ -79,7 +79,7 @@ var SocketStatusUI = function SocketStatusUI(props) {
     onClick: function onClick() {
       return setOpenModal(true);
     }
-  }, /*#__PURE__*/_react.default.createElement(_styles2.StatusContainer, null, /*#__PURE__*/_react.default.createElement("span", null, t('CONNECTION_STATUS', 'Connection status')), /*#__PURE__*/_react.default.createElement(_styles2.WebsocketStatusDot, {
+  }, /*#__PURE__*/_react.default.createElement(_styles2.StatusContainer, null, /*#__PURE__*/_react.default.createElement("span", null, t('CONNECTION', 'Connection')), /*#__PURE__*/_react.default.createElement(_styles2.WebsocketStatusDot, {
     status: socketStatus
   }))), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
     open: openModal,

package/_modules/contexts/FilterValuesContext/index.js

@@ -52,6 +52,7 @@ var FilterValuesProvider = exports.FilterValuesProvider = function FilterValuesP
       customerEmail: null,
       customerCellphone: null,
       customerLastname: null,
+      administratorIds: [],
       coupon: null,
       offerId: null
     }),

package/package.json

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

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

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { MultiSelect } from '../../../styles/MultiSelect'
+
+import {
+  Option,
+  OptionContent,
+  DriverNameContainer,
+  WrapperDriverImage,
+  DriverImage,
+  DriverName,
+  PlaceholderTitle
+} from './styles'
+
+export const AdminsSelector = (props) => {
+  const {
+    adminsList,
+    defaultValue,
+    small,
+    padding,
+    handleChangeAdmin,
+    filterValues
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [adminsMultiOptionList, setAdminsMultiOptionList] = useState([])
+  const [searchValue, setSearchValue] = useState(null)
+  const adminsLoading = [{ value: 'default', content: <Option small={small}>{t('LOADING', 'loading')}...</Option> }]
+  const Placeholder = <PlaceholderTitle>{t('SELECT_ADMINISTRATOR', 'Select the administrator')}</PlaceholderTitle>
+
+  useEffect(() => {
+    if (!adminsList?.loading && adminsList?.admins?.length > 0) {
+      let _adminList
+      if (searchValue) {
+        _adminList = adminsList?.admins?.filter(admin => (admin.name + admin.lastname).toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      } else {
+        _adminList = adminsList?.admins
+      }
+      const _adminsOptionListTemp = _adminList?.map((admin, i) => {
+        return {
+          value: admin.id,
+          showDisable: true,
+          content: (
+            <Option small={small} padding={padding}>
+              <WrapperDriverImage small={small} className='driver-photo'>
+                <DriverImage bgimage={admin.photo || theme.images.icons?.noDriver} small={small} />
+              </WrapperDriverImage>
+              <OptionContent>
+                <DriverNameContainer className='driver-info'>
+                  <DriverName small={small}>{admin?.name} {admin?.lastname}</DriverName>
+                </DriverNameContainer>
+              </OptionContent>
+            </Option>
+          )
+        }
+      })
+
+      setAdminsMultiOptionList(_adminsOptionListTemp)
+    }
+  }, [adminsList, defaultValue, searchValue])
+
+  return (
+    <>
+      {!adminsList?.loading && adminsList?.admins?.length > 0 ? (
+        <MultiSelect
+          defaultValue={filterValues.administratorIds}
+          placeholder={Placeholder}
+          options={adminsMultiOptionList}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          onChange={(admin) => handleChangeAdmin(admin)}
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
+        />
+      ) : (
+        <MultiSelect
+          defaultValue='default'
+          options={adminsLoading}
+          optionInnerMargin='10px'
+          optionInnerMaxHeight='150px'
+          className='driver-select'
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
+        />
+      )}
+    </>
+  )
+}
+

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

@@ -0,0 +1,142 @@
+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'};
+  white-space: nowrap;
+
+  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;
+  `}
+`

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

@@ -1,7 +1,6 @@
 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 { useLanguage, useConfig, useSession, OrdersManage as OrdersManageController } from 'ordering-components-admin-external'
 import { OrderStatusFilterBar } from '../OrderStatusFilterBar'
 import { OrdersContentHeader } from '../OrdersContentHeader'
 import { OrderDetails } from '../OrderDetails'
@@ -57,11 +56,15 @@ const OrdersManagerUI = (props) => {
     setSelectedOrderIds,
     allowColumns,
     setAllowColumns,
-    isUseQuery
+    isUseQuery,
+    adminsList
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
+  const [configState] = useConfig()
+
+  const isSearchFilterValue = (configState?.configs?.filter_order_options?.value.split('|').map(value => (value)) || []).includes('driver_group_general')
 
   const query = new URLSearchParams(useLocation().search)
   const [isOpenOrderDetail, setIsOpenOrderDetail] = useState(false)
@@ -212,6 +215,7 @@ const OrdersManagerUI = (props) => {
           handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
           handleOpenTour={() => handleOpenTour()}
           filterModalOpen={filterModalOpen}
+          adminsList={adminsList}
           setFilterModalOpen={setFilterModalOpen}
           setTimeStatus={setTimeStatus}
           setSlaSettingTime={setSlaSettingTime}
@@ -221,23 +225,19 @@ const OrdersManagerUI = (props) => {
           <TopContent>
             <DriversContainer>
               <DriversManager
-                filterValues={filterValues}
-                setMapsData={setMapsData}
-                handleUpdateAssignedOrders={handleUpdateAssignedOrders}
                 disableSocketRoomDriver
-                drivers={driversList.drivers}
                 showCompressedInfo
+                filterValues={filterValues}
+                searchFilterValue={searchValue}
+                driverGroupList={driverGroupList}
+                isSearchFilterValue={isSearchFilterValue}
+                drivers={driversList.drivers}
+                setMapsData={setMapsData}
                 handleEmtpyOrderSelected={handleBackRedirect}
+                handleUpdateAssignedOrders={handleUpdateAssignedOrders}
               />
             </DriversContainer>
             <OrdersContainer showCompressedInfo>
-              <OrdersHeaderFilterGroup
-                driverGroupList={driverGroupList}
-                searchValue={searchValue}
-                driversList={driversList}
-                handleChangeFilterValues={handleChangeFilterValues}
-                handleChangeSearch={handleChangeSearch}
-              />
               <OrderStatusFilterBar
                 isUseQuery={isUseQuery}
                 selectedOrderStatus={ordersStatusGroup}

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

@@ -2,7 +2,6 @@ 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'
 
@@ -57,13 +56,6 @@ export const DeliveryDashboard = (props) => {
   return (
     <DeliveryDashboardContainer>
       <OrdersContainer>
-        <OrdersHeaderFilterGroup
-          driverGroupList={driverGroupList}
-          searchValue={searchValue}
-          driversList={driversList}
-          handleChangeFilterValues={handleChangeFilterValues}
-          handleChangeSearch={handleChangeSearch}
-        />
         <FilterContainer>
           <OrderStatusFilterBar
             isUseQuery={isUseQuery}

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

@@ -26,10 +26,12 @@ export const OrderDashboardSLASettingUI = (props) => {
   const {
     settingsState,
     handleInputChange,
-    handleClickUpdate
+    handleClickUpdate,
+    settingOptionOpen,
+    setSettingOptionOpen
   } = props
   const [, t] = useLanguage()
-  const [settingOpen, setSettingOpen] = useState(false)
+  const [settingOpen, setSettingOpen] = useState(settingOptionOpen)
   const [currentTabItem, setCurrentTabItem] = useState(1)
   const [selectedTabStatus, setSelectedTabStatus] = useState(null)
   const theme = useTheme()
@@ -70,12 +72,14 @@ export const OrderDashboardSLASettingUI = (props) => {
 
   const handleCloseSettings = () => {
     setSettingOpen(false)
+    setSettingOptionOpen && setSettingOptionOpen(false)
   }
 
   const onSubmit = (data) => {
     if (data && Object.keys(data).length > 0) {
       handleClickUpdate()
       setSettingOpen(false)
+      setSettingOptionOpen && setSettingOptionOpen(false)
     }
   }
 
@@ -110,12 +114,14 @@ export const OrderDashboardSLASettingUI = (props) => {
 
   return (
     <SettingContainer>
-      <Button
-        color='secundary'
-        onClick={() => setSettingOpen(true)}
-      >
-        {t('SLA_SETTING', 'SLA’s settings')}
-      </Button>
+      {!settingOptionOpen && (
+        <Button
+          color='secundary'
+          onClick={() => setSettingOpen(true)}
+        >
+          {t('SLA_SETTING', 'SLA’s settings')}
+        </Button>
+      )}
       <Modal
         open={settingOpen}
         onClose={() => handleCloseSettings()}

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

@@ -56,11 +56,6 @@ export const OrdersCards = (props) => {
     return imageKeys
   }, {})
 
-  const filterOptions = (configState?.configs?.filter_order_options?.value.split('|').map(value => value) || [])
-  const optionsToCheck = ['external_id', 'driver', 'driver_group_general']
-
-  const matchingFilterOptions = filterOptions.filter(option => optionsToCheck.includes(option)).length
-
   const handleChangePage = (page) => {
     getPageOrders(pagination.pageSize, page)
   }
@@ -185,7 +180,7 @@ export const OrdersCards = (props) => {
 
   return (
     <>
-      <OrdersListContainer matchingFilterOptions={matchingFilterOptions}>
+      <OrdersListContainer>
         {orderList.loading ? (
           [...Array(10).keys()].map(i => (
             <OrderCard key={i}>
@@ -261,15 +256,15 @@ export const OrdersCards = (props) => {
                       <p className={order?.time_status}>{displayDelayedTime(order)}</p>
                     </Timer>
                   )}
-                  { order?.codigoPod && (
-                    <div style={{paddingTop: 50}}>
+                  {order?.codigoPod && (
+                    <div style={{ paddingTop: 50 }}>
                       <p>
                         {
                           `${t('PODS', 'Pod')}: ${order?.codigoPod}` 
                         }
                       </p>
                     </div>
-                   )}
+                  )}
                 </CardHeading>
                 {isMessagesView && order?.unread_count > 0 && (
                   <UnreadMessageCounter>

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

@@ -1,33 +1,13 @@
 import styled, { css } from 'styled-components'
 
-const calculateHeight = (matchingFilterOptions, customMappings) => {
-  const defaultMapping = {
-    3: 'calc(100% - 410px)',
-    2: 'calc(100% - 350px)',
-    1: 'calc(100% - 280px)',
-    default: 'calc(100% - 200px)'
-  }
-
-  const mappings = { ...defaultMapping, ...customMappings }
-
-  return mappings[matchingFilterOptions] || mappings.default
-}
-
 export const OrdersListContainer = styled.div`
-  height: ${({ matchingFilterOptions }) => calculateHeight(matchingFilterOptions)};
+  height: calc(100% - 200px);
   padding: 0 12px 15px 12px;
   box-sizing: border-box;
   overflow-x: hidden;
 
   @media (min-width: 1024px) and (max-width: 1300px) {
-    height: ${({ matchingFilterOptions }) =>
-      calculateHeight(matchingFilterOptions, {
-        3: 'calc(100% - 400px)',
-        2: 'calc(100% - 340px)',
-        1: 'calc(100% - 270px)',
-        default: 'calc(100% - 230px)'
-      }
-    )};
+    height: calc(100% - 230px);
   }
 `
 export const OrderNunberContainer = styled.div`