ordering-ui-external 14.0.19 → 14.0.21

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 (11) hide show
  1. package/_modules/themes/five/src/components/Checkout/index.js +2 -1
  2. package/_modules/themes/five/src/components/Checkout/styles.js +6 -4
  3. package/_modules/themes/five/src/components/FavoriteList/index.js +41 -7
  4. package/_modules/themes/five/src/components/FavoriteList/styles.js +26 -3
  5. package/_modules/themes/five/src/components/ProductOptionSubOption/index.js +6 -5
  6. package/package.json +2 -2
  7. package/src/themes/five/src/components/Checkout/index.js +8 -1
  8. package/src/themes/five/src/components/Checkout/styles.js +8 -0
  9. package/src/themes/five/src/components/FavoriteList/index.js +57 -5
  10. package/src/themes/five/src/components/FavoriteList/styles.js +95 -0
  11. package/src/themes/five/src/components/ProductOptionSubOption/index.js +2 -1
package/_modules/themes/five/src/components/Checkout/index.js CHANGED
@@ -34,6 +34,7 @@ var _OrderContextUI = require("../OrderContextUI");
34
34
  var _SignUpForm = require("../SignUpForm");
35
35
  var _LoginForm = require("../LoginForm");
36
36
  var _OrderDetail = require("./OrderDetail");
