import { UsersIcon } from "@heroicons/react/outline"; import { useRef, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui"; import { Alert } from "@calcom/ui/Alert"; import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; import { trpc } from "@lib/trpc"; interface Props { isOpen: boolean; onClose: () => void; } export default function TeamCreate(props: Props) { const { t } = useLocale(); const utils = trpc.useContext(); const [errorMessage, setErrorMessage] = useState(null); const nameRef = useRef() as React.MutableRefObject; const createTeamMutation = trpc.useMutation("viewer.teams.create", { onSuccess: () => { utils.invalidateQueries(["viewer.teams.list"]); props.onClose(); }, onError: (e) => { setErrorMessage(e?.message || t("something_went_wrong")); }, }); const createTeam = (e: React.FormEvent) => { e.preventDefault(); createTeamMutation.mutate({ name: nameRef?.current?.value }); }; return ( <>

{t("create_new_team_description")}

{errorMessage && }
); }