Merge pull request #631 from ente-io/plan-selector-ui-fixes

Plan selector UI fixes

src/components/pages/gallery/PlanSelector/card/free.tsx

@@ -0,0 +1,48 @@
+import { Stack } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import constants from 'utils/strings/constants';
+import { PeriodToggler } from '../periodToggler';
+import Plans from '../plans';
+
+export default function FreeSubscriptionPlanSelectorCard({
+    plans,
+    subscription,
+    closeModal,
+    planPeriod,
+    togglePeriod,
+    onPlanSelect,
+}) {
+    return (
+        <>
+            <Typography variant="h3" fontWeight={'bold'}>
+                {constants.CHOOSE_PLAN}
+            </Typography>
+
+            <Box>
+                <Stack spacing={3}>
+                    <Box>
+                        <PeriodToggler
+                            planPeriod={planPeriod}
+                            togglePeriod={togglePeriod}
+                        />
+                        <Typography
+                            variant="body2"
+                            mt={0.5}
+                            color="text.secondary">
+                            {constants.TWO_MONTHS_FREE}
+                        </Typography>
+                    </Box>
+                    <Plans
+                        plans={plans}
+                        planPeriod={planPeriod}
+                        onPlanSelect={onPlanSelect}
+                        subscription={subscription}
+                        closeModal={closeModal}
+                    />
+                </Stack>
+            </Box>
+        </>
+    );
+}

src/components/pages/gallery/PlanSelector/card/index.tsx

@@ -1,4 +1,3 @@
-import { PeriodToggler } from './periodToggler';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import constants from 'utils/strings/constants';
 import { Plan } from 'types/billing';
@@ -13,9 +12,8 @@ import {
     hasPaypalSubscription,
     getLocalUserSubscription,
     hasPaidSubscription,
-    convertBytesToGBs,
     getTotalFamilyUsage,
-    makeHumanReadableStorage,
+    isPartOfFamily,
 } from 'utils/billing';
 import { reverseString } from 'utils/common';
 import { GalleryContext } from 'pages/gallery';
@@ -23,15 +21,13 @@ import billingService from 'services/billingService';
 import { SetLoading } from 'types/gallery';
 import { logError } from 'utils/sentry';
 import { AppContext } from 'pages/_app';
-import Plans from './plans';
+import { Stack } from '@mui/material';
-import { Box, IconButton, Stack, Typography } from '@mui/material';
 import { useLocalState } from 'hooks/useLocalState';
 import { LS_KEYS } from 'utils/storage/localStorage';
 import { getLocalUserDetails } from 'utils/user';
-import { ManageSubscription } from './manageSubscription';
-import { SpaceBetweenFlex } from 'components/Container';
-import Close from '@mui/icons-material/Close';
 import { PLAN_PERIOD } from 'constants/gallery';
