@antelopejs/dms-mailing 0.3.4 → 0.4.1

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { useTemplateCategories } from '../composables/useTemplateCategories'
+import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
+import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateDrawer } from '../composables/useTemplateDrawer'
+import {
+	HTTP_CONFLICT,
+	apiErrorMessage,
+	apiErrorStatus,
+} from '../utils/api-error'
+import { editorRoute } from '../utils/editor-route'
+import type { StarterSummary } from '../types/mailing'
+
+const PREVIEW_WIDTH = 600
+const PREVIEW_SCALE = 0.32
+const SKELETON_STARTERS = 4
+
+const emit = defineEmits<{ created: [] }>()
+
+const api = useMailingApi()
+const toast = useToast()
+const { t } = useI18n()
+const { processApiMessage } = useTranslation()
+const overlays = useTemplateDrawer()
+
+const localized = useLocalizedDefaults()
+const storedStarters = ref<StarterSummary[]>([])
+const starters = computed(() => localized.starters(storedStarters.value))
+const { categories } = useTemplateCategories()
+const loading = ref(true)
+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
+		: undefined
+}
+
+function openNewTemplate(starter?: StarterSummary): void {
+	overlays.openNewTemplate({
+		initialName: starter?.name,
+		initialStarterId: starter?.id,
+		onDone: () => emit('created'),
+	})
+}
+
+async function createFrom(starter: StarterSummary): Promise<void> {
+	if (creatingId.value) return
+	creatingId.value = starter.id
+	try {
+		const [id] = await api.createTemplate({
+			name: starter.name,
+			slug: starter.slug,
+			category: knownCategory(starter.category),
+			starterId: starter.id,
+		})
+		emit('created')
+		if (id) await navigateDms(editorRoute(id))
+	} catch (error) {
+		if (apiErrorStatus(error) === HTTP_CONFLICT) {
+			openNewTemplate(starter)
+			return
+		}
+		toast.add({
+			color: 'error',
+			title: processApiMessage(apiErrorMessage(error)),
+		})
+	} finally {
+		creatingId.value = null
+	}
+}
+</script>
+
+<template>
+	<DmsEmptyState
+		:title="t('dms_mailing.templates.starters.title')"
+		:description="t('dms_mailing.templates.starters.description')"
+		icon="i-ph-envelope-simple"
+		variant="no-data"
+		size="lg"
+		hatched
+	>
+		<template #actions>
+			<div class="flex w-full max-w-[780px] flex-col items-center gap-4">
+				<div class="grid w-full grid-cols-2 gap-3 md:grid-cols-4">
+					<template v-if="loading">
+						<USkeleton
+							v-for="index in SKELETON_STARTERS"
+							:key="index"
+							class="rounded-(--dms-radius-card) h-[150px] w-full"
+						/>
+					</template>
+					<DmsCard
+						v-for="starter in starters"
+						v-else
+						:key="starter.id"
+						as="button"
+						type="button"
+						:padded="false"
+						interactive
+						class="flex flex-col overflow-hidden text-left"
+						:aria-busy="creatingId === starter.id"
+						:disabled="Boolean(creatingId)"
+						@click="createFrom(starter)"
+					>
+						<div
+							class="bg-elevated/40 pointer-events-none flex h-[96px] justify-center overflow-hidden pt-2"
+						>
+							<MailingTemplatePreviewFrame
+								:starter-id="starter.id"
+								:width="PREVIEW_WIDTH"
+								:scale="PREVIEW_SCALE"
+								:label="starter.name"
+								decorative
+							/>
+						</div>
+						<div
+							class="border-default flex flex-col gap-0.5 border-t px-3 py-2.5"
+						>
+							<span
+								class="text-highlighted flex items-center gap-1.5 text-[12.5px] font-semibold"
+							>
+								{{ starter.name }}
+								<UIcon
+									v-if="creatingId === starter.id"
+									name="i-ph-spinner"
+									class="size-3.5 animate-spin"
+								/>
+							</span>
+							<span class="text-dimmed truncate font-mono text-[11px]">
+								{{ starter.slug }}
+							</span>
+						</div>
+					</DmsCard>
+				</div>
+				<UButton
+					icon="i-ph-plus"
+					color="neutral"
+					variant="outline"
+					size="sm"
+					:label="t('dms_mailing.templates.starters.blank')"
+					@click="openNewTemplate()"
+				/>
+			</div>
+		</template>
+	</DmsEmptyState>
+</template>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { EditorCheck } from '../utils/editor-checks'
+import type { SystemVariable } from '../utils/system-variables'
+import { variableTypeLabelKey } from '../utils/variable-types'
+import VariablePath from './VariablePath.vue'
+
+interface Props {
+	variables: SystemVariable[]
+	/** What the footer links still lack (a marketing e-mail without one). */
+	checks?: EditorCheck[]
+}
+
+withDefaults(defineProps<Props>(), { checks: () => [] })
+
+const KEY = 'dms_mailing.system_variables'
+
+const { t } = useI18n()
+</script>
+
+<template>
+	<div
+		v-if="variables.length || checks.length"
+		class="flex min-w-0 flex-col gap-1"
+	>
+		<DmsEyebrow :label="t(`${KEY}.title`)" />
+		<p class="text-muted text-[12px] [overflow-wrap:anywhere]">
+			{{ t(`${KEY}.description`) }}
+		</p>
+		<div
+			v-for="variable in variables"
+			:key="variable.path"
+			class="border-default flex flex-col items-start gap-1 border-b py-1.5 last:border-b-0"
+		>
+			<div class="flex w-full min-w-0 items-center gap-2">
+				<VariablePath :path="variable.path" class="text-toned text-[12px]" />
+				<span
+					v-if="variable.required"
+					class="text-error"
+					:title="t(`${KEY}.required`)"
+				>
+					*
+				</span>
+				<span class="text-dimmed ml-auto shrink-0 text-[11px]">
+					{{ t(variableTypeLabelKey(variable.type)) }}
+				</span>
+			</div>
+			<DmsStatusPill
+				tone="neutral"
+				size="sm"
+				dot="none"
+				:label="t(`${KEY}.at_send`)"
+			/>
+		</div>
+		<p
+			v-for="check in checks"
+			:key="check.id"
+			class="text-warning flex items-start gap-1.5 text-[12px] [overflow-wrap:anywhere]"
+		>
+			<UIcon name="i-ph-warning" class="mt-0.5 size-3.5 shrink-0" />
+			{{ t(check.key, check.params) }}
+		</p>
+	</div>
+</template>

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

