ordering-ui-admin-external 1.6.2 → 1.6.4

package/_bundles/{ordering-ui-admin.488bdda58ba73188d3b5.js.LICENSE.txt → ordering-ui-admin.e16bb3bc2dee43d1cf23.js.LICENSE.txt}

@@ -35,9 +35,9 @@ object-assign
   */
 
 /*!
-  * chartjs-adapter-moment v1.0.0
+  * chartjs-adapter-moment v1.0.1
   * https://www.chartjs.org
-  * (c) 2021 chartjs-adapter-moment Contributors
+  * (c) 2022 chartjs-adapter-moment Contributors
   * Released under the MIT license
   */
 
@@ -75,13 +75,13 @@ object-assign
  */
 
 /*!
- * Cropper.js v1.5.12
+ * Cropper.js v1.5.13
  * https://fengyuanchen.github.io/cropperjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2021-06-12T08:00:17.411Z
+ * Date: 2022-11-20T05:30:46.114Z
  */
 
 /*!

package/_modules/components/BusinessIntelligence/Reports/index.js

@@ -175,7 +175,7 @@ var Reports = function Reports(props) {
     onClick: function onClick() {
       return handleMenuCollapse(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('ADVANCED_REPORTS', 'Advanced Reports'))), /*#__PURE__*/_react.default.createElement(_styles2.ReportsList, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('ENTERPRISE_REPORTS', 'Enterprise reports'))), /*#__PURE__*/_react.default.createElement(_styles2.ReportsList, {
     className: "row"
   }, advancedReportsList && advancedReportsList.map(function (report, i) {
     return /*#__PURE__*/_react.default.createElement("div", {

package/_modules/components/CartRecovery/OpenCartsFilterGroup/index.js

@@ -52,7 +52,7 @@ var OpenCartsFilterGroupUI = function OpenCartsFilterGroupUI(props) {
   };
   var scrollDown = function scrollDown(e) {
     if (!e.target.closest('.ordering-calendar-btn')) return;
-    var el = document.querySelector('.popup-dialog');
+    var el = document.querySelector('.dialog-inner');
     if ((el === null || el === void 0 ? void 0 : el.scrollHeight) > (el === null || el === void 0 ? void 0 : el.clientHeight)) {
       var top = contentEndRef.current.offsetTop;
       el.scrollTo({

package/_modules/components/CartRecovery/RecoveryActionHeader/index.js

@@ -34,7 +34,7 @@ var RecoveryActionHeader = function RecoveryActionHeader(props) {
     onClick: function onClick() {
       return handleMenuCollapse(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement(_styles2.HeaderTitle, null, t('RECOVERY_ACTIONS', 'Recovery actions')), /*#__PURE__*/_react.default.createElement(_styles2.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement(_styles2.HeaderTitle, null, t('CART_RECOVERY_AUTOMATION', 'Cart recovery automation')), /*#__PURE__*/_react.default.createElement(_styles2.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "primary"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null)), /*#__PURE__*/_react.default.createElement(_styles2.InfoContent, null, t('RECOVERY_ACTIONS_INFO', 'If you have multiple actions that apply to an order, then your customer will see the highest ranking action. To change the ranking of your actions just drag and drop.')))), /*#__PURE__*/_react.default.createElement(_styles2.TopRightSection, null, /*#__PURE__*/_react.default.createElement(_styles2.WrapperSearch, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     borderRadius: "8px",

package/_modules/components/Delivery/AddressForm/index.js

@@ -472,7 +472,7 @@ var AddressFormUI = function AddressFormUI(props) {
         setAddressValue(e.target.value);
       },
       value: addressValue,
-      autoComplete: "new-field",
+      autoComplete: "new-password",
       countryCode: (configState === null || configState === void 0 ? void 0 : (_configState$configs8 = configState.configs) === null || _configState$configs8 === void 0 ? void 0 : (_configState$configs9 = _configState$configs8.country_autocomplete) === null || _configState$configs9 === void 0 ? void 0 : _configState$configs9.value) || '*'
     })), /*#__PURE__*/_react.default.createElement(_GoogleGpsButton.GoogleGpsButton, {
       className: "gps-button",

package/_modules/components/Delivery/DriversCompaniesListing/index.js

@@ -95,7 +95,7 @@ var DriversCompaniesListingUI = function DriversCompaniesListingUI(props) {
     onClick: function onClick() {
       return handleMenuCollapse(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('DRIVERS_COMPANIES', 'Drivers companies'))), /*#__PURE__*/_react.default.createElement(_styles2.HeaderRightContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('DELIVERY_COMPANIES', 'Delivery companies'))), /*#__PURE__*/_react.default.createElement(_styles2.HeaderRightContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Button, {
     borderRadius: "8px",
     color: "lightPrimary",
     onClick: function onClick() {

package/_modules/components/Delivery/DriversGroupLogs/index.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -16,6 +15,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 _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); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -131,7 +131,7 @@ var DriversGroupLogsUI = function DriversGroupLogsUI(props) {
     var _log$user, _log$user2, _log$user3;
     return /*#__PURE__*/_react.default.createElement("tbody", {
       key: log.id
-    }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles.UserInfoContainer, null, /*#__PURE__*/_react.default.createElement("p", null, log === null || log === void 0 ? void 0 : (_log$user = log.user) === null || _log$user === void 0 ? void 0 : _log$user.name, " ", log === null || log === void 0 ? void 0 : (_log$user2 = log.user) === null || _log$user2 === void 0 ? void 0 : _log$user2.lastname), /*#__PURE__*/_react.default.createElement("p", null, log === null || log === void 0 ? void 0 : (_log$user3 = log.user) === null || _log$user3 === void 0 ? void 0 : _log$user3.email))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles.DataListTable, null, log === null || log === void 0 ? void 0 : log.data.map(function (item, i) {
+    }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles.UserInfoContainer, null, /*#__PURE__*/_react.default.createElement("p", null, log === null || log === void 0 ? void 0 : (_log$user = log.user) === null || _log$user === void 0 ? void 0 : _log$user.name, " ", log === null || log === void 0 ? void 0 : (_log$user2 = log.user) === null || _log$user2 === void 0 ? void 0 : _log$user2.lastname), /*#__PURE__*/_react.default.createElement("p", null, log === null || log === void 0 ? void 0 : (_log$user3 = log.user) === null || _log$user3 === void 0 ? void 0 : _log$user3.email))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_styles.DataListTable, null, (_typeof(log === null || log === void 0 ? void 0 : log.data) === 'object' ? Object.values(log === null || log === void 0 ? void 0 : log.data) : log === null || log === void 0 ? void 0 : log.data).map(function (item, i) {
       return /*#__PURE__*/_react.default.createElement("tbody", {
         key: i
       }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, getAttributeName(item === null || item === void 0 ? void 0 : item.attribute)), /*#__PURE__*/_react.default.createElement("td", null, typeof (item === null || item === void 0 ? void 0 : item.new) !== 'undefined' ? "".concat(item === null || item === void 0 ? void 0 : item.new) : (item === null || item === void 0 ? void 0 : item.added.length) > 0 ? item === null || item === void 0 ? void 0 : item.added.toString() : t('NONE', 'None')), /*#__PURE__*/_react.default.createElement("td", null, typeof (item === null || item === void 0 ? void 0 : item.old) !== 'undefined' ? "".concat(item === null || item === void 0 ? void 0 : item.old) : (item === null || item === void 0 ? void 0 : item.removed.length) > 0 ? item === null || item === void 0 ? void 0 : item.removed.toString() : t('NONE', 'None'))));

package/_modules/components/Delivery/DriversGroupsListing/index.js

@@ -179,7 +179,7 @@ var DriversGroupsListingUI = function DriversGroupsListingUI(props) {
     onClick: function onClick() {
       return handleMenuCollapse();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('DRIVERS_GROUPS', 'Drivers groups')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('DELIVERY_AUTOMATION', 'Delivery automation')), /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
     placement: "bottom",
     overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, null, t('START_TUTORIAL', 'Start tutorial'))
   }, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {

package/_modules/components/Home/HomePage/index.js

@@ -13,6 +13,8 @@ var _Buttons = require("../../../styles/Buttons");
 var _InfoShareContext = require("../../../contexts/InfoShareContext");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _useWindowSize2 = require("../../../hooks/useWindowSize");
+var _styledComponents = require("styled-components");
+var _utils = require("../../../utils");
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,11 +31,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 HomeUI = function HomeUI(props) {
-  var _sessionState$user, _sessionState$user2;
-  var ordersList = props.ordersList,
+  var _projectStatus$projec, _sessionState$user, _projectStatus$projec2, _projectStatus$projec3, _project$projectStatu, _projectStatus$projec4, _projectStatus$projec5, _project$projectStatu2, _projectStatus$projec6, _projectStatus$projec7, _project$projectStatu3, _projectStatus$projec8, _project$projectStatu4, _projectStatus$projec9, _sessionState$user2, _sessionState$user3;
+  var projectStatus = props.projectStatus,
+    ordersList = props.ordersList,
     todaySalelsList = props.todaySalelsList,
     monthSalesList = props.monthSalesList,
     getCurrentDateRange = props.getCurrentDateRange;
+  var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -56,12 +60,27 @@ var HomeUI = function HomeUI(props) {
   var _useSession = (0, _orderingComponentsAdminExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     sessionState = _useSession2[0];
+  var _useApi = (0, _orderingComponentsAdminExternal.useApi)(),
+    _useApi2 = _slicedToArray(_useApi, 1),
+    ordering = _useApi2[0];
+  var project = {
+    active: {
+      description: t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.'),
+      status: t('PROJECT_ACTIVE', 'Project Active'),
+      image: theme.images.project.active
+    },
+    past_due: {
+      description: t('PROJECT_PAST_DUE_PAYMENT', 'Your account will be suspended in the next _days_ days due to your billing status, please check it to avoid any issues.'),
+      status: t('PROJECT_PAST_DUE_PAYMENT', 'Project Past Due Payment'),
+      image: theme.images.project.pastDuePayment
+    }
+  };
   var goToLink = function goToLink(location) {
     if (location === 'sales') {
       window.open('https://www.ordering.co/ordering-sales', '_blank');
     }
     if (location === 'tech') {
-      window.open('https://www.ordering.co/ordering-support', '_blank');
+      window.open('https://support.ordering.co', '_blank');
     }
     if (location === 'canny') {
       window.open('https://feedback.ordering.co', '_blank');
@@ -202,7 +221,20 @@ var HomeUI = function HomeUI(props) {
     onClick: function onClick() {
       return handleMenuCollapse(false);
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('HOME', 'Home'))), /*#__PURE__*/_react.default.createElement(_styles.HeaderContainer, null, /*#__PURE__*/_react.default.createElement(_styles.WelcomeMsg, null, t('WELCOME_TO_ORDERING', 'Welcome to Ordering'), "!"), /*#__PURE__*/_react.default.createElement(_styles.GuideMsg, null, t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.'))), /*#__PURE__*/_react.default.createElement(_styles.ParagraphHeaders, null, /*#__PURE__*/_react.default.createElement("p", null, t('REPORTS', 'Reports')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.List, null)), /*#__PURE__*/_react.default.createElement("h1", null, t('HOME', 'Home'))), projectStatus.loading && /*#__PURE__*/_react.default.createElement(_styles.HeaderContainer, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    height: 150
+  })), !projectStatus.loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !((_projectStatus$projec = projectStatus.project) !== null && _projectStatus$projec !== void 0 && _projectStatus$projec.current_status) ? /*#__PURE__*/_react.default.createElement(_styles.HeaderContainer, null, /*#__PURE__*/_react.default.createElement(_styles.WelcomeMsg, null, t('WELCOME_TO_ORDERING', 'Welcome to Ordering'), "!"), /*#__PURE__*/_react.default.createElement(_styles.GuideMsg, null, t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.'))) : /*#__PURE__*/_react.default.createElement(_styles.ProjectStatusContainer, null, /*#__PURE__*/_react.default.createElement(_styles.ProjectInfoWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.GreetingText, null, t('WELCOME', 'Welcome'), " ", sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user = sessionState.user) === null || _sessionState$user === void 0 ? void 0 : _sessionState$user.name, "!"), /*#__PURE__*/_react.default.createElement(_styles.ProjectStatusDescription, null, (_projectStatus$projec2 = projectStatus.project) !== null && _projectStatus$projec2 !== void 0 && _projectStatus$projec2.current_status_until && ((_projectStatus$projec3 = projectStatus.project) === null || _projectStatus$projec3 === void 0 ? void 0 : _projectStatus$projec3.current_status) === 'past_due' ? (_project$projectStatu = project[(_projectStatus$projec4 = projectStatus.project) === null || _projectStatus$projec4 === void 0 ? void 0 : _projectStatus$projec4.current_status]) === null || _project$projectStatu === void 0 ? void 0 : _project$projectStatu.description.replace('_days_', (0, _utils.getCurrentDiffDays)((_projectStatus$projec5 = projectStatus.project) === null || _projectStatus$projec5 === void 0 ? void 0 : _projectStatus$projec5.current_status_until)) : (_project$projectStatu2 = project[(_projectStatus$projec6 = projectStatus.project) === null || _projectStatus$projec6 === void 0 ? void 0 : _projectStatus$projec6.current_status]) === null || _project$projectStatu2 === void 0 ? void 0 : _project$projectStatu2.description), /*#__PURE__*/_react.default.createElement(_styles.ProjectStatusWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.ProjectCurrentStatus, {
+    isActive: ((_projectStatus$projec7 = projectStatus.project) === null || _projectStatus$projec7 === void 0 ? void 0 : _projectStatus$projec7.current_status) === 'active'
+  }, (_project$projectStatu3 = project[(_projectStatus$projec8 = projectStatus.project) === null || _projectStatus$projec8 === void 0 ? void 0 : _projectStatus$projec8.current_status]) === null || _project$projectStatu3 === void 0 ? void 0 : _project$projectStatu3.status), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    borderRadius: "8px",
+    onClick: function onClick() {
+      return window.open("https://".concat(ordering === null || ordering === void 0 ? void 0 : ordering.project, ".tryordering.com"), '_blank');
+    }
+  }, t('VISIT_MY_WEBSITE', 'Visit my Website')))), /*#__PURE__*/_react.default.createElement("img", {
+    src: (_project$projectStatu4 = project[(_projectStatus$projec9 = projectStatus.project) === null || _projectStatus$projec9 === void 0 ? void 0 : _projectStatus$projec9.current_status]) === null || _project$projectStatu4 === void 0 ? void 0 : _project$projectStatu4.image,
+    alt: ""
+  }))), /*#__PURE__*/_react.default.createElement(_styles.ParagraphHeaders, null, /*#__PURE__*/_react.default.createElement("p", null, t('REPORTS', 'Reports')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "lightPrimary",
     onClick: function onClick() {
       return handleGoToPage({
@@ -228,7 +260,7 @@ var HomeUI = function HomeUI(props) {
     separator: '.'
   }))), /*#__PURE__*/_react.default.createElement(_styles.BoxIconContainer, {
     isSales: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Cash, null))))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user = sessionState.user) === null || _sessionState$user === void 0 ? void 0 : _sessionState$user.level) !== 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ParagraphHeaders, null, /*#__PURE__*/_react.default.createElement("p", null, t('SUPPORT', 'Support'))), /*#__PURE__*/_react.default.createElement(_styles.AssistanceWidgets, null, /*#__PURE__*/_react.default.createElement(_styles.AssistanceTitle, null, /*#__PURE__*/_react.default.createElement("h1", null, t('SUPPORT_TITLE_START', 'Which kind of'), ' ', /*#__PURE__*/_react.default.createElement("span", null, t('SUPPORT_TITLE_END', 'assistance do you need?'))), /*#__PURE__*/_react.default.createElement("p", null, t('ASSIST_SUB_TITILE', 'Choose the asistance you are looking for in the buttons below.'))), /*#__PURE__*/_react.default.createElement(_styles.AssistanceBody, null, /*#__PURE__*/_react.default.createElement(_styles.WidgeBlock, null, /*#__PURE__*/_react.default.createElement("h3", null, t('CONTACT_SALES_TEAM', 'Contact our Sales Team')), /*#__PURE__*/_react.default.createElement("p", null, t('CONTACT_SALES_SUB_TITLE', 'Ask about pricing, custom work, budget and more money talk')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Cash, null))))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user2 = sessionState.user) === null || _sessionState$user2 === void 0 ? void 0 : _sessionState$user2.level) !== 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ParagraphHeaders, null, /*#__PURE__*/_react.default.createElement("p", null, t('SUPPORT', 'Support'))), /*#__PURE__*/_react.default.createElement(_styles.AssistanceWidgets, null, /*#__PURE__*/_react.default.createElement(_styles.AssistanceTitle, null, /*#__PURE__*/_react.default.createElement("h1", null, t('SUPPORT_TITLE_START', 'Which kind of'), ' ', /*#__PURE__*/_react.default.createElement("span", null, t('SUPPORT_TITLE_END', 'assistance do you need?'))), /*#__PURE__*/_react.default.createElement("p", null, t('ASSIST_SUB_TITILE', 'Choose the asistance you are looking for in the buttons below.'))), /*#__PURE__*/_react.default.createElement(_styles.AssistanceBody, null, /*#__PURE__*/_react.default.createElement(_styles.WidgeBlock, null, /*#__PURE__*/_react.default.createElement("h3", null, t('CONTACT_SALES_TEAM', 'Contact our Sales Team')), /*#__PURE__*/_react.default.createElement("p", null, t('CONTACT_SALES_SUB_TITLE', 'Ask about pricing, custom work, budget and more money talk')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     outline: true,
     color: "primary",
     onClick: function onClick() {
@@ -240,7 +272,7 @@ var HomeUI = function HomeUI(props) {
     onClick: function onClick() {
       return goToLink('tech');
     }
-  }, t('TECH_SUPPORT', 'Tech Support')))))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user2 = sessionState.user) === null || _sessionState$user2 === void 0 ? void 0 : _sessionState$user2.level) === 0 && /*#__PURE__*/_react.default.createElement(_styles.FeedbackWidgets, null, /*#__PURE__*/_react.default.createElement(_styles.ParagraphHeaders, null, /*#__PURE__*/_react.default.createElement("p", null, t('FEEDBACK', 'Feedback'))), /*#__PURE__*/_react.default.createElement(_styles.FeedbackContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('SHARE_WITH_US_YOUR_IDEAS', 'Share with us your ideas')), /*#__PURE__*/_react.default.createElement("p", {
+  }, t('TECH_SUPPORT', 'Tech Support')))))), (sessionState === null || sessionState === void 0 ? void 0 : (_sessionState$user3 = sessionState.user) === null || _sessionState$user3 === void 0 ? void 0 : _sessionState$user3.level) === 0 && /*#__PURE__*/_react.default.createElement(_styles.FeedbackWidgets, null, /*#__PURE__*/_react.default.createElement(_styles.ParagraphHeaders, null, /*#__PURE__*/_react.default.createElement("p", null, t('FEEDBACK', 'Feedback'))), /*#__PURE__*/_react.default.createElement(_styles.FeedbackContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('SHARE_WITH_US_YOUR_IDEAS', 'Share with us your ideas')), /*#__PURE__*/_react.default.createElement("p", {
     className: "center"
   }, t('FEEDBACK_DESCRIPTION', 'Do you think our functionalities can be improved or do you want to see a new feature?')), /*#__PURE__*/_react.default.createElement("p", null, t('SHARE_US_YOUR_COMMENTS', 'Share us your comments')), /*#__PURE__*/_react.default.createElement(_styles.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     outline: true,

package/_modules/components/Home/HomePage/styles.js

@@ -4,9 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WidgeBlock = exports.WelcomeMsg = exports.VideoOnBoardingWrapper = exports.VideoOnBoardingContainer = exports.VideoAndReportsWrapper = exports.SalesGraphContainer = exports.Reports = exports.ParagraphHeaders = exports.OrdersOrSalesContainer = exports.OrdersAndSalesWrapper = exports.OrderingHelpButton = exports.IframeWrapper = exports.HomeContainer = exports.HideAndShowWrapper = exports.HeaderContainer = exports.GuideMsg = exports.FirstStoreToSellWrapper = exports.FirstStoreToSellContent = exports.FeedbackWidgets = exports.FeedbackContainer = exports.DetailsContent = exports.ChartHeaderContainer = exports.ButtonWrapper = exports.Breadcrumb = exports.BoxIconContainer = exports.AssistanceWidgets = exports.AssistanceTitle = exports.AssistanceBody = void 0;
+exports.WidgeBlock = exports.WelcomeMsg = exports.VideoOnBoardingWrapper = exports.VideoOnBoardingContainer = exports.VideoAndReportsWrapper = exports.SalesGraphContainer = exports.Reports = exports.ProjectStatusWrapper = exports.ProjectStatusDescription = exports.ProjectStatusContainer = exports.ProjectInfoWrapper = exports.ProjectCurrentStatus = exports.ParagraphHeaders = exports.OrdersOrSalesContainer = exports.OrdersAndSalesWrapper = exports.OrderingHelpButton = exports.IframeWrapper = exports.HomeContainer = exports.HideAndShowWrapper = exports.HeaderContainer = exports.GuideMsg = exports.GreetingText = exports.FirstStoreToSellWrapper = exports.FirstStoreToSellContent = exports.FeedbackWidgets = exports.FeedbackContainer = exports.DetailsContent = exports.ChartHeaderContainer = exports.ButtonWrapper = exports.Breadcrumb = exports.BoxIconContainer = exports.AssistanceWidgets = exports.AssistanceTitle = exports.AssistanceBody = void 0;
 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, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43;
+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, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51;
 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) } })); }
