feat: Add new events to webhook BOOKING_CONFIRMED, BOOKING_REJECTED (#8884)

* test: booking rejection

* test: check if webhook is called

* feat: BOOKING_REJECTED enum ,constant in backend

* feat: send booking rejected webhook to subscribers

* feat: add Booking rejected migration

* calendar event

* Revert "calendar event"

This reverts commit 28d45dccfd.

* feat: BOOKING_REQUESTED enum, constant, migration

* feat: Send BOOKING REQUESTED Webhook call

* feat: Add booking rejected/requested event in form

* feat: data-testid to rejection confirm btn

* test: BOOKING_REJECTED, BOOKING_REQUESTED

* fix: booking status PENDING, Linting

* feat: add new labels to common.json

* remove: meeting ended hook from request hook

* refactor: abstract handleWebhookTrigger

* fix: create a single file for migration

* refactor: reduce code repetition and fix test

* feat: add team webhooks to subscriberOptions

* refactor: subscriberOptions

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

.github/workflows/semantic-pull-requests.yml

@@ -0,0 +1,21 @@
+name: "Validate PRs"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  validate-pr:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

apps/web/components/booking/BookingListItem.tsx

@@ -318,6 +318,7 @@ function BookingListItem(booking: BookingItemProps) {
             <DialogClose />
             <Button
               disabled={mutation.isLoading}
+              data-testid="rejection-confirm"
               onClick={() => {
                 bookingConfirm(false);
               }}>

apps/web/playwright/managed-event-types.e2e.ts

@@ -39,10 +39,10 @@ test.describe("Managed Event Types tests", () => {
       await page.click("[data-testid=new-event-type-dropdown]");
       await page.click("[data-testid=option-team-1]");
       // Expecting we can add a managed event type as team owner
-      await expect(page.locator('input[value="MANAGED"]')).toBeVisible();
+      await expect(page.locator('button[value="MANAGED"]')).toBeVisible();
 
       // Actually creating a managed event type to test things further
-      await page.click('input[value="MANAGED"]');
+      await page.click('button[value="MANAGED"]');
       await page.fill("[name=title]", "managed");
       await page.click("[type=submit]");
     });

apps/web/playwright/webhook.e2e.ts

@@ -1,131 +1,387 @@
 import { expect } from "@playwright/test";
 
 import { test } from "./lib/fixtures";
-import { createHttpServer, selectFirstAvailableTimeSlotNextMonth, waitFor } from "./lib/testUtils";
+import {
+  bookOptinEvent,
+  createHttpServer,
+  selectFirstAvailableTimeSlotNextMonth,
+  waitFor,
+} from "./lib/testUtils";
 
 test.afterEach(({ users }) => users.deleteAll());
 
-test("add webhook & test that creating an event triggers a webhook call", async ({
-  page,
-  users,
-}, testInfo) => {
-  const webhookReceiver = createHttpServer();
-  const user = await users.create();
-  const [eventType] = user.eventTypes;
-  await user.login();
-  await page.goto(`/settings/developer/webhooks`);
+test.describe("BOOKING_CREATED", async () => {
+  test("add webhook & test that creating an event triggers a webhook call", async ({
+    page,
+    users,
+  }, testInfo) => {
+    const webhookReceiver = createHttpServer();
+    const user = await users.create();
+    const [eventType] = user.eventTypes;
+    await user.login();
+    await page.goto(`/settings/developer/webhooks`);
 
-  // --- add webhook
-  await page.click('[data-testid="new_webhook"]');
+    // --- add webhook
+    await page.click('[data-testid="new_webhook"]');
 
-  await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
+    await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
 
-  await page.fill('[name="secret"]', "secret");
+    await page.fill('[name="secret"]', "secret");
 
-  await Promise.all([
-    page.click("[type=submit]"),
-    page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
-  ]);
+    await Promise.all([
+      page.click("[type=submit]"),
+      page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+    ]);
 
-  // page contains the url
-  expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+    // page contains the url
+    expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
 
-  // --- Book the first available day next month in the pro user's "30min"-event
-  await page.goto(`/${user.username}/${eventType.slug}`);
-  await selectFirstAvailableTimeSlotNextMonth(page);
+    // --- Book the first available day next month in the pro user's "30min"-event
+    await page.goto(`/${user.username}/${eventType.slug}`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
 
-  // --- fill form
-  await page.fill('[name="name"]', "Test Testson");
-  await page.fill('[name="email"]', "test@example.com");
-  await page.press('[name="email"]', "Enter");
+    // --- fill form
+    await page.fill('[name="name"]', "Test Testson");
+    await page.fill('[name="email"]', "test@example.com");
+    await page.press('[name="email"]', "Enter");
 
-  // --- check that webhook was called
-  await waitFor(() => {
-    expect(webhookReceiver.requestList.length).toBe(1);
-  });
+    // --- check that webhook was called
+    await waitFor(() => {
+      expect(webhookReceiver.requestList.length).toBe(1);
+    });
 
-  const [request] = webhookReceiver.requestList;
-  const body = request.body as any;
+    const [request] = webhookReceiver.requestList;
+    const body = request.body as any;
 
-  // remove dynamic properties that differs depending on where you run the tests
-  const dynamic = "[redacted/dynamic]";
-  body.createdAt = dynamic;
-  body.payload.startTime = dynamic;
-  body.payload.endTime = dynamic;
-  body.payload.location = dynamic;
-  for (const attendee of body.payload.attendees) {
-    attendee.timeZone = dynamic;
-    attendee.language = dynamic;
-  }
-  body.payload.organizer.id = dynamic;
-  body.payload.organizer.email = dynamic;
-  body.payload.organizer.timeZone = dynamic;
-  body.payload.organizer.language = dynamic;
-  body.payload.uid = dynamic;
-  body.payload.bookingId = dynamic;
-  body.payload.additionalInformation = dynamic;
-  body.payload.requiresConfirmation = dynamic;
-  body.payload.eventTypeId = dynamic;
-  body.payload.videoCallData = dynamic;
-  body.payload.appsStatus = dynamic;
-  body.payload.metadata.videoCallUrl = dynamic;
+    // remove dynamic properties that differs depending on where you run the tests
+    const dynamic = "[redacted/dynamic]";
+    body.createdAt = dynamic;
+    body.payload.startTime = dynamic;
+    body.payload.endTime = dynamic;
+    body.payload.location = dynamic;
+    for (const attendee of body.payload.attendees) {
+      attendee.timeZone = dynamic;
+      attendee.language = dynamic;
+    }
+    body.payload.organizer.id = dynamic;
+    body.payload.organizer.email = dynamic;
+    body.payload.organizer.timeZone = dynamic;
+    body.payload.organizer.language = dynamic;
+    body.payload.uid = dynamic;
+    body.payload.bookingId = dynamic;
+    body.payload.additionalInformation = dynamic;
+    body.payload.requiresConfirmation = dynamic;
+    body.payload.eventTypeId = dynamic;
+    body.payload.videoCallData = dynamic;
+    body.payload.appsStatus = dynamic;
+    body.payload.metadata.videoCallUrl = dynamic;
 
-  expect(body).toMatchObject({
-    triggerEvent: "BOOKING_CREATED",
-    createdAt: "[redacted/dynamic]",
-    payload: {
-      type: "30 min",
-      title: "30 min between Nameless and Test Testson",
-      description: "",
-      additionalNotes: "",
-      customInputs: {},
-      startTime: "[redacted/dynamic]",
-      endTime: "[redacted/dynamic]",
-      organizer: {
-        id: "[redacted/dynamic]",
-        name: "Nameless",
-        email: "[redacted/dynamic]",
-        timeZone: "[redacted/dynamic]",
-        language: "[redacted/dynamic]",
-      },
-      responses: {
-        email: {
-          value: "test@example.com",
-          label: "email_address",
-        },
-        name: {
-          value: "Test Testson",
-          label: "your_name",
-        },
-      },
-      userFieldsResponses: {},
-      attendees: [
-        {
-          email: "test@example.com",
-          name: "Test Testson",
+    expect(body).toMatchObject({
+      triggerEvent: "BOOKING_CREATED",
+      createdAt: "[redacted/dynamic]",
+      payload: {
+        type: "30 min",
+        title: "30 min between Nameless and Test Testson",
+        description: "",
+        additionalNotes: "",
+        customInputs: {},
+        startTime: "[redacted/dynamic]",
+        endTime: "[redacted/dynamic]",
+        organizer: {
+          id: "[redacted/dynamic]",
+          name: "Nameless",
+          email: "[redacted/dynamic]",
           timeZone: "[redacted/dynamic]",
           language: "[redacted/dynamic]",
         },
-      ],
-      location: "[redacted/dynamic]",
-      destinationCalendar: null,
-      hideCalendarNotes: false,
-      requiresConfirmation: "[redacted/dynamic]",
-      eventTypeId: "[redacted/dynamic]",
-      seatsShowAttendees: true,
-      seatsPerTimeSlot: null,
-      uid: "[redacted/dynamic]",
-      eventTitle: "30 min",
-      eventDescription: null,
-      price: 0,
-      currency: "usd",
-      length: 30,
-      bookingId: "[redacted/dynamic]",
-      metadata: { videoCallUrl: "[redacted/dynamic]" },
-      status: "ACCEPTED",
-      additionalInformation: "[redacted/dynamic]",
-    },
-  });
+        responses: {
+          email: {
+            value: "test@example.com",
+            label: "email_address",
+          },
+          name: {
+            value: "Test Testson",
+            label: "your_name",
+          },
+        },
+        userFieldsResponses: {},
+        attendees: [
+          {
+            email: "test@example.com",
+            name: "Test Testson",
+            timeZone: "[redacted/dynamic]",
+            language: "[redacted/dynamic]",
+          },
+        ],
+        location: "[redacted/dynamic]",
+        destinationCalendar: null,
+        hideCalendarNotes: false,
+        requiresConfirmation: "[redacted/dynamic]",
+        eventTypeId: "[redacted/dynamic]",
+        seatsShowAttendees: true,
+        seatsPerTimeSlot: null,
+        uid: "[redacted/dynamic]",
+        eventTitle: "30 min",
+        eventDescription: null,
+        price: 0,
+        currency: "usd",
+        length: 30,
+        bookingId: "[redacted/dynamic]",
+        metadata: { videoCallUrl: "[redacted/dynamic]" },
+        status: "ACCEPTED",
+        additionalInformation: "[redacted/dynamic]",
+      },
+    });
 
-  webhookReceiver.close();
+    webhookReceiver.close();
+  });
+});
+
+test.describe("BOOKING_REJECTED", async () => {
+  test("can book an event that requires confirmation and then that booking can be rejected by organizer", async ({
+    page,
+    users,
+  }) => {
+    const webhookReceiver = createHttpServer();
+    // --- create a user
+    const user = await users.create();
+
+    // --- visit user page
+    await page.goto(`/${user.username}`);
+
+    // --- book the user's event
+    await bookOptinEvent(page);
+
+    // --- login as that user
+    await user.login();
+
+    await page.goto(`/settings/developer/webhooks`);
+
+    // --- add webhook
+    await page.click('[data-testid="new_webhook"]');
+
+    await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
+
+    await page.fill('[name="secret"]', "secret");
+
+    await Promise.all([
+      page.click("[type=submit]"),
+      page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+    ]);
+
+    // page contains the url
+    expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+
+    await page.goto("/bookings/unconfirmed");
+    await page.click('[data-testid="reject"]');
+    await page.click('[data-testid="rejection-confirm"]');
+    await page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm"));
+
+    // --- check that webhook was called
+    await waitFor(() => {
+      expect(webhookReceiver.requestList.length).toBe(1);
+    });
+    const [request] = webhookReceiver.requestList;
+    const body = request.body as any;
+
+    // remove dynamic properties that differs depending on where you run the tests
+    const dynamic = "[redacted/dynamic]";
+    body.createdAt = dynamic;
+    body.payload.startTime = dynamic;
+    body.payload.endTime = dynamic;
+    body.payload.location = dynamic;
+    for (const attendee of body.payload.attendees) {
+      attendee.timeZone = dynamic;
+      attendee.language = dynamic;
+    }
+    body.payload.organizer.id = dynamic;
+    body.payload.organizer.email = dynamic;
+    body.payload.organizer.timeZone = dynamic;
+    body.payload.organizer.language = dynamic;
+    body.payload.uid = dynamic;
+    body.payload.bookingId = dynamic;
+    body.payload.additionalInformation = dynamic;
+    body.payload.requiresConfirmation = dynamic;
+    body.payload.eventTypeId = dynamic;
+    body.payload.videoCallData = dynamic;
+    body.payload.appsStatus = dynamic;
+    // body.payload.metadata.videoCallUrl = dynamic;
+
+    expect(body).toMatchObject({
+      triggerEvent: "BOOKING_REJECTED",
+      createdAt: "[redacted/dynamic]",
+      payload: {
+        type: "Opt in",
+        title: "Opt in between Nameless and Test Testson",
+        customInputs: {},
+        startTime: "[redacted/dynamic]",
+        endTime: "[redacted/dynamic]",
+        organizer: {
+          id: "[redacted/dynamic]",
+          name: "Unnamed",
+          email: "[redacted/dynamic]",
+          timeZone: "[redacted/dynamic]",
+          language: "[redacted/dynamic]",
+        },
+        responses: {
+          email: {
+            value: "test@example.com",
+            label: "email",
+          },
+          name: {
+            value: "Test Testson",
+            label: "name",
+          },
+        },
+        userFieldsResponses: {},
+        attendees: [
+          {
+            email: "test@example.com",
+            name: "Test Testson",
+            timeZone: "[redacted/dynamic]",
+            language: "[redacted/dynamic]",
+          },
+        ],
+        location: "[redacted/dynamic]",
+        destinationCalendar: null,
+        // hideCalendarNotes: false,
+        requiresConfirmation: "[redacted/dynamic]",
+        eventTypeId: "[redacted/dynamic]",
+        uid: "[redacted/dynamic]",
+        eventTitle: "Opt in",
+        eventDescription: null,
+        price: 0,
+        currency: "usd",
+        length: 30,
+        bookingId: "[redacted/dynamic]",
+        // metadata: { videoCallUrl: "[redacted/dynamic]" },
+        status: "REJECTED",
+        additionalInformation: "[redacted/dynamic]",
+      },
+    });
+
+    webhookReceiver.close();
+  });
+});
+
+test.describe("BOOKING_REQUESTED", async () => {
+  test("can book an event that requires confirmation and get a booking requested event", async ({
+    page,
+    users,
+  }) => {
+    const webhookReceiver = createHttpServer();
+    // --- create a user
+    const user = await users.create();
+
+    // --- login as that user
+    await user.login();
+
+    await page.goto(`/settings/developer/webhooks`);
+
+    // --- add webhook
+    await page.click('[data-testid="new_webhook"]');
+
+    await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
+
+    await page.fill('[name="secret"]', "secret");
+
+    await Promise.all([
+      page.click("[type=submit]"),
+      page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
+    ]);
+
+    // page contains the url
+    expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+
+    // --- visit user page
+    await page.goto(`/${user.username}`);
+
+    // --- book the user's opt in
+    await bookOptinEvent(page);
+
+    // --- check that webhook was called
+
+    await waitFor(() => {
+      expect(webhookReceiver.requestList.length).toBe(1);
+    });
+    const [request] = webhookReceiver.requestList;
+    const body = request.body as any;
+
+    // remove dynamic properties that differs depending on where you run the tests
+    const dynamic = "[redacted/dynamic]";
+    body.createdAt = dynamic;
+    body.payload.startTime = dynamic;
+    body.payload.endTime = dynamic;
+    body.payload.location = dynamic;
+    for (const attendee of body.payload.attendees) {
+      attendee.timeZone = dynamic;
+      attendee.language = dynamic;
+    }
+    body.payload.organizer.id = dynamic;
+    body.payload.organizer.email = dynamic;
+    body.payload.organizer.timeZone = dynamic;
+    body.payload.organizer.language = dynamic;
+    body.payload.uid = dynamic;
+    body.payload.bookingId = dynamic;
+    body.payload.additionalInformation = dynamic;
+    body.payload.requiresConfirmation = dynamic;
+    body.payload.eventTypeId = dynamic;
+    body.payload.videoCallData = dynamic;
+    body.payload.appsStatus = dynamic;
+    body.payload.metadata.videoCallUrl = dynamic;
+
+    expect(body).toMatchObject({
+      triggerEvent: "BOOKING_REQUESTED",
+      createdAt: "[redacted/dynamic]",
+      payload: {
+        type: "Opt in",
+        title: "Opt in between Nameless and Test Testson",
+        customInputs: {},
+        startTime: "[redacted/dynamic]",
+        endTime: "[redacted/dynamic]",
+        organizer: {
+          id: "[redacted/dynamic]",
+          name: "Nameless",
+          email: "[redacted/dynamic]",
+          timeZone: "[redacted/dynamic]",
+          language: "[redacted/dynamic]",
+        },
+        responses: {
+          email: {
+            value: "test@example.com",
+            label: "email_address",
+          },
+          name: {
+            value: "Test Testson",
+            label: "your_name",
+          },
+        },
+        userFieldsResponses: {},
+        attendees: [
+          {
+            email: "test@example.com",
+            name: "Test Testson",
+            timeZone: "[redacted/dynamic]",
+            language: "[redacted/dynamic]",
+          },
+        ],
+        location: "[redacted/dynamic]",
+        destinationCalendar: null,
+        requiresConfirmation: "[redacted/dynamic]",
+        eventTypeId: "[redacted/dynamic]",
+        uid: "[redacted/dynamic]",
+        eventTitle: "Opt in",
+        eventDescription: null,
+        price: 0,
+        currency: "usd",
+        length: 30,
+        bookingId: "[redacted/dynamic]",
+        status: "PENDING",
+        additionalInformation: "[redacted/dynamic]",
+        metadata: { videoCallUrl: "[redacted/dynamic]" },
+      },
+    });
+
+    webhookReceiver.close();
+  });
 });

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

@@ -374,6 +374,8 @@
   "booking_rescheduled": "Booking Rescheduled",
   "recording_ready":"Recording Download Link Ready",
   "booking_created": "Booking Created",
+  "booking_rejected":"Booking Rejected",
+  "booking_requested":"Booking Requested",
   "meeting_ended": "Meeting Ended",
   "form_submitted": "Form Submitted",
   "event_triggers": "Event Triggers",

packages/app-store/stripepayment/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/embeds/embed-core/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/embeds/embed-react/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/embeds/embed-snippet/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/features/bookings/lib/handleNewBooking.ts

@@ -33,6 +33,7 @@ import {
 } from "@calcom/emails";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { getCalEventResponses } from "@calcom/features/bookings/lib/getCalEventResponses";
+import { handleWebhookTrigger } from "@calcom/features/bookings/lib/handleWebhookTrigger";
 import {
   allowDisablingAttendeeConfirmationEmails,
   allowDisablingHostConfirmationEmails,
@@ -40,6 +41,7 @@ import {
 import { deleteScheduledEmailReminder } from "@calcom/features/ee/workflows/lib/reminders/emailReminderManager";
 import { scheduleWorkflowReminders } from "@calcom/features/ee/workflows/lib/reminders/reminderScheduler";
 import { deleteScheduledSMSReminder } from "@calcom/features/ee/workflows/lib/reminders/smsReminderManager";
+import type { GetSubscriberOptions } from "@calcom/features/webhooks/lib/getWebhooks";
 import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
 import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
 import { getVideoCallUrlFromCalEvent } from "@calcom/lib/CalEventParser";
@@ -72,7 +74,6 @@ import type { EventResult, PartialReference } from "@calcom/types/EventManager";
 import type { WorkingHours, TimeRange as DateOverride } from "@calcom/types/schedule";
 
 import type { EventTypeInfo } from "../../webhooks/lib/sendPayload";
-import sendPayload from "../../webhooks/lib/sendPayload";
 import getBookingResponsesSchema from "./getBookingResponsesSchema";
 
 const translator = short();
@@ -2092,16 +2093,44 @@ async function handler(
         videoCallUrl: getVideoCallUrlFromCalEvent(evt),
       }
     : undefined;
+
+  const eventTypeInfo: EventTypeInfo = {
+    eventTitle: eventType.title,
+    eventDescription: eventType.description,
+    requiresConfirmation: requiresConfirmation || null,
+    price: paymentAppData.price,
+    currency: eventType.currency,
+    length: eventType.length,
+  };
+  const webhookData = {
+    ...evt,
+    ...eventTypeInfo,
+    bookingId: booking?.id,
+    rescheduleUid,
+    rescheduleStartTime: originalRescheduledBooking?.startTime
+      ? dayjs(originalRescheduledBooking?.startTime).utc().format()
+      : undefined,
+    rescheduleEndTime: originalRescheduledBooking?.endTime
+      ? dayjs(originalRescheduledBooking?.endTime).utc().format()
+      : undefined,
+    metadata: { ...metadata, ...reqBody.metadata },
+    eventTypeId,
+    status: "ACCEPTED",
+    smsReminderNumber: booking?.smsReminderNumber || undefined,
+  };
+  const subscriberOptions: GetSubscriberOptions = {
+    userId: organizerUser.id,
+    eventTypeId,
+    triggerEvent: WebhookTriggerEvents.BOOKING_CREATED,
+    teamId: eventType.team?.id,
+  };
+
   if (isConfirmedByDefault) {
     const eventTrigger: WebhookTriggerEvents = rescheduleUid
       ? WebhookTriggerEvents.BOOKING_RESCHEDULED
       : WebhookTriggerEvents.BOOKING_CREATED;
-    const subscriberOptions = {
-      userId: organizerUser.id,
-      eventTypeId,
-      triggerEvent: eventTrigger,
-      teamId: eventType.team?.id,
-    };
+
+    subscriberOptions.triggerEvent = eventTrigger;
 
     const subscriberOptionsMeetingEnded = {
       userId: organizerUser.id,
@@ -2125,48 +2154,14 @@ async function handler(
       log.error("Error while running scheduledJobs for booking", error);
     }
 
-    try {
-      // Send Webhook call if hooked to BOOKING_CREATED & BOOKING_RESCHEDULED
-      const subscribers = await getWebhooks(subscriberOptions);
-      console.log("evt:", {
-        ...evt,
-        metadata: reqBody.metadata,
-      });
-      const bookingId = booking?.id;
-
-      const eventTypeInfo: EventTypeInfo = {
-        eventTitle: eventType.title,
-        eventDescription: eventType.description,
-        requiresConfirmation: requiresConfirmation || null,
-        price: paymentAppData.price,
-        currency: eventType.currency,
-        length: eventType.length,
-      };
-
-      const promises = subscribers.map((sub) =>
-        sendPayload(sub.secret, eventTrigger, new Date().toISOString(), sub, {
-          ...evt,
-          ...eventTypeInfo,
-          bookingId,
-          rescheduleUid,
-          rescheduleStartTime: originalRescheduledBooking?.startTime
-            ? dayjs(originalRescheduledBooking?.startTime).utc().format()
-            : undefined,
-          rescheduleEndTime: originalRescheduledBooking?.endTime
-            ? dayjs(originalRescheduledBooking?.endTime).utc().format()
-            : undefined,
-          metadata: { ...metadata, ...reqBody.metadata },
-          eventTypeId,
-          status: "ACCEPTED",
-          smsReminderNumber: booking?.smsReminderNumber || undefined,
-        }).catch((e) => {
-          console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${sub.subscriberUrl}`, e);
-        })
-      );
-      await Promise.all(promises);
-    } catch (error) {
-      log.error("Error while sending webhook", error);
-    }
+    // Send Webhook call if hooked to BOOKING_CREATED & BOOKING_RESCHEDULED
+    await handleWebhookTrigger({ subscriberOptions, eventTrigger, webhookData });
+  } else if (eventType.requiresConfirmation) {
+    // if eventType requires confirmation we will trigger the BOOKING REQUESTED Webhook
+    const eventTrigger: WebhookTriggerEvents = WebhookTriggerEvents.BOOKING_REQUESTED;
+    subscriberOptions.triggerEvent = eventTrigger;
+    webhookData.status = "PENDING";
+    await handleWebhookTrigger({ subscriberOptions, eventTrigger, webhookData });
   }
 
   // Avoid passing referencesToCreate with id unique constrain values

packages/features/bookings/lib/handleWebhookTrigger.ts

@@ -0,0 +1,29 @@
+import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
+import type { GetSubscriberOptions } from "@calcom/features/webhooks/lib/getWebhooks";
+import type { WebhookDataType } from "@calcom/features/webhooks/lib/sendPayload";
+import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
+import logger from "@calcom/lib/logger";
+
+export async function handleWebhookTrigger(args: {
+  subscriberOptions: GetSubscriberOptions;
+  eventTrigger: string;
+  webhookData: Omit<WebhookDataType, "createdAt" | "triggerEvent">;
+}) {
+  try {
+    const subscribers = await getWebhooks(args.subscriberOptions);
+
+    const promises = subscribers.map((sub) =>
+      sendPayload(sub.secret, args.eventTrigger, new Date().toISOString(), sub, args.webhookData).catch(
+        (e) => {
+          console.error(
+            `Error executing webhook for event: ${args.eventTrigger}, URL: ${sub.subscriberUrl}`,
+            e
+          );
+        }
+      )
+    );
+    await Promise.all(promises);
+  } catch (error) {
+    logger.error("Error while sending webhook", error);
+  }
+}

packages/features/ee/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/ee",
-  "description": "Cal.com Enterprise Edition features",
+  "description": "Cal.com Commercial License features",
   "version": "0.0.0",
   "private": true,
   "license": "See license in LICENSE",

packages/features/eventtypes/components/CreateEventTypeDialog.tsx

@@ -254,6 +254,9 @@ export default function CreateEventTypeDialog({
                   />
                 )}
                 <RadioArea.Group
+                  onValueChange={(val: SchedulingType) => {
+                    form.setValue("schedulingType", val);
+                  }}
                   className={classNames(
                     "mt-1 flex gap-4",
                     isAdmin && flags["managed-event-types"] && "flex-col"

packages/features/webhooks/components/WebhookForm.tsx

@@ -32,6 +32,8 @@ const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2: Record<string, WebhookTriggerEve
   core: [
     { value: WebhookTriggerEvents.BOOKING_CANCELLED, label: "booking_cancelled" },
     { value: WebhookTriggerEvents.BOOKING_CREATED, label: "booking_created" },
+    { value: WebhookTriggerEvents.BOOKING_REJECTED, label: "booking_rejected"},
+    { value: WebhookTriggerEvents.BOOKING_REQUESTED, label: "booking_requested"},
     { value: WebhookTriggerEvents.BOOKING_RESCHEDULED, label: "booking_rescheduled" },
     { value: WebhookTriggerEvents.MEETING_ENDED, label: "meeting_ended" },
     { value: WebhookTriggerEvents.RECORDING_READY, label: "recording_ready" },

packages/features/webhooks/lib/constants.ts

@@ -8,6 +8,8 @@ export const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP = {
     WebhookTriggerEvents.BOOKING_CREATED,
     WebhookTriggerEvents.BOOKING_RESCHEDULED,
     WebhookTriggerEvents.MEETING_ENDED,
+    WebhookTriggerEvents.BOOKING_REQUESTED,
+    WebhookTriggerEvents.BOOKING_REJECTED,
     WebhookTriggerEvents.RECORDING_READY,
   ] as const,
   "routing-forms": [WebhookTriggerEvents.FORM_SUBMITTED] as const,

packages/features/webhooks/lib/sendPayload.ts

@@ -16,7 +16,7 @@ export type EventTypeInfo = {
   length?: number | null;
 };
 
-type WebhookDataType = CalendarEvent &
+export type WebhookDataType = CalendarEvent &
   EventTypeInfo & {
     metadata?: { [key: string]: string };
     bookingId?: number;

packages/prisma/migrations/20230522115850_add_enum_booking_requested_booking_rejected/migration.sql

@@ -0,0 +1,3 @@
+-- AlterEnum
+ALTER TYPE "WebhookTriggerEvents" ADD VALUE 'BOOKING_REQUESTED';
+ALTER TYPE "WebhookTriggerEvents" ADD VALUE 'BOOKING_REJECTED';

packages/prisma/schema.prisma

@@ -495,7 +495,9 @@ enum PaymentOption {
 enum WebhookTriggerEvents {
   BOOKING_CREATED
   BOOKING_RESCHEDULED
+  BOOKING_REQUESTED
   BOOKING_CANCELLED
+  BOOKING_REJECTED
   FORM_SUBMITTED
   MEETING_ENDED
   RECORDING_READY

packages/trpc/server/routers/viewer/bookings/confirm.handler.ts

@@ -4,10 +4,12 @@ import appStore from "@calcom/app-store";
 import { sendDeclinedEmails } from "@calcom/emails";
 import { getCalEventResponses } from "@calcom/features/bookings/lib/getCalEventResponses";
 import { handleConfirmation } from "@calcom/features/bookings/lib/handleConfirmation";
+import { handleWebhookTrigger } from "@calcom/features/bookings/lib/handleWebhookTrigger";
+import type { EventTypeInfo } from "@calcom/features/webhooks/lib/sendPayload";
 import { isPrismaObjOrUndefined, parseRecurringEvent } from "@calcom/lib";
 import { getTranslation } from "@calcom/lib/server";
 import { prisma } from "@calcom/prisma";
-import { BookingStatus, MembershipRole, SchedulingType } from "@calcom/prisma/enums";
+import { BookingStatus, MembershipRole, SchedulingType, WebhookTriggerEvents } from "@calcom/prisma/enums";
 import type { CalendarEvent } from "@calcom/types/Calendar";
 import type { IAbstractPaymentService } from "@calcom/types/PaymentService";
 
@@ -304,6 +306,31 @@ export const confirmHandler = async ({ ctx, input }: ConfirmOptions) => {
     }
 
     await sendDeclinedEmails(evt);
+    // send BOOKING_REJECTED webhooks
+    const subscriberOptions = {
+      userId: booking.userId,
+      eventTypeId: booking.eventTypeId,
+      triggerEvent: WebhookTriggerEvents.BOOKING_REJECTED,
+      teamId: booking.eventType?.teamId,
+    };
+    const eventTrigger: WebhookTriggerEvents = WebhookTriggerEvents.BOOKING_REJECTED;
+    const eventTypeInfo: EventTypeInfo = {
+      eventTitle: booking.eventType?.title,
+      eventDescription: booking.eventType?.description,
+      requiresConfirmation: booking.eventType?.requiresConfirmation || null,
+      price: booking.eventType?.price,
+      currency: booking.eventType?.currency,
+      length: booking.eventType?.length,
+    };
+    const webhookData = {
+      ...evt,
+      ...eventTypeInfo,
+      bookingId,
+      eventTypeId: booking.eventType?.id,
+      status: BookingStatus.REJECTED,
+      smsReminderNumber: booking.smsReminderNumber || undefined,
+    };
+    await handleWebhookTrigger({ subscriberOptions, eventTrigger, webhookData });
   }
 
   const message = "Booking " + confirmed ? "confirmed" : "rejected";

packages/ui/form/radio-area/RadioAreaGroup.tsx

@@ -1,59 +1,57 @@
-import React from "react";
+import { useId } from "@radix-ui/react-id";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import type { ReactNode } from "react";
 
 import classNames from "@calcom/lib/classNames";
 
-type RadioAreaProps = React.InputHTMLAttributes<HTMLInputElement> & { classNames?: { container?: string } };
+type RadioAreaProps = RadioGroupPrimitive.RadioGroupItemProps & {
+  children: ReactNode;
+  classNames?: { container?: string };
+};
 
-const RadioArea = React.forwardRef<HTMLInputElement, RadioAreaProps>(
-  ({ children, className, classNames: innerClassNames, ...props }, ref) => {
-    return (
-      <label className={classNames("relative flex", className)}>
-        <input
-          ref={ref}
-          className="text-emphasis bg-subtle border-emphasis focus:ring-none peer absolute top-[0.9rem] left-3 align-baseline"
-          type="radio"
-          {...props}
-        />
-        <div
-          className={classNames(
-            "text-default peer-checked:border-emphasis border-subtle rounded-md border p-4 pt-3 pl-10",
-            innerClassNames?.container
-          )}>
-          {children}
-        </div>
-      </label>
-    );
-  }
-);
-type MaybeArray<T> = T[] | T;
-type ChildrenOfType<T extends React.ElementType> = MaybeArray<
-  React.ReactElement<React.ComponentPropsWithoutRef<T>>
->;
-interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
-  onChange?: (value: string) => void;
-  children: ChildrenOfType<typeof RadioArea>;
-}
+const RadioArea = ({ children, className, classNames: innerClassNames, ...props }: RadioAreaProps) => {
+  const radioAreaId = useId();
+  const id = props.id ?? radioAreaId;
 
-const RadioAreaGroup = ({ children, className, onChange, ...passThroughProps }: RadioAreaGroupProps) => {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (onChange && React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-          onChange(e.target.value);
-        },
-      });
-    }
-    return child;
-  });
   return (
-    <div className={className} {...passThroughProps}>
-      {childrenWithProps}
+    <div
+      className={classNames(
+        "border-subtle [&:has(input:checked)]:border-emphasis relative flex items-start rounded-md border",
+        className
+      )}>
+      <RadioGroupPrimitive.Item
+        id={id}
+        {...props}
+        className={classNames(
+          "hover:bg-subtle border-default focus:ring-emphasis absolute top-[0.9rem] left-3 mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2",
+          props.disabled && "opacity-60"
+        )}>
+        <RadioGroupPrimitive.Indicator
+          className={classNames(
+            "after:bg-default dark:after:bg-inverted relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
+            props.disabled ? "after:bg-muted" : "bg-black"
+          )}
+        />
+      </RadioGroupPrimitive.Item>
+      <label htmlFor={id} className={classNames("text-default p-4 pt-3 pl-10", innerClassNames?.container)}>
+        {children}
+      </label>
     </div>
   );
 };
 
-RadioAreaGroup.displayName = "RadioAreaGroup";
-RadioArea.displayName = "RadioArea";
+const RadioAreaGroup = ({
+  children,
+  className,
+  onValueChange,
+  ...passThroughProps
+}: RadioGroupPrimitive.RadioGroupProps) => {
+  return (
+    <RadioGroupPrimitive.Root className={className} onValueChange={onValueChange} {...passThroughProps}>
+      {children}
+    </RadioGroupPrimitive.Root>
+  );
+};
 
 const Item = RadioArea;
 const Group = RadioAreaGroup;

packages/ui/form/radio-area/Select.tsx

@@ -1,68 +0,0 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
-import React from "react";
-import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
-
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { ChevronDown } from "@calcom/ui/components/icon";
-
-import { RadioArea, RadioAreaGroup } from "./RadioAreaGroup";
-
-interface OptionProps
-  extends Pick<React.OptionHTMLAttributes<HTMLOptionElement>, "value" | "label" | "className"> {
-  description?: string;
-}
-
-export type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;
-interface RadioAreaSelectProps<TFieldValues extends FieldValues>
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "form"> {
-  options: OptionProps[]; // allow options to be passed programmatically, like options={}
-  onChange?: (value: string) => void;
-  form: UseFormReturn<TFieldValues>;
-  name: FieldPath<TFieldValues>;
-}
-
-export const Select = function RadioAreaSelect<TFieldValues extends FieldValues>(
-  props: RadioAreaSelectProps<TFieldValues>
-) {
-  const { t } = useLocale();
-  const {
-    options,
-    form,
-    disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway
-    placeholder = t("select"),
-  } = props;
-
-  const getLabel = (value: string | ReadonlyArray<string> | number | undefined) =>
-    options.find((option: OptionProps) => option.value === value)?.label;
-
-  return (
-    <Collapsible className={classNames("w-full", props.className)}>
-      <CollapsibleTrigger
-        type="button"
-        disabled={disabled}
-        className={classNames(
-          "focus:ring-primary-500 border-default bg-default mb-1 block w-full cursor-pointer rounded-sm border border p-2 text-left shadow-sm sm:text-sm",
-          disabled && "bg-emphasis cursor-default focus:ring-0 "
-        )}>
-        {getLabel(props.value) ?? placeholder}
-        <ChevronDown className="text-subtle float-right h-5 w-5" />
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <RadioAreaGroup className="space-y-2 text-sm" onChange={props.onChange}>
-          {options.map((option) => (
-            <RadioArea
-              {...form.register(props.name)}
-              {...option}
-              key={Array.isArray(option.value) ? option.value.join(",") : `${option.value}`}>
-              <strong className="mb-1 block">{option.label}</strong>
-              <p>{option.description}</p>
-            </RadioArea>
-          ))}
-        </RadioAreaGroup>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export default Select;

packages/ui/form/radio-area/index.ts

@@ -1,3 +1,2 @@
 export * as RadioGroup from "./RadioAreaGroup";
-export { default as Select } from "./Select";
 export { Group, Indicator, Label, Radio, RadioField } from "./Radio";