TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inline

Browse Source
This commit is contained in:
Manav Rathi
2024-08-01 21:05:04 +05:30
parent d14b18867a
commit ab652ee3fe
2 changed files with 119 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
web/apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx
View File

@@ -1,7 +1,20 @@
import { formattedStorageByteSize } from "@/new/photos/utils/units";
import { SpaceBetweenFlex } from "@ente/shared/components/Container";
import { bytesInGB, formattedStorageByteSize } from "@/new/photos/utils/units";
import {
FlexWrapper,
FluidContainer,
SpaceBetweenFlex,
} from "@ente/shared/components/Container";
import ArrowForward from "@mui/icons-material/ArrowForward";
import { Box, IconButton, Stack, Typography, styled } from "@mui/material";
import Done from "@mui/icons-material/Done";
import {
Box,
Button,
ButtonProps,
IconButton,
Stack,
Typography,
styled,
} from "@mui/material";
import { PLAN_PERIOD } from "constants/gallery";
import { t } from "i18next";
import type { PlansResponse } from "services/billingService";
@@ -13,7 +26,6 @@ import {
isPopularPlan,
isUserSubscribedPlan,
} from "utils/billing";
import { PlanRow } from "./planRow";
interface Iprops {
plansResponse: PlansResponse | undefined;
@@ -61,6 +73,109 @@ const Plans = ({
export default Plans;
interface PlanRowProps {
plan: Plan;
subscription: Subscription;
onPlanSelect: (plan: Plan) => void;
disabled: boolean;
popular: boolean;
}
function PlanRow({
plan,
subscription,
onPlanSelect,
disabled,
popular,
}: PlanRowProps) {
const handleClick = () => {
!isUserSubscribedPlan(plan, subscription) && onPlanSelect(plan);
};
const PlanButton = disabled ? DisabledPlanButton : ActivePlanButton;
return (
<PlanRowContainer>
<TopAlignedFluidContainer>
<Typography variant="h1" fontWeight={"bold"}>
{bytesInGB(plan.storage)}
</Typography>
<FlexWrapper flexWrap={"wrap"} gap={1}>
<Typography variant="h3" color="text.muted">
{t("storage_unit.gb")}
</Typography>
{popular && !hasPaidSubscription(subscription) && (
<Badge>{t("POPULAR")}</Badge>
)}
</FlexWrapper>
</TopAlignedFluidContainer>
<Box width="136px">
<PlanButton
sx={{
justifyContent: "flex-end",
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
}}
size="large"
onClick={handleClick}
>
<Box textAlign={"right"}>
<Typography fontWeight={"bold"} variant="large">
{plan.price}{" "}
</Typography>{" "}
<Typography color="text.muted" variant="small">
{`/ ${
plan.period === PLAN_PERIOD.MONTH
? t("MONTH_SHORT")
: t("YEAR")
}`}
</Typography>
</Box>
</PlanButton>
</Box>
</PlanRowContainer>
);
}
const PlanRowContainer = styled(FlexWrapper)(() => ({
background:
"linear-gradient(268.22deg, rgba(256, 256, 256, 0.08) -3.72%, rgba(256, 256, 256, 0) 85.73%)",
}));
const TopAlignedFluidContainer = styled(FluidContainer)`
align-items: flex-start;
`;
const DisabledPlanButton = styled((props: ButtonProps) => (
<Button disabled endIcon={<Done />} {...props} />
))(({ theme }) => ({
"&.Mui-disabled": {
backgroundColor: "transparent",
color: theme.colors.text.base,
},
}));
const ActivePlanButton = styled((props: ButtonProps) => (
<Button color="accent" {...props} endIcon={<ArrowForward />} />
))(() => ({
".MuiButton-endIcon": {
transition: "transform .2s ease-in-out",
},
"&:hover .MuiButton-endIcon": {
transform: "translateX(4px)",
},
}));
const Badge = styled(Box)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
padding: "2px 4px",
backgroundColor: theme.colors.black.muted,
backdropFilter: `blur(${theme.colors.blur.muted})`,
color: theme.colors.white.base,
textTransform: "uppercase",
...theme.typography.mini,
}));
interface FreePlanRowProps {
storage: number;
closeModal: () => void;

112
web/apps/photos/src/components/pages/gallery/PlanSelector/plans/planRow.tsx
View File

@@ -1,112 +0,0 @@
import { bytesInGB } from "@/new/photos/utils/units";
import { FlexWrapper, FluidContainer } from "@ente/shared/components/Container";
import ArrowForward from "@mui/icons-material/ArrowForward";
import Done from "@mui/icons-material/Done";
import { Box, Button, ButtonProps, Typography, styled } from "@mui/material";
import { PLAN_PERIOD } from "constants/gallery";
import { t } from "i18next";
import { Plan, Subscription } from "types/billing";
import { hasPaidSubscription, isUserSubscribedPlan } from "utils/billing";
interface Iprops {
plan: Plan;
subscription: Subscription;
onPlanSelect: (plan: Plan) => void;
disabled: boolean;
popular: boolean;
}
const PlanRowContainer = styled(FlexWrapper)(() => ({
background:
"linear-gradient(268.22deg, rgba(256, 256, 256, 0.08) -3.72%, rgba(256, 256, 256, 0) 85.73%)",
}));
const TopAlignedFluidContainer = styled(FluidContainer)`
align-items: flex-start;
`;
const DisabledPlanButton = styled((props: ButtonProps) => (
<Button disabled endIcon={<Done />} {...props} />
))(({ theme }) => ({
"&.Mui-disabled": {
backgroundColor: "transparent",
color: theme.colors.text.base,
},
}));
const ActivePlanButton = styled((props: ButtonProps) => (
<Button color="accent" {...props} endIcon={<ArrowForward />} />
))(() => ({
".MuiButton-endIcon": {
transition: "transform .2s ease-in-out",
},
"&:hover .MuiButton-endIcon": {
transform: "translateX(4px)",
},
}));
export function PlanRow({
plan,
subscription,
onPlanSelect,
disabled,
popular,
}: Iprops) {
const handleClick = () => {
!isUserSubscribedPlan(plan, subscription) && onPlanSelect(plan);
};
const PlanButton = disabled ? DisabledPlanButton : ActivePlanButton;
return (
<PlanRowContainer>
<TopAlignedFluidContainer>
<Typography variant="h1" fontWeight={"bold"}>
{bytesInGB(plan.storage)}
</Typography>
<FlexWrapper flexWrap={"wrap"} gap={1}>
<Typography variant="h3" color="text.muted">
{t("storage_unit.gb")}
</Typography>
{popular && !hasPaidSubscription(subscription) && (
<Badge>{t("POPULAR")}</Badge>
)}
</FlexWrapper>
</TopAlignedFluidContainer>
<Box width="136px">
<PlanButton
sx={{
justifyContent: "flex-end",
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
}}
size="large"
onClick={handleClick}
>
<Box textAlign={"right"}>
<Typography fontWeight={"bold"} variant="large">
{plan.price}{" "}
</Typography>{" "}
<Typography color="text.muted" variant="small">
{`/ ${
plan.period === PLAN_PERIOD.MONTH
? t("MONTH_SHORT")
: t("YEAR")
}`}
</Typography>
</Box>
</PlanButton>
</Box>
</PlanRowContainer>
);
}
const Badge = styled(Box)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
padding: "2px 4px",
backgroundColor: theme.colors.black.muted,
backdropFilter: `blur(${theme.colors.blur.muted})`,
color: theme.colors.white.base,
textTransform: "uppercase",
...theme.typography.mini,
}));