make storage conversion to human readable better

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) {
             <Typography
                 fontWeight={'bold'}
                 sx={{ fontSize: '24px', lineHeight: '30px' }}>
-                {`${convertBytesToHumanReadable(
+                {`${makeHumanReadableStorage(totalStorage - totalUsage)} ${
-                    totalStorage - totalUsage,
+                    constants.OF
-                    1
+                } ${makeHumanReadableStorage(totalStorage)} ${constants.FREE}`}
-                )} ${constants.OF} ${convertBytesToHumanReadable(
-                    totalStorage,
-                    0
-                )} ${constants.FREE}`}
             </Typography>
         </Box>
     );

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',
                 }}>
-                <Typography variant="caption">{`${convertBytesToHumanReadable(
+                <Typography variant="caption">{`${makeHumanReadableStorage(
                     userDetails.usage,
-                    1
+                    'round-up'
                 )} ${constants.USED}`}</Typography>
                 <Typography variant="caption" fontWeight={'bold'}>
                     {constants.PHOTO_COUNT(userDetails.fileCount ?? 0)}

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 &&