351 lines
18 KiB
TypeScript
351 lines
18 KiB
TypeScript
// TODO: replace headlessui with radix-ui
|
|
import { Menu, Transition } from "@headlessui/react";
|
|
import { ClockIcon, CalendarIcon, XIcon, CheckIcon, BanIcon } from "@heroicons/react/outline";
|
|
import { DotsHorizontalIcon } from "@heroicons/react/solid";
|
|
import { BookingStatus, User } from "@prisma/client";
|
|
import dayjs from "dayjs";
|
|
import { useSession } from "next-auth/client";
|
|
import { useRouter } from "next/router";
|
|
import { Fragment } from "react";
|
|
|
|
import { getSession } from "@lib/auth";
|
|
import classNames from "@lib/classNames";
|
|
import prisma from "@lib/prisma";
|
|
|
|
import EmptyScreen from "@components/EmptyScreen";
|
|
import Loader from "@components/Loader";
|
|
import Shell from "@components/Shell";
|
|
import { Button } from "@components/ui/Button";
|
|
|
|
export default function Bookings({ bookings }) {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const [session, loading] = useSession();
|
|
|
|
const isEmpty = Object.keys(bookings).length === 0;
|
|
|
|
const router = useRouter();
|
|
|
|
if (loading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
async function confirmBookingHandler(booking, confirm: boolean) {
|
|
const res = await fetch("/api/book/confirm", {
|
|
method: "PATCH",
|
|
body: JSON.stringify({ id: booking.id, confirmed: confirm }),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
if (res.ok) {
|
|
await router.replace(router.asPath);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
|
|
<div className="-mx-4 sm:mx-auto flex flex-col">
|
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
|
{isEmpty ? (
|
|
<EmptyScreen
|
|
Icon={CalendarIcon}
|
|
headline="No upcoming bookings, yet"
|
|
description="You have no upcoming bookings. As soon as someone books a time with you it will show up here."
|
|
/>
|
|
) : (
|
|
<div className="border border-gray-200 overflow-hidden border-b rounded-sm">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<tbody className="bg-white divide-y divide-gray-200" data-testid="bookings">
|
|
{bookings
|
|
.filter((booking) => booking.status !== BookingStatus.CANCELLED)
|
|
.map((booking) => (
|
|
<tr key={booking.id}>
|
|
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
|
|
{!booking.confirmed && !booking.rejected && (
|
|
<span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
|
|
Unconfirmed
|
|
</span>
|
|
)}
|
|
<div className="text-sm text-neutral-900 font-medium truncate max-w-60 md:max-w-96">
|
|
{booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
|
|
{booking.title}
|
|
</div>
|
|
<div className="sm:hidden">
|
|
<div className="text-sm text-gray-900">
|
|
{dayjs(booking.startTime).format("D MMMM YYYY")}:{" "}
|
|
<small className="text-sm text-gray-500">
|
|
{dayjs(booking.startTime).format("HH:mm")} -{" "}
|
|
{dayjs(booking.endTime).format("HH:mm")}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
{booking.attendees.length !== 0 && (
|
|
<div className="text-sm text-blue-500">
|
|
<a href={"mailto:" + booking.attendees[0].email}>
|
|
{booking.attendees[0].email}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">
|
|
{dayjs(booking.startTime).format("D MMMM YYYY")}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{dayjs(booking.startTime).format("HH:mm")} -{" "}
|
|
{dayjs(booking.endTime).format("HH:mm")}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
{!booking.confirmed && !booking.rejected && (
|
|
<>
|
|
<div className="space-x-2 hidden lg:block">
|
|
<Button
|
|
onClick={() => confirmBookingHandler(booking, true)}
|
|
StartIcon={CheckIcon}
|
|
color="secondary">
|
|
Confirm
|
|
</Button>
|
|
<Button
|
|
onClick={() => confirmBookingHandler(booking, false)}
|
|
StartIcon={BanIcon}
|
|
color="secondary">
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
<Menu as="div" className="inline-block lg:hidden text-left ">
|
|
{({ open }) => (
|
|
<>
|
|
<div>
|
|
<Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
|
|
<span className="sr-only">Open options</span>
|
|
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
|
|
</Menu.Button>
|
|
</div>
|
|
<Transition
|
|
show={open}
|
|
as={Fragment}
|
|
enter="transition ease-out duration-100"
|
|
enterFrom="transform opacity-0 scale-95"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-95">
|
|
<Menu.Items
|
|
static
|
|
className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
|
|
<div className="py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<span
|
|
onClick={() => confirmBookingHandler(booking, true)}
|
|
className={classNames(
|
|
active
|
|
? "bg-neutral-100 text-neutral-900"
|
|
: "text-neutral-700",
|
|
"group flex items-center px-4 py-2 text-sm font-medium"
|
|
)}>
|
|
<CheckIcon
|
|
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
|
|
aria-hidden="true"
|
|
/>
|
|
Confirm
|
|
</span>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<span
|
|
onClick={() => confirmBookingHandler(booking, false)}
|
|
className={classNames(
|
|
active
|
|
? "bg-neutral-100 text-neutral-900"
|
|
: "text-neutral-700",
|
|
"group flex items-center px-4 py-2 text-sm w-full font-medium"
|
|
)}>
|
|
<BanIcon
|
|
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
|
|
aria-hidden="true"
|
|
/>
|
|
Reject
|
|
</span>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
</>
|
|
)}
|
|
{booking.confirmed && !booking.rejected && (
|
|
<>
|
|
<div className="space-x-2 hidden lg:block">
|
|
<Button
|
|
data-testid="cancel"
|
|
href={"/cancel/" + booking.uid}
|
|
StartIcon={XIcon}
|
|
color="secondary">
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
href={"reschedule/" + booking.uid}
|
|
StartIcon={ClockIcon}
|
|
color="secondary">
|
|
Reschedule
|
|
</Button>
|
|
</div>
|
|
<Menu as="div" className="inline-block lg:hidden text-left ">
|
|
{({ open }) => (
|
|
<>
|
|
<div>
|
|
<Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
|
|
<span className="sr-only">Open options</span>
|
|
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
|
|
</Menu.Button>
|
|
</div>
|
|
|
|
<Transition
|
|
show={open}
|
|
as={Fragment}
|
|
enter="transition ease-out duration-100"
|
|
enterFrom="transform opacity-0 scale-95"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-95">
|
|
<Menu.Items
|
|
static
|
|
className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
|
|
<div className="py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<a
|
|
href={window.location.href + "/../cancel/" + booking.uid}
|
|
className={classNames(
|
|
active
|
|
? "bg-neutral-100 text-neutral-900"
|
|
: "text-neutral-700",
|
|
"group flex items-center px-4 py-2 text-sm font-medium"
|
|
)}>
|
|
<XIcon
|
|
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
|
|
aria-hidden="true"
|
|
/>
|
|
Cancel
|
|
</a>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<a
|
|
href={
|
|
window.location.href + "/../reschedule/" + booking.uid
|
|
}
|
|
className={classNames(
|
|
active
|
|
? "bg-neutral-100 text-neutral-900"
|
|
: "text-neutral-700",
|
|
"group flex items-center px-4 py-2 text-sm w-full font-medium"
|
|
)}>
|
|
<ClockIcon
|
|
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
|
|
aria-hidden="true"
|
|
/>
|
|
Reschedule
|
|
</a>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
</>
|
|
)}
|
|
{!booking.confirmed && booking.rejected && (
|
|
<div className="text-sm text-gray-500">Rejected</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Shell>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps(context) {
|
|
const session = await getSession(context);
|
|
|
|
if (!session) {
|
|
return { redirect: { permanent: false, destination: "/auth/login" } };
|
|
}
|
|
|
|
const user: User = await prisma.user.findUnique({
|
|
where: {
|
|
id: session.user.id,
|
|
},
|
|
select: {
|
|
email: true,
|
|
},
|
|
});
|
|
|
|
const b = await prisma.booking.findMany({
|
|
where: {
|
|
OR: [
|
|
{
|
|
userId: session.user.id,
|
|
},
|
|
{
|
|
attendees: {
|
|
some: {
|
|
email: user.email,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
select: {
|
|
uid: true,
|
|
title: true,
|
|
description: true,
|
|
attendees: true,
|
|
confirmed: true,
|
|
rejected: true,
|
|
id: true,
|
|
startTime: true,
|
|
endTime: true,
|
|
eventType: {
|
|
select: {
|
|
team: {
|
|
select: {
|
|
name: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
status: true,
|
|
},
|
|
orderBy: {
|
|
startTime: "asc",
|
|
},
|
|
});
|
|
|
|
const bookings = b.reverse().map((booking) => {
|
|
return { ...booking, startTime: booking.startTime.toISOString(), endTime: booking.endTime.toISOString() };
|
|
});
|
|
|
|
return { props: { session, bookings } };
|
|
}
|