ordering-ui-admin-external 1.43.31 → 1.43.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/_bundles/{ordering-ui-admin.631d4ac82d8f20108a58.js → ordering-ui-admin.395af03194f63ca488ce.js} +2 -2
  2. package/_modules/components/Delivery/DriverGroupSelectorHeader/index.js +14 -13
  3. package/_modules/components/Delivery/DriversTimeDisplay/UserList.js +10 -18
  4. package/_modules/components/Delivery/DriversTimeDisplay/index.js +63 -16
  5. package/_modules/components/Delivery/DriversTimeDisplay/styles.js +7 -6
  6. package/_modules/components/Orders/DriverMultiSelector/index.js +46 -17
  7. package/_modules/styles/MultiSelect/index.js +56 -10
  8. package/_modules/styles/MultiSelect/styles.js +16 -5
  9. package/_modules/styles/Selects/index.js +62 -51
  10. package/package.json +2 -2
  11. package/src/components/Delivery/DriverGroupSelectorHeader/index.js +21 -21
  12. package/src/components/Delivery/DriversTimeDisplay/UserList.js +35 -41
  13. package/src/components/Delivery/DriversTimeDisplay/index.js +89 -34
  14. package/src/components/Delivery/DriversTimeDisplay/styles.js +22 -4
  15. package/src/components/Orders/DriverMultiSelector/index.js +46 -10
  16. package/src/styles/MultiSelect/index.js +104 -33
  17. package/src/styles/MultiSelect/styles.js +16 -1
  18. package/src/styles/Selects/index.js +14 -10
  19. /package/_bundles/{ordering-ui-admin.631d4ac82d8f20108a58.js.LICENSE.txt → ordering-ui-admin.395af03194f63ca488ce.js.LICENSE.txt} +0 -0
package/_modules/styles/MultiSelect/index.js CHANGED
@@ -37,7 +37,17 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
37
37
  searchBarPlaceholder = props.searchBarPlaceholder,
38
38
  searchBarIsCustomLayout = props.searchBarIsCustomLayout,
39
39
  searchValue = props.searchValue,
40
- handleChangeSearch = props.handleChangeSearch;
40
+ handleChangeSearch = props.handleChangeSearch,
41
+ useTextStyle = props.useTextStyle,
42
+ textClassnames = props.textClassnames,
43
+ hideChevronIcon = props.hideChevronIcon,
44
+ andText = props.andText,
45
+ pagination = props.pagination,
46
+ handleChangePage = props.handleChangePage,
47
+ handleChangePageSize = props.handleChangePageSize,
48
+ useLazyPagination = props.useLazyPagination,
49
+ isLoading = props.isLoading,
50
+ optionsPosition = props.optionsPosition;
41
51
  var _useState = (0, _react.useState)(false),
42
52
  _useState2 = _slicedToArray(_useState, 2),
43
53
  open = _useState2[0],
@@ -57,7 +67,7 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
57
67
  setOpen(!open);
58
68
  };
