Client: Updated bar for user and storage.

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

@@ -8,7 +8,8 @@
   "RoomQuotaDescription": "You can archive the unnecessary rooms or <1>{{clickHere}}</1> to find a more suitable pricing plan for your {{productName}}.",
   "RoomQuotaHeader": "The number of rooms is about to be exceeded: {{currentValue}} / {{maxValue}}",
   "StorageAndRoomHeader": "Storage and rooms limits are about to be exceeded.",
-  "StorageAndUserHeader": "Storage and admins/power users limits are 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 ",
   "StorageQuotaDescription": "You can remove the unnecessary files or <1>{{clickHere}}</1> to find a more suitable pricing plan for your {{productName}}.",
   "StorageQuotaExceeded": "Storage quota exceeded",
   "StorageQuotaHeader": "Storage space amount is about to be exceeded: {{currentValue}} / {{maxValue}}",
@@ -19,11 +20,13 @@
   "UserTariffReachedForAdmins": "All users will be added with User permissions only. To be able to add further admins/power users, <1>click here</1> to upgrade your tariff plan.",
   "UserTariffReached": "All users will be added with User permissions only. To be able to add further admins/power users, contact the {{productName}} administrator to upgrade the tariff plan.",
   "UserQuotaHeader": "The number of admins/power users is about to be exceeded: {{currentValue}} / {{maxValue}}.",
-  "UserTariffLimit": "The limit is reached for the number of admins/power users: {{currentValue}} / {{maxValue}}",
+  "UserTariffLimitHeader": "The limit is reached for the number of admins/power users: {{currentValue}} / {{maxValue}}",
-  "StorageTariffLimit": "The limit is reached for storage space: {{currentValue}} / {{maxValue}}",
+  "StorageLimitHeader": "The limit is reached for storage space: {{currentValue}} / {{maxValue}}",
   "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.",
-  "StorageQuotaPerUserExceeded": "Storage quota per user exceeded",
+  "PersonalQuotaHeaderForAdmins": "Storage quota per user exceeded",
-  "PersonalStorageQuotaExceed": "Your personal storage quota exceeded"
+  "PersonalQuotaHeader": "Your personal storage quota exceeded",
+  "ClickToUpgradeTariff": "<1>Click here</1> to upgrade your tariff plan.",
+  "ContactToUpgradeTariff": "Contact the {{productName}} administrator to upgrade the tariff plan."
 }

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

@@ -93,7 +93,8 @@ const Bar = (props) => {
     storageQuotaLimit: false,
     usersTariff: false,
     usersTariffLimit: false,
-    storageAndUserQuota: false,
+    storageAndUserTariff: false,
+    storageAndUserTariffLimit: false,
     storageAndRoomQuota: false,
     confirmEmail: false,
     personalUserQuota: false,
@@ -128,10 +129,7 @@ const Bar = (props) => {
           roomQuota: !closed.includes(QuotaBarTypes.RoomQuota),
 
           storageAndRoomQuota: !closed.includes(
-            QuotaBarTypes.UserAndStorageQuota,
+            QuotaBarTypes.UserAndStorageTariff,
-          ),
-          storageAndUserQuota: !closed.includes(
-            QuotaBarTypes.RoomAndStorageQuota,
           ),
         }));
       }
@@ -141,6 +139,12 @@ const Bar = (props) => {
           ...value,
           usersTariffLimit: !closed.includes(QuotaBarTypes.UsersTariffLimit),
           usersTariff: !closed.includes(QuotaBarTypes.UsersTariff),
+          storageAndUserTariff: !closed.includes(
+            QuotaBarTypes.UserAndStorageTariff,
+          ),
+          storageAndUserTariffLimit: !closed.includes(
+            QuotaBarTypes.UserAndStorageTariffLimit,
+          ),
         }));
       }
 
@@ -172,7 +176,8 @@ const Bar = (props) => {
         storageQuotaLimit: isAdmin || isPowerUser || isRoomAdmin,
         usersTariff: isAdmin | isRoomAdmin,
         usersTariffLimit: isAdmin | isRoomAdmin,
-        storageAndUserQuota: isAdmin,
+        storageAndUserTariff: isAdmin | isRoomAdmin,
+        storageAndUserTariffLimit: isAdmin | isRoomAdmin,
         storageAndRoomQuota: isAdmin,
         confirmEmail: true,
         personalUserQuota: isAdmin || isPowerUser || isRoomAdmin,
@@ -275,9 +280,15 @@ const Bar = (props) => {
           usersTariffLimit: false,
         }));
         break;
-      // case QuotaBarTypes.UserAndStorageQuota:
+      case QuotaBarTypes.UserAndStorageTariff:
-      //   setBarVisible((value) => ({ ...value, storageAndUserQuota: false }));
+        setBarVisible((value) => ({ ...value, storageAndUserTariff: false }));
-      //   break;
+        break;
+      case QuotaBarTypes.UserAndStorageTariffLimit:
+        setBarVisible((value) => ({
+          ...value,
+          storageAndUserTariffLimit: false,
+        }));
+        break;
       // case QuotaBarTypes.RoomAndStorageQuota:
       //   setBarVisible((value) => ({ ...value, storageAndRoomQuota: false }));
       //   break;