@@ -25,13 +26,13 @@ var Breadcrumb = _styledComponents.default.div(_templateObject6 || (_templateObj
   return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 8px;\n      margin-right: -8px;\n    "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin-right: 8px;\n      margin-left: -8px;\n    "])));
 });
 exports.Breadcrumb = Breadcrumb;
-var HeaderContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n"])));
+var HeaderContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-bottom: 25px;\n"])));
 exports.HeaderContainer = HeaderContainer;
 var WelcomeMsg = _styledComponents.default.h1(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 28px;\n  color: ", ";\n  @media(min-width: 768px) {\n    font-size: 32px;\n  }\n"])), function (props) {
   return props.theme.colors.headingColor;
 });
 exports.WelcomeMsg = WelcomeMsg;
-var GuideMsg = _styledComponents.default.p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  color: ", ";\n  margin-bottom: 25px;\n"])), function (props) {
+var GuideMsg = _styledComponents.default.p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  color: ", ";\n"])), function (props) {
   return props.theme.colors.headingColor;
 });
 exports.GuideMsg = GuideMsg;
@@ -135,4 +136,29 @@ exports.FeedbackWidgets = FeedbackWidgets;
 var FeedbackContainer = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n  margin: 20px auto 0px auto;\n  margin-bottom: 30px;\n  width: fit-content;\n  h2 {\n    font-size: 24px;\n    text-align: center;\n  }\n  p {\n    font-size: 14px;\n    text-align: center;\n    margin-bottom: 3px;\n  }\n  button {\n    border-radius: 7.6px;\n    height: 44px;\n    margin: 0 auto;\n  }\n  @media (min-width: 800px) {\n    h2 {\n      font-size: 28px;\n    }\n    p {\n      font-size: 16px;\n      text-align: left;\n      &.center {\n        text-align: center;\n      }\n    }\n  }\n"])));
 exports.FeedbackContainer = FeedbackContainer;
 var ButtonWrapper = _styledComponents.default.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  margin-top: 20px;\n"])));