59
69
  var closeSelect = function closeSelect(e) {
60
- if (open) {
70
+ if (open && !isLoading) {
61
71
  var _dropdownReference$cu;
62
72
  var outsideDropdown = !((_dropdownReference$cu = dropdownReference.current) !== null && _dropdownReference$cu !== void 0 && _dropdownReference$cu.contains(e.target));
63
73
  if (outsideDropdown) {
@@ -70,7 +80,9 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
70
80
  var _defaultOption = options === null || options === void 0 ? void 0 : options.filter(function (option) {
71
81
  return defaultValue.includes(option.value);
72
82
  });
73
- setSelectedOptions(_defaultOption);
83
+ if (!(useLazyPagination && pagination)) {
84
+ setSelectedOptions(_defaultOption);
85
+ }
74
86
  setValues(defaultValue);
75
87
  }, [defaultValue, options, searchValue]);
76
88
  (0, _react.useEffect)(function () {
@@ -83,6 +95,10 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
83
95
  return document.removeEventListener('click', closeSelect);
84
96
  };
85
97
  }, [open]);
98
+ var handlerChangePage = function handlerChangePage(page) {
99
+ setOpen(true);
100
+ handleChangePage(page);
101
+ };
86
102
  var handleSelectOption = function handleSelectOption(option) {
87
103
  if (option.value === null || option.value === 'default') return;
88
104
  var _selectedOptions = _toConsumableArray(selectedOptions);
@@ -103,20 +119,43 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
103
119
  setValues(_values);
104
120
  onChange && onChange(option.value);
105
121
  };
122
+ var optionsTextFormatted = function optionsTextFormatted(selectedOption, index) {
123
+ if (index <= 2) {
124
+ return "".concat(selectedOption.showOnSelected || selectedOption.content).concat(index + 1 !== (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) && index <= 2 ? ', ' : ' ');
125
+ }
126
+ if (index + 1 === (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) >= 4) {
127
+ return "".concat(andText || 'And', " ").concat(index - 2, " +");
128
+ }
129
+ return null;
130
+ };
131
+ var filterFunction = function filterFunction(_, index) {
132
+ if (!pagination || useLazyPagination) return true;
133
+ var validation = (pagination === null || pagination === void 0 ? void 0 : pagination.currentPage) === 1 ? index < pagination.pageSize * pagination.currentPage : index >= pagination.pageSize * (pagination.currentPage - 1) && index < pagination.pageSize * pagination.currentPage;
134
+ return validation;
135
+ };
106
136
  return /*#__PURE__*/_react.default.createElement(_Selects.Select, {
137
+ useTextStyle: useTextStyle,
107
138
  className: className || 'multi-select'
108
139
  }, selectedOptions.length === 0 ? /*#__PURE__*/_react.default.createElement(_Selects.Selected, {
140
+ useTextStyle: useTextStyle,
109
141
  onClick: function onClick(e) {
110
142
  return handleSelectClick(e);
111
143
  }
112
- }, placeholder || '', /*#__PURE__*/_react.default.createElement(_Selects.Chevron, null, /*#__PURE__*/_react.default.createElement(_EnChevronDown.default, null))) : /*#__PURE__*/_react.default.createElement(_Selects.Selected, {
144
+ }, useTextStyle ? /*#__PURE__*/_react.default.createElement(_Selects.Header, null, /*#__PURE__*/_react.default.createElement(_styles.TextFormatted, {
145
+ className: textClassnames
146
+ }, placeholder || '')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder || ''), !hideChevronIcon && /*#__PURE__*/_react.default.createElement(_Selects.Chevron, null, /*#__PURE__*/_react.default.createElement(_EnChevronDown.default, null))) : /*#__PURE__*/_react.default.createElement(_Selects.Selected, {
113
147
  onClick: function onClick(e) {
114
148
  return handleSelectClick(e);
115
149
  }
116
- }, /*#__PURE__*/_react.default.createElement(_Selects.Header, null, selectedOptions.map(function (selectedOption) {
150
+ }, /*#__PURE__*/_react.default.createElement(_Selects.Header, {
151
+ useTextStyle: useTextStyle
152
+ }, selectedOptions.map(function (selectedOption, index) {
117
153
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
118
154
  key: selectedOption.value
119
- }, /*#__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, {
155
+ }, useTextStyle ? /*#__PURE__*/_react.default.createElement(_styles.TextFormatted, {
156
+ className: textClassnames,
157
+ primary: true
158
+ }, optionsTextFormatted(selectedOption, index)) : /*#__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, {
120
159
  circle: true,
121
160
  outline: true,
122
161
  color: "primary",
@@ -126,10 +165,11 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
126
165
  return onChange && onChange(selectedOption.value);
127
166
  }
128
167
  }, /*#__PURE__*/_react.default.createElement(_MdClose.default, null))));
129
- })), /*#__PURE__*/_react.default.createElement(_Selects.Chevron, null, /*#__PURE__*/_react.default.createElement(_EnChevronDown.default, null))), open && options && /*#__PURE__*/_react.default.createElement(_Selects.Options, {
168
+ })), !hideChevronIcon && /*#__PURE__*/_react.default.createElement(_Selects.Chevron, null, /*#__PURE__*/_react.default.createElement(_EnChevronDown.default, null))), open && options && /*#__PURE__*/_react.default.createElement(_Selects.Options, {
130
169
  isAbsolute: true,
131
- position: "right",
132
- ref: dropdownReference
170
+ position: optionsPosition !== null && optionsPosition !== void 0 ? optionsPosition : 'right',
171
+ ref: dropdownReference,
172
+ minWidth: "330px"
133
173
  }, isShowSearchBar && /*#__PURE__*/_react.default.createElement(_Selects.SearchBarWrapper, {
134
174
  className: "search-bar-container"
135
175
  }, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
@@ -141,7 +181,7 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
141
181
  })), /*#__PURE__*/_react.default.createElement(_Selects.OptionsInner, {
142
182
  optionInnerMargin: props.optionInnerMargin,
143
183
  optionInnerMaxHeight: props.optionInnerMaxHeight
144
- }, options.map(function (option, i) {
184
+ }, options.filter(filterFunction).map(function (option, i) {
145
185
  return /*#__PURE__*/_react.default.createElement(_Selects.MultiOption, {
146
186
  key: i,
147
187
  color: option.color,
@@ -150,5 +190,11 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(props) {
150
190
  },
151
191
  optionBottomBorder: props.optionBottomBorder
152
192
  }, option.value !== 'default' && /*#__PURE__*/_react.default.createElement(_styles.CheckBox, null, values.includes(option.value) ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CheckSquareFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Square, null)), option.content);
193
+ })), pagination && handleChangePageSize && handleChangePage && /*#__PURE__*/_react.default.createElement(_styles.PaginationWrapper, null, /*#__PURE__*/_react.default.createElement(_Shared.Pagination, {
194
+ currentPage: pagination === null || pagination === void 0 ? void 0 : pagination.currentPage,
195
+ totalPages: pagination === null || pagination === void 0 ? void 0 : pagination.totalPages,
196
+ handleChangePage: handlerChangePage,
197
+ handleChangePageSize: handleChangePageSize,
198
+ defaultPageSize: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize
153
199
  }))));
