@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { useMailingApi } from '../composables/useMailingApi'
+import type { TemplateStatus, TemplateVersionSummary } from '../types/mailing'
+import { apiErrorMessage } from '../utils/api-error'
+import {
+	changeSummary,
+	formatVersionDate,
+	isLiveVersion,
+} from '../utils/version-history'
+import type { VersionPreviewChoice } from '../utils/version-history'
+
+interface VersionHistoryProps {
+	templateId: string
+	/** The version customers receive (or last received); 0 when never published. */
+	currentVersion: number
+	status?: TemplateStatus
+	/** The locale a preview opens on, when the version carries it. */
+	locale?: string
+	/** Copies a version into the draft; the caller reloads what it shows. */
+	restore: (version: number) => Promise<unknown>
+}
+
+const PREVIEW_COMPONENT = 'MailingVersionPreview'
+const PREVIEW_SIZE = '3xl'
+const RESTORE_ICON = 'i-ph-arrow-counter-clockwise'
+const KEY = 'dms_mailing.history'
+
+const props = withDefaults(defineProps<VersionHistoryProps>(), {
+	status: undefined,
+	locale: undefined,
+})
+
+const api = useMailingApi()
+const modal = useModal()
+const toast = useToast()
+const { confirm } = useConfirm()
+const { t, locale: uiLocale } = useI18n()
+const { processApiMessage } = useTranslation()
+const previewComponent = resolveComponent(PREVIEW_COMPONENT) as Component
+
+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
+	} catch (error) {
+		toast.add({
+			color: 'error',
+			title: processApiMessage(apiErrorMessage(error)),
+		})
+	} finally {
+		loading.value = false
+	}
+}
+
+onMounted(load)
+
+const translate = (key: string, params?: Record<string, string>) =>
+	t(key, params ?? {})
+
+const rows = computed(() =>
+	versions.value.map((version) => {
+		const summary = changeSummary(version, translate)
+		return {
+			version,
+			isLive: isLiveVersion(
+				version.version,
+				props.currentVersion,
+				props.status,
+			),
+			isCurrent: version.version === props.currentVersion,
+			meta: [
+				formatVersionDate(version.publishedAt, uiLocale.value),
+				version.publishedBy,
+			].filter(Boolean),
+			summary: summary.more
+				? t(
+						`${KEY}.summary_more`,
+						{ changes: summary.named.join(', '), count: summary.more },
+						summary.more,
+					)
+				: summary.named.join(', ') || t(`${KEY}.no_changes`),
+		}
+	}),
+)
+
+function isRestoreConfirmed(version: number): Promise<boolean> {
+	return confirm({
+		title: t(`${KEY}.restore_title`, { version }),
+		description: t(`${KEY}.restore_description`, {
+			version,
+			current: props.currentVersion,
+		}),
+		color: 'warning',
+		icon: RESTORE_ICON,
+		confirmLabel: t(`${KEY}.restore`, { version }),
+		cancelLabel: t('dms_mailing.common.cancel'),
+	})
+}
+
+async function confirmRestore(version: number): Promise<void> {
+	if (!(await isRestoreConfirmed(version))) return
+	await props.restore(version)
+}
+
+async function preview(version: TemplateVersionSummary): Promise<void> {
+	const choice = await modal.open<VersionPreviewChoice>({
+		title: t(`${KEY}.preview_title`, { version: version.version }),
+		description: [
+			formatVersionDate(version.publishedAt, uiLocale.value),
+			version.publishedBy,
+		]
+			.filter(Boolean)
+			.join(' · '),
+		icon: 'i-ph-clock-counter-clockwise',
+		component: previewComponent,
+		componentOptions: {
+			templateId: props.templateId,
+			version,
+			isCurrent: version.version === props.currentVersion,
+			initialLocale: props.locale,
+		},
+		size: PREVIEW_SIZE,
+	}).result
+	if (choice === 'restore') await confirmRestore(version.version)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-1">
+		<USkeleton v-if="loading && !versions.length" class="h-24 w-full" />
+		<p v-else-if="!versions.length" class="text-muted text-[12.5px]">
+			{{ t(`${KEY}.empty`) }}
+		</p>
+		<DmsListRow
+			v-for="row in rows"
+			:key="row.version.version"
+			as="div"
+			size="sm"
+			:meta="row.meta"
+			:current="row.isLive"
+		>
+			<template #leading>
+				<span
+					class="bg-elevated text-toned grid h-7 min-w-9 shrink-0 place-items-center rounded-md px-1.5 font-mono text-[12px] font-semibold"
+				>
+					v{{ row.version.version }}
+				</span>
+			</template>
+			<span class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+				<span class="[overflow-wrap:anywhere]">{{ row.summary }}</span>
+				<DmsStatusPill
+					v-if="row.isLive"
+					size="sm"
+					tone="success"
+					dot="live"
+					:label="t(`${KEY}.live`)"
+				/>
+			</span>
+			<template #trailing>
+				<span class="flex items-center gap-0.5">
+					<UTooltip :text="t(`${KEY}.preview`)">
+						<UButton
+							icon="i-ph-eye"
+							color="neutral"
+							variant="ghost"
+							size="xs"
+							square
+							:aria-label="t(`${KEY}.preview`)"
+							@click="preview(row.version)"
+						/>
+					</UTooltip>
+					<UTooltip
+						v-if="!row.isCurrent"
+						:text="t(`${KEY}.restore`, { version: row.version.version })"
+					>
+						<UButton
+							:icon="RESTORE_ICON"
+							color="neutral"
+							variant="ghost"
+							size="xs"
+							square
+							:aria-label="
+								t(`${KEY}.restore`, { version: row.version.version })
+							"
+							@click="confirmRestore(row.version.version)"
+						/>
+					</UTooltip>
+				</span>
+			</template>
+		</DmsListRow>
+	</div>
+</template>

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

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type { PreviewResponse, TemplateVersionSummary } from '../types/mailing'
+import { describeChanges, NO_SOURCES } from '../utils/changes'
+import { parseLocaleList } from '../utils/locales'
+import { variableTypeLabelKey } from '../utils/variable-types'
+import type { VersionPreviewChoice } from '../utils/version-history'
+
+interface VersionPreviewProps {
+	templateId: string
+	version: TemplateVersionSummary
+	/** The version customers already receive: nothing to restore. */
+	isCurrent?: boolean
+	/** The locale shown first, when the version carries it. */
+	initialLocale?: string
+}
+
+const PREVIEW_WIDTH = 600
+const KEY = 'dms_mailing.history'
+
+const props = withDefaults(defineProps<VersionPreviewProps>(), {
+	isCurrent: false,
+	initialLocale: undefined,
+})
+const emit = defineEmits<{ success: [VersionPreviewChoice] }>()
+
+const { t } = useI18n()
+
+const locales = computed(() => parseLocaleList(props.version.locales))
+const locale = ref(
+	props.initialLocale && locales.value.includes(props.initialLocale)
+		? props.initialLocale
+		: (locales.value[0] ?? ''),
+)
+const subject = ref('')
+const previewBox = ref<HTMLElement | null>(null)
+const { width: previewBoxWidth } = useElementSize(previewBox)
+
+const previewScale = computed(() =>
+	previewBoxWidth.value
+		? Math.min(1, previewBoxWidth.value / PREVIEW_WIDTH)
+		: 1,
+)
+
+const localeItems = computed(() =>
+	locales.value.map((code) => ({ label: code.toUpperCase(), value: code })),
+)
+
+const lines = computed(() =>
+	describeChanges(props.version.changes, NO_SOURCES, (key, params) =>
+		t(key, params ?? {}),
+	),
+)
+
+const declared = computed(() => props.version.variables)
+
+function onResolved(preview: PreviewResponse): void {
+	subject.value = preview.subject
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center justify-between gap-2">
+			<DmsSegmented
+				v-if="localeItems.length > 1"
+				v-model="locale"
+				:items="localeItems"
+				size="xs"
+				:aria-label="t('dms_mailing.test_send.locale')"
+			/>
+			<span
+				v-if="subject"
+				class="text-muted min-w-0 truncate text-[12.5px]"
+				:title="subject"
+			>
+				{{ t('dms_mailing.templates.drawer.subject', { subject }) }}
+			</span>
+		</div>
+		<div
+			class="border-default bg-elevated/40 overflow-hidden rounded-lg border p-3"
+		>
+			<div ref="previewBox" class="flex justify-center">
+				<MailingTemplatePreviewFrame
+					:template-id="templateId"
+					:locale="locale || undefined"
+					:version="version.version"
+					:width="PREVIEW_WIDTH"
+					:scale="previewScale"
+					:label="t(`${KEY}.version`, { version: version.version })"
+					@resolved="onResolved"
+				/>
+			</div>
+		</div>
+
+		<div class="grid gap-4 sm:grid-cols-2">
+			<div class="flex flex-col gap-1.5">
+				<DmsEyebrow :label="t(`${KEY}.brought`)" />
+				<ul v-if="lines.length" class="flex flex-col gap-1 text-[12.5px]">
+					<li
+						v-for="line in lines"
+						:key="line.key"
+						class="text-toned flex gap-2"
+					>
+						<UIcon
+							:name="line.icon"
+							class="text-primary mt-0.5 size-3.5 shrink-0"
+						/>
+						<span>{{ line.text }}</span>
+					</li>
+				</ul>
+				<p v-else class="text-muted text-[12.5px]">
+					{{ t(`${KEY}.no_changes`) }}
+				</p>
+			</div>
+			<div class="flex flex-col gap-1.5">
+				<DmsEyebrow :label="t(`${KEY}.declared`)" />
+				<p v-if="!declared.length" class="text-muted text-[12.5px]">
+					{{ t(`${KEY}.no_variables`) }}
+				</p>
+				<div
+					v-for="variable in declared"
+					:key="variable.path"
+					class="flex items-center gap-2 text-[12px]"
+				>
+					<code class="text-toned truncate font-mono">{{ variable.path }}</code>
+					<span
+						v-if="variable.required"
+						class="text-error"
+						:title="t('dms_mailing.templates.drawer.required')"
+					>
+						*
+					</span>
+					<span class="text-dimmed ml-auto font-mono text-[11px]">
+						{{ t(variableTypeLabelKey(variable.type)) }}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<div
+			class="border-default -mx-1 flex flex-wrap items-center gap-2 border-t pt-4"
+		>
+			<p v-if="!isCurrent" class="text-muted min-w-0 flex-1 text-xs">
+				{{ t(`${KEY}.restore_hint`) }}
+			</p>
+			<UButton
+				class="ml-auto"
+				color="neutral"
+				variant="outline"
+				@click="emit('success', 'close')"
+			>
+				{{ t(`${KEY}.close`) }}
+			</UButton>
+			<UButton
+				v-if="!isCurrent"
+				icon="i-ph-arrow-counter-clockwise"
+				@click="emit('success', 'restore')"
+			>
+				{{ t(`${KEY}.restore`, { version: version.version }) }}
+			</UButton>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { useMailingApi } from '../composables/useMailingApi'
+import { formatCardDate } from '../utils/gallery'
+import {
+	type WebhookLineTone,
+	type WebhookStatus,
+	type WebhookStatusLine,
+	webhookStatusLines,
+	webhookTestMessage,
+} from '../utils/webhook-status'
+
+/**
+ * A settings field that shows, never edits: the form hands it a value it
+ * ignores, and it reads the webhook's status from its own route.
+ */
+interface WebhookStatusProps {
+	modelValue?: unknown
+	initialValue?: unknown
+	disabled?: boolean
+}
+
+defineProps<WebhookStatusProps>()
+
+const KEY_PREFIX = 'dms_mailing.settings.webhook_status.'
+
+const TONE_CLASSES: Record<WebhookLineTone, string> = {
+	success: 'text-success',
+	warning: 'text-warning',
+	error: 'text-error',
+	neutral: 'text-dimmed',
+}
+
+const api = useMailingApi()
+const toast = useToast()
+const { t, locale } = useI18n()
+
+const status = ref<WebhookStatus | null>(null)
+const isLoading = ref(true)
+const isTesting = ref(false)
+
+const lines = computed(() =>
+	status.value ? webhookStatusLines(status.value) : [],
+)
+
+const key = (path: string, params: Record<string, unknown> = {}): string =>
+	t(`${KEY_PREFIX}${path}`, params)
+
+function lineText(line: WebhookStatusLine): string {
+	const reason = line.reasonKey ? t(line.reasonKey) : ''
+	return t(line.labelKey, { ...line.params, reason })
+}
+
+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
+	}
+}
+
+async function sendTest(): Promise<void> {
+	if (isTesting.value) return
+	isTesting.value = true
+	try {
+		const result = await api.webhookTest()
+		status.value = result.status
+		const message = webhookTestMessage(result)
+		toast.add({
+			color: message.color,
+			title: t(message.titleKey, message.params),
+			description: message.descriptionKey
+				? t(message.descriptionKey, message.params)
+				: undefined,
+		})
+	} catch (error) {
+		useApiError(error)
+	} finally {
+		isTesting.value = false
+	}
+}
+
+onMounted(() => void load())
+</script>
+
+<template>
+	<div class="flex flex-col gap-3">
+		<USkeleton v-if="isLoading" class="h-10 w-full" />
+		<p v-else-if="!status" class="text-muted text-[13px]">
+			{{ key('unavailable') }}
+		</p>
+		<ul v-else class="flex flex-col gap-1.5" :aria-label="key('label')">
+			<li
+				v-for="line in lines"
+				:key="line.id"
+				class="flex items-start gap-2 text-[13px]"
+			>
+				<UIcon
+					:name="line.icon"
+					class="mt-0.5 size-4 shrink-0"
+					:class="TONE_CLASSES[line.tone]"
+					aria-hidden="true"
+				/>
+				<span class="text-toned min-w-0 flex-1">{{ lineText(line) }}</span>
+				<span v-if="line.at" class="text-muted shrink-0 tabular-nums">
+					{{ lineTime(line) }}
+				</span>
+			</li>
+		</ul>
+		<div class="flex flex-wrap items-center gap-2">
+			<UButton
+				type="button"
+				size="sm"
+				color="neutral"
+				variant="outline"
+				icon="i-ph-paper-plane-tilt"
+				:loading="isTesting"
+				:disabled="disabled"
+				:label="key('send_test')"
+				@click="sendTest"
+			/>
+			<span class="text-dimmed text-[12px]">{{ key('send_test_hint') }}</span>
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/blocks/Button.vue

