diff --git a/apps/web/components/v2/eventtype/EventLimitsTab.tsx b/apps/web/components/v2/eventtype/EventLimitsTab.tsx index 72881669b1..f02874fa44 100644 --- a/apps/web/components/v2/eventtype/EventLimitsTab.tsx +++ b/apps/web/components/v2/eventtype/EventLimitsTab.tsx @@ -1,19 +1,21 @@ +import autoAnimate from "@formkit/auto-animate"; import * as RadioGroup from "@radix-ui/react-radio-group"; import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; 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, MinutesField } from "@calcom/ui/v2"; +import type { BookingLimit } from "@calcom/types/Calendar"; +import { Icon } from "@calcom/ui"; +import { Select, Switch, Label, Input, MinutesField, Button } from "@calcom/ui/v2"; import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker"; export const EventLimitsTab = (props: Pick) => { const { t } = useLocale(); const formMethods = useFormContext(); const { eventType } = props; - const PERIOD_TYPES = [ { type: "ROLLING" as const, @@ -154,7 +156,49 @@ export const EventLimitsTab = (props: Pick) /> +
+ +
+
+
+ ( + 0} + onCheckedChange={(active) => { + if (active) { + formMethods.setValue("bookingLimits", { + PER_DAY: 1, + }); + } else { + formMethods.setValue("bookingLimits", undefined); + } + }} + /> + )} + /> + +
+ +

+ {t("limit_booking_frequency_description")} +

+
+
+
+ +
+
+
+ +
+
@@ -261,3 +305,130 @@ export const EventLimitsTab = (props: Pick)
); }; + +const validationOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"]; +type BookingLimitsKey = keyof BookingLimit; +const BookingLimits = () => { + const { watch, setValue, control } = useFormContext(); + const watchBookingLimits = watch("bookingLimits"); + const animateRef = useRef(null); + const { t } = useLocale(); + + useEffect(() => { + animateRef.current && autoAnimate(animateRef.current); + }, [animateRef]); + + const BOOKING_LIMIT_OPTIONS: { + value: keyof BookingLimit; + label: string; + }[] = [ + { + value: "PER_DAY", + label: "Per Day", + }, + { + value: "PER_WEEK", + label: "Per Week", + }, + { + value: "PER_MONTH", + label: "Per Month", + }, + { + value: "PER_YEAR", + label: "Per Year", + }, + ]; + + return ( + { + const currentBookingLimits = value; + return ( +
    + {currentBookingLimits && + watchBookingLimits && + Object.entries(currentBookingLimits) + .sort(([limitkeyA], [limitKeyB]) => { + return ( + validationOrderKeys.indexOf(limitkeyA as BookingLimitsKey) - + validationOrderKeys.indexOf(limitKeyB as BookingLimitsKey) + ); + }) + .map(([key, bookingAmount]) => { + const bookingLimitKey = key as BookingLimitsKey; + return ( +
    + { + const val = e.target.value; + setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val)); + }} + /> +