154
200
  };
package/_modules/styles/MultiSelect/styles.js CHANGED
@@ -1,13 +1,24 @@
1
1
  "use strict";
2
2
 
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
- exports.CheckBox = void 0;
7
- var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- var _templateObject;
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
7
+ exports.TextFormatted = exports.PaginationWrapper = exports.CheckBox = void 0;
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
10
+ 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); }
11
+ 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; }
10
12
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
13
  var CheckBox = exports.CheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n svg {\n font-size: 16px;\n }\n"])), function (props) {
12
14
  return props.theme.colors.primary;
13
- });
15
+ });
16
+ var TextFormatted = exports.TextFormatted = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n div {\n font-size: 14px;\n color: ", ";\n }\n"])), function (_ref) {
17
+ var _theme$colors;
18
+ var primary = _ref.primary,
19
+ theme = _ref.theme;
20
+ return primary && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n "])), theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary);
21
+ }, function (props) {
22
+ return props.theme.colors.primary;
23
+ });
24
+ var PaginationWrapper = exports.PaginationWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin: 20px;\n"])));
package/_modules/styles/Selects/index.js CHANGED
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.Selected = exports.SelectImage = exports.Select = exports.SearchBarWrapper = exports.OptionsInner = exports.Options = exports.Option = exports.MultiSelectOption = exports.MultiOption = exports.Header = exports.FunctionalityContainer = exports.Chevron = void 0;
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
  var _polished = require("polished");
10
- 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;
10
+ 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;
11
11
  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); }
12
12
  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; }
13
13
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -41,91 +41,102 @@ var Option = exports.Option = _styledComponents.default.div(_templateObject || (
41
41
  var color = _ref6.color;
42
42
  return color === 'primary' && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: #C3C3C3;\n "])));
43
43
  });
44
- var Options = exports.Options = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n min-width: 100%;\n background: ", ";\n z-index: 10000;\n border-width: 1px;\n border-style: solid;\n border-color: #E9ECEF;\n border-radius: 7.6px;\n overflow: hidden;\n\n ", "\n ", "\n\n ", "\n"])), function (props) {
44
+ var Options = exports.Options = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n min-width: ", ";\n background: ", ";\n z-index: 10000;\n border-width: 1px;\n border-style: solid;\n border-color: #E9ECEF;\n border-radius: 7.6px;\n overflow: hidden;\n\n ", "\n ", "\n\n ", "\n"])), function (_ref7) {
45
+ var minWidth = _ref7.minWidth;
46
+ return minWidth || '100%';
47
+ }, function (props) {
45
48
  var _props$theme$colors;
46
49
  return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
47
- }, function (_ref7) {
48
- var position = _ref7.position;
50
+ }, function (_ref8) {
51
+ var position = _ref8.position;
49
52
  return (position === null || position === void 0 ? void 0 : position.toLowerCase()) === 'left' && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n left: 0;\n margin-left: -1px;\n ", "\n "])), function (props) {
50
53
  var _props$theme2;
51
54
  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-right: -1px;\n margin-left: 0px;\n right: 0;\n left: initial;\n "])));
52
55
  });
