ordering-ui-admin-external 1.43.22 → 1.43.23

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.
@@ -0,0 +1,71 @@
1
+ "use strict";
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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.DriverTemporalSchedule = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
10
+ require("react-date-range/dist/styles.css");
11
+ require("react-date-range/dist/theme/default.css");
12
+ var _moment = _interopRequireDefault(require("moment"));
13
+ var locales = _interopRequireWildcard(require("react-date-range/dist/locale"));
14
+ var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
15
+ var _utils = require("../../../utils");
16
+ var _styles2 = require("../../../styles");
17
+ var _styles3 = require("./styles");
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+ 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); }
20
+ 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; }
21
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
22
+ 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."); }
23
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
24
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
25
+ 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; } }
26
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
27
+ var DriverTemporalSchedule = exports.DriverTemporalSchedule = function DriverTemporalSchedule(props) {
28
+ var _state$language;
29
+ var driverSchedule = props.driverSchedule,
30
+ handleSelectDriverTemporary = props.handleSelectDriverTemporary,
31
+ onClose = props.onClose;
32
+ var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
33
+ _useLanguage2 = _slicedToArray(_useLanguage, 2),
34
+ state = _useLanguage2[0],
35
+ t = _useLanguage2[1];
36
+ var datePickerRef = (0, _react.useRef)(null);
37
+ var _useState = (0, _react.useState)(driverSchedule !== null && driverSchedule !== void 0 && driverSchedule.temporary_at ? new Date(driverSchedule === null || driverSchedule === void 0 ? void 0 : driverSchedule.temporary_at) : new Date()),
38
+ _useState2 = _slicedToArray(_useState, 2),
39
+ selectedDate = _useState2[0],
40
+ setSelectedDate = _useState2[1];
41
+ var handleSelect = function handleSelect(date) {
42
+ setSelectedDate(date);
43
+ handleSelectDriverTemporary(driverSchedule === null || driverSchedule === void 0 ? void 0 : driverSchedule.id, true, (0, _moment.default)(date).format('YYYY-MM-DD HH:mm:ss'));
44
+ };
45
+ var handleOnClick = function handleOnClick() {
46
+ onClose();
47
+ };
48
+ (0, _react.useEffect)(function () {
49
+ datePickerRef.current.setOpen(true);
50
+ }, []);
51
+ return /*#__PURE__*/_react.default.createElement(_styles3.Container, null, /*#__PURE__*/_react.default.createElement(_styles3.DateContainer, null, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
52
+ ref: datePickerRef,
53
+ locale: (0, _utils.getLocale)(state === null || state === void 0 || (_state$language = state.language) === null || _state$language === void 0 ? void 0 : _state$language.code, locales),
54
+ selected: selectedDate,
55
+ minDate: new Date(),
56
+ onChange: handleSelect,
57
+ onCalendarClose: onClose,
58
+ showTimeSelect: true,
59
+ timeFormat: "HH:mm",
60
+ timeIntervals: 15,
61
+ timeCaption: "Time",
62
+ dateFormat: "MMMM d, yyyy HH:mm"
63
+ })), /*#__PURE__*/_react.default.createElement(_styles2.Button, {
64
+ borderRadius: "8px",
65
+ color: "primary",
66
+ type: "submit",
67
+ onClick: function onClick() {
68
+ return handleOnClick();
69
+ }
70
+ }, t('SAVE', 'Save')));
71
+ };
@@ -0,0 +1,17 @@
1
+ "use strict";
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); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.DateContainer = exports.Container = 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; }
12
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
13
+ var Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 365px;\n\n > button {\n position: sticky;\n top: 100%;\n height: 42px;\n margin-top: 20px;\n }\n"])));
14
+ var DateContainer = exports.DateContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 5px 0;\n\n input {\n border-radius: 20px;\n width: auto;\n min-width: 220px;\n outline: none;\n padding: 3px 10px;\n border: 1px solid #F2F2F2;\n }\n\n ", "\n\n @media (min-width: 768px) {\n padding: 0;\n }\n"])), function (props) {
15
+ var _props$theme;
16
+ return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n span {\n margin-left: 10px;\n }\n "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n span {\n margin-right: 10px;\n }\n "])));
17
+ });
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
9
9
  var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
10
10
  var _Shared = require("../../Shared");
11
11
  var _styles = require("../../../styles");
12
+ var _DriverTemporalSchedule = require("../DriverTemporalSchedule");
12
13
  var _FaUserAlt = _interopRequireDefault(require("@meronex/icons/fa/FaUserAlt"));
