ordering-ui-external 1.0.0 → 1.1.1

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

@@ -13,7 +13,7 @@ var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skelet
 
 var _styledComponents = require("styled-components");
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _styles = require("./styles");
 
@@ -65,15 +65,15 @@ var PaymentOptionWalletUI = function PaymentOptionWalletUI(props) {
       deletetWalletSelected = props.deletetWalletSelected;
   var theme = (0, _styledComponents.useTheme)();
 
-  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;
 
-  var _useUtils = (0, _orderingComponents.useUtils)(),
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
       _useUtils2 = _slicedToArray(_useUtils, 1),
       parsePrice = _useUtils2[0].parsePrice;
 
@@ -177,11 +177,15 @@ var PaymentOptionWalletUI = function PaymentOptionWalletUI(props) {
         color: (cart === null || cart === void 0 ? void 0 : cart.balance) === 0 && !checkedState[idx] || wallet.balance === 0 ? theme.colors.darkGray : 'black'
       },
       htmlFor: "custom-checkbox-".concat(idx)
-    }, (_walletName$wallet$ty2 = walletName[wallet.type]) === null || _walletName$wallet$ty2 === void 0 ? void 0 : _walletName$wallet$ty2.name))), /*#__PURE__*/_react.default.createElement("div", null, wallet.type === 'cash' && /*#__PURE__*/_react.default.createElement("span", null, parsePrice(wallet === null || wallet === void 0 ? void 0 : wallet.balance)), wallet.type === 'credit_point' && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
+    }, (_walletName$wallet$ty2 = walletName[wallet.type]) === null || _walletName$wallet$ty2 === void 0 ? void 0 : _walletName$wallet$ty2.name))), /*#__PURE__*/_react.default.createElement("div", null, wallet.type === 'cash' && /*#__PURE__*/_react.default.createElement("span", null, parsePrice(wallet === null || wallet === void 0 ? void 0 : wallet.balance, {
+      isTruncable: true
+    })), wallet.type === 'credit_point' && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         color: theme.colors.primary
       }
