@remit/web-client 0.0.302 → 0.0.304

package/src/hooks/calendar/index.ts

@@ -39,10 +39,13 @@ export {
 export {
 	anchorZoneFor,
 	type CalendarInstanceRef,
+	type CalendarJump,
 	calendarInstanceId,
+	calendarJumpOf,
 	deviceTimeZone,
 	isDrawnInstance,
 	readCalendarInstanceId,
+	seriesOccurrenceOf,
 	toCalendarDescriptor,
 	toCalendarEventData,
 	UNZONED_CALENDAR,
@@ -82,6 +85,7 @@ export {
 	type CalendarFreeBusyResult,
 	useCalendarFreeBusyWeeks,
 } from "./useCalendarFreeBusy";
+export { type CalendarJumpSearch, useCalendarJump } from "./useCalendarJump";
 export {
 	type CalendarSuggestionAnswers,
 	type CalendarSuggestionsResult,

package/src/hooks/calendar/instance.test.ts

@@ -2,7 +2,12 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import type { RemitImapCalendarEventInstance } from "@remit/api-http-client/types.gen.ts";
-import { anchorZoneFor, toCalendarEventData } from "./instance";
+import {
+	anchorZoneFor,
+	calendarJumpOf,
+	seriesOccurrenceOf,
+	toCalendarEventData,
+} from "./instance";
 
 const instance = (
 	over: Partial<RemitImapCalendarEventInstance>,
@@ -68,3 +73,134 @@ describe("the zone a write anchors an event in", () => {
 		}
 	});
 });
+
+describe("the occurrence a series opens at from its plain address", () => {
+	const weekly = ["06", "13", "20"].map((day) =>
+		toCalendarEventData(
+			instance({
+				recurrenceId: `203403${day}T090000Z`,
+				hasRecurrence: true,
+				allDay: false,
+				start: `2034-03-${day}T09:00:00+00:00`,
+				end: `2034-03-${day}T10:00:00+00:00`,
+			}),
+			"UTC",
+			"UTC",
+		),
+	);
+	const shuffled = [...weekly].reverse();
+
+	it("is the next one still to finish", () => {
+		assert.deepEqual(
+			seriesOccurrenceOf(shuffled, "obj_1", "2034-03-13T09:30:00Z"),
+			{ calendarObjectId: "obj_1", recurrenceId: "20340313T090000Z" },
+		);
+	});
+
+	it("is the first in the window once every one has passed", () => {
+		assert.deepEqual(
+			seriesOccurrenceOf(shuffled, "obj_1", "2034-04-01T00:00:00Z"),
+			{ calendarObjectId: "obj_1", recurrenceId: "20340306T090000Z" },
+		);
+	});
+
+	it("is nothing for an event that does not recur or is not in the window", () => {
+		const oneOff = toCalendarEventData(
+			instance({ calendarObjectId: "obj_2" }),
+			"UTC",
+			"UTC",
+		);
+		assert.equal(
+			seriesOccurrenceOf(
+				[oneOff, ...shuffled],
+				"obj_2",
+				"2034-03-01T00:00:00Z",
+			),
+			undefined,
+		);
+		assert.equal(
+			seriesOccurrenceOf(shuffled, "obj_3", "2034-03-01T00:00:00Z"),
+			undefined,
+		);
+	});
+});
+
+describe("the day a view moves to for an event it does not hold", () => {
+	const weekly = ["06", "13", "20"].map((day) =>
+		instance({
+			recurrenceId: `2034-03-${day}T01:00:00Z`,
+			hasRecurrence: true,
+			allDay: false,
+			start: `2034-03-${day}T01:00:00+00:00`,
+			end: `2034-03-${day}T02:00:00+00:00`,
+		}),
+	);
+	const shuffled = [...weekly].reverse();
+
+	it("is the day of the next occurrence still to finish, on the device's clock", () => {
+		assert.deepEqual(
+			calendarJumpOf(
+				shuffled,
+				"obj_1",
+				"2034-03-10T00:00:00Z",
+				"America/New_York",
+			),
+			{
+				calendarObjectId: "obj_1",
+				recurrenceId: "2034-03-13T01:00:00Z",
+				calendarId: "cal_work",
+				date: "2034-03-12",
+			},
+		);
+	});
+
+	it("is the day of the first occurrence once every one has passed", () => {
+		assert.deepEqual(
+			calendarJumpOf(shuffled, "obj_1", "2035-01-01T00:00:00Z", "UTC"),
+			{
+				calendarObjectId: "obj_1",
+				recurrenceId: "2034-03-06T01:00:00Z",
+				calendarId: "cal_work",
+				date: "2034-03-06",
+			},
+		);
+	});
+
+	it("skips a cancelled occurrence", () => {
+		const [first, ...rest] = weekly;
+		if (!first) throw new Error("no first occurrence");
+		assert.equal(
+			calendarJumpOf(
+				[{ ...first, status: "Cancelled" }, ...rest],
+				"obj_1",
+				"2034-03-01T00:00:00Z",
+				"UTC",
+			)?.date,
+			"2034-03-13",
+		);
+	});
+
+	it("keeps a one-off event unaddressed by an occurrence", () => {
+		assert.deepEqual(
+			calendarJumpOf(
+				[instance({ calendarObjectId: "obj_2" })],
+				"obj_2",
+				"2034-01-01T00:00:00Z",
+				"Pacific/Pago_Pago",
+			),
+			{
+				calendarObjectId: "obj_2",
+				recurrenceId: "",
+				calendarId: "cal_work",
+				date: "2034-03-01",
+			},
+		);
+	});
+
+	it("is nothing when the series has no occurrence", () => {
+		assert.equal(
+			calendarJumpOf(shuffled, "obj_3", "2034-03-01T00:00:00Z", "UTC"),
+			undefined,
+		);
+	});
+});

package/src/hooks/calendar/instance.ts

@@ -86,6 +86,74 @@ export function readCalendarInstanceId(id: string): CalendarInstanceRef {
 	};
 }
 
