IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: Added banners when the storage limit for a tariff is reached.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2024-08-14 11:35:11 +03:00
parent cf47278719
commit 5994561951
5 changed files with 146 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/public/locales/en/MainBar.json
View File

@ -17,7 +17,10 @@
"UserTariffAlmostReachedForAdmins": "Once the limit is reached, 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.",
"UserTariffAlmostReached": "Once the limit is reached, all users will be added with User permissions only. To be able to add further admins/power users, contact the DocSpace administrator to upgrade the tariff plan.",
"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 DocSpace administrator to upgrade the 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}}"
"UserTariffLimit": "The limit is reached for the number of admins/power users: {{currentValue}} / {{maxValue}}",
"StorageTariffLimit": "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."
}

155
packages/client/src/components/MainBar/Bar.js
View File

@ -68,7 +68,7 @@ const Bar = (props) => {
addedManagersCount,
showRoomQuotaBar,
showStorageQuotaBar,
isStorageTariffAlmostLimit,
isUserTariffAlmostLimit,
currentColorScheme,
@ -77,7 +77,7 @@ const Bar = (props) => {
showUserPersonalQuotaBar,
tenantCustomQuota,
showTenantCustomQuotaBar,
isStorageTariffLimit,
isUserTariffLimit,
} = props;
@ -85,7 +85,8 @@ const Bar = (props) => {
const [barVisible, setBarVisible] = useState({
roomQuota: false,
storageQuota: false,
storageTariff: false,
storageTariffLimit: false,
tenantCustomQuota: false,
usersTariff: false,
usersTariffLimit: false,
@ -139,10 +140,17 @@ const Bar = (props) => {
usersTariff: !closed.includes(QuotaBarTypes.UsersTariff),
}));
}
console.log(
"!closed.includes(QuotaBarTypes.StorageTariff)",
!closed.includes(QuotaBarTypes.StorageTariff),
);
if (isAdmin || isPowerUser || isRoomAdmin) {
setBarVisible((value) => ({
...value,
storageQuota: !closed.includes(QuotaBarTypes.StorageQuota),
storageTariff: !closed.includes(QuotaBarTypes.StorageTariff),
storageTariffLimit: !closed.includes(
QuotaBarTypes.StorageTariffLimit,
),
tenantCustomQuota: !closed.includes(QuotaBarTypes.TenantCustomQuota),
}));
}
@ -156,7 +164,8 @@ const Bar = (props) => {
} else {
setBarVisible({
roomQuota: isAdmin,
storageQuota: isAdmin || isPowerUser || isRoomAdmin,
storageTariff: isAdmin || isPowerUser || isRoomAdmin,
storageTariffLimit: isAdmin || isPowerUser || isRoomAdmin,
tenantCustomQuota: isAdmin || isPowerUser || isRoomAdmin,
usersTariff: isAdmin | isRoomAdmin,
usersTariffLimit: isAdmin | isRoomAdmin,
@ -236,15 +245,18 @@ const Bar = (props) => {
localStorage.setItem("barClose", JSON.stringify(closed));
switch (currentBar) {
case QuotaBarTypes.RoomQuota:
setBarVisible((value) => ({ ...value, roomQuota: false }));
// case QuotaBarTypes.RoomQuota:
// setBarVisible((value) => ({ ...value, roomQuota: false }));
// break;
case QuotaBarTypes.StorageTariff:
setBarVisible((value) => ({ ...value, storageTariff: false }));
break;
case QuotaBarTypes.StorageQuota:
setBarVisible((value) => ({ ...value, storageQuota: false }));
break;
case QuotaBarTypes.TenantCustomQuota:
setBarVisible((value) => ({ ...value, tenantCustomQuota: false }));
case QuotaBarTypes.StorageTariffLimit:
setBarVisible((value) => ({ ...value, storageTariffLimit: false }));
break;
// case QuotaBarTypes.TenantCustomQuota:
// setBarVisible((value) => ({ ...value, tenantCustomQuota: false }));
// break;
case QuotaBarTypes.UsersTariff:
setBarVisible((value) => ({
...value,
@ -257,15 +269,15 @@ const Bar = (props) => {
usersTariffLimit: false,
}));
break;
case QuotaBarTypes.UserAndStorageQuota:
setBarVisible((value) => ({ ...value, storageAndUserQuota: false }));
break;
case QuotaBarTypes.RoomAndStorageQuota:
setBarVisible((value) => ({ ...value, storageAndRoomQuota: false }));
break;
case QuotaBarTypes.PersonalUserQuota:
setBarVisible((value) => ({ ...value, personalUserQuota: false }));
break;
// case QuotaBarTypes.UserAndStorageQuota:
// setBarVisible((value) => ({ ...value, storageAndUserQuota: false }));
// break;
// case QuotaBarTypes.RoomAndStorageQuota:
// setBarVisible((value) => ({ ...value, storageAndRoomQuota: false }));
// break;
// case QuotaBarTypes.PersonalUserQuota:
// setBarVisible((value) => ({ ...value, personalUserQuota: false }));
// break;
}
setMaintenanceExist(false);
@ -285,47 +297,62 @@ const Bar = (props) => {
};
const getCurrentBar = () => {
if (
showRoomQuotaBar &&
showStorageQuotaBar &&
barVisible.storageAndRoomQuota
) {
return {
type: QuotaBarTypes.RoomAndStorageQuota,
maxValue: null,
currentValue: null,
};
}
if (
isUserTariffAlmostLimit &&
showStorageQuotaBar &&
barVisible.storageAndUserQuota
) {
return {
type: QuotaBarTypes.UserAndStorageQuota,
maxValue: null,
currentValue: null,
};
}
// if (
// showRoomQuotaBar &&
// isStorageTariffAlmostLimit &&
// barVisible.storageAndRoomQuota
// ) {
// return {
// type: QuotaBarTypes.RoomAndStorageQuota,
// maxValue: null,
// currentValue: null,
// };
// }
// if (
// isUserTariffAlmostLimit &&
// isStorageTariffAlmostLimit &&
// barVisible.storageAndUserQuota
// ) {
// return {
// type: QuotaBarTypes.UserAndStorageQuota,
// maxValue: null,
// currentValue: null,
// };
// }
if (showRoomQuotaBar && barVisible.roomQuota) {
// if (showRoomQuotaBar && barVisible.roomQuota) {
// return {
// type: QuotaBarTypes.RoomQuota,
// maxValue: maxCountRoomsByQuota,
// currentValue: usedRoomsCount,
// };
// }
// if (isStorageTariffLimit && barVisible.tenantCustomQuota) {
// return {
// type: QuotaBarTypes.TenantCustomQuota,
// maxValue: getConvertedSize(t, tenantCustomQuota),
// currentValue: getConvertedSize(t, usedTotalStorageSizeCount),
// };
// }
console.log(
"isStorageTariffAlmostLimit",
isStorageTariffAlmostLimit,
barVisible.storageTariff,
);
if (isStorageTariffAlmostLimit && barVisible.storageTariff) {
return {
type: QuotaBarTypes.RoomQuota,
maxValue: maxCountRoomsByQuota,
currentValue: usedRoomsCount,
};
}
if (showStorageQuotaBar && barVisible.storageQuota) {
return {
type: QuotaBarTypes.StorageQuota,
type: QuotaBarTypes.StorageTariff,
maxValue: getConvertedSize(t, maxTotalSizeByQuota),
currentValue: getConvertedSize(t, usedTotalStorageSizeCount),
};
}
if (showTenantCustomQuotaBar && barVisible.tenantCustomQuota) {
if (isStorageTariffLimit && barVisible.storageTariffLimit) {
return {
type: QuotaBarTypes.TenantCustomQuota,
maxValue: getConvertedSize(t, tenantCustomQuota),
type: QuotaBarTypes.StorageTariffLimit,
maxValue: getConvertedSize(t, maxTotalSizeByQuota),
currentValue: getConvertedSize(t, usedTotalStorageSizeCount),
};
}
@ -346,11 +373,11 @@ const Bar = (props) => {
};
}
if (showUserPersonalQuotaBar && barVisible.personalUserQuota) {
return {
type: QuotaBarTypes.PersonalUserQuota,
};
}
// if (showUserPersonalQuotaBar && barVisible.personalUserQuota) {
// return {
// type: QuotaBarTypes.PersonalUserQuota,
// };
// }
return null;
};
@ -423,11 +450,11 @@ export default inject(
addedManagersCount,
showRoomQuotaBar,
showStorageQuotaBar,
isStorageTariffAlmostLimit,
isUserTariffAlmostLimit,
showUserPersonalQuotaBar,
tenantCustomQuota,
showTenantCustomQuotaBar,
isStorageTariffLimit,
isUserTariffLimit,
} = currentQuotaStore;
@ -453,7 +480,7 @@ export default inject(
addedManagersCount,
showRoomQuotaBar,
showStorageQuotaBar,
isStorageTariffAlmostLimit,
isUserTariffAlmostLimit,
currentColorScheme,
@ -461,7 +488,7 @@ export default inject(
showUserPersonalQuotaBar,
tenantCustomQuota,
showTenantCustomQuotaBar,
isStorageTariffLimit,
isUserTariffLimit,
};
},

41
packages/client/src/components/MainBar/QuotasBar.js
View File

@ -117,7 +117,10 @@ const QuotasBar = ({
);
};
const getUserTariffAlmostLimit = () => {
if (!isAdmin) return t("UserTariffAlmostReached");
if (!isAdmin)
return t("UserTariffAlmostReached", {
productName: t("Common:ProductName"),
});
return (
<Trans
@ -165,6 +168,31 @@ const QuotasBar = ({
/>
);
};
const getStorageTariffDescription = () => {
if (!isAdmin)
return t("RemoveFilesOrContactToUpgrade", {
productName: t("Common:ProductName"),
});
return (
<Trans
t={t}
i18nKey="RemoveFilesOrClickToUpgrade"
components={{
1: (
<Link
fontSize="12px"
fontWeight="400"
color={currentColorScheme?.main?.accent}
className="error_description_link"
onClick={onClickAction}
/>
),
}}
/>
);
};
const getQuotaInfo = () => {
switch (type) {
case QuotaBarTypes.RoomQuota:
@ -189,10 +217,15 @@ const QuotasBar = ({
</Trans>
),
};
case QuotaBarTypes.StorageQuota:
case QuotaBarTypes.StorageTariff:
return {
header: t("StorageQuotaHeader", { currentValue, maxValue }),
description: getStorageQuotaDescription(),
description: getStorageTariffDescription(),
};
case QuotaBarTypes.StorageTariffLimit:
return {
header: t("StorageTariffLimit", { currentValue, maxValue }),
description: getStorageTariffDescription(),
};
case QuotaBarTypes.TenantCustomQuota:
return {
@ -204,7 +237,7 @@ const QuotasBar = ({
header: t("UserQuotaHeader", { currentValue, maxValue }),
description: getUserTariffAlmostLimit(),
};
case QuotaBarTypes.UsersTariffLimit:
case QuotaBarTypes.TariffLimitPerUser:
return {
header: t("UserTariffLimit", { currentValue, maxValue }),
description: getUserTariffLimit(),

3
packages/client/src/helpers/constants.js
View File

@ -97,7 +97,8 @@ export const TableVersions = Object.freeze({
export const QuotaBarTypes = Object.freeze({
ConfirmEmail: "confirm-email",
RoomQuota: "room-quota",
StorageQuota: "storage-quota",
StorageTariff: "storage-quota",
StorageTariffLimit: "storage-quota-limit",
UsersTariff: "user-quota",
UsersTariffLimit: "user-quota-limit",
UserAndStorageQuota: "user-storage-quota",

13
packages/shared/store/CurrentQuotaStore.ts
View File

@ -252,10 +252,19 @@ class CurrentQuotasStore {
);
}
get showStorageQuotaBar() {
get isStorageTariffAlmostLimit() {
return (
(this.usedTotalStorageSizeCount / this.maxTotalSizeByQuota) * 100 >=
PERCENTAGE_FOR_SHOWING_BAR
PERCENTAGE_FOR_SHOWING_BAR &&
this.usedTotalStorageSizeCount < this.maxTotalSizeByQuota
);
}
get isStorageTariffLimit() {
return (
(this.usedTotalStorageSizeCount / this.maxTotalSizeByQuota) * 100 >=
PERCENTAGE_FOR_SHOWING_BAR &&
this.usedTotalStorageSizeCount >= this.maxTotalSizeByQuota
);
}