53
- }, function (_ref8) {
54
- var position = _ref8.position;
56
+ }, function (_ref9) {
57
+ var position = _ref9.position;
55
58
  return (position === null || position === void 0 ? void 0 : position.toLowerCase()) === 'right' && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n right: 0;\n margin-right: -1px;\n ", "\n "])), function (props) {
56
59
  var _props$theme3;
57
60
  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n margin-left: -1px;\n margin-right: 0px;\n left: 0;\n right: initial;\n "])));
58
61
  });
59
- }, function (_ref9) {
60
- var isAbsolute = _ref9.isAbsolute;
62
+ }, function (_ref10) {
63
+ var isAbsolute = _ref10.isAbsolute;
61
64
  return isAbsolute && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: absolute;\n margin-top: 7px;\n "])));
62
65
  });
63
- var OptionsInner = exports.OptionsInner = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n overflow-x: hidden;\n margin: ", ";\n max-height: ", ";\n overscroll-behavior: contain;\n"])), function (_ref10) {
64
- var optionInnerMargin = _ref10.optionInnerMargin;
66
+ var OptionsInner = exports.OptionsInner = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n overflow-x: hidden;\n margin: ", ";\n max-height: ", ";\n overscroll-behavior: contain;\n"])), function (_ref11) {
67
+ var optionInnerMargin = _ref11.optionInnerMargin;
65
68
  return optionInnerMargin;
66
- }, function (_ref11) {
67
- var optionInnerMaxHeight = _ref11.optionInnerMaxHeight;
69
+ }, function (_ref12) {
70
+ var optionInnerMaxHeight = _ref12.optionInnerMaxHeight;
68
71
  return optionInnerMaxHeight;
69
72
  });
70
- var Selected = exports.Selected = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n padding-left: 15px;\n padding-right: 15px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1;\n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n z-index: 11;\n\n p {\n margin: 0px;\n }\n\n @media (max-width: 380px) {\n padding-left: 9px;\n padding-right: 9px;\n font-size: 13px;\n }\n\n ", "\n"])), function (_ref12) {
71
- var isDisabled = _ref12.isDisabled;
72
- return isDisabled && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n pointer-events: none;\n "])));
73
+ var Selected = exports.Selected = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n ", "\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1;\n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n z-index: 11;\n\n p {\n margin: 0px;\n }\n\n @media (max-width: 380px) {\n padding-left: 9px;\n padding-right: 9px;\n font-size: 13px;\n }\n\n ", "\n"])), function (_ref13) {
74
+ var useTextStyle = _ref13.useTextStyle;
75
+ return !useTextStyle && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n padding-left: 15px;\n padding-right: 15px;\n "])));
76
+ }, function (_ref14) {
77
+ var isDisabled = _ref14.isDisabled;
78
+ return isDisabled && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n pointer-events: none;\n "])));
73
79
  });
74
- var Select = exports.Select = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n display: inline-block;\n border-radius: 7.6px;\n line-height: 34px;\n border-width: 1px;\n border-style: solid;\n border-color: #DEE2E6;\n color: #344050;\n position: relative;\n\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
75
- return props.open && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), (0, _polished.darken)(0.07, '#CCC'));
76
- }, function (_ref13) {
77
- var type = _ref13.type;
78
- return type === 'primary' && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n border-color: ", ";\n border-radius: 7.6px;\n "])), function (props) {
80
+ var Select = exports.Select = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n display: inline-block;\n color: #344050;\n position: relative;\n\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
81
+ return !props.useTextStyle && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n border-radius: 7.6px;\n line-height: 34px;\n border-width: 1px;\n border-style: solid;\n border-color: #DEE2E6;\n "])));
82
+ }, function (props) {
83
+ return props.open && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), (0, _polished.darken)(0.07, '#CCC'));
84
+ }, function (_ref15) {
85
+ var type = _ref15.type;
86
+ return type === 'primary' && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n border-color: ", ";\n border-radius: 7.6px;\n "])), function (props) {
79
87
  return props.theme.colors.btnPrimary;
80
88
  }, function (props) {
81
89
  return props.theme.colors.btnPrimaryContrast;
82
90
  }, function (props) {
83
91
  return props.theme.colors.btnPrimary;
84
92
  });
