ordering-ui-external 10.5.1 → 10.5.3

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

@@ -40,7 +40,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 AddressListUI = function AddressListUI(props) {
-  var _theme$profile, _theme$profile2, _theme$profile3, _theme$profile4, _theme$profile5, _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _theme$profile, _theme$profile2, _theme$profile3, _theme$profile4, _theme$profile5, _addressList$addresse2, _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
   var actionStatus = props.actionStatus,
     addressList = props.addressList,
     handleDelete = props.handleDelete,
@@ -58,7 +58,8 @@ var AddressListUI = function AddressListUI(props) {
     setIsAddressFormOpen = props.setIsAddressFormOpen,
     isProfile = props.isProfile,
     isMobile = props.isMobile,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    isOpenUserData = props.isOpenUserData;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -214,13 +215,20 @@ var AddressListUI = function AddressListUI(props) {
       handleCloseAddressForm();
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    var _addressList$addresse;
+    if ((addressList === null || addressList === void 0 || (_addressList$addresse = addressList.addresses) === null || _addressList$addresse === void 0 ? void 0 : _addressList$addresse.length) === 0 && !addressList.loading && isCustomerMode) {
+      openAddress({});
+    }
+  }, [addressList.loading, addressList === null || addressList === void 0 || (_addressList$addresse2 = addressList.addresses) === null || _addressList$addresse2 === void 0 ? void 0 : _addressList$addresse2.length]);
   var AddressListCallcenterLayout = function AddressListCallcenterLayout(_ref2) {
     var children = _ref2.children;
     return /*#__PURE__*/_react.default.createElement(_styles.AddressHalfContainer, null, /*#__PURE__*/_react.default.createElement(_styles.List, {
       halfWidth: addressOpen,
       id: "address_list"
     }, children), addressOpen && /*#__PURE__*/_react.default.createElement(_styles.AddressFormContainer, {
-      isCustomerMode: isCustomerMode
+      isCustomerMode: isCustomerMode,
+      isOpenUserData: isOpenUserData
     }, /*#__PURE__*/_react.default.createElement(_styles.TitleFormContainer, null, /*#__PURE__*/_react.default.createElement(_styles.CloseIcon, null, /*#__PURE__*/_react.default.createElement(_MdClose.default, {
       onClick: function onClick() {
         return handleCloseAddressForm();
@@ -238,11 +246,11 @@ var AddressListUI = function AddressListUI(props) {
     })));
   };
   var AddressListContent = function AddressListContent() {
-    var _addressList$addresse, _addressList$addresse2, _orderState$options6, _addressList$addresse3, _theme$images, _addressList$error$, _orderState$options7;
+    var _addressList$addresse3, _addressList$addresse4, _orderState$options6, _addressList$addresse5, _theme$images, _addressList$error$, _orderState$options7;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!isPopover || !addressOpen) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isCompletedLayout && /*#__PURE__*/_react.default.createElement(_styles.TitleAddress, null, t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
       className: "add",
       outline: true,
-      color: isEnableContinueButton && (addressList === null || addressList === void 0 || (_addressList$addresse = addressList.addresses) === null || _addressList$addresse === void 0 ? void 0 : _addressList$addresse.length) > 0 ? 'secondary' : 'primary',
+      color: isEnableContinueButton && (addressList === null || addressList === void 0 || (_addressList$addresse3 = addressList.addresses) === null || _addressList$addresse3 === void 0 ? void 0 : _addressList$addresse3.length) > 0 ? 'secondary' : 'primary',
       onClick: function onClick() {
         return openAddress({});
       },
@@ -261,7 +269,7 @@ var AddressListUI = function AddressListUI(props) {
       },
       onSaveAddress: handleSaveAddress,
       userCustomerSetup: userCustomerSetup
-    }), !addressList.loading && !actionStatus.loading && !orderState.loading && !addressList.error && (addressList === null || addressList === void 0 || (_addressList$addresse2 = addressList.addresses) === null || _addressList$addresse2 === void 0 ? void 0 : _addressList$addresse2.length) > 0 && _typeof((_orderState$options6 = orderState.options) === null || _orderState$options6 === void 0 ? void 0 : _orderState$options6.address) === 'object' && (!addressOpen && isPopover || isModal) && /*#__PURE__*/_react.default.createElement(_styles.AddressListUl, {
+    }), !addressList.loading && !actionStatus.loading && !orderState.loading && !addressList.error && (addressList === null || addressList === void 0 || (_addressList$addresse4 = addressList.addresses) === null || _addressList$addresse4 === void 0 ? void 0 : _addressList$addresse4.length) > 0 && _typeof((_orderState$options6 = orderState.options) === null || _orderState$options6 === void 0 ? void 0 : _orderState$options6.address) === 'object' && (!addressOpen && isPopover || isModal) && /*#__PURE__*/_react.default.createElement(_styles.AddressListUl, {
       id: "list"
     }, /*#__PURE__*/_react.default.createElement(_styles.AddressTitle, null, t('SELECT_ONE_OF_SAVED_PLACES', 'Select one of your saved places')), uniqueAddressesList.map(function (address) {
       return /*#__PURE__*/_react.default.createElement(_styles.AddressItem, {
@@ -301,13 +309,15 @@ var AddressListUI = function AddressListUI(props) {
           return handleSetAddress(address);
         }
       }, t('CONTINUE_WITH', 'Continue with'), ": ", address.address));
-    })), !(addressList.loading || actionStatus.loading || orderState.loading) && !addressList.error && (addressList === null || addressList === void 0 || (_addressList$addresse3 = addressList.addresses) === null || _addressList$addresse3 === void 0 ? void 0 : _addressList$addresse3.length) === 0 && !isProductForm && /*#__PURE__*/_react.default.createElement(_styles.WrappNotAddresses, null, /*#__PURE__*/_react.default.createElement("img", {
+    })), !(addressList.loading || actionStatus.loading || orderState.loading) && !addressList.error && (addressList === null || addressList === void 0 || (_addressList$addresse5 = addressList.addresses) === null || _addressList$addresse5 === void 0 ? void 0 : _addressList$addresse5.length) === 0 && !isProductForm && /*#__PURE__*/_react.default.createElement(_styles.WrappNotAddresses, {
+      isCustomerMode: isCustomerMode
+    }, !isCustomerMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
       src: (_theme$images = theme.images) === null || _theme$images === void 0 || (_theme$images = _theme$images.general) === null || _theme$images === void 0 ? void 0 : _theme$images.notFound,
       alt: "Not Found",
       width: "200px",
       height: "112px",
       loading: "lazy"
-    }), /*#__PURE__*/_react.default.createElement("h1", null, t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.'))), !(addressList.loading || actionStatus.loading || orderState.loading) && addressList.error && addressList.error.length > 0 && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {
+    }), /*#__PURE__*/_react.default.createElement("h1", null, t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.')))), !(addressList.loading || actionStatus.loading || orderState.loading) && addressList.error && addressList.error.length > 0 && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {
       image: notFoundImage,
       content: ((_addressList$error$ = addressList.error[0]) === null || _addressList$error$ === void 0 ? void 0 : _addressList$error$.message) || addressList.error[0]
     }), !(addressList.loading || actionStatus.loading || orderState.loading) && _typeof((_orderState$options7 = orderState.options) === null || _orderState$options7 === void 0 ? void 0 : _orderState$options7.address) !== 'object' && !addressList.error && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WrappNotAddresses = exports.TitleFormContainer = exports.TitleAddress = exports.List = exports.FormActions = exports.ContinueButton = exports.CloseIcon = exports.AddressTitle = exports.AddressListUl = exports.AddressListContainer = exports.AddressItemActions = exports.AddressItem = exports.AddressHalfContainer = exports.AddressFormContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _polished = require("polished");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -40,48 +40,52 @@ var AddressItem = _styledComponents.default.li(_templateObject6 || (_templateObj
   return props.theme.colors.lightGray;
 });
 exports.AddressItem = AddressItem;
