ordering-ui-admin-external 1.43.24 → 1.43.27

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

@@ -19,6 +19,8 @@ var _rrule = require("rrule");
 var _moment = _interopRequireDefault(require("moment"));
 var _styles2 = require("./styles");
 var _Select = require("../../../styles/Select");
+var _DriverMultiSelector = require("../../Orders/DriverMultiSelector");
+var _TiWarningOutline = _interopRequireDefault(require("@meronex/icons/ti/TiWarningOutline"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -35,7 +37,7 @@ 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 DriversTimeDisplayUI = function DriversTimeDisplayUI(props) {
-  var _configs$general_hour, _configs$general_hour2, _stackEventsState$eve;
+  var _configs$general_hour, _configs$general_hour2, _filterValues$driverI, _stackEventsState$eve;
   var driversList = props.driversList,
     paginationProps = props.paginationProps,
     getDrivers = props.getDrivers,
@@ -75,7 +77,10 @@ var DriversTimeDisplayUI = function DriversTimeDisplayUI(props) {
     handleSelectedUntilDate = props.handleSelectedUntilDate,
     ruleState = props.ruleState,
     setRuleState = props.setRuleState,
-    handleSetInitialStates = props.handleSetInitialStates;
+    handleSetInitialStates = props.handleSetInitialStates,
+    filterValues = props.filterValues,
+    handleChangeDriver = props.handleChangeDriver,
+    handleClearFilters = props.handleClearFilters;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -377,7 +382,17 @@ var DriversTimeDisplayUI = function DriversTimeDisplayUI(props) {
     changeDriverGroupState: changeDriverGroupState
   }), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronRight, null), /*#__PURE__*/_react.default.createElement("span", {
     className: "calendar"
-  }, t('CALENDAR', 'Calendar')), selectedGroup && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronRight, null), /*#__PURE__*/_react.default.createElement("span", null, selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.name)))), /*#__PURE__*/_react.default.createElement(_styles2.DriversGroupCalendarWrapper, null, /*#__PURE__*/_react.default.createElement(_AnalyticsCalendar.AnalyticsCalendar, _extends({}, props, {
+  }, t('CALENDAR', 'Calendar')), selectedGroup && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ChevronRight, null), /*#__PURE__*/_react.default.createElement("span", null, selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.name)))), (filterValues === null || filterValues === void 0 || (_filterValues$driverI = filterValues.driverIds) === null || _filterValues$driverI === void 0 ? void 0 : _filterValues$driverI.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles2.WarningMessage, null, /*#__PURE__*/_react.default.createElement(_TiWarningOutline.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')), /*#__PURE__*/_react.default.createElement(_styles.LinkButton, {
+    onClick: function onClick() {
+      return handleClearFilters();
+    }
+  }, t('CLEAR_FILTERS', 'Clear filters'))), /*#__PURE__*/_react.default.createElement(_styles2.DriversGroupCalendarWrapper, null, selectedGroup && /*#__PURE__*/_react.default.createElement(_styles2.WrapperRow, {
+    wrapperWidth: 400
+  }, /*#__PURE__*/_react.default.createElement(_styles2.DriverMultiSelectorContainer, null, /*#__PURE__*/_react.default.createElement(_DriverMultiSelector.DriverMultiSelector, {
+    disableSocketRoomDriver: true,
+    filterValues: filterValues,
+    handleChangeDriver: handleChangeDriver
+  }))), /*#__PURE__*/_react.default.createElement(_AnalyticsCalendar.AnalyticsCalendar, _extends({}, props, {
     handleChangeDate: handleChangeDate
   })))))), /*#__PURE__*/_react.default.createElement(_UserList.DeliveryUsersListing, {
     date: date,

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

@@ -4,10 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperPagination = exports.WrapperImage = exports.WeekHeader = exports.WeekDayCheckWrapper = exports.ViewButtonsWrapper = exports.VerifiedItemsContainer = exports.VerifiedItem = exports.UsersTable = exports.UsersListingContainer = exports.UsersConatiner = exports.UsersBottomContainer = exports.UserTypeWrapper = exports.UserTableWrapper = exports.UserRow = exports.UserName = exports.UserMainInfo = exports.UserIdWrapper = exports.UserEnableWrapper = exports.TimeOptions = exports.ThName = exports.ThId = exports.StackedBlock = exports.SplitLine = exports.SpinnerLoaderWrapper = exports.ShowBreakBlocksWrapper = exports.SelectsWrapper = exports.SelectWrapper = exports.SelectTitleWrappre = exports.SelectTitle = exports.RrulesListWrapper = exports.RrulesItem = exports.OrderStatusTypeSelectWrapper = exports.Option = exports.InfoBlock = exports.Image = exports.HoursHeader = exports.HeaderWrapper = exports.HeaderTitleContainer = exports.Header = exports.FormWrapper = exports.FormControl = exports.EventProfessionalPhoto = exports.EventContainer = exports.EmptyBlock = exports.DriversGroupFilterWrapper = exports.DriversGroupCalendarWrapper = exports.DriverGroupSelectorWrapper = exports.DriverGroupName = exports.DeleteWrapper = exports.DeleteButtons = exports.DeleteBlock = exports.DateBlockWrapper = exports.Container = exports.ChecksWrapper = exports.CheckBoxWrapper = exports.CalendarLabelContainer = exports.CalendarHeaderContainer = exports.ButtonsWrapper = exports.ButtonWrapper = exports.BlocksWrapper = exports.Block = exports.AnalyticsTimeZoneWrapper = exports.ActionsContainer = void 0;
+exports.WrapperRow = exports.WrapperPagination = exports.WrapperImage = exports.WeekHeader = exports.WeekDayCheckWrapper = exports.WarningMessage = exports.ViewButtonsWrapper = exports.VerifiedItemsContainer = exports.VerifiedItem = exports.UsersTable = exports.UsersListingContainer = exports.UsersConatiner = exports.UsersBottomContainer = exports.UserTypeWrapper = exports.UserTableWrapper = exports.UserRow = exports.UserName = exports.UserMainInfo = exports.UserIdWrapper = exports.UserEnableWrapper = exports.TimeOptions = exports.ThName = exports.ThId = exports.StackedBlock = exports.SplitLine = exports.SpinnerLoaderWrapper = exports.ShowBreakBlocksWrapper = exports.SelectsWrapper = exports.SelectWrapper = exports.SelectTitleWrappre = exports.SelectTitle = exports.RrulesListWrapper = exports.RrulesItem = exports.OrderStatusTypeSelectWrapper = exports.Option = exports.InfoBlock = exports.Image = exports.HoursHeader = exports.HeaderWrapper = exports.HeaderTitleContainer = exports.Header = exports.FormWrapper = exports.FormControl = exports.EventProfessionalPhoto = exports.EventContainer = exports.EmptyBlock = exports.DriversGroupFilterWrapper = exports.DriversGroupCalendarWrapper = exports.DriverMultiSelectorContainer = exports.DriverGroupSelectorWrapper = exports.DriverGroupName = exports.DeleteWrapper = exports.DeleteButtons = exports.DeleteBlock = exports.DateBlockWrapper = exports.Container = exports.ChecksWrapper = exports.CheckBoxWrapper = exports.CalendarLabelContainer = exports.CalendarHeaderContainer = exports.ButtonsWrapper = exports.ButtonWrapper = exports.BlocksWrapper = exports.Block = exports.AnalyticsTimeZoneWrapper = exports.ActionsContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89, _templateObject90, _templateObject91, _templateObject92;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89, _templateObject90, _templateObject91, _templateObject92, _templateObject93, _templateObject94, _templateObject95, _templateObject96, _templateObject97, _templateObject98, _templateObject99, _templateObject100, _templateObject101, _templateObject102;
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,7 +36,7 @@ var EventContainer = exports.EventContainer = _styledComponents.default.div(_tem
 }, function (props) {
   return props.theme.colors.lightGray;
 });
-var HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var HeaderWrapper = exports.HeaderWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  position: relative;\n"])));
 var EventProfessionalPhoto = exports.EventProfessionalPhoto = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 8px;\n    object-fit: cover;\n  }\n  svg {\n    width: 85%;\n    height: 85%;\n  }\n"])));
 var Option = exports.Option = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _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;
