public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

unlock all fields in limits tab (#11936) 

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
11927-placeholder-in-search-field-in-apps-section
Carina Wollendorfer 2023-10-17 11:37:37 +02:00 committed by GitHub
parent 91ac952a72
commit 7a014761dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
apps/web/components/eventtype/EventLimitsTab.tsx
View File

@ -7,7 +7,6 @@ import type { UseFormRegisterReturn } from "react-hook-form";
import { Controller, useFormContext, useWatch } from "react-hook-form"; import { Controller, useFormContext, useWatch } from "react-hook-form";
import type { SingleValue } from "react-select"; import type { SingleValue } from "react-select";
import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
import { classNames } from "@calcom/lib"; import { classNames } from "@calcom/lib";
import type { DurationType } from "@calcom/lib/convertToNewDurationType"; import type { DurationType } from "@calcom/lib/convertToNewDurationType";
import convertToNewDurationType from "@calcom/lib/convertToNewDurationType"; import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
@ -141,17 +140,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
defaultValue: periodType?.type, defaultValue: periodType?.type,
}); });
const { shouldLockIndicator, shouldLockDisableProps } = useLockedFieldsManager(
eventType,
t("locked_fields_admin_description"),
t("locked_fields_member_description")
);
const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
const durationLimitsLocked = shouldLockDisableProps("durationLimits");
const periodTypeLocked = shouldLockDisableProps("periodType");
const offsetStartLockedProps = shouldLockDisableProps("offsetStart");
const optionsPeriod = [ const optionsPeriod = [
{ value: 1, label: t("calendar_days") }, { value: 1, label: t("calendar_days") },
{ value: 0, label: t("business_days") }, { value: 0, label: t("business_days") },
@ -174,10 +162,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
<div className="border-subtle space-y-6 rounded-lg border p-6"> <div className="border-subtle space-y-6 rounded-lg border p-6">
<div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0"> <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
<div className="w-full"> <div className="w-full">
<Label htmlFor="beforeBufferTime"> <Label htmlFor="beforeBufferTime">{t("before_event")}</Label>
{t("before_event")}
{shouldLockIndicator("bookingLimits")}
</Label>
<Controller <Controller
name="beforeBufferTime" name="beforeBufferTime"
control={formMethods.control} control={formMethods.control}
@ -196,7 +181,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
return ( return (
<Select <Select
isSearchable={false} isSearchable={false}
isDisabled={shouldLockDisableProps("bookingLimits").disabled}
onChange={(val) => { onChange={(val) => {
if (val) onChange(val.value); if (val) onChange(val.value);
}} }}
@ -210,10 +194,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<Label htmlFor="afterBufferTime"> <Label htmlFor="afterBufferTime">{t("after_event")}</Label>
{t("after_event")}
{shouldLockIndicator("bookingLimits")}
</Label>
<Controller <Controller
name="afterBufferTime" name="afterBufferTime"
control={formMethods.control} control={formMethods.control}
@ -232,7 +213,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
return ( return (
<Select <Select
isSearchable={false} isSearchable={false}
isDisabled={shouldLockDisableProps("bookingLimits").disabled}
onChange={(val) => { onChange={(val) => {
if (val) onChange(val.value); if (val) onChange(val.value);
}} }}
@ -248,20 +228,11 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
</div> </div>
<div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0"> <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
<div className="w-full"> <div className="w-full">
<Label htmlFor="minimumBookingNotice"> <Label htmlFor="minimumBookingNotice">{t("minimum_booking_notice")}</Label>
{t("minimum_booking_notice")} <MinimumBookingNoticeInput {...formMethods.register("minimumBookingNotice")} />
{shouldLockIndicator("minimumBookingNotice")}
</Label>
<MinimumBookingNoticeInput
disabled={shouldLockDisableProps("minimumBookingNotice").disabled}
{...formMethods.register("minimumBookingNotice")}
/>
</div> </div>
<div className="w-full"> <div className="w-full">
<Label htmlFor="slotInterval"> <Label htmlFor="slotInterval">{t("slot_interval")}</Label>
{t("slot_interval")}
{shouldLockIndicator("slotInterval")}
</Label>
<Controller <Controller
name="slotInterval" name="slotInterval"
control={formMethods.control} control={formMethods.control}
@ -279,7 +250,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
return ( return (
<Select <Select
isSearchable={false} isSearchable={false}
isDisabled={shouldLockDisableProps("slotInterval").disabled}
onChange={(val) => { onChange={(val) => {
formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null); formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
}} }}
@ -305,7 +275,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
toggleSwitchAtTheEnd={true} toggleSwitchAtTheEnd={true}
labelClassName="text-sm" labelClassName="text-sm"
title={t("limit_booking_frequency")} title={t("limit_booking_frequency")}
{...bookingLimitsLocked}
description={t("limit_booking_frequency_description")} description={t("limit_booking_frequency_description")}
checked={isChecked} checked={isChecked}
onCheckedChange={(active) => { onCheckedChange={(active) => {
@ -323,12 +292,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
)} )}
childrenClassName="lg:ml-0"> childrenClassName="lg:ml-0">
<div className="border-subtle rounded-b-lg border border-t-0 p-6"> <div className="border-subtle rounded-b-lg border border-t-0 p-6">
<IntervalLimitsManager <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
disabled={bookingLimitsLocked.disabled}
propertyName="bookingLimits"
defaultLimit={1}
step={1}
/>
</div> </div>
</SettingsToggle> </SettingsToggle>
); );
@ -350,7 +314,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
childrenClassName="lg:ml-0" childrenClassName="lg:ml-0"
title={t("limit_total_booking_duration")} title={t("limit_total_booking_duration")}
description={t("limit_total_booking_duration_description")} description={t("limit_total_booking_duration_description")}
{...durationLimitsLocked}
checked={isChecked} checked={isChecked}
onCheckedChange={(active) => { onCheckedChange={(active) => {
if (active) { if (active) {
@ -365,7 +328,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
<IntervalLimitsManager <IntervalLimitsManager
propertyName="durationLimits" propertyName="durationLimits"
defaultLimit={60} defaultLimit={60}
disabled={durationLimitsLocked.disabled}
step={15} step={15}
textFieldSuffix={t("minutes")} textFieldSuffix={t("minutes")}
/> />
@ -391,7 +353,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
childrenClassName="lg:ml-0" childrenClassName="lg:ml-0"
title={t("limit_future_bookings")} title={t("limit_future_bookings")}
description={t("limit_future_bookings_description")} description={t("limit_future_bookings_description")}
{...periodTypeLocked}
checked={isChecked} checked={isChecked}
onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}> onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
<div className="border-subtle rounded-b-lg border border-t-0 p-6"> <div className="border-subtle rounded-b-lg border border-t-0 p-6">
@ -399,9 +360,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
defaultValue={watchPeriodType} defaultValue={watchPeriodType}
value={watchPeriodType} value={watchPeriodType}
onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}> onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
{PERIOD_TYPES.filter((opt) => {PERIOD_TYPES.map((period) => {
periodTypeLocked.disabled ? watchPeriodType === opt.type : true
).map((period) => {
if (period.type === "UNLIMITED") return null; if (period.type === "UNLIMITED") return null;
return ( return (
<div <div
@ -410,14 +369,13 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30" watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
)} )}
key={period.type}> key={period.type}>
{!periodTypeLocked.disabled && ( <RadioGroup.Item
<RadioGroup.Item id={period.type}
id={period.type} value={period.type}
value={period.type} className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2"> <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
<RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" /> </RadioGroup.Item>
</RadioGroup.Item>
)}
{period.prefix ? <span>{period.prefix}&nbsp;</span> : null} {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
{period.type === "ROLLING" && ( {period.type === "ROLLING" && (
<div className="flex items-center"> <div className="flex items-center">
@ -426,14 +384,12 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
type="number" type="number"
className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2" className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
placeholder="30" placeholder="30"
disabled={periodTypeLocked.disabled}
{...formMethods.register("periodDays", { valueAsNumber: true })} {...formMethods.register("periodDays", { valueAsNumber: true })}
defaultValue={eventType.periodDays || 30} defaultValue={eventType.periodDays || 30}
/> />
<Select <Select
options={optionsPeriod} options={optionsPeriod}
isSearchable={false} isSearchable={false}
isDisabled={periodTypeLocked.disabled}
onChange={(opt) => { onChange={(opt) => {
formMethods.setValue( formMethods.setValue(
"periodCountCalendarDays", "periodCountCalendarDays",
@ -458,7 +414,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
<DateRangePicker <DateRangePicker
startDate={formMethods.getValues("periodDates").startDate} startDate={formMethods.getValues("periodDates").startDate}
endDate={formMethods.getValues("periodDates").endDate} endDate={formMethods.getValues("periodDates").endDate}
disabled={periodTypeLocked.disabled}
onDatesChange={({ startDate, endDate }) => { onDatesChange={({ startDate, endDate }) => {
formMethods.setValue("periodDates", { formMethods.setValue("periodDates", {
startDate, startDate,
@ -490,7 +445,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
childrenClassName="lg:ml-0" childrenClassName="lg:ml-0"
title={t("offset_toggle")} title={t("offset_toggle")}
description={t("offset_toggle_description")} description={t("offset_toggle_description")}
{...offsetStartLockedProps}
checked={offsetToggle} checked={offsetToggle}
onCheckedChange={(active) => { onCheckedChange={(active) => {
setOffsetToggle(active); setOffsetToggle(active);
@ -503,7 +457,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
required required
type="number" type="number"
containerClassName="max-w-80" containerClassName="max-w-80"
{...offsetStartLockedProps}
label={t("offset_start")} label={t("offset_start")}
{...formMethods.register("offsetStart")} {...formMethods.register("offsetStart")}
addOnSuffix={<>{t("minutes")}</>} addOnSuffix={<>{t("minutes")}</>}