ordering-ui-external 1.9.2 → 1.9.4

package/_modules/themes/five/src/components/ProductOptionSubOption/index.js

@@ -11,6 +11,7 @@ var _BsCircleFill = _interopRequireDefault(require("@meronex/icons/bs/BsCircleFi
 var _BsCircleHalf = _interopRequireDefault(require("@meronex/icons/bs/BsCircleHalf"));
 var _BsDashCircle = _interopRequireDefault(require("@meronex/icons/bs/BsDashCircle"));
 var _BsPlusCircle = _interopRequireDefault(require("@meronex/icons/bs/BsPlusCircle"));
+var _useWindowSize2 = require("../../../../../hooks/useWindowSize");
 var _styles = require("./styles");
 var _MdCheckBox = _interopRequireDefault(require("@meronex/icons/md/MdCheckBox"));
 var _MdCheckBoxOutlineBlank = _interopRequireDefault(require("@meronex/icons/md/MdCheckBoxOutlineBlank"));
@@ -51,6 +52,8 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
   var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
     _useUtils2 = _slicedToArray(_useUtils, 1),
     parsePrice = _useUtils2[0].parsePrice;
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     showMessage = _useState2[0],
@@ -109,7 +112,7 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
     disabled: true
   })), suboption.image && suboption.image !== '-' && /*#__PURE__*/_react.default.createElement(_styles.SubOptionThumbnail, {
     src: suboption.image
-  }), /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name), showMessage && /*#__PURE__*/_react.default.createElement("span", null, "".concat(t('OPTIONS_MAX_LIMIT', 'Maximum options to choose'), ": ").concat(option === null || option === void 0 ? void 0 : option.max)))), /*#__PURE__*/_react.default.createElement(_styles.RightOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.QuantityControl, null, (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, {
+  }), /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name), showMessage && width > 576 && /*#__PURE__*/_react.default.createElement("span", null, "".concat(t('OPTIONS_MAX_LIMIT', 'Maximum options to choose'), ": ").concat(option === null || option === void 0 ? void 0 : option.max)))), /*#__PURE__*/_react.default.createElement(_styles.RightOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.QuantityControl, null, (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, {
     disabled: state.quantity === 0 || isSoldOut,
     onClick: handleDecrement
   }), state.quantity, /*#__PURE__*/_react.default.createElement(_BsPlusCircle.default, {
@@ -136,7 +139,9 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
     onClick: function onClick(e) {
       return handlePosition(e, 'right');
     }
-  })))), /*#__PURE__*/_react.default.createElement(_styles.SuboptionPrice, null, price > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "+ ", parsePrice(price)))), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
+  })))), /*#__PURE__*/_react.default.createElement(_styles.SuboptionPrice, null, price > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "+ ", parsePrice(price)))), showMessage && width < 576 && /*#__PURE__*/_react.default.createElement(_styles.Text, {
+    noMargin: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, "".concat(t('OPTIONS_MAX_LIMIT', 'Maximum options to choose'), ": ").concat(option === null || option === void 0 ? void 0 : option.max))), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
     return /*#__PURE__*/_react.default.createElement(AfterComponent, _extends({
       key: i
     }, props));

package/_modules/themes/five/src/components/ProductOptionSubOption/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Text = exports.SuboptionPrice = exports.SubOptionThumbnail = exports.RightOptionContainer = exports.QuantityControl = exports.PositionControl = exports.LeftOptionContainer = exports.IconControl = exports.Container = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -21,50 +21,53 @@ var IconControl = _styledComponents.default.div(_templateObject2 || (_templateOb
   return props.theme.colors.lightGray;
 });
 exports.IconControl = IconControl;
-var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  display: flex;\n  font-weight: 300;\n  color: #555;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0 5px;\n\n  div {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 14px;\n    color: ", ";\n  }\n\n  span {\n    margin-left: 10px;\n    font-weight: 500;\n    color: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    ", "\n  }\n"])), function (props) {
+var Text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  display: flex;\n  font-weight: 300;\n  color: #555;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0 5px;\n\n  div {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 14px;\n    color: ", ";\n  }\n\n  span {\n    margin-left: 10px;\n    font-weight: 500;\n    color: ", ";\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    ", "\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.darkGray;
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme2;
   return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;    \n    "])));
+}, function (_ref) {
+  var noMargin = _ref.noMargin;
+  return noMargin && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    span {\n      margin: 0;\n    }\n  "])));
 });
 exports.Text = Text;
-var SubOptionThumbnail = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n  border-radius: 8px;\n  background-image: url(", ");\n  background-repeat: no-repeat, repeat;\n  width: 40px;\n  height: 40px;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref) {
-  var src = _ref.src;
+var SubOptionThumbnail = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-block;\n  border-radius: 8px;\n  background-image: url(", ");\n  background-repeat: no-repeat, repeat;\n  width: 40px;\n  height: 40px;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  justify-content: center;\n  align-items: center;\n"])), function (_ref2) {
+  var src = _ref2.src;
   return src;
 });
 exports.SubOptionThumbnail = SubOptionThumbnail;
