feat(bookings): improve bookings redesign (calcom#25251)

* use booking.uid instead of booking.id for url param

* show timezone on calendar

* fix type

* restore horizontal tab and remove header and subtitle

* clean up sidebar items

* fix event propagation from attendees

* fetch all statuses except for cancelled on calendar view

* clean up styles of the badges on BookingListItem

* fix useMediaQuery

* add close button to the header

* add assignment reason to the details sheet

* use separator row

* use ToggleGroup for the top bookings tab

* move ViewToggleButton

* resize the action button

* remove wrong prop

* fix type error

* fix type error

* hide view toggle button on mobile (and fix the breakpoint)

* remove unused e2e tests

* fix e2e tests

* hide toggle button when feature flag is off

* update skeleton

* improve attendees on booking list item and slide over

* improve attendee dropdown

* fix type error

* move query to containers

* select attendee email

* infinite fetching for calendar view

* update styles

* fix compatibility

* fix: add backward compatibility for status field in getAllUserBookings

* increase calendar height

* fix type error

* support Member filter only for admin / owners

* add debug log (TEMP)

* add event border color

* show Reject / Accept buttons on BookingDetailsSheet

* move description section to the top

* update When section

* update style of Who section

* add CancelBookingDialog WIP

* fix CancelBookingDialog

* increase clickable area

* add schedule info section WIP

* fix flaky reject button

* fixing reschedule info WIP

* add fromReschedule index to Booking

* improve rescheduled information

* improve reassignment

* fix type error

* fix unit test

* respect user's weekStart value on the booking calendar view

* update debug log

* improve payment section

* clean up

* fix log message

* reposition filters on list view

* fix bookings controller api2 e2e test

* clean up file by extracting logic into custom hooks

* rename files

* merge BookingCalendar into its container

* extract logic into separate hook files

* remove redundant logic

* rearrange items on calendar view

* add WeekPicker

* extract filter button

* responsive header on list view

* horizontal scroll for ToggleGroup WIP

* fix type error

* fix cancelling recurring event

* address feedback

* fix e2e tests

* fix unit test

* fix e2e tests

* make hover style more visible for ToggleGroup

* fix margin on CancelBookingDialog

* update styles on the slide over (mostly font weight)

* update style of CancelBookingDialog

* update styles

* update margin top for the header

* refactor getBookingDetails handler

* fix gap in who section

* auto-filter the current user on the calendar view

* calculate calendar height considering top banners

* improve booking details sheet interaction without overlay

* update calendar event styles

* update reject dialog style

* put uid first in the query params

* fix class name

* memoize functions in useMediaQuery

* query attendee with id instead of email

* update margins

* replace TRPCError with ErrorWithCode

* move calculation outside loop

* remove dead code

Author: eunjae-lee

apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx

@@ -1,6 +1,6 @@
 import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import type { PageProps } from "app/_types";
-import { _generateMetadata, getTranslate } from "app/_utils";
+import { _generateMetadata } from "app/_utils";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 import { z } from "zod";
@@ -16,8 +16,6 @@ import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 import { validStatuses } from "~/bookings/lib/validStatuses";
 import BookingsList from "~/bookings/views/bookings-view";
 
-import { ViewToggleButton } from "./ViewToggleButton";
-
 const querySchema = z.object({
   status: z.enum(validStatuses),
 });
@@ -36,7 +34,6 @@ const Page = async ({ params }: PageProps) => {
   if (!parsed.success) {
     redirect("/bookings/upcoming");
   }
-  const t = await getTranslate();
   const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
 
   let canReadOthersBookings = false;
@@ -64,10 +61,7 @@ const Page = async ({ params }: PageProps) => {
     : false;
 
   return (
-    <ShellMainAppDir
-      heading={t("bookings")}
-      subtitle={t("bookings_description")}
-      CTA={bookingsV3Enabled ? <ViewToggleButton /> : null}>
+    <ShellMainAppDir>
       <BookingsList
         status={parsed.data.status}
         userId={session?.user?.id}

apps/web/components/apps/wipemycalother/wipeMyCalActionButton.tsx

@@ -6,12 +6,13 @@ import { Button } from "@calcom/ui/components/button";
 import { ConfirmDialog } from "./confirmDialog";
 
 interface IWipeMyCalActionButtonProps {
+  className?: string;
   bookingsEmpty: boolean;
   bookingStatus: "upcoming" | "recurring" | "past" | "cancelled" | "unconfirmed";
 }
 
 const WipeMyCalActionButton = (props: IWipeMyCalActionButtonProps) => {
-  const { bookingsEmpty, bookingStatus } = props;
+  const { className, bookingsEmpty, bookingStatus } = props;
   const [openDialog, setOpenDialog] = useState(false);
   const { isSuccess, isPending, data } = trpc.viewer.apps.integrations.useQuery({
     variant: "other",
@@ -28,7 +29,7 @@ const WipeMyCalActionButton = (props: IWipeMyCalActionButtonProps) => {
   return (
     <>
       {data && isSuccess && !isPending && credentialId && (
-        <div className="mb-4">
+        <div className={className}>
           <ConfirmDialog isOpenDialog={openDialog} setIsOpenDialog={setOpenDialog} />
           <Button color="primary" onClick={() => setOpenDialog(true)} data-testid="wipe-today-button">
             Wipe Today

apps/web/components/booking/AcceptBookingButton.tsx

@@ -0,0 +1,51 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+
+import { useBookingConfirmation } from "./hooks/useBookingConfirmation";
+
+interface AcceptBookingButtonProps {
+  bookingId: number;
+  bookingUid: string;
+  recurringEventId?: string | null;
+  isRecurring?: boolean;
+  isTabRecurring?: boolean;
+  isTabUnconfirmed?: boolean;
+  size?: "sm" | "base" | "lg";
+  color?: "primary" | "secondary" | "minimal" | "destructive";
+  className?: string;
+}
+
+export function AcceptBookingButton({
+  bookingId,
+  bookingUid,
+  recurringEventId,
+  isRecurring = false,
+  isTabRecurring = false,
+  isTabUnconfirmed = false,
+  size = "base",
+  color = "primary",
+  className,
+}: AcceptBookingButtonProps) {
+  const { t } = useLocale();
+
+  const { bookingConfirm, isPending } = useBookingConfirmation({
+    isRecurring,
+    isTabRecurring,
+    isTabUnconfirmed,
+  });
+
+  const confirmLabel = (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm");
+
+  return (
+    <Button
+      color={color}
+      size={size}
+      className={className}
+      onClick={() => bookingConfirm({ bookingId, confirmed: true, recurringEventId })}
+      disabled={isPending}
+      data-booking-uid={bookingUid}
+      data-testid="confirm">
+      {confirmLabel}
+    </Button>
+  );
+}