+const nextOrFirst = (
+	events: readonly CalendarEventData[],
+	now: string,
+): CalendarEventData | undefined => {
+	const ordered = [...events].sort(
+		(a, b) => Date.parse(a.start) - Date.parse(b.start),
+	);
+	return (
+		ordered.find((event) => Date.parse(event.end) > Date.parse(now)) ??
+		ordered[0]
+	);
+};
+
+/**
+ * The occurrence a series opens at when the address names only the series: the
+ * next one still to finish, or the first in the window where none is left.
+ */
+export function seriesOccurrenceOf(
+	events: readonly CalendarEventData[],
+	calendarObjectId: string,
+	now: string,
+): CalendarInstanceRef | undefined {
+	const picked = nextOrFirst(
+		events.filter((event) => {
+			const ref = readCalendarInstanceId(event.id);
+			return (
+				ref.calendarObjectId === calendarObjectId && ref.recurrenceId !== ""
+			);
+		}),
+		now,
+	);
+	return picked ? readCalendarInstanceId(picked.id) : undefined;
+}
+
+export interface CalendarJump extends CalendarInstanceRef {
+	calendarId: string;
+	/** On the clock the calendar is drawn in. */
+	date: string;
+}
+
+/**
+ * Where a view has to move to show an event it does not hold: the day of its
+ * next occurrence still to finish, or of its first where none is left.
+ */
+export function calendarJumpOf(
+	instances: readonly RemitImapCalendarEventInstance[],
+	calendarObjectId: string,
+	now: string,
+	clockZone: string,
+): CalendarJump | undefined {
+	const picked = nextOrFirst(
+		instances
+			.filter(
+				(instance) =>
+					instance.calendarObjectId === calendarObjectId &&
+					isDrawnInstance(instance),
+			)
+			.map((instance) => toCalendarEventData(instance, "", clockZone)),
+		now,
+	);
+	if (!picked) return undefined;
+	return {
+		...readCalendarInstanceId(picked.id),
+		calendarId: picked.calendarId,
+		date: picked.start.slice(0, 10),
+	};
+}
+
 export function toCalendarDescriptor(
 	calendar: RemitImapCalendarResponse,
 ): CalendarDescriptor {

package/src/hooks/calendar/useCalendarJump.ts

@@ -0,0 +1,117 @@
+import {
+	calendarEventDetailOperationsGetCalendarEventOptions,
+	calendarEventOperationsListCalendarEventsOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { getErrorStatus, softErrorStatuses } from "@/lib/error-classifier";
+import { type CalendarJump, calendarJumpOf, deviceTimeZone } from "./instance";
+
+export type CalendarJumpSearch =
+	| { kind: "Idle" }
+	| { kind: "Searching" }
+	| { kind: "Found"; jump: CalendarJump }
+	| { kind: "Deleted" }
+	| { kind: "NoOccurrenceFound" }
+	| { kind: "SignedOut" }
+	| { kind: "Failed"; reason: string };
+
+const WINDOW_MS = 365 * 24 * 60 * 60_000;
+const DAY_MS = 24 * 60 * 60_000;
+
+const LISTING_META = softErrorStatuses(401);
+const RESOURCE_META = softErrorStatuses(401, 404);
+
+const instant = (ms: number): string =>
+	new Date(ms).toISOString().replace(/\.\d{3}Z$/, "+00:00");
+
+const reasonOf = (error: unknown): string => {
+	const message =
+		error instanceof Error && error.message !== ""
+			? error.message
+			: "no reason given";
+	const status = getErrorStatus(error);
+	return status === undefined ? message : `${message} (HTTP ${status})`;
+};
+
+/**
+ * Finds the day an event falls on when the view on screen does not hold it:
+ * its occurrences in the coming year first, and failing those, the year from
+ * the resource's own start — so an event that has ended opens at its first.
+ */
+export function useCalendarJump(
+	calendarObjectId: string,
+	enabled: boolean,
+): CalendarJumpSearch {
+	const [now] = useState(() => Date.now());
+	const clock = deviceTimeZone();
+	const nowIso = new Date(now).toISOString();
+
+	const ahead = useQuery({
+		...calendarEventOperationsListCalendarEventsOptions({
+			query: {
+				from: instant(now),
+				to: instant(now + WINDOW_MS),
+				calendarObjectId,
+			},
+		}),
+		meta: LISTING_META,
+		retry: false,
+		enabled,
+	});
+	const upcoming = ahead.data
+		? calendarJumpOf(ahead.data.items, calendarObjectId, nowIso, clock)
+		: undefined;
+
+	const lookup = useQuery({
+		...calendarEventDetailOperationsGetCalendarEventOptions({
+			path: { calendarObjectId },
+		}),
+		meta: RESOURCE_META,
+		retry: false,
+		enabled: enabled && ahead.data !== undefined && upcoming === undefined,
+	});
+
+	const started = Date.parse(lookup.data?.dtStart ?? "");
+	const unreadableStart = lookup.data !== undefined && Number.isNaN(started);
+	const firstFrom = Number.isNaN(started) ? 0 : started - DAY_MS;
+	const first = useQuery({
+		...calendarEventOperationsListCalendarEventsOptions({
+			query: {
+				from: instant(firstFrom),
+				to: instant(firstFrom + WINDOW_MS),
+				calendarObjectId,
+			},
+		}),
+		meta: LISTING_META,
+		retry: false,
+		enabled: enabled && lookup.data !== undefined && !unreadableStart,
+	});
+	const earliest = first.data
+		? calendarJumpOf(first.data.items, calendarObjectId, nowIso, clock)
+		: undefined;
+
+	if (!enabled) return { kind: "Idle" };
+	if (upcoming) return { kind: "Found", jump: upcoming };
+	if (earliest) return { kind: "Found", jump: earliest };
+
+	const deleted = getErrorStatus(lookup.error) === 404;
+	const failure = [
+		ahead.error,
+		deleted ? null : lookup.error,
+		first.error,
+	].find((error) => error !== null);
+	if (failure !== undefined) {
+		return getErrorStatus(failure) === 401
+			? { kind: "SignedOut" }
+			: { kind: "Failed", reason: reasonOf(failure) };
+	}
+	if (deleted) return { kind: "Deleted" };
+	if (unreadableStart)
+		return {
+			kind: "Failed",
+			reason: `the stored event names no readable start (${lookup.data?.dtStart ?? ""})`,
+		};
+	if (first.data !== undefined) return { kind: "NoOccurrenceFound" };
+	return { kind: "Searching" };
+}

package/src/lib/calendar-report.ts

@@ -9,3 +9,13 @@ export function calendarReportHref(what: string): string {
 		}),
 	);
 }