-var QuantityControl = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  align-items: center;\n  font-weight: 300;\n  font-size: 18px;\n  margin: 0 5px;\n\n  svg {\n    color: ", ";\n    font-size: 20px;\n    margin-right: 3px;\n    ", "\n  }\n\n  svg[disabled] {\n    color: #CBCBCB;\n  }\n\n  svg:last-child {\n    margin-left: 3px;\n    margin-right: 0;\n    ", "\n  }\n"])), function (props) {
+var QuantityControl = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  align-items: center;\n  font-weight: 300;\n  font-size: 18px;\n  margin: 0 5px;\n\n  svg {\n    color: ", ";\n    font-size: 20px;\n    margin-right: 3px;\n    ", "\n  }\n\n  svg[disabled] {\n    color: #CBCBCB;\n  }\n\n  svg:last-child {\n    margin-left: 3px;\n    margin-right: 0;\n    ", "\n  }\n"])), function (props) {
   return props.theme.colors.darkGray;
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme3;
-  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-left: 3px;\n      margin-right: 0px;\n    "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-left: 3px;\n      margin-right: 0px;\n    "])));
 }, function (props) {
   var _props$theme4;
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-right: 3px;\n      margin-left: 0px;\n  "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-right: 3px;\n      margin-left: 0px;\n  "])));
 });
 exports.QuantityControl = QuantityControl;
-var PositionControl = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: #CBCBCB;\n  font-weight: 300;\n  font-size: 18px;\n  margin: 0 5px;\n\n  svg {\n    font-size: 20px;\n    margin-right: 3px;\n    ", "\n    &.reverse {\n      transform: rotate(180deg);\n    }\n\n    &.selected {\n      color: ", ";\n    }\n\n    &:last-child {\n      margin-right: 0;\n      ", "\n    }\n  }\n"])), function (props) {
+var PositionControl = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: #CBCBCB;\n  font-weight: 300;\n  font-size: 18px;\n  margin: 0 5px;\n\n  svg {\n    font-size: 20px;\n    margin-right: 3px;\n    ", "\n    &.reverse {\n      transform: rotate(180deg);\n    }\n\n    &.selected {\n      color: ", ";\n    }\n\n    &:last-child {\n      margin-right: 0;\n      ", "\n    }\n  }\n"])), function (props) {
   var _props$theme5;
-  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      margin-left: 3px;\n      margin-right: 0px;\n    "])));
+  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      margin-left: 3px;\n      margin-right: 0px;\n    "])));
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme6;
-  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        margin-left: 0;\n      "])));
+  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        margin-left: 0;\n      "])));
 });
 exports.PositionControl = PositionControl;
-var SuboptionPrice = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  white-space: nowrap;\n  font-weight: 300;\n  font-size: 14px;\n  color: ", ";\n  margin-left: 5px;\n  min-width: 60px;\n  ", "\n"])), function (props) {
+var SuboptionPrice = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  white-space: nowrap;\n  font-weight: 300;\n  font-size: 14px;\n  color: ", ";\n  margin-left: 5px;\n  min-width: 60px;\n  ", "\n"])), function (props) {
   return props.theme.colors.darkGray;
 }, function (props) {
   var _props$theme7;
-  return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
+  return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
 });
 exports.SuboptionPrice = SuboptionPrice;
-var LeftOptionContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 70%;\n  align-items: center;\n"])));
+var LeftOptionContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 70%;\n  align-items: center;\n"])));
 exports.LeftOptionContainer = LeftOptionContainer;
-var RightOptionContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 25%;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var RightOptionContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 25%;\n  align-items: center;\n  justify-content: space-between;\n"])));
 exports.RightOptionContainer = RightOptionContainer;

package/_modules/themes/five/src/components/SingleOrderCard/index.js

