1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2025-06-05 20:44:35 +02:00

Add "Canceled" banner

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
web/src/components

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"