import { MembershipRole } from "@prisma/client"; import { useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import objectKeys from "@calcom/lib/objectKeys"; import { trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui"; import { Avatar, Button, Label, TextArea, Form, TextField } from "@calcom/ui/components"; import { Dialog, DialogTrigger, LinkIconButton, showToast } from "@calcom/ui/v2/core"; import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent"; import ImageUploader from "@calcom/ui/v2/core/ImageUploader"; import Meta from "@calcom/ui/v2/core/Meta"; import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout"; interface TeamProfileValues { name: string; url: string; logo: string; bio: string; } const ProfileView = () => { const { t } = useLocale(); const router = useRouter(); const utils = trpc.useContext(); const session = useSession(); const mutation = trpc.useMutation("viewer.teams.update", { onError: (err) => { showToast(err.message, "error"); }, async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); showToast(t("your_team_updated_successfully"), "success"); }, }); const form = useForm(); const { data: team, isLoading } = trpc.useQuery(["viewer.teams.get", { teamId: Number(router.query.id) }], { onError: () => { router.push("/settings"); }, onSuccess: (team) => { if (team) { form.setValue("name", team.name || ""); form.setValue("url", team.slug || ""); form.setValue("logo", team.logo || ""); form.setValue("bio", team.bio || ""); } }, }); const isAdmin = team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); const permalink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team?.slug}`; const deleteTeamMutation = trpc.useMutation("viewer.teams.delete", { async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); await utils.invalidateQueries(["viewer.teams.list"]); router.push(`/settings`); showToast(t("your_team_updated_successfully"), "success"); }, }); const removeMemberMutation = trpc.useMutation("viewer.teams.removeMember", { async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); await utils.invalidateQueries(["viewer.teams.list"]); showToast(t("success"), "success"); }, async onError(err) { showToast(err.message, "error"); }, }); function deleteTeam() { if (team?.id) deleteTeamMutation.mutate({ teamId: team.id }); } function leaveTeam() { if (team?.id && session.data) removeMemberMutation.mutate({ teamId: team.id, memberId: session.data.user.id, }); } return ( <> {!isLoading && ( <> {isAdmin ? (
{ if (team) { const variables = { logo: values.logo, name: values.name, slug: values.url, bio: values.bio, }; objectKeys(variables).forEach((key) => { if (variables[key as keyof typeof variables] === team?.[key]) delete variables[key]; }); mutation.mutate({ id: team.id, ...variables }); } }}>
( <>
{ form.setValue("logo", newLogo); }} imageSrc={value} />
)} />

(
{ form.setValue("name", e?.target.value); }} />
)} /> (
{ form.setValue("url", e?.target.value); }} />
)} /> (