ordering-ui-external 1.0.0 → 1.1.1

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

@@ -9,7 +9,7 @@ exports.UserPopover = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _reactPopper = require("react-popper");
 
@@ -23,8 +23,6 @@ var _utils = require("../../../../../utils");
 
 var _AiOutlineMenu = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineMenu"));
 
-var _styledComponents = require("styled-components");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -54,8 +52,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var optionsDefault = [{
   name: 'search',
   pathname: '/explore',
-  displayName: 'explore',
-  key: 'explore'
+  displayName: 'My home',
+  key: 'my_home'
+}, {
+  name: 'business_search',
+  pathname: '/business_search',
+  displayName: 'Browse & Search',
+  key: 'browse_search'
 }, {
   name: 'orders',
   pathname: '/profile/orders',
@@ -64,7 +67,7 @@ var optionsDefault = [{
 }];
 
 var UserPopover = function UserPopover(props) {
-  var _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _configs$advanced_off, _configs$advanced_off2, _theme$layouts, _theme$layouts$profil, _theme$layouts$profil2, _theme$layouts$profil3, _theme$layouts$profil4, _theme$layouts$profil5, _props$beforeElements, _props$beforeComponen, _sessionState$user, _sessionState$user2, _props$afterComponent, _props$afterElements;
+  var _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _configs$advanced_off, _configs$advanced_off2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _props$beforeElements, _props$beforeComponen, _sessionState$user, _sessionState$user2, _props$afterComponent, _props$afterElements;
 
   var open = props.open,
       isHome = props.isHome,
@@ -72,29 +75,32 @@ var UserPopover = function UserPopover(props) {
       withLogout = props.withLogout,
       isCustomerMode = props.isCustomerMode;
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       sessionState = _useSession2[0];
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useEvent = (0, _orderingComponents.useEvent)(),
+  var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
       _useEvent2 = _slicedToArray(_useEvent, 1),
       events = _useEvent2[0];
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
-  var theme = (0, _styledComponents.useTheme)();
+  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
+      _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
+      orderingTheme = _useOrderingTheme2[0];
+
   var referenceElement = (0, _react.useRef)();
   var popperElement = (0, _react.useRef)();
   var arrowElement = (0, _react.useRef)();
   var isWalletEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$cash_wallet = configs.cash_wallet) === null || _configs$cash_wallet === void 0 ? void 0 : _configs$cash_wallet.value) && (configs === null || configs === void 0 ? void 0 : (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1' && ((configs === null || configs === void 0 ? void 0 : (_configs$wallet_cash_ = configs.wallet_cash_enabled) === null || _configs$wallet_cash_ === void 0 ? void 0 : _configs$wallet_cash_.value) === '1' || (configs === null || configs === void 0 ? void 0 : (_configs$wallet_credi = configs.wallet_credit_point_enabled) === null || _configs$wallet_credi === void 0 ? void 0 : _configs$wallet_credi.value) === '1');
   var isPromotionsEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$advanced_off = configs.advanced_offers_module) === null || _configs$advanced_off === void 0 ? void 0 : _configs$advanced_off.value) === '1' || (configs === null || configs === void 0 ? void 0 : (_configs$advanced_off2 = configs.advanced_offers_module) === null || _configs$advanced_off2 === void 0 ? void 0 : _configs$advanced_off2.value) === true;
-  var isAddressListNewPage = ((_theme$layouts = theme.layouts) === null || _theme$layouts === void 0 ? void 0 : (_theme$layouts$profil = _theme$layouts.profile) === null || _theme$layouts$profil === void 0 ? void 0 : (_theme$layouts$profil2 = _theme$layouts$profil.components) === null || _theme$layouts$profil2 === void 0 ? void 0 : (_theme$layouts$profil3 = _theme$layouts$profil2.address_list) === null || _theme$layouts$profil3 === void 0 ? void 0 : (_theme$layouts$profil4 = _theme$layouts$profil3.components) === null || _theme$layouts$profil4 === void 0 ? void 0 : (_theme$layouts$profil5 = _theme$layouts$profil4.layout) === null || _theme$layouts$profil5 === void 0 ? void 0 : _theme$layouts$profil5.position) === 'new_page';
+  var isAddressListNewPage = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.profile) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.address_list) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) === null || _orderingTheme$theme$4 === void 0 ? void 0 : (_orderingTheme$theme$5 = _orderingTheme$theme$4.layout) === null || _orderingTheme$theme$5 === void 0 ? void 0 : _orderingTheme$theme$5.position) === 'new_page';
   var extraOptions = [{
     name: 'profile',
     pathname: '/profile',
@@ -267,11 +273,11 @@ var UserPopover = function UserPopover(props) {
 exports.UserPopover = UserPopover;
 
 var LogoutActionUI = function LogoutActionUI(props) {
-  var _useLanguage3 = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage3 = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage4 = _slicedToArray(_useLanguage3, 2),
       t = _useLanguage4[1];
 
-  var _useCustomer = (0, _orderingComponents.useCustomer)(),
+  var _useCustomer = (0, _orderingComponentsExternal.useCustomer)(),
       _useCustomer2 = _slicedToArray(_useCustomer, 2),
       deleteUserCustomer = _useCustomer2[1].deleteUserCustomer;
 
@@ -305,5 +311,5 @@ var PopoverListItemLogout = function PopoverListItemLogout(props) {
     UIComponent: LogoutActionUI,
     onClose: props.onClose
   };
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.LogoutAction, logoutActionProps);
-};
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.LogoutAction, logoutActionProps);
+};

