Web: Files: added invite users dialog warning, fixed GracePeriodActivatedDescription translation

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

@@ -16,7 +16,7 @@
   "DowngradeNow": "Downgrade now",
   "FreeStartupPlan": "Free {{planName}} plan",
   "GracePeriodActivated": "Grace period activated",
-  "GracePeriodActivatedDescription": "Grace period is effective from <1>{{fromDate}}</1> to <1>{{byDate}}</1> ({{delayDaysCount}}). During the grace period, admins cannot create new rooms and add new users. After the due date of the grace period, DocSpace will become unavailable until the payment is made.",
+  "GracePeriodActivatedDescription": "Grace period is effective from <1>{{fromDate}}</1> to <2>{{byDate}}</2> ({{delayDaysCount}}). <6>During the grace period, admins cannot create new rooms and add new users. After the due date of the grace period, DocSpace will become unavailable until the payment is made.</6>",
   "InvalidEmail": "Invalid email",
   "LatePayment": "Late payment",
   "ManagerTypesDescription": "Admin account types and their privileges",
@@ -38,5 +38,7 @@
   "TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/month</3>",
   "UpgradeNow": "Upgrade now",
   "UserNotFound": "User <1>«{{email}}»</1> is not found",
-  "YourPrice": "Your price"
+  "YourPrice": "Your price",
+  "PaymentOverdue": "Cannot add new users. Business plan payment overdue",
+  "UpgradePlan": "Upgrade plan"
 }

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

@@ -15,7 +15,7 @@
   "DowngradeNow": "Понизить прямо сейчас",
   "FreeStartupPlan": "Бесплатный  {{planName}} план",
   "GracePeriodActivated": "Активирован льготный период",
-  "GracePeriodActivatedDescription": "Льготный период действует  с <1>{{fromDate}}</1> по <1>{{byDate}}</1> ({{delayDaysCount}}). В течение льготного периода администраторы не могут создавать новые комнаты и добавлять новых пользователей. По истечении срока действия льготного периода DocSpace станет недоступным до тех пор, пока не будет произведен платеж.",
+  "GracePeriodActivatedDescription": "Льготный период действует  с <1>{{fromDate}}</1> по <2>{{byDate}}</2> ({{delayDaysCount}}). <6>В течение льготного периода администраторы не могут создавать новые комнаты и добавлять новых пользователей. По истечении срока действия льготного периода DocSpace станет недоступным до тех пор, пока не будет произведен платеж.</6>",
   "InvalidEmail": "Неверный email",
   "LatePayment": "Просрочка платежа",
   "ManagerTypesDescription": "Типы учетных записей администратора и их привилегии",

packages/client/src/components/FilesPanels/index.js

@@ -23,6 +23,7 @@ import {
   ConflictResolveDialog,
   ConvertDialog,
   CreateRoomDialog,
+  InviteUsersWarningDialog,
 } from "../dialogs";
 import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
 import RestoreAllArchiveDialog from "../dialogs/RestoreAllArchiveDialog";
@@ -54,6 +55,7 @@ const Panels = (props) => {
     createRoomDialogVisible,
     restoreAllPanelVisible,
     restoreAllArchiveDialogVisible,
+    inviteUsersWarningDialogVisible,
   } = props;
 
   const { t } = useTranslation(["Translations", "SelectFile"]);
@@ -122,6 +124,9 @@ const Panels = (props) => {
     restoreAllArchiveDialogVisible && (
       <RestoreAllArchiveDialog key="restore-all-archive-dialog" />
     ),
+    inviteUsersWarningDialogVisible && (
+      <InviteUsersWarningDialog key="cannot-add-user-dialog" />
+    ),
   ];
 };
 
@@ -152,6 +157,7 @@ export default inject(
       selectFileDialogVisible,
       setSelectFileDialogVisible,
       invitePanelOptions,
+      inviteUsersWarningDialogVisible,
     } = dialogsStore;
 
     const { uploadPanelVisible } = uploadDataStore;
@@ -184,6 +190,7 @@ export default inject(
       restoreAllPanelVisible,
       invitePanelVisible: invitePanelOptions.visible,
       restoreAllArchiveDialogVisible,
+      inviteUsersWarningDialogVisible,
     };
   }
 )(observer(Panels));

