diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5590e6f019..80ca94703f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,7 +4,7 @@ Contributions are what make the open source community such an amazing place to l - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission. -## Priorities +## Priorities @@ -57,7 +57,6 @@ Contributions are what make the open source community such an amazing place to l
- ## Developing The development branch is `main`. This is the branch that all pull diff --git a/README.md b/README.md index f93f3f7483..239f4a3767 100644 --- a/README.md +++ b/README.md @@ -350,17 +350,16 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is Bounties of cal - + ### Contributors - + - ### Translations diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx index ffa7ba5e14..7a3328a547 100644 --- a/apps/web/components/eventtype/EventLimitsTab.tsx +++ b/apps/web/components/eventtype/EventLimitsTab.tsx @@ -1,9 +1,11 @@ import { useAutoAnimate } from "@formkit/auto-animate/react"; import * as RadioGroup from "@radix-ui/react-radio-group"; import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]"; +import type { Key } from "react"; import React, { useEffect, useState } from "react"; import type { UseFormRegisterReturn } from "react-hook-form"; import { Controller, useFormContext, useWatch } from "react-hook-form"; +import type { SingleValue } from "react-select"; import { classNames } from "@calcom/lib"; import type { DurationType } from "@calcom/lib/convertToNewDurationType"; @@ -11,8 +13,17 @@ import convertToNewDurationType from "@calcom/lib/convertToNewDurationType"; import findDurationType from "@calcom/lib/findDurationType"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { PeriodType } from "@calcom/prisma/client"; -import type { BookingLimit } from "@calcom/types/Calendar"; -import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui"; +import type { IntervalLimit } from "@calcom/types/Calendar"; +import { + Button, + DateRangePicker, + Input, + InputField, + Label, + Select, + SettingsToggle, + TextField, +} from "@calcom/ui"; import { FiPlus, FiTrash } from "@calcom/ui/components/icon"; const MinimumBookingNoticeInput = React.forwardRef< @@ -260,7 +271,34 @@ export const EventLimitsTab = ({ eventType }: Pick - + + + )} + /> +
+ ( + 0} + onCheckedChange={(active) => { + if (active) { + formMethods.setValue("durationLimits", { + PER_DAY: 60, + }); + } else { + formMethods.setValue("durationLimits", {}); + } + }}> + )} /> @@ -348,124 +386,158 @@ export const EventLimitsTab = ({ eventType }: Pick { +type IntervalLimitsKey = keyof IntervalLimit; + +const intervalOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"] as const; + +const INTERVAL_LIMIT_OPTIONS = intervalOrderKeys.map((key) => ({ + value: key as keyof IntervalLimit, + label: `Per ${key.split("_")[1].toLocaleLowerCase()}`, +})); + +type IntervalLimitItemProps = { + key: Key; + limitKey: IntervalLimitsKey; + step: number; + value: number; + textFieldSuffix?: string; + selectOptions: { value: keyof IntervalLimit; label: string }[]; + hasDeleteButton?: boolean; + onDelete: (intervalLimitsKey: IntervalLimitsKey) => void; + onLimitChange: (intervalLimitsKey: IntervalLimitsKey, limit: number) => void; + onIntervalSelect: (interval: SingleValue<{ value: keyof IntervalLimit; label: string }>) => void; +}; + +const IntervalLimitItem = ({ + limitKey, + step, + value, + textFieldSuffix, + selectOptions, + hasDeleteButton, + onDelete, + onLimitChange, + onIntervalSelect, +}: IntervalLimitItemProps) => { + return ( +
+ onLimitChange(limitKey, parseInt(e.target.value))} + /> + { - const val = e.target.value; - setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val)); - }} - /> -