@antelopejs/dms-mailing 0.4.0 → 0.5.0

package/frontend-vue/app/components/StarterGallery.vue

@@ -2,6 +2,7 @@
 import { useTemplateCategories } from '../composables/useTemplateCategories'
 import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useStarters } from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import {
 	HTTP_CONFLICT,
@@ -24,18 +25,19 @@ const { processApiMessage } = useTranslation()
 const overlays = useTemplateDrawer()
 
 const localized = useLocalizedDefaults()
-const storedStarters = ref<StarterSummary[]>([])
-const starters = computed(() => localized.starters(storedStarters.value))
+const starterList = useStarters()
+/** The starters, none when the read failed. */
+const starters = computed(() =>
+	localized.starters(
+		starterList.error.value ? [] : (starterList.data.value?.starters ?? []),
+	),
+)
 const { categories } = useTemplateCategories()
-const loading = ref(true)
+const loading = computed(
+	() => !starterList.data.value && !starterList.error.value,
+)
 const creatingId = ref<string | null>(null)
 
-onMounted(async () => {
-	const starterList = await api.starters().catch(() => ({ starters: [] }))
-	storedStarters.value = starterList.starters
-	loading.value = false
-})
-
 function knownCategory(id: string): string | undefined {
 	return categories.value.some((category) => category.id === id)
 		? id

package/frontend-vue/app/components/TemplateCard.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { formatCardDate, formatCardSince, firstName } from '../utils/gallery'
+import {
+	CARD_DATE_FORMAT,
+	formatCardDate,
+	formatCardSince,
+	firstName,
+} from '../utils/gallery'
 import { localeChipClass, localeChips } from '../utils/locales'
 import {
 	cardFooter,
@@ -47,6 +52,7 @@ const emit = defineEmits<{
 }>()
 
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 const { uniqueLocales } = useUniqueLocales()
 
 const isLive = computed(() => props.template.status === 'live')
@@ -85,8 +91,12 @@ const isNeverSent = computed(() => props.attention.includes('never_sent'))
 const footer = computed(() => cardFooter(props.template, props.stats))
 
 const footerDate = computed(() =>
-	formatCardDate(footer.value.at, new Date(), locale.value, (date) =>
-		t('dms_mailing.common.on_date', { date }),
+	formatCardDate(
+		footer.value.at,
+		new Date(),
+		locale.value,
+		(date) => t('dms_mailing.common.on_date', { date }),
+		dateTimeFormat(CARD_DATE_FORMAT),
 	),
 )
 
@@ -107,7 +117,12 @@ const openRateLabel = computed(() =>
 
 /** "live for 1 hr" within a day, "live since Sep 27" after. */
 const liveSince = computed(() =>
-	formatCardSince(footer.value.at, new Date(), locale.value),
+	formatCardSince(
+		footer.value.at,
+		new Date(),
+		locale.value,
+		dateTimeFormat(CARD_DATE_FORMAT),
+	),
 )
 
 const FOOTER_TEXTS: Partial<Record<CardFooterKind, () => string>> = {

package/frontend-vue/app/components/TemplateDrawer.vue

@@ -5,6 +5,10 @@ import {
 	useMailingApi,
 	type TemplateDetails,
 } from '../composables/useMailingApi'
+import {
+	useTemplateContentRead,
+	useTemplatePerformanceRead,
+} from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import { apiErrorMessage } from '../utils/api-error'
 import { formatCardDate } from '../utils/gallery'
@@ -106,6 +110,8 @@ const LIFECYCLE: Record<LifecycleAction, LifecycleSpec> = {
 }
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
+const readPerformance = useTemplatePerformanceRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const performance = ref<TemplatePerformance | null>(null)
 const loading = ref(true)
@@ -129,8 +135,8 @@ async function load(): Promise<void> {
 	loading.value = true
 	try {
 		const [content, stats] = await Promise.all([
-			api.templateContent(templateId.value),
-			api.performance(templateId.value).catch(() => null),
+			readContent(),
+			readPerformance().catch(() => null),
 		])
 		detail.value = content
 		performance.value = stats

package/frontend-vue/app/components/TemplateGallery.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useTemplateCategories } from '../composables/useTemplateCategories'
 import { useEventListener } from '@vueuse/core'
-import { useMailingApi } from '../composables/useMailingApi'
+import {
+	useTemplatesOverview,
+	useTemplateTotal,
+} from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import {
 	groupByCategory,
@@ -44,29 +47,33 @@ const ALL_TAB = 'all'
 
 const props = defineProps<TemplateGalleryProps>()
 
-const api = useMailingApi()
 const { t } = useI18n()
 const overlays = useTemplateDrawer()
 
 const { categories } = useTemplateCategories()
-const statsById = ref(new Map<string, TemplateStats>())
-const templateCount = ref<number | null>(null)
+const overview = useTemplatesOverview()
+const total = useTemplateTotal()
 
-async function loadStats(): Promise<void> {
-	const response = await api.templatesOverview().catch(() => ({ items: [] }))
-	statsById.value = new Map(response.items.map((entry) => [entry.id, entry]))
-}
+/** Each template's figures; none for a failed read. */
+const statsById = computed(
+	() =>
+		new Map<string, TemplateStats>(
+			(overview.error.value ? [] : (overview.data.value?.items ?? [])).map(
+				(entry) => [entry.id, entry],
+			),
+		),
+)
+/** How many templates the tenant has; unknown while read or once failed. */
+const templateCount = computed<number | null>(() =>
+	total.error.value ? null : (total.data.value?.total ?? null),
+)
 
-async function loadTemplates(): Promise<void> {
-	const response = await api.listTemplates().catch(() => null)
-	templateCount.value = response ? response.total : null
+/** The template count and the figures, read again with the rows. */
+function refreshFigures(): void {
+	void overview.refresh()
+	void total.refresh()
 }
 
-onMounted(() => {
-	void loadStats()
-	void loadTemplates()
-})
-
 /** The page of the table on screen: its query and its page index. */
 const viewKeyOf = (): string =>
 	JSON.stringify([props.context.query, props.context.pagination.pageIndex])
@@ -86,8 +93,7 @@ watch(
 		const isRefresh = viewKey === shownViewKey
 		shownViewKey = viewKey
 		if (!isRefresh) return
-		void loadStats()
-		void loadTemplates()
+		refreshFigures()
 	},
 )
 
@@ -157,10 +163,9 @@ const emptyDescription = computed(() =>
 		: t('dms_mailing.templates.empty.view_description'),
 )
 
+/** The rows, and with them the template count and the figures. */
 function refreshAll(): void {
 	void props.context.refresh()
-	void loadStats()
-	void loadTemplates()
 }
 
 function openRow(row: TemplateRow): void {

package/frontend-vue/app/components/TemplatePreviewFrame.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDebounceFn, useIntersectionObserver } from '@vueuse/core'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useStarterPreviewRead } from '../composables/useMailingReads'
 import type {
 	PreviewResponse,
 	PreviewVersion,
@@ -62,6 +63,10 @@ const emit = defineEmits<{ resolved: [PreviewResponse] }>()
 const api = useMailingApi()
 const { locale: uiLocale } = useI18n()
 
+const readStarterPreview = useStarterPreviewRead(
+	() => props.starterId,
+	() => props.locale ?? uiLocale.value,
+)
 const fetchedHtml = ref('')
 const loading = ref(false)
 const height = ref(FALLBACK_HEIGHT)
@@ -86,11 +91,8 @@ useIntersectionObserver(box, ([entry]) => {
 	if (entry?.isIntersecting) isVisible.value = true
 })
 
-async function fetchStarter(starterId: string): Promise<void> {
-	const preview = await api.starterPreview(
-		starterId,
-		props.locale ?? uiLocale.value,
-	)
+async function fetchStarter(): Promise<void> {
+	const preview = await readStarterPreview()
 	fetchedHtml.value = preview.html
 }
 
@@ -111,7 +113,7 @@ async function load(): Promise<void> {
 	loading.value = true
 	try {
 		await (props.starterId
-			? fetchStarter(props.starterId)
+			? fetchStarter()
 			: fetchTemplate(props.templateId as string))
 	} catch {
 		fetchedHtml.value = ''

package/frontend-vue/app/components/TestSendModal.vue

@@ -2,6 +2,7 @@
 import FormFieldRow from '../build/components/FormFieldRow.vue'
 import FormRows from '../build/components/FormRows.vue'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateContentRead } from '../composables/useMailingReads'
 import type { SendResult, TestSendInput } from '../composables/useMailingApi'
 import { apiErrorMessage } from '../utils/api-error'
 import { sendLogRoute } from '../utils/send-link'
@@ -54,6 +55,7 @@ const { user } = useCurrentUser()
 const { uniqueLocales } = useUniqueLocales()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const ownEmail = (user.value as SignedInUser | null)?.email
 const recipients = ref<string[]>(ownEmail ? [ownEmail] : [])
@@ -65,7 +67,7 @@ const sending = ref(false)
 onMounted(async () => {
 	if (!templateId.value) return
 	try {
-		detail.value = await api.templateContent(templateId.value)
+		detail.value = await readContent()
 		locale.value ||= detail.value.fallbackLocale
 	} catch (error) {
 		toast.add({

package/frontend-vue/app/components/VersionHistory.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateVersionsRead } from '../composables/useMailingReads'
 import type { TemplateStatus, TemplateVersionSummary } from '../types/mailing'
 import { apiErrorMessage } from '../utils/api-error'
 import {
@@ -31,7 +31,6 @@ const props = withDefaults(defineProps<VersionHistoryProps>(), {
 	locale: undefined,
 })
 
-const api = useMailingApi()
 const modal = useModal()
 const toast = useToast()
 const { confirm } = useConfirm()
@@ -39,13 +38,14 @@ const { t, locale: uiLocale } = useI18n()
 const { processApiMessage } = useTranslation()
 const previewComponent = resolveComponent(PREVIEW_COMPONENT) as Component
 
+const readVersions = useTemplateVersionsRead(() => props.templateId)
 const versions = ref<TemplateVersionSummary[]>([])
 const loading = ref(true)
 
 async function load(): Promise<void> {
 	loading.value = true
 	try {
-		versions.value = (await api.versions(props.templateId)).versions
+		versions.value = (await readVersions()).versions
 	} catch (error) {
 		toast.add({
 			color: 'error',

package/frontend-vue/app/components/WebhookStatus.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useMailingApi } from '../composables/useMailingApi'
-import { formatCardDate } from '../utils/gallery'
+import { useWebhookStatus } from '../composables/useMailingReads'
+import { CARD_DATE_FORMAT, formatCardDate } from '../utils/gallery'
 import {
 	type WebhookLineTone,
 	type WebhookStatus,
@@ -33,9 +34,14 @@ const TONE_CLASSES: Record<WebhookLineTone, string> = {
 const api = useMailingApi()
 const toast = useToast()
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 
-const status = ref<WebhookStatus | null>(null)
-const isLoading = ref(true)
+const read = useWebhookStatus()
+/** The status read, `null` when the read failed. */
+const status = computed<WebhookStatus | null>(() =>
+	read.error.value ? null : read.data.value,
+)
+const isLoading = computed(() => !read.data.value && !read.error.value)
 const isTesting = ref(false)
 
 const lines = computed(() =>
@@ -51,17 +57,15 @@ function lineText(line: WebhookStatusLine): string {
 }
 
 function lineTime(line: WebhookStatusLine): string {
-	return line.at ? formatCardDate(line.at, new Date(), locale.value) : ''
-}
-
-async function load(): Promise<void> {
-	try {
-		status.value = await api.webhookStatus()
-	} catch {
-		status.value = null
-	} finally {
-		isLoading.value = false
-	}
+	return line.at
+		? formatCardDate(
+				line.at,
+				new Date(),
+				locale.value,
+				undefined,
+				dateTimeFormat(CARD_DATE_FORMAT),
+			)
+		: ''
 }
 
 async function sendTest(): Promise<void> {
@@ -69,7 +73,8 @@ async function sendTest(): Promise<void> {
 	isTesting.value = true
 	try {
 		const result = await api.webhookTest()
-		status.value = result.status
+		read.data.value = result.status
+		read.error.value = null
 		const message = webhookTestMessage(result)
 		toast.add({
 			color: message.color,
@@ -84,8 +89,6 @@ async function sendTest(): Promise<void> {
 		isTesting.value = false
 	}
 }
-
-onMounted(() => void load())
 </script>
 
 <template>

package/frontend-vue/app/components/editor/EditorWorkspace.vue

@@ -2,6 +2,7 @@
 import { onMounted, watch } from 'vue'
 import type { TemplateContentResponse } from '../../types/mailing'
 import { useMailingApi } from '../../composables/useMailingApi'
+import { useEditorReads } from '../../composables/useMailingReads'
 import { provideEditorContext } from '../../composables/useEditorContext'
 import { useEditorActions } from '../../composables/useEditorActions'
 import { useEditorSession } from '../../composables/useEditorSession'
@@ -49,9 +50,12 @@ function reportFailure(error: unknown): void {
 	})
 }
 
+const reads = useEditorReads(props.templateId)
+
 const session = useEditorSession({
 	editor,
 	api,
+	reads,
 	templateId: props.templateId,
 	loaded: props.loaded,
 	onError: reportFailure,
@@ -61,6 +65,7 @@ const actions = useEditorActions({
 	editor,
 	session,
 	api,
+	reads,
 	templateId: props.templateId,
 	reload: props.reload,
 	onError: reportFailure,

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

@@ -1,5 +1,6 @@
 import type { Component } from 'vue'
 import type { MailingApi } from './useMailingApi'
+import type { EditorReads } from './useMailingReads'
 import type { EditorSession } from './useEditorSession'
 import { isDraftConflict } from './useEditorSession'
 import type { EditorState } from './useTemplateEditor'
@@ -34,6 +35,7 @@ export interface ActionDeps {
 	editor: EditorState
 	session: EditorSession
 	api: MailingApi
+	reads: EditorReads
 	templateId: string
 	reload: () => Promise<void>
 	onError: (error: unknown) => void
@@ -163,7 +165,7 @@ async function runPublish(deps: ActionDeps, tools: ActionTools): Promise<void> {
  * editor's last write is a conflict: the review would not show what ships.
  */
 async function refreshChanges(deps: ActionDeps): Promise<boolean> {
-	const response = await deps.api.changes(deps.templateId).catch(() => null)
+	const response = await deps.reads.changes().catch(() => null)
 	if (!response) return true
 	const { state } = deps.session
 	if (response.revision !== state.revision) {

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

@@ -8,6 +8,7 @@ import type {
 	TemplateRow,
 } from '../types/mailing'
 import type { MailingApi, TemplateDetails } from './useMailingApi'
+import type { EditorReads } from './useMailingReads'
 import type { EditorState } from './useTemplateEditor'
 import type { TokenFieldHandle } from './useEditorContext'
 import { deepClone } from '../utils/clone'
@@ -64,6 +65,7 @@ export interface SessionState {
 export interface SessionDeps {
 	editor: EditorState
 	api: MailingApi
+	reads: EditorReads
 	templateId: string
 	loaded: TemplateContentResponse
 	onError: (error: unknown) => void
@@ -142,7 +144,7 @@ export function retryDelay(failures: number): number {
 }
 
 function createSaver(deps: SessionDeps, state: SessionState) {
-	const { editor, api, templateId, onError } = deps
+	const { editor, api, reads, templateId, onError } = deps
 	let timer: ReturnType<typeof setTimeout> | null = null
 	let inFlight: Promise<boolean> | null = null
 	let failures = 0
@@ -207,7 +209,7 @@ function createSaver(deps: SessionDeps, state: SessionState) {
 	async function overwrite(): Promise<boolean> {
 		cancel()
 		if (inFlight) await inFlight
-		const latest = await api.changes(templateId).catch(() => null)
+		const latest = await reads.changes().catch(() => null)
 		if (!latest) return false
 		state.revision = latest.revision
 		return run()
@@ -249,7 +251,7 @@ function createSaver(deps: SessionDeps, state: SessionState) {
 }
 
 function createRecordActions(
-	{ api, templateId }: SessionDeps,
+	{ api, reads, templateId }: SessionDeps,
 	state: SessionState,
 ) {
 	return {
@@ -274,7 +276,7 @@ function createRecordActions(
 			state.testDataSource = state.savedTestDataSource
 		},
 		async loadPerformance(): Promise<void> {
-			state.performance = await api.performance(templateId).catch(() => null)
+			state.performance = await reads.performance().catch(() => null)
 		},
 	}
 }

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

@@ -2,29 +2,22 @@ import type {
 	FunnelStep,
 	PreviewResponse,
 	PreviewVersion,
-	ProviderInfo,
-	RetentionPreview,
-	SendDetailResponse,
-	SendHtmlResponse,
 	StarterSummary,
 	SuppressionSummary,
 	TemplateChange,
 	TemplateContent,
 	TemplateCategory,
-	TemplateContentResponse,
-	TemplatePerformance,
 	TemplateRow,
 	TemplateStats,
 	TemplateVersionSummary,
 	VariableDefinition,
 } from '../types/mailing'
-import type { SetupFacts } from '../utils/overview-setup'
-import type { WebhookStatus, WebhookTestResult } from '../utils/webhook-status'
+import type { WebhookTestResult } from '../utils/webhook-status'
 
 const BASE = '/api/mailing'
 
 /** Far above any real tenant's template count; the data-api caps at 100. */
-const TEMPLATE_LIST_LIMIT = '100'
+export const TEMPLATE_LIST_LIMIT = '100'
 
 /**
  * Joins the module's API segments. Exported on its own so the path shape stays
@@ -187,8 +180,9 @@ export interface StarterPreviewResponse {
 }
 
 /**
- * The single place that knows the mailing endpoints; every component reads
- * through it so a route change is a one-file edit.
+ * The mailing endpoints a component writes to, and the previews it renders
+ * from a draft it sends. Every read goes through `useMailingReads`, with the
+ * same paths.
  */
 export function useMailingApi() {
 	const { $authFetch } = useAuthFetch()
@@ -196,29 +190,14 @@ export function useMailingApi() {
 		$authFetch<T>(path, { method: 'POST', body })
 
 	return {
-		provider: () => $authFetch<ProviderInfo>(mailingPath('provider')),
-		setupFacts: () => $authFetch<SetupFacts>(mailingPath('metrics', 'setup')),
-		webhookStatus: () =>
-			$authFetch<WebhookStatus>(mailingPath('settings', 'webhook-status')),
 		webhookTest: () =>
 			post<WebhookTestResult>(mailingPath('settings', 'webhook-test'), {}),
-		templateContent: (id: string) =>
-			$authFetch<TemplateContentResponse>(
-				mailingPath('templates', id, 'content'),
-			),
 		saveTemplateDetails: (id: string, details: TemplateDetails) =>
 			$authFetch<unknown>(mailingPath('tables', 'templates', 'edit'), {
 				method: 'PUT',
 				query: { id },
 				body: details,
 			}),
-		listCategories: () =>
-			$authFetch<CategoriesResponse>(mailingPath('templates', 'categories')),
-		listTemplates: () =>
-			$authFetch<TemplateListResponse>(
-				mailingPath('tables', 'templates', 'list'),
-				{ query: { limit: TEMPLATE_LIST_LIMIT, sortKey: 'name' } },
-			),
 		createTemplate: (input: CreateTemplateInput) =>
 			post<string[]>(mailingPath('tables', 'templates', 'new'), input),
 		saveContent: (id: string, input: SaveContentInput) =>
@@ -231,30 +210,11 @@ export function useMailingApi() {
 				},
 				keepalive: input.keepalive,
 			}),
-		changes: (id: string) =>
-			$authFetch<ChangesResponse>(mailingPath('templates', id, 'changes')),
-		versions: (id: string) =>
-			$authFetch<VersionsResponse>(mailingPath('templates', id, 'versions')),
 		restoreVersion: (id: string, version: number, revision?: number) =>
 			post<RestoreVersionResponse>(
 				mailingPath('templates', id, 'versions', String(version), 'restore'),
 				{ revision },
 			),
-		performance: (id: string) =>
-			$authFetch<TemplatePerformance>(
-				mailingPath('templates', id, 'performance'),
-			),
-		templatesOverview: () =>
-			$authFetch<TemplateOverviewResponse>(
-				mailingPath('templates', 'overview'),
-			),
-		starters: () =>
-			$authFetch<StartersResponse>(mailingPath('templates', 'starters')),
-		starterPreview: (starterId: string, locale?: string) =>
-			$authFetch<StarterPreviewResponse>(
-				mailingPath('templates', 'starters', starterId, 'preview'),
-				{ query: locale ? { locale } : {} },
-			),
 		publish: (id: string, revision?: number) =>
 			post<PublishResponse>(mailingPath('templates', id, 'publish'), {
 				revision,
@@ -291,21 +251,8 @@ export function useMailingApi() {
 			post<TestSendResponse>(mailingPath('templates', id, 'send'), input),
 		testSend: (id: string, input: TestSendInput) =>
 			post<TestSendResponse>(mailingPath('templates', id, 'test-send'), input),
-		send: (id: string) =>
-			$authFetch<SendDetailResponse>(mailingPath('sends', id)),
-		sendHtml: (id: string) =>
-			$authFetch<SendHtmlResponse>(mailingPath('sends', id, 'html')),
 		replay: (id: string, to?: string) =>
 			post<SendResult>(mailingPath('sends', id, 'replay'), to ? { to } : {}),
-		retentionPreview: (days: number) =>
-			$authFetch<RetentionPreview>(
-				mailingPath('settings', 'retention-preview'),
-				{ query: { days: String(days) } },
-			),
-		categoryUsage: () =>
-			$authFetch<CategoryUsageResponse>(
-				mailingPath('settings', 'category-usage'),
-			),
 	}
 }