import classNames from "classnames"; import MarkdownIt from "markdown-it"; import { GetServerSidePropsContext } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect } from "react"; import { useIsEmbed } from "@calcom/embed-core/embed-iframe"; import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription"; import { CAL_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { getTeamWithMembers } from "@calcom/lib/server/queries/teams"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { Avatar, Button, HeadSeo, AvatarGroup } from "@calcom/ui"; import { FiArrowRight } from "@calcom/ui/components/icon"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import Team from "@components/team/screens/Team"; import { ssrInit } from "@server/lib/ssr"; const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true }); export type TeamPageProps = inferSSRProps; function TeamPage({ team }: TeamPageProps) { useTheme(team.theme); const showMembers = useToggleQuery("members"); const { t } = useLocale(); const isEmbed = useIsEmbed(); const telemetry = useTelemetry(); const router = useRouter(); useEffect(() => { telemetry.event( telemetryEventTypes.pageView, collectPageParameters("/team/[slug]", { isTeamBooking: true }) ); }, [telemetry, router.asPath]); const EventTypes = () => ( ); const teamName = team.name || "Nameless Team"; const isBioEmpty = !team.bio || !team.bio.replace("


", "").length; return (

{teamName}

{!isBioEmpty && ( <>
)}
{(showMembers.isOn || !team.eventTypes.length) && } {!showMembers.isOn && team.eventTypes.length > 0 && (
{!team.hideBookATeamMember && (
)}
)}
); } export const getServerSideProps = async (context: GetServerSidePropsContext) => { const ssr = await ssrInit(context); const slug = Array.isArray(context.query?.slug) ? context.query.slug.pop() : context.query.slug; const team = await getTeamWithMembers(undefined, slug); if (!team) return { notFound: true } as { notFound: true }; team.eventTypes = team.eventTypes.map((type) => ({ ...type, users: type.users.map((user) => ({ ...user, avatar: CAL_URL + "/" + user.username + "/avatar.png", })), })); return { props: { team, trpcState: ssr.dehydrate(), }, }; }; export default TeamPage; TeamPage.isThemeSupported = true;