-var AddressItemActions = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  a {\n    display: flex;\n    cursor: pointer;\n    margin: 0px 5px;\n    font-size: 20px;\n    \n    svg {\n      color: #B1BCCC;\n    }\n  }\n  a.disabled {\n    svg {\n      color: #CCC;\n    }\n    pointer-events: none;\n  }\n"])));
+var AddressItemActions = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  a {\n    display: flex;\n    cursor: pointer;\n    margin: 0px 5px;\n    font-size: 20px;\n\n    svg {\n      color: #B1BCCC;\n    }\n  }\n  a.disabled {\n    svg {\n      color: #CCC;\n    }\n    pointer-events: none;\n  }\n"])));
 exports.AddressItemActions = AddressItemActions;
-var WrappNotAddresses = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  height: 350px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 80%;\n  margin: 20px auto 10px;\n\n  img {\n    width: 200px;\n    height: auto;\n    aspect-ratio: attr(width) / attr(height)\n  }\n  h1 {\n    margin: 5px 0px 0px;\n    opacity: 0.5;\n    text-align: center;\n    font-size: 24px;\n  }\n"])));
+var WrappNotAddresses = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 80%;\n  margin: 20px auto 10px;\n\n  ", "\n\n  img {\n    width: 200px;\n    height: auto;\n    aspect-ratio: attr(width) / attr(height)\n  }\n  h1 {\n    margin: 5px 0px 0px;\n    opacity: 0.5;\n    text-align: center;\n    font-size: 24px;\n  }\n"])), function (_ref4) {
+  var isCustomerMode = _ref4.isCustomerMode;
+  return isCustomerMode ? (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    min-height: 200px;\n    height: 200px\n  "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    height: 350px;\n  "])));
+});
 exports.WrappNotAddresses = WrappNotAddresses;
