@remit/web-client 0.0.291 → 0.0.293

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,
+	]);
+}

package/src/lib/calendar-collection-copy.test.ts

@@ -0,0 +1,23 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { calendarUrlSegmentFor } from "./calendar-collection-copy.js";
+
+describe("calendarUrlSegmentFor", () => {
+	test("folds a name into a path segment", () => {
+		assert.strictEqual(
+			calendarUrlSegmentFor("Harbour Projects"),
+			"harbour-projects",
+		);
+	});
+
+	test("drops accents and punctuation at either end", () => {
+		assert.strictEqual(
+			calendarUrlSegmentFor("  Café & Crèche!  "),
+			"cafe-creche",
+		);
+	});
+
+	test("stays within the 64 characters the API accepts", () => {
+		assert.strictEqual(calendarUrlSegmentFor("a".repeat(80)).length, 64);
+	});
+});

package/src/lib/calendar-collection-copy.ts

@@ -0,0 +1,21 @@
+export interface CollectionConfirmCopy {
+	title: string;
+	description: string;
+}
+
+export const deleteCalendarConfirmCopy = (
+	calendarName: string,
+): CollectionConfirmCopy => ({
+	title: `Delete ${calendarName}?`,
+	description: `This removes ${calendarName} and every event in it, and any subscription address stops working. It cannot be undone.`,
+});
+
+/** A starting address for a new calendar, from the name typed so far. */
+export const calendarUrlSegmentFor = (displayName: string): string =>
+	displayName
+		.normalize("NFKD")
+		.replace(/[̀-ͯ]/g, "")
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-+|-+$/g, "")
+		.slice(0, 64);

