@remit/web-client 0.0.300 → 0.0.301

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

@@ -0,0 +1,254 @@
+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, "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

@@ -0,0 +1,181 @@
+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,
+} from "@remit/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,76 @@
+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>
+	);
+}