13
14
  var _styles2 = require("./styles");
14
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,8 +29,10 @@ var DriversGroupDrivers = exports.DriversGroupDrivers = function DriversGroupDri
28
29
  var drivers = props.drivers,
29
30
  actionState = props.actionState,
30
31
  selectedDriverIds = props.selectedDriverIds,
32
+ selectedDriverTemporaryIds = props.selectedDriverTemporaryIds,
31
33
  handleSelectDriver = props.handleSelectDriver,
32
- handleSelectAllDriver = props.handleSelectAllDriver;
34
+ handleSelectAllDriver = props.handleSelectAllDriver,
35
+ handleSelectDriverTemporary = props.handleSelectDriverTemporary;
33
36
  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
34
37
  _useLanguage2 = _slicedToArray(_useLanguage, 2),
35
38
  t = _useLanguage2[1];
@@ -41,6 +44,18 @@ var DriversGroupDrivers = exports.DriversGroupDrivers = function DriversGroupDri
41
44
  _useState4 = _slicedToArray(_useState3, 2),
42
45
  filteredDrivers = _useState4[0],
43
46
  setFilteredDrivers = _useState4[1];
47
+ var _useState5 = (0, _react.useState)(false),
48
+ _useState6 = _slicedToArray(_useState5, 2),
49
+ driverTemporalSchedule = _useState6[0],
50
+ setDriverTemporalScheduleModal = _useState6[1];
51
+ var _useState7 = (0, _react.useState)(null),
52
+ _useState8 = _slicedToArray(_useState7, 2),
53
+ driverSchedule = _useState8[0],
54
+ setDriverSchedule = _useState8[1];
55
+ var handleOpenModal = function handleOpenModal(driver) {
56
+ setDriverSchedule(driver);
57
+ setDriverTemporalScheduleModal(true);
58
+ };
44
59
  (0, _react.useEffect)(function () {
45
60
  var _filteredDrivers = [];
46
61
  if (searchValue) {
@@ -85,6 +100,39 @@ var DriversGroupDrivers = exports.DriversGroupDrivers = function DriversGroupDri
85
100
  }), /*#__PURE__*/_react.default.createElement(_styles2.WrapperImage, null, driver !== null && driver !== void 0 && driver.photo ? /*#__PURE__*/_react.default.createElement(_styles2.Image, {
86
101
  bgimage: driver === null || driver === void 0 ? void 0 : driver.photo,
87
102
  alt: "driver"
88
- }) : /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null)), /*#__PURE__*/_react.default.createElement(_styles2.DriverInfoContainer, null, /*#__PURE__*/_react.default.createElement("p", null, driver === null || driver === void 0 ? void 0 : driver.name, " ", driver === null || driver === void 0 ? void 0 : driver.lastname), /*#__PURE__*/_react.default.createElement("p", null, driver === null || driver === void 0 ? void 0 : driver.email)));
103
+ }) : /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null)), /*#__PURE__*/_react.default.createElement(_styles2.DriverInfoContainer, null, /*#__PURE__*/_react.default.createElement("p", null, driver === null || driver === void 0 ? void 0 : driver.name, " ", driver === null || driver === void 0 ? void 0 : driver.lastname), /*#__PURE__*/_react.default.createElement("p", null, driver === null || driver === void 0 ? void 0 : driver.email)), (selectedDriverIds === null || selectedDriverIds === void 0 ? void 0 : selectedDriverIds.includes(driver === null || driver === void 0 ? void 0 : driver.id)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Checkbox, {
104
+ checked: selectedDriverTemporaryIds === null || selectedDriverTemporaryIds === void 0 ? void 0 : selectedDriverTemporaryIds.some(function (_driver) {
105
+ return (_driver === null || _driver === void 0 ? void 0 : _driver.id) === driver.id && (_driver === null || _driver === void 0 ? void 0 : _driver.temporarily_activated);
106
+ }),
107
+ onChange: function onChange(e) {
108
+ return handleSelectDriverTemporary(driver === null || driver === void 0 ? void 0 : driver.id, e.target.checked);
109
+ }
110
+ }), /*#__PURE__*/_react.default.createElement(_styles2.DriverTemporaryContainer, null, /*#__PURE__*/_react.default.createElement("p", {
111
+ onClick: function onClick() {
112
+ var _selectedDriverTempor;
113
+ return handleOpenModal((_selectedDriverTempor = selectedDriverTemporaryIds.find(function (_driver) {
114
+ return (_driver === null || _driver === void 0 ? void 0 : _driver.id) === (driver === null || driver === void 0 ? void 0 : driver.id);
115
+ })) !== null && _selectedDriverTempor !== void 0 ? _selectedDriverTempor : {
116
+ id: driver === null || driver === void 0 ? void 0 : driver.id,
117
+ temporarily_activated: true,
118
+ temporary_at: null
119
+ });
120
+ }
121
+ }, t('DRIVER_TEMPORAL', 'Temporal driver')))));
122
+ })), /*#__PURE__*/_react.default.createElement(_Shared.Modal, {
123
+ width: "385px",
124
+ height: "auto",
125
+ padding: "30px",
126
+ title: t('TEMPORAL_SCHEDULE', 'Temporal Schedule'),
127
+ open: driverTemporalSchedule,
128
+ onClose: function onClose() {
129
+ return setDriverTemporalScheduleModal(false);
130
+ }
131
+ }, /*#__PURE__*/_react.default.createElement(_DriverTemporalSchedule.DriverTemporalSchedule, {
132
+ driverSchedule: driverSchedule,
133
+ handleSelectDriverTemporary: handleSelectDriverTemporary,
134
+ onClose: function onClose() {
135
+ return setDriverTemporalScheduleModal(false);
136
+ }
89
137
  })));
