@remit/web-client 0.0.199 → 0.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.199",
+  "version": "0.0.200",
   "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={