import { MembershipRole } from "@prisma/client"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useState } from "react"; import TeamAvailabilityModal from "@calcom/features/ee/teams/components/TeamAvailabilityModal"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import Button from "@calcom/ui/Button"; import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@calcom/ui/Dropdown"; import { Icon } from "@calcom/ui/Icon"; import { Tooltip } from "@calcom/ui/Tooltip"; import showToast from "@calcom/ui/v2/core/notifications"; import useCurrentUserId from "@lib/hooks/useCurrentUserId"; import Avatar from "@components/ui/Avatar"; import ModalContainer from "@components/ui/ModalContainer"; import MemberChangeRoleModal from "./MemberChangeRoleModal"; import TeamPill, { TeamRole } from "./TeamPill"; interface Props { team: inferQueryOutput<"viewer.teams.get">; member: inferQueryOutput<"viewer.teams.get">["members"][number]; } /** @deprecated Use `packages/features/ee/teams/components/MemberListItem.tsx` */ 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 removeMemberMutation = trpc.useMutation("viewer.teams.removeMember", { async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); 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 }); return (
  • {name} {props.member.email}
    {/* Tooltip doesn't show... WHY????? */} {props.member.isMissingSeat && ( )} {!props.member.accepted && } {props.member.role && }
    {((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)) && ( <> {/* Only show impersonate box if - The user has impersonation enabled, They have accepted the team invite, and it is enabled for this instance */} {!props.member.disableImpersonation && props.member.accepted && process.env.NEXT_PUBLIC_TEAM_IMPERSONATION === "true" && ( <> )} {t("remove_member_confirmation_message")} )}
    {showChangeMemberRoleModal && ( setShowChangeMemberRoleModal(false)} /> )} {showImpersonateModal && props.member.username && ( setShowImpersonateModal(false)}> <>
    { e.preventDefault(); await signIn("impersonation-auth", { username: props.member.username, teamId: props.team.id, }); }}>

    {t("impersonate_user_tip")}

    )} {showTeamAvailabilityModal && ( setShowTeamAvailabilityModal(false)}>
    {props.team.membership.role !== MembershipRole.MEMBER && ( )}
    )}
  • ); }