@@ -39,7 +39,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var SingleOrderCardUI = function SingleOrderCardUI(props) {
-  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _props$beforeElements, _props$beforeComponen, _order$business, _order$business2, _order$business4, _theme$images2, _theme$images2$dummie, _order$business5, _theme$images3, _theme$images3$dummie, _order$business6, _theme$images4, _theme$images4$dummie, _order$business7, _order$business8, _order$summary, _order$business9, _order$business10, _order$business11, _order$business12, _getOrderStatus, _order$business13, _order$summary2, _order$business14, _props$afterComponent, _props$afterElements;
+  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _props$beforeElements, _props$beforeComponen, _order$business, _order$business2, _order$business3, _order$business4, _order$business5, _order$business6, _theme$images2, _theme$images2$dummie, _order$business7, _theme$images3, _theme$images3$dummie, _order$business8, _theme$images4, _theme$images4$dummie, _order$business9, _order$business10, _order$summary, _order$business11, _order$business12, _order$business13, _order$business14, _getOrderStatus, _order$business15, _order$summary2, _order$business16, _props$afterComponent, _props$afterElements;
   var order = props.order,
     getOrderStatus = props.getOrderStatus,
     isBusinessesPage = props.isBusinessesPage,
@@ -230,6 +230,7 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
     }, props));
   }), /*#__PURE__*/_react.default.createElement(_styles.Container, {
     id: "order-card",
+    w: screen.width - (screen.width < 411 ? -60 : 60),
     isBusinessesPage: isBusinessesPage,
     isCustomerMode: isCustomerMode,
     onClick: function onClick(e) {
@@ -241,33 +242,32 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
     width: 60,
     height: 60
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isCustomerMode && showBusinessLogo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (order === null || order === void 0 ? void 0 : (_order$business = order.business) === null || _order$business === void 0 ? void 0 : _order$business.length) > 1 ? /*#__PURE__*/_react.default.createElement(_styles.MultiLogosContainer, null, order === null || order === void 0 ? void 0 : (_order$business2 = order.business) === null || _order$business2 === void 0 ? void 0 : _order$business2.map(function (business, i) {
-    var _order$business3, _theme$images, _theme$images$dummies;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: business === null || business === void 0 ? void 0 : business.id
-    }, i > 1 ? /*#__PURE__*/_react.default.createElement("p", null, "+ ", (order === null || order === void 0 ? void 0 : (_order$business3 = order.business) === null || _order$business3 === void 0 ? void 0 : _order$business3.length) - 2) : /*#__PURE__*/_react.default.createElement(_styles.BusinessLogoWrapper, {
+    var _theme$images, _theme$images$dummies;
+    return i < 2 && /*#__PURE__*/_react.default.createElement(_styles.BusinessLogoWrapper, {
+      key: business === null || business === void 0 ? void 0 : business.id,
       bgimage: optimizeImage((business === null || business === void 0 ? void 0 : business.logo) || ((_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$dummies = _theme$images.dummies) === null || _theme$images$dummies === void 0 ? void 0 : _theme$images$dummies.businessLogo), 'h_400,c_limit'),
       isMulti: true
-    }));
-  })) : /*#__PURE__*/_react.default.createElement(_styles.BusinessLogoWrapper, {
-    bgimage: optimizeImage((order === null || order === void 0 ? void 0 : (_order$business4 = order.business) === null || _order$business4 === void 0 ? void 0 : _order$business4.logo) || ((_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$dummie = _theme$images2.dummies) === null || _theme$images2$dummie === void 0 ? void 0 : _theme$images2$dummie.businessLogo), 'h_400,c_limit')
-  })), isCustomerMode && showBusinessLogo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (((_order$business5 = order.business) === null || _order$business5 === void 0 ? void 0 : _order$business5.logo) || ((_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$dummie = _theme$images3.dummies) === null || _theme$images3$dummie === void 0 ? void 0 : _theme$images3$dummie.businessLogo)) && /*#__PURE__*/_react.default.createElement(_styles.Logo, null, /*#__PURE__*/_react.default.createElement("img", {
-    src: ((_order$business6 = order.business) === null || _order$business6 === void 0 ? void 0 : _order$business6.logo) || ((_theme$images4 = theme.images) === null || _theme$images4 === void 0 ? void 0 : (_theme$images4$dummie = _theme$images4.dummies) === null || _theme$images4$dummie === void 0 ? void 0 : _theme$images4$dummie.businessLogo),
+    });
+  }), (order === null || order === void 0 ? void 0 : (_order$business3 = order.business) === null || _order$business3 === void 0 ? void 0 : _order$business3.length) > 1 && (order === null || order === void 0 ? void 0 : (_order$business4 = order.business) === null || _order$business4 === void 0 ? void 0 : _order$business4.length) - 2 > 0 && /*#__PURE__*/_react.default.createElement("p", null, "+ ", (order === null || order === void 0 ? void 0 : (_order$business5 = order.business) === null || _order$business5 === void 0 ? void 0 : _order$business5.length) - 2)) : /*#__PURE__*/_react.default.createElement(_styles.BusinessLogoWrapper, {
+    bgimage: optimizeImage((order === null || order === void 0 ? void 0 : (_order$business6 = order.business) === null || _order$business6 === void 0 ? void 0 : _order$business6.logo) || ((_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$dummie = _theme$images2.dummies) === null || _theme$images2$dummie === void 0 ? void 0 : _theme$images2$dummie.businessLogo), 'h_400,c_limit')
+  })), isCustomerMode && showBusinessLogo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (((_order$business7 = order.business) === null || _order$business7 === void 0 ? void 0 : _order$business7.logo) || ((_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$dummie = _theme$images3.dummies) === null || _theme$images3$dummie === void 0 ? void 0 : _theme$images3$dummie.businessLogo)) && /*#__PURE__*/_react.default.createElement(_styles.Logo, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: ((_order$business8 = order.business) === null || _order$business8 === void 0 ? void 0 : _order$business8.logo) || ((_theme$images4 = theme.images) === null || _theme$images4 === void 0 ? void 0 : (_theme$images4$dummie = _theme$images4.dummies) === null || _theme$images4$dummie === void 0 ? void 0 : _theme$images4$dummie.businessLogo),
     alt: "business-logo",
     width: "75px",
     height: "75px"
   })))), /*#__PURE__*/_react.default.createElement(_styles2.BusinessInformation, {
     activeOrders: true,
-    isMultiCart: (order === null || order === void 0 ? void 0 : (_order$business7 = order.business) === null || _order$business7 === void 0 ? void 0 : _order$business7.length) > 1
+    isMultiCart: (order === null || order === void 0 ? void 0 : (_order$business9 = order.business) === null || _order$business9 === void 0 ? void 0 : _order$business9.length) > 1
   }, isCustomerMode ? /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 120
-  }) : (_order$business8 = order.business) === null || _order$business8 === void 0 ? void 0 : _order$business8.name), /*#__PURE__*/_react.default.createElement(_styles.Price, {
+  }) : (_order$business10 = order.business) === null || _order$business10 === void 0 ? void 0 : _order$business10.name), /*#__PURE__*/_react.default.createElement(_styles.Price, {
     isBusinessesPage: isBusinessesPage,
     isCustomerMode: isCustomerMode
   }, /*#__PURE__*/_react.default.createElement("h2", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 50
   }) : parsePrice((order === null || order === void 0 ? void 0 : (_order$summary = order.summary) === null || _order$summary === void 0 ? void 0 : _order$summary.total) || (order === null || order === void 0 ? void 0 : order.total))))) : /*#__PURE__*/_react.default.createElement("h2", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 120
-  }) : (order === null || order === void 0 ? void 0 : (_order$business9 = order.business) === null || _order$business9 === void 0 ? void 0 : _order$business9.length) > 1 ? "".concat(t('GROUP_ORDER', 'Group Order'), " ").concat(t('No', 'No'), ". ").concat(order === null || order === void 0 ? void 0 : order.cart_group_id) : (_order$business10 = order.business) === null || _order$business10 === void 0 ? void 0 : _order$business10.name), isSkeleton ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : (order === null || order === void 0 ? void 0 : (_order$business11 = order.business) === null || _order$business11 === void 0 ? void 0 : _order$business11.length) > 1 ? "".concat(t('GROUP_ORDER', 'Group Order'), " ").concat(t('No', 'No'), ". ").concat(order === null || order === void 0 ? void 0 : order.cart_group_id) : (_order$business12 = order.business) === null || _order$business12 === void 0 ? void 0 : _order$business12.name), isSkeleton ? /*#__PURE__*/_react.default.createElement("div", {
     className: "orders-detail"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 150
@@ -275,7 +275,7 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
     className: "orders-detail"
   }, (order === null || order === void 0 ? void 0 : order.id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDot.default, null), /*#__PURE__*/_react.default.createElement("p", {
     name: "order_number"
-  }, (order === null || order === void 0 ? void 0 : (_order$business11 = order.business) === null || _order$business11 === void 0 ? void 0 : _order$business11.length) > 1 ? "".concat(order === null || order === void 0 ? void 0 : (_order$business12 = order.business) === null || _order$business12 === void 0 ? void 0 : _order$business12.length, " ").concat(t('ORDERS', 'orders')) : "".concat(t('ORDER_NUM', 'Order No.'), " ").concat(order.id))), showDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDot.default, null), /*#__PURE__*/_react.default.createElement("p", null, order !== null && order !== void 0 && order.delivery_datetime_utc ? parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime_utc, {
+  }, (order === null || order === void 0 ? void 0 : (_order$business13 = order.business) === null || _order$business13 === void 0 ? void 0 : _order$business13.length) > 1 ? "".concat(order === null || order === void 0 ? void 0 : (_order$business14 = order.business) === null || _order$business14 === void 0 ? void 0 : _order$business14.length, " ").concat(t('ORDERS', 'orders')) : "".concat(t('ORDER_NUM', 'Order No.'), " ").concat(order.id))), showDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDot.default, null), /*#__PURE__*/_react.default.createElement("p", null, order !== null && order !== void 0 && order.delivery_datetime_utc ? parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime_utc, {
     outputFormat: 'MM/DD/YY hh:mm A'
   }) : parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime, {
     utc: false
@@ -287,7 +287,7 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
     isBusinessesPage: isBusinessesPage
   }, !pastOrders && /*#__PURE__*/_react.default.createElement("h2", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 50
-  }) : parsePrice((order === null || order === void 0 ? void 0 : (_order$business13 = order.business) === null || _order$business13 === void 0 ? void 0 : _order$business13.length) > 1 ? order === null || order === void 0 ? void 0 : order.total : (order === null || order === void 0 ? void 0 : (_order$summary2 = order.summary) === null || _order$summary2 === void 0 ? void 0 : _order$summary2.total) || (order === null || order === void 0 ? void 0 : order.total)))), pastOrders && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, !isOrderReviewed && !isFavorite && (!(order !== null && order !== void 0 && order.review) || order.driver && !(order !== null && order !== void 0 && order.user_review)) && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }) : parsePrice((order === null || order === void 0 ? void 0 : (_order$business15 = order.business) === null || _order$business15 === void 0 ? void 0 : _order$business15.length) > 1 ? order === null || order === void 0 ? void 0 : order.total : (order === null || order === void 0 ? void 0 : (_order$summary2 = order.summary) === null || _order$summary2 === void 0 ? void 0 : _order$summary2.total) || (order === null || order === void 0 ? void 0 : order.total)))), pastOrders && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, !isOrderReviewed && !isFavorite && (!(order !== null && order !== void 0 && order.review) || order.driver && !(order !== null && order !== void 0 && order.user_review)) && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     outline: true,
     color: "primary",
     className: "review",
