@remit/web-client 0.0.300 → 0.0.301

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>