+
+/** A prefilled issue for an event the calendar could not look up. */
+export function calendarEventReportHref(what: string): string {
+	return buildGitHubIssueUrl(
+		buildBugReportContext({
+			title: `Calendar event: ${what}`,
+			errorMessage: what,
+		}),
+	);
+}

package/src/lib/calendar-route.ts

@@ -193,3 +193,5 @@ export const calendarSearchSchema = z.object({
 		.preprocess(readCalendarIds, z.array(calendarIdSchema))
 		.transform((ids) => (ids.length === 0 ? undefined : ids)),
 });
+
+export type CalendarSearch = z.infer<typeof calendarSearchSchema>;

package/src/mocks/story-frame/compose-world.ts

@@ -0,0 +1,191 @@
+import type {
+	RemitImapOutboxMessageResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	DAY,
+	HOUR,
+	type MailWorld,
+	MINUTE,
+	mailboxIdFor,
+	mailWorld,
+	outboxMessage,
+	threadRow,
+	WORK,
+} from "./mail-world";
+
+export const INBOX = mailboxIdFor(WORK, "Inbox");
+
+export const LUNCH_SUBJECT = "Lunch Thursday?";
+export const LUNCH_BODY = "Are we still on for Thursday? I can do 12:30.";
+export const LONG_SUBJECT = "Billing migration owners";
+export const TURNS_SUBJECT = "Offsite venue";
+export const SCANS_SUBJECT = "Scans";
+export const MISSPELT_DRAFT =
+	"<p>Ths report is redy today, and the notes are attachd.</p>";
+export const PLAIN_DRAFT = [
+	"Thanks, that works for me.",
+	"",
+	"| Region | Total |",
+	"| --- | --- |",
+	"| EMEA | 412 |",
+].join("\n");
+
+const longBody = [
+	"Longer context, so the pane has more message than it has room for.",
+	...Array.from(
+		{ length: 14 },
+		(_, index) =>
+			`Point ${index + 1}. The billing migration touches the export path, the dunning schedule and the invoice numbering, and each of those has a different owner today.`,
+	),
+].join("\n\n");
+
+const longDraft = [
+	"<p>That works. Before Thursday, three things I want written down:</p>",
+	...Array.from(
+		{ length: 24 },
+		(_, index) =>
+			`<p>Point ${index + 1}. Whoever owns the dunning mail after self-serve ships also owns the invoice numbering, and today those are two different people on two different rotas.</p>`,
+	),
+].join("");
+
+const conversations: RemitImapThreadMessageResponse[] = [
+	threadRow({
+		id: "lunch",
+		accountId: WORK,
+		fromName: "Ada Lovelace",
+		fromEmail: "ada@acme.example",
+		subject: LUNCH_SUBJECT,
+		snippet: LUNCH_BODY,
+		category: "personal",
+		ago: 30 * MINUTE,
+	}),
+	threadRow({
+		id: "billing",
+		accountId: WORK,
+		fromName: "Priya Raman",
+		fromEmail: "priya@acme.example",
+		subject: LONG_SUBJECT,
+		snippet:
+			"Longer context, so the pane has more message than it has room for.",
+		category: "personal",
+		ago: 3 * HOUR,
+	}),
+	threadRow({
+		id: "venue-1",
+		inThread: "venue",
+		accountId: WORK,
+		role: "Archive",
+		fromName: "Linus Berg",
+		fromEmail: "linus@acme.example",
+		subject: TURNS_SUBJECT,
+		snippet: "Two options for the offsite: the boathouse or the old mill.",
+		category: "personal",
+		ago: 3 * DAY,
+		isRead: true,
+	}),
+	threadRow({
+		id: "venue-2",
+		inThread: "venue",
+		accountId: WORK,
+		role: "Sent",
+		fromName: "Alice Tan",
+		fromEmail: "alice.tan@acme.example",
+		subject: `Re: ${TURNS_SUBJECT}`,
+		snippet: "The boathouse, if it still has the long table.",
+		category: "personal",
+		ago: 2 * DAY,
+		isRead: true,
+	}),
+	threadRow({
+		id: "venue-3",
+		inThread: "venue",
+		accountId: WORK,
+		fromName: "Linus Berg",
+		fromEmail: "linus@acme.example",
+		subject: `Re: ${TURNS_SUBJECT}`,
+		snippet: "It does. Shall I book it for the 14th?",
+		category: "personal",
+		ago: 4 * HOUR,
+	}),
+	threadRow({
+		id: "scans",
+		accountId: WORK,
+		fromName: "Office Scanner",
+		fromEmail: "scanner@acme.example",
+		subject: SCANS_SUBJECT,
+		snippet: "",
+		category: "automated",
+		ago: 5 * HOUR,
+		hasAttachment: true,
+	}),
+];
+
+const drafts: RemitImapOutboxMessageResponse[] = [
+	{
+		...outboxMessage({
+			id: "misspelt",
+			accountId: WORK,
+			to: "ada@acme.example",
+			subject: "Report",
+			body: "Ths report is redy today, and the notes are attachd.",
+			status: "draft",
+			ago: 5 * MINUTE,
+		}),
+		htmlBody: MISSPELT_DRAFT,
+	},
+	outboxMessage({
+		id: "plain",
+		accountId: WORK,
+		to: "ada@acme.example",
+		subject: "Re: Q3 planning",
+		body: PLAIN_DRAFT,
+		status: "draft",
+		ago: 6 * MINUTE,
+	}),
+	{
+		...outboxMessage({
+			id: "long-reply",
+			accountId: WORK,
+			to: "ada@acme.example",
+			subject: `Re: ${LUNCH_SUBJECT}`,
+			body: "That works.",
+			status: "draft",
+			ago: 7 * MINUTE,
+		}),
+		htmlBody: longDraft,
+	},
+];
+
+export const composeWorld = (overrides: Partial<MailWorld> = {}): MailWorld => {
+	const base = mailWorld();
+	return {
+		...base,
+		accounts: base.accounts.map((account) =>
+			account.accountId === WORK
+				? { ...account, composeLanguages: ["en", "nl", "de"] }
+				: account,
+		),
+		threads: [...base.threads, ...conversations],
+		outbox: [...base.outbox, ...drafts],
+		bodies: { "msg-billing": longBody },
+		...overrides,
+	};
+};
+
+export const withoutSmtp = (world: MailWorld): MailWorld => ({
+	...world,
+	accounts: world.accounts.map((account) => ({
+		...account,
+		smtpEnabled: false,
+	})),
+});
+
+export const messageUrl = (id: string, mailboxId: string = INBOX): string =>
+	`/mail/${mailboxId}/thread-${id}/msg-${id}`;
+
+export const threadUrl = (
+	threadId: string,
+	messageId: string,
+	mailboxId: string = INBOX,
+): string => `/mail/${mailboxId}/thread-${threadId}/msg-${messageId}`;