-exports.ButtonWrapper = ButtonWrapper;
+exports.ButtonWrapper = ButtonWrapper;
+var ProjectStatusContainer = _styledComponents.default.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 60px;\n\n  > img {\n    max-height: 250px;\n  }\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"])));
+exports.ProjectStatusContainer = ProjectStatusContainer;
+var ProjectInfoWrapper = _styledComponents.default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n  padding: 20px 30px;\n"])));
+exports.ProjectInfoWrapper = ProjectInfoWrapper;
+var GreetingText = _styledComponents.default.h1(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n  font-size: 32px;\n  font-weight: 700;\n  line-height: 48px;\n  margin: 0;\n"])));
+exports.GreetingText = GreetingText;
+var ProjectStatusDescription = _styledComponents.default.p(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  line-height: 24px;\n"])));
+exports.ProjectStatusDescription = ProjectStatusDescription;
+var ProjectCurrentStatus = _styledComponents.default.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n  width: fit-content;\n  /* margin-top: 15px; */\n  padding: 10px 16px;\n  border-radius: 8px;\n  font-size: 14px;\n  line-height: 24px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n"])), function (props) {
+  return props.theme.colors.warning;
+}, function (props) {
+  return (0, _polished.lighten)(0.4, props.theme.colors.warning);
+}, function (_ref6) {
+  var isActive = _ref6.isActive;
+  return isActive && (0, _styledComponents.css)(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n    color: ", ";\n    background-color: ", ";\n  "])), function (props) {
+    return props.theme.colors.success;
+  }, function (props) {
+    return (0, _polished.lighten)(0.5, props.theme.colors.success);
+  });
+});
+exports.ProjectCurrentStatus = ProjectCurrentStatus;
+var ProjectStatusWrapper = _styledComponents.default.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > button {\n    height: 44px;\n    margin-left: 15px;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n      margin-right: 15px;\n      margin-left: 0px;\n    "])));
+});
+exports.ProjectStatusWrapper = ProjectStatusWrapper;

