ntfy/web/src/components/UpgradeDialog.js

import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import {CardActionArea, CardContent, useMediaQuery} from "@mui/material";
import theme from "./theme";
import DialogFooter from "./DialogFooter";
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";

const UpgradeDialog = (props) => {
    const { account } = useContext(AccountContext);
    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const [selected, setSelected] = useState(account?.tier?.code || null);
    const [errorText, setErrorText] = useState("");

    const handleCheckout = async () => {
        try {
            const response = await accountApi.createCheckoutSession(selected);
            if (response.redirect_url) {
                window.location.href = response.redirect_url;
            } else {
                await accountApi.sync();
            }

        } catch (e) {
            console.log(`[UpgradeDialog] Error creating checkout session`, e);
            if ((e instanceof UnauthorizedError)) {
                session.resetAndRedirect(routes.login);
            }
            // FIXME show error
        }
    }

    return (
        <Dialog open={props.open} onClose={props.onCancel} maxWidth="md" fullScreen={fullScreen}>
            <DialogTitle>Upgrade to Pro</DialogTitle>
            <DialogContent>
                <div style={{
                    display: "flex",
                    flexDirection: "row"
                }}>
                    <TierCard code={null} name={"Free"} selected={selected === null} onClick={() => setSelected(null)}/>
                    <TierCard code="starter" name={"Starter"} selected={selected === "starter"} onClick={() => setSelected("starter")}/>
                    <TierCard code="pro" name={"Pro"} selected={selected === "pro"} onClick={() => setSelected("pro")}/>
                    <TierCard code="business" name={"Business"} selected={selected === "business"} onClick={() => setSelected("business")}/>
                </div>
            </DialogContent>
            <DialogFooter status={errorText}>
                <Button onClick={handleCheckout}>Checkout</Button>
            </DialogFooter>
        </Dialog>
    );
};

const TierCard = (props) => {
    const cardStyle = (props.selected) ? {
        border: "1px solid red",

    } : {};
    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>
    );
}

export default UpgradeDialog;