@antelopejs/dms-mailing 0.3.4 → 0.4.1

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

@@ -1,104 +1,224 @@
 <script setup lang="ts">
-import type { SendResult } from '../composables/useMailingApi'
+import FormFieldRow from '../build/components/FormFieldRow.vue'
+import FormRows from '../build/components/FormRows.vue'
+import { useMailingApi } from '../composables/useMailingApi'
+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 {
+	isSendableRecipients,
+	localeOptions,
+	type NamedLocale,
+} from '../utils/recipients'
 import type {
 	TemplateContent,
+	TemplateContentResponse,
 	TemplateRow,
-	TemplateStatus,
 } from '../types/mailing'
 
 interface TestSendModalProps {
-	templateId?: string
 	rowData?: TemplateRow
+	templateId?: string
+	/** Locale preselected; the tenant fallback otherwise. */
 	locale?: string
+	/** The editor's unsaved draft, sent instead of the saved one. */
 	content?: TemplateContent
+	/** The editor's data set, sent instead of the saved test data. */
 	data?: Record<string, unknown>
-	/** `real` reaches actual recipients and counts in the business figures. */
-	mode?: SendMode
 	onSuccessCallback?: () => void
 }
 
-type SendMode = 'test' | 'real'
+type DataChoice = 'test' | 'none'
+
+/** Which saved content a test sends when a draft sits on a live template. */
+type VersionChoice = 'draft' | 'published'
 
-const REAL_MODE: SendMode = 'real'
-const LIVE_STATUS: TemplateStatus = 'live'
+/** The part of the session user the dialog reads. */
+interface SignedInUser {
+	email?: string
+}
 
-const MAX_RECIPIENTS = 5
-const RECIPIENT_SEPARATOR = ','
+const DATA_CHOICES: DataChoice[] = ['test', 'none']
+const VERSION_CHOICES: VersionChoice[] = ['draft', 'published']
+const TEST_PREFIX = '[TEST]'
 
 const props = defineProps<TestSendModalProps>()
-
-const emit = defineEmits<{ success: [] }>()
+const emit = defineEmits<{ success: [sent?: boolean] }>()
 
 const api = useMailingApi()
 const toast = useToast()
-const { t } = useI18n()
+const { t, locale: uiLocale } = useI18n()
+const { processApiMessage } = useTranslation()
 const { user } = useCurrentUser()
 const { uniqueLocales } = useUniqueLocales()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const detail = ref<TemplateContentResponse | null>(null)
+const ownEmail = (user.value as SignedInUser | null)?.email
+const recipients = ref<string[]>(ownEmail ? [ownEmail] : [])
+const locale = ref(props.locale ?? '')
+const dataChoice = ref<DataChoice>('test')
+const versionChoice = ref<VersionChoice>('draft')
+const sending = ref(false)
 
