@remit/web-client 0.0.325 → 0.0.326

package/src/components/settings/AccountServices.render.test.ts

@@ -1,257 +0,0 @@
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { MICROSOFT_SERVICE_SCOPES } from "@remit/mail-oauth-service";
-import { useQuery } from "@tanstack/react-query";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { makeAccount } from "../../test-support/fixtures";
-import {
-	type HttpCall,
-	type HttpMock,
-	httpError,
-	mockFetch,
-} from "../../test-support/http";
-import { AccountServices } from "./AccountServices";
-
-const CONSENT_URL = "http://localhost/#microsoft-consent";
-const MAIL_SCOPES = [...MICROSOFT_SERVICE_SCOPES.Mail];
-const BOTH_SCOPES = [...MAIL_SCOPES, ...MICROSOFT_SERVICE_SCOPES.Calendar];
-const REFUSAL = "The mail server refused the change. Try again later.";
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http?.restore();
-	http = undefined;
-	window.location.hash = "";
-});
-
-const outlook = (
-	overrides: Partial<RemitImapAccountResponse> = {},
-): RemitImapAccountResponse =>
-	makeAccount({
-		accountId: "acc-1",
-		authType: "oauthMicrosoft",
-		syncedServices: ["Mail"],
-		grantedScopes: BOTH_SCOPES,
-		...overrides,
-	});
-
-type Patch = (call: HttpCall) => unknown;
-
-const hang: Patch = () => new Promise(() => {});
-
-const Screen = ({ onRemoveAccount }: { onRemoveAccount: () => void }) => {
-	const { data } = useQuery(configOperationsGetConfigOptions());
-	const account = data?.accounts[0];
-	if (!account) return null;
-	return createElement(AccountServices, { account, onRemoveAccount });
-};
-
-const mount = async (
-	initial: RemitImapAccountResponse,
-	patch: Patch = hang,
-	onRemoveAccount: () => void = () => {},
-): Promise<DomHarness> => {
-	let stored = initial;
-	http = mockFetch((call) => {
-		if (call.path.endsWith("/config")) return { accounts: [stored] };
-		if (call.path.endsWith("/oauth/microsoft/start")) {
-			return { authorizationUrl: CONSENT_URL };
-		}
-		if (call.method === "PATCH") {
-			const answer = patch(call);
-			if (answer !== undefined) return answer;
-			stored = { ...stored, ...call.body };
-			return stored;
-		}
-		return {};
-	});
-	const mounted = createDomHarness();
-	harness = mounted;
-	mounted.renderApp(createElement(Screen, { onRemoveAccount }));
-	await mounted.waitFor(
-		() => (http?.to("/config").length ?? 0) > 0,
-		"the account to load",
-	);
-	await mounted.wait(10);
-	return mounted;
-};
-
-const switchFor = (mounted: DomHarness, name: string): HTMLButtonElement =>
-	mounted.byLabel(`Sync ${name}`) as HTMLButtonElement;
-
-const checked = (mounted: DomHarness, name: string): string | null =>
-	switchFor(mounted, name).getAttribute("aria-checked");
-
-const press = (mounted: DomHarness, text: string): void =>
-	mounted.click(mounted.byText("button", text));
-
-const patches = (): HttpCall[] =>
-	(http?.calls ?? []).filter((call) => call.method === "PATCH");
-
-describe("AccountServices", () => {
-	it("renders no switches for an IMAP account", async () => {
-		const mounted = await mount(
-			outlook({ authType: "password", grantedScopes: [] }),
-		);
-		assert.equal(mounted.queryAll('[role="switch"]').length, 0);
-	});
-
-	it("shows each switch in the state the server holds", async () => {
-		const mounted = await mount(outlook());
-		assert.equal(checked(mounted, "mail"), "true");
-		assert.equal(checked(mounted, "calendar"), "false");
-	});
-
-	it("saves calendar on and settles on the value the server returns", async () => {
-		const mounted = await mount(outlook(), () => undefined);
-
-		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(
-			() => (http?.to("/config").length ?? 0) >= 2,
-			"the refetch after the save",
-		);
-		await mounted.flush();
-
-		assert.deepEqual(patches()[0]?.body, {
-			syncedServices: ["Mail", "Calendar"],
-		});
-		assert.equal(checked(mounted, "calendar"), "true");
-		assert.equal(switchFor(mounted, "calendar").disabled, false);
-	});
-
-	it("holds both switches still while a save is in flight", async () => {
-		const mounted = await mount(outlook());
-
-		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(
-			() => patches().length > 0 && switchFor(mounted, "calendar").disabled,
-			"the save to start",
-		);
-
-		assert.equal(checked(mounted, "calendar"), "true");
-		assert.equal(switchFor(mounted, "mail").disabled, true);
-		assert.equal(switchFor(mounted, "calendar").disabled, true);
-		mounted.click(switchFor(mounted, "mail"));
-		assert.equal(patches().length, 1);
-		assert.doesNotMatch(mounted.text(), /Stop syncing mail/);
-	});
-
-	it("states a refused calendar-on in the server's words, offers a report, and turns the switch back", async () => {
-		const mounted = await mount(outlook(), () => httpError(400, REFUSAL));
-
-		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(
-			() => mounted.text().includes(REFUSAL),
-			"the refusal to show",
-		);
-
-		assert.match(mounted.text(), /Couldn't turn calendar on/);
-		const report = mounted.byText("a", "Report an issue");
-		assert.match(
-			report.getAttribute("href") ?? "",
-			/github\.com\/.+\/issues\/new/,
-		);
-		assert.equal(checked(mounted, "calendar"), "false");
-		assert.equal(switchFor(mounted, "calendar").disabled, false);
-	});
-
-	it("asks before mail goes off and keeps mail on when the server refuses", async () => {
-		const mounted = await mount(
-			outlook({ syncedServices: ["Mail", "Calendar"] }),
-			() => httpError(400, REFUSAL),
-		);
-
-		mounted.click(switchFor(mounted, "mail"));
-		assert.match(mounted.text(), /Mail already in Remit stays/);
-		assert.equal(patches().length, 0);
-
-		press(mounted, "Stop syncing mail");
-		await mounted.waitFor(
-			() => mounted.text().includes(REFUSAL),
-			"the refusal to show",
-		);
-
-		assert.deepEqual(patches()[0]?.body, { syncedServices: ["Calendar"] });
-		assert.match(mounted.text(), /Couldn't turn mail off/);
-		assert.equal(checked(mounted, "mail"), "true");
-	});
-
-	it("clears the refusal on the next try", async () => {
-		let answer: Patch = () => httpError(400, REFUSAL);
-		const mounted = await mount(outlook(), (call) => answer(call));
-
-		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(
-			() => mounted.text().includes(REFUSAL),
-			"the refusal to show",
-		);
-
-		answer = hang;
-		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(() => patches().length === 2, "the second save");
-
-		assert.doesNotMatch(mounted.text(), /Couldn't turn calendar on/);
-	});
-
-	it("sends an ungranted calendar through the Microsoft sign-in, saying so first", async () => {
-		const mounted = await mount(outlook({ grantedScopes: MAIL_SCOPES }));
-
-		assert.match(mounted.text(), /signing in with Microsoft again/);
-		mounted.click(switchFor(mounted, "calendar"));
-		assert.match(mounted.text(), /Sign in with Microsoft to add calendar\?/);
-
-		press(mounted, "Continue to Microsoft");
-		await mounted.waitFor(
-			() => window.location.hash === "#microsoft-consent",
-			"the redirect to Microsoft",
-		);
-
-		const [start] = http?.to("/oauth/microsoft/start") ?? [];
-		assert.deepEqual(start?.body, {
-			email: "alice@example.com",
-			services: ["Mail", "Calendar"],
-		});
-		assert.equal(patches().length, 0);
-		assert.equal(switchFor(mounted, "calendar").disabled, true);
-	});
-
-	it("reflects the granted scopes once the sign-in returns", async () => {
-		const mounted = await mount(
-			outlook({ syncedServices: ["Mail", "Calendar"] }),
-		);
-		assert.equal(checked(mounted, "calendar"), "true");
-		assert.doesNotMatch(mounted.text(), /signing in with Microsoft again/);
-	});
-
-	it("leaves mail on when the question is cancelled", async () => {
-		const mounted = await mount(
-			outlook({ syncedServices: ["Mail", "Calendar"] }),
-		);
-
-		mounted.click(switchFor(mounted, "mail"));
-		press(mounted, "Cancel");
-
-		assert.equal(patches().length, 0);
-		assert.equal(checked(mounted, "mail"), "true");
-	});
-
-	it("routes switching off the last service to removing the account", async () => {
-		let removals = 0;
-		const mounted = await mount(outlook(), hang, () => {
-			removals += 1;
-		});
-
-		mounted.click(switchFor(mounted, "mail"));
-		press(mounted, "Remove account");
-
-		assert.equal(removals, 1);
-		assert.equal(patches().length, 0);
-	});
-});

package/src/components/settings/AccountServices.tsx

@@ -1,181 +0,0 @@
-import {
-	accountDetailOperationsUpdateAccountMutation,
-	configOperationsGetConfigQueryKey,
-	microsoftOAuthOperationsMicrosoftOAuthStartMutation,
-} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { microsoftServicesGranted } from "@remit/mail-oauth-service";
-import {
-	type AccountService,
-	type AccountServiceChange,
-	AccountServiceChangeDialog,
-	type AccountServiceIntent,
-	formatErrorMessage,
-} from "@remit/ui";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import {
-	REDIRECT_STALL_MESSAGE,
-	useRedirectEnded,
-} from "@/hooks/useRedirectEnded";
-import { softErrorMeta } from "@/lib/error-classifier";
-import {
-	type AccountServiceRefusal,
-	AccountServicesCard,
-} from "./AccountServicesCard";
-
-const SERVICES: AccountService[] = ["Mail", "Calendar"];
-const PROVIDER_NAME = "Microsoft";
-
-const isMicrosoft = (account: RemitImapAccountResponse): boolean =>
-	account.authType === "oauthMicrosoft";
-
-const withService = (
-	services: AccountService[],
-	service: AccountService,
-): AccountService[] =>
-	SERVICES.filter(
-		(candidate) => candidate === service || services.includes(candidate),
-	);
-
-export interface AccountServicesProps {
-	account: RemitImapAccountResponse;
-	onRemoveAccount: () => void;
-}
-
-export function AccountServices({
-	account,
-	onRemoveAccount,
-}: AccountServicesProps) {
-	const queryClient = useQueryClient();
-	const [change, setChange] = useState<AccountServiceChange | null>(null);
-	const [refusal, setRefusal] = useState<AccountServiceRefusal | null>(null);
-	const [redirecting, setRedirecting] = useState<AccountService | null>(null);
-
-	const save = useMutation({
-		...accountDetailOperationsUpdateAccountMutation(),
-		meta: softErrorMeta,
-		onSuccess: () =>
-			queryClient.invalidateQueries({
-				queryKey: configOperationsGetConfigQueryKey(),
-			}),
-	});
-
-	const consent = useMutation({
-		...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
-		meta: softErrorMeta,
-	});
-
-	const markRedirectStarted = useRedirectEnded((end) => {
-		const service = redirecting;
-		setRedirecting(null);
-		if (end !== "stalled" || service === null) return;
-		setRefusal({ service, intent: "on", message: REDIRECT_STALL_MESSAGE });
-	});
-
-	const enabled =
-		save.isPending && save.variables?.body.syncedServices
-			? save.variables.body.syncedServices
-			: account.syncedServices;
-	const offered = isMicrosoft(account) ? SERVICES : ["Mail" as const];
-	const consented = isMicrosoft(account)
-		? microsoftServicesGranted(account.grantedScopes)
-		: offered;
-
-	const commit = (
-		services: AccountService[],
-		service: AccountService,
-		intent: AccountServiceIntent,
-	) => {
-		setRefusal(null);
-		save.mutate(
-			{
-				path: { accountId: account.accountId },
-				body: { syncedServices: services },
-			},
-			{
-				onError: (error) =>
-					setRefusal({ service, intent, message: formatErrorMessage(error) }),
-			},
-		);
-	};
-
-	const startConsent = (service: AccountService) => {
-		setRefusal(null);
-		consent.mutate(
-			{
-				body: {
-					email: account.email,
-					services: withService(enabled, service),
-				},
-			},
-			{
-				onSuccess: (data) => {
-					setRedirecting(service);
-					markRedirectStarted();
-					window.location.assign(data.authorizationUrl);
-				},
-				onError: (error) =>
-					setRefusal({
-						service,
-						intent: "on",
-						message: formatErrorMessage(error),
-					}),
-			},
-		);
-	};
-
-	const requestChange = (
-		service: AccountService,
-		intent: AccountServiceIntent,
-	) => {
-		if (intent === "off") {
-			setChange({ kind: enabled.length === 1 ? "last" : "disable", service });
-			return;
-		}
-		if (!consented.includes(service)) {
-			setChange({ kind: "enable", service });
-			return;
-		}
-		commit(withService(enabled, service), service, "on");
-	};
-
-	const confirm = () => {
-		const confirmed = change;
-		setChange(null);
-		if (confirmed === null) return;
-		if (confirmed.kind === "last") {
-			onRemoveAccount();
-			return;
-		}
-		if (confirmed.kind === "enable") {
-			startConsent(confirmed.service);
-			return;
-		}
-		commit(
-			enabled.filter((service) => service !== confirmed.service),
-			confirmed.service,
-			"off",
-		);
-	};
-
-	return (
-		<>
-			<AccountServicesCard
-				providerName={PROVIDER_NAME}
-				offered={offered}
-				enabled={enabled}
-				consented={consented}
-				disabled={save.isPending || consent.isPending || redirecting !== null}
-				refusal={refusal}
-				onRequestChange={requestChange}
-			/>
-			<AccountServiceChangeDialog
-				change={change}
-				providerName={PROVIDER_NAME}
-				onConfirm={confirm}
-				onCancel={() => setChange(null)}
-			/>
-		</>
-	);
-}

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

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
-import { AccountServicesCard } from "./AccountServicesCard";
-
-const meta: Meta<typeof AccountServicesCard> = {
-	title: "Playground/Shipped/Settings/Accounts/What this account syncs",
-	component: AccountServicesCard,
-	parameters: { layout: "padded" },
-	args: {
-		providerName: "Microsoft",
-		offered: ["Mail", "Calendar"],
-		enabled: ["Mail"],
-		consented: ["Mail", "Calendar"],
-		disabled: false,
-		refusal: null,
-		onRequestChange: () => {},
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof AccountServicesCard>;
-
-export const MailOnly: Story = {};
-
-export const BothOn: Story = { args: { enabled: ["Mail", "Calendar"] } };
-
-export const CalendarNeedsSignIn: Story = {
-	args: { consented: ["Mail"] },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByText(/signing in with Microsoft again/),
-		).toBeVisible();
-	},
-};
-
-export const Saving: Story = {
-	args: { enabled: ["Mail", "Calendar"], disabled: true },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByRole("switch", { name: "Sync calendar" }),
-		).toBeDisabled();
-	},
-};
-
-export const CalendarRefused: Story = {
-	args: {
-		refusal: {
-			service: "Calendar",
-			intent: "on",
-			message:
-				"Couldn't open Microsoft's sign-in page. Check your connection, and anything blocking redirects, then try again.",
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByRole("switch", { name: "Sync calendar" }),
-		).not.toBeChecked();
-		await expect(canvas.getByText("Couldn't turn calendar on")).toBeVisible();
-		await expect(
-			canvas.getByRole("link", { name: "Report an issue" }),
-		).toBeVisible();
-	},
-};
-
-export const Dark: Story = {
-	...CalendarRefused,
-	parameters: { theme: "dark" },
-};

package/src/components/settings/AccountServicesCard.tsx

@@ -1,76 +0,0 @@
-import {
-	type AccountService,
-	type AccountServiceIntent,
-	AccountServiceToggles,
-	Banner,
-} from "@remit/ui";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-
-export interface AccountServiceRefusal {
-	service: AccountService;
-	intent: AccountServiceIntent;
-	message: string;
-}
-
-export interface AccountServicesCardProps {
-	providerName: string;
-	offered: AccountService[];
-	enabled: AccountService[];
-	consented: AccountService[];
-	disabled: boolean;
-	refusal: AccountServiceRefusal | null;
-	onRequestChange: (
-		service: AccountService,
-		intent: AccountServiceIntent,
-	) => void;
-}
-
-const refusalTitle = (refusal: AccountServiceRefusal): string =>
-	`Couldn't turn ${refusal.service.toLowerCase()} ${refusal.intent}`;
-
-const reportHref = (refusal: AccountServiceRefusal): string =>
-	buildGitHubIssueUrl(
-		buildBugReportContext({
-			title: `Bug: ${refusalTitle(refusal)}`,
-			errorMessage: `${refusalTitle(refusal)} — ${refusal.message}`,
-		}),
-	);
-
-export function AccountServicesCard({
-	providerName,
-	offered,
-	enabled,
-	consented,
-	disabled,
-	refusal,
-	onRequestChange,
-}: AccountServicesCardProps) {
-	if (offered.length < 2) return null;
-
-	return (
-		<section className="space-y-2 rounded-sm border border-line bg-surface px-row-inset py-3">
-			<AccountServiceToggles
-				providerName={providerName}
-				offered={offered}
-				enabled={enabled}
-				consented={consented}
-				disabled={disabled}
-				onRequestChange={onRequestChange}
-			/>
-			{refusal && (
-				<Banner tone="danger" variant="soft">
-					<p className="font-medium">{refusalTitle(refusal)}</p>
-					<p className="mt-0.5 break-words text-fg-muted">{refusal.message}</p>
-					<a
-						href={reportHref(refusal)}
-						target="_blank"
-						rel="noopener noreferrer"
-						className="mt-1 inline-block font-medium text-accent hover:underline"
-					>
-						Report an issue
-					</a>
-				</Banner>
-			)}
-		</section>
-	);
-}

package/src/components/settings/AdvancedNavIcon.tsx

@@ -1,23 +0,0 @@
-/**
- * The Advanced nav icon, with the update dot.
- *
- * A dot on the way to settings is the entire notification budget an available
- * update gets outside the pane — no count, no copy, no action. Everywhere else
- * stays silent.
- */
-import { AttentionDot } from "@remit/ui";
-import { Wrench } from "lucide-react";
-import { useOptionalSelfUpdate } from "@/hooks/use-system-update";
-
-export function AdvancedNavIcon() {
-	const selfUpdate = useOptionalSelfUpdate();
-	const updateAvailable =
-		selfUpdate?.surface.status === "ready" &&
-		selfUpdate.surface.section.status === "available";
-
-	return (
-		<AttentionDot label={updateAvailable ? "Update available" : undefined}>
-			<Wrench className="size-4" />
-		</AttentionDot>
-	);
-}

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

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CalendarCreateCard } from "./CalendarCreateCard";
-
-/** Settings › Calendars: adding a calendar, and the server refusing one. */
-const meta: Meta<typeof CalendarCreateCard> = {
-	title: "Playground/Shipped/Settings/Calendars/New calendar",
-	component: CalendarCreateCard,
-	parameters: { layout: "padded" },
-	args: {
-		isBusy: false,
-		problem: "",
-		onCreate: () => Promise.resolve(true),
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof CalendarCreateCard>;
-
-export const Empty: Story = {};
-
-/** The create is out. */
-export const Adding: Story = { args: { isBusy: true } };
-
-/** The address is already taken, said in the server's words. */
-export const AddressTaken: Story = {
-	args: {
-		problem:
-			'"work" already addresses a calendar on this account — pick another',
-	},
-};
-
-/** The same card on the dark theme. */
-export const Dark: Story = { parameters: { theme: "dark" } };