@@ -13,7 +13,7 @@ defineProps<Props>()
 		<span
 			class="inline-flex h-10 items-center rounded-md bg-gray-900 px-5 text-sm font-semibold text-white"
 		>
-			<DmsMailingTokenText :text="block.text" />
+			<MailingTokenText :text="block.text" />
 		</span>
 	</div>
 </template>

package/frontend-vue/app/components/blocks/Code.vue

@@ -12,6 +12,6 @@ defineProps<Props>()
 	<div
 		class="mb-4 rounded-lg border border-dashed border-gray-300 py-5 text-center font-mono text-[27px] tracking-[0.25em] text-gray-900"
 	>
-		<DmsMailingTokenText :text="block.text" />
+		<MailingTokenText :text="block.text" />
 	</div>
 </template>

package/frontend-vue/app/components/blocks/Footer.vue

@@ -1,22 +1,71 @@
 <script setup lang="ts">
+import { computed, inject } from 'vue'
 import type { FooterBlock } from '../../types/mailing'
+import { TOKEN_DATA_KEY } from '../../utils/tokens'
+import { FOOTER_LINK_PATHS, hasSystemUrl } from '../../utils/system-variables'
 
 interface Props {
 	block: FooterBlock
 }
 
-defineProps<Props>()
+interface FooterLink {
+	key: string
+	label: string
+	path: string
+	/** Data mode carries the URL: the link looks as the recipient sees it. */
+	hasUrl: boolean
+}
+
+type FooterLabelKey = keyof typeof FOOTER_LINK_PATHS
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.footer'
+const LINK_SEPARATOR = ' · '
+
+const { t } = useI18n()
+const data = inject(TOKEN_DATA_KEY, null)
+
+const links = computed<FooterLink[]>(() =>
+	(Object.keys(FOOTER_LINK_PATHS) as FooterLabelKey[])
+		.filter((key) => props.block[key].trim())
+		.map((key) => ({
+			key,
+			label: props.block[key],
+			path: FOOTER_LINK_PATHS[key],
+			hasUrl: hasSystemUrl(data?.value, FOOTER_LINK_PATHS[key]),
+		})),
+)
+const isEmpty = computed(() => !props.block.text.trim() && !links.value.length)
+const hasPendingUrl = computed(() => links.value.some((link) => !link.hasUrl))
 </script>
 
 <template>
 	<div