package/_modules/components/LanguageSelector/index.js

@@ -31,7 +31,7 @@ var LanguageSelectorUI = function LanguageSelectorUI(props) {
     return a.content > b.content ? 1 : b.content > a.content ? -1 : 0;
   });
   return _languages && _languages.length > 1 ? /*#__PURE__*/_react.default.createElement(_styles.SelectWrapper, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Globe2, null), /*#__PURE__*/_react.default.createElement(_Select.Select, {
-    optionInnerMaxHeight: "60vh",
+    optionInnerMaxHeight: "300px",
     options: languagesState !== null && languagesState !== void 0 && languagesState.loading ? defaultLanguages : _languages,
     defaultValue: languagesState !== null && languagesState !== void 0 && languagesState.loading ? defaultCurrentLanguage : currentLanguage,
     onChange: function onChange(languageId) {

package/_modules/components/Login/LoginForm/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _ConfigFileContext = require("../../../contexts/ConfigFileContext");
 var _reactHookForm = require("react-hook-form");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
+var _useCountdownTimer3 = require("../../../hooks/useCountdownTimer");
 var _Shared = require("../../Shared");
 var _BsArrowRightShort = _interopRequireDefault(require("@meronex/icons/bs/BsArrowRightShort"));
 var _MdExitToApp = _interopRequireDefault(require("@meronex/icons/md/MdExitToApp"));
@@ -17,6 +18,8 @@ var _styledComponents = require("styled-components");
 var _HiOutlineMail = _interopRequireDefault(require("@meronex/icons/hi/HiOutlineMail"));
 var _RiLockPasswordLine = _interopRequireDefault(require("@meronex/icons/ri/RiLockPasswordLine"));
 var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
+var _utils = require("../../../utils");
 var _styles2 = 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); }
@@ -24,6 +27,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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); }
@@ -32,10 +39,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var LoginFormUI = function LoginFormUI(props) {
   var _configs$dashboard_lo, _theme$images, _theme$images$general, _configs$dashboard_lo2, _theme$images2, _theme$images2$logos;
-  var useLoginByEmail = props.useLoginByEmail,
+  var useLoginOtpEmail = props.useLoginOtpEmail,
     useLoginByCellphone = props.useLoginByCellphone,
     handleChangeInput = props.handleChangeInput,
-    hanldeChangeTab = props.hanldeChangeTab,
     handleButtonLoginClick = props.handleButtonLoginClick,
     elementLinkToSignup = props.elementLinkToSignup,
     elementLinkToForgotPassword = props.elementLinkToForgotPassword,
@@ -44,7 +50,14 @@ var LoginFormUI = function LoginFormUI(props) {
     isPopup = props.isPopup,
     isReCaptchaEnable = props.isReCaptchaEnable,
     handleReCaptcha = props.handleReCaptcha,
-    useProjectDomain = props.useProjectDomain;
+    useProjectDomain = props.useProjectDomain,
+    checkPhoneCodeState = props.checkPhoneCodeState,
+    otpType = props.otpType,
+    setOtpType = props.setOtpType,
+    handleChangeTab = props.handleChangeTab,
+    generateOtpCode = props.generateOtpCode,
+    otpState = props.otpState,
+    setOtpState = props.setOtpState;
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -85,6 +98,21 @@ var LoginFormUI = function LoginFormUI(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     passwordSee = _useState8[0],
     setPasswordSee = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loginWithOtpState = _useState10[0],
+    setLoginWithOtpState = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    willVerifyOtpState = _useState12[0],
+    setWillVerifyOtpState = _useState12[1];
+  var numOtpInputs = loginTab === 'otp' ? 6 : 4;
+  var otpPlaceholder = _toConsumableArray(Array(numOtpInputs)).fill(0).join('');
+  var _useCountdownTimer = (0, _useCountdownTimer3.useCountdownTimer)(600, !(checkPhoneCodeState !== null && checkPhoneCodeState !== void 0 && checkPhoneCodeState.loading) && willVerifyOtpState),
+    _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
+    otpLeftTime = _useCountdownTimer2[0],
+    resetOtpLeftTime = _useCountdownTimer2[2];
+  var isOtpEmail = loginTab === 'otp' && otpType === 'email';
   var onSubmit = function onSubmit() {
     setSubmitted(true);
   };
@@ -99,9 +127,28 @@ var LoginFormUI = function LoginFormUI(props) {
       }));
     }, 750);
   };
