@rapidmx/web-client 0.4.0 → 0.6.0

package/apps/www/settings/booking-types/index.tsx

@@ -1,98 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { BookingType, listBookingTypes } from "@rapidmx/react-shared/booking/bookingApi.js";
-import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-
-export type SettingsBookingTypesPageProps = Omit<SettingsShellProps, "active">;
-
-export default function SettingsBookingTypesPage(props: SettingsBookingTypesPageProps) {
-    return (
-        <SettingsShell {...props} active="booking-types">
-            <BookingTypesContent />
-        </SettingsShell>
-    );
-}
-
-function BookingTypesContent() {
-    const { mailboxUid } = useSettingsShell();
-    const [bookingTypes, setBookingTypes] = useState<BookingType[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
-    // non-null pattern as `apps/www/settings/filters/index.tsx`.
-    useEffect(() => {
-        listBookingTypes(mailboxUid!)
-            .then(setBookingTypes)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load your booking links."))
-            .finally(() => setLoading(false));
-    }, [mailboxUid]);
-
-    return (
-        <div className="flex-1 min-w-0 overflow-y-auto p-6">
-            <div className="max-w-3xl">
-                <div className="flex items-center justify-between mb-5">
-                    <h1 className="text-lg font-bold tracking-tight">Booking Links</h1>
-                    <a href={`/settings/booking-types/new?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
-                        <Button type="button" className="!w-auto">
-                            + New booking link
-                        </Button>
-                    </a>
-                </div>
-                <p className="text-sm text-text-muted mb-4">
-                    Share a link and let anyone pick a real open slot on your calendar — no account needed on
-                    their end.
-                </p>
-
-                {error && <Alert>{error}</Alert>}
-
-                {loading ? (
-                    <p className="text-sm text-text-muted">Loading&hellip;</p>
-                ) : bookingTypes.length === 0 ? (
-                    <p className="text-sm text-text-muted">No booking links yet.</p>
-                ) : (
-                    <div className="overflow-x-auto">
-                        <table className="w-full text-sm border-collapse">
-                            <thead>
-                                <tr>
-                                    {["Name", "Link", "Duration", "Enabled", ""].map((h) => (
-                                        <th
-                                            key={h}
-                                            className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
-                                        >
-                                            {h}
-                                        </th>
-                                    ))}
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {bookingTypes.map((bookingType) => (
-                                    <tr key={bookingType.uid}>
-                                        <td className="py-2.5 px-2.5 border-b border-border">{bookingType.name}</td>
-                                        <td className="py-2.5 px-2.5 border-b border-border">/book/{bookingType.slug}</td>
-                                        <td className="py-2.5 px-2.5 border-b border-border">{bookingType.durationMinutes} min</td>
-                                        <td className="py-2.5 px-2.5 border-b border-border">{bookingType.enabled ? "Yes" : "No"}</td>
-                                        <td className="py-2.5 px-2.5 border-b border-border text-right">
-                                            <a
-                                                href={`/settings/booking-types/${encodeURIComponent(bookingType.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`}
-                                                className="text-primary-dark hover:underline font-medium"
-                                            >
-                                                View
-                                            </a>
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

package/apps/www/settings/booking-types/new/index.tsx

@@ -1,212 +0,0 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { Folder, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
-import { BookingAvailabilityWindow, createBookingType } from "@rapidmx/react-shared/booking/bookingApi.js";
-import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
-import AvailabilityEditor from "../../../../shared/components/booking/AvailabilityEditor.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-
-const INPUT_CLASS =
-    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-
-export type NewBookingTypePageProps = Omit<SettingsShellProps, "active">;
-
-export default function NewBookingTypePage(props: NewBookingTypePageProps) {
-    return (
-        <SettingsShell {...props} active="booking-types">
-            <NewBookingTypeForm />
-        </SettingsShell>
-    );
-}
-
-function NewBookingTypeForm() {
-    const { mailboxUid, mailboxes } = useSettingsShell();
-    // Same established non-null pattern as `apps/www/settings/filters/new/index.tsx`.
-    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
-
-    const [calendarFolderUid, setCalendarFolderUid] = useState<string | null>(null);
-    const [folderError, setFolderError] = useState<string | null>(null);
-    const [slug, setSlug] = useState("");
-    const [name, setName] = useState("");
-    const [description, setDescription] = useState("");
-    const [hostDisplayName, setHostDisplayName] = useState(mailbox.displayName);
-    const [durationMinutes, setDurationMinutes] = useState(30);
-    const [timezone, setTimezone] = useState(mailbox.timezone);
-    const [availability, setAvailability] = useState<BookingAvailabilityWindow[]>([]);
-    const [minimumNoticeMinutes, setMinimumNoticeMinutes] = useState(60);
-    const [bookingWindowDays, setBookingWindowDays] = useState(30);
-    const [requiresApproval, setRequiresApproval] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-
-    useEffect(() => {
-        listFolders(mailboxUid!)
-            .then((folders) => {
-                const calendar = folders.find((f: Folder) => f.type === "calendar");
-                if (!calendar) {
-                    setFolderError("This mailbox has no Calendar folder yet.");
-                    return;
-                }
-                setCalendarFolderUid(calendar.uid);
-            })
-            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders."));
-    }, [mailboxUid]);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-
-        if (!slug.trim() || !name.trim() || !hostDisplayName.trim()) {
-            setError("Slug, name, and host name are all required.");
-            return;
-        }
-        if (!calendarFolderUid) {
-            setError("This mailbox has no Calendar folder yet.");
-            return;
-        }
-
-        setSaving(true);
-        try {
-            const created = await createBookingType({
-                mailboxUid: mailboxUid!,
-                calendarFolderUid,
-                slug: slug.trim(),
-                name: name.trim(),
-                description: description.trim() || undefined,
-                hostDisplayName: hostDisplayName.trim(),
-                durationMinutes,
-                timezone,
-                availability,
-                minimumNoticeMinutes,
-                bookingWindowDays,
-                requiresApproval,
-            });
-            window.location.href = `/settings/booking-types/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`;
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create this booking link.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="flex-1 min-w-0 overflow-y-auto p-6">
-            <div className="max-w-2xl">
-                <h1 className="text-lg font-bold tracking-tight mb-1">New booking link</h1>
-                <p className="text-sm text-text-muted mb-5">
-                    Anyone with the link can pick an open slot from your live availability below — no account
-                    needed on their end.
-                </p>
-
-                {error && <Alert>{error}</Alert>}
-                {folderError && <Alert>{folderError}</Alert>}
-
-                <form onSubmit={handleSubmit} className="flex flex-col gap-1">
-                    <FormField label="Name" htmlFor="name">
-                        <input
-                            id="name"
-                            type="text"
-                            className={INPUT_CLASS}
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                            placeholder="30 Minute Intro Call"
-                        />
-                    </FormField>
-                    <FormField label="Slug (used in the public link)" htmlFor="slug">
-                        <input
-                            id="slug"
-                            type="text"
-                            className={INPUT_CLASS}
-                            value={slug}
-                            onChange={(e) => setSlug(e.target.value)}
-                            placeholder="intro-call"
-                        />
-                    </FormField>
-                    <FormField label="Description (optional)" htmlFor="description">
-                        <textarea
-                            id="description"
-                            className={INPUT_CLASS}
-                            rows={2}
-                            value={description}
-                            onChange={(e) => setDescription(e.target.value)}
-                        />
-                    </FormField>
-                    <FormField label="Host name shown to visitors" htmlFor="hostDisplayName">
-                        <input
-                            id="hostDisplayName"
-                            type="text"
-                            className={INPUT_CLASS}
-                            value={hostDisplayName}
-                            onChange={(e) => setHostDisplayName(e.target.value)}
-                        />
-                    </FormField>
-                    <div className="grid grid-cols-2 gap-3">
-                        <FormField label="Duration (minutes)" htmlFor="durationMinutes">
-                            <input
-                                id="durationMinutes"
-                                type="number"
-                                min={1}
-                                className={INPUT_CLASS}
-                                value={durationMinutes}
-                                onChange={(e) => setDurationMinutes(Number(e.target.value))}
-                            />
-                        </FormField>
-                        <FormField label="Timezone" htmlFor="timezone">
-                            <input
-                                id="timezone"
-                                type="text"
-                                className={INPUT_CLASS}
-                                value={timezone}
-                                onChange={(e) => setTimezone(e.target.value)}
-                                placeholder="America/New_York"
-                            />
-                        </FormField>
-                    </div>
-                    <div className="grid grid-cols-2 gap-3">
-                        <FormField label="Minimum notice (minutes)" htmlFor="minimumNoticeMinutes">
-                            <input
-                                id="minimumNoticeMinutes"
-                                type="number"
-                                min={0}
-                                className={INPUT_CLASS}
-                                value={minimumNoticeMinutes}
-                                onChange={(e) => setMinimumNoticeMinutes(Number(e.target.value))}
-                            />
-                        </FormField>
-                        <FormField label="Booking window (days ahead)" htmlFor="bookingWindowDays">
-                            <input
-                                id="bookingWindowDays"
-                                type="number"
-                                min={1}
-                                className={INPUT_CLASS}
-                                value={bookingWindowDays}
-                                onChange={(e) => setBookingWindowDays(Number(e.target.value))}
-                            />
-                        </FormField>
-                    </div>
-                    <label className="flex items-center gap-2 text-sm my-3">
-                        <input type="checkbox" checked={requiresApproval} onChange={(e) => setRequiresApproval(e.target.checked)} />
-                        Require my approval before confirming a booking
-                    </label>
-
-                    <div className="mb-4">
-                        <span className="block text-sm font-semibold mb-1.5 text-text">Weekly availability</span>
-                        <AvailabilityEditor value={availability} onChange={setAvailability} />
-                    </div>
-
-                    <div>
-                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                            Create
-                        </Button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-}

package/dist/apps/shared/components/booking/AvailabilityEditor.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-const INPUT_CLASS = "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-function minutesToTimeValue(minutes) {
-    const h = Math.floor(minutes / 60)
-        .toString()
-        .padStart(2, "0");
-    const m = (minutes % 60).toString().padStart(2, "0");
-    return `${h}:${m}`;
-}
-function timeValueToMinutes(value) {
-    const [h, m] = value.split(":").map(Number);
-    return h * 60 + m;
-}
-/**
- * Adds/removes `BookingType.availability` weekly windows — deliberately does not cover `dateOverrides`
- * (per-date blackouts/exceptions), a separate, less commonly needed escape hatch left for a future pass;
- * `BookingUtils.generateCandidateSlots()` already handles an empty `dateOverrides` array gracefully.
- */
-export default function AvailabilityEditor({ value, onChange }) {
-    const [dayOfWeek, setDayOfWeek] = useState(1);
-    const [startTime, setStartTime] = useState("09:00");
-    const [endTime, setEndTime] = useState("17:00");
-    const [error, setError] = useState(null);
-    function handleAdd() {
-        const startMinute = timeValueToMinutes(startTime);
-        const endMinute = timeValueToMinutes(endTime);
-        if (startMinute >= endMinute) {
-            setError("Start time must be before end time.");
-            return;
-        }
-        setError(null);
-        onChange([...value, { dayOfWeek, startMinute, endMinute }]);
-    }
-    function handleRemove(index) {
-        onChange(value.filter((_, i) => i !== index));
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [error && _jsx("p", { className: "text-sm text-danger", children: error }), value.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No availability windows yet \u2014 add one below." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: value.map((window, index) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm text-sm", children: [_jsxs("span", { children: [DAY_LABELS[window.dayOfWeek], " ", minutesToTimeValue(window.startMinute), "\u2013", minutesToTimeValue(window.endMinute)] }), _jsx("button", { type: "button", onClick: () => handleRemove(index), className: "text-sm text-danger hover:underline", children: "Remove" })] }, index))) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("select", { "aria-label": "Day of week", value: dayOfWeek, onChange: (e) => setDayOfWeek(Number(e.target.value)), className: INPUT_CLASS, children: DAY_LABELS.map((label, i) => (_jsx("option", { value: i, children: label }, label))) }), _jsx("input", { type: "time", "aria-label": "Start time", value: startTime, onChange: (e) => setStartTime(e.target.value), className: INPUT_CLASS }), _jsx("span", { className: "text-sm text-text-muted", children: "to" }), _jsx("input", { type: "time", "aria-label": "End time", value: endTime, onChange: (e) => setEndTime(e.target.value), className: INPUT_CLASS }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleAdd, children: "Add window" })] })] }));
-}

package/dist/apps/www/settings/booking-types/[uid].js

@@ -1,129 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { deleteBookingType, getBookingType, updateBookingType, } from "@rapidmx/react-shared/booking/bookingApi.js";
-import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
-import AvailabilityEditor from "../../../shared/components/booking/AvailabilityEditor.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-export default function BookingTypeDetailPage(props) {
-    return (_jsx(SettingsShell, { ...props, active: "booking-types", children: _jsx(BookingTypeDetailContent, { uid: props.params.uid }) }));
-}
-function BookingTypeDetailContent({ uid }) {
-    const { mailboxUid } = useSettingsShell();
-    const [bookingType, setBookingType] = useState(null);
-    const [name, setName] = useState("");
-    const [description, setDescription] = useState("");
-    const [hostDisplayName, setHostDisplayName] = useState("");
-    const [durationMinutes, setDurationMinutes] = useState(30);
-    const [timezone, setTimezone] = useState("");
-    const [availability, setAvailability] = useState([]);
-    const [minimumNoticeMinutes, setMinimumNoticeMinutes] = useState(60);
-    const [bookingWindowDays, setBookingWindowDays] = useState(30);
-    const [requiresApproval, setRequiresApproval] = useState(false);
-    const [enabled, setEnabled] = useState(true);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const [confirmingDelete, setConfirmingDelete] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const [deleteError, setDeleteError] = useState(null);
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        getBookingType(uid)
-            .then((bt) => {
-            setBookingType(bt);
-            setName(bt.name);
-            setDescription(bt.description ?? "");
-            setHostDisplayName(bt.hostDisplayName);
-            setDurationMinutes(bt.durationMinutes);
-            setTimezone(bt.timezone);
-            setAvailability(bt.availability);
-            setMinimumNoticeMinutes(bt.minimumNoticeMinutes);
-            setBookingWindowDays(bt.bookingWindowDays);
-            setRequiresApproval(bt.requiresApproval);
-            setEnabled(bt.enabled);
-        })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this booking link."))
-            .finally(() => setLoading(false));
-    }, [uid]);
-    async function handleSubmit(e) {
-        e.preventDefault();
-        setError(null);
-        setSaved(false);
-        setSaving(true);
-        try {
-            const updated = await updateBookingType({
-                uid: bookingType.uid,
-                version: bookingType.version,
-                name,
-                description: description.trim() || undefined,
-                hostDisplayName,
-                durationMinutes,
-                timezone,
-                availability,
-                minimumNoticeMinutes,
-                bookingWindowDays,
-                requiresApproval,
-                enabled,
-            });
-            setBookingType(updated);
-            setSaved(true);
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this booking link.");
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    async function handleCopy(value) {
-        try {
-            await navigator.clipboard.writeText(value);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-        catch {
-            // Clipboard access can be denied by the browser — the value is still selectable/copyable by hand.
-        }
-    }
-    async function handleDelete() {
-        setDeleting(true);
-        setDeleteError(null);
-        try {
-            await deleteBookingType(bookingType.uid, bookingType.version);
-            window.location.href = `/settings/booking-types?mailboxUid=${encodeURIComponent(mailboxUid)}`;
-        }
-        catch (err) {
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this booking link.");
-            setDeleting(false);
-        }
-    }
-    if (loading) {
-        return _jsx("p", { className: "p-6 text-sm text-text-muted", children: "Loading\u2026" });
-    }
-    if (error || !bookingType) {
-        // `error` is always set whenever `bookingType` is falsy here: the load effect above destructures
-        // every field off the resolved value directly (`bt.name`, `bt.hostDisplayName`, ...), so a
-        // successful-but-empty response throws into `.catch()` — which sets `error` — before this
-        // component ever renders past the `loading` guard above. `!bookingType` alone (with `error` still
-        // `null`) is therefore unreachable, unlike e.g. `messages/[uid].tsx`'s identical-looking check,
-        // which stores its fetched value whole rather than destructuring it.
-        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: error }) }));
-    }
-    // `bookingType` only ever becomes non-null via the client-only fetch above, so by the time this line
-    // runs `window` is always defined — the `!bookingType` early return just above covers every real SSR
-    // pass, where `bookingType` is still `null`.
-    const publicUrl = `${window.location.origin}/book/${encodeURIComponent(bookingType.slug)}`;
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-2xl", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 mb-1", children: [_jsxs("div", { children: [_jsx("a", { href: `/settings/booking-types?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-sm text-primary-dark hover:underline", children: "\u2190 All booking links" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: bookingType.name })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete" })] }), _jsxs("div", { className: "flex items-center gap-2 mb-5", children: [_jsx("code", { className: "flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap", children: publicUrl }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => handleCopy(publicUrl), children: copied ? "Copied" : "Copy" })] }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm mb-3", children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (e) => setEnabled(e.target.checked) }), "Enabled (publicly bookable)"] }), _jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value) }) }), _jsx(FormField, { label: "Description (optional)", htmlFor: "description", children: _jsx("textarea", { id: "description", className: INPUT_CLASS, rows: 2, value: description, onChange: (e) => setDescription(e.target.value) }) }), _jsx(FormField, { label: "Host name shown to visitors", htmlFor: "hostDisplayName", children: _jsx("input", { id: "hostDisplayName", type: "text", className: INPUT_CLASS, value: hostDisplayName, onChange: (e) => setHostDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Duration (minutes)", htmlFor: "durationMinutes", children: _jsx("input", { id: "durationMinutes", type: "number", min: 1, className: INPUT_CLASS, value: durationMinutes, onChange: (e) => setDurationMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Timezone", htmlFor: "timezone", children: _jsx("input", { id: "timezone", type: "text", className: INPUT_CLASS, value: timezone, onChange: (e) => setTimezone(e.target.value) }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Minimum notice (minutes)", htmlFor: "minimumNoticeMinutes", children: _jsx("input", { id: "minimumNoticeMinutes", type: "number", min: 0, className: INPUT_CLASS, value: minimumNoticeMinutes, onChange: (e) => setMinimumNoticeMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Booking window (days ahead)", htmlFor: "bookingWindowDays", children: _jsx("input", { id: "bookingWindowDays", type: "number", min: 1, className: INPUT_CLASS, value: bookingWindowDays, onChange: (e) => setBookingWindowDays(Number(e.target.value)) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm my-3", children: [_jsx("input", { type: "checkbox", checked: requiresApproval, onChange: (e) => setRequiresApproval(e.target.checked) }), "Require my approval before confirming a booking"] }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Weekly availability" }), _jsx(AvailabilityEditor, { value: availability, onChange: setAvailability })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] }), _jsxs(Modal, { open: confirmingDelete, onClose: () => setConfirmingDelete(false), title: "Delete booking link", children: [_jsxs("p", { className: "text-sm mb-5", children: ["Are you sure you want to delete ", _jsx("strong", { children: bookingType.name }), "? Its public link will stop working immediately. This cannot be undone."] }), deleteError && _jsx(Alert, { children: deleteError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: deleting, onClick: () => setConfirmingDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: deleting, disabled: deleting, onClick: handleDelete, children: "Delete" })] })] })] }) }));
-}

package/dist/apps/www/settings/booking-types/index.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listBookingTypes } from "@rapidmx/react-shared/booking/bookingApi.js";
-import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-export default function SettingsBookingTypesPage(props) {
-    return (_jsx(SettingsShell, { ...props, active: "booking-types", children: _jsx(BookingTypesContent, {}) }));
-}
-function BookingTypesContent() {
-    const { mailboxUid } = useSettingsShell();
-    const [bookingTypes, setBookingTypes] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
-    // non-null pattern as `apps/www/settings/filters/index.tsx`.
-    useEffect(() => {
-        listBookingTypes(mailboxUid)
-            .then(setBookingTypes)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load your booking links."))
-            .finally(() => setLoading(false));
-    }, [mailboxUid]);
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-3xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Booking Links" }), _jsx("a", { href: `/settings/booking-types/new?mailboxUid=${encodeURIComponent(mailboxUid)}`, children: _jsx(Button, { type: "button", className: "!w-auto", children: "+ New booking link" }) })] }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Share a link and let anyone pick a real open slot on your calendar \u2014 no account needed on their end." }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : bookingTypes.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No booking links yet." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Link", "Duration", "Enabled", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: bookingTypes.map((bookingType) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: bookingType.name }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: ["/book/", bookingType.slug] }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: [bookingType.durationMinutes, " min"] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: bookingType.enabled ? "Yes" : "No" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-right", children: _jsx("a", { href: `/settings/booking-types/${encodeURIComponent(bookingType.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`, className: "text-primary-dark hover:underline font-medium", children: "View" }) })] }, bookingType.uid))) })] }) }))] }) }));
-}

