@remit/web-client 0.0.303 → 0.0.305

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

@@ -26,11 +26,12 @@ export interface MailWorld {
 	vipSuggestions: RemitImapVipSuggestionEntry[];
 	addresses: RemitImapAddressResponse[];
 	systemUpdate: RemitImapSystemUpdateResponse;
+	bodies: Record<string, string>;
 }
 
-const MINUTE = 60_000;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
+export const MINUTE = 60_000;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
 export const NOW = Date.UTC(2026, 8, 24, 13, 0);
 
 const ROLES = [
@@ -93,8 +94,9 @@ const accounts = [
 	accountWithFolders(WORK, "alice.tan@acme.example", "Work"),
 ];
 
-interface ThreadSeed {
+export interface ThreadSeed {
 	id: string;
+	inThread?: string;
 	accountId: string;
 	role?: RemitImapCanonicalMailboxRole;
 	fromName: string;
@@ -108,10 +110,10 @@ interface ThreadSeed {
 	hasAttachment?: boolean;
 }
 
-const thread = (seed: ThreadSeed): RemitImapThreadMessageResponse =>
+export const threadRow = (seed: ThreadSeed): RemitImapThreadMessageResponse =>
 	makeThreadMessage({
 		messageId: `msg-${seed.id}`,
-		threadId: `thread-${seed.id}`,
+		threadId: `thread-${seed.inThread ?? seed.id}`,
 		threadMessageId: `tm-${seed.id}`,
 		accountId: seed.accountId,
 		mailboxId: mailboxIdFor(seed.accountId, seed.role ?? "Inbox"),
@@ -129,7 +131,7 @@ const thread = (seed: ThreadSeed): RemitImapThreadMessageResponse =>
 	});
 
 const inboxThreads: RemitImapThreadMessageResponse[] = [
-	thread({
+	threadRow({
 		id: "q3-planning",
 		accountId: WORK,
 		fromName: "Ada Lovelace",
@@ -140,7 +142,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		ago: 20 * MINUTE,
 		starred: true,
 	}),
-	thread({
+	threadRow({
 		id: "lease",
 		accountId: PERSONAL,
 		fromName: "Amara Okafor",
@@ -152,7 +154,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		hasAttachment: true,
 		starred: true,
 	}),
-	thread({
+	threadRow({
 		id: "dinner",
 		accountId: PERSONAL,
 		fromName: "Grace Hopper",
@@ -163,7 +165,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		ago: 5 * HOUR,
 		isRead: true,
 	}),
-	thread({
+	threadRow({
 		id: "invoice",
 		accountId: WORK,
 		fromName: "Billing",
@@ -175,7 +177,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		isRead: true,
 		starred: true,
 	}),
-	thread({
+	threadRow({
 		id: "shipping",
 		accountId: PERSONAL,
 		fromName: "Parcel Service",
@@ -185,7 +187,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		category: "transactional",
 		ago: 9 * HOUR,
 	}),
-	thread({
+	threadRow({
 		id: "weekly-digest",
 		accountId: PERSONAL,
 		fromName: "The Weekly",
@@ -195,7 +197,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		category: "newsletter",
 		ago: DAY,
 	}),
-	thread({
+	threadRow({
 		id: "sale",
 		accountId: PERSONAL,
 		fromName: "Outdoor Store",
@@ -205,7 +207,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		category: "marketing",
 		ago: DAY + 3 * HOUR,
 	}),
-	thread({
+	threadRow({
 		id: "mention",
 		accountId: WORK,
 		fromName: "Chat",
@@ -215,7 +217,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		category: "social",
 		ago: DAY + 5 * HOUR,
 	}),
-	thread({
+	threadRow({
 		id: "build",
 		accountId: WORK,
 		fromName: "CI",
@@ -226,7 +228,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 		ago: 2 * DAY,
 		isRead: true,
 	}),
-	thread({
+	threadRow({
 		id: "talk-outline",
 		accountId: PERSONAL,
 		role: "Archive",
@@ -242,7 +244,7 @@ const inboxThreads: RemitImapThreadMessageResponse[] = [
 ];
 
 const serverDrafts: RemitImapThreadMessageResponse[] = [
-	thread({
+	threadRow({
 		id: "draft-talk",
 		accountId: PERSONAL,
 		role: "Drafts",
@@ -376,7 +378,7 @@ export const newsletterBacklog = (
 	count: number,
 ): RemitImapThreadMessageResponse[] =>
 	Array.from({ length: count }, (_, index) =>
-		thread({
+		threadRow({
 			id: `digest-${index}`,
 			accountId: PERSONAL,
 			fromName: "The Weekly",
@@ -388,6 +390,29 @@ export const newsletterBacklog = (
 		}),
 	);
 
+export const senderAddress = (
+	row: RemitImapThreadMessageResponse,
+): RemitImapAddressResponse => {
+	const email = (row.fromEmail ?? "").toLowerCase();
+	const [localPart = "", domain = ""] = email.split("@");
+	return {
+		addressId: `addr-${email}`,
+		accountConfigId: row.accountConfigId,
+		displayName: row.fromName,
+		localPart,
+		domain,
+		normalizedEmail: email,
+		flags: {},
+		inboundCount: 1,
+		outboundCount: 0,
+		replyCount: 0,
+		lastInboundAt: row.sentDate,
+		lastReplyAt: 0,
+		createdAt: row.sentDate,
+		updatedAt: row.sentDate,
+	};
+};
+
 export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
 	accounts,
 	mailboxes: (overrides.accounts ?? accounts).flatMap((account) =>
@@ -403,5 +428,6 @@ export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
 		check: { status: "disabled" },
 		run: null,
 	},
+	bodies: {},
 	...overrides,
 });

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

@@ -144,7 +144,9 @@ const pageShow = (persisted: boolean): Event => {
 };
 
 /** The real route, mounted the way the generated tree mounts it. */
-const mountAccounts = async (): Promise<DomHarness> => {
+const mountAccounts = async (
+	entry = "/settings/accounts",
+): Promise<DomHarness> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/oauth/microsoft/start")) {
 			return { authorizationUrl: CONSENT_URL };
@@ -168,7 +170,7 @@ const mountAccounts = async (): Promise<DomHarness> => {
 	]) as unknown as AnyRoute;
 	const router = createRouter({
 		routeTree,
-		history: createMemoryHistory({ initialEntries: ["/settings/accounts"] }),
+		history: createMemoryHistory({ initialEntries: [entry] }),
 	}) as unknown as AnyRouter;
 	await router.load();
 
@@ -275,3 +277,69 @@ describe("the Reconnect button and the redirect it starts", () => {
 		assert.ok(dom.byText("button", "Reconnect"));
 	});
 });
+
+describe("the Microsoft callback landing on the accounts page (#1183)", () => {
+	afterEach(() => {
+		harness?.close();
+		harness = undefined;
+		http?.restore();
+		http = undefined;
+	});
+
+	test("a reconnect that comes back connected ends on the granted screen", async () => {
+		const dom = await mountAccounts("/settings/accounts?connected=acc-1");
+		await dom.waitFor(
+			() => dom.text().includes("Connected matthijs@ischen.nl"),
+			"the granted screen",
+		);
+
+		assert.match(dom.text(), /Access granted/);
+		dom.click(dom.byText("button", "Go to inbox"));
+		await settle(dom);
+		assert.match(dom.text(), /Account connected successfully\./);
+	});
+
+	test("a reconnect Microsoft refused a service reopens that account, address filled", async () => {
+		const dom = await mountAccounts(
+			"/settings/accounts?oauthError=scope_not_granted&oauthEmail=matthijs%40ischen.nl&missingServices=Calendar",
+		);
+		await dom.waitFor(
+			() => dom.text().includes("Reconnect matthijs@ischen.nl"),
+			"the reconnect sign-in",
+		);
+
+		assert.match(dom.text(), /Microsoft did not grant access to Calendar\./);
+		assert.equal(
+			dom.query<HTMLInputElement>("#microsoft-email")?.value,
+			"matthijs@ischen.nl",
+		);
+		const choice = dom
+			.queryAll("fieldset")
+			.find((fieldset) =>
+				fieldset.textContent?.includes("What should Remit sync?"),
+			);
+		assert.ok(choice, "expected the service choice");
+		assert.deepEqual(
+			[
+				...choice.querySelectorAll<HTMLInputElement>("input[type=checkbox]"),
+			].map((box) => box.checked),
+			[true, true],
+		);
+	});
+
+	test("a new sign-in Microsoft refused a service reopens the add wizard", async () => {
+		const dom = await mountAccounts(
+			"/settings/accounts?oauthError=scope_not_granted&oauthEmail=new%40outlook.com&missingServices=Mail%2CCalendar",
+		);
+		await dom.waitFor(
+			() => dom.text().includes("did not grant access to Mail and Calendar"),
+			"the refused sign-in",
+		);
+
+		assert.doesNotMatch(dom.text(), /Reconnect new@outlook\.com/);
+		assert.equal(
+			dom.query<HTMLInputElement>("#microsoft-email")?.value,
+			"new@outlook.com",
+		);
+	});
+});

package/src/routes/settings/accounts.tsx

@@ -6,6 +6,7 @@ import {
 } 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,
@@ -20,7 +21,10 @@ 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 { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
+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";
@@ -41,6 +45,8 @@ const accountsSearchSchema = z.object({
 	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")({
@@ -86,6 +92,43 @@ export function mapOauthError(code: string): string {
 	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
@@ -182,6 +225,9 @@ function AccountsSettings() {
 
 	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>(
@@ -219,6 +265,8 @@ function AccountsSettings() {
 				focusSmtp: undefined,
 				connected: search.connected,
 				oauthError: search.oauthError,
+				oauthEmail: search.oauthEmail,
+				missingServices: search.missingServices,
 			},
 			replace: true,
 		});
@@ -228,13 +276,15 @@ function AccountsSettings() {
 		navigate,
 		search.connected,
 		search.oauthError,
+		search.oauthEmail,
+		search.missingServices,
 	]);
 
-	// Handle ?connected — show success, select the account, clear param
+	// Handle ?connected — show what Microsoft granted, clear param
 	useEffect(() => {
 		if (!search.connected) return;
-		setSuccessMessage("Account connected successfully.");
-		setEditingAccountId(search.connected);
+		setMicrosoftReturn({ kind: "connected", accountId: search.connected });
+		setShowAddWizard(true);
 		queryClient.invalidateQueries({
 			queryKey: configOperationsGetConfigQueryKey(),
 		});
@@ -252,8 +302,23 @@ function AccountsSettings() {
 	// Handle ?oauthError — show human-readable error, clear param
 	useEffect(() => {
 		if (!search.oauthError) return;
-		setOauthErrorMessage(mapOauthError(search.oauthError));
+		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,
@@ -263,7 +328,14 @@ function AccountsSettings() {
 			},
 			replace: true,
 		});
-	}, [search.oauthError, navigate]);
+	}, [
+		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
@@ -522,13 +594,21 @@ function AccountsSettings() {
 				<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)}
+						onCancel={() => {
+							setShowAddWizard(false);
+							setMicrosoftReturn(undefined);
+						}}
 					/>
 				</div>
 			)}