@remit/web-client 0.0.291 → 0.0.292

package/src/components/settings/TimeZoneSelect.tsx

@@ -0,0 +1,43 @@
+import { Select } from "@remit/ui";
+import { UNZONED_CALENDAR } from "@/hooks/calendar";
+
+/**
+ * The zone a calendar's floating times are read in. The empty choice is how
+ * the API spells "no zone", which reads as UTC — there is no IANA name for UTC
+ * the server accepts, so it is offered as its own option rather than as a zone.
+ */
+export interface TimeZoneSelectProps {
+	id: string;
+	value: string;
+	disabled?: boolean;
+	onChange: (timeZone: string) => void;
+}
+
+const ZONES = Intl.supportedValuesOf("timeZone");
+
+export function TimeZoneSelect({
+	id,
+	value,
+	disabled,
+	onChange,
+}: TimeZoneSelectProps) {
+	const zones =
+		value === UNZONED_CALENDAR || ZONES.includes(value)
+			? ZONES
+			: [value, ...ZONES];
+	return (
+		<Select
+			id={id}
+			value={value}
+			disabled={disabled}
+			onChange={(event) => onChange(event.target.value)}
+		>
+			<option value={UNZONED_CALENDAR}>None (read as UTC)</option>
+			{zones.map((zone) => (
+				<option key={zone} value={zone}>
+					{zone}
+				</option>
+			))}
+		</Select>
+	);
+}

package/src/components/settings/calendar-collection-cards.render.test.ts

