astra
/
ntfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make prettier

new-homepage-design
binwiederhier 2023-01-17 20:21:19 -05:00
parent 4092f7fd51
commit cead305a9a
3 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/server.go
View File

@ -41,8 +41,6 @@ import (
- payment methods - payment methods
- unmarshal to stripe.Subscription instead of gjson - unmarshal to stripe.Subscription instead of gjson
- delete subscription when account deleted - delete subscription when account deleted
- add tier.visible
- fix tier selection boxes
- delete messages + reserved topics on ResetTier - delete messages + reserved topics on ResetTier
Limits & rate limiting: Limits & rate limiting:

1
web/public/static/langs/en.json
View File

@ -210,6 +210,7 @@
"account_upgrade_dialog_tier_features_attachment_file_size": "{{filesize}} per file", "account_upgrade_dialog_tier_features_attachment_file_size": "{{filesize}} per file",
"account_upgrade_dialog_tier_features_attachment_total_size": "{{totalsize}} total storage", "account_upgrade_dialog_tier_features_attachment_total_size": "{{totalsize}} total storage",
"account_upgrade_dialog_tier_selected_label": "Selected", "account_upgrade_dialog_tier_selected_label": "Selected",
"account_upgrade_dialog_button_cancel": "Cancel",
"account_upgrade_dialog_button_pay_now": "Pay now and subscribe", "account_upgrade_dialog_button_pay_now": "Pay now and subscribe",
"account_upgrade_dialog_button_cancel_subscription": "Cancel subscription", "account_upgrade_dialog_button_cancel_subscription": "Cancel subscription",
"account_upgrade_dialog_button_update_subscription": "Update subscription", "account_upgrade_dialog_button_update_subscription": "Update subscription",

79
web/src/components/UpgradeDialog.js
View File

@ -20,6 +20,7 @@ import List from "@mui/material/List";
import {Check} from "@mui/icons-material"; import {Check} from "@mui/icons-material";
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import Box from "@mui/material/Box";
const UpgradeDialog = (props) => { const UpgradeDialog = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -27,6 +28,7 @@ const UpgradeDialog = (props) => {
const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const [tiers, setTiers] = useState(null); const [tiers, setTiers] = useState(null);
const [newTier, setNewTier] = useState(account?.tier?.code); // May be undefined const [newTier, setNewTier] = useState(account?.tier?.code); // May be undefined
const [loading, setLoading] = useState(false);
const [errorText, setErrorText] = useState(""); const [errorText, setErrorText] = useState("");
useEffect(() => { useEffect(() => {
@ -59,8 +61,13 @@ const UpgradeDialog = (props) => {
action = Action.UPDATE; action = Action.UPDATE;
} }
if (loading) {
submitButtonEnabled = false;
}
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
setLoading(true);
if (action === Action.CREATE) { if (action === Action.CREATE) {
const response = await accountApi.createBillingSubscription(newTier); const response = await accountApi.createBillingSubscription(newTier);
window.location.href = response.redirect_url; window.location.href = response.redirect_url;
@ -76,6 +83,8 @@ const UpgradeDialog = (props) => {
session.resetAndRedirect(routes.login); session.resetAndRedirect(routes.login);
} }
// FIXME show error // FIXME show error
} finally {
setLoading(false);
} }
} }
@ -118,7 +127,7 @@ const UpgradeDialog = (props) => {
} }
</DialogContent> </DialogContent>
<DialogFooter status={errorText}> <DialogFooter status={errorText}>
<Button onClick={props.onCancel}>Cancel</Button> <Button onClick={props.onCancel}>{t("account_upgrade_dialog_button_cancel")}</Button>
<Button onClick={handleSubmit} disabled={!submitButtonEnabled}>{submitButtonLabel}</Button> <Button onClick={handleSubmit} disabled={!submitButtonEnabled}>{submitButtonLabel}</Button>
</DialogFooter> </DialogFooter>
</Dialog> </Dialog>
@ -131,48 +140,52 @@ const TierCard = (props) => {
const tier = props.tier; const tier = props.tier;
return ( return (
<Card sx={{ <Box sx={{
m: 1, m: "7px",
minWidth: "190px", minWidth: "190px",
maxWidth: "250px", maxWidth: "250px",
flexGrow: 1, flexGrow: 1,
flexShrink: 1, flexShrink: 1,
flexBasis: 0, flexBasis: 0,
borderRadius: "3px",
"&:first-child": { ml: 0 }, "&:first-child": { ml: 0 },
"&:last-child": { mr: 0 }, "&:last-child": { mr: 0 },
...cardStyle ...cardStyle
}}> }}>
<CardActionArea sx={{ height: "100%" }}> <Card sx={{ height: "100%" }}>
<CardContent onClick={props.onClick} sx={{ height: "100%" }}> <CardActionArea sx={{ height: "100%" }}>
{props.selected && <CardContent onClick={props.onClick} sx={{ height: "100%" }}>
<div style={{ {props.selected &&
position: "absolute", <div style={{
top: "0", position: "absolute",
right: "15px", top: "0",
padding: "2px 10px", right: "15px",
background: "#338574", padding: "2px 10px",
color: "white", background: "#338574",
borderRadius: "3px", color: "white",
}}>{t("account_upgrade_dialog_tier_selected_label")}</div> borderRadius: "3px",
} }}>{t("account_upgrade_dialog_tier_selected_label")}</div>
<Typography variant="h5" component="div"> }
{tier.name || t("account_usage_tier_free")} <Typography variant="h5" component="div">
</Typography> {tier.name || t("account_usage_tier_free")}
<List dense>
{tier.limits.reservations > 0 && <FeatureItem>{t("account_upgrade_dialog_tier_features_reservations", { reservations: tier.limits.reservations })}</FeatureItem>}
<FeatureItem>{t("account_upgrade_dialog_tier_features_messages", { messages: formatNumber(tier.limits.messages) })}</FeatureItem>
<FeatureItem>{t("account_upgrade_dialog_tier_features_emails", { emails: formatNumber(tier.limits.emails) })}</FeatureItem>
<FeatureItem>{t("account_upgrade_dialog_tier_features_attachment_file_size", { filesize: formatBytes(tier.limits.attachment_file_size, 0) })}</FeatureItem>
<FeatureItem>{t("account_upgrade_dialog_tier_features_attachment_total_size", { totalsize: formatBytes(tier.limits.attachment_total_size, 0) })}</FeatureItem>
</List>
{tier.price &&
<Typography variant="subtitle1" sx={{fontWeight: 500}}>
{tier.price} / month
</Typography> </Typography>
} <List dense>
</CardContent> {tier.limits.reservations > 0 && <FeatureItem>{t("account_upgrade_dialog_tier_features_reservations", { reservations: tier.limits.reservations })}</FeatureItem>}
</CardActionArea> <FeatureItem>{t("account_upgrade_dialog_tier_features_messages", { messages: formatNumber(tier.limits.messages) })}</FeatureItem>
</Card> <FeatureItem>{t("account_upgrade_dialog_tier_features_emails", { emails: formatNumber(tier.limits.emails) })}</FeatureItem>
<FeatureItem>{t("account_upgrade_dialog_tier_features_attachment_file_size", { filesize: formatBytes(tier.limits.attachment_file_size, 0) })}</FeatureItem>
<FeatureItem>{t("account_upgrade_dialog_tier_features_attachment_total_size", { totalsize: formatBytes(tier.limits.attachment_total_size, 0) })}</FeatureItem>
</List>
{tier.price &&
<Typography variant="subtitle1" sx={{fontWeight: 500}}>
{tier.price} / month
</Typography>
}
</CardContent>
</CardActionArea>
</Card>
</Box>
); );
} }