@remit/web-client 0.0.299 → 0.0.301

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

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

@@ -0,0 +1,363 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld, NOW } from "@/mocks/story-frame/mail-world";
+import { signedInAs } from "@/mocks/story-frame/session";
+import { makeAccount } from "@/test-support/fixtures";
+
+const accounts = [
+	makeAccount({
+		accountId: "acc-personal",
+		email: "alice.tan@gmail.example",
+		displayName: "Personal",
+		lastSyncAt: NOW,
+	}),
+	makeAccount({
+		accountId: "acc-work",
+		email: "alice@northwind.example",
+		displayName: "Work",
+		lastSyncAt: NOW,
+		lastError:
+			"AUTHENTICATIONFAILED: [ALERT] Application-specific password required",
+	}),
+	makeAccount({
+		accountId: "acc-forum",
+		email: "alice@synthcollective.example",
+		displayName: "Synthwave Forum",
+		lastSyncAt: NOW,
+		muted: { value: true, setAt: NOW },
+	}),
+];
+
+const world = mailWorld({ accounts });
+
+const meta = {
+	title: "Playground/Shipped/Settings/Accounts",
+	component: AppStory,
+	args: { url: "/settings/accounts" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const desktop = { viewport: { value: "desktop", isRotated: false } };
+const tablet = { viewport: { value: "tablet", isRotated: false } };
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const page = within(document.body);
+
+const openEditPanel = async (canvasElement: HTMLElement, index: number) => {
+	const canvas = within(canvasElement);
+	await canvas.findAllByRole("button", { name: "Manage" });
+	const manage = canvas.getAllByRole("button", { name: "Manage" })[index];
+	if (manage) await userEvent.click(manage);
+	return page.findByRole("dialog", { name: "Edit Account" });
+};
+
+export const Accounts: Story = {
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Personal")).toBeVisible();
+		await expect(canvas.getByText("3 accounts")).toBeVisible();
+		await expect(
+			canvas.getByText(/Application-specific password required/),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Reconnect" }),
+		).toBeVisible();
+		await expect(
+			canvas.getAllByRole("button", { name: "Manage" }),
+		).toHaveLength(2);
+	},
+};
+
+export const AccountsScrolling: Story = {
+	name: "Accounts — desktop, beyond the fold",
+	globals: desktop,
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					accounts: Array.from({ length: 9 }, (_, index) =>
+						makeAccount({
+							accountId: `acc-${index + 1}`,
+							email: `alice+${index + 1}@northwind.example`,
+							displayName: `Account ${index + 1}`,
+							lastSyncAt: NOW,
+						}),
+					),
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Account 9");
+		const leave = canvas.getByRole("button", {
+			name: "Delete your Remit account",
+		});
+		leave.scrollIntoView();
+		await expect(leave).toBeVisible();
+		await expect(
+			canvas.getByRole("heading", { name: "Accounts" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsMissingSyncDate: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					accounts: [
+						makeAccount({
+							accountId: "acc-personal",
+							email: "alice.tan@gmail.example",
+							displayName: "Personal",
+						}),
+					],
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText(/never synced/)).toBeVisible();
+	},
+};
+
+export const ShellPhone: Story = {
+	name: "Shell — phone",
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await expect(
+			canvas.getByRole("button", { name: "Open settings menu" }),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Back to mail" }),
+		).toBeVisible();
+	},
+};
+
+export const ShellTablet: Story = {
+	name: "Shell — tablet",
+	globals: tablet,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await expect(
+			canvas.getByRole("button", { name: "Open settings menu" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsEmpty: Story = {
+	name: "Accounts — empty",
+	parameters: {
+		msw: { handlers: mailHandlers(mailWorld({ accounts: [] })) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("No accounts configured."),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Add your first account" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsLoading: Story = {
+	name: "Accounts — loading",
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/config", () => new Promise<never>(() => undefined)),
+				...mailHandlers(world),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("status", { name: "Loading accounts" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsOauthSuccess: Story = {
+	name: "Accounts — OAuth success",
+	args: { url: "/settings/accounts?connected=acc-personal" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Account connected successfully."),
+		).toBeVisible();
+	},
+};
+
+export const AccountsOauthError: Story = {
+	name: "Accounts — OAuth error",
+	args: { url: "/settings/accounts?oauthError=consent_required" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/admin needs to approve Remit/),
+		).toBeVisible();
+	},
+};
+
+export const AccountsDeleteConfirm: Story = {
+	name: "Accounts — delete confirm",
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Work");
+		const remove = canvas.getAllByRole("button", { name: "Delete account" })[1];
+		if (remove) await userEvent.click(remove);
+		const dialog = within(
+			await page.findByRole("dialog", { name: "Delete account" }),
+		);
+		await expect(dialog.getByText("Are you sure?")).toBeVisible();
+		await expect(dialog.getByText("alice@northwind.example")).toBeVisible();
+		await expect(
+			dialog.getByRole("button", { name: "Delete account" }),
+		).toBeEnabled();
+	},
+};
+
+export const AccountEdit: Story = {
+	name: "Accounts — edit",
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const panel = within(await openEditPanel(canvasElement, 0));
+		await expect(panel.getByLabelText("Display name (optional)")).toHaveValue(
+			"Personal",
+		);
+		await expect(panel.getByLabelText("Email Address")).toHaveValue(
+			"alice.tan@gmail.example",
+		);
+	},
+};
+
+export const AccountEditClosed: Story = {
+	name: "Accounts — edit panel closed",
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Personal")).toBeVisible();
+		await expect(
+			page.queryByRole("dialog", { name: "Edit Account" }),
+		).toBeNull();
+		await expect(
+			canvas.getByRole("button", { name: "Add account" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountEditPhone: Story = {
+	name: "Accounts — edit, phone",
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const panel = await openEditPanel(canvasElement, 0);
+		await expect(panel).toBeVisible();
+		await expect(
+			within(panel).getByLabelText("Display name (optional)"),
+		).toBeVisible();
+	},
+};
+
+export const AccountEditNoDisplayName: Story = {
+	name: "Accounts — edit, no display name",
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					accounts: [
+						makeAccount({
+							accountId: "acc-personal",
+							email: "alice.tan@gmail.example",
+							lastSyncAt: NOW,
+						}),
+					],
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Alice Tan")).toBeVisible();
+		const panel = within(await openEditPanel(canvasElement, 0));
+		const field = panel.getByLabelText("Display name (optional)");
+		await expect(field).toHaveValue("");
+		await expect(field).toHaveAttribute("placeholder", "Alice");
+	},
+};
+
+export const DangerZone: Story = {
+	name: "Danger zone",
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await expect(
+			canvas.getByText(/erases Remit's copy of your mail/),
+		).toBeInTheDocument();
+		await expect(
+			canvas.getByRole("button", { name: "Delete your Remit account" }),
+		).toBeInTheDocument();
+	},
+};
+
+export const DangerZoneConfirm: Story = {
+	name: "Danger zone — confirm dialog",
+	args: { authProvider: signedInAs("alice.tan@gmail.example") },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Delete your Remit account" }),
+		);
+		const dialog = within(
+			await page.findByRole("dialog", { name: "Delete your Remit account" }),
+		);
+		await expect(dialog.getByText("alice.tan@gmail.example")).toBeVisible();
+		await userEvent.type(
+			dialog.getByLabelText(/to confirm/),
+			"someone@else.example",
+		);
+		await userEvent.click(
+			dialog.getByRole("button", { name: "Delete everything" }),
+		);
+		await waitFor(() =>
+			expect(dialog.getByRole("alert")).toHaveTextContent(
+				"That doesn't match your account email",
+			),
+		);
+	},
+};
+
+export const AccountsUnreadable: Story = {
+	name: "Accounts — unreadable",
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/config", () => HttpResponse.error()),
+				...mailHandlers(world),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Couldn't load accounts"),
+		).toBeVisible();
+	},
+};