ordering-ui-external 13.0.5 → 14.0.0

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

@@ -57,7 +57,9 @@ var AddressListUI = function AddressListUI(props) {
     setIsAddressFormOpen = props.setIsAddressFormOpen,
     isHeader = props.isHeader,
     notUseCustomerInfo = props.notUseCustomerInfo,
-    franchiseId = props.franchiseId;
+    franchiseId = props.franchiseId,
+    setIsSavedAddress = props.setIsSavedAddress,
+    isFromPhoneAutocomplete = props.isFromPhoneAutocomplete;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -121,17 +123,22 @@ var AddressListUI = function AddressListUI(props) {
       handleSetAddress(address);
       return;
     }
+    setIsSavedAddress && setIsSavedAddress(true);
     handleCloseAddressForm();
   };
   var handleSetAddress = function handleSetAddress(address) {
     if (checkAddress(address) && isCustomerMode && (userCustomerSetup === null || userCustomerSetup === void 0 ? void 0 : userCustomerSetup.id) === (user === null || user === void 0 ? void 0 : user.id) && !isFromCheckout) {
-      events.emit('go_to_page', {
-        page: 'search'
-      });
+      setIsSavedAddress && setIsSavedAddress(true);
       handleSetDefault(address, userCustomerSetup, true);
       setCustomerModalOpen && setCustomerModalOpen(false);
+      if (!isFromPhoneAutocomplete) {
+        events.emit('go_to_page', {
+          page: 'search'
+        });
+      }
       return;
     }
+    setIsSavedAddress && setIsSavedAddress(true);
     handleCloseAddressForm();
     handleSetDefault(address, userCustomerSetup);
   };

package/_modules/themes/callcenterOriginal/src/components/Messages/index.js

@@ -90,6 +90,8 @@ var MessagesUI = function MessagesUI(props) {
     modalImage = _useState4[0],
     setModalImage = _useState4[1];
   var imageRef = (0, _react.useRef)(null);
+  var previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17];
+  var chatDisabled = previousStatus.includes(order === null || order === void 0 ? void 0 : order.status);
   var quickMessageList = [{
     key: 'message_1',
     text: t('CUSTOMER_MESSAGE_1', 'Lorem ipsum 1')
@@ -423,7 +425,7 @@ var MessagesUI = function MessagesUI(props) {
     outputFormat: 'MMM DD, YYYY'
   }))), /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, null, /*#__PURE__*/_react.default.createElement(_styles.BubbleConsole, null, t('ORDER_PLACED_FOR', 'Order placed for'), " ", ' ', /*#__PURE__*/_react.default.createElement("strong", null, parseDate(order.created_at)), " ", ' ', t('VIA', 'Via'), ' ', /*#__PURE__*/_react.default.createElement("strong", null, order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')), ' ', /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, parseTime(order.created_at)))), /*#__PURE__*/_react.default.createElement(MapMessages, {
     messages: messagesToShow !== null && messagesToShow !== void 0 && (_messagesToShow$messa2 = messagesToShow.messages) !== null && _messagesToShow$messa2 !== void 0 && _messagesToShow$messa2.length ? messagesToShow : messages
-  }))), (parseInt(order === null || order === void 0 ? void 0 : order.status) === 1 || parseInt(order === null || order === void 0 ? void 0 : order.status) === 2 || parseInt(order === null || order === void 0 ? void 0 : order.status) === 5 || parseInt(order === null || order === void 0 ? void 0 : order.status) === 6 || parseInt(order === null || order === void 0 ? void 0 : order.status) === 10 || parseInt(order === null || order === void 0 ? void 0 : order.status) === 11 || parseInt(order === null || order === void 0 ? void 0 : order.status) === 12) && driver ? /*#__PURE__*/_react.default.createElement(_styles.NotSendMessage, null, /*#__PURE__*/_react.default.createElement(_MdcCloseOctagonOutline.default, null), /*#__PURE__*/_react.default.createElement("p", null, t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended'))) : /*#__PURE__*/_react.default.createElement(_styles.SendForm, null, /*#__PURE__*/_react.default.createElement(_styles.QuickMessageWrapper, null, quickMessageList.map(function (quickMessage, i) {
+  }))), chatDisabled && driver ? /*#__PURE__*/_react.default.createElement(_styles.NotSendMessage, null, /*#__PURE__*/_react.default.createElement(_MdcCloseOctagonOutline.default, null), /*#__PURE__*/_react.default.createElement("p", null, t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended'))) : /*#__PURE__*/_react.default.createElement(_styles.SendForm, null, /*#__PURE__*/_react.default.createElement(_styles.QuickMessageWrapper, null, quickMessageList.map(function (quickMessage, i) {
     return /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
       key: i,
       color: "secundary",

package/_modules/themes/callcenterOriginal/src/components/Orders/Messages/index.js

@@ -44,7 +44,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
-  var _order$business, _order$customer, _order$driver, _theme$images, _order$business6, _order$business7, _order$customer6, _order$customer7, _order$customer8, _order$driver6, _order$driver7, _order$driver8;
+  var _configs$change_order, _configs$order_logboo, _order$business, _order$customer, _order$driver, _theme$images, _order$business6, _order$business7, _order$customer6, _order$customer7, _order$customer8, _order$driver6, _order$driver7, _order$driver8;
   var isChat = props.isChat,
     order = props.order,
     messages = props.messages,
@@ -64,7 +64,6 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
     setCurrentTourStep = props.setCurrentTourStep,
     orderDetailClose = props.orderDetailClose,
     getHistoryComment = props.getHistoryComment;
-  var routerHistory = (0, _reactRouterDom.useHistory)();
   var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -117,8 +116,13 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
     _useState14 = _slicedToArray(_useState13, 2),
     isChatDisabled = _useState14[0],
     setIsChatDisabled = _useState14[1];
-  var previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17];
+  var previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17];
   var chatDisabled = previousStatus.includes(order === null || order === void 0 ? void 0 : order.status);
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var showExternalId = (configs === null || configs === void 0 || (_configs$change_order = configs.change_order_id) === null || _configs$change_order === void 0 ? void 0 : _configs$change_order.value) === '1';
+  var hideLogBookMessages = (configs === null || configs === void 0 || (_configs$order_logboo = configs.order_logbook_enabled) === null || _configs$order_logboo === void 0 ? void 0 : _configs$order_logboo.value) === '0';
   var adminMessageList = [{
     key: 'message_1',
     text: t('ADMIN_MESSAGE_1', 'admin_message_1')
@@ -271,6 +275,18 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
       content: []
     });
   };
