import Link from "next/link"; import { useRouter } from "next/router"; import { useState } from "react"; import MemberInvitationModal from "@calcom/ee/teams/components/MemberInvitationModal"; import classNames from "@calcom/lib/classNames"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { MembershipRole } from "@calcom/prisma/enums"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import { Avatar, Button, ButtonGroup, ConfirmationDialogContent, Dialog, DialogTrigger, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, showToast, Tooltip, } from "@calcom/ui"; import { MoreHorizontal, Check, X, Link as LinkIcon, Edit2, ExternalLink, Trash, LogOut, Globe, Send, } from "@calcom/ui/components/icon"; 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, i18n } = useLocale(); const utils = trpc.useContext(); const team = props.team; const router = useRouter(); const showDialog = router.query.inviteModal === "true"; const [openMemberInvitationModal, setOpenMemberInvitationModal] = useState(showDialog); const teamQuery = trpc.viewer.teams.get.useQuery({ teamId: team?.id }); const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({ async onSuccess(data) { await utils.viewer.teams.get.invalidate(); setOpenMemberInvitationModal(false); if (data.sendEmailInvitation) { if (Array.isArray(data.usernameOrEmail)) { showToast( t("email_invite_team_bulk", { userCount: data.usernameOrEmail.length, }), "success" ); } else { showToast( t("email_invite_team", { email: data.usernameOrEmail, }), "success" ); } } }, onError: (error) => { showToast(error.message, "error"); }, }); const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({ onSuccess: () => { utils.viewer.teams.list.invalidate(); utils.viewer.teams.listInvites.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 (
  • { setOpenMemberInvitationModal(false); }} onSubmit={(values) => { inviteMemberMutation.mutate({ teamId: team.id, language: i18n.language, role: values.role, usernameOrEmail: values.emailOrUsername, sendEmailInvitation: values.sendInviteEmail, }); }} members={teamQuery?.data?.members || []} />
    {!isInvitee ? ( {teamInfo} ) : ( teamInfo )}
    {isInvitee ? ( <>
    ) : (
    {team.slug && (
    )}
  • ); } 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={Globe}> {t("team_publish")} ); };