Merge branch 'main' into add_booking_confirmed_webhook_event

* Add booking confirmed webhook event tests

* Speeds up subsequent local testing

* Adds tests for BOOKING_CONFIRMED webhook

* Blank success page in January bookings (#1399)

* added 1 to UTC month conversion to make it 1 to 12

* with as numtype

* Zomars/cal 798 issue with billing portal (#1392)

* Uses stripeCustomerId from used metadata in billing portal

* Uses stripeCustomerId from used metadata in billing portal

# Conflicts:
#	ee/pages/api/integrations/stripepayment/portal.ts

Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

components/booking/BookingListItem.tsx

@@ -5,6 +5,7 @@ import { useMutation } from "react-query";
 
 import { HttpError } from "@lib/core/http/error";
 import { useLocale } from "@lib/hooks/useLocale";
+import showToast from "@lib/notification";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import TableActions, { ActionType } from "@components/ui/TableActions";
@@ -27,6 +28,7 @@ function BookingListItem(booking: BookingItem) {
       if (!res.ok) {
         throw new HttpError({ statusCode: res.status });
       }
+      showToast(t("booking_confirmed"), "success");
     },
     {
       async onSettled() {

lib/webhooks/constants.ts

@@ -5,4 +5,5 @@ export const WEBHOOK_TRIGGER_EVENTS = [
   WebhookTriggerEvents.BOOKING_CANCELLED,
   WebhookTriggerEvents.BOOKING_CREATED,
   WebhookTriggerEvents.BOOKING_RESCHEDULED,
-] as ["BOOKING_CANCELLED", "BOOKING_CREATED", "BOOKING_RESCHEDULED"];
+  WebhookTriggerEvents.BOOKING_CONFIRMED,
+] as ["BOOKING_CANCELLED", "BOOKING_CREATED", "BOOKING_RESCHEDULED", "BOOKING_CONFIRMED"];

pages/api/book/confirm.ts

@@ -11,6 +11,8 @@ import { CalendarEvent, AdditionInformation } from "@lib/integrations/calendar/i
 import logger from "@lib/logger";
 import prisma from "@lib/prisma";
 import { BookingConfirmBody } from "@lib/types/booking";
+import sendPayload from "@lib/webhooks/sendPayload";
+import getSubscribers from "@lib/webhooks/subscriptions";
 
 import { getTranslation } from "@server/lib/i18n";
 
@@ -84,6 +86,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         id: bookingId,
       },
       select: {
+        userId: true,
         title: true,
         description: true,
         startTime: true,
@@ -153,6 +156,23 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         await sendScheduledEmails({ ...evt, additionInformation: metadata });
       }
 
+      // Hook up the webhook logic here
+      const eventTrigger = "BOOKING_CONFIRMED";
+      // Send Webhook call if hooked to BOOKING.CONFIRMED
+      const subscribers = await getSubscribers(booking.userId, eventTrigger);
+      const promises = subscribers.map((sub) =>
+        sendPayload(
+          eventTrigger,
+          new Date().toISOString(),
+          sub.subscriberUrl,
+          evt,
+          sub.payloadTemplate
+        ).catch((e) => {
+          console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${sub.subscriberUrl}`, e);
+        })
+      );
+      await Promise.all(promises);
+
       await prisma.booking.update({
         where: {
           id: bookingId,

playwright/integrations.test.ts

@@ -1,6 +1,35 @@
 import { expect, test } from "@playwright/test";
 
-import { createHttpServer, todo, waitFor } from "./lib/testUtils";
+import { WEBHOOK_TRIGGER_EVENTS } from "../lib/webhooks/constants";
+import { createHttpServer, Request, todo } from "./lib/testUtils";
+
+function removeDynamicProps(body: 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;
+    if (attendee.id) attendee.id = dynamic;
+    if (attendee.bookingId) attendee.bookingId = dynamic;
+  }
+  body.payload.organizer.timeZone = dynamic;
+  body.payload.uid = dynamic;
+  body.payload.additionInformation = dynamic;
+  return body;
+}
+
+function findRequest(requestList: Request[], triggerEvent: typeof WEBHOOK_TRIGGER_EVENTS[number]) {
+  return requestList.find(
+    (r) =>
+      r.body &&
+      typeof r.body === "object" &&
+      "triggerEvent" in r.body &&
+      (r.body as any).triggerEvent === triggerEvent
+  );
+}
 
 test.describe("integrations", () => {
   test.use({ storageState: "playwright/artifacts/proStorageState.json" });
@@ -18,10 +47,19 @@ test.describe("integrations", () => {
   todo("Can add CalDav Calendar");
 
   todo("Can add Apple Calendar");
+});
 
-  test("add webhook & test that creating an event triggers a webhook call", async ({ page }, testInfo) => {
-    const webhookReceiver = createHttpServer();
+test.describe("Webhooks", () => {
+  test.use({ storageState: "playwright/artifacts/proStorageState.json" });
 
+  let webhookReceiver: ReturnType<typeof createHttpServer>;
+
+  test.beforeAll(() => {
+    webhookReceiver = createHttpServer();
+  });
+
+  test("Can add webhooks", async ({ page }) => {
+    await page.goto("/integrations");
     // --- add webhook
     await page.click('[data-testid="new_webhook"]');
     expect(page.locator(`[data-testid='WebhookDialogForm']`)).toBeVisible();
@@ -30,11 +68,16 @@ test.describe("integrations", () => {
 
     await page.click("[type=submit]");
 
+    await page.waitForSelector(`text=Webhook created successfully!`);
+
     // dialog is closed
     expect(page.locator(`[data-testid='WebhookDialogForm']`)).not.toBeVisible();
     // page contains the url
     expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+  });
 
+  //   test.describe.parallel("Booking events", () => {
+  test("BOOKING_CREATED is triggered", async ({ page }, testInfo) => {
     // --- Book the first available day next month in the pro user's "30min"-event
     await page.goto(`/pro/30min`);
     await page.click('[data-testid="incrementMonth"]');
@@ -46,33 +89,64 @@ test.describe("integrations", () => {
     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);
+    await page.waitForNavigation({
+      url(url) {
+        return url.pathname.endsWith("/success");
+      },
     });
 
-    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;
-    }
-    body.payload.organizer.timeZone = dynamic;
-    body.payload.uid = dynamic;
-    body.payload.additionInformation = dynamic;
+    // --- check that webhook was called
+    const request = findRequest(webhookReceiver.requestList, "BOOKING_CREATED");
+    if (!request) throw Error("No request found for 'BOOKING_CREATED'");
 
+    const body = removeDynamicProps(request.body);
     // if we change the shape of our webhooks, we can simply update this by clicking `u`
     // console.log("BODY", body);
     // Text files shouldn't have platform specific suffixes
     testInfo.snapshotSuffix = "";
-    expect(JSON.stringify(body)).toMatchSnapshot(`webhookResponse.txt`);
+    expect(JSON.stringify(body)).toMatchSnapshot(`BOOKING_CREATED-webhook-payload.txt`);
+  });
 
+  test("BOOKING_CONFIRMED is triggered", async ({ page }, testInfo) => {
+    // --- Book the first available day next month in the pro user's "30min"-event
+    await page.goto(`/pro/opt-in`);
+    await page.click('[data-testid="incrementMonth"]');
+    await page.click('[data-testid="day"][data-disabled="false"]');
+    await page.click('[data-testid="time"]');
+
+    // --- fill form
+    await page.fill('[name="name"]', "Test Testson");
+    await page.fill('[name="email"]', "test@example.com");
+    await page.press('[name="email"]', "Enter");
+
+    await page.waitForNavigation({
+      url(url) {
+        return url.pathname.endsWith("/success");
+      },
+    });
+
+    // Go to bookings to confirm it
+    await page.goto(`/bookings`);
+
+    // Confirm the booking
+    await page.click('[data-testid="confirm"]');
+
+    // Wait for the success message
+    await page.waitForSelector(`text=Booking Confirmed`);
+
+    const request = findRequest(webhookReceiver.requestList, "BOOKING_CONFIRMED");
+    if (!request) throw Error("No request found for 'BOOKING_CONFIRMED'");
+
+    const body = removeDynamicProps(request.body);
+    // if we change the shape of our webhooks, we can simply update this by clicking `u`
+    // console.log("BODY", body);
+    // Text files shouldn't have platform specific suffixes
+    testInfo.snapshotSuffix = "";
+    expect(JSON.stringify(body)).toMatchSnapshot(`BOOKING_CONFIRMED-webhook-payload.txt`);
+  });
+  //   });
+
+  test.afterAll(() => {
     webhookReceiver.close();
   });
 });

playwright/integrations.test.ts-snapshots/BOOKING-CONFIRMED-webhook-payload-chromium.txt

@@ -0,0 +1 @@
+{"triggerEvent":"BOOKING_CONFIRMED","createdAt":"[redacted/dynamic]","payload":{"type":"opt-in between Pro Example and Test Testson","title":"opt-in between Pro Example and Test Testson","description":"","startTime":"[redacted/dynamic]","endTime":"[redacted/dynamic]","organizer":{"email":"pro@example.com","name":"Pro Example","timeZone":"[redacted/dynamic]"},"attendees":[{"id":"[redacted/dynamic]","email":"test@example.com","name":"Test Testson","timeZone":"[redacted/dynamic]","bookingId":"[redacted/dynamic]"}],"location":"[redacted/dynamic]","uid":"[redacted/dynamic]","additionInformation":"[redacted/dynamic]"}}

playwright/lib/testUtils.ts

@@ -16,7 +16,7 @@ export function randomString(length = 12) {
   return result;
 }
 
-type Request = IncomingMessage & { body?: unknown };
+export type Request = IncomingMessage & { body?: unknown };
 type RequestHandlerOptions = { req: Request; res: ServerResponse };
 type RequestHandler = (opts: RequestHandlerOptions) => void;
 

prisma/migrations/20211211155527_add_booking_confirmed_to_webhook_trigger_event/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "WebhookTriggerEvents" ADD VALUE 'BOOKING_CONFIRMED';

prisma/schema.prisma

@@ -315,6 +315,7 @@ enum WebhookTriggerEvents {
   BOOKING_CREATED
   BOOKING_RESCHEDULED
   BOOKING_CANCELLED
+  BOOKING_CONFIRMED
 }
 
 model Webhook {

scripts/seed.ts

@@ -229,6 +229,12 @@ async function main() {
         length: 60,
         price: 50,
       },
+      {
+        title: "opt-in",
+        slug: "opt-in",
+        length: 60,
+        requiresConfirmation: true,
+      },
     ],
   });