From 307fd87664bd49d7894a92e2816ba33401eff19a Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 16 Jul 2025 02:36:01 +0530
Subject: [PATCH 01/13] refactor: Booking list items actions UI

---
 .../components/booking/BookingListItem.tsx    | 205 ++++++++++++++++--
 apps/web/public/static/locales/en/common.json |   3 +-
 2 files changed, 185 insertions(+), 23 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 7f712dcfbd33cc..2bfa70c0679477 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -42,7 +42,6 @@ import { TextAreaField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { MeetingTimeInTimezones } from "@calcom/ui/components/popover";
 import type { ActionType } from "@calcom/ui/components/table";
-import { TableActions } from "@calcom/ui/components/table";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -491,6 +490,186 @@ function BookingListItem(booking: BookingItemProps) {
   ];
 
   const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
+  const Actions = () => {
+    // Build all possible actions, disabling as needed
+    const editEventActions: ActionType[] = [
+      // Reschedule
+      {
+        id: "reschedule",
+        icon: "clock",
+        label: t("reschedule_booking"),
+        href: `/reschedule/${booking.uid}${
+          booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
+        }`,
+        disabled: isBookingInPast && !booking.eventType.allowReschedulingPastBookings,
+      },
+      // Request reschedule
+      {
+        id: "reschedule_request",
+        icon: "send",
+        iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
+        label: t("send_reschedule_request"),
+        onClick: () => setIsOpenRescheduleDialog(true),
+        disabled: isBookingInPast && !booking.eventType.allowReschedulingPastBookings,
+      },
+      // Reroute (if team booking)
+      isBookingFromRoutingForm
+        ? {
+            id: "reroute",
+            label: t("reroute"),
+            onClick: () => setRerouteDialogIsOpen(true),
+            icon: "waypoints",
+            disabled: false,
+          }
+        : null,
+      // Edit location
+      {
+        id: "change_location",
+        label: t("edit_location"),
+        onClick: () => setIsOpenLocationDialog(true),
+        icon: "map-pin",
+        disabled: false,
+      },
+      // Add guests
+      booking.eventType?.disableGuests
+        ? null
+        : {
+            id: "add_members",
+            label: t("additional_guests"),
+            onClick: () => setIsOpenAddGuestsDialog(true),
+            icon: "user-plus",
+            disabled: false,
+          },
+      // Reassign (if round robin)
+      booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN
+        ? {
+            id: "reassign",
+            label: t("reassign"),
+            onClick: () => setIsOpenReassignDialog(true),
+            icon: "users",
+            disabled: false,
+          }
+        : null,
+      ...(isPending ? pendingActions : []),
+    ].filter(Boolean) as ActionType[];
+
+    const cancelEventAction: ActionType = {
+      id: "cancel",
+      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
+      href: `/booking/${booking.uid}?cancel=true${
+        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
+      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
+      icon: "close",
+      color: "destructive",
+      disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
+    };
+
+    // After event actions
+    const afterEventActions: ActionType[] = [
+      {
+        id: "view_recordings",
+        label: t("view_recordings"),
+        onClick: () => setViewRecordingsDialogIsOpen(true),
+        icon: "video",
+        disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation && booking.isRecorded),
+      },
+      {
+        id: "meeting_session_details",
+        label: t("view_session_details"),
+        onClick: () => setMeetingSessionDetailsDialogIsOpen(true),
+        icon: "info",
+        disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation),
+      },
+      booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
+        ? {
+            id: "charge_card",
+            label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
+            onClick: () => setChargeCardDialogIsOpen(true),
+            icon: "credit-card",
+            disabled: cardCharged,
+          }
+        : null,
+      {
+        id: "no_show",
+        label:
+          attendeeList.length === 1 && attendeeList[0].noShow ? t("unmark_as_no_show") : t("mark_as_no_show"),
+        onClick: () => {
+          if (attendeeList.length === 1) {
+            const attendee = attendeeList[0];
+            noShowMutation.mutate({
+              bookingUid: booking.uid,
+              attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
+            });
+            return;
+          }
+          setIsNoShowDialogOpen(true);
+        },
+        icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : "eye-off",
+        disabled: !(isBookingInPast || isOngoing),
+      },
+    ].filter(Boolean) as ActionType[];
+
+    return (
+      <Dropdown>
+        <DropdownMenuTrigger asChild>
+          <Button type="button" color="secondary" variant="icon" StartIcon="ellipsis" />
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuContent>
+            {/* Edit Event Section */}
+            <DropdownMenuLabel>{t("edit_event")}</DropdownMenuLabel>
+            {editEventActions.map((action) => (
+              <DropdownMenuItem key={action.id}>
+                <DropdownItem
+                  type="button"
+                  color={action.color}
+                  StartIcon={action.icon}
+                  href={action.href}
+                  disabled={action.disabled}
+                  onClick={action.onClick}
+                  data-bookingid={action.bookingId}
+                  className={action.disabled ? "text-muted" : undefined}>
+                  {action.label}
+                </DropdownItem>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            {/* After Event Section */}
+            <DropdownMenuLabel>{t("after_event")}</DropdownMenuLabel>
+            {afterEventActions.map((action) => (
+              <DropdownMenuItem key={action.id} disabled={action.disabled}>
+                <DropdownItem
+                  type="button"
+                  color={action.color}
+                  StartIcon={action.icon}
+                  href={action.href}
+                  onClick={action.onClick}
+                  disabled={action.disabled}
+                  data-bookingid={action.bookingId}
+                  className={action.disabled ? "text-muted" : undefined}>
+                  {action.label}
+                </DropdownItem>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem key="no_show" disabled={cancelEventAction.disabled}>
+              <DropdownItem
+                type="button"
+                color={cancelEventAction.color}
+                StartIcon={cancelEventAction.icon}
+                href={cancelEventAction.href}
+                onClick={cancelEventAction.onClick}
+                disabled={cancelEventAction.disabled}
+                data-bookingid={cancelEventAction.bookingId}
+                className={cancelEventAction.disabled ? "text-muted" : undefined}>
+                {cancelEventAction.label}
+              </DropdownItem>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenuPortal>
+      </Dropdown>
+    );
+  };
 
   return (
     <>
@@ -726,32 +905,14 @@ function BookingListItem(booking: BookingItemProps) {
             </Link>
           </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">
-            {isUpcoming && !isCancelled ? (
-              <>
-                {isPending && <TableActions actions={pendingActions} />}
-                {isConfirmed && <TableActions actions={bookedActions} />}
-                {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
-              </>
-            ) : null}
-            {isBookingInPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
-            {isBookingInPast && isConfirmed ? <TableActions actions={bookedActions} /> : null}
-            {isCalVideoLocation && (
-              <TableActions
-                actions={[{ id: "video_options", label: t("video_options"), actions: videoOptionsActions }]}
-              />
-            )}
+            {/* Refactored: Single three-dot dropdown for all actions, always visible, disabled if not relevant */}
+            <Actions />
+            {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             {isCancelled && booking.rescheduled && (
               <div className="hidden h-full items-center md:flex">
                 <RequestSentMessage />
               </div>
             )}
-            {booking.status === "ACCEPTED" &&
-              booking.paid &&
-              booking.payment[0]?.paymentOption === "HOLD" && (
-                <div className="ml-2">
-                  <TableActions actions={chargeCardActions} />
-                </div>
-              )}
           </div>
         </div>
         <BookingItemBadges
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index cbdf0db137767e..21cc134836367f 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -49,7 +49,8 @@
   "disable_recording_for_guests": "Disable recording for guests",
   "enable_automatic_transcription": "Enable automatic transcription after joining the meeting",
   "video_options": "Video Options",
-  "get_meeting_session_details": "Get Meeting Session Details",
+  "edit_event": "Edit Event",
+  "view_session_details": "View Session Details",
   "meeting_session_details": "Meeting Session Details",
   "meeting_session": "Meeting Session",
   "session_id": "Session ID",

From b1fc96a84feb8eec5e4d25b1eb7bb7433dcc670f Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 16 Jul 2025 15:45:11 +0530
Subject: [PATCH 02/13] chore: save

---
 .../components/booking/BookingListItem.tsx    | 50 +++++--------------
 1 file changed, 13 insertions(+), 37 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 2bfa70c0679477..49216690aa86c8 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -41,6 +41,7 @@ import {
 import { TextAreaField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { MeetingTimeInTimezones } from "@calcom/ui/components/popover";
+import { TableActions } from "@calcom/ui/components/table";
 import type { ActionType } from "@calcom/ui/components/table";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -472,28 +473,23 @@ function BookingListItem(booking: BookingItemProps) {
   const videoOptionsActions: ActionType[] = [
     {
       id: "view_recordings",
-      label: showCheckRecordingButton ? t("check_for_recordings") : t("view_recordings"),
-      onClick: () => {
-        setViewRecordingsDialogIsOpen(true);
-      },
-      color: showCheckRecordingButton ? "secondary" : "primary",
-      disabled: mutation.isPending,
+      label: t("view_recordings"),
+      onClick: () => setViewRecordingsDialogIsOpen(true),
+      icon: "video",
+      disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation && booking.isRecorded),
     },
     {
       id: "meeting_session_details",
-      label: t("get_meeting_session_details"),
-      onClick: () => {
-        setMeetingSessionDetailsDialogIsOpen(true);
-      },
-      disabled: mutation.isPending,
+      label: t("view_session_details"),
+      onClick: () => setMeetingSessionDetailsDialogIsOpen(true),
+      icon: "info",
+      disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation),
     },
   ];
 
   const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
   const Actions = () => {
-    // Build all possible actions, disabling as needed
     const editEventActions: ActionType[] = [
-      // Reschedule
       {
         id: "reschedule",
         icon: "clock",
@@ -503,7 +499,6 @@ function BookingListItem(booking: BookingItemProps) {
         }`,
         disabled: isBookingInPast && !booking.eventType.allowReschedulingPastBookings,
       },
-      // Request reschedule
       {
         id: "reschedule_request",
         icon: "send",
@@ -512,7 +507,6 @@ function BookingListItem(booking: BookingItemProps) {
         onClick: () => setIsOpenRescheduleDialog(true),
         disabled: isBookingInPast && !booking.eventType.allowReschedulingPastBookings,
       },
-      // Reroute (if team booking)
       isBookingFromRoutingForm
         ? {
             id: "reroute",
@@ -522,7 +516,6 @@ function BookingListItem(booking: BookingItemProps) {
             disabled: false,
           }
         : null,
-      // Edit location
       {
         id: "change_location",
         label: t("edit_location"),
@@ -530,7 +523,6 @@ function BookingListItem(booking: BookingItemProps) {
         icon: "map-pin",
         disabled: false,
       },
-      // Add guests
       booking.eventType?.disableGuests
         ? null
         : {
@@ -550,7 +542,6 @@ function BookingListItem(booking: BookingItemProps) {
             disabled: false,
           }
         : null,
-      ...(isPending ? pendingActions : []),
     ].filter(Boolean) as ActionType[];
 
     const cancelEventAction: ActionType = {
@@ -559,27 +550,13 @@ function BookingListItem(booking: BookingItemProps) {
       href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
-      icon: "close",
+      icon: "circle-x",
       color: "destructive",
       disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
     };
 
-    // After event actions
     const afterEventActions: ActionType[] = [
-      {
-        id: "view_recordings",
-        label: t("view_recordings"),
-        onClick: () => setViewRecordingsDialogIsOpen(true),
-        icon: "video",
-        disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation && booking.isRecorded),
-      },
-      {
-        id: "meeting_session_details",
-        label: t("view_session_details"),
-        onClick: () => setMeetingSessionDetailsDialogIsOpen(true),
-        icon: "info",
-        disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation),
-      },
+      ...videoOptionsActions,
       booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
         ? {
             id: "charge_card",
@@ -634,7 +611,6 @@ function BookingListItem(booking: BookingItemProps) {
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
-            {/* After Event Section */}
             <DropdownMenuLabel>{t("after_event")}</DropdownMenuLabel>
             {afterEventActions.map((action) => (
               <DropdownMenuItem key={action.id} disabled={action.disabled}>
@@ -905,8 +881,8 @@ function BookingListItem(booking: BookingItemProps) {
             </Link>
           </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">
-            {/* Refactored: Single three-dot dropdown for all actions, always visible, disabled if not relevant */}
-            <Actions />
+            {isPending && isUpcoming && !isCancelled && <TableActions actions={pendingActions} />}
+            {!isPending && <Actions />}
             {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             {isCancelled && booking.rescheduled && (
               <div className="hidden h-full items-center md:flex">

From 3012c7b3b5a36ad101d8c0c4171c35ee9532d9df Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 16 Jul 2025 16:32:45 +0530
Subject: [PATCH 03/13] fix: UI

---
 apps/web/components/booking/BookingListItem.tsx | 11 +++++------
 apps/web/public/static/locales/en/common.json   |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 49216690aa86c8..7f0f96ef21c733 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -593,10 +593,9 @@ function BookingListItem(booking: BookingItemProps) {
         </DropdownMenuTrigger>
         <DropdownMenuPortal>
           <DropdownMenuContent>
-            {/* Edit Event Section */}
-            <DropdownMenuLabel>{t("edit_event")}</DropdownMenuLabel>
+            <DropdownMenuLabel className="px-2 pb-1 pt-1.5">{t("edit_event")}</DropdownMenuLabel>
             {editEventActions.map((action) => (
-              <DropdownMenuItem key={action.id}>
+              <DropdownMenuItem className="rounded-lg" key={action.id} disabled={action.disabled}>
                 <DropdownItem
                   type="button"
                   color={action.color}
@@ -611,9 +610,9 @@ function BookingListItem(booking: BookingItemProps) {
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
-            <DropdownMenuLabel>{t("after_event")}</DropdownMenuLabel>
+            <DropdownMenuLabel className="px-2 pb-1 pt-1.5">{t("after_event")}</DropdownMenuLabel>
             {afterEventActions.map((action) => (
-              <DropdownMenuItem key={action.id} disabled={action.disabled}>
+              <DropdownMenuItem className="rounded-lg" key={action.id} disabled={action.disabled}>
                 <DropdownItem
                   type="button"
                   color={action.color}
@@ -628,7 +627,7 @@ function BookingListItem(booking: BookingItemProps) {
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
-            <DropdownMenuItem key="no_show" disabled={cancelEventAction.disabled}>
+            <DropdownMenuItem className="rounded-lg" key="no_show" disabled={cancelEventAction.disabled}>
               <DropdownItem
                 type="button"
                 color={cancelEventAction.color}
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 21cc134836367f..cc4eec8cc12899 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -49,7 +49,7 @@
   "disable_recording_for_guests": "Disable recording for guests",
   "enable_automatic_transcription": "Enable automatic transcription after joining the meeting",
   "video_options": "Video Options",
-  "edit_event": "Edit Event",
+  "edit_event": "Edit event",
   "view_session_details": "View Session Details",
   "meeting_session_details": "Meeting Session Details",
   "meeting_session": "Meeting Session",

From 7fbcd91169f3b5e1843ddca44915e44478343fbf Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 16 Jul 2025 21:19:47 +0530
Subject: [PATCH 04/13] fix: logic and remove unused

---
 .../components/booking/BookingListItem.tsx    | 180 ++----------------
 1 file changed, 19 insertions(+), 161 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 7f0f96ef21c733..58c9fc9d7fba88 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -191,6 +191,9 @@ function BookingListItem(booking: BookingItemProps) {
   );
   const provider = guessEventLocationType(location);
 
+  const isDisabledCancelling = booking.eventType.disableCancelling;
+  const isDisabledRescheduling = booking.eventType.disableRescheduling;
+
   const bookingConfirm = async (confirm: boolean) => {
     let body = {
       bookingId: booking.id,
@@ -242,146 +245,16 @@ function BookingListItem(booking: BookingItemProps) {
       : []),
   ];
 
-  const editBookingActions: ActionType[] = [
-    ...(isBookingInPast && !booking.eventType.allowReschedulingPastBookings
-      ? []
-      : [
-          {
-            id: "reschedule",
-            icon: "clock" as const,
-            label: t("reschedule_booking"),
-            href: `/reschedule/${booking.uid}${
-              booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
-            }`,
-          },
-          {
-            id: "reschedule_request",
-            icon: "send" as const,
-            iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
-            label: t("send_reschedule_request"),
-            onClick: () => {
-              setIsOpenRescheduleDialog(true);
-            },
-          },
-        ]),
-    ...(isBookingFromRoutingForm
-      ? [
-          {
-            id: "reroute",
-            label: t("reroute"),
-            onClick: () => {
-              setRerouteDialogIsOpen(true);
-            },
-            icon: "waypoints" as const,
-          },
-        ]
-      : []),
-    {
-      id: "change_location",
-      label: t("edit_location"),
-      onClick: () => {
-        setIsOpenLocationDialog(true);
-      },
-      icon: "map-pin" as const,
-    },
-    ...(booking.eventType?.disableGuests
-      ? []
-      : [
-          {
-            id: "add_members",
-            label: t("additional_guests"),
-            onClick: () => {
-              setIsOpenAddGuestsDialog(true);
-            },
-            icon: "user-plus" as const,
-          },
-        ]),
-  ];
-
-  if (booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN) {
-    editBookingActions.push({
-      id: "reassign ",
-      label: t("reassign"),
-      onClick: () => {
-        setIsOpenReassignDialog(true);
-      },
-      icon: "users" as const,
-    });
-  }
-
-  if (isBookingInPast || isOngoing) {
-    editBookingActions.push({
-      id: "no_show",
-      label:
-        attendeeList.length === 1 && attendeeList[0].noShow ? t("unmark_as_no_show") : t("mark_as_no_show"),
-      onClick: () => {
-        // If there's only one attendee, mark them as no-show directly without showing the dialog
-        if (attendeeList.length === 1) {
-          const attendee = attendeeList[0];
-          noShowMutation.mutate({
-            bookingUid: booking.uid,
-            attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
-          });
-          return;
-        }
-
-        setIsNoShowDialogOpen(true);
-      },
-      icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : ("eye-off" as const),
-    });
-  }
-
-  let bookedActions: ActionType[] = [
-    {
-      id: "cancel",
-      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
-      /* When cancelling we need to let the UI and the API know if the intention is to
-               cancel all remaining bookings or just that booking instance. */
-      href: `/booking/${booking.uid}?cancel=true${
-        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
-      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
-      `,
-      icon: "x" as const,
-    },
-    {
-      id: "edit_booking",
-      label: t("edit"),
-      actions: editBookingActions,
-    },
-  ];
-
-  const chargeCardActions: ActionType[] = [
-    {
-      id: "charge_card",
-      label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
-      disabled: cardCharged,
-      onClick: () => {
-        setChargeCardDialogIsOpen(true);
-      },
-      icon: "credit-card" as const,
-    },
-  ];
-
-  const isDisabledCancelling = booking.eventType.disableCancelling;
-  const isDisabledRescheduling = booking.eventType.disableRescheduling;
-
-  if (isTabRecurring && isRecurring) {
-    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
-  }
-
-  if (isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed)) {
-    bookedActions = bookedActions.filter((action) => action.id !== "cancel");
-  }
-
-  if (isDisabledRescheduling) {
-    bookedActions.forEach((action) => {
-      if (action.id === "edit_booking") {
-        action.actions = action.actions?.filter(
-          ({ id }) => id !== "reschedule" && id !== "reschedule_request"
-        );
-      }
-    });
-  }
+  const cancelEventAction: ActionType = {
+    id: "cancel",
+    label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
+    href: `/booking/${booking.uid}?cancel=true${
+      isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
+    }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
+    icon: "circle-x",
+    color: "destructive",
+    disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
+  };
 
   const RequestSentMessage = () => {
     return (
@@ -460,13 +333,6 @@ function BookingListItem(booking: BookingItemProps) {
 
   const title = booking.title;
 
-  const showViewRecordingsButton = !!(booking.isRecorded && isBookingInPast && isConfirmed);
-  const showCheckRecordingButton =
-    isBookingInPast &&
-    isConfirmed &&
-    !booking.isRecorded &&
-    (!booking.location || booking.location === "integrations:daily" || booking?.location?.trim() === "");
-
   const isCalVideoLocation =
     !booking.location || booking.location === "integrations:daily" || booking?.location?.trim() === "";
 
@@ -497,7 +363,8 @@ function BookingListItem(booking: BookingItemProps) {
         href: `/reschedule/${booking.uid}${
           booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
         }`,
-        disabled: isBookingInPast && !booking.eventType.allowReschedulingPastBookings,
+        disabled:
+          (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
       },
       {
         id: "reschedule_request",
@@ -505,7 +372,8 @@ function BookingListItem(booking: BookingItemProps) {
         iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
         label: t("send_reschedule_request"),
         onClick: () => setIsOpenRescheduleDialog(true),
-        disabled: isBookingInPast && !booking.eventType.allowReschedulingPastBookings,
+        disabled:
+          (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
       },
       isBookingFromRoutingForm
         ? {
@@ -544,17 +412,6 @@ function BookingListItem(booking: BookingItemProps) {
         : null,
     ].filter(Boolean) as ActionType[];
 
-    const cancelEventAction: ActionType = {
-      id: "cancel",
-      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
-      href: `/booking/${booking.uid}?cancel=true${
-        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
-      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
-      icon: "circle-x",
-      color: "destructive",
-      disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
-    };
-
     const afterEventActions: ActionType[] = [
       ...videoOptionsActions,
       booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
@@ -881,7 +738,8 @@ function BookingListItem(booking: BookingItemProps) {
           </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">
             {isPending && isUpcoming && !isCancelled && <TableActions actions={pendingActions} />}
-            {!isPending && <Actions />}
+            {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && <Actions />}
+            {isTabRecurring && isRecurring && <TableActions actions={[cancelEventAction]} />}
             {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             {isCancelled && booking.rescheduled && (
               <div className="hidden h-full items-center md:flex">

From 9a2e77c08ee7105eb1035ae27d4ecda4d3dede96 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 16 Jul 2025 21:20:17 +0530
Subject: [PATCH 05/13] chore: change name

---
 apps/web/components/booking/BookingListItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 58c9fc9d7fba88..7add515a68aa37 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -354,7 +354,7 @@ function BookingListItem(booking: BookingItemProps) {
   ];
 
   const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
-  const Actions = () => {
+  const BookingActions = () => {
     const editEventActions: ActionType[] = [
       {
         id: "reschedule",
@@ -738,7 +738,7 @@ function BookingListItem(booking: BookingItemProps) {
           </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">
             {isPending && isUpcoming && !isCancelled && <TableActions actions={pendingActions} />}
-            {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && <Actions />}
+            {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && <BookingActions />}
             {isTabRecurring && isRecurring && <TableActions actions={[cancelEventAction]} />}
             {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             {isCancelled && booking.rescheduled && (

From 1ce69a2726e98550532d39da8c5355f0c2fbd50b Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 16 Jul 2025 23:30:00 +0530
Subject: [PATCH 06/13] Update apps/web/components/booking/BookingListItem.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/web/components/booking/BookingListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 7add515a68aa37..02e2962f2b1afa 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -484,7 +484,7 @@ function BookingListItem(booking: BookingItemProps) {
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="rounded-lg" key="no_show" disabled={cancelEventAction.disabled}>
+            <DropdownMenuItem className="rounded-lg" key={cancelEventAction.id} disabled={cancelEventAction.disabled}>
               <DropdownItem
                 type="button"
                 color={cancelEventAction.color}

From 684eb9acf1f06b32294071e994beb8efe5e54286 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 16 Jul 2025 23:48:28 +0530
Subject: [PATCH 07/13] perf: refactor

---
 .../components/booking/BookingListItem.tsx    | 294 +++++++++---------
 1 file changed, 147 insertions(+), 147 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 02e2962f2b1afa..16fb082c84acd3 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -354,154 +354,94 @@ function BookingListItem(booking: BookingItemProps) {
   ];
 
   const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
-  const BookingActions = () => {
-    const editEventActions: ActionType[] = [
-      {
-        id: "reschedule",
-        icon: "clock",
-        label: t("reschedule_booking"),
-        href: `/reschedule/${booking.uid}${
-          booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
-        }`,
-        disabled:
-          (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
-      },
-      {
-        id: "reschedule_request",
-        icon: "send",
-        iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
-        label: t("send_reschedule_request"),
-        onClick: () => setIsOpenRescheduleDialog(true),
-        disabled:
-          (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
-      },
-      isBookingFromRoutingForm
-        ? {
-            id: "reroute",
-            label: t("reroute"),
-            onClick: () => setRerouteDialogIsOpen(true),
-            icon: "waypoints",
-            disabled: false,
-          }
-        : null,
-      {
-        id: "change_location",
-        label: t("edit_location"),
-        onClick: () => setIsOpenLocationDialog(true),
-        icon: "map-pin",
-        disabled: false,
-      },
-      booking.eventType?.disableGuests
-        ? null
-        : {
-            id: "add_members",
-            label: t("additional_guests"),
-            onClick: () => setIsOpenAddGuestsDialog(true),
-            icon: "user-plus",
-            disabled: false,
-          },
-      // Reassign (if round robin)
-      booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN
-        ? {
-            id: "reassign",
-            label: t("reassign"),
-            onClick: () => setIsOpenReassignDialog(true),
-            icon: "users",
-            disabled: false,
-          }
-        : null,
-    ].filter(Boolean) as ActionType[];
-
-    const afterEventActions: ActionType[] = [
-      ...videoOptionsActions,
-      booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
-        ? {
-            id: "charge_card",
-            label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
-            onClick: () => setChargeCardDialogIsOpen(true),
-            icon: "credit-card",
-            disabled: cardCharged,
-          }
-        : null,
-      {
-        id: "no_show",
-        label:
-          attendeeList.length === 1 && attendeeList[0].noShow ? t("unmark_as_no_show") : t("mark_as_no_show"),
-        onClick: () => {
-          if (attendeeList.length === 1) {
-            const attendee = attendeeList[0];
-            noShowMutation.mutate({
-              bookingUid: booking.uid,
-              attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
-            });
-            return;
-          }
-          setIsNoShowDialogOpen(true);
+
+  const editEventActions: ActionType[] = [
+    {
+      id: "reschedule",
+      icon: "clock",
+      label: t("reschedule_booking"),
+      href: `/reschedule/${booking.uid}${
+        booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
+      }`,
+      disabled:
+        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
+    },
+    {
+      id: "reschedule_request",
+      icon: "send",
+      iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
+      label: t("send_reschedule_request"),
+      onClick: () => setIsOpenRescheduleDialog(true),
+      disabled:
+        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
+    },
+    isBookingFromRoutingForm
+      ? {
+          id: "reroute",
+          label: t("reroute"),
+          onClick: () => setRerouteDialogIsOpen(true),
+          icon: "waypoints",
+          disabled: false,
+        }
+      : null,
+    {
+      id: "change_location",
+      label: t("edit_location"),
+      onClick: () => setIsOpenLocationDialog(true),
+      icon: "map-pin",
+      disabled: false,
+    },
+    booking.eventType?.disableGuests
+      ? null
+      : {
+          id: "add_members",
+          label: t("additional_guests"),
+          onClick: () => setIsOpenAddGuestsDialog(true),
+          icon: "user-plus",
+          disabled: false,
         },
-        icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : "eye-off",
-        disabled: !(isBookingInPast || isOngoing),
+    // Reassign (if round robin)
+    booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN
+      ? {
+          id: "reassign",
+          label: t("reassign"),
+          onClick: () => setIsOpenReassignDialog(true),
+          icon: "users",
+          disabled: false,
+        }
+      : null,
+  ].filter(Boolean) as ActionType[];
+
+  const afterEventActions: ActionType[] = [
+    ...videoOptionsActions,
+    booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
+      ? {
+          id: "charge_card",
+          label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
+          onClick: () => setChargeCardDialogIsOpen(true),
+          icon: "credit-card",
+          disabled: cardCharged,
+        }
+      : null,
+    {
+      id: "no_show",
+      label:
+        attendeeList.length === 1 && attendeeList[0].noShow ? t("unmark_as_no_show") : t("mark_as_no_show"),
+      onClick: () => {
+        if (attendeeList.length === 1) {
+          const attendee = attendeeList[0];
+          noShowMutation.mutate({
+            bookingUid: booking.uid,
+            attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
+          });
+          return;
+        }
+        setIsNoShowDialogOpen(true);
       },
-    ].filter(Boolean) as ActionType[];
-
-    return (
-      <Dropdown>
-        <DropdownMenuTrigger asChild>
-          <Button type="button" color="secondary" variant="icon" StartIcon="ellipsis" />
-        </DropdownMenuTrigger>
-        <DropdownMenuPortal>
-          <DropdownMenuContent>
-            <DropdownMenuLabel className="px-2 pb-1 pt-1.5">{t("edit_event")}</DropdownMenuLabel>
-            {editEventActions.map((action) => (
-              <DropdownMenuItem className="rounded-lg" key={action.id} disabled={action.disabled}>
-                <DropdownItem
-                  type="button"
-                  color={action.color}
-                  StartIcon={action.icon}
-                  href={action.href}
-                  disabled={action.disabled}
-                  onClick={action.onClick}
-                  data-bookingid={action.bookingId}
-                  className={action.disabled ? "text-muted" : undefined}>
-                  {action.label}
-                </DropdownItem>
-              </DropdownMenuItem>
-            ))}
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel className="px-2 pb-1 pt-1.5">{t("after_event")}</DropdownMenuLabel>
-            {afterEventActions.map((action) => (
-              <DropdownMenuItem className="rounded-lg" key={action.id} disabled={action.disabled}>
-                <DropdownItem
-                  type="button"
-                  color={action.color}
-                  StartIcon={action.icon}
-                  href={action.href}
-                  onClick={action.onClick}
-                  disabled={action.disabled}
-                  data-bookingid={action.bookingId}
-                  className={action.disabled ? "text-muted" : undefined}>
-                  {action.label}
-                </DropdownItem>
-              </DropdownMenuItem>
-            ))}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="rounded-lg" key={cancelEventAction.id} disabled={cancelEventAction.disabled}>
-              <DropdownItem
-                type="button"
-                color={cancelEventAction.color}
-                StartIcon={cancelEventAction.icon}
-                href={cancelEventAction.href}
-                onClick={cancelEventAction.onClick}
-                disabled={cancelEventAction.disabled}
-                data-bookingid={cancelEventAction.bookingId}
-                className={cancelEventAction.disabled ? "text-muted" : undefined}>
-                {cancelEventAction.label}
-              </DropdownItem>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenuPortal>
-      </Dropdown>
-    );
-  };
+      icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : "eye-off",
+      disabled: !(isBookingInPast || isOngoing),
+    },
+  ].filter(Boolean) as ActionType[];
 
   return (
     <>
@@ -738,7 +678,67 @@ function BookingListItem(booking: BookingItemProps) {
           </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">
             {isPending && isUpcoming && !isCancelled && <TableActions actions={pendingActions} />}
-            {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && <BookingActions />}
+            {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && (
+              <Dropdown>
+                <DropdownMenuTrigger asChild>
+                  <Button type="button" color="secondary" variant="icon" StartIcon="ellipsis" />
+                </DropdownMenuTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuContent>
+                    <DropdownMenuLabel className="px-2 pb-1 pt-1.5">{t("edit_event")}</DropdownMenuLabel>
+                    {editEventActions.map((action) => (
+                      <DropdownMenuItem className="rounded-lg" key={action.id} disabled={action.disabled}>
+                        <DropdownItem
+                          type="button"
+                          color={action.color}
+                          StartIcon={action.icon}
+                          href={action.href}
+                          disabled={action.disabled}
+                          onClick={action.onClick}
+                          data-bookingid={action.bookingId}
+                          className={action.disabled ? "text-muted" : undefined}>
+                          {action.label}
+                        </DropdownItem>
+                      </DropdownMenuItem>
+                    ))}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel className="px-2 pb-1 pt-1.5">{t("after_event")}</DropdownMenuLabel>
+                    {afterEventActions.map((action) => (
+                      <DropdownMenuItem className="rounded-lg" key={action.id} disabled={action.disabled}>
+                        <DropdownItem
+                          type="button"
+                          color={action.color}
+                          StartIcon={action.icon}
+                          href={action.href}
+                          onClick={action.onClick}
+                          disabled={action.disabled}
+                          data-bookingid={action.bookingId}
+                          className={action.disabled ? "text-muted" : undefined}>
+                          {action.label}
+                        </DropdownItem>
+                      </DropdownMenuItem>
+                    ))}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      className="rounded-lg"
+                      key={cancelEventAction.id}
+                      disabled={cancelEventAction.disabled}>
+                      <DropdownItem
+                        type="button"
+                        color={cancelEventAction.color}
+                        StartIcon={cancelEventAction.icon}
+                        href={cancelEventAction.href}
+                        onClick={cancelEventAction.onClick}
+                        disabled={cancelEventAction.disabled}
+                        data-bookingid={cancelEventAction.bookingId}
+                        className={cancelEventAction.disabled ? "text-muted" : undefined}>
+                        {cancelEventAction.label}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenuPortal>
+              </Dropdown>
+            )}
             {isTabRecurring && isRecurring && <TableActions actions={[cancelEventAction]} />}
             {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             {isCancelled && booking.rescheduled && (

From 13eab7d721176f747342d352ed513f4f7ee2e56b Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Tue, 22 Jul 2025 15:12:12 +0530
Subject: [PATCH 08/13] fix: update tests

---
 apps/web/components/booking/BookingListItem.tsx  | 11 ++++++++++-
 apps/web/playwright/booking-pages.e2e.ts         |  9 ++++++++-
 apps/web/playwright/bookings-list.e2e.ts         |  5 ++++-
 apps/web/playwright/dynamic-booking-pages.e2e.ts |  7 ++++++-
 apps/web/playwright/reschedule.e2e.ts            |  9 ++++++---
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 16fb082c84acd3..edb541bbd9b3b3 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -681,7 +681,13 @@ function BookingListItem(booking: BookingItemProps) {
             {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && (
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" color="secondary" variant="icon" StartIcon="ellipsis" />
+                  <Button
+                    type="button"
+                    color="secondary"
+                    variant="icon"
+                    StartIcon="ellipsis"
+                    data-testid="booking-actions-dropdown"
+                  />
                 </DropdownMenuTrigger>
                 <DropdownMenuPortal>
                   <DropdownMenuContent>
@@ -696,6 +702,7 @@ function BookingListItem(booking: BookingItemProps) {
                           disabled={action.disabled}
                           onClick={action.onClick}
                           data-bookingid={action.bookingId}
+                          data-testid={action.id}
                           className={action.disabled ? "text-muted" : undefined}>
                           {action.label}
                         </DropdownItem>
@@ -713,6 +720,7 @@ function BookingListItem(booking: BookingItemProps) {
                           onClick={action.onClick}
                           disabled={action.disabled}
                           data-bookingid={action.bookingId}
+                          data-testid={action.id}
                           className={action.disabled ? "text-muted" : undefined}>
                           {action.label}
                         </DropdownItem>
@@ -731,6 +739,7 @@ function BookingListItem(booking: BookingItemProps) {
                         onClick={cancelEventAction.onClick}
                         disabled={cancelEventAction.disabled}
                         data-bookingid={cancelEventAction.bookingId}
+                        data-testid={cancelEventAction.id}
                         className={cancelEventAction.disabled ? "text-muted" : undefined}>
                         {cancelEventAction.label}
                       </DropdownItem>
diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts
index 8da6410a341cd6..a7740a53abea43 100644
--- a/apps/web/playwright/booking-pages.e2e.ts
+++ b/apps/web/playwright/booking-pages.e2e.ts
@@ -155,7 +155,8 @@ test.describe("pro user", () => {
     await pro.apiLogin();
     await page.goto("/bookings/upcoming");
     await page.waitForSelector('[data-testid="bookings"]');
-    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
     await page.locator('[data-testid="reschedule"]').click();
     await page.waitForURL((url) => {
       const bookingId = url.searchParams.get("rescheduleUid");
@@ -205,6 +206,9 @@ test.describe("pro user", () => {
     await pro.apiLogin();
 
     await page.goto("/bookings/upcoming");
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
+    // Click the cancel option in the dropdown
     await page.locator('[data-testid="cancel"]').click();
     await page.waitForURL((url) => {
       return url.pathname.startsWith("/booking/");
@@ -237,6 +241,9 @@ test.describe("pro user", () => {
     await pro.apiLogin();
 
     await page.goto("/bookings/upcoming");
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
+    // Click the cancel option in the dropdown
     await page.locator('[data-testid="cancel"]').click();
     await page.waitForURL((url) => {
       return url.pathname.startsWith("/booking/");
diff --git a/apps/web/playwright/bookings-list.e2e.ts b/apps/web/playwright/bookings-list.e2e.ts
index dfad39877d9769..b58c65427135a1 100644
--- a/apps/web/playwright/bookings-list.e2e.ts
+++ b/apps/web/playwright/bookings-list.e2e.ts
@@ -363,7 +363,10 @@ test.describe("Bookings", () => {
       .locator(`[data-testid="select-filter-options-userId"] [role="option"]:has-text("${thirdUser.name}")`)
       .click();
     await bookingsGetResponse2;
-    await expect(page.locator('text="Cancel event"').nth(0)).toBeVisible();
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
+    // Check that the cancel option is visible in the dropdown
+    await expect(page.locator('[data-testid="cancel"]')).toBeVisible();
 
     //expect only 3 bookings (out of 4 total) to be shown in list.
     //where ThirdUser is either organizer or attendee
diff --git a/apps/web/playwright/dynamic-booking-pages.e2e.ts b/apps/web/playwright/dynamic-booking-pages.e2e.ts
index 059bdacba13db5..0daa92b9337d4f 100644
--- a/apps/web/playwright/dynamic-booking-pages.e2e.ts
+++ b/apps/web/playwright/dynamic-booking-pages.e2e.ts
@@ -36,7 +36,9 @@ test("dynamic booking", async ({ page, users }) => {
   await test.step("can reschedule a booking", async () => {
     // Logged in
     await page.goto("/bookings/upcoming");
-    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
+    // Click the reschedule option in the dropdown
     await page.locator('[data-testid="reschedule"]').click();
     await page.waitForURL((url) => {
       const bookingId = url.searchParams.get("rescheduleUid");
@@ -54,6 +56,9 @@ test("dynamic booking", async ({ page, users }) => {
 
   await test.step("Can cancel the recently created booking", async () => {
     await page.goto("/bookings/upcoming");
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
+    // Click the cancel option in the dropdown
     await page.locator('[data-testid="cancel"]').click();
     await page.waitForURL((url) => {
       return url.pathname.startsWith("/booking");
diff --git a/apps/web/playwright/reschedule.e2e.ts b/apps/web/playwright/reschedule.e2e.ts
index 0ec9ccb16c2b3c..07e9e053e99a50 100644
--- a/apps/web/playwright/reschedule.e2e.ts
+++ b/apps/web/playwright/reschedule.e2e.ts
@@ -33,7 +33,8 @@ test.describe("Reschedule Tests", async () => {
     await user.apiLogin();
     await page.goto("/bookings/upcoming");
 
-    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
 
     await page.locator('[data-testid="reschedule_request"]').click();
 
@@ -75,7 +76,8 @@ test.describe("Reschedule Tests", async () => {
     await user.apiLogin();
     await page.goto("/bookings/past");
 
-    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
 
     await expect(page.locator('[data-testid="reschedule"]')).toBeVisible();
     await expect(page.locator('[data-testid="reschedule_request"]')).toBeVisible();
@@ -91,7 +93,8 @@ test.describe("Reschedule Tests", async () => {
 
     await page.reload();
 
-    await page.locator('[data-testid="edit_booking"]').nth(0).click();
+    // Click the ellipsis menu button to open the dropdown
+    await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
 
     await expect(page.locator('[data-testid="reschedule"]')).toBeHidden();
     await expect(page.locator('[data-testid="reschedule_request"]')).toBeHidden();

From 5ea0389c8df8f092699225bb8198abb1be62c878 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Tue, 22 Jul 2025 16:19:48 +0530
Subject: [PATCH 09/13] chore: update reschedule test

---
 apps/web/playwright/reschedule.e2e.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/playwright/reschedule.e2e.ts b/apps/web/playwright/reschedule.e2e.ts
index 07e9e053e99a50..3ea39b49f1d40f 100644
--- a/apps/web/playwright/reschedule.e2e.ts
+++ b/apps/web/playwright/reschedule.e2e.ts
@@ -96,8 +96,11 @@ test.describe("Reschedule Tests", async () => {
     // Click the ellipsis menu button to open the dropdown
     await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
 
-    await expect(page.locator('[data-testid="reschedule"]')).toBeHidden();
-    await expect(page.locator('[data-testid="reschedule_request"]')).toBeHidden();
+    // Check that the reschedule options are visible but disabled
+    await expect(page.locator('[data-testid="reschedule"]')).toBeVisible();
+    await expect(page.locator('[data-testid="reschedule_request"]')).toBeVisible();
+    await expect(page.locator('[data-testid="reschedule"]')).toBeDisabled();
+    await expect(page.locator('[data-testid="reschedule_request"]')).toBeDisabled();
   });
 
   test("Should display former time when rescheduling availability", async ({ page, users, bookings }) => {

From 4507be7f73e54f66942334f22fc1d582eef3f739 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Tue, 22 Jul 2025 20:41:57 +0530
Subject: [PATCH 10/13] refactor: create bookingActions and BookingListItem

---
 .../components/booking/BookingListItem.tsx    | 246 +++++++----------
 apps/web/components/booking/bookingActions.ts | 253 ++++++++++++++++++
 2 files changed, 352 insertions(+), 147 deletions(-)
 create mode 100644 apps/web/components/booking/bookingActions.ts

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index edb541bbd9b3b3..da1d1fc23724fb 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -18,7 +18,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useGetTheme } from "@calcom/lib/hooks/useTheme";
 import isSmsCalEmail from "@calcom/lib/isSmsCalEmail";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
+import { BookingStatus } from "@calcom/prisma/enums";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -55,11 +55,22 @@ import { ReassignDialog } from "@components/dialog/ReassignDialog";
 import { RerouteDialog } from "@components/dialog/RerouteDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 
+import {
+  getPendingActions,
+  getCancelEventAction,
+  getEditEventActions,
+  getAfterEventActions,
+  shouldShowPendingActions,
+  shouldShowEditActions,
+  shouldShowRecurringCancelAction,
+  type BookingActionContext,
+} from "./bookingActions";
+
 type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["filters"]["status"];
 
 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
-type BookingItemProps = BookingItem & {
+export type BookingItemProps = BookingItem & {
   listingStatus: BookingListingStatus;
   recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined;
   loggedInUser: {
@@ -217,44 +228,44 @@ function BookingListItem(booking: BookingItemProps) {
     return booking.seatsReferences[0].referenceUid;
   };
 
-  const pendingActions: ActionType[] = [
-    {
-      id: "reject",
-      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"),
-      onClick: () => {
-        setRejectionDialogIsOpen(true);
-      },
-      icon: "ban",
-      disabled: mutation.isPending,
-    },
-    // For bookings with payment, only confirm if the booking is paid for
-    ...((isPending && !paymentAppData.enabled) ||
-    (paymentAppData.enabled && !!paymentAppData.price && booking.paid)
-      ? [
-          {
-            id: "confirm",
-            bookingId: booking.id,
-            label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
-            onClick: () => {
-              bookingConfirm(true);
-            },
-            icon: "check" as const,
-            disabled: mutation.isPending,
-          },
-        ]
-      : []),
-  ];
-
-  const cancelEventAction: ActionType = {
-    id: "cancel",
-    label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
-    href: `/booking/${booking.uid}?cancel=true${
-      isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
-    }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
-    icon: "circle-x",
-    color: "destructive",
-    disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
-  };
+  const actionContext: BookingActionContext = {
+    booking,
+    isUpcoming,
+    isOngoing,
+    isBookingInPast,
+    isCancelled,
+    isConfirmed,
+    isRejected,
+    isPending,
+    isRescheduled,
+    isRecurring,
+    isTabRecurring,
+    isTabUnconfirmed,
+    isBookingFromRoutingForm,
+    isDisabledCancelling,
+    isDisabledRescheduling,
+    isCalVideoLocation:
+      !booking.location || booking.location === "integrations:daily" || booking?.location?.trim() === "",
+    showPendingPayment: paymentAppData.enabled && booking.payment.length && !booking.paid,
+    cardCharged,
+    attendeeList,
+    getSeatReferenceUid,
+    t,
+  } as BookingActionContext;
+
+  const basePendingActions = getPendingActions(actionContext);
+  const pendingActions: ActionType[] = basePendingActions.map((action) => ({
+    ...action,
+    onClick:
+      action.id === "reject"
+        ? () => setRejectionDialogIsOpen(true)
+        : action.id === "confirm"
+        ? () => bookingConfirm(true)
+        : undefined,
+    disabled: action.disabled || mutation.isPending,
+  })) as ActionType[];
+
+  const cancelEventAction = getCancelEventAction(actionContext);
 
   const RequestSentMessage = () => {
     return (
@@ -336,112 +347,53 @@ function BookingListItem(booking: BookingItemProps) {
   const isCalVideoLocation =
     !booking.location || booking.location === "integrations:daily" || booking?.location?.trim() === "";
 
-  const videoOptionsActions: ActionType[] = [
-    {
-      id: "view_recordings",
-      label: t("view_recordings"),
-      onClick: () => setViewRecordingsDialogIsOpen(true),
-      icon: "video",
-      disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation && booking.isRecorded),
-    },
-    {
-      id: "meeting_session_details",
-      label: t("view_session_details"),
-      onClick: () => setMeetingSessionDetailsDialogIsOpen(true),
-      icon: "info",
-      disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation),
-    },
-  ];
-
   const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
 
-  const editEventActions: ActionType[] = [
-    {
-      id: "reschedule",
-      icon: "clock",
-      label: t("reschedule_booking"),
-      href: `/reschedule/${booking.uid}${
-        booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
-      }`,
-      disabled:
-        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
-    },
-    {
-      id: "reschedule_request",
-      icon: "send",
-      iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
-      label: t("send_reschedule_request"),
-      onClick: () => setIsOpenRescheduleDialog(true),
-      disabled:
-        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
-    },
-    isBookingFromRoutingForm
-      ? {
-          id: "reroute",
-          label: t("reroute"),
-          onClick: () => setRerouteDialogIsOpen(true),
-          icon: "waypoints",
-          disabled: false,
-        }
-      : null,
-    {
-      id: "change_location",
-      label: t("edit_location"),
-      onClick: () => setIsOpenLocationDialog(true),
-      icon: "map-pin",
-      disabled: false,
-    },
-    booking.eventType?.disableGuests
-      ? null
-      : {
-          id: "add_members",
-          label: t("additional_guests"),
-          onClick: () => setIsOpenAddGuestsDialog(true),
-          icon: "user-plus",
-          disabled: false,
-        },
-    // Reassign (if round robin)
-    booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN
-      ? {
-          id: "reassign",
-          label: t("reassign"),
-          onClick: () => setIsOpenReassignDialog(true),
-          icon: "users",
-          disabled: false,
-        }
-      : null,
-  ].filter(Boolean) as ActionType[];
-
-  const afterEventActions: ActionType[] = [
-    ...videoOptionsActions,
-    booking.status === "ACCEPTED" && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
-      ? {
-          id: "charge_card",
-          label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
-          onClick: () => setChargeCardDialogIsOpen(true),
-          icon: "credit-card",
-          disabled: cardCharged,
-        }
-      : null,
-    {
-      id: "no_show",
-      label:
-        attendeeList.length === 1 && attendeeList[0].noShow ? t("unmark_as_no_show") : t("mark_as_no_show"),
-      onClick: () => {
-        if (attendeeList.length === 1) {
-          const attendee = attendeeList[0];
-          noShowMutation.mutate({
-            bookingUid: booking.uid,
-            attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
-          });
-          return;
-        }
-        setIsNoShowDialogOpen(true);
-      },
-      icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : "eye-off",
-      disabled: !(isBookingInPast || isOngoing),
-    },
-  ].filter(Boolean) as ActionType[];
+  const baseEditEventActions = getEditEventActions(actionContext);
+  const editEventActions: ActionType[] = baseEditEventActions.map((action) => ({
+    ...action,
+    onClick:
+      action.id === "reschedule_request"
+        ? () => setIsOpenRescheduleDialog(true)
+        : action.id === "reroute"
+        ? () => setRerouteDialogIsOpen(true)
+        : action.id === "change_location"
+        ? () => setIsOpenLocationDialog(true)
+        : action.id === "add_members"
+        ? () => setIsOpenAddGuestsDialog(true)
+        : action.id === "reassign"
+        ? () => setIsOpenReassignDialog(true)
+        : undefined,
+  })) as ActionType[];
+
+  const baseAfterEventActions = getAfterEventActions(actionContext);
+  const afterEventActions: ActionType[] = baseAfterEventActions.map((action) => ({
+    ...action,
+    onClick:
+      action.id === "view_recordings"
+        ? () => setViewRecordingsDialogIsOpen(true)
+        : action.id === "meeting_session_details"
+        ? () => setMeetingSessionDetailsDialogIsOpen(true)
+        : action.id === "charge_card"
+        ? () => setChargeCardDialogIsOpen(true)
+        : action.id === "no_show"
+        ? () => {
+            if (attendeeList.length === 1) {
+              const attendee = attendeeList[0];
+              noShowMutation.mutate({
+                bookingUid: booking.uid,
+                attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
+              });
+              return;
+            }
+            setIsNoShowDialogOpen(true);
+          }
+        : undefined,
+    disabled:
+      action.disabled ||
+      (action.id === "no_show" && !(isBookingInPast || isOngoing)) ||
+      (action.id === "view_recordings" && !booking.isRecorded),
+  })) as ActionType[];
 
   return (
     <>
@@ -677,8 +629,8 @@ function BookingListItem(booking: BookingItemProps) {
             </Link>
           </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">
-            {isPending && isUpcoming && !isCancelled && <TableActions actions={pendingActions} />}
-            {!isPending && !(isTabRecurring && isRecurring) && !isCancelled && (
+            {shouldShowPendingActions(actionContext) && <TableActions actions={pendingActions} />}
+            {shouldShowEditActions(actionContext) && (
               <Dropdown>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -748,7 +700,7 @@ function BookingListItem(booking: BookingItemProps) {
                 </DropdownMenuPortal>
               </Dropdown>
             )}
-            {isTabRecurring && isRecurring && <TableActions actions={[cancelEventAction]} />}
+            {shouldShowRecurringCancelAction(actionContext) && <TableActions actions={[cancelEventAction]} />}
             {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             {isCancelled && booking.rescheduled && (
               <div className="hidden h-full items-center md:flex">
diff --git a/apps/web/components/booking/bookingActions.ts b/apps/web/components/booking/bookingActions.ts
new file mode 100644
index 00000000000000..56536fca169054
--- /dev/null
+++ b/apps/web/components/booking/bookingActions.ts
@@ -0,0 +1,253 @@
+import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
+import type { ActionType } from "@calcom/ui/components/table";
+
+import type { BookingItemProps } from "./BookingListItem";
+
+export interface BookingActionContext {
+  booking: BookingItemProps;
+  isUpcoming: boolean;
+  isOngoing: boolean;
+  isBookingInPast: boolean;
+  isCancelled: boolean;
+  isConfirmed: boolean;
+  isRejected: boolean;
+  isPending: boolean;
+  isRescheduled: boolean;
+  isRecurring: boolean;
+  isTabRecurring: boolean;
+  isTabUnconfirmed: boolean;
+  isBookingFromRoutingForm: boolean;
+  isDisabledCancelling: boolean;
+  isDisabledRescheduling: boolean;
+  isCalVideoLocation: boolean;
+  showPendingPayment: boolean;
+  cardCharged: boolean;
+  attendeeList: Array<{
+    name: string;
+    email: string;
+    id: number;
+    noShow: boolean;
+    phoneNumber: string | null;
+  }>;
+  getSeatReferenceUid: () => string | undefined;
+  t: (key: string) => string;
+}
+
+export function getPendingActions(context: BookingActionContext): ActionType[] {
+  const { booking, isPending, isTabRecurring, isTabUnconfirmed, isRecurring, showPendingPayment, t } =
+    context;
+
+  const actions: ActionType[] = [
+    {
+      id: "reject",
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"),
+      icon: "ban",
+      disabled: false, // This would be controlled by mutation state in the component
+    },
+  ];
+
+  // For bookings with payment, only confirm if the booking is paid for
+  // Original logic: (isPending && !paymentAppData.enabled) || (paymentAppData.enabled && !!paymentAppData.price && booking.paid)
+  // Simplified: isPending && !showPendingPayment
+  if (isPending && !showPendingPayment) {
+    actions.push({
+      id: "confirm",
+      bookingId: booking.id,
+      label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"),
+      icon: "check" as const,
+      disabled: false, // This would be controlled by mutation state in the component
+    });
+  }
+
+  return actions;
+}
+
+export function getCancelEventAction(context: BookingActionContext): ActionType {
+  const {
+    booking,
+    isTabRecurring,
+    isRecurring,
+    isDisabledCancelling,
+    isBookingInPast,
+    isPending,
+    isConfirmed,
+    getSeatReferenceUid,
+    t,
+  } = context;
+
+  return {
+    id: "cancel",
+    label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
+    href: `/booking/${booking.uid}?cancel=true${
+      isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
+    }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
+    icon: "circle-x",
+    color: "destructive",
+    disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
+  };
+}
+
+export function getVideoOptionsActions(context: BookingActionContext): ActionType[] {
+  const { booking, isBookingInPast, isConfirmed, isCalVideoLocation, t } = context;
+
+  return [
+    {
+      id: "view_recordings",
+      label: t("view_recordings"),
+      icon: "video",
+      disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation && booking.isRecorded),
+    },
+    {
+      id: "meeting_session_details",
+      label: t("view_session_details"),
+      icon: "info",
+      disabled: !(isBookingInPast && isConfirmed && isCalVideoLocation),
+    },
+  ];
+}
+
+export function getEditEventActions(context: BookingActionContext): ActionType[] {
+  const {
+    booking,
+    isBookingInPast,
+    isDisabledRescheduling,
+    isBookingFromRoutingForm,
+    getSeatReferenceUid,
+    t,
+  } = context;
+
+  const actions: (ActionType | null)[] = [
+    {
+      id: "reschedule",
+      icon: "clock",
+      label: t("reschedule_booking"),
+      href: `/reschedule/${booking.uid}${
+        booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
+      }`,
+      disabled:
+        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
+    },
+    {
+      id: "reschedule_request",
+      icon: "send",
+      iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
+      label: t("send_reschedule_request"),
+      disabled:
+        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
+    },
+    isBookingFromRoutingForm
+      ? {
+          id: "reroute",
+          label: t("reroute"),
+          icon: "waypoints",
+          disabled: false,
+        }
+      : null,
+    {
+      id: "change_location",
+      label: t("edit_location"),
+      icon: "map-pin",
+      disabled: false,
+    },
+    booking.eventType?.disableGuests
+      ? null
+      : {
+          id: "add_members",
+          label: t("additional_guests"),
+          icon: "user-plus",
+          disabled: false,
+        },
+    // Reassign (if round robin)
+    booking.eventType.schedulingType === SchedulingType.ROUND_ROBIN
+      ? {
+          id: "reassign",
+          label: t("reassign"),
+          icon: "users",
+          disabled: false,
+        }
+      : null,
+  ];
+
+  return actions.filter(Boolean) as ActionType[];
+}
+
+export function getAfterEventActions(context: BookingActionContext): ActionType[] {
+  const { booking, cardCharged, attendeeList, t } = context;
+
+  const actions: (ActionType | null)[] = [
+    ...getVideoOptionsActions(context),
+    booking.status === BookingStatus.ACCEPTED && booking.paid && booking.payment[0]?.paymentOption === "HOLD"
+      ? {
+          id: "charge_card",
+          label: cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee"),
+          icon: "credit-card",
+          disabled: cardCharged,
+        }
+      : null,
+    {
+      id: "no_show",
+      label:
+        attendeeList.length === 1 && attendeeList[0].noShow ? t("unmark_as_no_show") : t("mark_as_no_show"),
+      icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : "eye-off",
+      disabled: false, // This would be controlled by booking state in the component
+    },
+  ];
+
+  return actions.filter(Boolean) as ActionType[];
+}
+
+export function shouldShowPendingActions(context: BookingActionContext): boolean {
+  const { isPending, isUpcoming, isCancelled } = context;
+  return isPending && isUpcoming && !isCancelled;
+}
+
+export function shouldShowEditActions(context: BookingActionContext): boolean {
+  const { isPending, isTabRecurring, isRecurring, isCancelled } = context;
+  return !isPending && !(isTabRecurring && isRecurring) && !isCancelled;
+}
+
+export function shouldShowRecurringCancelAction(context: BookingActionContext): boolean {
+  const { isTabRecurring, isRecurring } = context;
+  return isTabRecurring && isRecurring;
+}
+
+export function isActionDisabled(actionId: string, context: BookingActionContext): boolean {
+  const { booking, isBookingInPast, isDisabledRescheduling, isDisabledCancelling } = context;
+
+  switch (actionId) {
+    case "reschedule":
+    case "reschedule_request":
+      return (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling;
+    case "cancel":
+      return isDisabledCancelling || (isBookingInPast && booking.status === BookingStatus.PENDING);
+    case "view_recordings":
+      return !(isBookingInPast && booking.status === BookingStatus.ACCEPTED && context.isCalVideoLocation);
+    case "meeting_session_details":
+      return !(isBookingInPast && booking.status === BookingStatus.ACCEPTED && context.isCalVideoLocation);
+    case "charge_card":
+      return context.cardCharged;
+    default:
+      return false;
+  }
+}
+
+export function getActionLabel(actionId: string, context: BookingActionContext): string {
+  const { booking, isTabRecurring, isRecurring, attendeeList, cardCharged, t } = context;
+
+  switch (actionId) {
+    case "reject":
+      return (isTabRecurring || context.isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject");
+    case "confirm":
+      return (isTabRecurring || context.isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm");
+    case "cancel":
+      return isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event");
+    case "no_show":
+      return attendeeList.length === 1 && attendeeList[0].noShow
+        ? t("unmark_as_no_show")
+        : t("mark_as_no_show");
+    case "charge_card":
+      return cardCharged ? t("no_show_fee_charged") : t("collect_no_show_fee");
+    default:
+      return t(actionId);
+  }
+}

From 9dc4615ea944e7087d3dc01131ac0ae5fa6da854 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Tue, 22 Jul 2025 20:42:31 +0530
Subject: [PATCH 11/13] tests: add unit tests for booking actions

---
 .../components/booking/bookingActions.test.ts | 462 ++++++++++++++++++
 1 file changed, 462 insertions(+)
 create mode 100644 apps/web/components/booking/bookingActions.test.ts

diff --git a/apps/web/components/booking/bookingActions.test.ts b/apps/web/components/booking/bookingActions.test.ts
new file mode 100644
index 00000000000000..29a77b71d42fd8
--- /dev/null
+++ b/apps/web/components/booking/bookingActions.test.ts
@@ -0,0 +1,462 @@
+import { describe, it, expect } from "vitest";
+
+import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
+
+import {
+  getPendingActions,
+  getCancelEventAction,
+  getVideoOptionsActions,
+  getEditEventActions,
+  getAfterEventActions,
+  shouldShowPendingActions,
+  shouldShowEditActions,
+  shouldShowRecurringCancelAction,
+  isActionDisabled,
+  getActionLabel,
+  type BookingActionContext,
+} from "./bookingActions";
+
+const mockT = (key: string) => key;
+
+function createMockContext(overrides: Partial<BookingActionContext> = {}): BookingActionContext {
+  const now = new Date();
+  const startTime = new Date(now.getTime() + 24 * 60 * 60 * 1000); // Tomorrow
+  const endTime = new Date(startTime.getTime() + 60 * 60 * 1000); // 1 hour later
+
+  return {
+    booking: {
+      id: 1,
+      uid: "booking-123",
+      title: "Test Meeting",
+      description: "Test meeting description",
+      startTime: startTime.toISOString(),
+      endTime: endTime.toISOString(),
+      createdAt: now,
+      updatedAt: now,
+      status: BookingStatus.ACCEPTED,
+      paid: false,
+      fromReschedule: null,
+      recurringEventId: null,
+      rescheduled: false,
+      isRecorded: false,
+      rescheduler: null,
+      userPrimaryEmail: "organizer@example.com",
+      customInputs: {},
+      responses: {},
+      references: [],
+      attendees: [
+        {
+          id: 1,
+          name: "John Doe",
+          email: "john@example.com",
+          timeZone: "America/New_York",
+          phoneNumber: null,
+          locale: "en",
+          bookingId: 1,
+          noShow: false,
+        } as any,
+      ],
+      user: {
+        id: 1,
+        name: "Organizer",
+        email: "organizer@example.com",
+      },
+      eventType: {
+        id: 1,
+        title: "Test Event Type",
+        slug: "test-event",
+        length: 60,
+        schedulingType: SchedulingType.COLLECTIVE,
+        team: null,
+        eventTypeColor: {
+          lightEventTypeColor: "#000000",
+          darkEventTypeColor: "#ffffff",
+        },
+        disableCancelling: false,
+        disableRescheduling: false,
+        disableGuests: false,
+        allowReschedulingPastBookings: false,
+        recurringEvent: null,
+        price: 0,
+        currency: "usd",
+        metadata: {},
+      },
+      location: "integrations:daily",
+      payment: [],
+      seatsReferences: [],
+      assignmentReason: [],
+      metadata: null,
+      routedFromRoutingFormReponse: null,
+      listingStatus: "upcoming",
+      recurringInfo: undefined,
+      loggedInUser: {
+        userId: 1,
+        userTimeZone: "America/New_York",
+        userTimeFormat: 12,
+        userEmail: "organizer@example.com",
+      },
+      isToday: false,
+    },
+    isUpcoming: true,
+    isOngoing: false,
+    isBookingInPast: false,
+    isCancelled: false,
+    isConfirmed: true,
+    isRejected: false,
+    isPending: false,
+    isRescheduled: false,
+    isRecurring: false,
+    isTabRecurring: false,
+    isTabUnconfirmed: false,
+    isBookingFromRoutingForm: false,
+    isDisabledCancelling: false,
+    isDisabledRescheduling: false,
+    isCalVideoLocation: true,
+    showPendingPayment: false,
+    cardCharged: false,
+    attendeeList: [
+      {
+        name: "John Doe",
+        email: "john@example.com",
+        id: 1,
+        noShow: false,
+        phoneNumber: null,
+      },
+    ],
+    getSeatReferenceUid: () => undefined,
+    t: mockT,
+    ...overrides,
+  } as BookingActionContext;
+}
+
+describe("Booking Actions", () => {
+  describe("getPendingActions", () => {
+    it("should return reject action for pending booking", () => {
+      const context = createMockContext({ isPending: true });
+      const actions = getPendingActions(context);
+
+      expect(actions).toHaveLength(2);
+      expect(actions[0]).toEqual({
+        id: "reject",
+        label: "reject",
+        icon: "ban",
+        disabled: false,
+      });
+      expect(actions[1]).toEqual({
+        id: "confirm",
+        bookingId: 1,
+        label: "confirm",
+        icon: "check",
+        disabled: false,
+      });
+    });
+
+    it("should return reject action only for non-pending booking", () => {
+      const context = createMockContext({ isPending: false });
+      const actions = getPendingActions(context);
+
+      expect(actions).toHaveLength(1);
+      expect(actions[0].id).toBe("reject");
+    });
+
+    it("should use correct labels for recurring bookings", () => {
+      const context = createMockContext({
+        isPending: true,
+        isRecurring: true,
+        isTabRecurring: true,
+      });
+      const actions = getPendingActions(context);
+
+      expect(actions[0].label).toBe("reject_all");
+      expect(actions[1].label).toBe("confirm_all");
+    });
+  });
+
+  describe("getCancelEventAction", () => {
+    it("should return cancel action with correct properties", () => {
+      const context = createMockContext();
+      const action = getCancelEventAction(context);
+
+      expect(action).toEqual({
+        id: "cancel",
+        label: "cancel_event",
+        href: "/booking/booking-123?cancel=true",
+        icon: "circle-x",
+        color: "destructive",
+        disabled: false,
+      });
+    });
+
+    it("should be disabled when cancellation is disabled", () => {
+      const context = createMockContext({ isDisabledCancelling: true });
+      const action = getCancelEventAction(context);
+
+      expect(action.disabled).toBe(true);
+    });
+
+    it("should be disabled for past pending bookings", () => {
+      const context = createMockContext({
+        isBookingInPast: true,
+        isPending: true,
+        isConfirmed: false,
+      });
+      const action = getCancelEventAction(context);
+
+      expect(action.disabled).toBe(true);
+    });
+
+    it("should include recurring parameters for recurring bookings", () => {
+      const context = createMockContext({
+        isRecurring: true,
+        isTabRecurring: true,
+      });
+      const action = getCancelEventAction(context);
+
+      expect(action.href).toContain("allRemainingBookings=true");
+      expect(action.label).toBe("cancel_all_remaining");
+    });
+  });
+
+  describe("getVideoOptionsActions", () => {
+    it("should return video actions for past confirmed bookings", () => {
+      const context = createMockContext({
+        isBookingInPast: true,
+        isConfirmed: true,
+        isCalVideoLocation: true,
+        booking: {
+          ...createMockContext().booking,
+          isRecorded: true,
+        },
+      });
+      const actions = getVideoOptionsActions(context);
+
+      expect(actions).toHaveLength(2);
+      expect(actions[0].id).toBe("view_recordings");
+      expect(actions[1].id).toBe("meeting_session_details");
+      expect(actions[0].disabled).toBe(false);
+      expect(actions[1].disabled).toBe(false);
+    });
+
+    it("should disable video actions for upcoming bookings", () => {
+      const context = createMockContext({ isBookingInPast: false });
+      const actions = getVideoOptionsActions(context);
+
+      expect(actions[0].disabled).toBe(true);
+      expect(actions[1].disabled).toBe(true);
+    });
+
+    it("should disable video actions for non-Cal video locations", () => {
+      const context = createMockContext({
+        isBookingInPast: true,
+        isConfirmed: true,
+        isCalVideoLocation: false,
+      });
+      const actions = getVideoOptionsActions(context);
+
+      expect(actions[0].disabled).toBe(true);
+      expect(actions[1].disabled).toBe(true);
+    });
+  });
+
+  describe("getEditEventActions", () => {
+    it("should return basic edit actions", () => {
+      const context = createMockContext();
+      const actions = getEditEventActions(context);
+
+      const actionIds = actions.map((a) => a.id);
+      expect(actionIds).toContain("reschedule");
+      expect(actionIds).toContain("reschedule_request");
+      expect(actionIds).toContain("change_location");
+      expect(actionIds).toContain("add_members");
+    });
+
+    it("should include reroute action for routing form bookings", () => {
+      const context = createMockContext({ isBookingFromRoutingForm: true });
+      const actions = getEditEventActions(context);
+
+      const rerouteAction = actions.find((a) => a.id === "reroute");
+      expect(rerouteAction).toBeDefined();
+    });
+
+    it("should include reassign action for round robin events", () => {
+      const context = createMockContext({
+        booking: {
+          ...createMockContext().booking,
+          eventType: {
+            ...createMockContext().booking.eventType,
+            schedulingType: SchedulingType.ROUND_ROBIN,
+          },
+        },
+      });
+      const actions = getEditEventActions(context);
+
+      const reassignAction = actions.find((a) => a.id === "reassign");
+      expect(reassignAction).toBeDefined();
+    });
+
+    it("should exclude add_members when guests are disabled", () => {
+      const context = createMockContext({
+        booking: {
+          ...createMockContext().booking,
+          eventType: {
+            ...createMockContext().booking.eventType,
+            disableGuests: true,
+          },
+        },
+      });
+      const actions = getEditEventActions(context);
+
+      const addMembersAction = actions.find((a) => a.id === "add_members");
+      expect(addMembersAction).toBeUndefined();
+    });
+
+    it("should disable reschedule actions when rescheduling is disabled", () => {
+      const context = createMockContext({ isDisabledRescheduling: true });
+      const actions = getEditEventActions(context);
+
+      const rescheduleAction = actions.find((a) => a.id === "reschedule");
+      const rescheduleRequestAction = actions.find((a) => a.id === "reschedule_request");
+
+      expect(rescheduleAction?.disabled).toBe(true);
+      expect(rescheduleRequestAction?.disabled).toBe(true);
+    });
+  });
+
+  describe("getAfterEventActions", () => {
+    it("should include video actions and no-show action", () => {
+      const context = createMockContext({ isBookingInPast: true, isConfirmed: true });
+      const actions = getAfterEventActions(context);
+
+      const actionIds = actions.map((a) => a.id);
+      expect(actionIds).toContain("view_recordings");
+      expect(actionIds).toContain("meeting_session_details");
+      expect(actionIds).toContain("no_show");
+    });
+
+    it("should include charge card action for held payments", () => {
+      const context = createMockContext({
+        booking: {
+          ...createMockContext().booking,
+          status: BookingStatus.ACCEPTED,
+          paid: true,
+          payment: [{ paymentOption: "HOLD", amount: 1000, currency: "usd", success: true }],
+        },
+      });
+      const actions = getAfterEventActions(context);
+
+      const chargeCardAction = actions.find((a) => a.id === "charge_card");
+      expect(chargeCardAction).toBeDefined();
+    });
+
+    it("should show correct no-show label for single attendee", () => {
+      const context = createMockContext({
+        attendeeList: [{ name: "John", email: "john@example.com", id: 1, noShow: true, phoneNumber: null }],
+      });
+      const actions = getAfterEventActions(context);
+
+      const noShowAction = actions.find((a) => a.id === "no_show");
+      expect(noShowAction?.label).toBe("unmark_as_no_show");
+      expect(noShowAction?.icon).toBe("eye");
+    });
+  });
+
+  describe("shouldShowPendingActions", () => {
+    it("should return true for pending upcoming bookings", () => {
+      const context = createMockContext({ isPending: true, isUpcoming: true, isCancelled: false });
+      expect(shouldShowPendingActions(context)).toBe(true);
+    });
+
+    it("should return false for cancelled bookings", () => {
+      const context = createMockContext({ isPending: true, isUpcoming: true, isCancelled: true });
+      expect(shouldShowPendingActions(context)).toBe(false);
+    });
+
+    it("should return false for past bookings", () => {
+      const context = createMockContext({ isPending: true, isUpcoming: false, isCancelled: false });
+      expect(shouldShowPendingActions(context)).toBe(false);
+    });
+  });
+
+  describe("shouldShowEditActions", () => {
+    it("should return true for confirmed upcoming bookings", () => {
+      const context = createMockContext({ isPending: false, isCancelled: false });
+      expect(shouldShowEditActions(context)).toBe(true);
+    });
+
+    it("should return false for pending bookings", () => {
+      const context = createMockContext({ isPending: true });
+      expect(shouldShowEditActions(context)).toBe(false);
+    });
+
+    it("should return false for cancelled bookings", () => {
+      const context = createMockContext({ isCancelled: true });
+      expect(shouldShowEditActions(context)).toBe(false);
+    });
+  });
+
+  describe("shouldShowRecurringCancelAction", () => {
+    it("should return true for recurring bookings in recurring tab", () => {
+      const context = createMockContext({ isTabRecurring: true, isRecurring: true });
+      expect(shouldShowRecurringCancelAction(context)).toBe(true);
+    });
+
+    it("should return false for non-recurring bookings", () => {
+      const context = createMockContext({ isTabRecurring: true, isRecurring: false });
+      expect(shouldShowRecurringCancelAction(context)).toBe(false);
+    });
+  });
+
+  describe("isActionDisabled", () => {
+    it("should disable reschedule actions when rescheduling is disabled", () => {
+      const context = createMockContext({ isDisabledRescheduling: true });
+
+      expect(isActionDisabled("reschedule", context)).toBe(true);
+      expect(isActionDisabled("reschedule_request", context)).toBe(true);
+    });
+
+    it("should disable cancel action when cancellation is disabled", () => {
+      const context = createMockContext({ isDisabledCancelling: true });
+
+      expect(isActionDisabled("cancel", context)).toBe(true);
+    });
+
+    it("should disable video actions for non-past bookings", () => {
+      const context = createMockContext({ isBookingInPast: false });
+
+      expect(isActionDisabled("view_recordings", context)).toBe(true);
+      expect(isActionDisabled("meeting_session_details", context)).toBe(true);
+    });
+
+    it("should disable charge card action when already charged", () => {
+      const context = createMockContext({ cardCharged: true });
+
+      expect(isActionDisabled("charge_card", context)).toBe(true);
+    });
+  });
+
+  describe("getActionLabel", () => {
+    it("should return correct labels for different actions", () => {
+      const context = createMockContext();
+
+      expect(getActionLabel("reject", context)).toBe("reject");
+      expect(getActionLabel("confirm", context)).toBe("confirm");
+      expect(getActionLabel("cancel", context)).toBe("cancel_event");
+    });
+
+    it("should return correct labels for recurring bookings", () => {
+      const context = createMockContext({ isRecurring: true, isTabRecurring: true });
+
+      expect(getActionLabel("reject", context)).toBe("reject_all");
+      expect(getActionLabel("confirm", context)).toBe("confirm_all");
+      expect(getActionLabel("cancel", context)).toBe("cancel_all_remaining");
+    });
+
+    it("should return correct no-show label based on attendee state", () => {
+      const contextWithNoShow = createMockContext({
+        attendeeList: [{ name: "John", email: "john@example.com", id: 1, noShow: true, phoneNumber: null }],
+      });
+
+      expect(getActionLabel("no_show", contextWithNoShow)).toBe("unmark_as_no_show");
+    });
+  });
+});

From 894991ce500f23e94cb7063a9b5ed45be891c85a Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Tue, 22 Jul 2025 20:58:01 +0530
Subject: [PATCH 12/13] fix: logic

---
 apps/web/components/booking/bookingActions.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/components/booking/bookingActions.ts b/apps/web/components/booking/bookingActions.ts
index 56536fca169054..f223d60fd64b8a 100644
--- a/apps/web/components/booking/bookingActions.ts
+++ b/apps/web/components/booking/bookingActions.ts
@@ -48,8 +48,7 @@ export function getPendingActions(context: BookingActionContext): ActionType[] {
 
   // For bookings with payment, only confirm if the booking is paid for
   // Original logic: (isPending && !paymentAppData.enabled) || (paymentAppData.enabled && !!paymentAppData.price && booking.paid)
-  // Simplified: isPending && !showPendingPayment
-  if (isPending && !showPendingPayment) {
+  if ((isPending && !showPendingPayment) || (showPendingPayment && booking.paid)) {
     actions.push({
       id: "confirm",
       bookingId: booking.id,

From de176b2d4e681bfb731f5396b2ed6857b2b88da9 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Tue, 22 Jul 2025 21:07:19 +0530
Subject: [PATCH 13/13] fix: cancel button regresso

---
 apps/web/components/booking/bookingActions.ts | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/booking/bookingActions.ts b/apps/web/components/booking/bookingActions.ts
index f223d60fd64b8a..e0fbed746bd217 100644
--- a/apps/web/components/booking/bookingActions.ts
+++ b/apps/web/components/booking/bookingActions.ts
@@ -62,17 +62,7 @@ export function getPendingActions(context: BookingActionContext): ActionType[] {
 }
 
 export function getCancelEventAction(context: BookingActionContext): ActionType {
-  const {
-    booking,
-    isTabRecurring,
-    isRecurring,
-    isDisabledCancelling,
-    isBookingInPast,
-    isPending,
-    isConfirmed,
-    getSeatReferenceUid,
-    t,
-  } = context;
+  const { booking, isTabRecurring, isRecurring, getSeatReferenceUid, t } = context;
 
   return {
     id: "cancel",
@@ -82,7 +72,7 @@ export function getCancelEventAction(context: BookingActionContext): ActionType
     }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}`,
     icon: "circle-x",
     color: "destructive",
-    disabled: isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed),
+    disabled: isActionDisabled("cancel", context),
   };
 }
 
@@ -211,14 +201,15 @@ export function shouldShowRecurringCancelAction(context: BookingActionContext):
 }
 
 export function isActionDisabled(actionId: string, context: BookingActionContext): boolean {
-  const { booking, isBookingInPast, isDisabledRescheduling, isDisabledCancelling } = context;
+  const { booking, isBookingInPast, isDisabledRescheduling, isDisabledCancelling, isPending, isConfirmed } =
+    context;
 
   switch (actionId) {
     case "reschedule":
     case "reschedule_request":
       return (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling;
     case "cancel":
-      return isDisabledCancelling || (isBookingInPast && booking.status === BookingStatus.PENDING);
+      return isDisabledCancelling || (isBookingInPast && isPending && !isConfirmed);
     case "view_recordings":
       return !(isBookingInPast && booking.status === BookingStatus.ACCEPTED && context.isCalVideoLocation);
     case "meeting_session_details":