package/dist/apps/www/settings/booking-types/new/index.js

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
-import { createBookingType } from "@rapidmx/react-shared/booking/bookingApi.js";
-import SettingsShell, { useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
-import AvailabilityEditor from "../../../../shared/components/booking/AvailabilityEditor.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
-export default function NewBookingTypePage(props) {
-    return (_jsx(SettingsShell, { ...props, active: "booking-types", children: _jsx(NewBookingTypeForm, {}) }));
-}
-function NewBookingTypeForm() {
-    const { mailboxUid, mailboxes } = useSettingsShell();
-    // Same established non-null pattern as `apps/www/settings/filters/new/index.tsx`.
-    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
-    const [calendarFolderUid, setCalendarFolderUid] = useState(null);
-    const [folderError, setFolderError] = useState(null);
-    const [slug, setSlug] = useState("");
-    const [name, setName] = useState("");
-    const [description, setDescription] = useState("");
-    const [hostDisplayName, setHostDisplayName] = useState(mailbox.displayName);
-    const [durationMinutes, setDurationMinutes] = useState(30);
-    const [timezone, setTimezone] = useState(mailbox.timezone);
-    const [availability, setAvailability] = useState([]);
-    const [minimumNoticeMinutes, setMinimumNoticeMinutes] = useState(60);
-    const [bookingWindowDays, setBookingWindowDays] = useState(30);
-    const [requiresApproval, setRequiresApproval] = useState(false);
-    const [error, setError] = useState(null);
-    const [saving, setSaving] = useState(false);
-    useEffect(() => {
-        listFolders(mailboxUid)
-            .then((folders) => {
-            const calendar = folders.find((f) => f.type === "calendar");
-            if (!calendar) {
-                setFolderError("This mailbox has no Calendar folder yet.");
-                return;
-            }
-            setCalendarFolderUid(calendar.uid);
-        })
-            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders."));
-    }, [mailboxUid]);
-    async function handleSubmit(e) {
-        e.preventDefault();
-        setError(null);
-        if (!slug.trim() || !name.trim() || !hostDisplayName.trim()) {
-            setError("Slug, name, and host name are all required.");
-            return;
-        }
-        if (!calendarFolderUid) {
-            setError("This mailbox has no Calendar folder yet.");
-            return;
-        }
-        setSaving(true);
-        try {
-            const created = await createBookingType({
-                mailboxUid: mailboxUid,
-                calendarFolderUid,
-                slug: slug.trim(),
-                name: name.trim(),
-                description: description.trim() || undefined,
-                hostDisplayName: hostDisplayName.trim(),
-                durationMinutes,
-                timezone,
-                availability,
-                minimumNoticeMinutes,
-                bookingWindowDays,
-                requiresApproval,
-            });
-            window.location.href = `/settings/booking-types/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid)}`;
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create this booking link.");
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-2xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "New booking link" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Anyone with the link can pick an open slot from your live availability below \u2014 no account needed on their end." }), error && _jsx(Alert, { children: error }), folderError && _jsx(Alert, { children: folderError }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-1", children: [_jsx(FormField, { label: "Name", htmlFor: "name", children: _jsx("input", { id: "name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "30 Minute Intro Call" }) }), _jsx(FormField, { label: "Slug (used in the public link)", htmlFor: "slug", children: _jsx("input", { id: "slug", type: "text", className: INPUT_CLASS, value: slug, onChange: (e) => setSlug(e.target.value), placeholder: "intro-call" }) }), _jsx(FormField, { label: "Description (optional)", htmlFor: "description", children: _jsx("textarea", { id: "description", className: INPUT_CLASS, rows: 2, value: description, onChange: (e) => setDescription(e.target.value) }) }), _jsx(FormField, { label: "Host name shown to visitors", htmlFor: "hostDisplayName", children: _jsx("input", { id: "hostDisplayName", type: "text", className: INPUT_CLASS, value: hostDisplayName, onChange: (e) => setHostDisplayName(e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Duration (minutes)", htmlFor: "durationMinutes", children: _jsx("input", { id: "durationMinutes", type: "number", min: 1, className: INPUT_CLASS, value: durationMinutes, onChange: (e) => setDurationMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Timezone", htmlFor: "timezone", children: _jsx("input", { id: "timezone", type: "text", className: INPUT_CLASS, value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "America/New_York" }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(FormField, { label: "Minimum notice (minutes)", htmlFor: "minimumNoticeMinutes", children: _jsx("input", { id: "minimumNoticeMinutes", type: "number", min: 0, className: INPUT_CLASS, value: minimumNoticeMinutes, onChange: (e) => setMinimumNoticeMinutes(Number(e.target.value)) }) }), _jsx(FormField, { label: "Booking window (days ahead)", htmlFor: "bookingWindowDays", children: _jsx("input", { id: "bookingWindowDays", type: "number", min: 1, className: INPUT_CLASS, value: bookingWindowDays, onChange: (e) => setBookingWindowDays(Number(e.target.value)) }) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm my-3", children: [_jsx("input", { type: "checkbox", checked: requiresApproval, onChange: (e) => setRequiresApproval(e.target.checked) }), "Require my approval before confirming a booking"] }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Weekly availability" }), _jsx(AvailabilityEditor, { value: availability, onChange: setAvailability })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Create" }) })] })] }) }));
-}