2023-01-10 09:40:46 +13:00
|
|
|
import * as React from 'react';
|
|
|
|
import Dialog from '@mui/material/Dialog';
|
|
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
2023-01-17 10:35:37 +13:00
|
|
|
import {Alert, CardActionArea, CardContent, useMediaQuery} from "@mui/material";
|
2023-01-10 09:40:46 +13:00
|
|
|
import theme from "./theme";
|
|
|
|
import DialogFooter from "./DialogFooter";
|
2023-01-15 00:43:44 +13:00
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import accountApi, {TopicReservedError, UnauthorizedError} from "../app/AccountApi";
|
|
|
|
import session from "../app/Session";
|
|
|
|
import routes from "./routes";
|
2023-01-18 04:09:37 +13:00
|
|
|
import {useContext, useEffect, useState} from "react";
|
2023-01-15 00:43:44 +13:00
|
|
|
import Card from "@mui/material/Card";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import {AccountContext} from "./App";
|
2023-01-17 10:35:37 +13:00
|
|
|
import {formatShortDate} from "../app/utils";
|
|
|
|
import {useTranslation} from "react-i18next";
|
2023-01-18 04:09:37 +13:00
|
|
|
import subscriptionManager from "../app/SubscriptionManager";
|
2023-01-10 09:40:46 +13:00
|
|
|
|
|
|
|
const UpgradeDialog = (props) => {
|
2023-01-17 10:35:37 +13:00
|
|
|
const { t } = useTranslation();
|
2023-01-15 00:43:44 +13:00
|
|
|
const { account } = useContext(AccountContext);
|
2023-01-10 09:40:46 +13:00
|
|
|
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
2023-01-18 04:09:37 +13:00
|
|
|
const [tiers, setTiers] = useState(null);
|
2023-01-16 17:29:46 +13:00
|
|
|
const [newTier, setNewTier] = useState(account?.tier?.code || null);
|
2023-01-15 00:43:44 +13:00
|
|
|
const [errorText, setErrorText] = useState("");
|
2023-01-10 09:40:46 +13:00
|
|
|
|
2023-01-18 04:09:37 +13:00
|
|
|
useEffect(() => {
|
|
|
|
(async () => {
|
|
|
|
setTiers(await accountApi.billingTiers());
|
|
|
|
})();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
if (!account || !tiers) {
|
2023-01-17 10:35:37 +13:00
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
|
|
|
|
const currentTier = account.tier?.code || null;
|
|
|
|
let action, submitButtonLabel, submitButtonEnabled;
|
|
|
|
if (currentTier === newTier) {
|
|
|
|
submitButtonLabel = "Update subscription";
|
|
|
|
submitButtonEnabled = false;
|
|
|
|
action = null;
|
|
|
|
} else if (currentTier === null) {
|
|
|
|
submitButtonLabel = "Pay $5 now and subscribe";
|
|
|
|
submitButtonEnabled = true;
|
|
|
|
action = Action.CREATE;
|
|
|
|
} else if (newTier === null) {
|
|
|
|
submitButtonLabel = "Cancel subscription";
|
|
|
|
submitButtonEnabled = true;
|
|
|
|
action = Action.CANCEL;
|
|
|
|
} else {
|
|
|
|
submitButtonLabel = "Update subscription";
|
|
|
|
submitButtonEnabled = true;
|
|
|
|
action = Action.UPDATE;
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleSubmit = async () => {
|
2023-01-15 00:43:44 +13:00
|
|
|
try {
|
2023-01-17 10:35:37 +13:00
|
|
|
if (action === Action.CREATE) {
|
|
|
|
const response = await accountApi.createBillingSubscription(newTier);
|
|
|
|
window.location.href = response.redirect_url;
|
|
|
|
} else if (action === Action.UPDATE) {
|
|
|
|
await accountApi.updateBillingSubscription(newTier);
|
|
|
|
} else if (action === Action.CANCEL) {
|
2023-01-16 17:29:46 +13:00
|
|
|
await accountApi.deleteBillingSubscription();
|
2023-01-15 00:43:44 +13:00
|
|
|
}
|
2023-01-17 10:35:37 +13:00
|
|
|
props.onCancel();
|
2023-01-15 00:43:44 +13:00
|
|
|
} catch (e) {
|
2023-01-17 10:35:37 +13:00
|
|
|
console.log(`[UpgradeDialog] Error changing billing subscription`, e);
|
2023-01-15 00:43:44 +13:00
|
|
|
if ((e instanceof UnauthorizedError)) {
|
|
|
|
session.resetAndRedirect(routes.login);
|
|
|
|
}
|
|
|
|
// FIXME show error
|
|
|
|
}
|
2023-01-10 09:40:46 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-01-15 00:43:44 +13:00
|
|
|
<Dialog open={props.open} onClose={props.onCancel} maxWidth="md" fullScreen={fullScreen}>
|
2023-01-18 04:09:37 +13:00
|
|
|
<DialogTitle>{t("account_upgrade_dialog_title")}</DialogTitle>
|
2023-01-10 09:40:46 +13:00
|
|
|
<DialogContent>
|
2023-01-15 00:43:44 +13:00
|
|
|
<div style={{
|
|
|
|
display: "flex",
|
2023-01-18 04:09:37 +13:00
|
|
|
flexDirection: "row",
|
|
|
|
marginBottom: "8px",
|
|
|
|
width: "100%"
|
2023-01-15 00:43:44 +13:00
|
|
|
}}>
|
2023-01-18 04:09:37 +13:00
|
|
|
<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)}
|
|
|
|
/>
|
|
|
|
)}
|
2023-01-15 00:43:44 +13:00
|
|
|
</div>
|
2023-01-17 10:35:37 +13:00
|
|
|
{action === Action.CANCEL &&
|
|
|
|
<Alert severity="warning">
|
|
|
|
{t("account_upgrade_dialog_cancel_warning", { date: formatShortDate(account.billing.paid_until) })}
|
|
|
|
</Alert>
|
|
|
|
}
|
2023-01-18 04:09:37 +13:00
|
|
|
{action === Action.UPDATE &&
|
|
|
|
<Alert severity="info">
|
|
|
|
{t("account_upgrade_dialog_proration_info")}
|
|
|
|
</Alert>
|
|
|
|
}
|
2023-01-10 09:40:46 +13:00
|
|
|
</DialogContent>
|
2023-01-15 00:43:44 +13:00
|
|
|
<DialogFooter status={errorText}>
|
2023-01-17 10:35:37 +13:00
|
|
|
<Button onClick={props.onCancel}>Cancel</Button>
|
|
|
|
<Button onClick={handleSubmit} disabled={!submitButtonEnabled}>{submitButtonLabel}</Button>
|
2023-01-10 09:40:46 +13:00
|
|
|
</DialogFooter>
|
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-01-15 00:43:44 +13:00
|
|
|
const TierCard = (props) => {
|
2023-01-18 04:09:37 +13:00
|
|
|
const cardStyle = (props.selected) ? { background: "#eee", border: "2px solid #338574" } : {};
|
2023-01-15 00:43:44 +13:00
|
|
|
return (
|
2023-01-18 04:09:37 +13:00
|
|
|
<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>
|
|
|
|
}
|
2023-01-15 00:43:44 +13:00
|
|
|
<Typography gutterBottom variant="h5" component="div">
|
|
|
|
{props.name}
|
|
|
|
</Typography>
|
2023-01-18 04:09:37 +13:00
|
|
|
{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>
|
|
|
|
}
|
2023-01-15 00:43:44 +13:00
|
|
|
</CardContent>
|
|
|
|
</CardActionArea>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-01-17 10:35:37 +13:00
|
|
|
const Action = {
|
|
|
|
CREATE: 1,
|
|
|
|
UPDATE: 2,
|
|
|
|
CANCEL: 3
|
|
|
|
};
|
|
|
|
|
2023-01-10 09:40:46 +13:00
|
|
|
export default UpgradeDialog;
|