ordering-ui-admin-external 1.30.2 → 1.30.3

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

@@ -7,67 +7,59 @@ Object.defineProperty(exports, "__esModule", {
 exports.WrapperDriverImage = exports.PlaceholderTitle = exports.OptionContent = exports.Option = exports.DriverText = exports.DriverNameContainer = exports.DriverName = exports.DriverImage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  padding: ", ";\n  white-space: nowrap;\n  ", "\n  ", "\n\n  img {\n    width: 45px;\n    border-radius: 8px;\n  }\n\n  ", "\n\n  span {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    max-width: 350px;\n  }\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    ", "\n    span {\n      max-width: 280px;\n    }\n  }\n"])), function (props) {
+var Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  padding: ", ";\n  white-space: nowrap;\n\n  img {\n    width: 45px;\n    border-radius: 8px;\n  }\n\n  ", "\n\n  span {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    max-width: 350px;\n  }\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    ", "\n    span {\n      max-width: 280px;\n    }\n  }\n"])), function (props) {
   var _props$theme$colors;
   return (_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.headingColor;
 }, function (_ref) {
   var padding = _ref.padding;
-  return padding || '5px 10px';
+  return padding || '5px';
 }, function (_ref2) {
-  var isPhoneView = _ref2.isPhoneView;
-  return isPhoneView && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n  "])));
-}, function (_ref3) {
-  var isRemove = _ref3.isRemove;
-  return isRemove && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: ", ";\n    padding: 3px 10px;\n    font-size: 14px;\n  "])), function (props) {
-    return props.theme.colors.danger;
-  });
-}, function (_ref4) {
-  var small = _ref4.small;
-  return small && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", ";\n    img {\n      width: 25px;\n    }\n  "])), function (_ref5) {
-    var padding = _ref5.padding;
+  var small = _ref2.small;
+  return small && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", ";\n    img {\n      width: 25px;\n    }\n  "])), function (_ref3) {
+    var padding = _ref3.padding;
     return padding || '5px 0px';
   });
-}, function (_ref6) {
-  var padding = _ref6.padding;
+}, function (_ref4) {
+  var padding = _ref4.padding;
   return padding || '5px 0px';
 }, function (props) {
   var _props$theme;
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "])));
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "])));
 });
 exports.Option = Option;
-var OptionContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var OptionContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 exports.OptionContent = OptionContent;
-var DriverNameContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  line-height: 1.3;\n  color: #263238;\n"])));
+var DriverNameContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  line-height: 1.3;\n  color: #263238;\n"])));
 exports.DriverNameContainer = DriverNameContainer;
-var DriverName = _styledComponents.default.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: ", ";\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: 150px;\n  margin: 0px;\n\n  ", "\n\n  @media (max-width: 576px) {\n    max-width: 90px;\n  }\n"])), function (props) {
+var DriverName = _styledComponents.default.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: ", ";\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: 150px;\n  margin: 0px;\n\n  ", "\n\n  @media (max-width: 576px) {\n    max-width: 90px;\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
-}, function (_ref7) {
-  var small = _ref7.small;
-  return small && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-weight: 400;\n  "])));
+}, function (_ref5) {
+  var small = _ref5.small;
+  return small && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-weight: 400;\n  "])));
 });
 exports.DriverName = DriverName;
-var DriverText = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  color: ", ";\n  ", "\n"])), function (props) {
+var DriverText = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  color: ", ";\n  ", "\n"])), function (props) {
   return props.theme.colors.lightGray;
-}, function (_ref8) {
-  var small = _ref8.small;
-  return small && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: none;\n  "])));
+}, function (_ref6) {
+  var small = _ref6.small;
+  return small && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: none;\n  "])));
 });
 exports.DriverText = DriverText;