+  var handleChangeOtpType = function handleChangeOtpType(type) {
+    handleChangeTab('otp');
+    setOtpType(type);
+  };
+  var handleSendOtp = function handleSendOtp() {
+    if (willVerifyOtpState) {
+      setOtpState('');
+      resetOtpLeftTime();
+      if (loginTab === 'otp') {
+        generateOtpCode();
+        setWillVerifyOtpState(true);
+      }
+    }
+  };
   (0, _react.useEffect)(function () {
     if (ordering.project === null || !submitted) return;
-    handleButtonLoginClick();
+    if (loginTab === 'otp') {
+      generateOtpCode();
+      setWillVerifyOtpState(true);
+    } else {
+      handleButtonLoginClick();
+    }
   }, [ordering, submitted]);
   (0, _react.useEffect)(function () {
     var _formState$result;
@@ -142,7 +189,39 @@ var LoginFormUI = function LoginFormUI(props) {
       open: false,
       content: []
     });
+    setOtpState('');
   };
+  (0, _react.useEffect)(function () {
+    if ((otpState === null || otpState === void 0 ? void 0 : otpState.length) === numOtpInputs) {
+      if (loginTab === 'otp') {
+        handleButtonLoginClick();
+      }
+    }
+  }, [otpState]);
+  (0, _react.useEffect)(function () {
+    var _checkPhoneCodeState$, _checkPhoneCodeState$3;
+    if (checkPhoneCodeState !== null && checkPhoneCodeState !== void 0 && (_checkPhoneCodeState$ = checkPhoneCodeState.result) !== null && _checkPhoneCodeState$ !== void 0 && _checkPhoneCodeState$.error) {
+      var _checkPhoneCodeState$2;
+      setAlertState({
+        open: true,
+        content: (checkPhoneCodeState === null || checkPhoneCodeState === void 0 ? void 0 : (_checkPhoneCodeState$2 = checkPhoneCodeState.result) === null || _checkPhoneCodeState$2 === void 0 ? void 0 : _checkPhoneCodeState$2.result) || [t('ERROR', 'Error')]
+      });
+    } else if (checkPhoneCodeState !== null && checkPhoneCodeState !== void 0 && (_checkPhoneCodeState$3 = checkPhoneCodeState.result) !== null && _checkPhoneCodeState$3 !== void 0 && _checkPhoneCodeState$3.result) {
+      setAlertState({
+        open: true,
+        content: t('CODE_SENT', 'The code has been sent')
+      });
+      resetOtpLeftTime();
+    }
+  }, [checkPhoneCodeState]);
+  (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]);
   (0, _react.useEffect)(function () {
     var _configs$security_rec2;
     if (configs && Object.keys(configs).length > 0 && (configs === null || configs === void 0 ? void 0 : (_configs$security_rec2 = configs.security_recaptcha_auth) === null || _configs$security_rec2 === void 0 ? void 0 : _configs$security_rec2.value) === '1') {
@@ -178,25 +257,21 @@ var LoginFormUI = function LoginFormUI(props) {
     alt: "Logo login"
   })), /*#__PURE__*/_react.default.createElement(_styles2.FormSide, {
     isPopup: isPopup
-  }, /*#__PURE__*/_react.default.createElement(_styles2.TitleFormSide, null, /*#__PURE__*/_react.default.createElement("h1", null, t('WELCOME', 'Welcome!')), /*#__PURE__*/_react.default.createElement("p", null, t('SUBTITLE_ADMIN_LOGIN', 'Let’s start to admin your business now'))), useLoginByEmail && useLoginByCellphone && /*#__PURE__*/_react.default.createElement(_styles2.LoginWith, {
-    isPopup: isPopup
-  }, /*#__PURE__*/_react.default.createElement(_styles.Tabs, {
-    variant: "primary"
-  }, useLoginByEmail && /*#__PURE__*/_react.default.createElement(_styles.Tab, {
+  }, /*#__PURE__*/_react.default.createElement(_styles2.TitleFormSide, null, /*#__PURE__*/_react.default.createElement("h1", null, t('WELCOME', 'Welcome!')), /*#__PURE__*/_react.default.createElement("p", null, t('SUBTITLE_ADMIN_LOGIN', 'Let’s start to admin your business now'))), (ordering === null || ordering === void 0 ? void 0 : ordering.project) && useLoginOtpEmail && !loginWithOtpState && !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_styles2.LoginWith, null, /*#__PURE__*/_react.default.createElement(_styles2.Tabs, null, /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
     onClick: function onClick() {
-      return hanldeChangeTab('email');
+      return handleChangeTab('email');
     },
     active: loginTab === 'email'
-  }, t('LOGIN_WITH_EMAIL', 'Login with Email')), useLoginByCellphone && /*#__PURE__*/_react.default.createElement(_styles.Tab, {
+  }, t('LOGIN_WITH_EMAIL', 'Login with Email')), /*#__PURE__*/_react.default.createElement(_styles2.Tab, {
     onClick: function onClick() {
-      return hanldeChangeTab('cellphone');
+      return handleChangeOtpType('email');
     },
-    active: loginTab === 'cellphone'
-  }, t('LOGIN_WITH_CELLPHONE', 'Login with Cellphone')))), (useLoginByCellphone || useLoginByEmail) && /*#__PURE__*/_react.default.createElement(_styles2.FormInput, {
+    active: isOtpEmail
+  }, t('BY_OTP_EMAIL', 'by Otp Email')))), /*#__PURE__*/_react.default.createElement(_styles2.FormInput, {
     noValidate: true,
     isPopup: isPopup,
     onSubmit: handleSubmit(onSubmit)
-  }, !useProjectDomain && /*#__PURE__*/_react.default.createElement(_styles2.InputWithIcon, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  }, !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_styles2.InputWithIcon, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
     type: "text",
     name: "project",
     "aria-label": "project",
@@ -209,7 +284,7 @@ var LoginFormUI = function LoginFormUI(props) {
     },
     autoComplete: "off",
     autoCapitalize: "off"
-  }), /*#__PURE__*/_react.default.createElement(_MdExitToApp.default, null)), useLoginByEmail && loginTab === 'email' && /*#__PURE__*/_react.default.createElement(_styles2.InputWithIcon, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  }), /*#__PURE__*/_react.default.createElement(_MdExitToApp.default, null)), !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_styles2.InputWithIcon, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
     type: "email",
     name: "email",
     "aria-label": "email",
