ordering-ui-admin-external 1.6.1 → 1.6.3

package/_modules/components/Stores/BusinessSyncItsaCheckmate/styles.js

@@ -0,0 +1,31 @@
+"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.YoutubeVideoWrapper = exports.YoutubeVideoInner = exports.LogoWrapper = exports.GetStarted = exports.Description = exports.Container = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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) } })); }
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+exports.Container = Container;
+var LogoWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 216px;\n  height: 216px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 7.6px;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n\n  > img {\n    width: 100%;\n  }\n"])));
+exports.LogoWrapper = LogoWrapper;
+var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 36px;\n  margin-bottom: 50px;\n  div.sub-header {\n    font-size: 14px;\n    margin-bottom: 10px;\n  }\n  div.menu-item {\n    display: flex;\n    align-items: center;\n    svg {\n      ", "\n    }\n    > p {\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 24px;\n      margin: 0px;\n    }\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        margin-left: 8px;\n      "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        margin-right: 8px;\n      "])));
+});
+exports.Description = Description;
+var GetStarted = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  h2 {\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 10px;\n  }\n  p {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 8px;\n    color: ", ";\n  }\n  button {\n    border-radius: 8px;\n    height: 44px;\n  }\n"])), function (props) {
+  return props.theme.colors.lightGray;
+});
+exports.GetStarted = GetStarted;
+var YoutubeVideoWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-top: 50px;\n  padding-bottom: 30px;\n"])));
+exports.YoutubeVideoWrapper = YoutubeVideoWrapper;
+var YoutubeVideoInner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  padding-bottom: 56.25%;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n  border-radius: 7.6px;\n  background-color: ", ";\n\n  iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n"])), function (props) {
+  return props.theme.colors.secundaryDarkContrast;
+});
+exports.YoutubeVideoInner = YoutubeVideoInner;

package/_modules/components/Support/index.js

@@ -44,7 +44,7 @@ var Support = function Support(props) {
     borderRadius: "7.6px",
     color: "primary",
     onClick: function onClick() {
-      return handleGoToLink('https://www.ordering.co/ordering-support');
+      return handleGoToLink('https://support.ordering.co');
     },
     outline: true
   }, t('TECH_SUPPORT', 'Tech Support'))))));

package/_modules/hooks/useCountdownTimer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCountdownTimer = useCountdownTimer;
+var _react = require("react");
+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; }
+/**
+ * Hook for countdown seconds
+ * @param {int} initialCount
+ * @param {boolean} start
+ */
+function useCountdownTimer(initialCount, start) {
+  var _useState = (0, _react.useState)(initialCount),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (start) {
+      var secondsLeft = setInterval(function () {
+        setCount(function (c) {
+          return c - (c === 0 ? 0 : 1);
+        });
+      }, 1000);
+      return function () {
+        return clearInterval(secondsLeft);
+      };
+    }
+  }, [start]);
+  return [count, setCount, /** reset */
+  function () {
+    setCount(initialCount);
+  }];
+}

package/_modules/index.js

@@ -549,6 +549,12 @@ Object.defineProperty(exports, "Button", {
     return _Buttons.Button;
   }
 });