37
+ var _SpinnerLoader = require("../../../../../components/SpinnerLoader");
37
38
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
38
39
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
40
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -627,7 +628,7 @@ var CheckoutUI = function CheckoutUI(props) {
627
628
  hideCouponByValidationCheckout: !(guestCheckoutCoupon !== null && guestCheckoutCoupon !== void 0 && guestCheckoutCoupon.enabled),
628
629
  productLoading: productLoading,
629
630
  setProductLoading: setProductLoading
630
- })), !!(isMultiDriverTips && driverTipsField) && /*#__PURE__*/_react.default.createElement(_styles.DriverTipContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('DRIVER_TIPS', 'Driver Tips')), /*#__PURE__*/_react.default.createElement("p", null, t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')), /*#__PURE__*/_react.default.createElement(_DriverTips.DriverTips, {
631
+ }), isLoadingCheckprice && /*#__PURE__*/_react.default.createElement(_styles.SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null))), !!(isMultiDriverTips && driverTipsField) && /*#__PURE__*/_react.default.createElement(_styles.DriverTipContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('DRIVER_TIPS', 'Driver Tips')), /*#__PURE__*/_react.default.createElement("p", null, t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')), /*#__PURE__*/_react.default.createElement(_DriverTips.DriverTips, {
631
632
  businessId: cart === null || cart === void 0 ? void 0 : cart.business_id,
632
633
  driverTipsOptions: driverTipsOptions,
633
634
  isFixedPrice: parseInt(configs === null || configs === void 0 || (_configs$driver_tip_t3 = configs.driver_tip_type) === null || _configs$driver_tip_t3 === void 0 ? void 0 : _configs$driver_tip_t3.value, 10) === 1,
package/_modules/themes/five/src/components/Checkout/styles.js CHANGED
@@ -4,9 +4,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.WrapperUserDetails = exports.WrapperRightContainer = exports.WrapperPlaceOrderButton = exports.WrapperLeftContent = exports.WrapperLeftContainer = exports.WrapperActionsInput = exports.WarningText = exports.WarningMessage = exports.WalletPaymentOptionContainer = exports.UserDetailsContainer = exports.SelectSpotContainer = exports.SectionTitleContainer = exports.PaymentMethodContainer = exports.OrderDetailContainer = exports.OrderContextUIWrapper = exports.NotFoundImage = exports.MobileWrapperPlaceOrderButton = exports.HeaderContent = exports.Flag = exports.DriverTipDivider = exports.DriverTipContainer = exports.DeliveryOptionsContainer = exports.Container = exports.CheckOutDivider = exports.CartsList = exports.CartHeader = exports.CartContainer = exports.BusinessDetailsContainer = exports.AuthButtonList = void 0;
7
+ exports.WrapperUserDetails = exports.WrapperRightContainer = exports.WrapperPlaceOrderButton = exports.WrapperLeftContent = exports.WrapperLeftContainer = exports.WrapperActionsInput = exports.WarningText = exports.WarningMessage = exports.WalletPaymentOptionContainer = exports.UserDetailsContainer = exports.SpinnerContainer = exports.SelectSpotContainer = exports.SectionTitleContainer = exports.PaymentMethodContainer = exports.OrderDetailContainer = exports.OrderContextUIWrapper = exports.NotFoundImage = exports.MobileWrapperPlaceOrderButton = exports.HeaderContent = exports.Flag = exports.DriverTipDivider = exports.DriverTipContainer = exports.DeliveryOptionsContainer = exports.Container = exports.CheckOutDivider = exports.CartsList = exports.CartHeader = exports.CartContainer = exports.BusinessDetailsContainer = exports.AuthButtonList = void 0;
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
9
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
10
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
11
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
12
12
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -30,7 +30,7 @@ var PaymentMethodContainer = _styledComponents.default.div(_templateObject7 || (
30
30
  exports.PaymentMethodContainer = PaymentMethodContainer;
31
31
  var DriverTipContainer = (0, _styledComponents.default)(PaymentMethodContainer)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n > p {\n margin: 0;\n font-size: 16px;\n color: #909BA9;\n }\n"])));
32
32
  exports.DriverTipContainer = DriverTipContainer;
33
- var CartContainer = (0, _styledComponents.default)(PaymentMethodContainer)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-bottom: 20px;\n"])));
33
+ var CartContainer = (0, _styledComponents.default)(PaymentMethodContainer)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-bottom: 20px;\n position: relative;\n"])));
34
34
  exports.CartContainer = CartContainer;
35
35
  var WalletPaymentOptionContainer = (0, _styledComponents.default)(PaymentMethodContainer)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding-top: 20px;\n"])));
36
36
  exports.WalletPaymentOptionContainer = WalletPaymentOptionContainer;
@@ -83,4 +83,6 @@ exports.Flag = Flag;
83
83
  var SectionTitleContainer = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
84
84
  exports.SectionTitleContainer = SectionTitleContainer;
85
85
  var OrderDetailContainer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 10px 30px 20px;\n"])));
86
- exports.OrderDetailContainer = OrderDetailContainer;
86
+ exports.OrderDetailContainer = OrderDetailContainer;
87
+ var SpinnerContainer = _styledComponents.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n position: absolute;\n width: 100%;\n left: 0;\n top: -100%;\n"])));
88
+ exports.SpinnerContainer = SpinnerContainer;
package/_modules/themes/five/src/components/FavoriteList/index.js CHANGED
@@ -39,7 +39,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
39
39
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
40
40
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
41
41
  var FavoriteListUI = function FavoriteListUI(props) {
42
- var _props$beforeElements, _props$beforeComponen, _favoriteList$favorit2, _favoriteList$favorit3, _favoriteList$favorit4, _favoriteList$favorit5, _favoriteList$favorit6, _props$afterComponent, _props$afterElements;
42
+ var _props$beforeElements, _props$beforeComponen, _favoriteList$favorit2, _favoriteList$favorit3, _favoriteList$favorit4, _favoriteList$favorit5, _favoriteList$favorit6, _favProduct$businesse, _favProduct$businesse2, _favProduct$businesse3, _props$afterComponent, _props$afterElements;
43
43
  var favoriteList = props.favoriteList,
44
44
  handleUpdateFavoriteList = props.handleUpdateFavoriteList,
45
45
  pagination = props.pagination,
@@ -75,6 +75,14 @@ var FavoriteListUI = function FavoriteListUI(props) {
75
75
  _useState4 = _slicedToArray(_useState3, 2),
76
76
  preorderBusiness = _useState4[0],
77
77
  setPreorderBusiness = _useState4[1];
78
+ var _useState5 = (0, _react.useState)(false),
79
+ _useState6 = _slicedToArray(_useState5, 2),
80
+ openModal = _useState6[0],
81
+ setOpenModal = _useState6[1];
82
+ var _useState7 = (0, _react.useState)(null),
83
+ _useState8 = _slicedToArray(_useState7, 2),
84
+ favProduct = _useState8[0],
85
+ setFavProduct = _useState8[1];
78
86
  var pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17];
79
87
  var handleClickBusiness = function handleClickBusiness(business) {
80
88
  if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
@@ -109,11 +117,11 @@ var FavoriteListUI = function FavoriteListUI(props) {
109
117
  var onRedirectPage = function onRedirectPage(data) {
110
118
  events.emit('go_to_page', data);
111
119
  };
112
- var _onProductClick = function onProductClick(product) {
113
- var _product$category, _product$category2;
114
- var slug = product === null || product === void 0 || (_product$category = product.category) === null || _product$category === void 0 || (_product$category = _product$category.business) === null || _product$category === void 0 ? void 0 : _product$category.slug;
115
- var categoryId = product === null || product === void 0 || (_product$category2 = product.category) === null || _product$category2 === void 0 ? void 0 : _product$category2.id;
116
- var productId = product === null || product === void 0 ? void 0 : product.id;
120
+ var handleOpenProduct = function handleOpenProduct(business) {
121
+ var _favProduct$category;
122
+ var slug = business.slug;
123
+ var categoryId = favProduct === null || favProduct === void 0 || (_favProduct$category = favProduct.category) === null || _favProduct$category === void 0 ? void 0 : _favProduct$category.id;
124
+ var productId = favProduct === null || favProduct === void 0 ? void 0 : favProduct.id;
117
125
  if (!categoryId && !productId) {
118
126
  if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
119
127
  events.emit('go_to_page', {
@@ -176,6 +184,10 @@ var FavoriteListUI = function FavoriteListUI(props) {
176
184
  });
177
185
  }
178
186
  };
187
+ var _onProductClick = function onProductClick(product) {
188
+ setOpenModal(true);
189
+ setFavProduct(product);
190
+ };
179
191
  var closeOrderModal = function closeOrderModal(e) {
180
192
  var outsideModal = !window.document.getElementById('app-modals') || !window.document.getElementById('app-modals').contains(e.target);
181
193
  if (outsideModal) {
@@ -355,7 +367,29 @@ var FavoriteListUI = function FavoriteListUI(props) {
355
367
  business: preorderBusiness,
356
368
  handleClick: handleClickBusiness,
357
369
  showButton: true
358
- })), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
370
+ })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
371
+ open: openModal,
372
+ onClose: function onClose() {
373
+ return setOpenModal(false);
374
+ }
375
+ }, /*#__PURE__*/_react.default.createElement(_styles.FavPopupView, null, (favProduct === null || favProduct === void 0 ? void 0 : favProduct.images) && /*#__PURE__*/_react.default.createElement(_styles.Image, null, /*#__PURE__*/_react.default.createElement("img", {
376
+ src: favProduct.images,
377
+ alt: "product-".concat(i),
378
+ width: "150px",
379
+ height: "150px",
380
+ loading: "lazy"
381
+ })), /*#__PURE__*/_react.default.createElement("h2", null, favProduct === null || favProduct === void 0 ? void 0 : favProduct.name), /*#__PURE__*/_react.default.createElement("h2", null, favProduct !== null && favProduct !== void 0 && favProduct.businesses && (favProduct === null || favProduct === void 0 || (_favProduct$businesse = favProduct.businesses) === null || _favProduct$businesse === void 0 ? void 0 : _favProduct$businesse.length) > 1 ? t('AVAILABLE_BUSINESSES_FOR_PRODUCT', 'Available businesses for this product') : favProduct !== null && favProduct !== void 0 && favProduct.businesses && (favProduct === null || favProduct === void 0 || (_favProduct$businesse2 = favProduct.businesses) === null || _favProduct$businesse2 === void 0 ? void 0 : _favProduct$businesse2.length) == 1 ? t('AVAILABLE_BUSINESSE_FOR_PRODUCT', 'Available business for this product') : t('NOT_AVAILABLE_BUSINESSE', 'Business is not available for this product')), /*#__PURE__*/_react.default.createElement("div", null, favProduct === null || favProduct === void 0 || (_favProduct$businesse3 = favProduct.businesses) === null || _favProduct$businesse3 === void 0 ? void 0 : _favProduct$businesse3.map(function (business) {
382
+ return /*#__PURE__*/_react.default.createElement(_styles.SingleBusinessOffer, {
383
+ key: business.id
384
+ }, /*#__PURE__*/_react.default.createElement(_styles.BusinessLogo, {
385
+ bgimage: business === null || business === void 0 ? void 0 : business.logo
386
+ }), /*#__PURE__*/_react.default.createElement(_styles.BusinessInfo, null, /*#__PURE__*/_react.default.createElement("p", null, business.name), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
387
+ onClick: function onClick() {
388
+ return handleOpenProduct(business);
389
+ },
390
+ color: "primary"
391
+ }, t('GO_TO_BUSINESSS', 'Go to business'))));
392
+ })))), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
359
393
  return /*#__PURE__*/_react.default.createElement(AfterComponent, _extends({
360
394
  key: i
361
395
  }, props));
package/_modules/themes/five/src/components/FavoriteList/styles.js CHANGED
@@ -4,11 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.ReadMoreCard = exports.FavoriteListing = exports.FavoriteListWrapper = exports.ErrorMessage = exports.Container = void 0;
7
+ exports.SingleBusinessOffer = exports.ReadMoreCard = exports.Image = exports.FavoriteListing = exports.FavoriteListWrapper = exports.FavPopupView = exports.ErrorMessage = exports.Container = exports.BusinessLogo = exports.BusinessInfo = void 0;
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
9
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
10
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
11
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
12
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
13
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
13
14
  var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n margin-top: 35px;\n"])));
14
15
  exports.Container = Container;
@@ -27,4 +28,26 @@ var FavoriteListing = _styledComponents.default.div(_templateObject6 || (_templa
27
28
  });
28
29
  exports.FavoriteListing = FavoriteListing;
29
30
  var ReadMoreCard = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n button {\n height: 44px;\n }\n"])));
30
- exports.ReadMoreCard = ReadMoreCard;
31
+ exports.ReadMoreCard = ReadMoreCard;
32
+ var FavPopupView = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-top: 20px;\n text-align: center;\n h2 {\n font-size: 16px;\n }\n @media(min-width: 720px){\n h2 {\n font-size: 20px;\n }\n }\n"])));
33
+ exports.FavPopupView = FavPopupView;
34
+ var SingleBusinessOffer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n button{\n font-size: 12px;\n }\n @media (min-width: 720px){\n button{\n font-size: 16px;\n }\n }\n"])));
35
+ exports.SingleBusinessOffer = SingleBusinessOffer;
36
+ var BusinessInfo = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n margin-left: 10px;\n button{\n height: 44px;\n }\n p{\n font-size: 12px;\n width: 50%;\n text-align: left;\n }\n @media(min-width: 720px){\n p{\n font-size: 16px;\n width: 70%;\n }\n }\n"])));
37
+ exports.BusinessInfo = BusinessInfo;
38
+ var Image = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: 100%;\n img{\n width: 100%;\n height: auto;\n border-radius: 16px;\n aspect-ratio: attr(width) / attr(height)\n }\n"])));
39
+ exports.Image = Image;
40
+ var BusinessLogoStyled = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n width: 65px;\n height: 65px;\n box-sizing: border-box;\n position: relative;\n background-repeat: no-repeat, repeat;\n background-size: cover;\n object-fit: cover;\n background-position: center;\n min-height: 65px;\n border-radius: 7.6px;\n\n @media (min-width: 481px){\n min-width: 75px;\n min-height: 75px;\n height: 75px;\n width: 75px;\n min-height: 75px;\n ", "\n }\n"])), function (_ref3) {
41
+ var isCustomerMode = _ref3.isCustomerMode;
42
+ return isCustomerMode && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n "])));
43
+ });
44
+ var BusinessLogo = function BusinessLogo(props) {
45
+ var style = {};
46
+ if (props.bgimage) {
47
+ style.backgroundImage = "url(".concat(props.bgimage, ")");
48
+ }
49
+ return /*#__PURE__*/React.createElement(BusinessLogoStyled, _extends({}, props, {
50
+ style: style
51
+ }), props.children);
52
+ };
53
+ exports.BusinessLogo = BusinessLogo;
package/_modules/themes/five/src/components/ProductOptionSubOption/index.js CHANGED
@@ -36,7 +36,7 @@ var ProductOptionSubOptionPropsAreEqual = function ProductOptionSubOptionPropsAr
36
36
  return JSON.stringify(prevProps.state) === JSON.stringify(nextProps.state) && JSON.stringify(prevProps.pizzaState) === JSON.stringify(nextProps.pizzaState) && prevProps.balance === nextProps.balance && JSON.stringify(prevProps.productCart) === JSON.stringify(nextProps.productCart);
37
37
  };
