Web: Added functionality for the grace period.

packages/client/public/locales/en/Payments.json

@@ -10,15 +10,19 @@
   "BusinessRequestDescription": "The pricing plans with more {{peopleNumber}} managers are available upon request only",
   "Bytes": "bytes",
   "ContactUs": "For sales questions, contact us at",
+  "DelayedPayment": "Delayed payment of the business plan dated {{date}}",
   "FreeStartupPlan": "Free Startup plan",
+  "GracePeriodActivated": "Grace period activated",
   "Gigabyte": "GB",
   "Kilobyte": "KB",
+  "LatePayment": "Late payment",
   "ManagerTypesDescription": "Manager account types and their privileges",
   "ManagersNumber": "Number of managers",
   "Megabyte": "MB",
   "PerUserMonth": "per manager/month",
   "PriceCalculation": "Calculate your price",
   "Payer": "Payer",
+  "PayBeforeTheEndGracePeriod": "Pay before the end of the grace period",
   "Room": "Room",
   "RoomManager": "Room manager",
   "RoomManagerDescription": "Room administration and archiving, user invitation and management. Several managers can be assigned to the room.",

packages/client/public/locales/ru/Payments.json

@@ -10,9 +10,13 @@
   "BusinessRequestDescription": "Тарифные планы с более чем {{peopleNumber}} менеджерами доступны только по запросу",
   "Bytes": "байт",
   "ContactUs": "По вопросам продаж обращайтесь к нам по адресу",
+  "DelayedPayment": "Просроченная оплата Business плана от {{date}}",
   "FreeStartupPlan": "Бесплатный  Startup план",
+  "GracePeriodActivated": "Активирован льготный период",
+  "GracePeriodActivatedDescription": "Активирован льготный период с {{fromDate}} - {{byDate}}. Во время льготного периода будут отключены функции создания комнат и добавления новых пользователей. По истечению срока портал будет полностью заблокирован. ",
   "Gigabyte": "Гб",
   "Kilobyte": "Кб",
+  "LatePayment": "Просрочка платежа",
   "ManagerTypesDescription": "Типы учетных записей менеджера и их привилегии",
   "ManagersNumber": "Число менеджеров",
   "Megabyte": "Мб",
@@ -20,6 +24,7 @@
   "PriceCalculation": "Рассчитайте свою цену",
   "Payer": "Плательщик",
   "PayerDescription": "Данный пользователь осуществляет оплату за тарифный план. Никто кроме него не может настраивать и оплачивать квоту. Сменить плательщика может владелец портала, а также сам плательщик через клиентский портал Stripe",
+  "PayBeforeTheEndGracePeriod": "Оплатите до окончания льготного периода",
   "Room": "Комната",
   "RoomManager": "Менеджер комнаты",
   "RoomManagerDescription": "Администрирование и архивирование комнат, приглашение пользователей и управление ими. В комнату могут быть назначены несколько менеджеров.",

packages/client/src/pages/PortalSettings/categories/payments/index.js

@@ -48,7 +48,7 @@ const StyledBody = styled.div`
   }
 `;
 
