2022-04-08 05:33:24 +00:00
|
|
|
import classNames from "classnames";
|
2023-02-16 22:39:57 +00:00
|
|
|
import type { GetServerSidePropsContext } from "next";
|
2021-09-14 08:45:28 +00:00
|
|
|
import Link from "next/link";
|
2022-06-02 16:19:01 +00:00
|
|
|
import { useRouter } from "next/router";
|
2022-11-23 02:55:25 +00:00
|
|
|
import { useEffect } from "react";
|
2021-09-22 19:52:38 +00:00
|
|
|
|
2022-05-27 15:37:02 +00:00
|
|
|
import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
2022-12-22 19:06:26 +00:00
|
|
|
import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription";
|
2022-05-30 07:57:48 +00:00
|
|
|
import { CAL_URL } from "@calcom/lib/constants";
|
2023-03-10 22:10:56 +00:00
|
|
|
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
|
2022-10-06 14:33:57 +00:00
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
2022-07-28 19:58:26 +00:00
|
|
|
import useTheme from "@calcom/lib/hooks/useTheme";
|
2023-03-23 21:20:35 +00:00
|
|
|
import { md } from "@calcom/lib/markdownIt";
|
2022-07-22 17:27:06 +00:00
|
|
|
import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
|
2022-07-28 19:58:26 +00:00
|
|
|
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
|
2023-03-12 23:31:55 +00:00
|
|
|
import prisma from "@calcom/prisma";
|
|
|
|
import { Avatar, AvatarGroup, Button, EmptyScreen, HeadSeo } from "@calcom/ui";
|
2023-01-23 23:08:01 +00:00
|
|
|
import { FiArrowRight } from "@calcom/ui/components/icon";
|
2022-03-16 23:36:43 +00:00
|
|
|
|
2021-09-22 19:52:38 +00:00
|
|
|
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
|
2023-02-16 22:39:57 +00:00
|
|
|
import type { inferSSRProps } from "@lib/types/inferSSRProps";
|
2021-09-22 19:52:38 +00:00
|
|
|
|
2021-09-14 08:45:28 +00:00
|
|
|
import Team from "@components/team/screens/Team";
|
|
|
|
|
2023-01-31 18:05:18 +00:00
|
|
|
import { ssrInit } from "@server/lib/ssr";
|
|
|
|
|
2021-12-09 23:51:30 +00:00
|
|
|
export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
|
2023-03-12 23:31:55 +00:00
|
|
|
function TeamPage({ team, isUnpublished }: TeamPageProps) {
|
2023-02-01 18:27:26 +00:00
|
|
|
useTheme(team.theme);
|
2021-09-14 08:45:28 +00:00
|
|
|
const showMembers = useToggleQuery("members");
|
2021-10-12 13:11:33 +00:00
|
|
|
const { t } = useLocale();
|
2022-04-08 05:33:24 +00:00
|
|
|
const isEmbed = useIsEmbed();
|
2022-04-14 02:47:34 +00:00
|
|
|
const telemetry = useTelemetry();
|
2022-06-02 16:19:01 +00:00
|
|
|
const router = useRouter();
|
2023-03-12 23:31:55 +00:00
|
|
|
const teamName = team.name || "Nameless Team";
|
|
|
|
const isBioEmpty = !team.bio || !team.bio.replace("<p><br></p>", "").length;
|
2022-04-14 02:47:34 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-06-02 16:19:01 +00:00
|
|
|
telemetry.event(
|
|
|
|
telemetryEventTypes.pageView,
|
|
|
|
collectPageParameters("/team/[slug]", { isTeamBooking: true })
|
2022-04-14 02:47:34 +00:00
|
|
|
);
|
2022-06-02 16:19:01 +00:00
|
|
|
}, [telemetry, router.asPath]);
|
|
|
|
|
2023-03-12 23:31:55 +00:00
|
|
|
if (isUnpublished) {
|
|
|
|
return (
|
|
|
|
<div className="m-8 flex items-center justify-center">
|
|
|
|
<EmptyScreen
|
|
|
|
avatar={<Avatar alt={teamName} imageSrc={getPlaceholderAvatar(team.logo, team.name)} size="lg" />}
|
|
|
|
headline={t("team_is_unpublished", { team: teamName })}
|
|
|
|
description={t("team_is_unpublished_description")}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-09-02 21:16:36 +00:00
|
|
|
const EventTypes = () => (
|
2023-01-31 17:21:51 +00:00
|
|
|
<ul className="dark:border-darkgray-300 rounded-md border border-gray-200">
|
2022-09-02 21:16:36 +00:00
|
|
|
{team.eventTypes.map((type, index) => (
|
2021-09-14 08:45:28 +00:00
|
|
|
<li
|
2022-09-02 21:16:36 +00:00
|
|
|
key={index}
|
2022-04-08 05:33:24 +00:00
|
|
|
className={classNames(
|
2023-01-31 17:21:51 +00:00
|
|
|
"dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50",
|
2022-09-02 21:16:36 +00:00
|
|
|
!isEmbed && "bg-white"
|
2022-04-08 05:33:24 +00:00
|
|
|
)}>
|
2023-03-08 15:46:23 +00:00
|
|
|
<div className="px-6 py-4 ">
|
|
|
|
<Link
|
|
|
|
href={`/team/${team.slug}/${type.slug}`}
|
|
|
|
data-testid="event-type-link"
|
|
|
|
className="flex justify-between">
|
|
|
|
<div className="flex-shrink">
|
|
|
|
<div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
|
|
|
|
<h2 className="dark:text-darkgray-700 text-sm font-semibold text-gray-700">{type.title}</h2>
|
|
|
|
</div>
|
|
|
|
<EventTypeDescription className="text-sm" eventType={type} />
|
2021-09-14 08:45:28 +00:00
|
|
|
</div>
|
2023-03-08 15:46:23 +00:00
|
|
|
<div className="mt-1 self-center">
|
|
|
|
<AvatarGroup
|
|
|
|
truncateAfter={4}
|
|
|
|
className="flex flex-shrink-0"
|
|
|
|
size="sm"
|
|
|
|
items={type.users.map((user) => ({
|
|
|
|
alt: user.name || "",
|
|
|
|
title: user.name || "",
|
|
|
|
image: CAL_URL + "/" + user.username + "/avatar.png" || "",
|
|
|
|
}))}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</Link>
|
|
|
|
</div>
|
2021-09-14 08:45:28 +00:00
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2023-03-12 23:31:55 +00:00
|
|
|
<>
|
2022-10-18 17:46:22 +00:00
|
|
|
<HeadSeo
|
|
|
|
title={teamName}
|
|
|
|
description={teamName}
|
|
|
|
meeting={{
|
|
|
|
title: team?.bio || "",
|
|
|
|
profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) },
|
|
|
|
}}
|
|
|
|
/>
|
2022-10-19 21:25:03 +00:00
|
|
|
<main className="dark:bg-darkgray-50 mx-auto max-w-3xl rounded-md bg-gray-100 px-4 pt-12 pb-12">
|
2022-07-26 08:27:57 +00:00
|
|
|
<div className="max-w-96 mx-auto mb-8 text-center">
|
2022-09-02 21:16:36 +00:00
|
|
|
<Avatar alt={teamName} imageSrc={getPlaceholderAvatar(team.logo, team.name)} size="lg" />
|
|
|
|
<p className="font-cal dark:text-darkgray-900 mb-2 text-2xl tracking-wider text-gray-900">
|
|
|
|
{teamName}
|
|
|
|
</p>
|
2023-01-25 01:08:10 +00:00
|
|
|
{!isBioEmpty && (
|
|
|
|
<>
|
|
|
|
<div
|
2023-01-27 16:03:04 +00:00
|
|
|
className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
|
2023-03-23 21:20:35 +00:00
|
|
|
dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
|
2023-01-25 01:08:10 +00:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
2022-07-26 08:27:57 +00:00
|
|
|
</div>
|
|
|
|
{(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
|
|
|
|
{!showMembers.isOn && team.eventTypes.length > 0 && (
|
2022-08-24 20:18:42 +00:00
|
|
|
<div className="mx-auto max-w-3xl ">
|
2022-12-21 14:06:00 +00:00
|
|
|
<EventTypes />
|
2023-01-06 10:55:57 +00:00
|
|
|
|
|
|
|
{!team.hideBookATeamMember && (
|
|
|
|
<div>
|
|
|
|
<div className="relative mt-12">
|
|
|
|
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
|
|
|
<div className="dark:border-darkgray-300 w-full border-t border-gray-200" />
|
|
|
|
</div>
|
|
|
|
<div className="relative flex justify-center">
|
|
|
|
<span className="dark:bg-darkgray-50 bg-gray-100 px-2 text-sm text-gray-500 dark:text-white">
|
|
|
|
{t("or")}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<aside className="mt-8 flex justify-center text-center dark:text-white">
|
|
|
|
<Button
|
|
|
|
color="minimal"
|
2023-01-23 23:08:01 +00:00
|
|
|
EndIcon={FiArrowRight}
|
2023-01-06 10:55:57 +00:00
|
|
|
className="dark:hover:bg-darkgray-200"
|
|
|
|
href={`/team/${team.slug}?members=1`}
|
|
|
|
shallow={true}>
|
|
|
|
{t("book_a_team_member")}
|
|
|
|
</Button>
|
|
|
|
</aside>
|
2021-12-07 16:11:43 +00:00
|
|
|
</div>
|
2023-01-06 10:55:57 +00:00
|
|
|
)}
|
2022-07-26 08:27:57 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2022-10-19 21:25:03 +00:00
|
|
|
</main>
|
2023-03-12 23:31:55 +00:00
|
|
|
</>
|
2021-09-14 08:45:28 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-09-29 21:33:18 +00:00
|
|
|
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
|
2023-01-31 18:05:18 +00:00
|
|
|
const ssr = await ssrInit(context);
|
2021-09-14 08:45:28 +00:00
|
|
|
const slug = Array.isArray(context.query?.slug) ? context.query.slug.pop() : context.query.slug;
|
|
|
|
|
2023-03-12 23:31:55 +00:00
|
|
|
const unpublishedTeam = await prisma.team.findFirst({
|
|
|
|
where: {
|
|
|
|
metadata: {
|
|
|
|
path: ["requestedSlug"],
|
|
|
|
equals: slug,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
if (unpublishedTeam) {
|
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
isUnpublished: true,
|
|
|
|
team: unpublishedTeam,
|
|
|
|
trpcState: ssr.dehydrate(),
|
|
|
|
},
|
|
|
|
} as const;
|
|
|
|
}
|
|
|
|
|
2021-12-09 23:51:30 +00:00
|
|
|
const team = await getTeamWithMembers(undefined, slug);
|
2021-09-14 08:45:28 +00:00
|
|
|
|
2022-10-19 21:25:03 +00:00
|
|
|
if (!team) return { notFound: true } as { notFound: true };
|
2021-09-14 08:45:28 +00:00
|
|
|
|
|
|
|
team.eventTypes = team.eventTypes.map((type) => ({
|
|
|
|
...type,
|
|
|
|
users: type.users.map((user) => ({
|
|
|
|
...user,
|
2022-05-30 07:57:48 +00:00
|
|
|
avatar: CAL_URL + "/" + user.username + "/avatar.png",
|
2021-09-14 08:45:28 +00:00
|
|
|
})),
|
|
|
|
}));
|
|
|
|
|
|
|
|
return {
|
|
|
|
props: {
|
2023-03-23 21:20:35 +00:00
|
|
|
team,
|
2023-01-31 18:05:18 +00:00
|
|
|
trpcState: ssr.dehydrate(),
|
2021-09-14 08:45:28 +00:00
|
|
|
},
|
2023-03-12 23:31:55 +00:00
|
|
|
} as const;
|
2021-09-14 08:45:28 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default TeamPage;
|
2022-07-26 08:27:57 +00:00
|
|
|
TeamPage.isThemeSupported = true;
|