@@ -55,7 +55,7 @@ var OrderStatusTypeSelectWrapper = exports.OrderStatusTypeSelectWrapper = _style
 var DriversGroupFilterWrapper = exports.DriversGroupFilterWrapper = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  > button {\n    background: #F8F9FA;\n    border-radius: 7.6px;\n    padding: 7px 12px;\n    font-size: 14px;\n    color: #748194;\n    border: none;\n  }\n\n  @media (min-width: 600px) {\n    margin-left: 25px;\n    ", "\n  }\n"])), function (props) {
   return props.theme.rtl && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      margin-right: 25px;\n      margin-left: 0;\n    "])));
 });
-var DriversGroupCalendarWrapper = exports.DriversGroupCalendarWrapper = (0, _styledComponents.default)(DriversGroupFilterWrapper)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: relative;\n\n  > button {\n    svg {\n      font-size: 16px;\n      margin-right: 12px;\n      ", "\n    }\n  }\n\n  @media only screen and (min-width: 374px) and (max-width: 450px) {\n    .ordering-calendar {\n      right: calc((100vw - 374px) / 2);\n    }\n  }\n"])), function (props) {
+var DriversGroupCalendarWrapper = exports.DriversGroupCalendarWrapper = (0, _styledComponents.default)(DriversGroupFilterWrapper)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  > button {\n    svg {\n      font-size: 16px;\n      margin-right: 12px;\n      ", "\n    }\n  }\n\n  @media only screen and (min-width: 374px) and (max-width: 450px) {\n    .ordering-calendar {\n      right: calc((100vw - 374px) / 2);\n    }\n  }\n"])), function (props) {
   return props.theme.rtl && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        margin-left: 12px;\n        margin-right: 0;\n      "])));
 });
 var AnalyticsTimeZoneWrapper = exports.AnalyticsTimeZoneWrapper = (0, _styledComponents.default)(DriversGroupFilterWrapper)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral([""])));
