Upgrade dialog
This commit is contained in:
binwiederhier
parent
83de879894
commit
695c1349e8
11 changed files with 290 additions and 137 deletions
|
|
@ -201,8 +201,9 @@
|
|||
"account_delete_dialog_label": "Type '{{username}}' to delete account",
|
||||
"account_delete_dialog_button_cancel": "Cancel",
|
||||
"account_delete_dialog_button_submit": "Permanently delete account",
|
||||
"account_upgrade_dialog_title": "Change billing plan",
|
||||
"account_upgrade_dialog_title": "Change account tier",
|
||||
"account_upgrade_dialog_cancel_warning": "This will cancel your subscription, and downgrade your account on {{date}}. On that date, topic reservations as well as messages cached on the server will be deleted.",
|
||||
"account_upgrade_dialog_proration_info": "When switching between paid plans, the price difference will be charged or refunded in the next invoice.",
|
||||
"prefs_notifications_title": "Notifications",
|
||||
"prefs_notifications_sound_title": "Notification sound",
|
||||
"prefs_notifications_sound_description_none": "Notifications do not play any sound when they arrive",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
accountTokenUrl,
|
||||
accountUrl, maybeWithAuth, topicUrl,
|
||||
withBasicAuth,
|
||||
withBearerAuth, accountBillingSubscriptionUrl, accountBillingPortalUrl
|
||||
withBearerAuth, accountBillingSubscriptionUrl, accountBillingPortalUrl, accountBillingTiersUrl
|
||||
} from "./utils";
|
||||
import session from "./Session";
|
||||
import subscriptionManager from "./SubscriptionManager";
|
||||
|
|
@ -264,6 +264,20 @@ class AccountApi {
|
|||
this.triggerChange(); // Dangle!
|
||||
}
|
||||
|
||||
async billingTiers() {
|
||||
const url = accountBillingTiersUrl(config.base_url);
|
||||
console.log(`[AccountApi] Fetching billing tiers`);
|
||||
const response = await fetch(url, {
|
||||
headers: withBearerAuth({}, session.token())
|
||||
});
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
throw new UnauthorizedError();
|
||||
} else if (response.status !== 200) {
|
||||
throw new Error(`Unexpected server response ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
async createBillingSubscription(tier) {
|
||||
console.log(`[AccountApi] Creating billing subscription with ${tier}`);
|
||||
return await this.upsertBillingSubscription("POST", tier)
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export const accountReservationUrl = (baseUrl) => `${baseUrl}/v1/account/reserva
|
|||
export const accountReservationSingleUrl = (baseUrl, topic) => `${baseUrl}/v1/account/reservation/${topic}`;
|
||||
export const accountBillingSubscriptionUrl = (baseUrl) => `${baseUrl}/v1/account/billing/subscription`;
|
||||
export const accountBillingPortalUrl = (baseUrl) => `${baseUrl}/v1/account/billing/portal`;
|
||||
export const accountBillingTiersUrl = (baseUrl) => `${baseUrl}/v1/account/billing/tiers`;
|
||||
export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");
|
||||
export const expandUrl = (url) => [`https://${url}`, `http://${url}`];
|
||||
export const expandSecureUrl = (url) => `https://${url}`;
|
||||
|
|
|
|||
|
|
@ -69,8 +69,9 @@ const Layout = () => {
|
|||
const [sendDialogOpenMode, setSendDialogOpenMode] = useState("");
|
||||
const users = useLiveQuery(() => userManager.all());
|
||||
const subscriptions = useLiveQuery(() => subscriptionManager.all());
|
||||
const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
|
||||
const [selected] = (subscriptions || []).filter(s => {
|
||||
const subscriptionsWithoutInternal = subscriptions?.filter(s => !s.internal);
|
||||
const newNotificationsCount = subscriptionsWithoutInternal?.reduce((prev, cur) => prev + cur.new, 0) || 0;
|
||||
const [selected] = (subscriptionsWithoutInternal || []).filter(s => {
|
||||
return (params.baseUrl && expandUrl(params.baseUrl).includes(s.baseUrl) && params.topic === s.topic)
|
||||
|| (config.base_url === s.baseUrl && params.topic === s.topic)
|
||||
});
|
||||
|
|
@ -101,7 +102,7 @@ const Layout = () => {
|
|||
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
|
||||
/>
|
||||
<Navigation
|
||||
subscriptions={subscriptions}
|
||||
subscriptions={subscriptionsWithoutInternal}
|
||||
selectedSubscription={selected}
|
||||
notificationsGranted={notificationsGranted}
|
||||
mobileDrawerOpen={mobileDrawerOpen}
|
||||
|
|
@ -111,7 +112,10 @@ const Layout = () => {
|
|||
/>
|
||||
<Main>
|
||||
<Toolbar/>
|
||||
<Outlet context={{ subscriptions, selected }}/>
|
||||
<Outlet context={{
|
||||
subscriptions: subscriptionsWithoutInternal,
|
||||
selected: selected
|
||||
}}/>
|
||||
</Main>
|
||||
<Messaging
|
||||
selected={selected}
|
||||
|
|
|
|||
|
|
@ -9,21 +9,29 @@ import Button from "@mui/material/Button";
|
|||
import accountApi, {TopicReservedError, UnauthorizedError} from "../app/AccountApi";
|
||||
import session from "../app/Session";
|
||||
import routes from "./routes";
|
||||
import {useContext, useState} from "react";
|
||||
import {useContext, useEffect, useState} from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import {AccountContext} from "./App";
|
||||
import {formatShortDate} from "../app/utils";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
|
||||
const UpgradeDialog = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { account } = useContext(AccountContext);
|
||||
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [tiers, setTiers] = useState(null);
|
||||
const [newTier, setNewTier] = useState(account?.tier?.code || null);
|
||||
const [errorText, setErrorText] = useState("");
|
||||
|
||||
if (!account) {
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setTiers(await accountApi.billingTiers());
|
||||
})();
|
||||
}, []);
|
||||
|
||||
if (!account || !tiers) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
|
|
@ -69,22 +77,43 @@ const UpgradeDialog = (props) => {
|
|||
|
||||
return (
|
||||
<Dialog open={props.open} onClose={props.onCancel} maxWidth="md" fullScreen={fullScreen}>
|
||||
<DialogTitle>Change billing plan</DialogTitle>
|
||||
<DialogTitle>{t("account_upgrade_dialog_title")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row"
|
||||
flexDirection: "row",
|
||||
marginBottom: "8px",
|
||||
width: "100%"
|
||||
}}>
|
||||
<TierCard code={null} name={"Free"} selected={newTier === null} onClick={() => setNewTier(null)}/>
|
||||
<TierCard code="starter" name={"Starter"} selected={newTier === "starter"} onClick={() => setNewTier("starter")}/>
|
||||
<TierCard code="pro" name={"Pro"} selected={newTier === "pro"} onClick={() => setNewTier("pro")}/>
|
||||
<TierCard code="business" name={"Business"} selected={newTier === "business"} onClick={() => setNewTier("business")}/>
|
||||
<TierCard
|
||||
code={null}
|
||||
name={t("account_usage_tier_free")}
|
||||
price={null}
|
||||
selected={newTier === null}
|
||||
onClick={() => setNewTier(null)}
|
||||
/>
|
||||
{tiers.map(tier =>
|
||||
<TierCard
|
||||
key={`tierCard${tier.code}`}
|
||||
code={tier.code}
|
||||
name={tier.name}
|
||||
price={tier.price}
|
||||
features={tier.features}
|
||||
selected={newTier === tier.code}
|
||||
onClick={() => setNewTier(tier.code)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{action === Action.CANCEL &&
|
||||
<Alert severity="warning">
|
||||
{t("account_upgrade_dialog_cancel_warning", { date: formatShortDate(account.billing.paid_until) })}
|
||||
</Alert>
|
||||
}
|
||||
{action === Action.UPDATE &&
|
||||
<Alert severity="info">
|
||||
{t("account_upgrade_dialog_proration_info")}
|
||||
</Alert>
|
||||
}
|
||||
</DialogContent>
|
||||
<DialogFooter status={errorText}>
|
||||
<Button onClick={props.onCancel}>Cancel</Button>
|
||||
|
|
@ -95,20 +124,42 @@ const UpgradeDialog = (props) => {
|
|||
};
|
||||
|
||||
const TierCard = (props) => {
|
||||
const cardStyle = (props.selected) ? {
|
||||
background: "#eee"
|
||||
} : {};
|
||||
const cardStyle = (props.selected) ? { background: "#eee", border: "2px solid #338574" } : {};
|
||||
return (
|
||||
<Card sx={{ m: 1, maxWidth: 345 }}>
|
||||
<CardActionArea>
|
||||
<CardContent sx={{...cardStyle}} onClick={props.onClick}>
|
||||
<Card sx={{
|
||||
m: 1,
|
||||
minWidth: "190px",
|
||||
maxWidth: "250px",
|
||||
"&:first-child": { ml: 0 },
|
||||
"&:last-child": { mr: 0 },
|
||||
...cardStyle
|
||||
}}>
|
||||
<CardActionArea sx={{ height: "100%" }}>
|
||||
<CardContent onClick={props.onClick} sx={{ height: "100%" }}>
|
||||
{props.selected &&
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
right: "15px",
|
||||
padding: "2px 10px",
|
||||
background: "#338574",
|
||||
color: "white",
|
||||
borderRadius: "3px",
|
||||
}}>Selected</div>
|
||||
}
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
{props.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Lizards are a widespread group of squamate reptiles, with over 6,000
|
||||
species, ranging across all continents except Antarctica
|
||||
</Typography>
|
||||
{props.features &&
|
||||
<Typography variant="body2" color="text.secondary" sx={{whiteSpace: "pre-wrap"}}>
|
||||
{props.features}
|
||||
</Typography>
|
||||
}
|
||||
{props.price &&
|
||||
<Typography variant="subtitle1" sx={{mt: 1}}>
|
||||
{props.price} / month
|
||||
</Typography>
|
||||
}
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue