feat: add meta and seo tags for new booker component (#8697)

* feat: add hidden to select

* feat: add hide branding to store

* fix: remove branding from store

* feat: prefetch data

* feat: use meta tags

* fix: remove branding from store

* fix: prefetching

* refactor: useEvent hook

* fix: type

* fix :booker seo

* fix: type error

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>

apps/web/pages/new-booker/[user]/[type].tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingByUidOrRescheduleUid } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
@@ -16,6 +17,7 @@ type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Type({ slug, user, booking, away }: PageProps) {
   return (
     <main className="flex h-full min-h-[100dvh] items-center justify-center">
+      <BookerSeo username={user} eventSlug={slug} rescheduleUid={booking?.uid} />
       <Booker username={user} eventSlug={slug} rescheduleBooking={booking} isAway={away} />
     </main>
   );
@@ -27,8 +29,8 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   const { user, type: slug } = paramsSchema.parse(context.params);
   const { rescheduleUid } = context.query;
 
-  const { ssgInit } = await import("@server/lib/ssg");
-  const ssg = await ssgInit(context);
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
   const usernameList = getUsernameList(user);
 
   const users = await prisma.user.findMany({
@@ -53,13 +55,15 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
     booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
   }
 
+  await ssr.viewer.public.event.prefetch({ username: user, eventSlug: slug });
+
   return {
     props: {
       booking,
       user,
       slug,
       away: false,
-      trpcState: ssg.dehydrate(),
+      trpcState: ssr.dehydrate(),
     },
   };
 }
@@ -67,8 +71,9 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 async function getUserPageProps(context: GetServerSidePropsContext) {
   const { user: username, type: slug } = paramsSchema.parse(context.params);
   const { rescheduleUid } = context.query;
-  const { ssgInit } = await import("@server/lib/ssg");
-  const ssg = await ssgInit(context);
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
   const user = await prisma.user.findUnique({
     where: {
       username,
@@ -89,13 +94,15 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
   }
 
+  await ssr.viewer.public.event.prefetch({ username, eventSlug: slug });
+
   return {
     props: {
       booking,
       away: user?.away,
       user: username,
       slug,
-      trpcState: ssg.dehydrate(),
+      trpcState: ssr.dehydrate(),
     },
   };
 }

apps/web/pages/new-booker/team/[slug]/[type].tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingByUidOrRescheduleUid } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import prisma from "@calcom/prisma";
@@ -15,6 +16,7 @@ type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Type({ slug, user, booking, away }: PageProps) {
   return (
     <main className="flex h-full min-h-[100dvh] items-center justify-center">
+      <BookerSeo username={user} eventSlug={slug} rescheduleUid={booking?.uid} />
       <Booker username={user} eventSlug={slug} rescheduleBooking={booking} isAway={away} />
     </main>
   );
@@ -30,8 +32,8 @@ const paramsSchema = z.object({ type: z.string(), slug: z.string() });
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
   const { rescheduleUid } = context.query;
-  const { ssgInit } = await import("@server/lib/ssg");
-  const ssg = await ssgInit(context);
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
 
   const team = await prisma.team.findFirst({
     where: {
@@ -52,14 +54,14 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   if (rescheduleUid) {
     booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
   }
-
+  await ssr.viewer.public.event.prefetch({ username: teamSlug, eventSlug: meetingSlug });
   return {
     props: {
       booking,
       away: false,
       user: teamSlug,
       slug: meetingSlug,
-      trpcState: ssg.dehydrate(),
+      trpcState: ssr.dehydrate(),
     },
   };
 };

packages/features/bookings/components/BookerSeo.tsx

@@ -0,0 +1,44 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { HeadSeo } from "@calcom/ui";
+
+interface BookerSeoProps {
+  username: string;
+  eventSlug: string;
+  rescheduleUid: string | undefined;
+  hideBranding?: boolean;
+}
+
+export const BookerSeo = (props: BookerSeoProps) => {
+  const { eventSlug, username, rescheduleUid, hideBranding } = props;
+  const { t } = useLocale();
+  const { data: event } = trpc.viewer.public.event.useQuery(
+    { username, eventSlug },
+    { refetchOnWindowFocus: false }
+  );
+
+  const profileName = event?.profile?.name ?? "";
+  const profileImage = event?.profile?.image;
+  const title = event?.title ?? "";
+  return (
+    <HeadSeo
+      title={`${rescheduleUid ? t("reschedule") : ""} ${title} | ${profileName}`}
+      description={`${rescheduleUid ? t("reschedule") : ""} ${title}`}
+      meeting={{
+        title: title,
+        profile: { name: profileName, image: profileImage },
+        users: [
+          ...(event?.users || []).map((user) => ({
+            name: `${user.name}`,
+            username: `${user.username}`,
+          })),
+        ],
+      }}
+      nextSeoProps={{
+        nofollow: event?.hidden,
+        noindex: event?.hidden,
+      }}
+      isBrandingHidden={hideBranding}
+    />
+  );
+};

packages/features/eventtypes/lib/getPublicEvent.ts

@@ -59,6 +59,7 @@ const publicEventSelect = Prisma.validator<Prisma.EventTypeSelect>()({
     },
   },
   owner: true,
+  hidden: true,
 });
 
 export const getPublicEvent = async (username: string, eventSlug: string, prisma: PrismaClient) => {