import { UserPlan } from "@prisma/client"; import classNames from "classnames"; import { GetServerSidePropsContext } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { useEffect } from "react"; import { useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { CAL_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import useTheme from "@calcom/lib/hooks/useTheme"; import { getTeamWithMembers } from "@calcom/lib/server/queries/teams"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { Icon } from "@calcom/ui/Icon"; import { Button } from "@calcom/ui/v2/core"; import EventTypeDescription from "@calcom/ui/v2/modules/event-types/EventTypeDescription"; import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally"; import { useLocale } from "@lib/hooks/useLocale"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { HeadSeo } from "@components/seo/head-seo"; import Team from "@components/team/screens/Team"; import Avatar from "@components/ui/Avatar"; import AvatarGroup from "@components/ui/AvatarGroup"; export type TeamPageProps = inferSSRProps; function TeamPage({ team }: TeamPageProps) { useTheme(); const showMembers = useToggleQuery("members"); const { t } = useLocale(); useExposePlanGlobally("PRO"); 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"; return (

{teamName}

{team.bio}

{(showMembers.isOn || !team.eventTypes.length) && } {!showMembers.isOn && team.eventTypes.length > 0 && (
{eventTypes}
)}
); } export const getServerSideProps = async (context: GetServerSidePropsContext) => { 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 }; const members = team.members.filter((member) => member.plan !== UserPlan.FREE); team.members = members ?? []; team.eventTypes = team.eventTypes.map((type) => ({ ...type, users: type.users.map((user) => ({ ...user, avatar: CAL_URL + "/" + user.username + "/avatar.png", })), })); return { props: { team, }, }; }; export default TeamPage; TeamPage.isThemeSupported = true;