@@ -301,7 +301,7 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
     onClick: function onClick() {
       return handleClickReorder(order);
     }
-  }, cartState !== null && cartState !== void 0 && cartState.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder'))), !(order !== null && order !== void 0 && (_order$business14 = order.business) !== null && _order$business14 !== void 0 && _order$business14.length) && /*#__PURE__*/_react.default.createElement(_styles.FavoriteWrapper, {
+  }, cartState !== null && cartState !== void 0 && cartState.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder'))), !(order !== null && order !== void 0 && (_order$business16 = order.business) !== null && _order$business16 !== void 0 && _order$business16.length) && /*#__PURE__*/_react.default.createElement(_styles.FavoriteWrapper, {
     onClick: function onClick() {
       return handleChangeFavorite(order);
     },

package/_modules/themes/five/src/components/SingleOrderCard/styles.js

@@ -7,19 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleContainer = exports.ReviewWrapper = exports.Price = exports.MultiLogosContainer = exports.Map = exports.Logo = exports.FavoriteWrapper = exports.Content = exports.Container = exports.ButtonWrapper = exports.BusinessLogoWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = _interopRequireDefault(require("react"));
-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;
+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;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _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 Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  margin: 10px;\n  position: relative;\n  background: white;\n  border-radius: 16px;\n  display: inline-block;\n  text-align: left;\n  transition: all 0.3s ease;\n\n  > span {\n    display: flex;\n  }\n\n  ", "\n\n  &:hover {\n    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;\n  }\n\n  button.load-orders {\n    padding: 10px 30px;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  @media (min-width: 480px) {\n    min-width: 430px;\n    max-height: ", ";\n    width: 430px;\n  }\n\n  @media(min-width: 993px){\n    ", "\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  margin: 10px 0;\n  position: relative;\n  background: white;\n  border-radius: 16px;\n  display: inline-block;\n  text-align: left;\n  transition: all 0.3s ease;\n\n  > span {\n    display: flex;\n  }\n\n  ", "\n\n  &:hover {\n    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;\n  }\n\n  button.load-orders {\n    padding: 10px 30px;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  @media (min-width: 480px) {\n    min-width: 430px;\n    max-height: ", ";\n    width: 430px;\n  }\n\n  @media (min-width: 768px) {\n    margin: 10px;\n  }\n\n  @media(min-width: 993px){\n    ", "\n  }\n"])), function (_ref) {
   var isCustomerMode = _ref.isCustomerMode;
-  return isCustomerMode ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 300px;\n    width: 300px;\n    display: inline-block;\n  "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    min-width: 380px;\n    width: 380px;\n    height: ", ";\n    max-height: ", ";\n  "])), function (_ref2) {
-    var isBusinessesPage = _ref2.isBusinessesPage;
-    return isBusinessesPage && '300px';
+  return isCustomerMode ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 300px;\n    width: 300px;\n    display: inline-block;\n  "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    min-width: ", "px;\n    width: ", "px;\n    height: ", ";\n    max-height: ", ";\n  "])), function (_ref2) {
+    var w = _ref2.w;
+    return w !== null && w !== void 0 ? w : 380;
   }, function (_ref3) {
-    var isBusinessesPage = _ref3.isBusinessesPage;
+    var w = _ref3.w;
+    return w !== null && w !== void 0 ? w : 380;
+  }, function (_ref4) {
+    var isBusinessesPage = _ref4.isBusinessesPage;
+    return isBusinessesPage && '300px';
+  }, function (_ref5) {
+    var isBusinessesPage = _ref5.isBusinessesPage;
     return isBusinessesPage ? '300px' : '220px';
   });
 }, function (props) {
@@ -29,40 +35,42 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
   return (props.nobg || props.isBusinessesPage) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background: transparent;\n  "])));
 }, function (props) {
   return props.flex && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])));
