@antelopejs/dms-mailing 0.7.0 → 0.8.0

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

@@ -82,6 +82,7 @@ const props = defineProps<SendDrawerProps>()
 
 const api = useMailingApi()
 const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const reportReplay = useReplayToast()
 const { confirm } = useConfirm()
 const { open: openModal } = useModal()
@@ -236,7 +237,7 @@ async function load(): Promise<void> {
 	try {
 		detail.value = await readSend()
 	} catch (error) {
-		useApiError(error)
+		presentError(error, { fallbackKey: `${KEY_PREFIX}send_unavailable` })
 	} finally {
 		loading.value = false
 	}
@@ -264,8 +265,8 @@ async function loadTracking(): Promise<void> {
 async function showSend(id: string): Promise<void> {
 	try {
 		await props.showRow?.(id)
-	} catch {
-		toast.add({ color: 'error', title: key('send_unavailable') })
+	} catch (error) {
+		presentError(error, { fallbackKey: `${KEY_PREFIX}send_unavailable` })
 	}
 }
 
@@ -363,7 +364,7 @@ async function replay(): Promise<void> {
 		)
 		settle()
 	} catch (error) {
-		useApiError(error)
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		sending.value = false
 	}

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

@@ -4,11 +4,7 @@ import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
 import { useMailingApi } from '../composables/useMailingApi'
 import { useStarters } from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
-import {
-	HTTP_CONFLICT,
-	apiErrorMessage,
-	apiErrorStatus,
-} from '../utils/api-error'
+import { HTTP_CONFLICT, apiErrorStatus } from '../utils/api-error'
 import { editorRoute } from '../utils/editor-route'
 import type { StarterSummary } from '../types/mailing'
 
@@ -19,9 +15,8 @@ const SKELETON_STARTERS = 4
 const emit = defineEmits<{ created: [] }>()
 
 const api = useMailingApi()
-const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { t } = useI18n()
-const { processApiMessage } = useTranslation()
 const overlays = useTemplateDrawer()
 
 const localized = useLocalizedDefaults()
@@ -69,10 +64,7 @@ async function createFrom(starter: StarterSummary): Promise<void> {
 			openNewTemplate(starter)
 			return
 		}
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		creatingId.value = null
 	}

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

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { SENDS_PATH } from '../utils/pages'
+import { useDrawerStats } from '../build/composables/useDrawerStats'
+import TemplateDrawerFooter from '../build/components/TemplateDrawerFooter.vue'
+import TemplateDrawerPerformance from '../build/components/TemplateDrawerPerformance.vue'
+import TemplateDrawerVariables from '../build/components/TemplateDrawerVariables.vue'
 import { useElementSize } from '@vueuse/core'
 import {
 	useMailingApi,
@@ -10,11 +13,9 @@ import {
 	useTemplatePerformanceRead,
 } from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
-import { apiErrorMessage } from '../utils/api-error'
 import { formatCardDate } from '../utils/gallery'
 import { localeCoverage } from '../utils/locales'
 import { sendSnippet } from '../utils/send-snippet'
-import { variableTypeLabelKey } from '../utils/variable-types'
 import { validateName } from '../utils/slug'
 import {
 	validTransitions,
@@ -66,14 +67,8 @@ interface LifecycleSpec {
 	confirmColor?: ConfirmTone
 }
 
-/** The send log reads these: `?template=` narrows it, `?view=` opens a tab. */
-const SENDS_TEMPLATE_KEY = 'template'
-const SENDS_VIEW_KEY = 'view'
-const PROBLEMS_VIEW = 'problems'
 const PREVIEW_WIDTH = 600
 const PREVIEW_FALLBACK_SCALE = 0.72
-const OPEN_RATE_DIGITS = 1
-const PERCENT = 100
 const DEFAULT_VARIABLE_TYPE: VariableType = 'string'
 
 const STATUS_TONES: Record<TemplateStatus, string> = {
@@ -88,9 +83,9 @@ defineEmits<{ success: [changed?: boolean] }>()
 
 const api = useMailingApi()
 const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { confirm } = useConfirm()
 const { t, locale: uiLocale } = useI18n()
-const { processApiMessage } = useTranslation()
 const { uniqueLocales } = useUniqueLocales()
 const overlays = useTemplateDrawer()
 
@@ -142,10 +137,7 @@ async function load(): Promise<void> {
 		performance.value = stats
 		locale.value ||= content.fallbackLocale
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		loading.value = false
 	}
@@ -261,60 +253,12 @@ const versionLabel = computed(() =>
 		: t('dms_mailing.templates.drawer.never_published'),
 )
 
-const formatNumber = (value: number) =>
-	new Intl.NumberFormat(uiLocale.value, {
-		maximumFractionDigits: OPEN_RATE_DIGITS,
-	}).format(value)
-
-/** A rate in percent, written the reader's way ("20.8%", "20,8 %"). */
-const formatPercent = (value: number) =>
-	new Intl.NumberFormat(uiLocale.value, {
-		style: 'percent',
-		maximumFractionDigits: OPEN_RATE_DIGITS,
-	}).format(value / PERCENT)
-
-/** The send log narrowed to this template, on one of its tabs if given. */
-function sendLogRoute(view?: string) {
-	return {
-		path: SENDS_PATH,
-		query: {
-			[SENDS_TEMPLATE_KEY]: template.value?.slug ?? '',
-			...(view ? { [SENDS_VIEW_KEY]: view } : {}),
-		},
-	}
-}
-
-function sendLogUrl(view?: string): string {
-	const { path, query } = sendLogRoute(view)
-	return `${path}?${new URLSearchParams(query).toString()}`
-}
-
-const hasSends = computed(() => Boolean(performance.value?.sends))
-
-const stats = computed(() => [
-	{
-		id: 'sends',
-		eyebrow: t('dms_mailing.templates.drawer.stats_sends'),
-		value: formatNumber(performance.value?.sends ?? 0),
-	},
-	{
-		id: 'open',
-		eyebrow: t('dms_mailing.templates.drawer.stats_open'),
-		value: performance.value?.sends
-			? formatPercent(performance.value.openRate)
-			: '—',
-	},
-	{
-		id: 'problems',
-		eyebrow: t('dms_mailing.templates.drawer.stats_problems'),
-		value: formatNumber(performance.value?.problems ?? 0),
-		detail: performance.value?.problems
-			? t('dms_mailing.templates.drawer.problems_detail')
-			: undefined,
-		detailTone: 'error' as const,
-		to: performance.value?.problems ? sendLogUrl(PROBLEMS_VIEW) : undefined,
-	},
-])
+const { formatNumber, sendLogRoute, hasSends, stats } = useDrawerStats(
+	template,
+	performance,
+	t,
+	uiLocale,
+)
 
 const snippet = computed(() =>
 	sendSnippet({
@@ -363,10 +307,7 @@ async function saveDetails(changes: Partial<TemplateDetails>): Promise<void> {
 		})
 		reloadInPlace()
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	}
 }
 
@@ -424,10 +365,7 @@ async function runLifecycle(action: LifecycleAction): Promise<void> {
 		})
 		settle()
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	}
 }
 
