@remit/web-client 0.0.294 → 0.0.296

package/src/hooks/calendar/useCalendarSuggestions.ts

@@ -0,0 +1,180 @@
+/**
+ * The events mail offers, and the answers the reader gives them.
+ *
+ * Every card is drawn from what the server holds. An answer is a request, and
+ * the card moves when the listing it came from is read again — never because
+ * this side decided the press worked — so a refused answer leaves the card
+ * where it was, with the refusal stated beside it.
+ *
+ * Answers come back as outcomes rather than throws, for the reason the event
+ * writes do: a surface switching on a caught `unknown` cannot tell a refusal it
+ * must state from a fault it must not swallow. A lapsed session is neither, and
+ * escalates the way it does everywhere else.
+ */
+import {
+	calendarSuggestionActionOperationsAcceptCalendarSuggestionMutation,
+	calendarSuggestionActionOperationsDeclineCalendarSuggestionMutation,
+	calendarSuggestionActionOperationsDismissCalendarSuggestionMutation,
+	calendarSuggestionOperationsListCalendarSuggestionsOptions,
+	messageCalendarSuggestionOperationsListMessageCalendarSuggestionsOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapCalendarSuggestionResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	type QueryClient,
+	useMutation,
+	useQuery,
+	useQueryClient,
+} from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { softErrorStatuses } from "@/lib/error-classifier";
+
+const SUGGESTION_META = softErrorStatuses(400, 404);
+
+/** Every read an answer can change: the cards, the calendar, the sender rules. */
+const ANSWERED_QUERY_IDS = new Set([
+	"calendarSuggestionOperationsListCalendarSuggestions",
+	"messageCalendarSuggestionOperationsListMessageCalendarSuggestions",
+	"calendarEventOperationsListCalendarEvents",
+	"calendarEventDetailOperationsGetCalendarEvent",
+	"calendarFreeBusyOperationsListCalendarFreeBusy",
+	"filterOperationsListFilters",
+]);
+
+const invalidateAnswered = (queryClient: QueryClient): Promise<void> =>
+	queryClient.invalidateQueries({
+		predicate: (query) => {
+			const head = query.queryKey[0];
+			if (typeof head !== "object" || head === null) return false;
+			const id = (head as { _id?: unknown })._id;
+			return typeof id === "string" && ANSWERED_QUERY_IDS.has(id);
+		},
+	});
+
+export interface CalendarSuggestionsResult {
+	suggestions: RemitImapCalendarSuggestionResponse[];
+	isLoading: boolean;
+	error: unknown;
+}
+
+/** Every suggestion one message produced, whatever became of each. */
+export function useMessageCalendarSuggestions(
+	messageId: string,
+): CalendarSuggestionsResult {
+	const { data, isLoading, error } = useQuery({
+		...messageCalendarSuggestionOperationsListMessageCalendarSuggestionsOptions(
+			{ path: { messageId } },
+		),
+		meta: SUGGESTION_META,
+	});
+	return {
+		suggestions: data?.items ?? [],
+		isLoading,
+		error: error ?? null,
+	};
+}
+
+/** The suggestions still waiting on the reader, newest first. */
+export function usePendingCalendarSuggestions(): CalendarSuggestionsResult {
+	const { data, isLoading, error } = useQuery({
+		...calendarSuggestionOperationsListCalendarSuggestionsOptions({
+			query: { state: "Pending" },
+		}),
+		meta: SUGGESTION_META,
+	});
+	return {
+		suggestions: data?.items ?? [],
+		isLoading,
+		error: error ?? null,
+	};
+}
+
+export type SuggestionAnswer =
+	| { kind: "answered" }
+	| { kind: "refused"; message: string };
+
+const ANSWERED: SuggestionAnswer = { kind: "answered" };
+
+const refused = (error: unknown): SuggestionAnswer => ({
+	kind: "refused",
+	message: formatErrorMessage(error),
+});
+
+export interface CalendarSuggestionAnswers {
+	accept: (
+		suggestionId: string,
+		calendarId: string,
+	) => Promise<SuggestionAnswer>;
+	decline: (suggestionId: string) => Promise<SuggestionAnswer>;
+	dismiss: (
+		suggestionId: string,
+		muteSender: boolean,
+	) => Promise<SuggestionAnswer>;
+	isAnswering: boolean;
+}
+
+export function useCalendarSuggestionAnswers(): CalendarSuggestionAnswers {
+	const queryClient = useQueryClient();
+	const onSuccess = useCallback(
+		() => invalidateAnswered(queryClient),
+		[queryClient],
+	);
+
+	const accept = useMutation({
+		...calendarSuggestionActionOperationsAcceptCalendarSuggestionMutation(),
+		meta: SUGGESTION_META,
+		onSuccess,
+	});
+	const decline = useMutation({
+		...calendarSuggestionActionOperationsDeclineCalendarSuggestionMutation(),
+		meta: SUGGESTION_META,
+		onSuccess,
+	});
+	const dismiss = useMutation({
+		...calendarSuggestionActionOperationsDismissCalendarSuggestionMutation(),
+		meta: SUGGESTION_META,
+		onSuccess,
+	});
+
+	const acceptSuggestion = useCallback(
+		(suggestionId: string, calendarId: string) =>
+			accept
+				.mutateAsync({ path: { suggestionId }, body: { calendarId } })
+				.then(() => ANSWERED)
+				.catch(refused),
+		[accept],
+	);
+	const declineSuggestion = useCallback(
+		(suggestionId: string) =>
+			decline
+				.mutateAsync({ path: { suggestionId } })
+				.then(() => ANSWERED)
+				.catch(refused),
+		[decline],
+	);
+	const dismissSuggestion = useCallback(
+		(suggestionId: string, muteSender: boolean) =>
+			dismiss
+				.mutateAsync({ path: { suggestionId }, body: { muteSender } })
+				.then(() => ANSWERED)
+				.catch(refused),
+		[dismiss],
+	);
+
+	return useMemo(
+		() => ({
+			accept: acceptSuggestion,
+			decline: declineSuggestion,
+			dismiss: dismissSuggestion,
+			isAnswering: accept.isPending || decline.isPending || dismiss.isPending,
+		}),
+		[
+			acceptSuggestion,
+			declineSuggestion,
+			dismissSuggestion,
+			accept.isPending,
+			decline.isPending,
+			dismiss.isPending,
+		],
+	);
+}

