Client: Refactoring, added a dialogue for users if the limit is almost reached.

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

@@ -11,7 +11,7 @@
   "BusinessUpdated": "{{planName}} plan updated",
   "CannotCreateNewRoom": "Room cannot be created",
   "CannotRestoreRoom": "Room cannot be restored",
-  "CannotCreatePaidUsers": "Cannot add new paid users. ",
+  "CannotCreatePaidUsers": "Paid users cannot be added",
   "ChooseNewPayer": "Choose a new Payer",
   "ChooseNewPlan": "Would you like to choose a new pricing plan?",
   "ContactUs": "For sales questions, contact us at",
@@ -26,9 +26,10 @@
   "InvalidEmailWithoutActiveSubscriptionByAdmin": "We recommend contacting the {{productName}} owner to choose a new Payer.",
   "ManagerTypesDescription": "Admin account types and their privileges",
   "NewRoomWillExceedLimit": "Creating this room is not possible since the limit is reached for the number of rooms included in your current plan.",
-  "NewUsersWillExceedMembersLimit": "Adding new users will exceed the maximum number of portal paid members allowed by your current pricing plan.",
+  "NewUsersWillExceedMembersLimit": "Adding new paid users is not possible since the limit is reached for the number of admins included in your current plan.",
   "NotPossibleRoomRestoring": "Restoring this room is not possible since the limit is reached for the number of rooms included in your current plan.",
   "NumberOfRoomsAccordingToTariff": "Number of rooms according to your tariff plan: {{currentValue}}/{{maxValue}}",
+  "NumberOfUsersAccordingToTariff": "Number of managers according to your tariff plan: {{currentValue}}/{{maxValue}}",
   "Pay": "Pay",
   "Payer": "Payer",
   "PayerDescription": "This user has access to payment details and is the only user who can adjust the quota and make payments. The {{productName}} owner, as well as the paying manager themselves, can reassign the paying manager role using the Stripe customer portal.",
@@ -44,5 +45,6 @@
   "UpgradePlan": "Upgrade plan",
   "UserNotFound": "User <1>{{email}}</1> is not found.",
   "UserNotFoundMatchingEmail": "We couldn’t find the user with the matching Stripe e-mail.",
+  "UsersQuotaAlmostExhausted": "The quota of paid users is almost exhausted.",
   "YourPrice": "Your price"
 }

packages/client/src/HOCs/withHotkeys.js

