ef3274d8f3
* More tests to be added to verify slots logic * Adds Jest * Implements logic to the booking code to take into account grayed days * Slots take workhours into account TODO: Improve the tests, evaluate the structure, small re-orgs here and there for improved readability / better code
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import Slots from "./Slots";
|
|
|
|
const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeFormat }) => {
|
|
const router = useRouter();
|
|
const { user, rescheduleUid } = router.query;
|
|
const { slots } = Slots({ date, eventLength, workingHours });
|
|
return (
|
|
<div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3 md:max-h-97 overflow-y-auto">
|
|
<div className="text-gray-600 font-light text-xl mb-4 text-left">
|
|
<span className="w-1/2">{date.format("dddd DD MMMM YYYY")}</span>
|
|
</div>
|
|
{slots.length > 0 ? (
|
|
slots.map((slot) => (
|
|
<div key={slot.format()}>
|
|
<Link
|
|
href={
|
|
`/${user}/book?date=${slot.utc().format()}&type=${eventTypeId}` +
|
|
(rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")
|
|
}>
|
|
<a className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">
|
|
{slot.format(timeFormat)}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="loader" />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AvailableTimes;
|