90
138
  };
@@ -4,10 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.WrapperImage = exports.SearchBarWrapper = exports.Image = exports.DriverInfoContainer = exports.Container = exports.ButtonGroup = exports.BusinessesContainer = exports.BusinessWrapper = void 0;
7
+ exports.WrapperImage = exports.SearchBarWrapper = exports.Image = exports.DriverTemporaryContainer = exports.DriverInfoContainer = exports.Container = exports.ButtonGroup = exports.BusinessesContainer = exports.BusinessWrapper = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,6 +38,9 @@ var Image = exports.Image = function Image(props) {
38
38
  }
39
39
  }), props.children);
40
40
  };
41
- var DriverInfoContainer = exports.DriverInfoContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n p {\n margin: 0px;\n &:first-child {\n font-weight: 500;\n font-size: 13px;\n }\n\n &:last-child {\n font-size: 12px;\n color: ", ";\n }\n }\n"])), function (props) {
41
+ var DriverInfoContainer = exports.DriverInfoContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding-right: 15px;\n width: 200px;\n p {\n margin: 0px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n &:first-child {\n font-weight: 500;\n font-size: 13px;\n }\n\n &:last-child {\n font-size: 12px;\n color: ", ";\n }\n }\n"])), function (props) {
42
42
  return props.theme.colors.lightGray;
43
+ });
44
+ var DriverTemporaryContainer = exports.DriverTemporaryContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-left: 5px;\n\n p {\n margin: 0px;\n font-weight: 500;\n font-size: 13px;\n\n &:hover {\n text-decoration: underline;\n color: ", ";\n cursor: pointer;\n }\n }\n"])), function (props) {
45
+ return props.theme.colors.primary;
43
46
  });
@@ -98,10 +98,10 @@ var ServiceDetail = exports.ServiceDetail = function ServiceDetail(props) {
98
98
  content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, "45 ", /*#__PURE__*/_react.default.createElement("span", null, t('MINUTES', 'minutes')))
99
99
  }, {
100
100
  value: 60,
101
- content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, "1 ", /*#__PURE__*/_react.default.createElement("span", null, ('HOUR', 'hour')))
101
+ content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, "1 ", /*#__PURE__*/_react.default.createElement("span", null, t('HOUR', 'hour')))
102
102
  }, {
103
103
  value: 'custom',
104
- content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, /*#__PURE__*/_react.default.createElement("span", null, ('CUSTOME', 'custom')))
104
+ content: /*#__PURE__*/_react.default.createElement(_styles2.Option, null, /*#__PURE__*/_react.default.createElement("span", null, t('CUSTOME', 'custom')))
105
105
  }];
