From 1a776a7320dd7cafafe18f214126413823be9b27 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 15 Sep 2022 19:48:22 +0100
Subject: [PATCH] Add slot interval (#4496)

---
 .../v2/eventtype/EventLimitsTab.tsx           | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/v2/eventtype/EventLimitsTab.tsx b/apps/web/components/v2/eventtype/EventLimitsTab.tsx
index 410d4a6926..f639da23d0 100644
--- a/apps/web/components/v2/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/v2/eventtype/EventLimitsTab.tsx
@@ -110,6 +110,8 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
             }}
           />
         </div>
+      </div>
+      <div className="flex flex-col space-y-4 pt-4 lg:flex-row lg:space-y-0 lg:space-x-4">
         <div className="w-full">
           <Label htmlFor="minimumBookingNotice">{t("minimum_booking_notice")} </Label>
           <Controller
@@ -142,9 +144,41 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
             }}
           />
         </div>
+        <div className="w-full">
+          <Label htmlFor="slotInterval">{t("slot_interval")} </Label>
+          <Controller
+            name="slotInterval"
+            control={formMethods.control}
+            render={() => {
+              const slotIntervalOptions = [
+                {
+                  label: t("slot_interval_default"),
+                  value: -1,
+                },
+                ...[5, 10, 15, 20, 30, 45, 60].map((minutes) => ({
+                  label: minutes + " " + t("minutes"),
+                  value: minutes,
+                })),
+              ];
+              return (
+                <Select
+                  isSearchable={false}
+                  onChange={(val) => {
+                    formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
+                  }}
+                  defaultValue={
+                    slotIntervalOptions.find((option) => option.value === eventType.slotInterval) ||
+                    slotIntervalOptions[0]
+                  }
+                  options={slotIntervalOptions}
+                />
+              );
+            }}
+          />
+        </div>
       </div>
       <hr className="my-8" />
-      <div className="">
+      <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
         <fieldset className="block flex-col sm:flex">
           <div className="flex space-x-3">
             <Controller