diff --git a/apps/web/components/booking/DatePicker.tsx b/apps/web/components/booking/DatePicker.tsx
index 8cfd5bd9bc..e245c4845f 100644
--- a/apps/web/components/booking/DatePicker.tsx
+++ b/apps/web/components/booking/DatePicker.tsx
@@ -1,5 +1,5 @@
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
-import { EventType, PeriodType } from "@prisma/client";
+import { EventType, PeriodType, BookingPeriodFrequency } from "@prisma/client";
import dayjs, { Dayjs } from "dayjs";
import dayjsBusinessTime from "dayjs-business-time";
import timezone from "dayjs/plugin/timezone";
@@ -35,6 +35,10 @@ type DatePickerProps = {
periodDays: number | null;
periodCountCalendarDays: boolean | null;
minimumBookingNotice: number;
+ bookingPeriodLimit: {
+ period: BookingPeriodFrequency;
+ limit: number;
+ }[];
};
function isOutOfBounds(
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 296eb0da17..baf7ebc372 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -326,6 +326,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
weekStart={profile.weekStart || "Sunday"}
eventLength={eventType.length}
minimumBookingNotice={eventType.minimumBookingNotice}
+ bookingPeriodLimit={eventType.bookingPeriodLimit}
/>
diff --git a/apps/web/components/eventtype/PeriodBookingLimit.tsx b/apps/web/components/eventtype/PeriodBookingLimit.tsx
index 83519e8de2..c1e52b7f66 100644
--- a/apps/web/components/eventtype/PeriodBookingLimit.tsx
+++ b/apps/web/components/eventtype/PeriodBookingLimit.tsx
@@ -14,11 +14,6 @@ type Props = {
setVisible: React.Dispatch
>;
};
-type Option = {
- readonly label: string;
- readonly value: string;
-};
-
function calculateMinMaxValue(periodType: string, bookingFrequency: BookingPeriodFrequencyType) {
if (periodType === "DAY") return 1;
if (periodType === "WEEK") return bookingFrequency.DAY + 1;
@@ -53,6 +48,7 @@ function PeriodBookingLimitInputs({
)}
/>
per
+ {/* TODO: Fix this selection - I can't figure out how to do this */}