@rapidmx/web-client 0.4.0 → 0.5.0

package/dist/apps/www/messages/[uid].js

@@ -33,13 +33,25 @@ function MessageDetailContent({ uid }) {
             .finally(() => setLoading(false));
     }, [uid]);
     // See `apps/www/index.tsx`'s identical effect's own doc comment - a failure here just hides the
-    // Labels control rather than blocking the rest of the page. No `mailboxUid` guard needed - `MailShell`
-    // never renders this component at all until `mailboxUid` has resolved.
+    // Labels control rather than blocking the rest of the page. Keyed on the message's own mailbox, not the
+    // shell's ambient one: this route is reached from aggregate/search rows too, where they can differ.
+    const messageMailboxUid = message?.mailboxUid;
     useEffect(() => {
-        listLabels(mailboxUid, { limit: 200 })
-            .then(setLabels)
-            .catch(() => setLabels([]));
-    }, [mailboxUid]);
+        if (!messageMailboxUid) {
+            return;
+        }
+        let cancelled = false;
+        listLabels(messageMailboxUid, { limit: 200 })
+            .then((result) => {
+            if (!cancelled) {
+                setLabels(result);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [messageMailboxUid]);
     const attachments = useMessageAttachments(message);
     useMarkMessageRead(message, setMessage);
     if (loading) {

package/dist/apps/www/settings/auto-reply/index.js

@@ -24,6 +24,9 @@ function AutoReplyContent() {
     const [oofMessage, setOofMessage] = useState(mailbox.oofMessage ?? "");
     const [oofStartTime, setOofStartTime] = useState(mailbox.oofStartTime ? toDatetimeLocal(mailbox.oofStartTime) : "");
     const [oofEndTime, setOofEndTime] = useState(mailbox.oofEndTime ? toDatetimeLocal(mailbox.oofEndTime) : "");
+    // `SettingsShell`'s `mailboxes` is fetched once - every save bumps the server's version, so a second
+    // save without a reload must send the version the previous save returned, not the stale original.
+    const [version, setVersion] = useState(mailbox.version);
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
@@ -33,14 +36,16 @@ function AutoReplyContent() {
         setSaved(false);
         setSaving(true);
         try {
-            await updateMailbox({
+            const updated = await updateMailbox({
                 uid: mailbox.uid,
-                version: mailbox.version,
+                version,
                 oofEnabled,
                 oofMessage,
-                oofStartTime: oofStartTime ? new Date(oofStartTime).toISOString() : undefined,
-                oofEndTime: oofEndTime ? new Date(oofEndTime).toISOString() : undefined,
+                // `null` (not omitted) clears a previously saved window - an omitted field is left as-is.
+                oofStartTime: oofStartTime ? new Date(oofStartTime).toISOString() : null,
+                oofEndTime: oofEndTime ? new Date(oofEndTime).toISOString() : null,
             });
+            setVersion(updated.version);
             setSaved(true);
         }
         catch (err) {

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

@@ -30,7 +30,10 @@ function BookingTypeDetailContent({ uid }) {
     const [requiresApproval, setRequiresApproval] = useState(false);
     const [enabled, setEnabled] = useState(true);
     const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
+    // Split so a failed save keeps the form (and the user's edits) on screen - only a failed *load* has
+    // nothing to show but the error.
+    const [loadError, setLoadError] = useState(null);
+    const [saveError, setSaveError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
     const [copied, setCopied] = useState(false);
@@ -39,7 +42,7 @@ function BookingTypeDetailContent({ uid }) {
     const [deleteError, setDeleteError] = useState(null);
     useEffect(() => {
         setLoading(true);
-        setError(null);
+        setLoadError(null);
         getBookingType(uid)
             .then((bt) => {
             setBookingType(bt);
@@ -54,12 +57,12 @@ function BookingTypeDetailContent({ uid }) {
             setRequiresApproval(bt.requiresApproval);
             setEnabled(bt.enabled);
         })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this booking link."))
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load this booking link."))
             .finally(() => setLoading(false));
     }, [uid]);
     async function handleSubmit(e) {
         e.preventDefault();
-        setError(null);
+        setSaveError(null);
         setSaved(false);
         setSaving(true);
         try {
@@ -67,7 +70,9 @@ function BookingTypeDetailContent({ uid }) {
                 uid: bookingType.uid,
                 version: bookingType.version,
                 name,
-                description: description.trim() || undefined,
+                // `null` (not omitted) clears a saved description - an omitted field is left unchanged by the
+                // server's partial update. `UpdateBookingTypeInput` doesn't declare `null` yet, hence the cast.
+                description: description.trim() || null,
                 hostDisplayName,
                 durationMinutes,
                 timezone,
@@ -81,7 +86,7 @@ function BookingTypeDetailContent({ uid }) {
             setSaved(true);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this booking link.");
+            setSaveError(err instanceof ApiRequestError ? err.message : "Could not save this booking link.");
         }
         finally {
             setSaving(false);
@@ -112,18 +117,18 @@ function BookingTypeDetailContent({ uid }) {
     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
+    if (loadError || !bookingType) {
+        // `loadError` 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
+        // successful-but-empty response throws into `.catch()` — which sets `loadError` — before this
+        // component ever renders past the `loading` guard above. `!bookingType` alone (with `loadError` 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 }) }));
+        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { children: loadError }) }));
     }
     // `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" })] })] })] }) }));
+    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" })] }), saveError && _jsx(Alert, { children: saveError }), saved && !saveError && _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" })] })] })] }) }));
 }