ordering-ui-external 1.1.7 → 1.2.1

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

@@ -5,13 +5,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapLogo = exports.TitleWrapper = exports.SoldOut = exports.SkeletonCardLogo = exports.SkeletonCardInfo = exports.RibbonBox = exports.QuantityContainer = exports.PriceWrapper = exports.CardLogo = exports.CardInfo = exports.CardContainer = void 0;
+exports.WrapLogo = exports.TitleWrapper = exports.SoldOut = exports.SkeletonCardLogo = exports.SkeletonCardInfo = exports.RibbonBox = exports.QuantityContainer = exports.PriceWrapper = exports.LastOrder = exports.CardLogo = exports.CardInfo = exports.CardContainer = 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, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
 
 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); }
 
@@ -23,65 +23,71 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var CardContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 162px;\n  max-height: 162px;\n  background: ", ";\n  border: 1px solid #E9ECEF;\n  padding: 10px;\n  border-radius: 7.6px;\n  box-sizing: border-box;\n  cursor: pointer;\n  position: relative;\n  > div {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  button {\n    width: 100%;\n    margin-top: 10px;\n  }\n  ", "\n"])), function (_ref) {
-  var soldOut = _ref.soldOut;
-  return soldOut ? '#6c757d33' : '#FFF';
+var CardContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  border: 1px solid #E9ECEF;\n  padding: 10px;\n  border-radius: 7.6px;\n  box-sizing: border-box;\n  cursor: pointer;\n  position: relative;\n  > div {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  button {\n    width: 100%;\n    margin-top: 10px;\n  }\n  ", "\n"])), function (_ref) {
+  var isShowAddButt = _ref.isShowAddButt;
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: ", ";\n    max-height: ", ";\n  "])), isShowAddButt ? '162px' : '110px', isShowAddButt ? '162px' : '110px');
 }, function (_ref2) {
-  var productsRows = _ref2.productsRows;
-  return productsRows ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", ";\n    margin: 10px;\n  "])), function () {
-    return productsRows === 3 ? 'calc(33% - 40px)' : 'calc(50% - 40px)';
-  }) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin: 10px 0px;\n    @media (min-width: 576px) {\n      margin: 10px;\n      width: calc(100% - 40px);\n    }\n  ", "\n  \n  "])), function (_ref3) {
-    var isCartOnProductsList = _ref3.isCartOnProductsList;
-    return isCartOnProductsList ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    @media (min-width: 993px) {\n      width: calc(50% - 40px);\n      margin: 10px 20px 10px 0px;\n      ", "\n    }\n  "])), function (props) {
+  var soldOut = _ref2.soldOut;
+  return soldOut ? '#6c757d33' : '#FFF';
+}, function (_ref3) {
+  var productsRows = _ref3.productsRows;
+  return productsRows ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", ";\n    margin: 10px;\n  "])), function () {
+    return productsRows === 3 ? 'calc(33% - 20px)' : 'calc(50% - 20px)';
+  }) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin: 10px 0px;\n    @media (min-width: 576px) {\n      margin: 10px;\n      width: calc(100% - 20px);\n    }\n  ", "\n  \n  "])), function (_ref4) {
+    var isCartOnProductsList = _ref4.isCartOnProductsList;
+    return isCartOnProductsList ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    @media (min-width: 993px) {\n      width: calc(50% - 20px);\n      margin: 10px 20px 10px 0px;\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)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        margin: 10px 0px 10px 20px;\n      "])));
-    }) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    @media (min-width: 681px) {\n      width: calc(49% - 40px);\n    }\n    @media (min-width: 1440px) {\n      width: calc(33% - 40px);\n      margin: 10px 20px 10px 0px;\n      ", "\n    }\n  "])), function (props) {
+      return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        margin: 10px 0px 10px 20px;\n      "])));
+    }) : (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    @media (min-width: 681px) {\n      width: calc(49% - 20px);\n    }\n    @media (min-width: 1440px) {\n      width: calc(33% - 20px);\n      margin: 10px 20px 10px 0px;\n      ", "\n    }\n  "])), function (props) {
       var _props$theme2;
 
-      return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        margin: 10px 0px 10px 20px;\n      "])));
+      return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin: 10px 0px 10px 20px;\n      "])));
     });
   });
 });
 
 exports.CardContainer = CardContainer;
 
