Merge branch 'subscription-card-redesign-v2' into ui-redesign
This commit is contained in:
commit
55557e972d
|
@ -0,0 +1,36 @@
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
import { UserDetails } from 'types/user';
|
||||||
|
import { isPartOfFamily } from 'utils/billing';
|
||||||
|
import StorageSection from '../storageSection';
|
||||||
|
import { FamilyUsageSection } from './usageSection';
|
||||||
|
|
||||||
|
interface Iprops {
|
||||||
|
userDetails: UserDetails;
|
||||||
|
}
|
||||||
|
export function FamilySubscriptionCardContent({ userDetails }: Iprops) {
|
||||||
|
const totalUsage = useMemo(() => {
|
||||||
|
if (isPartOfFamily(userDetails.familyData)) {
|
||||||
|
return userDetails.familyData.members.reduce(
|
||||||
|
(sum, currentMember) => sum + currentMember.usage,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return userDetails.usage;
|
||||||
|
}
|
||||||
|
}, [userDetails]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<StorageSection
|
||||||
|
storage={userDetails.familyData.storage}
|
||||||
|
usage={totalUsage}
|
||||||
|
/>
|
||||||
|
<FamilyUsageSection
|
||||||
|
userUsage={userDetails.usage}
|
||||||
|
fileCount={userDetails.fileCount}
|
||||||
|
totalUsage={totalUsage}
|
||||||
|
totalStorage={userDetails.familyData.storage}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,30 +1,29 @@
|
||||||
import { Legend } from './legend';
|
import { Legend } from './legend';
|
||||||
import { FamilyUsageProgressBar } from './progressBar';
|
import { FamilyUsageProgressBar } from './progressBar';
|
||||||
import { Stack, Typography } from '@mui/material';
|
import { Box, Stack, Typography } from '@mui/material';
|
||||||
import { SpaceBetweenFlex } from 'components/Container';
|
import { SpaceBetweenFlex } from 'components/Container';
|
||||||
import React, { useMemo } from 'react';
|
import React from 'react';
|
||||||
import { UserDetails } from 'types/user';
|
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
|
|
||||||
export function FamilyUsageSection({
|
interface Iprops {
|
||||||
userDetails,
|
userUsage: number;
|
||||||
}: {
|
totalUsage: number;
|
||||||
userDetails: UserDetails;
|
fileCount: number;
|
||||||
}) {
|
totalStorage: number;
|
||||||
const totalUsage = useMemo(
|
}
|
||||||
() =>
|
|
||||||
userDetails.familyData.members.reduce(
|
|
||||||
(sum, currentMember) => sum + currentMember.usage,
|
|
||||||
0
|
|
||||||
),
|
|
||||||
[userDetails]
|
|
||||||
);
|
|
||||||
|
|
||||||
|
export function FamilyUsageSection({
|
||||||
|
userUsage,
|
||||||
|
totalUsage,
|
||||||
|
fileCount,
|
||||||
|
totalStorage,
|
||||||
|
}: Iprops) {
|
||||||
return (
|
return (
|
||||||
<>
|
<Box width="100%">
|
||||||
<FamilyUsageProgressBar
|
<FamilyUsageProgressBar
|
||||||
totalUsage={totalUsage}
|
totalUsage={totalUsage}
|
||||||
userDetails={userDetails}
|
userUsage={userUsage}
|
||||||
|
totalStorage={totalStorage}
|
||||||
/>
|
/>
|
||||||
<SpaceBetweenFlex
|
<SpaceBetweenFlex
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -35,9 +34,9 @@ export function FamilyUsageSection({
|
||||||
<Legend label={constants.FAMILY} color="text.secondary" />
|
<Legend label={constants.FAMILY} color="text.secondary" />
|
||||||
</Stack>
|
</Stack>
|
||||||
<Typography variant="caption" fontWeight={'bold'}>
|
<Typography variant="caption" fontWeight={'bold'}>
|
||||||
{constants.PHOTO_COUNT(userDetails.fileCount ?? 0)}
|
{constants.PHOTO_COUNT(fileCount ?? 0)}
|
||||||
</Typography>
|
</Typography>
|
||||||
</SpaceBetweenFlex>
|
</SpaceBetweenFlex>
|
||||||
</>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -1,14 +1,22 @@
|
||||||
import { Box } from '@mui/material';
|
import { Box } from '@mui/material';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Progressbar } from '../../../styledComponents';
|
import { Progressbar } from '../../../styledComponents';
|
||||||
export function FamilyUsageProgressBar({ totalUsage, userDetails }) {
|
interface Iprops {
|
||||||
|
userUsage: number;
|
||||||
|
totalUsage: number;
|
||||||
|
totalStorage: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FamilyUsageProgressBar({
|
||||||
|
userUsage,
|
||||||
|
totalUsage,
|
||||||
|
totalStorage,
|
||||||
|
}: Iprops) {
|
||||||
return (
|
return (
|
||||||
<Box position={'relative'} width="100%">
|
<Box position={'relative'} width="100%">
|
||||||
<Progressbar
|
<Progressbar
|
||||||
sx={{ backgroundColor: 'transparent' }}
|
sx={{ backgroundColor: 'transparent' }}
|
||||||
value={
|
value={(userUsage * 100) / totalStorage}
|
||||||
(userDetails.usage * 100) / userDetails.familyData.storage
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<Progressbar
|
<Progressbar
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -20,7 +28,7 @@ export function FamilyUsageProgressBar({ totalUsage, userDetails }) {
|
||||||
},
|
},
|
||||||
width: '100%',
|
width: '100%',
|
||||||
}}
|
}}
|
||||||
value={(totalUsage * 100) / userDetails.familyData.storage}
|
value={(totalUsage * 100) / totalStorage}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
|
@ -1,39 +1,25 @@
|
||||||
import React, { useMemo } from 'react';
|
import { IndividualSubscriptionCardContent } from './individual';
|
||||||
import StorageSection from './storageSection';
|
import { FamilySubscriptionCardContent } from './family';
|
||||||
import { isPartOfFamily } from 'utils/billing';
|
import React from 'react';
|
||||||
|
import { hasNonAdminFamilyMembers } from 'utils/billing';
|
||||||
import { SpaceBetweenFlex } from 'components/Container';
|
import { SpaceBetweenFlex } from 'components/Container';
|
||||||
import { UsageSection } from './usageSection';
|
import { UserDetails } from 'types/user';
|
||||||
|
|
||||||
export function SubscriptionCardContent({ userDetails }) {
|
interface Iprops {
|
||||||
const totalUsage = useMemo(() => {
|
userDetails: UserDetails;
|
||||||
if (isPartOfFamily(userDetails.familyData)) {
|
}
|
||||||
return userDetails.familyData.members.reduce(
|
|
||||||
(sum, currentMember) => sum + currentMember.usage,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return userDetails.usage;
|
|
||||||
}
|
|
||||||
}, [userDetails]);
|
|
||||||
|
|
||||||
const totalStorage = useMemo(() => {
|
|
||||||
if (isPartOfFamily(userDetails.familyData)) {
|
|
||||||
return userDetails.familyData.storage;
|
|
||||||
} else {
|
|
||||||
return userDetails.subscription.storage;
|
|
||||||
}
|
|
||||||
}, [userDetails]);
|
|
||||||
|
|
||||||
|
export function SubscriptionCardContent({ userDetails }: Iprops) {
|
||||||
return (
|
return (
|
||||||
<SpaceBetweenFlex
|
<SpaceBetweenFlex
|
||||||
height={'100%'}
|
height={'100%'}
|
||||||
flexDirection={'column'}
|
flexDirection={'column'}
|
||||||
padding={'20px 16px'}>
|
padding={'20px 16px'}>
|
||||||
<StorageSection
|
{hasNonAdminFamilyMembers(userDetails.familyData) ? (
|
||||||
totalStorage={totalStorage}
|
<FamilySubscriptionCardContent userDetails={userDetails} />
|
||||||
totalUsage={totalUsage}
|
) : (
|
||||||
/>
|
<IndividualSubscriptionCardContent userDetails={userDetails} />
|
||||||
<UsageSection userDetails={userDetails} />
|
)}
|
||||||
</SpaceBetweenFlex>
|
</SpaceBetweenFlex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { UserDetails } from 'types/user';
|
||||||
|
import StorageSection from '../storageSection';
|
||||||
|
import { IndividualUsageSection } from './usageSection';
|
||||||
|
|
||||||
|
interface Iprops {
|
||||||
|
userDetails: UserDetails;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IndividualSubscriptionCardContent({ userDetails }: Iprops) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<StorageSection
|
||||||
|
storage={userDetails.subscription.storage}
|
||||||
|
usage={userDetails.usage}
|
||||||
|
/>
|
||||||
|
<IndividualUsageSection
|
||||||
|
usage={userDetails.usage}
|
||||||
|
fileCount={userDetails.fileCount}
|
||||||
|
storage={userDetails.subscription.storage}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,30 +1,31 @@
|
||||||
import { Typography } from '@mui/material';
|
import { Box, Typography } from '@mui/material';
|
||||||
import { SpaceBetweenFlex } from 'components/Container';
|
import { SpaceBetweenFlex } from 'components/Container';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { makeHumanReadableStorage } from 'utils/billing';
|
import { makeHumanReadableStorage } from 'utils/billing';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import { Progressbar } from '../../styledComponents';
|
import { Progressbar } from '../../styledComponents';
|
||||||
|
|
||||||
export function IndividualUsageSection({ userDetails }) {
|
interface Iprops {
|
||||||
|
usage: number;
|
||||||
|
fileCount: number;
|
||||||
|
storage: number;
|
||||||
|
}
|
||||||
|
export function IndividualUsageSection({ usage, storage, fileCount }: Iprops) {
|
||||||
return (
|
return (
|
||||||
<>
|
<Box width="100%">
|
||||||
<Progressbar
|
<Progressbar value={(usage * 100) / storage} />
|
||||||
value={
|
|
||||||
(userDetails.usage * 100) / userDetails.subscription.storage
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<SpaceBetweenFlex
|
<SpaceBetweenFlex
|
||||||
sx={{
|
sx={{
|
||||||
marginTop: 1.5,
|
marginTop: 1.5,
|
||||||
}}>
|
}}>
|
||||||
<Typography variant="caption">{`${makeHumanReadableStorage(
|
<Typography variant="caption">{`${makeHumanReadableStorage(
|
||||||
userDetails.usage,
|
usage,
|
||||||
'round-up'
|
'round-up'
|
||||||
)} ${constants.USED}`}</Typography>
|
)} ${constants.USED}`}</Typography>
|
||||||
<Typography variant="caption" fontWeight={'bold'}>
|
<Typography variant="caption" fontWeight={'bold'}>
|
||||||
{constants.PHOTO_COUNT(userDetails.fileCount ?? 0)}
|
{constants.PHOTO_COUNT(fileCount ?? 0)}
|
||||||
</Typography>
|
</Typography>
|
||||||
</SpaceBetweenFlex>
|
</SpaceBetweenFlex>
|
||||||
</>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -4,10 +4,10 @@ import { makeHumanReadableStorage } from 'utils/billing';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
totalUsage: number;
|
usage: number;
|
||||||
totalStorage: number;
|
storage: number;
|
||||||
}
|
}
|
||||||
export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
|
export default function StorageSection({ usage, storage }: Iprops) {
|
||||||
return (
|
return (
|
||||||
<Box width="100%">
|
<Box width="100%">
|
||||||
<Typography variant="body2" color={'text.secondary'}>
|
<Typography variant="body2" color={'text.secondary'}>
|
||||||
|
@ -17,9 +17,9 @@ export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
|
||||||
<Typography
|
<Typography
|
||||||
fontWeight={'bold'}
|
fontWeight={'bold'}
|
||||||
sx={{ fontSize: '24px', lineHeight: '30px' }}>
|
sx={{ fontSize: '24px', lineHeight: '30px' }}>
|
||||||
{`${makeHumanReadableStorage(totalStorage - totalUsage)} ${
|
{`${makeHumanReadableStorage(storage - usage)} ${
|
||||||
constants.OF
|
constants.OF
|
||||||
} ${makeHumanReadableStorage(totalStorage)} ${constants.FREE}`}
|
} ${makeHumanReadableStorage(storage)} ${constants.FREE}`}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,17 +0,0 @@
|
||||||
import { IndividualUsageSection } from './individualUsageSection';
|
|
||||||
import React from 'react';
|
|
||||||
import { Box } from '@mui/material';
|
|
||||||
import { FamilyUsageSection } from './familyUsageSection';
|
|
||||||
import { hasNonAdminFamilyMembers } from 'utils/billing';
|
|
||||||
|
|
||||||
export function UsageSection({ userDetails }) {
|
|
||||||
return (
|
|
||||||
<Box width="100%" flexDirection="column" justifyContent={'center'}>
|
|
||||||
{hasNonAdminFamilyMembers(userDetails.familyData) ? (
|
|
||||||
<FamilyUsageSection userDetails={userDetails} />
|
|
||||||
) : (
|
|
||||||
<IndividualUsageSection userDetails={userDetails} />
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in a new issue