Client: Added modal dialog after creating a room if the limit is almost exceeded.

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

@@ -9,7 +9,7 @@
   "BusinessSuggestion": "Customize your {{planName}} plan",
   "BusinessTitle": "You are using {{planName}} plan",
   "BusinessUpdated": "{{planName}} plan updated",
-  "CannotCreateNewRoom": "Cannot create new room.",
+  "CannotCreateNewRoom": "Room cannot be created",
   "CannotCreatePaidUsers": "Cannot add new paid users. ",
   "ChooseNewPayer": "Choose a new Payer",
   "ChooseNewPlan": "Would you like to choose a new pricing plan?",
@@ -24,14 +24,16 @@
   "InvalidEmailWithoutActiveSubscription": "We recommend choosing a new Payer who gets access to subscription settings in {{productName}}.",
   "InvalidEmailWithoutActiveSubscriptionByAdmin": "We recommend contacting the {{productName}} owner to choose a new Payer.",
   "ManagerTypesDescription": "Admin account types and their privileges",
-  "NewRoomWillExceedLimit": "Creating new room will exceed the maximum number of rooms allowed by your current pricing plan.",
+  "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.",
+  "NumberOfRoomsAccordingToTariff": "Number of rooms 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.",
   "PriceCalculation": "Calculate your price",
   "RenewSubscription": "Renew subscription to {{planName}} plan",
   "RoomManagerDescription": "Room administration and archiving, user invitation and management. Several admins can be assigned to the room.",
+  "RoomsQuotaAlmostExhausted": "The quota of rooms is almost exhausted.",
   "StartupSuggestion": "Do more with {{planName}} plan",
   "StartupTitle": "You are using free {{planName}} plan",
   "StripeCustomerPortal": "go to the Stripe customer portal",

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

