feat: delete past bookings

apps/web/components/booking/BookingListItem.tsx

@@ -26,6 +26,7 @@ import type { ActionType } from "@calcom/ui";
 import {
   Badge,
   Button,
+  ConfirmationDialogContent,
   Dialog,
   DialogClose,
   DialogContent,
@@ -118,6 +119,7 @@ function BookingListItem(booking: BookingItemProps) {
   const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
   const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState<boolean>(false);
   const [isNoShowDialogOpen, setIsNoShowDialogOpen] = useState<boolean>(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
   const cardCharged = booking?.payment[0]?.success;
   const mutation = trpc.viewer.bookings.confirm.useMutation({
     onSuccess: (data) => {
@@ -289,6 +291,17 @@ function BookingListItem(booking: BookingItemProps) {
     });
   }
 
+  if (isBookingInPast) {
+    editBookingActions.push({
+      id: "delete",
+      label: t("delete_booking"),
+      onClick: () => {
+        setDeleteDialogOpen(true);
+      },
+      icon: "trash",
+    });
+  }
+
   let bookedActions: ActionType[] = [
     {
       id: "cancel",
@@ -431,6 +444,22 @@ function BookingListItem(booking: BookingItemProps) {
     };
   });
 
+  const deleteMutation = trpc.viewer.bookings.delete.useMutation({
+    onSuccess: () => {
+      showToast(t("booking_deleted_successfully"), "success");
+      setDeleteDialogOpen(false);
+      // Invalidate the bookings query to refresh the list
+      utils.viewer.bookings.invalidate();
+    },
+    onError: (err) => {
+      showToast(err.message, "error");
+    },
+  });
+
+  const deleteBookingHandler = (id: number) => {
+    deleteMutation.mutate({ id });
+  };
+
   return (
     <>
       <RescheduleDialog
@@ -512,6 +541,22 @@ function BookingListItem(booking: BookingItemProps) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <ConfirmationDialogContent
+          variety="danger"
+          title={t("delete_booking_dialog_title")}
+          confirmBtnText={t("confirm_delete_booking")}
+          loadingText={t("confirm_delete_booking")}
+          isPending={deleteMutation.isPending}
+          onConfirm={(e) => {
+            e.preventDefault();
+            deleteBookingHandler(booking.id);
+          }}>
+          <p className="mt-5">{t("delete_booking_description")}</p>
+        </ConfirmationDialogContent>
+      </Dialog>
+
       <div
         data-testid="booking-item"
         data-today={String(booking.isToday)}

apps/web/components/booking/DeletePastBookingsSection.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, showToast } from "@calcom/ui";
+
+interface DeletePastBookingsSectionProps {
+  bookingsCount: number;
+  bookingIds: number[];
+}
+
+export const DeletePastBookingsSection = ({ bookingsCount, bookingIds }: DeletePastBookingsSectionProps) => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+
+  const deletePastBookingsMutation = trpc.viewer.bookings.deletePastBookings.useMutation({
+    onSuccess: (data) => {
+      showToast(data.message, "success");
+      utils.viewer.bookings.get.invalidate();
+    },
+    onError: (error) => {
+      showToast(error.message, "error");
+    },
+  });
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleDeletePastBookings = () => {
+    deletePastBookingsMutation.mutate({ bookingIds });
+    setIsDialogOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        type="button"
+        className="mb-4"
+        color="destructive"
+        onClick={() => setIsDialogOpen(true)}
+        disabled={deletePastBookingsMutation.status === "pending"}>
+        {t("delete_past_bookings")}
+      </Button>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent>
+          <DialogHeader title={t("delete_past_bookings")} />
+          <p className="mb-4">
+            {t("confirm_delete_past_bookings")}
+            <br />
+            <span className="mt-2 block font-medium">
+              {bookingsCount} {bookingsCount === 1 ? "booking" : "bookings"} will be deleted.
+            </span>
+          </p>
+          <DialogFooter>
+            <Button color="minimal" onClick={() => setIsDialogOpen(false)}>
+              {t("cancel")}
+            </Button>
+            <Button
+              type="button"
+              color="destructive"
+              onClick={handleDeletePastBookings}
+              disabled={deletePastBookingsMutation.status === "pending"}>
+              {t("confirm")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -26,6 +26,7 @@ import { Alert, EmptyScreen, HorizontalTabs } from "@calcom/ui";
 import useMeQuery from "@lib/hooks/useMeQuery";
 
 import BookingListItem from "@components/booking/BookingListItem";
+import { DeletePastBookingsSection } from "@components/booking/DeletePastBookingsSection";
 import SkeletonLoader from "@components/booking/SkeletonLoader";
 
 import type { validStatuses } from "~/bookings/lib/validStatuses";
@@ -96,7 +97,6 @@ type RowData =
 
 function BookingsContent({ status }: BookingsProps) {
   const { data: filterQuery } = useFilterQuery();
-
   const { t } = useLocale();
   const user = useMeQuery().data;
   const [isFiltersVisible, setIsFiltersVisible] = useState<boolean>(false);
@@ -155,7 +155,7 @@ function BookingsContent({ status }: BookingsProps) {
         },
       }),
     ];
-  }, [user, status]);
+  }, [user, status, t]);
 
   const isEmpty = useMemo(() => !query.data?.pages[0]?.bookings.length, [query.data]);
 
