ordering-ui-external 2.0.3 → 2.1.0

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

@@ -4,67 +4,83 @@ 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.LastOrder = exports.CardLogo = exports.CardInfo = exports.CardContainer = void 0;
+exports.WrapTags = 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, _templateObject30, _templateObject31, _templateObject32;
+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, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var 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  display: flex;\n  align-items: center;\n  flex-direction: column;\n  cursor: pointer;\n  position: relative;\n  > div {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n  button {\n    width: 100%;\n    margin-top: 10px;\n    padding: 4px;\n  }\n  ", "\n"])), function (_ref) {
+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  display: flex;\n  align-items: center;\n  flex-direction: column;\n  cursor: pointer;\n  position: relative;\n  > div {\n    display: flex;\n    justify-content: space-between;\n    ", "\n    align-items: center;\n    width: 100%;\n  }\n  button {\n    width: 100%;\n    margin-top: 10px;\n    padding: 4px;\n  }\n  ", "\n"])), function (_ref) {
   var isShowAddButt = _ref.isShowAddButt;
   return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: ", ";\n  "])), isShowAddButt ? '162px' : '110px');
 }, function (_ref2) {
   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 () {
+  var _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _theme$business_view$6;
+  var theme = _ref3.theme;
+  return (theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$ = _theme$business_view.components) === null || _theme$business_view$ === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view$.products) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.components) === null || _theme$business_view$3 === void 0 ? void 0 : (_theme$business_view$4 = _theme$business_view$3.product) === null || _theme$business_view$4 === void 0 ? void 0 : (_theme$business_view$5 = _theme$business_view$4.components) === null || _theme$business_view$5 === void 0 ? void 0 : (_theme$business_view$6 = _theme$business_view$5.image) === null || _theme$business_view$6 === void 0 ? void 0 : _theme$business_view$6.position) === 'right' ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      flex-direction: row-reverse;\n    "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex-direction: row;\n    "])));
+}, function (_ref4) {
+  var productsRows = _ref4.productsRows;
+  return productsRows ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _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) {
+  }) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin: 10px;\n    @media (min-width: 576px) {\n      margin: 10px;\n      width: calc(100% - 20px);\n    }\n  ", "\n  \n  "])), function (_ref5) {
+    var isCartOnProductsList = _ref5.isCartOnProductsList;
+    return isCartOnProductsList ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _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)(_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) {
+      return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin: 10px 0px 10px 20px;\n      "])));
+    }) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _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)(_templateObject8 || (_templateObject8 = _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)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        margin: 10px 0px 10px 20px;\n      "])));
     });
   });
 });
 exports.CardContainer = CardContainer;
-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 SoldOut = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _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)(_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  "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    left: 0px;\n    right: initial;\n  "])));
+}, function (_ref6) {
+  var isBottom = _ref6.isBottom;
+  return isBottom && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    bottom: 7px;\n    top: initial;\n  "])));
 });
 exports.SoldOut = SoldOut;
-var CardInfo = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: 86px;\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%');
+var CardInfo = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: 86px;\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 (_ref7) {
+  var isBgimage = _ref7.isBgimage;
+  return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _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)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      text-align: right;\n    "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _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  "])));
+}, function (_ref8) {
+  var oneLine = _ref8.oneLine;
+  return oneLine && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    p {\n      -webkit-line-clamp: 1;\n    }\n  "])));
 });
 exports.CardInfo = CardInfo;