-		class="mt-6 border-t border-gray-200 pt-4 text-center text-xs leading-relaxed text-gray-400"
+		class="mt-6 border-t border-gray-200 pt-4 text-center text-xs leading-relaxed text-gray-500"
 	>
-		<DmsMailingTokenText :text="block.text" />
-		<p class="mt-1">
-			<span class="underline">{{ block.unsubscribeLabel }}</span>
-			·
-			<span class="underline">{{ block.preferencesLabel }}</span>
+		<p v-if="isEmpty" class="italic text-gray-500">
+			{{ t(`${KEY}.empty`) }}
+		</p>
+		<MailingTokenText v-else :text="block.text" />
+		<p v-if="links.length" class="mt-1">
+			<template v-for="(link, index) in links" :key="link.key">
+				<template v-if="index > 0">{{ LINK_SEPARATOR }}</template>
+				<span
+					class="underline"
+					:class="link.hasUrl ? '' : 'text-gray-400 decoration-dotted'"
+					:title="
+						link.hasUrl
+							? undefined
+							: t(`${KEY}.url_at_send`, { path: link.path })
+					"
+				>
+					{{ link.label }}
+				</span>
+			</template>
+		</p>
+		<p v-if="hasPendingUrl" class="mt-0.5 text-[10px] italic text-gray-500">
+			{{ t(`${KEY}.url_at_send_hint`) }}
 		</p>
 	</div>
 </template>

