@remit/web-client 0.0.198 → 0.0.200

package/package.json

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

package/src/components/compose/ComposeProvider.tsx

@@ -58,6 +58,15 @@ const isSettledStatus = (status: string | undefined): boolean =>
  */
 export const OUTBOX_ROW_META = softErrorStatuses(404);
 
+/**
+ * The watch is over on a settled status and on any error the read comes back
+ * with. The 404 is the settled state itself; every other refusal has already
+ * escalated once through the query cache, and asking again every two seconds
+ * only repeats that escalation — a fresh fatal event per tick — until the cap.
+ */
+const isWatchOver = (status: string | undefined, error: unknown): boolean =>
+	isSettledStatus(status) || error != null;
+
 export const ComposeProvider = ({
 	children,
 }: {
@@ -76,8 +85,8 @@ export const ComposeProvider = ({
 		meta: OUTBOX_ROW_META,
 		retry: (failureCount, error) => !isNotFound(error) && failureCount < 1,
 		refetchInterval: (query) => {
-			if (isSettledStatus(query.state.data?.status)) return false;
-			if (isNotFound(query.state.error)) return false;
+			if (isWatchOver(query.state.data?.status, query.state.error))
+				return false;
 			return POLL_INTERVAL_MS;
 		},
 	});
@@ -91,8 +100,7 @@ export const ComposeProvider = ({
 
 	useEffect(() => {
 		if (!pollingMessageId) return;
-		if (!isSettledStatus(polledMessage?.status) && !isNotFound(pollError))
-			return;
+		if (!isWatchOver(polledMessage?.status, pollError)) return;
 
 		stopWatching();
 	}, [polledMessage, pollError, pollingMessageId, stopWatching]);

package/src/components/compose/send-poll-server-error.render.test.ts

@@ -0,0 +1,120 @@
+/**
+ * Issue #924: the send watch decided its next tick from the polled status
+ * alone. A 5xx carries no status, so nothing matched, the interval stayed at two
+ * seconds, and every failed tick reached the query cache and escalated again —
+ * one overlay for the user, a fresh fatal event with a fresh correlation id for
+ * telemetry, for the whole minute the cap allowed.
+ *
+ * A poll the server refuses is over. It escalates once, the watch comes down,
+ * and the outbox list is invalidated so the row's real state is what the user
+ * reads next.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { outboxOperationsListOutboxMessagesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createElement, useEffect } from "react";
+import { __resetFatalError, subscribeFatalError } from "../../lib/fatal-error";
+import { handleQueryCacheError } from "../../lib/query-error-handler";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
+import { ComposeProvider, useCompose } from "./ComposeProvider";
+
+const OUTBOX_MESSAGE_ID = "ob-924";
+const POLL_INTERVAL_MS = 2000;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let fatals = 0;
+let unsubscribe: (() => void) | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	unsubscribe?.();
+	unsubscribe = undefined;
+	fatals = 0;
+	__resetFatalError();
+});
+
+const polls = (): number =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "GET" && call.path.endsWith(OUTBOX_MESSAGE_ID),
+	).length;
+
+const outboxListIsStale = (): boolean =>
+	harness?.queryClient
+		.getQueryCache()
+		.find({ queryKey: outboxOperationsListOutboxMessagesQueryKey() })?.state
+		.isInvalidated === true;
+
+const Sender = () => {
+	const { startSendPolling } = useCompose();
+
+	useEffect(() => {
+		startSendPolling(OUTBOX_MESSAGE_ID);
+	}, [startSendPolling]);
+
+	return null;
+};
+
+const mount = async (pollStatus: number): Promise<void> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith(OUTBOX_MESSAGE_ID)) {
+			return httpError(pollStatus, "the outbox is having a moment");
+		}
+		return { messages: [] };
+	});
+
+	unsubscribe = subscribeFatalError(() => {
+		fatals += 1;
+	});
+
+	const queryClient = new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		// The watch sets its own retry policy; a zero delay only spares the test
+		// the backoff it would otherwise sit through.
+		defaultOptions: { queries: { retryDelay: 0 }, mutations: { retry: false } },
+	});
+
+	harness = createDomHarness({ queryClient });
+	queryClient.setQueryData(outboxOperationsListOutboxMessagesQueryKey(), {
+		messages: [],
+	});
+	harness.renderApp(
+		createElement(ComposeProvider, null, createElement(Sender)),
+	);
+	await harness.flush();
+};
+
+describe("a send watch the server refuses (#924)", () => {
+	it("escalates once and stops polling", async () => {
+		await mount(500);
+		await harness?.wait(POLL_INTERVAL_MS * 3);
+
+		assert.equal(fatals, 1, "the refusal escalated exactly once");
+		assert.equal(
+			polls(),
+			2,
+			"the read was attempted once and retried once, then the watch came down",
+		);
+	});
+
+	it("invalidates the outbox list so the row's real state is on screen", async () => {
+		await mount(500);
+		await harness?.wait(POLL_INTERVAL_MS);
+
+		assert.ok(outboxListIsStale(), "the outbox list was marked for a refetch");
+	});
+
+	it("leaves the settled 404 alone — one stop, no escalation", async () => {
+		await mount(404);
+		await harness?.wait(POLL_INTERVAL_MS * 2);
+
+		assert.equal(fatals, 0, "the deleted row is the confirmation, not a fault");
+		assert.equal(polls(), 1, "a 404 is not retried and not polled again");
+	});
+});