-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  "])));
+var WrapLogo = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: relative;\n  max-width: 86px;\n  max-height: 86px;\n  height: 86px;\n  ", "\n  ", "\n  ", "\n"])), function (_ref9) {
+  var isBgimage = _ref9.isBgimage;
+  return isBgimage && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    width: 86px;\n  "])));
+}, function (_ref10) {
+  var _theme$business_view2, _theme$business_view3, _theme$business_view4, _theme$business_view5, _theme$business_view6, _theme$business_view7, _theme$business_view8;
+  var theme = _ref10.theme;
+  return (theme === null || theme === void 0 ? void 0 : (_theme$business_view2 = theme.business_view) === null || _theme$business_view2 === void 0 ? void 0 : (_theme$business_view3 = _theme$business_view2.components) === null || _theme$business_view3 === void 0 ? void 0 : (_theme$business_view4 = _theme$business_view3.products) === null || _theme$business_view4 === void 0 ? void 0 : (_theme$business_view5 = _theme$business_view4.components) === null || _theme$business_view5 === void 0 ? void 0 : (_theme$business_view6 = _theme$business_view5.product) === null || _theme$business_view6 === void 0 ? void 0 : (_theme$business_view7 = _theme$business_view6.components) === null || _theme$business_view7 === void 0 ? void 0 : (_theme$business_view8 = _theme$business_view7.image) === null || _theme$business_view8 === void 0 ? void 0 : _theme$business_view8.position) === 'right' ? (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    margin-left: 5px;\n  "]))) : (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n  "])));
 }, function (props) {
   var _props$theme5;
-  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  "])));
+  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
 });
 exports.WrapLogo = WrapLogo;
-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 WrapTags = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 10px;\n  margin-right: 10px;\n  overflow-x: auto;\n  ", "\n  ", "\n  div {\n    display: flex;\n    margin: auto;\n  }\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  img {\n    width: 30px;\n    height: 30px;\n    margin-right: 5px;\n  }\n"])), function (_ref11) {
+  var isBgimage = _ref11.isBgimage;
+  return isBgimage && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    width: 50px;\n  "])));
+}, function (props) {
+  var _props$theme6;
+  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
+});
+exports.WrapTags = WrapTags;
+var CardLogoStyled = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _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 = {};
   if (props.bgimage) {
@@ -78,49 +94,55 @@ var CardLogo = function CardLogo(props) {
   }), props.children);
 };
 exports.CardLogo = CardLogo;
-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    "])));
+var PriceWrapper = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .current-price {\n    min-width: 64px\n  }\n  .off-price {\n    font-size: 10px;\n    color: #909BA9;\n    margin-left: 5px;\n    text-decoration: line-through;\n    ", "\n    ", "\n    @media (min-width: 1024px) {\n      font-size: 13px;\n      ", "\n    }\n  }\n"])), function (_ref12) {
+  var isOffPrice = _ref12.isOffPrice;
+  return isOffPrice && (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n      min-width: 46px;\n    "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n      margin-right: 5px;\n      margin-left: 0;\n    "])));
+}, function (_ref13) {
+  var isOffPrice = _ref13.isOffPrice;
+  return isOffPrice && (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        min-width: 64px;\n      "])));
 });
 exports.PriceWrapper = PriceWrapper;
-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(-20px, 50%);\n\n  @media (min-width: 768px) {\n    transform: translate(-50%, 50%);\n  }\n"])), function (_ref9) {
-  var theme = _ref9.theme;
+var QuantityContainer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _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(-20px, 50%);\n  @media (min-width: 768px) {\n    transform: translate(-50%, 50%);\n  }\n"])), function (_ref14) {
+  var theme = _ref14.theme;
   return theme.colors.primary;
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, function (_ref15) {
+  var theme = _ref15.theme;
   return theme.colors.primaryContrast;
 });
 exports.QuantityContainer = QuantityContainer;
-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  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  max-width: 70px;\n  word-break: break-all;\n\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
+var RibbonBox = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _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  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  max-width: 70px;\n  word-break: break-all;\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)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    left: -3px;\n    right: initial;\n  "])));
-}, function (_ref11) {
-  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  "])));
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n    left: -3px;\n    right: initial;\n  "])));
+}, function (_ref16) {
+  var bgColor = _ref16.bgColor;
+  return bgColor && (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
+}, function (_ref17) {
+  var isRoundRect = _ref17.isRoundRect;
+  return isRoundRect && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
+}, function (_ref18) {
+  var isCapsule = _ref18.isCapsule;
+  return isCapsule && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
 });
 exports.RibbonBox = RibbonBox;