106
106
  var setTimeList = function setTimeList() {
107
107
  var _hours = [];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-admin-external",
3
- "version": "1.43.22",
3
+ "version": "1.43.23",
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.13",
86
+ "ordering-components-admin-external": "1.43.14",
87
87
  "polished": "^3.6.7",
88
88
  "prop-types": "^15.7.2",
89
89
  "react-big-calendar": "^1.4.2",
@@ -0,0 +1,69 @@
1
+ import React, { useState, useEffect, useRef } from 'react'
2
+ import DatePicker from 'react-datepicker'
3
+ import 'react-date-range/dist/styles.css'
4
+ import 'react-date-range/dist/theme/default.css'
5
+ import moment from 'moment'
6
+ import * as locales from 'react-date-range/dist/locale'
7
+ import { useLanguage } from 'ordering-components-admin-external'
8
+
9
+ import { getLocale } from '../../../utils'
10
+ import { Button } from '../../../styles'
11
+
12
+ import {
13
+ DateContainer,
14
+ Container
15
+ } from './styles'
16
+
17
+ export const DriverTemporalSchedule = (props) => {
18
+ const {
19
+ driverSchedule,
20
+ handleSelectDriverTemporary,
21
+ onClose
22
+ } = props
23
+
24
+ const [state, t] = useLanguage()
25
+ const datePickerRef = useRef(null)
26
+
27
+ const [selectedDate, setSelectedDate] = useState(driverSchedule?.temporary_at ? new Date(driverSchedule?.temporary_at) : new Date())
28
+
29
+ const handleSelect = (date) => {
30
+ setSelectedDate(date)
31
+ handleSelectDriverTemporary(driverSchedule?.id, true, moment(date).format('YYYY-MM-DD HH:mm:ss'))
32
+ }
33
+
34
+ const handleOnClick = () => {
35
+ onClose()
36
+ }
37
+
38
+ useEffect(() => {
39
+ datePickerRef.current.setOpen(true)
40
+ }, [])
41
+
42
+ return (
43
+ <Container>
44
+ <DateContainer>
45
+ <DatePicker
46
+ ref={datePickerRef}
47
+ locale={getLocale(state?.language?.code, locales)}
48
+ selected={selectedDate}
49
+ minDate={new Date()}
50
+ onChange={handleSelect}
51
+ onCalendarClose={onClose}
52
+ showTimeSelect
53
+ timeFormat='HH:mm'
54
+ timeIntervals={15}
55
+ timeCaption='Time'
56
+ dateFormat='MMMM d, yyyy HH:mm'
57
+ />
58
+ </DateContainer>
59
+ <Button
60
+ borderRadius='8px'
61
+ color='primary'
62
+ type='submit'
63
+ onClick={() => (handleOnClick())}
64
+ >
65
+ {t('SAVE', 'Save')}
66
+ </Button>
67
+ </Container>
68
+ )
69
+ }
@@ -0,0 +1,41 @@
1
+ import styled, { css } from 'styled-components'
2
+
3
+ export const Container = styled.div`
4
+ height: 365px;
5
+
6
+ > button {
7
+ position: sticky;
8
+ top: 100%;
9
+ height: 42px;
10
+ margin-top: 20px;
11
+ }
12
+ `
13
+
14
+ export const DateContainer = styled.div`
15
+ display: flex;
16
+ align-items: center;
17
+ padding: 5px 0;
18
+
19
+ input {
20
+ border-radius: 20px;
21
+ width: auto;
22
+ min-width: 220px;
23
+ outline: none;
24
+ padding: 3px 10px;
25
+ border: 1px solid #F2F2F2;
26
+ }
27
+
28
+ ${props => props.theme?.rtl ? css`
29
+ span {
30
+ margin-left: 10px;
31
+ }
32
+ ` : css`
33
+ span {
34
+ margin-right: 10px;
35
+ }
36
+ `}
37
+
38
+ @media (min-width: 768px) {
39
+ padding: 0;
40
+ }
41
+ `
@@ -1,7 +1,8 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
  import { useLanguage } from 'ordering-components-admin-external'
3
- import { SearchBar } from '../../Shared'
3
+ import { SearchBar, Modal } from '../../Shared'
4
4
  import { Button, Checkbox } from '../../../styles'
5
+ import { DriverTemporalSchedule } from '../DriverTemporalSchedule'
5
6
  import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
6
7
 
7
8
  import {
@@ -12,7 +13,8 @@ import {
12
13
  BusinessWrapper,
13
14
  WrapperImage,
14
15
  Image,
15
- DriverInfoContainer
16
+ DriverInfoContainer,
17
+ DriverTemporaryContainer
16
18
  } from './styles'
17
19
 
18
20
  export const DriversGroupDrivers = (props) => {
@@ -20,12 +22,21 @@ export const DriversGroupDrivers = (props) => {
20
22
  drivers,
21
23
  actionState,
22
24
  selectedDriverIds,
25
+ selectedDriverTemporaryIds,
23
26
  handleSelectDriver,
24
- handleSelectAllDriver
27
+ handleSelectAllDriver,
28
+ handleSelectDriverTemporary
25
29
  } = props
26
30
  const [, t] = useLanguage()
27
31
  const [searchValue, setSearchValue] = useState(null)
28
32
  const [filteredDrivers, setFilteredDrivers] = useState([])
33
+ const [driverTemporalSchedule, setDriverTemporalScheduleModal] = useState(false)
34
+ const [driverSchedule, setDriverSchedule] = useState(null)
35
+
36
+ const handleOpenModal = (driver) => {
37
+ setDriverSchedule(driver)
38
+ setDriverTemporalScheduleModal(true)
39
+ }
29
40
 
30
41
  useEffect(() => {
31
42
  let _filteredDrivers = []
@@ -91,9 +102,35 @@ export const DriversGroupDrivers = (props) => {
91
102
  <p>{driver?.name} {driver?.lastname}</p>
92
103
  <p>{driver?.email}</p>
93
104
  </DriverInfoContainer>
105
+ {selectedDriverIds?.includes(driver?.id) && (
106
+ <>
107
+ <Checkbox
108
+ checked={selectedDriverTemporaryIds?.some((_driver) => _driver?.id === driver.id && _driver?.temporarily_activated)}
109
+ onChange={e => handleSelectDriverTemporary(driver?.id, e.target.checked)}
110
+ />
111
+ <DriverTemporaryContainer>
112
+ <p onClick={() => handleOpenModal(selectedDriverTemporaryIds.find((_driver) => (_driver?.id === driver?.id)) ?? { id: driver?.id, temporarily_activated: true, temporary_at: null })}>{t('DRIVER_TEMPORAL', 'Temporal driver')}</p>
113
+ </DriverTemporaryContainer>
114
+ </>
115
+ )}
94
116
  </BusinessWrapper>
95
117
  ))}
96
118
  </BusinessesContainer>
119
+
120
+ <Modal
121
+ width='385px'
122
+ height='auto'
123
+ padding='30px'
124
+ title={t('TEMPORAL_SCHEDULE', 'Temporal Schedule')}
125
+ open={driverTemporalSchedule}
126
+ onClose={() => setDriverTemporalScheduleModal(false)}
127
+ >
128
+ <DriverTemporalSchedule
129
+ driverSchedule={driverSchedule}
130
+ handleSelectDriverTemporary={handleSelectDriverTemporary}
131
+ onClose={() => setDriverTemporalScheduleModal(false)}
132
+ />
133
+ </Modal>
97
134
  </Container>
98
135
  )
99
136
  }
@@ -98,8 +98,15 @@ export const Image = (props) => {
98
98
  }
99
99
 
100
100
  export const DriverInfoContainer = styled.div`
101
+ padding-right: 15px;
102
+ width: 200px;
101
103
  p {
102
104
  margin: 0px;
105
+ display: -webkit-box;
106
+ -webkit-line-clamp: 2;
107
+ -webkit-box-orient: vertical;
108
+ overflow: hidden;
109
+ text-overflow: ellipsis;
103
110
  &:first-child {
104
111
  font-weight: 500;
105
112
  font-size: 13px;
@@ -111,3 +118,18 @@ export const DriverInfoContainer = styled.div`
111
118
  }
