@rapidmx/web-client 0.14.1 → 0.15.1

package/dist/apps/shared/components/calendar/EventDetails.js

@@ -0,0 +1,137 @@
+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 { HiOutlineBars3BottomLeft, HiOutlineBell, HiOutlineBriefcase, HiOutlineCheck, HiOutlineClock, HiOutlineMapPin, HiOutlineUser, HiOutlineUserGroup, HiOutlineVideoCamera, HiOutlineXMark, } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { guestPermissionsOf, respondToEvent, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { htmlToPlainText } from "@rapidmx/react-shared/calendar/eventDescription.js";
+import { deleteEventOccurrence, deleteEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
+import { describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { getVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
+import EventDescriptionView from "./EventDescriptionView.js";
+import RequestChangeForm from "./RequestChangeForm.js";
+import { BUSY_STATUS_LABEL, RESPONSE_STATUS_LABEL, VISIBILITY_LABEL, describeGuestPermissions, describeReminder, formatStoredWhen } from "./eventFormat.js";
+const ROLE_LABEL = { required: "", optional: "Optional", resource: "Room/equipment" };
+function DetailRow({ icon, children }) {
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted mt-0.5", children: icon }), _jsx("div", { className: "flex-1 min-w-0 break-words", children: children })] }));
+}
+/**
+ * What clicking an existing event shows first: everything the event says, read-only. The reader who organized it (or whose event has no
+ * other organizer) can Modify or Delete it; one who was invited can answer (Accept, Tentative, Decline) or remove it from their own
+ * calendar, but not change it - the organizer's next update would overwrite that anyway. When the organizer allows guests to ask for changes (or for
+ * guests to be added) the invited reader can "Request a change" / "Add guests": the request goes to the organizer (`RequestChangeForm`) and nothing here
+ * changes until their update arrives. When the organizer hides the guest list the reader sees only themselves and is told so.
+ *
+ * An event this reader may only see as a busy block (`occurrence.redacted`: a private or confidential event on a shared calendar) is drawn as just that -
+ * its time and that it is busy - with nothing to change, delete or answer.
+ */
+export default function EventDetails({ occurrence, isInvited, myResponse, isOwnAddress, calendarName, calendarColor, onClose, onModify, onSaved, onDeleted, }) {
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [requesting, setRequesting] = useState(false);
+    // The organizer's own join link for the event's video meeting: `undefined` while it is fetched, `null` once known to be none.
+    const [organizerJoinUrl, setOrganizerJoinUrl] = useState(undefined);
+    const videoMeetingUid = occurrence.videoMeetingUid;
+    // The link lives on the meeting, not on the event, so it is fetched once here. A failure and a meeting with no link at all are the
+    // same thing to this view - there is nothing to open either way - so both settle on `null`.
+    useEffect(() => {
+        if (!videoMeetingUid) {
+            return;
+        }
+        let cancelled = false;
+        void getVideoMeeting(videoMeetingUid)
+            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .catch(() => null)
+            .then((url) => {
+            if (!cancelled) {
+                setOrganizerJoinUrl(url);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [videoMeetingUid]);
+    // The same scheme allow-list a reminder's own location gets: a hostile or malformed join link never reaches `window.open()`.
+    const joinUrl = joinMeetingUrl(organizerJoinUrl);
+    async function handleDelete(scope) {
+        setError(null);
+        setBusy(true);
+        try {
+            if (occurrence.isRecurringOccurrence && scope === "occurrence") {
+                await deleteEventOccurrence(occurrence);
+            }
+            else {
+                await deleteEventSeries(occurrence);
+            }
+            onDeleted();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not delete this event.");
+            setBusy(false);
+        }
+    }
+    // `@rapidmx/restapi`'s `respond()` route has no occurrence-vs-series scope of its own (see `calendarApi.ts`'s `respondToEvent` doc
+    // comment) - it always acts on `occurrence.uid` as a single event document.
+    async function handleRespond(responseStatus) {
+        setError(null);
+        setBusy(true);
+        try {
+            await respondToEvent(occurrence.uid, responseStatus);
+            // A decline soft-deletes the mailbox's own copy server-side - treat it the same as a
+            // delete rather than a save so the calendar view drops it immediately.
+            if (responseStatus === "declined") {
+                onDeleted();
+            }
+            else {
+                onSaved();
+            }
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not send your response.");
+            setBusy(false);
+        }
+    }
+    if (occurrence.redacted) {
+        return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-3 px-5 pt-4", children: [_jsx("span", { "aria-hidden": "true", className: "w-3.5 h-3.5 rounded-full shrink-0 mt-2", style: { backgroundColor: calendarColor } }), _jsx("h2", { className: "flex-1 min-w-0 text-xl font-semibold break-words", children: "Busy" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "w-8 h-8 shrink-0 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 20, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "flex flex-col gap-3 px-5 pt-3 pb-4 text-sm", children: [_jsxs(DetailRow, { icon: _jsx(HiOutlineClock, { size: 18 }), children: [_jsx("div", { children: formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay) }), occurrence.recurrenceRule && _jsxs("div", { className: "text-text-muted", children: ["Repeats ", describeRecurrence(occurrence.recurrenceRule)] })] }), _jsx("p", { className: "text-xs text-text-muted", children: "This time is busy. The event\u2019s details are private, so only its time is shown." })] }), _jsx("div", { className: "flex px-5 pb-4", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" }) })] }));
+    }
+    const permissions = guestPermissionsOf(occurrence);
+    // The organizer hid the guest list: this mailbox's own copy lists only itself (the server sends nothing more), and that is all that is shown.
+    const hiddenList = isInvited && !permissions.guestsCanSeeGuestList;
+    const allGuests = occurrence.attendees.filter((a) => !a.isOrganizer);
+    const guests = hiddenList ? allGuests.filter((a) => !!isOwnAddress?.(a.address)) : allGuests;
+    const hasDescription = htmlToPlainText(occurrence.descriptionHtml) !== "" || !!occurrence.description?.trim();
+    // An invited reader may ask the organizer for what the organizer allows.
+    const askable = isInvited && myResponse !== undefined;
+    const canChange = askable && permissions.guestsCanModify;
+    const canInvite = askable && permissions.guestsCanInviteOthers;
+    const organizerName = occurrence.organizer.displayName;
+    const eventZone = occurrence.timezone;
+    const answers = [
+        { response: "accepted", label: "Accept" },
+        { response: "tentative", label: "Tentative" },
+        { response: "declined", label: "Decline" },
+    ];
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-3 px-5 pt-4", children: [_jsx("span", { "aria-hidden": "true", className: "w-3.5 h-3.5 rounded-full shrink-0 mt-2", style: { backgroundColor: calendarColor } }), _jsx("h2", { className: "flex-1 min-w-0 text-xl font-semibold break-words", children: occurrence.title || "(no title)" }), _jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "w-8 h-8 shrink-0 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineXMark, { size: 20, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "flex flex-col gap-3 px-5 pt-3 pb-4 text-sm", children: [error && _jsx(Alert, { children: error }), _jsxs(DetailRow, { icon: _jsx(HiOutlineClock, { size: 18 }), children: [_jsx("div", { children: formatStoredWhen(occurrence.startDate, occurrence.endDate, occurrence.allDay) }), occurrence.recurrenceRule && _jsxs("div", { className: "text-text-muted", children: ["Repeats ", describeRecurrence(occurrence.recurrenceRule)] }), !occurrence.allDay && eventZone && eventZone !== deviceTimeZone() && (_jsxs("div", { className: "text-text-muted", children: ["Event time zone: ", eventZone.replace(/_/g, " ")] }))] }), occurrence.location && (_jsx(DetailRow, { icon: _jsx(HiOutlineMapPin, { size: 18 }), children: _jsx("div", { children: occurrence.location }) })), hasDescription && (_jsx(DetailRow, { icon: _jsx(HiOutlineBars3BottomLeft, { size: 18 }), children: _jsx(EventDescriptionView, { html: occurrence.descriptionHtml, text: occurrence.description }) })), videoMeetingUid && (_jsx(DetailRow, { icon: _jsx(HiOutlineVideoCamera, { size: 18 }), children: _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: !joinUrl, onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"), children: "Join video call" }), !joinUrl && (_jsx("span", { className: "text-xs text-text-muted", children: organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available." }))] }) })), _jsxs(DetailRow, { icon: _jsx(HiOutlineUser, { size: 18 }), children: [_jsx("div", { children: organizerName || occurrence.organizer.address }), _jsxs("div", { className: "text-text-muted", children: [organizerName ? `${occurrence.organizer.address} · ` : "", "Organizer"] })] }), (guests.length > 0 || hiddenList) && (_jsxs(DetailRow, { icon: _jsx(HiOutlineUserGroup, { size: 18 }), children: [_jsx("div", { className: "font-medium mb-1", children: hiddenList ? "The organizer has hidden the guest list" : guests.length === 1 ? "1 guest" : `${guests.length} guests` }), _jsx("ul", { className: "flex flex-col gap-1", children: guests.map((guest, i) => (_jsxs("li", { className: "flex items-baseline justify-between gap-3", children: [_jsxs("span", { className: "min-w-0 truncate", children: [guest.displayName || guest.address, ROLE_LABEL[guest.role] && _jsxs("span", { className: "text-text-muted", children: [" (", ROLE_LABEL[guest.role], ")"] })] }), _jsx("span", { className: "shrink-0 text-xs text-text-muted", children: RESPONSE_STATUS_LABEL[guest.responseStatus] })] }, i))) }), !isInvited && _jsx("div", { className: "text-xs text-text-muted mt-1", children: describeGuestPermissions(permissions) })] })), _jsxs(DetailRow, { icon: _jsx(HiOutlineBriefcase, { size: 18 }), children: [_jsx("div", { children: BUSY_STATUS_LABEL[occurrence.busyStatus] }), _jsx("div", { className: "text-text-muted", children: VISIBILITY_LABEL[visibilityOf(occurrence)] }), occurrence.autoReplyEnabled && (_jsx("div", { className: "text-text-muted", children: "Sends an automatic reply while this event is happening" }))] }), _jsx(DetailRow, { icon: _jsx(HiOutlineBell, { size: 18 }), children: _jsx("div", { children: describeReminder(occurrence.reminderMinutesBeforeStart) }) }), calendarName && (_jsxs("div", { className: "flex items-center gap-3 text-text-muted", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 h-3 ml-[3px] rounded-full shrink-0", style: { backgroundColor: calendarColor } }), _jsx("span", { className: "truncate", children: calendarName })] })), isInvited && (_jsxs("p", { className: "text-xs text-text-muted", children: ["You were invited to this event. Only the organizer can change its details", canChange || canInvite ? ", but you can ask them to." : "."] }))] }), requesting && (_jsx("div", { className: "mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: _jsx(RequestChangeForm, { subject: {
+                        uid: occurrence.uid,
+                        title: occurrence.title,
+                        location: occurrence.location,
+                        startDate: occurrence.startDate,
+                        endDate: occurrence.endDate,
+                        allDay: occurrence.allDay,
+                        recurring: occurrence.isRecurringOccurrence,
+                        description: occurrence.description,
+                        descriptionHtml: occurrence.descriptionHtml,
+                        guestAddresses: occurrence.attendees.map((a) => a.address),
+                    }, canChange: canChange, canInvite: canInvite, onSent: () => setRequesting(false), onCancel: () => setRequesting(false) }) })), myResponse !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 mx-5 mb-3 p-3 rounded-md bg-surface-alt", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium", children: "Your response" }), _jsx("div", { className: "flex gap-2", children: answers.map(({ response, label }) => {
+                                    const current = myResponse === response;
+                                    return (_jsxs(Button, { type: "button", variant: "secondary", className: ["!w-auto", response === "declined" ? "text-danger" : "", current ? "!bg-primary/10 !border-primary" : ""].join(" "), "aria-pressed": current, disabled: busy, onClick: () => void handleRespond(response), children: [current && _jsx(HiOutlineCheck, { size: 14, "aria-hidden": "true" }), label] }, response));
+                                }) })] }), _jsx("p", { className: "text-xs text-text-muted", children: "Other attendees\u2019 responses may take a few minutes to update." })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-4", children: [!isInvited && (_jsx(Button, { type: "button", className: "!w-auto", disabled: busy, onClick: onModify, children: "Modify" })), (canChange || canInvite) && !requesting && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: busy, onClick: () => setRequesting(true), children: canChange ? "Request a change" : "Add guests" })), !occurrence.isRecurringOccurrence ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete" })) : !confirmingDelete ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => setConfirmingDelete(true), children: "Delete" })) : (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("occurrence"), children: "Delete this event" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", disabled: busy, onClick: () => void handleDelete("series"), children: "Delete series" })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto ml-auto", onClick: onClose, children: "Close" })] })] }));
+}