package/_modules/themes/five/src/components/UserProfileForm/ProfileOptions/index.js

@@ -17,7 +17,9 @@ var _BsPerson = _interopRequireDefault(require("@meronex/icons/bs/BsPerson"));
 
 var _AiOutlineUnorderedList = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineUnorderedList"));
 
-var _orderingComponents = require("ordering-components-external");
+var _FaAddressBook = _interopRequireDefault(require("@meronex/icons/fa/FaAddressBook"));
+
+var _orderingComponentsExternal = require("ordering-components-external");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,20 +40,28 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var ProfileOptions = function ProfileOptions(_ref) {
+  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5;
+
   var value = _ref.value;
 
   var _useState = (0, _react.useState)(value),
       _useState2 = _slicedToArray(_useState, 1),
       tabValue = _useState2[0];
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useEvent = (0, _orderingComponents.useEvent)(),
+  var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
       _useEvent2 = _slicedToArray(_useEvent, 1),
       events = _useEvent2[0];
 
+  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
+      _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
+      orderingTheme = _useOrderingTheme2[0];
+
+  var showAddressListTab = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.profile) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.address_list) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) === null || _orderingTheme$theme$4 === void 0 ? void 0 : (_orderingTheme$theme$5 = _orderingTheme$theme$4.layout) === null || _orderingTheme$theme$5 === void 0 ? void 0 : _orderingTheme$theme$5.position) === 'new_page';
+
   var handleGoToPage = function handleGoToPage(data) {
     events.emit('go_to_page', data);
   };
@@ -66,7 +76,15 @@ var ProfileOptions = function ProfileOptions(_ref) {
         page: 'profile'
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_BsPerson.default, null), " ", t('MY_ACCOUNT', 'My Account'))), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+  }, /*#__PURE__*/_react.default.createElement(_BsPerson.default, null), " ", t('MY_ACCOUNT', 'My Account'))), showAddressListTab && /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+    active: tabValue === 'addresses'
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    onClick: function onClick() {
+      return handleGoToPage({
+        page: 'addresses'
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FaAddressBook.default, null), " ", t('MY_ADDRESSES', 'My Addresses'))), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
     active: tabValue === 'orders'
   }, /*#__PURE__*/_react.default.createElement("a", {
     onClick: function onClick() {
@@ -77,4 +95,4 @@ var ProfileOptions = function ProfileOptions(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AiOutlineUnorderedList.default, null), " ", t('MY_ORDERS', 'My orders')))));
 };
 
-exports.ProfileOptions = ProfileOptions;
+exports.ProfileOptions = ProfileOptions;

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

@@ -11,10 +11,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _UserFormDetails = require("../UserFormDetails");
 