-var SoldOut = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  position: absolute;\n  background: #495057 0% 0% no-repeat padding-box;\n  padding: 5px 10px;\n  top: 7px;\n  border-radius: 2px 0px 0px 2px;\n  right: 0px;\n  color: white;\n  font-size: 12px;\n  ", "\n  &:first-letter {\n    text-transform: uppercase;\n  }\n  ", "\n"])), function (props) {
+var SoldOut = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  position: absolute;\n  background: #495057 0% 0% no-repeat padding-box;\n  padding: 5px 10px;\n  top: 7px;\n  border-radius: 2px 0px 0px 2px;\n  right: 0px;\n  color: white;\n  font-size: 12px;\n  ", "\n  &:first-letter {\n    text-transform: uppercase;\n  }\n  ", "\n"])), function (props) {
   var _props$theme3;
 
-  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    left: 0px;\n    right: initial;\n  "])));
-}, function (_ref4) {
-  var isBottom = _ref4.isBottom;
-  return isBottom && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    bottom: 7px;\n    top: initial;\n  "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    left: 0px;\n    right: initial;\n  "])));
+}, function (_ref5) {
+  var isBottom = _ref5.isBottom;
+  return isBottom && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    bottom: 7px;\n    top: initial;\n  "])));
 });
 
 exports.SoldOut = SoldOut;
 
-var CardInfo = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n  > * {\n    margin: 3px;\n  }\n  p {\n    color: #909BA9;\n    text-align: left;\n    font-size: 10px;\n    ", "\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    white-space: pre-wrap;\n  }\n  span {\n    color: ", ";\n    font-size: 14px;\n  }\n  @media (min-width: 1024px) {\n    p {\n      font-size: 12px;\n    }\n    span {\n      font-size: 14px;\n    }\n  }\n"])), function (_ref5) {
-  var isBgimage = _ref5.isBgimage;
-  return (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), isBgimage ? 'calc(100% - 90px)' : '100%');
+var CardInfo = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n  > * {\n    margin: 3px;\n  }\n  p {\n    color: #909BA9;\n    text-align: left;\n    font-size: 10px;\n    ", "\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    white-space: pre-wrap;\n  }\n  span {\n    color: ", ";\n    font-size: 14px;\n  }\n  ", "\n  @media (min-width: 1024px) {\n    p {\n      font-size: 12px;\n    }\n    span {\n      font-size: 14px;\n    }\n  }\n"])), function (_ref6) {
+  var isBgimage = _ref6.isBgimage;
+  return (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), isBgimage ? 'calc(100% - 90px)' : '100%');
 }, function (props) {
   var _props$theme4;
 
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      text-align: right;\n    "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      text-align: right;\n    "])));
 }, function (props) {
   return props.theme.colors.darkTextColor;
+}, function (_ref7) {
+  var oneLine = _ref7.oneLine;
+  return oneLine && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    p {\n      -webkit-line-clamp: 1;\n    }\n  "])));
 });
 
 exports.CardInfo = CardInfo;
 
-var WrapLogo = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n  max-width: 86px;\n  max-height: 86px;\n  height: 86px;\n  ", "\n  margin-left: 5px;\n  ", "\n"])), function (_ref6) {
-  var isBgimage = _ref6.isBgimage;
-  return isBgimage && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    width: 86px;\n  "])));
+var WrapLogo = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n  max-width: 86px;\n  max-height: 86px;\n  height: 86px;\n  ", "\n  margin-left: 5px;\n  ", "\n"])), function (_ref8) {
+  var isBgimage = _ref8.isBgimage;
+  return isBgimage && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    width: 86px;\n  "])));
 }, function (props) {
   var _props$theme5;
 
-  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
+  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
 });
 
 exports.WrapLogo = WrapLogo;
 
