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