feat: minium reschedule notice on events (calcom#25575)

* wip

* add i18n and essential tests

* fix UI and add migration

* fixes

* add logic on book event

* restore comment

* remove dev debug box

* extract min reschedule notice to util

* one more replace

* add to disable reschedule component

* tidy up state

* restore lock

* restore file

* fix zod utils

* respond to cubic feedback

* fix type error

* unit tests

* add zod util

* build tests with nul minReshceuldeNotice

* fix stuff

Author: sean-brydon

apps/web/components/booking/actions/bookingActions.ts

@@ -1,3 +1,4 @@
+import { isWithinMinimumRescheduleNotice } from "@calcom/features/bookings/lib/reschedule/isWithinMinimumRescheduleNotice";
 import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
 import type { ActionType } from "@calcom/ui/components/table";
 
@@ -122,18 +123,25 @@ export function getEditEventActions(context: BookingActionContext): ActionType[]
           ? `?seatReferenceUid=${seatReferenceUid}`
           : ""
       }`,
-      disabled:
-        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling,
+      disabled: isActionDisabled("reschedule", {
+        ...context,
+        booking,
+        isBookingInPast,
+        isDisabledRescheduling,
+      }),
     },
     {
       id: "reschedule_request",
       icon: "send",
       iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
       label: t("send_reschedule_request"),
       disabled:
-        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) ||
-        isDisabledRescheduling ||
-        booking.seatsReferences.length > 0,
+        isActionDisabled("reschedule_request", {
+          ...context,
+          booking,
+          isBookingInPast,
+          isDisabledRescheduling,
+        }) || booking.seatsReferences.length > 0,
     },
     isBookingFromRoutingForm
       ? {
@@ -229,12 +237,29 @@ export function shouldShowIndividualReportButton(context: BookingActionContext):
 }
 
 export function isActionDisabled(actionId: string, context: BookingActionContext): boolean {
-  const { booking, isBookingInPast, isDisabledRescheduling, isDisabledCancelling } = context;
+  const { booking, isBookingInPast, isDisabledRescheduling, isDisabledCancelling, isAttendee } = context;
 
   switch (actionId) {
     case "reschedule":
     case "reschedule_request":
-      return (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) || isDisabledRescheduling;
+      // Only apply minimum reschedule notice restriction if user is NOT the organizer
+      // If user is an attendee (or not authenticated), apply the restriction
+      const isUserOrganizer =
+        !isAttendee &&
+        booking.loggedInUser?.userId &&
+        booking.user?.id &&
+        booking.loggedInUser.userId === booking.user.id;
+      const isWithinMinimumNotice =
+        !isUserOrganizer &&
+        isWithinMinimumRescheduleNotice(
+          new Date(booking.startTime),
+          booking.eventType.minimumRescheduleNotice ?? null
+        );
+      return (
+        (isBookingInPast && !booking.eventType.allowReschedulingPastBookings) ||
+        isDisabledRescheduling ||
+        isWithinMinimumNotice
+      );
     case "cancel":
       return isDisabledCancelling || isBookingInPast;
     case "view_recordings":

apps/web/lib/booking.ts

@@ -44,6 +44,7 @@ export const getEventTypesFromDB = async (id: number) => {
       hideOrganizerEmail: true,
       disableCancelling: true,
       disableRescheduling: true,
+      minimumRescheduleNotice: true,
       disableGuests: true,
       timeZone: true,
       profile: {

apps/web/lib/reschedule/[uid]/getServerSideProps.ts

@@ -47,6 +47,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     },
     select: {
       ...bookingMinimalSelect,
+      userId: true,
       responses: true,
       eventType: {
         select: {
@@ -59,6 +60,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
           allowReschedulingPastBookings: true,
           disableRescheduling: true,
           allowReschedulingCancelledBookings: true,
+          minimumRescheduleNotice: true,
           team: {
             select: {
               id: true,
@@ -122,17 +124,21 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     booking: {
       uid,
       status: booking.status,
+      startTime: booking.startTime,
       endTime: booking.endTime,
       responses: booking.responses,
+      userId: booking.userId,
       eventType: {
         disableRescheduling: !!eventType?.disableRescheduling,
         allowReschedulingPastBookings: eventType.allowReschedulingPastBookings,
         allowBookingFromCancelledBookingReschedule: !!eventType.allowReschedulingCancelledBookings,
+        minimumRescheduleNotice: eventType.minimumRescheduleNotice,
         teamId: eventType.team?.id ?? null,
       },
     },
     eventUrl,
     forceRescheduleForCancelledBooking: allowRescheduleForCancelledBooking,
+    currentUserId: session?.user?.id ?? null,
     bookingSeat,
   });
 

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -24,6 +24,7 @@ import {
 import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 import { getCalendarLinks, CalendarLinkType } from "@calcom/features/bookings/lib/getCalendarLinks";
 import { RATING_OPTIONS, validateRating } from "@calcom/features/bookings/lib/rating";
+import { isWithinMinimumRescheduleNotice as isWithinMinimumRescheduleNoticeUtil } from "@calcom/features/bookings/lib/reschedule/isWithinMinimumRescheduleNotice";
 import type { nameObjectSchema } from "@calcom/features/eventtypes/lib/eventNaming";
 import { getEventName } from "@calcom/features/eventtypes/lib/eventNaming";
 import { shouldShowFieldInCustomResponses } from "@calcom/lib/bookings/SystemField";
@@ -52,6 +53,7 @@ import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { EmailInput, TextArea } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
 import { useCalcomTheme } from "@calcom/ui/styles";
 import CancelBooking from "@calcom/web/components/booking/CancelBooking";
 import EventReservationSchema from "@calcom/web/components/schemas/EventReservationSchema";
@@ -385,6 +387,15 @@ export default function Success(props: PageProps) {
   const canCancel = !eventType?.disableCancelling;
   const canReschedule = !eventType?.disableRescheduling;
 
+  // Check if reschedule should be disabled due to minimum reschedule notice
+  // Use server-side computed isHost prop instead of client-side computation
+  const isWithinMinimumRescheduleNotice = isHost
+    ? false // Organizers can always reschedule
+    : isWithinMinimumRescheduleNoticeUtil(
+        bookingInfo?.startTime ?? null,
+        eventType?.minimumRescheduleNotice ?? null
+      );
+  const isRescheduleDisabled = !canReschedule || isWithinMinimumRescheduleNotice;
   const paymentStatusMessage = usePaymentStatus({
     bookingStatus: bookingInfo.status,
     startTime: bookingInfo.startTime,
@@ -489,7 +500,7 @@ export default function Success(props: PageProps) {
                 {!isFeedbackMode && (
                   <>
                     <div
-                      className={classNames(isRoundRobin && "min-w-32 min-h-24 relative mx-auto h-24 w-32")}>
+                      className={classNames(isRoundRobin && "relative mx-auto h-24 min-h-24 w-32 min-w-32")}>
                       {isRoundRobin && bookingInfo.user && (
                         <Avatar
                           className="mx-auto flex items-center justify-center"
@@ -539,7 +550,7 @@ export default function Success(props: PageProps) {
                         (bookingInfo.status === BookingStatus.CANCELLED ||
                           bookingInfo.status === BookingStatus.REJECTED) && <h4>{paymentStatusMessage}</h4>}
 
-                      <div className="border-subtle text-default mt-8 grid grid-cols-3 gap-x-4 border-t pt-8 text-left rtl:text-right sm:gap-x-0">
+                      <div className="border-subtle text-default mt-8 grid grid-cols-3 gap-x-4 border-t pt-8 text-left sm:gap-x-0 rtl:text-right">
                         {(isCancelled || reschedule) && cancellationReason && (
                           <>
                             <div className="font-medium">
@@ -810,47 +821,56 @@ export default function Success(props: PageProps) {
                       canCancelOrReschedule &&
                       (!isCancellationMode ? (
                         <>
-                          <hr className="border-subtle mb-8" />
-                          <div className="text-center last:pb-0">
-                            <span className="text-emphasis ltr:mr-2 rtl:ml-2">
-                              {t("need_to_make_a_change")}
-                            </span>
-
+                          {/* Only show section if there's at least one actionable option */}
+                          {((!props.recurringBookings &&
+                            (!isBookingInPast || eventType.allowReschedulingPastBookings) &&
+                            canReschedule) ||
+                            (!isBookingInPast && canCancel)) && (
                             <>
-                              {!props.recurringBookings &&
-                                (!isBookingInPast || eventType.allowReschedulingPastBookings) &&
-                                canReschedule && (
-                                  <span className="text-default inline">
-                                    <span className="underline" data-testid="reschedule-link">
-                                      <Link
-                                        href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}${
-                                          currentUserEmail
-                                            ? `?rescheduledBy=${encodeURIComponent(currentUserEmail)}`
-                                            : ""
-                                        }`}
-                                        legacyBehavior>
-                                        {t("reschedule")}
-                                      </Link>
-                                    </span>
-                                    {!isBookingInPast && canCancel && (
-                                      <span className="mx-2">{t("or_lowercase")}</span>
+                              <hr className="border-subtle mb-8" />
+                              <div className="text-center last:pb-0">
+                                <span className="text-emphasis ltr:mr-2 rtl:ml-2">
+                                  {t("need_to_make_a_change")}
+                                </span>
+
+                                <>
+                                  {!props.recurringBookings &&
+                                    (!isBookingInPast || eventType.allowReschedulingPastBookings) &&
+                                    canReschedule &&
+                                    !isRescheduleDisabled && (
+                                      <span className="text-default inline">
+                                        <span className="underline" data-testid="reschedule-link">
+                                          <Link
+                                            href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}${
+                                              currentUserEmail
+                                                ? `?rescheduledBy=${encodeURIComponent(currentUserEmail)}`
+                                                : ""
+                                            }`}
+                                            legacyBehavior>
+                                            {t("reschedule")}
+                                          </Link>
+                                        </span>
+                                        {!isBookingInPast && canCancel && (
+                                          <span className="mx-2">{t("or_lowercase")}</span>
+                                        )}
+                                      </span>
                                     )}
-                                  </span>
-                                )}
-
-                              {!isBookingInPast && canCancel && (
-                                <button
-                                  data-testid="cancel"
-                                  className={classNames(
-                                    "text-default underline",
-                                    props.recurringBookings && "ltr:mr-2 rtl:ml-2"
+
+                                  {!isBookingInPast && canCancel && (
+                                    <button
+                                      data-testid="cancel"
+                                      className={classNames(
+                                        "text-default underline",
+                                        props.recurringBookings && "ltr:mr-2 rtl:ml-2"
+                                      )}
+                                      onClick={() => setIsCancellationMode(true)}>
+                                      {t("cancel")}
+                                    </button>
                                   )}
-                                  onClick={() => setIsCancellationMode(true)}>
-                                  {t("cancel")}
-                                </button>
-                              )}
+                                </>
+                              </div>
                             </>
-                          </div>
+                          )}
                         </>
                       ) : (
                         <>
@@ -1067,7 +1087,7 @@ export default function Success(props: PageProps) {
               </div>
               {isGmail && !isFeedbackMode && (
                 <Alert
-                  className="main -mb-20 mt-4 inline-block ltr:text-left rtl:text-right sm:-mt-4 sm:mb-4 sm:w-full sm:max-w-xl sm:align-middle"
+                  className="main -mb-20 mt-4 inline-block sm:-mt-4 sm:mb-4 sm:w-full sm:max-w-xl sm:align-middle ltr:text-left rtl:text-right"
                   severity="warning"
                   message={
                     <div>

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

@@ -1346,6 +1346,11 @@
   "confirm_delete_api_key": "Revoke this API key",
   "disable_rescheduling": "Disable Rescheduling",
   "description_disable_rescheduling": "Guests and Organizer can no longer reschedule the event with calendar invite or email. <0>Learn more</0>",
+  "minimum_reschedule_notice": "Minimum Reschedule Notice",
+  "minimum_reschedule_notice_description": "Prevent rescheduling within this many minutes before the event starts. Leave empty to allow rescheduling at any time.",
+  "when_less_than_minutes_before_meeting": "When less than <0></0> minutes before meeting",
+  "reschedule_disabled_minimum_notice": "Rescheduling is disabled within the minimum notice period before the event",
+  "rescheduling_is_disabled": "Rescheduling is disabled for this event",
   "allow_rescheduling_cancelled_bookings": "Allow booking through reschedule link",
   "description_allow_rescheduling_cancelled_bookings": "When enabled, users will be able to create a new booking when trying to reschedule a cancelled booking",
   "disable_cancelling": "Disable Cancelling",

packages/features/bookings/lib/get-booking.ts

@@ -60,9 +60,11 @@ async function getBooking(prisma: PrismaClient, uid: string, isSeatedEvent?: boo
       location: true,
       eventTypeId: true,
       status: true,
+      userId: true,
       eventType: {
         select: {
           disableRescheduling: true,
+          minimumRescheduleNotice: true,
         },
       },
       attendees: {
@@ -232,6 +234,7 @@ export const getBookingForSeatedEvent = async (uid: string) => {
       startTime: true,
       endTime: true,
       status: true,
+      userId: true,
       attendees: {
         select: {
           id: true,
@@ -271,6 +274,7 @@ export const getBookingForSeatedEvent = async (uid: string) => {
     location: null,
     eventType: {
       disableRescheduling: false,
+      minimumRescheduleNotice: null,
     },
     // mask attendee emails for seated events
     attendees: booking.attendees.map((attendee) => ({

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

@@ -22,6 +22,7 @@ const getEventTypesFromDBSelect = {
   restrictionScheduleId: true,
   useBookerTimezone: true,
   disableRescheduling: true,
+  minimumRescheduleNotice: true,
   disableCancelling: true,
   users: {
     select: {