import { ArrowRightIcon } from "@heroicons/react/solid"; import { UserPlan } from "@prisma/client"; import classNames from "classnames"; import { GetServerSidePropsContext } from "next"; import Link from "next/link"; import React, { useEffect } from "react"; import { useIsEmbed } from "@calcom/embed-core"; import Button from "@calcom/ui/Button"; import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally"; import { useLocale } from "@lib/hooks/useLocale"; import useTheme from "@lib/hooks/useTheme"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import { defaultAvatarSrc } from "@lib/profile"; import { getTeamWithMembers } from "@lib/queries/teams"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import EventTypeDescription from "@components/eventtype/EventTypeDescription"; 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"; import Text from "@components/ui/Text"; export type TeamPageProps = inferSSRProps; function TeamPage({ team }: TeamPageProps) { const { isReady, Theme } = useTheme(); const showMembers = useToggleQuery("members"); const { t } = useLocale(); useExposePlanGlobally("PRO"); const isEmbed = useIsEmbed(); const telemetry = useTelemetry(); useEffect(() => { telemetry.withJitsu((jitsu) => jitsu.track( telemetryEventTypes.pageView, collectPageParameters("/team/[slug]", { isTeamBooking: true, }) ) ); }, [telemetry]); const eventTypes = ( ); const teamName = team.name || "Nameless Team"; return ( isReady && (
{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: user.avatar || defaultAvatarSrc({ email: user.email || "" }), })), })); return { props: { team, }, }; }; export default TeamPage;