@remit/ui 0.0.109 → 0.0.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "type": "module",
   "files": [
     "src"

package/src/components/compose-action-bar.render.test.ts

@@ -5,10 +5,10 @@ import { renderToString } from "react-dom/server";
 import { ComposeActionBar } from "./compose-action-bar.js";
 
 const baseProps = {
+	send: { status: "ready" } as const,
 	onSend: () => undefined,
+	onBlocked: () => undefined,
 	onDiscard: () => undefined,
-	sending: false,
-	canSend: true,
 };
 
 describe("ComposeActionBar", () => {
@@ -23,8 +23,7 @@ describe("ComposeActionBar", () => {
 		const html = renderToString(
 			createElement(ComposeActionBar, {
 				...baseProps,
-				canSend: false,
-				unavailableReason: "SMTP not configured",
+				send: { status: "blocked", reason: "SMTP not configured" },
 			}),
 		);
 		assert.match(html, /Send/);
@@ -34,7 +33,10 @@ describe("ComposeActionBar", () => {
 
 	it("uses aria-busy while sending", () => {
 		const html = renderToString(
-			createElement(ComposeActionBar, { ...baseProps, sending: true }),
+			createElement(ComposeActionBar, {
+				...baseProps,
+				send: { status: "sending" },
+			}),
 		);
 		assert.match(html, /aria-busy="true"/);
 		assert.doesNotMatch(html, /disabled=""/);

package/src/components/compose-action-bar.stories.tsx

@@ -1,17 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { expect, userEvent, within } from "storybook/test";
+import { expect, fn, userEvent, within } from "storybook/test";
 import { ComposeActionBar } from "./compose-action-bar.js";
 
+/**
+ * Send, Discard, and what the draft is doing. Send is never greyed out and
+ * never silent: a state that cannot send carries the sentence that says why,
+ * and the press reports it.
+ */
 const meta: Meta<typeof ComposeActionBar> = {
 	title: "Mail/ComposeActionBar",
 	component: ComposeActionBar,
 	parameters: { layout: "padded" },
 	args: {
-		onSend: () => undefined,
-		onDiscard: () => undefined,
-		sending: false,
-		canSend: true,
+		send: { status: "ready" },
+		onSend: fn(),
+		onBlocked: fn(),
+		onDiscard: fn(),
 		saveStatus: "idle",
 	},
 };
@@ -29,17 +34,20 @@ export const SaveFailed: Story = { args: { saveStatus: "error" } };
 
 export const Sending: Story = {
 	name: "Sending — also while the pending draft is written",
-	args: { sending: true },
+	args: { send: { status: "sending" } },
 };
 
 /**
- * Send is never greyed out. Pressing it with nothing to send on reports the
+ * Send is never greyed out. Pressing it with nobody to send to reports the
  * reason where the app would raise its banner — a control that swallowed the
  * press would be the dead button this bar exists to avoid.
  */
-export const CannotSend: Story = {
-	name: "Cannot send — stays pressable",
-	render: () => {
+export const NoRecipient: Story = {
+	name: "Blocked — nobody to send to",
+	args: {
+		send: { status: "blocked", reason: "Add at least one recipient." },
+	},
+	render: (args) => {
 		const [reason, setReason] = useState<string>();
 		return (
 			<div className="space-y-2">
@@ -53,22 +61,31 @@ export const CannotSend: Story = {
 					</div>
 				)}
 				<ComposeActionBar
-					onSend={() => undefined}
-					onDiscard={() => undefined}
-					sending={false}
-					canSend={false}
-					saveStatus="idle"
-					unavailableReason="SMTP not configured"
-					onUnavailable={setReason}
+					{...args}
+					onBlocked={(next) => {
+						args.onBlocked(next);
+						setReason(next);
+					}}
 				/>
 			</div>
 		);
 	},
-	play: async ({ canvasElement }) => {
+	play: async ({ args, canvasElement }) => {
 		const canvas = within(canvasElement);
 		await userEvent.click(canvas.getByRole("button", { name: "Send" }));
 		await expect(canvas.getByTestId("compose-unavailable")).toHaveTextContent(
-			"SMTP not configured",
+			"Add at least one recipient.",
 		);
+		await expect(args.onSend).not.toHaveBeenCalled();
+	},
+};
+
+export const SmtpMissing: Story = {
+	name: "Blocked — the account cannot send",
+	args: {
+		send: {
+			status: "blocked",
+			reason: "This account can't send mail until SMTP is configured.",
+		},
 	},
 };

package/src/components/compose-action-bar.tsx

@@ -3,20 +3,26 @@ import { Button } from "./button.js";
 
 export type ComposeSaveStatus = "idle" | "saving" | "saved" | "error";
 
+/**
+ * Whether Send can act, and when it cannot, the sentence that says why.
+ *
+ * A blocked state cannot be built without its reason, so no arrangement of
+ * props produces a Send press that reports nothing. The pair this replaces
+ * could: a message with no recipient set `canSend` false and left the reason
+ * undefined, and the press did nothing at all.
+ */
+export type ComposeSendState =
+	| { status: "ready" }
+	| { status: "sending" }
+	| { status: "blocked"; reason: string };
+
 export interface ComposeActionBarProps {
+	send: ComposeSendState;
 	onSend: () => void;
+	/** Called with the reason when Send is pressed while it cannot act. */
+	onBlocked: (reason: string) => void;
 	onDiscard: () => void;
-	sending: boolean;
-	canSend: boolean;
 	saveStatus?: ComposeSaveStatus;
-	/**
-	 * Why sending is unavailable (e.g. "SMTP not configured"). Shown on the
-	 * Send button as a tooltip; surfaced to the user on press via
-	 * `onUnavailable` rather than disabling the control.
-	 */
-	unavailableReason?: string;
-	/** Called when Send is pressed while it cannot act — explain, don't disable. */
-	onUnavailable?: (reason: string) => void;
 }
 
 const SaveStatusIndicator = ({ status }: { status: ComposeSaveStatus }) => {
@@ -35,29 +41,31 @@ const SaveStatusIndicator = ({ status }: { status: ComposeSaveStatus }) => {
 };
 
 /**
- * Compose footer: Send + Discard. Send stays pressable even when it can't act
- * yet — on press it explains why via `onUnavailable` instead of being
- * disabled (never-disable). The pill keeps a fixed min-height so it never
- * clips below the fold on mobile.
+ * Compose footer: Send + Discard. Send stays pressable when it cannot act and
+ * says why on press instead of greying out — a dead control leaves the user
+ * guessing whether the app is broken or the message is. The pill keeps a fixed
+ * min-height so it never clips below the fold on mobile.
  */
 export function ComposeActionBar({
+	send,
 	onSend,
+	onBlocked,
 	onDiscard,
-	sending,
-	canSend,
 	saveStatus = "idle",
-	unavailableReason,
-	onUnavailable,
 }: ComposeActionBarProps) {
+	const sending = send.status === "sending";
+	const blockedReason = send.status === "blocked" ? send.reason : undefined;
+
 	return (
 		<div className="flex items-center justify-between border-t border-line px-3 py-2">
-			<div className="flex items-center gap-3">
+			<div className="flex min-w-0 items-center gap-3">
 				<Button
 					variant="primary"
 					size="md"
 					aria-busy={sending}
-					title={!canSend ? unavailableReason : undefined}
-					className="min-h-11 rounded-full px-4"
+					title={blockedReason}
+					className="min-h-11 shrink-0 rounded-full px-4"
+					data-testid="compose-send"
 					icon={
 						sending ? (
 							<Loader2 className="size-4 animate-spin" />
@@ -67,8 +75,8 @@ export function ComposeActionBar({
 					}
 					onClick={() => {
 						if (sending) return;
-						if (!canSend) {
-							if (unavailableReason) onUnavailable?.(unavailableReason);
+						if (blockedReason !== undefined) {
+							onBlocked(blockedReason);
 							return;
 						}
 						onSend();

package/src/components/compose-body-skeleton.tsx

@@ -0,0 +1,10 @@
+export const ComposeBodySkeleton = () => (
+	<div
+		aria-hidden="true"
+		data-testid="compose-body-skeleton"
+		className="min-h-[120px] px-3 py-2"
+	>
+		<div className="mb-2 h-8 animate-pulse rounded bg-surface-sunken" />
+		<div className="min-h-[80px] animate-pulse rounded bg-surface-sunken/50" />
+	</div>
+);

package/src/components/compose-body.stories.tsx

@@ -33,20 +33,33 @@ const DUTCH_PROSE =
 /** The languages a Dutch-writing account has configured, most-used first. */
 const LANGUAGES = ["nl", "en", "de"];
 
+const SIGNED_DOCUMENT = "<p></p><p>-- </p><p>Matthijs</p>";
+
+const LONG_PLAIN_PROSE = [
+	"Beste Anna, hierbij de planning voor volgende week zoals besproken tijdens de vergadering van donderdag.",
+	"",
+	"| Region | Total |",
+	"| --- | --- |",
+	"| EMEA | 412 |",
+].join("\n");
+
 const noop = () => undefined;
 
 const Harness = ({
 	initialHtml = "",
 	initialText = "",
 	startIn = "rich",
+	initialCaret,
 	onConversionError,
 	conversions,
 	languages = LANGUAGES,
 	quoted,
+	width = 680,
 }: {
 	initialHtml?: string;
 	initialText?: string;
 	startIn?: "rich" | "plain";
+	initialCaret?: "start" | "end";
 	onConversionError?: (failure: ConversionFailure) => void;
 	conversions?: {
 		toPlain: (value: RichTextValue) => string;
@@ -54,11 +67,15 @@ const Harness = ({
 	};
 	languages?: string[];
 	quoted?: string;
+	width?: number;
 }) => {
 	const [mode, setMode] = useState<"rich" | "plain">(startIn);
 	const [failure, setFailure] = useState<ConversionFailure>();
 	return (
-		<div className="flex h-[460px] w-[680px] flex-col overflow-auto rounded-md border border-line bg-canvas">
+		<div
+			style={{ width }}
+			className="flex h-[460px] flex-col overflow-auto rounded-md border border-line bg-canvas"
+		>
 			{failure && (
 				<div
 					role="alert"
@@ -74,6 +91,7 @@ const Harness = ({
 				onModeChange={setMode}
 				initialHtml={initialHtml}
 				initialText={initialText}
+				initialCaret={initialCaret}
 				onChange={noop}
 				onConversionError={(reported) => {
 					setFailure(reported);
@@ -136,6 +154,53 @@ export const RichDocument: Story = {
 	args: { initialHtml: RICH_DOCUMENT },
 };
 
+/**
+ * A new message opens above its signature. The caret used to land at the end of
+ * the document, which on any account that has one put the first keystroke under
+ * the sign-off.
+ */
+export const OpensAboveTheSignature: Story = {
+	name: "A new message opens above the signature",
+	args: { initialHtml: SIGNED_DOCUMENT, initialCaret: "start" },
+	play: async ({ canvasElement }) => {
+		const editable = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=compose-body]",
+		);
+		if (!editable) throw new Error("the rich surface is not mounted");
+
+		await waitFor(async () => {
+			await expect(editable).toHaveFocus();
+		});
+		await userEvent.keyboard("Hoi Anna");
+
+		await waitFor(async () => {
+			const text = editable.textContent ?? "";
+			await expect(text).toContain("Hoi Anna");
+			await expect(text.indexOf("Hoi Anna")).toBeLessThan(
+				text.indexOf("Matthijs"),
+			);
+		});
+	},
+};
+
+/**
+ * Plain prose wraps. A message whose every paragraph ran off the right edge
+ * could not be read back at all, which is the worse of the two failures at 390 —
+ * a pipe table wider than the surface is the one that gives.
+ */
+export const PlainProseWraps: Story = {
+	name: "Plain, wrapping at a phone's width",
+	args: { startIn: "plain", initialText: LONG_PLAIN_PROSE, width: 390 },
+	play: async ({ canvasElement }) => {
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface is not mounted");
+		// A pixel of tolerance: sub-pixel layout rounding, not a scrollbar.
+		await expect(textarea.scrollWidth).toBeLessThanOrEqual(
+			textarea.clientWidth + 1,
+		);
+	},
+};
+
 export const PlainDraft: Story = {
 	name: "Plain, reopened from Markdown",
 	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },

package/src/components/compose-body.tsx

@@ -9,7 +9,7 @@ import { ConfirmDialog } from "./confirm-dialog.js";
 import { PlainTextEditor } from "./plain-text-editor.js";
 import { markdownToHtml } from "./rich-text-document.js";
 import { RichTextEditor } from "./rich-text-editor.js";
-import type { RichTextValue } from "./rich-text-value.js";
+import type { ComposeCaret, RichTextValue } from "./rich-text-value.js";
 import { useComposeLanguage } from "./use-compose-language.js";
 
 export interface ConversionFailure {
@@ -49,7 +49,11 @@ export interface ComposeBodyProps {
 	initialText: string;
 	onChange: (value: RichTextValue) => void;
 	onSubmit?: () => void;
-	autoFocus?: boolean;
+	/**
+	 * Where the caret lands when the composer opens. Absent, the surface does
+	 * not take focus.
+	 */
+	initialCaret?: ComposeCaret;
 	onConversionError: (failure: ConversionFailure) => void;
 	conversions?: ComposeConversions;
 	/** The account's writing languages, most-used first. */
@@ -73,7 +77,7 @@ export const ComposeBody = ({
 	initialText,
 	onChange,
 	onSubmit,
-	autoFocus = false,
+	initialCaret,
 	onConversionError,
 	conversions = DEFAULT_COMPOSE_CONVERSIONS,
 	languages,
@@ -97,7 +101,7 @@ export const ComposeBody = ({
 
 	// Detection reads the body the user typed. The quoted reply block is not part
 	// of it — that lives outside the editor, in the form's own `quoted` slot.
-	const { language, choose } = useComposeLanguage({
+	const { language, source, choose } = useComposeLanguage({
 		languages,
 		text: bodyText,
 		initialLanguage,
@@ -166,6 +170,7 @@ export const ComposeBody = ({
 			<ComposeLanguageChip
 				language={language}
 				languages={languages}
+				source={source}
 				onSelect={choose}
 			/>
 			<ComposeModeToggle mode={mode} onToggle={handleToggle} />
@@ -179,7 +184,7 @@ export const ComposeBody = ({
 					value={plainText}
 					onChange={handlePlainChange}
 					onSubmit={onSubmit}
-					autoFocus={focusSwitchedSurface}
+					initialCaret={focusSwitchedSurface ? "end" : initialCaret}
 					lang={language}
 					trailing={trailing}
 				/>
@@ -189,7 +194,7 @@ export const ComposeBody = ({
 					initialHtml={richHtml}
 					onChange={handleRichChange}
 					onSubmit={onSubmit}
-					autoFocus={autoFocus || focusSwitchedSurface}
+					initialCaret={focusSwitchedSurface ? "end" : initialCaret}
 					lang={language}
 					trailing={trailing}
 				/>

package/src/components/compose-header.stories.tsx

@@ -49,11 +49,13 @@ const Harness = ({
 	const [showCc, setShowCc] = useState(initialCc !== undefined);
 	const [showBcc, setShowBcc] = useState(initialBcc !== undefined);
 	const [subject, setSubject] = useState(initialSubject);
+	const [isCollapsed, setIsCollapsed] = useState(collapsed);
 
 	return (
 		<div className="w-[560px] border border-line bg-surface">
 			<ComposeHeader
-				collapsed={collapsed}
+				collapsed={isCollapsed}
+				onExpand={() => setIsCollapsed(false)}
 				summary={composeHeaderSummary({ to, cc, bcc, subject })}
 				from={<FromRow email="alice@northwind.example" />}
 				to={
@@ -133,6 +135,30 @@ export const CollapsedAndEmpty: Story = {
 	render: () => <Harness collapsed />,
 };
 
+/**
+ * The collapsed line is the way back. Pressing it puts the recipient rows
+ * back — with the keyboard up it is the only route to Cc, Bcc and the subject,
+ * and a bar that looks pressable and is not reads as a broken app.
+ */
+export const CollapsedExpandsOnPress: Story = {
+	render: () => (
+		<Harness
+			collapsed
+			initialTo={[
+				{ email: "ada@northwind.example", displayName: "Ada Lovelace" },
+			]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Show recipients and subject" }),
+		);
+		await expect(canvas.getByLabelText("To:")).toBeVisible();
+	},
+};
+
 export const RevealingCcLeavesBccOnOffer: Story = {
 	render: () => <Harness />,
 	play: async ({ canvasElement }) => {

package/src/components/compose-header.tsx

@@ -1,3 +1,4 @@
+import { ChevronDown } from "lucide-react";
 import type { ReactNode } from "react";
 import type { AddressEntry } from "./compose-address-field.js";
 
@@ -10,6 +11,12 @@ export interface ComposeHeaderProps {
 	collapsed?: boolean;
 	/** One line of what the collapsed header stands in for. */
 	summary?: string;
+	/**
+	 * Puts the recipient rows back. Required, because the collapsed line is the
+	 * only way back to Cc, Bcc and the subject while the keyboard is up, and a
+	 * bar that looks pressable and is not is the failure this replaces.
+	 */
+	onExpand: () => void;
 	from: ReactNode;
 	to: ReactNode;
 	/** Present once the field has been revealed; absent leaves the reveal button. */
@@ -65,6 +72,7 @@ export const composeHeaderSummary = ({
 export const ComposeHeader = ({
 	collapsed = false,
 	summary = "",
+	onExpand,
 	from,
 	to,
 	cc,
@@ -75,15 +83,19 @@ export const ComposeHeader = ({
 }: ComposeHeaderProps) => {
 	if (collapsed) {
 		return (
-			<div
-				className="flex items-center gap-2 px-3 py-1.5 border-b border-line overflow-hidden"
+			<button
+				type="button"
+				onClick={onExpand}
+				aria-label="Show recipients and subject"
+				className="flex min-h-11 w-full items-center gap-2 overflow-hidden border-b border-line px-3 py-1.5 text-left transition-colors hover:bg-surface-sunken"
 				data-testid="compose-header-collapsed"
 			>
 				<span className="truncate text-xs text-fg-muted">{summary || "…"}</span>
-				<span className="shrink-0 inline-flex items-center justify-center rounded bg-surface-sunken px-1.5 py-0.5 text-2xs text-fg-muted">
-					…
-				</span>
-			</div>
+				<ChevronDown
+					className="ml-auto size-4 shrink-0 text-fg-muted"
+					aria-hidden="true"
+				/>
+			</button>
 		);
 	}
 

package/src/components/compose-language-chip.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { expect, userEvent, within } from "storybook/test";
 import { ComposeLanguageChip } from "./compose-language-chip.js";
+import type { ComposeLanguageSource } from "./use-compose-language.js";
 
 const LANGUAGES = ["nl", "en", "de"];
 
@@ -14,9 +15,11 @@ const FIREFOX_HELP =
 
 const Chip = ({
 	initial = "nl",
+	source = "account",
 	helpText,
 }: {
 	initial?: string;
+	source?: ComposeLanguageSource;
 	helpText?: string;
 }) => {
 	const [language, setLanguage] = useState(initial);
@@ -25,6 +28,7 @@ const Chip = ({
 			<ComposeLanguageChip
 				language={language}
 				languages={LANGUAGES}
+				source={language === initial ? source : "manual"}
 				onSelect={setLanguage}
 				helpText={helpText}
 			/>
@@ -50,10 +54,40 @@ export default meta;
 type Story = StoryObj<typeof Chip>;
 
 export const Closed: Story = {
-	name: "The chip",
+	name: "The chip — the account's own language",
 	args: {},
 };
 
+/**
+ * The control changes under the user while they type, so the value alone does
+ * not say where it came from. The tint marks a message that is not going out in
+ * the account's own language, and the accessible name says whether the tag was
+ * guessed, chosen or inherited.
+ */
+export const NotTheAccountLanguage: Story = {
+	name: "Detected — a message in another language",
+	args: { initial: "de", source: "detected" },
+	play: async ({ canvasElement }) => {
+		const chip = within(canvasElement).getByTestId("compose-language-chip");
+		await expect(chip).toHaveAttribute("data-language-source", "detected");
+		await expect(chip.getAttribute("aria-label")).toContain(
+			"detected from what you wrote",
+		);
+	},
+};
+
+export const ChosenByHand: Story = {
+	name: "Chosen — detection stops for this message",
+	args: { initial: "de", source: "manual" },
+	play: async ({ canvasElement }) => {
+		const chip = within(canvasElement).getByTestId("compose-language-chip");
+		await expect(chip).toHaveAttribute("data-language-source", "manual");
+		await expect(chip.getAttribute("aria-label")).toContain(
+			"chosen for this message",
+		);
+	},
+};
+
 const openMenu = async (canvasElement: HTMLElement): Promise<void> => {
 	await userEvent.click(
 		within(canvasElement).getByRole("button", {

package/src/components/compose-language-chip.tsx

@@ -7,12 +7,25 @@ import {
 } from "../lib/compose-language.js";
 import { rovingNextIndex } from "../lib/roving-focus.js";
 import { Button } from "./button.js";
+import type { ComposeLanguageSource } from "./use-compose-language.js";
+
+const sourceNote: Record<ComposeLanguageSource, string> = {
+	account: "the account default",
+	detected: "detected from what you wrote",
+	manual: "chosen for this message",
+};
 
 export interface ComposeLanguageChipProps {
 	/** The BCP 47 tag the message is currently being written in. */
 	language: string;
 	/** The account's configured tags — the menu, and detection's candidate set. */
 	languages: readonly string[];
+	/**
+	 * Where the tag came from. The control changes under the user while they
+	 * type, so its name says whether the value was guessed, chosen or inherited
+	 * from the account rather than leaving two letters to stand for all three.
+	 */
+	source: ComposeLanguageSource;
 	onSelect: (tag: string) => void;
 	/**
 	 * The sentence naming where the browser keeps its dictionary setting.
@@ -32,6 +45,7 @@ export interface ComposeLanguageChipProps {
 export const ComposeLanguageChip = ({
 	language,
 	languages,
+	source,
 	onSelect,
 	helpText,
 }: ComposeLanguageChipProps) => {
@@ -98,14 +112,18 @@ export const ComposeLanguageChip = ({
 				ref={triggerRef}
 				variant="ghost"
 				size="md"
-				aria-label={`Message language: ${languageLabel(language)}`}
+				aria-label={`Message language: ${languageLabel(language)}, ${sourceNote[source]}`}
 				aria-haspopup="menu"
 				aria-expanded={open}
 				aria-controls={open ? menuId : undefined}
 				onClick={() => setOpen((value) => !value)}
 				data-testid="compose-language-chip"
 				data-language={language}
-				className="min-h-11 min-w-11 shrink-0 px-2 font-medium"
+				data-language-source={source}
+				className={cn(
+					"min-h-11 min-w-11 shrink-0 px-2 font-medium",
+					language !== languages[0] && "bg-accent-2-soft text-accent-2",
+				)}
 			>
 				{languageChipLabel(language)}
 			</Button>

package/src/components/compose-smtp-missing-banner.tsx

@@ -1,7 +1,18 @@
 import { AlertTriangle, ArrowRight } from "lucide-react";
+import type { Ref } from "react";
+
+/**
+ * The one sentence this failure gets. The banner states it, and Send refuses
+ * with the same words — a second wording of the same fact reads as a second
+ * problem.
+ */
+export const SMTP_MISSING_MESSAGE =
+	"This account can't send mail until SMTP is configured.";
 
 export interface ComposeSmtpMissingBannerProps {
 	onConfigure: () => void;
+	/** The fix, so a blocked Send can put the cursor on it. */
+	configureRef?: Ref<HTMLButtonElement>;
 }
 
 /**
@@ -12,6 +23,7 @@ export interface ComposeSmtpMissingBannerProps {
  */
 export const ComposeSmtpMissingBanner = ({
 	onConfigure,
+	configureRef,
 }: ComposeSmtpMissingBannerProps) => (
 	<div
 		role="alert"
@@ -23,12 +35,12 @@ export const ComposeSmtpMissingBanner = ({
 			aria-hidden="true"
 		/>
 		<div className="flex-1 min-w-0">
-			<p className="text-sm font-medium text-warning">
-				This account can't send mail until SMTP is configured.
-			</p>
+			<p className="text-sm font-medium text-warning">{SMTP_MISSING_MESSAGE}</p>
 			<button
+				ref={configureRef}
 				type="button"
 				onClick={onConfigure}
+				data-testid="compose-smtp-configure"
 				className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-warning hover:underline"
 			>
 				Configure SMTP