@rapidmx/web-client 0.4.0 → 0.5.0

package/apps/www/settings/read-receipts/index.tsx

@@ -1,125 +1,148 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.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 SettingsReadReceiptsPageProps = Omit<SettingsShellProps, "active">;
-
-export default function SettingsReadReceiptsPage(props: SettingsReadReceiptsPageProps) {
-    return (
-        <SettingsShell {...props} active="read-receipts">
-            <ReadReceiptsContent />
-        </SettingsShell>
-    );
-}
-
-function ReadReceiptsContent() {
-    const { mailboxUid, mailboxes } = useSettingsShell();
-    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
-    // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
-    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
-
-    const [alwaysRequestReceiptInternal, setAlwaysRequestReceiptInternal] = useState(mailbox.alwaysRequestReceiptInternal ?? true);
-    const [alwaysRequestReceiptExternal, setAlwaysRequestReceiptExternal] = useState(mailbox.alwaysRequestReceiptExternal ?? false);
-    const [autoSendReceiptsInternal, setAutoSendReceiptsInternal] = useState(mailbox.autoSendReceiptsInternal ?? true);
-    const [autoSendReceiptsExternal, setAutoSendReceiptsExternal] = useState(mailbox.autoSendReceiptsExternal ?? false);
-    const [error, setError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-        setSaved(false);
-        setSaving(true);
-        try {
-            await updateMailbox({
-                uid: mailbox.uid,
-                version: mailbox.version,
-                alwaysRequestReceiptInternal,
-                alwaysRequestReceiptExternal,
-                autoSendReceiptsInternal,
-                autoSendReceiptsExternal,
-            });
-            setSaved(true);
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save read receipt settings.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="flex-1 min-w-0 overflow-y-auto p-6">
-            <div className="max-w-xl">
-                <h1 className="text-lg font-bold tracking-tight mb-1">Read Receipts</h1>
-                <p className="text-sm text-text-muted mb-4">
-                    Controls when this mailbox requests a delivery/read receipt on mail it sends, and how it
-                    responds to a receipt requested of it. A per-message &ldquo;Request a read receipt&rdquo;
-                    checkbox in Compose always overrides the request-side settings below for that one message.
-                </p>
-
-                {error && <Alert>{error}</Alert>}
-                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
-
-                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
-                    <fieldset className="flex flex-col gap-2">
-                        <legend className="text-sm font-semibold mb-1">Request receipts when sending</legend>
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
-                                checked={alwaysRequestReceiptInternal}
-                                onChange={(e) => setAlwaysRequestReceiptInternal(e.target.checked)}
-                            />
-                            From internal recipients (mail to this organization)
-                        </label>
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
-                                checked={alwaysRequestReceiptExternal}
-                                onChange={(e) => setAlwaysRequestReceiptExternal(e.target.checked)}
-                            />
-                            From external recipients
-                        </label>
-                    </fieldset>
-
-                    <fieldset className="flex flex-col gap-2">
-                        <legend className="text-sm font-semibold mb-1">Respond automatically to requests</legend>
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
-                                checked={autoSendReceiptsInternal}
-                                onChange={(e) => setAutoSendReceiptsInternal(e.target.checked)}
-                            />
-                            From internal senders
-                        </label>
-                        <label className="flex items-center gap-2 text-sm">
-                            <input
-                                type="checkbox"
-                                checked={autoSendReceiptsExternal}
-                                onChange={(e) => setAutoSendReceiptsExternal(e.target.checked)}
-                            />
-                            From external senders
-                        </label>
-                        <p className="text-xs text-text-muted">
-                            Unchecked means a request from that sender waits in your Inbox for you to send or
-                            decline it explicitly.
-                        </p>
-                    </fieldset>
-
-                    <div>
-                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                            Save
-                        </Button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { updateMailbox } from "@rapidmx/react-shared/mail/mailApi.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 SettingsReadReceiptsPageProps = Omit<SettingsShellProps, "active">;
+
+export default function SettingsReadReceiptsPage(props: SettingsReadReceiptsPageProps) {
+    return (
+        <SettingsShell {...props} active="read-receipts">
+            <ReadReceiptsContent />
+        </SettingsShell>
+    );
+}
+
+function ReadReceiptsContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    // `SettingsShell` only ever renders its children once `mailboxes` has loaded and `mailboxUid` has
+    // resolved to one of them — same established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid)!;
+
+    const [alwaysRequestReceiptInternal, setAlwaysRequestReceiptInternal] = useState(mailbox.alwaysRequestReceiptInternal ?? true);
+    const [alwaysRequestReceiptFederated, setAlwaysRequestReceiptFederated] = useState(mailbox.alwaysRequestReceiptFederated ?? false);
+    const [alwaysRequestReceiptExternal, setAlwaysRequestReceiptExternal] = useState(mailbox.alwaysRequestReceiptExternal ?? false);
+    const [autoSendReceiptsInternal, setAutoSendReceiptsInternal] = useState(mailbox.autoSendReceiptsInternal ?? true);
+    const [autoSendReceiptsFederated, setAutoSendReceiptsFederated] = useState(mailbox.autoSendReceiptsFederated ?? false);
+    const [autoSendReceiptsExternal, setAutoSendReceiptsExternal] = useState(mailbox.autoSendReceiptsExternal ?? false);
+    // See auto-reply/index.tsx's identical note - later saves must carry the version the previous save returned.
+    const [version, setVersion] = useState(mailbox.version);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateMailbox({
+                uid: mailbox.uid,
+                version,
+                alwaysRequestReceiptInternal,
+                alwaysRequestReceiptFederated,
+                alwaysRequestReceiptExternal,
+                autoSendReceiptsInternal,
+                autoSendReceiptsFederated,
+                autoSendReceiptsExternal,
+            });
+            setVersion(updated.version);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save read receipt settings.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Read Receipts</h1>
+                <p className="text-sm text-text-muted mb-4">
+                    Controls when this mailbox requests a delivery/read receipt on mail it sends, and how it
+                    responds to a receipt requested of it. A per-message &ldquo;Request a read receipt&rdquo;
+                    checkbox in Compose always overrides the request-side settings below for that one message.
+                </p>
+
+                {error && <Alert>{error}</Alert>}
+                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <fieldset className="flex flex-col gap-2">
+                        <legend className="text-sm font-semibold mb-1">Request receipts when sending</legend>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={alwaysRequestReceiptInternal}
+                                onChange={(e) => setAlwaysRequestReceiptInternal(e.target.checked)}
+                            />
+                            From internal recipients (mail to this organization)
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={alwaysRequestReceiptFederated}
+                                onChange={(e) => setAlwaysRequestReceiptFederated(e.target.checked)}
+                            />
+                            From federated recipients (partner organizations)
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={alwaysRequestReceiptExternal}
+                                onChange={(e) => setAlwaysRequestReceiptExternal(e.target.checked)}
+                            />
+                            From external recipients
+                        </label>
+                    </fieldset>
+
+                    <fieldset className="flex flex-col gap-2">
+                        <legend className="text-sm font-semibold mb-1">Respond automatically to requests</legend>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={autoSendReceiptsInternal}
+                                onChange={(e) => setAutoSendReceiptsInternal(e.target.checked)}
+                            />
+                            From internal senders
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={autoSendReceiptsFederated}
+                                onChange={(e) => setAutoSendReceiptsFederated(e.target.checked)}
+                            />
+                            From federated senders (partner organizations)
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={autoSendReceiptsExternal}
+                                onChange={(e) => setAutoSendReceiptsExternal(e.target.checked)}
+                            />
+                            From external senders
+                        </label>
+                        <p className="text-xs text-text-muted">
+                            Unchecked means a request from that sender waits in your Inbox for you to send or
+                            decline it explicitly.
+                        </p>
+                    </fieldset>
+
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/sharing/index.tsx

@@ -57,13 +57,13 @@ function SharingContent() {
     const [removeTarget, setRemoveTarget] = useState<MailboxAccessMember | null>(null);
     const [removing, setRemoving] = useState(false);
 
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved (a mailbox-less caller
+    // gets `<MailboxProvisioning />` instead) - same established precedent as the Labels/Focused Inbox
+    // settings pages, so none of the handlers below need their own `!mailboxUid` guard.
     function reload() {
-        if (!mailboxUid) {
-            return;
-        }
         setStatus("loading");
         setError(null);
-        listMailboxAccess(mailboxUid)
+        listMailboxAccess(mailboxUid!)
             .then((result) => {
                 setMembers(result);
                 setStatus("ready");
@@ -86,7 +86,7 @@ function SharingContent() {
     async function handleAdd(e: FormEvent) {
         e.preventDefault();
         const email = emailInput.trim();
-        if (!email || !mailboxUid) {
+        if (!email) {
             return;
         }
         setAddError(null);
@@ -97,7 +97,7 @@ function SharingContent() {
                 setAddError("No one found with that email on this platform.");
                 return;
             }
-            await setMailboxAccess(mailboxUid, found.userUid, newRole);
+            await setMailboxAccess(mailboxUid!, found.userUid, newRole);
             setEmailInput("");
             setNewRole("viewer");
             reload();
@@ -109,13 +109,10 @@ function SharingContent() {
     }
 
     async function handleRoleChange(userOrRoleId: string, role: MailboxAccessRole) {
-        if (!mailboxUid) {
-            return;
-        }
         setPendingRoleChange(userOrRoleId);
         setError(null);
         try {
-            await setMailboxAccess(mailboxUid, userOrRoleId, role);
+            await setMailboxAccess(mailboxUid!, userOrRoleId, role);
             reload();
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not update this member's role.");
@@ -129,13 +126,12 @@ function SharingContent() {
     }
 
     async function handleRemove() {
-        if (!mailboxUid || !removeTarget) {
-            return;
-        }
+        // Only reachable from the confirm modal's own "Remove" button, and `Modal` renders nothing at all
+        // unless `removeTarget` is set, so `removeTarget` is always non-null here.
         setRemoving(true);
         setError(null);
         try {
-            await removeMailboxAccess(mailboxUid, removeTarget.userOrRoleId);
+            await removeMailboxAccess(mailboxUid!, removeTarget!.userOrRoleId);
             setRemoveTarget(null);
             reload();
         } catch (err) {
@@ -191,6 +187,13 @@ function SharingContent() {
                                                         handleRoleChange(member.userOrRoleId, e.target.value as MailboxAccessRole)
                                                     }
                                                 >
+                                                    {/* Access granted outside this page can't be set here, only replaced by a
+                                                        standard role. */}
+                                                    {member.role === "custom" && (
+                                                        <option value="custom" disabled>
+                                                            Custom access
+                                                        </option>
+                                                    )}
                                                     {(Object.keys(ROLE_LABELS) as MailboxAccessRole[]).map((role) => (
                                                         <option key={role} value={role}>
                                                             {ROLE_LABELS[role]}