@antelopejs/dms-mailing 0.4.1 → 0.5.0

package/frontend-vue/app/composables/useMailingReads.ts

@@ -0,0 +1,229 @@
+import { toValue, type MaybeRefOrGetter } from 'vue'
+import {
+	mailingPath,
+	TEMPLATE_LIST_LIMIT,
+	type CategoriesResponse,
+	type CategoryUsageResponse,
+	type ChangesResponse,
+	type StarterPreviewResponse,
+	type StartersResponse,
+	type TemplateListResponse,
+	type TemplateOverviewResponse,
+	type VersionsResponse,
+} from './useMailingApi'
+import type { SetupFacts } from '../utils/overview-setup'
+import type { WebhookStatus } from '../utils/webhook-status'
+import type {
+	ProviderInfo,
+	RetentionPreview,
+	SendDetailResponse,
+	SendHtmlResponse,
+	TemplateContentResponse,
+	TemplatePerformance,
+} from '../types/mailing'
+
+/**
+ * The module's reads, through `useApiData`. The ones a page renders: a server
+ * render reads them and hands them to the browser with the page, and the
+ * components showing one request share it. The ones a drawer, a dialog or the
+ * editor makes when it opens or asks: `ReadOnDemand`. Writes go through
+ * `useMailingApi`.
+ */
+
+/** The e-mail provider the page header names; nothing read while `enabled` is false. */
+export function useProviderInfo(
+	enabled: MaybeRefOrGetter<boolean>,
+): ApiDataResult<ProviderInfo> {
+	return useApiData<ProviderInfo>(() =>
+		toValue(enabled) ? mailingPath('provider') : null,
+	)
+}
+
+/** What the overview's setup checklist is made of. */
+export function useSetupFacts(): ApiDataResult<SetupFacts> {
+	return useApiData<SetupFacts>(mailingPath('metrics', 'setup'))
+}
+
+/** The webhook's last event and last refused call. */
+export function useWebhookStatus(): ApiDataResult<WebhookStatus> {
+	return useApiData<WebhookStatus>(mailingPath('settings', 'webhook-status'))
+}
+
+/** What a retention of `days` deletes, and when; nothing read without days. */
+export function useRetentionPreview(
+	days: MaybeRefOrGetter<number | null>,
+): ApiDataResult<RetentionPreview> {
+	return useApiData<RetentionPreview>(
+		() => (toValue(days) ? mailingPath('settings', 'retention-preview') : null),
+		{ query: () => ({ days: String(toValue(days)) }) },
+	)
+}
+
+/** How many templates each category holds. */
+export function useCategoryUsage(): ApiDataResult<CategoryUsageResponse> {
+	return useApiData<CategoryUsageResponse>(
+		mailingPath('settings', 'category-usage'),
+	)
+}
+
+/** The tenant's template categories, as stored. */
+export function useStoredCategories(): ApiDataResult<CategoriesResponse> {
+	return useApiData<CategoriesResponse>(mailingPath('templates', 'categories'))
+}
+
+/**
+ * Each template's sends and rates, for the gallery's cards: read again with
+ * the gallery's rows, rather than with the page.
+ */
+export function useTemplatesOverview(): ApiDataResult<TemplateOverviewResponse> {
+	return useApiData<TemplateOverviewResponse>(
+		mailingPath('templates', 'overview'),
+		{ refreshOnPageRefresh: false },
+	)
+}
+
+/**
+ * How many templates the tenant has, whatever the gallery's filters: the
+ * list route's total, without its rows. Read again with the gallery's rows.
+ */
+export function useTemplateTotal(): ApiDataResult<
+	Pick<TemplateListResponse, 'total'>
+> {
+	return useApiData<Pick<TemplateListResponse, 'total'>>(
+		mailingPath('tables', 'templates', 'list'),
+		{ query: { limit: '1' }, pick: ['total'], refreshOnPageRefresh: false },
+	)
+}
+
+/** The starter templates the module ships. */
+export function useStarters(): ApiDataResult<StartersResponse> {
+	return useApiData<StartersResponse>(mailingPath('templates', 'starters'))
+}
+
+/** The query of a read made on demand. */
+type ReadQuery = MaybeRefOrGetter<Record<string, string> | undefined>
+
+/**
+ * A read a drawer, a dialog, a preview frame or the editor makes when it
+ * opens or asks, through `useApiData` with `immediate: false`: the call reads
+ * the current URL and resolves with its answer, or rejects with what the read
+ * failed with. The caller keeps the answer, so the page's refreshes leave it.
+ */
+export type ReadOnDemand<T> = () => Promise<T>
+
+function useReadOnDemand<T>(
+	url: MaybeRefOrGetter<string | null>,
+	query?: ReadQuery,
+): ReadOnDemand<T> {
+	const read = useApiData<T>(url, {
+		query,
+		immediate: false,
+		refreshOnPageRefresh: false,
+	})
+	return async () => {
+		await read.execute({ dedupe: 'defer' })
+		if (read.error.value) throw read.error.value
+		return read.data.value as T
+	}
+}
+
+/** A template's path below `/templates/<id>`; none without an id. */
+const templatePath =
+	(id: MaybeRefOrGetter<string>, segment: string) => (): string | null =>
+		toValue(id) ? mailingPath('templates', toValue(id), segment) : null
+
+/** The template's record, its draft and published content, for a drawer or the editor. */
+export function useTemplateContentRead(
+	id: MaybeRefOrGetter<string>,
+): ReadOnDemand<TemplateContentResponse> {
+	return useReadOnDemand(templatePath(id, 'content'))
+}
+
+/** The template's sends and rates. */
+export function useTemplatePerformanceRead(
+	id: MaybeRefOrGetter<string>,
+): ReadOnDemand<TemplatePerformance> {
+	return useReadOnDemand(templatePath(id, 'performance'))
+}
+
+/** What publishing the template's draft would change. */
+export function useTemplateChangesRead(
+	id: MaybeRefOrGetter<string>,
+): ReadOnDemand<ChangesResponse> {
+	return useReadOnDemand(templatePath(id, 'changes'))
+}
+
+/** The template's published versions. */
+export function useTemplateVersionsRead(
+	id: MaybeRefOrGetter<string>,
+): ReadOnDemand<VersionsResponse> {
+	return useReadOnDemand(templatePath(id, 'versions'))
+}
+
+/** Every template of the tenant, by name, for the slugs a new one must avoid. */
+export function useTemplateListRead(): ReadOnDemand<TemplateListResponse> {
+	return useReadOnDemand(mailingPath('tables', 'templates', 'list'), {
+		limit: TEMPLATE_LIST_LIMIT,
+		sortKey: 'name',
+	})
+}
+
+/** The starter templates, for a dialog. */
+export function useStartersRead(): ReadOnDemand<StartersResponse> {
+	return useReadOnDemand(mailingPath('templates', 'starters'))
+}
+
+/** A starter's preview, in `locale` when given. */
+export function useStarterPreviewRead(
+	starterId: MaybeRefOrGetter<string | undefined>,
+	locale: MaybeRefOrGetter<string | undefined>,
+): ReadOnDemand<StarterPreviewResponse> {
+	return useReadOnDemand(
+		() => {
+			const id = toValue(starterId)
+			return id ? mailingPath('templates', 'starters', id, 'preview') : null
+		},
+		() => {
+			const value = toValue(locale)
+			return value ? { locale: value } : undefined
+		},
+	)
+}
+
+/** A send's path below `/sends`; none without an id. */
+const sendPath =
+	(id: MaybeRefOrGetter<string>, ...segments: string[]) =>
+	(): string | null =>
+		toValue(id) ? mailingPath('sends', toValue(id), ...segments) : null
+
+/** A send with its events and the template it used. */
+export function useSendRead(
+	id: MaybeRefOrGetter<string>,
+): ReadOnDemand<SendDetailResponse> {
+	return useReadOnDemand(sendPath(id))
+}
+
+/** The e-mail a send rendered. */
+export function useSendHtmlRead(
+	id: MaybeRefOrGetter<string>,
+): ReadOnDemand<SendHtmlResponse> {
+	return useReadOnDemand(sendPath(id, 'html'))
+}
+
+/** The e-mail provider and the tracking it reports, for a drawer. */
+export function useProviderRead(): ReadOnDemand<ProviderInfo> {
+	return useReadOnDemand(mailingPath('provider'))
+}
+
+/** The reads the editor makes when it asks: what publishing would change, and the template's figures. */
+export interface EditorReads {
+	changes: ReadOnDemand<ChangesResponse>
+	performance: ReadOnDemand<TemplatePerformance>
+}
+
+export function useEditorReads(id: MaybeRefOrGetter<string>): EditorReads {
+	return {
+		changes: useTemplateChangesRead(id),
+		performance: useTemplatePerformanceRead(id),
+	}
+}