+var _UserFormDetails2 = require("../../../../../components/UserFormDetails");
+
+var _Modal = require("../Modal");
+
+var _VerifyCodeForm = require("../VerifyCodeForm");
+
+var _useCountdownTimer3 = require("../../../../../hooks/useCountdownTimer");
+
 var _AddressList = require("../AddressList");
 
 var _Confirm = require("../Confirm");
@@ -27,6 +35,8 @@ var _FiCamera = _interopRequireDefault(require("@meronex/icons/fi/FiCamera"));
 
 var _BiImage = _interopRequireDefault(require("@meronex/icons/bi/BiImage"));
 
+var _styledComponents = require("styled-components");
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,14 +45,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -56,7 +66,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var UserProfileFormUI = function UserProfileFormUI(props) {
-  var _formState$changes2, _props$beforeElements, _props$beforeComponen, _formState$changes3, _formState$changes4, _formState$changes5, _formState$result, _formState$changes6, _formState$changes7, _props$afterComponent, _props$afterElements;
+  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _formState$changes5, _verifyPhoneState$res3, _props$beforeElements, _props$beforeComponen, _formState$changes6, _formState$changes7, _formState$changes8, _formState$result, _formState$changes9, _formState$changes10, _props$afterComponent, _props$afterElements;
 
   var userData = props.userData,
       handleButtonUpdateClick = props.handleButtonUpdateClick,
@@ -64,20 +74,34 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
       formState = props.formState,
       cleanFormState = props.cleanFormState,
       toggleIsEdit = props.toggleIsEdit,
-      isHiddenAddress = props.isHiddenAddress;
+      isHiddenAddress = props.isHiddenAddress,
+      handleSendVerifyCode = props.handleSendVerifyCode,
+      verifyPhoneState = props.verifyPhoneState,
+      setFormState = props.setFormState;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var theme = (0, _styledComponents.useTheme)();
+
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       user = _useSession2[0].user;
 
+  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
+      _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
+      orderingTheme = _useOrderingTheme2[0];
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      edit = _useState2[0],
-      setEdit = _useState2[1];
+      willVerifyOtpState = _useState2[0],
+      setWillVerifyOtpState = _useState2[1];
+
+  var _useCountdownTimer = (0, _useCountdownTimer3.useCountdownTimer)(600, willVerifyOtpState),
+      _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
+      otpLeftTime = _useCountdownTimer2[0],
+      resetOtpLeftTime = _useCountdownTimer2[2];
 
   var _useState3 = (0, _react.useState)({
     open: false,
@@ -88,6 +112,9 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
       setAlertState = _useState4[1];
 
   var inputRef = (0, _react.useRef)(null);
+  var showCustomerPicture = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme = orderingTheme.theme) !== null && _orderingTheme$theme !== void 0 && (_orderingTheme$theme$ = _orderingTheme$theme.profile) !== null && _orderingTheme$theme$ !== void 0 && (_orderingTheme$theme$2 = _orderingTheme$theme$.components) !== null && _orderingTheme$theme$2 !== void 0 && (_orderingTheme$theme$3 = _orderingTheme$theme$2.picture) !== null && _orderingTheme$theme$3 !== void 0 && _orderingTheme$theme$3.hidden);
+  var showAddressList = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme2 = orderingTheme.theme) !== null && _orderingTheme$theme2 !== void 0 && (_orderingTheme$theme3 = _orderingTheme$theme2.profile) !== null && _orderingTheme$theme3 !== void 0 && (_orderingTheme$theme4 = _orderingTheme$theme3.components) !== null && _orderingTheme$theme4 !== void 0 && (_orderingTheme$theme5 = _orderingTheme$theme4.address_list) !== null && _orderingTheme$theme5 !== void 0 && _orderingTheme$theme5.hidden);
+  var userFormLayoutRow = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme6 = orderingTheme.theme) === null || _orderingTheme$theme6 === void 0 ? void 0 : (_orderingTheme$theme7 = _orderingTheme$theme6.profile) === null || _orderingTheme$theme7 === void 0 ? void 0 : (_orderingTheme$theme8 = _orderingTheme$theme7.components) === null || _orderingTheme$theme8 === void 0 ? void 0 : (_orderingTheme$theme9 = _orderingTheme$theme8.layout) === null || _orderingTheme$theme9 === void 0 ? void 0 : _orderingTheme$theme9.position) === 'row';
 
   var handleFiles = function handleFiles(files) {
     if (files.length === 1) {
@@ -116,7 +143,6 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
   };
 
   var toggleEditState = function toggleEditState(val) {
-    setEdit(val);
     toggleIsEdit();
 
     if (!val) {
@@ -137,17 +163,68 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     });
   };
 
