feat: add booking details sheet for /bookings (#24795)

* spike: initial booking detail sheet * rename button * revert some changes * remove unnecessary test * disable booking details sheet --------- Co-authored-by: Eunjae Lee <hey@eunjae.dev> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
2025-11-11 08:40:55 -03:00
parent dc3742d322
commit 4407a1952c
14 changed files with 967 additions and 61 deletions
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
@@ -46,6 +45,7 @@ import { Tooltip } from "@calcom/ui/components/tooltip";

 import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";

+import { buildBookingLink } from "../../modules/bookings/lib/buildBookingLink";
 import { BookingActionsDropdown } from "./BookingActionsDropdown";
 import { useBookingActionsStoreContext, BookingActionsStoreProvider } from "./BookingActionsStoreProvider";
 import {
@@ -94,10 +94,51 @@ const isBookingReroutable = (booking: ParsedBooking): booking is ReroutableBooki
  return !!booking.routedFromRoutingFormReponse && !!booking.eventType?.team;
 };

+const ConditionalLink = ({
+  children,
+  onClick,
+  bookingLink,
+  className,
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+  bookingLink: string;
+  className?: string;
+}) => {
+  const { t } = useLocale();
+
+  if (onClick) {
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick();
+      }
+    };
+
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
+        className={className}
+        aria-label={t("view_booking_details")}>
+        {children}
+      </div>
+    );
+  }
+  return (
+    <Link href={bookingLink} className={className}>
+      {children}
+    </Link>
+  );
+};
+
 function BookingListItem(booking: BookingItemProps) {
  const parsedBooking = buildParsedBooking(booking);

  const { userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
+  const { onClick } = booking;
  const {
    t,
    i18n: { language },
@@ -258,15 +299,11 @@ function BookingListItem(booking: BookingItemProps) {
    .concat(booking.recurringInfo?.bookings[BookingStatus.PENDING])
    .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());

-  const buildBookingLink = () => {
-    const urlSearchParams = new URLSearchParams({
-      allRemainingBookings: isTabRecurring.toString(),
-    });
-    if (booking.attendees?.[0]?.email) urlSearchParams.set("email", booking.attendees[0].email);
-    return `/booking/${booking.uid}?${urlSearchParams.toString()}`;
-  };
-
-  const bookingLink = buildBookingLink();
+  const bookingLink = buildBookingLink({
+    bookingUid: booking.uid,
+    allRemainingBookings: isTabRecurring,
+    email: booking.attendees?.[0]?.email,
+  });

  const title = booking.title;

@@ -321,7 +358,7 @@ function BookingListItem(booking: BookingItemProps) {
              {eventTypeColor && (
                <div className="h-[70%] w-0.5" style={{ backgroundColor: eventTypeColor }} />
              )}
-              <Link href={bookingLink} className="ml-3">
+              <ConditionalLink onClick={onClick} bookingLink={bookingLink} className="ml-3">
                <div className="cursor-pointer py-4">
                  <div className="text-emphasis text-sm leading-6">{startTime}</div>
                  <div className="text-subtle text-sm">
@@ -350,7 +387,8 @@ function BookingListItem(booking: BookingItemProps) {
                            className="text-sm leading-6 text-blue-600 hover:underline dark:text-blue-400">
                            <div className="flex items-center gap-2">
                              {provider?.iconUrl && (
-                                <Image
+                                // eslint-disable-next-line @next/next/no-img-element
+                                <img
                                  src={provider.iconUrl}
                                  width={16}
                                  height={16}
@@ -367,11 +405,11 @@ function BookingListItem(booking: BookingItemProps) {
                    </div>
                  )}
                </div>
-              </Link>
+              </ConditionalLink>
            </div>
          </div>
          <div data-testid="title-and-attendees" className={`w-full px-4${isRejected ? "line-through" : ""}`}>
-            <Link href={bookingLink}>
+            <ConditionalLink onClick={onClick} bookingLink={bookingLink}>
              {/* Time and Badges for mobile */}
              <div className="w-full pb-2 pt-4 sm:hidden">
                <div className="flex w-full items-center justify-between sm:hidden">
@@ -454,7 +492,7 @@ function BookingListItem(booking: BookingItemProps) {
                  </div>
                )}
              </div>
-            </Link>
+            </ConditionalLink>
          </div>
          <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 space-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:space-y-0 sm:pl-0">
            {shouldShowPendingActions(actionContext) && <TableActions actions={pendingActions} />}
@@ -14,4 +14,5 @@ export type BookingItemProps = BookingItem & {
    userEmail: string | undefined;
  };
  isToday: boolean;
+  onClick?: () => void;
 };
@@ -0,0 +1,454 @@
+"use client";
+
+import { useMemo } from "react";
+import { z } from "zod";
+
+import dayjs from "@calcom/dayjs";
+import { useBookingLocation } from "@calcom/features/bookings/hooks";
+import { shouldShowFieldInCustomResponses } from "@calcom/lib/bookings/SystemField";
+import { formatPrice } from "@calcom/lib/currencyConversions";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
+import { bookingMetadataSchema, eventTypeBookingFields } from "@calcom/prisma/zod-utils";
+import type { RecurringEvent } from "@calcom/types/Calendar";
+import classNames from "@calcom/ui/classNames";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Icon } from "@calcom/ui/components/icon";
+import {
+  Sheet,
+  SheetContent,
+  SheetBody,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+} from "@calcom/ui/components/sheet";
+
+import { buildBookingLink } from "../lib/buildBookingLink";
+import type { BookingOutput } from "../types";
+
+type BookingMetaData = z.infer<typeof bookingMetadataSchema>;
+
+interface BookingDetailsSheetProps {
+  booking: BookingOutput | null;
+  isOpen: boolean;
+  onClose: () => void;
+  userTimeZone?: string;
+  userTimeFormat?: number;
+  onPrevious?: () => void;
+  hasPrevious?: boolean;
+  onNext?: () => void;
+  hasNext?: boolean;
+}
+
+export function BookingDetailsSheet({
+  booking,
+  isOpen,
+  onClose,
+  userTimeZone,
+  onPrevious,
+  hasPrevious = false,
+  onNext,
+  hasNext = false,
+}: BookingDetailsSheetProps) {
+  const { t } = useLocale();
+
+  if (!booking) return null;
+
+  const startTime = dayjs(booking.startTime).tz(userTimeZone);
+  const endTime = dayjs(booking.endTime).tz(userTimeZone);
+
+  // Build booking confirmation link
+  const isRecurring = booking.recurringEventId !== null;
+  const bookingLink = buildBookingLink({
+    bookingUid: booking.uid,
+    allRemainingBookings: isRecurring,
+    email: booking.attendees?.[0]?.email,
+  });
+
+  const getStatusBadge = () => {
+    switch (booking.status) {
+      case "ACCEPTED":
+        return { variant: "green" as const, label: t("confirmed") };
+      case "PENDING":
+        return { variant: "orange" as const, label: t("pending") };
+      case "CANCELLED":
+        return { variant: "red" as const, label: t("cancelled") };
+      case "REJECTED":
+        return { variant: "red" as const, label: t("rejected") };
+      default:
+        return { variant: "gray" as const, label: booking.status };
+    }
+  };
+
+  const statusBadge = getStatusBadge();
+
+  const parsedMetadata = bookingMetadataSchema.safeParse(booking.metadata ?? null);
+  const bookingMetadata = parsedMetadata.success ? parsedMetadata.data : null;
+
+  // Get conference link info for Join button
+  const { locationToDisplay, provider, isLocationURL } = useBookingLocation({
+    location: booking.location,
+    videoCallUrl: bookingMetadata?.videoCallUrl,
+    t,
+    bookingStatus: booking.status,
+  });
+
+  const recurringInfo =
+    booking.recurringEventId && booking.eventType?.recurringEvent
+      ? {
+          count: booking.eventType.recurringEvent.count,
+          recurringEvent: booking.eventType.recurringEvent,
+        }
+      : null;
+
+  const customResponses = booking.responses
+    ? Object.entries(booking.responses as Record<string, unknown>)
+        .filter(([fieldName]) => shouldShowFieldInCustomResponses(fieldName))
+        .map(([question, answer]) => [question, answer] as [string, unknown])
+    : [];
+
+  return (
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent className="overflow-y-auto">
+        <SheetHeader
+          showCloseButton={false}
+          rightContent={
+            <div className="flex gap-2">
+              <Button
+                variant="icon"
+                color="minimal"
+                StartIcon="chevron-up"
+                disabled={!hasPrevious}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPrevious?.();
+                }}
+              />
+              <Button
+                variant="icon"
+                color="minimal"
+                StartIcon="chevron-down"
+                disabled={!hasNext}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onNext?.();
+                }}
+              />
+            </div>
+          }>
+          <div className="flex items-center gap-2">
+            <Badge variant={statusBadge.variant} className="capitalize">
+              {statusBadge.label}
+            </Badge>
+            {booking.eventType.team && <Badge variant="gray">{booking.eventType.team.name}</Badge>}
+            {recurringInfo && (
+              <Badge variant="gray">
+                <Icon name="repeat" className="mr-1 h-3 w-3" />
+                {recurringInfo.count}
+              </Badge>
+            )}
+          </div>
+        </SheetHeader>
+
+        <SheetBody className="space-y-6">
+          <div className="space-y-6">
+            <div className="space-y-1">
+              <SheetTitle className="text-2xl font-semibold">{booking.title}</SheetTitle>
+              <p className="text-subtle text-sm">
+                {startTime.format("dddd, MMMM D, YYYY h:mma")} - {endTime.format("h:mma")} (
+                {userTimeZone || startTime.format("Z")})
+              </p>
+            </div>
+
+            <WhoSection booking={booking} />
+
+            <WhereSection booking={booking} meta={bookingMetadata} />
+
+            <RecurringInfoSection recurringInfo={recurringInfo} />
+
+            <PaymentSection booking={booking} />
+
+            <SlotsSection booking={booking} />
+
+            <CustomQuestionsSection
+              customResponses={customResponses}
+              bookingFields={booking.eventType?.bookingFields}
+            />
+
+            <DescriptionSection booking={booking} />
+          </div>
+        </SheetBody>
+
+        <SheetFooter className="bg-muted border-subtle -mx-4 -mb-4 border-t pt-0 sm:-mx-6 sm:-my-6">
+          <div className="flex w-full flex-row items-center justify-end gap-2 px-4 pb-4 pt-4">
+            {isLocationURL && locationToDisplay && (
+              <>
+                <Button
+                  color="secondary"
+                  size="sm"
+                  href={locationToDisplay}
+                  target="_blank"
+                  className="flex items-center gap-2">
+                  {provider?.iconUrl && (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={provider.iconUrl}
+                      className="h-4 w-4 flex-shrink-0 rounded-sm"
+                      alt={`${provider.label} logo`}
+                    />
+                  )}
+                  {provider?.label
+                    ? t("join_event_location", { eventLocationType: provider.label })
+                    : t("join_meeting")}
+                </Button>
+                <div className="border-subtle h-3 w-px border-r" />
+              </>
+            )}
+            <Button color="secondary" size="sm" EndIcon="external-link" href={bookingLink} target="_blank">
+              {t("view")}
+            </Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function WhoSection({ booking }: { booking: BookingOutput }) {
+  const { t } = useLocale();
+  return (
+    <Section title={t("who")}>
+      <div className="space-y-4">
+        {booking.user && (
+          <div className="flex items-center gap-4">
+            <Avatar
+              size="md"
+              imageSrc={getPlaceholderAvatar(null, booking.user.name)}
+              alt={booking.user.name || ""}
+            />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <p className="text-emphasis truncate text-sm font-medium">{booking.user.name}</p>
+                <Badge variant="blue" size="sm">
+                  {t("host")}
+                </Badge>
+              </div>
+              <p className="text-default truncate text-sm">{booking.user.email}</p>
+            </div>
+          </div>
+        )}
+
+        {booking.attendees.map((attendee, idx) => (
+          <div key={idx} className="flex items-center gap-4">
+            <Avatar size="md" imageSrc={getPlaceholderAvatar(null, attendee.name)} alt={attendee.name} />
+            <div className="min-w-0 flex-1">
+              <p className="text-emphasis truncate text-sm font-medium">{attendee.name}</p>
+              <p className="text-default truncate text-sm">{attendee.email}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function WhereSection({ booking, meta }: { booking: BookingOutput; meta: BookingMetaData | null }) {
+  const { t } = useLocale();
+
+  const { locationToDisplay, provider, isLocationURL } = useBookingLocation({
+    location: booking.location,
+    videoCallUrl: meta?.videoCallUrl,
+    t,
+    bookingStatus: booking.status,
+  });
+
+  if (!locationToDisplay) {
+    return null;
+  }
+
+  if (!isLocationURL) {
+    return (
+      <Section title={t("where")}>
+        <p className="text-default text-sm">{locationToDisplay}</p>
+      </Section>
+    );
+  }
+
+  return (
+    <Section title={t("where")}>
+      <div className="flex items-center gap-2 text-sm">
+        {provider?.iconUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={provider.iconUrl}
+            className="h-4 w-4 flex-shrink-0 rounded-sm"
+            alt={`${provider?.label} logo`}
+          />
+        )}
+        <div className="flex min-w-0 items-baseline gap-1">
+          <span className="text-default flex-shrink-0">{provider?.label}:</span>
+          <a
+            href={locationToDisplay}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="truncate text-blue-600 hover:underline">
+            {locationToDisplay}
+          </a>
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+function RecurringInfoSection({
+  recurringInfo,
+}: {
+  recurringInfo: { count: number; recurringEvent: RecurringEvent } | null;
+}) {
+  const { t } = useLocale();
+
+  if (!recurringInfo || recurringInfo.count <= 0) {
+    return null;
+  }
+
+  return (
+    <Section title={t("recurring_event")}>
+      <p className="text-default text-sm">
+        {getEveryFreqFor({
+          t,
+          recurringEvent: recurringInfo.recurringEvent,
+          recurringCount: recurringInfo.count,
+        })}
+      </p>
+    </Section>
+  );
+}
+
+function PaymentSection({ booking }: { booking: BookingOutput }) {
+  const { t } = useLocale();
+
+  if (!booking.paid || !Array.isArray(booking.payment) || booking.payment.length === 0) {
+    return null;
+  }
+
+  const payment = booking.payment[0];
+  const formattedPrice = formatPrice(payment.amount, payment.currency);
+
+  return (
+    <Section title={t("payment")}>
+      <p className="text-default text-sm">{formattedPrice}</p>
+    </Section>
+  );
+}
+
+function SlotsSection({ booking }: { booking: BookingOutput }) {
+  const { t } = useLocale();
+
+  if (
+    !booking.eventType?.seatsShowAvailabilityCount ||
+    !booking.eventType?.seatsPerTimeSlot ||
+    booking.eventType.seatsPerTimeSlot <= 0
+  ) {
+    return null;
+  }
+
+  const totalSeats = booking.eventType.seatsPerTimeSlot;
+  const takenSeats = booking.attendees.length;
+
+  return (
+    <Section title={t("slots")}>
+      <p className="text-default text-sm">{t("slots_taken", { takenSeats, totalSeats })}</p>
+    </Section>
+  );
+}
+
+function CustomQuestionsSection({
+  customResponses,
+  bookingFields: rawBookingFields,
+}: {
+  customResponses: [string, unknown][];
+  bookingFields?: unknown;
+}) {
+  const { t } = useLocale();
+
+  // Parse and memoize booking fields
+  const bookingFields = useMemo(() => {
+    if (!rawBookingFields) return undefined;
+    const parsed = eventTypeBookingFields.safeParse(rawBookingFields);
+    return parsed.success ? parsed.data : undefined;
+  }, [rawBookingFields]);
+
+  // Filter out responses with falsy answers or empty arrays
+  const validResponses = useMemo(
+    (): [string, unknown][] =>
+      customResponses.filter(([, answer]) => {
+        if (!answer) return false;
+        if (Array.isArray(answer) && answer.length === 0) return false;
+        return true;
+      }),
+    [customResponses]
+  );
+
+  // Memoize field label lookups
+  const fieldLabels = useMemo(() => {
+    if (!bookingFields) return new Map<string, string>();
+
+    return new Map<string, string>(
+      bookingFields.map(
+        (field) => [field.name, field.label || t(field.defaultLabel || field.name)] as [string, string]
+      )
+    );
+  }, [bookingFields, t]);
+
+  if (validResponses.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {validResponses.map(([fieldName, answer], idx) => {
+        const fieldNameStr = String(fieldName);
+        const title: string = fieldLabels.get(fieldNameStr) ?? fieldNameStr;
+        return (
+          <Section key={idx} title={title}>
+            <p className="text-default text-sm">{String(answer)}</p>
+          </Section>
+        );
+      })}
+    </>
+  );
+}
+
+function DescriptionSection({ booking }: { booking: BookingOutput }) {
+  const { t } = useLocale();
+
+  if (!booking.description) {
+    return null;
+  }
+
+  return (
+    <Section title={t("description")}>
+      <p className="text-default whitespace-pre-wrap text-sm">{booking.description}</p>
+    </Section>
+  );
+}
+
+function Section({
+  title,
+  className,
+  children,
+}: {
+  title: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={classNames("space-y-1", className)}>
+      <h3 className="text-subtle text-xs font-semibold">{title}</h3>
+      {children}
+    </div>
+  );
+}
@@ -0,0 +1,43 @@
+import { useMemo, useCallback } from "react";
+
+import type { RowData } from "../types";
+
+function isDataRow(row: RowData): row is Extract<RowData, { type: "data" }> {
+  return row.type === "data";
+}
+
+export function useBookingCursor({
+  bookings,
+  selectedBookingId,
+  setSelectedBookingId,
+}: {
+  bookings: RowData[];
+  selectedBookingId: number | null;
+  setSelectedBookingId: (bookingId: number | null) => void;
+}) {
+  const bookingRows = useMemo(() => bookings.filter(isDataRow), [bookings]);
+
+  const currentIndex = useMemo(
+    () => bookingRows.findIndex((row) => selectedBookingId && row.booking.id === selectedBookingId),
+    [bookingRows, selectedBookingId]
+  );
+
+  const onPrevious = useCallback(() => {
+    if (currentIndex >= 1) {
+      setSelectedBookingId(bookingRows[currentIndex - 1].booking.id);
+    }
+  }, [bookingRows, currentIndex, setSelectedBookingId]);
+
+  const onNext = useCallback(() => {
+    if (currentIndex >= 0 && currentIndex < bookingRows.length - 1) {
+      setSelectedBookingId(bookingRows[currentIndex + 1].booking.id);
+    }
+  }, [bookingRows, currentIndex, setSelectedBookingId]);
+
+  return {
+    onPrevious,
+    onNext,
+    hasPrevious: currentIndex > 0,
+    hasNext: currentIndex < bookingRows.length - 1 && currentIndex >= 0,
+  };
+}
@@ -0,0 +1,24 @@
+/**
+ * Builds a booking link with query parameters
+ * @param bookingUid - The unique identifier for the booking
+ * @param allRemainingBookings - Whether to include all remaining bookings
+ * @param email - Optional email of the attendee
+ * @returns The formatted booking link with query parameters
+ */
+export function buildBookingLink({
+  bookingUid,
+  allRemainingBookings,
+  email,
+}: {
+  bookingUid: string;
+  allRemainingBookings: boolean;
+  email?: string | null;
+}): string {
+  const urlSearchParams = new URLSearchParams({
+    allRemainingBookings: allRemainingBookings.toString(),
+  });
+  if (email) {
+    urlSearchParams.set("email", email);
+  }
+  return `/booking/${bookingUid}?${urlSearchParams.toString()}`;
+}
@@ -26,7 +26,7 @@ import { getCalendarLinks, CalendarLinkType } from "@calcom/features/bookings/li
 import { RATING_OPTIONS, validateRating } from "@calcom/features/bookings/lib/rating";
 import type { nameObjectSchema } from "@calcom/features/eventtypes/lib/eventNaming";
 import { getEventName } from "@calcom/features/eventtypes/lib/eventNaming";
-import { SMS_REMINDER_NUMBER_FIELD, SystemField, TITLE_FIELD } from "@calcom/lib/bookings/SystemField";
+import { shouldShowFieldInCustomResponses } from "@calcom/lib/bookings/SystemField";
 import { APP_NAME } from "@calcom/lib/constants";
 import { formatToLocalizedDate, formatToLocalizedTime, formatToLocalizedTimezone } from "@calcom/lib/dayjs";
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
@@ -776,15 +776,9 @@ export default function Success(props: PageProps) {
                          // We show notes in additional notes section
                          // We show rescheduleReason at the top

-                          const isSystemField = SystemField.safeParse(field.name);
-                          // SMS_REMINDER_NUMBER_FIELD is a system field but doesn't have a dedicated place in the UI. So, it would be shown through the following responses list
-                          // TITLE is also an identifier for booking question "What is this meeting about?"
-                          if (
-                            isSystemField.success &&
-                            field.name !== SMS_REMINDER_NUMBER_FIELD &&
-                            field.name !== TITLE_FIELD
-                          )
+                          if (!shouldShowFieldInCustomResponses(field.name)) {
                            return null;
+                          }

                          const label = field.label || t(field.defaultLabel);

@@ -32,8 +32,10 @@ import BookingListItem from "@components/booking/BookingListItem";
 import { useFacetedUniqueValues } from "~/bookings/hooks/useFacetedUniqueValues";
 import type { validStatuses } from "~/bookings/lib/validStatuses";

+import { BookingDetailsSheet } from "../components/BookingDetailsSheet";
 import { BookingsCalendar } from "../components/BookingsCalendar";
 import { BookingsList } from "../components/BookingsList";
+import { useBookingCursor } from "../hooks/useBookingCursor";
 import type { RowData, BookingOutput } from "../types";

 type BookingsProps = {
@@ -99,6 +101,12 @@ function BookingsContent({ status, permissions, isCalendarViewEnabled }: Booking
  const { t } = useLocale();
  const user = useMeQuery().data;
  const searchParams = useSearchParams();
+  const [selectedBookingId, setSelectedBookingId] = useQueryState("selectedId", {
+    defaultValue: null,
+    parse: (value) => (value ? parseInt(value, 10) : null),
+    serialize: (value) => (value ? String(value) : ""),
+    clearOnDefault: true,
+  });

  const tabs: HorizontalTabItemProps[] = useMemo(() => {
    const queryString = searchParams?.toString() || "";
@@ -277,6 +285,8 @@ function BookingsContent({ status, permissions, isCalendarViewEnabled }: Booking
                }}
                listingStatus={status}
                recurringInfo={recurringInfo}
+                // uncomment this line to enable BookingDetailsSheet
+                // onClick={() => setSelectedBookingId(booking.id)}
                {...booking}
              />
            );
@@ -369,6 +379,21 @@ function BookingsContent({ status, permissions, isCalendarViewEnabled }: Booking
    return merged;
  }, [bookingsToday, flatData, status]);

+  const selectedBooking = useMemo(() => {
+    if (!selectedBookingId) return null;
+    const dataRow = finalData.find(
+      (row): row is Extract<RowData, { type: "data" }> =>
+        row.type === "data" && row.booking.id === selectedBookingId
+    );
+    return dataRow?.booking ?? null;
+  }, [selectedBookingId, finalData]);
+
+  const bookingNavigation = useBookingCursor({
+    bookings: finalData,
+    selectedBookingId,
+    setSelectedBookingId,
+  });
+
  const getFacetedUniqueValues = useFacetedUniqueValues();

  const table = useReactTable<RowData>({
@@ -442,6 +467,17 @@ function BookingsContent({ status, permissions, isCalendarViewEnabled }: Booking
          )}
        </div>
      </main>
+      <BookingDetailsSheet
+        booking={selectedBooking}
+        isOpen={!!selectedBooking}
+        onClose={() => setSelectedBookingId(null)}
+        userTimeZone={user?.timeZone}
+        userTimeFormat={user?.timeFormat === null ? undefined : user?.timeFormat}
+        onPrevious={bookingNavigation.onPrevious}
+        hasPrevious={bookingNavigation.hasPrevious}
+        onNext={bookingNavigation.onNext}
+        hasNext={bookingNavigation.hasNext}
+      />
    </div>
  );
 }
@@ -3957,7 +3957,10 @@
  "team_brand_subtitle": "Customize your team's branding with a logo and color",
  "team_details": "Team Details",
  "team_invite": "Team Invite",
+  "slots": "Slots",
+  "slots_taken": "{{takenSeats}}/{{totalSeats}} slots taken",
  "team_invite_subtitle": "Invite team members to collaborate and schedule together",
  "team_onboarding_details_subtitle": "Add your team's name and create a unique URL for your team",
+  "view_booking_details": "View Booking Details",
  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
@@ -0,0 +1,2 @@
+export { useBookerUrl, useEmbedBookerUrl } from "./useBookerUrl";
+export { useBookingLocation } from "./useBookingLocation";
@@ -0,0 +1,77 @@
+import type { TFunction } from "i18next";
+import { useMemo } from "react";
+
+import { getSuccessPageLocationMessage, guessEventLocationType } from "@calcom/app-store/locations";
+import type { BookingStatus } from "@calcom/prisma/enums";
+
+interface UseBookingLocationParams {
+  /**
+   * The booking location value from the booking object
+   */
+  location: string | null | undefined;
+  /**
+   * The video call URL from booking metadata (if available)
+   */
+  videoCallUrl?: string | null;
+  /**
+   * Translation function
+   */
+  t: TFunction;
+  /**
+   * Booking status (optional)
+   */
+  bookingStatus?: BookingStatus;
+}
+
+interface UseBookingLocationReturn {
+  /**
+   * The location message to display (URL or text)
+   */
+  locationToDisplay: string | null;
+  /**
+   * The provider information (label, iconUrl, etc.)
+   */
+  provider: ReturnType<typeof guessEventLocationType>;
+  /**
+   * Whether the location is a URL that can be clicked
+   */
+  isLocationURL: boolean;
+}
+
+/**
+ * Custom hook to process booking location information
+ *
+ * This hook handles the common pattern of:
+ * 1. Determining the actual location (video call URL vs. raw location)
+ * 2. Getting the display message for the location
+ * 3. Determining the provider type
+ * 4. Checking if the location is a clickable URL
+ */
+export function useBookingLocation({
+  location,
+  videoCallUrl,
+  t,
+  bookingStatus,
+}: UseBookingLocationParams): UseBookingLocationReturn {
+  const locationToDisplay = useMemo(() => {
+    if (!location) return null;
+
+    const effectiveLocation = videoCallUrl ?? location;
+    return getSuccessPageLocationMessage(effectiveLocation, t, bookingStatus);
+  }, [location, videoCallUrl, t, bookingStatus]);
+
+  const provider = useMemo(() => {
+    if (!location) return null;
+    return guessEventLocationType(location);
+  }, [location]);
+
+  const isLocationURL = useMemo(() => {
+    return typeof locationToDisplay === "string" && locationToDisplay.startsWith("http");
+  }, [locationToDisplay]);
+
+  return {
+    locationToDisplay,
+    provider,
+    isLocationURL,
+  };
+}
@@ -16,3 +16,20 @@ export const SystemField = z.enum([
 export const SMS_REMINDER_NUMBER_FIELD = "smsReminderNumber";
 export const CAL_AI_AGENT_PHONE_NUMBER_FIELD = "aiAgentCallPhoneNumber";
 export const TITLE_FIELD = "title";
+
+/**
+ * Check if a field should be displayed in custom responses section.
+ * System fields are filtered out except for SMS_REMINDER_NUMBER_FIELD and TITLE_FIELD
+ * which don't have dedicated sections in the UI.
+ */
+export function shouldShowFieldInCustomResponses(fieldName: string): boolean {
+  const isSystemField = SystemField.safeParse(fieldName);
+
+  // Filter out system fields except SMS_REMINDER_NUMBER_FIELD and TITLE_FIELD
+  // These don't have dedicated sections in the UI
+  if (isSystemField.success && fieldName !== SMS_REMINDER_NUMBER_FIELD && fieldName !== TITLE_FIELD) {
+    return false;
+  }
+
+  return true;
+}
@@ -498,6 +498,7 @@ export async function getBookings({
                "EventType.currency",
                "EventType.metadata",
                "EventType.disableGuests",
+                "EventType.bookingFields",
                "EventType.seatsPerTimeSlot",
                "EventType.seatsShowAttendees",
                "EventType.seatsShowAvailabilityCount",
@@ -91,16 +91,18 @@ SheetContent.displayName = "SheetContent";

 const SheetHeader = React.forwardRef<
  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div"> & { showCloseButton?: boolean }
->(({ children, className, showCloseButton = true, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<"div"> & { showCloseButton?: boolean; rightContent?: React.ReactNode }
+>(({ children, className, showCloseButton = true, rightContent, ...props }, ref) => {
  return (
    <div ref={ref} className="flex items-start justify-between gap-x-4 pb-2" {...props}>
      <div className={classNames("mt-1 flex flex-col gap-y-1", className)}>{children}</div>
-      {showCloseButton && (
-        <SheetPrimitives.Close asChild>
-          <Button variant="icon" StartIcon="x" color="minimal" className="aspect-square p-1" />
-        </SheetPrimitives.Close>
-      )}
+      {rightContent !== undefined
+        ? rightContent
+        : showCloseButton && (
+            <SheetPrimitives.Close asChild>
+              <Button variant="icon" StartIcon="x" color="minimal" className="aspect-square p-1" />
+            </SheetPrimitives.Close>
+          )}
    </div>
  );
 });
@@ -83,6 +83,35 @@ const shuffle = (
  booking.ratingFeedback = getRandomRatingFeedback(); // Random feedback from a predefined list
  booking.noShowHost = Math.random() < 0.5;

+  // Add random video call links to 40% of bookings
+  const random = Math.random();
+  if (random < 0.2) {
+    // 20% Google Meet
+    const randomMeetId = Math.random().toString(36).substring(2, 15);
+    booking.metadata = {
+      videoCallUrl: `https://meet.google.com/${randomMeetId}`,
+    };
+    booking.location = "integrations:google:meet";
+  } else if (random < 0.35) {
+    // 15% Zoom
+    const randomZoomId = Math.floor(Math.random() * 1000000000);
+    booking.metadata = {
+      videoCallUrl: `https://zoom.us/j/${randomZoomId}`,
+    };
+    booking.location = "integrations:zoom";
+  } else if (random < 0.4) {
+    // 5% Cal Video
+    booking.metadata = {
+      videoCallUrl: `https://cal.com/video/${uuidv4()}`,
+    };
+    booking.location = "integrations:daily";
+  }
+
+  // Add recurring event ID to 10% of bookings from recurring events
+  if (randomEvent.recurringEvent && Math.random() < 0.1) {
+    booking.recurringEventId = uuidv4();
+  }
+
  return booking;
 };

@@ -103,6 +132,173 @@ async function createAttendees(bookings: any[]) {
  }
 }

+async function createPayments(bookings: any[]) {
+  // Filter for paid bookings
+  const paidBookings = bookings.filter((booking) => booking.paid);
+
+  if (paidBookings.length === 0) {
+    console.log("No paid bookings found, skipping payment creation");
+    return;
+  }
+
+  console.log(`Creating payments for ${paidBookings.length} paid bookings...`);
+
+  for (const booking of paidBookings) {
+    // Use event type's price and currency, with fallback to defaults
+    const amount = booking.eventType?.price || 5000; // Default to $50.00 if not set
+    const currency = booking.eventType?.currency || "usd";
+    const externalIdPrefix = "ch_"; // Stripe charge ID
+
+    await prisma.payment.create({
+      data: {
+        uid: uuidv4(),
+        appId: "stripe",
+        bookingId: booking.id,
+        amount,
+        fee: Math.floor(amount * 0.029) + 30, // Typical Stripe fee: 2.9% + $0.30
+        currency,
+        success: true,
+        refunded: false,
+        data: {},
+        externalId: `${externalIdPrefix}${uuidv4().substring(0, 24)}`,
+      },
+    });
+  }
+
+  console.log(`Successfully created payments for ${paidBookings.length} bookings`);
+}
+
+async function createPaidEventTypeAndBookings(organizationId: number) {
+  console.log("Creating paid event type and bookings...");
+
+  // Find the insights team
+  const insightsTeam = await prisma.team.findFirst({
+    where: {
+      slug: "insights-team",
+      parentId: organizationId,
+    },
+  });
+
+  if (!insightsTeam) {
+    console.log("Insights team not found, skipping paid event type creation");
+    return;
+  }
+
+  // Get team members
+  const insightsTeamMembers = await prisma.membership.findMany({
+    where: {
+      teamId: insightsTeam.id,
+    },
+    include: {
+      user: true,
+    },
+  });
+
+  if (insightsTeamMembers.length === 0) {
+    console.log("No team members found, skipping paid event type creation");
+    return;
+  }
+
+  // Check if paid event type already exists
+  let paidEventType = await prisma.eventType.findFirst({
+    where: {
+      slug: "paid-consultation",
+      teamId: insightsTeam.id,
+    },
+  });
+
+  // Create paid event type if it doesn't exist
+  if (!paidEventType) {
+    paidEventType = await prisma.eventType.create({
+      data: {
+        title: "Paid Consultation",
+        slug: "paid-consultation",
+        description: "1-hour paid consultation session",
+        length: 60,
+        teamId: insightsTeam.id,
+        schedulingType: "ROUND_ROBIN",
+        assignAllTeamMembers: true,
+        price: 5000, // $50.00
+        currency: "usd",
+        metadata: {
+          apps: {
+            stripe: {
+              price: 5000,
+              currency: "usd",
+              enabled: true,
+            },
+          },
+        },
+      },
+    });
+
+    // Create Host records for all team members
+    await prisma.host.createMany({
+      data: insightsTeamMembers.map((member) => ({
+        userId: member.user.id,
+        eventTypeId: paidEventType!.id,
+        isFixed: false,
+      })),
+      skipDuplicates: true,
+    });
+
+    console.log(`Created paid event type: ${paidEventType.title}`);
+  }
+
+  // Create 100 paid bookings
+  const baseBooking = {
+    uid: "demoUID",
+    title: "Paid Consultation",
+    description: "1-hour paid consultation session",
+    startTime: dayjs().toISOString(),
+    endTime: dayjs().toISOString(),
+    userId: insightsTeamMembers[0].user.id,
+  };
+
+  console.log(`Creating 100 paid bookings for event type: ${paidEventType.title}`);
+  await prisma.booking.createMany({
+    data: [
+      ...new Array(100).fill(0).map(() => {
+        const booking = shuffle(
+          { ...baseBooking },
+          dayjs().get("y"),
+          [paidEventType!],
+          insightsTeamMembers.map((m) => m.user.id)
+        );
+        // Override status for paid bookings - they should always be accepted
+        booking.status = "ACCEPTED";
+        booking.paid = true;
+        booking.rescheduled = false;
+        return booking;
+      }),
+    ],
+  });
+
+  // Get the paid bookings we just created
+  const paidBookings = await prisma.booking.findMany({
+    where: {
+      eventTypeId: paidEventType.id,
+      paid: true,
+    },
+    include: {
+      eventType: {
+        select: {
+          price: true,
+          currency: true,
+        },
+      },
+    },
+  });
+
+  // Create attendees for paid bookings
+  await createAttendees(paidBookings);
+
+  // Create payments for paid bookings
+  await createPayments(paidBookings);
+
+  console.log(`Successfully created ${paidBookings.length} paid bookings with payments`);
+}
+
 async function seedBookingAssignments() {
  const assignmentReasons = [
    AssignmentReasonEnum.ROUTING_FORM_ROUTING,
@@ -218,6 +414,7 @@ async function main() {
      teamId: true,
      userId: true,
      assignAllTeamMembers: true,
+      recurringEvent: true,
    },
  });

@@ -251,6 +448,20 @@ async function main() {
          schedulingType: "ROUND_ROBIN",
          assignAllTeamMembers: true,
        },
+        {
+          title: "Weekly Standup",
+          slug: "weekly-standup",
+          description: "Weekly team standup meeting",
+          length: 30,
+          teamId: insightsTeam.id,
+          schedulingType: "ROUND_ROBIN",
+          assignAllTeamMembers: true,
+          recurringEvent: {
+            freq: 2, // Weekly (RRULE freq: WEEKLY = 2)
+            count: 10,
+            interval: 1,
+          },
+        },
      ],
    });

@@ -267,6 +478,7 @@ async function main() {
        teamId: true,
        userId: true,
        assignAllTeamMembers: true,
+        recurringEvent: true,
      },
    });

@@ -343,7 +555,8 @@ async function main() {
    ],
  });

-  await createAttendees(await prisma.booking.findMany());
+  const allBookings = await prisma.booking.findMany();
+  await createAttendees(allBookings);

  // Find owner of the organization
  const owner = orgMembers.find((m) => m.role === "OWNER" || m.role === "ADMIN");
@@ -364,29 +577,31 @@ async function main() {
  }

  await seedBookingAssignments();
+
+  // Create paid event type and bookings separately
+  await createPaidEventTypeAndBookings(organization.id);
 }

 async function runMain() {
-  await main()
-    .catch(async (e) => {
-      console.error(e);
-      await prisma.user.deleteMany({
-        where: {
-          email: {
-            in: ["insights@example", "insightsuser@example.com"],
-          },
+  await main().catch(async (e) => {
+    console.error(e);
+    await prisma.user.deleteMany({
+      where: {
+        email: {
+          in: ["insights@example", "insightsuser@example.com"],
        },
-      });
-
-      await prisma.team.deleteMany({
-        where: {
-          slug: "insights",
-        },
-      });
-
-      await prisma.$disconnect();
-      process.exit(1);
+      },
    });
+
+    await prisma.team.deleteMany({
+      where: {
+        slug: "insights",
+      },
+    });
+
+    await prisma.$disconnect();
+    process.exit(1);
+  });
 }

 /**
@@ -525,19 +740,18 @@ async function createPerformanceData() {
 }

 async function runPerformanceData() {
-  await createPerformanceData()
-    .catch(async (e) => {
-      console.error(e);
-      await prisma.user.deleteMany({
-        where: {
-          username: {
-            contains: "insights-user-",
-          },
+  await createPerformanceData().catch(async (e) => {
+    console.error(e);
+    await prisma.user.deleteMany({
+      where: {
+        username: {
+          contains: "insights-user-",
        },
-      });
-      await prisma.$disconnect();
-      process.exit(1);
+      },
    });
+    await prisma.$disconnect();
+    process.exit(1);
+  });
 }

 async function runEverything() {