-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) {
+var LastOrder = _styledComponents.default.span(_templateObject37 || (_templateObject37 = _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) {
+var TitleWrapper = _styledComponents.default.div(_templateObject38 || (_templateObject38 = _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;
 });
 exports.TitleWrapper = TitleWrapper;
-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"])));
+var SkeletonCardInfo = _styledComponents.default.div(_templateObject39 || (_templateObject39 = _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(_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)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
+var SkeletonCardLogo = _styledComponents.default.div(_templateObject40 || (_templateObject40 = _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$theme7;
+  return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    margin-right: 5px;\n    margin-left: 0px;\n  "])));
 });
 exports.SkeletonCardLogo = SkeletonCardLogo;

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

@@ -11,6 +11,7 @@ var _orderingComponentsExternal = require("ordering-components-external");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _ProfessionalInfo = require("../ProfessionalInfo");
 var _Modal = require("../Modal");
+var _FaUserAlt = _interopRequireDefault(require("@meronex/icons/fa/FaUserAlt"));
 var _styles = require("./styles");
 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); }
@@ -30,7 +31,10 @@ var SingleProfessionalCardUI = function SingleProfessionalCardUI(props) {
   var _professional$occupat, _professional$occupat2;
   var professional = props.professional,
     isSkeleton = props.isSkeleton,
-    handleFavoriteProfessional = props.handleFavoriteProfessional;
+    handleFavoriteProfessional = props.handleFavoriteProfessional,
+    isSmallPhoto = props.isSmallPhoto,
+    active = props.active,
+    handleProfessionalClick = props.handleProfessionalClick;
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     auth = _useSession2[0].auth;
@@ -46,20 +50,31 @@ var SingleProfessionalCardUI = function SingleProfessionalCardUI(props) {
   var handleOpenProfileInfo = function handleOpenProfileInfo() {
     setOpen(true);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, {
+    active: active,
+    isCursor: !!handleProfessionalClick,
+    onClick: function onClick(e) {
+      return handleProfessionalClick && handleProfessionalClick(e, professional);
+    }
+  }, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     style: {
       width: '86px',
       height: '86px'
     }
-  }) : /*#__PURE__*/_react.default.createElement(_styles.UserPhoto, {
-    bgimage: professional === null || professional === void 0 ? void 0 : professional.photo
-  }), /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, /*#__PURE__*/_react.default.createElement("h4", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+  }) : professional !== null && professional !== void 0 && professional.photo ? /*#__PURE__*/_react.default.createElement(_styles.UserPhoto, {
+    bgimage: professional === null || professional === void 0 ? void 0 : professional.photo,
+    isSmallPhoto: isSmallPhoto
+  }) : /*#__PURE__*/_react.default.createElement(_styles.UserDummyAvatarWrapper, {
+    isSmallPhoto: isSmallPhoto
+  }, /*#__PURE__*/_react.default.createElement(_FaUserAlt.default, null)), /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, /*#__PURE__*/_react.default.createElement("h4", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     height: 18,
     width: 120
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, professional === null || professional === void 0 ? void 0 : professional.name, " ", professional === null || professional === void 0 ? void 0 : professional.last_name)), isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     height: 15,
     width: 80
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (professional === null || professional === void 0 ? void 0 : (_professional$occupat = professional.occupation) === null || _professional$occupat === void 0 ? void 0 : _professional$occupat.name) && /*#__PURE__*/_react.default.createElement("p", null, professional === null || professional === void 0 ? void 0 : (_professional$occupat2 = professional.occupation) === null || _professional$occupat2 === void 0 ? void 0 : _professional$occupat2.name)), /*#__PURE__*/_react.default.createElement(_styles.ActionWrapper, null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (professional === null || professional === void 0 ? void 0 : (_professional$occupat = professional.occupation) === null || _professional$occupat === void 0 ? void 0 : _professional$occupat.name) && /*#__PURE__*/_react.default.createElement("p", null, professional === null || professional === void 0 ? void 0 : (_professional$occupat2 = professional.occupation) === null || _professional$occupat2 === void 0 ? void 0 : _professional$occupat2.name)), /*#__PURE__*/_react.default.createElement(_styles.ActionWrapper, {
+    isSmallPhoto: isSmallPhoto
+  }, isSkeleton ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 16,
     height: 16
   }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -76,7 +91,8 @@ var SingleProfessionalCardUI = function SingleProfessionalCardUI(props) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     onClick: function onClick() {
       return handleChangeFavorite();
-    }
+    },
+    className: "favorite"
   }, professional !== null && professional !== void 0 && professional.favorite ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.HeartFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Heart, null)))))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: open,
     width: "760px",

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

