ordering-ui-external 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/_modules/themes/five/src/components/BusinessBasicInformation/index.js +33 -1
  2. package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js +3 -1
  3. package/_modules/themes/five/src/components/BusinessProductsCategories/index.js +27 -11
  4. package/_modules/themes/five/src/components/BusinessProductsCategories/styles.js +1 -1
  5. package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js +3 -7
  6. package/_modules/themes/five/src/components/RenderProductsLayout/index.js +5 -4
  7. package/_modules/themes/five/src/components/RenderProductsLayout/styles.js +3 -1
  8. package/_modules/themes/five/src/components/SingleProductCard/index.js +2 -2
  9. package/package.json +1 -1
  10. package/src/themes/five/src/components/BusinessBasicInformation/index.js +29 -1
  11. package/src/themes/five/src/components/BusinessBasicInformation/styles.js +11 -0
  12. package/src/themes/five/src/components/BusinessProductsCategories/index.js +21 -11
  13. package/src/themes/five/src/components/BusinessProductsCategories/styles.js +3 -3
  14. package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js +2 -4
  15. package/src/themes/five/src/components/RenderProductsLayout/index.js +3 -2
  16. package/src/themes/five/src/components/RenderProductsLayout/styles.js +7 -3
  17. package/src/themes/five/src/components/SingleProductCard/index.js +1 -1
package/_modules/themes/five/src/components/BusinessBasicInformation/index.js CHANGED
@@ -192,8 +192,36 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
192
192
  document.body.style.overflowY = openSearchProducts ? 'hidden' : 'auto';
193
193
  }, [openSearchProducts]);
194
194
 
