update subscription card and rounding logic
This commit is contained in:
parent
08a51c0737
commit
1ff6486d0a
|
@ -19,9 +19,8 @@ export function IndividualUsageSection({ usage, storage, fileCount }: Iprops) {
|
|||
marginTop: 1.5,
|
||||
}}>
|
||||
<Typography variant="caption">{`${makeHumanReadableStorage(
|
||||
usage,
|
||||
'round-up'
|
||||
)} ${constants.USED}`}</Typography>
|
||||
storage - usage
|
||||
)} ${constants.FREE}`}</Typography>
|
||||
<Typography variant="caption" fontWeight={'bold'}>
|
||||
{constants.PHOTO_COUNT(fileCount ?? 0)}
|
||||
</Typography>
|
||||
|
|
|
@ -1,8 +1,21 @@
|
|||
import { Box, Typography } from '@mui/material';
|
||||
import { Box, styled, Typography } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { makeHumanReadableStorage } from 'utils/billing';
|
||||
import { convertBytesToGBs, makeHumanReadableStorage } from 'utils/billing';
|
||||
import constants from 'utils/strings/constants';
|
||||
|
||||
const MobileSmallBox = styled(Box)`
|
||||
display: none;
|
||||
@media (max-width: 359px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const DefaultBox = styled(Box)`
|
||||
display: none;
|
||||
@media (min-width: 360px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
interface Iprops {
|
||||
usage: number;
|
||||
storage: number;
|
||||
|
@ -17,9 +30,16 @@ export default function StorageSection({ usage, storage }: Iprops) {
|
|||
<Typography
|
||||
fontWeight={'bold'}
|
||||
sx={{ fontSize: '24px', lineHeight: '30px' }}>
|
||||
{`${makeHumanReadableStorage(storage - usage)} ${
|
||||
<DefaultBox>
|
||||
{`${makeHumanReadableStorage(usage, 'round-up')} ${
|
||||
constants.OF
|
||||
} ${makeHumanReadableStorage(storage)} ${constants.FREE}`}
|
||||
} ${makeHumanReadableStorage(storage)} ${constants.USED}`}
|
||||
</DefaultBox>
|
||||
<MobileSmallBox>
|
||||
{`${convertBytesToGBs(usage)} / ${convertBytesToGBs(
|
||||
storage
|
||||
)} ${constants.GB} ${constants.USED}`}
|
||||
</MobileSmallBox>
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
@ -168,7 +168,7 @@ function PlanSelectorCard(props: Props) {
|
|||
<Typography
|
||||
variant="body2"
|
||||
color={'text.secondary'}>
|
||||
{convertBytesToGBs(subscription.storage)}{' '}
|
||||
{convertBytesToGBs(subscription.storage, 2)}{' '}
|
||||
{constants.GB}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -33,8 +33,8 @@ const StorageUnits = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|||
|
||||
const ONE_GB = 1024 * 1024 * 1024;
|
||||
|
||||
export function convertBytesToGBs(bytes: number): string {
|
||||
return (bytes / (1024 * 1024 * 1024)).toFixed(0);
|
||||
export function convertBytesToGBs(bytes: number, precision = 0): string {
|
||||
return (bytes / (1024 * 1024 * 1024)).toFixed(precision);
|
||||
}
|
||||
|
||||
export function convertBytesToHumanReadable(
|
||||
|
|
Loading…
Reference in a new issue