+  var queryStringToObject = function queryStringToObject(url) {
+    var params = new URLSearchParams(url.split('?')[1]);
+    return Object.fromEntries(params);
+  };
+  var addQueryToUrl = function addQueryToUrl(newObj) {
+    var queryObj = queryStringToObject(location.href);
+    for (var key in newObj) {
+      queryObj[key] = newObj[key];
+    }
+    var query = new URLSearchParams(queryObj);
+    history && history.replaceState(null, '', "".concat(location.pathname, "?").concat(query));
+  };
   var unreadMessageControl = function unreadMessageControl() {
     if (messages.loading || messages.messages.length === 0) return;
     if (messages.messages[messages.messages.length - 1].read) return;
@@ -318,9 +334,9 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
   var handleTabClick = function handleTabClick(tab, isInitialRender) {
     setTabActive(tab);
     if (!isInitialRender) {
-      var orderId = query.get('id');
-      var section = query.get('section');
-      routerHistory.replace("".concat(location.pathname, "?id=").concat(orderId, "&section=").concat(section, "&tab=").concat(tab));
+      addQueryToUrl({
+        tab: tab
+      });
     }
   };
   (0, _react.useEffect)(function () {
@@ -337,7 +353,7 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
   }, /*#__PURE__*/_react.default.createElement(_styles.HeaderProfile, null, /*#__PURE__*/_react.default.createElement(_styles.WrapperHeader, {
     messageDashboardView: messageDashboardView,
     historyView: history
-  }, /*#__PURE__*/_react.default.createElement(_styles.HeaderInfo, null, isChat && /*#__PURE__*/_react.default.createElement(_styles.ChatHeader, null, /*#__PURE__*/_react.default.createElement(_styles.OrderNumber, null, t('INVOICE_ORDER_NO', 'Order No'), " ", order.id), /*#__PURE__*/_react.default.createElement(_styles.ImageContainer, null, (user === null || user === void 0 ? void 0 : user.level) !== 2 && /*#__PURE__*/_react.default.createElement(_Shared.Image, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.HeaderInfo, null, isChat && /*#__PURE__*/_react.default.createElement(_styles.ChatHeader, null, /*#__PURE__*/_react.default.createElement(_styles.OrderNumber, null, t('INVOICE_ORDER_NO', 'Order No'), " ", showExternalId && !!(order !== null && order !== void 0 && order.external_id) ? order.external_id : order.id), /*#__PURE__*/_react.default.createElement(_styles.ImageContainer, null, (user === null || user === void 0 ? void 0 : user.level) !== 2 && /*#__PURE__*/_react.default.createElement(_Shared.Image, {
     src: optimizeImage((_order$business = order.business) === null || _order$business === void 0 ? void 0 : _order$business.logo, 'h_40,c_limit'),
     fallback: /*#__PURE__*/_react.default.createElement(_BisBusiness.default, null)
   }), /*#__PURE__*/_react.default.createElement(_Shared.Image, {
@@ -420,13 +436,15 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
     var _message$author, _message$author2, _message$author3, _message$author4, _order$business2, _order$customer2, _order$driver2, _order$business3, _order$customer3, _order$driver3, _order$business4, _order$customer4, _order$driver4, _order$business5, _order$customer5, _order$driver5;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: message.id
-    }, history && tabActive === 'order_history' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.type === 0 && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
+    }, history && tabActive === 'order_history' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.type === 0 && !hideLogBookMessages && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
       key: message.id
     }, /*#__PURE__*/_react.default.createElement(_styles.BubbleConsole, null, /*#__PURE__*/_react.default.createElement("p", {
       dangerouslySetInnerHTML: {
-        __html: t('ORDER_PLACED_FOR_VIA', 'Order placed for _for_ via _via_.').replace('_for_', '<b>' + parseDate(order.delivery_datetime) + '</b>').replace('_via_', '<b>' + t(order.app_id ? order.app_id.toUpperCase() : 'OTHER') + '</b>')
+        __html: t('ORDER_PLACED_FOR_VIA', 'Order placed for _for_ via _via_.').replace('_for_', '<b>' + (order === null || order === void 0 ? void 0 : order.delivery_datetime_utc) ? parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime_utc) : parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime, {
+          utc: false
+        }) + '</b>').replace('_via_', '<b>' + t(order.app_id ? order.app_id.toUpperCase() : 'OTHER') + '</b>')
       }
-    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('APP_ID', 'App ID'), ": "), message === null || message === void 0 ? void 0 : message.app_id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('AUTHOR', 'Author'), ": "), message === null || message === void 0 || (_message$author = message.author) === null || _message$author === void 0 ? void 0 : _message$author.name, " ", message === null || message === void 0 || (_message$author2 = message.author) === null || _message$author2 === void 0 ? void 0 : _message$author2.lastname), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('USER_AGENT', 'User agent'), ": "), message === null || message === void 0 ? void 0 : message.user_agent), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('IP', 'IP'), ": "), message === null || message === void 0 ? void 0 : message.ip), /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, getTimeAgo(message === null || message === void 0 ? void 0 : message.created_at)))), message.type === 1 && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('APP_ID', 'App ID'), ": "), message === null || message === void 0 ? void 0 : message.app_id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('AUTHOR', 'Author'), ": "), message === null || message === void 0 || (_message$author = message.author) === null || _message$author === void 0 ? void 0 : _message$author.name, " ", message === null || message === void 0 || (_message$author2 = message.author) === null || _message$author2 === void 0 ? void 0 : _message$author2.lastname), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('USER_AGENT', 'User agent'), ": "), message === null || message === void 0 ? void 0 : message.user_agent), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('IP', 'IP'), ": "), message === null || message === void 0 ? void 0 : message.ip), /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, getTimeAgo(message === null || message === void 0 ? void 0 : message.created_at)))), message.type === 1 && !hideLogBookMessages && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
       key: message.id,
       style: {
         display: "".concat(tabActive === 'order_history' ? 'inline-flex' : 'none')
@@ -438,9 +456,9 @@ var MessagesUI = exports.MessagesUI = function MessagesUI(props) {
     }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
       placement: "top",
       overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, null, parseDate(message.created_at))
