fix: Set the limit of Occurrences (#10269)

apps/web/public/static/locales/en/common.json

@@ -510,6 +510,7 @@
   "your_name": "Your name",
   "your_full_name": "Your full name",
   "no_name":"No name",
+  "enter_number_between_range": "Please enter a number between 1 and {{maxOccurences}}",
   "email_address": "Email address",
   "enter_valid_email": "Please enter a valid email",
   "location": "Location",

packages/features/bookings/Booker/store.ts

@@ -6,8 +6,7 @@ import { BookerLayouts } from "@calcom/prisma/zod-utils";
 
 import type { GetBookingType } from "../lib/get-booking";
 import type { BookerState, BookerLayout } from "./types";
-import { validateLayout } from "./utils/layout";
-import { updateQueryParam, getQueryParam, removeQueryParam } from "./utils/query-param";
+import { updateQueryParam, getQueryParam } from "./utils/query-param";
 
 /**
  * Arguments passed into store initializer, containing
@@ -86,6 +85,11 @@ export type BookerStore = {
    */
   recurringEventCount: number | null;
   setRecurringEventCount(count: number | null): void;
+  /**
+   * Input occurrence count.
+   */
+  occurenceCount: number | null;
+  setOccurenceCount(count: number | null): void;
   /**
    * If booking is being rescheduled or it has seats, it receives a rescheduleUid or bookingUid
    * the current booking details are passed in. The `bookingData`
@@ -241,6 +245,8 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
   },
   recurringEventCount: null,
   setRecurringEventCount: (recurringEventCount: number | null) => set({ recurringEventCount }),
+  occurenceCount: null,
+  setOccurenceCount: (occurenceCount: number | null) => set({ occurenceCount }),
   rescheduleUid: null,
   bookingData: null,
   bookingUid: null,

packages/features/bookings/components/event-meta/Occurences.tsx

@@ -1,31 +1,38 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringDates } from "@calcom/lib/parse-dates";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
-import { Tooltip } from "@calcom/ui";
+import { Tooltip, Alert } from "@calcom/ui";
 import { Input } from "@calcom/ui";
 
 import { useTimePreferences } from "../../lib";
 import type { PublicEvent } from "../../types";
 
 export const EventOccurences = ({ event }: { event: PublicEvent }) => {
+  const maxOccurences = event.recurringEvent?.count || null;
   const { t, i18n } = useLocale();
-  const [setRecurringEventCount, recurringEventCount] = useBookerStore((state) => [
-    state.setRecurringEventCount,
-    state.recurringEventCount,
-  ]);
+  const [setRecurringEventCount, recurringEventCount, setOccurenceCount, occurenceCount] = useBookerStore(
+    (state) => [
+      state.setRecurringEventCount,
+      state.recurringEventCount,
+      state.setOccurenceCount,
+      state.occurenceCount,
+    ]
+  );
   const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
   const bookerState = useBookerStore((state) => state.state);
   const { timezone, timeFormat } = useTimePreferences();
-
+  const [warning, setWarning] = useState(false);
   // Set initial value in booker store.
   useEffect(() => {
     if (!event.recurringEvent?.count) return;
-    setRecurringEventCount(event.recurringEvent.count);
-  }, [setRecurringEventCount, event.recurringEvent]);
-
+    setOccurenceCount(occurenceCount || event.recurringEvent.count);
+    setRecurringEventCount(recurringEventCount || event.recurringEvent.count);
+    if (occurenceCount && (occurenceCount > event.recurringEvent.count || occurenceCount < 1))
+      setWarning(true);
+  }, [setRecurringEventCount, event.recurringEvent, recurringEventCount, setOccurenceCount, occurenceCount]);
   if (!event.recurringEvent) return null;
 
   if (bookerState === "booking" && recurringEventCount && selectedTimeslot) {
@@ -63,14 +70,35 @@ export const EventOccurences = ({ event }: { event: PublicEvent }) => {
       <Input
         className="my-1 mr-3 inline-flex h-[26px] w-[46px] px-1 py-0"
         type="number"
-        defaultValue={event.recurringEvent.count}
+        min="1"
+        max={event.recurringEvent.count}
+        defaultValue={occurenceCount || event.recurringEvent.count}
         onChange={(event) => {
-          setRecurringEventCount(parseInt(event?.target.value));
+          const pattern = /^(?=.*[0-9])\S+$/;
+          const inputValue = parseInt(event.target.value);
+          setOccurenceCount(inputValue);
+          if (
+            !pattern.test(event.target.value) ||
+            inputValue < 1 ||
+            (maxOccurences && inputValue > maxOccurences)
+          ) {
+            setWarning(true);
+            setRecurringEventCount(maxOccurences);
+          } else {
+            setWarning(false);
+            setRecurringEventCount(inputValue);
+          }
         }}
       />
+
       {t("occurrence", {
         count: recurringEventCount || event.recurringEvent.count,
       })}
+      {warning && (
+        <div className="-ml-4 mr-4 mt-2 flex">
+          <Alert severity="warning" title={t("enter_number_between_range", { maxOccurences })} />
+        </div>
+      )}
     </>
   );
 };