update plan tiles

2022-06-18 21:53:49 +05:30 · 2022-06-18 21:53:49 +05:30 · 6ab86a857b
parent 2059fb6187
commit 6ab86a857b
6 changed files with 165 additions and 114 deletions
--- a/src/components/pages/gallery/PlanSelector/plans/button.tsx
+++ b/src/components/pages/gallery/PlanSelector/plans/button.tsx
@ -0,0 +1,60 @@
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import Done from '@mui/icons-material/Done';
+import { Button } from '@mui/material';
+import { SpaceBetweenFlex } from 'components/Container';
+import React from 'react';
+import constants from 'utils/strings/constants';
+export function PlanIconButton({
+    current,
+    onClick,
+}: {
+    current: boolean;
+    onClick: () => void;
+}) {
+    return current ? (
+        <DisabledPlanTileButton />
+    ) : (
+        <EnabledPlanTileButton onClick={onClick} />
+    );
+}
+
+function DisabledPlanTileButton() {
+    return (
+        <Button
+            color="accent"
+            disabled={true}
+            sx={(theme) => ({
+                mt: 6,
+                '&&': {
+                    color: theme.palette.accent.main,
+                    borderColor: theme.palette.accent.main,
+                },
+            })}
+            fullWidth
+            onClick={() => null}
+            variant={'outlined'}>
+            <SpaceBetweenFlex>
+                {constants.ACTIVE}
+                <Done />
+            </SpaceBetweenFlex>
+        </Button>
+    );
+}
+
+function EnabledPlanTileButton({ onClick }) {
+    return (
+        <Button
+            color="accent"
+            sx={{
+                mt: 6,
+            }}
+            fullWidth
+            onClick={onClick}
+            variant={'contained'}>
+            <SpaceBetweenFlex>
+                {constants.CHOOSE_PLAN_BTN}
+                <ChevronRight />
+            </SpaceBetweenFlex>
+        </Button>
+    );
+}
--- a/src/components/pages/gallery/PlanSelector/plans/index.tsx
+++ b/src/components/pages/gallery/PlanSelector/plans/index.tsx
@ -1,5 +1,4 @@
 import React from 'react';
-import { isUserSubscribedPlan, convertBytesToGBs } from 'utils/billing';
 import { PlanCard } from './planCard';

 const Plans = ({ plans, planPeriod, subscription, onPlanSelect }) => (
@ -8,19 +7,17 @@ const Plans = ({ plans, planPeriod, subscription, onPlanSelect }) => (
            display: 'flex',
            justifyContent: 'space-around',
            flexWrap: 'wrap',
-            minHeight: '212px',
-            margin: '5px 0',
+            minHeight: '230px',
+            marginTop: '32px',
        }}>
        {plans
            ?.filter((plan) => plan.period === planPeriod)
            ?.map((plan) => (
                <PlanCard
                    key={plan.stripeID}
-                    isUserSubscribedPlan={isUserSubscribedPlan}
                    plan={plan}
                    subscription={subscription}
                    onPlanSelect={onPlanSelect}
-                    convertBytesToGBs={convertBytesToGBs}
                />
            ))}
    </div>
--- a/src/components/pages/gallery/PlanSelector/plans/planCard.tsx
+++ b/src/components/pages/gallery/PlanSelector/plans/planCard.tsx
@ -1,72 +1,37 @@
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { PlanIconButton } from './button';
+import { Typography } from '@mui/material';
 import React from 'react';
-import { Button } from 'react-bootstrap';
+import { isUserSubscribedPlan, convertBytesToGBs } from 'utils/billing';
 import constants from 'utils/strings/constants';
