import { MembershipRole } from "@prisma/client"; import Link from "next/link"; import { useRouter } from "next/router"; import classNames from "@calcom/lib/classNames"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import { Avatar, Button, ButtonGroup, ConfirmationDialogContent, Dialog, DialogTrigger, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon, showToast, Tooltip, } from "@calcom/ui"; import { TeamRole } from "./TeamPill"; interface Props { team: RouterOutputs["viewer"]["teams"]["list"][number]; key: number; onActionSelect: (text: string) => void; isLoading?: boolean; hideDropdown: boolean; setHideDropdown: (value: boolean) => void; } export default function TeamListItem(props: Props) { const { t } = useLocale(); const utils = trpc.useContext(); const team = props.team; const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({ onSuccess: () => { utils.viewer.teams.list.invalidate(); }, }); 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; const { hideDropdown, setHideDropdown } = props; if (!team) return <>; const teamInfo = (
{team.name} {team.slug ? `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}` : "Unpublished team"}
); return (
  • {!isInvitee ? ( {teamInfo} ) : ( teamInfo )}
    {isInvitee ? ( <>
    ) : (
    {team.slug && ( { props.onActionSelect("disband"); }}> {t("disband_team_confirmation_message")} )} {!isOwner && ( {t("leave_team_confirmation_message")} )}
    )}
  • ); } const TeamPublishButton = ({ teamId }: { teamId: number }) => { const { t } = useLocale(); const router = useRouter(); const publishTeamMutation = trpc.viewer.teams.publish.useMutation({ onSuccess(data) { router.push(data.url); }, onError: (error) => { showToast(error.message, "error"); }, }); return ( { publishTeamMutation.mutate({ teamId }); }} StartIcon={Icon.FiGlobe}> {t("team_publish")} ); };