Start calculating disabled

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(

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}
                 />
 
                 <div className="mt-4 ml-1 block sm:hidden">

apps/web/components/eventtype/PeriodBookingLimit.tsx

@@ -14,11 +14,6 @@ type Props = {
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-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({
         )}
       />
       <p className="text-sm text-gray-700">per</p>
+      {/* TODO: Fix this selection - I can't figure out how to do this */}
       <select
         id={`periodBookingSelect-${index}`}
         className="ml-2 block w-24 rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"

apps/web/pages/[user]/[type].tsx

@@ -92,6 +92,17 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     },
     hidden: true,
     slug: true,
+    bookingPeriodLimit: {
+      select: {
+        period: true,
+        limit: true,
+      },
+      where: {
+        limit: {
+          gt: 0, // No point selecting where there is no limit set
+        },
+      },
+    },
     minimumBookingNotice: true,
     beforeEventBuffer: true,
     afterEventBuffer: true,

apps/web/pages/team/[slug]/[type].tsx

@@ -73,6 +73,17 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
           timeZone: true,
           slotInterval: true,
           metadata: true,
+          bookingPeriodLimit: {
+            select: {
+              period: true,
+              limit: true,
+            },
+            where: {
+              limit: {
+                gt: 0, // No point selecting where there is no limit set
+              },
+            },
+          },
           schedule: {
             select: {
               timeZone: true,

packages/lib/defaultEvents.ts

@@ -79,6 +79,7 @@ const commons = {
       darkBrandColor: "#fafafa",
     },
   ],
+  bookingPeriodLimit: [],
 };
 
 const min15Event = {