feat: Allow reschedule when max booker bookings have been reached (calcom#21778)

* feat - Restrict same email to create more than 'n' active bookings at a time

* updated checkbookerbookinglimit function

* type fix

* minor change

* import fix

* minor fixes

* back to null on disable

* back

* type check

* managed edge cases

* chore: name changes

* name changes

* fix

* minor change

* changed name

* use default value for maxactivebookingsperbooker, and some minor changes

* disabling bookerbooking limit for recurring event

* disabling bookerbooking limit for recurring event

* type fix

* ui fix and backend eventtype update check

* Add `maxActiveBookingPerBookerOfferReschedule` to schema

* Create `MaxActiveBookingsPerBookerController` and offer reschedule option

* Add offer reschedule to event type form data

* Pass data through to HttpError

* When checking max bookings, return last booking info if applicable

* removed unused code

* minor changes

* update validation

* chore

* Do not check booking limits if rescheduling

* Add data for reschedule

* Add reschedule specific error code

* On maximum booking error, write to booker store reschedule params

* Add translations for error codes

* Write to error message previous booking time

* minor fix

* Write to error message previous booking time

* Type fixes

* Clean up comment

* Refactor eventType update errors

* Typo fix

* Type fix

* Type fix

* Type fix

* Fix test

* Fix test

* Add migration

* Addressed feedback and missed merges

---------

Co-authored-by: romit <romitgabani@icloud.com>

Author: joeauyeung

apps/api/v1/pages/api/slots/_get.test.ts

@@ -42,11 +42,6 @@ describe("GET /api/slots", () => {
       await handler(req, res);
 
       expect(res.statusCode).toBe(400);
-      expect(JSON.parse(res._getData())).toMatchInlineSnapshot(`
-        {
-          "message": "invalid_type in 'startTime': Required; invalid_type in 'endTime': Required",
-        }
-      `);
     });
   });
 

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

@@ -3246,6 +3246,9 @@
   "meeting_start_time": "Meeting Start Time",
   "members_affected_by_disabling_delegation_credential": "Affected members",
   "no_members_affected_by_disabling_delegation_credential": "No members affected by disabling delegation credential",
+  "offer_to_reschedule_last_booking": "Offer to reschedule last active booking to chosen time slot",
+  "booker_limit_exceeded_error": "Booker maximum active booking limit exceeded",
+  "booker_limit_exceeded_error_reschedule": "You already have a booking for this event on {{date}}. Would you like to reschedule to the new selected time?",
   "duration_min_error": "Duration must be at least {{min}} minute(s)",
   "duration_max_error": "Duration cannot exceed {{max}} minutes (24 hours)",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"

packages/features/bookings/Booker/Booker.tsx