+Object.defineProperty(exports, "CallCenterApp", {
+  enumerable: true,
+  get: function get() {
+    return _MyProducts.CallCenterApp;
+  }
+});
 Object.defineProperty(exports, "CampaignAmountOption", {
   enumerable: true,
   get: function get() {
@@ -1233,6 +1239,12 @@ Object.defineProperty(exports, "InvoiceManager", {
     return _BusinessIntelligence.InvoiceManager;
   }
 });
+Object.defineProperty(exports, "KioskApp", {
+  enumerable: true,
+  get: function get() {
+    return _MyProducts.KioskApp;
+  }
+});
 Object.defineProperty(exports, "LanguageManager", {
   enumerable: true,
   get: function get() {
@@ -1605,6 +1617,12 @@ Object.defineProperty(exports, "PointsWalletLevels", {
     return _Loyalty.PointsWalletLevels;
   }
 });
+Object.defineProperty(exports, "PosApp", {
+  enumerable: true,
+  get: function get() {
+    return _MyProducts.PosApp;
+  }
+});
 Object.defineProperty(exports, "ProductDesktopPreview", {
   enumerable: true,
   get: function get() {

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widgetURL = exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.orderRejectCommentList = exports.optimizeImage = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getMinutes = exports.getIconCard = exports.getHours = exports.getAgoMinutes = exports.formatUrlVideo = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = exports.DriverTipsOptions = void 0;
+exports.widgetURL = exports.verifyDecimals = exports.stringToSlug = exports.sortInputFields = exports.shape = exports.setStorageItem = exports.scrollTo = exports.ribbonValues = exports.reviewCommentList = exports.removeStorageItem = exports.orderRejectCommentList = exports.optimizeImage = exports.getStorageItem = exports.getStarWidth = exports.getSeconds = exports.getMinutes = exports.getIconCard = exports.getHours = exports.getCurrentDiffDays = exports.getAgoMinutes = exports.formatUrlVideo = exports.formatSeconds = exports.firstLetterCapital = exports.fieldsToSort = exports.convertHoursToMinutes = exports.convertHMS = exports.checkSiteUrl = exports.checkPreSiteUrl = exports.capitalize = exports.bytesConverter = exports.DriverTipsOptions = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FaCcMastercard = _interopRequireDefault(require("@meronex/icons/fa/FaCcMastercard"));
 var _FaCcVisa = _interopRequireDefault(require("@meronex/icons/fa/FaCcVisa"));
@@ -344,22 +344,53 @@ var shape = {
 };
 
 /**
- * default value for bitton
+ * Function to check URL
+ * @param {string} url URL of page
+ * @param {string} fallback default URL
  */
 exports.shape = shape;
+var checkPreSiteUrl = function checkPreSiteUrl(url, fallback) {
+  if (!url) return fallback;
+  return url[0] === '/' ? url : "/".concat(url);
+};
+
+/**
+ * default value for bitton
+ */
+exports.checkPreSiteUrl = checkPreSiteUrl;
 var ribbonValues = {
   color: '#0083FE',
   text: 'ribbon',
   shape: 'rectangle',
   enabled: false
 };
+/**
+ * Format seconds to hh:mm:ss
+ * @param {number} seconds
+ */
+exports.ribbonValues = ribbonValues;
+var formatSeconds = function formatSeconds(seconds) {
+  // Hours, minutes and seconds
+  var hrs = Math.floor(seconds / 3600);
+  var mins = Math.floor(seconds % 3600 / 60);
+  var secs = Math.floor(seconds % 60);
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  var ret = '';
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '');
+  ret += '' + secs;
+  return ret;
+};
 
 /**
  * Function to check URL
  * @param {string} url URL of page
  * @param {string} fallback default URL
  */
-exports.ribbonValues = ribbonValues;
+exports.formatSeconds = formatSeconds;
 var checkSiteUrl = function checkSiteUrl(url, fallback) {
   if (!url) return fallback;
   return url[(url === null || url === void 0 ? void 0 : url.length) - 1] === '/' ? url : "".concat(url, "/");
@@ -522,4 +553,34 @@ var orderRejectCommentList = function orderRejectCommentList(status) {
 };
 exports.orderRejectCommentList = orderRejectCommentList;
 var widgetURL = 'https://orderingweb.ordering.co/';
-exports.widgetURL = widgetURL;
+exports.widgetURL = widgetURL;
+var getCurrentDiffDays = function getCurrentDiffDays(time) {
+  var current = (0, _moment.default)().utc();
+  var compared = (0, _moment.default)(time);
+  return compared.diff(current, 'days');
+};
+exports.getCurrentDiffDays = getCurrentDiffDays;
+var firstLetterCapital = function firstLetterCapital(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+};
+exports.firstLetterCapital = firstLetterCapital;
+var stringToSlug = function stringToSlug(str) {
+  var _str;
+  str = str.replace(/^\s+|\s+$/g, ''); // trim
+  str = (_str = str) === null || _str === void 0 ? void 0 : _str.toLowerCase();
+
+  // remove accents, swap ñ for n, etc
+  var from = 'åàáãäâèéëêìíïîòóöôùúüûñç·/_,:;';
+  var to = 'aaaaaaeeeeiiiioooouuuunc------';
+  for (var i = 0, l = from.length; i < l; i++) {
+    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
+  }
+  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
+  .replace(/\s+/g, '_') // collapse whitespace and replace by -
+  .replace(/-+/g, '_') // collapse dashes
+  .replace(/^-+/, '') // trim - from start of text
+  .replace(/-+$/, ''); // trim - from end of text
+
+  return str;
+};
+exports.stringToSlug = stringToSlug;

package/index-template.js

@@ -36,6 +36,13 @@ import whatsappHeader from './template/assets/images/whatsapp-header.png'
 import appStore from './template/assets/images/app-store.png'
 import googlePlay from './template/assets/images/google-play.png'
 import deliverect from './template/assets/images/deliverect.png'
+import ItsaCheckmateLogo from './template/assets/images/ItsaCheckmateLogo.png'
+import doordash from './template/assets/images/door-dash.png'
+/**
+ * project statuses
+ */
+import projectActive from './template/assets/images/projectStatuses/project-active.png'
+import projectPastDuePayment from './template/assets/images/projectStatuses/project-past-due-payment.png'
 
 /**
  * Theme apps
@@ -148,6 +155,20 @@ import myCustomerApp from './template/assets/images/myProducts/customer-app.png'
 import myStoreApp from './template/assets/images/myProducts/store-app.png'
 import myDriverApp from './template/assets/images/myProducts/driver-app.png'
 import orderingWebsite from './template/assets/images/myProducts/ordering-website.png'
+import myCallcenterAppBrand from './template/assets/images/myProducts/my-callcenter-app-brand.png'
+import myCallcenterAppLive from './template/assets/images/myProducts/my-callcenter-app-live.png'
+import myKioskAppBrand from './template/assets/images/myProducts/my-kiosk-app-brand.png'
+import myKioskAppLive from './template/assets/images/myProducts/my-kiosk-app-live.png'
+import myPosAppBrand from './template/assets/images/myProducts/my-pos-app-brand.png'
+import myPosAppLive from './template/assets/images/myProducts/my-pos-app-live.png'
+import storeAppFree from './template/assets/images/myProducts/store-app-free.png'
+import storeAppBrand from './template/assets/images/myProducts/store-app-brand.png'
+import driverAppFree from './template/assets/images/myProducts/driver-app-free.png'
+import driverAppBrand from './template/assets/images/myProducts/driver-app-brand.png'
+import multiStoreCustomerApp from './template/assets/images/myProducts/multi-store-customer-app.png'
+import singleStoreCustomerApp from './template/assets/images/myProducts/single-store-customer-app.png'
+
+import { AutologinParams } from './template/components/AutologinParams'
 
 if (!(window?.location?.hostname === 'localhost')) {
   Sentry.init({
@@ -197,7 +218,13 @@ theme.images = {
     whatsappHeader,
     appStore,
     googlePlay,
-    deliverect
+    deliverect,
+    ItsaCheckmateLogo,
+    doordash
+  },
+  project: {
+    active: projectActive,
+    pastDuePayment: projectPastDuePayment
   },
   apps: {
     storeApp,
@@ -243,7 +270,19 @@ theme.images = {
     customerApp: myCustomerApp,
     storeApp: myStoreApp,
     driverApp: myDriverApp,
-    orderingWebsite: orderingWebsite
+    orderingWebsite: orderingWebsite,
+    myCallcenterAppBrand,
+    myCallcenterAppLive,
+    myKioskAppBrand,
+    myKioskAppLive,
+    myPosAppBrand,
+    myPosAppLive,
+    storeAppFree,
+    storeAppBrand,
+    driverAppFree,
+    driverAppBrand,
+    multiStoreCustomerApp,
+    singleStoreCustomerApp
   },
   icons: {
     ordersList: ordersList,
@@ -324,12 +363,14 @@ const RouteApp = () => {
   return (
     <ConfigFileContext.Provider value={[configFile, setConfigFile]}>
       <ThemeProvider theme={theme}>
-        <OrderingProvider Alert={Alert} settings={configFile}>
-          <InfoShareProvider>
-            <Router />
-            <Toast />
-          </InfoShareProvider>
-        </OrderingProvider>
+        <AutologinParams configFile={configFile}>
+          <OrderingProvider Alert={Alert}>
+            <InfoShareProvider>
+              <Router />
+              <Toast />
+            </InfoShareProvider>
+          </OrderingProvider>
+        </AutologinParams>
       </ThemeProvider>
     </ConfigFileContext.Provider>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.6.0",
+    "ordering-components-admin-external": "1.6.2",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",
@@ -97,6 +97,7 @@
     "react-hook-form": "^6.11.3",
     "react-loading-skeleton": "^2.1.1",
     "react-numeric-input": "^2.2.3",
+    "react-otp-input": "^2.4.0",
     "react-phone-number-input": "^3.1.23",
     "react-popper": "^2.3.0",
     "react-summernote": "^2.0.2",

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

@@ -107,7 +107,7 @@ export const Reports = (props) => {
             <MenuIcon />
           </IconButton>
         )}
-        <h1>{t('ADVANCED_REPORTS', 'Advanced Reports')}</h1>
+        <h1>{t('ENTERPRISE_REPORTS', 'Enterprise reports')}</h1>
       </HeaderTitleContainer>
       <ReportsList className='row'>
         {advancedReportsList && advancedReportsList.map((report, i) => (

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

@@ -46,7 +46,7 @@ const OpenCartsFilterGroupUI = (props) => {
   const scrollDown = (e) => {
     if (!e.target.closest('.ordering-calendar-btn')) return
 
-    const el = document.querySelector('.popup-dialog')
+    const el = document.querySelector('.dialog-inner')
     if (el?.scrollHeight > el?.clientHeight) {
       const top = contentEndRef.current.offsetTop
       el.scrollTo({

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

@@ -36,7 +36,7 @@ export const RecoveryActionHeader = (props) => {
             <MenuIcon />
           </IconButton>
         )}
-        <HeaderTitle>{t('RECOVERY_ACTIONS', 'Recovery actions')}</HeaderTitle>
+        <HeaderTitle>{t('CART_RECOVERY_AUTOMATION', 'Cart recovery automation')}</HeaderTitle>
         <InfoWrapper>
           <IconButton
             color='primary'

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

@@ -428,7 +428,7 @@ const AddressFormUI = (props) => {
                         setAddressValue(e.target.value)
                       }}
                       value={addressValue}
-                      autoComplete='new-field'
+                      autoComplete='new-password'
                       countryCode={configState?.configs?.country_autocomplete?.value || '*'}
                     />
                   </WrapAddressInput>

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

@@ -75,7 +75,7 @@ const DriversCompaniesListingUI = (props) => {
               <MenuIcon />
             </IconButton>
           )}
-          <h1>{t('DRIVERS_COMPANIES', 'Drivers companies')}</h1>
+          <h1>{t('DELIVERY_COMPANIES', 'Delivery companies')}</h1>
         </HeaderLeftContainer>
         <HeaderRightContainer>
           <Button

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

@@ -128,7 +128,7 @@ const DriversGroupLogsUI = (props) => {
                       </td>
                       <td>
                         <DataListTable>
-                          {log?.data.map((item, i) => (
+                          {(typeof log?.data === 'object' ? Object.values(log?.data) : log?.data).map((item, i) => (
                             <tbody key={i}>
                               <tr>
                                 <td>{getAttributeName(item?.attribute)}</td>

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

@@ -128,7 +128,7 @@ const DriversGroupsListingUI = (props) => {
                 <MenuIcon />
               </IconButton>
             )}
-            <h1>{t('DRIVERS_GROUPS', 'Drivers groups')}</h1>
+            <h1>{t('DELIVERY_AUTOMATION', 'Delivery automation')}</h1>
             <OverlayTrigger
               placement='bottom'
               overlay={

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

@@ -6,6 +6,8 @@ import { IconButton, Button } from '../../../styles/Buttons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
+import { getCurrentDiffDays } from '../../../utils'
 import {
   List as MenuIcon,
   Basket as OrdersIcon,
@@ -31,16 +33,24 @@ import {
   WidgeBlock,
   FeedbackWidgets,
   FeedbackContainer,
-  ButtonWrapper
+  ButtonWrapper,
+  ProjectStatusContainer,
+  ProjectInfoWrapper,
+  GreetingText,
+  ProjectStatusDescription,
+  ProjectCurrentStatus
 } from './styles'
 
 const HomeUI = (props) => {
   const {
+    projectStatus,
     ordersList,
     todaySalelsList,
     monthSalesList,
     getCurrentDateRange
   } = props
+
+  const theme = useTheme()
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [timeAxes, setTimeAxes] = useState([])
@@ -49,12 +59,25 @@ const HomeUI = (props) => {
   const [{ parsePrice }] = useUtils()
   const [sessionState] = useSession()
 
+  const 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
+    }
+  }
+
   const 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')
@@ -193,10 +216,43 @@ const HomeUI = (props) => {
         )}
         <h1>{t('HOME', 'Home')}</h1>
       </Breadcrumb>
-      <HeaderContainer>
-        <WelcomeMsg>{t('WELCOME_TO_ORDERING', 'Welcome to Ordering')}!</WelcomeMsg>
-        <GuideMsg>{t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.')}</GuideMsg>
-      </HeaderContainer>
+
+      {projectStatus.loading && (
+        <HeaderContainer>
+          <Skeleton height={150} />
+        </HeaderContainer>
+      )}
+
+      {!projectStatus.loading && (
+        <>
+          {!projectStatus.project?.current_status ? (
+            <HeaderContainer>
+              <WelcomeMsg>{t('WELCOME_TO_ORDERING', 'Welcome to Ordering')}!</WelcomeMsg>
+              <GuideMsg>{t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.')}</GuideMsg>
+            </HeaderContainer>
+          ) : (
+            <ProjectStatusContainer>
+              <ProjectInfoWrapper>
+                <GreetingText>{t('WELCOME', 'Welcome')} {sessionState?.user?.name}!</GreetingText>
+                <ProjectStatusDescription>
+                  {
+                    (projectStatus.project?.current_status_until && projectStatus.project?.current_status === 'past_due')
+                      ? project[projectStatus.project?.current_status]?.description.replace('_days_', getCurrentDiffDays(projectStatus.project?.current_status_until))
+                      : project[projectStatus.project?.current_status]?.description
+                  }
+                </ProjectStatusDescription>
+                <ProjectCurrentStatus
+                  isActive={projectStatus.project?.current_status === 'active'}
+                >
+                  {project[projectStatus.project?.current_status]?.status}
+                </ProjectCurrentStatus>
+              </ProjectInfoWrapper>
+              <img src={project[projectStatus.project?.current_status]?.image} alt='' />
+            </ProjectStatusContainer>
+          )}
+        </>
+      )}
+
       <ParagraphHeaders>
         <p>{t('REPORTS', 'Reports')}</p>
         <Button

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

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components'
+import { lighten } from 'polished'
+
 export const HomeContainer = styled.div`
   flex: 1;
   padding: 20px;
@@ -52,6 +54,7 @@ export const Breadcrumb = styled.div`
   }
 `
 export const HeaderContainer = styled.div`
+  margin-bottom: 25px;
 `
 export const WelcomeMsg = styled.h1`
   font-weight: bold;
@@ -64,7 +67,6 @@ export const WelcomeMsg = styled.h1`
 export const GuideMsg = styled.p`
   font-size: 16px;
   color: ${props => props.theme.colors.headingColor};
-  margin-bottom: 25px;
 `
 export const Reports = styled.div`
   display: flex;
@@ -422,3 +424,48 @@ export const ButtonWrapper = styled.div`
   justify-content: center;
   margin-top: 20px;
 `
+
+export const ProjectStatusContainer = styled.div`
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60px;
+
+  > img {
+    max-height: 250px;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`
+export const ProjectInfoWrapper = styled.div`
+  padding: 20px 30px;
+`
+export const GreetingText = styled.h1`
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 48px;
+  margin: 0;
+`
+export const ProjectStatusDescription = styled.p`
+  font-size: 16px;
+  line-height: 24px;
+`
+export const ProjectCurrentStatus = styled.div`
+  width: fit-content;
+  margin-top: 15px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.warning};
+  background-color: ${(props) => lighten(0.4, props.theme.colors.warning)};
+  ${({ isActive }) => isActive && css`
+    color: ${props => props.theme.colors.success};
+    background-color: ${(props) => lighten(0.5, props.theme.colors.success)};
+  `}
+`

package/src/components/LanguageSelector/index.js

@@ -30,7 +30,7 @@ const LanguageSelectorUI = (props) => {
       <SelectWrapper>
         <Globe2 />
         <Select
-          optionInnerMaxHeight='60vh'
+          optionInnerMaxHeight='300px'
           options={languagesState?.loading ? defaultLanguages : _languages}
           defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}
           onChange={(languageId) => handleChangeLanguage(languageId, true)}