@@ -472,10 +410,7 @@ async function declareVariable(path: string): Promise<void> {
 		detail.value.variables = response.variables
 		detail.value.revision = response.revision
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 		reloadInPlace()
 	}
 }
@@ -499,10 +434,7 @@ async function restoreVersion(version: number): Promise<void> {
 			],
 		})
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	}
 	reloadInPlace()
 }
@@ -701,172 +633,26 @@ function onResolved(preview: PreviewResponse): void {
 			</div>
 
 			<div v-show="tab === 'variables'" class="flex flex-col gap-4 py-4">
-				<div class="flex flex-col gap-1">
-					<DmsEyebrow
-						:label="t('dms_mailing.templates.drawer.declared_detected')"
-					/>
-					<p v-if="!variables.length" class="text-muted text-[12.5px]">
-						{{ t('dms_mailing.templates.drawer.no_variables') }}
-					</p>
-					<div
-						v-for="variable in variables"
-						:key="variable.path"
-						class="border-default flex min-h-9 items-center gap-2 border-b last:border-b-0"
-					>
-						<code
-							class="truncate font-mono text-[12px]"
-							:class="
-								variable.usage === 'unused' ? 'text-dimmed' : 'text-toned'
-							"
-						>
-							{{ variable.path }}
-						</code>
-						<span
-							v-if="variable.required && variable.usage !== 'detected'"
-							class="text-error"
-							:title="t('dms_mailing.templates.drawer.required')"
-						>
-							*
-						</span>
-						<DmsStatusPill
-							v-if="variable.usage === 'detected'"
-							tone="warning"
-							size="sm"
-							dot="none"
-							:label="t('dms_mailing.templates.drawer.not_declared')"
-						/>
-						<DmsStatusPill
-							v-if="variable.usage === 'unused'"
-							tone="neutral"
-							size="sm"
-							dot="none"
-							:label="t('dms_mailing.templates.drawer.unused')"
-						/>
-						<UButton
-							v-if="variable.usage === 'detected' && !isLive"
-							class="ml-auto"
-							color="neutral"
-							variant="ghost"
-							size="xs"
-							:label="t('dms_mailing.templates.drawer.declare')"
-							@click="declareVariable(variable.path)"
-						/>
-						<span
-							v-else-if="variable.usage !== 'detected'"
-							class="text-dimmed ml-auto font-mono text-[11px]"
-						>
-							{{ t(variableTypeLabelKey(variable.type)) }}
-						</span>
-					</div>
-				</div>
-				<DmsBanner
-					v-if="hasDraftDeclarations"
-					tone="info"
-					size="sm"
-					icon="i-ph-brackets-curly"
-					:title="t('dms_mailing.templates.drawer.draft_declarations')"
-					:description="
-						t('dms_mailing.templates.drawer.draft_declarations_description')
-					"
-				>
-					<template #actions>
-						<UButton
-							color="neutral"
-							variant="outline"
-							size="xs"
-							:label="t('dms_mailing.templates.actions.open_editor')"
-							@click="openEditor()"
-						/>
-					</template>
-				</DmsBanner>
-				<MailingSystemVariables :variables="systemVars" />
-				<div class="flex flex-col gap-1.5">
-					<div class="flex items-center justify-between">
-						<DmsEyebrow
-							:label="t('dms_mailing.templates.drawer.call_from_code')"
-						/>
-						<DmsCopyButton :value="snippet" />
-					</div>
-					<pre
-						class="bg-elevated text-toned overflow-x-auto rounded-md p-3 font-mono text-[11.5px] leading-relaxed"
-						>{{ snippet }}</pre>
-				</div>
+				<TemplateDrawerVariables
+					:variables="variables"
+					:is-live="isLive"
+					:has-draft-declarations="hasDraftDeclarations"
+					:system-vars="systemVars"
+					:snippet="snippet"
+					:declare-variable="declareVariable"
+					:open-editor="openEditor"
+				/>
 			</div>
 
 			<div v-show="tab === 'performance'" class="flex flex-col gap-4 py-4">
-				<div class="flex flex-col gap-2">
-					<div class="flex items-center justify-between">
-						<DmsEyebrow
-							:label="t('dms_mailing.templates.drawer.last_30_days')"
-						/>
-						<UButton
-							variant="link"
-							size="xs"
-							class="p-0"
-							:label="t('dms_mailing.templates.drawer.open_send_log')"
-							@click="openSendLog"
-						/>
-					</div>
-					<DmsStatGroup
-						layout="joined"
-						:columns="3"
-						:items="stats"
-						:loading="loading"
-					/>
-				</div>
-				<div class="flex flex-col gap-1">
-					<DmsEyebrow :label="t('dms_mailing.templates.drawer.called_from')" />
-					<p
-						v-if="!hasSends || !performance?.sources.length"
-						class="text-muted text-[12.5px]"
-					>
-						{{ t('dms_mailing.templates.drawer.no_sources') }}
-					</p>
-					<DmsListRow
-						v-for="source in performance?.sources ?? []"
-						:key="source.source"
-						icon="i-ph-code"
-						size="sm"
-						mono
-						:title="
-							source.source || t('dms_mailing.templates.drawer.unknown_source')
-						"
-						:trailing="
-							t(
-								'dms_mailing.templates.drawer.sends_count',
-								{ count: formatNumber(source.count) },
-								source.count,
-							)
-						"
-					/>
-				</div>
-				<div class="flex flex-col gap-1">
-					<DmsEyebrow :label="t('dms_mailing.templates.drawer.fallbacks')" />
-					<p v-if="!hasSends" class="text-muted text-[12.5px]">
-						{{ t('dms_mailing.templates.drawer.no_sources') }}
-					</p>
-					<p
-						v-else-if="!performance?.fallbacks.length"
-						class="text-muted text-[12.5px]"
-					>
-						{{ t('dms_mailing.templates.drawer.no_fallbacks') }}
-					</p>
-					<DmsListRow
-						v-for="fallback in performance?.fallbacks ?? []"
-						:key="`${fallback.requested}-${fallback.used}`"
-						icon="i-ph-translate"
-						tone="warning"
-						size="sm"
-						:title="`${fallback.requested.toUpperCase()} → ${fallback.used.toUpperCase()}`"
-						:trailing="
-							t(
-								'dms_mailing.templates.drawer.sends_count',
-								{ count: formatNumber(fallback.count) },
-								fallback.count,
-							)
-						"
-					/>
-				</div>
+				<TemplateDrawerPerformance
+					:stats="stats"
+					:loading="loading"
+					:has-sends="hasSends"
+					:performance="performance"
+					:open-send-log="openSendLog"
+					:format-number="formatNumber"
+				/>
 			</div>
 
 			<div v-if="tab === 'history'" class="flex flex-col gap-2 py-4">
@@ -882,28 +668,13 @@ function onResolved(preview: PreviewResponse): void {
 				/>
 			</div>
 
-			<DmsContainerFooter data-template-footer>
-				<UButton
-					icon="i-ph-flask"
-					color="neutral"
-					variant="ghost"
-					:label="t('dms_mailing.templates.card.test')"
-					@click="overlays.openTestSend(templateId, { locale })"
-				/>
-				<UButton
-					class="ml-auto"
-					icon="i-ph-copy"
-					color="neutral"
-					variant="outline"
-					:label="t('dms_mailing.templates.actions.duplicate')"
-					@click="overlays.openDuplicate(templateId, { rowData: template })"
-				/>
-				<UButton
-					icon="i-ph-pencil-simple"
-					:label="t('dms_mailing.templates.actions.open_editor')"
-					@click="openEditor(locale)"
-				/>
-			</DmsContainerFooter>
+			<TemplateDrawerFooter
+				:template-id="templateId"
+				:locale="locale"
+				:template="template"
+				:overlays="overlays"
+				:open-editor="openEditor"
+			/>
 		</template>
 	</div>
 </template>

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

@@ -4,7 +4,6 @@ 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'
 import { reasonKey, type SuppressionSummary } from '../utils/suppression'
 import {
@@ -49,8 +48,8 @@ const emit = defineEmits<{ success: [sent?: boolean] }>()
 
 const api = useMailingApi()
 const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { t, locale: uiLocale } = useI18n()
-const { processApiMessage } = useTranslation()
 const { user } = useCurrentUser()
 const { uniqueLocales } = useUniqueLocales()
 
@@ -70,10 +69,7 @@ onMounted(async () => {
 		detail.value = await readContent()
 		locale.value ||= detail.value.fallbackLocale
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	}
 })
 
@@ -154,14 +150,10 @@ function contentOverride(): Pick<TestSendInput, 'content' | 'version'> {
 	return {}
 }
 
-function reportFailures(results: SendResult[], to: string[]): void {
-	results.forEach((result, index) => {
+function reportFailures(results: SendResult[]): void {
+	results.forEach((result) => {
 		if (!result.error) return
-		toast.add({
-			color: 'error',
-			title: to[index] ?? result.sendId,
-			description: processApiMessage(result.error),
-		})
+		presentError(result.error, { fallbackKey: 'error.500.description' })
 	})
 	const sent = results.filter((result) => !result.error).length
 	if (sent) {
@@ -213,14 +205,11 @@ async function submit(): Promise<void> {
 			...contentOverride(),
 			data: DATA_SETS[dataChoice.value](),
 		})
-		reportFailures(response.results, to)
+		reportFailures(response.results)
 		warnOwnSuppression(response.ownAddressSuppressed)
 		close(true)
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		sending.value = false
 	}

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

@@ -2,7 +2,6 @@
 import type { Component } from 'vue'
 import { useTemplateVersionsRead } from '../composables/useMailingReads'
 import type { TemplateStatus, TemplateVersionSummary } from '../types/mailing'
-import { apiErrorMessage } from '../utils/api-error'
 import {
 	changeSummary,
 	formatVersionDate,
@@ -32,10 +31,9 @@ const props = withDefaults(defineProps<VersionHistoryProps>(), {
 })
 
 const modal = useModal()
-const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { confirm } = useConfirm()
 const { t, locale: uiLocale } = useI18n()
-const { processApiMessage } = useTranslation()
 const previewComponent = resolveComponent(PREVIEW_COMPONENT) as Component
 
 const readVersions = useTemplateVersionsRead(() => props.templateId)
@@ -47,10 +45,7 @@ async function load(): Promise<void> {
 	try {
 		versions.value = (await readVersions()).versions
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		loading.value = false
 	}

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

@@ -35,6 +35,7 @@ const api = useMailingApi()
 const toast = useToast()
 const { t, locale } = useI18n()
 const { dateTimeFormat } = useRegionalFormat()
+const { presentError } = useApiErrorPresenter()
 
 const read = useWebhookStatus()
 /** The status read, `null` when the read failed. */
@@ -84,7 +85,7 @@ async function sendTest(): Promise<void> {
 				: undefined,
 		})
 	} catch (error) {
-		useApiError(error)
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		isTesting.value = false
 	}

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

@@ -11,7 +11,6 @@ import {
 	useEditorShortcuts,
 } from '../../composables/useEditorShortcuts'
 import { createEditorState } from '../../composables/useTemplateEditor'
-import { apiErrorMessage } from '../../utils/api-error'
 
 interface Props {
 	loaded: TemplateContentResponse
@@ -23,8 +22,7 @@ const props = defineProps<Props>()
 const locale = defineModel<string | null>('locale', { default: null })
 const emit = defineEmits<{ renamed: [string] }>()
 
-const toast = useToast()
-const { processApiMessage } = useTranslation()
+const { presentError } = useApiErrorPresenter()
 const { uniqueLocales } = useUniqueLocales()
 const api = useMailingApi()
 
@@ -44,10 +42,7 @@ const editor = createEditorState(
 )
 
 function reportFailure(error: unknown): void {
-	toast.add({
-		color: 'error',
-		title: processApiMessage(apiErrorMessage(error)),
-	})
+	presentError(error, { fallbackKey: 'error.500.description' })
 }
 
 const reads = useEditorReads(props.templateId)