@remit/web-client 0.0.304 → 0.0.306

package/src/components/settings/CalendarSubscribeCard.tsx

@@ -0,0 +1,115 @@
+/**
+ * Settings › Calendars: subscribe a new calendar to a read-only iCalendar
+ * address (issue #1261).
+ *
+ * Presentational. The server reads the feed before it creates anything, so a
+ * refusal here means nothing was added, and the banner says so in those words.
+ */
+import {
+	Banner,
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardTitle,
+	Input,
+} from "@remit/ui";
+import { CalendarPlus } from "lucide-react";
+import { type FormEvent, useId, useState } from "react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+
+export interface CalendarSubscribeCardProps {
+	isBusy: boolean;
+	/** The subscribe the server turned down. */
+	error: unknown;
+	onSubscribe: (
+		request: { displayName: string; url: string },
+		onDone: () => void,
+	) => void;
+}
+
+export const SUBSCRIBE_TITLE = "Subscribe to a calendar";
+
+export function CalendarSubscribeCard({
+	isBusy,
+	error,
+	onSubscribe,
+}: CalendarSubscribeCardProps) {
+	const titleId = useId();
+	const nameId = useId();
+	const urlId = useId();
+	const [displayName, setDisplayName] = useState("");
+	const [url, setUrl] = useState("");
+	const ready = displayName.trim() !== "" && url.trim() !== "";
+
+	const submit = (event: FormEvent) => {
+		event.preventDefault();
+		if (!ready) return;
+		onSubscribe({ displayName, url }, () => {
+			setDisplayName("");
+			setUrl("");
+		});
+	};
+
+	return (
+		<Card className="max-w-xl" role="region" aria-labelledby={titleId}>
+			<CardHeader>
+				<CardTitle id={titleId}>{SUBSCRIBE_TITLE}</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<form className="space-y-3" onSubmit={submit}>
+					<p className="text-sm text-fg-muted">
+						Paste the secret iCal address from Google Calendar, a published
+						Outlook calendar or any other feed. It shows here read-only and
+						refreshes on its own.
+					</p>
+					<div className="space-y-1">
+						<label htmlFor={nameId} className="text-sm font-medium text-fg">
+							Calendar name
+						</label>
+						<Input
+							id={nameId}
+							value={displayName}
+							onChange={(event) => setDisplayName(event.target.value)}
+							placeholder="Team rota"
+							autoComplete="off"
+						/>
+					</div>
+					<div className="space-y-1">
+						<label htmlFor={urlId} className="text-sm font-medium text-fg">
+							Calendar address
+						</label>
+						<Input
+							id={urlId}
+							value={url}
+							onChange={(event) => setUrl(event.target.value)}
+							placeholder="https://calendar.google.com/calendar/ical/…/basic.ics"
+							autoComplete="off"
+							spellCheck={false}
+							inputMode="url"
+						/>
+						<p className="text-xs text-fg-muted">
+							For Google Calendar the address is the password to the calendar.
+							Reader never shows it in full again.
+						</p>
+					</div>
+					<Button
+						type="submit"
+						variant="primary"
+						size="sm"
+						disabled={!ready || isBusy}
+						icon={<CalendarPlus className="size-3.5" />}
+					>
+						{isBusy ? "Subscribing…" : "Subscribe"}
+					</Button>
+					{error !== undefined && error !== null && (
+						<Banner tone="danger" variant="soft">
+							<p className="font-medium">The calendar was not added.</p>
+							<p className="mt-0.5 break-words">{formatErrorMessage(error)}</p>
+						</Banner>
+					)}
+				</form>
+			</CardBody>
+		</Card>
+	);
+}

package/src/components/settings/CalendarSubscriptionStatus.stories.tsx

@@ -0,0 +1,77 @@
+import { Card, CardBody } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { CalendarSubscriptionStatus } from "./CalendarSubscriptionStatus";
+
+/**
+ * Settings › Calendars: a calendar subscribed to a feed (#1261). The address is
+ * never drawn in full, since for Google it is the whole credential; its host
+ * is enough to recognise it.
+ */
+const meta: Meta<typeof CalendarSubscriptionStatus> = {
+	title: "Playground/Shipped/Settings/Calendars/Subscribed calendar",
+	component: CalendarSubscriptionStatus,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<Card className="max-w-xl">
+				<CardBody>
+					<Story />
+				</CardBody>
+			</Card>
+		),
+	],
+	args: {
+		calendarName: "Harbour rota",
+		subscriptionUrl:
+			"https://calendar.google.com/calendar/ical/harbour%40example.com/private-5f1c0ffee/basic.ics",
+		enabled: true,
+		fetchedAt: Date.parse("2026-09-25T08:15:00Z"),
+		error: "",
+		isBusy: false,
+		actionError: undefined,
+		onSetEnabled: fn(),
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarSubscriptionStatus>;
+
+/** Refreshing on schedule. Only the host is named. */
+export const Live: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			canvas.getByText(/Read-only, from calendar\.google\.com/),
+		).toBeVisible();
+		await expect(canvasElement.textContent).not.toContain("private-5f1c0ffee");
+	},
+};
+
+/** The last refresh failed. The events already stored stay. */
+export const Failing: Story = {
+	args: { error: "the feed answered HTTP 404" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("alert")).toHaveTextContent(
+			"the feed answered HTTP 404",
+		);
+	},
+};
+
+/** Updates paused. Nothing was removed. */
+export const Paused: Story = {
+	args: { enabled: false },
+};
+
+/** Paused, on the dark theme. */
+export const PausedDark: Story = {
+	name: "Paused (dark)",
+	parameters: { theme: "dark" },
+	args: { enabled: false, error: "the feed answered HTTP 410" },
+};
+
+/** Never fetched successfully yet. */
+export const NeverFetched: Story = {
+	args: { fetchedAt: 0 },
+};