@@ -242,9 +242,19 @@ function BookingsContent({ status }: BookingsProps) {
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-row flex-wrap justify-between">
+      <div className="flex items-center justify-between border-b">
         <HorizontalTabs tabs={tabs} />
-        <FilterToggle setIsFiltersVisible={setIsFiltersVisible} />
+        <div className="flex items-center gap-1">
+          {status === "past" && (
+            <DeletePastBookingsSection
+              bookingsCount={flatData.length}
+              bookingIds={flatData
+                .map((item) => (item.type === "data" ? item.booking.id : null))
+                .filter((id): id is number => id !== null)}
+            />
+          )}
+          <FilterToggle setIsFiltersVisible={setIsFiltersVisible} />
+        </div>
       </div>
       <FiltersContainer isFiltersVisible={isFiltersVisible} />
       <main className="w-full">

apps/web/public/static/locales/en/common.json

@@ -2953,5 +2953,13 @@
   "desc": "Desc",
   "verify_email": "Verify email",
   "verify_email_change": "Verify email change",
-  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
+  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑",
+  "delete_booking": "Delete",
+  "delete_booking_dialog_title": "Delete booking?",
+  "confirm_delete_booking": "Confirm",
+  "delete_booking_description":"This action will delete booking from your history.",
+  "booking_deleted_successfully": "Your booking was deleted.",
+  "delete_past_bookings": "Delete Past Bookings",
+  "confirm_delete_past_bookings": "Are you sure you want to delete all past bookings? This action cannot be undone.",
+  "past_bookings_deleted_successfully": "Past bookings deleted successfully"
 }

packages/trpc/server/routers/viewer/bookings/_router.tsx

@@ -3,6 +3,8 @@ import publicProcedure from "../../../procedures/publicProcedure";
 import { router } from "../../../trpc";
 import { ZAddGuestsInputSchema } from "./addGuests.schema";
 import { ZConfirmInputSchema } from "./confirm.schema";
+import { ZDeleteInputSchema } from "./delete.schema";
+import { ZDeletePastBookingsSchema } from "./deletePastBookings.schema";
 import { ZEditLocationInputSchema } from "./editLocation.schema";
 import { ZFindInputSchema } from "./find.schema";
 import { ZGetInputSchema } from "./get.schema";
@@ -20,6 +22,8 @@ type BookingsRouterHandlerCache = {
   getBookingAttendees?: typeof import("./getBookingAttendees.handler").getBookingAttendeesHandler;
   find?: typeof import("./find.handler").getHandler;
   getInstantBookingLocation?: typeof import("./getInstantBookingLocation.handler").getHandler;
+  delete?: typeof import("./delete.handler").deleteHandler;
+  deletePastBookings?: typeof import("./deletePastBookings.handler").deletePastBookingsHandler;
 };
 
 const UNSTABLE_HANDLER_CACHE: BookingsRouterHandlerCache = {};
