ordering-ui-admin-external 1.45.28 → 1.45.29

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

@@ -32,8 +32,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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(r) { if (Array.isArray(r)) return r; }
 var DriverGroupSettingUI = function DriverGroupSettingUI(props) {
-  var isDriverManager = props.isDriverManager,
-    includedGroupIds = props.includedGroupIds,
+  var includedGroupIds = props.includedGroupIds,
     driversGroupsState = props.driversGroupsState,
     actionState = props.actionState,
     handleCheckboxClick = props.handleCheckboxClick,
@@ -104,7 +103,7 @@ var DriverGroupSettingUI = function DriverGroupSettingUI(props) {
     onSearch: function onSearch(val) {
       return setSearchValue(val);
     }
-  }), isDriverManager && /*#__PURE__*/_react.default.createElement(_styles2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  }), /*#__PURE__*/_react.default.createElement(_styles2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     type: "button",
     color: "secundaryDark",
     onClick: function onClick() {
@@ -116,7 +115,7 @@ var DriverGroupSettingUI = function DriverGroupSettingUI(props) {
     onClick: function onClick() {
       return handleBatchSelector(false);
     }
-  }, t('SELECT_NONE', 'Select none'))), /*#__PURE__*/_react.default.createElement(_styles2.DriverGroupListContainer, null, driversGroupsState.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
+  }, t('SELECT_NONE', 'Select none'))), /*#__PURE__*/_react.default.createElement(_styles2.DriverGroupListContainer, null, driversGroupsState.loading ? _toConsumableArray(Array(8).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles2.DriverGroupItem, {
       key: i
     }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -130,7 +129,8 @@ var DriverGroupSettingUI = function DriverGroupSettingUI(props) {
       key: group.id,
       onClick: function onClick() {
         return handleCheckboxClick(group.id);
-      }
+      },
+      disabled: actionState.loading || driversGroupsState.loading
     }, /*#__PURE__*/_react.default.createElement(_styles2.CheckboxWrapper, {
       active: includedGroupIds.includes(group.id)
     }, includedGroupIds.includes(group.id) ? /*#__PURE__*/_react.default.createElement(_MdCheckBox.default, null) : /*#__PURE__*/_react.default.createElement(_MdCheckBoxOutlineBlank.default, null)), /*#__PURE__*/_react.default.createElement("span", null, group === null || group === void 0 ? void 0 : group.name));

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DriverGroupListContainer = exports.DriverGroupItem = exports.Container = exports.CheckboxWrapper = exports.ButtonGroup = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 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 && {}.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(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
@@ -16,17 +16,20 @@ var ButtonGroup = exports.ButtonGroup = _styledComponents.default.div(_templateO
   return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-left: 7px;\n    "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      margin-right: 7px;\n    "])));
 });
 var DriverGroupListContainer = exports.DriverGroupListContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 15px 0;\n"])));
-var DriverGroupItem = exports.DriverGroupItem = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  padding: 12px 0;\n  cursor: pointer;\n\n  > span {\n    font-size: 14px;\n    ", "\n  }\n"])), function (props) {
+var DriverGroupItem = exports.DriverGroupItem = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  padding: 12px 0;\n  cursor: pointer;\n\n  ", "\n\n  > span {\n    font-size: 14px;\n    ", "\n  }\n"])), function (props) {
   return props.theme.colors.borderColor;
+}, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    opacity: 0.6;\n    pointer-events: none;\n  "])));
 }, function (props) {
   var _props$theme2;
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-left: 15px;\n    "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-left: 15px;\n    "])));
 });
-var CheckboxWrapper = exports.CheckboxWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  svg {\n    font-size: 20px;\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
+var CheckboxWrapper = exports.CheckboxWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  svg {\n    font-size: 20px;\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.lightGray;
-}, function (_ref) {
-  var active = _ref.active;
-  return active && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    svg {\n      color: ", ";\n    }\n  "])), function (props) {
+}, function (_ref2) {
+  var active = _ref2.active;
+  return active && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    svg {\n      color: ", ";\n    }\n  "])), function (props) {
     return props.theme.colors.primary;
   });
 });

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

