import { useState } from "react"; import showToast from "@calcom/lib/notification"; import { trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { Dialog, DialogTrigger, DialogContent, DialogClose, DialogFooter, DialogHeader, } from "@calcom/ui/Dialog"; import { useLocale } from "@lib/hooks/useLocale"; 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 && ( )}
); }