195
+ var handleScroll = function handleScroll() {
196
+ var searchElement = document.getElementById('search-component');
197
+ if (!searchElement) return;
198
+ var limit = window.pageYOffset >= (searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) && window.pageYOffset > 0;
199
+
200
+ if (limit) {
201
+ var classAdded = searchElement.classList.contains('fixed-search');
202
+ !classAdded && searchElement.classList.add('fixed-search');
203
+ } else {
204
+ searchElement && searchElement.classList.remove('fixed-search');
205
+ }
206
+ };
207
+
208
+ (0, _react.useEffect)(function () {
209
+ window.addEventListener('scroll', handleScroll);
210
+ return function () {
211
+ return window.removeEventListener('scroll', handleScroll);
212
+ };
213
+ }, []);
214
+ (0, _react.useEffect)(function () {
215
+ window.scroll({
216
+ top: window.scrollY - 1,
217
+ left: 0
218
+ });
219
+ }, [sortByValue]);
220
+
195
221
  var SearchComponent = function SearchComponent() {
196
- return /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(_styles.SearchIconWrapper, {
222
+ return /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, {
223
+ id: "search-component"
224
+ }, /*#__PURE__*/_react.default.createElement(_styles.SearchIconWrapper, {
197
225
  onClick: function onClick() {
198
226
  return setOpenSearchProducts(true);
199
227
  }
@@ -319,6 +347,10 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
319
347
  onClose: function onClose() {
320
348
  handleChangeSearch('');
321
349
  setOpenSearchProducts(false);
350
+ window.scroll({
351
+ top: window.scrollY - 1,
352
+ left: 0
353
+ });
322
354
  },
323
355
  business: businessState.business
324
356
  })), !isInfoShrunken && /*#__PURE__*/_react.default.createElement(BusinessInfoComponent, null), /*#__PURE__*/_react.default.createElement(_styles.BusinessContainer, {
package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js CHANGED
@@ -90,7 +90,7 @@ var BusinessInfoContent = _styledComponents.default.div(_templateObject14 || (_t
90
90
 
91
91
  exports.BusinessInfoContent = BusinessInfoContent;
92
92
 
93
- var WrapperSearch = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin: 15px 0px 0px;\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n\n .search-bar {\n margin-right: 10px;\n ", "\n input {\n width: 100%;\n\n @media (min-width: 500px) {\n width: 250px;\n }\n }\n }\n\n div:last-child {\n text-align: right;\n\n ", "\n }\n\n #select-input {\n background-color: transparent !important;\n border: none;\n color: #748194 !important;\n\n #list {\n border-radius: 8px;\n }\n }\n"])), function (props) {
93
+ var WrapperSearch = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin: 15px 0px 0px;\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n box-sizing: border-box;\n\n .search-bar {\n margin-right: 10px;\n ", "\n input {\n width: 100%;\n\n @media (min-width: 500px) {\n width: 250px;\n }\n }\n }\n\n div:last-child {\n text-align: right;\n\n ", "\n }\n\n #select-input {\n background-color: transparent !important;\n border: none;\n color: #748194 !important;\n\n #list {\n border-radius: 8px;\n }\n }\n &.fixed-search {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1002;\n width: 100vw;\n margin-top: 0px;\n background-color: ", ";\n padding: 10px;\n }\n"])), function (props) {
94
94
  var _props$theme4;
95
95
 
96
96
  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n margin-left: 10px;\n margin-right: 0;\n "])));
@@ -98,6 +98,8 @@ var WrapperSearch = _styledComponents.default.div(_templateObject15 || (_templat
98
98
  var _props$theme5;
99
99
 
100
100
  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n text-align: left;\n "])));
101
+ }, function (props) {
102
+ return props.theme.colors.backgroundPage;
101
103
  });
102
104
 
103
105
  exports.WrapperSearch = WrapperSearch;
package/_modules/themes/five/src/components/BusinessProductsCategories/index.js CHANGED
@@ -15,6 +15,10 @@ var _orderingComponentsExternal = require("ordering-components-external");
15
15
 
16
16
  var _AutoScroll = require("../../../../../components/AutoScroll");
17
17
 
18
+ var _styledComponents = require("styled-components");
19
+
20
+ var _useWindowSize2 = require("../../../../../hooks/useWindowSize");
21
+
18
22
  var _styles = require("./styles");
19
23
 
20
24
  var _Tabs = require("../../styles/Tabs");
@@ -62,7 +66,9 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
62
66
  openBusinessInformation = props.openBusinessInformation,
63
67
  business = props.business,
64
68
  handlerClickCategory = props.handlerClickCategory,
65
- categorySelected = props.categorySelected;
69
+ categorySelected = props.categorySelected,
70
+ useKioskApp = props.useKioskApp;
71
+ var theme = (0, _styledComponents.useTheme)();
66
72
 
67
73
  var _useState = (0, _react.useState)({
68
74
  id: null
@@ -71,6 +77,9 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
71
77
  selectedCategory = _useState2[0],
72
78
  setSelectedCateogry = _useState2[1];
73
79
 
80
+ var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
81
+ width = _useWindowSize.width;
82
+
74
83
  var scrollTopSpan = 60;
75
84
 
76
85
  var handleChangeCategory = function handleChangeCategory(category) {
@@ -126,12 +135,16 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
126
135
  var _diff = -50;
127
136
 
128
137
  var _moveDiff = 30;
138
+
139
+ var _paddDiff = scrollTopSpan + 10;
140
+
129
141
  (_categories === null || _categories === void 0 ? void 0 : _categories.length) && _categories.some(function (category) {
130
- var _document$getElementB3, _document$getElementB4;
142
+ var _document$getElementB3, _document$getElementB4, _document$getElementB5;
131
143
 
132
144
  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;
145
+ var HeightOfEle = category !== null && category !== void 0 && category.id ? (_document$getElementB5 = document.getElementById("category".concat(category.id))) === null || _document$getElementB5 === void 0 ? void 0 : _document$getElementB5.clientHeight : 0;
133
146
 
134
- if (topPos - windowTop < scrollTopSpan + 5 && topPos - windowTop > 0 && category !== null && category !== void 0 && category.id) {
147
+ if (windowTop > topPos - _paddDiff && windowTop < topPos + HeightOfEle - _paddDiff && category !== null && category !== void 0 && category.id) {
135
148
  var choosedCategory = document.getElementById("category-menu".concat((category === null || category === void 0 ? void 0 : category.id) || '-all'));
136
149
  var choosedCategoryLeft = (choosedCategory === null || choosedCategory === void 0 ? void 0 : choosedCategory.offsetLeft) || 0;
137
150
 
@@ -170,26 +183,29 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
170
183
  };
171
184
 
172
185
  (0, _react.useEffect)(function () {
186
+ if (typeof useKioskApp === 'undefined') return;
173
187
  var styleSheet = document.getElementById('styles').sheet;
174
188
  var style0 = '.sticky-prod-cat {';
175
189
  style0 += 'position: fixed !important;';
176
- style0 += 'top: 0 !important;';
177
- style0 += 'width: 97% !important;';
178
- style0 += 'padding: 15px 5px 0px 0px;';
190
+ style0 += 'top: 0px !important;';
191
+ style0 += 'left: 0px !important;';
192
+ style0 += 'padding: 5px 5px 0px 5px !important;';
193
+ style0 += "width: calc(100% - ".concat(useKioskApp ? '50px' : '155px', ") !important;");
179
194
  style0 += '}';
180
195
  var style1 = '.sticky-prod-cart {';
181
196
  style1 += 'position: fixed !important;';
182
- style1 += 'top: 0 !important;';
197
+ style1 += 'top: 38px !important;';
183
198
  style1 += 'right: 2.5% !important;';
184
199
  style1 += 'width: 28.5% !important;';
185
200
  style1 += 'margin-top: 32px !important;';
186
201
  style1 += '}';
187
202
  var style2 = '.sticky-search {';
188
203
  style2 += 'position: fixed !important;';
189
- style2 += 'top: 10px !important;';
190
- style2 += 'right: 32% !important;';
191
- style2 += 'height: 50px !important;';
204
+ style2 += 'top: 0px !important;';
205
+ style2 += 'right: 0% !important;';
192
206
  style2 += 'z-index: 9999 !important;';
207
+ style2 += 'width: 50px !important;';
208
+ style2 += "background-color: ".concat(theme.colors.backgroundPage, " !important;");
193
209
  style2 += '}';
194
210
  styleSheet.insertRule(style0, 0);
195
211
  styleSheet.insertRule(style1, 1);
@@ -198,7 +214,7 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
198
214
  return function () {
199
215
  return window.removeEventListener('scroll', handleScroll);
200
216
  };
201
- }, []);
217
+ }, [useKioskApp]);
202
218
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
203
219
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
204
220
  key: i
package/_modules/themes/five/src/components/BusinessProductsCategories/styles.js CHANGED
@@ -17,7 +17,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
17
17
 
18
18
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
19
19
 
20
- 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) {
20
+ 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: 1002;\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) {
21
21
  return props.theme.colors.backgroundPage;
22
22
  }, function (props) {
23
23
  var _props$w;
package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js CHANGED
@@ -90,7 +90,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
90
90
  var PIXELS_TO_SCROLL = 300;
91
91
 
92
92
  var BusinessesListingUI = function BusinessesListingUI(props) {
93
- var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _businessesList$busin, _businessesList$busin3, _props$beforeElements, _props$beforeComponen, _theme$images2, _theme$images2$genera, _citiesState$cities2, _citiesState$cities3, _citiesState$cities3$, _configs$advanced_bus, _orderState$options4, _orderState$options4$, _configs$advanced_bus2, _orderState$options5, _orderState$options5$, _businessesList$busin6, _businessesList$busin7, _orderState$options8, _citiesState$cities4, _props$afterComponent, _props$afterElements;
93
+ var _theme$business_listi, _theme$business_listi2, _theme$business_listi3, _theme$business_listi4, _businessesList$busin, _businessesList$busin3, _props$beforeElements, _props$beforeComponen, _theme$images2, _theme$images2$genera, _citiesState$cities2, _citiesState$cities3, _citiesState$cities3$, _configs$advanced_bus, _orderState$options4, _orderState$options4$, _configs$advanced_bus2, _orderState$options5, _orderState$options5$, _businessesList$busin6, _businessesList$busin7, _orderState$options8, _citiesState$cities4, _props$afterComponent, _props$afterElements;
94
94
 
95
95
  var businessesList = props.businessesList,
96
96
  paginationProps = props.paginationProps,
@@ -128,10 +128,6 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
128
128
 
129
129
  var theme = (0, _styledComponents.useTheme)();
130
130
 
131
- var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
132
- _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
133
- orderingTheme = _useOrderingTheme2[0];
134
-
135
131
  var _useState = (0, _react.useState)({
136
132
  listOpen: false,
137
133
  formOpen: false,
@@ -181,7 +177,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
181
177
  favoriteIds = _useState16[0],
182
178
  setFavoriteIds = _useState16[1];
183
179
 
184
- var hideCities = orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.business_listing_view) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.cities) === null || _orderingTheme$theme$3 === void 0 ? void 0 : _orderingTheme$theme$3.hidden;
180
+ var hideCities = (_theme$business_listi = theme === null || theme === void 0 ? void 0 : (_theme$business_listi2 = theme.business_listing_view) === null || _theme$business_listi2 === void 0 ? void 0 : (_theme$business_listi3 = _theme$business_listi2.components) === null || _theme$business_listi3 === void 0 ? void 0 : (_theme$business_listi4 = _theme$business_listi3.cities) === null || _theme$business_listi4 === void 0 ? void 0 : _theme$business_listi4.hidden) !== null && _theme$business_listi !== void 0 ? _theme$business_listi : true;
185
181
  var businessesIds = isCustomLayout && businessesList.businesses && ((_businessesList$busin = businessesList.businesses) === null || _businessesList$busin === void 0 ? void 0 : _businessesList$busin.map(function (business) {
186
182
  return business.id;
187
183
  }));
@@ -387,7 +383,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
387
383
  page: 'business_search'
388
384
  });
389
385
  }
390
- }), typeof hideCities !== 'undefined' && !hideCities && (citiesState === null || citiesState === void 0 ? void 0 : (_citiesState$cities2 = citiesState.cities) === null || _citiesState$cities2 === void 0 ? void 0 : _citiesState$cities2.length) > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
386
+ }), !hideCities && (citiesState === null || citiesState === void 0 ? void 0 : (_citiesState$cities2 = citiesState.cities) === null || _citiesState$cities2 === void 0 ? void 0 : _citiesState$cities2.length) > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
391
387
  color: "primary",
392
388
  onClick: handleOpenCities
393
389
  }, (citiesState === null || citiesState === void 0 ? void 0 : (_citiesState$cities3 = citiesState.cities) === null || _citiesState$cities3 === void 0 ? void 0 : (_citiesState$cities3$ = _citiesState$cities3.find(function (city) {
package/_modules/themes/five/src/components/RenderProductsLayout/index.js CHANGED
@@ -84,7 +84,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
84
84
  var layoutOne = 'groceries';
85
85
 
86
86
  var RenderProductsLayout = function RenderProductsLayout(props) {
87
- var _configs$use_parent_c, _configs$use_parent_c2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17, _orderingTheme$theme18, _orderingTheme$theme19, _orderingTheme$theme20, _orderingTheme$theme21, _orderingTheme$theme22, _orderingTheme$theme23, _orderingTheme$theme24, _orderingTheme$theme25, _orderingTheme$theme26, _orderingTheme$theme27, _orderingTheme$theme28, _orderingTheme$theme29, _orderingTheme$theme30, _orderingTheme$theme31, _orderingTheme$theme32, _orderingTheme$theme33, _orderingTheme$theme34, _businessState$busine, _businessState$busine2, _business$categories, _theme$defaultLanguag, _theme$defaultLanguag2, _business$professiona, _theme$defaultLanguag3, _theme$defaultLanguag4, _currentCart$products, _business$professiona2, _business$categories2, _theme$defaultLanguag5, _theme$defaultLanguag6, _theme$defaultLanguag7, _theme$defaultLanguag8, _currentCart$products2, _currentCart$products3;
87
+ var _configs$use_parent_c, _configs$use_parent_c2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _orderingTheme$theme16, _orderingTheme$theme17, _orderingTheme$theme18, _orderingTheme$theme19, _orderingTheme$theme20, _orderingTheme$theme21, _orderingTheme$theme22, _orderingTheme$theme23, _orderingTheme$theme24, _orderingTheme$theme25, _orderingTheme$theme26, _orderingTheme$theme27, _orderingTheme$theme28, _orderingTheme$theme29, _orderingTheme$theme30, _theme$business_view$, _theme$business_view, _theme$business_view$2, _theme$business_view$3, _businessState$busine, _businessState$busine2, _business$categories, _theme$defaultLanguag, _theme$defaultLanguag2, _business$professiona, _theme$defaultLanguag3, _theme$defaultLanguag4, _currentCart$products, _business$professiona2, _business$categories2, _theme$defaultLanguag5, _theme$defaultLanguag6, _theme$defaultLanguag7, _theme$defaultLanguag8, _currentCart$products2, _currentCart$products3;
88
88
 
89
89
  var errors = props.errors,
90
90
  isError = props.isError,
@@ -156,12 +156,12 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
156
156
  layoutOne: frontLayout === layoutOne && isUseParentCategory
157
157
  };
158
158
  var showCartOnProductList = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme26 = orderingTheme.theme) !== null && _orderingTheme$theme26 !== void 0 && (_orderingTheme$theme27 = _orderingTheme$theme26.business_view) !== null && _orderingTheme$theme27 !== void 0 && (_orderingTheme$theme28 = _orderingTheme$theme27.components) !== null && _orderingTheme$theme28 !== void 0 && (_orderingTheme$theme29 = _orderingTheme$theme28.cart) !== null && _orderingTheme$theme29 !== void 0 && (_orderingTheme$theme30 = _orderingTheme$theme29.components) !== null && _orderingTheme$theme30 !== void 0 && _orderingTheme$theme30.hidden);
159
- var hideBusinessNearCity = orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme31 = orderingTheme.theme) === null || _orderingTheme$theme31 === void 0 ? void 0 : (_orderingTheme$theme32 = _orderingTheme$theme31.business_view) === null || _orderingTheme$theme32 === void 0 ? void 0 : (_orderingTheme$theme33 = _orderingTheme$theme32.components) === null || _orderingTheme$theme33 === void 0 ? void 0 : (_orderingTheme$theme34 = _orderingTheme$theme33.near_business) === null || _orderingTheme$theme34 === void 0 ? void 0 : _orderingTheme$theme34.hidden;
159
+ var hideBusinessNearCity = (_theme$business_view$ = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view.components) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.near_business) === null || _theme$business_view$3 === void 0 ? void 0 : _theme$business_view$3.hidden) !== null && _theme$business_view$ !== void 0 ? _theme$business_view$ : true;
160
160
  var BusinessLayoutCategories = businessLayout.layoutOne ? _groceries.BusinessProductsCategories : _BusinessProductsCategories.BusinessProductsCategories;
161
161
  var BusinessLayoutProductsList = businessLayout.layoutOne ? _groceries2.BusinessProductsList : _BusinessProductsList.BusinessProductsList;
162
162
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoading && (business === null || business === void 0 ? void 0 : business.id) && /*#__PURE__*/_react.default.createElement(_styles.WrappLayout, {
163
163
  isCartOnProductsList: isCartOnProductsList
164
- }, typeof hideBusinessNearCity !== 'undefined' && !hideBusinessNearCity && !useKioskApp && /*#__PURE__*/_react.default.createElement(_styles.NearBusiness, null, /*#__PURE__*/_react.default.createElement(_BusinessesListing.BusinessesListing, {
164
+ }, !hideBusinessNearCity && !useKioskApp && /*#__PURE__*/_react.default.createElement(_styles.NearBusiness, null, /*#__PURE__*/_react.default.createElement(_BusinessesListing.BusinessesListing, {
165
165
  logosLayout: true,
166
166
  propsToFetch: ['id', 'logo', 'location', 'timezone', 'schedule', 'open', 'slug'],
167
167
  cityId: businessState === null || businessState === void 0 ? void 0 : (_businessState$busine = businessState.business) === null || _businessState$busine === void 0 ? void 0 : _businessState$busine.city_id,
@@ -317,7 +317,8 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
317
317
  openBusinessInformation: openBusinessInformation,
318
318
  openCategories: openCategories,
319
319
  business: business,
320
- currentCart: currentCart
320
+ currentCart: currentCart,
321
+ useKioskApp: useKioskApp
321
322
  })), /*#__PURE__*/_react.default.createElement(_styles.BusinessCategoryProductWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.WrapContent, null, /*#__PURE__*/_react.default.createElement(BusinessLayoutProductsList, {
322
323
  categories: [{
323
324
  id: null,
package/_modules/themes/five/src/components/RenderProductsLayout/styles.js CHANGED
@@ -95,7 +95,9 @@ var ProfessionalFilterWrapper = _styledComponents.default.div(_templateObject16
95
95
 
96
96
  exports.ProfessionalFilterWrapper = ProfessionalFilterWrapper;
97
97
 
98
- var WrapperSearchAbsolute = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: absolute;\n right: 5px;\n top: 10px;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
98
+ var WrapperSearchAbsolute = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: absolute;\n right: 5px;\n top: 0px;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n width: 40px;\n height: 52px;\n background-color: ", ";\n box-sizing: border-box;\n padding-bottom: 5px;\n"])), function (props) {
99
+ return props.theme.colors.backgroundPage;
100
+ });
99
101
 
100
102
  exports.WrapperSearchAbsolute = WrapperSearchAbsolute;
101
103
 
package/_modules/themes/five/src/components/SingleProductCard/index.js CHANGED
@@ -66,7 +66,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
66
66
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
67
67
 
68
68
  var SingleProductCardUI = function SingleProductCardUI(props) {
69
- var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _product$ribbon, _product$ribbon2, _product$ribbon3, _product$ribbon4, _product$ribbon5, _product$ribbon6, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
69
+ var _theme$business_view$, _theme$business_view, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _product$ribbon, _product$ribbon2, _product$ribbon3, _product$ribbon4, _product$ribbon5, _product$ribbon6, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
70
70
 
71
71
  var product = props.product,
72
72
  isSoldOut = props.isSoldOut,
@@ -138,7 +138,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
138
138
  }, 0);
139
139
  var totalBalance = (productBalance || 0) - removeToBalance;
140
140
  var maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance;
141
- var hideAddButton = orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.business_view) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.products) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) === null || _orderingTheme$theme$4 === void 0 ? void 0 : (_orderingTheme$theme$5 = _orderingTheme$theme$4.add_to_cart_button) === null || _orderingTheme$theme$5 === void 0 ? void 0 : _orderingTheme$theme$5.hidden; // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
141
+ var hideAddButton = (_theme$business_view$ = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view.components) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.products) === null || _theme$business_view$3 === void 0 ? void 0 : (_theme$business_view$4 = _theme$business_view$3.components) === null || _theme$business_view$4 === void 0 ? void 0 : (_theme$business_view$5 = _theme$business_view$4.add_to_cart_button) === null || _theme$business_view$5 === void 0 ? void 0 : _theme$business_view$5.hidden) !== null && _theme$business_view$ !== void 0 ? _theme$business_view$ : true; // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
142
142
 
143
143
  var maxCartProductInventory = (product !== null && product !== void 0 && product.inventoried ? product === null || product === void 0 ? void 0 : product.quantity : undefined) - totalBalance;
144
144
  maxCartProductInventory = !isNaN(maxCartProductInventory) ? maxCartProductInventory : maxCartProductConfig;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "1.1.6",
3
+ "version": "1.1.7",
4
4
  "description": "Ordering UI Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
package/src/themes/five/src/components/BusinessBasicInformation/index.js CHANGED
@@ -121,9 +121,33 @@ export const BusinessBasicInformation = (props) => {
121
121
  document.body.style.overflowY = openSearchProducts ? 'hidden' : 'auto'
122
122
  }, [openSearchProducts])
123
123
 
124
+ const handleScroll = () => {
125
+ const searchElement = document.getElementById('search-component')
126
+ if (!searchElement) return
127
+ const limit = window.pageYOffset >= searchElement?.offsetTop && window.pageYOffset > 0
128
+ if (limit) {
129
+ const classAdded = searchElement.classList.contains('fixed-search')
130
+ !classAdded && searchElement.classList.add('fixed-search')
131
+ } else {
132
+ searchElement && searchElement.classList.remove('fixed-search')
133
+ }
134
+ }
135
+
136
+ useEffect(() => {
137
+ window.addEventListener('scroll', handleScroll)
138
+ return () => window.removeEventListener('scroll', handleScroll)
139
+ }, [])
140
+
141
+ useEffect(() => {
142
+ window.scroll({
143
+ top: window.scrollY - 1,
144
+ left: 0
145
+ })
146
+ }, [sortByValue])
147
+
124
148
  const SearchComponent = () => {
125
149
  return (
126
- <WrapperSearch>
150
+ <WrapperSearch id='search-component'>
127
151
  <SearchIconWrapper
128
152
  onClick={() => setOpenSearchProducts(true)}
129
153
  >
@@ -345,6 +369,10 @@ export const BusinessBasicInformation = (props) => {
345
369
  onClose={() => {
346
370
  handleChangeSearch('')
347
371
  setOpenSearchProducts(false)
372
+ window.scroll({
373
+ top: window.scrollY - 1,
374
+ left: 0
375
+ })
348
376
  }}
349
377
  business={businessState.business}
350
378
  />
package/src/themes/five/src/components/BusinessBasicInformation/styles.js CHANGED
@@ -159,6 +159,7 @@ export const WrapperSearch = styled.div`
159
159
  display: flex;
160
160
  align-items: flex-end;
161
161
  justify-content: flex-end;
162
+ box-sizing: border-box;
162
163
 
163
164
  .search-bar {
164
165
  margin-right: 10px;
@@ -192,6 +193,16 @@ export const WrapperSearch = styled.div`
192
193
  border-radius: 8px;
193
194
  }
194
195
  }
196
+ &.fixed-search {
197
+ position: fixed;
198
+ top: 0;
199
+ left: 0;
200
+ z-index: 1002;
201
+ width: 100vw;
202
+ margin-top: 0px;
203
+ background-color: ${props => props.theme.colors.backgroundPage};
204
+ padding: 10px;
205
+ }
195
206
  `
196
207
 
197
208
  export const BusinessDetail = styled.div`
package/src/themes/five/src/components/BusinessProductsCategories/index.js CHANGED
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
2
2
  import Skeleton from 'react-loading-skeleton'
3
3
  import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
4
4
  import { AutoScroll } from '../../../../../components/AutoScroll'
5
+ import { useTheme } from 'styled-components'
6
+ import { useWindowSize } from '../../../../../hooks/useWindowSize'
5
7
 
6
8
  import { CategoriesContainer } from './styles'
7
9
  import { Tabs, Tab } from '../../styles/Tabs'
@@ -14,10 +16,13 @@ const BusinessProductsCategoriesUI = (props) => {
14
16
  openBusinessInformation,
15
17
  business,
16
18
  handlerClickCategory,
17
- categorySelected
19
+ categorySelected,
20
+ useKioskApp
18
21
  } = props
19
22
 
23
+ const theme = useTheme()
20
24
  const [selectedCategory, setSelectedCateogry] = useState({ id: null })
25
+ const { width } = useWindowSize()
21
26
  const scrollTopSpan = 60
22
27
 
23
28
  const handleChangeCategory = (category) => {
@@ -69,12 +74,14 @@ const BusinessProductsCategoriesUI = (props) => {
69
74
 
70
75
  const _diff = -50
71
76
  const _moveDiff = 30
77
+ const _paddDiff = scrollTopSpan + 10
72
78
 
73
79
  _categories?.length && _categories.some(category => {
74
80
  const topPos = category?.id ? document.getElementById(`category${category.id}`)?.offsetTop
75
81
  : document.getElementById('businessProductList')?.offsetTop
76
-
77
- if (topPos - windowTop < scrollTopSpan + 5 && topPos - windowTop > 0 && category?.id) {
82
+ const HeightOfEle = category?.id ? document.getElementById(`category${category.id}`)?.clientHeight : 0
83
+ if ((windowTop > topPos - _paddDiff && windowTop < topPos + HeightOfEle - _paddDiff) &&
84
+ category?.id) {
78
85
  const choosedCategory = document.getElementById(`category-menu${category?.id || '-all'}`)
79
86
  const choosedCategoryLeft = choosedCategory?.offsetLeft || 0
80
87
 
@@ -112,18 +119,20 @@ const BusinessProductsCategoriesUI = (props) => {
112
119
  }
113
120
 
114
121
  useEffect(() => {
122
+ if (typeof useKioskApp === 'undefined') return
115
123
  const styleSheet = document.getElementById('styles').sheet
116
124
 
117
125
  let style0 = '.sticky-prod-cat {'
118
126
  style0 += 'position: fixed !important;'
119
- style0 += 'top: 0 !important;'
120
- style0 += 'width: 97% !important;'
121
- style0 += 'padding: 15px 5px 0px 0px;'
127
+ style0 += 'top: 0px !important;'
128
+ style0 += 'left: 0px !important;'
129
+ style0 += 'padding: 5px 5px 0px 5px !important;'
130
+ style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`
122
131
  style0 += '}'
123
132
 
124
133
  let style1 = '.sticky-prod-cart {'
125
134
  style1 += 'position: fixed !important;'
126
- style1 += 'top: 0 !important;'
135
+ style1 += 'top: 38px !important;'
127
136
  style1 += 'right: 2.5% !important;'
128
137
  style1 += 'width: 28.5% !important;'
129
138
  style1 += 'margin-top: 32px !important;'
@@ -131,10 +140,11 @@ const BusinessProductsCategoriesUI = (props) => {
131
140
 
132
141
  let style2 = '.sticky-search {'
133
142
  style2 += 'position: fixed !important;'
134
- style2 += 'top: 10px !important;'
135
- style2 += 'right: 32% !important;'
136
- style2 += 'height: 50px !important;'
143
+ style2 += 'top: 0px !important;'
144
+ style2 += 'right: 0% !important;'
137
145
  style2 += 'z-index: 9999 !important;'
146
+ style2 += 'width: 50px !important;'
147
+ style2 += `background-color: ${theme.colors.backgroundPage} !important;`
138
148
  style2 += '}'
139
149
 
140
150
  styleSheet.insertRule(style0, 0)
@@ -143,7 +153,7 @@ const BusinessProductsCategoriesUI = (props) => {
143
153
 
144
154
  window.addEventListener('scroll', handleScroll)
145
155
  return () => window.removeEventListener('scroll', handleScroll)
146
- }, [])
156
+ }, [useKioskApp])
147
157
 
148
158
  return (
149
159
  <>
package/src/themes/five/src/components/BusinessProductsCategories/styles.js CHANGED
@@ -5,7 +5,7 @@ export const CategoriesContainer = styled.div`
5
5
  overflow-x: auto;
6
6
  padding: 5px 0px 0px 0px;
7
7
  background: ${props => props.theme.colors.backgroundPage};
8
- z-index: 1000;
8
+ z-index: 1002;
9
9
  position: absolute;
10
10
  top: 0;
11
11
  border-bottom: 1px solid #D9D9D9;
@@ -33,9 +33,9 @@ export const CategoriesContainer = styled.div`
33
33
  `}
34
34
  }
35
35
 
36
- @media (min-width: 381px) {
36
+ /* @media (min-width: 381px) {
37
37
  padding: 15px 0px 0px 0px;
38
- }
38
+ } */
39
39
  @media (min-width: 992px) {
40
40
  width: ${props => props.w ?? 'auto'};
41
41
  }
package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js CHANGED
@@ -9,7 +9,6 @@ import {
9
9
  useSession,
10
10
  useLanguage,
11
11
  useConfig,
12
- useOrderingTheme,
13
12
  BusinessList as BusinessListController
14
13
  } from 'ordering-components-external'
15
14
 
@@ -77,7 +76,6 @@ const BusinessesListingUI = (props) => {
77
76
  const [{ auth }] = useSession()
78
77
  const [{ configs }] = useConfig()
79
78
  const theme = useTheme()
80
- const [orderingTheme] = useOrderingTheme()
81
79
  const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
82
80
  const [alertState, setAlertState] = useState({ open: false, content: [] })
83
81
  const [activeMap, setActiveMap] = useState(false)
@@ -87,7 +85,7 @@ const BusinessesListingUI = (props) => {
87
85
  const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
88
86
  const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
89
87
  const [favoriteIds, setFavoriteIds] = useState([])
90
- const hideCities = orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
88
+ const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
91
89
 
92
90
  const businessesIds = isCustomLayout &&
93
91
  businessesList.businesses &&
@@ -273,7 +271,7 @@ const BusinessesListingUI = (props) => {
273
271
  onSearch={handleChangeSearch}
274
272
  handleCustomEnter={() => onRedirectPage({ page: 'business_search' })}
275
273
  />
276
- {typeof hideCities !== 'undefined' && !hideCities && citiesState?.cities?.length > 0 && (
274
+ {!hideCities && citiesState?.cities?.length > 0 && (
277
275
  <Button color='primary' onClick={handleOpenCities}>
278
276
  {citiesState?.cities?.find(city => city?.id === orderState?.options?.city_id)?.name || t('SELECT_A_CITY', 'Select a city')}
279
277
  </Button>
package/src/themes/five/src/components/RenderProductsLayout/index.js CHANGED
@@ -111,7 +111,7 @@ export const RenderProductsLayout = (props) => {
111
111
  layoutOne: frontLayout === layoutOne && isUseParentCategory
112
112
  }
113
113
  const showCartOnProductList = !orderingTheme?.theme?.business_view?.components?.cart?.components?.hidden
114
- const hideBusinessNearCity = orderingTheme?.theme?.business_view?.components?.near_business?.hidden
114
+ const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
115
115
 
116
116
  const BusinessLayoutCategories = businessLayout.layoutOne
117
117
  ? CategoriesLayoutGroceries
@@ -125,7 +125,7 @@ export const RenderProductsLayout = (props) => {
125
125
  <>
126
126
  {!isLoading && business?.id && (
127
127
  <WrappLayout isCartOnProductsList={isCartOnProductsList}>
128
- {typeof hideBusinessNearCity !== 'undefined' && !hideBusinessNearCity && !useKioskApp && (
128
+ {!hideBusinessNearCity && !useKioskApp && (
129
129
  <NearBusiness>
130
130
  <BusinessesListing
131
131
  logosLayout
@@ -328,6 +328,7 @@ export const RenderProductsLayout = (props) => {
328
328
  openCategories={openCategories}
329
329
  business={business}
330
330
  currentCart={currentCart}
331
+ useKioskApp={useKioskApp}
331
332
  />
332
333
  )}
333
334
  </BusinessCategoriesContainer>
package/src/themes/five/src/components/RenderProductsLayout/styles.js CHANGED
@@ -214,11 +214,15 @@ export const ProfessionalFilterWrapper = styled.div`
214
214
  export const WrapperSearchAbsolute = styled.div`
215
215
  position: absolute;
216
216
  right: 5px;
217
- top: 10px;
218
- height: 100%;
217
+ top: 0px;
219
218
  display: flex;
220
219
  justify-content: center;
221
- align-items: center;
220
+ align-items: flex-end;
221
+ width: 40px;
222
+ height: 52px;
223
+ background-color: ${props => props.theme.colors.backgroundPage};
224
+ box-sizing: border-box;
225
+ padding-bottom: 5px;
222
226
  `
223
227
 
224
228
  export const NearBusiness = styled.div`
package/src/themes/five/src/components/SingleProductCard/index.js CHANGED
@@ -67,7 +67,7 @@ const SingleProductCardUI = (props) => {
67
67
 
68
68
  const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
69
69
 
70
- const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
70
+ const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
71
71
  // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
72
72
 
73
73
  let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - totalBalance