@@ -165,4 +169,36 @@ export const bookingsRouter = router({
         input,
       });
     }),
+
+  delete: authedProcedure.input(ZDeleteInputSchema).mutation(async ({ input, ctx }) => {
+    if (!UNSTABLE_HANDLER_CACHE.delete) {
+      UNSTABLE_HANDLER_CACHE.delete = await import("./delete.handler").then((mod) => mod.deleteHandler);
+    }
+
+    if (!UNSTABLE_HANDLER_CACHE.delete) {
+      throw new Error("Failed to load handler");
+    }
+
+    return UNSTABLE_HANDLER_CACHE.delete({
+      ctx,
+      input,
+    });
+  }),
+
+  deletePastBookings: authedProcedure.input(ZDeletePastBookingsSchema).mutation(async ({ ctx, input }) => {
+    if (!UNSTABLE_HANDLER_CACHE.deletePastBookings) {
+      UNSTABLE_HANDLER_CACHE.deletePastBookings = await import("./deletePastBookings.handler").then(
+        (mod) => mod.deletePastBookingsHandler
+      );
+    }
+
+    if (!UNSTABLE_HANDLER_CACHE.deletePastBookings) {
+      throw new Error("Failed to load handler");
+    }
+
+    return UNSTABLE_HANDLER_CACHE.deletePastBookings({
+      ctx,
+      input,
+    });
+  }),
 });

packages/trpc/server/routers/viewer/bookings/delete.handler.ts

@@ -0,0 +1,54 @@
+import { prisma } from "@calcom/prisma";
+import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
+
+import type { TDeleteInputSchema } from "./delete.schema";
+
+type DeleteOptions = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: TDeleteInputSchema;
+};
+
+export const deleteHandler = async ({ ctx, input }: DeleteOptions) => {
+  const { id } = input;
+  const { user } = ctx;
+
+  const booking = await prisma.booking.findFirst({
+    where: {
+      id: id,
+      OR: [
+        {
+          userId: user.id,
+        },
+        {
+          attendees: {
+            some: {
+              email: user.email,
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      attendees: true,
+      references: true,
+      payment: true,
+      workflowReminders: true,
+    },
+  });
+
+  if (!booking) {
+    throw new Error("Booking not found");
+  }
+
+  await prisma.booking.delete({
+    where: {
+      id: booking.id,
+    },
+  });
+
+  return {
+    message: "Booking deleted successfully",
+  };
+};

packages/trpc/server/routers/viewer/bookings/delete.schema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const ZDeleteInputSchema = z.object({
+  id: z.number(),
+});
+
+export type TDeleteInputSchema = z.infer<typeof ZDeleteInputSchema>;

packages/trpc/server/routers/viewer/bookings/deletePastBookings.handler.ts

@@ -0,0 +1,37 @@
+import { prisma } from "@calcom/prisma";
+import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
+
+import type { TDeletePastBookingsSchema } from "./deletePastBookings.schema";
+
+type DeletePastBookingsOptions = {
+  ctx: {
+    user: NonNullable<TrpcSessionUser>;
+  };
+  input: TDeletePastBookingsSchema;
+};
+
+export const deletePastBookingsHandler = async ({ ctx, input }: DeletePastBookingsOptions) => {
+  const { user } = ctx;
+  const { bookingIds } = input;
+
+  const result = await prisma.booking.deleteMany({
+    where: {
+      id: { in: bookingIds },
+      OR: [
+        { userId: user.id },
+        {
+          attendees: {
+            some: { email: user.email },
+          },
+        },
+      ],
+      status: { notIn: ["CANCELLED", "REJECTED"] },
+      endTime: { lt: new Date() },
+    },
+  });
+
+  return {
+    count: result.count,
+    message: `${result.count} bookings deleted successfully`,
+  };
+};

packages/trpc/server/routers/viewer/bookings/deletePastBookings.schema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const ZDeletePastBookingsSchema = z.object({
+  bookingIds: z.number().array(),
+});
+
+export type TDeletePastBookingsSchema = z.infer<typeof ZDeletePastBookingsSchema>;