-    }, /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, getTimeAgo(message.created_at)))))), isChat && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.type === 0 && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
+    }, /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, getTimeAgo(message.created_at)))))), isChat && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.type === 0 && !hideLogBookMessages && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
       key: message.id
-    }, /*#__PURE__*/_react.default.createElement(_styles.BubbleConsole, null, /*#__PURE__*/_react.default.createElement("p", null, t('ORDER_PLACED_FOR', 'Order placed for'), " ", ' ', /*#__PURE__*/_react.default.createElement("strong", null, parseDate(order.created_at)), " ", ' ', t('VIA', 'Via'), ' ', /*#__PURE__*/_react.default.createElement("strong", null, order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')), ' '), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('APP_ID', 'App ID'), ": "), message === null || message === void 0 ? void 0 : message.app_id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('AUTHOR', 'Author'), ": "), message === null || message === void 0 || (_message$author3 = message.author) === null || _message$author3 === void 0 ? void 0 : _message$author3.name, " ", message === null || message === void 0 || (_message$author4 = message.author) === null || _message$author4 === void 0 ? void 0 : _message$author4.lastname), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('USER_AGENT', 'User agent'), ": "), message === null || message === void 0 ? void 0 : message.user_agent), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('IP', 'IP'), ": "), message === null || message === void 0 ? void 0 : message.ip), /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, getTimeAgo(message === null || message === void 0 ? void 0 : message.created_at)))), message.type === 1 && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
+    }, /*#__PURE__*/_react.default.createElement(_styles.BubbleConsole, null, /*#__PURE__*/_react.default.createElement("p", null, t('ORDER_PLACED_FOR', 'Order placed for'), " ", ' ', /*#__PURE__*/_react.default.createElement("strong", null, parseDate(order.created_at)), " ", ' ', t('VIA', 'Via'), ' ', /*#__PURE__*/_react.default.createElement("strong", null, order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')), ' '), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('APP_ID', 'App ID'), ": "), message === null || message === void 0 ? void 0 : message.app_id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('AUTHOR', 'Author'), ": "), message === null || message === void 0 || (_message$author3 = message.author) === null || _message$author3 === void 0 ? void 0 : _message$author3.name, " ", message === null || message === void 0 || (_message$author4 = message.author) === null || _message$author4 === void 0 ? void 0 : _message$author4.lastname), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('USER_AGENT', 'User agent'), ": "), message === null || message === void 0 ? void 0 : message.user_agent), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, t('IP', 'IP'), ": "), message === null || message === void 0 ? void 0 : message.ip), /*#__PURE__*/_react.default.createElement(_styles.TimeofSent, null, getTimeAgo(message === null || message === void 0 ? void 0 : message.created_at)))), message.type === 1 && !hideLogBookMessages && /*#__PURE__*/_react.default.createElement(_styles.MessageConsole, {
       key: message.id,
       style: {
         display: "".concat(tabActive === 'order_history' ? 'inline-flex' : 'none')

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

@@ -36,7 +36,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
-  var _orderState$options, _configState$configs, _orderState$options4, _orderState$options7, _theme$images2, _theme$images3, _orderState$options8, _orderState$options9, _orderState$options11, _orderState$options12, _theme$colors, _theme$images4, _customerState$result, _customerState$result2;
+  var _orderState$options, _ref, _userCustomer$address, _configState$configs, _userCustomer$name, _orderState$options5, _orderState$options8, _orderState$options9, _theme$images2, _theme$images3, _orderState$options12, _orderState$options13, _orderState$options15, _orderState$options16, _theme$colors, _theme$images4, _customerState$result, _customerState$result2;
   var phone = props.phone,
     customerState = props.customerState,
     customersPhones = props.customersPhones,
@@ -70,6 +70,9 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
   var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configState = _useConfig2[0];
+  var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
+    _useEvent2 = _slicedToArray(_useEvent, 1),
+    events = _useEvent2[0];
   var _useState = (0, _react.useState)({
       open: false,
       content: []
@@ -77,33 +80,42 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
-  var _useState3 = (0, _react.useState)(urlPhone !== null && urlPhone !== void 0 ? urlPhone : ''),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+    isOpenUserData = _useState4[0],
+    setIsOpenUserData = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    optSelected = _useState6[0],
-    setOptSelected = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    isAddressFormOpen = _useState6[0],
+    setIsAddressFormOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(pickupTypes.includes(orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type)),
     _useState8 = _slicedToArray(_useState7, 2),
-    isOpenUserData = _useState8[0],
-    setIsOpenUserData = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
+    isPickupSelected = _useState8[0],
+    setIsPickupSelected = _useState8[1];
+  var userCustomer = JSON.parse(window.localStorage.getItem('user-customer'));
+  var _useState9 = (0, _react.useState)((_ref = urlPhone !== null && urlPhone !== void 0 ? urlPhone : userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.cellphone) !== null && _ref !== void 0 ? _ref : ''),
     _useState10 = _slicedToArray(_useState9, 2),
-    isAddressFormOpen = _useState10[0],
-    setIsAddressFormOpen = _useState10[1];
-  var _useState11 = (0, _react.useState)(pickupTypes.includes(orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type)),
+    inputValue = _useState10[0],
+    setInputValue = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    isPickupSelected = _useState12[0],
-    setIsPickupSelected = _useState12[1];
-  var userCustomer = JSON.parse(window.localStorage.getItem('user-customer'));
+    isSavedAddress = _useState12[0],
+    setIsSavedAddress = _useState12[1];
+  var _useState13 = (0, _react.useState)(userCustomer ? {
+      value: userCustomer.cellphone || userCustomer.phone,
+      label: "".concat(userCustomer !== null && userCustomer !== void 0 && userCustomer.country_phone_code ? "(".concat(userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.country_phone_code, ")") : '', " ").concat(userCustomer !== null && userCustomer !== void 0 && userCustomer.phone && !(userCustomer !== null && userCustomer !== void 0 && userCustomer.cellphone) ? "".concat(userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.phone) : '', " ").concat(userCustomer !== null && userCustomer !== void 0 && userCustomer.cellphone ? "".concat(userCustomer.cellphone) : '', " - {").concat(userCustomer.name, "}"),
+      flag: (userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.imported_address_text) && (userCustomer === null || userCustomer === void 0 || (_userCustomer$address = userCustomer.addresses) === null || _userCustomer$address === void 0 ? void 0 : _userCustomer$address.length) === 0,
+      lastname: userCustomer.lastname
+    } : null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    optSelected = _useState14[0],
+    setOptSelected = _useState14[1];
   var configTypes = (configState === null || configState === void 0 || (_configState$configs = configState.configs) === null || _configState$configs === void 0 || (_configState$configs = _configState$configs.order_types_allowed) === null || _configState$configs === void 0 ? void 0 : _configState$configs.value.split('|').filter(function (value) {
     return allOrderTypes.includes(Number(value));
   }).map(function (value) {
     return Number(value);
   })) || [];
-  var userName = userCustomer !== null && userCustomer !== void 0 && userCustomer.lastname ? "".concat(userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name, " ").concat(userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.lastname) : userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name;
+  var userName = userCustomer !== null && userCustomer !== void 0 && userCustomer.lastname ? "".concat(userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name, " ").concat(userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.lastname) : (_userCustomer$name = userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.name) !== null && _userCustomer$name !== void 0 ? _userCustomer$name : optSelected === null || optSelected === void 0 ? void 0 : optSelected.lastname;
   var handleCloseAlert = function handleCloseAlert() {
     setCustomersPhones(_objectSpread(_objectSpread({}, customersPhones), {}, {
       error: null
@@ -126,8 +138,10 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     }));
   };
   var handleFindClick = function handleFindClick() {
-    var _orderState$options2;
-    if (userCustomer !== null && userCustomer !== void 0 && userCustomer.id && orderState !== null && orderState !== void 0 && (_orderState$options2 = orderState.options) !== null && _orderState$options2 !== void 0 && (_orderState$options2 = _orderState$options2.address) !== null && _orderState$options2 !== void 0 && _orderState$options2.address) {
+    var _orderState$options2, _orderState$options3;
+    if (optSelected && !(userCustomer !== null && userCustomer !== void 0 && userCustomer.id && orderState !== null && orderState !== void 0 && (_orderState$options2 = orderState.options) !== null && _orderState$options2 !== void 0 && (_orderState$options2 = _orderState$options2.address) !== null && _orderState$options2 !== void 0 && _orderState$options2.address)) {
+      onChange(optSelected);
+    } else if (userCustomer !== null && userCustomer !== void 0 && userCustomer.id && orderState !== null && orderState !== void 0 && (_orderState$options3 = orderState.options) !== null && _orderState$options3 !== void 0 && (_orderState$options3 = _orderState$options3.address) !== null && _orderState$options3 !== void 0 && _orderState$options3.address) {
       onRedirectPage && onRedirectPage('search');
     } else {
       setAlertState({
@@ -152,8 +166,8 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
       });
     }
   }, [customersPhones === null || customersPhones === void 0 ? void 0 : customersPhones.error]);
-  var onInputChange = function onInputChange(inputValue, _ref) {
-    var action = _ref.action;
+  var onInputChange = function onInputChange(inputValue, _ref2) {
+    var action = _ref2.action;
     if (action === 'menu-close' || action === 'input-blur' || action === 'set-value' || inputValue.charAt(0) === '0') {
       return;
     }
@@ -167,9 +181,26 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     setInputValue(inputValue);
     onChangeNumber(inputValue);
   };
-  var onChange = function onChange(option) {
-    var _customersPhones$user;
-    setOptSelected(option);
+  var onChange = function onChange(option, triggeredAction) {
+    var _user$lastname, _user, _user2;
+    if ((triggeredAction === null || triggeredAction === void 0 ? void 0 : triggeredAction.action) === 'clear') {
+      setOptSelected(null);
+      setCustomersPhones(_objectSpread(_objectSpread({}, customersPhones), {}, {
+        users: []
+      }));
+      setInputValue('');
+      return;
+    }
+    var user;
+    if (option) {
+      var _customersPhones$user;
+      user = (_customersPhones$user = customersPhones.users) === null || _customersPhones$user === void 0 ? void 0 : _customersPhones$user.find(function (user) {
+        return user.cellphone === (option === null || option === void 0 ? void 0 : option.value) || user.phone === (option === null || option === void 0 ? void 0 : option.value);
+      });
+    }
+    setOptSelected(_objectSpread(_objectSpread({}, option), {}, {
+      lastname: (_user$lastname = (_user = user) === null || _user === void 0 ? void 0 : _user.lastname) !== null && _user$lastname !== void 0 ? _user$lastname : (_user2 = user) === null || _user2 === void 0 ? void 0 : _user2.name
+    }));
     setInputValue(option ? option === null || option === void 0 ? void 0 : option.value : '');
     if (!option) {
       onChangeNumber('');
@@ -178,9 +209,6 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
       }
       return;
     }
-    var user = (_customersPhones$user = customersPhones.users) === null || _customersPhones$user === void 0 ? void 0 : _customersPhones$user.find(function (user) {
-      return user.cellphone === (option === null || option === void 0 ? void 0 : option.value) || user.phone === (option === null || option === void 0 ? void 0 : option.value);
-    });
     if (user) {
       setCustomerState(_objectSpread(_objectSpread({}, customerState), {}, {
         result: user
@@ -265,28 +293,36 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     });
   }, [urlPhone, customersPhones === null || customersPhones === void 0 ? void 0 : customersPhones.loading]);
   (0, _react.useEffect)(function () {
-    var _orderState$options3;
-    if (pickupTypes.includes(orderState === null || orderState === void 0 || (_orderState$options3 = orderState.options) === null || _orderState$options3 === void 0 ? void 0 : _orderState$options3.type)) {
+    var _orderState$options4;
+    if (pickupTypes.includes(orderState === null || orderState === void 0 || (_orderState$options4 = orderState.options) === null || _orderState$options4 === void 0 ? void 0 : _orderState$options4.type)) {
       setIsPickupSelected(true);
     }
-  }, [orderState === null || orderState === void 0 || (_orderState$options4 = orderState.options) === null || _orderState$options4 === void 0 ? void 0 : _orderState$options4.type]);
+  }, [orderState === null || orderState === void 0 || (_orderState$options5 = orderState.options) === null || _orderState$options5 === void 0 ? void 0 : _orderState$options5.type]);
+  (0, _react.useEffect)(function () {
+    var _orderState$options6, _orderState$options7;
+    if (isSavedAddress && (userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.id) === (orderState === null || orderState === void 0 || (_orderState$options6 = orderState.options) === null || _orderState$options6 === void 0 ? void 0 : _orderState$options6.user_id) && orderState !== null && orderState !== void 0 && (_orderState$options7 = orderState.options) !== null && _orderState$options7 !== void 0 && (_orderState$options7 = _orderState$options7.address) !== null && _orderState$options7 !== void 0 && _orderState$options7.address) {
+      events.emit('go_to_page', {
+        page: 'search'
+      });
+    }
+  }, [isSavedAddress, userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.id, orderState === null || orderState === void 0 || (_orderState$options8 = orderState.options) === null || _orderState$options8 === void 0 ? void 0 : _orderState$options8.user_id, orderState === null || orderState === void 0 || (_orderState$options9 = orderState.options) === null || _orderState$options9 === void 0 || (_orderState$options9 = _orderState$options9.address) === null || _orderState$options9 === void 0 ? void 0 : _orderState$options9.address]);
   var OrderTypesComponent = function OrderTypesComponent() {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orderTypes && (configTypes ? orderTypes.filter(function (type) {
       return (configTypes === null || configTypes === void 0 ? void 0 : configTypes.includes(type.value)) && type.value !== 1;
     }) : orderTypes).map(function (item, i) {
-      var _orderState$options5, _orderState$options6;
+      var _orderState$options10, _orderState$options11;
       return /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
         key: item.value,
         onClick: function onClick() {
           return handleChangeType(item.value);
         },
-        color: (orderState === null || orderState === void 0 || (_orderState$options5 = orderState.options) === null || _orderState$options5 === void 0 ? void 0 : _orderState$options5.type) === (item === null || item === void 0 ? void 0 : item.value) ? 'primary' : 'secondary',
+        color: (orderState === null || orderState === void 0 || (_orderState$options10 = orderState.options) === null || _orderState$options10 === void 0 ? void 0 : _orderState$options10.type) === (item === null || item === void 0 ? void 0 : item.value) ? 'primary' : 'secondary',
         disabled: orderState === null || orderState === void 0 ? void 0 : orderState.loading,
-        className: (orderState === null || orderState === void 0 || (_orderState$options6 = orderState.options) === null || _orderState$options6 === void 0 ? void 0 : _orderState$options6.type) !== (item === null || item === void 0 ? void 0 : item.value) ? 'activated' : ''
+        className: (orderState === null || orderState === void 0 || (_orderState$options11 = orderState.options) === null || _orderState$options11 === void 0 ? void 0 : _orderState$options11.type) !== (item === null || item === void 0 ? void 0 : item.value) ? 'activated' : ''
       }, item.text);
     }));
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.PhoneContainer, null, /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')), /*#__PURE__*/_react.default.createElement(_styles.Slogan, null, t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')), !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options7 = orderState.options) !== null && _orderState$options7 !== void 0 && (_orderState$options7 = _orderState$options7.address) !== null && _orderState$options7 !== void 0 && _orderState$options7.address) && /*#__PURE__*/_react.default.createElement(_styles.TypesContainer, null, configTypes.includes(1) && /*#__PURE__*/_react.default.createElement(_styles.TypeButton, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.PhoneContainer, null, /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')), /*#__PURE__*/_react.default.createElement(_styles.Slogan, null, t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')), /*#__PURE__*/_react.default.createElement(_styles.TypesContainer, null, configTypes.includes(1) && /*#__PURE__*/_react.default.createElement(_styles.TypeButton, {
     onClick: function onClick() {
       return handleChangeType(1);
     },
@@ -312,14 +348,14 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     src: theme === null || theme === void 0 || (_theme$images3 = theme.images) === null || _theme$images3 === void 0 || (_theme$images3 = _theme$images3.general) === null || _theme$images3 === void 0 ? void 0 : _theme$images3.pickupIco,
     width: 22,
     height: 22
-  })), /*#__PURE__*/_react.default.createElement("p", null, t('PICKUP', 'Pickup')))), isPickupSelected && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')), /*#__PURE__*/_react.default.createElement(_styles.AdditionalTypesContainer, null, /*#__PURE__*/_react.default.createElement(OrderTypesComponent, null))), configTypes.includes(orderState === null || orderState === void 0 || (_orderState$options8 = orderState.options) === null || _orderState$options8 === void 0 ? void 0 : _orderState$options8.type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !userCustomer && /*#__PURE__*/_react.default.createElement(_styles.PhoneAutocompleteContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')), /*#__PURE__*/_react.default.createElement(_styles.WrappBtn, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
-    color: inputValue || userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options9 = orderState.options) !== null && _orderState$options9 !== void 0 && (_orderState$options9 = _orderState$options9.address) !== null && _orderState$options9 !== void 0 && _orderState$options9.address ? 'primary' : 'secundary',
+  })), /*#__PURE__*/_react.default.createElement("p", null, t('PICKUP', 'Pickup')))), isPickupSelected && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')), /*#__PURE__*/_react.default.createElement(_styles.AdditionalTypesContainer, null, /*#__PURE__*/_react.default.createElement(OrderTypesComponent, null))), configTypes.includes(orderState === null || orderState === void 0 || (_orderState$options12 = orderState.options) === null || _orderState$options12 === void 0 ? void 0 : _orderState$options12.type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.PhoneAutocompleteContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')), /*#__PURE__*/_react.default.createElement(_styles.WrappBtn, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: inputValue || userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options13 = orderState.options) !== null && _orderState$options13 !== void 0 && (_orderState$options13 = _orderState$options13.address) !== null && _orderState$options13 !== void 0 && _orderState$options13.address ? 'primary' : 'secundary',
     onMouseDown: function onMouseDown() {
-      var _orderState$options10;
-      return !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options10 = orderState.options) !== null && _orderState$options10 !== void 0 && (_orderState$options10 = _orderState$options10.address) !== null && _orderState$options10 !== void 0 && _orderState$options10.address) ? createNewUser() : handleFindClick();
+      var _orderState$options14;
+      return !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options14 = orderState.options) !== null && _orderState$options14 !== void 0 && (_orderState$options14 = _orderState$options14.address) !== null && _orderState$options14 !== void 0 && _orderState$options14.address) && !optSelected ? createNewUser() : handleFindClick();
     },