@@ -195,4 +195,34 @@ var ShowBreakBlocksWrapper = exports.ShowBreakBlocksWrapper = _styledComponents.
 var ChecksWrapper = exports.ChecksWrapper = _styledComponents.default.div(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
 var SelectsWrapper = exports.SelectsWrapper = _styledComponents.default.div(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(2, 2fr);\n  gap: 20px;\n"])));
 var BlocksWrapper = exports.BlocksWrapper = _styledComponents.default.div(_templateObject91 || (_templateObject91 = _taggedTemplateLiteral(["\n  display: flex;\n  justifyContent: space-between;\n  gap: 60px;\n"])));
-var DateBlockWrapper = exports.DateBlockWrapper = _styledComponents.default.div(_templateObject92 || (_templateObject92 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var DateBlockWrapper = exports.DateBlockWrapper = _styledComponents.default.div(_templateObject92 || (_templateObject92 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var DriverMultiSelectorContainer = exports.DriverMultiSelectorContainer = _styledComponents.default.div(_templateObject93 || (_templateObject93 = _taggedTemplateLiteral(["\n  > div {\n    max-width: 400px;\n    min-width: 150px;\n  }\n"])));
+var WrapperRow = exports.WrapperRow = _styledComponents.default.div(_templateObject94 || (_templateObject94 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding-bottom: 0px;\n\n  & > div {\n    height: 55px;\n    max-width: 400px;\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 (_ref4) {
+  var isSelectedOrders = _ref4.isSelectedOrders;
+  return isSelectedOrders && (0, _styledComponents.css)(_templateObject95 || (_templateObject95 = _taggedTemplateLiteral(["\n      flex-direction: column !important;\n      padding: ", ";\n      & > div {\n        margin-top: 15px;\n      }\n  "])), !isSelectedOrders && '10px 15px 0 0px');
+});
+var WarningMessage = exports.WarningMessage = _styledComponents.default.div(_templateObject96 || (_templateObject96 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 100;\n  bottom: 20px;\n  background: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n  border-radius: 7.6px;\n  padding: 0px 15px;\n  box-sizing: border-box;\n  margin: 10px 0px 0px 0px !important;\n\n  right: 0px;\n  ", "\n\n  svg {\n    font-size: 20px;\n    color: ", ";\n  }\n\n  span {\n    font-size: 12px;\n    line-height: 18px;\n    color: ", ";\n    margin: 0 10px;\n    flex: 1;\n  }\n\n  a {\n    font-size: 12px;\n    white-space: nowrap;\n  }\n\n  @media (min-width: 768px) {\n    padding: 0px 20px;\n    font-size: 14px;\n    line-height: 24px;\n    ", "\n    ", "\n    ", "\n\n    span {\n      white-space: nowrap;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.warning100;
+}, function (props) {
+  return props.theme.colors.warning;
+}, function (props) {
+  var _props$theme11;
+  return ((_props$theme11 = props.theme) === null || _props$theme11 === void 0 ? void 0 : _props$theme11.rtl) && (0, _styledComponents.css)(_templateObject97 || (_templateObject97 = _taggedTemplateLiteral(["\n    left: 0px;\n    right: initial;\n  "])));
+}, function (props) {
+  return props.theme.colors.warning;
+}, function (props) {
+  return props.theme.colors.headingColor;
+}, function (_ref5) {
+  var isLateralBar = _ref5.isLateralBar;
+  return isLateralBar ? (0, _styledComponents.css)(_templateObject98 || (_templateObject98 = _taggedTemplateLiteral(["\n      right: 0px;\n    "]))) : (0, _styledComponents.css)(_templateObject99 || (_templateObject99 = _taggedTemplateLiteral(["\n      right: 0px;\n    "])));
+}, function (_ref6) {
+  var isLateralBar = _ref6.isLateralBar;
+  return isLateralBar ? (0, _styledComponents.css)(_templateObject100 || (_templateObject100 = _taggedTemplateLiteral(["\n      bottom: -25px;\n    "]))) : (0, _styledComponents.css)(_templateObject101 || (_templateObject101 = _taggedTemplateLiteral(["\n      bottom: -35px;\n    "])));
+}, function (props) {
+  var _props$theme12;
+  return ((_props$theme12 = props.theme) === null || _props$theme12 === void 0 ? void 0 : _props$theme12.rtl) && (0, _styledComponents.css)(_templateObject102 || (_templateObject102 = _taggedTemplateLiteral(["\n      left: 0px;\n      right: initial;\n    "])));
+});

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

@@ -19,7 +19,6 @@ 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 AdminsSelector = exports.AdminsSelector = function AdminsSelector(props) {
-  var _adminsList$admins3;
   var adminsList = props.adminsList,
     defaultValue = props.defaultValue,
     small = props.small,
@@ -82,7 +81,7 @@ var AdminsSelector = exports.AdminsSelector = function AdminsSelector(props) {
       setAdminsMultiOptionList(_adminsOptionListTemp);
     }
   }, [adminsList, defaultValue, searchValue]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(adminsList !== null && adminsList !== void 0 && adminsList.loading) && (adminsList === null || adminsList === void 0 || (_adminsList$admins3 = adminsList.admins) === null || _adminsList$admins3 === void 0 ? void 0 : _adminsList$admins3.length) > 0 ? /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(adminsList !== null && adminsList !== void 0 && adminsList.loading) ? /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
     defaultValue: filterValues.administratorIds,
     placeholder: Placeholder,
     options: adminsMultiOptionList,

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

@@ -46,7 +46,8 @@ var DeliveriesManagerUI = function DeliveriesManagerUI(props) {
     numberOfOrdersBySubstatus = props.numberOfOrdersBySubstatus,
     timeStatus = props.timeStatus,
     setTimeStatus = props.setTimeStatus,
-    isUseQuery = props.isUseQuery;
+    isUseQuery = props.isUseQuery,
+    adminsList = props.adminsList;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -119,7 +120,8 @@ var DeliveriesManagerUI = function DeliveriesManagerUI(props) {
     filterModalOpen: filterModalOpen,
     setFilterModalOpen: setFilterModalOpen,
     setTimeStatus: setTimeStatus,
-    setSlaSettingTime: setSlaSettingTime
+    setSlaSettingTime: setSlaSettingTime,
+    adminsList: adminsList
   }), /*#__PURE__*/_react.default.createElement(_styles.OrdersContent, null, /*#__PURE__*/_react.default.createElement(_styles.WrapItemView, null, /*#__PURE__*/_react.default.createElement(_DeliveryDashboard.DeliveryDashboard, {
     searchValue: searchValue,
     filterValues: filterValues,

package/_modules/components/Shared/InputPhoneNumber/index.js

@@ -39,7 +39,11 @@ var InputPhoneNumber = exports.InputPhoneNumber = function InputPhoneNumber(prop
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configs = _useConfig2[0].configs;
   var isValidPhoneNumber = function isValidPhoneNumber(number) {
+    var _configs$validation_p, _configs$validation_p2;
     if (!number) return;
+    if (!parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10)) {
+      return true;
+    }
     var numberParser = (0, _libphonenumberJs.default)(number);
     return numberParser === null || numberParser === void 0 ? void 0 : numberParser.isValid();
   };

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

@@ -12,6 +12,7 @@ var _styles = require("../../../styles");
 var _Shared = require("../../Shared");
 var _UserTypeSelector = require("../UserTypeSelector");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
+var _reactPhoneNumberInput = require("react-phone-number-input");
 var _utils = require("../../../utils");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _BiImage = _interopRequireDefault(require("@meronex/icons/bi/BiImage"));
@@ -55,6 +56,9 @@ var UserAddFormUI = function UserAddFormUI(props) {
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
+  var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     isValidPhoneNumber = _useState2[0],
@@ -163,7 +167,12 @@ var UserAddFormUI = function UserAddFormUI(props) {
       }
     };
     if (isValid) {
+      var _configs$validation_p, _configs$validation_p2;
       phoneNumberParser = (0, _libphonenumberJs.default)(number);
+      if (!parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10)) {
+        var _phoneNumberParser;
+        if ((_phoneNumberParser = phoneNumberParser) !== null && _phoneNumberParser !== void 0 && _phoneNumberParser.nationalNumber) phoneNumberParser.nationalNumber = (0, _reactPhoneNumberInput.formatPhoneNumber)(number);
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {

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

@@ -10,6 +10,7 @@ var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skelet
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _reactHookForm = require("react-hook-form");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
+var _reactPhoneNumberInput = require("react-phone-number-input");
 var _Shared = require("../../Shared");
 var _utils = require("../../../utils");
 var _styles = require("../../../styles");
@@ -52,6 +53,9 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
+  var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     isValidPhoneNumber = _useState2[0],
@@ -167,17 +171,23 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       }
     };
     if (isValid) {
+      var _configs$validation_p, _configs$validation_p2;
       phoneNumberParser = (0, _libphonenumberJs.default)(number);
+      if (!parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10)) {
+        var _phoneNumberParser;
+        if ((_phoneNumberParser = phoneNumberParser) !== null && _phoneNumberParser !== void 0 && _phoneNumberParser.nationalNumber) phoneNumberParser.nationalNumber = (0, _reactPhoneNumberInput.formatPhoneNumber)(number);
+      }
     }
     if (phoneNumberParser) {
+      var _phoneNumberParser2, _phoneNumberParser3;
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: (_phoneNumberParser2 = phoneNumberParser) === null || _phoneNumberParser2 === void 0 ? void 0 : _phoneNumberParser2.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: (_phoneNumberParser3 = phoneNumberParser) === null || _phoneNumberParser3 === void 0 ? void 0 : _phoneNumberParser3.nationalNumber
         }
       };
     }

package/_modules/styles/MultiSelect/index.js

@@ -116,7 +116,7 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
   }, /*#__PURE__*/_react.default.createElement(_Selects.Header, null, selectedOptions.map(function (selectedOption) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: selectedOption.value
-    }, /*#__PURE__*/_react.default.createElement(_Selects.MultiSelectOption, null, selectedOption.showOnSelected || selectedOption.content, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    }, /*#__PURE__*/_react.default.createElement(_Selects.MultiSelectOption, null, selectedOption.showOnSelected || selectedOption.content, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== 'default' && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
       circle: true,
       outline: true,
       color: "primary",

package/package.json

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

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage, useConfig, CalendarDriversList as CalendarDriversListController } from 'ordering-components-admin-external'
 import { List as MenuIcon, ChevronRight } from 'react-bootstrap-icons'
-import { Button, IconButton } from '../../../styles'
+import { Button, IconButton, LinkButton } from '../../../styles'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { Alert, Modal, SpinnerLoader } from '../../Shared'
 import { DeliveryUsersListing } from './UserList'
@@ -25,9 +25,14 @@ import {
   DeleteButtons,
   DeleteWrapper,
   OrderStatusTypeSelectWrapper,
-  StackedBlock
+  StackedBlock,
+  DriverMultiSelectorContainer,
+  WrapperRow,
+  WarningMessage
 } from './styles'
 import { Select } from '../../../styles/Select'
+import { DriverMultiSelector } from '../../Orders/DriverMultiSelector'
+import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
 
 const DriversTimeDisplayUI = (props) => {
   const {
@@ -70,7 +75,10 @@ const DriversTimeDisplayUI = (props) => {
     handleSelectedUntilDate,
     ruleState,
     setRuleState,
-    handleSetInitialStates
+    handleSetInitialStates,
+    filterValues,
+    handleChangeDriver,
+    handleClearFilters
   } = props
 
   const [, t] = useLanguage()
@@ -400,7 +408,26 @@ const DriversTimeDisplayUI = (props) => {
                   )}
                 </DriverGroupSelectorWrapper>
               </div>
+
+              {(filterValues?.driverIds?.length > 0) && (
+                <WarningMessage>
+                  <TiWarningOutline />
+                  <span>{t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')}</span>
+                  <LinkButton onClick={() => handleClearFilters()}>{t('CLEAR_FILTERS', 'Clear filters')}</LinkButton>
+                </WarningMessage>
+              )}
               <DriversGroupCalendarWrapper>
+                {selectedGroup && (
+                  <WrapperRow wrapperWidth={400}>
+                    <DriverMultiSelectorContainer>
+                      <DriverMultiSelector
+                        disableSocketRoomDriver
+                        filterValues={filterValues}
+                        handleChangeDriver={handleChangeDriver}
+                      />
+                    </DriverMultiSelectorContainer>
+                  </WrapperRow>
+                )}
                 <AnalyticsCalendar {...props} handleChangeDate={handleChangeDate} />
               </DriversGroupCalendarWrapper>
             </HeaderWrapper>

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

@@ -141,6 +141,7 @@ export const HeaderWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  position: relative;
 `
 
 export const EventProfessionalPhoto = styled.div`
@@ -224,7 +225,7 @@ export const DriversGroupFilterWrapper = styled.div`
 
 export const DriversGroupCalendarWrapper = styled(DriversGroupFilterWrapper)`
   position: relative;
-
+  display: flex;
   > button {
     svg {
       font-size: 16px;
@@ -851,3 +852,142 @@ export const DateBlockWrapper = styled.div`
   display: flex;
   flex-direction: column;
 `
+
+export const DriverMultiSelectorContainer = styled.div`
+  > div {
+    max-width: 400px;
+    min-width: 150px;
+  }
+`
+
+export const WrapperRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 0px;
+
+  & > div {
+    height: 55px;
+    max-width: 400px;
+    margin-right: 10px;
+    background-color: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+    border-radius: 8px;
+    > div:first-child {
+      height: 100%;
+    }
+  }
+
+  .order-status-multi-select {
+    p {
+      padding: 0;
+      color: ${props => props.theme.colors.headingColor} !important;
+    }
+  }
+
+  .date-filter-container {
+    z-index: 100;
+  }
+
+  input {
+    width: 100%;
+    height: 47px;
+    padding: 10px 25px;
+    box-sizing: border-box;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    -moz-appearance: textfield;
+  }
+
+  .close {
+    right: 8px;
+  }
+
+  .external_id {
+    @media (max-width: 1200px) {
+     flex: auto;
+    }
+  }
+
+  @media (max-width: 798px) {
+    flex-direction: column !important;
+    padding: 10px 15px 0 0px;
+    & > div {
+      margin-top: 15px;
+    }
+  }
+
+  ${({ isSelectedOrders }) => isSelectedOrders && css`
+      flex-direction: column !important;
+      padding: ${!isSelectedOrders && '10px 15px 0 0px'};
+      & > div {
+        margin-top: 15px;
+      }
+  `}
+`
+
+export const WarningMessage = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 100;
+  bottom: 20px;
+  background: ${props => props.theme.colors.warning100};
+  border: 1px solid ${props => props.theme.colors.warning};
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 0px 15px;
+  box-sizing: border-box;
+  margin: 10px 0px 0px 0px !important;
+
+  right: 0px;
+  ${props => props.theme?.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  svg {
+    font-size: 20px;
+    color: ${props => props.theme.colors.warning};
+  }
+
+  span {
+    font-size: 12px;
+    line-height: 18px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0 10px;
+    flex: 1;
+  }
+
+  a {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    padding: 0px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    ${({ isLateralBar }) => isLateralBar ? css`
+      right: 0px;
+    ` : css`
+      right: 0px;
+    `}
+    ${({ isLateralBar }) => isLateralBar ? css`
+      bottom: -25px;
+    ` : css`
+      bottom: -35px;
+    `}
+    ${props => props.theme?.rtl && css`
+      left: 0px;
+      right: initial;
+    `}
+
+    span {
+      white-space: nowrap;
+    }
+  }
+`

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

@@ -63,7 +63,7 @@ export const AdminsSelector = (props) => {
 
   return (
     <>
-      {!adminsList?.loading && adminsList?.admins?.length > 0 ? (
+      {!adminsList?.loading ? (
         <MultiSelect
           defaultValue={filterValues.administratorIds}
           placeholder={Placeholder}
@@ -94,4 +94,3 @@ export const AdminsSelector = (props) => {
     </>
   )
 }
-

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

@@ -32,7 +32,8 @@ const DeliveriesManagerUI = (props) => {
     numberOfOrdersBySubstatus,
     timeStatus,
     setTimeStatus,
-    isUseQuery
+    isUseQuery,
+    adminsList
   } = props
 
   const [, t] = useLanguage()
@@ -93,6 +94,7 @@ const DeliveriesManagerUI = (props) => {
           setFilterModalOpen={setFilterModalOpen}
           setTimeStatus={setTimeStatus}
           setSlaSettingTime={setSlaSettingTime}
+          adminsList={adminsList}
         />
         <OrdersContent>
           <WrapItemView>

package/src/components/Shared/InputPhoneNumber/index.js

@@ -21,6 +21,9 @@ export const InputPhoneNumber = (props) => {
 
   const isValidPhoneNumber = (number) => {
     if (!number) return
+    if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+      return true
+    }
     const numberParser = parsePhoneNumber(number)
     return numberParser?.isValid()
   }

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import {
   useLanguage,
+  useConfig,
   DragAndDrop,
   ExamineClick,
   UserFormDetails as UserFormDetailsController
@@ -10,6 +11,7 @@ import { Input, Button } from '../../../styles'
 import { Alert, InputPhoneNumber, Modal, ImageCrop } from '../../Shared'
 import { UserTypeSelector } from '../UserTypeSelector'
 import parsePhoneNumber from 'libphonenumber-js'
+import { formatPhoneNumber } from 'react-phone-number-input'
 import { sortInputFields, bytesConverter } from '../../../utils'
 import Skeleton from 'react-loading-skeleton'
 import BiImage from '@meronex/icons/bi/BiImage'
@@ -46,6 +48,7 @@ const UserAddFormUI = (props) => {
   } = props
   const formMethods = useForm()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
 
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
@@ -133,6 +136,9 @@ const UserAddFormUI = (props) => {
     }
     if (isValid) {
       phoneNumberParser = parsePhoneNumber(number)
+      if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+        if (phoneNumberParser?.nationalNumber) phoneNumberParser.nationalNumber = formatPhoneNumber(number)
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useLanguage, useCustomer } from 'ordering-components-admin-external'
+import { useLanguage, useCustomer, useConfig } from 'ordering-components-admin-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
+import { formatPhoneNumber } from 'react-phone-number-input'
 import { Alert, InputPhoneNumber, RangeCalendar } from '../../Shared'
 import { sortInputFields } from '../../../utils'
 import { Switch, Input, Button } from '../../../styles'
@@ -43,6 +44,7 @@ export const UserFormDetailsUI = (props) => {
 
   const formMethods = useForm()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
 
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
@@ -143,16 +145,20 @@ export const UserFormDetailsUI = (props) => {
     }
     if (isValid) {
       phoneNumberParser = parsePhoneNumber(number)
+
+      if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+        if (phoneNumberParser?.nationalNumber) phoneNumberParser.nationalNumber = formatPhoneNumber(number)
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: phoneNumberParser?.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: phoneNumberParser?.nationalNumber
         }
       }
     }