@@ -1,40 +1,138 @@
 <script setup lang="ts">
-import { localeBadges } from '../utils/locales'
-import type { TemplateRow, TemplateStatus } from '../types/mailing'
+import { formatCardDate, formatCardSince, firstName } from '../utils/gallery'
+import { localeChipClass, localeChips } from '../utils/locales'
+import {
+	cardFooter,
+	daysSince,
+	type AttentionReason,
+	type CardFooterKind,
+} from '../utils/template-attention'
+import type {
+	TemplateRow,
+	TemplateStats,
+	TemplateStatus,
+} from '../types/mailing'
 
 interface TemplateCardProps {
 	template: TemplateRow
-	selected?: boolean
+	/** Last 30 days of real sends; absent means none. */
+	stats?: TemplateStats
+	/** Why the template needs attention, from the gallery's rules. */
+	attention?: AttentionReason[]
 }
 
 const PREVIEW_WIDTH = 600
-const PREVIEW_SCALE = 0.45
-const LIVE_STATUS: TemplateStatus = 'live'
+const PREVIEW_SCALE = 0.4
+const OPEN_RATE_DIGITS = 1
+const PERCENT = 100
 
-const props = defineProps<TemplateCardProps>()
+const STATUS_TONES: Record<TemplateStatus, string> = {
+	live: 'success',
+	draft: 'neutral',
+	archived: 'warning',
+}
+const DRAFT_CHANGES_TONE = 'info'
+
+const props = withDefaults(defineProps<TemplateCardProps>(), {
+	stats: undefined,
+	attention: () => [],
+})
 
 const emit = defineEmits<{
 	open: []
 	details: []
 	'test-send': []
+	'real-send': []
 	'open-locale': [code: string]
 }>()
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const { uniqueLocales } = useUniqueLocales()
 
+const isLive = computed(() => props.template.status === 'live')
+const hasDraftChanges = computed(
+	() => isLive.value && Boolean(props.template.isDraftPending),
+)
+/** Customers receive the published version: the thumbnail shows it. */
+const previewVersion = computed(() => (isLive.value ? 'published' : 'draft'))
+
 const statusLabel = computed(() =>
-	t(`dms_mailing.templates.status.${props.template.status}`),
+	hasDraftChanges.value
+		? t('dms_mailing.templates.card.draft_changes')
+		: t(`dms_mailing.templates.status.${props.template.status}`),
 )
 