-var CardLogoStyled = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  background-position: center;\n  object-fit: cover;\n  min-height: 86px;\n  border-radius: 10px;\n"])));
+var CardLogoStyled = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  background-position: center;\n  object-fit: cover;\n  min-height: 86px;\n  border-radius: 10px;\n"])));
 
 var CardLogo = function CardLogo(props) {
   var style = {};
@@ -101,42 +107,48 @@ var CardLogo = function CardLogo(props) {
 
 exports.CardLogo = CardLogo;
 
-var PriceWrapper = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .off-price {\n    font-size: 10px;\n    color: #909BA9;\n    margin-left: 5px;\n    text-decoration: line-through;\n    ", "\n    @media (min-width: 1024px) {\n      font-size: 13px;\n    }\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n      margin-left: 0;\n    "])));
+var PriceWrapper = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .off-price {\n    font-size: 10px;\n    color: #909BA9;\n    margin-left: 5px;\n    text-decoration: line-through;\n    ", "\n    @media (min-width: 1024px) {\n      font-size: 13px;\n    }\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n      margin-left: 0;\n    "])));
 });
 
 exports.PriceWrapper = PriceWrapper;
 
-var QuantityContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  position: absolute;\n  left: 100%;\n  bottom: 100%;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  border-radius: 50%;\n  transform: translate(-50%, 50%);\n"])), function (_ref7) {
-  var theme = _ref7.theme;
+var QuantityContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  position: absolute;\n  left: 100%;\n  bottom: 100%;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  border-radius: 50%;\n  transform: translate(-50%, 50%);\n"])), function (_ref9) {
+  var theme = _ref9.theme;
   return theme.colors.primary;
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.colors.primaryContrast;
 });
 
 exports.QuantityContainer = QuantityContainer;
 
-var RibbonBox = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  padding: 2px 8px;\n  box-sizing: border-box;\n  z-index: 10;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  top: -4px;\n  right: -3px;\n  background-color: ", ";\n  max-width: 50px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
+var RibbonBox = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  position: absolute;\n  padding: 2px 8px;\n  box-sizing: border-box;\n  z-index: 10;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  top: -4px;\n  right: -3px;\n  background-color: ", ";\n  max-width: 50px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
   return props.theme.colors.colorTextSignForm;
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    left: -3px;\n    right: initial;\n  "])));
-}, function (_ref9) {
-  var bgColor = _ref9.bgColor;
-  return bgColor && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
-}, function (_ref10) {
-  var isRoundRect = _ref10.isRoundRect;
-  return isRoundRect && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    left: -3px;\n    right: initial;\n  "])));
 }, function (_ref11) {
-  var isCapsule = _ref11.isCapsule;
-  return isCapsule && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
+  var bgColor = _ref11.bgColor;
+  return bgColor && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
+}, function (_ref12) {
+  var isRoundRect = _ref12.isRoundRect;
+  return isRoundRect && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
+}, function (_ref13) {
+  var isCapsule = _ref13.isCapsule;
+  return isCapsule && (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
 });
 
 exports.RibbonBox = RibbonBox;
 
