import { LogoutIcon } from "@heroicons/react/outline"; import { DotsHorizontalIcon, ExternalLinkIcon, LinkIcon, PencilIcon, TrashIcon, } from "@heroicons/react/solid"; import { MembershipRole } from "@prisma/client"; import Link from "next/link"; 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 { Tooltip } from "@calcom/ui/Tooltip"; import classNames from "@lib/classNames"; import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { inferQueryOutput, trpc } from "@lib/trpc"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import Avatar from "@components/ui/Avatar"; import { TeamRole } from "./TeamPill"; interface Props { team: inferQueryOutput<"viewer.teams.list">[number]; key: number; onActionSelect: (text: string) => void; isLoading?: boolean; } export default function TeamListItem(props: Props) { const { t } = useLocale(); const utils = trpc.useContext(); const team = props.team; const acceptOrLeaveMutation = trpc.useMutation("viewer.teams.acceptOrLeave", { onSuccess: () => { utils.invalidateQueries(["viewer.teams.list"]); }, }); function acceptOrLeave(accept: boolean) { acceptOrLeaveMutation.mutate({ teamId: team?.id as number, accept, }); } const acceptInvite = () => acceptOrLeave(true); const declineInvite = () => acceptOrLeave(false); const isOwner = props.team.role === MembershipRole.OWNER; const isInvitee = !props.team.accepted; const isAdmin = props.team.role === MembershipRole.OWNER || props.team.role === MembershipRole.ADMIN; if (!team) return <>; const teamInfo = (
{team.name} {process.env.NEXT_PUBLIC_WEBSITE_URL}/team/{team.slug}
); return (
  • {!isInvitee ? ( {teamInfo} ) : ( teamInfo )}
    {isInvitee && ( <> )} {!isInvitee && (
    {isAdmin && ( )} {isOwner && ( { props.onActionSelect("disband"); }}> {t("disband_team_confirmation_message")} )} {!isOwner && ( {t("leave_team_confirmation_message")} )}
    )}
  • ); }