import * as React from 'react'; import {useContext, useEffect, useState} from 'react'; import Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import {Alert, Badge, CardActionArea, CardContent, Chip, ListItem, Stack, Switch, useMediaQuery} from "@mui/material"; import theme from "./theme"; import DialogFooter from "./DialogFooter"; import Button from "@mui/material/Button"; import accountApi, {SubscriptionInterval} from "../app/AccountApi"; import session from "../app/Session"; import routes from "./routes"; import Card from "@mui/material/Card"; import Typography from "@mui/material/Typography"; import {AccountContext} from "./App"; import {formatBytes, formatNumber, formatPrice, formatShortDate} from "../app/utils"; import {Trans, useTranslation} from "react-i18next"; import List from "@mui/material/List"; import {Check, Close} from "@mui/icons-material"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; import Box from "@mui/material/Box"; import {NavLink} from "react-router-dom"; import {UnauthorizedError} from "../app/errors"; const UpgradeDialog = (props) => { const { t } = useTranslation(); const { account } = useContext(AccountContext); // May be undefined! const [error, setError] = useState(""); const [tiers, setTiers] = useState(null); const [interval, setInterval] = useState(account?.billing?.interval || SubscriptionInterval.YEAR); const [newTierCode, setNewTierCode] = useState(account?.tier?.code); // May be undefined const [loading, setLoading] = useState(false); const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); useEffect(() => { const fetchTiers = async () => { setTiers(await accountApi.billingTiers()); } fetchTiers(); // Dangle }, []); if (!tiers) { return <>>; } const tiersMap = Object.assign(...tiers.map(tier => ({[tier.code]: tier}))); const newTier = tiersMap[newTierCode]; // May be undefined const currentTier = account?.tier; // May be undefined const currentInterval = account?.billing?.interval; // May be undefined const currentTierCode = currentTier?.code; // May be undefined // Figure out buttons, labels and the submit action let submitAction, submitButtonLabel, banner; if (!account) { submitButtonLabel = t("account_upgrade_dialog_button_redirect_signup"); submitAction = Action.REDIRECT_SIGNUP; banner = null; } else if (currentTierCode === newTierCode && currentInterval === interval) { submitButtonLabel = t("account_upgrade_dialog_button_update_subscription"); submitAction = null; banner = (currentTierCode) ? Banner.PRORATION_INFO : null; } else if (!currentTierCode) { submitButtonLabel = t("account_upgrade_dialog_button_pay_now"); submitAction = Action.CREATE_SUBSCRIPTION; banner = null; } else if (!newTierCode) { submitButtonLabel = t("account_upgrade_dialog_button_cancel_subscription"); submitAction = Action.CANCEL_SUBSCRIPTION; banner = Banner.CANCEL_WARNING; } else { submitButtonLabel = t("account_upgrade_dialog_button_update_subscription"); submitAction = Action.UPDATE_SUBSCRIPTION; banner = Banner.PRORATION_INFO; } // Exceptional conditions if (loading) { submitAction = null; } else if (newTier?.code && account?.reservations?.length > newTier?.limits?.reservations) { submitAction = null; banner = Banner.RESERVATIONS_WARNING; } const handleSubmit = async () => { if (submitAction === Action.REDIRECT_SIGNUP) { window.location.href = routes.signup; return; } try { setLoading(true); if (submitAction === Action.CREATE_SUBSCRIPTION) { const response = await accountApi.createBillingSubscription(newTierCode, interval); window.location.href = response.redirect_url; } else if (submitAction === Action.UPDATE_SUBSCRIPTION) { await accountApi.updateBillingSubscription(newTierCode, interval); } else if (submitAction === Action.CANCEL_SUBSCRIPTION) { await accountApi.deleteBillingSubscription(); } props.onCancel(); } catch (e) { console.log(`[UpgradeDialog] Error changing billing subscription`, e); if (e instanceof UnauthorizedError) { session.resetAndRedirect(routes.login); } else { setError(e.message); } } finally { setLoading(false); } } // Figure out discount let discount = 0, upto = false; if (newTier?.prices) { discount = Math.round(((newTier.prices.month*12/newTier.prices.year)-1)*100); } else { let n = 0; for (const t of tiers) { if (t.prices) { const tierDiscount = Math.round(((t.prices.month*12/t.prices.year)-1)*100); if (tierDiscount > discount) { discount = tierDiscount; n++; } } } upto = n > 1; } return ( {t("account_upgrade_dialog_title")} {t("account_upgrade_dialog_interval_monthly")} setInterval(ev.target.checked ? SubscriptionInterval.YEAR : SubscriptionInterval.MONTH)} /> {t("account_upgrade_dialog_interval_yearly")} {discount > 0 && } {tiers.map(tier => setNewTierCode(tier.code)} // tier.code may be undefined! /> )} {banner === Banner.CANCEL_WARNING && } {banner === Banner.PRORATION_INFO && } {banner === Banner.RESERVATIONS_WARNING && , }} /> } {t("account_upgrade_dialog_button_cancel")} {submitButtonLabel} ); }; const TierCard = (props) => { const { t } = useTranslation(); const tier = props.tier; let cardStyle, labelStyle, labelText; if (props.selected) { cardStyle = { background: "#eee", border: "3px solid #338574" }; labelStyle = { background: "#338574", color: "white" }; labelText = t("account_upgrade_dialog_tier_selected_label"); } else if (props.current) { cardStyle = { border: "3px solid #eee" }; labelStyle = { background: "#eee", color: "black" }; labelText = t("account_upgrade_dialog_tier_current_label"); } else { cardStyle = { border: "3px solid transparent" }; } let monthlyPrice; if (!tier.prices) { monthlyPrice = 0; } else if (props.interval === SubscriptionInterval.YEAR) { monthlyPrice = tier.prices.year/12; } else if (props.interval === SubscriptionInterval.MONTH) { monthlyPrice = tier.prices.month; } return ( {labelStyle && {labelText} } {tier.name || t("account_basics_tier_free")} {formatPrice(monthlyPrice)} {monthlyPrice > 0 && <>/ {t("account_upgrade_dialog_tier_price_per_month")}>} {tier.limits.reservations > 0 && {t("account_upgrade_dialog_tier_features_reservations", { reservations: tier.limits.reservations })}} {tier.limits.reservations === 0 && {t("account_upgrade_dialog_tier_features_no_reservations")}} {t("account_upgrade_dialog_tier_features_messages", { messages: formatNumber(tier.limits.messages) })} {t("account_upgrade_dialog_tier_features_emails", { emails: formatNumber(tier.limits.emails) })} {t("account_upgrade_dialog_tier_features_attachment_file_size", { filesize: formatBytes(tier.limits.attachment_file_size, 0) })} {t("account_upgrade_dialog_tier_features_attachment_total_size", { totalsize: formatBytes(tier.limits.attachment_total_size, 0) })} {tier.prices && props.interval === SubscriptionInterval.MONTH && {t("account_upgrade_dialog_tier_price_billed_monthly", { price: formatPrice(tier.prices.month*12) })} } {tier.prices && props.interval === SubscriptionInterval.YEAR && {t("account_upgrade_dialog_tier_price_billed_yearly", { price: formatPrice(tier.prices.year), save: formatPrice(tier.prices.month*12-tier.prices.year) })} } ); } const Feature = (props) => { return {props.children}; } const NoFeature = (props) => { return {props.children}; } const FeatureItem = (props) => { return ( {props.feature && } {!props.feature && } {props.children} } /> ); }; const Action = { REDIRECT_SIGNUP: 1, CREATE_SUBSCRIPTION: 2, UPDATE_SUBSCRIPTION: 3, CANCEL_SUBSCRIPTION: 4 }; const Banner = { CANCEL_WARNING: 1, PRORATION_INFO: 2, RESERVATIONS_WARNING: 3 }; export default UpgradeDialog;