import { MembershipRole } from "@prisma/client"; import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Meta, showToast } from "@calcom/ui"; import { FiPlus } from "@calcom/ui/components/icon"; import { getLayout } from "../../../settings/layouts/SettingsLayout"; import DisableTeamImpersonation from "../components/DisableTeamImpersonation"; import MemberInvitationModal from "../components/MemberInvitationModal"; import MemberListItem from "../components/MemberListItem"; import TeamInviteList from "../components/TeamInviteList"; const MembersView = () => { const { t, i18n } = useLocale(); const router = useRouter(); const session = useSession(); const utils = trpc.useContext(); const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false); const teamId = Number(router.query.id); const { data: team, isLoading } = trpc.viewer.teams.get.useQuery( { teamId }, { onError: () => { router.push("/settings"); }, } ); const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({ async onSuccess() { await utils.viewer.teams.get.invalidate(); setShowMemberInvitationModal(false); }, onError: (error) => { showToast(error.message, "error"); }, }); const isInviteOpen = !team?.membership.accepted; const isAdmin = team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); return ( <> setShowMemberInvitationModal(true)} data-testid="new-member-button"> {t("add")} ) : ( <> ) } /> {!isLoading && ( <>
{team && ( <> {isInviteOpen && ( )} )}
    {team?.members.map((member) => { return ; })}

{team && session.data && ( )}
{showMemberInvitationModal && team && ( setShowMemberInvitationModal(false)} onSubmit={(values) => { inviteMemberMutation.mutate({ teamId, language: i18n.language, role: values.role, usernameOrEmail: values.emailOrUsername, sendEmailInvitation: values.sendInviteEmail, }); }} /> )} )} ); }; MembersView.getLayout = getLayout; export default MembersView;