@remit/web-client 0.0.300 → 0.0.302

package/src/mocks/story-frame/AppStory.tsx

@@ -6,6 +6,11 @@ import {
 } from "@tanstack/react-query";
 import { createMemoryHistory, RouterProvider } from "@tanstack/react-router";
 import { useState } from "react";
+import {
+	type AuthProvider,
+	AuthProviderProvider,
+	noneAuthProvider,
+} from "@/auth/provider";
 import {
 	handleMutationCacheError,
 	handleQueryCacheError,
@@ -17,6 +22,7 @@ import "@/lib/client";
 
 export interface AppStoryProps {
 	url: string;
+	authProvider?: AuthProvider;
 }
 
 const createStoryQueryClient = (): QueryClient =>
@@ -29,19 +35,28 @@ const createStoryQueryClient = (): QueryClient =>
 		},
 	});
 
-export function AppStory({ url }: AppStoryProps) {
+export function AppStory({
+	url,
+	authProvider = noneAuthProvider,
+}: AppStoryProps) {
 	const [queryClient] = useState(createStoryQueryClient);
-	const [router] = useState(() =>
-		createAppRouter(
+	const [router] = useState(() => {
+		authProvider.configure();
+		return createAppRouter(
 			queryClient,
 			noopTelemetry,
 			createMemoryHistory({ initialEntries: [url] }),
-		),
-	);
+		);
+	});
+	const { Shell } = authProvider;
 
 	return (
 		<QueryClientProvider client={queryClient}>
-			<RouterProvider router={router} />
+			<AuthProviderProvider value={authProvider}>
+				<Shell>
+					<RouterProvider router={router} />
+				</Shell>
+			</AuthProviderProvider>
 		</QueryClientProvider>
 	);
 }

package/src/mocks/story-frame/mail-handlers.ts

@@ -1,6 +1,10 @@
 import type {
+	AccountDetailOperationsUpdateAccountResponse,
+	AddressDetailOperationsUpdateAddressResponse,
+	AddressOperationsSearchAddressesResponse,
 	FilterOperationsListFiltersResponse,
 	LabelOperationsListLabelsResponse,
+	MailboxDetailOperationsRenameMailboxResponse,
 	MailboxOperationsListMailboxesResponse,
 	MeOperationsListQuarantineResponse,
 	MeOperationsListVipSuggestionsResponse,
@@ -169,6 +173,22 @@ export const mailHandlers = (
 				makeConfig(world.accounts),
 			),
 		),
+		http.patch(
+			`${API}/accounts/:accountId/mailboxes/:mailboxId`,
+			({ params }) => {
+				const mailbox = world.mailboxes.find(
+					(candidate) => candidate.mailboxId === params.mailboxId,
+				);
+				if (!mailbox)
+					return HttpResponse.json(
+						{ status: 404, message: "Mailbox not found" },
+						{ status: 404 },
+					);
+				return HttpResponse.json<MailboxDetailOperationsRenameMailboxResponse>(
+					mailbox,
+				);
+			},
+		),
 		http.get(`${API}/accounts/:accountId/mailboxes`, ({ params }) =>
 			HttpResponse.json<MailboxOperationsListMailboxesResponse>({
 				items: world.mailboxes.filter(
@@ -176,6 +196,48 @@ export const mailHandlers = (
 				),
 			}),
 		),
+		http.patch(`${API}/accounts/:accountId`, ({ params }) => {
+			const account = world.accounts.find(
+				(candidate) => candidate.accountId === params.accountId,
+			);
+			if (!account)
+				return HttpResponse.json(
+					{ status: 404, message: "Account not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<AccountDetailOperationsUpdateAccountResponse>(
+				account,
+			);
+		}),
+		http.delete(
+			`${API}/accounts/:accountId`,
+			() => new HttpResponse(null, { status: 204 }),
+		),
+		http.get(`${API}/addresses/search`, ({ request }) => {
+			const needle = (
+				new URL(request.url).searchParams.get("q") ?? ""
+			).toLowerCase();
+			return HttpResponse.json<AddressOperationsSearchAddressesResponse>({
+				items: world.addresses.filter(
+					(address) =>
+						address.normalizedEmail.includes(needle) ||
+						(address.displayName ?? "").toLowerCase().includes(needle),
+				),
+			});
+		}),
+		http.patch(`${API}/addresses/:addressId`, ({ params }) => {
+			const address = world.addresses.find(
+				(candidate) => candidate.addressId === params.addressId,
+			);
+			if (!address)
+				return HttpResponse.json(
+					{ status: 404, message: "Address not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<AddressDetailOperationsUpdateAddressResponse>(
+				address,
+			);
+		}),
 		http.get(`${API}/accounts/:accountId/sync/status`, ({ params }) =>
 			HttpResponse.json<SyncOperationsGetSyncStatusResponse>({
 				accountId: String(params.accountId),
@@ -272,19 +334,19 @@ export const mailHandlers = (
 			}),
 		),
 		http.get(`${API}/me/quarantine`, () =>
-			HttpResponse.json<MeOperationsListQuarantineResponse>({ entries: [] }),
+			HttpResponse.json<MeOperationsListQuarantineResponse>({
+				entries: world.quarantine,
+			}),
 		),
 		http.get(`${API}/me/vip-suggestions`, () =>
 			HttpResponse.json<MeOperationsListVipSuggestionsResponse>({
-				suggestions: [],
+				suggestions: world.vipSuggestions,
 			}),
 		),
 		http.get(`${API}/system/update`, () =>
-			HttpResponse.json<SystemOperationsGetSystemUpdateResponse>({
-				currentVersion: "0.0.0-storybook",
-				check: { status: "disabled" },
-				run: null,
-			}),
+			HttpResponse.json<SystemOperationsGetSystemUpdateResponse>(
+				world.systemUpdate,
+			),
 		),
 		http.all(`${API}/*`, ({ request }) =>
 			HttpResponse.json(

package/src/mocks/story-frame/mail-world.ts

@@ -1,11 +1,15 @@
 import type {
 	RemitImapAccountResponse,
+	RemitImapAddressResponse,
 	RemitImapCanonicalMailboxRole,
 	RemitImapMailboxResponse,
 	RemitImapMessageCategory,
 	RemitImapOutboxMessageResponse,
 	RemitImapOutboxMessageStatus,
+	RemitImapQuarantineResponse,
+	RemitImapSystemUpdateResponse,
 	RemitImapThreadMessageResponse,
+	RemitImapVipSuggestionEntry,
 } from "@remit/api-http-client/types.gen.ts";
 import {
 	makeAccount,
@@ -18,12 +22,16 @@ export interface MailWorld {
 	mailboxes: RemitImapMailboxResponse[];
 	threads: RemitImapThreadMessageResponse[];
 	outbox: RemitImapOutboxMessageResponse[];
+	quarantine: RemitImapQuarantineResponse[];
+	vipSuggestions: RemitImapVipSuggestionEntry[];
+	addresses: RemitImapAddressResponse[];
+	systemUpdate: RemitImapSystemUpdateResponse;
 }
 
 const MINUTE = 60_000;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
-const NOW = Date.UTC(2026, 8, 24, 13, 0);
+export const NOW = Date.UTC(2026, 8, 24, 13, 0);
 
 const ROLES = [
 	"Inbox",
@@ -48,7 +56,7 @@ export const mailboxIdFor = (
 	role: RemitImapCanonicalMailboxRole,
 ): string => `mbx-${accountId}-${role.toLowerCase()}`;
 
-const accountWithFolders = (
+export const accountWithFolders = (
 	accountId: string,
 	email: string,
 	displayName: string,
@@ -67,7 +75,7 @@ const accountWithFolders = (
 		})),
 	});
 
-const foldersOf = (accountId: string): RemitImapMailboxResponse[] =>
+export const foldersOf = (accountId: string): RemitImapMailboxResponse[] =>
 	ROLES.map((role) =>
 		makeMailbox({
 			accountId,
@@ -382,8 +390,18 @@ export const newsletterBacklog = (
 
 export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
 	accounts,
-	mailboxes: accounts.flatMap((account) => foldersOf(account.accountId)),
+	mailboxes: (overrides.accounts ?? accounts).flatMap((account) =>
+		foldersOf(account.accountId),
+	),
 	threads: [...inboxThreads, ...serverDrafts],
 	outbox: [...remitDrafts, ...outboxInEveryStatus],
+	quarantine: [],
+	vipSuggestions: [],
+	addresses: [],
+	systemUpdate: {
+		currentVersion: "0.0.0-storybook",
+		check: { status: "disabled" },
+		run: null,
+	},
 	...overrides,
 });

package/src/mocks/story-frame/onboarding-handlers.ts

@@ -0,0 +1,97 @@
+import type {
+	AccountOperationsCreateAccountResponse,
+	AccountOperationsTestConnectionResponse,
+	MicrosoftOAuthOperationsMicrosoftOAuthStartResponse,
+	RemitImapAccountSyncStatusResponse,
+	SyncOperationsGetSyncStatusResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { type HttpHandler, HttpResponse, http } from "msw";
+import { makeAccount } from "@/test-support/fixtures";
+
+const API = "/api";
+
+export const NEW_ACCOUNT_ID = "acc-new";
+
+export type Autoconfig = "found" | "missing" | "slow";
+
+export interface OnboardingHandlerOptions {
+	autoconfig?: Autoconfig;
+	connection?: AccountOperationsTestConnectionResponse;
+	createFails?: boolean;
+	sync?: Omit<RemitImapAccountSyncStatusResponse, "accountId">;
+}
+
+const autoconfigXml = (domain: string): string => `<?xml version="1.0"?>
+<clientConfig version="1.1">
+  <emailProvider id="${domain}">
+    <incomingServer type="imap">
+      <hostname>mail.${domain}</hostname>
+      <port>993</port>
+      <socketType>SSL</socketType>
+    </incomingServer>
+    <outgoingServer type="smtp">
+      <hostname>mail.${domain}</hostname>
+      <port>465</port>
+      <socketType>SSL</socketType>
+    </outgoingServer>
+  </emailProvider>
+</clientConfig>`;
+
+const pending = (): Promise<never> => new Promise<never>(() => undefined);
+
+const autoconfigHandlers = (autoconfig: Autoconfig): HttpHandler[] => [
+	http.get("https://autoconfig.thunderbird.net/v1.1/:domain", ({ params }) => {
+		if (autoconfig === "slow") return pending();
+		if (autoconfig === "missing")
+			return new HttpResponse(null, { status: 404 });
+		return HttpResponse.text(autoconfigXml(String(params.domain)), {
+			headers: { "Content-Type": "application/xml" },
+		});
+	}),
+	http.get(
+		/^https:\/\/autoconfig\.[^/]+\/mail\/config-v1\.1\.xml$/,
+		() => new HttpResponse(null, { status: 404 }),
+	),
+];
+
+export const onboardingHandlers = ({
+	autoconfig = "found",
+	connection = { imapSuccess: true, smtpSuccess: true },
+	createFails = false,
+	sync = {
+		syncPhase: "complete",
+		mailboxCountTotal: 6,
+		mailboxCountSynced: 6,
+		mailboxes: [],
+	},
+}: OnboardingHandlerOptions = {}): HttpHandler[] => [
+	...autoconfigHandlers(autoconfig),
+	http.post(`${API}/accounts/test-connection`, () =>
+		HttpResponse.json<AccountOperationsTestConnectionResponse>(connection),
+	),
+	http.post(`${API}/accounts`, async ({ request }) => {
+		if (createFails) return HttpResponse.error();
+		const body: unknown = await request.json();
+		const email =
+			typeof body === "object" &&
+			body !== null &&
+			"email" in body &&
+			typeof body.email === "string"
+				? body.email
+				: "alice@northwind.example";
+		return HttpResponse.json<AccountOperationsCreateAccountResponse>(
+			makeAccount({ accountId: NEW_ACCOUNT_ID, email }),
+		);
+	}),
+	http.get(`${API}/accounts/${NEW_ACCOUNT_ID}/sync/status`, () =>
+		HttpResponse.json<SyncOperationsGetSyncStatusResponse>({
+			accountId: NEW_ACCOUNT_ID,
+			...sync,
+		}),
+	),
+	http.post(`${API}/accounts/oauth/microsoft/start`, () =>
+		HttpResponse.json<MicrosoftOAuthOperationsMicrosoftOAuthStartResponse>({
+			authorizationUrl: "#microsoft-sign-in",
+		}),
+	),
+];

package/src/mocks/story-frame/session.tsx

@@ -0,0 +1,19 @@
+import { type AuthProvider, noneAuthProvider } from "@/auth/provider";
+
+type RuntimeConfig = NonNullable<typeof globalThis.__REMIT_CONFIG__>;
+
+export const signedInAs = (email: string): AuthProvider => ({
+	...noneAuthProvider,
+	Account: ({ children }) => (
+		<>{children({ email, signOut: () => undefined })}</>
+	),
+});
+
+export const withRuntimeConfig =
+	(config: RuntimeConfig) => (): (() => void) => {
+		const previous = globalThis.__REMIT_CONFIG__;
+		globalThis.__REMIT_CONFIG__ = config;
+		return () => {
+			globalThis.__REMIT_CONFIG__ = previous;
+		};
+	};

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

@@ -107,6 +107,7 @@ const REAUTH_ACCOUNT = {
 	authType: "oauthMicrosoft",
 	connectionState: "reauth_required",
 	syncedServices: ["Mail", "Calendar"],
+	grantedScopes: [],
 };
 
 // The router reads `self` at construction; the shared jsdom globals stop at

package/src/routes/settings/accounts.tsx

@@ -22,6 +22,7 @@ import { useEffect, useState } from "react";
 import { z } from "zod";
 import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
 import { AccountFormPanel } from "@/components/settings/AccountFormPanel";
+import { AccountServices } from "@/components/settings/AccountServices";
 import { DangerZone } from "@/components/settings/DangerZone";
 import { ErrorState } from "@/components/ui/ErrorState";
 import {
@@ -482,26 +483,33 @@ function AccountsSettings() {
 						);
 
 						return (
-							<AccountHealthCard
-								key={account.accountId}
-								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}
-							/>
+							<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>