85
- }, function (_ref14) {
86
- var isDisabled = _ref14.isDisabled;
87
- return isDisabled && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n background-color: ", " !important;\n "])), function (props) {
93
+ }, function (_ref16) {
94
+ var isDisabled = _ref16.isDisabled;
95
+ return isDisabled && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n background-color: ", " !important;\n "])), function (props) {
88
96
  return props.theme.colors.disabled;
89
97
  });
90
98
  });
91
- var Chevron = exports.Chevron = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n font-size: 14px;\n display: flex;\n align-items: center;\n margin-left: 5px;\n ", "\n"])), function (props) {
99
+ var Chevron = exports.Chevron = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n font-size: 14px;\n display: flex;\n align-items: center;\n margin-left: 5px;\n ", "\n"])), function (props) {
92
100
  var _props$theme4;
93
- return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n margin-right: 5px;\n margin-left: 0px;\n "])));
101
+ return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n margin-right: 5px;\n margin-left: 0px;\n "])));
94
102
  });
95
- var Header = exports.Header = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n flex: 1;\n overflow: auto;\n white-space: nowrap;\n display: flex;\n align-items: center;\n"])));
96
- var SelectImage = exports.SelectImage = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n width: 28px;\n height: 28px;\n border-radius: 1000px;\n margin-left: 5px;\n overflow: hidden;\n\n ", "\n\n img {\n width: 100%;\n height: 100%;\n }\n"])), function (props) {
103
+ var Header = exports.Header = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n flex: 1;\n overflow: auto;\n white-space: ", ";\n display: flex;\n align-items: center;\n"])), function (_ref17) {
104
+ var useTextStyle = _ref17.useTextStyle;
105
+ return useTextStyle ? 'pre-wrap' : 'nowrap';
106
+ });
107
+ var SelectImage = exports.SelectImage = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n width: 28px;\n height: 28px;\n border-radius: 1000px;\n margin-left: 5px;\n overflow: hidden;\n\n ", "\n\n img {\n width: 100%;\n height: 100%;\n }\n"])), function (props) {
97
108
  var _props$theme5;
98
- return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n margin-left: 5px;\n margin-right: 0;\n "])));
109
+ return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n margin-left: 5px;\n margin-right: 0;\n "])));
99
110
  });
100
- var MultiSelectOption = exports.MultiSelectOption = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n position: relative;\n button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n background: ", ";\n width: 20px;\n height: 20px;\n transform: translate(100%, -50%);\n top: 11px;\n right: 15px;\n }\n"])), function (props) {
111
+ var MultiSelectOption = exports.MultiSelectOption = _styledComponents.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n position: relative;\n button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n background: ", ";\n width: 20px;\n height: 20px;\n transform: translate(100%, -50%);\n top: 11px;\n right: 15px;\n }\n"])), function (props) {
101
112
  var _props$theme$colors2;
102
113
  return ((_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.backgroundPage) || '#FFF';
103
114
  });
104
- var FunctionalityContainer = exports.FunctionalityContainer = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n svg{\n margin-left: 20px;\n ", "\n }\n"])), function (props) {
105
- return props.disabled && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n opacity: 0.4;\n pointer-events: none;\n "])));
115
+ var FunctionalityContainer = exports.FunctionalityContainer = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n svg{\n margin-left: 20px;\n ", "\n }\n"])), function (props) {
116
+ return props.disabled && (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n opacity: 0.4;\n pointer-events: none;\n "])));
106
117
  });
