import { MembershipRole } from "@prisma/client"; import classNames from "classnames"; import { signIn } from "next-auth/react"; import { useState } from "react"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import { Avatar, Button, ButtonGroup, ConfirmationDialogContent, Dialog, DialogClose, DialogContent, DialogFooter, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon, showToast, Tooltip, } from "@calcom/ui"; import MemberChangeRoleModal from "./MemberChangeRoleModal"; import TeamPill, { TeamRole } from "./TeamPill"; import TeamAvailabilityModal from "./v2/TeamAvailabilityModal"; interface Props { team: RouterOutputs["viewer"]["teams"]["get"]; member: RouterOutputs["viewer"]["teams"]["get"]["members"][number]; } /** TODO: Migrate the one in apps/web to tRPC package */ const useCurrentUserId = () => { const query = useMeQuery(); const user = query.data; return user?.id; }; export default function MemberListItem(props: Props) { const { t } = useLocale(); const utils = trpc.useContext(); const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false); const [showTeamAvailabilityModal, setShowTeamAvailabilityModal] = useState(false); const [showImpersonateModal, setShowImpersonateModal] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false); const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({ async onSuccess() { await utils.viewer.teams.get.invalidate(); showToast(t("success"), "success"); }, async onError(err) { showToast(err.message, "error"); }, }); const ownersInTeam = () => { const { members } = props.team; const owners = members.filter((member) => member["role"] === MembershipRole.OWNER && member["accepted"]); return owners.length; }; const currentUserId = useCurrentUserId(); const name = props.member.name || (() => { const emailName = props.member.email.split("@")[0]; return emailName.charAt(0).toUpperCase() + emailName.slice(1); })(); const removeMember = () => removeMemberMutation.mutate({ teamId: props.team?.id, memberId: props.member.id }); const editMode = (props.team.membership.role === MembershipRole.OWNER && (props.member.role !== MembershipRole.OWNER || ownersInTeam() > 1 || props.member.id !== currentUserId)) || (props.team.membership.role === MembershipRole.ADMIN && props.member.role !== MembershipRole.OWNER); const impersonationMode = editMode && !props.member.disableImpersonation && props.member.accepted && process.env.NEXT_PUBLIC_TEAM_IMPERSONATION === "true"; return (
  • {name} {!props.member.accepted && } {props.member.role && }
    {props.member.email}
    {props.team.membership.accepted && (
    )}
    {editMode && ( setShowDeleteModal(false)}> {t("remove_member_confirmation_message")} )} {showImpersonateModal && props.member.username && ( setShowImpersonateModal(false)}>
    { e.preventDefault(); await signIn("impersonation-auth", { username: props.member.username, teamId: props.team.id, }); setShowImpersonateModal(false); }}> {t("cancel")}
    )} {showChangeMemberRoleModal && ( setShowChangeMemberRoleModal(false)} /> )} {showTeamAvailabilityModal && ( setShowTeamAvailabilityModal(false)}> )}
  • ); }