+  var handleSendOtp = function handleSendOtp() {
+    var _formState$changes, _formState$changes2;
+
+    if (willVerifyOtpState && formState !== null && formState !== void 0 && (_formState$changes = formState.changes) !== null && _formState$changes !== void 0 && _formState$changes.cellphone && formState !== null && formState !== void 0 && (_formState$changes2 = formState.changes) !== null && _formState$changes2 !== void 0 && _formState$changes2.country_phone_code) {
+      var _formState$changes3 = formState === null || formState === void 0 ? void 0 : formState.changes,
+          cellphone = _formState$changes3.cellphone,
+          countryPhoneCode = _formState$changes3.country_phone_code;
+
+      resetOtpLeftTime();
+      handleSendVerifyCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode
+      });
+    }
+  };
+
   (0, _react.useEffect)(function () {
-    var _formState$changes;
+    var _formState$changes4;
 
-    if ((_formState$changes = formState.changes) !== null && _formState$changes !== void 0 && _formState$changes.photo) {
+    if ((_formState$changes4 = formState.changes) !== null && _formState$changes4 !== void 0 && _formState$changes4.photo) {
       var isImage = true;
       handleButtonUpdateClick(null, isImage);
     }
-  }, [(_formState$changes2 = formState.changes) === null || _formState$changes2 === void 0 ? void 0 : _formState$changes2.photo]);
+  }, [(_formState$changes5 = formState.changes) === null || _formState$changes5 === void 0 ? void 0 : _formState$changes5.photo]);
+  (0, _react.useEffect)(function () {
+    var _verifyPhoneState$res;
+
+    if (verifyPhoneState !== null && verifyPhoneState !== void 0 && (_verifyPhoneState$res = verifyPhoneState.result) !== null && _verifyPhoneState$res !== void 0 && _verifyPhoneState$res.error) {
+      var _verifyPhoneState$res2;
+
+      setAlertState({
+        open: true,
+        content: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : (_verifyPhoneState$res2 = verifyPhoneState.result) === null || _verifyPhoneState$res2 === void 0 ? void 0 : _verifyPhoneState$res2.result) || [t('ERROR', 'Error')]
+      });
+    } else {
+      resetOtpLeftTime();
+    }
+  }, [verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : (_verifyPhoneState$res3 = verifyPhoneState.result) === null || _verifyPhoneState$res3 === void 0 ? void 0 : _verifyPhoneState$res3.result]);
   (0, _react.useEffect)(function () {
     toggleIsEdit();
   }, []);
