Discrepancy between Event Duration Validation and Error Message Displayed

[Lucas13032003]

Issue Summary

There is a discrepancy between the validation of the event duration input and the error message displayed to the user. The user receives an error stating that the value must be greater than or equal to 10, even though the validation code specifies a minimum value of 1.

Steps to Reproduce

1. Go to the event creation page on Cal.com.
2. Enter a duration of 0.5 minutes in the "Duração" field.
3. Observe the error message displayed.

This is considered a bug because the error message and the validation code are not aligned. The user expects the minimum allowed value to be 1 minute as per the code, but the error message suggests a minimum of 10 minutes.

Actual Results

• The system displays an error message stating: "O valor deve ser maior ou igual a 10" when a value of 0.5 minutes is entered.

Expected Results

• The system should either display an error message stating the correct minimum value of 1 minute or the code should be updated to reflect the minimum value of 10 minutes.

Technical Details

• Browser version: ChromeOS 117
• Screen recording: Video recording the mistake.

Evidence

• Screenshots:

  

  

• Screen recording: Video recording the mistake.

This evidence demonstrates the discrepancy between the error message displayed to the user and the validation code, providing a clear basis for troubleshooting and resolving the issue.

[Lucas13032003]

Discrepancy between Event Duration Validation and Error Message Displayed on Cal.com

[dosubot[bot]]

Hey @Lucas13032003! I'm here to help you with any bugs, questions, or contributions you have in mind. Let's tackle this issue together!

To resolve the discrepancy between the validation of the event duration input and the error message displayed to the user on Cal.com, you need to ensure that the minimum value for the input field is set correctly in the code. The error message states that the value must be greater than or equal to 10, but the validation code specifies a minimum value of 1. This discrepancy can be fixed by updating the min attribute of the InputField component to match the validation requirement.

Here is the relevant code snippet with the corrected min value:

return (
    <div className="flex items-end justify-end">
      <div className="w-1/2 md:w/full">
        <InputField
          required
          disabled={passThroughProps.disabled}
          defaultValue={minimumBookingNoticeDisplayValues.value}
          onChange={(e) =>
            setMinimumBookingNoticeDisplayValues({
              ...minimumBookingNoticeDisplayValues,
              value: parseInt(e.target.value || "0", 10),
            })
          }
          label={t("minimum_booking_notice")}
          type="number"
          placeholder="0"
          min={10}  // Updated minimum value to 10
          className="mb-0 h-9 rounded-[4px] ltr:mr-2 rtl:ml-2"
        />
        <input type="hidden" ref={ref} {...passThroughProps} />
      </div>
      <Select
        isSearchable={false}
        isDisabled={passThroughProps.disabled}
        className="mb-0 ml-2 h-9 w/full capitalize md:min-w-[150px] md:max-w/[200px]"
        defaultValue={durationTypeOptions.find(
          (option) => option.value === minimumBookingNoticeDisplayValues.type
        )}
        onChange={(input) => {
          if (input) {
            setMinimumBookingNoticeDisplayValues({
              ...minimumBookingNoticeDisplayValues,
              type: input.value,
            });
          }
        }}
        options={durationTypeOptions}
      />
    </div>
  );
});

Additionally, ensure that the backend validation logic aligns with this requirement. The checkDurationLimit function in packages/lib/server/checkDurationLimits.ts should be reviewed to confirm that it enforces the same minimum value. Here is a relevant excerpt from the backend validation logic:

export async function checkDurationLimit({
  eventStartDate,
  eventId,
  key,
  limitingNumber,
}: {
  eventStartDate: Date;
  eventId: number;
  key: keyof IntervalLimit;
  limitingNumber: number | undefined;
}) {
  {
    if (!limitingNumber) return;

    const unit = intervalLimitKeyToUnit(key);

    const startDate = dayjs(eventStartDate).startOf(unit).toDate();
    const endDate = dayjs(eventStartDate).endOf(unit).toDate();

    const totalBookingDuration = await getTotalBookingDuration({ eventId, startDate, endDate });

    if (totalBookingDuration < limitingNumber) return;

    throw new HttpError({
      message: `duration_limit_reached`,
      statusCode: 403,
    });
  }
}

By ensuring both the frontend and backend validations are consistent with a minimum value of 10, the discrepancy will be resolved, and the error message will correctly reflect the validation logic ^[1][2].

@keithwillcode, could you help with this?

#### Details

**About Dosu** This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.