112
119
  }
113
120
  `
121
+ export const DriverTemporaryContainer = styled.div`
122
+ padding-left: 5px;
123
+
124
+ p {
125
+ margin: 0px;
126
+ font-weight: 500;
127
+ font-size: 13px;
128
+
129
+ &:hover {
130
+ text-decoration: underline;
131
+ color: ${props => props.theme.colors.primary};
132
+ cursor: pointer;
133
+ }
134
+ }
135
+ `
@@ -57,8 +57,8 @@ export const ServiceDetail = (props) => {
57
57
  { value: 15, content: <Option>15 <span>{t('MINUTES', 'minutes')}</span></Option> },
58
58
  { value: 30, content: <Option>30 <span>{t('MINUTES', 'minutes')}</span></Option> },
59
59
  { value: 45, content: <Option>45 <span>{t('MINUTES', 'minutes')}</span></Option> },
60
- { value: 60, content: <Option>1 <span>{('HOUR', 'hour')}</span></Option> },
61
- { value: 'custom', content: <Option><span>{('CUSTOME', 'custom')}</span></Option> }
60
+ { value: 60, content: <Option>1 <span>{t('HOUR', 'hour')}</span></Option> },
61
+ { value: 'custom', content: <Option><span>{t('CUSTOME', 'custom')}</span></Option> }
62
62
  ]
63
63
 
64
64
  const setTimeList = () => {