-import { PlanTile } from './planTile';
+import { PLAN_PERIOD } from '..';
+import PlanTile from './planTile';
+
+export function PlanCard({ plan, subscription, onPlanSelect }) {
+    const handleClick = () => {
+        !isUserSubscribedPlan(plan, subscription) && onPlanSelect(plan);
+    };

-export function PlanCard({
-    isUserSubscribedPlan,
-    plan,
-    subscription,
-    onPlanSelect,
-    convertBytesToGBs,
-}) {
    return (
        <PlanTile
            key={plan.stripeID}
-            className="subscription-plan-selector"
-            currentlySubscribed={isUserSubscribedPlan(plan, subscription)}
-            onClick={
-                isUserSubscribedPlan(plan, subscription)
-                    ? () => {}
-                    : async () => await onPlanSelect(plan)
-            }>
-            <div>
-                <span
-                    style={{
-                        color: '#ECECEC',
-                        fontWeight: 900,
-                        fontSize: '40px',
-                        lineHeight: '40px',
-                    }}>
-                    {convertBytesToGBs(plan.storage, 0)}
-                </span>
-                <span
-                    style={{
-                        color: '#858585',
-                        fontSize: '24px',
-                        fontWeight: 900,
-                    }}>
-                    {' '}
-                    GB
-                </span>
-            </div>
-            <div
-                className="bold-text"
-                style={{
-                    color: '#aaa',
-                    lineHeight: '36px',
-                    fontSize: '20px',
-                }}>
-                {`${plan.price} / ${plan.period}`}
-            </div>
-            <Button
-                variant="outline-success"
-                block
-                style={{
-                    marginTop: '20px',
-                    fontSize: '14px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                }}
-                disabled={isUserSubscribedPlan(plan, subscription)}>
-                {constants.CHOOSE_PLAN_BTN}
-                <ArrowForwardIcon
-                    style={{
-                        marginLeft: '5px',
-                    }}
-                />
-            </Button>
+            current={isUserSubscribedPlan(plan, subscription)}
+            onClick={handleClick}>
+            <Typography variant="title" fontWeight={900}>
+                {convertBytesToGBs(plan.storage, 0)}
+            </Typography>
+
+            <Typography color="text.secondary" variant="title" fontWeight={500}>
+                {`${plan.price} / ${
+                    plan.period === PLAN_PERIOD.MONTH
+                        ? constants.MONTH_SHORT
+                        : constants.YEAR_SHORT
+                }`}
+            </Typography>
+
+            <PlanIconButton
+                current={isUserSubscribedPlan(plan, subscription)}
+                onClick={handleClick}
+            />
        </PlanTile>
    );
 }
--- a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
+++ b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
@ -1,48 +1,74 @@
-import { css, styled } from '@mui/material';
+import { styled } from '@mui/material';

-export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>`
-    border-radius: 20px;
-    width: 220px;
-    border: 2px solid #333;
-    padding: 30px;
-    margin: 10px;
-    text-align: center;
-    font-size: 20px;
-    background-color: #ffffff00;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: ${(props) =>
-        props.currentlySubscribed ? 'not-allowed' : 'pointer'};
-    border-color: ${(props) => props.currentlySubscribed && '#56e066'};
-    transition: all 0.3s ease-out;
-    overflow: hidden;
-    position: relative;
+// const OldPlanTile = styled('div')<{ currentlySubscribed: boolean }>`
+//     border-radius: 20px;
+//     width: 220px;
+//     border: 2px solid #333;
+//     padding: 30px;
+//     margin: 10px;
+//     text-align: center;
+//     font-size: 20px;
+//     background-color: #ffffff00;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     flex-direction: column;
+//     cursor: ${(props) =>
+//         props.currentlySubscribed ? 'not-allowed' : 'pointer'};
+//     border-color: ${(props) => props.currentlySubscribed && '#56e066'};
+//     transition: all 0.3s ease-out;
+//     overflow: hidden;
+//     position: relative;

-    & > div:first-child::before {
-        content: ' ';
-        height: 600px;
-        width: 50px;
-        background-color: #444;
-        left: 0;
-        top: -50%;
-        position: absolute;
-        transform: rotate(45deg) translateX(-200px);
-        transition: all 0.5s ease-out;
-    }
+//     & > div:first-child::before {
+//         content: ' ';
+//         height: 600px;
+//         width: 50px;
+//         background-color: #444;
+//         left: 0;
+//         top: -50%;
+//         position: absolute;
+//         transform: rotate(45deg) translateX(-200px);
+//         transition: all 0.5s ease-out;
+//     }

-    &:hover
-        ${(props) =>
-            !props.currentlySubscribed &&
-            css`
-                 {
-                    transform: scale(1.1);
-                    background-color: #ffffff11;
-                }
-            `}
-        &:hover
-        > div:first-child::before {
-        transform: rotate(45deg) translateX(300px);
-    }
-`;
+//     &:hover
+//         ${(props) =>
+//             !props.currentlySubscribed &&
+//             css`
+//                  {
+//                     transform: scale(1.1);
+//                     background-color: #ffffff11;
+//                 }
+//             `}
+//         &:hover
+//         > div:first-child::before {
+//         transform: rotate(45deg) translateX(300px);
+//     }
+// `;
+
+const PlanTile = styled('div')<{ current: boolean }>(({ theme, current }) => ({
+    padding: theme.spacing(3),
+    border: `1px solid ${theme.palette.divider}`,
+
+    '&:hover': {
+        backgroundColor: ' rgba(40, 214, 101, 0.11)',
+        cursor: 'pointer',
+    },
+    ...(current && {
+        borderColor: theme.palette.accent.main,
+        cursor: 'not-allowed',
+        '&:hover': { backgroundColor: 'transparent' },
+    }),
+    width: ' 260px',
+    borderRadius: '8px 8px 0 0',
+    '&:not(:first-of-type)': {
+        borderTopLeftRadius: '0',
+    },
+
+    '&:not(:last-of-type)': {
+        borderTopRightRadius: '0',
+    },
+}));
+
+export default PlanTile;
--- a/src/utils/billing/index.ts
+++ b/src/utils/billing/index.ts
@ -30,7 +30,7 @@ enum RESPONSE_STATUS {
 }

 export function convertBytesToGBs(bytes, precision?): string {
-    return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2);
+    return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2) + ' GB';
 }

 export function convertBytesToHumanReadable(
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@ -263,6 +263,7 @@ const englishConstants = {
    CHOOSE_PLAN: 'Choose your subscription plan',
    MANAGE_PLAN: 'Manage your subscription',
    CHOOSE_PLAN_BTN: 'Choose plan',
+    ACTIVE: 'Active',

    OFFLINE_MSG: 'You are offline, cached memories are being shown',

@ -775,6 +776,8 @@ const englishConstants = {
    FAMILY: 'Family',
    FREE: 'free',
    OF: 'of',
+    MONTH_SHORT: 'mo',
+    YEAR_SHORT: 'yr',
 };

 export default englishConstants;