import { ClockIcon, ExternalLinkIcon, LinkIcon, LogoutIcon, TrashIcon } from "@heroicons/react/solid"; import { MembershipRole } from "@prisma/client"; import Link from "next/link"; import { useRouter } from "next/router"; import React from "react"; import showToast from "@calcom/lib/notification"; import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; import { useLocale } from "@lib/hooks/useLocale"; import { TeamWithMembers } from "@lib/queries/teams"; import { trpc } from "@lib/trpc"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import CreateEventTypeButton from "@components/eventtype/CreateEventType"; import LinkIconButton from "@components/ui/LinkIconButton"; export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers; role: MembershipRole }) { const { t } = useLocale(); const utils = trpc.useContext(); const router = useRouter(); const permalink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${props.team?.slug}`; const deleteTeamMutation = trpc.useMutation("viewer.teams.delete", { async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); router.push(`/settings/teams`); showToast(t("your_team_updated_successfully"), "success"); }, }); const acceptOrLeaveMutation = trpc.useMutation("viewer.teams.acceptOrLeave", { onSuccess: () => { utils.invalidateQueries(["viewer.teams.list"]); router.push(`/settings/teams`); }, }); function deleteTeam() { if (props.team?.id) deleteTeamMutation.mutate({ teamId: props.team.id }); } function leaveTeam() { if (props.team?.id) acceptOrLeaveMutation.mutate({ teamId: props.team.id, accept: false, }); } return (
{(props.role === MembershipRole.OWNER || props.role === MembershipRole.ADMIN) && ( )}
{t("preview")} { navigator.clipboard.writeText(permalink); showToast("Copied to clipboard", "success"); }}> {t("copy_link_team")} {props.role === "OWNER" ? ( { e.stopPropagation(); }} Icon={TrashIcon}> {t("disband_team")} {t("disband_team_confirmation_message")} ) : ( { e.stopPropagation(); }}> {t("leave_team")} {t("leave_team_confirmation_message")} )}
{props.team?.id && props.role !== MembershipRole.MEMBER && (
{"View Availability"}

See your team members availability at a glance.

)}
); }