@@ -4,24 +4,35 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserPhoto = exports.InfoWrapper = exports.Container = exports.ActionWrapper = void 0;
+exports.UserPhoto = exports.UserDummyAvatarWrapper = exports.InfoWrapper = exports.Container = exports.ActionWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = _interopRequireDefault(require("react"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 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  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n  padding: 12px 14px;\n  display: flex;\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  margin: 10px;\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 7.6px;\n  padding: 12px 14px;\n  display: flex;\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  margin: 10px;\n  min-width: 205px;\n  ", "\n  ", "\n"])), function (props) {
   return props.theme.colors.backgroundPage;
 }, function (props) {
   return props.theme.colors.gray200;
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), function (props) {
+    return props.theme.colors.primary;
+  });
+}, function (_ref2) {
+  var isCursor = _ref2.isCursor;
+  return isCursor && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: pointer;\n  "])));
 });
 exports.Container = Container;
-var UserPhotoStyled = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _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  width: 86px;\n  height: 86px;\n  border-radius: 4px;\n\n  ", "\n"])), function (_ref) {
-  var isSkeleton = _ref.isSkeleton;
-  return isSkeleton && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), function (props) {
+var UserPhotoStyled = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _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  border-radius: 4px;\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+  var isSmallPhoto = _ref3.isSmallPhoto;
+  return isSmallPhoto ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    min-height: 42px;\n    width: 42px;\n    height: 42px;\n  "]))) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    min-height: 86px;\n    width: 86px;\n    height: 86px;\n  "])));
+}, function (_ref4) {
+  var isSkeleton = _ref4.isSkeleton;
+  return isSkeleton && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), function (props) {
     return props.theme.colors.gray200;
   });
 });
@@ -35,12 +46,20 @@ var UserPhoto = function UserPhoto(props) {
   }), props.children);
 };
 exports.UserPhoto = UserPhoto;
-var InfoWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: calc(100% - 106px);\n  margin-left: 20px;\n  ", "\n  > h4 {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n  p {\n    margin-top: 2px;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 22px;\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 20px;\n  "])));
+var UserDummyAvatarWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  svg {\n    ", "\n  }\n"])), function (_ref5) {
+  var isSmallPhoto = _ref5.isSmallPhoto;
+  return isSmallPhoto ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      width: 42px;\n      height: 42px;\n    "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      width: 86px;\n      height: 86px;\n    "])));
+});
+exports.UserDummyAvatarWrapper = UserDummyAvatarWrapper;
+var InfoWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: calc(100% - 60px);\n  margin-left: 20px;\n  ", "\n  > h4 {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin: 0px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n  p {\n    margin-top: 2px;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 22px;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 20px;\n  "])));
 });
 exports.InfoWrapper = InfoWrapper;
-var ActionWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: 15px;\n  display: flex;\n  align-items: center;\n  > .info {\n    cursor: pointer;\n    font-size: 16px;\n    margin-right: 7px;\n    ", "\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      margin-top: 2px;\n    }\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-right: 0px;\n      margin-left: 7px;\n    "])));
+var ActionWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  align-items: center;\n  > .info {\n    cursor: pointer;\n    font-size: 16px;\n    margin-right: 7px;\n    ", "\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      margin-top: 2px;\n    }\n  }\n"])), function (_ref6) {
+  var isSmallPhoto = _ref6.isSmallPhoto;
+  return !isSmallPhoto && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-top: 15px;\n  "])));
+}, function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      margin-right: 0px;\n      margin-left: 7px;\n    "])));
 }, function (props) {
   return props.theme.colors.danger500;
 });

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

@@ -13,6 +13,7 @@ var _styles = require("./styles");
 var _WalletTransactionItem = require("../WalletTransactionItem");
 var _NotFoundSource = require("../../../../../components/NotFoundSource");
 var _Tabs = require("../../styles/Tabs");
+var _GiftCardUI = require("../GiftCard/GiftCardUI");
 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; }