-}, function (_ref4) {
-  var isBusinessesPage = _ref4.isBusinessesPage;
+}, function (_ref6) {
+  var isBusinessesPage = _ref6.isBusinessesPage;
   return isBusinessesPage ? '300px' : '250px';
-}, function (_ref5) {
-  var isBusinessesPage = _ref5.isBusinessesPage;
+}, function (_ref7) {
+  var isBusinessesPage = _ref7.isBusinessesPage;
   return isBusinessesPage && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin: 30px 20px;\n      width: calc(33% - 40px);\n    "])));
 });
 exports.Container = Container;
-var Content = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  border-radius: 16px;\n  padding: 10px;\n  ", "\n"])), function (_ref6) {
-  var isCustomerMode = _ref6.isCustomerMode;
+var Content = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  border-radius: 16px;\n  padding: 0;\n  ", "\n\n  @media (min-width: 768px) {\n    padding: 10px;\n  }\n"])), function (_ref8) {
+  var isCustomerMode = _ref8.isCustomerMode;
   return isCustomerMode ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    align-items: center;\n  "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    align-items: flex-start;\n    flex: 1;\n  "])));
 });
 exports.Content = Content;
-var Price = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 35%;\n  \n  ", "\n\n  h2 {\n    font-size: 16px;\n    margin-block-end: ", ";\n    margin-block-start: 0.1em;\n    font-weight: normal;\n  }\n  p {\n    margin-block-end: 0.1em;\n    margin-block-start: ", ";\n    color: #ff9300;\n    font-size: 0.8em;\n    overflow:hidden;\n    text-overflow: ellipsis;\n    margin-left: 5px;\n  }\n\n  p[name='view-cart']{\n    color: ", ";\n    cursor: pointer;\n  }\n\n  @media (min-width: 480px) {\n    ", "\n  }\n"])), function (_ref7) {
-  var isCustomerMode = _ref7.isCustomerMode;
+var Price = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 35%;\n  \n  ", "\n\n  h2 {\n    font-size: 16px;\n    margin-block-end: ", ";\n    margin-block-start: 0.1em;\n    font-weight: normal;\n  }\n  p {\n    margin-block-end: 0.1em;\n    margin-block-start: ", ";\n    color: #ff9300;\n    font-size: 0.8em;\n    overflow:hidden;\n    text-overflow: ellipsis;\n    margin-left: 5px;\n  }\n\n  p[name='view-cart']{\n    color: ", ";\n    cursor: pointer;\n  }\n\n  @media (min-width: 480px) {\n    ", "\n  }\n"])), function (_ref9) {
+  var isCustomerMode = _ref9.isCustomerMode;
   return isCustomerMode ? (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  text-align: end;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  "]))) : (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: column;\n    align-items: flex-end;\n  "])));
