From 682f0c66ff970eda9dd6c0a5057ddef3f25f5aa4 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 23 Sep 2022 15:00:45 +0100
Subject: [PATCH] Fix min booking notice (#4679)

* Fix miniumbookig notice

* Fixes minutes field not working properly (#4680)

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 apps/web/components/v2/eventtype/EventLimitsTab.tsx | 4 ++--
 apps/web/pages/v2/event-types/[type]/index.tsx      | 1 +
 packages/ui/v2/core/form/fields.tsx                 | 8 ++++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/v2/eventtype/EventLimitsTab.tsx b/apps/web/components/v2/eventtype/EventLimitsTab.tsx
index 9b3710bebb..72881669b1 100644
--- a/apps/web/components/v2/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/v2/eventtype/EventLimitsTab.tsx
@@ -6,7 +6,7 @@ import { useFormContext, Controller, useWatch } from "react-hook-form";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
-import { Select, Switch, Label, Input, TextField } from "@calcom/ui/v2";
+import { Select, Switch, Label, Input, MinutesField } from "@calcom/ui/v2";
 import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
 
 export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {
@@ -113,7 +113,7 @@ export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">)
       </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">
-          <TextField
+          <MinutesField
             required
             label={t("minimum_booking_notice")}
             type="number"
diff --git a/apps/web/pages/v2/event-types/[type]/index.tsx b/apps/web/pages/v2/event-types/[type]/index.tsx
index 42c90b5e83..54c5a74339 100644
--- a/apps/web/pages/v2/event-types/[type]/index.tsx
+++ b/apps/web/pages/v2/event-types/[type]/index.tsx
@@ -153,6 +153,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         endDate: periodDates.endDate,
       },
       schedulingType: eventType.schedulingType,
+      minimumBookingNotice: eventType.minimumBookingNotice,
     },
   });
 
diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
index 99cef80673..72affbe323 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@@ -26,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
       {...props}
       ref={ref}
       className={classNames(
-        "mb-2 block h-9 w-full rounded-md border border-gray-300 py-2 px-3 text-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+        "mb-2 block h-9 w-full rounded-md border border-gray-300 py-2 px-3 text-sm placeholder:text-gray-400 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
         props.className
       )}
     />
@@ -208,7 +208,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
       {addOnLeading || addOnSuffix ? (
         <div
           className={classNames(
-            " mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-2",
+            " mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1",
             addOnSuffix && "group flex-row-reverse"
           )}>
           <div
@@ -445,3 +445,7 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
     </div>
   );
 }
+
+export const MinutesField = forwardRef<HTMLInputElement, InputFieldProps>(function MinutesField(props, ref) {
+  return <InputField ref={ref} type="number" min={0} {...props} addOnSuffix="mins" />;
+});