import classNames from "classnames"; import type { GetServerSidePropsContext } from "next"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect } from "react"; import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains"; import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription"; import { getFeatureFlagMap } from "@calcom/features/flags/server/utils"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery"; import useTheme from "@calcom/lib/hooks/useTheme"; import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; import { getTeamWithMembers } from "@calcom/lib/server/queries/teams"; import { stripMarkdown } from "@calcom/lib/stripMarkdown"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import prisma from "@calcom/prisma"; import { teamMetadataSchema } from "@calcom/prisma/zod-utils"; import { Avatar, AvatarGroup, Button, HeadSeo, UnpublishedEntity } from "@calcom/ui"; import { ArrowRight } from "@calcom/ui/components/icon"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import type { inferSSRProps } from "@lib/types/inferSSRProps"; import PageWrapper from "@components/PageWrapper"; import Team from "@components/team/screens/Team"; import { ssrInit } from "@server/lib/ssr"; export type PageProps = inferSSRProps; function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }: PageProps) { useTheme(team.theme); const routerQuery = useRouterQuery(); const pathname = usePathname(); const showMembers = useToggleQuery("members"); const { t } = useLocale(); const isEmbed = useIsEmbed(); const telemetry = useTelemetry(); const teamName = team.name || "Nameless Team"; const isBioEmpty = !team.bio || !team.bio.replace("


", "").length; const metadata = teamMetadataSchema.parse(team.metadata); useEffect(() => { telemetry.event( telemetryEventTypes.pageView, collectPageParameters("/team/[slug]", { isTeamBooking: true }) ); }, [telemetry, pathname]); if (isUnpublished) { const slug = team.slug || metadata?.requestedSlug; return (
); } // slug is a route parameter, we don't want to forward it to the next route const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = routerQuery; const EventTypes = () => ( ); const SubTeams = () => team.children.length ? ( ) : (

{" " + t("org_no_teams_yet")}

{t("org_no_teams_yet_description")}

); return ( <>

{team.parent && `${team.parent.name} `} {teamName}

{!isBioEmpty && ( <>
)}
{metadata?.isOrganization ? ( ) : ( <> {(showMembers.isOn || !team.eventTypes.length) && (team.isPrivate ? (

{t("you_cannot_see_team_members")}

) : ( ))} {!showMembers.isOn && team.eventTypes.length > 0 && (
{/* Hide "Book a team member button when team is private or hideBookATeamMember is true" */} {!team.hideBookATeamMember && !team.isPrivate && (
)}
)} )}
); } 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 { isValidOrgDomain, currentOrgDomain } = orgDomainConfig( context.req.headers.host ?? "", context.params?.orgSlug ); const flags = await getFeatureFlagMap(prisma); const team = await getTeamWithMembers({ slug, orgSlug: currentOrgDomain }); const metadata = teamMetadataSchema.parse(team?.metadata ?? {}); console.warn("gSSP, team/[slug] - ", { isValidOrgDomain, currentOrgDomain, ALLOWED_HOSTNAMES: process.env.ALLOWED_HOSTNAMES, flags: JSON.stringify, }); // Taking care of sub-teams and orgs if ( (!isValidOrgDomain && team?.parent) || (!isValidOrgDomain && !!metadata?.isOrganization) || flags["organizations"] !== true ) { return { notFound: true } as const; } if (!team || (team.parent && !team.parent.slug)) { const unpublishedTeam = await prisma.team.findFirst({ where: { ...(team?.parent ? { id: team.parent.id } : { metadata: { path: ["requestedSlug"], equals: slug, }, }), }, }); if (!unpublishedTeam) return { notFound: true } as const; return { props: { isUnpublished: true, team: { ...unpublishedTeam, createdAt: null }, trpcState: ssr.dehydrate(), }, } as const; } team.eventTypes = team.eventTypes.map((type) => ({ ...type, users: type.users.map((user) => ({ ...user, avatar: "/" + user.username + "/avatar.png", })), descriptionAsSafeHTML: markdownToSafeHTML(type.description), })); const safeBio = markdownToSafeHTML(team.bio) || ""; const members = team.members.map((member) => { return { ...member, safeBio: markdownToSafeHTML(member.bio || "") }; }); const markdownStrippedBio = stripMarkdown(team?.bio || ""); const { inviteToken: _inviteToken, ...serializableTeam } = team; return { props: { team: { ...serializableTeam, safeBio, members, metadata }, themeBasis: serializableTeam.slug, trpcState: ssr.dehydrate(), markdownStrippedBio, isValidOrgDomain, }, } as const; }; TeamPage.isBookingPage = true; TeamPage.PageWrapper = PageWrapper; export default TeamPage;