38
38
  var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props) {
39
- var _pizzaState, _pizzaState2, _props$beforeElements, _props$beforeComponen, _option$name2, _pizzaState3, _pizzaState4, _props$afterComponent, _props$afterElements;
39
+ var _pizzaState, _option$name, _option$name$toLowerC, _pizzaState2, _props$beforeElements, _props$beforeComponen, _option$name3, _pizzaState3, _pizzaState4, _props$afterComponent, _props$afterElements;
40
40
  var state = props.state,
41
41
  increment = props.increment,
42
42
  decrement = props.decrement,
@@ -52,6 +52,7 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
52
52
  changeQuantity = props.changeQuantity,
53
53
  isAlsea = props.isAlsea;
54
54
  var disableIncrement = option !== null && option !== void 0 && option.with_half_option ? (pizzaState === null || pizzaState === void 0 || (_pizzaState = pizzaState["option:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _pizzaState === void 0 ? void 0 : _pizzaState.value) >= (option === null || option === void 0 ? void 0 : option.max) : 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);
55
+ var quesoYSalsa = (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)) === 'queso y salsa';
55
56
  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;
56
57
  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
57
58
  _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -119,10 +120,10 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
119
120
  }, props));
120
121
  }), /*#__PURE__*/_react.default.createElement(_styles.Container, {
121
122
  onClick: function onClick(e) {
122
- var _option$name;
123
- return (option === null || option === void 0 || (_option$name = option.name) === null || _option$name === void 0 ? void 0 : _option$name.toLowerCase()) === 'queso y salsa' && isAlsea ? handleChangeQuantity(e, state.quantity === 0 ? 1 : 0) : handleSuboptionClick();
123
+ var _option$name2;
124
+ return (option === null || option === void 0 || (_option$name2 = option.name) === null || _option$name2 === void 0 ? void 0 : _option$name2.toLowerCase()) === 'queso y salsa' && isAlsea ? handleChangeQuantity(e, state.quantity === 0 ? 1 : 0) : handleSuboptionClick();
124
125
  }
125
- }, /*#__PURE__*/_react.default.createElement(_styles.LeftOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.IconControl, null, (option === null || option === void 0 ? void 0 : option.min) === 0 && (option === null || option === void 0 ? void 0 : option.max) === 1 || (option === null || option === void 0 ? void 0 : option.max) > 1 ? state !== null && state !== void 0 && state.selected && !((option === null || option === void 0 || (_option$name2 = option.name) === null || _option$name2 === void 0 ? void 0 : _option$name2.toLowerCase()) === 'queso y salsa' && isAlsea && state.quantity === 0) ? /*#__PURE__*/_react.default.createElement(_MdCheckBox.default, null) : /*#__PURE__*/_react.default.createElement(_MdCheckBoxOutlineBlank.default, {
126
+ }, /*#__PURE__*/_react.default.createElement(_styles.LeftOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.IconControl, null, (option === null || option === void 0 ? void 0 : option.min) === 0 && (option === null || option === void 0 ? void 0 : option.max) === 1 || (option === null || option === void 0 ? void 0 : option.max) > 1 ? state !== null && state !== void 0 && state.selected && !((option === null || option === void 0 || (_option$name3 = option.name) === null || _option$name3 === void 0 ? void 0 : _option$name3.toLowerCase()) === 'queso y salsa' && isAlsea && state.quantity === 0) ? /*#__PURE__*/_react.default.createElement(_MdCheckBox.default, null) : /*#__PURE__*/_react.default.createElement(_MdCheckBoxOutlineBlank.default, {
126
127
  disabled: true
127
128
  }) : state !== null && state !== void 0 && state.selected ? /*#__PURE__*/_react.default.createElement(_RiRadioButtonFill.default, null) : /*#__PURE__*/_react.default.createElement(_MdRadioButtonUnchecked.default, {
128
129
  disabled: true
@@ -155,7 +156,7 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
155
156
  onClick: function onClick(e) {
156
157
  return handlePosition(e, 'right');
157
158
  }
158
- }))), (option === null || option === void 0 ? void 0 : option.with_half_option) && (state === null || state === void 0 ? void 0 : state.selected) && isAlsea && /*#__PURE__*/_react.default.createElement(_styles.ExtraControl, null, state.quantity >= 2 ? /*#__PURE__*/_react.default.createElement(_styles.ExtraItem, {
159
+ }))), ((option === null || option === void 0 ? void 0 : option.with_half_option) || quesoYSalsa) && (state === null || state === void 0 ? void 0 : state.selected) && isAlsea && /*#__PURE__*/_react.default.createElement(_styles.ExtraControl, null, state.quantity >= 2 ? /*#__PURE__*/_react.default.createElement(_styles.ExtraItem, {
159
160
  onClick: function onClick(e) {
160
161
  return handleChangeQuantity(e, 1);
161
162
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "14.0.19",
3
+ "version": "14.0.21",
4
4
  "description": "Ordering UI Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
@@ -88,7 +88,7 @@
88
88
  "lodash": "^4.17.19",
89
89
  "moment": "^2.29.4",
90
90
  "nanoid": "^4.0.0",
91
- "ordering-components-external": "13.0.14",
91
+ "ordering-components-external": "13.0.15",
92
92
  "payment": "^2.4.6",
93
93
  "polished": "^3.6.6",
94
94
  "react-bootstrap-icons": "^1.7.2",
package/src/themes/five/src/components/Checkout/index.js CHANGED
@@ -46,7 +46,8 @@ import {
46
46
  HeaderContent,
47
47
  AuthButtonList,
48
48
  Flag,
49
- SectionTitleContainer
49
+ SectionTitleContainer,
50
+ SpinnerContainer
50
51
  } from './styles'
51
52
 
52
53
  import { Button } from '../../styles/Buttons'
@@ -68,6 +69,7 @@ import { OrderContextUI } from '../OrderContextUI'
68
69
  import { SignUpForm } from '../SignUpForm'
69
70
  import { LoginForm } from '../LoginForm'
70
71
  import { OrderDetail } from './OrderDetail'
72
+ import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
71
73
 
72
74
  const mapConfigs = {
73
75
  mapZoom: 16,
@@ -639,6 +641,11 @@ const CheckoutUI = (props) => {
639
641
  productLoading={productLoading}
640
642
  setProductLoading={setProductLoading}
641
643
  />
644
+ {isLoadingCheckprice && (
645
+ <SpinnerContainer>
646
+ <SpinnerLoader />
647
+ </SpinnerContainer>
648
+ )}
642
649
  </CartContainer>
643
650
  )}
644
651
  {
package/src/themes/five/src/components/Checkout/styles.js CHANGED
@@ -95,6 +95,7 @@ export const DriverTipContainer = styled(PaymentMethodContainer)`
95
95
 
96
96
  export const CartContainer = styled(PaymentMethodContainer)`
97
97
  margin-bottom: 20px;
98
+ position: relative;
98
99
  `
99
100
 
100
101
  export const WalletPaymentOptionContainer = styled(PaymentMethodContainer)`
@@ -378,3 +379,10 @@ export const OrderDetailContainer = styled.div`
378
379
  flex-direction: column;
379
380
  padding: 10px 30px 20px;
380
381
  `
382
+
383
+ export const SpinnerContainer = styled.div`
384
+ position: absolute;
385
+ width: 100%;
386
+ left: 0;
387
+ top: -100%;
388
+ `
package/src/themes/five/src/components/FavoriteList/index.js CHANGED
@@ -18,7 +18,12 @@ import {
18
18
  ErrorMessage,
19
19
  FavoriteListWrapper,
20
20
  ReadMoreCard,
21
- FavoriteListing
21
+ FavoriteListing,
22
+ FavPopupView,
23
+ SingleBusinessOffer,
24
+ BusinessInfo,
25
+ BusinessLogo,
26
+ Image
22
27
  } from './styles'
23
28
 
24
29
  const FavoriteListUI = (props) => {
@@ -47,6 +52,8 @@ const FavoriteListUI = (props) => {
47
52
 
48
53
  const [isPreorder, setIsPreorder] = useState(false)
49
54
  const [preorderBusiness, setPreorderBusiness] = useState(null)
55
+ const [openModal, setOpenModal] = useState(false)
56
+ const [favProduct, setFavProduct] = useState(null)
50
57
 
51
58
  const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
52
59
 
@@ -75,10 +82,10 @@ const FavoriteListUI = (props) => {
75
82
  events.emit('go_to_page', data)
76
83
  }
77
84
 
78
- const onProductClick = (product) => {
79
- const slug = product?.category?.business?.slug
80
- const categoryId = product?.category?.id
81
- const productId = product?.id
85
+ const handleOpenProduct = (business) => {
86
+ const slug = business.slug
87
+ const categoryId = favProduct?.category?.id
88
+ const productId = favProduct?.id
82
89
 
83
90
  if (!categoryId && !productId) {
84
91
  if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
@@ -135,6 +142,11 @@ const FavoriteListUI = (props) => {
135
142
  }
136
143
  }
137
144
 
145
+ const onProductClick = (product) => {
146
+ setOpenModal(true)
147
+ setFavProduct(product)
148
+ }
149
+
138
150
  const closeOrderModal = (e) => {
139
151
  const outsideModal = !window.document.getElementById('app-modals') ||
140
152
  !window.document.getElementById('app-modals').contains(e.target)
@@ -344,6 +356,46 @@ const FavoriteListUI = (props) => {
344
356
  showButton
345
357
  />
346
358
  </Modal>
359
+ <Modal
360
+ open={openModal}
361
+ onClose={() => setOpenModal(false)}
362
+ >
363
+ <FavPopupView>
364
+ {(favProduct?.images) && (
365
+ <Image>
366
+ <img src={favProduct.images} alt={`product-${i}`} width='150px' height='150px' loading='lazy' />
367
+ </Image>
368
+ )}
369
+ <h2>
370
+ {favProduct?.name}
371
+ </h2>
372
+ <h2>
373
+ {favProduct?.businesses && favProduct?.businesses?.length > 1
374
+ ? t('AVAILABLE_BUSINESSES_FOR_PRODUCT', 'Available businesses for this product')
375
+ : favProduct?.businesses && favProduct?.businesses?.length == 1
376
+ ? t('AVAILABLE_BUSINESSE_FOR_PRODUCT', 'Available business for this product')
377
+ : t('NOT_AVAILABLE_BUSINESSE', 'Business is not available for this product')}
378
+ </h2>
379
+ <div>
380
+ {favProduct?.businesses?.map(business => {
381
+ return (
382
+ <SingleBusinessOffer key={business.id}>
383
+ <BusinessLogo bgimage={business?.logo} />
384
+ <BusinessInfo>
385
+ <p>{business.name}</p>
386
+ <Button
387
+ onClick={() => handleOpenProduct(business)}
388
+ color='primary'
389
+ >
390
+ {t('GO_TO_BUSINESSS', 'Go to business')}
391
+ </Button>
392
+ </BusinessInfo>
393
+ </SingleBusinessOffer>
394
+ )
395
+ })}
396
+ </div>
397
+ </FavPopupView>
398
+ </Modal>
347
399
  {props.afterComponents?.map((AfterComponent, i) => (
348
400
  <AfterComponent key={i} {...props} />))}
349
401
  {props.afterElements?.map((AfterElement, i) => (
package/src/themes/five/src/components/FavoriteList/styles.js CHANGED
@@ -73,3 +73,98 @@ export const ReadMoreCard = styled.div`
73
73
  height: 44px;
74
74
  }
75
75
  `
76
+
77
+ export const FavPopupView = styled.div`
78
+ margin-top: 20px;
79
+ text-align: center;
80
+ h2 {
81
+ font-size: 16px;
82
+ }
83
+ @media(min-width: 720px){
84
+ h2 {
85
+ font-size: 20px;
86
+ }
87
+ }
88
+ `
89
+
90
+ export const SingleBusinessOffer = styled.div`
91
+ display: flex;
92
+ button{
93
+ font-size: 12px;
94
+ }
95
+ @media (min-width: 720px){
96
+ button{
97
+ font-size: 16px;
98
+ }
99
+ }
100
+ `
101
+
102
+ export const BusinessInfo = styled.div`
103
+ display: flex;
104
+ width: 100%;
105
+ justify-content: space-between;
106
+ align-items: center;
107
+ margin-left: 10px;
108
+ button{
109
+ height: 44px;
110
+ }
111
+ p{
112
+ font-size: 12px;
113
+ width: 50%;
114
+ text-align: left;
115
+ }
116
+ @media(min-width: 720px){
117
+ p{
118
+ font-size: 16px;
119
+ width: 70%;
120
+ }
121
+ }
122
+ `
123
+
124
+ export const Image = styled.div`
125
+ width: 100%;
126
+ img{
127
+ width: 100%;
128
+ height: auto;
129
+ border-radius: 16px;
130
+ aspect-ratio: attr(width) / attr(height)
131
+ }
132
+ `
133
+
134
+ const BusinessLogoStyled = styled.div`
135
+ width: 65px;
136
+ height: 65px;
137
+ box-sizing: border-box;
138
+ position: relative;
139
+ background-repeat: no-repeat, repeat;
140
+ background-size: cover;
141
+ object-fit: cover;
142
+ background-position: center;
143
+ min-height: 65px;
144
+ border-radius: 7.6px;
145
+
146
+ @media (min-width: 481px){
147
+ min-width: 75px;
148
+ min-height: 75px;
149
+ height: 75px;
150
+ width: 75px;
151
+ min-height: 75px;
152
+ ${({ isCustomerMode }) => isCustomerMode && css`
153
+ width: 100%;
154
+ height: 100%;
155
+ `}
156
+ }
157
+ `
158
+
159
+ export const BusinessLogo = (props) => {
160
+ const style = {}
161
+ if (props.bgimage) {
162
+ style.backgroundImage = `url(${props.bgimage})`
163
+ }
164
+
165
+ return (
166
+ <BusinessLogoStyled {...props} style={style}>
167
+ {props.children}
168
+ </BusinessLogoStyled>
169
+ )
170
+ }
package/src/themes/five/src/components/ProductOptionSubOption/index.js CHANGED
@@ -60,6 +60,7 @@ const ProductOptionSubOptionUI = React.memo((props) => {
60
60
  ? (balance === option?.max || state.quantity === suboption.max)
61
61
  : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
62
62
 
63
+ const quesoYSalsa = option?.name?.toLowerCase?.() === 'queso y salsa'
63
64
  const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
64
65
  const [, t] = useLanguage()
65
66
  const [{ parsePrice }] = useUtils()
@@ -187,7 +188,7 @@ const ProductOptionSubOptionUI = React.memo((props) => {
187
188
  )
188
189
  }
189
190
  </PositionControl>
190
- {option?.with_half_option && state?.selected && isAlsea && (
191
+ {(option?.with_half_option || quesoYSalsa) && state?.selected && isAlsea && (
191
192
  <ExtraControl>
192
193
  {(state.quantity >= 2) ? (
193
194
  <ExtraItem