107
- var SearchBarWrapper = exports.SearchBarWrapper = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n padding: 5px 10px;\n width: 100%;\n > div {\n input {\n height: 42px;\n }\n }\n"])));
108
- var MultiOption = exports.MultiOption = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 5px 10px;\n box-sizing: border-box;\n min-width: ", ";\n color: #333;\n cursor: pointer;\n\n ", "\n\n ", "\n\n ", "\n\n &:hover {\n background-color: ", ";\n }\n\n ", "\n\n svg {\n vertical-align: text-top;\n }\n\n ", "\n\n ", "\n"])), function (_ref15) {
109
- var minWidth = _ref15.minWidth;
118
+ var SearchBarWrapper = exports.SearchBarWrapper = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n padding: 5px 10px;\n width: 100%;\n > div {\n input {\n height: 42px;\n }\n }\n"])));
119
+ var MultiOption = exports.MultiOption = _styledComponents.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 5px 10px;\n box-sizing: border-box;\n min-width: ", ";\n color: #333;\n cursor: pointer;\n\n ", "\n\n ", "\n\n ", "\n\n &:hover {\n background-color: ", ";\n }\n\n ", "\n\n svg {\n vertical-align: text-top;\n }\n\n ", "\n\n ", "\n"])), function (_ref18) {
120
+ var minWidth = _ref18.minWidth;
110
121
  return minWidth || '100px';