-    }, "".concat(wallet === null || wallet === void 0 ? void 0 : wallet.balance, " ").concat(t('POINTS', 'Points'))), " ", (wallet === null || wallet === void 0 ? void 0 : wallet.balance) > 0 && "= ".concat(parsePrice((wallet === null || wallet === void 0 ? void 0 : wallet.balance) / (wallet === null || wallet === void 0 ? void 0 : wallet.redemption_rate))))));
+    }, "".concat(wallet === null || wallet === void 0 ? void 0 : wallet.balance, " ").concat(t('POINTS', 'Points'))), " ", (wallet === null || wallet === void 0 ? void 0 : wallet.balance) > 0 && "= ".concat(parsePrice((wallet === null || wallet === void 0 ? void 0 : wallet.balance) / (wallet === null || wallet === void 0 ? void 0 : wallet.redemption_rate), {
+      isTruncable: true
+    })))));
   })), (walletsState === null || walletsState === void 0 ? void 0 : walletsState.loading) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _toConsumableArray(Array(2).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles.SectionWrapper, {
       key: i
@@ -208,7 +212,7 @@ var PaymentOptionWallet = function PaymentOptionWallet(props) {
     UIComponent: PaymentOptionWalletUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.PaymentOptionWallet, paymentWalletProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.PaymentOptionWallet, paymentWalletProps);
 };
 
-exports.PaymentOptionWallet = PaymentOptionWallet;
+exports.PaymentOptionWallet = PaymentOptionWallet;

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

@@ -25,7 +25,7 @@ var _EnPaypal = _interopRequireDefault(require("@meronex/icons/en/EnPaypal"));
 
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _Modal = require("../Modal");
 
@@ -45,6 +45,8 @@ var _NotFoundSource = require("../NotFoundSource");
 
 var _utils = require("../../../../../utils");
 
+var _PaymentOptionSquare = require("../../../../../components/PaymentOptionSquare");
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -145,7 +147,7 @@ var paypalBtnStyle = {
 };
 
 var PaymentOptionsUI = function PaymentOptionsUI(props) {
-  var _props$beforeElements, _props$beforeComponen, _paymethodsList$error, _paymethodSelected$da2, _isOpenMethod$paymeth, _isOpenMethod$paymeth2, _isOpenMethod$paymeth3, _isOpenMethod$paymeth4, _isOpenMethod$paymeth5, _paymethodData$card, _paymethodData$card2, _paymethodData$card3, _isOpenMethod$paymeth6, _isOpenMethod$paymeth7, _isOpenMethod$paymeth8, _isOpenMethod$paymeth9, _isOpenMethod$paymeth10, _cart$balance, _isOpenMethod$paymeth11, _isOpenMethod$paymeth12, _isOpenMethod$paymeth13, _isOpenMethod$paymeth14, _isOpenMethod$paymeth15, _isOpenMethod$paymeth16, _isOpenMethod$paymeth17, _isOpenMethod$paymeth18, _isOpenMethod$paymeth19, _isOpenMethod$paymeth20, _isOpenMethod$paymeth21, _isOpenMethod$paymeth22, _isOpenMethod$paymeth23, _isOpenMethod$paymeth24, _props$afterComponent, _props$afterElements;
+  var _props$beforeElements, _props$beforeComponen, _paymethodsList$error, _cart$balance, _paymethodSelected$da2, _isOpenMethod$paymeth, _isOpenMethod$paymeth2, _isOpenMethod$paymeth3, _isOpenMethod$paymeth4, _isOpenMethod$paymeth5, _paymethodData$card, _paymethodData$card2, _paymethodData$card3, _isOpenMethod$paymeth6, _isOpenMethod$paymeth7, _isOpenMethod$paymeth8, _isOpenMethod$paymeth9, _isOpenMethod$paymeth10, _cart$balance2, _isOpenMethod$paymeth11, _isOpenMethod$paymeth12, _isOpenMethod$paymeth13, _isOpenMethod$paymeth14, _isOpenMethod$paymeth15, _isOpenMethod$paymeth16, _isOpenMethod$paymeth17, _isOpenMethod$paymeth18, _isOpenMethod$paymeth19, _isOpenMethod$paymeth20, _isOpenMethod$paymeth21, _isOpenMethod$paymeth22, _isOpenMethod$paymeth23, _isOpenMethod$paymeth24, _isOpenMethod$paymeth25, _isOpenMethod$paymeth26, _isOpenMethod$paymeth27, _props$afterComponent, _props$afterElements;
 
   var cart = props.cart,
       errorCash = props.errorCash,
@@ -161,13 +163,15 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
       isCustomerMode = props.isCustomerMode,
       isOpenMethod = props.isOpenMethod,
       onPaymentChange = props.onPaymentChange,
+      setCreateOrder = props.setCreateOrder,
+      onPlaceOrderClick = props.onPlaceOrderClick,
       handlePlaceOrder = props.handlePlaceOrder;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       token = _useSession2[0].token;
 
@@ -279,7 +283,7 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     content: (paymethodsList === null || paymethodsList === void 0 ? void 0 : (_paymethodsList$error = paymethodsList.error[0]) === null || _paymethodsList$error === void 0 ? void 0 : _paymethodsList$error.message) || (paymethodsList === null || paymethodsList === void 0 ? void 0 : paymethodsList.error[0])
   }), !(paymethodsList.loading || isLoading) && !paymethodsList.error && (!(paymethodsList !== null && paymethodsList !== void 0 && paymethodsList.paymethods) || supportedMethods.length === 0) && /*#__PURE__*/_react.default.createElement("p", null, t('NO_PAYMENT_METHODS', 'No payment methods!'))), (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'cash' && /*#__PURE__*/_react.default.createElement(_PaymentOptionCash.PaymentOptionCash, {
     data: paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.data,
-    orderTotal: cart.total,
+    orderTotal: (_cart$balance = cart === null || cart === void 0 ? void 0 : cart.balance) !== null && _cart$balance !== void 0 ? _cart$balance : cart === null || cart === void 0 ? void 0 : cart.total,
     defaultValue: paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$da2 = paymethodSelected.data) === null || _paymethodSelected$da2 === void 0 ? void 0 : _paymethodSelected$da2.cash,
     onChangeData: handlePaymethodDataChange,
     setErrorCash: props.setErrorCash
@@ -311,7 +315,7 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     clientId: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth8 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth8 === void 0 ? void 0 : (_isOpenMethod$paymeth9 = _isOpenMethod$paymeth8.credentials) === null || _isOpenMethod$paymeth9 === void 0 ? void 0 : _isOpenMethod$paymeth9.client_id,
     body: {
       paymethod_id: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth10 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth10 === void 0 ? void 0 : _isOpenMethod$paymeth10.id,
-      amount: (_cart$balance = cart === null || cart === void 0 ? void 0 : cart.balance) !== null && _cart$balance !== void 0 ? _cart$balance : cart.total,
+      amount: (_cart$balance2 = cart === null || cart === void 0 ? void 0 : cart.balance) !== null && _cart$balance2 !== void 0 ? _cart$balance2 : cart.total,
       delivery_zone_id: cart.delivery_zone_id,
       cartUuid: cart.uuid
     },
@@ -367,6 +371,24 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     currency: props.currency,
     paymethods: stripeRedirectOptions,
     handleStripeRedirect: handlePaymethodDataChange
+  })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    title: t('SQUARE', 'Square'),
+    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth25 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth25 === void 0 ? void 0 : _isOpenMethod$paymeth25.gateway) === 'square' && !paymethodData.token,
+    onClose: function onClose() {
+      return handlePaymethodClick(null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PaymentOptionSquare.PaymentOptionSquare, {
+    businessId: props.businessId,
+    cartTotal: cart === null || cart === void 0 ? void 0 : cart.total,
+    data: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth26 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth26 === void 0 ? void 0 : _isOpenMethod$paymeth26.credentials,
+    body: {
+      paymethod_id: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth27 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth27 === void 0 ? void 0 : _isOpenMethod$paymeth27.id,
+      amount: cart.total,
+      delivery_zone_id: cart.delivery_zone_id,
+      cartUuid: cart.uuid
+    },
+    onPlaceOrderClick: onPlaceOrderClick,
+    setCreateOrder: setCreateOrder
   })), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
     title: t('PAYMENT_METHODS', 'Payment methods'),
     content: alertState.content,