@@ -84,7 +84,7 @@ const withHotkeys = (Component) => {
       deleteRooms,
       archiveRooms,
       isWarningRoomsDialog,
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
 
       security,
       copyToClipboard,
@@ -159,7 +159,7 @@ const withHotkeys = (Component) => {
     const onCreateRoom = () => {
       if (!isVisitor && isRoomsFolder && security?.Create) {
         if (isWarningRoomsDialog) {
-          setInviteUsersWarningDialogVisible(true);
+          setQuotaWarningDialogVisible(true);
           return;
         }
 
@@ -473,7 +473,7 @@ const withHotkeys = (Component) => {
       const {
         setDeleteDialogVisible,
         setSelectFileDialogVisible,
-        setInviteUsersWarningDialogVisible,
+        setQuotaWarningDialogVisible,
       } = dialogsStore;
       const {
         isAvailableOption,
@@ -555,7 +555,7 @@ const withHotkeys = (Component) => {
         archiveRooms,
 
         isWarningRoomsDialog,
-        setInviteUsersWarningDialogVisible,
+        setQuotaWarningDialogVisible,
 
         security,
         copyToClipboard,

packages/client/src/components/Article/MainButton/index.js

@@ -171,7 +171,7 @@ const ArticleMainButtonContent = (props) => {
     copyPanelVisible,
 
     security,
-    setInviteUsersWarningDialogVisible,
+    setQuotaWarningDialogVisible,
     currentDeviceType,
 
     isFrame,
@@ -220,7 +220,7 @@ const ArticleMainButtonContent = (props) => {
 
   const onCreateRoom = React.useCallback(() => {
     if (isWarningRoomsDialog) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -285,7 +285,7 @@ const ArticleMainButtonContent = (props) => {
     const type = e.action;
 
     if (showWarningDialog(type)) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -919,7 +919,7 @@ export default inject(
     const {
       setSelectFileDialogVisible,
       setInvitePanelOptions,
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
       copyPanelVisible,
       moveToPanelVisible,
       restorePanelVisible,
@@ -949,7 +949,7 @@ export default inject(
     const { frameConfig, isFrame } = settingsStore;
 
     return {
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
       showText: settingsStore.showText,
       isMobileArticle: settingsStore.isMobileArticle,
 

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

@@ -52,7 +52,7 @@ const EmptyContainer = ({
   sectionWidth,
   isRoomNotFoundOrMoved,
   isGracePeriod,
-  setInviteUsersWarningDialogVisible,
+  setQuotaWarningDialogVisible,
   isRoot,
   isPublicRoom,
   isEmptyPage,
@@ -80,7 +80,7 @@ const EmptyContainer = ({
 
   const onCreateRoom = (e) => {
     if (isWarningRoomsDialog) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -137,7 +137,7 @@ export default inject(
 
     const { isGracePeriod } = currentTariffStatusStore;
 
-    const { setInviteUsersWarningDialogVisible } = dialogsStore;
+    const { setQuotaWarningDialogVisible } = dialogsStore;
     const { isPublicRoom } = publicRoomStore;
 
     const isRoomNotFoundOrMoved =
@@ -154,7 +154,7 @@ export default inject(
       parentId: selectedFolderStore.parentId,
       isRoomNotFoundOrMoved,
       isGracePeriod,
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
       type: selectedFolderStore.type,
       isRoot,
       isPublicRoom,

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

@@ -115,7 +115,7 @@ const Panels = (props) => {
     confirmDialogIsLoading,
     restoreAllPanelVisible,
     archiveDialogVisible,
-    inviteUsersWarningDialogVisible,
+    inviteQuotaWarningDialogVisible,
     preparationPortalDialogVisible,
     changeUserTypeDialogVisible,
     restoreRoomDialogVisible,
@@ -138,11 +138,10 @@ const Panels = (props) => {
     selectFileFormRoomOpenRoot,
     fillPDFDialogData,
     shareCollectSelector,
-
-    isRoomCreatedByCurrentUser,
-    setIsRoomCreatedByCurrentUser,
-    isRoomTariffAlmostLimit,
-    setInviteUsersWarningDialogVisible,
+    setQuotaWarningDialogVisible,
+    setIsNewQuotaItemsByCurrentUser,
+    isNewQuotaItemsByCurrentUser,
+    isItemTariffAlmostLimit,
   } = props;
 
   const [sharePDFForm, setSharePDFForm] = useState({
@@ -199,14 +198,14 @@ const Panels = (props) => {
   }, [handleSharePDFForm]);
 
   useEffect(() => {
-    if (isRoomCreatedByCurrentUser) {
-      isRoomTariffAlmostLimit && setInviteUsersWarningDialogVisible(true);
-      setIsRoomCreatedByCurrentUser(false);
+    if (isNewQuotaItemsByCurrentUser) {
+      isItemTariffAlmostLimit && setQuotaWarningDialogVisible(true);
+      setIsNewQuotaItemsByCurrentUser(false);
     }
     return () => {
-      setIsRoomCreatedByCurrentUser(false);
+      setIsNewQuotaItemsByCurrentUser(false);
     };
-  }, [isRoomTariffAlmostLimit, isRoomCreatedByCurrentUser]);
+  }, [isItemTariffAlmostLimit, isNewQuotaItemsByCurrentUser]);
 
   return [
     settingsPluginDialogVisible && (
@@ -291,7 +290,7 @@ const Panels = (props) => {
     ),
     archiveDialogVisible && <ArchiveDialog key="archive-dialog" />,
     restoreRoomDialogVisible && <RestoreRoomDialog key="archive-dialog" />,
-    inviteUsersWarningDialogVisible && (
+    inviteQuotaWarningDialogVisible && (
       <InviteUsersWarningDialog key="invite-users-warning-dialog" />
     ),
     preparationPortalDialogVisible && (
@@ -379,7 +378,7 @@ export default inject(
       selectFileFormRoomFilterParam,
       setSelectFileFormRoomDialogVisible,
       invitePanelOptions,
-      inviteUsersWarningDialogVisible,
+      inviteQuotaWarningDialogVisible,
       changeUserTypeDialogVisible,
       changeQuotaDialogVisible,
       submitToGalleryDialogVisible,
@@ -397,7 +396,9 @@ export default inject(
       fillPDFDialogData,
       shareCollectSelector,
 
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
+      setIsNewQuotaItemsByCurrentUser,
+      isNewQuotaItemsByCurrentUser,
     } = dialogsStore;
 
     const { preparationPortalDialogVisible } = backup;
@@ -406,12 +407,9 @@ export default inject(
     const { uploadPanelVisible } = uploadDataStore;
     const { isVisible: versionHistoryPanelVisible } = versionHistoryStore;
     const { hotkeyPanelVisible } = settingsStore;
-    const {
-      confirmDialogIsLoading,
-      isRoomCreatedByCurrentUser,
-      setIsRoomCreatedByCurrentUser,
-    } = createEditRoomStore;
-    const { isRoomTariffAlmostLimit } = currentQuotaStore;
+    const { confirmDialogIsLoading } = createEditRoomStore;
+    const { isRoomTariffAlmostLimit, isUserTariffAlmostLimit } =
+      currentQuotaStore;
 
     const {
       settingsPluginDialogVisible,
@@ -419,6 +417,11 @@ export default inject(
       pluginDialogVisible,
     } = pluginStore;
 
+    const isAccounts = window.location.href.indexOf("accounts/people") !== -1;
+    const isItemTariffAlmostLimit = isAccounts
+      ? isUserTariffAlmostLimit
+      : isRoomTariffAlmostLimit;
+
     return {
       preparationPortalDialogVisible,
       uploadPanelVisible,
@@ -450,7 +453,7 @@ export default inject(
       restoreAllPanelVisible,
       invitePanelVisible: invitePanelOptions.visible,
       archiveDialogVisible,
-      inviteUsersWarningDialogVisible,
+      inviteQuotaWarningDialogVisible,
       confirmDialogIsLoading,
       changeUserTypeDialogVisible,
       restoreRoomDialogVisible,
@@ -474,10 +477,10 @@ export default inject(
       fillPDFDialogData,
       shareCollectSelector,
 
-      isRoomCreatedByCurrentUser,
-      setIsRoomCreatedByCurrentUser,
-      isRoomTariffAlmostLimit,
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
+      setIsNewQuotaItemsByCurrentUser,
+      isNewQuotaItemsByCurrentUser,
+      isItemTariffAlmostLimit,
     };
   },
 )(observer(Panels));

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

@@ -168,17 +168,15 @@ export default inject(
     const { currentTariffPlanTitle, isRoomsTariffLimit, isUserTariffLimit } =
       currentQuotaStore;
 
-    const {
-      inviteUsersWarningDialogVisible,
-      setInviteUsersWarningDialogVisible,
-    } = dialogsStore;
+    const { inviteQuotaWarningDialogVisible, setQuotaWarningDialogVisible } =
+      dialogsStore;
 
     return {
       isPaymentPageAvailable,
       currentTariffPlanTitle,
       language: authStore.language,
-      visible: inviteUsersWarningDialogVisible,
-      setIsVisible: setInviteUsersWarningDialogVisible,
+      visible: inviteQuotaWarningDialogVisible,
+      setIsVisible: setQuotaWarningDialogVisible,
       dueDate,
       delayDueDate,
       isGracePeriod,

packages/client/src/components/dialogs/InviteUsersWarningDialog/sub-components/UsersContent.tsx

@@ -57,10 +57,29 @@ import { Text } from "@docspace/shared/components/text";
 
 export interface UsersContentProps {
   isUserTariffLimit: boolean;
+  isPaymentPageAvailable: boolean;
+  addedManagersCount: number;
+  maxCountManagersByQuota: number;
 }
 
-const UsersContent = ({ isUserTariffLimit }: UsersContentProps) => {
+const UsersContent = ({
+  isUserTariffLimit,
+  isPaymentPageAvailable,
+  addedManagersCount,
+  maxCountManagersByQuota,
+}: UsersContentProps) => {
   const { t } = useTranslation(["Payments", "Common"]);
+
+  const chooseNewPlan = (
+    <Text>
+      {isPaymentPageAvailable
+        ? t("ChooseNewPlan")
+        : t("MainBar:ContactToUpgradeTariff", {
+            productName: t("Common:ProductName"),
+          })}
+    </Text>
+  );
+
   if (isUserTariffLimit)
     return (
       <>
@@ -68,15 +87,38 @@ const UsersContent = ({ isUserTariffLimit }: UsersContentProps) => {
         <br />
         <Text>{t("NewUsersWillExceedMembersLimit")}</Text>
         <br />
-        <Text>{t("ChooseNewPlan")}</Text>
+        {chooseNewPlan}
       </>
     );
+
+  return (
+    <>
+      <Text fontWeight={600}>{t("UsersQuotaAlmostExhausted")}</Text>
+      <br />
+      <Text>
+        {t("NumberOfUsersAccordingToTariff", {
+          currentValue: addedManagersCount,
+          maxValue: maxCountManagersByQuota,
+        })}
+      </Text>
+      <br />
+      {chooseNewPlan}
+    </>
+  );
 };
 
 export default inject(({ currentQuotaStore }) => {
-  const { isUserTariffLimit } = currentQuotaStore;
+  const {
+    isUserTariffLimit,
+    isPaymentPageAvailable,
+    addedManagersCount,
+    maxCountManagersByQuota,
+  } = currentQuotaStore;
 
   return {
     isUserTariffLimit,
+    isPaymentPageAvailable,
+    addedManagersCount,
+    maxCountManagersByQuota,
   };
 })(observer(UsersContent));

packages/client/src/components/panels/InvitePanel/index.js

@@ -88,6 +88,7 @@ const InvitePanel = ({
   isRoomAdmin,
   maxCountManagersByQuota,
   invitePaidUsersCount,
+  setIsNewQuotaItemsByCurrentUser,
 }) => {
   const [invitePanelIsLoding, setInvitePanelIsLoading] = useState(
     roomId !== -1,
@@ -332,6 +333,9 @@ const InvitePanel = ({
         ? await inviteUsers(data)
         : await setRoomSecurity(roomId, data);
 
+      if (!isRooms) {
+        setIsNewQuotaItemsByCurrentUser(true);
+      }
       setIsLoading(false);
 
       onClose();
@@ -545,6 +549,7 @@ export default inject(
       setInvitePanelOptions,
       setInviteLanguage,
       invitePaidUsersCount,
+      setIsNewQuotaItemsByCurrentUser,
     } = dialogsStore;
 
     const { getFolderInfo, setRoomSecurity, getRoomSecurityInfo, folders } =
@@ -578,6 +583,7 @@ export default inject(
       isRoomAdmin,
       maxCountManagersByQuota,
       invitePaidUsersCount,
+      setIsNewQuotaItemsByCurrentUser,
     };
   },
 )(

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js

@@ -47,7 +47,7 @@ const RoomsItemHeader = ({
   setIsMobileHidden,
   isGracePeriod,
   setInvitePanelOptions,
-  setInviteUsersWarningDialogVisible,
+  setQuotaWarningDialogVisible,
   roomsView,
   setSelection,
   setBufferSelection,
@@ -86,7 +86,7 @@ const RoomsItemHeader = ({
     const parentRoomId = infoPanelSelection.id;
 
     if (isGracePeriod) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -188,8 +188,7 @@ export default inject(
       isGracePeriod: currentTariffStatusStore.isGracePeriod,
 
       setInvitePanelOptions: dialogsStore.setInvitePanelOptions,
-      setInviteUsersWarningDialogVisible:
-        dialogsStore.setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible: dialogsStore.setQuotaWarningDialogVisible,
 
       setSelection: filesStore.setSelection,
       setBufferSelection: filesStore.setBufferSelection,

packages/client/src/store/ContextOptionsStore.js

@@ -561,7 +561,7 @@ class ContextOptionsStore {
 
   onDuplicate = (item) => {
     if (this.currentQuotaStore.isWarningRoomsDialog) {
-      this.dialogsStore.setInviteUsersWarningDialogVisible(true);
+      this.dialogsStore.setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -861,7 +861,7 @@ class ContextOptionsStore {
     const { isGracePeriod } = this.currentTariffStatusStore;
 
     if (isGracePeriod) {
-      this.dialogsStore.setInviteUsersWarningDialogVisible(true);
+      this.dialogsStore.setQuotaWarningDialogVisible(true);
     } else {
       this.dialogsStore.setInvitePanelOptions({
         visible: true,
@@ -886,11 +886,11 @@ class ContextOptionsStore {
     const {
       setArchiveDialogVisible,
       setRestoreRoomDialogVisible,
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
     } = this.dialogsStore;
 
     if (action === "unarchive" && isWarningRoomsDialog) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -1104,7 +1104,7 @@ class ContextOptionsStore {
   onRestoreAllArchiveAction = () => {
     const { activeFiles, activeFolders } = this.filesStore;
     const {
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
       setRestoreAllArchive,
       setRestoreRoomDialogVisible,
     } = this.dialogsStore;
@@ -1114,7 +1114,7 @@ class ContextOptionsStore {
     if (isExistActiveItems) return;
 
     if (this.currentQuotaStore.isWarningRoomsDialog) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -2102,13 +2102,13 @@ class ContextOptionsStore {
   };
 
   onInvite = (e) => {
-    const { setInviteUsersWarningDialogVisible, setInvitePanelOptions } =
+    const { setQuotaWarningDialogVisible, setInvitePanelOptions } =
       this.dialogsStore;
 
     const type = e.item["data-type"];
 
     if (this.currentQuotaStore.showWarningDialog(type)) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 
@@ -2135,7 +2135,7 @@ class ContextOptionsStore {
 
   onCreateRoom = (item, fromItem) => {
     if (this.currentQuotaStore.isWarningRoomsDialog) {
-      this.dialogsStore.setInviteUsersWarningDialogVisible(true);
+      this.dialogsStore.setQuotaWarningDialogVisible(true);
       return;
     }
 

packages/client/src/store/CreateEditRoomStore.js

@@ -46,6 +46,7 @@ class CreateEditRoomStore {
   settingsStore = null;
   infoPanelStore = null;
   currentQuotaStore = null;
+  dialogsStore = null;
 
   constructor(
     filesStore,
@@ -57,6 +58,7 @@ class CreateEditRoomStore {
     infoPanelStore,
     currentQuotaStore,
     clientLoadingStore,
+    dialogsStore,
   ) {
     makeAutoObservable(this);
 
@@ -69,6 +71,7 @@ class CreateEditRoomStore {
     this.infoPanelStore = infoPanelStore;
     this.currentQuotaStore = currentQuotaStore;
     this.clientLoadingStore = clientLoadingStore;
+    this.dialogsStore = dialogsStore;
   }
 
   setRoomParams = (roomParams) => {
@@ -152,7 +155,7 @@ class CreateEditRoomStore {
           ? await createRoomInThirdpary(storageFolderId, createRoomData)
           : await createRoom(createRoomData);
 
-      this.setIsRoomCreatedByCurrentUser(true);
+      this.dialogsStore.setIsNewQuotaItemsByCurrentUser(true);
 
       room.isLogoLoading = true;
 

packages/client/src/store/DialogsStore.js

@@ -59,7 +59,7 @@ class DialogsStore {
   selectFileDialogVisible = false;
   selectFileFormRoomDialogVisible = false;
   convertPasswordDialogVisible = false;
-  inviteUsersWarningDialogVisible = false;
+  inviteQuotaWarningDialogVisible = false;
   changeQuotaDialogVisible = false;
   unsavedChangesDialogVisible = false;
   moveToPublicRoomVisible = false;
@@ -130,6 +130,7 @@ class DialogsStore {
   };
 
   invitePaidUsersCount = 0;
+  isNewQuotaItemsByCurrentUser = false;
 
   constructor(
     authStore,
@@ -468,8 +469,12 @@ class DialogsStore {
       this.inviteItems[index] = { ...this.inviteItems[index], ...item };
     });
 
-  setInviteUsersWarningDialogVisible = (inviteUsersWarningDialogVisible) => {
-    this.inviteUsersWarningDialogVisible = inviteUsersWarningDialogVisible;
+  setQuotaWarningDialogVisible = (inviteQuotaWarningDialogVisible) => {
+    this.inviteQuotaWarningDialogVisible = inviteQuotaWarningDialogVisible;
+  };
+
+  setIsNewQuotaItemsByCurrentUser = (value) => {
+    this.isNewQuotaItemsByCurrentUser = value;
   };
 
   setCreateRoomDialogVisible = (createRoomDialogVisible) => {

packages/client/src/store/FilesActionsStore.js

@@ -1796,14 +1796,14 @@ class FilesActionStore {
   archiveRooms = (action) => {
     const {
       setArchiveDialogVisible,
-      setInviteUsersWarningDialogVisible,
+      setQuotaWarningDialogVisible,
       setRestoreRoomDialogVisible,
     } = this.dialogsStore;
 
     const { isWarningRoomsDialog } = this.currentQuotaStore;
 
     if (action === "unarchive" && isWarningRoomsDialog) {
-      setInviteUsersWarningDialogVisible(true);
+      setQuotaWarningDialogVisible(true);
       return;
     }
 

packages/client/src/store/index.js

@@ -288,6 +288,7 @@ const createEditRoomStore = new CreateEditRoomStore(
   infoPanelStore,
   currentQuotaStore,
   clientLoadingStore,
+  dialogsStore,
 );
 
 const webhooksStore = new WebhooksStore(settingsStore);