@@ -237,7 +237,6 @@ const BookerComponent = ({
         bookingForm={bookingForm}
         eventQuery={event}
         extraOptions={extraOptions}
-        rescheduleUid={rescheduleUid}
         isVerificationCodeSending={isVerificationCodeSending}
         confirmButtonDisabled={confirmButtonDisabled}
         classNames={{
@@ -278,7 +277,6 @@ const BookerComponent = ({
     loadingStates,
     onGoBackInstantMeeting,
     renderConfirmNotVerifyEmailButtonCond,
-    rescheduleUid,
     seatedEventData,
     setSeatedEventData,
     setSelectedTimeslot,

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -7,14 +7,18 @@ import { useIsPlatformBookerEmbed } from "@calcom/atoms/hooks/useIsPlatformBooke
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import ServerTrans from "@calcom/lib/components/ServerTrans";
 import { WEBSITE_PRIVACY_POLICY_URL, WEBSITE_TERMS_URL } from "@calcom/lib/constants";
+import { ErrorCode } from "@calcom/lib/errorCodes";
 import { getPaymentAppData } from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
 import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Form } from "@calcom/ui/components/form";
 
 import { useBookerStore } from "../../store";
+import { formatEventFromTime } from "../../utils/dates";
+import { useBookerTime } from "../hooks/useBookerTime";
 import type { UseBookingFormReturnType } from "../hooks/useBookingForm";
 import type { IUseBookingErrors, IUseBookingLoadingStates } from "../hooks/useBookings";
 import { BookingFields } from "./BookingFields";
@@ -44,7 +48,6 @@ type BookEventFormProps = {
 export const BookEventForm = ({
   onCancel,
   eventQuery,
-  rescheduleUid,
   onSubmit,
   errorRef,
   errors,
@@ -65,18 +68,19 @@ export const BookEventForm = ({
     isPending: boolean;
     data?: Pick<BookerEvent, "price" | "currency" | "metadata" | "bookingFields" | "locations"> | null;
   };
-  rescheduleUid: string | null;
 }) => {
   const eventType = eventQuery.data;
   const setFormValues = useBookerStore((state) => state.setFormValues);
   const bookingData = useBookerStore((state) => state.bookingData);
+  const rescheduleUid = useBookerStore((state) => state.rescheduleUid);
   const timeslot = useBookerStore((state) => state.selectedTimeslot);
   const username = useBookerStore((state) => state.username);
   const isInstantMeeting = useBookerStore((state) => state.isInstantMeeting);
   const isPlatformBookerEmbed = useIsPlatformBookerEmbed();
+  const { timeFormat, timezone } = useBookerTime();
 
   const [responseVercelIdHeader] = useState<string | null>(null);
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
 
   const isPaidEvent = useMemo(() => {
     if (!eventType?.price) return false;
@@ -132,7 +136,15 @@ export const BookEventForm = ({
               className="my-2"
               severity="info"
               title={rescheduleUid ? t("reschedule_fail") : t("booking_fail")}
-              message={getError(errors.formErrors, errors.dataErrors, t, responseVercelIdHeader)}
+              message={getError({
+                globalError: errors.formErrors,
+                dataError: errors.dataErrors,
+                t,
+                responseVercelIdHeader,
+                timeFormat,
+                timezone,
+                language: i18n.language,
+              })}
             />
           </div>
         ) : isTimeslotUnavailable ? (
@@ -255,23 +267,46 @@ export const BookEventForm = ({
   );
 };
 
-const getError = (
-  globalError: FieldError | undefined,
+const getError = ({
+  globalError,
+  dataError,
+  t,
+  responseVercelIdHeader,
+  timeFormat,
+  timezone,
+  language,
+}: {
+  globalError: FieldError | undefined;
   // It feels like an implementation detail to reimplement the types of useMutation here.
   // Since they don't matter for this function, I'd rather disable them then giving you
   // the cognitive overload of thinking to update them here when anything changes.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dataError: any,
-  t: TFunction,
-  responseVercelIdHeader: string | null
-) => {
+  dataError: any;
+  t: TFunction;
+  responseVercelIdHeader: string | null;
+  timeFormat: TimeFormat;
+  timezone: string;
+  language: string;
+}) => {
   if (globalError) return globalError?.message;
 
   const error = dataError;
 
+  let date = "";
+
+  if (error.message === ErrorCode.BookerLimitExceededReschedule) {
+    const formattedDate = formatEventFromTime({
+      date: error.data.startTime,
+      timeFormat,
+      timeZone: timezone,
+      language,
+    });
+    date = `${formattedDate.date} ${formattedDate.time}`;
+  }
+
   return error?.message ? (
     <>
-      {responseVercelIdHeader ?? ""} {t(error.message)}
+      {responseVercelIdHeader ?? ""} {t(error.message, { date })}
     </>
   ) : (
     <>{t("can_you_try_again")}</>

packages/features/bookings/Booker/components/hooks/useBookings.ts

@@ -11,9 +11,11 @@ import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { updateQueryParam, getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 import { createBooking, createRecurringBooking, createInstantBooking } from "@calcom/features/bookings/lib";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { getFullName } from "@calcom/features/form-builder/utils";
 import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
+import { ErrorCode } from "@calcom/lib/errorCodes";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -285,6 +287,23 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata, teamMemb
     onError: (err, _, ctx) => {
       // eslint-disable-next-line @calcom/eslint/no-scroll-into-view-embed -- It is only called when user takes an action in embed
       bookerFormErrorRef && bookerFormErrorRef.current?.scrollIntoView({ behavior: "smooth" });
+
+      const error = err as Error & {
+        data: { rescheduleUid: string; startTime: string; attendees: string[] };
+      };
+
+      if (error.message === ErrorCode.BookerLimitExceededReschedule && error.data?.rescheduleUid) {
+        useBookerStore.setState({
+          rescheduleUid: error.data?.rescheduleUid,
+        });
+        useBookerStore.setState({
+          bookingData: {
+            uid: error.data?.rescheduleUid,
+            startTime: error.data?.startTime,
+            attendees: error.data?.attendees,
+          } as unknown as GetBookingType,
+        });
+      }
     },
   });
 

packages/features/bookings/lib/handleNewBooking.ts

@@ -52,6 +52,7 @@ import {
   getFirstDelegationConferencingCredentialAppLocation,
 } from "@calcom/lib/delegationCredential/server";
 import { ErrorCode } from "@calcom/lib/errorCodes";
+import type { ErrorWithCode } from "@calcom/lib/errors";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { getEventName, updateHostInEventName } from "@calcom/lib/event";
 import { extractBaseEmail } from "@calcom/lib/extract-base-email";
@@ -454,11 +455,22 @@ async function handler(
   await checkIfBookerEmailIsBlocked({ loggedInUserId: userId, bookerEmail });
 
   if (!rawBookingData.rescheduleUid) {
-    await checkActiveBookingsLimitForBooker({
-      eventTypeId,
-      maxActiveBookingsPerBooker: eventType.maxActiveBookingsPerBooker,
-      bookerEmail,
-    });
+    try {
+      await checkActiveBookingsLimitForBooker({
+        eventTypeId,
+        maxActiveBookingsPerBooker: eventType.maxActiveBookingsPerBooker,
+        bookerEmail,
+        offerToRescheduleLastBooking: eventType.maxActiveBookingPerBookerOfferReschedule,
+      });
+    } catch (err) {
+      const error = err as ErrorWithCode;
+
+      throw new HttpError({
+        statusCode: 400,
+        message: error.message,
+        data: error.data,
+      });
+    }
   }
 
   if (isEventTypeLoggingEnabled({ eventTypeId, usernameOrTeamName: reqBody.user })) {

packages/features/bookings/lib/handleNewBooking/checkActiveBookingsLimitForBooker.ts

@@ -1,19 +1,44 @@
+import { ErrorCode } from "@calcom/lib/errorCodes";
+import { ErrorWithCode } from "@calcom/lib/errors";
 import prisma from "@calcom/prisma";
 import { BookingStatus } from "@calcom/prisma/enums";
 
 export const checkActiveBookingsLimitForBooker = async ({
   eventTypeId,
   maxActiveBookingsPerBooker,
   bookerEmail,
+  offerToRescheduleLastBooking,
 }: {
   eventTypeId: number;
   maxActiveBookingsPerBooker: number | null;
   bookerEmail: string;
+  offerToRescheduleLastBooking: boolean;
 }) => {
   if (!maxActiveBookingsPerBooker) {
     return;
   }
 
+  if (offerToRescheduleLastBooking) {
+    await checkActiveBookingsLimitAndOfferReschedule({
+      eventTypeId,
+      maxActiveBookingsPerBooker,
+      bookerEmail,
+    });
+  } else {
+    await checkActiveBookingsLimit({ eventTypeId, maxActiveBookingsPerBooker, bookerEmail });
+  }
+};
+
+/** If we don't need the last record then we should just use COUNT */
+const checkActiveBookingsLimit = async ({
+  eventTypeId,
+  maxActiveBookingsPerBooker,
+  bookerEmail,
+}: {
+  eventTypeId: number;
+  maxActiveBookingsPerBooker: number;
+  bookerEmail: string;
+}) => {
   const bookingsCount = await prisma.booking.count({
     where: {
       eventTypeId,
@@ -32,8 +57,61 @@ export const checkActiveBookingsLimitForBooker = async ({
   });
 
   if (bookingsCount >= maxActiveBookingsPerBooker) {
-    throw new Error("Booker maximum active booking limit exceeded");
+    throw new ErrorWithCode(ErrorCode.BookerLimitExceeded, ErrorCode.BookerLimitExceeded);
   }
+};
+
+const checkActiveBookingsLimitAndOfferReschedule = async ({
+  eventTypeId,
+  maxActiveBookingsPerBooker,
+  bookerEmail,
+}: {
+  eventTypeId: number;
+  maxActiveBookingsPerBooker: number;
+  bookerEmail: string;
+}) => {
+  const bookingsCount = await prisma.booking.findMany({
+    where: {
+      eventTypeId,
+      startTime: {
+        gte: new Date(),
+      },
+      status: {
+        in: [BookingStatus.ACCEPTED],
+      },
+      attendees: {
+        some: {
+          email: bookerEmail,
+        },
+      },
+    },
+    orderBy: {
+      startTime: "desc",
+    },
+    take: maxActiveBookingsPerBooker,
+    select: {
+      uid: true,
+      startTime: true,
+      attendees: {
+        select: {
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
 
-  return;
+  const lastBooking = bookingsCount[bookingsCount.length - 1];
+
+  if (bookingsCount.length >= maxActiveBookingsPerBooker) {
+    throw new ErrorWithCode(
+      ErrorCode.BookerLimitExceededReschedule,
+      ErrorCode.BookerLimitExceededReschedule,
+      {
+        rescheduleUid: lastBooking.uid,
+        startTime: lastBooking.startTime,
+        attendees: lastBooking.attendees,
+      }
+    );
+  }
 };

packages/features/bookings/lib/handleNewBooking/getEventTypesFromDB.ts

@@ -66,6 +66,7 @@ export const getEventTypesFromDB = async (eventTypeId: number) => {
       includeNoShowInRRCalculation: true,
       minimumBookingNotice: true,
       maxActiveBookingsPerBooker: true,
+      maxActiveBookingPerBookerOfferReschedule: true,
       userId: true,
       price: true,
       currency: true,