@antelopejs/dms-mailing 0.7.1 → 0.9.0

package/frontend-vue/app/build/composables/useDrawerStats.ts

@@ -0,0 +1,78 @@
+import { computed, type ComputedRef, type Ref } from 'vue'
+import type { TemplatePerformance, TemplateRow } from '../../types/mailing'
+import { SENDS_PATH } from '../../utils/pages'
+
+/**
+ * The figures of a template's drawer and the send log they link to: the
+ * drawer's script run that builds them, called where it stood.
+ */
+export function useDrawerStats(
+	template: ComputedRef<TemplateRow | null>,
+	performance: Ref<TemplatePerformance | null>,
+	t: ReturnType<typeof useI18n>['t'],
+	uiLocale: Ref<string>,
+) {
+	/** 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 OPEN_RATE_DIGITS = 1
+	const PERCENT = 100
+
+	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,
+		},
+	])
+
+	return { formatNumber, sendLogRoute, hasSends, stats }
+}

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

@@ -6,11 +6,7 @@ import {
 	useTemplateContentRead,
 	useTemplateListRead,
 } from '../composables/useMailingReads'
-import {
-	HTTP_CONFLICT,
-	apiErrorMessage,
-	apiErrorStatus,
-} from '../utils/api-error'
+import { HTTP_CONFLICT, apiErrorStatus } from '../utils/api-error'
 import {
 	fitName,
 	freeSlug,
@@ -31,9 +27,8 @@ const props = defineProps<DuplicateModalProps>()
 const emit = defineEmits<{ success: [created?: boolean] }>()
 
 const api = useMailingApi()
-const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { t } = useI18n()
-const { processApiMessage } = useTranslation()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
 const readTemplates = useTemplateListRead()
@@ -105,10 +100,7 @@ function reportFailure(error: unknown): void {
 		takenSlugs.value = new Set([...takenSlugs.value, slug.value])
 		return
 	}
-	toast.add({
-		color: 'error',
-		title: processApiMessage(apiErrorMessage(error)),
-	})
+	presentError(error, { fallbackKey: 'error.500.description' })
 }
 
 async function submit(): Promise<void> {

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

@@ -26,6 +26,7 @@ const KEY_PREFIX = 'dms_mailing.sends.fix_address.'
 const api = useMailingApi()
 const reportReplay = useReplayToast()
 const { t } = useI18n()
+const { presentError } = useApiErrorPresenter()
 
 const previous = computed(() => props.rowData?.recipientEmail ?? '')
 const address = ref(previous.value)
@@ -66,7 +67,7 @@ async function submit(): Promise<void> {
 		reportReplay(result, email, key('sent', { email }))
 		emit('success', true)
 	} catch (error) {
-		useApiError(error)
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		sending.value = false
 	}

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

@@ -9,11 +9,7 @@ import {
 	useStartersRead,
 	useTemplateListRead,
 } from '../composables/useMailingReads'
-import {
-	HTTP_CONFLICT,
-	apiErrorMessage,
-	apiErrorStatus,
-} from '../utils/api-error'
+import { HTTP_CONFLICT, apiErrorStatus } from '../utils/api-error'
 import { NO_CATEGORY, fromCategoryOption } from '../utils/categories'
 import { groupByCategory, matchesSearch } from '../utils/gallery'
 import { slugify, validateName, validateSlug } from '../utils/slug'
@@ -73,9 +69,8 @@ const props = defineProps<NewTemplateModalProps>()
 const emit = defineEmits<{ success: [created?: boolean] }>()
 
 const api = useMailingApi()
-const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { t } = useI18n()
-const { processApiMessage } = useTranslation()
 
 const name = ref(props.initialName ?? '')
 const slug = ref(slugify(name.value))
@@ -256,10 +251,7 @@ function reportFailure(error: unknown): void {
 		refusedSlugs.value = new Set([...refusedSlugs.value, slug.value])
 		return
 	}
-	toast.add({
-		color: 'error',
-		title: processApiMessage(apiErrorMessage(error)),
-	})
+	presentError(error, { fallbackKey: 'error.500.description' })
 }
 
 async function submit(): Promise<void> {

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

@@ -7,7 +7,6 @@ import { useMailingApi } from '../composables/useMailingApi'
 import { useTemplateContentRead } from '../composables/useMailingReads'
 import type { SendResult } from '../composables/useMailingApi'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
-import { apiErrorMessage } from '../utils/api-error'
 import { firstName, formatCardDate } from '../utils/gallery'
 import { localeChipClass, missingLocales } from '../utils/locales'
 import {
@@ -57,10 +56,10 @@ const emit = defineEmits<{ success: [sent?: boolean] }>()
 
 const api = useMailingApi()
 const toast = useToast()
+const { presentError } = useApiErrorPresenter()
 const { t, locale: uiLocale } = useI18n()
 const onDate = (date: string): string =>
 	t('dms_mailing.common.on_date', { date })
-const { processApiMessage } = useTranslation()
 const { uniqueLocales } = useUniqueLocales()
 const overlays = useTemplateDrawer()
 
@@ -110,10 +109,7 @@ onMounted(async () => {
 		values.value = initialSendValues(fields.value, detail.value.testData)
 		locale.value = detail.value.fallbackLocale
 	} catch (error) {
-		toast.add({
-			color: 'error',
-			title: processApiMessage(apiErrorMessage(error)),
-		})
+		presentError(error, { fallbackKey: 'error.500.description' })
 	} finally {
 		loading.value = false
 	}
@@ -296,15 +292,11 @@ function openSettings(): void {
 	void navigateDms({ path: SETTINGS_PATH })
 }
 
-function report(results: SendResult[], to: string[]): void {
+function report(results: SendResult[]): void {
 	results
 		.filter((result) => result.error)
 		.forEach((result) =>
-			toast.add({
-				color: 'error',
-				title: to[results.indexOf(result)] ?? result.sendId,
-				description: processApiMessage(result.error),
-			}),
+			presentError(result.error, { fallbackKey: 'error.500.description' }),
 		)
 	const sent = results.filter((result) => !result.error).length
 	if (!sent) return
@@ -331,13 +323,10 @@ async function submit(): Promise<void> {
 			locale: locale.value || undefined,
 			data: sendData.value,
 		})
-		report(response.results, to)
+		report(response.results)
 		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/RenderingModal.vue

@@ -45,6 +45,7 @@ const FRAME_WIDTHS: Record<RenderingView, string> = {
 }
 
 const { t, locale } = useI18n()
+const { presentError } = useApiErrorPresenter()
 
 const view = ref<RenderingView>('desktop')
 const rendering = ref<SendRendering | null>(null)
@@ -99,7 +100,7 @@ async function load(): Promise<void> {
 		rendering.value = html
 	} catch (error) {
 		failed.value = true
-		useApiError(error)
+		presentError(error, { fallbackKey: `${KEY_PREFIX}error_description` })
 	} finally {
 		loading.value = false
 	}

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
 	}