import { zodResolver } from "@hookform/resolvers/zod"; import type { Prisma } from "@prisma/client"; import { useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; import { useState, useLayoutEffect } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import { getOrgFullDomain } from "@calcom/features/ee/organizations/lib/orgDomains"; import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { md } from "@calcom/lib/markdownIt"; import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; import objectKeys from "@calcom/lib/objectKeys"; import turndown from "@calcom/lib/turndownService"; import { MembershipRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import { SkeletonContainer, SkeletonText } from "@calcom/ui"; import { Avatar, Button, ConfirmationDialogContent, Dialog, DialogTrigger, Form, ImageUploader, Label, LinkIconButton, Meta, showToast, TextField, Editor, } from "@calcom/ui"; import { ExternalLink, Link as LinkIcon, Trash2, LogOut } from "@calcom/ui/components/icon"; import { getLayout } from "../../../settings/layouts/SettingsLayout"; const regex = new RegExp("^[a-zA-Z0-9-]*$"); const teamProfileFormSchema = z.object({ name: z.string(), slug: z .string() .regex(regex, { message: "Url can only have alphanumeric characters(a-z, 0-9) and hyphen(-) symbol.", }) .min(1, { message: "Url cannot be left empty" }), logo: z.string(), bio: z.string(), }); const ProfileView = () => { const { t } = useLocale(); const router = useRouter(); const utils = trpc.useContext(); const session = useSession(); const [firstRender, setFirstRender] = useState(true); const orgBranding = useOrgBranding(); useLayoutEffect(() => { document.body.focus(); }, []); const mutation = trpc.viewer.teams.update.useMutation({ onError: (err) => { showToast(err.message, "error"); }, async onSuccess() { await utils.viewer.teams.get.invalidate(); showToast(t("your_team_updated_successfully"), "success"); }, }); const form = useForm({ resolver: zodResolver(teamProfileFormSchema), }); const { data: team, isLoading } = trpc.viewer.teams.get.useQuery( { teamId: Number(router.query.id) }, { enabled: !!router.query.id, onError: () => { router.push("/settings"); }, onSuccess: (team) => { if (team) { form.setValue("name", team.name || ""); form.setValue("slug", team.slug || ""); form.setValue("logo", team.logo || ""); form.setValue("bio", team.bio || ""); if (team.slug === null && (team?.metadata as Prisma.JsonObject)?.requestedSlug) { form.setValue("slug", ((team?.metadata as Prisma.JsonObject)?.requestedSlug as string) || ""); } } }, } ); const isAdmin = team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); const permalink = `${WEBAPP_URL}/team/${team?.slug}`; const isBioEmpty = !team || !team.bio || !team.bio.replace("
{team?.name}