refactor subscription card
This commit is contained in:
parent
72a431e22b
commit
9ddd76258e
|
@ -80,6 +80,16 @@ export const FluidContainer = styled(FlexWrapper)`
|
||||||
flex: 1;
|
flex: 1;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const Overlay = styled(Box)`
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1; ;
|
||||||
|
`;
|
||||||
|
|
||||||
export const InvertedIconButton = styled(IconButton)`
|
export const InvertedIconButton = styled(IconButton)`
|
||||||
background-color: ${({ theme }) => theme.palette.primary.main};
|
background-color: ${({ theme }) => theme.palette.primary.main};
|
||||||
color: ${({ theme }) => theme.palette.background.default};
|
color: ${({ theme }) => theme.palette.background.default};
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import React from 'react';
|
|
||||||
export function ClickIndicator() {
|
|
||||||
return (
|
|
||||||
<Box position={'absolute'} top={64} right={0}>
|
|
||||||
<ChevronRightIcon />
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
15
src/components/Sidebar/SubscriptionCard/clickOverlay.tsx
Normal file
15
src/components/Sidebar/SubscriptionCard/clickOverlay.tsx
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||||
|
import { Overlay } from 'components/Container';
|
||||||
|
import React from 'react';
|
||||||
|
export function ClickOverlay(openPlanSelector) {
|
||||||
|
return (
|
||||||
|
<Overlay
|
||||||
|
onClick={openPlanSelector}
|
||||||
|
zIndex={2}
|
||||||
|
justifyContent={'flex-end'}
|
||||||
|
alignItems="center"
|
||||||
|
sx={{ cursor: 'pointer' }}>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</Overlay>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,47 @@
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
import StorageSection from './storageSection';
|
||||||
|
import { isPartOfFamily } from 'utils/billing';
|
||||||
|
import { Overlay, SpaceBetweenFlex } from 'components/Container';
|
||||||
|
import { UsageSection } from './usageSection';
|
||||||
|
|
||||||
|
export function SubscriptionCardContentOverlay({
|
||||||
|
hasNonAdminFamilyMembers,
|
||||||
|
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]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Overlay>
|
||||||
|
<SpaceBetweenFlex
|
||||||
|
flex={1}
|
||||||
|
flexDirection={'column'}
|
||||||
|
padding={'20px 16px'}>
|
||||||
|
<StorageSection
|
||||||
|
totalStorage={totalStorage}
|
||||||
|
totalUsage={totalUsage}
|
||||||
|
/>
|
||||||
|
<UsageSection
|
||||||
|
hasNonAdminFamilyMembers={hasNonAdminFamilyMembers}
|
||||||
|
userDetails={userDetails}
|
||||||
|
/>
|
||||||
|
</SpaceBetweenFlex>
|
||||||
|
</Overlay>
|
||||||
|
);
|
||||||
|
}
|
|
@ -9,7 +9,7 @@ interface Iprops {
|
||||||
}
|
}
|
||||||
export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
|
export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
|
||||||
return (
|
return (
|
||||||
<Box padding={2}>
|
<Box width="100%">
|
||||||
<Typography variant="body2" color={'text.secondary'}>
|
<Typography variant="body2" color={'text.secondary'}>
|
||||||
{constants.STORAGE}
|
{constants.STORAGE}
|
||||||
</Typography>
|
</Typography>
|
|
@ -1,6 +1,6 @@
|
||||||
import { Legend } from './legend';
|
import { Legend } from './legend';
|
||||||
import { FamilyUsageProgressBar } from './progressBar';
|
import { FamilyUsageProgressBar } from './progressBar';
|
||||||
import { Box, Stack, Typography } from '@mui/material';
|
import { Stack, Typography } from '@mui/material';
|
||||||
import { SpaceBetweenFlex } from 'components/Container';
|
import { SpaceBetweenFlex } from 'components/Container';
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import { UserDetails } from 'types/user';
|
import { UserDetails } from 'types/user';
|
||||||
|
@ -21,7 +21,7 @@ export function FamilyUsageSection({
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box height={64} padding={2}>
|
<>
|
||||||
<FamilyUsageProgressBar
|
<FamilyUsageProgressBar
|
||||||
totalUsage={totalUsage}
|
totalUsage={totalUsage}
|
||||||
userDetails={userDetails}
|
userDetails={userDetails}
|
||||||
|
@ -38,6 +38,6 @@ export function FamilyUsageSection({
|
||||||
{constants.PHOTO_COUNT(userDetails.fileCount)}
|
{constants.PHOTO_COUNT(userDetails.fileCount)}
|
||||||
</Typography>
|
</Typography>
|
||||||
</SpaceBetweenFlex>
|
</SpaceBetweenFlex>
|
||||||
</Box>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import { Typography } from '@mui/material';
|
import { Typography } from '@mui/material';
|
||||||
import { FlexWrapper } from 'components/Container';
|
import { FlexWrapper } from 'components/Container';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { LegendIndicator } from '../styledComponents';
|
import { LegendIndicator } from '../../../styledComponents';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
label: string;
|
label: string;
|
|
@ -1,9 +1,9 @@
|
||||||
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 }) {
|
export function FamilyUsageProgressBar({ totalUsage, userDetails }) {
|
||||||
return (
|
return (
|
||||||
<Box position={'relative'}>
|
<Box position={'relative'} width="100%">
|
||||||
<Progressbar
|
<Progressbar
|
||||||
sx={{ backgroundColor: 'transparent' }}
|
sx={{ backgroundColor: 'transparent' }}
|
||||||
value={
|
value={
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { IndividualUsageSection } from './individualUsageSection';
|
||||||
|
import React from 'react';
|
||||||
|
import { Box } from '@mui/material';
|
||||||
|
import { FamilyUsageSection } from './familyUsageSection';
|
||||||
|
|
||||||
|
export function UsageSection({ hasNonAdminFamilyMembers, userDetails }) {
|
||||||
|
return (
|
||||||
|
<Box width="100%" flexDirection="column" justifyContent={'center'}>
|
||||||
|
{hasNonAdminFamilyMembers(userDetails.familyData) ? (
|
||||||
|
<FamilyUsageSection userDetails={userDetails} />
|
||||||
|
) : (
|
||||||
|
<IndividualUsageSection userDetails={userDetails} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,13 +1,13 @@
|
||||||
import { Box, Typography } from '@mui/material';
|
import { Typography } from '@mui/material';
|
||||||
import { SpaceBetweenFlex } from 'components/Container';
|
import { SpaceBetweenFlex } from 'components/Container';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { convertBytesToHumanReadable } from 'utils/billing';
|
import { convertBytesToHumanReadable } 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 }) {
|
export function IndividualUsageSection({ userDetails }) {
|
||||||
return (
|
return (
|
||||||
<Box height={64} padding={2}>
|
<>
|
||||||
<Progressbar
|
<Progressbar
|
||||||
value={
|
value={
|
||||||
(userDetails.usage * 100) / userDetails.subscription.storage
|
(userDetails.usage * 100) / userDetails.subscription.storage
|
||||||
|
@ -25,6 +25,6 @@ export function IndividualUsageSection({ userDetails }) {
|
||||||
{constants.PHOTO_COUNT(userDetails.fileCount)}
|
{constants.PHOTO_COUNT(userDetails.fileCount)}
|
||||||
</Typography>
|
</Typography>
|
||||||
</SpaceBetweenFlex>
|
</SpaceBetweenFlex>
|
||||||
</Box>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -1,13 +1,11 @@
|
||||||
import { ClickIndicator } from './clickIndicator';
|
import { ClickOverlay } from './clickOverlay';
|
||||||
import { IndividualUsageSection } from './individualUsageSection';
|
import React, { useContext } from 'react';
|
||||||
import React, { useContext, useMemo } from 'react';
|
|
||||||
import { Box, Skeleton } from '@mui/material';
|
import { Box, Skeleton } from '@mui/material';
|
||||||
import { UserDetails } from 'types/user';
|
import { UserDetails } from 'types/user';
|
||||||
|
|
||||||
import StorageSection from './storageSection';
|
|
||||||
import { GalleryContext } from 'pages/gallery';
|
import { GalleryContext } from 'pages/gallery';
|
||||||
import { FamilyUsageSection } from './familyUsageSection';
|
import { hasNonAdminFamilyMembers } from 'utils/billing';
|
||||||
import { hasNonAdminFamilyMembers, isPartOfFamily } from 'utils/billing';
|
import { SubscriptionCardContentOverlay } from './contentOverlay';
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
userDetails: UserDetails;
|
userDetails: UserDetails;
|
||||||
closeSidebar: () => void;
|
closeSidebar: () => void;
|
||||||
|
@ -28,43 +26,20 @@ export default function SubscriptionCard({ 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]);
|
|
||||||
|
|
||||||
const totalStorage = useMemo(() => {
|
|
||||||
if (isPartOfFamily(userDetails.familyData)) {
|
|
||||||
return userDetails.familyData.storage;
|
|
||||||
} else {
|
|
||||||
return userDetails.subscription.storage;
|
|
||||||
}
|
|
||||||
}, [userDetails]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box onClick={showPlanSelectorModal} sx={{ cursor: 'pointer' }}>
|
<Box position="relative">
|
||||||
<img
|
<img
|
||||||
style={{ position: 'absolute' }}
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
aspectRatio: '2/1',
|
||||||
|
}}
|
||||||
src="/subscription-card-background.png"
|
src="/subscription-card-background.png"
|
||||||
/>
|
/>
|
||||||
<Box zIndex={1} position={'relative'} height={148}>
|
<ClickOverlay onClick={showPlanSelectorModal} />
|
||||||
<StorageSection
|
<SubscriptionCardContentOverlay
|
||||||
totalStorage={totalStorage}
|
hasNonAdminFamilyMembers={hasNonAdminFamilyMembers}
|
||||||
totalUsage={totalUsage}
|
userDetails={userDetails}
|
||||||
/>
|
/>
|
||||||
{hasNonAdminFamilyMembers(userDetails.familyData) ? (
|
|
||||||
<FamilyUsageSection userDetails={userDetails} />
|
|
||||||
) : (
|
|
||||||
<IndividualUsageSection userDetails={userDetails} />
|
|
||||||
)}
|
|
||||||
<ClickIndicator />
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue