diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx index ea4645ef1e..07cb287871 100644 --- a/apps/web/components/eventtype/EventLimitsTab.tsx +++ b/apps/web/components/eventtype/EventLimitsTab.tsx @@ -1,8 +1,8 @@ import { useAutoAnimate } from "@formkit/auto-animate/react"; import * as RadioGroup from "@radix-ui/react-radio-group"; import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]"; -import { useMemo, useRef, useState } from "react"; -import { Controller, useFormContext, useWatch } from "react-hook-form"; +import React, { useEffect, useState } from "react"; +import { Controller, useFormContext, UseFormRegisterReturn, useWatch } from "react-hook-form"; import { classNames } from "@calcom/lib"; import convertToNewDurationType, { DurationType } from "@calcom/lib/convertToNewDurationType"; @@ -12,13 +12,95 @@ import { PeriodType } from "@calcom/prisma/client"; import type { BookingLimit } from "@calcom/types/Calendar"; import { Button, DateRangePicker, Icon, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui"; +const MinimumBookingNoticeInput = React.forwardRef< + HTMLInputElement, + Omit, "ref"> +>(function MinimumBookingNoticeInput({ ...passThroughProps }, ref) { + const { t } = useLocale(); + const { setValue, getValues } = useFormContext(); + const durationTypeOptions: { + value: DurationType; + label: string; + }[] = [ + { + label: t("minutes"), + value: "minutes", + }, + { + label: t("hours"), + value: "hours", + }, + { + label: t("days"), + value: "days", + }, + ]; + + const [minimumBookingNoticeDisplayValues, setMinimumBookingNoticeDisplayValues] = useState<{ + type: DurationType; + value: number; + }>({ + type: findDurationType(getValues(passThroughProps.name)), + value: convertToNewDurationType( + "minutes", + findDurationType(getValues(passThroughProps.name)), + getValues(passThroughProps.name) + ), + }); + // keep hidden field in sync with minimumBookingNoticeDisplayValues + useEffect(() => { + setValue( + passThroughProps.name, + convertToNewDurationType( + minimumBookingNoticeDisplayValues.type, + "minutes", + minimumBookingNoticeDisplayValues.value + ) + ); + }, [minimumBookingNoticeDisplayValues, setValue, passThroughProps.name]); + + return ( +
+
+ + setMinimumBookingNoticeDisplayValues({ + ...minimumBookingNoticeDisplayValues, + value: parseInt(e.target.value || "0", 10), + }) + } + label={t("minimum_booking_notice")} + type="number" + placeholder="0" + className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2" + /> + +
+ -
-