@remit/web-client 0.0.259 → 0.0.261

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.259",
+  "version": "0.0.261",
   "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/compose/FromSelector.render.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Issue #1014: when compose cannot resolve the sending account, the `<select>`
+ * had no option carrying `value=""`, so the browser fell back to showing the
+ * first account's address even though nothing was actually selected. The
+ * unresolved state now gets its own disabled placeholder option, so no real
+ * identity is shown while nothing is chosen.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { configOperationsGetConfigQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeAccount, makeConfig } from "../../test-support/fixtures";
+import { FromSelector } from "./FromSelector";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const ACCOUNTS = [
+	makeAccount({ accountId: "acc-1", email: "alice@example.com" }),
+	makeAccount({ accountId: "acc-2", email: "bob@example.com" }),
+];
+
+const mount = (selectedAccountId: string | undefined): DomHarness => {
+	harness = createDomHarness();
+	harness.queryClient.setQueryData(
+		configOperationsGetConfigQueryKey(),
+		makeConfig(ACCOUNTS),
+	);
+	harness.renderApp(
+		createElement(FromSelector, {
+			selectedAccountId,
+			onSelect: () => undefined,
+		}),
+	);
+	return harness;
+};
+
+const select = (dom: DomHarness): HTMLSelectElement => {
+	const found = dom.query<HTMLSelectElement>("#from-account-selector");
+	if (!found) throw new Error("the from-account select is not mounted");
+	return found;
+};
+
+describe("FromSelector with an unresolved account (#1014)", () => {
+	it("shows a disabled placeholder instead of the first account's address", () => {
+		const dom = mount(undefined);
+		const node = select(dom);
+
+		assert.equal(node.value, "", "the select should sit on the placeholder");
+
+		const placeholder =
+			node.querySelector<HTMLOptionElement>('option[value=""]');
+		assert.ok(placeholder, "no placeholder option was rendered");
+		assert.equal(
+			placeholder.disabled,
+			true,
+			"the placeholder option should not be a pickable account",
+		);
+		assert.notEqual(
+			placeholder.textContent,
+			ACCOUNTS[0]?.email,
+			"the placeholder must not read as the first account's address",
+		);
+	});
+
+	it("selects the resolved account and shows its address", () => {
+		const dom = mount("acc-2");
+		const node = select(dom);
+
+		assert.equal(node.value, "acc-2");
+		assert.equal(
+			node.selectedOptions[0]?.textContent,
+			"bob@example.com",
+			"the selected option should show the resolved account's address",
+		);
+	});
+
+	it("shows the placeholder when selectedAccountId names an account no longer in config", () => {
+		const dom = mount("acc-missing");
+		const node = select(dom);
+
+		assert.equal(node.value, "", "the select should sit on the placeholder");
+
+		const placeholder =
+			node.querySelector<HTMLOptionElement>('option[value=""]');
+		assert.ok(placeholder, "no placeholder option was rendered");
+		assert.notEqual(
+			node.selectedOptions[0]?.textContent,
+			ACCOUNTS[0]?.email,
+			"an unresolved selection must not read as the first account's address",
+		);
+	});
+});

package/src/components/compose/FromSelector.stories.tsx

@@ -0,0 +1,61 @@
+import { configOperationsGetConfigQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { makeAccount, makeConfig } from "../../test-support/fixtures";
+import { FromSelector } from "./FromSelector";
+
+/**
+ * The compose From line (#1014). With more than one configured account it is
+ * a real picker; the unresolved state — no account chosen because the source
+ * mailbox could not be matched to one — gets a disabled placeholder option
+ * rather than silently falling back to the first account's address.
+ */
+
+const ACCOUNTS = [
+	makeAccount({ accountId: "acc-1", email: "alice@example.com" }),
+	makeAccount({ accountId: "acc-2", email: "bob@example.com" }),
+];
+
+function seededClient(): QueryClient {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	client.setQueryData(
+		configOperationsGetConfigQueryKey(),
+		makeConfig(ACCOUNTS),
+	);
+	return client;
+}
+
+const meta: Meta<typeof FromSelector> = {
+	title: "Components/FromSelector",
+	component: FromSelector,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<QueryClientProvider client={seededClient()}>
+				<Story />
+			</QueryClientProvider>
+		),
+	],
+	args: {
+		onSelect: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof FromSelector>;
+
+/** A resolved account, picked from the configured accounts. */
+export const Resolved: Story = {
+	args: { selectedAccountId: "acc-2" },
+};
+
+/**
+ * No account resolved — the source mailbox could not be matched to a
+ * configured account. The select shows a disabled placeholder instead of
+ * falling back to the first account's address.
+ */
+export const Unresolved: Story = {
+	args: { selectedAccountId: undefined },
+};

package/src/components/compose/FromSelector.tsx

@@ -39,6 +39,8 @@ export const FromSelector = ({
 		);
 	}
 
+	const resolved = accounts.some((a) => a.accountId === selectedAccountId);
+
 	return (
 		<div className="flex items-start gap-2">
 			<label
@@ -49,13 +51,18 @@ export const FromSelector = ({
 			</label>
 			<select
 				id="from-account-selector"
-				value={selectedAccountId ?? ""}
+				value={resolved ? selectedAccountId : ""}
 				onChange={(e) => {
 					const account = accounts.find((a) => a.accountId === e.target.value);
 					if (account) onSelect(account);
 				}}
 				className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
 			>
+				{!resolved && (
+					<option value="" disabled>
+						Choose an account
+					</option>
+				)}
 				{accounts.map((account) => (
 					<option key={account.accountId} value={account.accountId}>
 						{account.email}

package/src/routes/settings/accounts.tsx

@@ -482,9 +482,13 @@ function AccountsSettings() {
 								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
-										? "Re-authentication required"
+										? (account.lastError ?? "Re-authentication required")
 										: isMissingPassword
 											? "Imported from a config file, which carries no password. Enter one to start syncing."
 											: account.lastError