0}
+ title={t("account_usage_tier_title")}
+ description={t("account_usage_tier_description")}
+ >
+
+ {accountType}
+ {account.billing?.paid_until && !account.billing?.cancel_at &&
+
+
+
+ }
+ {config.enable_payments && account.role === "user" && !account.billing?.subscription &&
+ }
+ onClick={handleUpgradeClick}
+ sx={{ml: 1}}
+ >{t("account_usage_tier_upgrade_button")}
+ }
+ {config.enable_payments && account.role === "user" && account.billing?.subscription &&
+
+ }
+ {config.enable_payments && account.role === "user" && account.billing?.customer &&
+
+ }
+ setUpgradeDialogOpen(false)}
+ />
+
+ {account.billing?.status === "past_due" &&
+ {t("account_usage_tier_payment_overdue")}
+ }
+ {account.billing?.cancel_at > 0 &&
+ {t("account_usage_tier_canceled_subscription", { date: formatShortDate(account.billing.cancel_at) })}
+ }
+
+ )
+};
+
+const Stats = () => {
+ const { t } = useTranslation();
+ const { account } = useContext(AccountContext);
+ const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
+
+ if (!account) {
+ return <>>;
+ }
+
+ const normalize = (value, max) => {
+ return Math.min(value / max * 100, 100);
+ };
+
return (