@@ -314,18 +325,34 @@ const Bar = (props) => {
     //     currentValue: null,
     //   };
     // }
-    // if (
+    console.log(
-    //   isUserTariffAlmostLimit &&
+      "isUserTariffAlmostLimit",
-    //   isStorageTariffAlmostLimit &&
+      isUserTariffAlmostLimit,
-    //   barVisible.storageAndUserQuota
+      isStorageTariffAlmostLimit,
-    // ) {
+      barVisible.storageAndUserTariff,
-    //   return {
+    );
-    //     type: QuotaBarTypes.UserAndStorageQuota,
+    if (
-    //     maxValue: null,
+      isUserTariffAlmostLimit &&
-    //     currentValue: null,
+      isStorageTariffAlmostLimit &&
-    //   };
+      barVisible.storageAndUserTariff
-    // }
+    ) {
-
+      return {
+        type: QuotaBarTypes.UserAndStorageTariff,
+        maxValue: null,
+        currentValue: null,
+      };
+    }
+    if (
+      isUserTariffLimit &&
+      isStorageTariffLimit &&
+      barVisible.storageAndUserTariffLimit
+    ) {
+      return {
+        type: QuotaBarTypes.UserAndStorageTariffLimit,
+        maxValue: null,
+        currentValue: null,
+      };
+    }
     // if (showRoomQuotaBar && barVisible.roomQuota) {
     //   return {
     //     type: QuotaBarTypes.RoomQuota,

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

@@ -217,8 +217,33 @@ const QuotasBar = ({
   };
 
   const getPersonalQuotaHeader = () => {
-    if (!isAdmin) return t("PersonalStorageQuotaExceed");
+    if (!isAdmin) return t("PersonalQuotaHeader");
-    return t("StorageQuotaPerUserExceeded");
+    return t("PersonalQuotaHeaderForAdmins");
+  };
+
+  const getUpgradeTariffDescription = () => {
+    if (!isAdmin)
+      return t("ContactToUpgradeTariff", {
+        productName: t("Common:ProductName"),
+      });
+
+    return (
+      <Trans
+        t={t}
+        i18nKey="ClickToUpgradeTariff"
+        components={{
+          1: (
+            <Link
+              fontSize="12px"
+              fontWeight="400"
+              color={currentColorScheme?.main?.accent}
+              className="error_description_link"
+              onClick={onClickAction}
+            />
+          ),
+        }}
+      />
+    );
   };
   const getQuotaInfo = () => {
     switch (type) {
@@ -251,7 +276,7 @@ const QuotasBar = ({
         };
       case QuotaBarTypes.StorageTariffLimit:
         return {
-          header: t("StorageTariffLimit", { currentValue, maxValue }),
+          header: t("StorageLimitHeader", { currentValue, maxValue }),
           description: getStorageTariffDescription(),
         };
       case QuotaBarTypes.StorageQuota:
@@ -261,7 +286,7 @@ const QuotasBar = ({
         };
       case QuotaBarTypes.StorageQuotaLimit:
         return {
-          header: t("StorageTariffLimit", { currentValue, maxValue }),
+          header: t("StorageLimitHeader", { currentValue, maxValue }),
           description: getTenantCustomQuota(),
         };
       case QuotaBarTypes.UsersTariff:
@@ -271,13 +296,18 @@ const QuotasBar = ({
         };
       case QuotaBarTypes.UsersTariffLimit:
         return {
-          header: t("UserTariffLimit", { currentValue, maxValue }),
+          header: t("UserTariffLimitHeader", { currentValue, maxValue }),
           description: getUserTariffLimit(),
         };
-      case QuotaBarTypes.UserAndStorageQuota:
+      case QuotaBarTypes.UserAndStorageTariff:
         return {
-          header: t("StorageAndUserHeader", { currentValue, maxValue }),
+          header: t("StorageAndUserHeader"),
-          description: getUserQuotaDescription(),
+          description: getUpgradeTariffDescription(),
+        };
+      case QuotaBarTypes.UserAndStorageTariffLimit:
+        return {
+          header: t("StorageAndUserTariffLimitHeader"),
+          description: getUpgradeTariffDescription(),
         };
       case QuotaBarTypes.RoomAndStorageQuota:
         return {

packages/client/src/helpers/constants.js

@@ -101,7 +101,8 @@ export const QuotaBarTypes = Object.freeze({
   StorageTariffLimit: "storage-quota-limit",
   UsersTariff: "user-quota",
   UsersTariffLimit: "user-quota-limit",
-  UserAndStorageQuota: "user-storage-quota",
+  UserAndStorageTariff: "user-storage-quota",
+  UserAndStorageTariffLimit: "user-storage-quota-limit",
   RoomAndStorageQuota: "room-storage-quota",
   PersonalUserQuota: "personal-user-quota",
   StorageQuota: "tenant-custom-quota",

packages/shared/store/CurrentQuotaStore.ts

@@ -296,6 +296,11 @@ class CurrentQuotasStore {
   }
 
   get isUserTariffAlmostLimit() {
+    console.log(
+      "isUserTariffAlmostLimit",
+      this.addedManagersCount,
+      this.maxCountManagersByQuota,
+    );
     return (
       this.addedManagersCount > 1 &&
       this.maxCountManagersByQuota - this.addedManagersCount <=