@@ -89,7 +90,7 @@ var WalletsUI = function WalletsUI(props) {
     }, (_walletName$wallet$ty2 = walletName[wallet.type]) === null || _walletName$wallet$ty2 === void 0 ? void 0 : _walletName$wallet$ty2.name);
   })), /*#__PURE__*/_react.default.createElement(_styles.WrapContent, null, /*#__PURE__*/_react.default.createElement(_styles.Transactions, {
     isLoyaltyLevel: !!loyaltyLevel
-  }, /*#__PURE__*/_react.default.createElement(_styles.SectionWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.BalanceElement, null, /*#__PURE__*/_react.default.createElement("h1", null, (currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.type) === 'cash' ? parsePrice(currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.balance) : currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.balance), /*#__PURE__*/_react.default.createElement("span", null, (currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.type) === 'cash' ? configs === null || configs === void 0 ? void 0 : (_configs$stripe_curre = configs.stripe_currency) === null || _configs$stripe_curre === void 0 ? void 0 : _configs$stripe_curre.value : t('POINTS', 'Points')))), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_styles.SectionWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.BalanceElement, null, /*#__PURE__*/_react.default.createElement("h1", null, (currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.type) === 'cash' ? parsePrice(currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.balance) : currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.balance), /*#__PURE__*/_react.default.createElement("span", null, (currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.type) === 'cash' ? configs === null || configs === void 0 ? void 0 : (_configs$stripe_curre = configs.stripe_currency) === null || _configs$stripe_curre === void 0 ? void 0 : _configs$stripe_curre.value : t('POINTS', 'Points')))), /*#__PURE__*/_react.default.createElement(_GiftCardUI.GiftCardUI, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "transactions_list"
   }, !(transactionsList !== null && transactionsList !== void 0 && transactionsList.loading) && ((_transactionsList$lis = transactionsList.list) === null || _transactionsList$lis === void 0 ? void 0 : (_transactionsList$lis2 = _transactionsList$lis["wallet:".concat(currentWalletSelected === null || currentWalletSelected === void 0 ? void 0 : currentWalletSelected.id)]) === null || _transactionsList$lis2 === void 0 ? void 0 : _transactionsList$lis2.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -86,7 +86,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "2.0.1",
+    "ordering-components-external": "2.0.2",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

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

@@ -8,7 +8,7 @@ import { BusinessInformation } from '../BusinessInformation'
 import { BusinessReviews } from '../BusinessReviews'
 import BsInfoCircle from '@meronex/icons/bs/BsInfoCircle'
 
-import { useUtils, useOrder, useLanguage, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useOrder, useLanguage, useConfig } from 'ordering-components-external'
 
 import { convertHoursToMinutes, shape, lightenDarkenColor } from '../../../../../utils'
 import { Select } from '../../styles/Select'
@@ -35,7 +35,9 @@ import {
   SocialList,
   IconWrapper,
   BusinessInfoWrapper,
-  WrapperFloatingSearch
+  WrapperFloatingSearch,
+  CategorySelectedContainer,
+  SearchWrapper
 } from './styles'
 import { BusinessPreorder } from '../BusinessPreorder'
 
@@ -43,6 +45,7 @@ import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import isBetween from 'dayjs/plugin/isBetween'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 
 dayjs.extend(timezone)
 dayjs.extend(isBetween)
@@ -63,7 +66,9 @@ export const BusinessBasicInformation = (props) => {
     categoryState,
     errorQuantityProducts,
     isCustomerMode,
-    categoryClicked
+    categoryClicked,
+    categorySelected,
+    setCategoryClicked
   } = props
   const { business, loading } = businessState
 
@@ -72,23 +77,25 @@ export const BusinessBasicInformation = (props) => {
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
   const windowSize = useWindowSize()
-  const [orderingTheme] = useOrderingTheme()
   const [isBusinessReviews, setIsBusinessReviews] = useState(false)
   const [isPreOrder, setIsPreOrder] = useState(false)
   const [openSearchProducts, setOpenSearchProducts] = useState(false)
   const [{ configs }] = useConfig()
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
 
-  const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-  const showDeliveryFee = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
-  const showTime = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
-  const showReviews = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
-  const showDistance = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
-  const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
-  const isInfoShrunken = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
+  const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+  const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const hideTime = theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const hideReviews = theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const hideReviewsPopup = theme?.business_view?.components?.header?.components?.reviews?.hidden
+  const hideDistance = theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+  const hideSort = theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
+  const hideInfoIcon = theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+
+  const isInfoShrunken = theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
   const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
-  const hideCity = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const hideCity = theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
   const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
   const getBusinessType = () => {
@@ -154,21 +161,28 @@ export const BusinessBasicInformation = (props) => {
 
   const SearchComponent = () => {
     return (
-      <WrapperSearch id='search-component'>
-        <SearchIconWrapper
-          onClick={() => setOpenSearchProducts(true)}
-        >
-          <CgSearch />
-        </SearchIconWrapper>
-        {showSort && (
-          <Select
-            notAsync
-            notReload
-            options={sortByOptions}
-            defaultValue={sortByValue}
-            onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
-          />
+      <WrapperSearch id='search-component' isFlexEnd={windowSize.width >= 768}>
+        {categorySelected?.name && windowSize.width < 768 && (
+          <CategorySelectedContainer onClick={() => setCategoryClicked(false)}>
+            <BsCaretLeftFill /> {categorySelected?.name}
+          </CategorySelectedContainer>
         )}
+        <SearchWrapper>
+          <SearchIconWrapper
+            onClick={() => setOpenSearchProducts(true)}
+          >
+            <CgSearch />
+          </SearchIconWrapper>
+          {!hideSort && (
+            <Select
+              notAsync
+              notReload
+              options={sortByOptions}
+              defaultValue={sortByValue}
+              onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+            />
+          )}
+        </SearchWrapper>
       </WrapperSearch>
     )
   }
@@ -183,7 +197,7 @@ export const BusinessBasicInformation = (props) => {
 
   const BusinessInfoComponent = () => {
     return (
-      <BusinessInfoContainer isChew={isChew}>
+      <BusinessInfoContainer isChew={isChew} isFlexEnd={windowSize.width >= 768}>
         <BusinessInfoContent>
           <BusinessInfo className='info'>
             <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
@@ -263,7 +277,7 @@ export const BusinessBasicInformation = (props) => {
                 </SocialList>
               )}
               <BusinessDetail isSkeleton={loading}>
-                {orderState?.options.type === 1 && showDeliveryFee && (
+                {orderState?.options.type === 1 && !hideDeliveryFee && (
                   <>
                     {!loading ? (
                       <>
@@ -278,7 +292,7 @@ export const BusinessBasicInformation = (props) => {
                     )}
                   </>
                 )}
-                {showTime && (
+                {!hideTime && (
                   <>
                     {!loading ? (
                       <>
@@ -303,7 +317,7 @@ export const BusinessBasicInformation = (props) => {
                     )}
                   </>
                 )}
-                {showDistance && (
+                {!hideDistance && (
                   <>
                     {!loading ? (
                       <>
@@ -317,7 +331,7 @@ export const BusinessBasicInformation = (props) => {
                     )}
                   </>
                 )}
-                {showReviews && (
+                {!hideReviews && (
                   <>
                     {!loading ? (
                       <div className='review'>
@@ -339,7 +353,7 @@ export const BusinessBasicInformation = (props) => {
                         <span className='dot'>•</span>
                       </>
                     )}
-                    {business.reviews?.reviews && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
+                    {business.reviews?.reviews && !hideReviewsPopup && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
                   </div>
                 ) : (
                   <Skeleton width={isCustomerMode ? 100 : 150} />
@@ -390,7 +404,7 @@ export const BusinessBasicInformation = (props) => {
         {(business?.header || business?.logo || loading || isInfoShrunken) && (
           <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open} isChew={isChew}>
             {(!loading && !business?.open) && <h1>{t('CLOSED', 'Closed')}</h1>}
-            {(showLogo && business?.logo && !isChew) && (
+            {(!hideLogo && business?.logo && !isChew) && (
               <BusinessContent>
                 <WrapperBusinessLogo>
                   {!loading && (
@@ -429,7 +443,7 @@ export const BusinessBasicInformation = (props) => {
             )}
           </BusinessContainer>
         )}
-        {!business?.header && !business?.logo && !loading && !isInfoShrunken && (
+        {!business?.header && !business?.logo && !loading && !isInfoShrunken && !hideInfoIcon && (
           <BusinessMoreDetail position='relative'>
             <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
           </BusinessMoreDetail>