package/src/hooks/calendar/useCalendars.ts

@@ -18,11 +18,19 @@ export interface CalendarsResult {
 	colorByCalendarId: Record<string, CalendarColorId>;
 	/** The zone each collection's floating times are read in. */
 	timeZoneByCalendarId: Record<string, string>;
+	/**
+	 * Where an accepted invitation lands: the collection the account was
+	 * provisioned with, or the first one when that is gone. `""` until the
+	 * listing has answered.
+	 */
+	defaultCalendarId: string;
 	isLoading: boolean;
+	/** Why the listing could not be read; null when it was. */
+	error: unknown;
 }
 
 export function useCalendars(): CalendarsResult {
-	const { data, isLoading } = useQuery(
+	const { data, isLoading, error } = useQuery(
 		calendarOperationsListCalendarsOptions(),
 	);
 
@@ -37,7 +45,11 @@ export function useCalendars(): CalendarsResult {
 			timeZoneByCalendarId: Object.fromEntries(
 				items.map((item) => [item.calendarId, item.timezone]),
 			),
+			defaultCalendarId:
+				(items.find((item) => item.source === "Default") ?? items[0])
+					?.calendarId ?? "",
 			isLoading,
+			error: error ?? null,
 		};
-	}, [data, isLoading]);
+	}, [data, isLoading, error]);
 }

package/src/hooks/intelligence-calendar.render.test.ts

