@remit/web-client 0.0.304 → 0.0.305

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.304",
+  "version": "0.0.305",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/onboarding/OnboardingWizard.flow.test.ts

@@ -15,7 +15,7 @@ import {
 } from "../../hooks/useRedirectEnded";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, mockFetch } from "../../test-support/http";
-import { OnboardingWizard } from "./OnboardingWizard";
+import { type MicrosoftReturn, OnboardingWizard } from "./OnboardingWizard";
 
 let harness: DomHarness | undefined;
 let http: HttpMock;
@@ -41,18 +41,34 @@ interface Backend {
 	lastError?: string;
 	mailboxCountTotal?: number;
 	mailboxCountSynced?: number;
+	accounts?: Record<string, unknown>[];
+	accountsAfterSignIn?: Record<string, unknown>[];
 }
 
 const completed: string[] = [];
 const cancelled: string[] = [];
 
-const start = (backend: Backend = {}, skipWelcome = false): DomHarness => {
+const start = (
+	backend: Backend = {},
+	skipWelcome = false,
+	microsoftReturn?: MicrosoftReturn,
+): DomHarness => {
 	http = mockFetch((call) => {
 		if (call.path === "/accounts/test-connection") return backend.test ?? OK;
 		if (call.path.endsWith("/oauth/microsoft/start")) {
 			return { authorizationUrl: CONSENT_URL };
 		}
 		if (call.path === "/accounts") return { accountId: "acc-new" };
+		if (call.path === "/config" && backend.accounts) {
+			return { accounts: backend.accounts, mailboxes: [] };
+		}
+		if (call.path === "/config" && backend.accountsAfterSignIn) {
+			const signedIn = http.to("/oauth/microsoft/start").length > 0;
+			return {
+				accounts: signedIn ? backend.accountsAfterSignIn : [],
+				mailboxes: [],
+			};
+		}
 		if (call.path === "/config") {
 			return {
 				accounts: [{ accountId: "acc-new", lastError: backend.lastError }],
@@ -83,6 +99,7 @@ const start = (backend: Backend = {}, skipWelcome = false): DomHarness => {
 			skipWelcome,
 			onComplete: (accountId: string) => completed.push(accountId),
 			onCancel: () => cancelled.push("cancelled"),
+			microsoftReturn,
 		}),
 	);
 	return harness;
@@ -487,3 +504,206 @@ describe("OnboardingWizard — a sync that stalls", () => {
 		assert.match(dom.text(), /IMAP LOGIN failed/);
 	});
 });
+
+const OUTLOOK_CALENDAR_ONLY = {
+	accountId: "acc-outlook",
+	email: "alice@outlook.com",
+	authType: "oauthMicrosoft",
+	syncedServices: ["Calendar"],
+	grantedScopes: ["https://graph.microsoft.com/Calendars.Read"],
+};
+
+const serviceBoxes = (dom: DomHarness): Record<string, HTMLInputElement> => {
+	const [mail, calendar] = dom.queryAll<HTMLInputElement>(
+		'input[type="checkbox"]',
+	);
+	assert.ok(mail && calendar, "expected a Mail and a Calendar checkbox");
+	return { mail, calendar };
+};
+
+const startRequests = (): Array<Record<string, unknown> | undefined> =>
+	http.to("/oauth/microsoft/start").map((call) => call.body);
+
+describe("OnboardingWizard — what a Microsoft account syncs (#1183)", () => {
+	afterEach(() => {
+		Reflect.deleteProperty(document, "visibilityState");
+	});
+
+	it("asks for mail and calendar before the sign-in, both on", async () => {
+		const dom = start();
+		await walkToMicrosoftStep(dom);
+
+		assert.match(dom.text(), /What should Remit sync\?/);
+		const { mail, calendar } = serviceBoxes(dom);
+		assert.equal(mail.checked, true);
+		assert.equal(calendar.checked, true);
+	});
+
+	it("sends both services with the sign-in start when both stay on", async () => {
+		const dom = start();
+		await walkToRedirect(dom);
+
+		assert.deepEqual(startRequests(), [{ services: ["Mail", "Calendar"] }]);
+	});
+
+	it("sends calendar alone when mail is turned off", async () => {
+		const dom = start();
+		await walkToMicrosoftStep(dom);
+		dom.click(serviceBoxes(dom).mail);
+		clickText(dom, "Sign in with Microsoft");
+		await settle(dom);
+
+		assert.deepEqual(startRequests(), [{ services: ["Calendar"] }]);
+	});
+
+	it("sends mail alone when calendar is turned off", async () => {
+		const dom = start();
+		await walkToMicrosoftStep(dom);
+		dom.click(serviceBoxes(dom).calendar);
+		clickText(dom, "Sign in with Microsoft");
+		await settle(dom);
+
+		assert.deepEqual(startRequests(), [{ services: ["Mail"] }]);
+	});
+
+	it("refuses an empty choice with the reason and keeps the button live", async () => {
+		const dom = start();
+		await walkToMicrosoftStep(dom);
+		const { mail, calendar } = serviceBoxes(dom);
+		dom.click(mail);
+		dom.click(calendar);
+		clickText(dom, "Sign in with Microsoft");
+		await settle(dom);
+
+		assert.match(dom.text(), /Pick at least one/);
+		assert.deepEqual(startRequests(), []);
+		const button = dom.byText("button", "Sign in with Microsoft");
+		assert.equal(button.getAttribute("disabled"), null);
+	});
+
+	it("shows what Microsoft granted once the new account appears", async () => {
+		const dom = start({ accountsAfterSignIn: [OUTLOOK_CALENDAR_ONLY] });
+		await walkToMicrosoftStep(dom);
+		dom.click(serviceBoxes(dom).mail);
+		clickText(dom, "Sign in with Microsoft");
+		await settle(dom);
+		setVisibility("hidden");
+		dom.dispatch(dom.document, new Event("visibilitychange"));
+		dom.dispatch(dom.window, new Event("pagehide"));
+		setVisibility("visible");
+		dom.dispatch(dom.document, new Event("visibilitychange"));
+		await dom.waitFor(
+			() => dom.text().includes("Connected alice@outlook.com"),
+			"the granted step",
+		);
+
+		assert.match(dom.text(), /Access granted/);
+		assert.match(dom.text(), /Calendars\.Read/);
+		assert.match(dom.text(), /Not synced/);
+		clickText(dom, "Continue");
+		assert.deepEqual(completed, ["acc-outlook"]);
+	});
+
+	it("opens on the granted result when the callback returns to it", async () => {
+		const dom = start({ accounts: [OUTLOOK_CALENDAR_ONLY] }, true, {
+			kind: "connected",
+			accountId: "acc-outlook",
+		});
+		await dom.waitFor(
+			() => dom.text().includes("Connected alice@outlook.com"),
+			"the granted step",
+		);
+
+		assert.match(dom.text(), /Calendar/);
+		assert.match(dom.text(), /Access granted/);
+	});
+
+	it("says the account is missing and offers the sign-in again", async () => {
+		const dom = start({ accounts: [] }, true, {
+			kind: "connected",
+			accountId: "acc-gone",
+		});
+		await dom.waitFor(
+			() => dom.text().includes("The account is not here"),
+			"the missing-account state",
+		);
+
+		clickText(dom, "Sign in again");
+		assert.match(dom.text(), /What should Remit sync\?/);
+	});
+
+	it("opens on the sign-in with the reason when Microsoft withheld a scope", async () => {
+		const message =
+			"Microsoft did not grant access to every service you picked. Sign in again and accept each permission Microsoft asks for.";
+		const dom = start({}, true, { kind: "refused", message, reconnect: false });
+
+		assert.ok(dom.text().includes(message));
+		assert.match(dom.text(), /What should Remit sync\?/);
+		const button = dom.byText("button", "Sign in with Microsoft");
+		assert.equal(button.getAttribute("disabled"), null);
+	});
+
+	it("drops the refusal once the person goes back and returns", async () => {
+		const message =
+			"Microsoft did not grant access to Calendar. Sign in again and accept the Calendar permission when Microsoft asks.";
+		const dom = start({}, true, { kind: "refused", message, reconnect: false });
+		assert.ok(dom.text().includes(message));
+
+		clickText(dom, "Back");
+		clickText(dom, "Outlook / Microsoft 365");
+		clickText(dom, "Continue with Microsoft");
+		await settle(dom);
+
+		assert.match(dom.text(), /What should Remit sync\?/);
+		assert.equal(dom.text().includes(message), false);
+	});
+
+	it("reopens a refused reconnect on the account, its address and services filled", async () => {
+		const message =
+			"Microsoft did not grant access to Calendar. Sign in again and accept the Calendar permission when Microsoft asks.";
+		const dom = start({ accounts: [] }, true, {
+			kind: "refused",
+			message,
+			email: "alice@outlook.com",
+			services: ["Calendar"],
+			reconnect: true,
+		});
+
+		assert.match(dom.text(), /Reconnect alice@outlook\.com/);
+		assert.ok(dom.text().includes(message));
+		const field = dom.query<HTMLInputElement>("#microsoft-email");
+		assert.equal(field?.value, "alice@outlook.com");
+		const { mail, calendar } = serviceBoxes(dom);
+		assert.equal(mail.checked, false);
+		assert.equal(calendar.checked, true);
+
+		clickText(dom, "Sign in with Microsoft");
+		await settle(dom);
+		assert.deepEqual(startRequests(), [
+			{ email: "alice@outlook.com", services: ["Calendar"] },
+		]);
+	});
+
+	it("shows the granted result for a reconnected account it already held", async () => {
+		const dom = start({ accounts: [OUTLOOK_CALENDAR_ONLY] }, true, {
+			kind: "connected",
+			accountId: "acc-outlook",
+		});
+		await dom.waitFor(
+			() => dom.text().includes("Connected alice@outlook.com"),
+			"the granted step",
+		);
+
+		clickText(dom, "Continue");
+		assert.deepEqual(completed, ["acc-outlook"]);
+	});
+
+	it("never offers the choice to a password account", async () => {
+		const dom = start();
+		await walkToServers(dom);
+		assert.doesNotMatch(dom.text(), /What should Remit sync/);
+		clickText(dom, "Continue");
+		assert.doesNotMatch(dom.text(), /What should Remit sync/);
+		assert.equal(dom.query('input[type="checkbox"]'), null);
+	});
+});

package/src/components/onboarding/OnboardingWizard.tsx

@@ -2,7 +2,7 @@
  * OnboardingWizard — full 7-step onboarding flow.
  *
  * Steps: Welcome → Connector → Address → Servers → Credentials → Test → Sync
- *        Microsoft path: Connector → MicrosoftEmail → redirect
+ *        Microsoft path: Connector → MicrosoftEmail → redirect → MicrosoftGranted
  *
  * Entry points:
  *  - First-run (zero accounts): full-screen wizard via /onboarding route
@@ -24,7 +24,12 @@ import {
 	microsoftOAuthOperationsMicrosoftOAuthStartMutation,
 	syncOperationsGetSyncStatusOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import {
+	ACCOUNT_SERVICE_EMPTY_MESSAGE,
+	ACCOUNT_SERVICE_ROWS,
+	type AccountService,
+	AccountServiceChoice,
 	Banner,
 	Button,
 	CheckRow,
@@ -71,6 +76,7 @@ type WizardStep =
 	| "welcome"
 	| "connector"
 	| "microsoft-email"
+	| "microsoft-granted"
 	| "address"
 	| "servers"
 	| "credentials"
@@ -91,6 +97,7 @@ const STEP_INDEX: Record<WizardStep, number> = {
 	welcome: 0,
 	connector: 0,
 	"microsoft-email": 0,
+	"microsoft-granted": 5,
 	address: 1,
 	servers: 2,
 	credentials: 3,
@@ -277,15 +284,25 @@ function StepConnector({
 	);
 }
 
-function StepMicrosoftEmail({
-	onBack,
-	onConnected,
-}: {
+const MICROSOFT_SERVICES: AccountService[] = ["Mail", "Calendar"];
+
+export interface StepMicrosoftEmailProps {
+	refusal?: MicrosoftRefusal;
 	onBack: () => void;
 	onConnected: (accountId: string) => void;
-}) {
-	const [email, setEmail] = useState("");
-	const [error, setError] = useState<string | null>(null);
+}
+
+export function StepMicrosoftEmail({
+	refusal,
+	onBack,
+	onConnected,
+}: StepMicrosoftEmailProps) {
+	const [email, setEmail] = useState(refusal?.email ?? "");
+	const [services, setServices] = useState<AccountService[]>(
+		refusal?.services ?? MICROSOFT_SERVICES,
+	);
+	const [servicesRefused, setServicesRefused] = useState(false);
+	const [error, setError] = useState<string | null>(refusal?.message ?? null);
 	const [awaitingReturn, setAwaitingReturn] = useState(false);
 	const [preparing, setPreparing] = useState(false);
 	// The account read is in flight across a step the user can leave — Escape and
@@ -368,6 +385,10 @@ function StepMicrosoftEmail({
 
 	const handleSubmit = () => {
 		if (redirecting) return;
+		if (services.length === 0) {
+			setServicesRefused(true);
+			return;
+		}
 		setError(null);
 		setPreparing(true);
 		void refetchConfig().then(({ data, isError }) => {
@@ -383,7 +404,7 @@ function StepMicrosoftEmail({
 				data.accounts.map((account) => account.accountId),
 			);
 			startMutation.mutate({
-				body: { email: email.trim() || undefined },
+				body: { email: email.trim() || undefined, services },
 			});
 		});
 	};
@@ -406,8 +427,12 @@ function StepMicrosoftEmail({
 		<WizardShell
 			steps={STEP_LABELS}
 			activeStep={STEP_INDEX.connector}
-			title="Sign in with Microsoft"
-			subtitle="You'll be redirected to Microsoft to sign in securely."
+			title={
+				refusal?.reconnect && refusal.email
+					? `Reconnect ${refusal.email}`
+					: "Sign in with Microsoft"
+			}
+			subtitle="Microsoft is asked for the mail and calendar access you pick here."
 			footer={
 				<>
 					<Button variant="ghost" onClick={onBack}>
@@ -433,6 +458,16 @@ function StepMicrosoftEmail({
 			}
 		>
 			<div className="space-y-3">
+				<AccountServiceChoice
+					providerName="Microsoft"
+					offered={MICROSOFT_SERVICES}
+					selected={services}
+					onChange={(next) => {
+						setServices(next);
+						if (next.length > 0) setServicesRefused(false);
+					}}
+					error={servicesRefused ? ACCOUNT_SERVICE_EMPTY_MESSAGE : undefined}
+				/>
 				<div>
 					<FieldLabel htmlFor="microsoft-email">
 						Email address (optional)
@@ -463,6 +498,170 @@ function StepMicrosoftEmail({
 	);
 }
 
+export interface StepMicrosoftGrantedProps {
+	accountId: string;
+	onSignInAgain: () => void;
+	onContinue: (accountId: string) => void;
+}
+
+export function StepMicrosoftGranted({
+	accountId,
+	onSignInAgain,
+	onContinue,
+}: StepMicrosoftGrantedProps) {
+	const {
+		data: config,
+		isError,
+		isFetching,
+		refetch,
+	} = useQuery(configOperationsGetConfigOptions());
+	const account = config?.accounts.find(
+		(candidate) => candidate.accountId === accountId,
+	);
+
+	if (isError) {
+		return (
+			<WizardShell
+				steps={STEP_LABELS}
+				activeStep={STEP_INDEX["microsoft-granted"]}
+				title="Couldn't read the new account"
+				subtitle="Microsoft finished, but this instance did not answer."
+				footer={
+					<>
+						<span />
+						<Button
+							variant="primary"
+							onClick={() => void refetch()}
+							disabled={isFetching}
+						>
+							Retry
+						</Button>
+					</>
+				}
+			>
+				<Banner tone="danger">
+					Couldn't load the account Microsoft just connected. Check your
+					connection and retry, or open Settings › Accounts to see it.
+				</Banner>
+			</WizardShell>
+		);
+	}
+
+	if (!config || (!account && isFetching)) {
+		return (
+			<WizardShell
+				steps={STEP_LABELS}
+				activeStep={STEP_INDEX["microsoft-granted"]}
+				title="Reading the new account"
+				subtitle="Checking what Microsoft granted."
+				footer={
+					<>
+						<span className="text-2xs text-fg-subtle">Loading…</span>
+						<span />
+					</>
+				}
+			>
+				<div className="flex items-center gap-2 py-4 text-sm text-fg-muted">
+					<Loader2 className="size-4 animate-spin text-accent" />
+					Loading the account…
+				</div>
+			</WizardShell>
+		);
+	}
+
+	if (!account) {
+		return (
+			<WizardShell
+				steps={STEP_LABELS}
+				activeStep={STEP_INDEX["microsoft-granted"]}
+				title="The account is not here"
+				subtitle="Microsoft sent the sign-in back, but no account was kept."
+				footer={
+					<>
+						<span />
+						<Button variant="primary" onClick={onSignInAgain}>
+							Sign in again
+						</Button>
+					</>
+				}
+			>
+				<Banner tone="danger">
+					This instance holds no account from that sign-in. Sign in with
+					Microsoft again to connect it.
+				</Banner>
+			</WizardShell>
+		);
+	}
+
+	return <AccountGranted account={account} onContinue={onContinue} />;
+}
+
+export interface AccountGrantedProps {
+	account: Pick<
+		RemitImapAccountResponse,
+		"accountId" | "email" | "syncedServices" | "grantedScopes"
+	>;
+	onContinue: (accountId: string) => void;
+}
+
+export function AccountGranted({ account, onContinue }: AccountGrantedProps) {
+	const syncsMail = account.syncedServices.includes("Mail");
+	return (
+		<WizardShell
+			steps={STEP_LABELS}
+			activeStep={STEP_INDEX["microsoft-granted"]}
+			title={`Connected ${account.email}`}
+			subtitle="Microsoft granted access to what you picked."
+			footer={
+				<>
+					<span className="text-2xs text-fg-subtle">
+						Change this later in Settings › Accounts
+					</span>
+					<Button
+						variant="primary"
+						onClick={() => onContinue(account.accountId)}
+					>
+						{syncsMail ? "Go to inbox" : "Continue"}
+					</Button>
+				</>
+			}
+		>
+			<div className="space-y-3">
+				<div className="divide-y divide-line">
+					{ACCOUNT_SERVICE_ROWS.map((row) =>
+						account.syncedServices.includes(row.id) ? (
+							<CheckRow
+								key={row.id}
+								label={row.label}
+								detail="Access granted — syncing"
+								state="ok"
+							/>
+						) : (
+							<CheckRow
+								key={row.id}
+								label={row.label}
+								detail="Not synced. Turn it on in Settings › Accounts; Microsoft asks for access then."
+								state="pending"
+							/>
+						),
+					)}
+				</div>
+				<div>
+					<p className="text-2xs text-fg-subtle">
+						Permissions Microsoft granted
+					</p>
+					<code
+						className="mt-1 block rounded bg-surface-sunken px-2.5 py-2 text-2xs text-fg-muted"
+						data-testid="granted-scopes"
+					>
+						{account.grantedScopes.join(" ")}
+					</code>
+				</div>
+			</div>
+		</WizardShell>
+	);
+}
+
 function StepAddress({
 	initialEmail,
 	initialDisplayName,
@@ -1150,16 +1349,45 @@ export interface OnboardingWizardProps {
 	 * has one — importing a configuration is a first-run move, not an add.
 	 */
 	onImportConfig?: () => void;
+	microsoftReturn?: MicrosoftReturn;
+}
+
+export interface MicrosoftRefusal {
+	kind: "refused";
+	message: string;
+	email?: string;
+	services?: AccountService[];
+	reconnect: boolean;
 }
 
+export type MicrosoftReturn =
+	| { kind: "connected"; accountId: string }
+	| MicrosoftRefusal;
+
+const initialStep = (
+	skipWelcome: boolean,
+	microsoftReturn: MicrosoftReturn | undefined,
+): WizardStep => {
+	if (microsoftReturn?.kind === "connected") return "microsoft-granted";
+	if (microsoftReturn?.kind === "refused") return "microsoft-email";
+	return skipWelcome ? "connector" : "welcome";
+};
+
 export function OnboardingWizard({
 	skipWelcome = false,
 	onComplete,
 	onCancel,
 	onImportConfig,
+	microsoftReturn,
 }: OnboardingWizardProps) {
 	const [step, setStep] = useState<WizardStep>(
-		skipWelcome ? "connector" : "welcome",
+		initialStep(skipWelcome, microsoftReturn),
+	);
+	const [microsoftRefusal, setMicrosoftRefusal] = useState<
+		MicrosoftRefusal | undefined
+	>(microsoftReturn?.kind === "refused" ? microsoftReturn : undefined);
+	const [microsoftAccountId, setMicrosoftAccountId] = useState<string | null>(
+		microsoftReturn?.kind === "connected" ? microsoftReturn.accountId : null,
 	);
 	const [state, setState] = useState<WizardState>({
 		email: "",
@@ -1254,6 +1482,20 @@ export function OnboardingWizard({
 		[onComplete],
 	);
 
+	const microsoftSignIn = (
+		<StepMicrosoftEmail
+			refusal={microsoftRefusal}
+			onBack={() => {
+				setMicrosoftRefusal(undefined);
+				setStep("connector");
+			}}
+			onConnected={(accountId) => {
+				setMicrosoftAccountId(accountId);
+				setStep("microsoft-granted");
+			}}
+		/>
+	);
+
 	switch (step) {
 		case "welcome":
 			return (
@@ -1274,10 +1516,15 @@ export function OnboardingWizard({
 			);
 
 		case "microsoft-email":
+			return microsoftSignIn;
+
+		case "microsoft-granted":
+			if (microsoftAccountId === null) return microsoftSignIn;
 			return (
-				<StepMicrosoftEmail
-					onBack={() => setStep("connector")}
-					onConnected={handleGoToInbox}
+				<StepMicrosoftGranted
+					accountId={microsoftAccountId}
+					onSignInAgain={() => setStep("microsoft-email")}
+					onContinue={handleGoToInbox}
 				/>
 			);
 

package/src/components/onboarding/onboarding.stories.tsx

@@ -458,3 +458,93 @@ export const SyncStalled: Story = {
 		);
 	},
 };
+
+const OUTLOOK = makeAccount({
+	accountId: "acc-outlook",
+	email: "alice@outlook.com",
+	authType: "oauthMicrosoft",
+	syncedServices: ["Calendar"],
+	grantedScopes: ["https://graph.microsoft.com/Calendars.Read"],
+});
+
+const withOutlook = mailWorld({
+	accounts: [...mailWorld().accounts, OUTLOOK],
+});
+
+export const MicrosoftServiceChoice: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toMicrosoft(canvas);
+		await expect(canvas.getByRole("checkbox", { name: /^Mail/ })).toBeChecked();
+		await expect(
+			canvas.getByRole("checkbox", { name: /^Calendar/ }),
+		).toBeChecked();
+	},
+};
+
+export const MicrosoftNothingPicked: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const signIn = await toMicrosoft(canvas);
+		await userEvent.click(canvas.getByRole("checkbox", { name: /^Mail/ }));
+		await userEvent.click(canvas.getByRole("checkbox", { name: /^Calendar/ }));
+		await userEvent.click(signIn);
+		await expect(await canvas.findByRole("alert")).toHaveTextContent(
+			"Pick at least one",
+		);
+		await expect(signIn).toBeEnabled();
+	},
+};
+
+export const MicrosoftGranted: Story = {
+	args: { url: `/settings/accounts?connected=${OUTLOOK.accountId}` },
+	parameters: handlers({}, withOutlook),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(`Connected ${OUTLOOK.email}`),
+		).toBeVisible();
+		await expect(canvas.getByText("Access granted — syncing")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Continue" }),
+		).toBeEnabled();
+	},
+};
+
+export const MicrosoftScopeNotGranted: Story = {
+	args: {
+		url: "/settings/accounts?oauthError=scope_not_granted&oauthEmail=bob%40outlook.com&missingServices=Calendar",
+	},
+	parameters: handlers({}, mailWorld()),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/did not grant access to Calendar/),
+		).toBeVisible();
+		await expect(canvas.getByLabelText("Email address (optional)")).toHaveValue(
+			"bob@outlook.com",
+		);
+		await expect(
+			canvas.getByRole("button", { name: "Sign in with Microsoft" }),
+		).toBeEnabled();
+	},
+};
+
+export const MicrosoftReconnectScopeNotGranted: Story = {
+	args: {
+		url: `/settings/accounts?oauthError=scope_not_granted&oauthEmail=${encodeURIComponent(OUTLOOK.email)}&missingServices=Calendar`,
+	},
+	parameters: handlers({}, withOutlook),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(`Reconnect ${OUTLOOK.email}`),
+		).toBeVisible();
+		await expect(
+			canvas.getByText(/did not grant access to Calendar/),
+		).toBeVisible();
+		await expect(canvas.getByLabelText("Email address (optional)")).toHaveValue(
+			OUTLOOK.email,
+		);
+	},
+};

package/src/components/settings/AccountServices.render.test.ts

@@ -130,7 +130,10 @@ describe("AccountServices", () => {
 		const mounted = await mount(outlook());
 
 		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(() => patches().length > 0, "the save to start");
+		await mounted.waitFor(
+			() => patches().length > 0 && switchFor(mounted, "calendar").disabled,
+			"the save to start",
+		);
 
 		assert.equal(checked(mounted, "calendar"), "true");
 		assert.equal(switchFor(mounted, "mail").disabled, true);

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

@@ -199,6 +199,11 @@ export const AccountsOauthSuccess: Story = {
 	args: { url: "/settings/accounts?connected=acc-personal" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
+		await expect(await canvas.findByText(/^Connected /)).toBeVisible();
+		await expect(canvas.getByText(/Access granted/)).toBeVisible();
+		await userEvent.click(
+			canvas.getByRole("button", { name: /Go to inbox|Continue/ }),
+		);
 		await expect(
 			await canvas.findByText("Account connected successfully."),
 		).toBeVisible();

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