111
- }, function (_ref16) {
112
- var disabled = _ref16.disabled;
113
- return disabled && (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n cursor: no-drop;\n opacity: 0.6;\n "])));
114
- }, function (_ref17) {
115
- var showDisable = _ref17.showDisable;
116
- return showDisable && (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n display: none;\n "])));
117
- }, function (_ref18) {
118
- var optionBottomBorder = _ref18.optionBottomBorder;
119
- return optionBottomBorder && (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n border-bottom: 1px solid #D8D8D8;\n "])));
120
- }, (0, _polished.darken)(0.03, '#fafafa'), function (props) {
121
- return props.selected && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n background-color: ", ";\n \n &:hover {\n background-color: ", ";\n }\n "])), (0, _polished.darken)(0.07, '#fafafa'), (0, _polished.darken)(0.07, '#fafafa'));
122
122
  }, function (_ref19) {
123
- var withIcons = _ref19.withIcons;
124
- return withIcons && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n svg {\n margin-right: 3px;\n ", "\n }\n "])), function (props) {
123
+ var disabled = _ref19.disabled;
124
+ return disabled && (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n cursor: no-drop;\n opacity: 0.6;\n "])));
125
+ }, function (_ref20) {
126
+ var showDisable = _ref20.showDisable;
127
+ return showDisable && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n display: none;\n "])));
128
+ }, function (_ref21) {
129
+ var optionBottomBorder = _ref21.optionBottomBorder;
130
+ return optionBottomBorder && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n border-bottom: 1px solid #D8D8D8;\n "])));
131
+ }, (0, _polished.darken)(0.03, '#fafafa'), function (props) {
132
+ return props.selected && (0, _styledComponents.css)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), (0, _polished.darken)(0.07, '#fafafa'), (0, _polished.darken)(0.07, '#fafafa'));
133
+ }, function (_ref22) {
134
+ var withIcons = _ref22.withIcons;
135
+ return withIcons && (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n svg {\n margin-right: 3px;\n ", "\n }\n "])), function (props) {
125
136
  var _props$theme6;
126
- return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n margin-left: 3px;\n margin-right: 0px;\n "])));
137
+ return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n margin-left: 3px;\n margin-right: 0px;\n "])));
127
138
  });
128
- }, function (_ref20) {
129
- var color = _ref20.color;
130
- return color === 'primary' && (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n color: #C3C3C3;\n "])));
139
+ }, function (_ref23) {
140
+ var color = _ref23.color;
141
+ return color === 'primary' && (0, _styledComponents.css)(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n color: #C3C3C3;\n "])));
131
142
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-admin-external",
3
- "version": "1.43.31",
3
+ "version": "1.43.32",
4
4
  "description": "Ordering UI Admin Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
@@ -83,7 +83,7 @@
83
83
  "lodash": "^4.17.20",
84
84
  "moment": "^2.29.1",
85
85
  "moment-range": "^4.0.2",
86
- "ordering-components-admin-external": "1.43.20",
86
+ "ordering-components-admin-external": "1.43.21",
87
87
  "polished": "^3.6.7",
88
88
  "prop-types": "^15.7.2",
89
89
  "react-big-calendar": "^1.4.2",
package/src/components/Delivery/DriverGroupSelectorHeader/index.js CHANGED
@@ -17,21 +17,21 @@ const DriverGroupsListingUI = (props) => {
17
17
  pagination,
18
18
  searchValue,
19
19
  onSearch,
20
- getPageBusinesses,
20
+ getHeaderDriversGroups,
21
21
  isOpen,
22
22
  close,
23
- changeDriverGroupState,
23
+ changeDriverGroupState
24
24
  } = props
25
25
  const [, t] = useLanguage()
26
26
  const dropdownReference = useRef()
27
27
 
28
28
  const handleChangePage = (page) => {
29
- getPageBusinesses(pagination.pageSize, page)
29
+ getHeaderDriversGroups(page, pagination.pageSize)
30
30
  }
31
31
 
32
32
  const handleChangePageSize = (pageSize) => {
33
33
  const expectedPage = Math.ceil(pagination.from / pageSize)
34
- getPageBusinesses(pageSize, expectedPage)
34
+ getHeaderDriversGroups(expectedPage, pageSize)
35
35
  }
36
36
 
37
37
  const closeSelect = (e) => {
@@ -74,31 +74,30 @@ const DriverGroupsListingUI = (props) => {
74
74
  ))
75
75
  ) : (
76
76
  <>
77
- {driversGroupsState.groups.map(driver_group => (
78
- <OptionItem key={driver_group.id}
79
- onClick={() => changeDriverGroupState(driver_group)}
77
+ {driversGroupsState.groups.map(driverGroup => (
78
+ <OptionItem
79
+ key={driverGroup.id}
80
+ onClick={() => changeDriverGroupState(driverGroup)}
80
81
  >
81
82
  <div>
82
- <b>{driver_group?.name}</b>
83
- <p>{t('DRIVERS', 'Drivers:')} {driver_group?.drivers?.length}</p>
83
+ <b>{driverGroup?.name}</b>
84
+ <p>{t('DRIVERS', 'Drivers:')} {driverGroup?.drivers?.length}</p>
84
85
  </div>
85
86
  </OptionItem>
86
87
  ))}
87
88
  </>
88
89
  )}
89
90
  </DriverGroupList>
90
- {pagination && pagination?.total > 0 && (
91
+ {pagination && pagination?.totalPages > 0 && (
91
92
  <WrapperPagination className='pagination-container'>
92
- {pagination?.total && (
93
- <Pagination
94
- currentPage={pagination.currentPage}
95
- totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
96
- handleChangePage={handleChangePage}
97
- defaultPageSize={pagination.pageSize}
98
- handleChangePageSize={handleChangePageSize}
99
- isHidePagecontrol
100
- />
101
- )}
93
+ <Pagination
94
+ currentPage={pagination.currentPage}
95
+ totalPages={pagination?.totalPages}
96
+ handleChangePage={handleChangePage}
97
+ defaultPageSize={pagination.pageSize}
98
+ handleChangePageSize={handleChangePageSize}
99
+ isHidePagecontrol
100
+ />
102
101
  </WrapperPagination>
103
102
  )}
104
103
  </SelectHeaderContent>
@@ -114,9 +113,10 @@ export const DriverGroupSelectHeader = (props) => {
114
113
  isHeaderComponent: true,
115
114
  paginationSettings: {
116
115
  initialPage: 1,
117
- pageSize: 6,
116
+ pageSize: 5,
118
117
  controlType: 'pages'
119
118
  },
119
+ propsToFetch: ['id', 'enabled', 'drivers', 'name']
120
120
  }
121
121
  return (
122
122
  <DriverGroupsListController {...driverGroupsListingProps} />
package/src/components/Delivery/DriversTimeDisplay/UserList.js CHANGED
@@ -60,19 +60,19 @@ export const DeliveryUsersListing = (props) => {
60
60
  getDrivers(expectedPage, pageSize, selectedGroup?.id)
61
61
  }
62
62
 
63
- const getDatesInRange = (date_range) => {
64
- const start = moment(date_range[0])
65
- const end = moment(date_range[1])
66
- const dates = [];
63
+ const getDatesInRange = (dateRange) => {
64
+ const start = moment(dateRange[0])
65
+ const end = moment(dateRange[1])
66
+ const dates = []
67
67
 
68
- let current = start;
68
+ let current = start
69
69
 
70
70
  while (current <= end) {
71
71
  dates.push(current.format('YYYY-MM-DD'))
72
72
  current = current.clone().add(1, 'days')
73
73
  }
74
74
 
75
- return dates;
75
+ return dates
76
76
  }
77
77
 
78
78
  const handleHourBlockWidth = (block) => {
@@ -103,7 +103,7 @@ export const DeliveryUsersListing = (props) => {
103
103
  cellSections={21.5}
104
104
  onClick={() => handleSelectDriver(user, block)}
105
105
  >
106
- <UserName>{`${!!user?.name ? user?.name : ''} ${!!user?.lastname ? user?.lastname : ''}`}</UserName>
106
+ <UserName>{`${user?.name ?? ''} ${user?.lastname ?? ''}`}</UserName>
107
107
  <p>{moment(block.start).format(hourFormat)} - {moment(block.end).format(hourFormat)}</p>
108
108
  </Block>
109
109
  </td>
@@ -112,32 +112,35 @@ export const DeliveryUsersListing = (props) => {
112
112
  const handleBlockWeekToShow = (block, user, allBlocks, blockByDay) => {
113
113
  if (!block) return
114
114
  return block.start && block.end && (
115
- blockByDay?.length === 1 ?
116
- <Block
117
- innerWidth={106}
118
- rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
119
- cellPosition={4}
120
- cellWidth={160}
121
- cellSections={6.67}
122
- onClick={() => handleSelectDriver(user, block)}
123
- >
124
- <p>{moment(block.start).format(hourFormat)} - {moment(block.end).format(hourFormat)}</p>
125
- </Block>
126
- :
127
- <ButtonWrapper
128
- rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
129
- cellPosition={moment(block?.start).hour()}
130
- cellWidth={160}
131
- cellSections={6.67}
132
- >
133
- <Button
134
- color='lightPrimary'
135
- borderRadius='8px'
136
- onClick={() => setStackEventsState({ open: true, events: blockByDay, user: user })}
115
+ blockByDay?.length === 1
116
+ ? (
117
+ <Block
118
+ innerWidth={106}
119
+ rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
120
+ cellPosition={4}
121
+ cellWidth={160}
122
+ cellSections={6.67}
123
+ onClick={() => handleSelectDriver(user, block)}
124
+ >
125
+ <p>{moment(block.start).format(hourFormat)} - {moment(block.end).format(hourFormat)}</p>
126
+ </Block>
127
+ )
128
+ : (
129
+ <ButtonWrapper
130
+ rowPosition={allBlocks.indexOf(moment(block?.start).format('YYYY-MM-DD'))}
131
+ cellPosition={moment(block?.start).hour()}
132
+ cellWidth={160}
133
+ cellSections={6.67}
137
134
  >
138
- {blockByDay?.length} {t('BLOCKS', 'Blocks')}
139
- </Button>
140
- </ButtonWrapper>
135
+ <Button
136
+ color='lightPrimary'
137
+ borderRadius='8px'
138
+ onClick={() => setStackEventsState({ open: true, events: blockByDay, user: user })}
139
+ >
140
+ {blockByDay?.length} {t('BLOCKS', 'Blocks')}
141
+ </Button>
142
+ </ButtonWrapper>
143
+ )
141
144
  )
142
145
  }
143
146
 
@@ -148,15 +151,6 @@ export const DeliveryUsersListing = (props) => {
148
151
  })
149
152
  }
150
153
 
151
- useEffect(() => {
152
- if (driversList.loading || driversList?.users?.length > 0 || paginationProps.totalPages <= 1) return
153
- if (paginationProps.currentPage !== paginationProps.totalPages) {
154
- handleChangePage(paginationProps.currentPage)
155
- } else {
156
- handleChangePage(paginationProps.currentPage - 1)
157
- }
158
- }, [driversList?.users, paginationProps])
159
-
160
154
  return (
161
155
  <UsersListingContainer>
162
156
  <UsersConatiner>