package/frontend-vue/app/components/blocks/Heading.vue

@@ -13,6 +13,6 @@ defineProps<Props>()
 		class="mb-3 font-semibold text-gray-900"
 		:style="{ textAlign: block.align, fontSize: `${block.size}px` }"
 	>
-		<DmsMailingTokenText :text="block.text" />
+		<MailingTokenText :text="block.text" />
 	</h1>
 </template>

package/frontend-vue/app/components/blocks/Hero.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import type { HeroBlock } from '../../types/mailing'
+import { TOKEN_DATA_KEY, interpolateText } from '../../utils/tokens'
 
 const TOKEN_OPEN = '{{'
 
@@ -9,24 +10,29 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+const data = inject(TOKEN_DATA_KEY, null)
 
+const interpolated = (text: string): string =>
+	data?.value ? interpolateText(text, data.value) : text
+
+const imageUrl = computed(() => interpolated(props.block.imageUrl))
+const alt = computed(() => interpolated(props.block.alt))
 const hasImage = computed(
-	() =>
-		Boolean(props.block.imageUrl) && !props.block.imageUrl.includes(TOKEN_OPEN),
+	() => Boolean(imageUrl.value) && !imageUrl.value.includes(TOKEN_OPEN),
 )
 </script>
 
 <template>
 	<img
 		v-if="hasImage"
-		:src="block.imageUrl"
-		:alt="block.alt"
+		:src="imageUrl"
+		:alt="alt"
 		class="mb-4 w-full rounded-lg object-cover"
 	/>
 	<div
 		v-else
-		class="mb-4 flex h-32 items-center justify-center rounded-lg bg-[repeating-linear-gradient(45deg,#eef0f3_0_7px,#f7f8fa_7px_14px)] text-xs text-gray-400"
+		class="mb-4 flex h-32 items-center justify-center rounded-lg bg-gray-100 text-xs text-gray-400"
 	>
-		<DmsMailingTokenText :text="block.imageUrl || block.alt" />
+		<MailingTokenText :text="block.imageUrl || block.alt" />
 	</div>
 </template>