feat: add time-based cancellation fees for no-show fee events

apps/web/components/booking/CancelBooking.tsx

@@ -6,10 +6,11 @@ import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
+import { shouldChargeNoShowCancellationFee } from "@calcom/lib/payment/shouldChargeNoShowCancellationFee";
 import { collectPageParameters, telemetryEventTypes } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button } from "@calcom/ui/components/button";
-import { Label, Select, TextArea } from "@calcom/ui/components/form";
+import { Label, Select, TextArea, CheckboxField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 
 interface InternalNotePresetsSelectProps {
@@ -76,6 +77,12 @@ type Props = {
     title?: string;
     uid?: string;
     id?: number;
+    startTime: Date;
+    payment?: {
+      amount: number;
+      currency: string;
+      appId: string | null;
+    } | null;
   };
   profile: {
     name: string | null;
@@ -100,6 +107,7 @@ type Props = {
   };
   isHost: boolean;
   internalNotePresets: { id: number; name: string; cancellationReason: string | null }[];
+  eventTypeMetadata?: Record<string, unknown> | null;
 };
 
 export default function CancelBooking(props: Props) {
@@ -112,13 +120,48 @@ export default function CancelBooking(props: Props) {
     seatReferenceUid,
     bookingCancelledEventProps,
     currentUserEmail,
-    teamId,
+    eventTypeMetadata,
   } = props;
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
   const [internalNote, setInternalNote] = useState<{ id: number; name: string } | null>(null);
+  const [acknowledgeCancellationNoShowFee, setAcknowledgeCancellationNoShowFee] = useState(false);
 
+  const getAppMetadata = (appId: string): Record<string, unknown> | null => {
+    if (!eventTypeMetadata?.apps || !appId) return null;
+    const apps = eventTypeMetadata.apps as Record<string, unknown>;
+    return (apps[appId] as Record<string, unknown>) || null;
+  };
+
+  const timeValue = booking?.payment?.appId
+    ? (getAppMetadata(booking.payment.appId) as Record<string, unknown> | null)?.autoChargeNoShowFeeTimeValue
+    : null;
+  const timeUnit = booking?.payment?.appId
+    ? (getAppMetadata(booking.payment.appId) as Record<string, unknown> | null)?.autoChargeNoShowFeeTimeUnit
+    : null;
+
+  const autoChargeNoShowFee = () => {
+    if (props.isHost) return false; // Hosts/organizers are exempt
+
+    if (!booking?.startTime) return false;
+
+    if (!booking?.payment) return false;
+
+    return shouldChargeNoShowCancellationFee({
+      eventTypeMetadata: eventTypeMetadata || null,
+      booking,
+      payment: booking.payment,
+    });
+  };
+
+  const cancellationNoShowFeeWarning = autoChargeNoShowFee();
+
+  const hostMissingCancellationReason =
+    props.isHost &&
+    (!cancellationReason?.trim() || (props.internalNotePresets.length > 0 && !internalNote?.id));
+  const cancellationNoShowFeeNotAcknowledged =
+    !props.isHost && cancellationNoShowFeeWarning && !acknowledgeCancellationNoShowFee;
   const cancelBookingRef = useCallback((node: HTMLTextAreaElement) => {
     if (node !== null) {
       // eslint-disable-next-line @calcom/eslint/no-scroll-into-view-embed -- CancelBooking is not usually used in embed mode
@@ -187,6 +230,23 @@ export default function CancelBooking(props: Props) {
               </p>
             </div>
           ) : null}
+          {cancellationNoShowFeeWarning && booking?.payment && (
+            <div>
+              <div className="bg-attention mb-5 rounded-md p-3">
+                <CheckboxField
+                  description={t("cancel_booking_acknowledge_no_show_fee", {
+                    timeValue,
+                    timeUnit,
+                    amount: booking.payment.amount / 100,
+                    formatParams: { amount: { currency: booking.payment.currency } },
+                  })}
+                  onChange={(e) => setAcknowledgeCancellationNoShowFee(e.target.checked)}
+                  descriptionClassName="text-info font-semibold"
+                />
+                <p className="text-subtle ml-9 mt-2 text-sm">{t("contact_organizer")}</p>
+              </div>
+            </div>
+          )}
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
             <div className="ml-auto flex w-full space-x-4 ">
               <Button
@@ -197,10 +257,7 @@ export default function CancelBooking(props: Props) {
               </Button>
               <Button
                 data-testid="confirm_cancel"
-                disabled={
-                  props.isHost &&
-                  (!cancellationReason?.trim() || (props.internalNotePresets.length > 0 && !internalNote?.id))
-                }
+                disabled={hostMissingCancellationReason || cancellationNoShowFeeNotAcknowledged}
                 onClick={async () => {
                   setLoading(true);
 

apps/web/components/booking/__tests__/CancelBooking.cancellationFee.test.tsx

@@ -0,0 +1,257 @@
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it, vi, beforeAll } from "vitest";
+
+import * as shouldChargeModule from "@calcom/lib/payment/shouldChargeNoShowCancellationFee";
+
+import CancelBooking from "../CancelBooking";
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+vi.mock("@calcom/trpc", () => ({
+  trpc: {
+    viewer: {
+      bookings: {
+        requestReschedule: {
+          useMutation: () => ({
+            mutate: vi.fn(),
+            isLoading: false,
+          }),
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("next-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (key === "cancellation_fee_warning_cancel") {
+        const opts = options as {
+          time?: string;
+          unit?: string;
+          amount?: number;
+          formatParams?: { amount?: { currency?: string } };
+        };
+        return `Cancelling within ${opts?.time} ${opts?.unit} will result in a ${opts?.amount} ${opts?.formatParams?.amount?.currency} cancellation fee being charged to your card.`;
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (key === "cancel_booking_acknowledge_no_show_fee") {
+        const opts = options as {
+          timeValue?: number;
+          timeUnit?: string;
+          amount?: number;
+          formatParams?: { amount?: { currency?: string } };
+        };
+        return `I acknowledge that cancelling within ${opts?.timeValue} ${opts?.timeUnit} will result in a ${opts?.amount} ${opts?.formatParams?.amount?.currency} cancellation fee being charged to my card.`;
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock("@calcom/lib/hooks/useTelemetry", () => ({
+  useTelemetry: () => ({
+    event: vi.fn(),
+  }),
+}));
+
+vi.mock("@calcom/lib/hooks/useRefreshData", () => ({
+  useRefreshData: () => vi.fn(),
+}));
+
+vi.mock("next/router", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    query: {},
+  }),
+}));
+
+vi.mock("@calcom/lib/payment/shouldChargeNoShowCancellationFee", () => ({
+  shouldChargeNoShowCancellationFee: vi.fn(),
+}));
+
+const mockBookingWithCancellationFee = {
+  uid: "test-booking-uid",
+  title: "Test Meeting",
+  id: 123,
+  startTime: new Date(Date.now() + 30 * 60 * 1000),
+  payment: {
+    amount: 1000,
+    currency: "usd",
+    appId: "stripe",
+  },
+};
+
+const mockEventTypeMetadataWithFee = {
+  apps: {
+    stripe: {
+      autoChargeNoShowFeeIfCancelled: true,
+      autoChargeNoShowFeeTimeValue: 1,
+      autoChargeNoShowFeeTimeUnit: "hours" as const,
+      paymentOption: "HOLD" as const,
+    },
+  },
+};
+
+const mockEventTypeMetadataWithoutFee = {
+  apps: {
+    stripe: {
+      autoChargeNoShowFeeIfCancelled: true,
+      autoChargeNoShowFeeTimeValue: 1,
+      autoChargeNoShowFeeTimeUnit: "hours" as const,
+      paymentOption: "HOLD" as const,
+    },
+  },
+};
+
+const mockProps = {
+  recurringEvent: null,
+  setIsCancellationMode: vi.fn(),
+  theme: "light",
+  allRemainingBookings: false,
+  seatReferenceUid: undefined,
+  currentUserEmail: "test@example.com",
+  bookingCancelledEventProps: {
+    booking: {},
+    organizer: {
+      name: "Test Organizer",
+      email: "organizer@example.com",
+      timeZone: "UTC",
+    },
+    eventType: {},
+  },
+  internalNotePresets: [],
+};
+
+const mockBookingWithoutCancellationFee = {
+  uid: "test-booking-uid-2",
+  title: "Test Meeting 2",
+  id: 124,
+  startTime: new Date(Date.now() + 2 * 60 * 60 * 1000),
+  payment: {
+    amount: 1000,
+    currency: "usd",
+    appId: "stripe",
+  },
+};
+
+describe("CancelBooking Cancellation Fee Warning", () => {
+  it("should show cancellation fee warning when booking is within time threshold", () => {
+    vi.mocked(shouldChargeModule.shouldChargeNoShowCancellationFee).mockReturnValue(true);
+
+    render(
+      <CancelBooking
+        booking={mockBookingWithCancellationFee}
+        profile={{ name: "Test User", slug: "test-user" }}
+        team={null}
+        isHost={false}
+        eventTypeMetadata={mockEventTypeMetadataWithFee}
+        {...mockProps}
+      />
+    );
+
+    expect(
+      screen.getByText(/I acknowledge that cancelling within 1 hours will result in a/)
+    ).toBeInTheDocument();
+  });
+
+  it("should not show cancellation fee warning when booking is outside time threshold", () => {
+    vi.mocked(shouldChargeModule.shouldChargeNoShowCancellationFee).mockReturnValue(false);
+
+    render(
+      <CancelBooking
+        booking={mockBookingWithoutCancellationFee}
+        profile={{ name: "Test User", slug: "test-user" }}
+        team={null}
+        isHost={false}
+        eventTypeMetadata={mockEventTypeMetadataWithoutFee}
+        {...mockProps}
+      />
+    );
+
+    expect(screen.queryByText(/I acknowledge that cancelling within/)).not.toBeInTheDocument();
+  });
+
+  it("should not show cancellation fee warning when user is host", () => {
+    vi.mocked(shouldChargeModule.shouldChargeNoShowCancellationFee).mockReturnValue(false);
+
+    render(
+      <CancelBooking
+        booking={mockBookingWithCancellationFee}
+        profile={{ name: "Test User", slug: "test-user" }}
+        team={null}
+        isHost={true}
+        eventTypeMetadata={mockEventTypeMetadataWithFee}
+        {...mockProps}
+      />
+    );
+
+    expect(screen.queryByText(/I acknowledge that cancelling within/)).not.toBeInTheDocument();
+  });
+
+  it("should not show cancellation fee warning when cancellation fee is disabled", () => {
+    const eventTypeMetadataWithDisabledFee = {
+      apps: {
+        stripe: {
+          autoChargeNoShowFeeIfCancelled: false,
+          autoChargeNoShowFeeTimeValue: 1,
+          autoChargeNoShowFeeTimeUnit: "hours" as const,
+          paymentOption: "HOLD" as const,
+        },
+      },
+    };
+
+    vi.mocked(shouldChargeModule.shouldChargeNoShowCancellationFee).mockReturnValue(false);
+
+    render(
+      <CancelBooking
+        booking={mockBookingWithCancellationFee}
+        profile={{ name: "Test User", slug: "test-user" }}
+        team={null}
+        isHost={false}
+        eventTypeMetadata={eventTypeMetadataWithDisabledFee}
+        {...mockProps}
+      />
+    );
+
+    expect(screen.queryByText(/I acknowledge that cancelling within/)).not.toBeInTheDocument();
+  });
+
+  it("should not show cancellation fee warning when payment option is not HOLD", () => {
+    const eventTypeMetadataWithOnBookingPayment = {
+      apps: {
+        stripe: {
+          autoChargeNoShowFeeIfCancelled: true,
+          autoChargeNoShowFeeTimeValue: 1,
+          autoChargeNoShowFeeTimeUnit: "hours" as const,
+          paymentOption: "ON_BOOKING" as const,
+        },
+      },
+    };
+
+    vi.mocked(shouldChargeModule.shouldChargeNoShowCancellationFee).mockReturnValue(false);
+
+    render(
+      <CancelBooking
+        booking={mockBookingWithCancellationFee}
+        profile={{ name: "Test User", slug: "test-user" }}
+        team={null}
+        isHost={false}
+        eventTypeMetadata={eventTypeMetadataWithOnBookingPayment}
+        {...mockProps}
+      />
+    );
+
+    expect(screen.queryByText(/I acknowledge that cancelling within/)).not.toBeInTheDocument();
+  });
+});

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

@@ -184,6 +184,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       bookingId: bookingInfo.id,
     },
     select: {
+      appId: true,
       success: true,
       refunded: true,
       currency: true,

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

@@ -867,7 +867,10 @@ export default function Success(props: PageProps) {
                               uid: bookingInfo?.uid,
                               title: bookingInfo?.title,
                               id: bookingInfo?.id,
+                              startTime: bookingInfo?.startTime,
+                              payment: props.paymentStatus,
                             }}
+                            eventTypeMetadata={eventType.metadata}
                             profile={{ name: props.profile.name, slug: props.profile.slug }}
                             recurringEvent={eventType.recurringEvent}
                             team={eventType?.team?.name}