-}, function (_ref8) {
-  var isBusinessesPage = _ref8.isBusinessesPage;
+}, function (_ref10) {
+  var isBusinessesPage = _ref10.isBusinessesPage;
   return isBusinessesPage ? '0.1em' : '1em';
-}, function (_ref9) {
-  var isBusinessesPage = _ref9.isBusinessesPage;
+}, function (_ref11) {
+  var isBusinessesPage = _ref11.isBusinessesPage;
   return isBusinessesPage ? '0.1em' : '1em';
 }, function (props) {
   return props.theme.colors.primary;
-}, function (_ref10) {
-  var isCustomerMode = _ref10.isCustomerMode;
+}, function (_ref12) {
+  var isCustomerMode = _ref12.isCustomerMode;
   return !isCustomerMode && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      flex-direction: row;\n      align-items: center;\n    "])));
 });
 exports.Price = Price;
-var BusinessLogoWrapperStyled = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 55px;\n  min-width: 55px;\n  height: 55px;\n  min-height: 55px;\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  justify-content: center;\n  align-items: center;\n  border-radius: 7.6px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n\n  margin-left: 8px;\n\n  ", "\n\n  @media (min-width: 576px) {\n    width: 86px;\n    min-width: 86px;\n    height: 86px;\n    min-height: 86px;\n    ", "\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 8px;\n  "])));
-}, function (_ref11) {
-  var isMulti = _ref11.isMulti;
-  return isMulti && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      width: 55px;\n      min-width: 55px;\n      height: 55px;\n      min-height: 55px;\n    "])));
+var BusinessLogoWrapperStyled = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 55px;\n  min-width: 55px;\n  height: 55px;\n  min-height: 55px;\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  justify-content: center;\n  align-items: center;\n  border-radius: 7.6px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n\n  margin-right: 8px;\n  margin-left: 0px;\n\n  ", "\n\n  @media (min-width: 768px) {\n    margin-right: 0px;\n    margin-left: 8px;\n\n    ", "\n  }\n\n  @media (min-width: 576px) {\n    width: 86px;\n    min-width: 86px;\n    height: 86px;\n    min-height: 86px;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    margin-left: 8px;\n    margin-right: 0px;\n  "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      margin-left: 0px;\n      margin-right: 8px;\n    "])));
+}, function (_ref13) {
+  var isMulti = _ref13.isMulti;
+  return isMulti && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      width: 55px;\n      min-width: 55px;\n      height: 55px;\n      min-height: 55px;\n    "])));
 });
 var BusinessLogoWrapper = function BusinessLogoWrapper(props) {
   var style = {};
@@ -76,7 +84,7 @@ var BusinessLogoWrapper = function BusinessLogoWrapper(props) {
   }), props.children);
 };
 exports.BusinessLogoWrapper = BusinessLogoWrapper;
-var ButtonWrapper = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  top: 4px;\n  display: flex;\n  align-items: center;\n\n  button {\n    border-radius: 50px;\n    font-size: 10px;\n    line-height: 15px;\n    padding: 4px 8px;\n    border: 1px solid ", ";\n    margin: 5px;\n\n    &.reorder {\n      background: ", ";\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n"])), function (props) {
+var ButtonWrapper = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  top: 4px;\n  display: flex;\n  align-items: center;\n\n  button {\n    border-radius: 50px;\n    font-size: 10px;\n    line-height: 15px;\n    padding: 4px 8px;\n    border: 1px solid ", ";\n    margin: 5px;\n\n    &.reorder {\n      background: ", ";\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.theme.colors.primaryContrast;
 }, function (props) {
   return props.theme.colors.primaryContrast;
@@ -84,34 +92,34 @@ var ButtonWrapper = _styledComponents.default.div(_templateObject18 || (_templat
   return props.theme.colors.primary;
 });
 exports.ButtonWrapper = ButtonWrapper;
-var Logo = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  width: 55px;\n  height: 55px;\n  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));\n  border-radius: 7.6px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 7.6px;\n  }\n\n  @media (min-width: 480px){\n    width: 86px;\n    height: 86px;\n  }\n"])));
+var Logo = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: 55px;\n  height: 55px;\n  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));\n  border-radius: 7.6px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 7.6px;\n  }\n\n  @media (min-width: 480px){\n    width: 86px;\n    height: 86px;\n  }\n"])));
 exports.Logo = Logo;