-const badges = computed(() =>
-	localeBadges(
+const statusTone = computed(() =>
+	hasDraftChanges.value
+		? DRAFT_CHANGES_TONE
+		: STATUS_TONES[props.template.status],
+)
+
+const chips = computed(() =>
+	localeChips(
 		props.template.locales,
 		uniqueLocales.value.map((entry) => entry.code),
 	),
 )
 
-function badgeLabel(code: string, present: boolean): string {
+const staleDays = computed(() =>
+	props.attention.includes('stale_draft')
+		? daysSince(props.template.updatedAt, new Date())
+		: 0,
+)
+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 }),
+	),
+)
+
+const editedLabel = computed(() =>
+	t('dms_mailing.templates.card.edited', { date: footerDate.value }),
+)
+
+const sendsLabel = computed(() =>
+	new Intl.NumberFormat(locale.value).format(footer.value.sends),
+)
+
+const openRateLabel = computed(() =>
+	new Intl.NumberFormat(locale.value, {
+		style: 'percent',
+		maximumFractionDigits: OPEN_RATE_DIGITS,
+	}).format(footer.value.openRate / PERCENT),
+)
+
+/** "live for 1 hr" within a day, "live since Sep 27" after. */
+const liveSince = computed(() =>
+	formatCardSince(footer.value.at, new Date(), locale.value),
+)
+
+const FOOTER_TEXTS: Partial<Record<CardFooterKind, () => string>> = {
+	no_send: () =>
+		liveSince.value?.kind === 'duration'
+			? t('dms_mailing.templates.card.no_send_for', {
+					duration: liveSince.value.text,
+				})
+			: t('dms_mailing.templates.card.no_send_since', {
+					date: liveSince.value?.text ?? '',
+				}),
+	edited: () => {
+		const name = firstName(footer.value.by)
+		return name
+			? t('dms_mailing.templates.card.edited_by', {
+					date: footerDate.value,
+					name,
+				})
+			: editedLabel.value
+	},
+}
+
+const footerText = computed(() => FOOTER_TEXTS[footer.value.kind]?.() ?? '')
+
+function chipLabel(code: string, present: boolean): string {
 	const key = present ? 'edit_locale' : 'add_locale'
 	return t(`dms_mailing.templates.card.${key}`, {
 		locale: code.toUpperCase(),
@@ -44,83 +142,146 @@ function badgeLabel(code: string, present: boolean): string {
 
 <template>
 	<DmsCard
+		as="article"
 		:padded="false"
 		interactive
-		:class="selected ? 'ring-primary/40 ring-2' : ''"
-		class="group overflow-hidden"
+		tabindex="0"
+		:aria-label="template.name"
+		class="focus-visible:outline-primary group relative flex flex-col overflow-hidden focus-visible:outline-2"
+		:class="template.status === 'archived' ? 'opacity-75' : ''"
 		@click="emit('open')"
+		@keydown.enter.self="emit('open')"
+		@keydown.t.exact.self="emit('test-send')"
 	>
-		<div class="bg-elevated/40 relative h-[158px] overflow-hidden">
-			<div class="pointer-events-none">
-				<DmsMailingTemplatePreviewFrame
+		<div
+			class="bg-elevated/40 relative flex h-[172px] justify-center overflow-hidden bg-[radial-gradient(var(--ui-border)_1px,transparent_1px)] bg-[length:14px_14px] pt-4"
+		>
+			<div class="pointer-events-none rounded-t-md shadow-sm">
+				<MailingTemplatePreviewFrame
 					:template-id="template._id"
+					:version="previewVersion"
 					:width="PREVIEW_WIDTH"
 					:scale="PREVIEW_SCALE"
+					:label="template.name"
+					lazy
+					decorative
 				/>
 			</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')"
+			<span class="bg-default absolute left-2.5 top-2.5 z-10 rounded-full">
+				<DmsStatusPill
+					:tone="statusTone"
+					:label="statusLabel"
+					:dot="isLive ? 'live' : 'static'"
 					size="sm"
-					@click.stop="emit('open')"
 				/>
+			</span>
+			<div
+				class="bg-(--ui-bg)/60 pointer-events-none absolute inset-0 flex items-center justify-center gap-2 opacity-0 backdrop-blur-[2px] transition-opacity group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"
+			>
 				<UButton
-					icon="i-ph-paper-plane-tilt"
+					icon="i-ph-flask"
 					color="neutral"
-					variant="ghost"
+					variant="outline"
 					size="sm"
-					:title="t('dms_mailing.templates.actions.test_send')"
+					:label="t('dms_mailing.templates.card.test')"
 					@click.stop="emit('test-send')"
 				/>
+				<UTooltip
+					v-if="isLive"
+					:text="t('dms_mailing.templates.actions.real_send')"
+				>
+					<UButton
+						icon="i-ph-paper-plane-right"
+						color="error"
+						variant="outline"
+						size="sm"
+						square
+						:aria-label="t('dms_mailing.templates.actions.real_send')"
+						@click.stop="emit('real-send')"
+					/>
+				</UTooltip>
 				<UButton
-					icon="i-ph-info"
-					color="neutral"
-					variant="ghost"
+					icon="i-ph-pencil-simple"
 					size="sm"
-					:title="t('dms_mailing.templates.actions.details')"
-					@click.stop="emit('details')"
+					:label="t('dms_mailing.templates.actions.edit')"
+					@click.stop="emit('open')"
 				/>
 			</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">
+		<div
+			class="border-default flex flex-1 flex-col gap-1.5 border-t px-3.5 pb-3 pt-3"
+		>
+			<div class="flex min-w-0 items-center gap-2">
+				<h3
+					class="text-highlighted truncate text-[13.5px] font-semibold"
+					:title="template.name"
+				>
 					{{ template.name }}
 				</h3>
-				<UBadge
-					v-if="template.status !== LIVE_STATUS"
-					:label="statusLabel"
-					color="neutral"
-					variant="subtle"
+				<DmsStatusPill
+					v-if="staleDays"
+					tone="neutral"
+					size="sm"
+					dot="none"
+					:label="
+						t('dms_mailing.templates.card.stale_days', { days: staleDays })
+					"
+				/>
+				<DmsStatusPill
+					v-if="isNeverSent"
+					tone="warning"
 					size="sm"
+					dot="none"
+					:label="t('dms_mailing.templates.card.never_sent')"
+				/>
+				<UButton
+					class="ml-auto shrink-0"
+					icon="i-ph-info"
+					color="neutral"
+					variant="ghost"
+					size="xs"
+					square
+					:aria-label="t('dms_mailing.templates.actions.details')"
+					@click.stop="emit('details')"
 				/>
 			</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">
+			<div class="flex min-w-0 items-center gap-2">
+				<span class="text-dimmed truncate font-mono text-[11.5px]">
+					{{ template.slug }}
+				</span>
+				<span v-if="chips.length" class="ml-auto flex shrink-0 gap-1">
 					<button
-						v-for="badge in badges"
-						:key="badge.code"
+						v-for="chip in chips"
+						:key="chip.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)"
+						:title="chipLabel(chip.code, chip.present)"
+						:aria-label="chipLabel(chip.code, chip.present)"
+						:class="localeChipClass(chip.present)"
+						class="focus-visible:outline-primary transition-colors hover:brightness-125 focus-visible:outline-2"
+						@click.stop="emit('open-locale', chip.code)"
 					>
-						{{ badge.code }}
+						{{ chip.code }}
 					</button>
-				</div>
+				</span>
+			</div>
+			<div
+				class="border-default text-muted mt-1 flex items-center gap-3 border-t pt-2 font-mono text-[11.5px]"
+			>
+				<template v-if="footer.kind === 'stats'">
+					<span class="shrink-0 whitespace-nowrap">
+						<b class="text-highlighted font-semibold">{{ sendsLabel }}</b>
+						{{ t('dms_mailing.templates.card.sends', footer.sends) }}
+					</span>
+					<span class="shrink-0 whitespace-nowrap">
+						<b class="text-highlighted font-semibold">{{ openRateLabel }}</b>
+						{{ t('dms_mailing.templates.card.open') }}
+					</span>
+					<span class="ml-auto min-w-0 truncate" :title="editedLabel">
+						{{ editedLabel }}
+					</span>
+				</template>
+				<span v-else class="truncate">{{ footerText }}</span>
 			</div>
 		</div>
 	</DmsCard>