+  (0, _react.useEffect)(function () {
+    handleSendOtp();
+  }, [willVerifyOtpState]);
+  (0, _react.useEffect)(function () {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        content: t('TIME_IS_UP_PLEASE_RESEND_CODE', 'Time is up. Please resend code again')
+      });
+    }
+  }, [otpLeftTime]);
+
+  var handleSendPhoneCode = function handleSendPhoneCode(values) {
+    setWillVerifyOtpState(false);
+    setFormState(_objectSpread(_objectSpread({}, formState), {}, {
+      changes: _objectSpread(_objectSpread({}, formState === null || formState === void 0 ? void 0 : formState.changes), {}, {
+        verification_code: values === null || values === void 0 ? void 0 : values.code
+      })
+    }));
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -160,47 +237,51 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     value: "account"
   }), /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.UserProfileContainer, {
     mbottom: isHiddenAddress && 25
-  }, /*#__PURE__*/_react.default.createElement(_styles.UserImage, {
+  }, showCustomerPicture && /*#__PURE__*/_react.default.createElement(_styles.UserImage, {
     className: "user-image"
   }, /*#__PURE__*/_react.default.createElement(_styles.Image, {
     onClick: function onClick() {
       return handleClickImage();
     },
-    isImage: (user === null || user === void 0 ? void 0 : user.photo) || (formState === null || formState === void 0 ? void 0 : (_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : _formState$changes3.photo) && !formState.result.error
-  }, /*#__PURE__*/_react.default.createElement(_orderingComponents.ExamineClick, {
+    isImage: (user === null || user === void 0 ? void 0 : user.photo) || (formState === null || formState === void 0 ? void 0 : (_formState$changes6 = formState.changes) === null || _formState$changes6 === void 0 ? void 0 : _formState$changes6.photo) && !formState.result.error
+  }, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ExamineClick, {
     onFiles: handleFiles,
     childRef: function childRef(e) {
       inputRef.current = e;
     },
     accept: "image/png, image/jpeg, image/jpg",
     disabled: formState.loading
-  }, /*#__PURE__*/_react.default.createElement(_orderingComponents.DragAndDrop, {
+  }, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.DragAndDrop, {
     onDrop: function onDrop(dataTransfer) {
       return handleFiles(dataTransfer.files);
     },
     accept: "image/png, image/jpeg, image/jpg",
     disabled: formState.loading
-  }, (_formState$changes4 = formState.changes) !== null && _formState$changes4 !== void 0 && _formState$changes4.photo && formState.loading ? /*#__PURE__*/_react.default.createElement(_styles.SkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)) : !((_formState$changes5 = formState.changes) !== null && _formState$changes5 !== void 0 && _formState$changes5.photo) || ((_formState$result = formState.result) === null || _formState$result === void 0 ? void 0 : _formState$result.result) === 'Network Error' || formState.result.error ? user !== null && user !== void 0 && user.photo ? /*#__PURE__*/_react.default.createElement("img", {
+  }, (_formState$changes7 = formState.changes) !== null && _formState$changes7 !== void 0 && _formState$changes7.photo && formState.loading ? /*#__PURE__*/_react.default.createElement(_styles.SkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null)) : !((_formState$changes8 = formState.changes) !== null && _formState$changes8 !== void 0 && _formState$changes8.photo) || ((_formState$result = formState.result) === null || _formState$result === void 0 ? void 0 : _formState$result.result) === 'Network Error' || formState.result.error ? user !== null && user !== void 0 && user.photo ? /*#__PURE__*/_react.default.createElement("img", {
     src: user === null || user === void 0 ? void 0 : user.photo,
     alt: "user image",
     width: "200px",
     height: "200px",
     loading: "lazy"
-  }) : /*#__PURE__*/_react.default.createElement(_styles.UploadImageIcon, null, /*#__PURE__*/_react.default.createElement(_BiImage.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('DRAG_DROP_IMAGE_HERE', 'Put your image here'))) : (formState === null || formState === void 0 ? void 0 : (_formState$changes6 = formState.changes) === null || _formState$changes6 === void 0 ? void 0 : _formState$changes6.photo) && formState.result.error && /*#__PURE__*/_react.default.createElement("img", {
-    src: formState === null || formState === void 0 ? void 0 : (_formState$changes7 = formState.changes) === null || _formState$changes7 === void 0 ? void 0 : _formState$changes7.photo,
+  }) : /*#__PURE__*/_react.default.createElement(_styles.UploadImageIcon, null, /*#__PURE__*/_react.default.createElement(_BiImage.default, null), /*#__PURE__*/_react.default.createElement("span", null, t('DRAG_DROP_IMAGE_HERE', 'Put your image here'))) : (formState === null || formState === void 0 ? void 0 : (_formState$changes9 = formState.changes) === null || _formState$changes9 === void 0 ? void 0 : _formState$changes9.photo) && formState.result.error && /*#__PURE__*/_react.default.createElement("img", {
+    src: formState === null || formState === void 0 ? void 0 : (_formState$changes10 = formState.changes) === null || _formState$changes10 === void 0 ? void 0 : _formState$changes10.photo,
     alt: "user image",
     loading: "lazy"
   })))), /*#__PURE__*/_react.default.createElement(_styles.Camera, null, /*#__PURE__*/_react.default.createElement(_FiCamera.default, null))), /*#__PURE__*/_react.default.createElement(_styles.SideForm, {
     className: "user-form"
-  }, /*#__PURE__*/_react.default.createElement(_styles.WrapperForm, null, /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.WrapperForm, null, userFormLayoutRow ? /*#__PURE__*/_react.default.createElement(_UserFormDetails2.UserFormDetailsUI, _extends({}, props, {
     onCancel: toggleEditState,
-    onCloseProfile: function onCloseProfile() {
-      return setEdit(false);
-    },
-    isHiddenAddress: isHiddenAddress
-  }))))), ((userData === null || userData === void 0 ? void 0 : userData.addresses) || (user === null || user === void 0 ? void 0 : user.addresses)) && !isHiddenAddress && /*#__PURE__*/_react.default.createElement(_styles.SavedPlaces, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MY_ADDRESSES', 'My Saved places')), /*#__PURE__*/_react.default.createElement(_AddressList.AddressList, {
+    isOriginalLayout: true,
+    isHiddenAddress: isHiddenAddress,
+    isOldLayout: true
+  })) : /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
+    onCancel: toggleEditState,
+    isHiddenAddress: isHiddenAddress,
+    setWillVerifyOtpState: setWillVerifyOtpState
+  }))))), ((userData === null || userData === void 0 ? void 0 : userData.addresses) || (user === null || user === void 0 ? void 0 : user.addresses)) && !isHiddenAddress && showAddressList && /*#__PURE__*/_react.default.createElement(_styles.SavedPlaces, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MY_ADDRESSES', 'My Saved places')), /*#__PURE__*/_react.default.createElement(_AddressList.AddressList, {
     isModal: true,
-    addressList: user === null || user === void 0 ? void 0 : user.addresses
+    addressList: user === null || user === void 0 ? void 0 : user.addresses,
+    isProfile: true
   }))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
     title: t('PROFILE', 'Profile'),
     content: alertState.content,