package/src/components/settings/CalendarSubscriptionStatus.tsx

@@ -0,0 +1,88 @@
+/**
+ * Settings › Calendars: where a subscribed calendar comes from, when it was
+ * last read, why it was not, and the switch that stops its refresh
+ * (issue #1261).
+ *
+ * The address itself is not drawn. For a Google feed it is the whole
+ * credential, so only its host is named.
+ */
+import { Badge, Banner, Button } from "@remit/ui";
+import { Pause, Play } from "lucide-react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { subscriptionHostOf } from "@/lib/calendar-subscription";
+import { formatDatePreset } from "@/lib/format";
+
+export interface CalendarSubscriptionStatusProps {
+	calendarName: string;
+	subscriptionUrl: string;
+	enabled: boolean;
+	fetchedAt: number;
+	error: string;
+	isBusy: boolean;
+	/** A pause or resume the server turned down. */
+	actionError: unknown;
+	onSetEnabled: (enabled: boolean) => void;
+}
+
+export function CalendarSubscriptionStatus({
+	calendarName,
+	subscriptionUrl,
+	enabled,
+	fetchedAt,
+	error,
+	isBusy,
+	actionError,
+	onSetEnabled,
+}: CalendarSubscriptionStatusProps) {
+	return (
+		<div className="mb-4 space-y-2">
+			<div className="flex flex-wrap items-center gap-2">
+				<Badge tone={enabled ? "positive" : "neutral"}>
+					{enabled ? "subscribed" : "paused"}
+				</Badge>
+				<span className="text-xs text-fg-muted">
+					Read-only, from {subscriptionHostOf(subscriptionUrl)}
+					{fetchedAt > 0
+						? `. Last updated ${formatDatePreset(fetchedAt, "medium")}`
+						: ""}
+				</span>
+			</div>
+			{error !== "" && (
+				<Banner tone="warning" variant="soft">
+					<p className="font-medium">{calendarName} was not refreshed.</p>
+					<p className="mt-0.5 break-words">{error}</p>
+				</Banner>
+			)}
+			<p className="text-sm text-fg-muted">
+				{enabled
+					? "Events are read from the feed on a schedule and cannot be edited here."
+					: "Updates are paused. The events already here stay until you resume or remove the calendar."}
+			</p>
+			<Button
+				variant="secondary"
+				size="sm"
+				disabled={isBusy}
+				icon={
+					enabled ? (
+						<Pause className="size-3.5" />
+					) : (
+						<Play className="size-3.5" />
+					)
+				}
+				onClick={() => onSetEnabled(!enabled)}
+			>
+				{enabled ? "Pause updates" : "Resume updates"}
+			</Button>
+			{actionError !== undefined && actionError !== null && (
+				<Banner tone="danger" variant="soft">
+					<p className="font-medium">
+						Updates for {calendarName} were not changed.
+					</p>
+					<p className="mt-0.5 break-words">
+						{formatErrorMessage(actionError)}
+					</p>
+				</Banner>
+			)}
+		</div>
+	);
+}

package/src/components/settings/accounts.stories.tsx