-var WrapperDriverImage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 45px;\n  height: 45px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  display: flex;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    padding: 7px;\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref9) {
-  var small = _ref9.small;
-  return small && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    width: 24px;\n    height: 24px;\n    border-radius: 8px;\n    svg {\n      padding: 3px;\n    }\n  "])));
+var WrapperDriverImage = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 45px;\n  height: 45px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  display: flex;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    padding: 7px;\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref7) {
+  var small = _ref7.small;
+  return small && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    width: 24px;\n    height: 24px;\n    border-radius: 8px;\n    svg {\n      padding: 3px;\n    }\n  "])));
 }, function (props) {
   var _props$theme2;
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-left: 8px;\n  "]))) : (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    margin-right: 8px;\n  "])));
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    margin-left: 8px;\n  "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-right: 8px;\n  "])));
 });
 exports.WrapperDriverImage = WrapperDriverImage;
-var DriverImageStyled = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  border-radius: 8px;\n"])));
+var DriverImageStyled = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  border-radius: 8px;\n"])));
 var DriverImage = function DriverImage(props) {
   return /*#__PURE__*/_react.default.createElement(DriverImageStyled, _extends({}, props, {
     style: {
@@ -76,8 +68,8 @@ var DriverImage = function DriverImage(props) {
   }), props.children);
 };
 exports.DriverImage = DriverImage;
-var PlaceholderTitle = (0, _styledComponents.default)(Option)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  padding: 10px;\n\n  ", "\n"])), function (_ref10) {
-  var isSingle = _ref10.isSingle;
-  return isSingle && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    padding: 0px;\n    font-size: 14px;\n  "])));
+var PlaceholderTitle = (0, _styledComponents.default)(Option)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding: 10px;\n\n  ", "\n"])), function (_ref8) {
+  var isSingle = _ref8.isSingle;
+  return isSingle && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    padding: 0px;\n    font-size: 14px;\n  "])));
 });
 exports.PlaceholderTitle = PlaceholderTitle;

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

@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var PlaceholderTitle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 10px;\n"])));
 exports.PlaceholderTitle = PlaceholderTitle;
-var Option = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 15px;\n  column-gap: 20px;\n\n  svg {\n    margin-right: 5px;\n    ", " \n  }\n"])), function (props) {
+var Option = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  column-gap: 20px;\n\n  svg {\n    margin-right: 5px;\n    ", " \n  }\n"])), function (props) {
   var _props$theme;
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n    "])));
 });

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

@@ -86,7 +86,9 @@ var DriversList = function DriversList(props) {
       onClick: function onClick() {
         return onOpenDriverOrdersDetail(driver);
       }
-    }, driver === null || driver === void 0 ? void 0 : driver.assigned_orders_count, " ", t('ORDERS', 'Orders'))), (driver === null || driver === void 0 ? void 0 : driver.qualification) && /*#__PURE__*/_react.default.createElement(_styles2.WrapperStar, {
+    }, driver === null || driver === void 0 ? void 0 : driver.assigned_orders_count, " ", t('ORDERS', 'Orders')), /*#__PURE__*/_react.default.createElement("p", {
+      className: "text-red"
+    }, (driver === null || driver === void 0 ? void 0 : driver.busy) && "(".concat(t('BUSY', 'Busy'), ")"))), (driver === null || driver === void 0 ? void 0 : driver.qualification) && /*#__PURE__*/_react.default.createElement(_styles2.WrapperStar, {
       width: (0, _utils.getStarWidth)(driver === null || driver === void 0 ? void 0 : driver.qualification)
     })));
   })));

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

@@ -46,7 +46,7 @@ var WrapperStar = _styledComponents.default.div(_templateObject6 || (_templateOb
   return width;
 });
 exports.WrapperStar = WrapperStar;
-var DriverInfo = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  > div:first-child {\n    display: flex;\n    align-items: center;\n\n    svg {\n      margin: 0 5px;\n    }\n    \n    p {\n      font-size: 14px;\n      color: ", ";\n      font-weight: 600;\n      margin: 0px;\n      flex: 1;\n    }\n  }\n"])), function (props) {
+var DriverInfo = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  > div:first-child {\n    display: flex;\n    align-items: center;\n\n    svg {\n      margin: 0 5px;\n    }\n\n    p {\n      font-size: 14px;\n      color: ", ";\n      font-weight: 600;\n      margin: 0px;\n      flex: 1;\n    }\n    .text-red {\n      margin-left: 2px;\n      color: red;\n    }\n  }\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin-right: 15px;\n  "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-left: 15px;\n  "])));
 }, function (props) {

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

@@ -102,6 +102,13 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     isExpand = _useState12[0],
     setIsExpand = _useState12[1];
+  var _useState13 = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    alertState = _useState14[0],
+    setAlertState = _useState14[1];
   var placeSpotEnabled = [3, 4];
   var _props$order = props.order,
     order = _props$order.order,
@@ -311,6 +318,13 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
       handleShowOption(section, true);
     }
   }, [loading]);