@@ -213,7 +294,22 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
       return closeAlert();
     },
     closeOnBackdrop: false
-  }), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
+  }), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    title: t('ENTER_VERIFICATION_CODE', 'Enter verification code'),
+    open: willVerifyOtpState,
+    width: "700px",
+    height: "420px",
+    onClose: function onClose() {
+      return setWillVerifyOtpState(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeForm.VerifyCodeForm, {
+    otpLeftTime: otpLeftTime,
+    credentials: formState === null || formState === void 0 ? void 0 : formState.changes,
+    handleSendOtp: handleSendOtp,
+    handleCheckPhoneCode: handleSendPhoneCode,
+    email: (userData === null || userData === void 0 ? void 0 : userData.email) || (user === null || user === void 0 ? void 0 : user.email),
+    isPhone: true
+  })), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {
     return /*#__PURE__*/_react.default.createElement(AfterComponent, _extends({
       key: i
     }, props));
@@ -229,7 +325,7 @@ var UserProfileForm = function UserProfileForm(props) {
     UIComponent: UserProfileFormUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.UserFormDetails, UserProfileProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.UserFormDetails, UserProfileProps);
 };
 
-exports.UserProfileForm = UserProfileForm;
+exports.UserProfileForm = UserProfileForm;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 
@@ -65,7 +65,7 @@ var UserDetails = function UserDetails(props) {
     UIComponent: _UserFormDetails.UserFormDetailsUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.UserFormDetails, userDetailsProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.UserFormDetails, userDetailsProps);
 };
 
 var UserVerificationUI = function UserVerificationUI(props) {
@@ -79,15 +79,15 @@ var UserVerificationUI = function UserVerificationUI(props) {
       checkVerifyPhoneCode = props.checkVerifyPhoneCode,
       cleanErrorsState = props.cleanErrorsState;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       _useSession2$ = _useSession2[0],
       auth = _useSession2$.auth,
@@ -363,7 +363,7 @@ var UserVerification = function UserVerification(props) {
     UIComponent: UserVerificationUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.UserVerification, verifyProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.UserVerification, verifyProps);
 };
 
-exports.UserVerification = UserVerification;
+exports.UserVerification = UserVerification;

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

@@ -0,0 +1,86 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerifyCodeForm = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _orderingComponentsExternal = require("ordering-components-external");
+
+var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
+
+var _Buttons = require("../../styles/Buttons");
+
+var _utils = require("../../../../../utils");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var VerifyCodeForm = function VerifyCodeForm(props) {
+  var otpLeftTime = props.otpLeftTime,
+      handleSendOtp = props.handleSendOtp,
+      handleCheckPhoneCode = props.handleCheckPhoneCode,
+      credentials = props.credentials,
+      email = props.email,
+      isPhone = props.isPhone;
+
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+      _useLanguage2 = _slicedToArray(_useLanguage, 2),
+      t = _useLanguage2[1];
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      otpState = _useState2[0],
+      setOtpState = _useState2[1];
+
+  var numOtpInputs = 4;
+  (0, _react.useEffect)(function () {
+    if ((otpState === null || otpState === void 0 ? void 0 : otpState.length) === numOtpInputs) {
+      var cellphone = credentials.cellphone,
+          countryPhoneCode = credentials.country_phone_code;
+      handleCheckPhoneCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode,
+        code: otpState
+      });
+    }
+  }, [otpState]);
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("p", null, t('SENT_VERIFY_CODE_ON_EMAIL', 'We sent you a verication code on _email_').replace('_email_', isPhone ? credentials === null || credentials === void 0 ? void 0 : credentials.cellphone : email)), /*#__PURE__*/_react.default.createElement(_styles.DownTimer, null, (0, _utils.formatSeconds)(otpLeftTime)), /*#__PURE__*/_react.default.createElement(_styles.OtpWrapper, null, /*#__PURE__*/_react.default.createElement(_reactOtpInput.default, {
+    value: otpState,
+    onChange: function onChange(otp) {
+      return setOtpState(otp);
+    },
+    numInputs: numOtpInputs,
+    containerStyle: "otp-container",
+    inputStyle: "otp-input",
+    isInputNum: true,
+    shouldAutoFocus: true
+  })), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primaryContrast",
+    naked: true,
+    onClick: handleSendOtp
+  }, t('RESEND_CODE', 'Resend code')));
+};
+
+exports.VerifyCodeForm = VerifyCodeForm;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OtpWrapper = exports.DownTimer = exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _polished = require("polished");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0px auto;\n  max-width: 350px;\n\n  > p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 18px;\n  }\n\n  > button {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    padding: 0px;\n    transition: all 0.3s linear;\n\n    &:hover {\n      background-color: ", ";\n    }\n  }\n\n  @media (min-width: 576px) {\n    max-width: 500px;\n  }\n"])), function (props) {
+  return props.theme.colors.primaryContrast;
+});
+
+exports.Container = Container;
+
+var DownTimer = _styledComponents.default.h4(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 0px;\n  font-weight: 400;\n  font-size: 24px;\n  line-height: 36px;\n"])));
+
+exports.DownTimer = DownTimer;
+
+var OtpWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: 18px;\n\n  .otp-container {\n    display: flex;\n    justify-content: space-between;\n    margin: 20px 0px;\n    \n    .otp-input {\n      width: 50px !important;\n      height: 55px;\n      border: 1px solid #DEE2E6;\n      border-radius: 7.6px;\n      background-color: #FFF;\n      outline: none;\n      font-size: 20px;\n      font-weight: bold; \n\n      &:focus{\n        border-color: ", " !important;\n      }\n\n      &::placeholder,\n      &::-webkit-input-placeholder {\n        color: #B1BCCC;\n      }\n      &:-ms-input-placeholder {\n        color: #B1BCCC;\n      }\n    }\n  }\n\n  @media (min-width: 576px) {\n    .otp-container {\n      .otp-input {\n        width: 100px !important;\n        height: 105px;\n        font-size: 36px;\n      }\n    }\n  }\n"])), function () {
+  return (0, _polished.darken)(0.07, '#DEE2E6');
+});
+
+exports.OtpWrapper = OtpWrapper;