2023-01-09 21:40:46 +01: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-16 22:35:37 +01:00
|
|
|
import {Alert, CardActionArea, CardContent, useMediaQuery} from "@mui/material";
|
2023-01-09 21:40:46 +01:00
|
|
|
import theme from "./theme";
|
|
|
|
import DialogFooter from "./DialogFooter";
|
2023-01-14 12:43:44 +01:00
|
|
|
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 Card from "@mui/material/Card";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import {AccountContext} from "./App";
|
2023-01-16 22:35:37 +01:00
|
|
|
import {formatShortDate} from "../app/utils";
|
|
|
|
import {useTranslation} from "react-i18next";
|
2023-01-09 21:40:46 +01:00
|
|
|
|
|
|
|
const UpgradeDialog = (props) => {
|
2023-01-16 22:35:37 +01:00
|
|
|
const { t } = useTranslation();
|
2023-01-14 12:43:44 +01:00
|
|
|
const { account } = useContext(AccountContext);
|
2023-01-09 21:40:46 +01:00
|
|
|
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
2023-01-16 05:29:46 +01:00
|
|
|
const [newTier, setNewTier] = useState(account?.tier?.code || null);
|
2023-01-14 12:43:44 +01:00
|
|
|
const [errorText, setErrorText] = useState("");
|
2023-01-09 21:40:46 +01:00
|
|
|
|
2023-01-16 22:35:37 +01:00
|
|
|
if (!account) {
|
|
|
|
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-14 12:43:44 +01:00
|
|
|
try {
|
2023-01-16 22:35:37 +01: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 05:29:46 +01:00
|
|
|
await accountApi.deleteBillingSubscription();
|
2023-01-14 12:43:44 +01:00
|
|
|
}
|
2023-01-16 22:35:37 +01:00
|
|
|
props.onCancel();
|
2023-01-14 12:43:44 +01:00
|
|
|
} catch (e) {
|
2023-01-16 22:35:37 +01:00
|
|
|
console.log(`[UpgradeDialog] Error changing billing subscription`, e);
|
2023-01-14 12:43:44 +01:00
|
|
|
if ((e instanceof UnauthorizedError)) {
|
|
|
|
session.resetAndRedirect(routes.login);
|
|
|
|
}
|
|
|
|
// FIXME show error
|
|
|
|
}
|
2023-01-09 21:40:46 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-01-14 12:43:44 +01:00
|
|
|
<Dialog open={props.open} onClose={props.onCancel} maxWidth="md" fullScreen={fullScreen}>
|
2023-01-16 22:35:37 +01:00
|
|
|
<DialogTitle>Change billing plan</DialogTitle>
|
2023-01-09 21:40:46 +01:00
|
|
|
<DialogContent>
|
2023-01-14 12:43:44 +01:00
|
|
|
<div style={{
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "row"
|
|
|
|
}}>
|
2023-01-16 05:29:46 +01:00
|
|
|
<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")}/>
|
2023-01-14 12:43:44 +01:00
|
|
|
</div>
|
2023-01-16 22:35:37 +01:00
|
|
|
{action === Action.CANCEL &&
|
|
|
|
<Alert severity="warning">
|
|
|
|
{t("account_upgrade_dialog_cancel_warning", { date: formatShortDate(account.billing.paid_until) })}
|
|
|
|
</Alert>
|
|
|
|
}
|
2023-01-09 21:40:46 +01:00
|
|
|
</DialogContent>
|
2023-01-14 12:43:44 +01:00
|
|
|
<DialogFooter status={errorText}>
|
2023-01-16 22:35:37 +01:00
|
|
|
<Button onClick={props.onCancel}>Cancel</Button>
|
|
|
|
<Button onClick={handleSubmit} disabled={!submitButtonEnabled}>{submitButtonLabel}</Button>
|
2023-01-09 21:40:46 +01:00
|
|
|
</DialogFooter>
|
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-01-14 12:43:44 +01:00
|
|
|
const TierCard = (props) => {
|
|
|
|
const cardStyle = (props.selected) ? {
|
2023-01-16 22:35:37 +01:00
|
|
|
background: "#eee"
|
2023-01-14 12:43:44 +01:00
|
|
|
} : {};
|
|
|
|
return (
|
|
|
|
<Card sx={{ m: 1, maxWidth: 345 }}>
|
|
|
|
<CardActionArea>
|
|
|
|
<CardContent sx={{...cardStyle}} onClick={props.onClick}>
|
|
|
|
<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>
|
|
|
|
</CardContent>
|
|
|
|
</CardActionArea>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-01-16 22:35:37 +01:00
|
|
|
const Action = {
|
|
|
|
CREATE: 1,
|
|
|
|
UPDATE: 2,
|
|
|
|
CANCEL: 3
|
|
|
|
};
|
|
|
|
|
2023-01-09 21:40:46 +01:00
|
|
|
export default UpgradeDialog;
|