-var TitleContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var TitleContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 exports.TitleContainer = TitleContainer;
-var Map = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  min-height: ", ";\n  img{\n    width: 100%;\n    height: 100%;\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    border-radius: ", ";\n    image-rendering: -webkit-optimize-contrast;\n    object-fit: cover;\n  }\n  @media(min-width: 480px){\n    height: ", ";\n    min-height: ", "\n  }\n"])), function (_ref12) {
-  var isBusinessesPage = _ref12.isBusinessesPage;
-  return isBusinessesPage ? '200px' : '88px';
-}, function (_ref13) {
-  var isBusinessesPage = _ref13.isBusinessesPage;
-  return isBusinessesPage && '175px';
-}, function (_ref14) {
+var Map = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  min-height: ", ";\n  img{\n    width: 100%;\n    height: 100%;\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    border-radius: ", ";\n    image-rendering: -webkit-optimize-contrast;\n    object-fit: cover;\n  }\n  @media(min-width: 480px){\n    height: ", ";\n    min-height: ", "\n  }\n"])), function (_ref14) {
   var isBusinessesPage = _ref14.isBusinessesPage;
-  return isBusinessesPage && '16px';
+  return isBusinessesPage ? '200px' : '88px';
 }, function (_ref15) {
   var isBusinessesPage = _ref15.isBusinessesPage;
-  return isBusinessesPage ? '200px' : '100px';
+  return isBusinessesPage && '175px';
 }, function (_ref16) {
   var isBusinessesPage = _ref16.isBusinessesPage;
+  return isBusinessesPage && '16px';
+}, function (_ref17) {
+  var isBusinessesPage = _ref17.isBusinessesPage;
+  return isBusinessesPage ? '200px' : '100px';
+}, function (_ref18) {
+  var isBusinessesPage = _ref18.isBusinessesPage;
   return isBusinessesPage && '200px';
 });
 exports.Map = Map;
-var FavoriteWrapper = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  position: absolute;\n  cursor: pointer;\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  top: 41px;\n  right: 10px;\n  ", "\n  svg {\n    color: ", ";\n    font-size: 16px;\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    left: 10px;\n    right: initial;\n  "])));
+var FavoriteWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  position: absolute;\n  cursor: pointer;\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  top: 41px;\n  right: 10px;\n  ", "\n  svg {\n    color: ", ";\n    font-size: 16px;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    left: 10px;\n    right: initial;\n  "])));
 }, function (props) {
   return props.theme.colors.danger500;
 });
 exports.FavoriteWrapper = FavoriteWrapper;
-var ReviewWrapper = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  .review-sent {\n    border-radius: 7.6px;\n  }\n"])));
+var ReviewWrapper = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  .review-sent {\n    border-radius: 7.6px;\n  }\n"])));
 exports.ReviewWrapper = ReviewWrapper;
-var MultiLogosContainer = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  p {\n    white-space: nowrap;\n  }\n"])));
+var MultiLogosContainer = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  p {\n    white-space: nowrap;\n  }\n"])));
 exports.MultiLogosContainer = MultiLogosContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -73,6 +73,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.4",
+    "@loadable/component": "^5.15.2",
     "@meronex/icons": "^4.0.0",
     "@popperjs/core": "^2.5.3",
     "@sentry/react": "^5.25.0",
@@ -85,7 +86,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.9.1",
+    "ordering-components-external": "1.9.2",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/components/BusinessesListing/index.js