+import FreeSubscriptionPlanSelectorCard from './free';
+import PaidSubscriptionPlanSelectorCard from './paid';
 
 interface Props {
     closeModal: any;
@@ -48,9 +44,11 @@ function PlanSelectorCard(props: Props) {
     const galleryContext = useContext(GalleryContext);
     const appContext = useContext(AppContext);
 
-    const totalFamilyUsage = useMemo(() => {
+    const usage = useMemo(() => {
-        const familyData = getLocalUserDetails()?.familyData;
+        const userDetails = getLocalUserDetails();
-        return familyData ? getTotalFamilyUsage(familyData) : 0;
+        return isPartOfFamily(userDetails?.familyData)
+            ? getTotalFamilyUsage(userDetails?.familyData)
+            : userDetails.usage;
     }, []);
 
     const togglePeriod = () => {
@@ -158,84 +156,25 @@ function PlanSelectorCard(props: Props) {
     return (
         <>
             <Stack spacing={3} p={1.5}>
-                <Box py={0.5} px={1.5}>
                 {hasPaidSubscription(subscription) ? (
-                        <SpaceBetweenFlex>
+                    <PaidSubscriptionPlanSelectorCard
-                            <Box>
+                        plans={plans}
-                                <Typography variant="h3" fontWeight={'bold'}>
+                        subscription={subscription}
-                                    {constants.SUBSCRIPTION}
+                        closeModal={props.closeModal}
-                                </Typography>
-                                <Typography
-                                    variant="body2"
-                                    color={'text.secondary'}>
-                                    {convertBytesToGBs(subscription.storage, 2)}{' '}
-                                    {constants.GB}
-                                </Typography>
-                            </Box>
-                            <IconButton onClick={props.closeModal}>
-                                <Close />
-                            </IconButton>
-                        </SpaceBetweenFlex>
-                    ) : (
-                        <Typography variant="h3" fontWeight={'bold'}>
-                            {constants.CHOOSE_PLAN}
-                        </Typography>
-                    )}
-                </Box>
-                {totalFamilyUsage > 0 && (
-                    <Box px={1.5}>
-                        <Typography
-                            color={'text.secondary'}
-                            fontWeight={'bold'}>
-                            {constants.CURRENT_USAGE(
-                                makeHumanReadableStorage(totalFamilyUsage)
-                            )}
-                        </Typography>
-                    </Box>
-                )}
-                <Box>
-                    <Stack
-                        spacing={3}
-                        border={(theme) =>
-                            hasPaidSubscription(subscription) &&
-                            `1px solid ${theme.palette.divider}`
-                        }
-                        p={1.5}
-                        borderRadius={(theme) =>
-                            `${theme.shape.borderRadius}px`
-                        }>
-                        <Box>
-                            <PeriodToggler
                         planPeriod={planPeriod}
                         togglePeriod={togglePeriod}
-                            />
-                            <Typography mt={0.5} color="text.secondary">
-                                {constants.TWO_MONTHS_FREE}
-                            </Typography>
-                        </Box>
-                        <Plans
-                            plans={plans}
-                            planPeriod={planPeriod}
                         onPlanSelect={onPlanSelect}
-                            subscription={subscription}
-                            closeModal={props.closeModal}
-                        />
-                    </Stack>
-                    {hasPaidSubscription(subscription) && (
-                        <Box py={1} px={1.5}>
-                            <Typography color={'text.secondary'}>
-                                {constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO(
-                                    subscription.expiryTime
-                                )}
-                            </Typography>
-                        </Box>
-                    )}
-                </Box>
-                {hasPaidSubscription(subscription) && (
-                    <ManageSubscription
-                        subscription={subscription}
-                        closeModal={props.closeModal}
                         setLoading={props.setLoading}
+                        usage={usage}
+                    />
+                ) : (
+                    <FreeSubscriptionPlanSelectorCard
+                        plans={plans}
+                        subscription={subscription}
+                        closeModal={props.closeModal}
+                        planPeriod={planPeriod}
+                        togglePeriod={togglePeriod}
+                        onPlanSelect={onPlanSelect}
                     />
                 )}
             </Stack>

src/components/pages/gallery/PlanSelector/card/paid.tsx

@@ -0,0 +1,93 @@
+import Close from '@mui/icons-material/Close';
+import { IconButton, Stack } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { SpaceBetweenFlex } from 'components/Container';
+import React from 'react';
+import { convertBytesToGBs } from 'utils/billing';
+import constants from 'utils/strings/constants';
+import { ManageSubscription } from '../manageSubscription';
+import { PeriodToggler } from '../periodToggler';
+import Plans from '../plans';
+
+export default function PaidSubscriptionPlanSelectorCard({
+    plans,
+    subscription,
+    closeModal,
+    usage,
+    planPeriod,
+    togglePeriod,
+    onPlanSelect,
+    setLoading,
+}) {
+    return (
+        <>
+            <Box px={1.5} py={0.5}>
+                <SpaceBetweenFlex>
+                    <Box>
+                        <Typography variant="h3" fontWeight={'bold'}>
+                            {constants.SUBSCRIPTION}
+                        </Typography>
+                        <Typography variant="body2" color={'text.secondary'}>
+                            {convertBytesToGBs(subscription.storage, 2)}{' '}
+                            {constants.GB}
+                        </Typography>
+                    </Box>
+                    <IconButton onClick={closeModal}>
+                        <Close />
+                    </IconButton>
+                </SpaceBetweenFlex>
+            </Box>
+
+            <Box px={1.5}>
+                <Typography color={'text.secondary'} fontWeight={'bold'}>
+                    {constants.CURRENT_USAGE(
+                        `${convertBytesToGBs(usage, 2)} ${constants.GB}`
+                    )}
+                </Typography>
+            </Box>
+
+            <Box>
+                <Stack
+                    spacing={3}
+                    border={(theme) => `1px solid ${theme.palette.divider}`}
+                    p={1.5}
+                    borderRadius={(theme) => `${theme.shape.borderRadius}px`}>
+                    <Box>
+                        <PeriodToggler
+                            planPeriod={planPeriod}
+                            togglePeriod={togglePeriod}
+                        />
+                        <Typography
+                            variant="body2"
+                            mt={0.5}
+                            color="text.secondary">
+                            {constants.TWO_MONTHS_FREE}
+                        </Typography>
+                    </Box>
+                    <Plans
+                        plans={plans}
+                        planPeriod={planPeriod}
+                        onPlanSelect={onPlanSelect}
+                        subscription={subscription}
+                        closeModal={closeModal}
+                    />
+                </Stack>
+
+                <Box py={1} px={1.5}>
+                    <Typography color={'text.secondary'}>
+                        {constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO(
+                            subscription.expiryTime
+                        )}
+                    </Typography>
+                </Box>
+            </Box>
+
+            <ManageSubscription
+                subscription={subscription}
+                closeModal={closeModal}
+                setLoading={setLoading}
+            />
+        </>
+    );
+}

src/components/pages/gallery/PlanSelector/periodToggler.tsx

@@ -8,6 +8,7 @@ const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
     padding: '12px 16px',
     borderRadius: '4px',
     backgroundColor: theme.palette.fill.dark,
+    border: `1px solid transparent`,
     color: theme.palette.text.disabled,
     '&.Mui-selected': {
         backgroundColor: theme.palette.accent.main,

src/components/pages/gallery/PlanSelector/plans/planRow.tsx

@@ -79,16 +79,24 @@ export function PlanRow({
                 </FlexWrapper>
             </TopAlignedFluidContainer>
             <Box width="136px">
-                <PlanButton size="large" onClick={handleClick}>
+                <PlanButton
-                    <Box>
+                    sx={{
+                        justifyContent: 'flex-end',
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius: 0,
+                    }}
+                    size="large"
+                    onClick={handleClick}>
+                    <Box textAlign={'right'}>
                         <Typography fontWeight={'bold'} variant="h4">
                             {plan.price}{' '}
                         </Typography>{' '}
                         <Typography color="text.secondary" variant="body2">
-                            / $
+                            {`/ ${
-                            {plan.period === PLAN_PERIOD.MONTH
+                                plan.period === PLAN_PERIOD.MONTH
                                     ? constants.MONTH_SHORT
-                                : constants.YEAR_SHORT}
+                                    : constants.YEAR
+                            }`}
                         </Typography>
                     </Box>
                 </PlanButton>

src/utils/strings/englishConstants.tsx

@@ -279,7 +279,7 @@ const englishConstants = {
     FAMILY_SUBSCRIPTION_INFO: 'You are on a family plan managed by',
 
     RENEWAL_ACTIVE_SUBSCRIPTION_INFO: (expiryTime) => (
-        <>Renew on {dateString(expiryTime)}</>
+        <>Renews on {dateString(expiryTime)}</>
     ),
 
     RENEWAL_CANCELLED_SUBSCRIPTION_INFO: (expiryTime) => (
@@ -750,7 +750,7 @@ const englishConstants = {
     FREE: 'free',
     OF: 'of',
     MONTH_SHORT: 'mo',
-    YEAR_SHORT: 'yr',
+    YEAR: 'year',
     FAMILY_PLAN: 'Family plan',
     DOWNLOAD_LOGS: 'Download logs',
     DOWNLOAD_LOGS_MESSAGE: () => (