diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
index c1a44c008..48c4b9843 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
@@ -1,6 +1,6 @@
import { Box, Typography } from '@mui/material';
import React from 'react';
-import { convertBytesToHumanReadable } from 'utils/billing';
+import { makeHumanReadableStorage } from 'utils/billing';
import constants from 'utils/strings/constants';
interface Iprops {
@@ -17,13 +17,9 @@ export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
- {`${convertBytesToHumanReadable(
- totalStorage - totalUsage,
- 1
- )} ${constants.OF} ${convertBytesToHumanReadable(
- totalStorage,
- 0
- )} ${constants.FREE}`}
+ {`${makeHumanReadableStorage(totalStorage - totalUsage)} ${
+ constants.OF
+ } ${makeHumanReadableStorage(totalStorage)} ${constants.FREE}`}
);
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
index e3d7b002f..e91daea73 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
@@ -1,7 +1,7 @@
import { Typography } from '@mui/material';
import { SpaceBetweenFlex } from 'components/Container';
import React from 'react';
-import { convertBytesToHumanReadable } from 'utils/billing';
+import { makeHumanReadableStorage } from 'utils/billing';
import constants from 'utils/strings/constants';
import { Progressbar } from '../../styledComponents';
@@ -17,9 +17,9 @@ export function IndividualUsageSection({ userDetails }) {
style={{
marginTop: '12px',
}}>
- {`${convertBytesToHumanReadable(
+ {`${makeHumanReadableStorage(
userDetails.usage,
- 1
+ 'round-up'
)} ${constants.USED}`}
{constants.PHOTO_COUNT(userDetails.fileCount ?? 0)}
diff --git a/src/utils/billing/index.ts b/src/utils/billing/index.ts
index df73c9396..85a7dcf02 100644
--- a/src/utils/billing/index.ts
+++ b/src/utils/billing/index.ts
@@ -29,6 +29,10 @@ enum RESPONSE_STATUS {
fail = 'fail',
}
+const StorageUnits = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+const TEN_GB = 10 * 1024 * 1024 * 1024;
+
export function convertBytesToGBs(bytes, precision?): string {
return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2) + ' GB';
}
@@ -46,6 +50,34 @@ export function convertBytesToHumanReadable(
return (bytes / Math.pow(1024, i)).toFixed(precision) + ' ' + sizes[i];
}
+export function makeHumanReadableStorage(
+ bytes: number,
+
+ round: 'round-up' | 'round-down' = 'round-down'
+): string {
+ const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+ let quantity = bytes / Math.pow(1024, i);
+ let unit = StorageUnits[i];
+
+ if (quantity > 100 && unit !== 'GB') {
+ quantity /= 1024;
+ unit = StorageUnits[i + 1];
+ }
+
+ quantity = Number(quantity.toFixed(1));
+
+ if (bytes >= TEN_GB) {
+ if (round === 'round-up') {
+ quantity = Math.round(quantity + 1);
+ } else {
+ quantity = Math.round(quantity);
+ }
+ }
+
+ return `${quantity} ${unit}`;
+}
+
export function hasPaidSubscription(subscription: Subscription) {
return (
subscription &&