-    disabled: !inputValue && !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options11 = orderState.options) !== null && _orderState$options11 !== void 0 && (_orderState$options11 = _orderState$options11.address) !== null && _orderState$options11 !== void 0 && _orderState$options11.address)
-  }, !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options12 = orderState.options) !== null && _orderState$options12 !== void 0 && (_orderState$options12 = _orderState$options12.address) !== null && _orderState$options12 !== void 0 && _orderState$options12.address) ? t('CREATE_CUSTOMER', 'Create new customer') : "".concat(t('CONTINUE_WITH', 'Continue with'), " ").concat(userName))), /*#__PURE__*/_react.default.createElement(_styles.SelectContainer, null, /*#__PURE__*/_react.default.createElement(_MdcCellphoneAndroid.default, {
+    disabled: !inputValue && !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options15 = orderState.options) !== null && _orderState$options15 !== void 0 && (_orderState$options15 = _orderState$options15.address) !== null && _orderState$options15 !== void 0 && _orderState$options15.address) && !optSelected
+  }, !(userCustomer && orderState !== null && orderState !== void 0 && (_orderState$options16 = orderState.options) !== null && _orderState$options16 !== void 0 && (_orderState$options16 = _orderState$options16.address) !== null && _orderState$options16 !== void 0 && _orderState$options16.address) && !optSelected ? t('CREATE_CUSTOMER', 'Create new customer') : "".concat(t('CONTINUE_WITH', 'Continue with'), " ").concat(userName))), /*#__PURE__*/_react.default.createElement(_styles.SelectContainer, null, /*#__PURE__*/_react.default.createElement(_MdcCellphoneAndroid.default, {
     size: 18,
     color: theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary
   }), /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
@@ -390,10 +426,12 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     }),
     isEnableContinueButton: true,
     isCustomerMode: true,
