ordering-ui-external 10.6.2 → 10.7.0

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

@@ -416,7 +416,8 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
       }).map(function (product) {
         return /*#__PURE__*/_react.default.createElement(_ProductItemAccordion.ProductItemAccordion, {
           key: product.id,
-          product: product
+          product: product,
+          showArrowIcon: true
         });
       }));
     }), order === null || order === void 0 ? void 0 : order.products.filter(function (product) {
@@ -424,7 +425,8 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     }).map(function (product) {
       return /*#__PURE__*/_react.default.createElement(_ProductItemAccordion.ProductItemAccordion, {
         key: product.id,
-        product: product
+        product: product,
+        showArrowIcon: true
       });
     }));
   };

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

@@ -151,15 +151,18 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
   var closeOrderModal = function closeOrderModal(e) {
     var outsideModal = !window.document.getElementById('app-modals') || !window.document.getElementById('app-modals').contains(e.target);
     if (outsideModal) {
-      var _reorderState$result, _reorderState$result2;
-      var _businessId = 'businessId:' + (reorderState === null || reorderState === void 0 || (_reorderState$result = reorderState.result) === null || _reorderState$result === void 0 ? void 0 : _reorderState$result.business_id);
-      sessionStorage.setItem('adjust-cart-products', _businessId);
-      onRedirectPage && onRedirectPage({
-        page: 'business',
-        params: {
-          store: reorderState === null || reorderState === void 0 || (_reorderState$result2 = reorderState.result) === null || _reorderState$result2 === void 0 || (_reorderState$result2 = _reorderState$result2.business) === null || _reorderState$result2 === void 0 ? void 0 : _reorderState$result2.slug
-        }
-      });
+      var _reorderState$result;
+      if (reorderState !== null && reorderState !== void 0 && (_reorderState$result = reorderState.result) !== null && _reorderState$result !== void 0 && (_reorderState$result = _reorderState$result.business) !== null && _reorderState$result !== void 0 && _reorderState$result.slug) {
+        var _reorderState$result2, _reorderState$result3;
+        var _businessId = 'businessId:' + (reorderState === null || reorderState === void 0 || (_reorderState$result2 = reorderState.result) === null || _reorderState$result2 === void 0 ? void 0 : _reorderState$result2.business_id);
+        sessionStorage.setItem('adjust-cart-products', _businessId);
+        onRedirectPage && onRedirectPage({
+          page: 'business',
+          params: {
+            store: reorderState === null || reorderState === void 0 || (_reorderState$result3 = reorderState.result) === null || _reorderState$result3 === void 0 || (_reorderState$result3 = _reorderState$result3.business) === null || _reorderState$result3 === void 0 ? void 0 : _reorderState$result3.slug
+          }
+        });
+      }
     }
   };
   var handleChangePage = function handleChangePage(page) {
@@ -190,25 +193,25 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
     }
   }, [orders, activeOrders, pastOrders, preOrders]);
   (0, _react.useEffect)(function () {
-    var _reorderState$result3;
+    var _reorderState$result4;
     if (reorderState !== null && reorderState !== void 0 && reorderState.error) {
       window.addEventListener('click', closeOrderModal);
       return function () {
         window.removeEventListener('click', closeOrderModal);
       };
     }
-    if (!(reorderState !== null && reorderState !== void 0 && reorderState.error) && reorderState.loading === false && reorderState !== null && reorderState !== void 0 && (_reorderState$result3 = reorderState.result) !== null && _reorderState$result3 !== void 0 && _reorderState$result3.business_id) {
-      var _reorderState$result4, _carts$_businessId, _orders$find, _reorderState$result6;
-      var _businessId = 'businessId:' + (reorderState === null || reorderState === void 0 || (_reorderState$result4 = reorderState.result) === null || _reorderState$result4 === void 0 ? void 0 : _reorderState$result4.business_id);
+    if (!(reorderState !== null && reorderState !== void 0 && reorderState.error) && reorderState.loading === false && reorderState !== null && reorderState !== void 0 && (_reorderState$result4 = reorderState.result) !== null && _reorderState$result4 !== void 0 && _reorderState$result4.business_id) {
+      var _reorderState$result5, _carts$_businessId, _orders$find, _reorderState$result7;
+      var _businessId = 'businessId:' + (reorderState === null || reorderState === void 0 || (_reorderState$result5 = reorderState.result) === null || _reorderState$result5 === void 0 ? void 0 : _reorderState$result5.business_id);
       var cartProducts = carts === null || carts === void 0 || (_carts$_businessId = carts[_businessId]) === null || _carts$_businessId === void 0 ? void 0 : _carts$_businessId.products;
       var available = cartProducts.every(function (product) {
         return product.valid === true;
       });
       var orderProducts = (_orders$find = orders.find(function (order) {
-        var _reorderState$result5;
-        return (order === null || order === void 0 ? void 0 : order.id) === (reorderState === null || reorderState === void 0 || (_reorderState$result5 = reorderState.result) === null || _reorderState$result5 === void 0 ? void 0 : _reorderState$result5.orderId);
+        var _reorderState$result6;
+        return (order === null || order === void 0 ? void 0 : order.id) === (reorderState === null || reorderState === void 0 || (_reorderState$result6 = reorderState.result) === null || _reorderState$result6 === void 0 ? void 0 : _reorderState$result6.orderId);
       })) === null || _orders$find === void 0 ? void 0 : _orders$find.products;
-      if (available && reorderState !== null && reorderState !== void 0 && (_reorderState$result6 = reorderState.result) !== null && _reorderState$result6 !== void 0 && _reorderState$result6.uuid && (cartProducts === null || cartProducts === void 0 ? void 0 : cartProducts.length) === (orderProducts === null || orderProducts === void 0 ? void 0 : orderProducts.length)) {
+      if (available && reorderState !== null && reorderState !== void 0 && (_reorderState$result7 = reorderState.result) !== null && _reorderState$result7 !== void 0 && _reorderState$result7.uuid && (cartProducts === null || cartProducts === void 0 ? void 0 : cartProducts.length) === (orderProducts === null || orderProducts === void 0 ? void 0 : orderProducts.length)) {
         onRedirectPage && onRedirectPage({
           page: 'checkout',
           params: {
@@ -216,13 +219,13 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
           }
         });
       } else {
-        var _reorderState$result7;
+        var _reorderState$result8;
         sessionStorage.setItem('adjust-cart-products', _businessId);
         (cartProducts === null || cartProducts === void 0 ? void 0 : cartProducts.length) !== (orderProducts === null || orderProducts === void 0 ? void 0 : orderProducts.length) && sessionStorage.setItem('already-removed', 'removed');
         onRedirectPage && onRedirectPage({
           page: 'business',
           params: {
-            store: reorderState === null || reorderState === void 0 || (_reorderState$result7 = reorderState.result) === null || _reorderState$result7 === void 0 || (_reorderState$result7 = _reorderState$result7.business) === null || _reorderState$result7 === void 0 ? void 0 : _reorderState$result7.slug
+            store: reorderState === null || reorderState === void 0 || (_reorderState$result8 = reorderState.result) === null || _reorderState$result8 === void 0 || (_reorderState$result8 = _reorderState$result8.business) === null || _reorderState$result8 === void 0 ? void 0 : _reorderState$result8.slug
           }
         });
       }

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

@@ -32,7 +32,9 @@ _swiper.default.use([_swiper.Navigation]);
 var PageBannerUI = function PageBannerUI(props) {
   var _pageBannerState$bann, _pageBannerState$bann2, _pageBannerState$bann3, _pageBannerState$bann4;
   var pageBannerState = props.pageBannerState,
-    isCustomerMode = props.isCustomerMode;
+    isCustomerMode = props.isCustomerMode,
+    handleCustomProductBannerClick = props.handleCustomProductBannerClick,
+    business = props.business;
   var _useSite = (0, _orderingComponentsExternal.useSite)(),
     _useSite2 = _slicedToArray(_useSite, 1),
     site = _useSite2[0].site;
@@ -143,17 +145,27 @@ var PageBannerUI = function PageBannerUI(props) {
       });
     }
     if (action.type === 'product') {
-      var _action$url$split$;
+      var _action$url$split$, _business$categories, _foundCategory$produc;
       slug = (_action$url$split$ = action.url.split('store/')[1]) === null || _action$url$split$ === void 0 ? void 0 : _action$url$split$.split('?')[0];
       var paramString = action.url.split('?')[1];
       var urlParams = new URLSearchParams(paramString);
-      var product = urlParams.get('product');
-      var category = urlParams.get('category');
-      onProductRedirect({
-        slug: slug,
-        category: category,
-        product: product
+      var productId = urlParams.get('product');
+      var categoryId = urlParams.get('category');
+      var foundCategory = business === null || business === void 0 || (_business$categories = business.categories) === null || _business$categories === void 0 ? void 0 : _business$categories.find(function (category) {
+        return category.id === Number(categoryId);
+      });
+      var foundProduct = foundCategory === null || foundCategory === void 0 || (_foundCategory$produc = foundCategory.products) === null || _foundCategory$produc === void 0 ? void 0 : _foundCategory$produc.find(function (product) {
+        return product.id === Number(productId);
       });
+      if ((business === null || business === void 0 ? void 0 : business.slug) === slug && foundProduct) {
+        handleCustomProductBannerClick(foundProduct);
+      } else {
+        onProductRedirect({
+          slug: slug,
+          category: categoryId,
+          product: productId
+        });
+      }
     }
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageBannerState.loading ? /*#__PURE__*/_react.default.createElement(_styles.BannerContainer, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -162,7 +174,9 @@ var PageBannerUI = function PageBannerUI(props) {
     navigation: ((_pageBannerState$bann2 = pageBannerState.banner) === null || _pageBannerState$bann2 === void 0 || (_pageBannerState$bann2 = _pageBannerState$bann2.items) === null || _pageBannerState$bann2 === void 0 ? void 0 : _pageBannerState$bann2.length) > 1,
     spaceBetween: 0,
     shortSwipes: false,
-    loop: ((_pageBannerState$bann3 = pageBannerState.banner) === null || _pageBannerState$bann3 === void 0 ? void 0 : _pageBannerState$bann3.items.length) > 1
+    loop: ((_pageBannerState$bann3 = pageBannerState.banner) === null || _pageBannerState$bann3 === void 0 ? void 0 : _pageBannerState$bann3.items.length) > 1,
+    touchStartPreventDefault: false,
+    slidesPerView: 1
   }, (_pageBannerState$bann4 = pageBannerState.banner) === null || _pageBannerState$bann4 === void 0 ? void 0 : _pageBannerState$bann4.items.map(function (img, i) {
     return /*#__PURE__*/_react.default.createElement(_react2.SwiperSlide, {
       key: i,

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

@@ -13,8 +13,8 @@ var _Modal = require("../Modal");
 var _SignUpForm = require("../SignUpForm");
 var _Buttons = require("../../styles/Buttons");
 var _Confirm = require("../Confirm");
-var _UserDetails = require("../UserDetails");
 var _AddressList = require("../AddressList");
+var _UserDetails = require("../UserDetails");
 var _styles = require("./styles");
 var _MdcCellphoneAndroid = _interopRequireDefault(require("@meronex/icons/mdc/MdcCellphoneAndroid"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -32,7 +32,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ProductItemAccordion = function ProductItemAccordion(props) {
-  var _theme$viewString, _props$beforeElements, _props$beforeComponen, _product$valid, _theme$images, _theme$images2, _product$calendar_eve, _configs$format_time, _product$calendar_eve2, _configs$format_time2, _props$afterComponent, _props$afterElements;
+  var _theme$viewString, _productInfo, _productInfo2, _props$beforeElements, _props$beforeComponen, _product$valid, _theme$images, _theme$images2, _product$calendar_eve, _configs$format_time, _product$calendar_eve2, _configs$format_time2, _props$afterComponent, _props$afterElements;
   var isDisabledEdit = props.isDisabledEdit,
     isCartPending = props.isCartPending,
     isCartProduct = props.isCartProduct,
@@ -96,6 +96,7 @@ var ProductItemAccordion = function ProductItemAccordion(props) {
     }
     return product;
   };
+  var showArrowIcon = props.showArrowIcon && (((_productInfo = productInfo()) === null || _productInfo === void 0 || (_productInfo = _productInfo.ingredients) === null || _productInfo === void 0 ? void 0 : _productInfo.length) > 0 || ((_productInfo2 = productInfo()) === null || _productInfo2 === void 0 || (_productInfo2 = _productInfo2.options) === null || _productInfo2 === void 0 ? void 0 : _productInfo2.length) > 0 || (product === null || product === void 0 ? void 0 : product.comment));
   var toggleAccordion = function toggleAccordion(e) {
     var _productSelect$curren, _productActionsEdit$c, _productActionsDelete;
     var isActionsClick = ((_productSelect$curren = productSelect.current) === null || _productSelect$curren === void 0 ? void 0 : _productSelect$curren.contains(e.target)) || ((_productActionsEdit$c = productActionsEdit.current) === null || _productActionsEdit$c === void 0 ? void 0 : _productActionsEdit$c.contains(e.target)) || ((_productActionsDelete = productActionsDelete.current) === null || _productActionsDelete === void 0 ? void 0 : _productActionsDelete.contains(e.target));
@@ -175,7 +176,9 @@ var ProductItemAccordion = function ProductItemAccordion(props) {
     onClick: function onClick() {
       return onDeleteProduct(product);
     }
-  }))))))), product.valid && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((product === null || product === void 0 ? void 0 : product.valid) || !isCartProduct) && windowSize.width > 410 && /*#__PURE__*/_react.default.createElement(_styles.ProductPriceSection, null, /*#__PURE__*/_react.default.createElement(_styles.ProductPrice, {
+  }))))))), showArrowIcon && /*#__PURE__*/_react.default.createElement(_IosArrowDown.default, {
+    className: "".concat(setRotate)
+  }), product.valid && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((product === null || product === void 0 ? void 0 : product.valid) || !isCartProduct) && windowSize.width > 410 && /*#__PURE__*/_react.default.createElement(_styles.ProductPriceSection, null, /*#__PURE__*/_react.default.createElement(_styles.ProductPrice, {
     className: "prod-price"
   }, /*#__PURE__*/_react.default.createElement("span", null, parsePrice(product.total || product.price)), (productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_IosArrowDown.default, {
     className: "".concat(setRotate)

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

@@ -87,7 +87,8 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
     handleChangePriceFilterValues = props.handleChangePriceFilterValues,
     priceFilterValues = props.priceFilterValues,
     handleUpdateProfessionals = props.handleUpdateProfessionals,
-    isCustomerMode = props.isCustomerMode;
+    isCustomerMode = props.isCustomerMode,
+    handleCustomProductBannerClick = props.handleCustomProductBannerClick;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -172,7 +173,9 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
   })), (businessState === null || businessState === void 0 || (_businessState$busine3 = businessState.business) === null || _businessState$busine3 === void 0 ? void 0 : _businessState$busine3.id) && /*#__PURE__*/_react.default.createElement(_styles.PageBannerWrapper, null, /*#__PURE__*/_react.default.createElement(_PageBanner.PageBanner, {
     position: "web_business_page",
     businessId: businessState === null || businessState === void 0 || (_businessState$busine4 = businessState.business) === null || _businessState$busine4 === void 0 ? void 0 : _businessState$busine4.id,
-    isCustomerMode: isCustomerMode
+    isCustomerMode: isCustomerMode,
+    handleCustomProductBannerClick: handleCustomProductBannerClick,
+    business: businessState === null || businessState === void 0 ? void 0 : businessState.business
   })), !errorQuantityProducts && SearchProductsComponent && !useKioskApp && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(SearchProductsComponent, {
     handleChangeSearch: handleChangeSearch,
     searchValue: searchValue,

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

@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 exports.Container = Container;
-var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 5px;\n\n  h1 {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", ";\n    margin: 0px 10px 0px 0px;\n    ", "\n  }\n\n  svg {\n    font-size: 24px;\n  }\n\n  svg.cancel {\n    color: #D81212;\n    cursor: pointer;\n  }\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n    user-select: none;\n    &:hover {\n        text-decoration: underline;\n      }\n  }\n"])), function (props) {
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 5px;\n\n  h1 {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", "; \n    margin: 0px 10px 0px 0px;\n    ", "\n  }\n\n  svg {\n    font-size: 24px;\n  }\n\n  svg.cancel {\n    color: #D81212;\n    cursor: pointer;\n  }\n\n  span {\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n    user-select: none;\n    &:hover {\n        text-decoration: underline;\n      }\n  }\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 }, function (props) {
   var _props$theme;
@@ -37,7 +37,7 @@ var ModalIcon = _styledComponents.default.span(_templateObject8 || (_templateObj
 exports.ModalIcon = ModalIcon;
 var TitleContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 0;\n  h1 {\n    margin: auto;\n    font-size: 24px;\n  }\n  ", "\n"])), function (_ref) {
   var isAddressFormOpen = _ref.isAddressFormOpen;
-  return isAddressFormOpen && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      h1{\n        width: 75%;\n      }\n  "])));
+  return isAddressFormOpen && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      h1{ \n        width: 75%;\n      }\n  "])));
 });
 exports.TitleContainer = TitleContainer;
 var CountryFlag = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n  .PhoneInputCountryIcon {\n    width: 25px;\n  }\n  .PhoneInputInput {\n    display: none;\n  }\n  .PhoneInputCountrySelect {\n    display: none;\n  }\n"])));

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

@@ -12,7 +12,6 @@ var _Confirm = require("../../../src/components/Confirm");
 var _Modal = require("../Modal");
 var _Buttons = require("../../styles/Buttons");
 var _styles = require("./styles");
-var _useWindowSize = require("../../../../../hooks/useWindowSize");
 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); }
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -27,6 +26,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var SocketStatusUI = function SocketStatusUI(props) {
+  var _configs$white_label_;
   var socketStatus = props.socketStatus,
     reconnectAttemptCount = props.reconnectAttemptCount,
     connectedDate = props.connectedDate;
@@ -47,7 +47,10 @@ var SocketStatusUI = function SocketStatusUI(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     openModal = _useState4[0],
     setOpenModal = _useState4[1];
-  var windowSize = (0, _useWindowSize.useWindowSize)();
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var isEnabledBtn = configs === null || configs === void 0 || (_configs$white_label_ = configs.white_label_module) === null || _configs$white_label_ === void 0 ? void 0 : _configs$white_label_.value;
   var closeAlert = function closeAlert() {
     setAlertState({
       open: false,
@@ -65,7 +68,7 @@ var SocketStatusUI = function SocketStatusUI(props) {
   }, [reconnectAttemptCount]);
   return /*#__PURE__*/_react.default.createElement(_styles.Contatiner, null, /*#__PURE__*/_react.default.createElement(_styles.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.IconButton, {
     color: "primary"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null)), /*#__PURE__*/_react.default.createElement(_styles.InfoContent, null, t('WEBSOCKET_STATUS_APP_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh your app and update the status as well. Need help? Contact our Customer support team here:'), /*#__PURE__*/_react.default.createElement("a", {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null)), /*#__PURE__*/_react.default.createElement(_styles.InfoContent, null, t('WEBSOCKET_STATUS_APP_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh your app and update the status as well. Need help? Contact our Customer support team here:'), !isEnabledBtn && /*#__PURE__*/_react.default.createElement("a", {
     href: "https://www.ordering.co/contact-ordering",
     target: "_blank",
     rel: "noopener noreferrer"

package/package.json

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

package/src/themes/callcenterOriginal/src/components/AddressForm/index.js

@@ -20,7 +20,6 @@ import {
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'
-
 import {
   FormControl,
   FormActions,
@@ -34,13 +33,6 @@ import {
 import { Button } from '../../styles/Buttons'
 import { Input, TextArea } from '../../styles/Inputs'
 
-const inputNames = [
-  { name: 'address', code: 'Address' },
-  { name: 'internal_number', code: 'Internal number' },
-  { name: 'zipcode', code: 'Zipcode' },
-  { name: 'address_notes', code: 'Address notes' }
-]
-
 const AddressFormUI = (props) => {
   const {
     addressesList,
@@ -54,7 +46,10 @@ const AddressFormUI = (props) => {
     handleChangeInput,
     saveAddress,
     setIsEdit,
-    userCustomerSetup
+    userCustomerSetup,
+    businessesList,
+    getBusinessDeliveryZones,
+    isEnableContinueButton
   } = props
 
   const [configState] = useConfig()
@@ -79,13 +74,20 @@ const AddressFormUI = (props) => {
   const maxLimitLocation = configState?.configs?.meters_to_change_address?.value
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
   const isLocationRequired = configState.configs?.google_autocomplete_selection_required?.value === '1' ||
-                              configState.configs?.google_autocomplete_selection_required?.value === 'true'
+    configState.configs?.google_autocomplete_selection_required?.value === 'true'
 
   const mapErrors = {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
 
+  const inputNames = [
+    { name: 'address', code: 'Address' },
+    { name: 'internal_number', code: 'Internal number' },
+    { name: 'zipcode', code: 'Zipcode' },
+    { name: 'address_notes', code: 'Address notes' }
+  ]
+
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -231,6 +233,9 @@ const AddressFormUI = (props) => {
   }
 
   const handleChangeAddress = (address) => {
+    if (address?.address) {
+      getBusinessDeliveryZones(address?.location)
+    }
     setState({
       ...state,
       selectedFromAutocomplete: true
@@ -255,8 +260,8 @@ const AddressFormUI = (props) => {
         formMethods.setValue(
           field.name,
           formState?.changes[field.name] ||
-            (orderState?.options?.address && orderState?.options?.address[field.name]) ||
-            ''
+          (orderState?.options?.address && orderState?.options?.address[field.name]) ||
+          ''
         )
       )
       return
@@ -407,15 +412,19 @@ const AddressFormUI = (props) => {
                 </AddressWrap>
 
                 {locationChange && (addressState?.address?.location || formState?.changes?.location) && (
-                  <WrapperMap>
+                  <WrapperMap isEnableContinueButton={isEnableContinueButton}>
                     <GoogleMapsMap
+                      useLocationPin
+                      deactiveAlerts
                       apiKey={googleMapsApiKey}
                       location={locationChange}
+                      locations={businessesList?.businesses}
                       fixedLocation={!isEditing ? firstLocationNoEdit.value : null}
                       mapControls={googleMapsControls}
                       handleChangeAddressMap={handleChangeAddress}
                       setErrors={setMapErrors}
                       maxLimitLocation={maxLimitLocation}
+                      businessZones={businessesList?.businesses?.map(business => business?.zones)}
                     />
                   </WrapperMap>
                 )}

package/src/themes/callcenterOriginal/src/components/AddressForm/styles.js

@@ -101,19 +101,24 @@ export const FormControl = styled.form`
 `
 
 export const AddressWrap = styled.div`
-  width: 100%;
+  width: 50%;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
-
+  position: absolute;
+  bottom: 75%;
+  right: 0px;
+  padding-right: 20px;
   button {
     height: 41px;
-    right: 1px;
+    right: 25px;
     border: none;
+    width: 25px;
+    position: absolute;
+    z-index: 1000;
 
     ${props => props.theme?.rtl && css`
-      left: 1px;
+      left: 25px;
       right: initial;
     `}
 
@@ -191,8 +196,16 @@ export const AddressTagSection = styled.div`
 `
 
 export const WrapperMap = styled.div`
-  width: 100%;
-  height: 250px;
+  width: 50%;
+  position: absolute;
+  bottom: 2%;
+  right: 0;
+  padding-right: 20px;
+  ${({ isEnableContinueButton }) => isEnableContinueButton ? css`
+    height: 460px;
+  ` : css`
+    height: 480px;
+  `}
   > div {
     position: relative !important;
     width: 100% !important;

package/src/themes/callcenterOriginal/src/components/AddressList/index.js

@@ -183,6 +183,12 @@ const AddressListUI = (props) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (isOpenUserData) {
+      handleCloseAddressForm()
+    }
+  }, [isOpenUserData])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -193,9 +199,9 @@ const AddressListUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading}>
         <AddressHalfContainer>
-        <List halfWidth={addressOpen} isOpenUserData={isOpenUserData} isHeader={isHeader}>
+          <List halfWidth={addressOpen} isOpenUserData={isOpenUserData} isHeader={isHeader} isEnableContinueButton={isEnableContinueButton}>
             {
-              (!isPopover || !addressOpen) && (
+              (!isPopover || !addressOpen) && !isOpenUserData && (
                 <Button
                   className='add'
                   outline
@@ -228,6 +234,7 @@ const AddressListUI = (props) => {
               !addressList.error &&
               addressList?.addresses?.length > 0 &&
               typeof orderState.options?.address === 'object' &&
+              !addressOpen &&
               ((!addressOpen && isPopover) || isModal) && (
                 <AddressListUl id='list'>
                   <AddressTitle>{t('SELECT_ONE_OF_SAVED_PLACES', 'Select one of your saved places')}</AddressTitle>
@@ -249,7 +256,7 @@ const AddressListUI = (props) => {
                         </div>
                       </div>
                       <AddressItemActions className='form'>
-                        <a className={actionStatus.loading ? 'disabled' : ''} onClick={() => openAddress(address)}>
+                        <a className={actionStatus.loading || isOpenUserData ? 'disabled' : ''} onClick={() => openAddress(address)}>
                           <Pencil />
                         </a>
                         <a className={actionStatus.loading || address.default ? 'disabled' : ''} onClick={() => handleDeleteClick(address)}>
@@ -292,24 +299,29 @@ const AddressListUI = (props) => {
                 content={t('NETWORK_ERROR', 'Network error, please reload the page')}
               />
             )}
+            {!isPopover && addressOpen && (
+              <AddressFormContainer>
+                <AddressForm
+                  userId={userId}
+                  addressesList={addressList?.addresses}
+                  useValidationFileds
+                  address={curAddress}
+                  onCancel={() => handleCloseAddressForm()}
+                  onSaveAddress={handleSaveAddress}
+                  userCustomerSetup={userCustomerSetup}
+                  isEnableContinueButton={isEnableContinueButton}
+                />
+              </AddressFormContainer>
+            )}
           </List>
-          {!isPopover && addressOpen && (
-            <AddressFormContainer>
+          {addressOpen && (
+            <AddressFormContainer width='50%' isEnableContinueButton={isEnableContinueButton}>
               <TitleFormContainer>
                 <CloseIcon>
                   <MdClose onClick={() => handleCloseAddressForm()} />
                 </CloseIcon>
                 <h1>{t('ADD_NEW_ADDRESS', 'Add new address')}</h1>
               </TitleFormContainer>
-              <AddressForm
-                userId={userId}
-                addressesList={addressList?.addresses}
-                useValidationFileds
-                address={curAddress}
-                onCancel={() => handleCloseAddressForm()}
-                onSaveAddress={handleSaveAddress}
-                userCustomerSetup={userCustomerSetup}
-              />
             </AddressFormContainer>
           )}
         </AddressHalfContainer>

package/src/themes/callcenterOriginal/src/components/AddressList/styles.js

@@ -196,20 +196,27 @@ export const AddressHalfContainer = styled.div`
 export const List = styled.div`
   width: ${({ halfWidth }) => halfWidth ? '50%' : '100%'};
   padding-right: 10px;
-  position: sticky;
-  right: 0;
-  top: 0;
-  margin-top: 222px;
+  ${({ isEnableContinueButton, isOpenUserData }) => isEnableContinueButton || isOpenUserData ? css`
+    margin-top: 0px;
+  ` : css`
+    margin-top: 222px;
+  `} 
   button {
     width: 100%;
   }
 `
 
 export const AddressFormContainer = styled.div`
-  width: 50%;
   z-index: 10;
   height: 100%;
   padding-left: 10px;
+  ${({ width }) => css`
+    width: ${width};
+  `}
+  ${({ isEnableContinueButton }) => isEnableContinueButton && css`
+    position: relative;
+    bottom: 190px;
+  `}
 `
 
 export const CloseIcon = styled.div`
@@ -223,6 +230,7 @@ export const CloseIcon = styled.div`
 export const TitleFormContainer = styled.div`
   display: flex; 
   align-items: center;
+  margin-top: 7px;
   h1 {
     margin: auto;
     font-size: 24px;