@@ -94,9 +94,7 @@ const BusinessesListingUI = (props) => {
   }, [mapErrors])
 
   useEffect(() => {
-    if (orderState.loading && businessesList.loading) {
-    //  const newurl = window.location.protocol + '//' + window.location.host + window.location.pathname
-    //  window.history.pushState({ path: newurl }, '', newurl)
+    if (orderState.loading || businessesList.loading) {
       const params = new URLSearchParams()
       history.replace({ pathname: location.pathname, search: params.toString() })
       setPrevPage({ loading: true, page: 1 })

package/src/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -25,7 +25,9 @@ const SingleOrderCardUI = (props) => {
     reorderLoading,
     orderID,
     handleFavoriteOrder,
-    setOrderSelected
+    setOrderSelected,
+    onRedirectPage,
+    customArray
   } = props
 
   const theme = useTheme()
@@ -36,26 +38,35 @@ const SingleOrderCardUI = (props) => {
     handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
   }
 
+  const handleClickCard = (e, order) => {
+    if (e.target.closest('.favorite') || e.target.closest('.review') || e.target.closest('.reorder')) return
+    const params = {
+      [customArray ? 'cartUuid' : 'orderId']: customArray ? order.uuid : order?.cart_group_id ?? order.uuid
+    }
+    const page = customArray ? 'checkout' : order?.cart_group_id ? 'multi_orders' : 'order_detail'
+    onRedirectPage({ page, params })
+  }
+
   return (
-    <SingleCard key={order.id} id='order-card'>
+    <SingleCard key={order.id} id='order-card' onClick={(e) => handleClickCard(e, order)}>
       <OrderPastContent>
         {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
           <>
             {order?.business?.length > 1 ? (
               <MultiLogosContainer>
-                {order?.business?.map((business, i) => (
-                  <React.Fragment key={business?.id}>
-                    {i > 1 ? (
-                      <p>
-                        + {order?.business?.length - 2}
-                      </p>
-                    ) : (
-                      <PastLogo isMulti>
-                        <img src={business?.logo || theme.images?.dummies?.businessLogo} alt='business-logo' width='55px' height='64px' loading='lazy' />
-                      </PastLogo>
-                    )}
-                  </React.Fragment>
+                {order?.business?.map((business, i) => i < 2 && (
+                  <PastLogo
+                    key={business?.id}
+                    isMulti
+                  >
+                    <img src={business?.logo || theme.images?.dummies?.businessLogo} alt='business-logo' width='55px' height='64px' loading='lazy' />
+                  </PastLogo>
                 ))}
+                {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                  <p>
+                    + {order?.business?.length - 2}
+                  </p>
+                )}
               </MultiLogosContainer>
             ) : (
               <PastLogo>

package/src/components/VerticalOrdersLayout/styles.js

@@ -6,7 +6,11 @@ export const SingleCard = styled.div`
   display: flex;
   max-height: 100px;
   height: auto;
+  border-radius: 16px;
+  padding: 10px;
+  transition: all 0.3s ease;
   border-bottom: 1px solid #F5F6F6;
+  cursor: pointer;
 
   ${props => (
     props.theme.colors.backgroundPage === '#FFF' ||
@@ -24,6 +28,10 @@ export const SingleCard = styled.div`
       border-top: none !important;
     `}
   }
+
+  &:hover {
+    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
+  }
 `
 
 export const OrderPastContent = styled.div`

package/src/themes/five/index.js

@@ -108,6 +108,7 @@ import { SearchProducts } from './src/components/SearchProducts'
 import { MultiCartsPaymethodsAndWallets } from './src/components/MultiCartsPaymethodsAndWallets'
 import { ProfessionalProfile } from './src/components/ProfessionalProfile'
 import { OrderHistory } from './src/components/OrderDetails/OrderHistory'
+import { OrderContextUI } from './src/components/OrderContextUI'
 import { OrderBillSection } from './src/components/OrderDetails/OrderBillSection'
 import { OrderPreferencesSection } from './src/components/OrderDetails/OrderPreferencesSections'
 import { ActionsSection } from './src/components/OrderDetails/ActionsSection'
@@ -177,6 +178,7 @@ export {
   Modal,
   NotFoundSource,
   NotNetworkConnectivity,
+  OrderContextUI,
   OrderDetails,
   OrderItAgain,
   OrderDetailsKiosk,

package/src/themes/five/src/components/AddressList/index.js

@@ -64,7 +64,8 @@ const AddressListUI = (props) => {
     isCustomerMode,
     isFromCheckout,
     setIsAddressFormOpen,
-    isProfile
+    isProfile,
+    isMobile
   } = props
 
   const [, t] = useLanguage()
@@ -235,7 +236,7 @@ const AddressListUI = (props) => {
                 color={isEnableContinueButton && addressList?.addresses?.length > 0 ? 'secondary' : 'primary'}
                 onClick={() => openAddress({})}
                 disabled={orderState?.loading || actionStatus.loading}
-                style={isCompletedLayout ? { flex: 1, width: 'fit-content' } : {}}
+                style={(isCompletedLayout && !isMobile) ? { flex: 1, width: 'fit-content' } : {}}
               >
                 {(orderState?.loading || actionStatus.loading) ? t('LOADING', 'Loading') : t('ADD_NEW_ADDRESS', 'Add New Address')}
               </Button>

package/src/themes/five/src/components/BusinessItemAccordion/index.js

@@ -55,6 +55,7 @@ export const BusinessItemAccordion = (props) => {
   const [setRotate, setRotateState] = useState('accordion__icon')
   const [cartProductUpdated, setCartProductUpdated] = useState(null)
   const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
+  const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
 
   const content = useRef(null)
   const businessStore = useRef(null)
@@ -242,7 +243,7 @@ export const BusinessItemAccordion = (props) => {
           )}
           {props.children}
         </AccordionContent>
-        {!setActive && !isClosed && !!isProducts && !checkoutButtonDisabled && !isMultiCheckout && (
+        {!setActive && !isClosed && !!isProducts && !checkoutButtonDisabled && !isMultiCheckout && !checkoutMultiBusinessEnabled && (
           <PriceContainer>
             <h4>{parsePrice(total)}</h4>
             <Button onClick={handleClickCheckout} color='primary'>{t('CHECKOUT', 'Checkout')}</Button>

package/src/themes/five/src/components/BusinessListingSearch/index.js

@@ -100,6 +100,8 @@ export const BusinessListingSearchUI = (props) => {
   ]
 
   const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
+  const currentCart = Object.values(orderState?.carts).find(cart => cart?.business?.slug === curProduct?.business?.slug) ?? {}
+
 
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
@@ -420,11 +422,13 @@ export const BusinessListingSearchUI = (props) => {
           <ProductForm
             businessSlug={curProduct?.business?.slug}
             useKioskApp={props?.useKioskApp}
+            product={curProduct?.product}
             businessId={curProduct?.business?.id}
             categoryId={curProduct?.product?.category_id}
             productId={curProduct?.product?.id}
             onSave={handleRedirectToCart}
             handleUpdateProducts={(productId, changes) => handleUpdateProducts(productId, curProduct?.product?.category_id, curProduct?.business?.id, changes)}
+            productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === curProduct?.id ? Cproduct?.quantity : 0) }, 0) || 0}
           />
         )}
       </Modal>