ordering-ui-external 1.0.1 → 1.1.0

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

@@ -5,16 +5,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PriceContainer = exports.ContentInfo = exports.BusinessTotal = exports.BusinessInfo = exports.BusinessActions = exports.AccordionText = exports.AccordionSection = exports.AccordionContent = exports.Accordion = void 0;
+exports.WrapperBusinessLogo = exports.TimeContainer = exports.PriceContainer = exports.ContentInfo = exports.BusinessTotal = exports.BusinessLogo = exports.BusinessInfo = exports.BusinessActions = exports.AccordionText = exports.AccordionSection = exports.AccordionContent = exports.Accordion = 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
 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 AccordionSection = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  opacity: 1;\n\n  ", "\n\n  &:last-child {\n    border-bottom: 0;\n    margin-bottom: 10px;\n  }\n"])), function (_ref) {
@@ -33,7 +39,7 @@ var Accordion = _styledComponents.default.div(_templateObject3 || (_templateObje
 
 exports.Accordion = Accordion;
 
-var ContentInfo = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n\n  > div {\n    display: flex;\n    align-items: center;\n\n    .go-store {\n      user-select: none;\n      text-decoration: underline;\n      color: ", ";\n      margin-right: 5px;\n      ", "\n    }\n\n    .clear-cart {\n      user-select: none;\n      text-decoration: underline;\n      color: #d81212;\n      margin-left: 5px;\n      ", "\n      &:first-letter {\n        text-transform: uppercase;\n      }\n    }\n\n    ", "\n  }\n  .change-store {\n    cursor: pointer;\n    text-decoration: underline;\n    color: ", ";\n    font-size: 12px;\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n  ", "\n\n  h2, span {\n    margin: 0px;\n  }\n\n  h2 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  @media (min-width: 576px) {\n    h2 {\n      font-size: 18px;\n    }\n    span {\n      font-size: 13px;\n    }\n  }\n"])), function (props) {
+var ContentInfo = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n\n  > div {\n    display: flex;\n    align-items: center;\n\n    .go-store {\n      user-select: none;\n      text-decoration: underline;\n      color: ", ";\n      margin-right: 5px;\n      ", "\n    }\n\n    .clear-cart {\n      user-select: none;\n      text-decoration: underline;\n      color: #d81212;\n      margin-left: 5px;\n      ", "\n      &:first-letter {\n        text-transform: uppercase;\n      }\n    }\n\n    ", "\n  }\n  .change-store {\n    cursor: pointer;\n    text-decoration: underline;\n    color: ", ";\n    font-size: 12px;\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n  ", "\n\n  span {\n    cursor: pointer;\n  }\n\n  h2, span {\n    margin: 0px;\n  }\n\n  h2 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  @media (min-width: 576px) {\n    h2 {\n      font-size: 18px;\n    }\n    span {\n      font-size: 13px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme;
@@ -87,4 +93,24 @@ exports.BusinessActions = BusinessActions;
 
 var PriceContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  button{ \n    padding: 10px 30px;\n    min-width: 150px;\n    width: 50%;\n    height: 50px;\n  }\n"])));
 
-exports.PriceContainer = PriceContainer;
+exports.PriceContainer = PriceContainer;
+
+var BusinessLogoStyled = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 75px;\n  height: 75px;\n  min-height: 75px;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: contain;\n  object-fit: contain;\n  background-position: center;\n  border-radius: 10px;\n"])));
+
+var BusinessLogo = function BusinessLogo(props) {
+  return /*#__PURE__*/_react.default.createElement(BusinessLogoStyled, _extends({}, props, {
+    style: {
+      backgroundImage: "url(".concat(props.bgimage, ")")
+    }
+  }), props.children);
+};
+
+exports.BusinessLogo = BusinessLogo;
+
+var WrapperBusinessLogo = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  max-width: 75px;\n  max-height: 75px;\n  height: 75px;\n  width: 75px;\n  margin-right: 10px;\n"])));
+
+exports.WrapperBusinessLogo = WrapperBusinessLogo;
+
+var TimeContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  svg{\n    position: relative;\n    top: 1px;\n    margin-right: 5px;\n  }\n"])));
+
+exports.TimeContainer = TimeContainer;

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

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BusinessListingSearchUI = exports.BusinessListingSearch = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styles = require("./styles");
 
@@ -43,8 +45,16 @@ var _BisDownArrow = _interopRequireDefault(require("@meronex/icons/bi/BisDownArr
 
 var _BisUpArrow = _interopRequireDefault(require("@meronex/icons/bi/BisUpArrow"));
 
+var _Modal = require("../Modal");
+
+var _ProductForm = require("../ProductForm");
+
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -72,7 +82,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
-  var _businessesSearchList, _sortItems$filter, _brandList$brands, _brandList$brands$fil, _orderState$options3, _orderState$options4, _orderState$options5, _businessesSearchList2, _businessesSearchList3, _businessesSearchList5;
+  var _businessesSearchList, _sortItems$filter, _brandList$brands, _brandList$brands$fil, _orderState$options3, _orderState$options4, _orderState$options5, _businessesSearchList2, _businessesSearchList3, _businessesSearchList5, _curProduct$business, _curProduct$business2, _curProduct$product, _curProduct$product2;
 
   var businessesSearchList = props.businessesSearchList,
       onBusinessClick = props.onBusinessClick,
@@ -98,6 +108,14 @@ var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
 
   var theme = (0, _styledComponents.useTheme)();
 
+  var _useState = (0, _react.useState)({
+    business: null,
+    product: null
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      curProduct = _useState2[0],
+      setCurProduct = _useState2[1];
+
   var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
       _useUtils2 = _slicedToArray(_useUtils, 1),
       _useUtils2$ = _useUtils2[0],
@@ -159,6 +177,28 @@ var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
     if (value === (filters === null || filters === void 0 ? void 0 : filters.price_level)) handleChangeFilters('price_level', null);else handleChangeFilters('price_level', value);
   };
 
+  var _onProductClick = function onProductClick(product, business) {
+    setCurProduct({
+      business: business,
+      product: product
+    });
+  };
+
+  var handleRedirectToCart = function handleRedirectToCart(product, code) {
+    setCurProduct({
+      business: null,
+      product: null
+    });
+    onBusinessClick(curProduct === null || curProduct === void 0 ? void 0 : curProduct.business);
+  };
+
+  var closeModalProductForm = function closeModalProductForm() {
+    setCurProduct({
+      business: null,
+      product: null
+    });
+  };
+
   var MaxSectionItem = function MaxSectionItem(_ref) {
     var _ref2;
 
@@ -188,6 +228,7 @@ var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
   return /*#__PURE__*/_react.default.createElement(_styles.BusinessListingSearchContainer, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessesTitle, null, t('SEARCH', 'Search')), /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
     lazyLoad: true,
     isCustomLayout: true,
+    forceFocus: true,
     placeholder: "".concat(t('SEARCH_BUSINESSES', 'Search Businesses'), " / ").concat(t('PLEASE_TYPE_AT_LEAST_3_CHARACTERS', 'Please type at least 3 characters')),
     onSearch: function onSearch(val) {
       return handleChangeTermValue(val);
@@ -332,6 +373,9 @@ var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
           isSoldOut: product.inventoried && !product.quantity,
           product: product,
           businessId: business === null || business === void 0 ? void 0 : business.id,
+          onProductClick: function onProductClick(product) {
+            return _onProductClick(product, business);
+          },
           handleUpdateProducts: function handleUpdateProducts(productId, changes) {
             return _handleUpdateProducts(productId, category === null || category === void 0 ? void 0 : category.id, business === null || business === void 0 ? void 0 : business.id, changes);
           }
@@ -357,7 +401,24 @@ var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
         isSkeleton: true
       });
     }))));
-  })))));
+  })))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    width: props !== null && props !== void 0 && props.useKioskApp ? '80%' : '760px',
+    open: !!(curProduct !== null && curProduct !== void 0 && curProduct.product),
+    closeOnBackdrop: true,
+    onClose: function onClose() {
+      return closeModalProductForm();
+    },
+    padding: "0",
+    isProductForm: true,
+    disableOverflowX: true
+  }, !!(curProduct !== null && curProduct !== void 0 && curProduct.product) && /*#__PURE__*/_react.default.createElement(_ProductForm.ProductForm, {
+    businessSlug: curProduct === null || curProduct === void 0 ? void 0 : (_curProduct$business = curProduct.business) === null || _curProduct$business === void 0 ? void 0 : _curProduct$business.slug,
+    useKioskApp: props === null || props === void 0 ? void 0 : props.useKioskApp,
+    businessId: curProduct === null || curProduct === void 0 ? void 0 : (_curProduct$business2 = curProduct.business) === null || _curProduct$business2 === void 0 ? void 0 : _curProduct$business2.id,
+    categoryId: curProduct === null || curProduct === void 0 ? void 0 : (_curProduct$product = curProduct.product) === null || _curProduct$product === void 0 ? void 0 : _curProduct$product.category_id,
+    productId: curProduct === null || curProduct === void 0 ? void 0 : (_curProduct$product2 = curProduct.product) === null || _curProduct$product2 === void 0 ? void 0 : _curProduct$product2.id,
+    onSave: handleRedirectToCart
+  })));
 };
 
 exports.BusinessListingSearchUI = BusinessListingSearchUI;

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