@@ -0,0 +1,149 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { CalendarClash, EventDraft } from "@remit/ui";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
+import { CalendarCreateCard } from "./CalendarCreateCard";
+import { CalendarDetailsForm } from "./CalendarDetailsForm";
+import { CalendarFeedCard } from "./CalendarFeedCard";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`.
+(globalThis as { React?: typeof React }).React = React;
+
+const details = (problem = "", timezone = "Europe/Amsterdam") =>
+	renderToString(
+		createElement(CalendarDetailsForm, {
+			calendarName: "Work",
+			timezone,
+			isBusy: false,
+			problem,
+			onSave: () => undefined,
+			onDelete: () => undefined,
+		}) as never,
+	);
+
+describe("CalendarDetailsForm", () => {
+	it("offers the name, the zone, a save and a delete", () => {
+		const html = details();
+		assert.match(html, /value="Work"/);
+		assert.match(html, /Europe\/Amsterdam/);
+		assert.match(html, /Save changes/);
+		assert.match(html, /Delete calendar/);
+	});
+
+	it("offers no zone as its own choice, read as UTC", () => {
+		assert.match(details("", ""), /None \(read as UTC\)/);
+	});
+
+	it("keeps a zone the list does not hold rather than dropping it", () => {
+		assert.match(details("", "Mars/Olympus"), /Mars\/Olympus/);
+	});
+
+	it("states a refusal in the server's words", () => {
+		const html = details("cannot be removed");
+		assert.match(html, /role="alert"/);
+		assert.match(html.replaceAll("<!-- -->", ""), /Work was not changed/);
+		assert.match(html, /cannot be removed/);
+	});
+});
+
+describe("CalendarCreateCard", () => {
+	const create = (problem = "") =>
+		renderToString(
+			createElement(CalendarCreateCard, {
+				isBusy: false,
+				problem,
+				onCreate: () => Promise.resolve(true),
+			}) as never,
+		);
+
+	it("asks for a name, an address and a zone", () => {
+		const html = create();
+		assert.match(html, /New calendar/);
+		assert.match(html, />Name</);
+		assert.match(html, />Address</);
+		assert.match(html, />Time zone</);
+		assert.match(html, /Add calendar/);
+	});
+
+	it("states a refused create where the button is", () => {
+		const html = create("already addresses a calendar");
+		assert.match(html, /The calendar was not added/);
+		assert.match(html, /already addresses a calendar/);
+	});
+});
+
+describe("CalendarFeedCard with details", () => {
+	it("draws the calendar's settings above its address", () => {
+		const html = renderToString(
+			createElement(CalendarFeedCard, {
+				calendarName: "Work",
+				details: createElement("p", null, "calendar details here"),
+				state: { status: "absent" },
+				mintedUrl: "",
+				isBusy: false,
+				actionError: undefined,
+				onMint: () => undefined,
+				onRevoke: () => undefined,
+				onDismissMinted: () => undefined,
+				onRetry: () => undefined,
+			}) as never,
+		);
+		assert.ok(
+			html.indexOf("calendar details here") <
+				html.indexOf("Create subscription address"),
+		);
+	});
+});
+
+describe("CalendarComposePane clashes", () => {
+	const draft: EventDraft = {
+		title: "Roadmap review",
+		date: "2026-06-10",
+		endDate: "2026-06-10",
+		startTime: "10:00",
+		endTime: "11:00",
+		allDay: false,
+		calendarId: "cal_work",
+		location: "",
+		guests: "",
+		notes: "",
+		repeat: "",
+	};
+	const pane = (clashes: CalendarClash[] | undefined) =>
+		renderToString(
+			createElement(CalendarComposePane, {
+				title: "New event",
+				calendars: [],
+				draft,
+				onChange: () => undefined,
+				problem: "",
+				saveLabel: "Add",
+				isSaving: false,
+				clashes,
+				onSave: () => undefined,
+				onCancel: () => undefined,
+			}) as never,
+		);
+
+	it("names what the span runs into", () => {
+		const html = pane([{ id: "a", label: "Board prep, Wed 10 June" }]);
+		assert.match(
+			html,
+			/This clashes with something you have already agreed to/,
+		);
+		assert.match(html, /Board prep, Wed 10 June/);
+	});
+
+	it("says a checked span is clear", () => {
+		assert.match(pane([]), /Nothing else is booked at this time/);
+	});
+
+	it("draws nothing before there is an answer", () => {
+		const html = pane(undefined);
+		assert.doesNotMatch(html, /Nothing else is booked/);
+		assert.doesNotMatch(html, /This clashes/);
+	});
+});

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

@@ -0,0 +1,259 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapCalendarEventInstance,
+	RemitImapCalendarResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type { CalendarClash, EventDraft } from "@remit/ui";
+import { act, createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "../../test-support/http";
+import {
+	type CalendarCollectionOutcome,
+	type CalendarCollectionWrites,
+	useCalendarCollectionWrites,
+} from "./useCalendarCollectionWrites";
+import { useCalendars } from "./useCalendars";
+import { useDraftClashes } from "./useDraftClashes";
+
+const WORK = "11111111-1111-4111-8111-111111111111";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let writes: CalendarCollectionWrites | undefined;
+let clashes: CalendarClash[] | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	writes = undefined;
+	clashes = undefined;
+});
+
+const calendars: RemitImapCalendarResponse[] = [
+	{
+		calendarId: WORK,
+		accountConfigId: "cfg-1",
+		urlSegment: "work",
+		displayName: "Work",
+		color: "Cal1",
+		componentSet: "VeventOnly",
+		source: "UserCreated",
+		timezone: "",
+		syncSequence: 1,
+		createdAt: 0,
+		updatedAt: 0,
+	} as RemitImapCalendarResponse,
+];
+
+const instance = (
+	over: Partial<RemitImapCalendarEventInstance>,
+): RemitImapCalendarEventInstance =>
+	({
+		calendarId: WORK,
+		calendarObjectId: "obj-1",
+		recurrenceId: "",
+		icalUid: "uid-1",
+		summary: "Board prep",
+		start: "2026-06-10T10:30:00+00:00",
+		end: "2026-06-10T11:00:00+00:00",
+		allDay: false,
+		status: "Confirmed",
+		transparency: "Opaque",
+		zoneCertainty: "Explicit",
+		etag: "etag-1",
+		hasRecurrence: false,
+		...over,
+	}) as RemitImapCalendarEventInstance;
+
+const draft = (over: Partial<EventDraft>): EventDraft => ({
+	title: "Roadmap review",
+	date: "2026-06-10",
+	endDate: "2026-06-10",
+	startTime: "10:00",
+	endTime: "11:00",
+	allDay: false,
+	calendarId: WORK,
+	location: "",
+	guests: "",
+	notes: "",
+	repeat: "",
+	...over,
+});
+
+const settle = async () => {
+	await harness?.flush();
+	await harness?.wait(20);
+	await harness?.flush();
+};
+
+const serve = (respond: (call: HttpCall) => unknown) => {
+	http = mockFetch((call) =>
+		call.path.endsWith("/calendars") && call.method === "GET"
+			? { items: calendars }
+			: respond(call),
+	);
+	harness = createDomHarness();
+};
+
+function WritesProbe() {
+	useCalendars();
+	writes = useCalendarCollectionWrites();
+	return null;
+}
+
+const write = async (
+	run: (writes: CalendarCollectionWrites) => Promise<CalendarCollectionOutcome>,
+): Promise<CalendarCollectionOutcome> => {
+	const held = writes;
+	if (!held) throw new Error("the writes are not mounted");
+	let outcome: CalendarCollectionOutcome | undefined;
+	await act(async () => {
+		outcome = await run(held);
+	});
+	await settle();
+	if (!outcome) throw new Error("the write returned nothing");
+	return outcome;
+};
+
+const listingReads = (): number =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "GET" && call.path.endsWith("/calendars"),
+	).length;
+
+describe("managing a calendar collection", () => {
+	it("creates one and reads the listing back", async () => {
+		serve(() => calendars[0]);
+		harness?.renderApp(createElement(WritesProbe));
+		await settle();
+		const before = listingReads();
+
+		const outcome = await write((writes) =>
+			writes.createCalendar({ displayName: "Harbour", urlSegment: "harbour" }),
+		);
+
+		assert.deepEqual(outcome, { kind: "written" });
+		const posted = (http?.calls ?? []).find((call) => call.method === "POST");
+		assert.equal(posted?.body?.urlSegment, "harbour");
+		assert.ok(listingReads() > before, "the listing has to be read again");
+	});
+
+	it("renames and rezones one through a patch", async () => {
+		serve(() => calendars[0]);
+		harness?.renderApp(createElement(WritesProbe));
+		await settle();
+
+		await write((writes) =>
+			writes.updateCalendar(WORK, {
+				displayName: "Works",
+				timezone: "Europe/Lisbon",
+			}),
+		);
+
+		const patched = (http?.calls ?? []).find((call) => call.method === "PATCH");
+		assert.equal(patched?.path.endsWith(`/calendars/${WORK}`), true);
+		assert.equal(patched?.body?.timezone, "Europe/Lisbon");
+	});
+
+	it("hands back the server's words when it refuses a delete", async () => {
+		serve((call) =>
+			call.method === "DELETE"
+				? httpError(400, '"default" cannot be removed')
+				: calendars[0],
+		);
+		harness?.renderApp(createElement(WritesProbe));
+		await settle();
+
+		const outcome = await write((writes) => writes.deleteCalendar(WORK));
+		assert.equal(outcome.kind, "refused");
+		assert.match(
+			outcome.kind === "refused" ? outcome.message : "",
+			/cannot be removed/,
+		);
+	});
+});
+
+function ClashProbe({
+	of,
+	editing = "",
+}: {
+	of: EventDraft;
+	editing?: string;
+}) {
+	clashes = useDraftClashes(of, editing);
+	return null;
+}
+
+const clashesFor = async (
+	of: EventDraft,
+	items: RemitImapCalendarEventInstance[],
+	editing = "",
+): Promise<CalendarClash[] | undefined> => {
+	serve(() => ({ items }));
+	harness?.renderApp(createElement(ClashProbe, { of, editing }));
+	await settle();
+	return clashes;
+};
+
+describe("the clashes a draft runs into", () => {
+	it("names an event the span overlaps", async () => {
+		const found = await clashesFor(draft({}), [instance({})]);
+		assert.equal(found?.length, 1);
+		assert.match(found?.[0]?.label ?? "", /^Board prep, /);
+	});
+
+	it("finds none for a span in a free slot", async () => {
+		const found = await clashesFor(
+			draft({ startTime: "14:00", endTime: "15:00" }),
+			[instance({})],
+		);
+		assert.deepEqual(found, []);
+	});
+
+	it("never counts the event being edited against itself", async () => {
+		const found = await clashesFor(draft({}), [instance({})], "obj-1");
+		assert.deepEqual(found, []);
+	});
+
+	it("checks a multi-day span through its last day", async () => {
+		const found = await clashesFor(
+			draft({
+				endDate: "2026-06-16",
+				startTime: "09:00",
+				endTime: "17:00",
+			}),
+			[
+				instance({
+					start: "2026-06-15T12:00:00+00:00",
+					end: "2026-06-15T13:00:00+00:00",
+				}),
+			],
+		);
+		assert.equal(found?.length, 1);
+		const read = http?.to("/calendar-events")[0]?.url ?? "";
+		assert.ok(
+			read.includes(`to=${encodeURIComponent("2026-06-22")}`),
+			"the read has to cover the week of the last day",
+		);
+	});
+
+	it("checks nothing when the end is not after the start", async () => {
+		const found = await clashesFor(
+			draft({ startTime: "10:00", endTime: "10:00" }),
+			[instance({})],
+		);
+		assert.equal(found, undefined);
+	});
+
+	it("checks nothing for an all-day draft", async () => {
+		const found = await clashesFor(draft({ allDay: true }), [instance({})]);
+		assert.equal(found, undefined);
+	});
+});

package/src/hooks/calendar/index.ts

@@ -57,6 +57,11 @@ export {
 	useCalendarSelection,
 	useDrawnEvents,
 } from "./selection";
+export {
+	type CalendarCollectionOutcome,
+	type CalendarCollectionWrites,
+	useCalendarCollectionWrites,
+} from "./useCalendarCollectionWrites";
 export {
 	type CalendarEventResource,
 	useCalendarEvent,
@@ -82,6 +87,7 @@ export {
 	useCalendarWrites,
 	useInvalidateCalendarReads,
 } from "./useCalendarWrites";
+export { useDraftClashes } from "./useDraftClashes";
 export {
 	addDays,
 	type CalendarWindow,

package/src/hooks/calendar/useCalendarCollectionWrites.ts

@@ -0,0 +1,130 @@
+/**
+ * Creating, renaming, rezoning and deleting a calendar collection.
+ *
+ * A refusal comes back as an outcome carrying the server's own words — a url
+ * segment already taken, a zone it cannot resolve, the default calendar that
+ * cannot be removed — so the settings card states it where the reader acted.
+ * A lapsed session is not among the statuses owned here and escalates.
+ *
+ * Every write invalidates the listing, which is what the settings page, the
+ * editor's picker and the address filter all read. A delete or a rezone also
+ * moves or removes occurrences, so the event reads are invalidated with it.
+ */
+import {
+	calendarDetailOperationsDeleteCalendarMutation,
+	calendarDetailOperationsUpdateCalendarMutation,
+	calendarOperationsCreateCalendarMutation,
+	calendarOperationsListCalendarsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapCreateCalendarInput,
+	RemitImapUpdateCalendarInput,
+} from "@remit/api-http-client/types.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { softErrorStatuses } from "@/lib/error-classifier";
+import { useInvalidateCalendarReads } from "./useCalendarWrites";
+
+const COLLECTION_WRITE_META = softErrorStatuses(400, 404);
+
+export type CalendarCollectionOutcome =
+	| { kind: "written" }
+	| { kind: "refused"; message: string };
+
+const WRITTEN: CalendarCollectionOutcome = { kind: "written" };
+
+const refused = (error: unknown): CalendarCollectionOutcome => ({
+	kind: "refused",
+	message: formatErrorMessage(error),
+});
+
+export interface CalendarCollectionWrites {
+	createCalendar: (
+		input: RemitImapCreateCalendarInput,
+	) => Promise<CalendarCollectionOutcome>;
+	updateCalendar: (
+		calendarId: string,
+		patch: RemitImapUpdateCalendarInput,
+	) => Promise<CalendarCollectionOutcome>;
+	deleteCalendar: (calendarId: string) => Promise<CalendarCollectionOutcome>;
+	isWriting: boolean;
+}
+
+export function useCalendarCollectionWrites(): CalendarCollectionWrites {
+	const queryClient = useQueryClient();
+	const invalidateReads = useInvalidateCalendarReads();
+
+	const invalidateListing = useCallback(
+		() =>
+			queryClient.invalidateQueries({
+				queryKey: calendarOperationsListCalendarsQueryKey(),
+			}),
+		[queryClient],
+	);
+
+	const invalidateAll = useCallback(() => {
+		invalidateReads();
+		return invalidateListing();
+	}, [invalidateReads, invalidateListing]);
+
+	const create = useMutation({
+		...calendarOperationsCreateCalendarMutation(),
+		meta: COLLECTION_WRITE_META,
+		onSuccess: invalidateListing,
+	});
+	const update = useMutation({
+		...calendarDetailOperationsUpdateCalendarMutation(),
+		meta: COLLECTION_WRITE_META,
+		onSuccess: invalidateAll,
+	});
+	const remove = useMutation({
+		...calendarDetailOperationsDeleteCalendarMutation(),
+		meta: COLLECTION_WRITE_META,
+		onSuccess: invalidateAll,
+	});
+
+	const createCalendar = useCallback(
+		(input: RemitImapCreateCalendarInput) =>
+			create
+				.mutateAsync({ body: input })
+				.then(() => WRITTEN)
+				.catch(refused),
+		[create],
+	);
+
+	const updateCalendar = useCallback(
+		(calendarId: string, patch: RemitImapUpdateCalendarInput) =>
+			update
+				.mutateAsync({ path: { calendarId }, body: patch })
+				.then(() => WRITTEN)
+				.catch(refused),
+		[update],
+	);
+
+	const deleteCalendar = useCallback(
+		(calendarId: string) =>
+			remove
+				.mutateAsync({ path: { calendarId } })
+				.then(() => WRITTEN)
+				.catch(refused),
+		[remove],
+	);
+
+	return useMemo(
+		() => ({
+			createCalendar,
+			updateCalendar,
+			deleteCalendar,
+			isWriting: create.isPending || update.isPending || remove.isPending,
+		}),
+		[
+			createCalendar,
+			updateCalendar,
+			deleteCalendar,
+			create.isPending,
+			update.isPending,
+			remove.isPending,
+		],
+	);
+}

package/src/hooks/calendar/useDraftClashes.ts

@@ -0,0 +1,91 @@
+/**
+ * What the span a draft names runs into, across every calendar the reader
+ * holds — so the editor says so before Save rather than the grid after it.
+ *
+ * Read on the weeks from the draft's first day through its last, which for a
+ * single-day draft is the grid's own cache entry, and measured by the same rule the invitation card uses. Undefined
+ * while there is no span to check (all day, a time missing, an end not after
+ * the start) or no answer to
+ * check it against: drawing "nothing else is booked" over a read that has not
+ * landed is a claim, not a delay.
+ */
+import {
+	type CalendarClash,
+	type CalendarEventData,
+	clashesWith,
+	type EventDraft,
+} from "@remit/ui";
+import { useMemo } from "react";
+import { formatEventWhen } from "@/lib/calendar-format";
+import {
+	isDrawnInstance,
+	toCalendarEventData,
+	UNZONED_CALENDAR,
+} from "./instance";
+import { useCalendarEventWindow } from "./useCalendarEvents";
+import { useCalendars } from "./useCalendars";
+import { type CalendarWindow, calendarWindow, isoAtInZone } from "./window";
+
+const EVERY_CALENDAR: readonly string[] = [];
+const NO_WINDOW: CalendarWindow = { from: "", to: "" };
+
+export function useDraftClashes(
+	draft: EventDraft,
+	/** The resource being edited, which never clashes with itself. */
+	calendarObjectId = "",
+): CalendarClash[] | undefined {
+	const { timeZoneByCalendarId } = useCalendars();
+	const checkable =
+		draft.date !== "" &&
+		!draft.allDay &&
+		draft.endDate !== "" &&
+		draft.startTime !== "" &&
+		draft.endTime !== "" &&
+		`${draft.endDate}T${draft.endTime}` > `${draft.date}T${draft.startTime}`;
+	const { instances, isLoading, error } = useCalendarEventWindow({
+		...(checkable
+			? {
+					from: calendarWindow("week", draft.date).from,
+					to: calendarWindow("week", draft.endDate).to,
+				}
+			: NO_WINDOW),
+		calendarIds: EVERY_CALENDAR,
+		enabled: checkable,
+	});
+
+	const zone = timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR;
+
+	return useMemo(() => {
+		if (!checkable || isLoading || error) return undefined;
+		const start = isoAtInZone(draft.date, draft.startTime, zone);
+		const end = isoAtInZone(draft.endDate, draft.endTime, zone);
+		const others: CalendarEventData[] = instances
+			.filter(
+				(instance) =>
+					isDrawnInstance(instance) &&
+					instance.calendarObjectId !== calendarObjectId,
+			)
+			.map((instance) =>
+				toCalendarEventData(
+					instance,
+					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
+				),
+			);
+		return clashesWith({ start, end }, others).map((event) => ({
+			id: event.id,
+			label: `${event.title}, ${formatEventWhen(event)}`,
+		}));
+	}, [
+		checkable,
+		isLoading,
+		error,
+		draft.date,
+		draft.endDate,
+		draft.startTime,
+		draft.endTime,
+		zone,
+		instances,
+		calendarObjectId,
+		timeZoneByCalendarId,
+	]);
+}