@@ -17,6 +17,10 @@ var _FaUserAlt = _interopRequireDefault(require("@meronex/icons/fa/FaUserAlt"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -36,6 +40,7 @@ var DriversGroupGeneralForm = exports.DriversGroupGeneralForm = function Drivers
     handleNextClick = props.handleNextClick,
     selectedDriverManager = props.selectedDriverManager,
     handleSelectDriverManager = props.handleSelectDriverManager,
+    handleSelectAllManagers = props.handleSelectAllManagers,
     handleChangeMaxDistance = props.handleChangeMaxDistance,
     useAdvanced = props.useAdvanced,
     handleLogistic = props.handleLogistic;
@@ -56,6 +61,14 @@ var DriversGroupGeneralForm = exports.DriversGroupGeneralForm = function Drivers
   var _useSession = (0, _orderingComponentsAdminExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     user = _useSession2[0].user;
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchManagerValue = _useState4[0],
+    setSearchManagerValue = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    filteredManagers = _useState6[0],
+    setFilteredManagers = _useState6[1];
   var typeOptions = [{
     value: 0,
     content: t('IN_HOUSE_DRIVERS', 'In house drivers')
@@ -132,6 +145,18 @@ var DriversGroupGeneralForm = exports.DriversGroupGeneralForm = function Drivers
       });
     }
   }, [errors]);
+  (0, _react.useEffect)(function () {
+    var _filteredManagers = [];
+    if (searchManagerValue) {
+      _filteredManagers = driversManagers.filter(function (manager) {
+        var _manager$name, _manager$email;
+        return (manager === null || manager === void 0 || (_manager$name = manager.name) === null || _manager$name === void 0 ? void 0 : _manager$name.toLowerCase().includes(searchManagerValue === null || searchManagerValue === void 0 ? void 0 : searchManagerValue.toLowerCase())) || (manager === null || manager === void 0 || (_manager$email = manager.email) === null || _manager$email === void 0 ? void 0 : _manager$email.toLowerCase().includes(searchManagerValue === null || searchManagerValue === void 0 ? void 0 : searchManagerValue.toLowerCase()));
+      });
+    } else {
+      _filteredManagers = _toConsumableArray(driversManagers);
+    }
+    setFilteredManagers(_filteredManagers);
+  }, [searchManagerValue, driversManagers]);
   return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
     "data-tour": "tour_fill_group",
     onSubmit: handleSubmit(onSubmit),
@@ -157,7 +182,27 @@ var DriversGroupGeneralForm = exports.DriversGroupGeneralForm = function Drivers
     },
     placeholder: t('WITHOUT_RESTRICTIONS', 'Without restrictions'),
     autoComplete: "off"
