ordering-ui-external 10.10.6 → 10.10.8

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

@@ -83,7 +83,8 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     isCustomerMode = props.isCustomerMode,
     isCustomLayout = props.isCustomLayout,
     notFound = props.notFound,
-    setNotFound = props.setNotFound;
+    setNotFound = props.setNotFound,
+    loadedFirstTime = props.loadedFirstTime;
   var business = businessState.business,
     loading = businessState.loading,
     error = businessState.error;
@@ -528,7 +529,7 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
     handleUpdateProfessionals: handleUpdateProfessionals,
     isCustomerMode: isCustomerMode,
     handleCustomProductBannerClick: handleCustomProductBannerClick
-  }), isMounted && !loading && business && !Object.keys(business).length && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {
+  }), isMounted && !loading && loadedFirstTime && business && !Object.keys(business).length && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {
     content: t('NOT_FOUND_BUSINESS_PRODUCTS', (theme === null || theme === void 0 || (_theme$defaultLanguag7 = theme.defaultLanguages) === null || _theme$defaultLanguag7 === void 0 ? void 0 : _theme$defaultLanguag7.NOT_FOUND_BUSINESS_PRODUCTS) || 'No products to show at this business, please try with other business.'),
     btnTitle: t('SEARCH_REDIRECT', (theme === null || theme === void 0 || (_theme$defaultLanguag8 = theme.defaultLanguages) === null || _theme$defaultLanguag8 === void 0 ? void 0 : _theme$defaultLanguag8.SEARCH_REDIRECT) || 'Go to Businesses'),
     onClickButton: function onClickButton() {

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

@@ -72,6 +72,7 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
     handleChangeSuboptionState = props.handleChangeSuboptionState,
     handleChangeCommentState = props.handleChangeCommentState,
     productAddedToCartLength = props.productAddedToCartLength,
+    pizzaType = props.pizzaType,
     handleFavoriteProduct = props.handleFavoriteProduct,
     handleCreateGuestUser = props.handleCreateGuestUser,
     actionStatus = props.actionStatus,
@@ -617,7 +618,9 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
           state: currentState,
           isSoldOut: isSoldOut,
           scrollDown: scrollDown,
-          setIsScrollAvailable: setIsScrollAvailable
+          setIsScrollAvailable: setIsScrollAvailable,
+          pizzaType: pizzaType,
+          productCart: productCart
         });
       }))));
     });

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

@@ -43,7 +43,9 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
     changePosition = props.changePosition,
     isSoldOut = props.isSoldOut,
     setIsScrollAvailable = props.setIsScrollAvailable,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    pizzaType = props.pizzaType,
+    productCart = props.productCart;
   var disableIncrement = option !== null && option !== void 0 && option.limit_suboptions_by_max ? balance === (option === null || option === void 0 ? void 0 : option.max) || state.quantity === suboption.max : state.quantity === (suboption === null || suboption === void 0 ? void 0 : suboption.max) || !state.selected && balance === (option === null || option === void 0 ? void 0 : option.max);
   var price = option !== null && option !== void 0 && option.with_half_option && suboption !== null && suboption !== void 0 && suboption.half_price && state.position !== 'whole' ? suboption === null || suboption === void 0 ? void 0 : suboption.half_price : suboption === null || suboption === void 0 ? void 0 : suboption.price;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
@@ -66,7 +68,7 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
     decrement();
   };
   var handlePosition = function handlePosition(e, position) {
-    e.stopPropagation();
+    e.stopPropagation && e.stopPropagation();
     changePosition(position);
   };
   var handleSuboptionClick = function handleSuboptionClick() {
@@ -99,6 +101,28 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
     });
     onChange(newState, suboption, option);
   }, [suboption, dirtyRef, option]);
