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 20:59:26 +05:30
parent ad0b8ae017
commit cfe2e96227
2 changed files with 44 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/apps/photos/src/components/pages/gallery/PlanSelector/card.tsx
View File

@@ -13,6 +13,8 @@ import {
Link,
Stack,
styled,
ToggleButton,
ToggleButtonGroup,
} from "@mui/material";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
@@ -45,7 +47,6 @@ import {
} from "utils/billing";
import { getLocalUserDetails } from "utils/user";
import { getTotalFamilyUsage, isPartOfFamily } from "utils/user/family";
import { PeriodToggler } from "./periodToggler";
import Plans from "./plans";
interface Props {
@@ -368,6 +369,48 @@ function PaidSubscriptionPlanSelectorCard({
);
}
function PeriodToggler({ planPeriod, togglePeriod }) {
const handleChange = (_, newPlanPeriod: PLAN_PERIOD) => {
if (newPlanPeriod !== null && newPlanPeriod !== planPeriod) {
togglePeriod();
}
};
return (
<ToggleButtonGroup
value={planPeriod}
exclusive
onChange={handleChange}
color="primary"
>
<CustomToggleButton value={PLAN_PERIOD.MONTH}>
{t("MONTHLY")}
</CustomToggleButton>
<CustomToggleButton value={PLAN_PERIOD.YEAR}>
{t("YEARLY")}
</CustomToggleButton>
</ToggleButtonGroup>
);
}
const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
textTransform: "none",
padding: "12px 16px",
borderRadius: "4px",
backgroundColor: theme.colors.fill.faint,
border: `1px solid transparent`,
color: theme.colors.text.faint,
"&.Mui-selected": {
backgroundColor: theme.colors.accent.A500,
color: theme.colors.text.base,
},
"&.Mui-selected:hover": {
backgroundColor: theme.colors.accent.A500,
color: theme.colors.text.base,
},
width: "97.433px",
}));
function BFAddOnRow({ bonusData, closeModal }) {
return (
<>

45
web/apps/photos/src/components/pages/gallery/PlanSelector/periodToggler.tsx
View File

@@ -1,45 +0,0 @@
import { styled, ToggleButton, ToggleButtonGroup } from "@mui/material";
import { PLAN_PERIOD } from "constants/gallery";
import { t } from "i18next";
const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
textTransform: "none",
padding: "12px 16px",
borderRadius: "4px",
backgroundColor: theme.colors.fill.faint,
border: `1px solid transparent`,
color: theme.colors.text.faint,
"&.Mui-selected": {
backgroundColor: theme.colors.accent.A500,
color: theme.colors.text.base,
},
"&.Mui-selected:hover": {
backgroundColor: theme.colors.accent.A500,
color: theme.colors.text.base,
},
width: "97.433px",
}));
export function PeriodToggler({ planPeriod, togglePeriod }) {
const handleChange = (_, newPlanPeriod: PLAN_PERIOD) => {
if (newPlanPeriod !== null && newPlanPeriod !== planPeriod) {
togglePeriod();
}
};
return (
<ToggleButtonGroup
value={planPeriod}
exclusive
onChange={handleChange}
color="primary"
>
<CustomToggleButton value={PLAN_PERIOD.MONTH}>
{t("MONTHLY")}
</CustomToggleButton>
<CustomToggleButton value={PLAN_PERIOD.YEAR}>
{t("YEARLY")}
</CustomToggleButton>
</ToggleButtonGroup>
);
}