-var FormActions = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: 10px 0px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  button {\n    height: 45px;\n    flex: 1;\n\n    &:last-child#second-btn {\n      margin-left: 10px;\n      ", "\n    }\n  }\n\n  @media (min-width: 769px) {\n    button {\n      &:last-child#second-btn {\n        margin-left: 25px;\n        ", "\n      }\n    }\n  }\n"])), function (props) {
+var FormActions = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 10px 0px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  button {\n    height: 45px;\n    flex: 1;\n\n    &:last-child#second-btn {\n      margin-left: 10px;\n      ", "\n    }\n  }\n\n  @media (min-width: 769px) {\n    button {\n      &:last-child#second-btn {\n        margin-left: 25px;\n        ", "\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme3;
-  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        margin-left: 0;\n        margin-right: 10px;\n      "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        margin-left: 0;\n        margin-right: 10px;\n      "])));
 }, function (props) {
   var _props$theme4;
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          margin-left: 0;\n          margin-right: 25px;\n      "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          margin-left: 0;\n          margin-right: 25px;\n      "])));
 });
 exports.FormActions = FormActions;
-var ContinueButton = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: sticky;\n  bottom: 1px;\n  \n  button {\n    width: 100%;\n    white-space: nowrap;\n    height: 50px;\n  }\n"])));
+var ContinueButton = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: sticky;\n  bottom: 1px;\n\n  button {\n    width: 100%;\n    white-space: nowrap;\n    height: 50px;\n  }\n"])));
 exports.ContinueButton = ContinueButton;
-var AddressTitle = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  margin-bottom: 25px;\n  text-align: left;\n  ", "\n"])), function (props) {
+var AddressTitle = _styledComponents.default.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  margin-bottom: 25px;\n  text-align: left;\n  ", "\n"])), function (props) {
   var _props$theme5;
-  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    text-align: right;\n  "])));
+  return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    text-align: right;\n  "])));
 });
 exports.AddressTitle = AddressTitle;
-var AddressHalfContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
+var AddressHalfContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
 exports.AddressHalfContainer = AddressHalfContainer;
-var List = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  width: ", ";\n  padding-right: 10px;\n  button { \n    width: 100%;\n  }\n"])), function (_ref4) {
-  var halfWidth = _ref4.halfWidth;
+var List = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: ", ";\n  padding-right: 10px;\n  button {\n    width: 100%;\n  }\n"])), function (_ref5) {
+  var halfWidth = _ref5.halfWidth;
   return halfWidth ? '50%' : '100%';
 });
 exports.List = List;
-var AddressFormContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  width: 50%;\n  position: sticky;\n  right: 0;\n  top: 0;\n  margin-top: ", ";\n  height: 100%;\n  padding-left: 10px;\n"])), function (_ref5) {
-  var isCustomerMode = _ref5.isCustomerMode;
-  return isCustomerMode ? '-190px' : '0';
+var AddressFormContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  width: 50%;\n  position: sticky;\n  right: 0;\n  top: 0;\n  margin-top: ", ";\n  height: 100%;\n  padding-left: 10px;\n"])), function (_ref6) {
+  var isCustomerMode = _ref6.isCustomerMode,
+    isOpenUserData = _ref6.isOpenUserData;
+  return isCustomerMode && !isOpenUserData ? '-190px' : '0';
 });
 exports.AddressFormContainer = AddressFormContainer;
