import { MembershipRole } from "@prisma/client"; import React, { useState, SyntheticEvent, useMemo } from "react"; import { TeamWithMembers } from "@calcom/lib/server/queries/teams"; import { trpc } from "@calcom/trpc/react"; import Button from "@calcom/ui/Button"; import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; import { TextField } from "@calcom/ui/form/fields"; import { useLocale } from "@lib/hooks/useLocale"; import Select from "@components/ui/form/Select"; type MemberInvitationModalProps = { isOpen: boolean; team: TeamWithMembers | null; currentMember: MembershipRole; onExit: () => void; }; type MembershipRoleOption = { value: MembershipRole; label?: string; }; const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }]; export default function MemberInvitationModal(props: MemberInvitationModalProps) { const [errorMessage, setErrorMessage] = useState(""); const { t, i18n } = useLocale(); const utils = trpc.useContext(); const options = useMemo(() => { _options.forEach((option, i) => { _options[i].label = t(option.value.toLowerCase()); }); return _options; }, [t]); const inviteMemberMutation = trpc.useMutation("viewer.teams.inviteMember", { async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); props.onExit(); }, async onError(err) { setErrorMessage(err.message); }, }); function inviteMember(e: SyntheticEvent) { e.preventDefault(); if (!props.team) return; const target = e.target as typeof e.target & { elements: { role: { value: MembershipRole }; inviteUser: { value: string }; sendInviteEmail: { checked: boolean }; }; }; inviteMemberMutation.mutate({ teamId: props.team.id, language: i18n.language, role: target.elements["role"].value, usernameOrEmail: target.elements["inviteUser"].value, sendEmailInvitation: target.elements["sendInviteEmail"].checked, }); } return (

{t("invite_new_team_member")}

{errorMessage && (

Error: {errorMessage}

)}
); }