@@ -226,7 +226,7 @@ const ArticleMainButtonContent = (props) => {
 
     const event = new Event(Events.ROOM_CREATE);
     window.dispatchEvent(event);
-  }, []);
+  }, [isWarningRoomsDialog]);
 
   const onShowSelectFileDialog = React.useCallback(() => {
     setSelectFileDialogVisible(true);

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

@@ -81,6 +81,7 @@ import { PDFFormEditingDialog } from "../dialogs/PDFFormEditingDialog";
 import { SharePDFFormDialog } from "../dialogs/SharePDFFormDialog";
 import { FillPDFDialog } from "../dialogs/FillPDFDialog";
 import { ShareCollectSelector } from "../ShareCollectSelector";
+import { currentQuotaStore } from "@docspace/shared/store";
 
 const Panels = (props) => {
   const {
@@ -137,6 +138,11 @@ const Panels = (props) => {
     selectFileFormRoomOpenRoot,
     fillPDFDialogData,
     shareCollectSelector,
+
+    isRoomCreatedByCurrentUser,
+    setIsRoomCreatedByCurrentUser,
+    isRoomTariffAlmostLimit,
+    setInviteUsersWarningDialogVisible,
   } = props;
 
   const [sharePDFForm, setSharePDFForm] = useState({
@@ -192,6 +198,16 @@ const Panels = (props) => {
     };
   }, [handleSharePDFForm]);
 
+  useEffect(() => {
+    if (isRoomCreatedByCurrentUser) {
+      isRoomTariffAlmostLimit && setInviteUsersWarningDialogVisible(true);
+      setIsRoomCreatedByCurrentUser(false);
+    }
+    return () => {
+      setIsRoomCreatedByCurrentUser(false);
+    };
+  }, [isRoomTariffAlmostLimit, isRoomCreatedByCurrentUser]);
+
   return [
     settingsPluginDialogVisible && (
       <SettingsPluginDialog
@@ -330,7 +346,7 @@ export default inject(
     backup,
     createEditRoomStore,
     pluginStore,
-    filesStore,
+    currentQuotaStore,
     filesActionsStore,
   }) => {
     const {
@@ -380,6 +396,8 @@ export default inject(
       selectFileFormRoomOpenRoot,
       fillPDFDialogData,
       shareCollectSelector,
+
+      setInviteUsersWarningDialogVisible,
     } = dialogsStore;
 
     const { preparationPortalDialogVisible } = backup;
@@ -388,7 +406,12 @@ export default inject(
     const { uploadPanelVisible } = uploadDataStore;
     const { isVisible: versionHistoryPanelVisible } = versionHistoryStore;
     const { hotkeyPanelVisible } = settingsStore;
-    const { confirmDialogIsLoading } = createEditRoomStore;
+    const {
+      confirmDialogIsLoading,
+      isRoomCreatedByCurrentUser,
+      setIsRoomCreatedByCurrentUser,
+    } = createEditRoomStore;
+    const { isRoomTariffAlmostLimit } = currentQuotaStore;
 
     const {
       settingsPluginDialogVisible,
@@ -450,6 +473,11 @@ export default inject(
       selectFileFormRoomOpenRoot,
       fillPDFDialogData,
       shareCollectSelector,
+
+      isRoomCreatedByCurrentUser,
+      setIsRoomCreatedByCurrentUser,
+      isRoomTariffAlmostLimit,
+      setInviteUsersWarningDialogVisible,
     };
   },
 )(observer(Panels));

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

@@ -31,9 +31,15 @@ import { Text } from "@docspace/shared/components/text";
 
 export interface RoomsContentProps {
   isRoomsTariffLimit: boolean;
+  maxCountRoomsByQuota: number;
+  usedRoomsCount: number;
 }
 
-const RoomsContent = ({ isRoomsTariffLimit }: RoomsContentProps) => {
+const RoomsContent = ({
+  isRoomsTariffLimit,
+  maxCountRoomsByQuota,
+  usedRoomsCount,
+}: RoomsContentProps) => {
   const { t } = useTranslation(["Payments", "Common"]);
   if (isRoomsTariffLimit)
     return (
@@ -45,12 +51,30 @@ const RoomsContent = ({ isRoomsTariffLimit }: RoomsContentProps) => {
         <Text>{t("ChooseNewPlan")}</Text>
       </>
     );
+
+  return (
+    <>
+      <Text fontWeight={600}>{t("RoomsQuotaAlmostExhausted")}</Text>
+      <br />
+      <Text>
+        {t("NumberOfRoomsAccordingToTariff", {
+          currentValue: usedRoomsCount,
+          maxValue: maxCountRoomsByQuota,
+        })}
+      </Text>
+      <br />
+      <Text>{t("ChooseNewPlan")}</Text>
+    </>
+  );
 };
 
 export default inject(({ currentQuotaStore }) => {
-  const { isRoomsTariffLimit } = currentQuotaStore;
+  const { isRoomsTariffLimit, maxCountRoomsByQuota, usedRoomsCount } =
+    currentQuotaStore;
 
   return {
     isRoomsTariffLimit,
+    maxCountRoomsByQuota,
+    usedRoomsCount,
   };
 })(observer(RoomsContent));

packages/client/src/store/CreateEditRoomStore.js

@@ -87,8 +87,8 @@ class CreateEditRoomStore {
     this.onClose = onClose;
   };
 
-  setRoomIsCreated = (onClose) => {
-    this.onClose = onClose;
+  setIsRoomCreatedByCurrentUser = (value) => {
+    this.isRoomCreatedByCurrentUser = value;
   };
 
   onCreateRoom = async (withConfirm = false, t) => {
@@ -152,6 +152,8 @@ class CreateEditRoomStore {
           ? await createRoomInThirdpary(storageFolderId, createRoomData)
           : await createRoom(createRoomData);
 
+      this.setIsRoomCreatedByCurrentUser(true);
+
       room.isLogoLoading = true;
 
       const actions = [];

packages/shared/store/CurrentQuotaStore.ts

@@ -335,6 +335,11 @@ class CurrentQuotasStore {
   };
 
   get isWarningRoomsDialog() {
+    console.log(
+      "isRoomsTariffLimit",
+      this.currentTariffStatusStore?.isGracePeriod,
+      this.isRoomsTariffLimit,
+    );
     return (
       this.currentTariffStatusStore?.isGracePeriod || this.isRoomsTariffLimit
     );