-var CloseIcon = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n\n  font-size: 30px;\n  cursor: pointer;\n  z-index: 2;\n  ", "\n  ", "\n  svg{\n    /* background: rgba(255,255,255,0.5); */\n    transition: all .2s ease-in;\n\n    &:hover {\n      background-color: #1507260a;\n\n      > svg {\n        color:  #151b26;\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  \n    border-radius: 50%;\n  }\n"])), function (props) {
+var CloseIcon = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n\n  font-size: 30px;\n  cursor: pointer;\n  z-index: 2;\n  ", "\n  ", "\n  svg{\n    /* background: rgba(255,255,255,0.5); */\n    transition: all .2s ease-in;\n\n    &:hover {\n      background-color: #1507260a;\n\n      > svg {\n        color:  #151b26;\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    border-radius: 50%;\n  }\n"])), function (props) {
   var _props$theme6;
-  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    right: 25px;\n    left: initial;\n  "])));
-}, function (_ref6) {
-  var isProductForm = _ref6.isProductForm;
-  return isProductForm && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    top: 18px;\n  "])));
+  return ((_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.rtl) && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    right: 25px;\n    left: initial;\n  "])));
+}, function (_ref7) {
+  var isProductForm = _ref7.isProductForm;
+  return isProductForm && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n    top: 18px;\n  "])));
 }, function () {
   return (0, _polished.darken)(0.07, '#CCC');
 });
 exports.CloseIcon = CloseIcon;
-var TitleFormContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex; \n  align-items: flex-start;\n  h1 {\n    margin: 0 auto;\n    font-size: 24px;\n  }\n"])));
+var TitleFormContainer = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  h1 {\n    margin: 0 auto;\n    font-size: 24px;\n  }\n"])));
 exports.TitleFormContainer = TitleFormContainer;
-var TitleAddress = _styledComponents.default.h1(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: auto;\n  font-size: 24px;\n  margin-bottom: 20px;\n"])));
+var TitleAddress = _styledComponents.default.h1(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: auto;\n  font-size: 24px;\n  margin-bottom: 20px;\n"])));
 exports.TitleAddress = TitleAddress;

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

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrappBtn = exports.WrapInput = exports.UserEdit = exports.TypesContainer = exports.TypeButton = exports.Title = exports.Slogan = exports.SelectContainer = exports.SearchContainer = exports.PhoneContainer = exports.PhoneAutocompleteContainer = exports.Info = exports.ImageWrapper = exports.IconTypeButton = exports.ContentWrapper = exports.AutoComplete = exports.AdditionalTypesContainer = void 0;
+exports.WrappBtn = exports.WrapInput = exports.UserEdit = exports.TypesContainer = exports.TypeButton = exports.Title = exports.Slogan = exports.SelectContainer = exports.SearchContainer = exports.PhoneContainer = exports.PhoneAutocompleteContainer = exports.Info = exports.ImageWrapper = exports.IconTypeButton = exports.ContinueButton = exports.ContentWrapper = exports.AutoComplete = exports.AdditionalTypesContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,7 +18,7 @@ var PhoneContainer = _styledComponents.default.div(_templateObject || (_template
   return bgimage && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-repeat: no-repeat, repeat;\n    background-size: cover;\n    object-fit: cover;\n    background-position: bottom;\n    background-image: url(", ");\n  "])), bgimage);
 });
 exports.PhoneContainer = PhoneContainer;
-var ContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n  padding: 0px 20px 0px;\n  width: 70%;\n\n  .select__control {\n    border-radius: 30px;\n  }\n\n  .select__control.select__control--is-focused {\n    border-color: ", " !important;\n    box-shadow: 0 0 0 1px ", " !important;\n  }\n\n  .select__value-container {\n    padding: 10px 8px 0;\n  }\n  .select__indicator.select__loading-indicator {\n    color: ", " !important;\n  }\n\n  .select__indicator.select__dropdown-indicator,\n  .select__indicator-separator {\n    display: none;\n  }\n\n  ", "\n\n    input {\n      width: 90%;\n      margin-bottom: 15px;\n    }\n\n    @media (min-width: 425px) {\n      input {\n        width: 45%;\n      }\n    }\n\n    @media (min-width: 768px) {\n      padding: 0px 40px 0px;\n\n      ", "\n    }\n    @media (min-width: 1400px){\n      width: 60%;\n    }\n"])), function (props) {
+var ContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n  padding: 0px 20px 0px;\n  width: 70%;\n  position: relative;\n  .select__control {\n    border-radius: 30px;\n  }\n\n  .select__control.select__control--is-focused {\n    border-color: ", " !important;\n    box-shadow: 0 0 0 1px ", " !important;\n  }\n\n  .select__value-container {\n    padding: 10px 8px 0;\n  }\n  .select__indicator.select__loading-indicator {\n    color: ", " !important;\n  }\n\n  .select__indicator.select__dropdown-indicator,\n  .select__indicator-separator {\n    display: none;\n  }\n\n  ", "\n\n    input {\n      width: 90%;\n      margin-bottom: 15px;\n    }\n\n    @media (min-width: 425px) {\n      input {\n        width: 45%;\n      }\n    }\n\n    @media (min-width: 768px) {\n      padding: 0px 40px 0px;\n\n      ", "\n    }\n    @media (min-width: 1400px){\n      width: 60%;\n    }\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.colors) === null || _props$theme === void 0 ? void 0 : _props$theme.primary;
 }, function (props) {
@@ -35,7 +35,7 @@ var ContentWrapper = _styledComponents.default.div(_templateObject3 || (_templat
   return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: 0px 40px 0px;\n      "])));
 });
 exports.ContentWrapper = ContentWrapper;
-var WrappBtn = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 50%;\n  margin-top: 20px;\n  button {\n    min-width: 130px;\n    max-width: 400px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])));
+var WrappBtn = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 50%;\n  position: relative;\n  button {\n    position: absolute;\n    top: 55px;\n    min-width: 130px;\n    max-width: 400px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 100;\n  }\n"])));
 exports.WrappBtn = WrappBtn;
 var Title = _styledComponents.default.h1(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0px;\n  text-align: left;\n  font: normal normal normal 80px ", ";\n  letter-spacing: 0px;\n  text-shadow: 0px 3px 6px #00000029;\n  opacity: 1;\n  font-size: 35px;\n\n  ", "\n"])), function (props) {
   var _props$theme$fonts$sp;
@@ -50,7 +50,7 @@ var Slogan = _styledComponents.default.p(_templateObject9 || (_templateObject9 =
   return ((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      text-align: right;\n  "])));
 });
 exports.Slogan = Slogan;
-var WrapInput = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: pointer;\n\n  ", "\n  \n  div{\n    color: #FFF;\n    position: relative;\n    bottom: 25px;\n    left: 15px;\n    ", "\n  }\n\n  svg {\n    color: #FFF;\n    position: absolute;\n    font-size: 22px;\n\n    margin-right: 10px;\n      ", "\n\n    ", "\n\n  }\n"])), function (_ref2) {
+var WrapInput = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: pointer;\n\n  ", "\n\n  div{\n    color: #FFF;\n    position: relative;\n    bottom: 25px;\n    left: 15px;\n    ", "\n  }\n\n  svg {\n    color: #FFF;\n    position: absolute;\n    font-size: 22px;\n\n    margin-right: 10px;\n      ", "\n\n    ", "\n\n  }\n"])), function (_ref2) {
   var withIcon = _ref2.withIcon;
   return withIcon && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    width: calc(100% - 20px);\n    box-sizing: border-box;\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      right: 5px;\n      top: 0;\n      bottom: 18px;\n      width: 15px;\n\n      ", "\n    }\n\n    @media (min-width: 1024px) {\n      width: calc(50% - 20px);\n    }\n  "])), function (props) {
     var _props$theme8;
@@ -67,13 +67,13 @@ var WrapInput = _styledComponents.default.div(_templateObject11 || (_templateObj
   return (_props$theme11 = props.theme) !== null && _props$theme11 !== void 0 && _props$theme11.rtl ? (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      left: 0px;\n    "]))) : (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      right: 0px;\n    "])));
 });
 exports.WrapInput = WrapInput;
-var AutoComplete = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  width: 45%; \n  button {\n    position: absolute;\n    left: 100%;\n    transform: translate(-90%, -165%)\n  }\n"])));
+var AutoComplete = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  width: 45%;\n  button {\n    position: absolute;\n    left: 100%;\n    transform: translate(-90%, -165%)\n  }\n"])));
 exports.AutoComplete = AutoComplete;
-var UserEdit = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  > :first-child{\n     margin-bottom: 20px;  \n  }\n"])));
+var UserEdit = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  > :first-child{\n     margin-bottom: 20px;\n  }\n"])));
 exports.UserEdit = UserEdit;
 var Info = _styledComponents.default.p(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral([""])));
 exports.Info = Info;
-var SelectContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 60%;\n  position: relative;\n  align-items: center;\n  svg{\n    position: absolute;\n    top: 0;\n    left: 20px;\n    transform: translate(50%, 70%);\n    z-index: 10;\n  }\n  > div {\n    width: 100%;\n    .select__placeholder, .select__single-value, input {\n      margin-left: 40px;\n      z-index: 100;\n      bottom: -10px;\n    }\n    .select__menu {\n      position: relative;\n      padding: 20px;\n    }\n    .select__clear-indicator {\n      position: relative;\n      left: 0;\n      transform: translate(-300%, -165%);\n      svg{\n        width: 30px;\n        height: 30px;\n      }\n    }\n    .select__control {\n      height: 45px;\n      padding-left: 10px;\n    }\n    .select__indicator {\n      bottom: 8px;\n      position: relative;\n    }\n    input {\n      position: relative;\n      top: -5px;\n    }\n  }\n"])));
+var SelectContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 60%;\n  position: relative;\n  align-items: center;\n  svg{\n    position: absolute;\n    top: 0;\n    left: 20px;\n    transform: translate(50%, 70%);\n    z-index: 10;\n  }\n  > div {\n    width: 100%;\n    .select__placeholder, .select__single-value, input {\n      margin-left: 40px;\n      z-index: 100;\n      bottom: -10px;\n    }\n    .select__menu {\n      position: relative;\n      padding: 20px;\n    }\n    .select__clear-indicator {\n      position: relative;\n      left: 0;\n      transform: translate(-300%, -165%);\n      svg{\n        width: 30px;\n        height: 30px;\n      }\n    }\n    .select__control {\n      height: 45px;\n      padding-left: 10px;\n    }\n    .select__indicator {\n      bottom: 8px;\n      position: relative;\n    }\n    .select__menu{\n      top: 45px;\n    }\n    input {\n      position: relative;\n      top: -5px;\n    }\n  }\n"])));
 exports.SelectContainer = SelectContainer;
 var SearchContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  width: 90%;\n"])));
 exports.SearchContainer = SearchContainer;
@@ -116,5 +116,7 @@ var AdditionalTypesContainer = _styledComponents.default.div(_templateObject29 |
   return theme === null || theme === void 0 || (_theme$colors5 = theme.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.darkTextColor;
 });
 exports.AdditionalTypesContainer = AdditionalTypesContainer;
-var PhoneAutocompleteContainer = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n\n  h2 {\n    font-size: 20px;\n    margin-bottom: 20px;\n  }\n"])));
-exports.PhoneAutocompleteContainer = PhoneAutocompleteContainer;
+var PhoneAutocompleteContainer = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  position: relative;\n  h2 {\n    font-size: 20px;\n    margin-bottom: 20px;\n  }\n"])));
+exports.PhoneAutocompleteContainer = PhoneAutocompleteContainer;
+var ContinueButton = _styledComponents.default.span(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 35px;\n  bottom: 5px;\n  width:\n  button {\n    cursor: pointer;\n  }\n"])));
+exports.ContinueButton = ContinueButton;

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

@@ -431,7 +431,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
       name: field.code,
       "aria-label": field.code,
       className: "form",
-      placeholder: t(field.code.toUpperCase(), field.name),
+      placeholder: isCustomerMode ? t(field.code.toUpperCase() + '_OPTIONAL', field.name + ' (Optional)') : t(field.code.toUpperCase(), field.name),
       onChange: handleChangeInputEmail,
       ref: formMethods.register({
         required: !isCustomerMode && isRequiredField(field.code) ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')) : null,

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

@@ -414,7 +414,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     setValue: handleChangePhoneNumber,
     handleIsValid: setIsValidPhoneNumber,
     disabled: !isEdit
-  })), !isCheckout && showCustomerPassword && !requiredFields && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t('PASSWORD', 'Password')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+  })), !isCheckout && showCustomerPassword && !requiredFields && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t('PASSWORD', 'Password')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
     type: "password",
     name: "password",
     className: "form",