-let dueDate;
+let dueDate, fromDate, byDate;
 const PaymentsPage = ({
   setQuota,
   getPaymentPrices,
@@ -59,6 +59,7 @@ const PaymentsPage = ({
   portalTariff,
   portalQuota,
   isFreeTariff,
+  isGracePeriod,
 }) => {
   const { t, ready } = useTranslation(["Payments", "Settings"]);
 
@@ -69,19 +70,31 @@ const PaymentsPage = ({
   }, [ready]);
 
   useEffect(() => {
-    if (portalTariff) dueDate = moment(portalTariff.dueDate).format("LL");
+    moment.locale(language);
+    
+    if (portalTariff) {
+      dueDate = moment(
+        isGracePeriod ? portalTariff.delayDueDate : portalTariff.dueDate
+      ).format("LL");
+
+      if (isGracePeriod) {
+        fromDate = moment(portalTariff.dueDate).format("L");
+        byDate = moment(portalTariff.delayDueDate).format("L");
+        return;
+      }
+    }
   }, [portalTariff]);
   useEffect(() => {
     (async () => {
-      moment.locale(language);
-
       const requests = [];
 
-      requests.push(setPortalTariff(), setQuota());
+      requests.push(setQuota());
 
       if (Object.keys(portalQuota).length === 0) setPortalQuota();
       if (!pricePerManager) getPaymentPrices();
 
+      if (Object.keys(portalTariff).length === 0) setPortalTariff();
+
       try {
         await Promise.all(requests);
       } catch (error) {
@@ -123,10 +136,25 @@ const PaymentsPage = ({
       {!isFreeTariff && <PayerInformationContainer />}
       <CurrentTariffContainer />
       <Text noSelect fontSize="16px" isBold className="payment-info_suggestion">
-        {isFreeTariff ? t("StartupSuggestion") : t("BusinessSuggestion")}
+        {isFreeTariff ? (
+          t("StartupSuggestion")
+        ) : isGracePeriod ? (
+          <Trans t={t} i18nKey="DelayedPayment" ns="Payments">
+            {{ date: dueDate }}
+          </Trans>
+        ) : (
+          t("BusinessSuggestion")
+        )}
       </Text>
 
-      {!isFreeTariff && (
+      {isGracePeriod && (
+        <Text noSelect fontSize={"14"} className="payment-info_managers-price">
+          <Trans t={t} i18nKey="GracePeriodActivatedDescription" ns="Payments">
+            {{ fromDate, byDate }}
+          </Trans>
+        </Text>
+      )}
+      {!isFreeTariff && !isGracePeriod && (
         <Text noSelect fontSize={"14"} className="payment-info_managers-price">
           <Trans t={t} i18nKey="BusinessFinalDateInfo" ns="Payments">
             {{ finalDate: dueDate }}
@@ -174,6 +202,7 @@ export default inject(({ auth, payments }) => {
     pricePerManager,
     portalQuota,
     isFreeTariff,
+    isGracePeriod,
   } = auth;
 
   const { organizationName } = auth.settingsStore;
@@ -190,7 +219,7 @@ export default inject(({ auth, payments }) => {
     organizationName,
     setTariffsInfo,
     tariffsInfo,
-
+    isGracePeriod,
     pricePerManager,
     portalQuota,
   };

packages/common/components/Article/index.js

@@ -34,7 +34,7 @@ const Article = ({
   setIsMobileArticle,
   isLoadedPage,
   children,
-
+  isGracePeriod,
   isBannerVisible,
   hideProfileBlock,
   isFreeTariff,
@@ -136,7 +136,7 @@ const Article = ({
           {!hideProfileBlock && !isMobileOnly && (
             <ArticleProfile showText={showText} />
           )}
-          {isFreeTariff && showText && (
+          {(isFreeTariff || isGracePeriod) && showText && (
             <ArticlePaymentAlert isFreeTariff={isFreeTariff} />
           )}
         </SubArticleBody>
@@ -181,7 +181,7 @@ Article.Body = () => {
 Article.Body.displayName = "Body";
 
 export default inject(({ auth, bannerStore }) => {
-  const { settingsStore, isFreeTariff } = auth;
+  const { settingsStore, isFreeTariff, isGracePeriod } = auth;
 
   const { isBannerVisible } = bannerStore;
 
@@ -203,5 +203,6 @@ export default inject(({ auth, bannerStore }) => {
     toggleArticleOpen,
     isFreeTariff,
     isBannerVisible,
+    isGracePeriod,
   };
 })(observer(Article));

packages/common/components/Article/styled-article.js

@@ -337,7 +337,11 @@ const StyledProfileWrapper = styled.div`
   `}
 `;
 const StyledArticlePaymentAlert = styled.div`
-  border: ${(props) => props.theme.catalog.paymentAlert.border};
+  border: ${(props) =>
+    props.isFreeTariff
+      ? props.theme.catalog.paymentAlert.border
+      : props.theme.catalog.paymentAlert.warningBorder};
+
   border-radius: 6px;
   margin: 32px 0px;
   padding: 12px;
@@ -347,7 +351,10 @@ const StyledArticlePaymentAlert = styled.div`
   grid-template-columns: 1fr 16px;
 
   .article-payment_border {
-    color: ${(props) => props.theme.catalog.paymentAlert.color};
+    color: ${(props) =>
+      props.isFreeTariff
+        ? props.theme.catalog.paymentAlert.color
+        : props.theme.catalog.paymentAlert.warningColor};
   }
 `;
 

packages/common/components/Article/sub-components/article-payment-alert.js

@@ -20,7 +20,12 @@ const StyledArrowRightIcon = styled(ArrowRightIcon)`
 
 const PROXY_BASE_URL = combineUrl(AppServerConfig.proxyURL, "/portal-settings");
 
-const ArticlePaymentAlert = ({ pricePerManager, isFreeTariff, theme }) => {
+const ArticlePaymentAlert = ({
+  pricePerManager,
+  isFreeTariff,
+  theme,
+  isGracePeriod,
+}) => {
   const { t, ready } = useTranslation("Payments");
 
   const onClick = () => {
@@ -40,12 +45,20 @@ const ArticlePaymentAlert = ({ pricePerManager, isFreeTariff, theme }) => {
       theme={theme}
     >
       <div>
-        <Text className="article-payment_border">{t("FreeStartupPlan")}</Text>
-        <Text fontWeight={600}>{t("ActivateBusinessPlan")}</Text>
+        <Text className="article-payment_border">
+          {isFreeTariff ? t("FreeStartupPlan") : t("LatePayment")}
+        </Text>
+        <Text fontWeight={600}>
+          {isFreeTariff ? t("ActivateBusinessPlan") : t("GracePeriodActivated")}
+        </Text>
         <Text noSelect fontSize={"12px"}>
+          {isFreeTariff ? (
             <Trans t={t} i18nKey="StartPrice" ns="Payments">
               {{ price: pricePerManager }}
             </Trans>
+          ) : (
+            t("PayBeforeTheEndGracePeriod")
+          )}
         </Text>
       </div>
 

packages/common/constants/index.js

@@ -234,3 +234,14 @@ export const ThemeKeys = Object.freeze({
   System: "2",
   SystemStr: "System",
 });
+
+/**
+ * Enum for theme keys.
+ * @readonly
+ */
+export const TariffState = Object.freeze({
+  Trial: 0,
+  Paid: 1,
+  Delay: 2,
+  NotPaid: 3,
+});

packages/common/store/AuthStore.js

@@ -9,7 +9,12 @@ import TfaStore from "./TfaStore";
 import InfoPanelStore from "./InfoPanelStore";
 import { logout as logoutDesktop, desktopConstants } from "../desktop";
 import { combineUrl, isAdmin } from "../utils";
-import { AppServerConfig, LANGUAGE, TenantStatus } from "../constants";
+import {
+  AppServerConfig,
+  LANGUAGE,
+  TariffState,
+  TenantStatus,
+} from "../constants";
 const { proxyURL } = AppServerConfig;
 
 class AuthStore {
@@ -54,6 +59,7 @@ class AuthStore {
     requests.push(
       this.settingsStore.init(),
       this.setPortalQuota(),
+      this.setPortalTariff(),
       this.getPaymentPrices()
     );
 
@@ -315,6 +321,10 @@ class AuthStore {
     return this.portalQuota.trial || this.portalQuota.free;
   }
 
+  get isGracePeriod() {
+    return this.portalTariff.state === TariffState.Delay;
+  }
+
   setPortalTariff = async () => {
     const res = await api.portal.getPortalTariff();
     if (res) this.portalTariff = res;