package/dist/apps/shared/components/calendar/EventEditor.d.ts

@@ -0,0 +1,59 @@
+import React, { MutableRefObject } from "react";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { QuickCreateConfig } from "./QuickCreateFaces.js";
+/**
+ * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
+ * clear again when video conferencing is turned back off (see `applyVideoConferencing()`).
+ *
+ * Deliberately generic and identical for everyone: each attendee's own personal join link is substituted into
+ * their own copy of the invitation server-side (`@rapidmx/restapi`'s `MeetingSchedulingJob`), so no link -
+ * personal or otherwise - may be stored on the shared event itself, where every attendee would read the same
+ * one.
+ */
+export declare const VIDEO_LOCATION_PLACEHOLDER = "Video call \u2014 link in this invitation";
+export interface EventEditorProps {
+    /** The quick-create popover's face of the form, or the full form's (only a new event, which has `quickCreate`, has the quick one). Both show the same values. */
+    layout: "quick" | "expanded";
+    /** "More options": the quick face asks to become the full one. */
+    onExpand: () => void;
+    /** Leave without saving (nothing was stored). */
+    onCancel: () => void;
+    /** Something was stored: the dialog closes and the calendar reloads. */
+    onSaved: () => void;
+    /** A series save could not move every occurrence edited on its own with it (`detachedOccurrenceSyncFailed`). */
+    onSyncWarning: () => void;
+    /** Kept up to date with whether the form holds anything a stray click outside it would throw away. */
+    dirtyRef: MutableRefObject<boolean>;
+    mailboxUid: string;
+    folderUid: string;
+    calendars?: {
+        uid: string;
+        name: string;
+    }[];
+    mailboxOptions?: {
+        mailbox: Mailbox;
+        calendars: {
+            uid: string;
+            name: string;
+        }[];
+    }[];
+    /** Each calendar's colour, keyed by folder uid. */
+    folderColors?: Record<string, string>;
+    organizerAddress: string;
+    /** `null` when creating a new event. */
+    occurrence: CalendarOccurrence | null;
+    initialStart?: Date;
+    initialEnd?: Date;
+    /** A new event starting as an all-day one (a day cell of the month view was clicked). */
+    initialAllDay?: boolean;
+    /** A new event's tabs (Event, Task, Appointment schedule): with it the form is drawn by `QuickCreateFaces`; without it, as the full card. */
+    quickCreate?: QuickCreateConfig;
+}
+/**
+ * The event form and everything it does: create, and edit (one occurrence, or the entire series, of a recurring event - the choice
+ * Outlook's own convention offers for the same ambiguity, see `calendarMutations.ts`), plus video conferencing. It owns the form's
+ * one set of values and draws them as either the quick-create popover or the full card (`layout`), so growing the one into the other
+ * keeps what was typed.
+ */
+export default function EventEditor({ layout, onExpand, onCancel, onSaved, onSyncWarning, dirtyRef, mailboxUid, folderUid, calendars, mailboxOptions, folderColors, organizerAddress, occurrence, initialStart, initialEnd, initialAllDay, quickCreate, }: EventEditorProps): React.JSX.Element;