packages/client/src/components/dialogs/InviteUsersWarningDialog/index.js

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from "react";
+import { inject, observer } from "mobx-react";
+import { withTranslation, Trans } from "react-i18next";
+import { withRouter } from "react-router";
+import moment from "moment";
+import { combineUrl } from "@docspace/common/utils";
+import AppServerConfig from "@docspace/common/constants/AppServerConfig";
+import ModalDialog from "@docspace/components/modal-dialog";
+import Button from "@docspace/components/button";
+import Text from "@docspace/components/text";
+
+const PROXY_BASE_URL = combineUrl(AppServerConfig.proxyURL, "/portal-settings");
+
+const InviteUsersWarningDialog = (props) => {
+  const {
+    t,
+    tReady,
+    history,
+    language,
+    dueDate,
+    delayDueDate,
+    visible,
+    setInviteUsersWarningDialogVisible,
+  } = props;
+
+  const [datesData, setDatesData] = useState({});
+
+  const { fromDate, byDate, delayDaysCount } = datesData;
+
+  useEffect(() => {
+    moment.locale(language);
+
+    gracePeriodDays();
+  }, [language, gracePeriodDays]);
+
+  const gracePeriodDays = () => {
+    const fromDateMoment = moment(dueDate);
+    const byDateMoment = moment(delayDueDate);
+
+    setDatesData({
+      fromDate: fromDateMoment.format("LL"),
+      byDate: byDateMoment.format("LL"),
+      delayDaysCount: fromDateMoment.to(byDateMoment, true),
+    });
+  };
+
+  const onClose = () => setInviteUsersWarningDialogVisible(false);
+
+  const onUpgradePlan = () => {
+    onClose();
+
+    const paymentPageUrl = combineUrl(
+      PROXY_BASE_URL,
+      "/payments/portal-payments"
+    );
+    history.push(paymentPageUrl);
+  };
+
+  return (
+    <ModalDialog
+      isLarge
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+      displayType="modal"
+    >
+      <ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <Text fontWeight={700} noSelect>
+          {t("PaymentOverdue")}
+        </Text>
+        <br />
+        <Text noSelect as="div">
+          <Trans t={t} i18nKey="GracePeriodActivatedDescription" ns="Payments">
+            Grace period activated from <strong>{{ fromDate }}</strong>
+            <strong>{{ byDate }}</strong>({{ delayDaysCount }})
+            <p style={{ margin: "1rem 0" }}>
+              During the grace period, admins cannot create new rooms and add
+              new users. After the due date of the grace period, DocSpace will
+              become unavailable until the payment is made.
+            </p>
+          </Trans>
+        </Text>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          key="OkButton"
+          label={t("UpgradePlan")}
+          size="normal"
+          primary
+          onClick={onUpgradePlan}
+          scale
+        />
+        <Button
+          key="CancelButton"
+          label={t("Common:CancelButton")}
+          size="normal"
+          onClick={onClose}
+          scale
+        />
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default inject(({ auth, dialogsStore }) => {
+  const { dueDate, delayDueDate } = auth.currentTariffStatusStore;
+  const {
+    inviteUsersWarningDialogVisible,
+    setInviteUsersWarningDialogVisible,
+  } = dialogsStore;
+
+  return {
+    language: auth.language,
+    visible: inviteUsersWarningDialogVisible,
+    setInviteUsersWarningDialogVisible,
+    dueDate,
+    delayDueDate,
+  };
+})(
+  observer(
+    withTranslation(["Payments", "Common"])(
+      withRouter(InviteUsersWarningDialog)
+    )
+  )
+);

packages/client/src/components/dialogs/index.js

@@ -26,6 +26,7 @@ import ChangePortalOwnerDialog from "./ChangePortalOwnerDialog";
 import ChangeNameDialog from "./ChangeNameDialog";
 import AvatarEditorDialog from "./AvatarEditorDialog";
 import DeletePortalDialog from "./DeletePortalDialog";
+import InviteUsersWarningDialog from "./InviteUsersWarningDialog";
 
 export {
   EmptyTrashDialog,
@@ -56,4 +57,5 @@ export {
   ChangeNameDialog,
   AvatarEditorDialog,
   DeletePortalDialog,
+  InviteUsersWarningDialog,
 };

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

@@ -338,9 +338,8 @@ const PaymentsPage = ({
                 i18nKey="GracePeriodActivatedDescription"
                 ns="Payments"
               >
-                Grace period activated from <strong>{{ fromDate }}</strong> -
-                <strong>{{ byDate }}</strong> ({{ delayDaysCount }}
-                ).
+                Grace period activated from <strong>{{ fromDate }}</strong>
+                <strong>{{ byDate }}</strong> ({{ delayDaysCount }})
               </Trans>
             </Text>
           )}

packages/client/src/store/ContextOptionsStore.js

@@ -416,12 +416,18 @@ class ContextOptionsStore {
 
     const { action } = data;
 
-    this.dialogsStore.setInvitePanelOptions({
-      visible: true,
-      roomId: action ? action : e,
-      hideSelector: false,
-      defaultAccess: ShareAccessRights.ReadOnly,
-    });
+    const { isGracePeriod } = this.authStore.currentTariffStatusStore;
+
+    if (isGracePeriod) {
+      this.dialogsStore.setInviteUsersWarningDialogVisible(true);
+    } else {
+      this.dialogsStore.setInvitePanelOptions({
+        visible: true,
+        roomId: action ? action : e,
+        hideSelector: false,
+        defaultAccess: ShareAccessRights.ReadOnly,
+      });
+    }
   };
 
   onClickPin = (e, id, t) => {

packages/client/src/store/DialogsStore.js

@@ -26,6 +26,7 @@ class DialogsStore {
   convertDialogVisible = false;
   selectFileDialogVisible = false;
   convertPasswordDialogVisible = false;
+  inviteUsersWarningDialogVisible = false;
   isFolderActions = false;
   roomCreation = false;
   invitePanelOptions = {
@@ -287,6 +288,10 @@ class DialogsStore {
       this.inviteItems[index] = { ...this.inviteItems[index], ...item };
     });
 
+  setInviteUsersWarningDialogVisible = (inviteUsersWarningDialogVisible) => {
+    this.inviteUsersWarningDialogVisible = inviteUsersWarningDialogVisible;
+  };
+
   get someDialogIsOpen() {
     return (
       this.sharingPanelVisible ||
@@ -309,7 +314,8 @@ class DialogsStore {
       this.eventDialogVisible ||
       this.invitePanelOptions.visible ||
       this.restoreAllArchiveDialogVisible ||
-      this.restoreAllPanelVisible
+      this.restoreAllPanelVisible ||
+      this.inviteUsersWarningDialogVisible
     );
   }