dearsky/ntfy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

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"