@@ -0,0 +1,277 @@
+/**
+ * The invitation beside the open message, answered through the API (#1277).
+ *
+ * Drives the real chain: `useIntelligenceCalendar` reads the message's
+ * suggestions and the calendars, the real `IntelligencePanel` draws the card,
+ * and a press sends the request the server acts on. What is asserted is the
+ * request that left and what the card says after the server answered — a card
+ * that moves on its own before the answer is the thing this rules out.
+ */
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapCalendarResponse,
+	RemitImapCalendarSuggestionResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { type IntelligenceData, IntelligencePanel } from "@remit/ui";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeThreadMessage } from "@/test-support/fixtures";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "@/test-support/http";
+import { useIntelligenceCalendar } from "./useIntelligenceCalendar";
+
+const CALENDAR = "11111111-1111-4111-8111-111111111111";
+const SUGGESTION = "22222222-2222-4222-8222-222222222222";
+
+const thread = makeThreadMessage({ messageId: "msg-1" });
+
+const sender: IntelligenceData = {
+	sender: {
+		name: "Organizer",
+		email: "organizer@example.test",
+		trust: "wellknown",
+		firstSeenLabel: "Jan 2025",
+	},
+	authenticity: {
+		verdict: "aligned",
+		fromDomain: "example.test",
+		summary: "Signed by example.test.",
+	},
+	category: { value: "personal" },
+	similar: [],
+};
+
+const calendars = [
+	{
+		calendarId: CALENDAR,
+		accountConfigId: "cfg-1",
+		urlSegment: "default",
+		displayName: "Personal",
+		color: "Cal2",
+		componentSet: "VeventOnly",
+		source: "Default",
+		timezone: "Europe/Amsterdam",
+		syncSequence: 1,
+		createdAt: 0,
+		updatedAt: 0,
+	},
+] satisfies RemitImapCalendarResponse[];
+
+const invitation = (
+	state: RemitImapCalendarSuggestionResponse["state"],
+): RemitImapCalendarSuggestionResponse => ({
+	suggestionId: SUGGESTION,
+	accountConfigId: "cfg-1",
+	messageId: "msg-1",
+	bodyPartId: "part-1",
+	icalUid: "uid-1",
+	sequence: 0,
+	method: "Request",
+	source: "IcalendarPart",
+	state,
+	summary: "Quarterly review",
+	dtStart: "2026-09-01T08:00:00+00:00",
+	dtEnd: "2026-09-01T09:00:00+00:00",
+	allDay: false,
+	location: "",
+	organizer: "organizer@example.test",
+	zoneCertainty: "Explicit",
+	acceptedCalendarObjectId: "",
+	createdAt: 0,
+	updatedAt: 0,
+});
+
+const Harness = () => {
+	const calendar = useIntelligenceCalendar(thread);
+	return createElement(IntelligencePanel, {
+		data: sender,
+		calendar: calendar.surface,
+		tab: calendar.tab,
+		onTabChange: calendar.onTabChange,
+	});
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+/**
+ * A server holding one pending invitation. `answer` decides what an answer
+ * does: the state it moves the suggestion to, or a refusal to send back.
+ */
+const server = (
+	answer: (
+		call: HttpCall,
+	) => RemitImapCalendarSuggestionResponse["state"] | Response,
+) => {
+	let state: RemitImapCalendarSuggestionResponse["state"] = "Pending";
+	return (call: HttpCall): unknown => {
+		if (call.path.endsWith("/calendars")) return { items: calendars };
+		if (call.path.endsWith("/messages/msg-1/calendar-suggestions"))
+			return { items: [invitation(state)] };
+		if (
+			call.method === "POST" &&
+			call.path.includes("/calendar-suggestions/")
+		) {
+			const next = answer(call);
+			if (next instanceof Response) return next;
+			state = next;
+			return invitation(state);
+		}
+		return { items: [] };
+	};
+};
+
+const mount = async (respond: (call: HttpCall) => unknown) => {
+	http = mockFetch(respond);
+	harness = createDomHarness();
+	harness.renderApp(createElement(Harness));
+	await harness.waitFor(
+		() => harness?.text().includes("Quarterly review") === true,
+		"the invitation to be drawn",
+	);
+};
+
+const press = (label: string) => {
+	if (!harness) throw new Error("not mounted");
+	harness.click(harness.byText("button", label));
+};
+
+describe("the invitation beside the open message", () => {
+	it("opens on the calendar tab while an invitation waits", async () => {
+		await mount(server(() => "Accepted"));
+		assert.match(
+			harness?.text() ?? "",
+			/Invitation from organizer@example\.test/,
+		);
+		assert.match(harness?.text() ?? "", /Add to calendar/);
+	});
+
+	it("adds it to the default calendar, and says so once the server has", async () => {
+		await mount(server(() => "Accepted"));
+		press("Add to calendar");
+
+		await harness?.waitFor(
+			() => harness?.text().includes("On your calendar") === true,
+			"the card to read back the accepted state",
+		);
+		const accepted =
+			http?.to(`/calendar-suggestions/${SUGGESTION}/accept`) ?? [];
+		assert.equal(accepted.length, 1);
+		assert.deepEqual(accepted[0].body, { calendarId: CALENDAR });
+	});
+
+	it("states a refused answer where it was pressed, and leaves the button live", async () => {
+		await mount(
+			server(() => httpError(400, "The calendar it was going into is gone.")),
+		);
+		press("Add to calendar");
+
+		await harness?.waitFor(
+			() =>
+				harness?.text().includes("Couldn't add this to your calendar") === true,
+			"the refusal to be stated",
+		);
+		const alert = harness?.query('[role="alert"]');
+		assert.ok(alert, "a refusal is an alert, not a quiet line");
+		const button = harness?.byText("button", "Add to calendar") as
+			| HTMLButtonElement
+			| undefined;
+		assert.equal(button?.disabled, false);
+	});
+
+	it("keeps declining live when the calendars cannot be read, and says why adding waits", async () => {
+		const answering = server(() => "Declined");
+		await mount((call) =>
+			call.path.endsWith("/calendars") ? httpError(500) : answering(call),
+		);
+		await harness?.waitFor(
+			() => harness?.text().includes("Couldn't read your calendars") === true,
+			"the calendar read failure to be stated",
+		);
+		const add = harness?.byText("button", "Add to calendar") as
+			| HTMLButtonElement
+			| undefined;
+		assert.equal(add?.disabled, true);
+		assert.ok(harness?.query('a[href*="github.com"]'), "a report link");
+
+		press("Decline");
+		await harness?.waitFor(
+			() => harness?.text().includes("You declined") === true,
+			"the decline to land without a calendar",
+		);
+	});
+
+	it("offers the picked times to select by hand where the page has no clipboard", async () => {
+		await mount(server(() => "Accepted"));
+		Object.defineProperty(navigator, "clipboard", {
+			value: undefined,
+			configurable: true,
+		});
+		press("Offer other times");
+		const slot = harness?.query("[aria-pressed]");
+		if (!slot) throw new Error("no slot offered");
+		harness?.click(slot);
+		press("Copy picked times");
+
+		await harness?.waitFor(
+			() => harness?.query('textarea[aria-label="Picked times"]') !== null,
+			"the times to be offered for selecting",
+		);
+		assert.match(harness?.text() ?? "", /can't copy for you/);
+	});
+
+	it("declines through the API", async () => {
+		await mount(server(() => "Declined"));
+		press("Decline");
+
+		await harness?.waitFor(
+			() => harness?.text().includes("You declined") === true,
+			"the card to read back the declined state",
+		);
+		assert.equal(
+			http?.to(`/calendar-suggestions/${SUGGESTION}/decline`).length,
+			1,
+		);
+	});
+
+	it("names the mail's sender on the mute button, which is who the rule matches", async () => {
+		await mount(server(() => "Dismissed"));
+		const text = harness?.text() ?? "";
+		assert.match(text, /Stop offering invitations from Alice/);
+		assert.doesNotMatch(
+			text,
+			/Stop offering invitations from organizer@example\.test/,
+		);
+	});
+
+	it("mutes the sender by dismissing with a sender rule, and the tab stays put", async () => {
+		await mount(server(() => "Dismissed"));
+		press("Stop offering invitations from Alice");
+
+		await harness?.waitFor(
+			() => harness?.text().includes("Add to calendar") === false,
+			"the card to leave once the server dismissed it",
+		);
+		assert.match(
+			harness?.text() ?? "",
+			/Nothing in this message is about a time/,
+			"answering the last card keeps the Calendar tab",
+		);
+		const dismissed =
+			http?.to(`/calendar-suggestions/${SUGGESTION}/dismiss`) ?? [];
+		assert.equal(dismissed.length, 1);
+		assert.deepEqual(dismissed[0].body, { muteSender: true });
+	});
+});

package/src/hooks/useBriefSections.ts

@@ -276,7 +276,8 @@ export interface UseBriefSearchRows {
 }
 
 /**
- * The brief under a search: one request, one globally newest-first list.
+ * The brief under a search: one request, one list — sender matches first, then
+ * mentions, each newest first.
  *
  * Not seven category queries stitched back together. A match's category must not
  * lift it above a newer match, and section headers between the rows would do