+    isFromPhoneAutocomplete: true,
     isOpenUserData: isOpenUserData,
     setIsOpenUserData: setIsOpenUserData,
     setIsAddressFormOpen: setIsAddressFormOpen,
-    franchiseId: franchiseId
+    franchiseId: franchiseId,
+    setIsSavedAddress: setIsSavedAddress
   })))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: openModal.error,
     width: "50%",

package/_modules/themes/callcenterOriginal/src/components/SignUpForm/index.js

@@ -296,7 +296,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
       name: field.code,
       "aria-label": field.code,
       className: "form",
-      placeholder: t(field.code.toUpperCase(), field.name),
+      placeholder: !field.required ? t(field.code.toUpperCase() + '_OPTIONAL', field.name + ' (Optional)') : t(field.code.toUpperCase(), field.name),
       onChange: handleChangeInputEmail,
       ref: function ref(e) {
         emailInput.current = e;

package/_modules/themes/callcenterOriginal/src/components/UserDetails/index.js

@@ -30,7 +30,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var UserDetailsUI = function UserDetailsUI(props) {
-  var _userState$result, _formState$result, _props$beforeElements, _props$beforeComponen, _parsePhoneNumber, _userData$country_pho, _props$afterComponent, _props$afterElements;
+  var _userState$result, _formState$result, _Object$values, _validationFields$fie, _props$beforeElements, _props$beforeComponen, _parsePhoneNumber, _userData$country_pho, _props$afterComponent, _props$afterElements;
   var isEdit = props.isEdit,
     formState = props.formState,
     cleanFormState = props.cleanFormState,
@@ -51,6 +51,9 @@ var UserDetailsUI = function UserDetailsUI(props) {
     _useSession2 = _slicedToArray(_useSession, 1),
     user = _useSession2[0].user;
   var userData = ((_userState$result = userState.result) === null || _userState$result === void 0 ? void 0 : _userState$result.result) || props.userData || ((_formState$result = formState.result) === null || _formState$result === void 0 ? void 0 : _formState$result.result) || user;
+  var validationFieldsLength = (_Object$values = Object.values(validationFields === null || validationFields === void 0 || (_validationFields$fie = validationFields.fields) === null || _validationFields$fie === void 0 ? void 0 : _validationFields$fie.checkout)) === null || _Object$values === void 0 ? void 0 : _Object$values.map(function (field) {
+    return field.enabled;
+  });
   (0, _react.useEffect)(function () {
     if (isUserDetailsEdit) {
       !isEdit && toggleIsEdit();
@@ -73,15 +76,19 @@ var UserDetailsUI = function UserDetailsUI(props) {
     return /*#__PURE__*/_react.default.createElement(BeforeComponent, _extends({
       key: i
     }, props));
-  }), (validationFields.loading || formState.loading || userState.loading) && /*#__PURE__*/_react.default.createElement(_styles.UserData, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 250,
-    height: 25
-  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 180,
-    height: 25
-  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 210,
-    height: 25
+  }), (validationFields.loading || formState.loading || userState.loading) && /*#__PURE__*/_react.default.createElement(_styles.UserData, null, validationFieldsLength === null || validationFieldsLength === void 0 ? void 0 : validationFieldsLength.map(function (field) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: field === null || field === void 0 ? void 0 : field.id
+    }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 250,
+      height: 50
+    }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 180,
+      height: 25
+    }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+      width: 210,
+      height: 50
+    }));
   })), !(validationFields.loading || formState.loading || userState.loading) && /*#__PURE__*/_react.default.createElement(_styles.Container, null, isModal && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, {
     isAddressFormOpen: isAddressFormOpen && !isEdit
   }, /*#__PURE__*/_react.default.createElement(_styles.ModalIcon, null, /*#__PURE__*/_react.default.createElement(_MdClose.default, {

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

@@ -50,6 +50,10 @@ var AddressDetailsUI = function AddressDetailsUI(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     alertState = _useState4[0],
     setAlertState = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isShowMap = _useState6[0],
+    setIsShowMap = _useState6[1];
   var userCustomer = JSON.parse(window.localStorage.getItem('user-customer'));
   var _useCustomer = (0, _orderingComponentsExternal.useCustomer)(),
     _useCustomer2 = _slicedToArray(_useCustomer, 1),
@@ -71,14 +75,18 @@ var AddressDetailsUI = function AddressDetailsUI(props) {
     onClick: function onClick() {
       return setOpenModal(true);
     }
-  }, t('CHANGE_ADDRESS', 'Change address')))), apiKey && /*#__PURE__*/_react.default.createElement(_styles.WrappMap, null, /*#__PURE__*/_react.default.createElement(_styles.Map, null, /*#__PURE__*/_react.default.createElement("img", {
+  }, t('CHANGE_ADDRESS', 'Change address')))), apiKey && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isShowMap && /*#__PURE__*/_react.default.createElement(_styles.ToggleMap, null, /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return setIsShowMap(!isShowMap);
+    }
+  }, t('SHOW_MAP', 'Show map')))), isShowMap && /*#__PURE__*/_react.default.createElement(_styles.WrappMap, null, /*#__PURE__*/_react.default.createElement(_styles.Map, null, /*#__PURE__*/_react.default.createElement("img", {
     src: googleMapsUrl,
     id: "google-maps-image",
     alt: "google-maps-location",
     width: "288px",
     height: "162px",
     loading: "lazy"
-  }))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+  })))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: openModal,
     width: "70%",
     onClose: function onClose() {

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

@@ -4,19 +4,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrappMap = exports.Text = exports.Map = exports.Header = exports.AddressContainer = void 0;
+exports.WrappMap = exports.ToggleMap = exports.Text = exports.Map = exports.Header = exports.AddressContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var AddressContainer = exports.AddressContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 10px;\n"])));
 var Header = exports.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-var WrappMap = exports.WrappMap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto;\n"])));
+var WrappMap = exports.WrappMap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto;\n  height: 300px;\n"])));
 var Map = exports.Map = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 100%;\n\n  img {\n    width: 100%;\n    height: auto;\n    display: block;\n    border-radius: 15px;\n    -webkit-user-drag: none;\n    aspect-ratio: attr(width) / attr(height)\n  }\n"])));
 var Text = exports.Text = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  font-weight: bold;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  h1{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  span {\n    font-size: 13px!important;\n    cursor: pointer;\n    user-select: none;\n    color: ", ";\n    margin-left: 10px;\n    font-weight: normal;\n\n    &:hover {\n        text-decoration: underline;\n      }\n\n    ", "\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme;
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n      margin-left: initial;\n    "])));
-});
+});
+var ToggleMap = exports.ToggleMap = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  span {\n    margin: 0 auto;\n  }\n"])));

