From 52c31603b4628ae79b5ed200a170ea863a7735fe Mon Sep 17 00:00:00 2001 From: pasqualevitiello Date: Fri, 6 Feb 2026 12:18:37 +0100 Subject: [PATCH 001/134] create some webhook pages --- .../(settings)/settings/developer/page.tsx | 5 + .../developer/webhooks/new-webhook-button.tsx | 73 +++++ .../webhooks/new/new-webhook-form-fields.tsx | 252 ++++++++++++++++++ .../settings/developer/webhooks/new/page.tsx | 81 ++++++ .../webhooks/new/webhook-test-section.tsx | 12 + .../settings/developer/webhooks/page.tsx | 32 +++ .../webhooks/webhooks-list-content.tsx | 90 +++++++ apps/examples/calcom/app/layout.tsx | 4 +- .../settings/settings-nav-section.tsx | 2 +- .../components/settings/settings-sidebar.tsx | 2 +- .../default/particles/p-select-19.tsx | 2 +- apps/ui/registry/registry-particles.ts | 2 +- 12 files changed, 551 insertions(+), 6 deletions(-) create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/page.tsx create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/webhooks/new-webhook-button.tsx create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/page.tsx create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/webhook-test-section.tsx create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/webhooks/page.tsx create mode 100644 apps/examples/calcom/app/(settings)/settings/developer/webhooks/webhooks-list-content.tsx diff --git a/apps/examples/calcom/app/(settings)/settings/developer/page.tsx b/apps/examples/calcom/app/(settings)/settings/developer/page.tsx new file mode 100644 index 000000000..1802ff7b5 --- /dev/null +++ b/apps/examples/calcom/app/(settings)/settings/developer/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export default function Page() { + redirect("/settings/developer/webhooks"); +} diff --git a/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new-webhook-button.tsx b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new-webhook-button.tsx new file mode 100644 index 000000000..c8320f1a8 --- /dev/null +++ b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new-webhook-button.tsx @@ -0,0 +1,73 @@ +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@coss/ui/components/avatar"; +import { Button } from "@coss/ui/components/button"; +import { + Menu, + MenuGroup, + MenuGroupLabel, + MenuItem, + MenuPopup, + MenuTrigger, +} from "@coss/ui/components/menu"; +import { PlusIcon } from "lucide-react"; + +export type CreateForOption = { + id: string; + name: string; + type: "user" | "organization"; + initials: string; + avatar?: string; +}; + +const createForOptions: CreateForOption[] = [ + { + avatar: + "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80", + id: "user-1", + initials: "AE", + name: "Admin Example", + type: "user", + }, + { id: "org-1", initials: "AI", name: "Acme Inc.", type: "organization" }, + { id: "org-2", initials: "OR", name: "org", type: "organization" }, + { id: "org-3", initials: "FS", name: "fssf", type: "organization" }, +]; + +export interface NewWebhookButtonProps { + text: string; + onSelect?: (option: CreateForOption) => void; +} + +export function NewWebhookButton({ text, onSelect }: NewWebhookButtonProps) { + return ( + + }> + + + + Create for + {createForOptions.map((item) => ( + onSelect?.(item)}> + + + {item.avatar ? ( + + ) : null} + + {item.initials} + + + {item.name} + + + ))} + + + + ); +} diff --git a/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx new file mode 100644 index 000000000..8f8079938 --- /dev/null +++ b/apps/examples/calcom/app/(settings)/settings/developer/webhooks/new/new-webhook-form-fields.tsx @@ -0,0 +1,252 @@ +"use client"; + +import { Button } from "@coss/ui/components/button"; +import { + Collapsible, + CollapsiblePanel, + CollapsibleTrigger, +} from "@coss/ui/components/collapsible"; +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxEmpty, + ComboboxItem, + ComboboxList, + ComboboxPopup, + ComboboxValue, +} from "@coss/ui/components/combobox"; +import { Field, FieldDescription, FieldLabel } from "@coss/ui/components/field"; +import { Group, GroupSeparator } from "@coss/ui/components/group"; +import { Input } from "@coss/ui/components/input"; +import { + NumberField, + NumberFieldGroup, + NumberFieldInput, +} from "@coss/ui/components/number-field"; +import { ScrollArea } from "@coss/ui/components/scroll-area"; +import { + Select, + SelectItem, + SelectPopup, + SelectTrigger, + SelectValue, +} from "@coss/ui/components/select"; +import { Switch } from "@coss/ui/components/switch"; +import { Textarea } from "@coss/ui/components/textarea"; +import { ExternalLinkIcon } from "lucide-react"; +import Link from "next/link"; +import { useState } from "react"; + +const eventTriggerItems = [ + { label: "Booking canceled", value: "booking-canceled" }, + { label: "Booking created", value: "booking-created" }, + { label: "Booking rejected", value: "booking-rejected" }, + { label: "Booking requested", value: "booking-requested" }, + { label: "Booking payment initiated", value: "booking-payment-initiated" }, + { label: "Booking rescheduled", value: "booking-rescheduled" }, + { label: "Booking paid", value: "booking-paid" }, + { label: "Meeting ended", value: "meeting-ended" }, + { label: "Meeting started", value: "meeting-started" }, +]; + +const timeUnitItems = [ + { label: "mins", value: "mins" }, + { label: "hours", value: "hours" }, + { label: "days", value: "days" }, +]; + +const webhookVersionItems = [{ label: "2021-10-20", value: "2021-10-20" }]; + +const payloadVariables = [ + { + description: + "The name of the trigger event (e.g., BOOKING_CREATED, BOOKING_CANCELLED)", + name: "triggerEvent", + }, + { description: "The time of the webhook", name: "createdAt" }, + { description: "The event type slug", name: "type" }, + { description: "The event type name", name: "title" }, + { description: "The start time of the booking", name: "startTime" }, + { description: "The end time of the booking", name: "endTime" }, + { description: "List of attendee emails", name: "attendees" }, +]; + +export function NewWebhookFormFields() { + const [customPayloadOpen, setCustomPayloadOpen] = useState(false); + + return ( +
+ + Subscriber URL + + + + + + + Enable webhook + + + + + Event triggers + + + + {(value: { value: string; label: string }[]) => ( + <> + {value?.map((item) => ( + + {item.label} + + ))} + 0 ? undefined : "Select event triggers…" + } + /> + + )} + + + + No event triggers found. + + {(item: { value: string; label: string }) => ( + + {item.label} + + )} + + + + + + + + How long after the users don't show up on cal video meeting? + + + } + > + + + + + + + + + Secret + + + + + Webhook version +
+ +
+ + View payload docs for this version + + + + + + + + } + /> + Custom Payload Template + + + +
+