import { BookingStatus } from "@prisma/client"; import { useRouter } from "next/router"; import { useState } from "react"; import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations"; import dayjs from "@calcom/dayjs"; import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog"; import classNames from "@calcom/lib/classNames"; import { formatTime } from "@calcom/lib/date-fns"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { getEveryFreqFor } from "@calcom/lib/recurringStrings"; import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react"; import { Badge, Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, Icon, MeetingTimeInTimezones, showToast, TextArea, Tooltip, ActionType, TableActions, } from "@calcom/ui"; import useMeQuery from "@lib/hooks/useMeQuery"; import { EditLocationDialog } from "@components/dialog/EditLocationDialog"; import { RescheduleDialog } from "@components/dialog/RescheduleDialog"; type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["filters"]["status"]; type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number]; type BookingItemProps = BookingItem & { listingStatus: BookingListingStatus; recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined; }; function BookingListItem(booking: BookingItemProps) { // Get user so we can determine 12/24 hour format preferences const query = useMeQuery(); const user = query.data; const { t } = useLocale(); const utils = trpc.useContext(); const router = useRouter(); const [rejectionReason, setRejectionReason] = useState(""); const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false); const [viewRecordingsDialogIsOpen, setViewRecordingsDialogIsOpen] = useState(false); const mutation = trpc.viewer.bookings.confirm.useMutation({ onSuccess: (data) => { if (data.status === BookingStatus.REJECTED) { setRejectionDialogIsOpen(false); showToast(t("booking_rejection_success"), "success"); } else { showToast(t("booking_confirmation_success"), "success"); } utils.viewer.bookings.invalidate(); }, onError: () => { showToast(t("booking_confirmation_failed"), "error"); utils.viewer.bookings.invalidate(); }, }); const isUpcoming = new Date(booking.endTime) >= new Date(); const isPast = new Date(booking.endTime) < new Date(); const isCancelled = booking.status === BookingStatus.CANCELLED; const isConfirmed = booking.status === BookingStatus.ACCEPTED; const isRejected = booking.status === BookingStatus.REJECTED; const isPending = booking.status === BookingStatus.PENDING; const isRecurring = booking.recurringEventId !== null; const isTabRecurring = booking.listingStatus === "recurring"; const isTabUnconfirmed = booking.listingStatus === "unconfirmed"; const bookingConfirm = async (confirm: boolean) => { let body = { bookingId: booking.id, confirmed: confirm, reason: rejectionReason, }; /** * Only pass down the recurring event id when we need to confirm the entire series, which happens in * the "Recurring" tab and "Unconfirmed" tab, to support confirming discretionally in the "Recurring" tab. */ if ((isTabRecurring || isTabUnconfirmed) && isRecurring) { body = Object.assign({}, body, { recurringEventId: booking.recurringEventId }); } mutation.mutate(body); }; const pendingActions: ActionType[] = [ { id: "reject", label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("reject_all") : t("reject"), onClick: () => { setRejectionDialogIsOpen(true); }, icon: Icon.FiSlash, disabled: mutation.isLoading, }, { id: "confirm", label: (isTabRecurring || isTabUnconfirmed) && isRecurring ? t("confirm_all") : t("confirm"), onClick: () => { bookingConfirm(true); }, icon: Icon.FiCheck, disabled: mutation.isLoading, color: "primary", }, ]; const showRecordingActions: ActionType[] = [ { id: "view_recordings", label: t("view_recordings"), onClick: () => { setViewRecordingsDialogIsOpen(true); }, disabled: mutation.isLoading, }, ]; let bookedActions: ActionType[] = [ { id: "cancel", label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"), /* 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" : "" }`, icon: Icon.FiX, }, { id: "edit_booking", label: t("edit"), actions: [ { id: "reschedule", icon: Icon.FiClock, label: t("reschedule_booking"), href: `/reschedule/${booking.uid}`, }, { id: "reschedule_request", icon: Icon.FiSend, iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ", label: t("send_reschedule_request"), onClick: () => { setIsOpenRescheduleDialog(true); }, }, { id: "change_location", label: t("edit_location"), onClick: () => { setIsOpenLocationDialog(true); }, icon: Icon.FiMapPin, }, ], }, ]; if (isTabRecurring && isRecurring) { bookedActions = bookedActions.filter((action) => action.id !== "edit_booking"); } if (isPast && isPending && !isConfirmed) { bookedActions = bookedActions.filter((action) => action.id !== "cancel"); } const RequestSentMessage = () => { return (

{t("reschedule_request_sent")}

); }; const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY"); const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false); const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false); const setLocationMutation = trpc.viewer.bookings.editLocation.useMutation({ onSuccess: () => { showToast(t("location_updated"), "success"); setIsOpenLocationDialog(false); utils.viewer.bookings.invalidate(); }, }); const saveLocation = (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => { let newLocation = newLocationType as string; const eventLocationType = getEventLocationType(newLocationType); if (eventLocationType?.organizerInputType) { newLocation = details[Object.keys(details)[0]]; } setLocationMutation.mutate({ bookingId: booking.id, newLocation }); }; // Getting accepted recurring dates to show const recurringDates = booking.recurringInfo?.bookings[BookingStatus.ACCEPTED] .concat(booking.recurringInfo?.bookings[BookingStatus.CANCELLED]) .concat(booking.recurringInfo?.bookings[BookingStatus.PENDING]) .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime()); const onClickTableData = () => { router.push({ pathname: `/booking/${booking.uid}`, query: { allRemainingBookings: isTabRecurring, email: booking.attendees[0] ? booking.attendees[0].email : undefined, }, }); }; const showRecordingsButtons = booking.location === "integrations:daily" && isPast && isConfirmed; return ( <> {showRecordingsButtons && ( )} {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}

{t("rejection_reason_description")}

{t("rejection_reason")} (Optional)