From 06d4cfd4143693e48eb7116017f0540430f6c3d9 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 16:18:12 +0530 Subject: [PATCH 01/11] remove unneccessary $ --- src/components/pages/gallery/PlanSelector/plans/planRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx index fe8eb1424..ef3b0b399 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx @@ -85,7 +85,7 @@ export function PlanRow({ {plan.price}{' '} {' '} - / $ + / {plan.period === PLAN_PERIOD.MONTH ? constants.MONTH_SHORT : constants.YEAR_SHORT} From 58bc7f98d41e1f807a2165bb0bc849c59de4b6b2 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 16:31:59 +0530 Subject: [PATCH 02/11] make plan button justify content flex end --- .../pages/gallery/PlanSelector/plans/planRow.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx index ef3b0b399..15c9d71b8 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx @@ -79,7 +79,12 @@ export function PlanRow({ - + {plan.price}{' '} From 3f6f706e379fcb02b697b8afc60daac25d91b342 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 16:35:08 +0530 Subject: [PATCH 03/11] remove toggle button stroke --- src/components/pages/gallery/PlanSelector/periodToggler.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/pages/gallery/PlanSelector/periodToggler.tsx b/src/components/pages/gallery/PlanSelector/periodToggler.tsx index 2190b67b3..e6ea5df4f 100644 --- a/src/components/pages/gallery/PlanSelector/periodToggler.tsx +++ b/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, From 3cc1756dc34234b15945da6bd3bc4c883399e59d Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 16:35:15 +0530 Subject: [PATCH 04/11] fix copy --- src/utils/strings/englishConstants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index c9e1b3b63..8f75075e3 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/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) => ( From 9fb909052058412588c658ffabc3af0f1a2780a9 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 16:36:45 +0530 Subject: [PATCH 05/11] remove left border radius --- src/components/pages/gallery/PlanSelector/plans/planRow.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx index 15c9d71b8..eac0a72b8 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx @@ -82,6 +82,8 @@ export function PlanRow({ From b20c5aa98bda4c30588b2bf857f40d748e6de2d5 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 16:59:34 +0530 Subject: [PATCH 06/11] fix styling errors --- src/components/pages/gallery/PlanSelector/card.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/pages/gallery/PlanSelector/card.tsx b/src/components/pages/gallery/PlanSelector/card.tsx index 2cfa7aa86..0dcdc4ab8 100644 --- a/src/components/pages/gallery/PlanSelector/card.tsx +++ b/src/components/pages/gallery/PlanSelector/card.tsx @@ -15,7 +15,6 @@ import { hasPaidSubscription, convertBytesToGBs, getTotalFamilyUsage, - makeHumanReadableStorage, } from 'utils/billing'; import { reverseString } from 'utils/common'; import { GalleryContext } from 'pages/gallery'; @@ -158,7 +157,7 @@ function PlanSelectorCard(props: Props) { return ( <> - + {hasPaidSubscription(subscription) ? ( @@ -188,7 +187,9 @@ function PlanSelectorCard(props: Props) { color={'text.secondary'} fontWeight={'bold'}> {constants.CURRENT_USAGE( - makeHumanReadableStorage(totalFamilyUsage) + `${convertBytesToGBs(totalFamilyUsage, 2)} ${ + constants.GB + }` )} @@ -200,7 +201,7 @@ function PlanSelectorCard(props: Props) { hasPaidSubscription(subscription) && `1px solid ${theme.palette.divider}` } - p={1.5} + p={hasPaidSubscription(subscription) && 1.5} borderRadius={(theme) => `${theme.shape.borderRadius}px` }> @@ -209,7 +210,10 @@ function PlanSelectorCard(props: Props) { planPeriod={planPeriod} togglePeriod={togglePeriod} /> - + {constants.TWO_MONTHS_FREE} From ce1791a531d3bb81142f08dca385036362e9f273 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 17:15:43 +0530 Subject: [PATCH 07/11] refactored components into free and paid versions --- .../pages/gallery/PlanSelector/card/free.tsx | 48 ++++++++ .../PlanSelector/{card.tsx => card/index.tsx} | 115 ++++-------------- .../pages/gallery/PlanSelector/card/paid.tsx | 93 ++++++++++++++ 3 files changed, 166 insertions(+), 90 deletions(-) create mode 100644 src/components/pages/gallery/PlanSelector/card/free.tsx rename src/components/pages/gallery/PlanSelector/{card.tsx => card/index.tsx} (56%) create mode 100644 src/components/pages/gallery/PlanSelector/card/paid.tsx diff --git a/src/components/pages/gallery/PlanSelector/card/free.tsx b/src/components/pages/gallery/PlanSelector/card/free.tsx new file mode 100644 index 000000000..f9e689b9a --- /dev/null +++ b/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 ( + <> + + {constants.CHOOSE_PLAN} + + + + + + + + {constants.TWO_MONTHS_FREE} + + + + + + + ); +} diff --git a/src/components/pages/gallery/PlanSelector/card.tsx b/src/components/pages/gallery/PlanSelector/card/index.tsx similarity index 56% rename from src/components/pages/gallery/PlanSelector/card.tsx rename to src/components/pages/gallery/PlanSelector/card/index.tsx index 0dcdc4ab8..1fb997380 100644 --- a/src/components/pages/gallery/PlanSelector/card.tsx +++ b/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,8 +12,8 @@ import { hasPaypalSubscription, getLocalUserSubscription, hasPaidSubscription, - convertBytesToGBs, getTotalFamilyUsage, + isPartOfFamily, } from 'utils/billing'; import { reverseString } from 'utils/common'; import { GalleryContext } from 'pages/gallery'; @@ -22,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 { Box, IconButton, Stack, Typography } from '@mui/material'; +import { Stack } 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; @@ -47,9 +44,11 @@ function PlanSelectorCard(props: Props) { const galleryContext = useContext(GalleryContext); const appContext = useContext(AppContext); - const totalFamilyUsage = useMemo(() => { - const familyData = getLocalUserDetails()?.familyData; - return familyData ? getTotalFamilyUsage(familyData) : 0; + const usage = useMemo(() => { + const userDetails = getLocalUserDetails(); + return isPartOfFamily(userDetails?.familyData) + ? getTotalFamilyUsage(userDetails?.familyData) + : userDetails.usage; }, []); const togglePeriod = () => { @@ -157,89 +156,25 @@ function PlanSelectorCard(props: Props) { return ( <> - - {hasPaidSubscription(subscription) ? ( - - - - {constants.SUBSCRIPTION} - - - {convertBytesToGBs(subscription.storage, 2)}{' '} - {constants.GB} - - - - - - - ) : ( - - {constants.CHOOSE_PLAN} - - )} - - {totalFamilyUsage > 0 && ( - - - {constants.CURRENT_USAGE( - `${convertBytesToGBs(totalFamilyUsage, 2)} ${ - constants.GB - }` - )} - - - )} - - - hasPaidSubscription(subscription) && - `1px solid ${theme.palette.divider}` - } - p={hasPaidSubscription(subscription) && 1.5} - borderRadius={(theme) => - `${theme.shape.borderRadius}px` - }> - - - - {constants.TWO_MONTHS_FREE} - - - - - {hasPaidSubscription(subscription) && ( - - - {constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO( - subscription.expiryTime - )} - - - )} - - {hasPaidSubscription(subscription) && ( - + ) : ( + )} diff --git a/src/components/pages/gallery/PlanSelector/card/paid.tsx b/src/components/pages/gallery/PlanSelector/card/paid.tsx new file mode 100644 index 000000000..6aae036f0 --- /dev/null +++ b/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 ( + <> + + + + + {constants.SUBSCRIPTION} + + + {convertBytesToGBs(subscription.storage, 2)}{' '} + {constants.GB} + + + + + + + + + + + {constants.CURRENT_USAGE( + `${convertBytesToGBs(usage, 2)} ${constants.GB}` + )} + + + + + `1px solid ${theme.palette.divider}`} + p={1.5} + borderRadius={(theme) => `${theme.shape.borderRadius}px`}> + + + + {constants.TWO_MONTHS_FREE} + + + + + + + + {constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO( + subscription.expiryTime + )} + + + + + + + ); +} From 61de2b428952be2d4753ba032f94a0d5423d3513 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 17:16:48 +0530 Subject: [PATCH 08/11] fix paid version heading padding --- src/components/pages/gallery/PlanSelector/card/paid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/gallery/PlanSelector/card/paid.tsx b/src/components/pages/gallery/PlanSelector/card/paid.tsx index 6aae036f0..c7f2830b9 100644 --- a/src/components/pages/gallery/PlanSelector/card/paid.tsx +++ b/src/components/pages/gallery/PlanSelector/card/paid.tsx @@ -22,7 +22,7 @@ export default function PaidSubscriptionPlanSelectorCard({ }) { return ( <> - + From 6703d2a5b92668f315097912723ce8ad30b172e8 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 17:24:16 +0530 Subject: [PATCH 09/11] add space after slash --- .../pages/gallery/PlanSelector/plans/planRow.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx index eac0a72b8..0dfca8b04 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx @@ -92,10 +92,11 @@ export function PlanRow({ {plan.price}{' '} {' '} - / - {plan.period === PLAN_PERIOD.MONTH - ? constants.MONTH_SHORT - : constants.YEAR_SHORT} + {`/ ${ + plan.period === PLAN_PERIOD.MONTH + ? constants.MONTH_SHORT + : constants.YEAR_SHORT + }`} From cef8440ee3e9ae664ef7e91986b1dba99ebd3e2c Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 17:25:34 +0530 Subject: [PATCH 10/11] make year complete --- src/components/pages/gallery/PlanSelector/plans/planRow.tsx | 2 +- src/utils/strings/englishConstants.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx index 0dfca8b04..36d6a4585 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx @@ -95,7 +95,7 @@ export function PlanRow({ {`/ ${ plan.period === PLAN_PERIOD.MONTH ? constants.MONTH_SHORT - : constants.YEAR_SHORT + : constants.YEAR }`} diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 8f75075e3..45d1e8b69 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -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: () => ( From 1d3a966b0e9734f3d302f30041f2dc5c66dc44cb Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 5 Jul 2022 17:35:49 +0530 Subject: [PATCH 11/11] fix text alignment --- src/components/pages/gallery/PlanSelector/plans/planRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx index 36d6a4585..6b1c2f2db 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planRow.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planRow.tsx @@ -87,7 +87,7 @@ export function PlanRow({ }} size="large" onClick={handleClick}> - + {plan.price}{' '} {' '}