Client: Updated room and storage bar when almost reaching the tariff limit.

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

@@ -14,7 +14,7 @@
   "RemoveFilesOrClickToUpgrade": "Remove the unnecessary files or <1>click here</1> to upgrade your tariff plan.",
   "RemoveFilesOrContactToUpgrade": "Remove the unnecessary files or contact the {{productName}} administrator to upgrade the tariff plan.",
   "RemoveFilesOrContactToUpgradeQuota": "Remove the unnecessary files or contact the {{productName}} administrator to increase the storage quota.",
-  "StorageAndRoomHeader": "Storage and rooms limits are about to be exceeded.",
+  "StorageAndRoomHeader": "The limit for storage space and the number of rooms is about to be exceeded.",
   "StorageAndUserHeader": "The limit for storage space and the number of admins/power users is about to be exceeded.",
   "StorageAndUserTariffLimitHeader": "The limit is reached for storage space and the number of admins/power users ",
   "StorageQuotaHeader": "Storage space amount is about to be exceeded: {{currentValue}} / {{maxValue}}",

packages/client/src/components/MainBar/Bar.js

@@ -81,6 +81,7 @@ const Bar = (props) => {
     isUserTariffLimit,
     isStorageQuotaAlmostLimit,
     isStorageQuotaLimit,
+    isRoomTariffAlmostLimit,
   } = props;
 
   const navigate = useNavigate();
@@ -95,6 +96,7 @@ const Bar = (props) => {
     usersTariffLimit: false,
     storageAndUserTariff: false,
     storageAndUserTariffLimit: false,
+    roomsAndStorageTariff: false,
     storageAndRoomQuota: false,
     confirmEmail: false,
     personalUserQuota: false,
@@ -142,6 +144,9 @@ const Bar = (props) => {
           storageAndUserTariff: !closed.includes(
             QuotaBarTypes.UserAndStorageTariff,
           ),
+          roomsAndStorageTariff: closed.includes(
+            QuotaBarTypes.RoomsAndStorageTariff,
+          ),
           storageAndUserTariffLimit: !closed.includes(
             QuotaBarTypes.UserAndStorageTariffLimit,
           ),
@@ -177,6 +182,7 @@ const Bar = (props) => {
         usersTariff: isAdmin | isRoomAdmin,
         usersTariffLimit: isAdmin | isRoomAdmin,
         storageAndUserTariff: isAdmin | isRoomAdmin,
+        roomsAndStorageTariff: isAdmin | isRoomAdmin,
         storageAndUserTariffLimit: isAdmin | isRoomAdmin,
         storageAndRoomQuota: isAdmin,
         confirmEmail: true,
@@ -289,9 +295,9 @@ const Bar = (props) => {
           storageAndUserTariffLimit: false,
         }));
         break;
-      // case QuotaBarTypes.RoomAndStorageQuota:
-      //   setBarVisible((value) => ({ ...value, storageAndRoomQuota: false }));
-      //   break;
+      case QuotaBarTypes.RoomsAndStorageTariff:
+        setBarVisible((value) => ({ ...value, roomsAndStorageTariff: false }));
+        break;
       case QuotaBarTypes.PersonalUserQuota:
         setBarVisible((value) => ({ ...value, personalUserQuota: false }));
         break;
@@ -331,6 +337,19 @@ const Bar = (props) => {
       isStorageTariffAlmostLimit,
       barVisible.storageAndUserTariff,
     );
+
+    if (
+      isRoomTariffAlmostLimit &&
+      isStorageTariffAlmostLimit &&
+      barVisible.roomsAndStorageTariff
+    ) {
+      return {
+        type: QuotaBarTypes.RoomsAndStorageTariff,
+        maxValue: null,
+        currentValue: null,
+      };
+    }
+
     if (
       isUserTariffAlmostLimit &&
       isStorageTariffAlmostLimit &&
@@ -342,6 +361,7 @@ const Bar = (props) => {
         currentValue: null,
       };
     }
+
     if (
       isUserTariffLimit &&
       isStorageTariffLimit &&
@@ -495,6 +515,7 @@ export default inject(
       isUserTariffLimit,
       isStorageQuotaAlmostLimit,
       isStorageQuotaLimit,
+      isRoomTariffAlmostLimit,
     } = currentQuotaStore;
 
     const { currentColorScheme, setMainBarVisible } = settingsStore;
@@ -531,6 +552,7 @@ export default inject(
       isUserTariffLimit,
       isStorageQuotaAlmostLimit,
       isStorageQuotaLimit,
+      isRoomTariffAlmostLimit,
     };
   },
 )(withTranslation(["Profile", "Common"])(observer(Bar)));

packages/client/src/components/MainBar/QuotasBar.js

@@ -287,10 +287,10 @@ const QuotasBar = ({
           header: t("StorageAndUserTariffLimitHeader"),
           description: getUpgradeTariffDescription(),
         };
-      case QuotaBarTypes.RoomAndStorageQuota:
+      case QuotaBarTypes.RoomsAndStorageTariff:
         return {
-          header: t("StorageAndRoomHeader", { currentValue, maxValue }),
-          description: getUserQuotaDescription(),
+          header: t("StorageAndRoomHeader"),
+          description: getUpgradeTariffDescription(),
         };
       case QuotaBarTypes.PersonalUserQuota:
         return {

packages/client/src/helpers/constants.js

@@ -103,7 +103,7 @@ export const QuotaBarTypes = Object.freeze({
   UsersTariffLimit: "user-quota-limit",
   UserAndStorageTariff: "user-storage-quota",
   UserAndStorageTariffLimit: "user-storage-quota-limit",
-  RoomAndStorageQuota: "room-storage-quota",
+  RoomsAndStorageTariff: "room-storage-quota",
   PersonalUserQuota: "personal-user-quota",
   StorageQuota: "tenant-custom-quota",
   StorageQuotaLimit: "tenant-custom-quota-limit",

packages/shared/store/CurrentQuotaStore.ts

@@ -252,6 +252,13 @@ class CurrentQuotasStore {
     );
   }
 
+  get isRoomTariffAlmostLimit() {
+    return (
+      this.maxCountRoomsByQuota - this.usedRoomsCount <=
+        COUNT_FOR_SHOWING_BAR && this.usedRoomsCount < this.maxCountRoomsByQuota
+    );
+  }
+
   get isStorageTariffAlmostLimit() {
     return (
       (this.usedTotalStorageSizeCount / this.maxTotalSizeByQuota) * 100 >=
@@ -296,11 +303,6 @@ class CurrentQuotasStore {
   }
 
   get isUserTariffAlmostLimit() {
-    console.log(
-      "isUserTariffAlmostLimit",
-      this.addedManagersCount,
-      this.maxCountManagersByQuota,
-    );
     return (
       this.addedManagersCount > 1 &&
       this.maxCountManagersByQuota - this.addedManagersCount <=