@graph8/sdk 0.303.0 → 0.357.0

package/blocks/appointments/components/availability-editor.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+/**
+ * AvailabilityEditor: weekly working hours and date overrides for one schedule, plus a read-only view of the
+ * connected calendars that block busy time.
+ *
+ * SDK operations, in order:
+ *   1. GET   /appointments/schedules                         (appointments.listSchedules)      read - pick the schedule
+ *   2. GET   /appointments/schedules/{id}/availability       (appointments.getAvailability)    read
+ *   3. PATCH /appointments/schedules/{id}/availability       (appointments.updateAvailability) write - REPLACES the rules
+ *   4. GET   /appointments/calendars                         (appointments.listCalendars)      read
+ * Connecting or disconnecting a Google/Microsoft calendar is NOT possible through the API (OAuth runs only
+ * in the graph8 app), so this component links out via `connectCalendarUrl`.
+ *
+ * The API uses ISO weekdays (1 = Monday ... 7 = Sunday) and "HH:MM" times. Several windows per day are allowed.
+ */
+import { useEffect, useState } from "react";
+import { Button, Input, Skeleton, Switch } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Get, g8Patch } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useSchedules } from "../hooks/use-schedules";
+import { WEEKDAYS, listOf, toHHMM, unwrap, type AvailabilityRule, type Schedule, type TimeWindow } from "../lib/appointments-types";
+
+export interface AvailabilityEditorProps {
+  /** Schedule to edit; defaults to the org's default schedule. */
+  scheduleId?: number;
+  /** Where a human connects a calendar (the graph8 app's calendar settings). */
+  connectCalendarUrl?: string;
+  onSaved?: () => void;
+  className?: string;
+}
+
+type Week = Record<number, TimeWindow[]>;
+interface Override extends TimeWindow {
+  date: string;
+}
+interface CalendarRow {
+  credential_id: number;
+  provider: string;
+  email?: string | null;
+  is_valid?: boolean;
+}
+
+function toWeek(rules: AvailabilityRule[]): Week {
+  const week: Week = {};
+  for (const r of rules) {
+    for (const day of r.days ?? []) {
+      (week[day] ??= []).push({ start: toHHMM(r.start_time), end: toHHMM(r.end_time, "17:00") });
+    }
+  }
+  return week;
+}
+
+function fromWeek(week: Week): Array<{ days: number[]; start_time: string; end_time: string }> {
+  return Object.entries(week).flatMap(([day, windows]) => windows.map((w) => ({ days: [Number(day)], start_time: w.start, end_time: w.end })));
+}
+
+function WindowRow({ window: w, onChange, onRemove }: { window: TimeWindow; onChange: (next: TimeWindow) => void; onRemove: () => void }) {
+  return (
+    <div className="flex items-center gap-2">
+      <Input aria-label="Start" type="time" className="w-32" value={w.start} onChange={(e) => onChange({ ...w, start: e.target.value })} />
+      <span aria-hidden>to</span>
+      <Input aria-label="End" type="time" className="w-32" value={w.end} onChange={(e) => onChange({ ...w, end: e.target.value })} />
+      <Button type="button" size="sm" variant="ghost" onClick={onRemove}>
+        Remove
+      </Button>
+    </div>
+  );
+}
+
+function CalendarPanel({ connectUrl }: { connectUrl: string }) {
+  const cals = useG8Query(async (signal) => listOf<CalendarRow>(await g8Get("/appointments/calendars", undefined, { signal }), "calendars"), []);
+  return (
+    <section aria-label="Calendars" className="space-y-2 rounded-lg border p-3 text-sm">
+      <h3 className="font-medium">Connected calendars</h3>
+      {cals.error ? <ApiError error={cals.error} title="Could not load calendars" onRetry={() => void cals.refetch()} /> : null}
+      {(cals.data ?? []).map((c) => (
+        <p key={c.credential_id}>
+          {c.provider} {c.email ? `(${c.email})` : ""} {c.is_valid === false ? <strong>needs reconnecting</strong> : "connected"}
+        </p>
+      ))}
+      {!cals.loading && !cals.error && (cals.data ?? []).length === 0 ? <p className="text-muted-foreground">No calendar connected, so busy time is not checked.</p> : null}
+      <a className="underline" href={connectUrl} target="_blank" rel="noreferrer">
+        Connect or manage calendars in graph8
+      </a>
+    </section>
+  );
+}
+
+export function AvailabilityEditor({ scheduleId, connectCalendarUrl = "https://app.graph8.com", onSaved, className }: AvailabilityEditorProps) {
+  const { schedules, loading: loadingSchedules, error: schedulesError } = useSchedules();
+  const [picked, setPicked] = useState<number | undefined>(scheduleId);
+  const activeId = picked ?? schedules[0]?.id;
+  const [week, setWeek] = useState<Week>({});
+  const [overrides, setOverrides] = useState<Override[]>([]);
+  const [newDate, setNewDate] = useState("");
+
+  // Stale context: switching schedule must not show (or save!) the previous schedule's hours.
+  useEffect(() => { setWeek({}); setOverrides([]); }, [activeId]);
+
+  const availability = useG8Query(
+    async (signal) => unwrap<Schedule>(await g8Get(`/appointments/schedules/${activeId}/availability`, undefined, { signal })),
+    [activeId],
+    { enabled: activeId != null },
+  );
+  useEffect(() => {
+    const data = availability.data;
+    if (!data) return;
+    setWeek(toWeek(data.availability ?? []));
+    setOverrides((data.overrides ?? []).filter((o) => o.date).map((o) => ({ date: o.date as string, start: toHHMM(o.start_time), end: toHHMM(o.end_time, "17:00") })));
+  }, [availability.data]);
+
+  const save = useG8Mutation(
+    async () =>
+      g8Patch(`/appointments/schedules/${activeId}/availability`, {
+        availability: fromWeek(week),
+        overrides: overrides.map((o) => ({ date: o.date, start_time: o.start, end_time: o.end })),
+      }),
+    { onSuccess: () => onSaved?.() },
+  );
+
+  const setDay = (day: number, windows: TimeWindow[]) => setWeek((w) => ({ ...w, [day]: windows }));
+  if (schedulesError) return <ApiError error={schedulesError} title="Could not load schedules" />;
+  if (loadingSchedules) return <Skeleton className="h-64 w-full" aria-label="Loading schedules" />;
+  if (activeId == null) return <EmptyState title="No schedule yet" description="Create a working-hours schedule in graph8 (or POST /appointments/schedules), then edit it here." />;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      {schedules.length > 1 ? (
+        <select aria-label="Schedule" className="h-9 rounded-md border bg-background px-2 text-sm" value={activeId} onChange={(e) => setPicked(Number(e.target.value))}>
+          {schedules.map((s) => (
+            <option key={s.id} value={s.id}>
+              {s.name}
+            </option>
+          ))}
+        </select>
+      ) : null}
+      <p className="text-sm text-muted-foreground">Times are wall-clock hours in the schedule's time zone: {schedules.find((x) => x.id === activeId)?.time_zone ?? "the schedule's zone"}.</p>
+      {availability.error ? <ApiError error={availability.error} title="Could not load availability" onRetry={() => void availability.refetch()} /> : null}
+
+      <div className="space-y-2">
+        {WEEKDAYS.map(({ day, label }) => {
+          const windows = week[day] ?? [];
+          return (
+            <div key={day} className="flex flex-wrap items-start gap-3 border-b pb-2">
+              <label className="flex w-36 items-center gap-2 pt-1 text-sm">
+                <Switch aria-label={label} checked={windows.length > 0} onCheckedChange={(on) => setDay(day, on ? [{ start: "09:00", end: "17:00" }] : [])} />
+                {label}
+              </label>
+              <div className="space-y-1">
+                {windows.length === 0 ? <span className="text-sm text-muted-foreground">Unavailable</span> : null}
+                {windows.map((w, i) => (
+                  <WindowRow key={i} window={w} onChange={(next) => setDay(day, windows.map((x, j) => (j === i ? next : x)))} onRemove={() => setDay(day, windows.filter((_, j) => j !== i))} />
+                ))}
+                {windows.length > 0 ? (
+                  <Button type="button" size="sm" variant="ghost" onClick={() => setDay(day, [...windows, { start: "13:00", end: "17:00" }])}>
+                    Add window
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <section aria-label="Date overrides" className="space-y-2">
+        <h3 className="text-sm font-medium">Date overrides</h3>
+        {overrides.map((o, i) => (
+          <div key={`${o.date}-${i}`} className="flex items-center gap-2 text-sm">
+            <span className="w-28">{o.date}</span>
+            <WindowRow window={o} onChange={(next) => setOverrides((all) => all.map((x, j) => (j === i ? { ...x, ...next } : x)))} onRemove={() => setOverrides((all) => all.filter((_, j) => j !== i))} />
+          </div>
+        ))}
+        <div className="flex gap-2">
+          <Input aria-label="Override date" type="date" className="w-44" value={newDate} onChange={(e) => setNewDate(e.target.value)} />
+          <Button type="button" size="sm" variant="outline" disabled={!newDate} onClick={() => { setOverrides((all) => [...all, { date: newDate, start: "09:00", end: "17:00" }]); setNewDate(""); }}>
+            Add override
+          </Button>
+        </div>
+      </section>
+
+      {save.error ? <ApiError error={save.error} title="Could not save availability" /> : null}
+      <Button onClick={() => void save.mutate(undefined)} loading={save.loading}>
+        Save availability
+      </Button>
+      <CalendarPanel connectUrl={connectCalendarUrl} />
+    </div>
+  );
+}

package/blocks/appointments/components/booking-page.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * BookingPage: pick a day and time for an event type, enter the attendee, book it.
+ *
+ * SDK operations, in order:
+ *   1. GET  /appointments/event-types/{id}                              (appointments.getEventType)       read
+ *   2. GET  /appointments/slots?event_type_id=&start=&end=&time_zone=   (appointments.getAvailableSlots) read
+ *   3. POST /appointments/bookings                                      (appointments.createBooking)      EXTERNAL -> ConfirmSpendDialog first
+ *      Creates the booking, writes the host calendar event and emails the attendee an invite.
+ *
+ * IMPORTANT: the contract has NO public (unauthenticated) booking operations. These three calls go through
+ * your /api/g8 proxy with the org's API key, so this component books ON BEHALF of a prospect: a rep scheduling
+ * from inside your app, or a public page you protect yourself (give the proxy an `authorize` hook, an
+ * allowlist of exactly these two paths, and your own bot protection). Never expose the proxy openly.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useAvailableSlots } from "../hooks/use-available-slots";
+import { useIdempotencyKey } from "../lib/idempotency";
+import { addMinutes, formatDateTime, formatTime, localTimeZone, unwrap, type Booking, type EventType, type Slot } from "../lib/appointments-types";
+
+export interface BookingPageProps {
+  eventTypeId: number;
+  /** How many days ahead to offer (max 60). */
+  daysAhead?: number;
+  /** IANA zone the times are shown in; defaults to the browser's. */
+  timeZone?: string;
+  /** Prefill when booking for a known contact. */
+  defaultAttendee?: { name?: string; email?: string };
+  onBooked?: (booking: Booking) => void;
+  className?: string;
+}
+
+/** `key` is already a calendar date in the requested zone; format it at UTC noon so no zone can shift the day. */
+function dayLabel(key: string): string {
+  return new Date(`${key}T12:00:00Z`).toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" });
+}
+
+function DayStrip({ days, value, onChange, disabled }: { days: string[]; value: string | null; onChange: (d: string) => void; disabled?: boolean }) {
+  return (
+    <div role="tablist" aria-label="Days with availability" className="flex flex-wrap gap-2">
+      {days.map((d) => (
+        <Button key={d} disabled={disabled} role="tab" aria-selected={value === d} size="sm" variant={value === d ? "default" : "outline"} onClick={() => onChange(d)}>
+          {dayLabel(d)}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export function BookingPage({ eventTypeId, daysAhead = 14, timeZone, defaultAttendee, onBooked, className }: BookingPageProps) {
+  const zone = timeZone ?? localTimeZone();
+  const range = useMemo(() => {
+    const start = new Date();
+    return { start: start.toISOString(), end: new Date(start.getTime() + Math.min(daysAhead, 60) * 86_400_000).toISOString() };
+  }, [daysAhead]);
+  const [day, setDay] = useState<string | null>(null);
+  const [slot, setSlot] = useState<Slot | null>(null);
+  const [name, setName] = useState(defaultAttendee?.name ?? "");
+  const [email, setEmail] = useState(defaultAttendee?.email ?? "");
+  const [notes, setNotes] = useState("");
+  const [confirming, setConfirming] = useState(false);
+  const idempotency = useIdempotencyKey(JSON.stringify([eventTypeId, slot?.time, name.trim(), email.trim(), notes, zone]));
+  const [bookedAt, setBookedAt] = useState<string | null>(null);
+  // Stale context: a different event type invalidates the chosen day and time.
+  useEffect(() => { setDay(null); setSlot(null); setConfirming(false); }, [eventTypeId]);
+
+  const eventType = useG8Query(async (signal) => unwrap<EventType>(await g8Get(`/appointments/event-types/${eventTypeId}`, undefined, { signal })), [eventTypeId]);
+  const slots = useAvailableSlots(eventTypeId, range.start, range.end, zone);
+  const days = Object.keys(slots.slotsByDate).filter((d) => (slots.slotsByDate[d] ?? []).length > 0).sort();
+  const activeDay = day && days.includes(day) ? day : (days[0] ?? null);
+
+  const book = useG8Mutation(
+    async (s: Slot) => {
+      const env = await g8Post(
+        "/appointments/bookings",
+        {
+          event_type_id: eventTypeId,
+          start_time: s.time,
+          end_time: addMinutes(s.time, s.duration),
+          attendees: [{ name: name.trim(), email: email.trim(), time_zone: zone }],
+          responses: notes ? { notes } : undefined,
+        },
+        { idempotencyKey: idempotency.get() },
+      );
+      return unwrap<Booking>(env);
+    },
+    { onSuccess: (b, s) => { idempotency.rotate(); setBookedAt(b.start_time ?? s.time); onBooked?.(b); } },
+  );
+
+  if (book.data) {
+    return (
+      <div className={`space-y-2 rounded-lg border p-4 ${className ?? ""}`} role="status">
+        <h2 className="text-base font-semibold">You are booked</h2>
+        <p className="text-sm">
+          {eventType.data?.title ?? "Meeting"} on {formatDateTime(bookedAt ?? slot?.time, zone)}. A calendar invite was sent to {email}.
+        </p>
+      </div>
+    );
+  }
+  if (slots.error) return <ApiError error={slots.error} title="Could not load available times" onRetry={() => void slots.refetch()} />;
+  if (slots.loading && days.length === 0) return <Skeleton className="h-48 w-full" aria-label="Loading available times" />;
+  if (days.length === 0) {
+    return <EmptyState title="No times available" description={`Nothing is open in the next ${daysAhead} days. Check the event type's working hours and connected calendar.`} />;
+  }
+
+  const times = activeDay ? (slots.slotsByDate[activeDay] ?? []) : [];
+  const valid = slot != null && name.trim().length > 0 && /.+@.+\..+/.test(email);
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <header>
+        <h2 className="text-base font-semibold">{eventType.data?.title ?? "Book a meeting"}</h2>
+        <p className="text-sm text-muted-foreground">
+          {eventType.data ? `${eventType.data.length} minutes · ` : ""}times shown in {zone}
+        </p>
+      </header>
+      <DayStrip disabled={book.loading} days={days} value={activeDay} onChange={(d) => { setDay(d); setSlot(null); }} />
+      <div role="listbox" aria-label="Times" className="flex flex-wrap gap-2">
+        {times.map((s) => (
+          <Button key={s.time} disabled={book.loading} role="option" aria-selected={slot?.time === s.time} size="sm" variant={slot?.time === s.time ? "default" : "outline"} onClick={() => setSlot(s)}>
+            {formatTime(s.time, zone)}
+          </Button>
+        ))}
+      </div>
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Input aria-label="Name" disabled={book.loading} placeholder="Attendee name" value={name} onChange={(e) => setName(e.target.value)} />
+        <Input aria-label="Email" disabled={book.loading} type="email" placeholder="Attendee email" value={email} onChange={(e) => setEmail(e.target.value)} />
+      </div>
+      <Textarea aria-label="Notes" disabled={book.loading} rows={3} placeholder="Anything we should know? (optional)" value={notes} onChange={(e) => setNotes(e.target.value)} />
+      {book.error ? <ApiError error={book.error} title="Could not book that time" /> : null}
+      <Button disabled={!valid || book.loading} onClick={() => setConfirming(true)}>
+        Book meeting
+      </Button>
+      <ConfirmSpendDialog
+        open={confirming && slot != null}
+        tier="external"
+        title="Book this meeting?"
+        description={`${formatDateTime(slot?.time, zone)} with ${name || "the attendee"}. A calendar invite is emailed to ${email}.`}
+        confirmLabel="Book and send invite"
+        recipients={1}
+        confirming={book.loading}
+        onConfirm={() => { if (slot) void book.mutate(slot).finally(() => setConfirming(false)); }}
+        onCancel={() => setConfirming(false)}
+      />
+    </div>
+  );
+}

package/blocks/appointments/components/event-type-editor.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+/**
+ * EventTypeEditor: create or edit a bookable meeting type (title, length, working-hours schedule, rules).
+ *
+ * SDK operations, in order:
+ *   1. GET    /appointments/schedules                      (appointments.listSchedules)    read   - schedule picker
+ *   2. GET    /appointments/event-types/{id}               (appointments.getEventType)     read   - only when editing
+ *   3. POST   /appointments/event-types                    (appointments.createEventType)  write  - new
+ *      PATCH  /appointments/event-types/{id}               (appointments.updateEventType)  write  - existing
+ *   4. DELETE /appointments/event-types/{id}               (appointments.deleteEventType)  DESTRUCTIVE -> ConfirmSpendDialog first
+ *
+ * There is no list-event-types operation: keep the ids you create (the response of step 3) in your own
+ * database, or read them from bookings (`event_type` on each booking).
+ */
+import { useEffect, useState } from "react";
+import { Button, Input, Label, Skeleton, Switch, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useSchedules } from "../hooks/use-schedules";
+import { useIdempotencyKey } from "../lib/idempotency";
+import { slugify, unwrap, type EventType } from "../lib/appointments-types";
+
+export interface EventTypeEditorProps {
+  /** Edit this event type; omit to create a new one. */
+  eventTypeId?: number;
+  onSaved?: (eventType: EventType) => void;
+  onDeleted?: (eventTypeId: number) => void;
+  className?: string;
+}
+
+interface Form {
+  title: string;
+  slug: string;
+  length: number;
+  description: string;
+  scheduleId: number | null;
+  minimumBookingNotice: number;
+  requiresConfirmation: boolean;
+  hidden: boolean;
+}
+
+const EMPTY: Form = {
+  title: "",
+  slug: "",
+  length: 30,
+  description: "",
+  scheduleId: null,
+  minimumBookingNotice: 120,
+  requiresConfirmation: false,
+  hidden: false,
+};
+
+function toBody(f: Form): Record<string, unknown> {
+  return {
+    title: f.title.trim(),
+    slug: f.slug.trim() || slugify(f.title),
+    length: f.length,
+    description: f.description || null,
+    schedule_id: f.scheduleId,
+    minimum_booking_notice: f.minimumBookingNotice,
+    requires_confirmation: f.requiresConfirmation,
+    hidden: f.hidden,
+  };
+}
+
+function fromEventType(et: EventType): Form {
+  return {
+    title: et.title,
+    slug: et.slug,
+    length: et.length,
+    description: et.description ?? "",
+    scheduleId: et.schedule?.id ?? null,
+    minimumBookingNotice: et.minimum_booking_notice ?? 120,
+    requiresConfirmation: Boolean(et.requires_confirmation),
+    hidden: Boolean(et.hidden),
+  };
+}
+
+export function EventTypeEditor({ eventTypeId, onSaved, onDeleted, className }: EventTypeEditorProps) {
+  const [form, setForm] = useState<Form>(EMPTY);
+  const [slugTouched, setSlugTouched] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const { schedules } = useSchedules();
+  // Retry-safe create: after POST succeeded, saving again edits that event type instead of creating a duplicate.
+  const [createdId, setCreatedId] = useState<number | null>(null);
+  const effectiveId = eventTypeId ?? createdId ?? undefined;
+  // Reset on every change of target, including to "new" (null): editing X then choosing New must not keep X's form.
+  useEffect(() => { setForm(EMPTY); setSlugTouched(false); setCreatedId(null); setConfirmDelete(false); }, [eventTypeId]);
+  const createKey = useIdempotencyKey(JSON.stringify(toBody(form)));
+
+  const existing = useG8Query(
+    async (signal) => unwrap<EventType>(await g8Get(`/appointments/event-types/${eventTypeId}`, undefined, { signal })),
+    [eventTypeId],
+    { enabled: eventTypeId != null },
+  );
+  useEffect(() => {
+    if (existing.data) {
+      setForm(fromEventType(existing.data));
+      setSlugTouched(true);
+    }
+  }, [existing.data]);
+
+  const save = useG8Mutation(async (body: Record<string, unknown>) => {
+    const env = effectiveId != null ? await g8Patch(`/appointments/event-types/${effectiveId}`, body) : await g8Post("/appointments/event-types", body, { idempotencyKey: createKey.get() });
+    return unwrap<EventType>(env);
+  }, { onSuccess: (saved) => { if (eventTypeId == null && saved?.id != null) { setCreatedId(saved.id); createKey.rotate(); } onSaved?.(saved); } });
+  const remove = useG8Mutation(async () => {
+    await g8Delete(`/appointments/event-types/${eventTypeId}`);
+  }, { onSuccess: () => { setConfirmDelete(false); if (eventTypeId != null) onDeleted?.(eventTypeId); } });
+
+  const set = <K extends keyof Form>(key: K, value: Form[K]) => setForm((f) => ({ ...f, [key]: value }));
+  const valid = form.title.trim().length > 0 && form.length >= 5 && (slugTouched ? form.slug.trim().length > 0 : true);
+
+  if (existing.error) return <ApiError error={existing.error} title="Could not load the event type" onRetry={() => void existing.refetch()} />;
+  if (eventTypeId != null && existing.loading && !existing.data) return <Skeleton className="h-64 w-full" aria-label="Loading event type" />;
+
+  return (
+    <form
+      className={`space-y-4 ${className ?? ""}`}
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (valid) void save.mutate(toBody(form));
+      }}
+    >
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Label htmlFor="et-title">Title</Label>
+          <Input
+            id="et-title"
+            value={form.title}
+            onChange={(e) => {
+              set("title", e.target.value);
+              if (!slugTouched) set("slug", slugify(e.target.value));
+            }}
+          />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="et-slug">URL slug</Label>
+          <Input id="et-slug" value={form.slug} onChange={(e) => { setSlugTouched(true); set("slug", slugify(e.target.value)); }} />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="et-length">Length (minutes)</Label>
+          <Input id="et-length" type="number" min={5} step={5} value={form.length} onChange={(e) => set("length", Number(e.target.value))} />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="et-schedule">Working hours</Label>
+          <select
+            id="et-schedule"
+            className="h-9 w-full rounded-md border bg-background px-2 text-sm"
+            value={form.scheduleId ?? ""}
+            onChange={(e) => set("scheduleId", e.target.value ? Number(e.target.value) : null)}
+          >
+            <option value="">Default schedule</option>
+            {schedules.map((s) => (
+              <option key={s.id} value={s.id}>
+                {s.name}
+                {s.is_default ? " (default)" : ""}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="et-notice">Minimum notice (minutes)</Label>
+          <Input id="et-notice" type="number" min={0} value={form.minimumBookingNotice} onChange={(e) => set("minimumBookingNotice", Number(e.target.value))} />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="et-desc">Description</Label>
+        <Textarea id="et-desc" rows={3} value={form.description} onChange={(e) => set("description", e.target.value)} />
+      </div>
+      <div className="flex flex-wrap gap-6 text-sm">
+        <label className="flex items-center gap-2">
+          <Switch checked={form.requiresConfirmation} onCheckedChange={(v) => set("requiresConfirmation", v)} aria-label="Requires confirmation" />
+          Host must confirm each booking
+        </label>
+        <label className="flex items-center gap-2">
+          <Switch checked={form.hidden} onCheckedChange={(v) => set("hidden", v)} aria-label="Hidden" />
+          Hidden from the public profile
+        </label>
+      </div>
+
+      {save.error ? <ApiError error={save.error} title="Could not save the event type" /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the event type" /> : null}
+
+      <div className="flex items-center justify-between">
+        <div>
+          {eventTypeId != null ? (
+            <Button type="button" variant="ghost" onClick={() => setConfirmDelete(true)}>
+              Delete event type
+            </Button>
+          ) : null}
+        </div>
+        <Button type="submit" disabled={!valid} loading={save.loading}>
+          {effectiveId != null ? "Save changes" : "Create event type"}
+        </Button>
+      </div>
+
+      <ConfirmSpendDialog
+        open={confirmDelete}
+        tier="destructive"
+        title={`Delete "${form.title || "this event type"}"?`}
+        description="Its booking link stops working. Existing bookings are kept."
+        confirmLabel="Delete event type"
+        confirming={remove.loading}
+        onConfirm={() => void remove.mutate(undefined)}
+        onCancel={() => setConfirmDelete(false)}
+      />
+    </form>
+  );
+}