@@ -226,7 +301,7 @@ var LoginFormUI = function LoginFormUI(props) {
     },
     autoComplete: "off",
     autoCapitalize: "off"
-  }), /*#__PURE__*/_react.default.createElement(_HiOutlineMail.default, null)), useLoginByCellphone && loginTab === 'cellphone' && /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  }), /*#__PURE__*/_react.default.createElement(_HiOutlineMail.default, null)), useLoginByCellphone && loginTab === 'cellphone' && !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_styles.Input, {
     type: "tel",
     name: "cellphone",
     "aria-label": "cellphone",
@@ -238,7 +313,7 @@ var LoginFormUI = function LoginFormUI(props) {
       return handleChangeInput(e);
     },
     autoComplete: "off"
-  }), /*#__PURE__*/_react.default.createElement(_styles2.WrapperPassword, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  }), loginTab !== 'otp' && !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_styles2.WrapperPassword, null, /*#__PURE__*/_react.default.createElement(_styles.Input, {
     type: !passwordSee ? 'password' : 'text',
     name: "password",
     "aria-label": "password",
@@ -262,12 +337,36 @@ var LoginFormUI = function LoginFormUI(props) {
   }, !passwordSee ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Eye, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.EyeSlash, null))), isReCaptchaEnable && /*#__PURE__*/_react.default.createElement(_styles2.ReCAPTCHAWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.ReCaptcha, {
     handleReCaptcha: handleReCaptcha,
     reCaptchaVersion: reCaptchaVersion
-  })), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+  })), !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_styles.Button, {
     borderRadius: "8px",
     color: "primary",
     type: "submit",
     disabled: formState.loading
-  }, formState.loading ? t('LOADING') + '...' : t('LOGIN'), /*#__PURE__*/_react.default.createElement(_BsArrowRightShort.default, null)), /*#__PURE__*/_react.default.createElement(_styles2.RedirectLink, {
+  }, formState.loading ? t('LOADING') + '...' : loginWithOtpState || loginTab === 'otp' ? t('GET_VERIFY_CODE', 'Get verify code') : t('LOGIN', 'Login'), /*#__PURE__*/_react.default.createElement(_BsArrowRightShort.default, null)), willVerifyOtpState && !(checkPhoneCodeState !== null && checkPhoneCodeState !== void 0 && checkPhoneCodeState.loading) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.CountdownTimer, null, /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.formatSeconds)(otpLeftTime))), /*#__PURE__*/_react.default.createElement(_styles2.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",
+    placeholder: otpPlaceholder,
+    isInputNum: true,
+    shouldAutoFocus: true,
+    isDisabled: otpLeftTime === 0
+  })), /*#__PURE__*/_react.default.createElement(_styles2.ResendCode, {
+    disabled: otpLeftTime > 520,
+    onClick: handleSendOtp
+  }, t('RESEND_AGAIN', 'Resend again'), "?"), /*#__PURE__*/_react.default.createElement(_styles.Button, {
+    borderRadius: "8px",
+    type: "button",
+    color: "primary",
+    disabled: formState.loading,
+    onClick: function onClick() {
+      setLoginWithOtpState(false);
+      setWillVerifyOtpState(false);
+    }
+  }, t('CANCEL', 'Cancel'))), loginTab !== 'otp' && /*#__PURE__*/_react.default.createElement(_styles2.RedirectLink, {
     isPopup: isPopup
   }, /*#__PURE__*/_react.default.createElement("span", null, t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')), elementLinkToForgotPassword)), elementLinkToSignup && /*#__PURE__*/_react.default.createElement(_styles2.RedirectLink, {
     register: true,