-var TitleWrapper = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  h1 {\n    font-size: 14px;\n    font-weight: 500;\n    text-align: left;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin: 0px;\n  }\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    svg {\n      color: ", ";\n      font-size: 16px;\n    }\n  }\n"])), function (props) {
+var LastOrder = _styledComponents.default.span(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px !important;\n  margin: 0px 3px;\n"])), function (props) {
+  return props.theme.colors.primary;
+});
+
+exports.LastOrder = LastOrder;
+
+var TitleWrapper = _styledComponents.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  h1 {\n    font-size: 14px;\n    font-weight: 500;\n    text-align: left;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin: 0px;\n  }\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    svg {\n      color: ", ";\n      font-size: 16px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return props.theme.colors.danger500;
@@ -144,14 +156,14 @@ var TitleWrapper = _styledComponents.default.div(_templateObject26 || (_template
 
 exports.TitleWrapper = TitleWrapper;
 
-var SkeletonCardInfo = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 90px);\n  > * {\n    margin: 3px;\n  }\n"])));
+var SkeletonCardInfo = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 90px);\n  > * {\n    margin: 3px;\n  }\n"])));
 
 exports.SkeletonCardInfo = SkeletonCardInfo;
 
-var SkeletonCardLogo = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  max-width: 86px;\n  max-height: 86px;\n  width: 86px;\n  height: 86px;\n  margin-left: 5px;\n  ", "\n"])), function (props) {
+var SkeletonCardLogo = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  max-width: 86px;\n  max-height: 86px;\n  width: 86px;\n  height: 86px;\n  margin-left: 5px;\n  ", "\n"])), function (props) {
   var _props$theme6;
 
-  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
+  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
 });
 
 exports.SkeletonCardLogo = SkeletonCardLogo;

package/_modules/themes/four/src/components/BusinessBasicInformation/index.js

@@ -153,7 +153,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     onClick: function onClick() {
       return setOpenBusinessInformation(true);
     }