+  (0, _react.useEffect)(function () {
+    if (!(actionStatus !== null && actionStatus !== void 0 && actionStatus.error)) return;
+    setAlertState({
+      open: true,
+      content: actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.error
+    });
+  }, [actionStatus === null || actionStatus === void 0 ? void 0 : actionStatus.error]);
   var progressBarObjt = order !== null && order !== void 0 && order.delivery_type && (order === null || order === void 0 ? void 0 : order.delivery_type) === 2 ? _utils.getOrderStatuPickUp : _utils.getOrderStatus;
   return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
     isSelectedOrders: isSelectedOrders,
@@ -494,6 +508,24 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     ref: printTicketRef,
     order: order,
     getOrderStatus: progressBarObjt
+  }), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+    title: t('WEB_APPNAME', 'Ordering'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    onAccept: function onAccept() {
+      return setAlertState({
+        open: false,
+        content: []
+      });
+    },
+    closeOnBackdrop: false
   }));
 };
 var OrderDetails = function OrderDetails(props) {

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

@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var FilterGroupListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  padding: 15px 20px;\n  > h1 {\n    font-size: 24px;\n    font-weight: 600;\n    margin-top: 10px;\n    margin-bottom: 30px;\n  }\n\n  & > div {\n    width: 48%;\n  }\n\n  @media (max-width: 576px) {\n    flex-direction: column;\n    & > div {\n      width: 100%;\n    }\n  }\n\n  @media (min-width: 768px) {\n    padding: 30px;\n  }\n"])));
 exports.FilterGroupListContainer = FilterGroupListContainer;
-var WrapperRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100% !important;\n  flex-direction: column;\n  justify-content: space-between;\n\n  & > div {\n    width: 100%;\n    height: 57px;\n    margin-bottom: 20px;\n    background-color: ", ";\n    border: none;\n    font-size: 14px;\n    border-radius: 8px;\n  }\n\n  .order-status-multi-select {\n    p {\n      padding: 0;\n      color: ", " !important;\n    }\n  }\n\n  .date-filter-container {\n    z-index: 100;\n  }\n\n  > input {\n    width: 100%;\n    height: 57px;\n    margin-bottom: 20px;\n    padding: 10px 25px;\n    box-sizing: border-box;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    -moz-appearance: textfield;\n  }\n\n  @media (min-width: 992px) {\n    flex-direction: row;\n    & > div {\n      width: 48%;\n    }\n\n    > input {\n      width: 48%;\n    }\n  }\n"])), function (props) {
+var WrapperRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100% !important;\n  flex-direction: column;\n  justify-content: space-between;\n\n  & > div {\n    width: 100%;\n    height: 57px;\n    margin-bottom: 20px;\n    background-color: ", ";\n    border: none;\n    font-size: 14px;\n    border-radius: 8px;\n    > div:first-child {\n      height: 100%;\n    }\n  }\n\n  .order-status-multi-select {\n    p {\n      padding: 0;\n      color: ", " !important;\n    }\n  }\n\n  .date-filter-container {\n    z-index: 100;\n  }\n\n  > input {\n    width: 100%;\n    height: 57px;\n    margin-bottom: 20px;\n    padding: 10px 25px;\n    box-sizing: border-box;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    -moz-appearance: textfield;\n  }\n\n  @media (min-width: 992px) {\n    flex-direction: row;\n    & > div {\n      width: 48%;\n    }\n\n    > input {\n      width: 48%;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.secundary;
 }, function (props) {
   return props.theme.colors.headingColor;
@@ -39,7 +39,7 @@ var SelectWrapper = _styledComponents.default.div(_templateObject10 || (_templat
   return props.theme.colors.secundary;
 });
 exports.SelectWrapper = SelectWrapper;
-var Option = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var Option = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  padding: 5px;\n"])), function (props) {
   return props.theme.colors.secundaryContrast;
 });
 exports.Option = Option;

package/_modules/components/Shared/CitySelector/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PlaceholderTitle = exports.Option = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -21,16 +21,13 @@ var Option = _styledComponents.default.div(_templateObject || (_templateObject =
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n    "])));
 }, function (_ref3) {
   var isDefault = _ref3.isDefault;
-  return !isDefault && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\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: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n    "])));
-  });
+  return !isDefault && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: 10px;\n  "])));
 });
 exports.Option = Option;
