@remit/web-client 0.0.325 → 0.0.326

package/src/routes/settings/accounts.tsx

@@ -1,692 +0,0 @@
-import {
-	accountDetailOperationsDeleteAccountMutation,
-	configOperationsGetConfigOptions,
-	configOperationsGetConfigQueryKey,
-	microsoftOAuthOperationsMicrosoftOAuthStartMutation,
-} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	ACCOUNT_SERVICE_ROWS,
-	AccountHealthCard,
-	Badge,
-	Banner,
-	Button,
-	Dialog,
-	ErrorState,
-	type RowAction,
-	RowActions,
-	SettingsShell,
-} from "@remit/ui";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { AlertTriangle, Loader2, Plus, Trash2, X } from "lucide-react";
-import { useEffect, useState } from "react";
-import { z } from "zod";
-import {
-	type MicrosoftReturn,
-	OnboardingWizard,
-} from "@/components/onboarding/OnboardingWizard";
-import { AccountFormPanel } from "@/components/settings/AccountFormPanel";
-import { AccountServices } from "@/components/settings/AccountServices";
-import { DangerZone } from "@/components/settings/DangerZone";
-import {
-	REDIRECT_STALL_MESSAGE,
-	useRedirectEnded,
-} from "@/hooks/useRedirectEnded";
-import { useReturnFromRedirect } from "@/hooks/useReturnFromRedirect";
-import { formatRelativeTime } from "@/lib/format";
-import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
-import { accountsHelp } from "./-shared/help-copy";
-
-const accountsSearchSchema = z.object({
-	editAccountId: z.string().optional(),
-	focusSmtp: z.boolean().optional(),
-	/** Set by the backend redirect after a successful OAuth callback */
-	connected: z.string().optional(),
-	/** Set by the backend redirect when the OAuth flow fails */
-	oauthError: z.string().optional(),
-	oauthEmail: z.string().optional(),
-	missingServices: z.string().optional(),
-});
-
-export const Route = createFileRoute("/settings/accounts")({
-	component: AccountsSettings,
-	validateSearch: accountsSearchSchema,
-});
-
-/* ------------------------------------------------------------------ */
-/* Helpers                                                            */
-/* ------------------------------------------------------------------ */
-
-/**
- * Map an OAuth error code from the `?oauthError` query param to a
- * human-readable message shown to the user.
- *
- * Exported for unit tests.
- */
-export function mapOauthError(code: string): string {
-	const lower = code.toLowerCase();
-
-	if (lower === "access_denied") {
-		return "You cancelled the sign-in.";
-	}
-
-	if (lower === "scope_not_granted") {
-		return "Microsoft did not grant access to every service you picked. Sign in again and accept each permission Microsoft asks for.";
-	}
-
-	if (
-		lower === "consent_required" ||
-		lower.includes("admin_consent") ||
-		lower.includes("interaction_required")
-	) {
-		return "Your organisation's admin needs to approve Remit. Ask your IT admin to grant the required permissions.";
-	}
-
-	// IMAP disabled hint — the backend surfaces this when XOAUTH2 login
-	// fails because IMAP is not enabled in the Microsoft 365 tenant settings.
-	if (lower.includes("imap_disabled") || lower.includes("imap disabled")) {
-		return "IMAP is disabled for this account. Ask your admin to enable IMAP access in the Microsoft 365 admin centre.";
-	}
-
-	return `Sign-in failed: ${code}. Please try again.`;
-}
-
-const joinServices = (labels: string[]): string =>
-	labels.length > 1
-		? `${labels.slice(0, -1).join(", ")} and ${labels[labels.length - 1]}`
-		: (labels[0] ?? "");
-
-export function scopeRefusalReturn(
-	refusal: { oauthEmail?: string; missingServices?: string },
-	accounts: Pick<
-		RemitImapAccountResponse,
-		"email" | "authType" | "syncedServices"
-	>[],
-): MicrosoftReturn {
-	const named = (refusal.missingServices ?? "").split(",");
-	const missing = ACCOUNT_SERVICE_ROWS.filter((row) => named.includes(row.id));
-	const email = refusal.oauthEmail;
-	const existing = email
-		? accounts.find(
-				(account) =>
-					account.authType === "oauthMicrosoft" &&
-					account.email.toLowerCase() === email.toLowerCase(),
-			)
-		: undefined;
-	const labels = joinServices(missing.map((row) => row.label));
-	const message =
-		missing.length === 0
-			? mapOauthError("scope_not_granted")
-			: `Microsoft did not grant access to ${labels}. Sign in again and accept the ${labels} ${missing.length > 1 ? "permissions" : "permission"} when Microsoft asks.`;
-	const services = existing
-		? ACCOUNT_SERVICE_ROWS.filter(
-				(row) =>
-					existing.syncedServices.includes(row.id) ||
-					missing.some((service) => service.id === row.id),
-			).map((row) => row.id)
-		: undefined;
-	return { kind: "refused", message, email, services, reconnect: !!existing };
-}
-
-/**
- * Derive a friendly primary label from the email's local part so
- * AccountHealthCard doesn't print the same address twice (label primary, email
- * secondary). Falls back to the full email if the local part is empty.
- */
-function deriveLabel(email: string): string {
-	const local = email.split("@")[0] ?? "";
-	if (!local) return email;
-	return local
-		.split(/[._-]+/)
-		.filter(Boolean)
-		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-		.join(" ");
-}
-
-/**
- * The user-chosen display name when set, otherwise a label derived from the
- * email address.
- */
-function accountLabel(account: RemitImapAccountResponse): string {
-	const name = account.displayName?.trim();
-	if (name) return name;
-	return deriveLabel(account.email);
-}
-
-function deriveSyncLabel(account: RemitImapAccountResponse): string {
-	if (!account.lastSyncAt) return "never synced";
-	const relative = formatRelativeTime(account.lastSyncAt);
-	return relative ? `synced ${relative}` : "never synced";
-}
-
-function deriveState(
-	account: RemitImapAccountResponse,
-): "healthy" | "error" | "muted" {
-	if (account.muted?.value) return "muted";
-	if (account.lastError) return "error";
-	if (account.connectionState === "authenticated") return "healthy";
-	return "error";
-}
-
-/** True when the account needs re-authentication via the OAuth flow. */
-function needsReauth(account: RemitImapAccountResponse): boolean {
-	return account.connectionState === "reauth_required";
-}
-
-/**
- * The account arrived from a config file, which never carries a password, so it
- * has none yet (#1021). It cannot sync until someone enters one, and the import
- * wizard's "Finish later" leaves exactly these rows behind — so this screen has
- * to offer the same way in, or the account is stranded with a red dot and no
- * control that fixes it.
- */
-function needsPassword(account: RemitImapAccountResponse): boolean {
-	return account.connectionState === "credentials_missing";
-}
-
-/* ------------------------------------------------------------------ */
-/* Loading skeleton                                                   */
-/* ------------------------------------------------------------------ */
-
-const LoadingSkeleton = () => (
-	// biome-ignore lint/a11y/useSemanticElements: <div> with role="status" preserves block layout; <output> is inline
-	<div
-		className="space-y-3"
-		role="status"
-		aria-busy="true"
-		aria-label="Loading accounts"
-	>
-		{(["skeleton-0", "skeleton-1"] as const).map((key) => (
-			<div
-				key={key}
-				className="rounded-sm border border-line bg-surface animate-pulse p-4"
-			>
-				<div className="flex items-center gap-3">
-					<div className="size-10 rounded-full bg-surface-sunken" />
-					<div className="flex-1 space-y-2">
-						<div className="h-4 bg-surface-sunken rounded w-1/3" />
-						<div className="h-3 bg-surface-sunken rounded w-2/3" />
-					</div>
-				</div>
-			</div>
-		))}
-	</div>
-);
-
-/* ------------------------------------------------------------------ */
-/* Page component                                                     */
-/* ------------------------------------------------------------------ */
-
-function AccountsSettings() {
-	const search = Route.useSearch();
-	const navigate = useNavigate({ from: Route.fullPath });
-	const [helpOpen, setHelpOpen] = useState(true);
-
-	const [showForm, setShowForm] = useState(false);
-	const [showAddWizard, setShowAddWizard] = useState(false);
-	const [microsoftReturn, setMicrosoftReturn] = useState<
-		MicrosoftReturn | undefined
-	>(undefined);
-	const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
-	const [focusSmtp, setFocusSmtp] = useState(false);
-	const [deletingAccountId, setDeletingAccountId] = useState<string | null>(
-		null,
-	);
-	/** Success message shown after a successful OAuth callback */
-	const [successMessage, setSuccessMessage] = useState<string | null>(null);
-	/** Error message shown when the OAuth flow returned an error */
-	const [oauthErrorMessage, setOauthErrorMessage] = useState<string | null>(
-		null,
-	);
-	/** Which account is currently being reconnected via OAuth */
-	const [reconnectingAccountId, setReconnectingAccountId] = useState<
-		string | null
-	>(null);
-
-	const queryClient = useQueryClient();
-
-	const {
-		data: config,
-		isPending,
-		isError,
-		error,
-		refetch,
-	} = useQuery(configOperationsGetConfigOptions());
-
-	// Handle ?editAccountId deep-link
-	useEffect(() => {
-		if (!search.editAccountId) return;
-		setEditingAccountId(search.editAccountId);
-		setFocusSmtp(!!search.focusSmtp);
-		navigate({
-			search: {
-				editAccountId: undefined,
-				focusSmtp: undefined,
-				connected: search.connected,
-				oauthError: search.oauthError,
-				oauthEmail: search.oauthEmail,
-				missingServices: search.missingServices,
-			},
-			replace: true,
-		});
-	}, [
-		search.editAccountId,
-		search.focusSmtp,
-		navigate,
-		search.connected,
-		search.oauthError,
-		search.oauthEmail,
-		search.missingServices,
-	]);
-
-	// Handle ?connected — show what Microsoft granted, clear param
-	useEffect(() => {
-		if (!search.connected) return;
-		setMicrosoftReturn({ kind: "connected", accountId: search.connected });
-		setShowAddWizard(true);
-		queryClient.invalidateQueries({
-			queryKey: configOperationsGetConfigQueryKey(),
-		});
-		navigate({
-			search: {
-				connected: undefined,
-				oauthError: undefined,
-				editAccountId: undefined,
-				focusSmtp: undefined,
-			},
-			replace: true,
-		});
-	}, [search.connected, navigate, queryClient]);
-
-	// Handle ?oauthError — show human-readable error, clear param
-	useEffect(() => {
-		if (!search.oauthError) return;
-		const refusedScope = search.oauthError === "scope_not_granted";
-		if (refusedScope && !config && !isError) return;
-		setReconnectingAccountId(null);
-		if (refusedScope) {
-			setMicrosoftReturn(
-				scopeRefusalReturn(
-					{
-						oauthEmail: search.oauthEmail,
-						missingServices: search.missingServices,
-					},
-					config?.accounts ?? [],
-				),
-			);
-			setShowAddWizard(true);
-		} else {
-			setOauthErrorMessage(mapOauthError(search.oauthError));
-		}
-		navigate({
-			search: {
-				oauthError: undefined,
-				connected: undefined,
-				editAccountId: undefined,
-				focusSmtp: undefined,
-			},
-			replace: true,
-		});
-	}, [
-		search.oauthError,
-		search.oauthEmail,
-		search.missingServices,
-		config,
-		isError,
-		navigate,
-	]);
-
-	// Microsoft may hand the finished sign-in back to a different window than the
-	// one that started it, so a reconnect can complete without this page ever
-	// seeing the callback. Once one has been sent off, every look at this window
-	// re-reads the accounts, and the card states what the server says rather
-	// than what this window last saw.
-	useReturnFromRedirect(reconnectingAccountId !== null, () => {
-		queryClient.invalidateQueries({
-			queryKey: configOperationsGetConfigQueryKey(),
-		});
-	});
-
-	// The account no longer asking to be re-authenticated is the reconnect
-	// landing, wherever it was finished, and that is what the watch above was
-	// waiting for. A muted or otherwise unhealthy account still counts: the
-	// reconnect answered, whatever else is true of the account.
-	// An account that has left the config entirely ends it too: there is nothing
-	// left to reconnect and nothing left to watch for.
-	useEffect(() => {
-		if (!reconnectingAccountId || !config) return;
-		const account = config.accounts.find(
-			(candidate) => candidate.accountId === reconnectingAccountId,
-		);
-		if (!account || !needsReauth(account)) setReconnectingAccountId(null);
-	}, [config, reconnectingAccountId]);
-
-	// A redirect that ends without the reconnect landing — Back out of the
-	// consent screen, or an `assign` that never navigates — leaves an account
-	// that still asks to be re-authenticated, so the watch above has nothing to
-	// clear the latch on and the button would read "Redirecting…" for good. This
-	// window being back is the evidence the redirect is over, whatever it
-	// decided, and the control it left behind is live again. A redirect that
-	// never took the window has no such evidence coming, so the stall says so
-	// rather than handing back a button that looks like nothing happened.
-	const markReconnectStarted = useRedirectEnded((end) => {
-		setReconnectingAccountId(null);
-		if (end === "stalled") setOauthErrorMessage(REDIRECT_STALL_MESSAGE);
-	});
-
-	const reconnectMutation = useMutation({
-		...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
-		onSuccess: (data) => {
-			markReconnectStarted();
-			window.location.assign(data.authorizationUrl);
-		},
-		onError: (err) => {
-			setOauthErrorMessage(
-				err instanceof Error ? err.message : "Failed to start reconnect",
-			);
-			setReconnectingAccountId(null);
-		},
-	});
-
-	const deleteMutation = useMutation({
-		...accountDetailOperationsDeleteAccountMutation(),
-		onSuccess: () => {
-			queryClient.invalidateQueries({
-				queryKey: configOperationsGetConfigQueryKey(),
-			});
-			setDeletingAccountId(null);
-		},
-	});
-
-	const accountToDelete = config?.accounts.find(
-		(a) => a.accountId === deletingAccountId,
-	);
-
-	const accountToEdit = config?.accounts.find(
-		(a) => a.accountId === editingAccountId,
-	);
-
-	const handleClosePanel = () => {
-		setShowForm(false);
-		setShowAddWizard(false);
-		setEditingAccountId(null);
-		setFocusSmtp(false);
-	};
-
-	const handleSelectNav = (id: string) => {
-		const path = SETTINGS_ID_TO_PATH[id];
-		if (path) void navigate({ to: path });
-	};
-
-	return (
-		<SettingsShell
-			items={SETTINGS_NAV_ITEMS}
-			activeId="accounts"
-			title="Accounts"
-			description="Every account keeps syncing — muted ones just stay out of unified views."
-			help={accountsHelp}
-			helpOpen={helpOpen}
-			onToggleHelp={() => setHelpOpen((v) => !v)}
-			onSelect={handleSelectNav}
-			onBackToMail={() => void navigate({ to: "/mail" })}
-		>
-			{successMessage && (
-				<Banner
-					tone="success"
-					variant="soft"
-					data-testid="oauth-success-banner"
-					onDismiss={() => setSuccessMessage(null)}
-				>
-					{successMessage}
-				</Banner>
-			)}
-
-			{oauthErrorMessage && (
-				<Banner
-					tone="danger"
-					variant="soft"
-					data-testid="oauth-error-banner"
-					onDismiss={() => setOauthErrorMessage(null)}
-				>
-					{oauthErrorMessage}
-				</Banner>
-			)}
-
-			<div className="flex items-center justify-between">
-				<Badge tone="neutral">
-					{isPending || isError
-						? "accounts"
-						: `${config.accounts.length} ${config.accounts.length === 1 ? "account" : "accounts"}`}
-				</Badge>
-				<Button
-					variant="primary"
-					size="sm"
-					icon={<Plus className="size-3.5" />}
-					onClick={() => setShowAddWizard(true)}
-				>
-					Add account
-				</Button>
-			</div>
-
-			{isPending ? (
-				<LoadingSkeleton />
-			) : isError ? (
-				<ErrorState
-					title="Couldn't load accounts"
-					error={error}
-					onRetry={() => {
-						refetch();
-					}}
-				/>
-			) : config.accounts.length === 0 ? (
-				<div
-					className="py-12 text-sm text-fg-muted"
-					data-testid="accounts-empty"
-				>
-					<p className="mb-3">No accounts configured.</p>
-					<Button
-						variant="primary"
-						size="sm"
-						icon={<Plus className="size-3.5" />}
-						onClick={() => setShowAddWizard(true)}
-					>
-						Add your first account
-					</Button>
-				</div>
-			) : (
-				<div className="space-y-3">
-					{config.accounts.map((account) => {
-						const isReauth = needsReauth(account);
-						const isMissingPassword = needsPassword(account);
-						const isOAuthAccount = account.authType === "oauthMicrosoft";
-						// The mutation settling does not mean the window has gone anywhere:
-						// `assign` leaves the page here while the browser fetches Microsoft's
-						// page. The busy state rides the latch instead, which only clears on
-						// evidence — the server saying the account no longer needs re-auth,
-						// or the start call failing.
-						const isReconnecting = reconnectingAccountId === account.accountId;
-
-						const primaryAction: RowAction =
-							isReauth && isOAuthAccount
-								? {
-										label: "Reconnect",
-										variant: "secondary",
-										busy: isReconnecting,
-										busyLabel: "Redirecting…",
-										onClick: () => {
-											setReconnectingAccountId(account.accountId);
-											reconnectMutation.mutate({
-												body: {
-													email: account.email,
-													services: account.syncedServices,
-												},
-											});
-										},
-									}
-								: isMissingPassword
-									? {
-											label: "Enter password",
-											variant: "secondary",
-											onClick: () => setEditingAccountId(account.accountId),
-										}
-									: deriveState(account) === "error"
-										? {
-												label: "Reconnect",
-												variant: "secondary",
-												onClick: () => setEditingAccountId(account.accountId),
-											}
-										: {
-												label: "Manage",
-												variant: "ghost",
-												onClick: () => setEditingAccountId(account.accountId),
-											};
-
-						const trailingButton = (
-							<RowActions
-								actions={[primaryAction]}
-								destructive={{
-									label: "Delete account",
-									iconOnly: true,
-									icon: <Trash2 className="size-3.5" />,
-									onClick: () => setDeletingAccountId(account.accountId),
-								}}
-							/>
-						);
-
-						return (
-							<div key={account.accountId} className="space-y-2">
-								<AccountHealthCard
-									label={accountLabel(account)}
-									email={account.email}
-									connector={isOAuthAccount ? "Microsoft 365" : "IMAP"}
-									syncLabel={deriveSyncLabel(account)}
-									state={deriveState(account)}
-									// What the mail server said, when it said anything. Not every
-									// refusal that fences an account is one the Reconnect button
-									// clears — "SmtpClientAuthentication is disabled" is a tenant
-									// setting — so the stored reason outranks the generic prompt.
-									errorDetail={
-										isReauth
-											? (account.lastError ?? "Re-authentication required")
-											: isMissingPassword
-												? "Imported from a config file, which carries no password. Enter one to start syncing."
-												: account.lastError
-									}
-									trailing={trailingButton}
-								/>
-								<AccountServices
-									account={account}
-									onRemoveAccount={() =>
-										setDeletingAccountId(account.accountId)
-									}
-								/>
-							</div>
-						);
-					})}
-				</div>
-			)}
-
-			{/* Add account wizard — steps 2–7 in a full-screen overlay. No safe-area
-			    frame: the wizard shell inside owns the device insets, because
-			    /onboarding mounts it with nothing around it. */}
-			{showAddWizard && (
-				<div className="fixed inset-0 z-40 overflow-auto bg-canvas">
-					<OnboardingWizard
-						skipWelcome
-						microsoftReturn={microsoftReturn}
-						onComplete={() => {
-							if (microsoftReturn?.kind === "connected") {
-								setSuccessMessage("Account connected successfully.");
-							}
-							setShowAddWizard(false);
-							setMicrosoftReturn(undefined);
-							queryClient.invalidateQueries({
-								queryKey: configOperationsGetConfigQueryKey(),
-							});
-						}}
-						onCancel={() => {
-							setShowAddWizard(false);
-							setMicrosoftReturn(undefined);
-						}}
-					/>
-				</div>
-			)}
-
-			{/* Add/Edit Form Panel */}
-			<AccountFormPanel
-				isOpen={showForm || !!editingAccountId}
-				account={accountToEdit}
-				focusSmtp={focusSmtp}
-				onClose={handleClosePanel}
-			/>
-
-			{/* Delete Confirmation Dialog */}
-			<Dialog
-				open={!!deletingAccountId}
-				onClose={() => setDeletingAccountId(null)}
-				title="Delete account"
-			>
-				<header className="flex items-center gap-2 border-b border-line px-5 py-3">
-					<AlertTriangle className="size-4 shrink-0 text-danger" />
-					<span className="flex-1 text-sm font-semibold text-fg">
-						Delete account
-					</span>
-					<Button
-						variant="ghost"
-						size="sm"
-						icon={<X className="size-3.5" />}
-						onClick={() => setDeletingAccountId(null)}
-						aria-label="Cancel"
-					/>
-				</header>
-
-				<div className="space-y-3 px-5 py-4 text-sm text-fg-muted">
-					<p className="text-center text-lg font-medium text-fg">
-						Are you sure?
-					</p>
-					{accountToDelete && (
-						<p className="text-center">{accountToDelete.email}</p>
-					)}
-					<ul className="list-inside list-disc space-y-1">
-						<li>Remove the account from your settings</li>
-						<li>Stop syncing mail for this account</li>
-						<li>Delete all associated data (within 24 hours)</li>
-					</ul>
-				</div>
-
-				<footer className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
-					<Button
-						variant="secondary"
-						size="sm"
-						onClick={() => setDeletingAccountId(null)}
-					>
-						Cancel
-					</Button>
-					<Button
-						variant="danger"
-						size="sm"
-						aria-busy={deleteMutation.isPending}
-						icon={
-							deleteMutation.isPending ? (
-								<Loader2 className="size-3.5 animate-spin" />
-							) : undefined
-						}
-						onClick={() => {
-							if (deleteMutation.isPending) return;
-							if (deletingAccountId) {
-								deleteMutation.mutate({
-									path: { accountId: deletingAccountId },
-								});
-							}
-						}}
-					>
-						{deleteMutation.isPending ? "Deleting…" : "Delete account"}
-					</Button>
-				</footer>
-			</Dialog>
-
-			<DangerZone />
-		</SettingsShell>
-	);
-}