package/frontend-vue/app/composables/useOverviewSetup.ts

@@ -1,13 +1,21 @@
-import type { Ref } from 'vue'
+import { computed, type ComputedRef } from 'vue'
+import { useSetupFacts } from './useMailingReads'
+import { needsSetup } from '../utils/overview-setup'
 
-const HIDES_PERIOD_KEY = 'mailing-setup-hides-period:'
+/** The period scope of the Overview page, whose dashboard the setup gates. */
+const OVERVIEW_PERIOD_SCOPE = 'mailing-overview'
 
 /**
  * Whether the page header should hold its period selector back for `scope`:
- * the setup card stands in for the dashboard, so there is no figure for a
- * period to filter. Shared between the Overview gate, which sets it, and the
- * page header, which reads it.
+ * on the Overview, while the setup card stands in for the dashboard, there is
+ * no figure for a period to filter. Read from the setup facts the Overview
+ * gate shows (one request for both), so a server render hides it as the
+ * browser does.
  */
-export function useSetupHidesPeriod(scope: string | undefined): Ref<boolean> {
-	return useDmsState<boolean>(`${HIDES_PERIOD_KEY}${scope ?? ''}`, () => false)
+export function useSetupHidesPeriod(
+	scope: string | undefined,
+): ComputedRef<boolean> {
+	if (scope !== OVERVIEW_PERIOD_SCOPE) return computed(() => false)
+	const { data } = useSetupFacts()
+	return computed(() => !!data.value && needsSetup(data.value))
 }

package/frontend-vue/app/composables/useTemplateCategories.ts

@@ -1,35 +1,16 @@
 import { useLocalizedDefaults } from './useLocalizedDefaults'
-import { useMailingApi } from './useMailingApi'
-import type { TemplateCategory } from '../types/mailing'
+import { useStoredCategories } from './useMailingReads'
 
 /**
- * The request in flight: the components mounting together (a table's
- * category cells) share it, a later mount asks again since the settings may
- * have changed meanwhile.
+ * The tenant's template categories, named in the interface's language: one
+ * read the components showing them share (a table's category cells, the
+ * gallery), none when it failed.
  */
-let pending: Promise<TemplateCategory[]> | null = null
-
-/** The tenant's template categories, loaded once mounted. */
 export function useTemplateCategories() {
-	const api = useMailingApi()
 	const localized = useLocalizedDefaults()
-	const stored = ref<TemplateCategory[]>([])
-	const categories = computed(() => localized.categories(stored.value))
-
-	function listCategories(): Promise<TemplateCategory[]> {
-		pending ??= api
-			.listCategories()
-			.then((response) => response.categories)
-			.catch(() => [])
-			.finally(() => {
-				pending = null
-			})
-		return pending
-	}
-
-	onMounted(async () => {
-		stored.value = await listCategories()
-	})
-
+	const { data, error } = useStoredCategories()
+	const categories = computed(() =>
+		localized.categories(error.value ? [] : (data.value?.categories ?? [])),
+	)
 	return { categories }
 }

package/frontend-vue/app/utils/gallery.ts

@@ -148,16 +148,29 @@ export type OnDate = (date: string) => string
 
 const bareDate: OnDate = (date) => date
 
+/** How a card writes a date more than a day old ("Sep 27"). */
+export const CARD_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+	month: 'short',
+	day: '2-digit',
+}
+
 /**
  * A date as a card reads it: "2 hr. ago" / "5 min. ago" within a day, "Sep 27"
  * after. `onDate` dresses the absolute one only, so a sentence written around
  * it ("Edited {date}") reads right in both cases. Empty for an unreadable date.
+ * `dateFormat` writes the absolute one: a component passes the DMS's regional
+ * one (`useRegionalFormat().dateTimeFormat(CARD_DATE_FORMAT)`), whose day is
+ * the reader's, on a server render too.
  */
 export function formatCardDate(
 	date: string | null | undefined,
 	now: Date,
 	locale: string,
 	onDate: OnDate = bareDate,
+	dateFormat: Intl.DateTimeFormat = new Intl.DateTimeFormat(
+		locale,
+		CARD_DATE_FORMAT,
+	),
 ): string {
 	const time = date ? new Date(date).getTime() : Number.NaN
 	if (Number.isNaN(time)) return ''
@@ -172,12 +185,7 @@ export function formatCardDate(
 	if (elapsed < HOURS_PER_DAY * MS_PER_HOUR) {
 		return relative.format(-Math.round(elapsed / MS_PER_HOUR), 'hour')
 	}
-	return onDate(
-		new Intl.DateTimeFormat(locale, {
-			month: 'short',
-			day: '2-digit',
-		}).format(new Date(time)),
-	)
+	return onDate(dateFormat.format(new Date(time)))
 }
 
 /**
@@ -194,12 +202,16 @@ export function formatCardSince(
 	date: string | null | undefined,
 	now: Date,
 	locale: string,
+	dateFormat?: Intl.DateTimeFormat,
 ): CardSince | null {
 	const time = date ? new Date(date).getTime() : Number.NaN
 	if (Number.isNaN(time)) return null
 	const elapsed = Math.max(0, now.getTime() - time)
 	if (elapsed >= HOURS_PER_DAY * MS_PER_HOUR)
-		return { kind: 'date', text: formatCardDate(date, now, locale) }
+		return {
+			kind: 'date',
+			text: formatCardDate(date, now, locale, undefined, dateFormat),
+		}
 	const isHours = elapsed >= MS_PER_HOUR
 	const amount = Math.max(
 		1,

package/frontend-vue/app/utils/period.ts

@@ -25,11 +25,6 @@ export function minutesSince(
 	return elapsed > 0 ? Math.floor(elapsed / MINUTE_MS) : 0
 }
 
-/** Formats a date as HH:MM in `locale`. */
-export function formatClock(value: Date | string, locale: string): string {
-	return new Date(value).toLocaleTimeString(locale, CLOCK_FORMAT)
-}
-
 /** Whether `at` falls within the next 24 hours: "tonight" rather than a date. */
 export function isWithinADay(at: Date | string, now: Date): boolean {
 	const delay = new Date(at).getTime() - now.getTime()

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
 	"license": "Apache-2.0",
 	"packageManager": "pnpm@10.2.0",
 	"engines": {
-		"@antelopejs/dms-frontend": ">=0.5.5 <0.6.0"
+		"@antelopejs/dms-frontend": ">=0.6.0 <0.7.0"
 	},
 	"scripts": {
 		"format": "prettier --write .",

package/frontend-vue/tests/categories-input.test.ts

@@ -9,14 +9,9 @@ import {
 	stubNuxtGlobals,
 	type Mounted,
 } from './helpers/nuxt-globals'
+import { stubApiData, type ApiDataStub } from './helpers/api-data'
 import type { TemplateCategory } from '../app/types/mailing'
 
-vi.mock('../app/composables/useMailingApi', () => ({
-	useMailingApi: () => ({
-		categoryUsage: async () => ({ counts: {} }),
-	}),
-}))
-
 vi.mock('../app/composables/useLocalizedDefaults', () => ({
 	useLocalizedDefaults: () => ({
 		categories: (list: TemplateCategory[]) => list,
@@ -70,17 +65,19 @@ const ButtonStub = defineComponent({
 			h('button', { ...attrs, 'data-icon': props.icon }),
 })
 
+const GLOBALS = {
+	UFormField: FormFieldStub,
+	UButton: ButtonStub,
+	UPopover: slotStub('UPopover'),
+	DmsEyebrow: slotStub('DmsEyebrow'),
+	DmsInputText: slotStub('DmsInputText'),
+}
+
 function mountInput(): Mounted {
 	return mount(
 		CategoriesInput,
 		{ modelValue: CATEGORIES, initialValue: CATEGORIES },
-		{
-			UFormField: FormFieldStub,
-			UButton: ButtonStub,
-			UPopover: slotStub('UPopover'),
-			DmsEyebrow: slotStub('DmsEyebrow'),
-			DmsInputText: slotStub('DmsInputText'),
-		},
+		GLOBALS,
 	)
 }
 
@@ -90,10 +87,43 @@ function alerts(host: HTMLElement): HTMLElement[] {
 
 describe('CategoriesInput', () => {
 	let mounted: Mounted | undefined
+	let api: ApiDataStub
 
 	beforeEach(() => {
 		stubNuxtGlobals()
 		formErrors.clear()
+		api = stubApiData()
+		api.respond(() => ({ counts: {} }))
+	})
+
+	it('shows how many templates each category holds, read again once saved', async () => {
+		api.respond(() => ({ counts: { orders: 2 } }))
+		const saved = reactive({ value: CATEGORIES })
+		mounted = mount(
+			defineComponent({
+				setup: () => () =>
+					h(CategoriesInput, {
+						modelValue: saved.value,
+						initialValue: saved.value,
+					}),
+			}),
+			{},
+			GLOBALS,
+		)
+		await flush()
+		expect(mounted.host.textContent).toContain(
+			'dms_mailing.settings.categories.usage count=2',
+		)
+		expect(api.reads).toEqual([
+			{ url: '/api/mailing/settings/category-usage', query: {} },
+		])
+		api.respond(() => ({ counts: { orders: 3 } }))
+		saved.value = [...CATEGORIES]
+		await flush()
+		expect(api.reads).toHaveLength(2)
+		expect(mounted.host.textContent).toContain(
+			'dms_mailing.settings.categories.usage count=3',
+		)
 	})
 
 	afterEach(() => {

package/frontend-vue/tests/editor-session.test.ts

@@ -73,6 +73,10 @@ function setup(): Harness {
 			harness.session = useEditorSession({
 				editor: harness.editor,
 				api: api as unknown as MailingApi,
+				reads: {
+					changes: () => api.changes('t1'),
+					performance: async () => null as never,
+				},
 				templateId: 't1',
 				loaded: LOADED,
 				onError: (error) => errors.push(error),

package/frontend-vue/tests/gallery.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
 	UNCATEGORISED_GROUP_ID,
 	firstName,
+	CARD_DATE_FORMAT,
 	formatCardDate,
 	formatCardSince,
 	groupByCategory,
@@ -92,6 +93,21 @@ describe('formatCardDate', () => {
 		expect(formatCardDate('2026-09-27T09:00:00Z', now, 'en')).toBe('Sep 27')
 	})
 
+	it("writes the date with the formatter given: a server writes the reader's day", () => {
+		const late = '2026-09-27T02:00:00Z'
+		const inZone = (timeZone: string) =>
+			new Intl.DateTimeFormat('en', { ...CARD_DATE_FORMAT, timeZone })
+		expect(
+			formatCardDate(late, now, 'en', undefined, inZone('Europe/Paris')),
+		).toBe('Sep 27')
+		expect(
+			formatCardDate(late, now, 'en', undefined, inZone('America/New_York')),
+		).toBe('Sep 26')
+		expect(
+			formatCardSince(late, now, 'en', inZone('America/New_York')),
+		).toEqual({ kind: 'date', text: 'Sep 26' })
+	})
+
 	it('answers nothing for an unreadable date', () => {
 		expect(formatCardDate('', now, 'en')).toBe('')
 		expect(formatCardDate('nope', now, 'en')).toBe('')

package/frontend-vue/tests/helpers/api-data.ts

@@ -0,0 +1,173 @@
+import { vi } from 'vitest'
+import { computed, ref, toValue, watch, type MaybeRefOrGetter } from 'vue'
+
+/** A backend read a component made through `useApiData`. */
+export interface ApiRead {
+	url: string
+	query: Record<string, unknown>
+}
+
+export type ApiBackend = (read: ApiRead) => unknown
+
+interface ApiDataOptions {
+	query?: MaybeRefOrGetter<Record<string, unknown> | undefined>
+	pick?: string[]
+	immediate?: boolean
+}
+
+export interface ApiDataStub {
+	/** Every read made, in order. */
+	reads: ApiRead[]
+	/** Answers the next reads; a thrown error or a rejection fails them. */
+	respond: (backend: ApiBackend) => void
+}
+
+function picked(value: unknown, keys: string[] | undefined): unknown {
+	if (!keys || !value || typeof value !== 'object') return value
+	const source = value as Record<string, unknown>
+	return Object.fromEntries(keys.map((key) => [key, source[key]]))
+}
+
+/**
+ * Stands in for the DMS's `useApiData` (an auto-import the layer's tests do
+ * not have): reads the URL, and again whenever it or its query changes, from
+ * `respond`'s backend, with the result's `data`, `error`, `status` and
+ * `refresh()`; with `immediate: false`, only once `execute()` asks. Whether the server renders it and hands it over is the DMS's
+ * and the renderer's, proven on the playground.
+ */
+export function stubApiData(): ApiDataStub {
+	const stub: ApiDataStub = {
+		reads: [],
+		respond: (next) => {
+			backend = next
+		},
+	}
+	let backend: ApiBackend = () => ({})
+	vi.stubGlobal(
+		'useApiData',
+		(
+			url: MaybeRefOrGetter<string | null | undefined>,
+			options: ApiDataOptions = {},
+		) => {
+			const data = ref<unknown>(null)
+			const error = ref<unknown>(null)
+			const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
+			const request = () => ({
+				url: toValue(url),
+				query: toValue(options.query) ?? {},
+			})
+			async function refresh(): Promise<void> {
+				const { url: path, query } = request()
+				if (!path) return
+				const read = { url: path, query }
+				stub.reads.push(read)
+				status.value = 'pending'
+				try {
+					data.value = picked(await backend(read), options.pick)
+					error.value = null
+					status.value = 'success'
+				} catch (failure) {
+					error.value = failure
+					status.value = 'error'
+				}
+			}
+			// A read made on demand (`immediate: false`) waits for `execute()`.
+			if (options.immediate !== false)
+				watch(
+					() => JSON.stringify(request()),
+					() => void refresh(),
+					{
+						immediate: true,
+					},
+				)
+			return {
+				data,
+				error,
+				status,
+				pending: computed(() => status.value === 'pending'),
+				refresh,
+				execute: refresh,
+				clear: () => {
+					data.value = null
+				},
+			}
+		},
+	)
+	return stub
+}
+
+/** The DMS's regional formatter, in the zone the tests run in. */
+export function stubRegionalFormat(): void {
+	vi.stubGlobal('useRegionalFormat', () => ({
+		dateTimeFormat: (options: Intl.DateTimeFormatOptions) =>
+			new Intl.DateTimeFormat('en', options),
+	}))
+}
+
+/** The read routes of the mailing API, as a component's tests mock them. */
+export interface MailingReadMocks {
+	templateContent?: (id: string) => unknown
+	performance?: (id: string) => unknown
+	changes?: (id: string) => unknown
+	versions?: (id: string) => unknown
+	listTemplates?: () => unknown
+	starters?: () => unknown
+	starterPreview?: (id: string, locale?: string) => unknown
+	send?: (id: string) => unknown
+	sendHtml?: (id: string) => unknown
+	provider?: () => unknown
+}
+
+type ReadRoute = (
+	mocks: MailingReadMocks,
+	match: RegExpExecArray,
+	read: ApiRead,
+) => unknown
+
+const READ_ROUTES: Array<[RegExp, ReadRoute]> = [
+	[/^\/api\/mailing\/templates\/starters$/, (m) => m.starters?.()],
+	[
+		/^\/api\/mailing\/templates\/starters\/([^/]+)\/preview$/,
+		(m, [, id], { query }) =>
+			m.starterPreview?.(id!, query.locale as string | undefined),
+	],
+	[
+		/^\/api\/mailing\/templates\/([^/]+)\/content$/,
+		(m, [, id]) => m.templateContent?.(id!),
+	],
+	[
+		/^\/api\/mailing\/templates\/([^/]+)\/performance$/,
+		(m, [, id]) => m.performance?.(id!),
+	],
+	[
+		/^\/api\/mailing\/templates\/([^/]+)\/changes$/,
+		(m, [, id]) => m.changes?.(id!),
+	],
+	[
+		/^\/api\/mailing\/templates\/([^/]+)\/versions$/,
+		(m, [, id]) => m.versions?.(id!),
+	],
+	[/^\/api\/mailing\/tables\/templates\/list$/, (m) => m.listTemplates?.()],
+	[/^\/api\/mailing\/sends\/([^/]+)\/html$/, (m, [, id]) => m.sendHtml?.(id!)],
+	[/^\/api\/mailing\/sends\/([^/]+)$/, (m, [, id]) => m.send?.(id!)],
+	[/^\/api\/mailing\/provider$/, (m) => m.provider?.()],
+]
+
+/**
+ * A backend answering the reads a component makes on demand with the
+ * test's mocks of them, and the others (or a read with no mock) with
+ * `fallback`.
+ */
+export function mailingReads(
+	mocks: MailingReadMocks,
+	fallback: ApiBackend = () => ({}),
+): ApiBackend {
+	return (read) => {
+		for (const [pattern, route] of READ_ROUTES) {
+			const match = pattern.exec(read.url)
+			const answer = match ? route(mocks, match, read) : undefined
+			if (answer !== undefined) return answer
+		}
+		return fallback(read)
+	}
+}