-var PlaceholderTitle = (0, _styledComponents.default)(Option)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n\n  ", "\n"])), function (props) {
+var PlaceholderTitle = (0, _styledComponents.default)(Option)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n\n  ", "\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (_ref4) {
   var isDefault = _ref4.isDefault;
-  return isDefault ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding: 5px 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    padding: 10px;\n    margin-right: 0px;\n    margin-left: 0px;\n  "])));
+  return isDefault ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding: 5px 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    padding: 10px;\n    margin-right: 0px;\n    margin-left: 0px;\n  "])));
 });
 exports.PlaceholderTitle = PlaceholderTitle;

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

@@ -27,7 +27,9 @@ var InputPhoneNumber = function InputPhoneNumber(props) {
     value = props.value,
     setValue = props.setValue,
     handleIsValid = props.handleIsValid,
-    disabled = props.disabled;
+    disabled = props.disabled,
+    isUser = props.isUser,
+    defaultCountry = props.defaultCountry;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -62,7 +64,7 @@ var InputPhoneNumber = function InputPhoneNumber(props) {
   }), /*#__PURE__*/_react.default.createElement(_reactPhoneNumberInput.default, {
     disabled: disabled,
     placeholder: t('PHONE_NUMBER', 'Phone number'),
-    defaultCountry: (0, _utils.findExitingCode)(configs === null || configs === void 0 ? void 0 : (_configs$default_coun = configs.default_country_code) === null || _configs$default_coun === void 0 ? void 0 : (_configs$default_coun2 = _configs$default_coun.value) === null || _configs$default_coun2 === void 0 ? void 0 : _configs$default_coun2.toUpperCase()),
+    defaultCountry: defaultCountry !== null && defaultCountry !== void 0 ? defaultCountry : (0, _utils.findExitingCode)(configs === null || configs === void 0 ? void 0 : (_configs$default_coun = configs.default_country_code) === null || _configs$default_coun === void 0 ? void 0 : (_configs$default_coun2 = _configs$default_coun.value) === null || _configs$default_coun2 === void 0 ? void 0 : _configs$default_coun2.toUpperCase()),
     value: value,
     displayInitialValueAsLocalNumber: true,
     onChange: function onChange(val) {

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

@@ -48,6 +48,7 @@ var UserAddFormUI = function UserAddFormUI(props) {
     handleChangeUserType = props.handleChangeUserType,
     handlechangeImage = props.handlechangeImage,
     handleChangeSwtich = props.handleChangeSwtich,
+    defaultCountry = props.defaultCountry,
     defaultPhoneNumber = props.defaultPhoneNumber,
     isFromCustomOrder = props.isFromCustomOrder,
     hideUserTypeSelector = props.hideUserTypeSelector;
@@ -238,7 +239,6 @@ var UserAddFormUI = function UserAddFormUI(props) {
   }, [formMethods]);
   (0, _react.useEffect)(function () {
     if (defaultPhoneNumber) {
-      setUserPhoneNumber(defaultPhoneNumber);
       handleChangePhoneNumber(defaultPhoneNumber, true);
     }
   }, [defaultPhoneNumber]);
@@ -302,10 +302,11 @@ var UserAddFormUI = function UserAddFormUI(props) {
       autoComplete: "off"
     }));
   }), !!showInputPhoneNumber && /*#__PURE__*/_react.default.createElement(_Shared.InputPhoneNumber, {
+    defaultCountry: defaultCountry,
     value: userPhoneNumber,
     setValue: handleChangePhoneNumber,
     handleIsValid: setIsValidPhoneNumber
-  }), !isCheckout && /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  }), !isCheckout && !isFromCustomOrder && /*#__PURE__*/_react.default.createElement(_styles.Input, {
     type: "password",
     name: "password",
     className: "form",

package/_modules/utils/index.js

@@ -365,7 +365,7 @@ var convertHMS = function convertHMS(value) {
   if (seconds < 10) {
     seconds = '0' + seconds;
   }
-  return sec < 0 ? '-' : '' + hours + ':' + minutes + ':' + seconds; // Return is HH : MM : SS
+  return sec < 0 ? '-' : '' + (hours === '00' ? '' : hours + ':') + minutes + ':' + seconds; // Return is HH : MM : SS
 };
 
 /**

package/package.json

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

package/src/components/BusinessIntelligence/AnalyticsOrdersAcceptSpend/index.js

@@ -11,6 +11,7 @@ import {
   EmptyContent
 } from './styles'
 import Skeleton from 'react-loading-skeleton'
+import { convertHMS } from '../../../utils'
 
 export const AnalyticsOrdersAcceptSpend = (props) => {
   const {
@@ -41,8 +42,7 @@ export const AnalyticsOrdersAcceptSpend = (props) => {
           dataList?.data ? (
             <OrdersAcceptSpendContent>
               <TimeContentWrapper>
-                <h1>{dataList?.data && (parseNumber(((dataList?.data * 1) / 60), { separator: '.' }))}</h1>
-                <p>{t('MINUTES', 'Minutes')}</p>
+                <h1>{dataList?.data && convertHMS(parseNumber(((dataList?.data * 1)), { separator: '.' }))}</h1>
               </TimeContentWrapper>
               <ReviewContentWrapper>
                 <ReviewBlock>

package/src/components/BusinessIntelligence/AnalyticsOrdersAcceptSpend/styles.js

@@ -33,6 +33,7 @@ export const ReviewContentWrapper = styled.div`
 export const TimeContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  margin-bottom: 35px;
   
   h1{
     font-weight: 500;
@@ -51,7 +52,6 @@ export const OrdersAcceptSpendContent = styled.div`
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  margin-bottom: 30px;
 `
 
 export const ReviewBlock = styled.div`

package/src/components/BusinessIntelligence/AnalyticsSpendList/index.js

@@ -11,6 +11,7 @@ import {
   EmptyContent
 } from './styles'
 import Skeleton from 'react-loading-skeleton'
+import { convertHMS } from '../../../utils'
 
 export const AnalyticsSpendList = (props) => {
   const {
@@ -42,8 +43,7 @@ export const AnalyticsSpendList = (props) => {
           dataList?.data ? (
             <AnalyticsSpendListContent>
               <TimeContentWrapper>
-                <h1>{parseNumber((dataList?.data * 1), { separator: '.' })}</h1>
-                <p>{t('SECONDS', 'Seconds')}</p>
+                <h1>{convertHMS(parseNumber((dataList?.data * 1), { separator: '.' }))}</h1>
               </TimeContentWrapper>
               <ReviewContentWrapper>
                 <ReviewBlock>

package/src/components/BusinessIntelligence/AnalyticsSpendList/styles.js

@@ -34,6 +34,7 @@ export const ReviewContentWrapper = styled.div`
 export const TimeContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  margin-bottom: 35px;
 
   h1{
     font-weight: 500;
@@ -53,7 +54,6 @@ export const AnalyticsSpendListContent = styled.div`
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  margin-bottom: 30px;
   flex-wrap: wrap;
   > div {
     margin-top: 10px;

package/src/components/BusinessIntelligence/AnalyticsSpendTimes/index.js

@@ -33,7 +33,7 @@ export const AnalyticsSpendTimes = (props) => {
         return axe === history?.time
       })
       if (index !== -1) {
-        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.accept_spend })
+        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.accept_spend ? chartDataList?.data[index]?.accept_spend / 60 : 0 })
       } else {
         values.push({ x: axe, y: 0 })
       }
@@ -48,7 +48,7 @@ export const AnalyticsSpendTimes = (props) => {
         return axe === history?.time
       })
       if (index !== -1) {
-        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.pickup_spend })
+        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.pickup_spend ? chartDataList?.data[index]?.pickup_spend / 60 : 0 })
       } else {
         values.push({ x: axe, y: 0 })
       }
@@ -63,7 +63,7 @@ export const AnalyticsSpendTimes = (props) => {
         return axe === history?.time
       })
       if (index !== -1) {
-        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.delivery_spend })
+        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.delivery_spend ? chartDataList?.data[index]?.delivery_spend / 60 : 0 })
       } else {
         values.push({ x: axe, y: 0 })
       }
@@ -78,7 +78,7 @@ export const AnalyticsSpendTimes = (props) => {
         return axe === history?.time
       })
       if (index !== -1) {
-        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.complete_spend })
+        values.push({ x: chartDataList?.data[index]?.time, y: chartDataList?.data[index]?.complete_spend ? chartDataList?.data[index]?.complete_spend / 60 : 0 })
       } else {
         values.push({ x: axe, y: 0 })
       }

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

@@ -5,7 +5,7 @@ export const Option = styled.div`
   display: flex;
   align-items: center;
   column-gap: 10px;
-  padding: 5px 10px;
+  padding: 5px;
 
   img {
     width: 45px;

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

@@ -10,7 +10,7 @@ export const Option = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 15px;
+  padding: 10px;
   column-gap: 20px;
 
   svg {

package/src/components/Orders/CreateCustomOrder/CustomOrderDetails/index.js

@@ -29,11 +29,12 @@ const CustomOrderDetailsUI = (props) => {
     handeUpdateProductCart,
     cart,
     onClose,
-    handleOpenCustomOrderDetail
+    handleOpenCustomOrderDetail,
+    defaultCountryCodeState
   } = props
 
   const [, t] = useLanguage()
-  const [, { changeAddress }] = useOrder()
+  const [orderState, { changeAddress }] = useOrder()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
 
@@ -56,9 +57,9 @@ const CustomOrderDetailsUI = (props) => {
   }, [customerAddress?.id])
 
   useEffect(() => {
-    if (!customerAddress?.location) return
+    if (!customerAddress?.location || orderState?.loading) return
     getBusinessList(customerAddress.location)
-  }, [customerAddress?.location])
+  }, [customerAddress?.location, orderState])
 
   useEffect(() => {
     if (customersPhones?.error) {
@@ -78,6 +79,7 @@ const CustomOrderDetailsUI = (props) => {
           onChangeNumber={onChangeNumber}
           handleParentSidebarMove={handleParentSidebarMove}
           customerAddress={customerAddress}
+          defaultCountryCodeState={defaultCountryCodeState}
         />
         {customerAddress?.location && (
           <>

package/src/components/Orders/CreateCustomOrder/Map/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState, useEffect } from 'react'
-import { useConfig } from 'ordering-components-admin-external'
+import { useConfig, useOrder } from 'ordering-components-admin-external'
 import GoogleMapReact, { fitBounds } from 'google-map-react'
 import { InterActOrderMarker } from '../../InterActOrderMarker'
 
@@ -11,10 +11,13 @@ export const Map = (props) => {
     customer,
     customerLocation
   } = props
+
   const [{ configs }] = useConfig()
+  const [orderState] = useOrder()
 
   const mapRef = useRef(null)
   const googleMapsApiKey = useMemo(() => configs?.google_maps_api_key?.value, [configs])
+  const deliveryType = useMemo(() => orderState?.options?.type, [orderState])
   const defaultLatitude = Number(configs?.location_default_latitude?.value)
   const defaultLongitude = Number(configs?.location_default_longitude?.value)
   const isInvalidDefaultLocation = isNaN(defaultLatitude) || isNaN(defaultLongitude)
@@ -23,10 +26,27 @@ export const Map = (props) => {
     lng: !isInvalidDefaultLocation ? defaultLongitude : -73.9678064
   }
 
+  const greenFillStyle = {
+    fillColor: '#008000',
+    fillOpacity: 0.3,
+    strokeColor: '#008000',
+    strokeOpacity: 0.8,
+    strokeWeight: 2
+  }
+
+  const units = {
+    mi: 1609,
+    km: 1000
+  }
+
   const defaultZoom = 10
   const [mapLoaded, setMapLoaded] = useState(true)
   const [mapCenter, setMapCenter] = useState(defaultCenter)
   const [mapZoom, setMapZoom] = useState(10)
+  const [map, setMap] = useState(null)
+  const [maps, setMaps] = useState(null)
+  const [circleZones, setCircleZones] = useState([])
+  const [polygonZones, setPolygonZones] = useState([])
 
   const handleMapChange = (data) => {
     if (!data?.zoom) return
@@ -51,6 +71,59 @@ export const Map = (props) => {
     newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
     bounds.extend(newPoint)
 
+    // drwa delivery zones
+    circleZones.forEach(circle => circle.setMap(null))
+    polygonZones.forEach(polygon => polygon.setMap(null))
+    const _circleZones = []
+    const _polygonZones = []
+    if (map && maps && business?.zones && deliveryType === 1) {
+      const center = business?.location
+      for (const deliveryZone of business.zones) {
+        if (deliveryZone.type === 1 && deliveryZone?.data?.center && deliveryZone?.data?.radio) {
+          const newCircleZone = new window.google.maps.Circle({
+            ...greenFillStyle,
+            editable: false,
+            center: deliveryZone?.data.center,
+            radius: deliveryZone?.data.radio * 1000
+          })
+          newCircleZone.setMap(map)
+          bounds.union(newCircleZone.getBounds())
+          map.fitBounds(bounds)
+          _circleZones.push(newCircleZone)
+        }
+        if (deliveryZone.type === 5 && deliveryZone?.data?.distance) {
+          const newCircleZone = new window.google.maps.Circle({
+            ...greenFillStyle,
+            editable: false,
+            center: center,
+            radius: deliveryZone?.data.distance * units[deliveryZone?.data?.unit]
+          })
+          newCircleZone.setMap(map)
+          bounds.union(newCircleZone.getBounds())
+          map.fitBounds(bounds)
+          _circleZones.push(newCircleZone)
+        }
+        if (deliveryZone?.type === 2 && Array.isArray(deliveryZone?.data)) {
+          const newPolygonZone = new window.google.maps.Polygon({
+            ...greenFillStyle,
+            editable: false,
+            paths: deliveryZone?.data
+          })
+          newPolygonZone.setMap(map)
+          if (Array.isArray(deliveryZone?.data)) {
+            for (const position of deliveryZone?.data) {
+              bounds.extend(position)
+            }
+            map.fitBounds(bounds)
+          }
+          _polygonZones.push(newPolygonZone)
+        }
+      }
+    }
+    setCircleZones(_circleZones)
+    setPolygonZones(_polygonZones)
+
+    // fit map center and zoone
     const newBounds = {
       ne: {
         lat: bounds.getNorthEast()?.lat?.(),
@@ -74,7 +147,13 @@ export const Map = (props) => {
   useEffect(() => {
     if (mapLoaded) return
     mapFit()
-  }, [customerLocation, business?.location, mapLoaded])
+  }, [customerLocation, business?.location, mapLoaded, map, maps, business?.zones, deliveryType])
+
+  const onMapLoaded = (map, maps) => {
+    setMapLoaded(false)
+    setMap(map)
+    setMaps(maps)
+  }
 
   return (
     <Container ref={mapRef}>
@@ -84,7 +163,7 @@ export const Map = (props) => {
             key: window.document.getElementById('__googleMapsScriptId') ? null : googleMapsApiKey,
             libraries: ['places', 'geometry', 'drawing', 'visualization']
           }}
-          onGoogleApiLoaded={() => setMapLoaded(false)}
+          onGoogleApiLoaded={({ map, maps }) => onMapLoaded(map, maps)}
           defaultCenter={defaultCenter}
           center={mapCenter}
           defaultZoom={defaultZoom}