ordering-ui-external 4.0.3 → 4.0.5

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 (9) hide show
  1. package/_modules/themes/five/src/components/BusinessController/index.js +1 -1
  2. package/_modules/themes/five/src/components/ProductForm/index.js +11 -8
  3. package/_modules/themes/five/src/components/ProductForm/styles.js +5 -5
  4. package/_modules/themes/five/src/components/ProductOptionSubOption/index.js +6 -7
  5. package/package.json +1 -1
  6. package/src/themes/five/src/components/BusinessController/index.js +1 -1
  7. package/src/themes/five/src/components/ProductForm/index.js +13 -8
  8. package/src/themes/five/src/components/ProductForm/styles.js +5 -5
  9. package/src/themes/five/src/components/ProductOptionSubOption/index.js +5 -6
package/_modules/themes/five/src/components/BusinessController/index.js CHANGED
@@ -194,7 +194,7 @@ var BusinessControllerUI = function BusinessControllerUI(props) {
194
194
  className: "reviews"
195
195
  }, /*#__PURE__*/_react.default.createElement(_BisStar.default, null), /*#__PURE__*/_react.default.createElement("span", null, businessReviews !== null && businessReviews !== void 0 ? businessReviews : business === null || business === void 0 ? void 0 : (_business$reviews2 = business.reviews) === null || _business$reviews2 === void 0 ? void 0 : _business$reviews2.total)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
196
196
  width: 50
197
- })), !hideBusinessFavorite && /*#__PURE__*/_react.default.createElement(_styles.FavoriteWrapper, {
197
+ })), !hideBusinessFavorite && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.FavoriteWrapper, {
198
198
  ref: favoriteRef,
199
199
  onClick: handleChangeFavorite
200
200
  }, !isSkeleton ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, businessState !== null && businessState !== void 0 && (_businessState$busine2 = businessState.business) !== null && _businessState$busine2 !== void 0 && _businessState$busine2.favorite ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.HeartFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Heart, null)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
package/_modules/themes/five/src/components/ProductForm/index.js CHANGED
@@ -74,7 +74,8 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
74
74
  productAddedToCartLength = props.productAddedToCartLength,
75
75
  handleFavoriteProduct = props.handleFavoriteProduct,
76
76
  handleCreateGuestUser = props.handleCreateGuestUser,
77
- actionStatus = props.actionStatus;
77
+ actionStatus = props.actionStatus,
78
+ isCustomerMode = props.isCustomerMode;
78
79
  var product = productObject.product,
79
80
  loading = productObject.loading,
80
81
  error = productObject.error;
