@remit/web-client 0.0.199 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.199",
+  "version": "0.0.201",
   "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/AddressField.tsx

@@ -1,17 +1,24 @@
 import { addressOperationsSearchAddressesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { type AddressEntry, ComposeAddressField } from "@remit/ui";
+import {
+	type AddressEntry,
+	ComposeAddressField,
+	type ComposeAddressFieldHandle,
+	type ParsedAddressInput,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { type Ref, useMemo, useState } from "react";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { offerableAsRecipient } from "@/lib/recipient-suggestions";
 
-export type { AddressEntry };
+export type { AddressEntry, ComposeAddressFieldHandle, ParsedAddressInput };
 
 interface AddressFieldProps {
 	label: string;
 	addresses: AddressEntry[];
 	onChange: (addresses: AddressEntry[]) => void;
 	placeholder?: string;
+	onPendingChange?: (pending: ParsedAddressInput) => void;
+	ref?: Ref<ComposeAddressFieldHandle>;
 }
 
 /** Looks the account's known correspondents up for the field to offer. */
@@ -20,6 +27,8 @@ export const AddressField = ({
 	addresses,
 	onChange,
 	placeholder,
+	onPendingChange,
+	ref,
 }: AddressFieldProps) => {
 	const [query, setQuery] = useState("");
 	const debouncedQuery = useDebouncedValue(query, 200);
@@ -48,6 +57,8 @@ export const AddressField = ({
 			placeholder={placeholder}
 			suggestions={suggestions}
 			onQueryChange={setQuery}
+			onPendingChange={onPendingChange}
+			ref={ref}
 		/>
 	);
 };

package/src/components/compose/ComposeForm.tsx

@@ -28,6 +28,7 @@ import {
 } from "@remit/ui";
 import type { ComposeBodyMode } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import type { RefObject } from "react";
 import {
 	lazy,
 	Suspense,
@@ -47,7 +48,11 @@ import {
 	buildMutationErrorBanner,
 	formatErrorDetail,
 } from "../ui/error-banners.js";
-import type { AddressEntry } from "./AddressField";
+import type {
+	AddressEntry,
+	ComposeAddressFieldHandle,
+	ParsedAddressInput,
+} from "./AddressField";
 import { AddressField } from "./AddressField";
 import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
 import { composeSpellcheck } from "./compose-spellcheck.js";
@@ -213,6 +218,20 @@ type SendReadiness =
 	| { status: "blocked"; reason: string }
 	| { status: "ready"; accountId: string };
 
+/** The three recipient lists a send goes out with. */
+interface Recipients {
+	to: AddressEntry[];
+	cc: AddressEntry[];
+	bcc: AddressEntry[];
+}
+
+/** The fields a send takes its recipients from, in the order they are read. */
+interface AddressFieldHandles {
+	to: RefObject<ComposeAddressFieldHandle | null>;
+	cc: RefObject<ComposeAddressFieldHandle | null>;
+	bcc: RefObject<ComposeAddressFieldHandle | null>;
+}
+
 /**
  * Naming To, not "a recipient". Sending goes through the draft, and a draft is
  * created against `CreateOutboxMessageInput`, whose `@minItems(1)` is on
@@ -224,6 +243,28 @@ type SendReadiness =
  */
 const NO_TO_ADDRESS_MESSAGE = "Add a To address before sending.";
 
+/** A field holding text that is not an address, and which field it is. */
+interface UnparsedField {
+	label: string;
+	text: string;
+}
+
+/**
+ * Text a recipient field could not read as an address stops the send and is
+ * quoted back. It is on screen and it was meant for somebody, so sending
+ * without it would deliver a message to fewer people than it was addressed to,
+ * and the composer closing on the send would take the text with it.
+ */
+const unparsedRefusal = ({ label, text }: UnparsedField): string =>
+	`${label} holds "${text}", which is not an address.`;
+
+const firstUnparsed = (
+	fields: readonly UnparsedField[],
+): UnparsedField | undefined =>
+	fields.find((field) => field.text.trim() !== "");
+
+const EMPTY_PENDING: ParsedAddressInput = { entries: [], unparsed: "" };
+
 const isFormEmpty = (
 	toAddresses: AddressEntry[],
 	ccAddresses: AddressEntry[],
@@ -257,6 +298,8 @@ interface WiredComposeHeaderProps {
 	setShowBcc: (v: boolean) => void;
 	subject: string;
 	setSubject: (v: string) => void;
+	fieldHandles: AddressFieldHandles;
+	onToPendingChange: (pending: ParsedAddressInput) => void;
 }
 
 const WiredComposeHeader = ({
@@ -275,6 +318,8 @@ const WiredComposeHeader = ({
 	setShowBcc,
 	subject,
 	setSubject,
+	fieldHandles,
+	onToPendingChange,
 }: WiredComposeHeaderProps) => {
 	const isDesktop = useIsDesktop();
 	const { isKeyboardOpen } = useVisualViewport();
@@ -307,6 +352,8 @@ const WiredComposeHeader = ({
 					addresses={toAddresses}
 					onChange={setToAddresses}
 					placeholder="Recipients"
+					onPendingChange={onToPendingChange}
+					ref={fieldHandles.to}
 				/>
 			}
 			cc={
@@ -315,6 +362,7 @@ const WiredComposeHeader = ({
 						label="Cc"
 						addresses={ccAddresses}
 						onChange={setCcAddresses}
+						ref={fieldHandles.cc}
 					/>
 				) : undefined
 			}
@@ -324,6 +372,7 @@ const WiredComposeHeader = ({
 						label="Bcc"
 						addresses={bccAddresses}
 						onChange={setBccAddresses}
+						ref={fieldHandles.bcc}
 					/>
 				) : undefined
 			}
@@ -350,6 +399,25 @@ export const ComposeForm = ({
 	const [toAddresses, setToAddresses] = useState<AddressEntry[]>([]);
 	const [ccAddresses, setCcAddresses] = useState<AddressEntry[]>([]);
 	const [bccAddresses, setBccAddresses] = useState<AddressEntry[]>([]);
+	/**
+	 * What To is holding but has not committed. A press on Send takes it, so the
+	 * refusal for having no recipient must not stand while an address is on
+	 * screen — the button's own reason comes from this state, before the press.
+	 */
+	const [pendingTo, setPendingTo] = useState<ParsedAddressInput>(EMPTY_PENDING);
+	const toFieldRef = useRef<ComposeAddressFieldHandle>(null);
+	const ccFieldRef = useRef<ComposeAddressFieldHandle>(null);
+	const bccFieldRef = useRef<ComposeAddressFieldHandle>(null);
+	const fieldHandles = useMemo<AddressFieldHandles>(
+		() => ({ to: toFieldRef, cc: ccFieldRef, bcc: bccFieldRef }),
+		[],
+	);
+	/** A new document leaves nothing typed behind in a field that did not remount. */
+	const clearPendingFields = useCallback(() => {
+		toFieldRef.current?.clearPending();
+		ccFieldRef.current?.clearPending();
+		bccFieldRef.current?.clearPending();
+	}, []);
 	const [subject, setSubject] = useState("");
 	const [showCc, setShowCc] = useState(false);
 	const [showBcc, setShowBcc] = useState(false);
@@ -420,6 +488,7 @@ export const ComposeForm = ({
 		setToAddresses([]);
 		setCcAddresses([]);
 		setBccAddresses([]);
+		clearPendingFields();
 		setSubject("");
 		setShowCc(false);
 		setShowBcc(false);
@@ -431,7 +500,7 @@ export const ComposeForm = ({
 		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
 		setOpenDocumentId(outboxMessageId);
-	}, [outboxMessageId]);
+	}, [outboxMessageId, clearPendingFields]);
 
 	const { signature } = useSignature(selectedAccountId);
 	// Read when a new message starts, never depended on: a signature arriving is
@@ -527,6 +596,11 @@ export const ComposeForm = ({
 		if (resumedDraftRef.current) return;
 		if (!sourceMessage) return;
 
+		// The fields are being rewritten for a different answer, so what was typed
+		// into one and left there belongs to the answer being left behind. Without
+		// this the blur timer commits it into the new one 150 ms later.
+		clearPendingFields();
+
 		if (mode === "reply" || mode === "reply-all") {
 			const { to, cc } = getReplyAddresses(sourceMessage, mode, account?.email);
 			setToAddresses(to);
@@ -545,7 +619,7 @@ export const ComposeForm = ({
 			setBccAddresses([]);
 			setSubject(buildForwardSubject(sourceMessage.envelope.subject));
 		}
-	}, [mode, sourceMessage, account?.email]);
+	}, [mode, sourceMessage, account?.email, clearPendingFields]);
 
 	// Quoted reply/forward content lives at the per-part `contentUrl` since
 	// #224 PR 3 — fetch it via the same hook MessageBody uses, and degrade
@@ -666,28 +740,42 @@ export const ComposeForm = ({
 	// no-op: the state it reads has no way to be blocked without a reason. A
 	// ready state carries the account the message goes out from, so the send
 	// path has no condition of its own left to refuse on in silence.
-	const sendReadiness = useMemo<SendReadiness>(() => {
-		if (isSending) return { status: "sending" };
-		if (!selectedAccountId) {
-			return { status: "blocked", reason: "Choose an account to send from." };
-		}
-		if (selectedAccountMissingSmtp) {
-			return { status: "blocked", reason: SMTP_MISSING_MESSAGE };
-		}
-		if (toAddresses.length === 0) {
-			return { status: "blocked", reason: NO_TO_ADDRESS_MESSAGE };
-		}
-		return { status: "ready", accountId: selectedAccountId };
-	}, [
-		isSending,
-		selectedAccountId,
-		selectedAccountMissingSmtp,
-		toAddresses.length,
-	]);
+	const readinessFor = useCallback(
+		(toCount: number, unparsed: UnparsedField | undefined): SendReadiness => {
+			if (isSending) return { status: "sending" };
+			if (!selectedAccountId) {
+				return { status: "blocked", reason: "Choose an account to send from." };
+			}
+			if (selectedAccountMissingSmtp) {
+				return { status: "blocked", reason: SMTP_MISSING_MESSAGE };
+			}
+			if (unparsed) {
+				return { status: "blocked", reason: unparsedRefusal(unparsed) };
+			}
+			if (toCount === 0) {
+				return { status: "blocked", reason: NO_TO_ADDRESS_MESSAGE };
+			}
+			return { status: "ready", accountId: selectedAccountId };
+		},
+		[isSending, selectedAccountId, selectedAccountMissingSmtp],
+	);
+	const sendReadiness = useMemo<SendReadiness>(
+		() =>
+			readinessFor(
+				toAddresses.length + pendingTo.entries.length,
+				firstUnparsed([{ label: "To", text: pendingTo.unparsed }]),
+			),
+		[readinessFor, toAddresses.length, pendingTo],
+	);
 	const sendState: ComposeSendState = sendReadiness;
 
 	useEffect(() => {
 		if (!selectedAccountId) return;
+		// Nor one that is on its way out. Send commits the address fields as it
+		// goes, which lands here as a recipient change and would re-arm the timer
+		// `stopAutoSave` has just dropped — a draft write arriving after the send
+		// took the row out of draft (#845.6).
+		if (sendInFlightRef.current) return;
 		// Don't autosave a document the fields are no longer on. They trail the
 		// address by a commit whenever it changes, so writing here sends the
 		// message just left to whatever the address now names — the previous
@@ -734,7 +822,7 @@ export const ComposeForm = ({
 	]);
 
 	const handleSend = useCallback(
-		async (accountId: string) => {
+		async (accountId: string, recipients: Recipients) => {
 			if (sendInFlightRef.current) return;
 
 			sendInFlightRef.current = true;
@@ -760,14 +848,14 @@ export const ComposeForm = ({
 				// that fails stops the send rather than transmitting the older copy.
 				const flushed = await saveImmediately({
 					accountId,
-					toAddresses: toAddresses.map((a) => a.email),
+					toAddresses: recipients.to.map((a) => a.email),
 					ccAddresses:
-						ccAddresses.length > 0
-							? ccAddresses.map((a) => a.email)
+						recipients.cc.length > 0
+							? recipients.cc.map((a) => a.email)
 							: undefined,
 					bccAddresses:
-						bccAddresses.length > 0
-							? bccAddresses.map((a) => a.email)
+						recipients.bcc.length > 0
+							? recipients.bcc.map((a) => a.email)
 							: undefined,
 					subject: subject || undefined,
 					textBody,
@@ -815,9 +903,6 @@ export const ComposeForm = ({
 			}
 		},
 		[
-			toAddresses,
-			ccAddresses,
-			bccAddresses,
 			subject,
 			body,
 			bodyMode,
@@ -856,14 +941,49 @@ export const ComposeForm = ({
 		[pushError],
 	);
 
+	/**
+	 * Send goes out to the addresses on screen, not to the ones the fields have
+	 * got round to committing. Each field commits on blur behind a timer, and the
+	 * press that sends is the press that blurs — so a recipient typed and left in
+	 * the field is taken here, in the same tick, before the message is judged to
+	 * have anywhere to go (#845.6).
+	 */
 	const attemptSend = useCallback(() => {
 		if (sendReadiness.status === "sending") return;
-		if (sendReadiness.status === "blocked") {
-			reportBlocked(sendReadiness.reason);
+
+		const to = fieldHandles.to.current?.commitPending();
+		const cc = fieldHandles.cc.current?.commitPending();
+		const bcc = fieldHandles.bcc.current?.commitPending();
+		const recipients: Recipients = {
+			to: to?.addresses ?? toAddresses,
+			cc: cc?.addresses ?? ccAddresses,
+			bcc: bcc?.addresses ?? bccAddresses,
+		};
+
+		const readiness = readinessFor(
+			recipients.to.length,
+			firstUnparsed([
+				{ label: "To", text: to?.unparsed ?? "" },
+				{ label: "Cc", text: cc?.unparsed ?? "" },
+				{ label: "Bcc", text: bcc?.unparsed ?? "" },
+			]),
+		);
+		if (readiness.status === "sending") return;
+		if (readiness.status === "blocked") {
+			reportBlocked(readiness.reason);
 			return;
 		}
-		void handleSend(sendReadiness.accountId);
-	}, [sendReadiness, reportBlocked, handleSend]);
+		void handleSend(readiness.accountId, recipients);
+	}, [
+		sendReadiness.status,
+		fieldHandles,
+		toAddresses,
+		ccAddresses,
+		bccAddresses,
+		readinessFor,
+		reportBlocked,
+		handleSend,
+	]);
 
 	const handleAccountChange = useCallback(
 		(acct: RemitImapAccountResponse) => {
@@ -901,6 +1021,8 @@ export const ComposeForm = ({
 					setShowBcc={setShowBcc}
 					subject={subject}
 					setSubject={setSubject}
+					fieldHandles={fieldHandles}
+					onToPendingChange={setPendingTo}
 				/>
 			}
 			quoted={

package/src/components/mail/SelectionWizardHost.search-entry.test.ts

@@ -1,41 +1,82 @@
-import assert from "node:assert/strict";
-import { readFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { describe, it } from "node:test";
-import { fileURLToPath } from "node:url";
-
 /**
  * A filter made from a search belongs to the account the search ran over (#524).
- * The surface hands its account to the host on the props; a search entry that
- * reads past it writes the rule against whichever account happens to be first in
- * the list, and the mail the user was looking at is never filtered.
  *
- * Which account wins is decided — and tested — in
- * `../../lib/organize/search-to-rule.test.ts`. What is read off the source here
- * is that the host asks that question with the surface's account in hand, which
- * is the wiring the bug lived in and which no unit of the resolver can prove.
- * The host wires routing, history and several data hooks together, so it is read
- * rather than rendered, as this package's other component-level rules are (see
- * `SelectionWizardHost.run-exit.test.ts`).
+ * The surface hands its account to the host on the props; a search entry that
+ * reaches past it writes the rule against whichever account happens to be first
+ * in the list, and the mail the user was looking at is never filtered. Which
+ * account wins between the query and the surface is
+ * `../../lib/organize/search-to-rule.test.ts`; what is asserted here is the set
+ * of props a search entry replaces, the account among them.
  */
 
-const here = dirname(fileURLToPath(import.meta.url));
-const source = readFileSync(resolve(here, "SelectionWizardHost.tsx"), "utf8");
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { SearchConversion } from "@remit/ui";
+import { searchEntryOverrides } from "./SelectionWizardHost";
+
+const conversion = (
+	over: Partial<SearchConversion> = {},
+): SearchConversion => ({
+	clauses: [],
+	matchOperator: "all",
+	droppedFacets: [],
+	keptTerms: false,
+	droppedSemantic: false,
+	...over,
+});
+
+const accounts = [{ accountId: "acc-first" }, { accountId: "acc-surface" }];
+
+describe("the account a search entry writes its rule against", () => {
+	it("is the one the surface handed over", () => {
+		assert.equal(
+			searchEntryOverrides(conversion(), { accountId: "acc-surface" }, accounts)
+				.accountId,
+			"acc-surface",
+		);
+	});
 
-const host = source.match(
-	/export function SelectionWizardHost\(([\s\S]*)$/,
-)?.[1];
+	it("is the one the query names when it names one", () => {
+		assert.equal(
+			searchEntryOverrides(
+				conversion({ targetAccountId: "acc-typed" }),
+				{ accountId: "acc-surface" },
+				accounts,
+			).accountId,
+			"acc-typed",
+		);
+	});
+
+	// The first configured account is the last resort, never the answer while the
+	// surface has one of its own.
+	it("falls back to the first configured account only when the surface has none", () => {
+		assert.equal(
+			searchEntryOverrides(conversion(), { accountId: undefined }, accounts)
+				.accountId,
+			"acc-first",
+		);
+	});
+});
 
-describe("the search entry's account", () => {
-	it("is resolved with the account the surface handed over", () => {
-		assert.ok(host, "the host is gone");
-		const call = host.match(/searchRuleAccountId\(([\s\S]*?)\)/)?.[1];
-		assert.ok(call, "the search entry resolves no account of its own");
-		assert.match(call, /\bprops\.accountId\b/);
+describe("what else a search entry replaces", () => {
+	it("ticks nothing, carries no restriction and drops any escalation", () => {
+		const overrides = searchEntryOverrides(
+			conversion(),
+			{ accountId: "acc-surface" },
+			accounts,
+		);
+		assert.equal(overrides.verb, "organize");
+		assert.deepEqual(overrides.selection, []);
+		assert.equal(overrides.selectionRestriction, undefined);
+		assert.equal(overrides.escalated, undefined);
 	});
 
-	it("never reaches past it for the first configured account", () => {
-		assert.ok(host, "the host is gone");
-		assert.doesNotMatch(host, /accounts\[0\]/);
+	it("hands the conversion on so the properties step can seed its clauses", () => {
+		const seeded = conversion({ keptTerms: true });
+		assert.equal(
+			searchEntryOverrides(seeded, { accountId: "acc-surface" }, accounts)
+				.searchConversion,
+			seeded,
+		);
 	});
 });