Make prettier
This commit is contained in:
parent
4092f7fd51
commit
cead305a9a
3 changed files with 47 additions and 35 deletions
|
@ -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:
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue