ordering-ui-external 5.0.1 → 5.0.2

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

@@ -139,7 +139,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
   var handleScroll = function handleScroll() {
     var searchElement = document.getElementById('search-component');
     if (searchElement) {
-      var limit = window.pageYOffset >= (searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) && window.pageYOffset > 0;
+      var limit = window.pageYOffset >= (isChew ? (searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) + 40 : searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) && window.pageYOffset > 0;
       if (limit) {
         var classAdded = searchElement.classList.contains('fixed-search');
         !classAdded && searchElement.classList.add('fixed-search');
@@ -149,7 +149,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     }
     var businessNameElement = document.getElementById('business_name');
     if (businessNameElement) {
-      var _limit = window.pageYOffset >= (businessNameElement === null || businessNameElement === void 0 ? void 0 : businessNameElement.offsetTop) - 55 && window.pageYOffset > 0;
+      var _limit = window.pageYOffset >= (isChew && searchElement ? (searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) + 40 : (businessNameElement === null || businessNameElement === void 0 ? void 0 : businessNameElement.offsetTop) - 55) && window.pageYOffset > 0;
       if (_limit) {
         var _classAdded = businessNameElement.classList.contains('fixed-name');
         !_classAdded && businessNameElement.classList.add('fixed-name');

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

@@ -45,7 +45,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PIXELS_TO_SCROLL = 300;
 var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
-  var _configs$add_product_, _configs$checkout_mul, _Object$values$find, _businessState$busine, _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6, _currentCart$products2, _theme$defaultLanguag7, _theme$defaultLanguag8, _theme$defaultLanguag9, _theme$defaultLanguag10, _error$, _theme$defaultLanguag11, _currentCart$products3, _theme$defaultLanguag12, _theme$defaultLanguag13, _theme$defaultLanguag14, _theme$defaultLanguag15, _currentCart$products4, _currentCart$products5, _currentCart$products6, _productModal$error$, _theme$defaultLanguag16, _productModal$product2, _business$professiona2, _currentCart$products7, _currentCart$products8;
+  var _configs$add_product_, _configs$checkout_mul, _Object$values$find, _businessState$busine, _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$header, _theme$header$compone, _theme$header$compone2, _theme$header$compone3, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6, _currentCart$products2, _theme$defaultLanguag7, _theme$defaultLanguag8, _theme$defaultLanguag9, _theme$defaultLanguag10, _error$, _theme$defaultLanguag11, _currentCart$products3, _theme$defaultLanguag12, _theme$defaultLanguag13, _theme$defaultLanguag14, _theme$defaultLanguag15, _currentCart$products4, _currentCart$products5, _currentCart$products6, _productModal$error$, _theme$defaultLanguag16, _productModal$product2, _business$professiona2, _currentCart$products7, _currentCart$products8;
   var errors = props.errors,
     openCategories = props.openCategories,
     isInitialRender = props.isInitialRender,
@@ -162,6 +162,7 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
   })) !== null && _Object$values$find !== void 0 ? _Object$values$find : {};
   var isLazy = businessState === null || businessState === void 0 ? void 0 : (_businessState$busine = businessState.business) === null || _businessState$busine === void 0 ? void 0 : _businessState$busine.lazy_load_products_recommended;
   var showViewOrderButton = !(theme !== null && theme !== void 0 && (_theme$business_view = theme.business_view) !== null && _theme$business_view !== void 0 && (_theme$business_view$ = _theme$business_view.components) !== null && _theme$business_view$ !== void 0 && (_theme$business_view$2 = _theme$business_view$.order_view_button) !== null && _theme$business_view$2 !== void 0 && _theme$business_view$2.hidden);
+  var isChew = (theme === null || theme === void 0 ? void 0 : (_theme$header = theme.header) === null || _theme$header === void 0 ? void 0 : (_theme$header$compone = _theme$header.components) === null || _theme$header$compone === void 0 ? void 0 : (_theme$header$compone2 = _theme$header$compone.layout) === null || _theme$header$compone2 === void 0 ? void 0 : (_theme$header$compone3 = _theme$header$compone2.type) === null || _theme$header$compone3 === void 0 ? void 0 : _theme$header$compone3.toLowerCase()) === 'chew';
   var cateringTypes = [7, 8];
   var cateringPreorder = cateringTypes.includes(options === null || options === void 0 ? void 0 : options.type);
   var sortByOptions = [{
@@ -272,8 +273,18 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
   var handleScroll = (0, _react.useCallback)(function () {
     var _document$documentEle, _document$documentEle2;
     var backArrowElement = document.getElementById('back-arrow');
+    var searchElement = document.getElementById('search-component');
     if (backArrowElement) {
       var limit = window.pageYOffset >= (backArrowElement === null || backArrowElement === void 0 ? void 0 : backArrowElement.offsetTop) && window.pageYOffset > 0;
+      var limitWidth = window.pageYOffset >= (searchElement === null || searchElement === void 0 ? void 0 : searchElement.offsetTop) + 40 && window.pageYOffset > 0;
+      if (isChew) {
+        if (limit && !limitWidth) {
+          var classWidthAdded = backArrowElement.classList.contains('fixed-arrow-width');
+          !classWidthAdded && backArrowElement.classList.add('fixed-arrow-width');
+        } else {
+          backArrowElement && backArrowElement.classList.remove('fixed-arrow-width');
+        }
+      }
       if (limit) {
         var classAdded = backArrowElement.classList.contains('fixed-arrow');
         !classAdded && backArrowElement.classList.add('fixed-arrow');

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

@@ -42,7 +42,7 @@ var EmptyBtnWrapper = _styledComponents.default.div(_templateObject9 || (_templa
   return props.theme.colors.darkTextColor;
 });
 exports.EmptyBtnWrapper = EmptyBtnWrapper;
-var HeaderContent = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 10px;\n  .back-arrow {\n    font-size: 24px;\n    cursor: pointer;\n  }\n  .fixed-arrow {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 10001;\n    width: 100vw;\n    background-color: ", ";\n    height: 56px;\n    display: flex;\n    align-items: center;\n    ", "\n    @media (min-width: 993px){\n      width: 100px;\n    }\n  }\n"])), function (props) {
+var HeaderContent = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 10px;\n  .back-arrow {\n    font-size: 24px;\n    cursor: pointer;\n  }\n  .fixed-arrow {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 10001;\n    width: 100vw;\n    background-color: ", ";\n    height: 56px;\n    display: flex;\n    align-items: center;\n    ", "\n    @media (min-width: 993px){\n      width: 100px;\n    }\n  }\n  .fixed-arrow-width{\n    width: 100vw;\n  }\n"])), function (props) {
   return props.theme.colors.backgroundPage;
 }, function (props) {
   var _props$theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -87,7 +87,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "4.0.0",
+    "ordering-components-external": "4.0.1",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

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

@@ -131,7 +131,7 @@ export const BusinessBasicInformation = (props) => {
   const handleScroll = () => {
     const searchElement = document.getElementById('search-component')
     if (searchElement) {
-      const limit = window.pageYOffset >= searchElement?.offsetTop && window.pageYOffset > 0
+      const limit = window.pageYOffset >= (isChew ? searchElement?.offsetTop + 40 : searchElement?.offsetTop) && window.pageYOffset > 0
       if (limit) {
         const classAdded = searchElement.classList.contains('fixed-search')
         !classAdded && searchElement.classList.add('fixed-search')
@@ -142,7 +142,7 @@ export const BusinessBasicInformation = (props) => {
 
     const businessNameElement = document.getElementById('business_name')
     if (businessNameElement) {
-      const limit = window.pageYOffset >= (businessNameElement?.offsetTop - 55) && window.pageYOffset > 0
+      const limit = window.pageYOffset >= (isChew && searchElement ? searchElement?.offsetTop + 40 : (businessNameElement?.offsetTop - 55)) && window.pageYOffset > 0
       if (limit) {
         const classAdded = businessNameElement.classList.contains('fixed-name')
         !classAdded && businessNameElement.classList.add('fixed-name')
@@ -249,7 +249,7 @@ export const BusinessBasicInformation = (props) => {
         )}
       </BusinessInfoWrapper>
       {(windowSize.width <= 768 && categoryClicked) && (
-          <BackButton>
+        <BackButton>
           <Button
             color='primary'
             initialIcon
@@ -259,7 +259,7 @@ export const BusinessBasicInformation = (props) => {
             <div>{t('GO_TO_ALL_CATEGORIES', 'Go to all categories')}</div>
           </Button>
         </BackButton>
-        )}
+      )}
       <Modal
         width='70%'
         open={openBusinessInformation}

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

@@ -116,6 +116,7 @@ const BusinessProductsListingUI = (props) => {
   const currentCart = Object.values(carts).find(cart => cart?.business?.slug === business?.slug) ?? {}
   const isLazy = businessState?.business?.lazy_load_products_recommended
   const showViewOrderButton = !theme?.business_view?.components?.order_view_button?.hidden
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const cateringTypes = [7, 8]
   const cateringPreorder = cateringTypes.includes(options?.type)
   const sortByOptions = [
@@ -193,8 +194,19 @@ const BusinessProductsListingUI = (props) => {
 
   const handleScroll = useCallback(() => {
     const backArrowElement = document.getElementById('back-arrow')
+    const searchElement = document.getElementById('search-component')
     if (backArrowElement) {
       const limit = window.pageYOffset >= backArrowElement?.offsetTop && window.pageYOffset > 0
+      const limitWidth = window.pageYOffset >= searchElement?.offsetTop + 40 && window.pageYOffset > 0
+      if (isChew) {
+        if (limit && !limitWidth) {
+          const classWidthAdded = backArrowElement.classList.contains('fixed-arrow-width')
+          !classWidthAdded && backArrowElement.classList.add('fixed-arrow-width')
+        } else {
+          backArrowElement && backArrowElement.classList.remove('fixed-arrow-width')
+        }
+      }
+
       if (limit) {
         const classAdded = backArrowElement.classList.contains('fixed-arrow')
         !classAdded && backArrowElement.classList.add('fixed-arrow')

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

@@ -167,6 +167,9 @@ export const HeaderContent = styled.div`
       width: 100px;
     }
   }
+  .fixed-arrow-width{
+    width: 100vw;
+  }
 `
 export const OrderContextUIWrapper = styled.div`
   flex: 1;