import { useState } from "react"; import { useLocale } from "@lib/hooks/useLocale"; import showToast from "@lib/notification"; import { trpc } from "@lib/trpc"; import { Dialog, DialogTrigger, DialogContent, DialogClose, DialogFooter, DialogHeader, } from "@components/Dialog"; import { Alert } from "@components/ui/Alert"; import Button from "@components/ui/Button"; interface Props { teamId: number; } export function UpgradeToFlexibleProModal(props: Props) { const { t } = useLocale(); const [errorMessage, setErrorMessage] = useState(null); const utils = trpc.useContext(); const { data } = trpc.useQuery(["viewer.teams.getTeamSeats", { teamId: props.teamId }], { onError: (err) => { setErrorMessage(err.message); }, }); const mutation = trpc.useMutation(["viewer.teams.upgradeTeam"], { onSuccess: (data) => { // if the user does not already have a Stripe subscription, this wi if (data?.url) { window.location.href = data.url; } if (data?.success) { utils.invalidateQueries(["viewer.teams.get"]); showToast(t("team_upgraded_successfully"), "success"); } }, onError: (err) => { setErrorMessage(err.message); }, }); return ( { setErrorMessage(null); }}> {"Upgrade Now"}

{t("changed_team_billing_info")}

{data && (

{t("team_upgrade_seats_details", { memberCount: data.totalMembers, unpaidCount: data.missingSeats, seatPrice: 12, totalCost: (data.totalMembers - data.freeSeats) * 12 + 12, })}

)} {errorMessage && ( )}
); }