import { BanIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline"; import { BookingStatus } from "@prisma/client"; import dayjs from "dayjs"; import { useState } from "react"; import { useMutation } from "react-query"; import { HttpError } from "@lib/core/http/error"; import { useLocale } from "@lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@lib/trpc"; import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@components/Dialog"; import { useMeQuery } from "@components/Shell"; import { TextArea } from "@components/form/fields"; import Button from "@components/ui/Button"; import TableActions, { ActionType } from "@components/ui/TableActions"; type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number]; function BookingListItem(booking: BookingItem) { // Get user so we can determine 12/24 hour format preferences const query = useMeQuery(); const user = query.data; const { t, i18n } = useLocale(); const utils = trpc.useContext(); const [rejectionReason, setRejectionReason] = useState(""); const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false); const mutation = useMutation( async (confirm: boolean) => { const res = await fetch("/api/book/confirm", { method: "PATCH", body: JSON.stringify({ id: booking.id, confirmed: confirm, language: i18n.language, reason: rejectionReason, }), headers: { "Content-Type": "application/json", }, }); if (!res.ok) { throw new HttpError({ statusCode: res.status }); } }, { async onSettled() { await utils.invalidateQueries(["viewer.bookings"]); }, } ); const isUpcoming = new Date(booking.endTime) >= new Date(); const isCancelled = booking.status === BookingStatus.CANCELLED; const pendingActions: ActionType[] = [ { id: "reject", label: t("reject"), onClick: () => setRejectionDialogIsOpen(true), icon: BanIcon, disabled: mutation.isLoading, }, { id: "confirm", label: t("confirm"), onClick: () => mutation.mutate(true), icon: CheckIcon, disabled: mutation.isLoading, color: "primary", }, ]; const bookedActions: ActionType[] = [ { id: "cancel", label: t("cancel"), href: `/cancel/${booking.uid}`, icon: XIcon, }, { id: "reschedule", label: t("reschedule"), href: `/reschedule/${booking.uid}`, icon: ClockIcon, }, ]; const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY"); return ( <>

{t("rejection_reason_description")}

{t("rejection_reason")} (Optional)