+  (0, _react.useEffect)(function () {
+    var _pizzaType$type, _pizzaType$type$toLow;
+    if (((_pizzaType$type = pizzaType.type) === null || _pizzaType$type === void 0 || (_pizzaType$type$toLow = _pizzaType$type.toLowerCase) === null || _pizzaType$type$toLow === void 0 ? void 0 : _pizzaType$type$toLow.call(_pizzaType$type)) === 'mitad y mitad' && option !== null && option !== void 0 && option.with_half_option) {
+      var _Object$values, _Object$values3;
+      var _option = (_Object$values = Object.values((productCart === null || productCart === void 0 ? void 0 : productCart.options) || {})) === null || _Object$values === void 0 ? void 0 : _Object$values.find(function (option) {
+        var _option$name, _option$name$toLowerC, _Object$values2;
+        return (option === null || option === void 0 || (_option$name = option.name) === null || _option$name === void 0 || (_option$name$toLowerC = _option$name.toLowerCase) === null || _option$name$toLowerC === void 0 ? void 0 : _option$name$toLowerC.call(_option$name)) === 'elige tus ingredientes' && ((_Object$values2 = Object.values(option === null || option === void 0 ? void 0 : option.suboptions)) === null || _Object$values2 === void 0 ? void 0 : _Object$values2.length) > 0;
+      });
+      var alreadyRight = (_Object$values3 = Object.values((_option === null || _option === void 0 ? void 0 : _option.suboptions) || {})) === null || _Object$values3 === void 0 ? void 0 : _Object$values3.some(function (suboption) {
+        return (suboption === null || suboption === void 0 ? void 0 : suboption.position) === 'right';
+      });
+      if (pizzaType.right && !alreadyRight) {
+        if (state !== null && state !== void 0 && state.selected) {
+          handlePosition({}, 'right');
+        }
+      } else if (pizzaType.left || alreadyRight) {
+        if (state !== null && state !== void 0 && state.selected) {
+          handlePosition({}, 'left');
+        }
+      }
+    }
+  }, [pizzaType.type, state === null || state === void 0 ? void 0 : state.selected, suboption === null || suboption === void 0 ? void 0 : suboption.id]);
   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) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -124,21 +148,21 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
     disabled: disableIncrement || isSoldOut,
     onClick: handleIncrement
   }))), /*#__PURE__*/_react.default.createElement(_styles.PositionControl, null, (option === null || option === void 0 ? void 0 : option.with_half_option) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsCircleHalf.default, {
-    className: ['reverse', state.selected && state.position === 'left' ? 'selected' : null].filter(function (classname) {
+    className: [pizzaType.center ? 'disabled' : '', pizzaType.type === 'Mitad y mitad' && 'disable-clicks', 'reverse', state.selected && state.position === 'left' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {
       return handlePosition(e, 'left');
     }
   }), /*#__PURE__*/_react.default.createElement(_BsCircleFill.default, {
-    className: [state.selected && state.position === 'whole' ? 'selected' : null].filter(function (classname) {
+    className: [!pizzaType.center && pizzaType.type === 'Mitad y mitad' ? 'disabled' : '', state.selected && state.position === 'whole' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {
       return handlePosition(e, 'whole');
     }
   }), /*#__PURE__*/_react.default.createElement(_BsCircleHalf.default, {
-    className: [state.selected && state.position === 'right' ? 'selected' : null].filter(function (classname) {
+    className: [pizzaType.center ? 'disabled' : '', pizzaType.type === 'Mitad y mitad' && 'disable-clicks', state.selected && state.position === 'right' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {

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

@@ -25,7 +25,7 @@ var Text = exports.Text = _styledComponents.default.div(_templateObject4 || (_te
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme2;
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;    \n    "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;\n    "])));
 }, function (_ref) {
   var noMargin = _ref.noMargin;
   return noMargin && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    span {\n      margin: 0;\n    }\n  "])));
@@ -51,7 +51,7 @@ var QuantityControl = exports.QuantityControl = _styledComponents.default.div(_t
   var _props$theme6;
   return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        margin-right: 3px;\n        margin-left: 0px;\n    "])));
 });
-var PositionControl = exports.PositionControl = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: #CBCBCB;\n  font-weight: 300;\n  font-size: 18px;\n  margin: 0 5px;\n\n  svg {\n    font-size: 20px;\n    margin-right: 3px;\n    ", "\n    &.reverse {\n      transform: rotate(180deg);\n    }\n\n    &.selected {\n      color: ", ";\n    }\n\n    &:last-child {\n      margin-right: 0;\n      ", "\n    }\n  }\n"])), function (props) {
+var PositionControl = exports.PositionControl = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: #CBCBCB;\n  font-weight: 300;\n  font-size: 18px;\n  margin: 0 5px;\n\n  svg {\n    font-size: 20px;\n    margin-right: 3px;\n    ", "\n    &.reverse {\n      transform: rotate(180deg);\n    }\n\n    &.selected {\n      color: ", ";\n    }\n\n    &.disabled {\n      pointer-events: none;\n      opacity: 0.2\n    }\n    &.disable-clicks {\n      pointer-events: none;\n    }\n\n    &:last-child {\n      margin-right: 0;\n      ", "\n    }\n  }\n"])), function (props) {
   var _props$theme7;
   return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      margin-left: 3px;\n      margin-right: 0px;\n    "])));
 }, function (props) {

package/package.json

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

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

@@ -87,7 +87,8 @@ const BusinessProductsListingUI = (props) => {
     isCustomerMode,
     isCustomLayout,
     notFound,
-    setNotFound
+    setNotFound,
+    loadedFirstTime
   } = props
 
   const { business, loading, error } = businessState
@@ -435,7 +436,7 @@ const BusinessProductsListingUI = (props) => {
         />
 
         {
-          isMounted && !loading && business && !Object.keys(business).length && (
+          isMounted && !loading && loadedFirstTime && business && !Object.keys(business).length && (
             <NotFoundSource
               content={t('NOT_FOUND_BUSINESS_PRODUCTS', theme?.defaultLanguages?.NOT_FOUND_BUSINESS_PRODUCTS || 'No products to show at this business, please try with other business.')}
               btnTitle={t('SEARCH_REDIRECT', theme?.defaultLanguages?.SEARCH_REDIRECT || 'Go to Businesses')}

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

@@ -98,6 +98,7 @@ const ProductOptionsUI = (props) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productAddedToCartLength,
+    pizzaType,
     handleFavoriteProduct,
     handleCreateGuestUser,
     actionStatus,
@@ -653,6 +654,8 @@ const ProductOptionsUI = (props) => {
                                       isSoldOut={isSoldOut}
                                       scrollDown={scrollDown}
                                       setIsScrollAvailable={setIsScrollAvailable}
+                                      pizzaType={pizzaType}
+                                      productCart={productCart}
                                     />
                                   )
                                 })

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

@@ -37,7 +37,9 @@ const ProductOptionSubOptionUI = (props) => {
     changePosition,
     isSoldOut,
     setIsScrollAvailable,
-    onChange
+    onChange,
+    pizzaType,
+    productCart
   } = props
 
   const disableIncrement = option?.limit_suboptions_by_max ? (balance === option?.max || state.quantity === suboption.max) : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -58,7 +60,7 @@ const ProductOptionSubOptionUI = (props) => {
   }
 
   const handlePosition = (e, position) => {
-    e.stopPropagation()
+    e.stopPropagation && e.stopPropagation()
     changePosition(position)
   }
 
@@ -90,6 +92,23 @@ const ProductOptionSubOptionUI = (props) => {
     const newState = { ...state, selected: suboption?.preselected, quantity: state.selected ? 0 : 1 }
     onChange(newState, suboption, option)
   }, [suboption, dirtyRef, option])
+
+  useEffect(() => {
+    if (pizzaType.type?.toLowerCase?.() === 'mitad y mitad' && option?.with_half_option) {
+      const option = Object.values(productCart?.options || {})?.find(option => option?.name?.toLowerCase?.() === 'elige tus ingredientes' && Object.values(option?.suboptions)?.length > 0)
+      const alreadyRight = Object.values(option?.suboptions || {})?.some(suboption => suboption?.position === 'right')
+      if (pizzaType.right && !alreadyRight) {
+        if (state?.selected) {
+          handlePosition({}, 'right')
+        }
+      } else if (pizzaType.left || alreadyRight) {
+        if (state?.selected) {
+          handlePosition({}, 'left')
+        }
+      }
+    }
+  }, [pizzaType.type, state?.selected, suboption?.id])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -144,15 +163,24 @@ const ProductOptionSubOptionUI = (props) => {
               option?.with_half_option && state?.selected && (
                 <>
                   <BsCircleHalf
-                    className={['reverse', state.selected && state.position === 'left' ? 'selected' : null].filter(classname => classname).join(' ')}
+                    className={[
+                      pizzaType.center ? 'disabled' : '',
+                      pizzaType.type === 'Mitad y mitad' && 'disable-clicks',
+                      'reverse',
+                      state.selected && state.position === 'left' ? 'selected' : null].filter(classname => classname).join(' ')}
                     onClick={(e) => handlePosition(e, 'left')}
                   />
                   <BsCircleFill
-                    className={[state.selected && state.position === 'whole' ? 'selected' : null].filter(classname => classname).join(' ')}
+                    className={[
+                      !pizzaType.center && pizzaType.type === 'Mitad y mitad' ? 'disabled' : '',
+                      state.selected && state.position === 'whole' ? 'selected' : null].filter(classname => classname).join(' ')}
                     onClick={(e) => handlePosition(e, 'whole')}
                   />
                   <BsCircleHalf
-                    className={[state.selected && state.position === 'right' ? 'selected' : null].filter(classname => classname).join(' ')}
+                    className={[
+                      pizzaType.center ? 'disabled' : '',
+                      pizzaType.type === 'Mitad y mitad' && 'disable-clicks',
+                      state.selected && state.position === 'right' ? 'selected' : null].filter(classname => classname).join(' ')}
                     onClick={(e) => handlePosition(e, 'right')}
                   />
                 </>

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

@@ -56,7 +56,7 @@ export const Text = styled.div`
     text-overflow: ellipsis;
     ${props => props.theme?.rtl && css`
       margin-left: 0;
-      margin-right: 10px;    
+      margin-right: 10px;
     `}
   }
 
@@ -153,6 +153,14 @@ export const PositionControl = styled.div`
       color: ${props => props.theme.colors.primary};
     }
 
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.2
+    }
+    &.disable-clicks {
+      pointer-events: none;
+    }
+
     &:last-child {
       margin-right: 0;
       ${props => props.theme?.rtl && css`

package/template/components/ScrollToTop/index.js

@@ -19,7 +19,7 @@ export const ScrollToTop = withRouter(({ history, children }) => {
     }
   }, [])
 
-  return <>{children}</>
+  return <div style={{ minHeight: '100vh' }}>{children}</div>
 })
 
 export default ScrollToTop