vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

Add "Canceled" banner

Browse source
This commit is contained in:
binwiederhier 2023-01-16 10:35:12 -05:00
parent c06bfb989e
commit 7faed3ee1e
9 changed files with 39 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/public/static/langs/en.json
View file

@ -183,7 +183,9 @@
"account_usage_tier_none": "Basic",
"account_usage_tier_upgrade_button": "Upgrade to Pro",
"account_usage_tier_change_button": "Change",
"account_usage_tier_paid_until": "Subscription paid until {{date}}, and will auto-renew",
"account_usage_tier_payment_overdue": "Your payment is overdue. Please update your payment method, or your account will be downgraded soon.",
"account_usage_tier_canceled_subscription": "Your subscription was canceled and will be downgraded to a free account on {{date}}.",
"account_usage_manage_billing_button": "Manage billing",
"account_usage_messages_title": "Published messages",
"account_usage_emails_title": "Emails sent",

5
web/src/app/utils.js
View file

@ -184,6 +184,11 @@ export const formatShortDateTime = (timestamp) => {
.format(new Date(timestamp * 1000));
}
export const formatShortDate = (timestamp) => {
return new Intl.DateTimeFormat('default', {dateStyle: 'short'})
.format(new Date(timestamp * 1000));
}
export const formatBytes = (bytes, decimals = 2) => {
if (bytes === 0) return '0 bytes';
const k = 1024;

14
web/src/components/Account.js
View file

@ -18,7 +18,7 @@ import TextField from "@mui/material/TextField";
import DialogActions from "@mui/material/DialogActions";
import routes from "./routes";
import IconButton from "@mui/material/IconButton";
import {formatBytes, formatShortDateTime} from "../app/utils";
import {formatBytes, formatShortDate, formatShortDateTime} from "../app/utils";
import accountApi, {UnauthorizedError} from "../app/AccountApi";
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import {Pref, PrefGroup} from "./Pref";
@ -201,7 +201,7 @@ const Stats = () => {
</Typography>
<PrefGroup>
<Pref
alignTop={account.billing?.status === "past_due"}
alignTop={account.billing?.status === "past_due" || account.billing?.cancel_at > 0}
title={t("account_usage_tier_title")}
>
<div>
@ -213,6 +213,11 @@ const Stats = () => {
}
{account.role === "user" && account.tier && account.tier.name}
{account.role === "user" && !account.tier && t("account_usage_tier_none")}
{account.billing?.paid_until &&
<Tooltip title={t("account_usage_tier_paid_until", { date: formatShortDate(account.billing?.paid_until) })}>
<span><InfoIcon/></span>
</Tooltip>
}
{config.enable_payments && account.role === "user" && (!account.tier || !account.tier.paid) &&
<Button
variant="outlined"
@ -246,6 +251,9 @@ const Stats = () => {
{account.billing?.status === "past_due" &&
<Alert severity="error" sx={{mt: 1}}>{t("account_usage_tier_payment_overdue")}</Alert>
}
{account.billing?.cancel_at > 0 &&
<Alert severity="info" sx={{mt: 1}}>{t("account_usage_tier_canceled_subscription", { date: formatShortDate(account.billing.cancel_at) })}</Alert>
}
</Pref>
{account.role !== "admin" &&
<Pref title={t("account_usage_reservations_title")}>
@ -331,7 +339,7 @@ const Stats = () => {
const InfoIcon = () => {
return (
<InfoOutlinedIcon sx={{
verticalAlign: "bottom",
verticalAlign: "middle",
width: "18px",
marginLeft: "4px",
color: "gray"