-const localeItems = computed(() =>
-	uniqueLocales.value.map((entry) => ({
-		label: entry.name ?? entry.code,
-		value: entry.code,
-	})),
+onMounted(async () => {
+	if (!templateId.value) return
+	try {
+		detail.value = await api.templateContent(templateId.value)
+		locale.value ||= detail.value.fallbackLocale
+	} catch (error) {
+		toast.add({
+			color: 'error',
+			title: processApiMessage(apiErrorMessage(error)),
+		})
+	}
+})
+
+const template = computed(() => detail.value?.template ?? props.rowData ?? null)
+const publishedVersion = computed(() => detail.value?.version ?? 0)
+const isPublished = computed(() => publishedVersion.value > 0)
+/** A saved draft beside a published version: the test can try either. */
+const canChooseVersion = computed(
+	() => !props.content && isPublished.value && Boolean(detail.value?.hasDraft),
+)
+const testsPublished = computed(
+	() =>
+		!props.content &&
+		isPublished.value &&
+		(!detail.value?.hasDraft || versionChoice.value === 'published'),
 )
+const content = computed(() => {
+	if (props.content) return props.content
+	return testsPublished.value
+		? (detail.value?.publishedContent ?? undefined)
+		: detail.value?.content
+})
 
-const isReal = computed(() => props.mode === REAL_MODE)
-const isDraft = computed(
-	() => Boolean(props.rowData) && props.rowData?.status !== LIVE_STATUS,
+const versionItems = computed(() =>
+	VERSION_CHOICES.map((choice) => ({
+		label: t(`dms_mailing.test_send.choose_${choice}`, {
+			version: publishedVersion.value,
+		}),
+		value: choice,
+	})),
 )
-const confirmed = ref(false)
 
-const recipients = ref<string>(isReal.value ? '' : (user.value?.email ?? ''))
-const locale = ref<string>(props.locale ?? localeItems.value[0]?.value ?? '')
-const sending = ref(false)
+const localeItems = computed(() =>
+	localeOptions(
+		Object.keys(content.value?.locales ?? {}),
+		uniqueLocales.value as NamedLocale[],
+		uiLocale.value,
+	),
+)
 
-const addresses = computed(() =>
-	recipients.value
-		.split(RECIPIENT_SEPARATOR)
-		.map((address) => address.trim())
-		.filter(Boolean)
-		.slice(0, MAX_RECIPIENTS),
+const dataItems = computed(() =>
+	DATA_CHOICES.map((choice) => ({
+		label: t(`dms_mailing.test_send.data_${choice}`),
+		value: choice,
+	})),
 )
 
+const DATA_SETS: Record<DataChoice, () => Record<string, unknown>> = {
+	test: () => props.data ?? detail.value?.testData ?? {},
+	none: () => ({}),
+}
+
 const canSend = computed(
 	() =>
-		addresses.value.length > 0 &&
-		!sending.value &&
-		!isDraft.value &&
-		(!isReal.value || confirmed.value),
+		isSendableRecipients(recipients.value) &&
+		Boolean(content.value) &&
+		!sending.value,
 )
 
-function report(result: SendResult, index: number): void {
+const draftLabel = computed(() => {
+	if (props.content) return t('dms_mailing.test_send.unsaved_draft')
+	return testsPublished.value
+		? t('dms_mailing.test_send.published_version', {
+				version: publishedVersion.value,
+			})
+		: t('dms_mailing.test_send.current_draft')
+})
+
+/**
+ * The content override of the request. Only the editor's unsaved draft and a
+ * chosen published version travel; otherwise the server picks the saved
+ * content and records the version it belongs to.
+ */
+function contentOverride(): Pick<TestSendInput, 'content' | 'version'> {
+	if (props.content) return { content: props.content }
+	if (canChooseVersion.value && versionChoice.value === 'published')
+		return { content: content.value, version: publishedVersion.value }
+	return {}
+}
+
+function reportFailures(results: SendResult[], to: string[]): void {
+	results.forEach((result, index) => {
+		if (!result.error) return
+		toast.add({
+			color: 'error',
+			title: to[index] ?? result.sendId,
+			description: processApiMessage(result.error),
+		})
+	})
+	const sent = results.filter((result) => !result.error).length
+	if (sent) {
+		toast.add({
+			color: 'success',
+			icon: 'i-ph-flask',
+			title: t('dms_mailing.test_send.sent', { count: sent }, sent),
+			actions: [
+				{
+					label: t('dms_mailing.sends.open_in_log'),
+					onClick: () => void navigateDms(sendLogRoute(results)),
+				},
+			],
+		})
+	}
+}
+
+/** Warns that the editor's own address receives nothing but tests. */
+function warnOwnSuppression(entry: SuppressionSummary | undefined): void {
+	if (!entry) return
 	toast.add({
-		color: result.error ? 'error' : 'success',
-		title: addresses.value[index] ?? result.sendId,
-		description: result.error ?? t(`dms_mailing.sends.status.${result.status}`),
+		color: 'warning',
+		icon: 'i-ph-prohibit',
+		title: t('dms_mailing.test_send.own_suppressed.title', {
+			email: entry.email,
+		}),
+		description: t('dms_mailing.test_send.own_suppressed.description', {
+			reason: t(reasonKey(entry.reason)),
+		}),
 	})
 }
 
+function close(sent: boolean): void {
+	if (sent && props.onSuccessCallback) {
+		props.onSuccessCallback()
+		return
+	}
+	emit('success', sent)
+}
+
 async function submit(): Promise<void> {
-	if (!canSend.value || !templateId.value) return
+	if (!canSend.value) return
 	sending.value = true
+	const to = [...recipients.value]
 	try {
-		const response = isReal.value
-			? await api.realSend(templateId.value, {
-					to: addresses.value,
-					locale: locale.value,
-					data: props.data,
-				})
-			: await api.testSend(templateId.value, {
-					to: addresses.value,
-					locale: locale.value,
-					content: props.content,
-					data: props.data,
-				})
-		response.results.forEach(report)
-		props.onSuccessCallback?.()
-		emit('success')
+		const response = await api.testSend(templateId.value, {
+			to,
+			locale: locale.value || undefined,
+			...contentOverride(),
+			data: DATA_SETS[dataChoice.value](),
+		})
+		reportFailures(response.results, to)
+		warnOwnSuppression(response.ownAddressSuppressed)
+		close(true)
 	} catch (error) {
-		toast.add({ color: 'error', title: String(error) })
+		toast.add({
+			color: 'error',
+			title: processApiMessage(apiErrorMessage(error)),
+		})
 	} finally {
 		sending.value = false
 	}
@@ -106,57 +226,108 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-	<UForm
-		:state="{ recipients, locale }"
+	<form
 		class="flex flex-col gap-4"
-		@submit="submit"
+		novalidate
+		@submit.prevent="submit"
+		@keydown.meta.enter.prevent="submit"
+		@keydown.ctrl.enter.prevent="submit"
 	>
-		<DmsBanner
-			v-if="isDraft"
-			color="warning"
-			icon="i-ph-warning"
-			:title="t('dms_mailing.errors.template_not_live')"
-			:description="t('dms_mailing.templates.send_modal.draft_hint')"
-		/>
+		<p v-if="template" class="text-muted text-[13px]">
+			{{ template.name }} ·
+			<span class="font-mono">{{ template.slug }}</span>
+			· {{ draftLabel }}
+		</p>
+		<USkeleton v-else class="h-4 w-2/3" />
 
-		<DmsBanner
-			v-else-if="isReal"
-			color="error"
-			icon="i-ph-paper-plane-tilt"
-			:title="t('dms_mailing.templates.send_modal.real_title')"
-			:description="t('dms_mailing.templates.send_modal.real_hint')"
-		/>
+		<FormRows has-required>
+			<MailingRecipientsField
+				v-model="recipients"
+				:hint="t('dms_mailing.test_send.recipients_hint')"
+			/>
+
+			<FormFieldRow
+				v-if="canChooseVersion"
+				:label="t('dms_mailing.real_send.version')"
+			>
+				<template #default="{ id }">
+					<DmsSelect
+						:id="id"
+						v-model="versionChoice"
+						:items="versionItems"
+						value-key="value"
+						:deselectable="false"
+						icon="i-ph-git-commit"
+						class="w-full"
+						data-version-choice
+					/>
+				</template>
+			</FormFieldRow>
+
+			<FormFieldRow :label="t('dms_mailing.test_send.locale')">
+				<template #default="{ id }">
+					<DmsSelect
+						:id="id"
+						v-model="locale"
+						:items="localeItems"
+						value-key="value"
+						:deselectable="false"
+						class="w-full"
+						:disabled="!localeItems.length"
+					/>
+				</template>
+			</FormFieldRow>
+
+			<FormFieldRow :label="t('dms_mailing.test_send.data')">
+				<template #default="{ id }">
+					<DmsSelect
+						:id="id"
+						v-model="dataChoice"
+						:items="dataItems"
+						value-key="value"
+						:deselectable="false"
+						icon="i-ph-database"
+						class="w-full"
+					/>
+				</template>
+			</FormFieldRow>
+		</FormRows>
 
-		<UFormField
-			:label="t('dms_mailing.editor.test_send_modal.recipients')"
-			name="recipients"
-		>
-			<UInput v-model="recipients" class="w-full" autofocus />
-		</UFormField>
-
-		<UFormField :label="t('dms_mailing.sends.cols.locale')" name="locale">
-			<USelect v-model="locale" :items="localeItems" class="w-full" />
-		</UFormField>
-
-		<UCheckbox
-			v-if="isReal && !isDraft"
-			v-model="confirmed"
-			:label="t('dms_mailing.templates.send_modal.confirm')"
+		<DmsBanner
+			tone="info"
+			icon="i-ph-info"
+			:title="t('dms_mailing.test_send.info_title')"
+			:description="
+				t('dms_mailing.test_send.info_description', { prefix: TEST_PREFIX })
+			"
 		/>
 
-		<div class="flex justify-end">
+		<div class="border-default flex items-center gap-2 border-t pt-4">
+			<span class="text-dimmed hidden items-center gap-1 text-xs sm:flex">
+				<UKbd value="meta" size="sm" />
+				<UKbd value="enter" size="sm" />
+				{{ t('dms_mailing.test_send.shortcut') }}
+			</span>
+			<UButton
+				class="ml-auto"
+				color="neutral"
+				variant="outline"
+				:label="t('dms_mailing.common.cancel')"
+				@click="close(false)"
+			/>
 			<UButton
 				type="submit"
-				:color="isReal ? 'error' : 'primary'"
+				icon="i-ph-paper-plane-tilt"
 				:label="
-					isReal
-						? t('dms_mailing.templates.send_modal.send')
-						: t('dms_mailing.editor.test_send_modal.send')
+					t(
+						'dms_mailing.test_send.submit',
+						{ count: recipients.length },
+						recipients.length,
+					)
 				"
-				icon="i-ph-paper-plane-tilt"
 				:loading="sending"
 				:disabled="!canSend"
 			/>
 		</div>
-	</UForm>
+	</form>
 </template>

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

@@ -1,23 +1,74 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { splitTokens } from '../utils/tokens'
+import { computed, inject } from 'vue'
+import { TOKEN_DATA_KEY, resolveToken, splitTokens } from '../utils/tokens'
+
+type TokenVariant = 'paper' | 'ui'
 
 interface Props {
 	text?: string
+	/** `paper` keeps the fixed cyan of the white e-mail sheet in both themes. */
+	variant?: TokenVariant
+}
+
+interface RenderedPart {
+	key: number
+	kind: 'text' | 'token' | 'value' | 'missing' | 'invalid'
+	value: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+	text: '',
+	variant: 'paper',
+})
+
+const CHIP_CLASSES: Record<TokenVariant, string> = {
+	paper: 'bg-cyan-50 text-cyan-800 ring-1 ring-inset ring-cyan-200',
+	ui: 'bg-primary/10 text-primary ring-1 ring-inset ring-primary/25',
+}
+const CHIP_BASE =
+	'rounded px-1 py-px font-mono text-[.86em] font-medium whitespace-nowrap'
+const VALUE_CLASS = 'rounded-sm bg-yellow-400/20 px-0.5'
+const MISSING_CLASS =
+	'bg-amber-100 text-amber-800 ring-1 ring-inset ring-amber-300'
+/** A `{{�}}` the engine does not read: it reaches the recipient as typed. */
+const INVALID_CLASS =
+	'underline decoration-red-500 decoration-wavy underline-offset-2'
+
+const TOKEN_OPEN = '{{'
+const TOKEN_CLOSE = '}}'
+
+const data = inject(TOKEN_DATA_KEY, null)
 
-const parts = computed(() => splitTokens(props.text ?? ''))
+const parts = computed<RenderedPart[]>(() =>
+	splitTokens(props.text ?? '').map((part, key) => {
+		if (part.kind !== 'token')
+			return { key, kind: part.kind, value: part.value }
+		const token = `${TOKEN_OPEN}${part.value}${TOKEN_CLOSE}`
+		if (!data?.value) return { key, kind: 'token', value: token }
+		const resolved = resolveToken(part.value, data.value)
+		return resolved.isPresent
+			? { key, kind: 'value', value: resolved.text }
+			: { key, kind: 'missing', value: token }
+	}),
+)
+
+const chipClass = computed(() => `${CHIP_BASE} ${CHIP_CLASSES[props.variant]}`)
+const missingClass = `${CHIP_BASE} ${MISSING_CLASS}`
 </script>
 
 <template>
-	<span>
-		<template v-for="(part, index) in parts" :key="index">
-			<span
-				v-if="part.kind === 'token'"
-				class="bg-primary/10 text-primary rounded px-1 font-mono text-[.88em]"
-			>
+	<span class="whitespace-pre-line [overflow-wrap:anywhere]">
+		<template v-for="part in parts" :key="part.key">
+			<span v-if="part.kind === 'token'" :class="chipClass">
+				{{ part.value }}
+			</span>
+			<span v-else-if="part.kind === 'value'" :class="VALUE_CLASS">
+				{{ part.value }}
+			</span>
+			<span v-else-if="part.kind === 'missing'" :class="missingClass">
+				{{ part.value }}
+			</span>
+			<span v-else-if="part.kind === 'invalid'" :class="INVALID_CLASS">
 				{{ part.value }}
 			</span>
 			<template v-else>{{ part.value }}</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { pathBreakSegments } from '../utils/paths'
+
+interface Props {
+	path: string
+}
+
+const props = defineProps<Props>()
+
+const segments = computed(() => pathBreakSegments(props.path))
+</script>
+
+<template>
+	<code class="min-w-0 font-mono [overflow-wrap:break-word]">
+		<template v-for="(segment, index) in segments" :key="index">
+			<span>{{ segment }}</span>
+			<wbr />
+		</template>
+	</code>
+</template>