@@ -395,7 +417,7 @@ var PaymentOptions = function PaymentOptions(props) {
     UIComponent: PaymentOptionsUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.PaymentOptions, paymentOptions);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.PaymentOptions, paymentOptions);
 };
 
-exports.PaymentOptions = PaymentOptions;
+exports.PaymentOptions = PaymentOptions;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _styledComponents = require("styled-components");
 
@@ -77,17 +77,17 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
       countryCallingCode = props.countryCallingCode,
       onRedirectPage = props.onRedirectPage;
 
-  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 _useCustomer = (0, _orderingComponents.useCustomer)(),
+  var _useCustomer = (0, _orderingComponentsExternal.useCustomer)(),
       _useCustomer2 = _slicedToArray(_useCustomer, 2),
       deleteUserCustomer = _useCustomer2[1].deleteUserCustomer;
 
@@ -280,7 +280,7 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     saveCustomerUser: saveCustomerUser,
     fieldsNotValid: props.fieldsNotValid,
     useChekoutFileds: true,
-    isCustomerMode: props.isCustomerMode
+    isCustomerMode: true
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: openModal.customer,
     width: "80%",
@@ -325,7 +325,7 @@ var PhoneAutocomplete = function PhoneAutocomplete(props) {
     UIComponent: PhoneAutocompleteUI
   }, props);
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.PhoneAutocomplete, phoneProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.PhoneAutocomplete, phoneProps);
 };
 
-exports.PhoneAutocomplete = PhoneAutocomplete;
+exports.PhoneAutocomplete = PhoneAutocomplete;

package/_modules/themes/five/src/components/PlaceSpot/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 _styles = require("./styles");
 
@@ -66,11 +66,11 @@ var PlaceSpotUI = function PlaceSpotUI(props) {
       setHasBusinessPlaces = props.setHasBusinessPlaces;
   var el = (0, _react.useRef)();
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useOrder = (0, _orderingComponents.useOrder)(),
+  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
       _useOrder2 = _slicedToArray(_useOrder, 1),
       orderState = _useOrder2[0];
 
@@ -359,7 +359,7 @@ var PlaceSpotUI = function PlaceSpotUI(props) {
 };
 
 var PlaceSpot = function PlaceSpot(props) {
-  var _useLanguage3 = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage3 = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage4 = _slicedToArray(_useLanguage3, 2),
       t = _useLanguage4[1];
 
@@ -385,7 +385,7 @@ var PlaceSpot = function PlaceSpot(props) {
     }
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.PlaceSpot, placeSpotProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.PlaceSpot, placeSpotProps);
 };
 
