@antelopejs/dms-mailing 0.2.2

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { editorRoute } from '../utils/editor-route'
+import { fromCategoryOption, NO_CATEGORY } from '../utils/categories'
+import type { TemplateCategory, TemplateRow } from '../types/mailing'
+
+interface NewTemplateModalProps {
+	onSuccessCallback?: () => void
+}
+
+const SLUG_SEPARATOR = '-'
+// Not the empty string: Reka's `Select` reserves it for "nothing selected" and
+// refuses to open a listbox that offers it. See NO_CATEGORY in utils/categories.
+const BLANK_SOURCE = '__blank__'
+
+const props = defineProps<NewTemplateModalProps>()
+
+const emit = defineEmits<{ success: [] }>()
+
+const api = useMailingApi()
+const toast = useToast()
+const { t } = useI18n()
+const { processApiMessage } = useTranslation()
+
+const name = ref('')
+const slug = ref('')
+const slugTouched = ref(false)
+const category = ref(NO_CATEGORY)
+const sourceTemplateId = ref(BLANK_SOURCE)
+const saving = ref(false)
+const sources = ref<TemplateRow[]>([])
+const categories = ref<TemplateCategory[]>([])
+
+const categoryItems = computed(() => [
+	{ label: t('dms_mailing.templates.uncategorised'), value: NO_CATEGORY },
+	...categories.value.map((entry) => ({
+		label: entry.label,
+		value: entry.id,
+	})),
+])
+
+// Blank first, then the tenant's own templates. An empty tenant offers only
+// Blank, which is the normal first-run state, not an error.
+const sourceItems = computed(() => [
+	{ label: t('dms_mailing.templates.start_from.blank'), value: BLANK_SOURCE },
+	...sources.value.map((entry) => ({
+		label: `${entry.name} · ${entry.slug}`,
+		value: entry._id,
+	})),
+])
+
+function slugify(value: string): string {
+	return value
+		.normalize('NFD')
+		.replace(/\p{Diacritic}/gu, '')
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, SLUG_SEPARATOR)
+		.replace(/^-+|-+$/g, '')
+}
+
+watch(name, (value) => {
+	if (!slugTouched.value) slug.value = slugify(value)
+})
+
+const canSubmit = computed(
+	() => Boolean(name.value.trim() && slug.value.trim()) && !saving.value,
+)
+
+onMounted(async () => {
+	const [templates, categoryList] = await Promise.all([
+		api.listTemplates().catch(() => ({ results: [] })),
+		api.listCategories().catch(() => ({ categories: [] })),
+	])
+	sources.value = templates.results
+	categories.value = categoryList.categories
+})
+
+async function submit(): Promise<void> {
+	if (!canSubmit.value) return
+	saving.value = true
+	try {
+		const [id] = await api.createTemplate({
+			name: name.value.trim(),
+			slug: slug.value.trim(),
+			category: fromCategoryOption(category.value) || undefined,
+			sourceTemplateId:
+				sourceTemplateId.value === BLANK_SOURCE
+					? undefined
+					: sourceTemplateId.value,
+		})
+		props.onSuccessCallback?.()
+		emit('success')
+		if (id) await navigateDms(editorRoute(id))
+	} catch (error) {
+		toast.add({
+			color: 'error',
+			title: processApiMessage(
+				(error as { data?: { message?: string } }).data?.message ?? error,
+			),
+		})
+	} finally {
+		saving.value = false
+	}
+}
+</script>
+
+<template>
+	<UForm
+		:state="{ name, slug, category, sourceTemplateId }"
+		class="flex flex-col gap-4"
+		@submit="submit"
+	>
+		<UFormField :label="t('dms_mailing.templates.cols.name')" name="name">
+			<UInput v-model="name" class="w-full" autofocus />
+		</UFormField>
+
+		<UFormField :label="t('dms_mailing.templates.cols.slug')" name="slug">
+			<UInput
+				v-model="slug"
+				class="w-full font-mono"
+				@update:model-value="slugTouched = true"
+			/>
+		</UFormField>
+
+		<UFormField
+			:label="t('dms_mailing.templates.cols.category')"
+			name="category"
+		>
+			<USelect
+				v-model="category"
+				:items="categoryItems"
+				value-key="value"
+				class="w-full"
+			/>
+		</UFormField>
+
+		<UFormField
+			:label="t('dms_mailing.templates.start_from.label')"
+			name="sourceTemplateId"
+		>
+			<USelect
+				v-model="sourceTemplateId"
+				:items="sourceItems"
+				value-key="value"
+				class="w-full"
+			/>
+		</UFormField>
+
+		<div class="flex justify-end">
+			<UButton
+				type="submit"
+				icon="i-ph-plus"
+				:label="t('dms_mailing.templates.actions.create')"
+				:loading="saving"
+				:disabled="!canSubmit"
+			/>
+		</div>
+	</UForm>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ProviderInfo } from '../types/mailing'
+
+const api = useMailingApi()
+const { t } = useI18n()
+
+const provider = ref<ProviderInfo | null>(null)
+
+onMounted(async () => {
+	try {
+		provider.value = await api.provider()
+	} catch {
+		provider.value = null
+	}
+})
+
+const isConnected = computed(() => provider.value?.connected === true)
+
+const label = computed(() =>
+	isConnected.value
+		? t('dms_mailing.provider.connected', { name: provider.value?.name ?? '' })
+		: t('dms_mailing.provider.disconnected'),
+)
+</script>
+
+<template>
+	<UChip
+		v-if="provider"
+		:color="isConnected ? 'success' : 'warning'"
+		size="sm"
+		inset
+	>
+		<UBadge
+			:color="isConnected ? 'neutral' : 'warning'"
+			variant="subtle"
+			:label="label"
+		/>
+	</UChip>
+</template>

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

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { buildTimeline, type TimelineTone } from '../utils/timeline'
+import type { Component } from 'vue'
+import type { SendDetailResponse, SendRow, SendStatus } from '../types/mailing'
+
+interface SendDrawerProps {
+	sendId?: string
+	rowData?: SendRow
+	onSuccessCallback?: () => void
+}
+
+const EDITOR_PATH = '/modules/mailing/editor'
+const HTML_PREVIEW_COMPONENT = 'DmsMailingHtmlPreviewModal'
+const HTML_MODAL_SIZE = 'xl'
+const PAYLOAD_INDENT = 2
+const TIME_FORMAT: Intl.DateTimeFormatOptions = {
+	hour: '2-digit',
+	minute: '2-digit',
+}
+
+const PROBLEM_STATUSES: SendStatus[] = ['bounced', 'spam', 'failed']
+
+const props = defineProps<SendDrawerProps>()
+
+const api = useMailingApi()
+const toast = useToast()
+const { t, locale: uiLocale } = useI18n()
+const { open: openModal } = useModal()
+
+const sendId = computed(() => props.rowData?._id ?? props.sendId ?? '')
+
+const detail = ref<SendDetailResponse | null>(null)
+const loading = ref(false)
+const replaying = ref(false)
+
+const send = computed(() => detail.value?.send ?? props.rowData ?? null)
+
+const isProblem = computed(() =>
+	send.value ? PROBLEM_STATUSES.includes(send.value.status) : false,
+)
+
+const TONE_CLASSES: Record<TimelineTone, string> = {
+	neutral: 'bg-elevated text-muted',
+	primary: 'bg-primary/10 text-primary',
+	success: 'bg-success/10 text-success',
+	warning: 'bg-warning/10 text-warning',
+	error: 'bg-error/10 text-error',
+}
+
+const timeline = computed(() =>
+	buildTimeline(detail.value?.events ?? []).map((item) => ({
+		...item,
+		title: t(`dms_mailing.sends.timeline.${item.type}`),
+		time: new Date(item.at).toLocaleTimeString(uiLocale.value, TIME_FORMAT),
+	})),
+)
+
+// The reference header carries exactly three values, not a banner.
+const headerValues = computed(() => {
+	const row = send.value
+	if (!row) return []
+	return [
+		{
+			label: t('dms_mailing.sends.drawer.status'),
+			value: t(`dms_mailing.sends.status.${row.status}`),
+			tone: isProblem.value ? 'text-error' : 'text-highlighted',
+		},
+		{
+			label: t('dms_mailing.sends.drawer.latency'),
+			value: `${row.latencyMs} ms`,
+			tone: 'text-highlighted',
+		},
+		{
+			label: t('dms_mailing.sends.drawer.locale'),
+			value: row.locale.toUpperCase(),
+			tone: 'text-highlighted',
+		},
+	]
+})
+
+const payload = computed(() => {
+	const raw = send.value?.json_variables
+	if (!raw) return ''
+	try {
+		return JSON.stringify(JSON.parse(raw), null, PAYLOAD_INDENT)
+	} catch {
+		return raw
+	}
+})
+
+const errorTitle = computed(() =>
+	send.value?.status === 'bounced'
+		? t('dms_mailing.sends.drawer.invalid_address')
+		: t('dms_mailing.sends.drawer.transport_error'),
+)
+
+async function load(): Promise<void> {
+	if (!sendId.value) return
+	loading.value = true
+	try {
+		detail.value = await api.send(sendId.value)
+	} catch (error) {
+		toast.add({ color: 'error', title: String(error) })
+	} finally {
+		loading.value = false
+	}
+}
+
+async function replay(): Promise<void> {
+	replaying.value = true
+	try {
+		await api.replay(sendId.value)
+		toast.add({
+			color: 'success',
+			title: t('dms_mailing.sends.drawer.replayed'),
+		})
+		if (props.onSuccessCallback) {
+			props.onSuccessCallback()
+			return
+		}
+		await load()
+	} catch (error) {
+		toast.add({ color: 'error', title: String(error) })
+	} finally {
+		replaying.value = false
+	}
+}
+
+async function viewHtml(): Promise<void> {
+	try {
+		const { html } = await api.sendHtml(sendId.value)
+		openModal({
+			title: t('dms_mailing.sends.drawer.view_html'),
+			component: resolveComponent(HTML_PREVIEW_COMPONENT) as Component,
+			componentOptions: { html },
+			size: HTML_MODAL_SIZE,
+		})
+	} catch (error) {
+		toast.add({ color: 'error', title: String(error) })
+	}
+}
+
+function openTemplate(): void {
+	if (!send.value) return
+	navigateDms({
+		path: EDITOR_PATH,
+		query: { id: send.value.templateId, locale: send.value.locale },
+	})
+}
+
+onMounted(load)
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<USkeleton v-if="loading && !send" class="h-64 w-full" />
+
+		<template v-else-if="send">
+			<div class="flex flex-col gap-0.5">
+				<span class="text-highlighted truncate text-sm font-semibold">
+					{{ send.recipientName || send.recipientEmail }}
+				</span>
+				<span class="text-dimmed truncate font-mono text-[11px]">
+					{{ send.recipientEmail }} · {{ send._id }}
+				</span>
+			</div>
+
+			<div
+				class="border-default divide-default grid grid-cols-3 divide-x rounded-lg border"
+			>
+				<div
+					v-for="value in headerValues"
+					:key="value.label"
+					class="flex flex-col gap-1 px-3 py-2.5"
+				>
+					<span
+						class="text-dimmed font-mono text-[10px] uppercase tracking-widest"
+					>
+						{{ value.label }}
+					</span>
+					<span class="truncate text-[13px] font-semibold" :class="value.tone">
+						{{ value.value }}
+					</span>
+				</div>
+			</div>
+
+			<DmsBanner
+				v-if="send.error"
+				color="error"
+				icon="i-ph-warning"
+				:title="errorTitle"
+				:description="send.error"
+			/>
+
+			<section class="flex flex-col gap-2">
+				<h3 class="text-dimmed font-mono text-[10px] uppercase tracking-widest">
+					{{ t('dms_mailing.sends.drawer.timeline') }}
+				</h3>
+				<ol class="flex flex-col">
+					<li
+						v-for="(item, index) in timeline"
+						:key="item.id"
+						class="relative flex items-start gap-3 pb-3 last:pb-0"
+					>
+						<span
+							v-if="index < timeline.length - 1"
+							class="bg-default absolute bottom-0 left-[11px] top-6 w-px"
+							aria-hidden="true"
+						/>
+						<span
+							:class="TONE_CLASSES[item.tone]"
+							class="relative z-10 grid size-[22px] shrink-0 place-items-center rounded-full"
+						>
+							<UIcon :name="item.icon" class="size-3" aria-hidden="true" />
+						</span>
+						<span class="flex min-w-0 flex-1 flex-col">
+							<span
+								class="truncate text-[12.5px] font-medium"
+								:class="item.tone === 'error' ? 'text-error' : 'text-toned'"
+							>
+								{{ item.title }}
+							</span>
+							<span
+								v-if="item.description"
+								class="text-dimmed truncate text-[11px]"
+							>
+								{{ item.description }}
+							</span>
+						</span>
+						<span class="text-dimmed shrink-0 font-mono text-[11px]">
+							{{ item.time }}
+						</span>
+					</li>
+				</ol>
+			</section>
+
+			<section class="flex flex-col gap-1">
+				<h3 class="text-dimmed font-mono text-[10px] uppercase tracking-widest">
+					{{ t('dms_mailing.sends.drawer.template') }}
+				</h3>
+				<button
+					type="button"
+					class="hover:bg-elevated/60 flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors"
+					@click="openTemplate"
+				>
+					<UIcon
+						name="i-ph-envelope-simple"
+						class="text-dimmed size-3.5 shrink-0"
+					/>
+					<span class="text-toned min-w-0 flex-1 truncate text-[12.5px]">
+						{{ send.templateSlug }}
+					</span>
+					<UIcon
+						name="i-ph-arrow-square-out"
+						class="text-dimmed size-3.5 shrink-0"
+					/>
+				</button>
+				<div v-if="send.source" class="flex items-center gap-2 px-2 py-1.5">
+					<UIcon name="i-ph-code" class="text-dimmed size-3.5 shrink-0" />
+					<span
+						class="text-dimmed min-w-0 flex-1 truncate font-mono text-[11.5px]"
+					>
+						{{ send.source }}
+					</span>
+				</div>
+			</section>
+
+			<section class="flex flex-col gap-2">
+				<h3 class="text-dimmed font-mono text-[10px] uppercase tracking-widest">
+					{{ t('dms_mailing.sends.drawer.payload') }}
+				</h3>
+				<div class="bg-elevated/50 relative rounded-lg p-2.5">
+					<pre
+						class="text-toned overflow-x-auto font-mono text-[11px] leading-relaxed"
+						>{{ payload }}</pre>
+					<DmsCopyButton :value="payload" class="absolute right-1 top-1" />
+				</div>
+			</section>
+
+			<div class="flex items-center gap-2">
+				<UButton
+					class="flex-1 justify-center"
+					icon="i-ph-arrow-clockwise"
+					:label="t('dms_mailing.sends.drawer.replay')"
+					:loading="replaying"
+					@click="replay"
+				/>
+				<UButton
+					icon="i-ph-eye"
+					color="neutral"
+					variant="ghost"
+					:title="t('dms_mailing.sends.drawer.view_html')"
+					@click="viewHtml"
+				/>
+			</div>
+		</template>
+	</div>
+</template>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { localeBadges } from '../utils/locales'
+import type { TemplateRow, TemplateStatus } from '../types/mailing'
+
+interface TemplateCardProps {
+	template: TemplateRow
+	selected?: boolean
+}
+
+const PREVIEW_WIDTH = 600
+const PREVIEW_SCALE = 0.45
+const LIVE_STATUS: TemplateStatus = 'live'
+
+const props = defineProps<TemplateCardProps>()
+
+const emit = defineEmits<{
+	open: []
+	details: []
+	'test-send': []
+	'open-locale': [code: string]
+}>()
+
+const { t } = useI18n()
+const { uniqueLocales } = useUniqueLocales()
+
+const statusLabel = computed(() =>
+	t(`dms_mailing.templates.status.${props.template.status}`),
+)
+
+const badges = computed(() =>
+	localeBadges(
+		props.template.locales,
+		uniqueLocales.value.map((entry) => entry.code),
+	),
+)
+
+function badgeLabel(code: string, present: boolean): string {
+	const key = present ? 'edit_locale' : 'add_locale'
+	return t(`dms_mailing.templates.card.${key}`, {
+		locale: code.toUpperCase(),
+	})
+}
+</script>
+
+<template>
+	<DmsCard
+		:padded="false"
+		interactive
+		:class="selected ? 'ring-primary/40 ring-2' : ''"
+		class="group overflow-hidden"
+		@click="emit('open')"
+	>
+		<div class="bg-elevated/40 relative h-[158px] overflow-hidden">
+			<div class="pointer-events-none">
+				<DmsMailingTemplatePreviewFrame
+					:template-id="template._id"
+					:width="PREVIEW_WIDTH"
+					:scale="PREVIEW_SCALE"
+				/>
+			</div>
+			<div
+				class="absolute inset-0 flex items-center justify-center gap-2 bg-black/45 opacity-0 transition-opacity group-hover:opacity-100"
+			>
+				<UButton
+					icon="i-ph-pencil-simple"
+					:label="t('dms_mailing.templates.actions.edit')"
+					size="sm"
+					@click.stop="emit('open')"
+				/>
+				<UButton
+					icon="i-ph-paper-plane-tilt"
+					color="neutral"
+					variant="ghost"
+					size="sm"
+					:title="t('dms_mailing.templates.actions.test_send')"
+					@click.stop="emit('test-send')"
+				/>
+				<UButton
+					icon="i-ph-info"
+					color="neutral"
+					variant="ghost"
+					size="sm"
+					:title="t('dms_mailing.templates.actions.details')"
+					@click.stop="emit('details')"
+				/>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-1 p-4">
+			<div class="flex items-center gap-2">
+				<h3 class="text-highlighted truncate text-[13.5px] font-semibold">
+					{{ template.name }}
+				</h3>
+				<UBadge
+					v-if="template.status !== LIVE_STATUS"
+					:label="statusLabel"
+					color="neutral"
+					variant="subtle"
+					size="sm"
+				/>
+			</div>
+			<span class="text-dimmed truncate font-mono text-[11.5px]">
+				{{ template.slug }}
+			</span>
+			<div class="mt-1 flex items-center gap-2">
+				<div v-if="badges.length" class="flex items-center gap-1">
+					<button
+						v-for="badge in badges"
+						:key="badge.code"
+						type="button"
+						:title="badgeLabel(badge.code, badge.present)"
+						:aria-label="badgeLabel(badge.code, badge.present)"
+						class="rounded px-1.5 py-0.5 font-mono text-[10.5px] font-medium uppercase transition-colors"
+						:class="
+							badge.present
+								? 'bg-elevated text-toned hover:bg-accented'
+								: 'text-warning border-warning/50 hover:bg-warning/10 border border-dashed'
+						"
+						@click.stop="emit('open-locale', badge.code)"
+					>
+						{{ badge.code }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</DmsCard>
+</template>