diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx
index fbf552ab..66bdc43e 100644
--- a/components/booking/AvailableTimes.tsx
+++ b/components/booking/AvailableTimes.tsx
@@ -5,7 +5,7 @@ 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 });
+ const { slots, isFullyBooked } = Slots({ date, eventLength, workingHours });
return (
@@ -25,9 +25,12 @@ const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeForm
))
- ) : (
-
- )}
+ ) : isFullyBooked ?
+
+
{user} is all booked today.
+
+ :
+ }
);
};
diff --git a/components/booking/Slots.tsx b/components/booking/Slots.tsx
index ea25191b..76798e70 100644
--- a/components/booking/Slots.tsx
+++ b/components/booking/Slots.tsx
@@ -1,32 +1,49 @@
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import getSlots from "../../lib/slots";
+import dayjs, {Dayjs} from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+dayjs.extend(isBetween);
+
+type Props = {
+ eventLength: number;
+ minimumBookingNotice?: number;
+ date: Dayjs;
+}
+
+const Slots = ({ eventLength, minimumBookingNotice, date, workingHours }: Props) => {
+
+ minimumBookingNotice = minimumBookingNotice || 0;
-const Slots = (props) => {
const router = useRouter();
const { user } = router.query;
const [slots, setSlots] = useState([]);
+ const [isFullyBooked, setIsFullyBooked ] = useState(false);
useEffect(() => {
setSlots([]);
+ setIsFullyBooked(false);
fetch(
- `/api/availability/${user}?dateFrom=${props.date.startOf("day").utc().format()}&dateTo=${props.date
+ `/api/availability/${user}?dateFrom=${date.startOf("day").utc().format()}&dateTo=${date
.endOf("day")
.utc()
.format()}`
)
.then((res) => res.json())
.then(handleAvailableSlots);
- }, [props.date]);
+ }, [date]);
const handleAvailableSlots = (busyTimes: []) => {
+
const times = getSlots({
- frequency: props.eventLength,
- inviteeDate: props.date,
- workingHours: props.workingHours,
- minimumBookingNotice: 0,
+ frequency: eventLength,
+ inviteeDate: date,
+ workingHours,
+ minimumBookingNotice,
});
+ const timesLengthBeforeConflicts: number = times.length;
+
// Check for conflicts
for (let i = times.length - 1; i >= 0; i -= 1) {
busyTimes.forEach((busyTime) => {
@@ -44,22 +61,27 @@ const Slots = (props) => {
}
// Check if slot end time is between start and end time
- if (dayjs(times[i]).add(props.eventType.length, "minutes").isBetween(startTime, endTime)) {
+ if (dayjs(times[i]).add(eventLength, "minutes").isBetween(startTime, endTime)) {
times.splice(i, 1);
}
// Check if startTime is between slot
- if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, "minutes"))) {
+ if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(eventLength, "minutes"))) {
times.splice(i, 1);
}
});
}
+
+ if (times.length === 0 && timesLengthBeforeConflicts !== 0) {
+ setIsFullyBooked(true);
+ }
// Display available times
setSlots(times);
};
return {
slots,
+ isFullyBooked,
};
};