import { UserRemoveIcon, PencilIcon } from "@heroicons/react/outline"; import { ClockIcon, ExternalLinkIcon, DotsHorizontalIcon } from "@heroicons/react/solid"; import { MembershipRole } from "@prisma/client"; import Link from "next/link"; import React, { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import Button from "@calcom/ui/Button"; import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@calcom/ui/Dropdown"; import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal"; import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { trpc, inferQueryOutput } from "@lib/trpc"; import { Tooltip } from "@components/Tooltip"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; 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]; } export default function MemberListItem(props: Props) { const { t } = useLocale(); const utils = trpc.useContext(); const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false); const [showTeamAvailabilityModal, setShowTeamAvailabilityModal] = 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 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.team.membership.role === MembershipRole.ADMIN) && ( <> {t("remove_member_confirmation_message")} )}
    {showChangeMemberRoleModal && ( setShowChangeMemberRoleModal(false)} /> )} {showTeamAvailabilityModal && ( setShowTeamAvailabilityModal(false)}>
    {props.team.membership.role !== MembershipRole.MEMBER && ( )}
    )}
  • ); }