package/src/lib/provider-presets.test.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { APP_PASSWORD_URLS, discoverSettings } from "./autodiscovery.js";
 import {
 	getPresetById,
 	PROVIDER_PRESETS,
@@ -29,12 +30,16 @@ const EXPECTED: Record<string, ExpectedSettings> = {
 		imap: { host: "imap.fastmail.com", port: 993, security: "tls" },
 		smtp: { host: "smtp.fastmail.com", port: 465, security: "tls" },
 	},
+	gmail: {
+		imap: { host: "imap.gmail.com", port: 993, security: "tls" },
+		smtp: { host: "smtp.gmail.com", port: 587, security: "starttls" },
+	},
 };
 
 describe("provider presets", () => {
-	it("exposes exactly the four documented providers", () => {
+	it("exposes exactly the five documented providers", () => {
 		const ids = PROVIDER_PRESETS.map((p) => p.id).sort();
-		assert.deepEqual(ids, ["aol", "fastmail", "icloud", "yahoo"]);
+		assert.deepEqual(ids, ["aol", "fastmail", "gmail", "icloud", "yahoo"]);
 	});
 
 	for (const preset of PROVIDER_PRESETS) {
@@ -71,6 +76,18 @@ describe("provider presets", () => {
 		assert.equal(preset.label, "iCloud");
 	});
 
+	it("tells a Gmail user to turn on 2-Step Verification before creating an app password", () => {
+		const gmail = getPresetById("gmail");
+		assert.ok(gmail);
+		const { text, url } = gmail.passwordHelp;
+		const twoStep = text.search(/2-Step Verification/);
+		const appPassword = text.search(/create an app password/i);
+		assert.ok(twoStep >= 0, "names 2-Step Verification");
+		assert.ok(appPassword > twoStep, "2-Step Verification comes first");
+		assert.equal(url, APP_PASSWORD_URLS["gmail.com"]);
+		assert.equal(url, APP_PASSWORD_URLS["googlemail.com"]);
+	});
+
 	it("returns undefined for an unknown id", () => {
 		assert.equal(getPresetById("custom"), undefined);
 	});
@@ -82,6 +99,20 @@ describe("provider presets", () => {
 			assert.equal(presetIdForEmail("carol@yahoo.com"), "yahoo");
 			assert.equal(presetIdForEmail("dave@aol.com"), "aol");
 			assert.equal(presetIdForEmail("erin@fastmail.com"), "fastmail");
+			assert.equal(presetIdForEmail("frank@gmail.com"), "gmail");
+			assert.equal(presetIdForEmail("grace@googlemail.com"), "gmail");
+		});
+
+		it("resolves a Gmail address to the preset its server lookup agrees with", async () => {
+			for (const email of ["user@gmail.com", "User@GoogleMail.com"]) {
+				const preset = getPresetById(presetIdForEmail(email));
+				assert.ok(preset, email);
+				assert.equal(preset.id, "gmail");
+				const discovered = await discoverSettings(email);
+				assert.ok(discovered, email);
+				assert.deepEqual(preset.imap, discovered.imap);
+				assert.deepEqual(preset.smtp, discovered.smtp);
+			}
 		});
 
 		it("is case-insensitive on the domain", () => {

package/src/lib/provider-presets.ts

@@ -1,4 +1,4 @@
-import type { ServerSettings } from "./autodiscovery.js";
+import { APP_PASSWORD_URLS, type ServerSettings } from "./autodiscovery.js";
 
 export interface ProviderPreset {
 	id: string;
@@ -54,6 +54,17 @@ export const PROVIDER_PRESETS: ProviderPreset[] = [
 			url: "https://www.fastmail.help/hc/en-us/articles/360058752854",
 		},
 	},
+	{
+		id: "gmail",
+		label: "Gmail",
+		username: "full-email",
+		imap: { host: "imap.gmail.com", port: 993, security: "tls" },
+		smtp: { host: "smtp.gmail.com", port: 587, security: "starttls" },
+		passwordHelp: {
+			text: "Gmail requires an app password, not your Google password. First turn on 2-Step Verification for your Google Account, then create an app password under Security → 2-Step Verification → App passwords.",
+			url: APP_PASSWORD_URLS["gmail.com"],
+		},
+	},
 ];
 
 export function getPresetById(id: string): ProviderPreset | undefined {
@@ -70,6 +81,8 @@ const DOMAIN_TO_PRESET: Record<string, string> = {
 	"aol.com": "aol",
 	"fastmail.com": "fastmail",
 	"fastmail.fm": "fastmail",
+	"gmail.com": "gmail",
+	"googlemail.com": "gmail",
 };
 
 /** Pre-select a provider preset from a known email domain; "" for Custom. */

package/src/routes/settings/calendars.tsx

@@ -1,7 +1,9 @@
 import { SettingsShell } from "@remit/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
-import { CalendarFeedPanel } from "@/components/settings/CalendarFeedPanel";
+import { CalendarCreateCard } from "@/components/settings/CalendarCreateCard";
+import { CalendarSettingsPanel } from "@/components/settings/CalendarSettingsPanel";
+import { useCalendarCollectionWrites } from "@/hooks/calendar/useCalendarCollectionWrites";
 import { useCalendars } from "@/hooks/calendar/useCalendars";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
@@ -11,6 +13,13 @@ export const Route = createFileRoute("/settings/calendars")({
 
 const calendarsHelp = (
 	<div className="space-y-3">
+		<p>
+			Each calendar has a name, a time zone its floating times are read in, and
+			an address CalDAV clients reach it by. The address is fixed when the
+			calendar is added; the name and zone can change. Deleting a calendar
+			deletes every event in it. The default calendar is where accepted
+			invitations land, so it cannot be deleted.
+		</p>
 		<p>
 			A subscription address lets Apple Calendar, Google Calendar, Outlook and
 			Thunderbird show a calendar from here, read-only and kept up to date.
@@ -31,14 +40,16 @@ const calendarsHelp = (
 function CalendarsSettings() {
 	const navigate = useNavigate();
 	const [helpOpen, setHelpOpen] = useState(true);
-	const { calendars, isLoading } = useCalendars();
+	const { calendars, timeZoneByCalendarId, isLoading } = useCalendars();
+	const { createCalendar, isWriting } = useCalendarCollectionWrites();
+	const [createProblem, setCreateProblem] = useState("");
 
 	return (
 		<SettingsShell
 			items={SETTINGS_NAV_ITEMS}
 			activeId="calendars"
 			title="Calendars"
-			description="Share a calendar with any client that can subscribe to a URL."
+			description="Add, rename and delete calendars, and share one with any client that can subscribe to a URL."
 			help={calendarsHelp}
 			helpOpen={helpOpen}
 			onToggleHelp={() => setHelpOpen((open) => !open)}
@@ -55,17 +66,28 @@ function CalendarsSettings() {
 					aria-busy="true"
 					aria-label="Loading calendars"
 				/>
-			) : calendars.length === 0 ? (
-				<p className="py-12 text-sm text-fg-muted">No calendars yet.</p>
 			) : (
 				<div className="space-y-4">
 					{calendars.map((calendar) => (
-						<CalendarFeedPanel
+						<CalendarSettingsPanel
 							key={calendar.id}
 							calendarId={calendar.id}
 							calendarName={calendar.name}
+							timezone={timeZoneByCalendarId[calendar.id] ?? ""}
 						/>
 					))}
+					<CalendarCreateCard
+						isBusy={isWriting}
+						problem={createProblem}
+						onCreate={(calendar) => {
+							setCreateProblem("");
+							return createCalendar(calendar).then((outcome) => {
+								if (outcome.kind === "written") return true;
+								setCreateProblem(outcome.message);
+								return false;
+							});
+						}}
+					/>
 				</div>
 			)}
 		</SettingsShell>