-  })))))), !errorQuantityProducts && /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
+  })))))), /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
     onSearch: handleChangeSearch,
     search: searchValue,
     placeholder: t('SEARCH_PRODUCTS', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag7 = theme.defaultLanguages) === null || _theme$defaultLanguag7 === void 0 ? void 0 : _theme$defaultLanguag7.SEARCH_PRODUCTS) || 'Search Products'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {

package/src/themes/five/index.js

@@ -54,6 +54,7 @@ import { NotNetworkConnectivity } from './src/components/NotNetworkConnectivity'
 import { Modal } from './src/components/Modal'
 import { OrderDetails } from './src/components/OrderDetails'
 import { OrderDetails as OrderDetailsKiosk } from './src/components/OrderDetails/layouts/Kiosk'
+import { OrderItAgain } from './src/components/OrderItAgain'
 import { OrdersOption } from './src/components/OrdersOption'
 import { OrderProgress } from './src/components/OrderProgress'
 import { OrderTypeSelectorContent } from './src/components/OrderTypeSelectorContent'
@@ -163,6 +164,7 @@ export {
   NotFoundSource,
   NotNetworkConnectivity,
   OrderDetails,
+  OrderItAgain,
   OrderDetailsKiosk,
   OrdersOption,
   OrderTypeSelectorContent,

package/src/themes/five/src/components/BusinessInformation/styles.js

@@ -87,7 +87,7 @@ export const SectionTitle = styled.h3`
   font-weight: 500;
   font-size: 16px;
   color: ${props => props.theme.colors.darkTextColor};
-  margin: 25px 0 20px 0;
+  margin: 10px 0 10px 0;
 `
 
 export const Map = styled.div`
@@ -264,9 +264,9 @@ export const BusinessTitle = styled.h2`
   color: ${props => props.theme.colors.darkTextColor};
   text-align: center;
   margin-top: 0;
-  margin-bottom: 36px;
+  margin-bottom: 0;
   padding-left: 30px;
-
+  padding-top: 25px;
   ${props => props.theme?.rtl && css`
     padding-right: 30px;
     padding-left: 0;

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

@@ -111,7 +111,7 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const onProductClick = (product) => {
-    if (!((product?.type === 'service') && professionalSelected)) {
+    if (!((product?.type === 'service') && business?.professionals?.length > 0)) {
       if (site?.product_url_template) {
         onProductRedirect({
           slug: business?.slug,
@@ -414,7 +414,7 @@ const BusinessProductsListingUI = (props) => {
         )}
         {(productModal.product || curProduct) && (
           <>
-            {(((productModal?.product?.type === 'service') || (curProduct?.type === 'service')) && professionalSelected) ? (
+            {(((productModal?.product?.type === 'service') || (curProduct?.type === 'service')) && business?.professionals?.length > 0) ? (
               <ServiceForm
                 businessSlug={business?.slug}
                 useKioskApp={props.useKioskApp}

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

@@ -14,6 +14,7 @@ import { TaxInformation } from '../TaxInformation'
 import { TextArea } from '../../styles/Inputs'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
 import { CartStoresListing } from '../../../../franchise/src/components/CartStoresListing'
+import { DriverTips } from '../DriverTips'
 import {
   CartContainer,
   OrderBill,
@@ -24,7 +25,8 @@ import {
   Spinner,
   CommentContainer,
   IconContainer,
-  NoValidProductMessage
+  NoValidProductMessage,
+  DriverTipContainer
 } from './styles'
 import { verifyDecimals } from '../../../../../utils'
 import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
@@ -67,6 +69,10 @@ const CartUI = (props) => {
   const [{ site }] = useSite()
   const windowSize = useWindowSize()
 
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
+
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [openProduct, setModalIsOpen] = useState(false)
   const [curProduct, setCurProduct] = useState({})
@@ -402,7 +408,7 @@ const CartUI = (props) => {
                     )}
                   </tbody>
                 </table>
-                {isCouponEnabled && !isCartPending && ((isCheckout || isCartPopover) && !(isCheckout && isCartPopover)) && (
+                {isCouponEnabled && !isCartPending && ((isCheckout || isCartPopover || isMultiCheckout) && !(isCheckout && isCartPopover)) && (
                   <CouponContainer>
                     <CouponControl
                       businessId={cart.business_id}
@@ -410,6 +416,35 @@ const CartUI = (props) => {
                     />
                   </CouponContainer>
                 )}
+                {
+                  isMultiCheckout &&
+                  cart &&
+                  cart?.business_id &&
+                  orderState?.options?.type === 1 &&
+                  cart?.status !== 2 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  driverTipsOptions.length > 0 &&
+                  !useKioskApp &&
+                  (
+                    <>
+                      <DriverTipContainer>
+                        <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+                        <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+                        <DriverTips
+                          businessId={cart?.business_id}
+                          driverTipsOptions={driverTipsOptions}
+                          isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                          isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                          driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                            ? cart?.driver_tip
+                            : cart?.driver_tip_rate}
+                          cart={cart}
+                          useOrderContext
+                        />
+                      </DriverTipContainer>
+                    </>
+                  )
+                }
                 <table className='total'>
                   <tbody>
                     <tr>

package/src/themes/five/src/components/Cart/styles.js

@@ -207,3 +207,20 @@ export const SpotSelect = styled.select`
 export const NoValidProductMessage = styled.p`
   font-size: 14px;
 `
+export const DriverTipContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0px 0px;
+  h1 {
+    margin: 0px;
+    font-weight: 500;
+    font-size: 20px;
+    color: ${props => props.theme.colors.darkTextColor};
+  }
+  > p {
+    margin: 0;
+    font-size: 16px;
+    color: #909BA9;
+  }
+`

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

@@ -213,10 +213,6 @@ const CheckoutUI = (props) => {
     setUserErrors(errors)
   }
 
-  const handleGoToStore = (slug) => {
-    events.emit('go_to_page', { page: 'business', params: { store: slug } })
-  }
-
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -465,7 +461,7 @@ const CheckoutUI = (props) => {
           <CartContainer>
             <CartHeader>
               <h1>{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}</h1>
-              <span onClick={() => cart?.business?.slug && handleGoToStore(cart?.business?.slug)}>{('ADD_PRODUCTS', 'Add products')}</span>
+              <span onClick={() => cart?.business?.slug && handleStoreRedirect && handleStoreRedirect(cart?.business?.slug)}>{('ADD_PRODUCTS', 'Add products')}</span>
             </CartHeader>
             <Cart
               isCartPending={cart?.status === 2}

package/src/themes/five/src/components/Checkout/styles.js

@@ -19,10 +19,14 @@ export const Container = styled.div`
 export const WrapperLeftContainer = styled.div`
   width: 100%;
   box-sizing: border-box;
-  padding: 30px 20px;
+  padding: 55px 20px 30px;
 
   @media (min-width: 769px) {
     width: 55%;
+    padding: 55px 60px 55px 40px;
+  }
+
+  @media (min-width: 820px) {
     padding: 30px 60px 55px 40px;
   }
 `

package/src/themes/five/src/components/Modal/styles.js

@@ -86,6 +86,11 @@ export const ModalActions = styled.div`
 `
 export const ModalHeader = styled.div`
   display: flex;
+  margin-top: 30px;
+
+  @media(min-width: 450px){
+    margin-top: 0;
+  }
 
 `
 

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

@@ -128,64 +128,64 @@ const MomentControlUI = (props) => {
   const setLocalMoment = () => {
     moment.updateLocale('custom', {
       months: [
-        t('MONTH1','January'),
-        t('MONTH2','February'),
-        t('MONTH3','March'),
-        t('MONTH4','April'),
-        t('MONTH5','May'),
-        t('MONTH6','June'),
-        t('MONTH7','July'),
-        t('MONTH8','August'),
-        t('MONTH9','September'),
-        t('MONTH10','October'),
-        t('MONTH11','November'),
-        t('MONTH12','December')
+        t('MONTH1', 'January'),
+        t('MONTH2', 'February'),
+        t('MONTH3', 'March'),
+        t('MONTH4', 'April'),
+        t('MONTH5', 'May'),
+        t('MONTH6', 'June'),
+        t('MONTH7', 'July'),
+        t('MONTH8', 'August'),
+        t('MONTH9', 'September'),
+        t('MONTH10', 'October'),
+        t('MONTH11', 'November'),
+        t('MONTH12', 'December')
       ],
       monthsShort: [
-        t('MONTHSHORT1','Jan'),
-        t('MONTHSHORT2','Feb'),
-        t('MONTHSHORT3','Mar'),
-        t('MONTHSHORT4','Apr'),
-        t('MONTHSHORT5','May'),
-        t('MONTHSHORT6','Jun'),
-        t('MONTHSHORT7','Jul'),
-        t('MONTHSHORT8','Aug'),
-        t('MONTHSHORT9','Sep'),
-        t('MONTHSHORT10','Oct'),
-        t('MONTHSHORT11','Nov'),
-        t('MONTHSHORT12','Dec')
+        t('MONTHSHORT1', 'Jan'),
+        t('MONTHSHORT2', 'Feb'),
+        t('MONTHSHORT3', 'Mar'),
+        t('MONTHSHORT4', 'Apr'),
+        t('MONTHSHORT5', 'May'),
+        t('MONTHSHORT6', 'Jun'),
+        t('MONTHSHORT7', 'Jul'),
+        t('MONTHSHORT8', 'Aug'),
+        t('MONTHSHORT9', 'Sep'),
+        t('MONTHSHORT10', 'Oct'),
+        t('MONTHSHORT11', 'Nov'),
+        t('MONTHSHORT12', 'Dec')
       ],
       weekdays: [
-        t('DAY7','Sunday'),
-        t('DAY1','Monday'),
-        t('DAY2','Tuesday'),
-        t('DAY3','Wednesday'),
-        t('DAY4','Thursday'),
-        t('DAY5','Friday'),
-        t('DAY6','Saturday')
+        t('DAY7', 'Sunday'),
+        t('DAY1', 'Monday'),
+        t('DAY2', 'Tuesday'),
+        t('DAY3', 'Wednesday'),
+        t('DAY4', 'Thursday'),
+        t('DAY5', 'Friday'),
+        t('DAY6', 'Saturday')
       ],
       weekdaysShort: [
-        t('DAYSHORT7','Sun'),
-        t('DAYSHORT1','Mon'),
-        t('DAYSHORT2','Tue'),
-        t('DAYSHORT3','Wed'),
-        t('DAYSHORT4','Thu'),
-        t('DAYSHORT5','Fri'),
-        t('DAYSHORT6','Sat')
+        t('DAYSHORT7', 'Sun'),
+        t('DAYSHORT1', 'Mon'),
+        t('DAYSHORT2', 'Tue'),
+        t('DAYSHORT3', 'Wed'),
+        t('DAYSHORT4', 'Thu'),
+        t('DAYSHORT5', 'Fri'),
+        t('DAYSHORT6', 'Sat')
       ],
       weekdaysMin: [
-        t('DAYMIN7','Su'),
-        t('DAYMIN1','Mo'),
-        t('DAYMIN2','Tu'),
-        t('DAYMIN3','We'),
-        t('DAYMIN4','Th'),
-        t('DAYMIN5','Fr'),
-        t('DAYMIN6','Sa')
+        t('DAYMIN7', 'Su'),
+        t('DAYMIN1', 'Mo'),
+        t('DAYMIN2', 'Tu'),
+        t('DAYMIN3', 'We'),
+        t('DAYMIN4', 'Th'),
+        t('DAYMIN5', 'Fr'),
+        t('DAYMIN6', 'Sa')
       ],
-      meridiem : function (hours) {
-        return hours < 12 ? t('AM', 'AM') : t('PM','PM');
+      meridiem: function (hours) {
+        return hours < 12 ? t('AM', 'AM') : t('PM', 'PM')
       }
-   })
+    })
   }
 
   useEffect(() => {

package/src/themes/five/src/components/MomentControl/styles.js

@@ -8,7 +8,6 @@ export const Title = styled.div`
   color: ${props => props.theme.colors?.darkTextColor};
 
   @media (max-width: 450px) {
-    padding-left: 30px;
     ${props => props.theme.rtl && css`
       padding-right: 30px;
       padding-left: 0;

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 import {
   useLanguage,
   useUtils,
@@ -62,6 +63,7 @@ const MultiCheckoutUI = (props) => {
   const [customerState] = useCustomer()
   const [validationFields] = useValidationFields()
   const [{ user }] = useSession()
+  const history = useHistory()
 
   const [userErrors, setUserErrors] = useState([])
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(null)

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { SingleProductCard } from '../SingleProductCard'
+import {
+  Container,
+  ContentHeader,
+  ProductListWrapper,
+  ProductList
+} from './styles'
+import { AutoScroll } from '../AutoScroll'
+
+export const OrderItAgain = (props) => {
+  const {
+    onProductClick,
+    isGroceries,
+    productList,
+    businessId
+  } = props
+
+  const [, t] = useLanguage()
+
+  return (
+    <Container isGroceries={isGroceries}>
+      <ContentHeader isGroceries={isGroceries}>
+        <h2>{t('ORDER_IT_AGAIN', 'Order it again')}</h2>
+        <p>{t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}</p>
+      </ContentHeader>
+      <ProductListWrapper>
+        <ProductList>
+          <AutoScroll scrollId='orderItAgain'>
+            {productList.map((product, i) => (
+              <SingleProductCard
+                key={i}
+                isSoldOut={product.inventoried && !product.quantity}
+                businessId={businessId}
+                product={product}
+                onProductClick={onProductClick}
+                isPreviously
+              />
+            ))}
+          </AutoScroll>
+        </ProductList>
+      </ProductListWrapper>
+    </Container>
+  )
+}