-  })), (user === null || user === void 0 ? void 0 : user.level) !== 5 && /*#__PURE__*/_react.default.createElement(_styles2.InputWrapper, null, /*#__PURE__*/_react.default.createElement("label", null, t('DRIVER_MANAGER', 'Driver manager')), /*#__PURE__*/_react.default.createElement(_styles2.DriverManagerContainer, null, driversManagers.map(function (driverManager) {
+  })), (user === null || user === void 0 ? void 0 : user.level) !== 5 && /*#__PURE__*/_react.default.createElement(_styles2.InputWrapper, null, /*#__PURE__*/_react.default.createElement("label", null, t('DRIVER_MANAGER', 'Driver manager')), /*#__PURE__*/_react.default.createElement(_styles2.SearchBarWrapper, null, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
+    placeholder: t('SEARCH', 'Search'),
+    isCustomLayout: true,
+    lazyLoad: true,
+    search: searchManagerValue,
+    onSearch: function onSearch(val) {
+      return setSearchManagerValue(val);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_styles2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    type: "button",
+    color: "secundaryDark",
+    onClick: function onClick() {
+      return handleSelectAllManagers(true);
+    }
+  }, t('SELECT_ALL', 'Select all')), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    type: "button",
+    color: "secundaryDark",
+    onClick: function onClick() {
+      return handleSelectAllManagers(false);
+    }
+  }, t('SELECT_NONE', 'Select none'))), /*#__PURE__*/_react.default.createElement(_styles2.DriverManagerContainer, null, filteredManagers.map(function (driverManager) {
     return /*#__PURE__*/_react.default.createElement(_styles2.DriverManagerWrapper, {
       key: driverManager.id
     }, /*#__PURE__*/_react.default.createElement(_styles.Checkbox, {

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

@@ -4,10 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperImage = exports.ManagerInfoContainer = exports.InputWrapper = exports.Image = exports.DriverManagerWrapper = exports.DriverManagerContainer = exports.Container = exports.CheckboxContainer = void 0;
+exports.WrapperImage = exports.SearchBarWrapper = exports.ManagerInfoContainer = exports.InputWrapper = exports.Image = exports.DriverManagerWrapper = exports.DriverManagerContainer = exports.Container = exports.CheckboxContainer = exports.ButtonGroup = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 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 && {}.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(e) { return e && e.__esModule ? e : { default: e }; }
@@ -45,4 +45,6 @@ var Image = exports.Image = function Image(props) {
 var CheckboxContainer = exports.CheckboxContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 0 0 29px 0;\n  p {\n    font-size: 14px;\n    margin: 0px;\n    ", "\n  }\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      padding-right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n    "])));
-});
+});
+var SearchBarWrapper = exports.SearchBarWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-bottom: 15px;\n  width: 100%;\n"])));
+var ButtonGroup = exports.ButtonGroup = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 10px;\n  margin-bottom: 15px;\n"])));

package/package.json

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

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

@@ -16,7 +16,6 @@ import {
 
 const DriverGroupSettingUI = (props) => {
   const {
-    isDriverManager,
     includedGroupIds,
     driversGroupsState,
     actionState,
@@ -69,51 +68,54 @@ const DriverGroupSettingUI = (props) => {
         search={searchValue}
         onSearch={val => setSearchValue(val)}
       />
-      {isDriverManager && (
-        <ButtonGroup>
-          <Button
-            type='button'
-            color='secundaryDark'
-            onClick={() => (handleBatchSelector(true))}
-          >
-            {t('SELECT_ALL', 'Select all')}
-          </Button>
-          <Button
-            type='button'
-            color='secundaryDark'
-            onClick={() => (handleBatchSelector(false))}
-          >
-            {t('SELECT_NONE', 'Select none')}
-          </Button>
-        </ButtonGroup>
-      )}
+      <ButtonGroup>
+        <Button
+          type='button'
+          color='secundaryDark'
+          onClick={() => (handleBatchSelector(true))}
+        >
+          {t('SELECT_ALL', 'Select all')}
+        </Button>
+        <Button
+          type='button'
+          color='secundaryDark'
+          onClick={() => (handleBatchSelector(false))}
+        >
+          {t('SELECT_NONE', 'Select none')}
+        </Button>
+      </ButtonGroup>
       <DriverGroupListContainer>
-        {driversGroupsState.loading ? (
-          [...Array(10).keys()].map(i => (
-            <DriverGroupItem key={i}>
-              <Skeleton width={20} height={20} />
-              <Skeleton width={100} />
-            </DriverGroupItem>
-          ))
-        ) : (
-          filteredGroups.map(group => (
-            <DriverGroupItem
-              key={group.id}
-              onClick={() => handleCheckboxClick(group.id)}
-            >
-              <CheckboxWrapper
-                active={includedGroupIds.includes(group.id)}
+        {driversGroupsState.loading
+          ? (
+            [...Array(8).keys()].map(i => (
+              <DriverGroupItem key={i}>
+                <Skeleton width={20} height={20} />
+                <Skeleton width={100} />
+              </DriverGroupItem>
+            ))
+          )
+          : (
+            filteredGroups.map(group => (
+              <DriverGroupItem
+                key={group.id}
+                onClick={() => handleCheckboxClick(group.id)}
+                disabled={actionState.loading || driversGroupsState.loading}
               >
-                {includedGroupIds.includes(group.id) ? (
-                  <MdCheckBox />
-                ) : (
-                  <MdCheckBoxOutlineBlank />
-                )}
-              </CheckboxWrapper>
-              <span>{group?.name}</span>
-            </DriverGroupItem>
-          ))
-        )}
+                <CheckboxWrapper
+                  active={includedGroupIds.includes(group.id)}
+                >
+                  {includedGroupIds.includes(group.id)
+                    ? (
+                      <MdCheckBox />
+                    )
+                    : (
+                      <MdCheckBoxOutlineBlank />
+                    )}
+                </CheckboxWrapper>
+                <span>{group?.name}</span>
+              </DriverGroupItem>
+            ))
+          )}
       </DriverGroupListContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -31,6 +31,12 @@ export const DriverGroupItem = styled.div`
   padding: 12px 0;
   cursor: pointer;
 
+  ${({ disabled }) => disabled && css`
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  `}
+
   > span {
     font-size: 14px;
     ${props => props.theme?.rtl ? css`

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

@@ -2,7 +2,7 @@ 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, Checkbox } from '../../../styles'
-import { Alert } from '../../Shared'
+import { Alert, SearchBar } from '../../Shared'
 import { DriversGroupDrivers } from '../DriversGroupDrivers'
 import { DriversGroupCompanies } from '../DriversGroupCompanies'
 
@@ -14,7 +14,9 @@ import {
   Image,
   InputWrapper,
   ManagerInfoContainer,
-  WrapperImage
+  WrapperImage,
+  SearchBarWrapper,
+  ButtonGroup
 } from './styles'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 
@@ -31,6 +33,7 @@ export const DriversGroupGeneralForm = (props) => {
     handleNextClick,
     selectedDriverManager,
     handleSelectDriverManager,
+    handleSelectAllManagers,
     handleChangeMaxDistance,
     useAdvanced,
     handleLogistic
@@ -40,6 +43,8 @@ export const DriversGroupGeneralForm = (props) => {
   const { handleSubmit, register, errors } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [{ user }] = useSession()
+  const [searchManagerValue, setSearchManagerValue] = useState(null)
+  const [filteredManagers, setFilteredManagers] = useState([])
 
   const typeOptions = [
     { value: 0, content: t('IN_HOUSE_DRIVERS', 'In house drivers') },
@@ -110,6 +115,22 @@ export const DriversGroupGeneralForm = (props) => {
     }
   }, [errors])
 
+  useEffect(() => {
+    let _filteredManagers = []
+    if (searchManagerValue) {
+      _filteredManagers = driversManagers
+        .filter(
+          manager => (
+            manager?.name?.toLowerCase().includes(searchManagerValue?.toLowerCase()) ||
+            manager?.email?.toLowerCase().includes(searchManagerValue?.toLowerCase())
+          )
+        )
+    } else {
+      _filteredManagers = [...driversManagers]
+    }
+    setFilteredManagers(_filteredManagers)
+  }, [searchManagerValue, driversManagers])
+
   return (
     <Container
       data-tour='tour_fill_group'
@@ -145,8 +166,33 @@ export const DriversGroupGeneralForm = (props) => {
       {user?.level !== 5 && (
         <InputWrapper>
           <label>{t('DRIVER_MANAGER', 'Driver manager')}</label>
+          <SearchBarWrapper>
+            <SearchBar
+              placeholder={t('SEARCH', 'Search')}
+              isCustomLayout
+              lazyLoad
+              search={searchManagerValue}
+              onSearch={val => setSearchManagerValue(val)}
+            />
+          </SearchBarWrapper>
+          <ButtonGroup>
+            <Button
+              type='button'
+              color='secundaryDark'
+              onClick={() => handleSelectAllManagers(true)}
+            >
+              {t('SELECT_ALL', 'Select all')}
+            </Button>
+            <Button
+              type='button'
+              color='secundaryDark'
+              onClick={() => handleSelectAllManagers(false)}
+            >
+              {t('SELECT_NONE', 'Select none')}
+            </Button>
+          </ButtonGroup>
           <DriverManagerContainer>
-            {driversManagers.map(driverManager => (
+            {filteredManagers.map(driverManager => (
               <DriverManagerWrapper
                 key={driverManager.id}
               >

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

@@ -142,3 +142,13 @@ export const CheckboxContainer = styled.div`
     `}
   }
 `
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 15px;
+  width: 100%;
+`
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+`