@@ -204,7 +204,7 @@ var BusinessPreorderUI = function BusinessPreorderUI(props) {
     var _times = getTimes(dateSelected, selectedMenu);
 
     setTimeList(_times);
-  }, [dateSelected, menu]);
+  }, [dateSelected, menu, business]);
   (0, _react.useEffect)(function () {
     if (type === 'business_hours') setMenu(null);
   }, [type]);
@@ -277,11 +277,13 @@ var BusinessPreorderUI = function BusinessPreorderUI(props) {
       },
       isDisabled: isDisabled
     }, /*#__PURE__*/_react.default.createElement("span", null, time.text));
-  })) : /*#__PURE__*/_react.default.createElement(_styles.ClosedBusinessMsg, null, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')))), !isPreOrderSetting && /*#__PURE__*/_react.default.createElement(_styles.ClosedBusinessMsg, null, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')), showButton && /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  })) : /*#__PURE__*/_react.default.createElement(_styles.ClosedBusinessMsg, null, !isProfessional ? t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment') : t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')))), !isPreOrderSetting && !isProfessional && /*#__PURE__*/_react.default.createElement(_styles.ClosedBusinessMsg, null, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')), showButton && /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     onClick: goToBusinessPage,
     disabled: isAsap || !(dateSelected && timeSelected)
-  }, t('GO_TO_MENU', 'Go to menu'), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), (orderState === null || orderState === void 0 ? void 0 : orderState.loading) && /*#__PURE__*/_react.default.createElement(_styles.Layer, null, (window.location.pathname !== '/search' || (orderState === null || orderState === void 0 ? void 0 : (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : (_orderState$options$a = _orderState$options.address) === null || _orderState$options$a === void 0 ? void 0 : _orderState$options$a.location)) && /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, {
+  }, t('GO_TO_MENU', 'Go to menu'), /*#__PURE__*/_react.default.createElement(_BsArrowRight.default, null))), (orderState === null || orderState === void 0 ? void 0 : orderState.loading) && /*#__PURE__*/_react.default.createElement(_styles.Layer, {
+    nobg: !!isProfessional
+  }, (window.location.pathname !== '/search' || (orderState === null || orderState === void 0 ? void 0 : (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : (_orderState$options$a = _orderState$options.address) === null || _orderState$options$a === void 0 ? void 0 : _orderState$options$a.location)) && /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, {
     style: {
       top: windowSize.width <= 768 ? '50%' : '40%',
       position: windowSize.width <= 768 ? 'absolute' : 'sticky',

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

@@ -113,7 +113,7 @@ exports.TypeContent = TypeContent;
 
 var Layer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", "\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: ", ";\n  ", "\n"])), function (_ref3) {
   var nobg = _ref3.nobg;
-  return !nobg && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background-color: rgba(255, 255, 255, 0.7);\n  "])));
+  return !nobg && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background-color: rgba(255, 255, 255, 0.7);\n    z-index: 1;\n  "])));
 }, function (_ref4) {
   var height = _ref4.height;
   return height || '100vh';

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

@@ -71,9 +71,13 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
       selectedCategory = _useState2[0],
       setSelectedCateogry = _useState2[1];
 
+  var scrollTopSpan = 60;
+
   var handleChangeCategory = function handleChangeCategory(category) {
     var _document$getElementB, _document$getElementB2;
 
+    var isBlockScroll = window.location.search.includes('category') && window.location.search.includes('product');
+
     if (business !== null && business !== void 0 && business.lazy_load_products_recommended) {
       handlerClickCategory(_objectSpread({}, category));
       return;
@@ -81,17 +85,21 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
 
     var topPos = 0;
     if (!(category !== null && category !== void 0 && category.id)) topPos = (_document$getElementB = document.getElementById('businessProductList')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetTop;else topPos = (_document$getElementB2 = document.getElementById("category".concat(category.id))) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.offsetTop;
-    window.scroll({
-      top: topPos - 60,
-      left: 0,
-      behavior: 'smooth'
-    });
+
+    if (!isBlockScroll) {
+      window.scroll({
+        top: topPos - scrollTopSpan,
+        left: 0,
+        behavior: 'smooth'
+      });
+    }
   };
 
   var ProductCategories = function ProductCategories() {
     return categories && categories.length && categories.map(function (category, i) {
       return /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
         key: i,
+        id: "category-menu".concat((category === null || category === void 0 ? void 0 : category.id) || '-all'),
         className: "category ".concat(category.id === 'featured' ? 'special' : ''),
         active: business !== null && business !== void 0 && business.lazy_load_products_recommended ? (categorySelected === null || categorySelected === void 0 ? void 0 : categorySelected.id) === category.id : (selectedCategory === null || selectedCategory === void 0 ? void 0 : selectedCategory.id) === category.id,
         onClick: function onClick() {
@@ -102,65 +110,90 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
     });
   };
 
-  (0, _react.useEffect)(function () {
-    var handleScroll = function handleScroll() {
-      if (business !== null && business !== void 0 && business.lazy_load_products_recommended) return;
-      var featuredElement = document.getElementById('categoryfeatured');
+  var handleScroll = function handleScroll() {
+    if (business !== null && business !== void 0 && business.lazy_load_products_recommended) return;
+    var featuredElement = document.getElementById('categoryfeatured');
 
-      var _categories = featuredElement ? _toConsumableArray(categories) : categories.filter(function (category) {
-        return category.id !== 'featured';
-      });
+    var _categories = featuredElement ? _toConsumableArray(categories) : categories.filter(function (category) {
+      return category.id !== 'featured';
+    });
+
+    var windowTop = window.scrollY;
+    var categoryListsElement = document.getElementById('category-lists');
+    var categoryAreaWidth = (categoryListsElement === null || categoryListsElement === void 0 ? void 0 : categoryListsElement.clientWidth) || 0;
+    var categoryScrollChange = categoryListsElement === null || categoryListsElement === void 0 ? void 0 : categoryListsElement.scrollLeft;
+
+    var _diff = -50;
 
-      (_categories === null || _categories === void 0 ? void 0 : _categories.length) && _categories.forEach(function (category) {
-        var _document$getElementB3, _document$getElementB4;
+    var _moveDiff = 30;
+    (_categories === null || _categories === void 0 ? void 0 : _categories.length) && _categories.some(function (category) {
+      var _document$getElementB3, _document$getElementB4;
 
-        var windowTop = window.scrollY;
-        var topPos = 0;
-        if (!(category !== null && category !== void 0 && category.id)) topPos = (_document$getElementB3 = document.getElementById('businessProductList')) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.offsetTop;else topPos = (_document$getElementB4 = document.getElementById("category".concat(category.id))) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.offsetTop;
+      var topPos = category !== null && category !== void 0 && category.id ? (_document$getElementB3 = document.getElementById("category".concat(category.id))) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.offsetTop : (_document$getElementB4 = document.getElementById('businessProductList')) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.offsetTop;
 
-        if (windowTop >= topPos - 60) {
-          setSelectedCateogry(category);
+      if (topPos - windowTop < scrollTopSpan + 5 && topPos - windowTop > 0 && category !== null && category !== void 0 && category.id) {
+        var choosedCategory = document.getElementById("category-menu".concat((category === null || category === void 0 ? void 0 : category.id) || '-all'));
+        var choosedCategoryLeft = (choosedCategory === null || choosedCategory === void 0 ? void 0 : choosedCategory.offsetLeft) || 0;
+
+        if (choosedCategoryLeft - categoryAreaWidth - categoryScrollChange > _diff || categoryScrollChange - choosedCategoryLeft > 0) {
+          var moveAmount = choosedCategoryLeft < 100 ? 0 : choosedCategoryLeft - _moveDiff;
+          categoryListsElement.scrollTo({
+            top: 0,
+            left: moveAmount,
+            behavior: 'smooth'
+          });
         }
-      });
-      var navbar = document.getElementById('category-lists');
-      var cart = document.getElementById('BusinessCartContainer');
-      var search = document.getElementById('WrapperSearchAbsolute');
-      var wrapperCategories = document.getElementById('wrapper-categories');
-      var styleSheet = document.getElementById('styles').sheet;
-      var style0 = '.sticky-prod-cat {';
-      style0 += 'position: fixed !important;';
-      style0 += 'top: 0 !important;';
-      style0 += 'width: 65.5% !important;';
-      style0 += '}';
-      var style1 = '.sticky-prod-cart {';
-      style1 += 'position: fixed !important;';
-      style1 += 'top: 0 !important;';
-      style1 += 'right: 2.5% !important;';
-      style1 += 'width: 28.5% !important;';
-      style1 += '}';
-      var style2 = '.sticky-search {';
-      style2 += 'position: fixed !important;';
-      style2 += 'top: 10px !important;';
-      style2 += 'right: 32% !important;';
-      style2 += 'height: 50px !important;';
-      style2 += 'z-index: 9999 !important;';
-      style2 += '}';
-      styleSheet.insertRule(style0, 0);
-      styleSheet.insertRule(style1, 1);
-      styleSheet.insertRule(style2, 2);
-      var limit = window.pageYOffset >= (wrapperCategories === null || wrapperCategories === void 0 ? void 0 : wrapperCategories.offsetTop) && window.pageYOffset > 0;
-
-      if (limit) {
+
+        setSelectedCateogry(category);
+        return true;
+      }
+    });
+    var navbar = document.getElementById('category-lists');
+    var cart = document.getElementById('BusinessCartContainer');
+    var search = document.getElementById('WrapperSearchAbsolute');
+    var wrapperCategories = document.getElementById('wrapper-categories');
+    var limit = window.pageYOffset >= (wrapperCategories === null || wrapperCategories === void 0 ? void 0 : wrapperCategories.offsetTop) && window.pageYOffset > 0;
+
+    if (limit) {
+      var classAdded = navbar.classList.contains('sticky-prod-cat');
+
+      if (!classAdded) {
         navbar && navbar.classList.add('sticky-prod-cat');
         cart && cart.classList.add('sticky-prod-cart');
         search && search.classList.add('sticky-search');
-      } else {
-        navbar && navbar.classList.remove('sticky-prod-cat');
-        cart && cart.classList.remove('sticky-prod-cart');
-        search && search.classList.remove('sticky-search');
       }
-    };
+    } else {
+      navbar && navbar.classList.remove('sticky-prod-cat');
+      cart && cart.classList.remove('sticky-prod-cart');
+      search && search.classList.remove('sticky-search');
+    }
+  };
 
+  (0, _react.useEffect)(function () {
+    var styleSheet = document.getElementById('styles').sheet;
+    var style0 = '.sticky-prod-cat {';
+    style0 += 'position: fixed !important;';
+    style0 += 'top: 0 !important;';
+    style0 += 'width: 97% !important;';
+    style0 += 'padding: 15px 5px 0px 0px;';
+    style0 += '}';
+    var style1 = '.sticky-prod-cart {';
+    style1 += 'position: fixed !important;';
+    style1 += 'top: 0 !important;';
+    style1 += 'right: 2.5% !important;';
+    style1 += 'width: 28.5% !important;';
+    style1 += 'margin-top: 32px !important;';
+    style1 += '}';
+    var style2 = '.sticky-search {';
+    style2 += 'position: fixed !important;';
+    style2 += 'top: 10px !important;';
+    style2 += 'right: 32% !important;';
+    style2 += 'height: 50px !important;';
+    style2 += 'z-index: 9999 !important;';
+    style2 += '}';
+    styleSheet.insertRule(style0, 0);
+    styleSheet.insertRule(style1, 1);
+    styleSheet.insertRule(style2, 2);
     window.addEventListener('scroll', handleScroll);
     return function () {
       return window.removeEventListener('scroll', handleScroll);

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var CategoriesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n  padding: 5px 0px 0px 0px;\n  background: ", ";\n  z-index: 1000;\n  position: sticky;\n  top: 0;\n  border-bottom: 1px solid #D9D9D9;\n  text-align: center;\n  width: ", ";\n\n  div.category {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    padding: 10px 0px;\n    margin: 0 15px;\n    &:nth-of-type(1) {\n      margin-left: 0;\n      ", "\n    }\n  }\n\n  div.special {\n    ", "\n  }\n\n  @media (min-width: 381px) {\n    padding: 15px 0px 0px 0px;\n  }\n  @media (min-width: 992px) {\n    width: ", ";\n  }\n"])), function (props) {
+var CategoriesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n  padding: 5px 0px 0px 0px;\n  background: ", ";\n  z-index: 1000;\n  position: absolute;\n  top: 0;\n  border-bottom: 1px solid #D9D9D9;\n  text-align: center;\n  width: ", ";\n\n  div.category {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    padding: 10px 0px;\n    margin: 0 15px;\n    &:nth-of-type(1) {\n      margin-left: 0;\n      ", "\n    }\n  }\n\n  div.special {\n    ", "\n  }\n\n  @media (min-width: 381px) {\n    padding: 15px 0px 0px 0px;\n  }\n  @media (min-width: 992px) {\n    width: ", ";\n  }\n"])), function (props) {
   return props.theme.colors.backgroundPage;
 }, function (props) {
   var _props$w;

package/_modules/themes/five/src/components/BusinessProductsList/layouts/groceries/index.js

@@ -91,7 +91,8 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
 
   var shortCategoryDescriptionSelected = (category === null || category === void 0 ? void 0 : (_category$description = category.description) === null || _category$description === void 0 ? void 0 : _category$description.length) > 200 ? "".concat(category === null || category === void 0 ? void 0 : (_category$description2 = category.description) === null || _category$description2 === void 0 ? void 0 : _category$description2.substring(0, 200), "...") : category === null || category === void 0 ? void 0 : category.description;
   return /*#__PURE__*/_react.default.createElement(_styles.ProductsContainer, null, (category === null || category === void 0 ? void 0 : category.id) && /*#__PURE__*/_react.default.createElement(_styles.WrapAllCategories, {
-    id: "container"
+    id: "container",
+    isCategorySelected: true
   }, /*#__PURE__*/_react.default.createElement(_styles.HeaderWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "category-title"
   }, (category === null || category === void 0 ? void 0 : category.image) && /*#__PURE__*/_react.default.createElement("img", {

package/_modules/themes/five/src/components/BusinessProductsList/layouts/groceries/styles.js

@@ -31,7 +31,10 @@ var ProductsListing = _styledComponents.default.div(_templateObject3 || (_templa
 
 exports.ProductsListing = ProductsListing;
 
-var WrapAllCategories = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .category-title {\n    display: flex;\n    align-items: center;\n    margin-left: 10px;\n    width: 100%;\n    ", "\n    img {\n      border-radius: 7.6px;\n      min-width: 41px;\n      min-height: 41px;\n      height: 41px;\n      width: 41px;\n    }\n  }\n  .category-description {\n    margin-left: 15px;\n    margin-bottom: 10px;\n    display: flex;\n    p {\n      margin: 0;\n      color: #909BA9;\n      white-space: pre;\n    }\n    span {\n      color: ", ";\n      text-decoration: underline;\n      margin-left: 10px;\n      cursor: pointer;\n    }\n  }\n  .wrap-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    button {\n      min-width: max-content;\n    }\n  }\n  h3 {\n    font-weight: 600;\n    font-size: 24px;\n    color: ", ";\n    margin-left: 10px;\n    ", "\n  }\n"])), function (props) {
+var WrapAllCategories = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .category-title {\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    margin-left: 10px;\n    ", "\n\n    img {\n      border-radius: 7.6px;\n      min-width: 41px;\n      min-height: 41px;\n      height: 41px;\n      width: 41px;\n    }\n  }\n  .category-description {\n    margin-left: 15px;\n    margin-bottom: 10px;\n    display: flex;\n    p {\n      margin: 0;\n      color: #909BA9;\n      white-space: pre;\n    }\n    span {\n      color: ", ";\n      text-decoration: underline;\n      margin-left: 10px;\n      cursor: pointer;\n    }\n  }\n\n  .wrap-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    button {\n      min-width: max-content;\n    }\n  }\n  h3 {\n    font-weight: 600;\n    font-size: 24px;\n    color: ", ";\n    margin-left: 10px;\n    ", "\n  }\n"])), function (_ref) {
+  var isCategorySelected = _ref.isCategorySelected;
+  return isCategorySelected ? 'flex-start' : 'space-between';
+}, 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-right: 10px;\n      margin-left: 0;\n    "])));
@@ -61,27 +64,27 @@ var DescriptionModalContainer = _styledComponents.default.div(_templateObject9 |
 
 exports.DescriptionModalContainer = DescriptionModalContainer;
 
-var RibbonBox = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  box-sizing: border-box;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  background-color: ", ";\n  max-width: 200px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  margin-left: 5px;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
+var RibbonBox = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  box-sizing: border-box;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  background-color: ", ";\n  max-width: 200px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  margin-left: 5px;\n\n  ", "\n\n  ", "\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)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 5px;\n  "])));
-}, function (_ref) {
-  var bgColor = _ref.bgColor;
-  return bgColor && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
 }, function (_ref2) {
-  var isRoundRect = _ref2.isRoundRect;
-  return isRoundRect && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
+  var bgColor = _ref2.bgColor;
+  return bgColor && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
 }, function (_ref3) {
-  var isCapsule = _ref3.isCapsule;
+  var isRoundRect = _ref3.isRoundRect;
+  return isRoundRect && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
+}, function (_ref4) {
+  var isCapsule = _ref4.isCapsule;
   return isCapsule && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
 });
 
 exports.RibbonBox = RibbonBox;
 
-var CategoryDescripion = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-left: 15px;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: flex-end;\n    p {\n      margin: 0;\n      color: #909BA9;\n      max-width: ", ";\n      overflow: hidden;\n      text-overflow: ellipsis;\n      overflow-wrap: anywhere;\n    }\n    span {\n      color: ", ";\n      text-decoration: underline;\n      margin-left: 10px;\n      cursor: pointer;\n      white-space: nowrap;\n      overflow: visible;\n    }\n"])), function (_ref4) {
-  var maxWidth = _ref4.maxWidth;
+var CategoryDescripion = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-left: 15px;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: flex-end;\n    p {\n      margin: 0;\n      color: #909BA9;\n      max-width: ", ";\n      overflow: hidden;\n      text-overflow: ellipsis;\n      overflow-wrap: anywhere;\n    }\n    span {\n      color: ", ";\n      text-decoration: underline;\n      margin-left: 10px;\n      cursor: pointer;\n      white-space: nowrap;\n      overflow: visible;\n    }\n"])), function (_ref5) {
+  var maxWidth = _ref5.maxWidth;
   return maxWidth ? "".concat(maxWidth - 200, "px") : 'initial';
 }, function (props) {
   return props.theme.colors.primary;

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

@@ -34,7 +34,7 @@ var ProductsListing = _styledComponents.default.div(_templateObject3 || (_templa
 
 exports.ProductsListing = ProductsListing;
 
-var WrapAllCategories = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .category-title {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: 5px;\n    padding-bottom: 12px;\n    margin-left: 10px;\n    ", "\n    img {\n      border-radius: 7.6px;\n      min-width: 41px;\n      min-height: 41px;\n      height: 41px;\n      width: 41px;\n      margin-right: 10px;\n      ", "\n    }\n    @media (min-width: 993px) {\n      margin: 0px;\n    }\n  }\n  h3 {\n    font-weight: 600;\n    font-size: 24px;\n    color: ", ";\n    margin: 0px 0px 0px 10px;\n    ", "\n    @media (min-width: 993px) {\n      margin: 0px;\n    }\n  }\n"])), function (props) {
+var WrapAllCategories = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .category-title {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: 5px;\n    padding-bottom: 12px;\n    margin-left: 10px;\n    ", "\n\n    img {\n      border-radius: 7.6px;\n      min-width: 41px;\n      min-height: 41px;\n      height: 41px;\n      width: 41px;\n      margin-right: 10px;\n      ", "\n    }\n\n    @media (min-width: 993px) {\n      margin: 0px;\n    }\n  }\n\n  h3 {\n    font-weight: 600;\n    font-size: 24px;\n    color: ", ";\n    margin: 0px 0px 0px 10px;\n    ", "\n\n    @media (min-width: 993px) {\n      margin: 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-right: 10px;\n      margin-left: 0;\n    "])));
@@ -71,7 +71,7 @@ var HeaderWrapper = _styledComponents.default.div(_templateObject10 || (_templat
 
 exports.HeaderWrapper = HeaderWrapper;
 
-var DescriptionModalContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 10px;\n  img{\n    border-radius: 7.6px;\n    width: 200px;\n    height: 200px;\n    min-width: 200px;\n    min-height: 200px;\n    margin-bottom: 20px;\n  }\n  p{\n    white-space: pre;\n  }\n"])));
+var DescriptionModalContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 10px;\n  img{\n    border-radius: 7.6px;\n    width: 200px;\n    height: 200px;\n    min-width: 200px;\n    min-height: 200px;\n    margin-bottom: 20px;\n  }\n"])));
 
 exports.DescriptionModalContainer = DescriptionModalContainer;
 
@@ -79,7 +79,7 @@ var DescriptionContainer = _styledComponents.default.div(_templateObject12 || (_
 
 exports.DescriptionContainer = DescriptionContainer;
 
-var RibbonBox = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  box-sizing: border-box;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  background-color: ", ";\n  max-width: 200px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  margin-left: 5px;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
+var RibbonBox = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  box-sizing: border-box;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  background-color: ", ";\n  max-width: 200px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  margin-left: 5px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.colors.colorTextSignForm;
 }, function (props) {
   return props.theme.colors.primary;