@@ -429,7 +429,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
         message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
       }
     })
-  })), showNotifications && showCustomerPromotions && !requiredFields && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.NotificationsGroupSwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')), /*#__PURE__*/_react.default.createElement(_styles.SwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('EMAILS', 'Emails')), /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+  })), showNotifications && showCustomerPromotions && !requiredFields && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.NotificationsGroupSwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')), /*#__PURE__*/_react.default.createElement(_styles.SwitchWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('EMAILS', 'Emails')), /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
     onChange: function onChange(value) {
       return handleEditNotifications('email', value);
     },
@@ -444,7 +444,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
       return handleEditNotifications('notification', value);
     },
     defaultChecked: notificationList === null || notificationList === void 0 ? void 0 : notificationList.notification
-  })))), showLangauges && !requiredFields && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.LanguageSelectorWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('LANGUAGE', 'Language')), /*#__PURE__*/_react.default.createElement(_LanguageSelector.LanguageSelector, null))), (_props$afterMidElemen = props.afterMidElements) === null || _props$afterMidElemen === void 0 ? void 0 : _props$afterMidElemen.map(function (MidElement, i) {
+  })))), showLangauges && !requiredFields && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.LanguageSelectorWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('LANGUAGE', 'Language')), /*#__PURE__*/_react.default.createElement(_LanguageSelector.LanguageSelector, null))), (_props$afterMidElemen = props.afterMidElements) === null || _props$afterMidElemen === void 0 ? void 0 : _props$afterMidElemen.map(function (MidElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
     }, MidElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "10.5.1",
+  "version": "10.5.3",
   "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.5.0",
+    "ordering-components-external": "9.5.2",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

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

@@ -65,7 +65,8 @@ const AddressListUI = (props) => {
     setIsAddressFormOpen,
     isProfile,
     isMobile,
-    onCancel
+    onCancel,
+    isOpenUserData
   } = props
 
   const [, t] = useLanguage()
@@ -190,6 +191,12 @@ const AddressListUI = (props) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (addressList?.addresses?.length === 0 && !addressList.loading && isCustomerMode) {
+      openAddress({})
+    }
+  }, [addressList.loading, addressList?.addresses?.length])
+
   const AddressListCallcenterLayout = ({ children }) => {
     return (
       <AddressHalfContainer>
@@ -197,7 +204,7 @@ const AddressListUI = (props) => {
           {children}
         </List>
         {addressOpen && (
-          <AddressFormContainer isCustomerMode={isCustomerMode}>
+          <AddressFormContainer isCustomerMode={isCustomerMode} isOpenUserData={isOpenUserData}>
             <TitleFormContainer>
               <CloseIcon>
                 <MdClose onClick={() => handleCloseAddressForm()} />
@@ -318,9 +325,13 @@ const AddressListUI = (props) => {
           addressList?.addresses?.length === 0 &&
           !isProductForm &&
           (
-            <WrappNotAddresses>
-              <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='112px' loading='lazy' />
-              <h1>{t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.')}</h1>
+            <WrappNotAddresses isCustomerMode={isCustomerMode}>
+              {!isCustomerMode && (
+                <>
+                  <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='112px' loading='lazy' />
+                  <h1>{t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.')}</h1>
+                </>
+              )}
             </WrappNotAddresses>
           )}
 

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

@@ -113,7 +113,7 @@ export const AddressItemActions = styled.div`
     cursor: pointer;
     margin: 0px 5px;
     font-size: 20px;
-    
+
     svg {
       color: #B1BCCC;
     }
@@ -127,7 +127,6 @@ export const AddressItemActions = styled.div`
 `
 
 export const WrappNotAddresses = styled.div`
-  height: 350px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -135,6 +134,13 @@ export const WrappNotAddresses = styled.div`
   width: 80%;
   margin: 20px auto 10px;
 
+  ${({ isCustomerMode }) => isCustomerMode ? css`
+    min-height: 200px;
+    height: 200px
+  ` : css`
+    height: 350px;
+  `}
+
   img {
     width: 200px;
     height: auto;
@@ -183,7 +189,7 @@ export const ContinueButton = styled.div`
   width: 100%;
   position: sticky;
   bottom: 1px;
-  
+
   button {
     width: 100%;
     white-space: nowrap;
@@ -208,7 +214,7 @@ export const AddressHalfContainer = styled.div`
 export const List = styled.div`
   width: ${({ halfWidth }) => halfWidth ? '50%' : '100%'};
   padding-right: 10px;
-  button { 
+  button {
     width: 100%;
   }
 `
@@ -218,7 +224,7 @@ export const AddressFormContainer = styled.div`
   position: sticky;
   right: 0;
   top: 0;
-  margin-top: ${({ isCustomerMode }) => isCustomerMode ? '-190px' : '0'};
+  margin-top: ${({ isCustomerMode, isOpenUserData }) => isCustomerMode && !isOpenUserData ? '-190px' : '0'};
   height: 100%;
   padding-left: 10px;
 `
@@ -250,13 +256,13 @@ export const CloseIcon = styled.div`
     &:active {
       background-color: ${() => darken(0.07, '#CCC')};
     }
-  
+
     border-radius: 50%;
   }
 `
 
 export const TitleFormContainer = styled.div`
-  display: flex; 
+  display: flex;
   align-items: flex-start;
   h1 {
     margin: 0 auto;

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

@@ -363,7 +363,7 @@ export const PhoneAutocomplete = (props) => {
       {
         value: 1,
         text: t('DELIVERY', 'Delivery'),
-        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
       },
       {
         value: 2,

package/src/themes/five/src/components/PhoneAutocomplete/styles.js

@@ -80,7 +80,7 @@ export const ContentWrapper = styled.div`
   height: 100%;
   padding: 0px 20px 0px;
   width: 70%;
-
+  position: relative;
   .select__control {
     border-radius: 30px;
   }
@@ -131,13 +131,16 @@ export const ContentWrapper = styled.div`
 
 export const WrappBtn = styled.div`
   width: 50%;
-  margin-top: 20px;
+  position: relative;
   button {
+    position: absolute;
+    top: 55px;
     min-width: 130px;
     max-width: 400px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    z-index: 100;
   }
 `
 
@@ -198,7 +201,7 @@ export const WrapInput = styled.div`
       width: calc(50% - 20px);
     }
   `}
-  
+
   div{
     color: #FFF;
     position: relative;
@@ -231,7 +234,7 @@ export const WrapInput = styled.div`
 `
 
 export const AutoComplete = styled.div`
-  width: 45%; 
+  width: 45%;
   button {
     position: absolute;
     left: 100%;
@@ -241,7 +244,7 @@ export const AutoComplete = styled.div`
 
 export const UserEdit = styled.div`
   > :first-child{
-     margin-bottom: 20px;  
+     margin-bottom: 20px;
   }
 `
 
@@ -287,6 +290,9 @@ export const SelectContainer = styled.div`
       bottom: 8px;
       position: relative;
     }
+    .select__menu{
+      top: 45px;
+    }
     input {
       position: relative;
       top: -5px;
@@ -377,9 +383,19 @@ export const AdditionalTypesContainer = styled.div`
 `
 
 export const PhoneAutocompleteContainer = styled.div`
-
+  position: relative;
   h2 {
     font-size: 20px;
     margin-bottom: 20px;
   }
 `
+
+export const ContinueButton = styled.span`
+  position: absolute;
+  right: 35px;
+  bottom: 5px;
+  width:
+  button {
+    cursor: pointer;
+  }
+`

package/src/themes/five/src/components/SignUpForm/index.js

@@ -417,7 +417,7 @@ const SignUpFormUI = (props) => {
                                         name={field.code}
                                         aria-label={field.code}
                                         className='form'
-                                        placeholder={t(field.code.toUpperCase(), field.name)}
+                                        placeholder={isCustomerMode ? t(field.code.toUpperCase() + '_OPTIONAL', field.name + ' (Optional)') : t(field.code.toUpperCase(), field.name)}
                                         onChange={handleChangeInputEmail}
                                         ref={formMethods.register({
                                           required: !isCustomerMode && isRequiredField(field.code)

package/src/themes/five/src/components/UserFormDetails/index.js

@@ -407,7 +407,7 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputPhoneNumberWrapper>
             )}
-            {!isCheckout && showCustomerPassword && !requiredFields && (
+            {!isCheckout && showCustomerPassword && !requiredFields && !isCustomerMode && (
               <InputGroup>
                 <p>{t('PASSWORD', 'Password')}</p>
                 <Input
@@ -430,7 +430,7 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputGroup>
             )}
-            {showNotifications && showCustomerPromotions && !requiredFields && (
+            {showNotifications && showCustomerPromotions && !requiredFields && !isCustomerMode && (
               <>
                 <NotificationsGroupSwitchWrapper>
                   <p>{t('MARKETING_NOTIFICATIONS', 'Marketing Notifications')}</p>
@@ -458,7 +458,7 @@ export const UserFormDetailsUI = (props) => {
                 </NotificationsGroupSwitchWrapper>
               </>
             )}
-            {showLangauges && !requiredFields && (
+            {showLangauges && !requiredFields && !isCustomerMode && (
               <>
                 <LanguageSelectorWrapper>
                   <p>{t('LANGUAGE', 'Language')}</p>