@@ -199,6 +199,11 @@ export const AccountsOauthSuccess: Story = {
 	args: { url: "/settings/accounts?connected=acc-personal" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
+		await expect(await canvas.findByText(/^Connected /)).toBeVisible();
+		await expect(canvas.getByText(/Access granted/)).toBeVisible();
+		await userEvent.click(
+			canvas.getByRole("button", { name: /Go to inbox|Continue/ }),
+		);
 		await expect(
 			await canvas.findByText("Account connected successfully."),
 		).toBeVisible();

package/src/hooks/calendar/instance.ts

@@ -163,6 +163,13 @@ export function toCalendarDescriptor(
 		accountLabel: "",
 		name: calendar.displayName,
 		color: COLORS[calendar.color] ?? "cal-1",
+		...(calendar.source === "Subscribed"
+			? {
+					readOnly: true,
+					sync: calendar.subscriptionEnabled ? "live" : "paused",
+					syncError: calendar.subscriptionError,
+				}
+			: {}),
 	};
 }
 

package/src/hooks/calendar/useCalendarSubscriptions.ts

@@ -0,0 +1,103 @@
+/**
+ * Subscribing a new calendar to a read-only iCalendar URL, and turning an
+ * existing subscription's refresh off and on (issue #1261).
+ *
+ * The server fetches the feed before it creates anything, so a refused
+ * subscribe leaves no calendar behind and its reason is what the form states.
+ * A 401 is not among the statuses owned here: a lapsed session escalates the
+ * way it does everywhere else.
+ */
+import {
+	calendarDetailOperationsUpdateCalendarMutation,
+	calendarOperationsCreateCalendarMutation,
+	calendarOperationsListCalendarsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { softErrorStatuses } from "@/lib/error-classifier";
+import { useInvalidateCalendarReads } from "./useCalendarWrites";
+
+const SUBSCRIPTION_WRITE_META = softErrorStatuses(400, 404);
+
+export interface CalendarSubscribeRequest {
+	displayName: string;
+	url: string;
+}
+
+export interface CalendarSubscriptionControls {
+	subscribe: (request: CalendarSubscribeRequest, onDone: () => void) => void;
+	isSubscribing: boolean;
+	subscribeError: unknown;
+	setEnabled: (calendarId: string, enabled: boolean) => void;
+	togglingCalendarId: string;
+	/** The last pause or resume the server turned down, and whose it was. */
+	toggleFailure: { calendarId: string; error: unknown };
+}
+
+const urlSegmentFor = (): string =>
+	`subscribed-${crypto.randomUUID().slice(0, 8)}`;
+
+export function useCalendarSubscriptions(): CalendarSubscriptionControls {
+	const queryClient = useQueryClient();
+	const invalidateReads = useInvalidateCalendarReads();
+	const invalidate = () => {
+		void queryClient.invalidateQueries({
+			queryKey: calendarOperationsListCalendarsQueryKey(),
+		});
+		invalidateReads();
+	};
+
+	const create = useMutation({
+		...calendarOperationsCreateCalendarMutation(),
+		meta: SUBSCRIPTION_WRITE_META,
+		onSuccess: invalidate,
+	});
+
+	const toggle = useMutation({
+		...calendarDetailOperationsUpdateCalendarMutation(),
+		meta: SUBSCRIPTION_WRITE_META,
+		onSuccess: invalidate,
+	});
+
+	const { mutate: createCalendar } = create;
+	const subscribe = useCallback(
+		(request: CalendarSubscribeRequest, onDone: () => void) => {
+			createCalendar(
+				{
+					body: {
+						urlSegment: urlSegmentFor(),
+						displayName: request.displayName.trim(),
+						subscriptionUrl: request.url.trim(),
+					},
+				},
+				{ onSuccess: onDone },
+			);
+		},
+		[createCalendar],
+	);
+
+	const { mutate: updateCalendar } = toggle;
+	const setEnabled = useCallback(
+		(calendarId: string, enabled: boolean) => {
+			updateCalendar({
+				path: { calendarId },
+				body: { subscriptionEnabled: enabled },
+			});
+		},
+		[updateCalendar],
+	);
+
+	return {
+		subscribe,
+		isSubscribing: create.isPending,
+		subscribeError: create.error,
+		setEnabled,
+		togglingCalendarId: toggle.isPending
+			? (toggle.variables?.path.calendarId ?? "")
+			: "",
+		toggleFailure: {
+			calendarId: toggle.variables?.path.calendarId ?? "",
+			error: toggle.error,
+		},
+	};
+}

package/src/hooks/calendar/useCalendars.ts

@@ -8,6 +8,7 @@
  * indistinguishable from a week with nothing in it.
  */
 import { calendarOperationsListCalendarsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapCalendarResponse } from "@remit/api-http-client/types.gen.ts";
 import type { CalendarColorId, CalendarDescriptor } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -15,6 +16,8 @@ import { toCalendarDescriptor } from "./instance";
 
 export interface CalendarsResult {
 	calendars: CalendarDescriptor[];
+	/** The collections as the API returned them, for a surface that manages them. */
+	collections: RemitImapCalendarResponse[];
 	colorByCalendarId: Record<string, CalendarColorId>;
 	/** The zone each collection's floating times are read in. */
 	timeZoneByCalendarId: Record<string, string>;
@@ -39,6 +42,7 @@ export function useCalendars(): CalendarsResult {
 		const calendars = items.map(toCalendarDescriptor);
 		return {
 			calendars,
+			collections: items,
 			colorByCalendarId: Object.fromEntries(
 				calendars.map((calendar) => [calendar.id, calendar.color]),
 			),

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

@@ -57,6 +57,11 @@ const calendars = [
 		source: "Default",
 		timezone: "Europe/Amsterdam",
 		syncSequence: 1,
+		subscriptionUrl: "",
+		subscriptionEnabled: false,
+		subscriptionCheckedAt: 0,
+		subscriptionFetchedAt: 0,
+		subscriptionError: "",
 		createdAt: 0,
 		updatedAt: 0,
 	},

package/src/lib/calendar-subscription.ts

@@ -0,0 +1,11 @@
+/**
+ * Where a subscribed calendar's events come from, named by host alone. For a
+ * Google feed the full address is the credential, so no surface draws it.
+ */
+export const subscriptionHostOf = (subscriptionUrl: string): string =>
+	URL.canParse(subscriptionUrl)
+		? new URL(subscriptionUrl).host
+		: "an iCalendar feed";
+
+export const subscriptionReadOnlyNote = (subscriptionUrl: string): string =>
+	`Read-only: from ${subscriptionHostOf(subscriptionUrl)}. Change it where the feed comes from.`;

package/src/routes/settings/-accounts.test.ts

@@ -144,7 +144,9 @@ const pageShow = (persisted: boolean): Event => {
 };
 
 /** The real route, mounted the way the generated tree mounts it. */
-const mountAccounts = async (): Promise<DomHarness> => {
+const mountAccounts = async (
+	entry = "/settings/accounts",
+): Promise<DomHarness> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/oauth/microsoft/start")) {
 			return { authorizationUrl: CONSENT_URL };
@@ -168,7 +170,7 @@ const mountAccounts = async (): Promise<DomHarness> => {
 	]) as unknown as AnyRoute;
 	const router = createRouter({
 		routeTree,
-		history: createMemoryHistory({ initialEntries: ["/settings/accounts"] }),
+		history: createMemoryHistory({ initialEntries: [entry] }),
 	}) as unknown as AnyRouter;
 	await router.load();
 
@@ -275,3 +277,69 @@ describe("the Reconnect button and the redirect it starts", () => {
 		assert.ok(dom.byText("button", "Reconnect"));
 	});
 });
+
+describe("the Microsoft callback landing on the accounts page (#1183)", () => {
+	afterEach(() => {
+		harness?.close();
+		harness = undefined;
+		http?.restore();
+		http = undefined;
+	});
+
+	test("a reconnect that comes back connected ends on the granted screen", async () => {
+		const dom = await mountAccounts("/settings/accounts?connected=acc-1");
+		await dom.waitFor(
+			() => dom.text().includes("Connected matthijs@ischen.nl"),
+			"the granted screen",
+		);
+
+		assert.match(dom.text(), /Access granted/);
+		dom.click(dom.byText("button", "Go to inbox"));
+		await settle(dom);
+		assert.match(dom.text(), /Account connected successfully\./);
+	});
+
+	test("a reconnect Microsoft refused a service reopens that account, address filled", async () => {
+		const dom = await mountAccounts(
+			"/settings/accounts?oauthError=scope_not_granted&oauthEmail=matthijs%40ischen.nl&missingServices=Calendar",
+		);
+		await dom.waitFor(
+			() => dom.text().includes("Reconnect matthijs@ischen.nl"),
+			"the reconnect sign-in",
+		);
+
+		assert.match(dom.text(), /Microsoft did not grant access to Calendar\./);
+		assert.equal(
+			dom.query<HTMLInputElement>("#microsoft-email")?.value,
+			"matthijs@ischen.nl",
+		);
+		const choice = dom
+			.queryAll("fieldset")
+			.find((fieldset) =>
+				fieldset.textContent?.includes("What should Remit sync?"),
+			);
+		assert.ok(choice, "expected the service choice");
+		assert.deepEqual(
+			[
+				...choice.querySelectorAll<HTMLInputElement>("input[type=checkbox]"),
+			].map((box) => box.checked),
+			[true, true],
+		);
+	});
+
+	test("a new sign-in Microsoft refused a service reopens the add wizard", async () => {
+		const dom = await mountAccounts(
+			"/settings/accounts?oauthError=scope_not_granted&oauthEmail=new%40outlook.com&missingServices=Mail%2CCalendar",
+		);
+		await dom.waitFor(
+			() => dom.text().includes("did not grant access to Mail and Calendar"),
+			"the refused sign-in",
+		);
+
+		assert.doesNotMatch(dom.text(), /Reconnect new@outlook\.com/);
+		assert.equal(
+			dom.query<HTMLInputElement>("#microsoft-email")?.value,
+			"new@outlook.com",
+		);
+	});
+});