ordering-ui-external 1.1.6 → 1.2.0

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.6",
+  "version": "1.2.0",
   "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/BusinessBasicInformation/index.js

@@ -121,9 +121,33 @@ export const BusinessBasicInformation = (props) => {
     document.body.style.overflowY = openSearchProducts ? 'hidden' : 'auto'
   }, [openSearchProducts])
 
+  const handleScroll = () => {
+    const searchElement = document.getElementById('search-component')
+    if (!searchElement) return
+    const limit = window.pageYOffset >= searchElement?.offsetTop && window.pageYOffset > 0
+    if (limit) {
+      const classAdded = searchElement.classList.contains('fixed-search')
+      !classAdded && searchElement.classList.add('fixed-search')
+    } else {
+      searchElement && searchElement.classList.remove('fixed-search')
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  useEffect(() => {
+    window.scroll({
+      top: window.scrollY - 1,
+      left: 0
+    })
+  }, [sortByValue])
+
   const SearchComponent = () => {
     return (
-      <WrapperSearch>
+      <WrapperSearch id='search-component'>
         <SearchIconWrapper
           onClick={() => setOpenSearchProducts(true)}
         >
@@ -345,6 +369,10 @@ export const BusinessBasicInformation = (props) => {
           onClose={() => {
             handleChangeSearch('')
             setOpenSearchProducts(false)
+            window.scroll({
+              top: window.scrollY - 1,
+              left: 0
+            })
           }}
           business={businessState.business}
         />

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

@@ -159,6 +159,7 @@ export const WrapperSearch = styled.div`
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
+  box-sizing: border-box;
 
   .search-bar {
     margin-right: 10px;
@@ -192,6 +193,16 @@ export const WrapperSearch = styled.div`
       border-radius: 8px;
     }
   }
+  &.fixed-search {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1002;
+    width: 100vw;
+    margin-top: 0px;
+    background-color: ${props => props.theme.colors.backgroundPage};
+    padding: 10px;
+  }
 `
 
 export const BusinessDetail = styled.div`

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/BusinessProductsCategories/index.js

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
 import { AutoScroll } from '../../../../../components/AutoScroll'
+import { useTheme } from 'styled-components'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 import { CategoriesContainer } from './styles'
 import { Tabs, Tab } from '../../styles/Tabs'
@@ -14,10 +16,13 @@ const BusinessProductsCategoriesUI = (props) => {
     openBusinessInformation,
     business,
     handlerClickCategory,
-    categorySelected
+    categorySelected,
+    useKioskApp
   } = props
 
+  const theme = useTheme()
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
+  const { width } = useWindowSize()
   const scrollTopSpan = 60
 
   const handleChangeCategory = (category) => {
@@ -69,12 +74,14 @@ const BusinessProductsCategoriesUI = (props) => {
 
     const _diff = -50
     const _moveDiff = 30
+    const _paddDiff = scrollTopSpan + 10
 
     _categories?.length && _categories.some(category => {
       const topPos = category?.id ? document.getElementById(`category${category.id}`)?.offsetTop
         : document.getElementById('businessProductList')?.offsetTop
-
-      if (topPos - windowTop < scrollTopSpan + 5 && topPos - windowTop > 0 && category?.id) {
+      const HeightOfEle = category?.id ? document.getElementById(`category${category.id}`)?.clientHeight : 0
+      if ((windowTop > topPos - _paddDiff && windowTop < topPos + HeightOfEle - _paddDiff) &&
+        category?.id) {
         const choosedCategory = document.getElementById(`category-menu${category?.id || '-all'}`)
         const choosedCategoryLeft = choosedCategory?.offsetLeft || 0
 
@@ -112,18 +119,20 @@ const BusinessProductsCategoriesUI = (props) => {
   }
 
   useEffect(() => {
+    if (typeof useKioskApp === 'undefined') return
     const styleSheet = document.getElementById('styles').sheet
 
     let style0 = '.sticky-prod-cat {'
     style0 += 'position: fixed !important;'
-    style0 += 'top: 0 !important;'
-    style0 += 'width: 97% !important;'
-    style0 += 'padding: 15px 5px 0px 0px;'
+    style0 += 'top: 0px !important;'
+    style0 += 'left: 0px !important;'
+    style0 += 'padding: 5px 5px 0px 5px !important;'
+    style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`
     style0 += '}'
 
     let style1 = '.sticky-prod-cart {'
     style1 += 'position: fixed !important;'
-    style1 += 'top: 0 !important;'
+    style1 += 'top: 38px !important;'
     style1 += 'right: 2.5% !important;'
     style1 += 'width: 28.5% !important;'
     style1 += 'margin-top: 32px !important;'
@@ -131,10 +140,11 @@ const BusinessProductsCategoriesUI = (props) => {
 
     let style2 = '.sticky-search {'
     style2 += 'position: fixed !important;'
-    style2 += 'top: 10px !important;'
-    style2 += 'right: 32% !important;'
-    style2 += 'height: 50px !important;'
+    style2 += 'top: 0px !important;'
+    style2 += 'right: 0% !important;'
     style2 += 'z-index: 9999 !important;'
+    style2 += 'width: 50px !important;'
+    style2 += `background-color: ${theme.colors.backgroundPage} !important;`
     style2 += '}'
 
     styleSheet.insertRule(style0, 0)
@@ -143,7 +153,7 @@ const BusinessProductsCategoriesUI = (props) => {
 
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
+  }, [useKioskApp])
 
   return (
     <>

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

@@ -5,7 +5,7 @@ export const CategoriesContainer = styled.div`
   overflow-x: auto;
   padding: 5px 0px 0px 0px;
   background: ${props => props.theme.colors.backgroundPage};
-  z-index: 1000;
+  z-index: 1002;
   position: absolute;
   top: 0;
   border-bottom: 1px solid #D9D9D9;
@@ -33,9 +33,9 @@ export const CategoriesContainer = styled.div`
     `}
   }
 
-  @media (min-width: 381px) {
+  /* @media (min-width: 381px) {
     padding: 15px 0px 0px 0px;
-  }
+  } */
   @media (min-width: 992px) {
     width: ${props => props.w ?? 'auto'};
   }

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/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -9,7 +9,6 @@ import {
   useSession,
   useLanguage,
   useConfig,
-  useOrderingTheme,
   BusinessList as BusinessListController
 } from 'ordering-components-external'
 
@@ -77,7 +76,6 @@ const BusinessesListingUI = (props) => {
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [activeMap, setActiveMap] = useState(false)
@@ -87,7 +85,7 @@ const BusinessesListingUI = (props) => {
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
-  const hideCities = orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
+  const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 
   const businessesIds = isCustomLayout &&
     businessesList.businesses &&
@@ -273,7 +271,7 @@ const BusinessesListingUI = (props) => {
                 onSearch={handleChangeSearch}
                 handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
               />
-              {typeof hideCities !== 'undefined' && !hideCities && citiesState?.cities?.length > 0 && (
+              {!hideCities && citiesState?.cities?.length > 0 && (
                 <Button color='primary' onClick={handleOpenCities}>
                   {citiesState?.cities?.find(city => city?.id === orderState?.options?.city_id)?.name || t('SELECT_A_CITY', 'Select a city')}
                 </Button>

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;
   }
 `