2023-01-09 21:40:46 +01:00
|
|
|
import * as React from "react";
|
2023-01-30 19:10:45 +01:00
|
|
|
import { useContext, useEffect, useState } from "react";
|
2023-05-24 12:25:20 +02:00
|
|
|
import {
|
|
|
|
Dialog,
|
|
|
|
DialogContent,
|
|
|
|
DialogTitle,
|
|
|
|
Alert,
|
|
|
|
CardActionArea,
|
|
|
|
CardContent,
|
|
|
|
Chip,
|
|
|
|
Link,
|
|
|
|
ListItem,
|
|
|
|
Switch,
|
|
|
|
useMediaQuery,
|
|
|
|
Button,
|
|
|
|
Card,
|
|
|
|
Typography,
|
|
|
|
List,
|
|
|
|
ListItemIcon,
|
|
|
|
ListItemText,
|
|
|
|
Box,
|
|
|
|
DialogContentText,
|
|
|
|
DialogActions,
|
|
|
|
} from "@mui/material";
|
2023-01-18 01:40:03 +01:00
|
|
|
import { Trans, useTranslation } from "react-i18next";
|
2023-02-22 04:44:30 +01:00
|
|
|
import { Check, Close } from "@mui/icons-material";
|
2023-01-21 04:47:37 +01:00
|
|
|
import { NavLink } from "react-router-dom";
|
2023-02-02 21:19:37 +01:00
|
|
|
import { UnauthorizedError } from "../app/errors";
|
2023-02-22 04:44:30 +01:00
|
|
|
import { formatBytes, formatNumber, formatPrice, formatShortDate } from "../app/utils";
|
2023-01-14 12:43:44 +01:00
|
|
|
import { AccountContext } from "./App";
|
|
|
|
import routes from "./routes";
|
|
|
|
import session from "../app/Session";
|
2023-02-22 04:44:30 +01:00
|
|
|
import accountApi, { SubscriptionInterval } from "../app/AccountApi";
|
2023-01-09 21:40:46 +01:00
|
|
|
import theme from "./theme";
|
|
|
|
|
2023-05-24 10:20:15 +02:00
|
|
|
const Feature = (props) => <FeatureItem feature>{props.children}</FeatureItem>;
|
|
|
|
|
|
|
|
const NoFeature = (props) => <FeatureItem feature={false}>{props.children}</FeatureItem>;
|
|
|
|
|
|
|
|
const FeatureItem = (props) => (
|
|
|
|
<ListItem disableGutters sx={{ m: 0, p: 0 }}>
|
|
|
|
<ListItemIcon sx={{ minWidth: "24px" }}>
|
|
|
|
{props.feature && <Check fontSize="small" sx={{ color: "#338574" }} />}
|
|
|
|
{!props.feature && <Close fontSize="small" sx={{ color: "gray" }} />}
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText sx={{ mt: "2px", mb: "2px" }} primary={<Typography variant="body1">{props.children}</Typography>} />
|
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
|
|
|
|
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,
|
|
|
|
};
|
|
|
|
|
2023-01-09 21:40:46 +01:00
|
|
|
const UpgradeDialog = (props) => {
|
2023-01-16 22:35:37 +01:00
|
|
|
const { t } = useTranslation();
|
2023-01-18 19:46:40 +01:00
|
|
|
const { account } = useContext(AccountContext); // May be undefined!
|
2023-02-02 21:19:37 +01:00
|
|
|
const [error, setError] = useState("");
|
2023-01-17 16:09:37 +01:00
|
|
|
const [tiers, setTiers] = useState(null);
|
2023-02-22 04:44:30 +01:00
|
|
|
const [interval, setInterval] = useState(account?.billing?.interval || SubscriptionInterval.YEAR);
|
2023-01-21 04:47:37 +01:00
|
|
|
const [newTierCode, setNewTierCode] = useState(account?.tier?.code); // May be undefined
|
2023-01-18 02:21:19 +01:00
|
|
|
const [loading, setLoading] = useState(false);
|
2023-02-02 21:19:37 +01:00
|
|
|
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
2023-01-09 21:40:46 +01:00
|
|
|
|
2023-01-17 16:09:37 +01:00
|
|
|
useEffect(() => {
|
2023-02-12 02:38:13 +01:00
|
|
|
const fetchTiers = async () => {
|
|
|
|
setTiers(await accountApi.billingTiers());
|
|
|
|
};
|
|
|
|
fetchTiers(); // Dangle
|
2023-01-17 16:09:37 +01:00
|
|
|
}, []);
|
|
|
|
|
2023-01-18 19:46:40 +01:00
|
|
|
if (!tiers) {
|
2023-01-16 22:35:37 +01:00
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
|
2023-01-21 04:47:37 +01:00
|
|
|
const tiersMap = Object.assign(...tiers.map((tier) => ({ [tier.code]: tier })));
|
|
|
|
const newTier = tiersMap[newTierCode]; // May be undefined
|
|
|
|
const currentTier = account?.tier; // May be undefined
|
2023-02-22 04:44:30 +01:00
|
|
|
const currentInterval = account?.billing?.interval; // May be undefined
|
2023-01-21 04:47:37 +01:00
|
|
|
const currentTierCode = currentTier?.code; // May be undefined
|
|
|
|
|
|
|
|
// Figure out buttons, labels and the submit action
|
|
|
|
let submitAction;
|
|
|
|
let submitButtonLabel;
|
|
|
|
let banner;
|
2023-01-18 19:46:40 +01:00
|
|
|
if (!account) {
|
|
|
|
submitButtonLabel = t("account_upgrade_dialog_button_redirect_signup");
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = Action.REDIRECT_SIGNUP;
|
|
|
|
banner = null;
|
2023-02-26 04:24:04 +01:00
|
|
|
} else if (currentTierCode === newTierCode && (currentInterval === undefined || currentInterval === interval)) {
|
2023-01-18 01:40:03 +01:00
|
|
|
submitButtonLabel = t("account_upgrade_dialog_button_update_subscription");
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = null;
|
|
|
|
banner = currentTierCode ? Banner.PRORATION_INFO : null;
|
|
|
|
} else if (!currentTierCode) {
|
2023-01-18 01:40:03 +01:00
|
|
|
submitButtonLabel = t("account_upgrade_dialog_button_pay_now");
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = Action.CREATE_SUBSCRIPTION;
|
|
|
|
banner = null;
|
|
|
|
} else if (!newTierCode) {
|
2023-01-18 01:40:03 +01:00
|
|
|
submitButtonLabel = t("account_upgrade_dialog_button_cancel_subscription");
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = Action.CANCEL_SUBSCRIPTION;
|
|
|
|
banner = Banner.CANCEL_WARNING;
|
2023-01-16 22:35:37 +01:00
|
|
|
} else {
|
2023-01-18 01:40:03 +01:00
|
|
|
submitButtonLabel = t("account_upgrade_dialog_button_update_subscription");
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = Action.UPDATE_SUBSCRIPTION;
|
|
|
|
banner = Banner.PRORATION_INFO;
|
2023-01-16 22:35:37 +01:00
|
|
|
}
|
|
|
|
|
2023-01-21 04:47:37 +01:00
|
|
|
// Exceptional conditions
|
2023-01-18 02:21:19 +01:00
|
|
|
if (loading) {
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = null;
|
2023-01-21 14:55:31 +01:00
|
|
|
} else if (newTier?.code && account?.reservations?.length > newTier?.limits?.reservations) {
|
2023-01-21 04:47:37 +01:00
|
|
|
submitAction = null;
|
|
|
|
banner = Banner.RESERVATIONS_WARNING;
|
2023-01-18 02:21:19 +01:00
|
|
|
}
|
|
|
|
|
2023-01-16 22:35:37 +01:00
|
|
|
const handleSubmit = async () => {
|
2023-01-21 04:47:37 +01:00
|
|
|
if (submitAction === Action.REDIRECT_SIGNUP) {
|
2023-01-16 22:35:37 +01:00
|
|
|
window.location.href = routes.signup;
|
2023-01-14 12:43:44 +01:00
|
|
|
return;
|
2023-01-09 21:40:46 +01:00
|
|
|
}
|
2023-05-23 21:13:01 +02:00
|
|
|
try {
|
2023-01-18 02:21:19 +01:00
|
|
|
setLoading(true);
|
2023-01-21 04:47:37 +01:00
|
|
|
if (submitAction === Action.CREATE_SUBSCRIPTION) {
|
2023-02-22 04:44:30 +01:00
|
|
|
const response = await accountApi.createBillingSubscription(newTierCode, interval);
|
2023-01-18 19:46:40 +01:00
|
|
|
window.location.href = response.redirect_url;
|
2023-01-21 04:47:37 +01:00
|
|
|
} else if (submitAction === Action.UPDATE_SUBSCRIPTION) {
|
2023-02-22 04:44:30 +01:00
|
|
|
await accountApi.updateBillingSubscription(newTierCode, interval);
|
2023-01-21 04:47:37 +01:00
|
|
|
} else if (submitAction === Action.CANCEL_SUBSCRIPTION) {
|
2023-01-16 05:29:46 +01:00
|
|
|
await accountApi.deleteBillingSubscription();
|
2023-05-23 21:13:01 +02: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-02-02 21:19:37 +01:00
|
|
|
if (e instanceof UnauthorizedError) {
|
2023-01-14 12:43:44 +01:00
|
|
|
session.resetAndRedirect(routes.login);
|
2023-05-23 21:13:01 +02:00
|
|
|
} else {
|
2023-02-02 21:19:37 +01:00
|
|
|
setError(e.message);
|
2023-05-23 21:13:01 +02:00
|
|
|
}
|
2023-01-18 02:21:19 +01:00
|
|
|
} finally {
|
|
|
|
setLoading(false);
|
2023-05-23 21:13:01 +02:00
|
|
|
}
|
|
|
|
};
|
2023-01-09 21:40:46 +01:00
|
|
|
|
2023-02-22 04:44:30 +01:00
|
|
|
// Figure out discount
|
2023-02-22 20:21:23 +01:00
|
|
|
let discount = 0;
|
|
|
|
let upto = false;
|
2023-02-22 04:44:30 +01:00
|
|
|
if (newTier?.prices) {
|
|
|
|
discount = Math.round(((newTier.prices.month * 12) / newTier.prices.year - 1) * 100);
|
|
|
|
} else {
|
2023-02-22 20:21:23 +01:00
|
|
|
let n = 0;
|
2023-05-24 10:20:15 +02:00
|
|
|
for (const tier of tiers) {
|
|
|
|
if (tier.prices) {
|
|
|
|
const tierDiscount = Math.round(((tier.prices.month * 12) / tier.prices.year - 1) * 100);
|
2023-02-22 20:21:23 +01:00
|
|
|
if (tierDiscount > discount) {
|
|
|
|
discount = tierDiscount;
|
2023-05-24 10:20:15 +02:00
|
|
|
n += 1;
|
2023-02-22 04:44:30 +01:00
|
|
|
}
|
2023-05-23 21:13:01 +02:00
|
|
|
}
|
2023-02-22 04:44:30 +01:00
|
|
|
}
|
2023-02-22 20:21:23 +01:00
|
|
|
upto = n > 1;
|
2023-05-23 21:13:01 +02:00
|
|
|
}
|
2023-02-22 04:44:30 +01:00
|
|
|
|
2023-01-09 21:40:46 +01:00
|
|
|
return (
|
2023-01-18 01:40:03 +01:00
|
|
|
<Dialog open={props.open} onClose={props.onCancel} maxWidth="lg" fullScreen={fullScreen}>
|
2023-02-22 04:44:30 +01:00
|
|
|
<DialogTitle>
|
|
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
|
|
<div style={{ flexGrow: 1 }}>{t("account_upgrade_dialog_title")}</div>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "row",
|
|
|
|
alignItems: "center",
|
|
|
|
marginTop: "4px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Typography component="span" variant="subtitle1">
|
2023-02-22 20:21:23 +01:00
|
|
|
{t("account_upgrade_dialog_interval_monthly")}
|
|
|
|
</Typography>
|
2023-05-23 21:13:01 +02:00
|
|
|
<Switch
|
2023-02-22 20:21:23 +01:00
|
|
|
checked={interval === SubscriptionInterval.YEAR}
|
|
|
|
onChange={(ev) => setInterval(ev.target.checked ? SubscriptionInterval.YEAR : SubscriptionInterval.MONTH)}
|
2023-01-17 16:09:37 +01:00
|
|
|
/>
|
2023-02-22 04:44:30 +01:00
|
|
|
<Typography component="span" variant="subtitle1">
|
|
|
|
{t("account_upgrade_dialog_interval_yearly")}
|
|
|
|
</Typography>
|
|
|
|
{discount > 0 && (
|
2023-05-23 21:13:01 +02:00
|
|
|
<Chip
|
2023-02-22 04:44:30 +01:00
|
|
|
label={
|
2023-05-23 21:13:01 +02:00
|
|
|
upto
|
2023-02-22 04:44:30 +01:00
|
|
|
? t("account_upgrade_dialog_interval_yearly_discount_save_up_to", { discount })
|
2023-01-18 01:40:03 +01:00
|
|
|
: t("account_upgrade_dialog_interval_yearly_discount_save", { discount })
|
2023-01-17 16:09:37 +01:00
|
|
|
}
|
2023-02-22 20:21:23 +01:00
|
|
|
color="primary"
|
|
|
|
size="small"
|
2023-01-21 04:47:37 +01:00
|
|
|
variant={interval === SubscriptionInterval.YEAR ? "filled" : "outlined"}
|
2023-02-22 20:21:23 +01:00
|
|
|
sx={{ marginLeft: "5px" }}
|
2023-05-23 21:13:01 +02:00
|
|
|
/>
|
|
|
|
)}
|
2023-01-09 21:40:46 +01:00
|
|
|
</div>
|
2023-05-23 21:13:01 +02:00
|
|
|
</div>
|
2023-02-22 04:44:30 +01:00
|
|
|
</DialogTitle>
|
2023-01-09 21:40:46 +01:00
|
|
|
<DialogContent>
|
2023-02-28 20:38:31 +01:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "row",
|
|
|
|
marginBottom: "8px",
|
2023-01-17 16:09:37 +01:00
|
|
|
width: "100%",
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
>
|
2023-01-17 16:09:37 +01:00
|
|
|
{tiers.map((tier) => (
|
|
|
|
<TierCard
|
2023-01-18 01:40:03 +01:00
|
|
|
key={`tierCard${tier.code || "_free"}`}
|
|
|
|
tier={tier}
|
2023-01-21 04:47:37 +01:00
|
|
|
current={currentTierCode === tier.code} // tier.code or currentTierCode may be undefined!
|
|
|
|
selected={newTierCode === tier.code} // tier.code may be undefined!
|
2023-02-22 04:44:30 +01:00
|
|
|
interval={interval}
|
2023-01-21 04:47:37 +01:00
|
|
|
onClick={() => setNewTierCode(tier.code)} // tier.code may be undefined!
|
2023-05-23 21:13:01 +02:00
|
|
|
/>
|
|
|
|
))}
|
2023-02-28 20:38:31 +01:00
|
|
|
</div>
|
|
|
|
{banner === Banner.CANCEL_WARNING && (
|
|
|
|
<Alert severity="warning" sx={{ fontSize: "1rem" }}>
|
2023-05-23 21:13:01 +02:00
|
|
|
<Trans
|
2023-01-21 04:47:37 +01:00
|
|
|
i18nKey="account_upgrade_dialog_cancel_warning"
|
2023-05-23 21:13:01 +02:00
|
|
|
values={{
|
2023-01-18 19:46:40 +01:00
|
|
|
date: formatShortDate(account?.billing?.paid_until || 0),
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Alert>
|
|
|
|
)}
|
2023-01-21 04:47:37 +01:00
|
|
|
{banner === Banner.PRORATION_INFO && (
|
2023-02-28 20:38:31 +01:00
|
|
|
<Alert severity="info" sx={{ fontSize: "1rem" }}>
|
2023-01-18 01:40:03 +01:00
|
|
|
<Trans i18nKey="account_upgrade_dialog_proration_info" />
|
2023-05-23 21:13:01 +02:00
|
|
|
</Alert>
|
|
|
|
)}
|
2023-01-21 04:47:37 +01:00
|
|
|
{banner === Banner.RESERVATIONS_WARNING && (
|
2023-02-22 04:44:30 +01:00
|
|
|
<Alert severity="warning" sx={{ fontSize: "1rem" }}>
|
2023-05-23 21:13:01 +02:00
|
|
|
<Trans
|
2023-01-21 04:47:37 +01:00
|
|
|
i18nKey="account_upgrade_dialog_reservations_warning"
|
2023-05-24 10:20:15 +02:00
|
|
|
count={(account?.reservations.length ?? 0) - (newTier?.limits.reservations ?? 0)}
|
2023-01-21 04:47:37 +01:00
|
|
|
components={{
|
2023-02-28 20:38:31 +01:00
|
|
|
Link: <NavLink to={routes.settings} />,
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Alert>
|
|
|
|
)}
|
2023-02-28 20:38:31 +01:00
|
|
|
</DialogContent>
|
2023-05-23 21:13:01 +02:00
|
|
|
<Box
|
|
|
|
sx={{
|
2023-02-28 20:38:31 +01:00
|
|
|
display: "flex",
|
2023-01-17 16:09:37 +01:00
|
|
|
flexDirection: "row",
|
2023-02-28 20:38:31 +01:00
|
|
|
justifyContent: "space-between",
|
|
|
|
paddingLeft: "24px",
|
2023-01-17 16:09:37 +01:00
|
|
|
paddingBottom: "8px",
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
>
|
2023-02-28 20:38:31 +01:00
|
|
|
<DialogContentText
|
|
|
|
component="div"
|
|
|
|
aria-live="polite"
|
|
|
|
sx={{
|
|
|
|
margin: "0px",
|
|
|
|
paddingTop: "12px",
|
|
|
|
paddingBottom: "4px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{config.billing_contact.indexOf("@") !== -1 && (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
i18nKey="account_upgrade_dialog_billing_contact_email"
|
|
|
|
components={{
|
|
|
|
Link: <Link href={`mailto:${config.billing_contact}`} />,
|
|
|
|
}}
|
|
|
|
/>{" "}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{config.billing_contact.match(`^http?s://`) && (
|
|
|
|
<>
|
|
|
|
<Trans
|
|
|
|
i18nKey="account_upgrade_dialog_billing_contact_website"
|
|
|
|
components={{
|
|
|
|
Link: <Link href={config.billing_contact} target="_blank" />,
|
|
|
|
}}
|
|
|
|
/>{" "}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{error}
|
|
|
|
</DialogContentText>
|
|
|
|
<DialogActions sx={{ paddingRight: 2 }}>
|
|
|
|
<Button onClick={props.onCancel}>{t("account_upgrade_dialog_button_cancel")}</Button>
|
|
|
|
<Button onClick={handleSubmit} disabled={!submitAction}>
|
|
|
|
{submitButtonLabel}
|
2023-05-23 21:13:01 +02:00
|
|
|
</Button>
|
2023-02-28 20:38:31 +01:00
|
|
|
</DialogActions>
|
|
|
|
</Box>
|
2023-01-09 21:40:46 +01:00
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-01-14 12:43:44 +01:00
|
|
|
const TierCard = (props) => {
|
2023-01-18 01:40:03 +01:00
|
|
|
const { t } = useTranslation();
|
|
|
|
const { tier } = props;
|
2023-02-22 04:44:30 +01:00
|
|
|
|
2023-01-21 04:47:37 +01:00
|
|
|
let cardStyle;
|
|
|
|
let labelStyle;
|
|
|
|
let labelText;
|
|
|
|
if (props.selected) {
|
2023-02-22 04:44:30 +01:00
|
|
|
cardStyle = { background: "#eee", border: "3px solid #338574" };
|
2023-01-21 04:47:37 +01:00
|
|
|
labelStyle = { background: "#338574", color: "white" };
|
|
|
|
labelText = t("account_upgrade_dialog_tier_selected_label");
|
|
|
|
} else if (props.current) {
|
2023-02-22 04:44:30 +01:00
|
|
|
cardStyle = { border: "3px solid #eee" };
|
2023-01-21 04:47:37 +01:00
|
|
|
labelStyle = { background: "#eee", color: "black" };
|
|
|
|
labelText = t("account_upgrade_dialog_tier_current_label");
|
|
|
|
} else {
|
2023-02-22 04:44:30 +01:00
|
|
|
cardStyle = { border: "3px solid transparent" };
|
|
|
|
}
|
|
|
|
|
|
|
|
let monthlyPrice;
|
|
|
|
if (!tier.prices) {
|
2023-01-18 19:46:40 +01:00
|
|
|
monthlyPrice = 0;
|
2023-01-18 02:21:19 +01:00
|
|
|
} else if (props.interval === SubscriptionInterval.YEAR) {
|
2023-02-22 04:44:30 +01:00
|
|
|
monthlyPrice = tier.prices.year / 12;
|
|
|
|
} else if (props.interval === SubscriptionInterval.MONTH) {
|
|
|
|
monthlyPrice = tier.prices.month;
|
2023-01-18 02:21:19 +01:00
|
|
|
}
|
|
|
|
|
2023-05-23 21:13:01 +02:00
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
sx={{
|
2023-01-18 02:21:19 +01:00
|
|
|
m: "7px",
|
2023-02-22 04:44:30 +01:00
|
|
|
minWidth: "240px",
|
2023-01-18 01:40:03 +01:00
|
|
|
flexGrow: 1,
|
|
|
|
flexShrink: 1,
|
|
|
|
flexBasis: 0,
|
2023-02-22 04:44:30 +01:00
|
|
|
borderRadius: "5px",
|
2023-01-18 19:46:40 +01:00
|
|
|
"&:first-of-type": { ml: 0 },
|
|
|
|
"&:last-of-type": { mr: 0 },
|
2023-01-17 16:09:37 +01:00
|
|
|
...cardStyle,
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
>
|
2023-01-18 02:21:19 +01:00
|
|
|
<Card sx={{ height: "100%" }}>
|
|
|
|
<CardActionArea sx={{ height: "100%" }}>
|
|
|
|
<CardContent onClick={props.onClick} sx={{ height: "100%" }}>
|
2023-01-21 04:47:37 +01:00
|
|
|
{labelStyle && (
|
2023-05-23 21:13:01 +02:00
|
|
|
<div
|
|
|
|
style={{
|
2023-01-18 02:21:19 +01:00
|
|
|
position: "absolute",
|
|
|
|
top: "0",
|
|
|
|
right: "15px",
|
|
|
|
padding: "2px 10px",
|
|
|
|
borderRadius: "3px",
|
2023-01-21 04:47:37 +01:00
|
|
|
...labelStyle,
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
>
|
2023-01-21 04:47:37 +01:00
|
|
|
{labelText}
|
2023-05-23 21:13:01 +02:00
|
|
|
</div>
|
|
|
|
)}
|
2023-02-22 04:44:30 +01:00
|
|
|
<Typography variant="subtitle1" component="div">
|
2023-02-09 21:24:12 +01:00
|
|
|
{tier.name || t("account_basics_tier_free")}
|
2023-01-18 01:40:03 +01:00
|
|
|
</Typography>
|
2023-05-23 21:13:01 +02:00
|
|
|
<div>
|
2023-02-22 04:44:30 +01:00
|
|
|
<Typography component="span" variant="h4" sx={{ fontWeight: 500, marginRight: "3px" }}>
|
|
|
|
{formatPrice(monthlyPrice)}
|
2023-01-18 01:40:03 +01:00
|
|
|
</Typography>
|
2023-02-22 04:44:30 +01:00
|
|
|
{monthlyPrice > 0 && <>/ {t("account_upgrade_dialog_tier_price_per_month")}</>}
|
2023-05-23 21:13:01 +02:00
|
|
|
</div>
|
2023-01-18 02:21:19 +01:00
|
|
|
<List dense>
|
2023-03-21 08:49:02 +01:00
|
|
|
{tier.limits.reservations > 0 && (
|
2023-02-22 04:44:30 +01:00
|
|
|
<Feature>
|
2023-03-21 08:49:02 +01:00
|
|
|
{t("account_upgrade_dialog_tier_features_reservations", {
|
|
|
|
reservations: tier.limits.reservations,
|
|
|
|
count: tier.limits.reservations,
|
2023-05-23 21:13:01 +02:00
|
|
|
})}
|
2023-02-22 04:44:30 +01:00
|
|
|
</Feature>
|
2023-05-23 21:13:01 +02:00
|
|
|
)}
|
2023-02-22 04:44:30 +01:00
|
|
|
<Feature>
|
2023-03-21 08:49:02 +01:00
|
|
|
{t("account_upgrade_dialog_tier_features_messages", {
|
|
|
|
messages: formatNumber(tier.limits.messages),
|
|
|
|
count: tier.limits.messages,
|
2023-05-23 21:13:01 +02:00
|
|
|
})}
|
2023-02-22 04:44:30 +01:00
|
|
|
</Feature>
|
|
|
|
<Feature>
|
2023-03-21 08:49:02 +01:00
|
|
|
{t("account_upgrade_dialog_tier_features_emails", {
|
|
|
|
emails: formatNumber(tier.limits.emails),
|
|
|
|
count: tier.limits.emails,
|
2023-05-23 21:13:01 +02:00
|
|
|
})}
|
2023-02-22 04:44:30 +01:00
|
|
|
</Feature>
|
2023-05-08 04:28:07 +02:00
|
|
|
{tier.limits.calls > 0 && (
|
2023-02-22 04:44:30 +01:00
|
|
|
<Feature>
|
2023-05-08 04:28:07 +02:00
|
|
|
{t("account_upgrade_dialog_tier_features_calls", {
|
|
|
|
calls: formatNumber(tier.limits.calls),
|
|
|
|
count: tier.limits.calls,
|
2023-05-23 21:13:01 +02:00
|
|
|
})}
|
2023-02-22 04:44:30 +01:00
|
|
|
</Feature>
|
2023-05-23 21:13:01 +02:00
|
|
|
)}
|
2023-02-22 04:44:30 +01:00
|
|
|
<Feature>
|
|
|
|
{t("account_upgrade_dialog_tier_features_attachment_file_size", {
|
|
|
|
filesize: formatBytes(tier.limits.attachment_file_size, 0),
|
|
|
|
})}
|
|
|
|
</Feature>
|
2023-05-08 04:28:07 +02:00
|
|
|
{tier.limits.reservations === 0 && <NoFeature>{t("account_upgrade_dialog_tier_features_no_reservations")}</NoFeature>}
|
|
|
|
{tier.limits.calls === 0 && <NoFeature>{t("account_upgrade_dialog_tier_features_no_calls")}</NoFeature>}
|
2023-05-23 21:13:01 +02:00
|
|
|
</List>
|
2023-02-22 04:44:30 +01:00
|
|
|
{tier.prices && props.interval === SubscriptionInterval.MONTH && (
|
|
|
|
<Typography variant="body2" color="gray">
|
|
|
|
{t("account_upgrade_dialog_tier_price_billed_monthly", {
|
|
|
|
price: formatPrice(tier.prices.month * 12),
|
2023-05-23 21:13:01 +02:00
|
|
|
})}
|
2023-01-18 01:40:03 +01:00
|
|
|
</Typography>
|
2023-05-23 21:13:01 +02:00
|
|
|
)}
|
2023-02-22 04:44:30 +01:00
|
|
|
{tier.prices && props.interval === SubscriptionInterval.YEAR && (
|
|
|
|
<Typography variant="body2" color="gray">
|
|
|
|
{t("account_upgrade_dialog_tier_price_billed_yearly", {
|
|
|
|
price: formatPrice(tier.prices.year),
|
|
|
|
save: formatPrice(tier.prices.month * 12 - tier.prices.year),
|
2023-05-23 21:13:01 +02:00
|
|
|
})}
|
2023-01-18 01:40:03 +01:00
|
|
|
</Typography>
|
2023-05-23 21:13:01 +02:00
|
|
|
)}
|
2023-01-18 02:21:19 +01:00
|
|
|
</CardContent>
|
|
|
|
</CardActionArea>
|
2023-05-23 21:13:01 +02:00
|
|
|
</Card>
|
|
|
|
</Box>
|
2023-01-14 12:43:44 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-01-09 21:40:46 +01:00
|
|
|
export default UpgradeDialog;
|