package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/OrdersSection/index.js

@@ -22,7 +22,8 @@ var OrdersSection = exports.OrdersSection = function OrdersSection(props) {
     getCustomArray = props.getCustomArray,
     businessesList = props.businessesList,
     isCustomerMode = props.isCustomerMode,
-    userCustomer = props.userCustomer;
+    userCustomer = props.userCustomer,
+    disableSkeletons = props.disableSkeletons;
   var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
     _useOrder2 = _slicedToArray(_useOrder, 1),
     orderState = _useOrder2[0];
@@ -54,7 +55,8 @@ var OrdersSection = exports.OrdersSection = function OrdersSection(props) {
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
     franchiseId: props.franchiseId,
-    handleRedirectToCheckout: handleRedirectToCheckout
+    handleRedirectToCheckout: handleRedirectToCheckout,
+    disableSkeletons: disableSkeletons
   }), /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
     propsToFetch: propsToFetch,
     propsToFetchBusiness: propsToFetchBusiness,
@@ -70,7 +72,8 @@ var OrdersSection = exports.OrdersSection = function OrdersSection(props) {
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
     franchiseId: props.franchiseId,
-    handleRedirectToCheckout: handleRedirectToCheckout
+    handleRedirectToCheckout: handleRedirectToCheckout,
+    disableSkeletons: disableSkeletons
   }), /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
     propsToFetch: propsToFetch,
     propsToFetchBusiness: propsToFetchBusiness,
@@ -86,6 +89,7 @@ var OrdersSection = exports.OrdersSection = function OrdersSection(props) {
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
     franchiseId: props.franchiseId,
-    handleRedirectToCheckout: handleRedirectToCheckout
+    handleRedirectToCheckout: handleRedirectToCheckout,
+    disableSkeletons: disableSkeletons
   })));
 };

package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -359,7 +359,8 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     getCustomArray: getCustomArray,
     businessesList: businessesList,
     isCustomerMode: isCustomerMode,
-    userCustomer: userCustomer
+    userCustomer: userCustomer,
+    disableSkeletons: true
   }), !isCustomerMode && !hideSearchSection && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, {
     isCustomLayout: isCustomLayout,
     isCustomerMode: isCustomerMode