-exports.PlaceSpot = PlaceSpot;
+exports.PlaceSpot = PlaceSpot;

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

@@ -19,7 +19,9 @@ var _MdcPlayCircleOutline = _interopRequireDefault(require("@meronex/icons/mdc/M
 
 var _LinkableText = require("../LinkableText");
 
-var _orderingComponents = require("ordering-components-external");
+var _AutoScroll = require("../AutoScroll");
+
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _utils = require("../../../../../utils");
 
@@ -96,7 +98,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 _swiper.default.use([_swiper.Navigation, _swiper.Thumbs]);
 
 var ProductOptionsUI = function ProductOptionsUI(props) {
-  var _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4, _props$afterMidElemen, _props$afterMidCompon, _orderState$options, _theme$defaultLanguag5, _theme$defaultLanguag6, _theme$defaultLanguag7, _orderState$options2, _theme$defaultLanguag8, _theme$defaultLanguag9, _theme$defaultLanguag10, _theme$defaultLanguag11, _theme$defaultLanguag12, _theme$defaultLanguag13, _theme$defaultLanguag14, _error$;
+  var _configs$unaddressed_, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4, _props$afterMidElemen, _props$afterMidCompon, _orderState$options, _orderState$options2, _theme$defaultLanguag5, _theme$defaultLanguag6, _theme$defaultLanguag7, _orderState$options3, _orderState$options4, _theme$defaultLanguag8, _theme$defaultLanguag9, _theme$defaultLanguag10, _theme$defaultLanguag11, _theme$defaultLanguag12, _theme$defaultLanguag13, _theme$defaultLanguag14, _error$;
 
   var businessSlug = props.businessSlug,
       editMode = props.editMode,
@@ -118,14 +120,14 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
       error = productObject.error;
   var windowSize = (0, _useWindowSize.useWindowSize)();
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 2),
       _useSession2$ = _useSession2[0],
       auth = _useSession2$.auth,
       user = _useSession2$.user,
       login = _useSession2[1].login;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -134,11 +136,11 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
       modalIsOpen = _useState2[0],
       setModalIsOpen = _useState2[1];
 
-  var _useOrder = (0, _orderingComponents.useOrder)(),
+  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
       _useOrder2 = _slicedToArray(_useOrder, 1),
       orderState = _useOrder2[0];
 
-  var _useUtils = (0, _orderingComponents.useUtils)(),
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
       _useUtils2 = _slicedToArray(_useUtils, 1),
       _useUtils2$ = _useUtils2[0],
       optimizeImage = _useUtils2$.optimizeImage,
@@ -146,7 +148,7 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
 
   var theme = (0, _styledComponents.useTheme)();
 
-  var _useSite = (0, _orderingComponents.useSite)(),
+  var _useSite = (0, _orderingComponentsExternal.useSite)(),
       _useSite2 = _slicedToArray(_useSite, 1),
       site = _useSite2[0].site;
 
@@ -218,6 +220,14 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
   var userCustomer = JSON.parse(window.localStorage.getItem('user-customer'));
   var galleryLength = (gallery === null || gallery === void 0 ? void 0 : gallery.length) + (videoGallery === null || videoGallery === void 0 ? void 0 : videoGallery.length);
 
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+      _useConfig2 = _slicedToArray(_useConfig, 1),
+      configs = _useConfig2[0].configs;
+
+  var unaddressedTypes = (configs === null || configs === void 0 ? void 0 : (_configs$unaddressed_ = configs.unaddressed_order_types_allowed) === null || _configs$unaddressed_ === void 0 ? void 0 : _configs$unaddressed_.value.split('|').map(function (value) {
+    return Number(value);
+  })) || [];
+
   var closeModal = function closeModal() {
     setModalIsOpen(false);
     setModalPageToShow('login');
@@ -285,7 +295,15 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
   };
 
   var handleChangeTabValue = function handleChangeTabValue(value) {
-    setTabValue(value);
+    if (document.getElementById("".concat(value))) {
+      var extraHeight = 55;
+      var top = document.getElementById("".concat(value)).offsetTop - extraHeight;
+      var scrollElement = document.querySelector('.popup-dialog');
+      scrollElement.scrollTo({
+        top: top,
+        behavior: 'smooth'
+      });
+    }
   };
 
   var handleSwitchQtyUnit = function handleSwitchQtyUnit(val) {
@@ -314,8 +332,9 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
   };
 
   var scrollDown = function scrollDown() {
-    var _document$getElements;
+    var _document$getElements, _document$getElements2;
 
+    var adjustHeight = (windowSize === null || windowSize === void 0 ? void 0 : windowSize.width) > 768 ? 50 : 55;
     var isErrors = Object.values(errors).length > 0;
 
     if (!isErrors) {
@@ -323,11 +342,12 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
     }
 
     var productContainer = document.getElementsByClassName('popup-dialog')[0];
-    var unselectedFirstSubOption = (_document$getElements = document.getElementsByClassName('error')) === null || _document$getElements === void 0 ? void 0 : _document$getElements[0];
+    var unselectedFirstSubOption = (_document$getElements = document.getElementsByClassName('error')) === null || _document$getElements === void 0 ? void 0 : (_document$getElements2 = _document$getElements[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.parentNode;
 
     if (unselectedFirstSubOption) {
-      productContainer.scrollTop -= 90;
-      unselectedFirstSubOption.scrollIntoView({
+      var top = unselectedFirstSubOption.offsetTop;
+      productContainer.scrollTo({
+        top: top - adjustHeight,
         behavior: 'smooth'
       });
     }
@@ -352,21 +372,59 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
     }
   }, [errors]);
   (0, _react.useEffect)(function () {
-    if (document.getElementById("".concat(tabValue))) {
-      var extraHeight = windowSize.width < 769 ? 100 : 42;
-      var top = tabValue === 'all' ? 0 : document.getElementById("".concat(tabValue)).offsetTop - extraHeight;
-      var scrollElement = document.querySelector('.popup-dialog');
+    var scrollElement = document.querySelector('.popup-dialog');
+
+    var handleScroll = function handleScroll() {
+      var extraHeight = 60;
+
+      if ((product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 || (product === null || product === void 0 ? void 0 : product.extras.length) > 0) {
+        var _product$ingredients, _product$extras;
+
+        var menuList = [];
+        if ((product === null || product === void 0 ? void 0 : (_product$ingredients = product.ingredients) === null || _product$ingredients === void 0 ? void 0 : _product$ingredients.length) > 0) menuList.push('ingredients');
+        (product === null || product === void 0 ? void 0 : (_product$extras = product.extras) === null || _product$extras === void 0 ? void 0 : _product$extras.length) > 0 && product.extras.sort(function (a, b) {
+          return a.rank - b.rank;
+        }).forEach(function (extra) {
+          var _extra$options;
+
+          ((_extra$options = extra.options) === null || _extra$options === void 0 ? void 0 : _extra$options.length) > 0 && extra.options.sort(function (a, b) {
+            return a.rank - b.rank;
+          }).forEach(function (option) {
+            showOption(option) && menuList.push("id_".concat(option === null || option === void 0 ? void 0 : option.id));
+          });
+        });
+        menuList.forEach(function (menu) {
+          var elementTop = scrollElement.scrollTop;
+          var topPos = document.getElementById(menu).offsetTop;
+
+          if (Math.abs(elementTop - topPos) < extraHeight) {
+            setTabValue(menu);
+            var elementLeft = document.getElementById("menu_".concat(menu)).offsetLeft;
+            var scrollLeft = document.getElementById('all').scrollLeft;
+
+            if (elementLeft < scrollLeft) {
+              document.getElementById('all').scrollTo({
+                left: elementLeft,
+                behavior: 'smooth'
+              });
+            }
 
-      if (windowSize.width >= 1200) {
-        scrollElement = productContainerRef.current;
+            if (elementLeft < scrollLeft + scrollElement.clientWidth) {
+              document.getElementById('all').scrollTo({
+                left: elementLeft - scrollElement.clientWidth / 2,
+                behavior: 'smooth'
+              });
+            }
+          }
+        });
       }
+    };
 
-      scrollElement.scrollTo({
-        top: top,
-        behavior: 'smooth'
-      });
-    }
-  }, [tabValue]);
+    scrollElement && scrollElement.addEventListener('scroll', handleScroll);
+    return function () {
+      return scrollElement && scrollElement.removeEventListener('scroll', handleScroll);
+    };
+  }, [showOption]);
   (0, _react.useEffect)(function () {
     var _theme$images, _theme$images$dummies, _product$gallery;
 
@@ -487,6 +545,9 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
     spaceBetween: 10,
     navigation: true,
     watchOverflow: true,
+    observer: true,
+    observeParents: true,
+    parallax: true,
     thumbs: {
       swiper: thumbsSwiper
     },
@@ -541,7 +602,10 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
     freeMode: true,
     watchSlidesProgress: true,
     className: "product-thumb",
-    watchOverflow: true
+    watchOverflow: true,
+    observer: true,
+    observeParents: true,
+    parallax: true
   }, gallery.map(function (img, i) {
     return /*#__PURE__*/_react.default.createElement(_react2.SwiperSlide, {
       key: i
@@ -573,30 +637,33 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
     }), /*#__PURE__*/_react.default.createElement("span", null, tag.name));
   })), /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement(_styles.ProductEdition, null, ((product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 || (product === null || product === void 0 ? void 0 : product.extras.length) > 0) && /*#__PURE__*/_react.default.createElement(_styles.ProductTabContainer, {
     id: "all"
-  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
-    variant: "primary"
-  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-    key: "all",
-    active: tabValue === 'all',
-    onClick: function onClick() {
-      return handleChangeTabValue('all');
-    },
-    borderBottom: true
-  }, t('ALL', 'All')), (product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 && /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_AutoScroll.AutoScroll, {
+    scrollId: "optionList"
+  }, (product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 && /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
     key: "ingredients",
+    id: "menu_ingredients",
     active: tabValue === 'ingredients',
     onClick: function onClick() {
       return handleChangeTabValue('ingredients');
     },
     borderBottom: true
-  }, t('INGREDIENTS', 'ingredients')), (product === null || product === void 0 ? void 0 : product.extras.length) > 0 && /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-    key: "extra",
-    active: tabValue === 'extra',
-    onClick: function onClick() {
-      return handleChangeTabValue('extra');
-    },
-    borderBottom: true
-  }, t('EXTRA', 'Extra')))), /*#__PURE__*/_react.default.createElement("div", {
+  }, t('INGREDIENTS', 'ingredients')), product === null || product === void 0 ? void 0 : product.extras.sort(function (a, b) {
+    return a.rank - b.rank;
+  }).map(function (extra) {
+    return extra.options.sort(function (a, b) {
+      return a.rank - b.rank;
+    }).map(function (option) {
+      return showOption(option) && /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+        key: option === null || option === void 0 ? void 0 : option.id,
+        id: "menu_id_".concat(option === null || option === void 0 ? void 0 : option.id),
+        active: tabValue === "id_".concat(option === null || option === void 0 ? void 0 : option.id),
+        onClick: function onClick() {
+          return handleChangeTabValue("id_".concat(option === null || option === void 0 ? void 0 : option.id));
+        },
+        borderBottom: true
+      }, option === null || option === void 0 ? void 0 : option.name);
+    });
+  })))), (product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
     id: "ingredients"
   }, (product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.SectionTitle, null, t('INGREDIENTS', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag2 = theme.defaultLanguages) === null || _theme$defaultLanguag2 === void 0 ? void 0 : _theme$defaultLanguag2.INGREDIENTS) || 'Ingredients')), /*#__PURE__*/_react.default.createElement(_styles.WrapperIngredients, {
     isProductSoldout: isSoldOut || maxProductQuantity <= 0
@@ -608,16 +675,14 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
       onChange: handleChangeIngredientState,
       isSoldOut: isSoldOut
     });
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    id: "extra"
-  }, product === null || product === void 0 ? void 0 : product.extras.sort(function (a, b) {
+  }))), /*#__PURE__*/_react.default.createElement("div", null, product === null || product === void 0 ? void 0 : product.extras.sort(function (a, b) {
     return a.rank - b.rank;
   }).map(function (extra) {
     return extra.options.sort(function (a, b) {
       return a.rank - b.rank;
     }).map(function (option) {
       var currentState = productCart.options["id:".concat(option === null || option === void 0 ? void 0 : option.id)] || {};
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
         key: option === null || option === void 0 ? void 0 : option.id
       }, showOption(option) && /*#__PURE__*/_react.default.createElement(_ProductOption.ProductOption, {
         option: option,
@@ -697,14 +762,14 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
       return handleSwitchQtyUnit('weight_unit');
     },
     active: qtyBy === null || qtyBy === void 0 ? void 0 : qtyBy.weight_unit
-  }, product === null || product === void 0 ? void 0 : product.weight_unit)))), productCart && !isSoldOut && maxProductQuantity > 0 && auth && ((_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.address_id) && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, product === null || product === void 0 ? void 0 : product.weight_unit)))), productCart && !isSoldOut && maxProductQuantity > 0 && auth && (((_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.address_id) || unaddressedTypes.includes(orderState === null || orderState === void 0 ? void 0 : (_orderState$options2 = orderState.options) === null || _orderState$options2 === void 0 ? void 0 : _orderState$options2.type)) && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     className: "add ".concat(maxProductQuantity === 0 || Object.keys(errors).length > 0 ? 'disabled' : ''),
     color: "primary",
     onClick: function onClick() {
       return handleSaveProduct();
     },
     disabled: orderState.loading || (productCart === null || productCart === void 0 ? void 0 : productCart.quantity) === 0 || (product === null || product === void 0 ? void 0 : product.minimum_per_order) && (productCart === null || productCart === void 0 ? void 0 : productCart.quantity) < (product === null || product === void 0 ? void 0 : product.minimum_per_order) || (product === null || product === void 0 ? void 0 : product.maximum_per_order) && (productCart === null || productCart === void 0 ? void 0 : productCart.quantity) > (product === null || product === void 0 ? void 0 : product.maximum_per_order)
-  }, orderState.loading ? /*#__PURE__*/_react.default.createElement("span", null, t('LOADING', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag5 = theme.defaultLanguages) === null || _theme$defaultLanguag5 === void 0 ? void 0 : _theme$defaultLanguag5.LOADING) || 'Loading')) : /*#__PURE__*/_react.default.createElement("span", null, editMode ? t('UPDATE', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag6 = theme.defaultLanguages) === null || _theme$defaultLanguag6 === void 0 ? void 0 : _theme$defaultLanguag6.UPDATE) || 'Update') : t('ADD', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag7 = theme.defaultLanguages) === null || _theme$defaultLanguag7 === void 0 ? void 0 : _theme$defaultLanguag7.ADD) || 'Add'))), auth && !((_orderState$options2 = orderState.options) !== null && _orderState$options2 !== void 0 && _orderState$options2.address_id) && (orderState.loading ? /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, orderState.loading ? /*#__PURE__*/_react.default.createElement("span", null, t('LOADING', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag5 = theme.defaultLanguages) === null || _theme$defaultLanguag5 === void 0 ? void 0 : _theme$defaultLanguag5.LOADING) || 'Loading')) : /*#__PURE__*/_react.default.createElement("span", null, editMode ? t('UPDATE', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag6 = theme.defaultLanguages) === null || _theme$defaultLanguag6 === void 0 ? void 0 : _theme$defaultLanguag6.UPDATE) || 'Update') : t('ADD', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag7 = theme.defaultLanguages) === null || _theme$defaultLanguag7 === void 0 ? void 0 : _theme$defaultLanguag7.ADD) || 'Add'))), auth && !((_orderState$options3 = orderState.options) !== null && _orderState$options3 !== void 0 && _orderState$options3.address_id || unaddressedTypes.includes(orderState === null || orderState === void 0 ? void 0 : (_orderState$options4 = orderState.options) === null || _orderState$options4 === void 0 ? void 0 : _orderState$options4.type)) && (orderState.loading ? /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     className: "add",
     color: "primary",
     disabled: true
@@ -799,7 +864,7 @@ var ProductForm = function ProductForm(props) {
     UIComponent: ProductOptionsUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.ProductForm, productOptionsProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ProductForm, productOptionsProps);
 };
 
-exports.ProductForm = ProductForm;
+exports.ProductForm = ProductForm;