ordering-ui-external 1.0.0 → 1.1.1

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");
 
@@ -15,7 +17,7 @@ var _reactBootstrapIcons = require("react-bootstrap-icons");
 
 var _SearchBar = require("../SearchBar");
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _BusinessController = require("../BusinessController");
 
@@ -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,
@@ -88,24 +98,32 @@ var BusinessListingSearchUI = function BusinessListingSearchUI(props) {
       handleUpdateBusinessList = props.handleUpdateBusinessList,
       _handleUpdateProducts = props.handleUpdateProducts;
 
-  var _useOrder = (0, _orderingComponents.useOrder)(),
+  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
       _useOrder2 = _slicedToArray(_useOrder, 1),
       orderState = _useOrder2[0];
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
   var theme = (0, _styledComponents.useTheme)();
 
-  var _useUtils = (0, _orderingComponents.useUtils)(),
+  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],
       parsePrice = _useUtils2$.parsePrice,
       optimizeImage = _useUtils2$.optimizeImage,
       parseDistance = _useUtils2$.parseDistance;
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       auth = _useSession2[0].auth;
 
@@ -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;
@@ -367,7 +428,7 @@ var BusinessListingSearch = function BusinessListingSearch(props) {
     UIComponent: BusinessListingSearchUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.BusinessSearchList, BusinessListSearch);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.BusinessSearchList, BusinessListSearch);
 };
 
-exports.BusinessListingSearch = BusinessListingSearch;
+exports.BusinessListingSearch = BusinessListingSearch;

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

@@ -9,7 +9,7 @@ exports.BusinessMenuList = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _Select = require("../../styles/Select");
 
@@ -47,7 +47,7 @@ var BusinessMenuListUI = function BusinessMenuListUI(props) {
   var businessMenuList = props.businessMenuList,
       setMenu = props.setMenu;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -112,7 +112,7 @@ var BusinessMenuList = function BusinessMenuList(props) {
     UIComponent: BusinessMenuListUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.BusinessMenuListing, businessMenuListProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.BusinessMenuListing, businessMenuListProps);
 };
 
-exports.BusinessMenuList = BusinessMenuList;
+exports.BusinessMenuList = BusinessMenuList;

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

@@ -9,7 +9,7 @@ exports.BusinessPreorder = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -87,21 +87,21 @@ var BusinessPreorderUI = function BusinessPreorderUI(props) {
   var _useLocation = (0, _reactRouterDom.useLocation)(),
       pathname = _useLocation.pathname;
 
-  var _useUtils = (0, _orderingComponents.useUtils)(),
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
       _useUtils2 = _slicedToArray(_useUtils, 1),
       optimizeImage = _useUtils2[0].optimizeImage;
 
   var theme = (0, _styledComponents.useTheme)();
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
-  var _useOrder = (0, _orderingComponents.useOrder)(),
+  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
       _useOrder2 = _slicedToArray(_useOrder, 1),
       orderState = _useOrder2[0];
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -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',
@@ -295,7 +297,7 @@ var BusinessPreorder = function BusinessPreorder(props) {
 
   var maxDays = props.maxDays;
 
-  var _useConfig3 = (0, _orderingComponents.useConfig)(),
+  var _useConfig3 = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig4 = _slicedToArray(_useConfig3, 1),
       configs = _useConfig4[0].configs;
 
@@ -311,7 +313,7 @@ var BusinessPreorder = function BusinessPreorder(props) {
     maxDate: currentDate
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.MomentOption, businessPreorderProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.MomentOption, businessPreorderProps);
 };
 
-exports.BusinessPreorder = BusinessPreorder;
+exports.BusinessPreorder = BusinessPreorder;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _AutoScroll = require("../../../../../components/AutoScroll");
 
@@ -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);
@@ -205,7 +238,7 @@ var BusinessProductsCategories = function BusinessProductsCategories(props) {
     UIComponent: BusinessProductsCategoriesUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.BusinessProductsCategories, businessProductsCategoriesProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.BusinessProductsCategories, businessProductsCategoriesProps);
 };
 
-exports.BusinessProductsCategories = BusinessProductsCategories;
+exports.BusinessProductsCategories = BusinessProductsCategories;

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _AccordionDropdown = require("../../../AccordionDropdown");
 
@@ -122,7 +122,7 @@ var BusinessProductsCategories = function BusinessProductsCategories(props) {
     UIComponent: BusinessProductsCategoriesUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.BusinessProductsCategories, businessProductsCategoriesProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.BusinessProductsCategories, businessProductsCategoriesProps);
 };
 
-exports.BusinessProductsCategories = BusinessProductsCategories;
+exports.BusinessProductsCategories = BusinessProductsCategories;

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

@@ -9,7 +9,7 @@ exports.BusinessProductsList = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _SingleProductCard = require("../SingleProductCard");
 
@@ -80,11 +80,11 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       handleUpdateProducts = props.handleUpdateProducts,
       isSearchMode = props.isSearchMode;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
@@ -398,7 +398,7 @@ var BusinessProductsList = function BusinessProductsList(props) {
     UIComponent: BusinessProductsListUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.ProductsList, businessProductsListProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ProductsList, businessProductsListProps);
 };
 
-exports.BusinessProductsList = BusinessProductsList;
+exports.BusinessProductsList = BusinessProductsList;

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

@@ -9,7 +9,7 @@ exports.BusinessProductsList = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _Buttons = require("../../../../styles/Buttons");
 
@@ -74,11 +74,11 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       currentCart = props.currentCart,
       handleUpdateProducts = props.handleUpdateProducts;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
@@ -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", {
@@ -272,7 +273,7 @@ var BusinessProductsList = function BusinessProductsList(props) {
     UIComponent: BusinessProductsListUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.ProductsList, businessProductsListProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ProductsList, businessProductsListProps);
 };
 
-exports.BusinessProductsList = BusinessProductsList;
+exports.BusinessProductsList = BusinessProductsList;