diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index c696d71bb2..33061e0bfb 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/apps/web/components/booking/BookingListItem.tsx @@ -120,6 +120,28 @@ function BookingListItem(booking: BookingItemProps) { const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState(false); const [isNoShowDialogOpen, setIsNoShowDialogOpen] = useState(false); const cardCharged = booking?.payment[0]?.success; + + const attendeeList = booking.attendees.map((attendee) => { + return { + name: attendee.name, + email: attendee.email, + id: attendee.id, + noShow: attendee.noShow || false, + phoneNumber: attendee.phoneNumber, + }; + }); + + const noShowMutation = trpc.viewer.markNoShow.useMutation({ + onSuccess: async (data) => { + showToast(data.message, "success"); + // Invalidate and refetch the bookings query to update the UI + await utils.viewer.bookings.invalidate(); + }, + onError: (err) => { + showToast(err.message, "error"); + }, + }); + const mutation = trpc.viewer.bookings.confirm.useMutation({ onSuccess: (data) => { if (data?.status === BookingStatus.REJECTED) { @@ -287,11 +309,22 @@ function BookingListItem(booking: BookingItemProps) { if (isBookingInPast || isOngoing) { editBookingActions.push({ id: "no_show", - label: t("mark_as_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: "eye-off" as const, + icon: attendeeList.length === 1 && attendeeList[0].noShow ? "eye" : ("eye-off" as const), }); } @@ -427,15 +460,6 @@ function BookingListItem(booking: BookingItemProps) { ]; const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid; - const attendeeList = booking.attendees.map((attendee) => { - return { - name: attendee.name, - email: attendee.email, - id: attendee.id, - noShow: attendee.noShow || false, - phoneNumber: attendee.phoneNumber, - }; - }); return ( <>