@@ -304,17 +305,19 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
304
305
  if ((product === null || product === void 0 ? void 0 : product.ingredients.length) > 0 || (product === null || product === void 0 ? void 0 : product.extras.length) > 0) {
305
306
  var _product$ingredients;
306
307
  var menuList = [];
307
- 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');
308
- (product === null || product === void 0 ? void 0 : product.extras.length) > 0 && (product === null || product === void 0 ? void 0 : product.extras.sort(function (a, b) {
308
+ if ((product === null || product === void 0 ? void 0 : (_product$ingredients = product.ingredients) === null || _product$ingredients === void 0 ? void 0 : _product$ingredients.length) > 0) {
309
+ menuList.push('ingredients');
310
+ }
311
+ ((product === null || product === void 0 ? void 0 : product.extras.length) > 0 && (product === null || product === void 0 ? void 0 : product.extras) || []).sort(function (a, b) {
309
312
  return a.rank - b.rank;
310
313
  }).forEach(function (extra) {
311
- (extra === null || extra === void 0 ? void 0 : extra.options.length) > 0 && (extra === null || extra === void 0 ? void 0 : extra.options.sort(function (a, b) {
314
+ ((extra === null || extra === void 0 ? void 0 : extra.options.length) > 0 && (extra === null || extra === void 0 ? void 0 : extra.options) || []).sort(function (a, b) {
312
315
  return a.rank - b.rank;
313
316
  }).forEach(function (option) {
314
317
  showOption(option) && menuList.push("id_".concat(option === null || option === void 0 ? void 0 : option.id));
315
- }));
316
- }));
317
- menuList.forEach(function (menu) {
318
+ });
319
+ });
320
+ menuList.length && menuList.forEach(function (menu) {
318
321
  var elementTop = scrollElement.scrollTop;
319
322
  var topPos = document.getElementById(menu).offsetTop;
320
323
  if (Math.abs(elementTop - topPos) < extraHeight) {
@@ -518,7 +521,7 @@ var ProductOptionsUI = function ProductOptionsUI(props) {
518
521
  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
519
522
  variant: "rect",
520
523
  height: 200
521
- })), !loading && !error && product && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ProductInfo, null, /*#__PURE__*/_react.default.createElement(_styles.ProductFormTitle, null, /*#__PURE__*/_react.default.createElement(_styles.TitleWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.ProductName, null, /*#__PURE__*/_react.default.createElement("span", null, product === null || product === void 0 ? void 0 : product.name)), /*#__PURE__*/_react.default.createElement("span", {
524
+ })), !loading && !error && product && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ProductInfo, null, /*#__PURE__*/_react.default.createElement(_styles.ProductFormTitle, null, /*#__PURE__*/_react.default.createElement(_styles.TitleWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.ProductName, null, /*#__PURE__*/_react.default.createElement("span", null, product === null || product === void 0 ? void 0 : product.name)), !isCustomerMode && /*#__PURE__*/_react.default.createElement("span", {
522
525
  className: "favorite",
523
526
  onClick: function onClick() {
524
527
  return handleChangeFavorite();
package/_modules/themes/five/src/components/ProductForm/styles.js CHANGED
@@ -20,7 +20,7 @@ var TitleWrapper = _styledComponents.default.div(_templateObject3 || (_templateO
20
20
  exports.TitleWrapper = TitleWrapper;
21
21
  var WrapperImage = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: -20px;\n margin-top: 20px;\n width: calc(100% + 40px);\n position: relative;\n"])));
22
22
  exports.WrapperImage = WrapperImage;
23
- var SwiperWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n\n img{\n ", "\n }\n .mySwiper2 {\n height: 250px;\n width: 100%;\n ", "\n .swiper-slide-active {\n border-radius: 0px;\n img {\n border-radius: 0px;\n }\n }\n\n @media (min-width: 480px){\n ", "\n }\n\n @media (min-width: 576px) {\n height: 320px;\n ", "\n }\n ", "\n }\n \n\n .swiper {\n width: 100%;\n height: 500px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .swiper-slide {\n background-size: cover;\n background-position: center;\n .active-img {\n ", "\n }\n }\n\n .product-thumb {\n box-sizing: border-box;\n padding: 30px 0px;\n margin: 0px 20px;\n\n .swiper-slide {\n display: flex;\n opacity: 0.8;\n border-radius: 7.6px;\n height: auto;\n cursor: pointer;\n overflow: hidden;\n\n img {\n border-radius: 7.6px;\n max-height: 70px;\n ", "\n }\n }\n\n .swiper-slide-thumb-active {\n opacity: 1;\n }\n }\n\n .swiper-slide img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n ", "\n }\n\n .active-img {\n ", "\n }\n\n .swiper-button-next {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 55% center;\n width: 32px;\n height: 32px;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n border-radius: 50%;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-prev {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 45% center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-next::after, .swiper-button-prev::after {\n display: none;\n }\n"])), function (props) {
23
+ var SwiperWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n\n img{\n ", "\n }\n .mySwiper2 {\n height: 250px;\n width: 100%;\n ", "\n .swiper-slide-active {\n border-radius: 0px;\n img {\n border-radius: 0px;\n }\n }\n\n @media (min-width: 480px){\n ", "\n }\n\n @media (min-width: 576px) {\n height: 320px;\n ", "\n }\n ", "\n }\n\n\n .swiper {\n width: 100%;\n height: 500px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .swiper-slide {\n background-size: cover;\n background-position: center;\n .active-img {\n ", "\n }\n }\n\n .product-thumb {\n box-sizing: border-box;\n padding: 30px 0px;\n margin: 0px 20px;\n\n .swiper-slide {\n display: flex;\n opacity: 0.8;\n border-radius: 7.6px;\n height: auto;\n cursor: pointer;\n overflow: hidden;\n\n img {\n border-radius: 7.6px;\n max-height: 70px;\n ", "\n }\n }\n\n .swiper-slide-thumb-active {\n opacity: 1;\n }\n }\n\n .swiper-slide img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n ", "\n }\n\n .active-img {\n ", "\n }\n\n .swiper-button-next {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 55% center;\n width: 32px;\n height: 32px;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n border-radius: 50%;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-prev {\n background-image: url(", ");\n background-color: #d1d0d04d;\n background-repeat: no-repeat;\n background-position: 45% center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;\n transition: all 0.2s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .swiper-button-next::after, .swiper-button-prev::after {\n display: none;\n }\n"])), function (props) {
24
24
  return props.isSoldOut && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n filter: grayscale(1);\n "])));
25
25
  }, function (_ref) {
26
26
  var _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4;
@@ -72,7 +72,7 @@ var SectionTitle = _styledComponents.default.h3(_templateObject18 || (_templateO
72
72
  exports.SectionTitle = SectionTitle;
73
73
  var ProductComment = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-bottom: 130px;\n\n textarea {\n margin-top: 8px;\n }\n\n p {\n font-weight: 300;\n margin-bottom: 5px;\n }\n\n @media (min-width: 577px) {\n margin-bottom: 62px;\n }\n\n @media (min-width: 769px) {\n margin-bottom: 0px;\n padding-bottom: 10px;\n }\n"])));
74
74
  exports.ProductComment = ProductComment;
75
- var ProductActions = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px 0px;\n width: 100%;\n z-index: 9999997;\n\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n background-color: #FFF;\n\n div.price {\n padding-top: 10px;\n color: ", ";\n h4 {\n margin: 0;\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n }\n span {\n font-size: 13px;\n color: #D83520;\n line-height: 15px;\n }\n }\n\n div.incdec-control {\n width: 195px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n\n svg {\n width: 25px;\n height: 25px;\n cursor: pointer;\n }\n }\n\n div.price-amount-block {\n display: flex;\n justify-content: space-between;\n width: 70%\n }\n\n svg {\n color: ", ";\n }\n\n svg.disabled {\n pointer-events: none;\n color: #CED4DA;\n }\n\n button:disabled,\n button.disabled {\n background: #E9ECEF;\n border: 1px solid #E9ECEF;\n color: #B1BCCC;\n }\n\n button.add {\n width: 90%;\n padding: 5px 10px;\n margin-top: 10px;\n position: relative;\n\n &.soldout {\n width: 100%;\n pointer-events: none;\n }\n }\n .qty {\n flex: 1;\n text-align: center;\n display: flex;\n align-items: center;\n height: 38px;\n min-width: 60px;\n box-sizing: border-box;\n padding: 0;\n margin: 0 10px;\n }\n\n #address_control {\n button.add {\n width: calc(100% - 20px) !important;\n margin: 10px 10px 0 10px;\n }\n }\n \n div#address_list {\n padding: 0;\n }\n\n @media (min-width: 577px) {\n position: sticky;\n }\n\n @media (min-width: 1200px) {\n bottom: 0px;\n flex-direction: row;\n justify-content: space-between;\n border-top: 1px solid #E9ECEF;\n width: calc(100% + 40px);\n transform: translateX(-20px);\n padding: 10px 20px;\n box-sizing: border-box;\n\n ", "\n\n div.price {\n width: 25%;\n }\n\n button.add {\n width: 35%;\n margin-top: 0;\n }\n\n div.incdec-control {\n margin-right: 18%;\n &.show-weight-unit{\n width: 40%;\n }\n }\n }\n"])), function (props) {
75
+ var ProductActions = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px 0px;\n width: 100%;\n z-index: 9999997;\n\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n background-color: #FFF;\n\n div.price {\n padding-top: 10px;\n color: ", ";\n h4 {\n margin: 0;\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n }\n span {\n font-size: 13px;\n color: #D83520;\n line-height: 15px;\n }\n }\n\n div.incdec-control {\n width: 195px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n\n svg {\n width: 25px;\n height: 25px;\n cursor: pointer;\n }\n }\n\n div.price-amount-block {\n display: flex;\n justify-content: space-between;\n width: 70%\n }\n\n svg {\n color: ", ";\n }\n\n svg.disabled {\n pointer-events: none;\n color: #CED4DA;\n }\n\n button:disabled,\n button.disabled {\n background: #E9ECEF;\n border: 1px solid #E9ECEF;\n color: #B1BCCC;\n }\n\n button.add {\n width: 90%;\n padding: 5px 10px;\n margin-top: 10px;\n position: relative;\n\n &.soldout {\n width: 100%;\n pointer-events: none;\n }\n }\n .qty {\n flex: 1;\n text-align: center;\n display: flex;\n align-items: center;\n height: 38px;\n min-width: 60px;\n box-sizing: border-box;\n padding: 0;\n margin: 0 10px;\n }\n\n #address_control {\n button.add {\n width: calc(100% - 20px) !important;\n margin: 10px 10px 0 10px;\n }\n }\n\n div#address_list {\n padding: 0;\n }\n\n @media (min-width: 577px) {\n position: sticky;\n }\n\n @media (min-width: 1200px) {\n bottom: 0px;\n flex-direction: row;\n justify-content: space-between;\n border-top: 1px solid #E9ECEF;\n width: calc(100% + 40px);\n transform: translateX(-20px);\n padding: 10px 20px;\n box-sizing: border-box;\n\n ", "\n\n div.price {\n width: 25%;\n }\n\n button.add {\n width: 35%;\n margin-top: 0;\n }\n\n div.incdec-control {\n margin-right: 18%;\n &.show-weight-unit{\n width: 40%;\n }\n }\n }\n"])), function (props) {
76
76
  var _props$theme;
77
77
  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.colors.darkTextColor;
78
78
  }, function (props) {
@@ -96,7 +96,7 @@ var WrapperIngredients = _styledComponents.default.div(_templateObject25 || (_te
96
96
  return isProductSoldout && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n border-radius: 10px;\n pointer-events: none;\n background: hsl(0, 0%, 72%);\n "])));
97
97
  });
98
98
  exports.WrapperIngredients = WrapperIngredients;
99
- var ProductTabContainer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n border-bottom: 1px solid #E9ECEF;\n position: sticky;\n top: 50px;\n background: white;\n z-index: 9999996;\n overflow: scroll hidden;\n width: 100%;\n ::-webkit-scrollbar {\n height: 0px;\n }\n\n #optionList {\n > div {\n white-space: nowrap;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 10px 0px;\n margin-right: 25px;\n ", "\n }\n }\n"])), function (props) {
99
+ var ProductTabContainer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n border-bottom: 1px solid #E9ECEF;\n position: sticky;\n top: 0px;\n background: white;\n z-index: 9999996;\n overflow: scroll hidden;\n width: 100%;\n ::-webkit-scrollbar {\n height: 0px;\n }\n\n #optionList {\n > div {\n white-space: nowrap;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 10px 0px;\n margin-right: 25px;\n ", "\n }\n }\n"])), function (props) {
100
100
  return props.theme.rtl && (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n margin-right: 0px;\n margin-left: 25px;\n "])));
101
101
  });
102
102
  exports.ProductTabContainer = ProductTabContainer;
@@ -126,12 +126,12 @@ var ProductTagWrapper = _styledComponents.default.div(_templateObject39 || (_tem
126
126
  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n margin: 0 10px 0 20px;\n "]))) : (0, _styledComponents.css)(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n margin: 0 20px 0 10px;\n "])));
127
127
  });
128
128
  exports.ProductTagWrapper = ProductTagWrapper;
129
- var WeightUnitSwitch = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: auto;\n margin-left: 10px;\n \n ", "\n"])), function (props) {
129
+ var WeightUnitSwitch = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: auto;\n margin-left: 10px;\n\n ", "\n"])), function (props) {
130
130
  var _props$theme4;
131
131
  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n margin-right: 10px;\n margin-left: 0;\n "])));
132
132
  });
133
133
  exports.WeightUnitSwitch = WeightUnitSwitch;
134
- var WeightUnitItem = _styledComponents.default.span(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n display: inline-flex;\n width: fit-content;\n min-width: unset !important;\n font-size: 12px;\n line-height: 18px;\n padding: 2px 6px;\n cursor: pointer;\n \n ", "\n"])), function (_ref12) {
134
+ var WeightUnitItem = _styledComponents.default.span(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n display: inline-flex;\n width: fit-content;\n min-width: unset !important;\n font-size: 12px;\n line-height: 18px;\n padding: 2px 6px;\n cursor: pointer;\n\n ", "\n"])), function (_ref12) {
135
135
  var active = _ref12.active;
136
136
  return active && (0, _styledComponents.css)(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n background-color: ", "15;\n border-radius: 3px;\n color: ", ";\n "])), function (props) {
137
137
  return props.theme.colors.primary;
package/_modules/themes/five/src/components/ProductOptionSubOption/index.js CHANGED
@@ -11,7 +11,6 @@ var _BsCircleFill = _interopRequireDefault(require("@meronex/icons/bs/BsCircleFi
11
11
  var _BsCircleHalf = _interopRequireDefault(require("@meronex/icons/bs/BsCircleHalf"));
12
12
  var _BsDashCircle = _interopRequireDefault(require("@meronex/icons/bs/BsDashCircle"));
13
13
  var _BsPlusCircle = _interopRequireDefault(require("@meronex/icons/bs/BsPlusCircle"));
14
- var _useWindowSize2 = require("../../../../../hooks/useWindowSize");
15
14
  var _styles = require("./styles");
16
15
  var _MdCheckBox = _interopRequireDefault(require("@meronex/icons/md/MdCheckBox"));
17
16
  var _MdCheckBoxOutlineBlank = _interopRequireDefault(require("@meronex/icons/md/MdCheckBoxOutlineBlank"));
@@ -53,8 +52,6 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
53
52
  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
54
53
  _useUtils2 = _slicedToArray(_useUtils, 1),
55
54
  parsePrice = _useUtils2[0].parsePrice;
56
- var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
57
- width = _useWindowSize.width;
58
55
  var _useState = (0, _react.useState)(false),
59
56
  _useState2 = _slicedToArray(_useState, 2),
60
57
  showMessage = _useState2[0],
@@ -88,8 +85,10 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
88
85
  }, [balance]);
89
86
  (0, _react.useEffect)(function () {
90
87
  if (balance === (option === null || option === void 0 ? void 0 : option.max) && state !== null && state !== void 0 && state.selected && dirtyRef) {
91
- dirtyRef.current = false;
92
- setIsScrollAvailable(true);
88
+ if ((dirtyRef === null || dirtyRef === void 0 ? void 0 : dirtyRef.current) !== null) {
89
+ dirtyRef.current = false;
90
+ setIsScrollAvailable(true);
91
+ }
93
92
  }
94
93
  }, [state === null || state === void 0 ? void 0 : state.selected]);
95
94
  (0, _react.useEffect)(function () {
@@ -118,7 +117,7 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
118
117
  disabled: true
119
118
  })), suboption.image && suboption.image !== '-' && /*#__PURE__*/_react.default.createElement(_styles.SubOptionThumbnail, {
120
119
  src: suboption.image
121
- }), /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name), showMessage && width > 576 && /*#__PURE__*/_react.default.createElement("span", null, "".concat(t('OPTIONS_MAX_LIMIT', 'Maximum options to choose'), ": ").concat(option === null || option === void 0 ? void 0 : option.max)))), /*#__PURE__*/_react.default.createElement(_styles.RightOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.QuantityControl, null, (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, {
120
+ }), /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name))), /*#__PURE__*/_react.default.createElement(_styles.RightOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.QuantityControl, null, (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, {
122
121
  disabled: state.quantity === 0 || isSoldOut,
123
122
  onClick: handleDecrement
124
123
  }), state.quantity, /*#__PURE__*/_react.default.createElement(_BsPlusCircle.default, {
@@ -145,7 +144,7 @@ var ProductOptionSubOptionUI = function ProductOptionSubOptionUI(props) {
145
144
  onClick: function onClick(e) {
146
145
  return handlePosition(e, 'right');
147
146
  }
148
- })))), /*#__PURE__*/_react.default.createElement(_styles.SuboptionPrice, null, price > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "+ ", parsePrice(price)))), showMessage && width < 576 && /*#__PURE__*/_react.default.createElement(_styles.Text, {
147
+ })))), /*#__PURE__*/_react.default.createElement(_styles.SuboptionPrice, null, price > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "+ ", parsePrice(price)))), showMessage && /*#__PURE__*/_react.default.createElement(_styles.Text, {
149
148
  noMargin: true
150
149
  }, /*#__PURE__*/_react.default.createElement("span", null, "".concat(t('OPTIONS_MAX_LIMIT', 'Maximum options to choose'), ": ").concat(option === null || option === void 0 ? void 0 : option.max))), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
151
150
  return /*#__PURE__*/_react.default.createElement(AfterComponent, _extends({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "4.0.3",
3
+ "version": "4.0.5",
4
4
  "description": "Ordering UI Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
package/src/themes/five/src/components/BusinessController/index.js CHANGED
@@ -212,7 +212,7 @@ const BusinessControllerUI = (props) => {
212
212
  )}
213
213
  </>
214
214
  )}
215
- {!hideBusinessFavorite && (
215
+ {!hideBusinessFavorite && !isCustomerMode && (
216
216
  <FavoriteWrapper ref={favoriteRef} onClick={handleChangeFavorite}>
217
217
  {!isSkeleton ? (
218
218
  <>
package/src/themes/five/src/components/ProductForm/index.js CHANGED
@@ -99,7 +99,8 @@ const ProductOptionsUI = (props) => {
99
99
  productAddedToCartLength,
100
100
  handleFavoriteProduct,
101
101
  handleCreateGuestUser,
102
- actionStatus
102
+ actionStatus,
103
+ isCustomerMode
103
104
  } = props
104
105
 
105
106
  const { product, loading, error } = productObject
@@ -283,13 +284,15 @@ const ProductOptionsUI = (props) => {
283
284
  const extraHeight = 60
284
285
  if (product?.ingredients.length > 0 || product?.extras.length > 0) {
285
286
  const menuList = []
286
- if (product?.ingredients?.length > 0) menuList.push('ingredients')
287
- product?.extras.length > 0 && product?.extras.sort((a, b) => a.rank - b.rank).forEach(extra => {
288
- extra?.options.length > 0 && extra?.options.sort((a, b) => a.rank - b.rank).forEach(option => {
287
+ if (product?.ingredients?.length > 0) {
288
+ menuList.push('ingredients')
289
+ }
290
+ ((product?.extras.length > 0 && product?.extras) || []).sort((a, b) => a.rank - b.rank).forEach(extra => {
291
+ ((extra?.options.length > 0 && extra?.options) || []).sort((a, b) => a.rank - b.rank).forEach(option => {
289
292
  showOption(option) && menuList.push(`id_${option?.id}`)
290
293
  })
291
294
  })
292
- menuList.forEach(menu => {
295
+ menuList.length && menuList.forEach(menu => {
293
296
  const elementTop = scrollElement.scrollTop
294
297
  const topPos = document.getElementById(menu).offsetTop
295
298
  if (Math.abs(elementTop - topPos) < extraHeight) {
@@ -500,9 +503,11 @@ const ProductOptionsUI = (props) => {
500
503
  <ProductName>
501
504
  <span>{product?.name}</span>
502
505
  </ProductName>
503
- <span className='favorite' onClick={() => handleChangeFavorite()} >
504
- {product?.favorite ? <Like /> : <DisLike />}
505
- </span>
506
+ {!isCustomerMode && (
507
+ <span className='favorite' onClick={() => handleChangeFavorite()}>
508
+ {product?.favorite ? <Like /> : <DisLike />}
509
+ </span>
510
+ )}
506
511
  </TitleWrapper>
507
512
  <Properties>
508
513
  {isHaveWeight ? (
package/src/themes/five/src/components/ProductForm/styles.js CHANGED
@@ -94,7 +94,7 @@ export const SwiperWrapper = styled.div`
94
94
  }
95
95
  `}
96
96
  }
97
-
97
+
98
98
 
99
99
  .swiper {
100
100
  width: 100%;
@@ -362,7 +362,7 @@ export const ProductActions = styled.div`
362
362
  margin: 10px 10px 0 10px;
363
363
  }
364
364
  }
365
-
365
+
366
366
  div#address_list {
367
367
  padding: 0;
368
368
  }
@@ -439,7 +439,7 @@ export const WrapperIngredients = styled.div`
439
439
  export const ProductTabContainer = styled.div`
440
440
  border-bottom: 1px solid #E9ECEF;
441
441
  position: sticky;
442
- top: 50px;
442
+ top: 0px;
443
443
  background: white;
444
444
  z-index: 9999996;
445
445
  overflow: scroll hidden;
@@ -587,7 +587,7 @@ export const WeightUnitSwitch = styled.div`
587
587
  flex-direction: column;
588
588
  width: auto;
589
589
  margin-left: 10px;
590
-
590
+
591
591
  ${props => props.theme?.rtl && css`
592
592
  margin-right: 10px;
593
593
  margin-left: 0;
@@ -601,7 +601,7 @@ export const WeightUnitItem = styled.span`
601
601
  line-height: 18px;
602
602
  padding: 2px 6px;
603
603
  cursor: pointer;
604
-
604
+
605
605
  ${({ active }) => active && css`
606
606
  background-color: ${props => props.theme.colors.primary}15;
607
607
  border-radius: 3px;
package/src/themes/five/src/components/ProductOptionSubOption/index.js CHANGED
@@ -8,7 +8,6 @@ import BsCircleFill from '@meronex/icons/bs/BsCircleFill'
8
8
  import BsCircleHalf from '@meronex/icons/bs/BsCircleHalf'
9
9
  import BsDashCircle from '@meronex/icons/bs/BsDashCircle'
10
10
  import BsPlusCircle from '@meronex/icons/bs/BsPlusCircle'
11
- import { useWindowSize } from '../../../../../hooks/useWindowSize'
12
11
 
13
12
  import {
14
13
  Container,
@@ -45,7 +44,6 @@ const ProductOptionSubOptionUI = (props) => {
45
44
  const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
46
45
  const [, t] = useLanguage()
47
46
  const [{ parsePrice }] = useUtils()
48
- const { width } = useWindowSize()
49
47
  const [showMessage, setShowMessage] = useState(false)
50
48
  const dirtyRef = useRef(null)
51
49
 
@@ -80,8 +78,10 @@ const ProductOptionSubOptionUI = (props) => {
80
78
 
81
79
  useEffect(() => {
82
80
  if (balance === option?.max && state?.selected && dirtyRef) {
83
- dirtyRef.current = false
84
- setIsScrollAvailable(true)
81
+ if (dirtyRef?.current !== null) {
82
+ dirtyRef.current = false
83
+ setIsScrollAvailable(true)
84
+ }
85
85
  }
86
86
  }, [state?.selected])
87
87
 
@@ -120,7 +120,6 @@ const ProductOptionSubOptionUI = (props) => {
120
120
  )}
121
121
  <Text>
122
122
  <div>{suboption?.name}</div>
123
- {showMessage && width > 576 && <span>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</span>}
124
123
  </Text>
125
124
  </LeftOptionContainer>
126
125
  <RightOptionContainer>
@@ -167,7 +166,7 @@ const ProductOptionSubOptionUI = (props) => {
167
166
  )}
168
167
  </SuboptionPrice>
169
168
  </Container>
170
- {showMessage && width < 576 && (
169
+ {showMessage && (
171
170
  <Text noMargin>
172
171
  <span>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</span>
173
172
  </Text>