@antelopejs/dms-mailing 0.3.3 → 0.4.0

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

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { useMailingApi } from '../composables/useMailingApi'
+import type { SendHtmlResponse, SendRow } from '../types/mailing'
+
+type RenderingView = 'desktop' | 'mobile' | 'html'
+
+/** The rendering as the API answers it now: a draft test is approximate. */
+interface SendRendering extends SendHtmlResponse {
+	approximate?: boolean
+}
+
+interface RenderingModalProps {
+	rowData?: SendRow
+	sendId?: string
+}
+
+const props = withDefaults(defineProps<RenderingModalProps>(), {
+	rowData: undefined,
+	sendId: undefined,
+})
+
+const KEY_PREFIX = 'dms_mailing.rendering.'
+const FRAME_HEIGHT_PX = 560
+const MOBILE_WIDTH_PX = 375
+const FRAME_SANDBOX = 'allow-popups allow-popups-to-escape-sandbox'
+const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+	month: 'short',
+	day: 'numeric',
+	hour: '2-digit',
+	minute: '2-digit',
+	second: '2-digit',
+	hourCycle: 'h23',
+}
+
+const VIEW_ICONS: Record<RenderingView, string> = {
+	desktop: 'i-ph-desktop',
+	mobile: 'i-ph-device-mobile',
+	html: 'i-ph-code',
+}
+
+const FRAME_WIDTHS: Record<RenderingView, string> = {
+	desktop: '100%',
+	mobile: `${MOBILE_WIDTH_PX}px`,
+	html: '100%',
+}
+
+const api = useMailingApi()
+const { t, locale } = useI18n()
+
+const view = ref<RenderingView>('desktop')
+const rendering = ref<SendRendering | null>(null)
+const send = ref<SendRow | null>(props.rowData ?? null)
+const loading = ref(false)
+const failed = ref(false)
+
+const sendIdValue = computed(() => props.rowData?._id ?? props.sendId ?? '')
+const key = (path: string, params: Record<string, unknown> = {}): string =>
+	t(`${KEY_PREFIX}${path}`, params)
+
+const viewItems = computed(() =>
+	(Object.keys(VIEW_ICONS) as RenderingView[]).map((value) => ({
+		value,
+		icon: VIEW_ICONS[value],
+		label: key(`views.${value}`),
+	})),
+)
+
+const from = computed(() => {
+	const value = rendering.value
+	if (!value) return ''
+	return value.fromName ? `${value.fromName} <${value.from}>` : value.from
+})
+
+const meta = computed(() => {
+	const value = rendering.value
+	if (!value) return ''
+	const version = value.version
+		? key('version', { version: value.version })
+		: key('draft_version')
+	const date = send.value
+		? new Date(send.value.createdAt).toLocaleString(locale.value, DATE_FORMAT)
+		: ''
+	return [date, value.locale.toUpperCase(), version].filter(Boolean).join(' · ')
+})
+
+async function loadSend(): Promise<void> {
+	if (send.value) return
+	const detail = await api.send(sendIdValue.value)
+	send.value = detail.send
+}
+
+async function load(): Promise<void> {
+	if (!sendIdValue.value) return
+	loading.value = true
+	failed.value = false
+	try {
+		const [html] = await Promise.all([
+			api.sendHtml(sendIdValue.value),
+			loadSend(),
+		])
+		rendering.value = html
+	} catch (error) {
+		failed.value = true
+		useApiError(error)
+	} finally {
+		loading.value = false
+	}
+}
+
+onMounted(load)
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-3">
+			<p class="text-muted min-w-0 flex-1 text-[13px]">
+				{{ key('description') }}
+				<span class="font-mono text-[12px]">{{ sendIdValue }}</span>
+			</p>
+			<DmsSegmented
+				v-model="view"
+				size="xs"
+				:items="viewItems"
+				:aria-label="key('view_label')"
+			/>
+		</div>
+
+		<USkeleton
+			v-if="loading"
+			class="w-full"
+			:style="{ height: `${FRAME_HEIGHT_PX}px` }"
+		/>
+
+		<DmsEmptyState
+			v-else-if="failed || !rendering"
+			variant="error"
+			:title="key('error_title')"
+			:description="key('error_description')"
+		/>
+
+		<template v-else>
+			<DmsBanner
+				v-if="rendering.approximate"
+				tone="warning"
+				size="sm"
+				icon="i-ph-warning"
+				:title="key('approximate')"
+			/>
+
+			<div class="border-default overflow-hidden rounded-lg border">
+				<div class="border-default flex flex-col gap-0.5 border-b px-4 py-3">
+					<b class="text-highlighted text-sm">{{ rendering.subject }}</b>
+					<span class="text-muted truncate text-[12.5px]">
+						{{ from }}
+						→ {{ send?.recipientEmail }}
+					</span>
+					<span class="text-dimmed text-[11px]">
+						{{ key('current_sender') }}
+					</span>
+					<span class="text-dimmed font-mono text-[11px]">{{ meta }}</span>
+				</div>
+
+				<div v-if="view === 'html'" class="bg-elevated/40 relative">
+					<pre
+						class="text-toned overflow-auto p-4 font-mono text-[11.5px] leading-relaxed"
+						:style="{ maxHeight: `${FRAME_HEIGHT_PX}px` }"
+						>{{ rendering.html }}</pre>
+					<DmsCopyButton
+						:value="rendering.html"
+						class="absolute right-2 top-2"
+					/>
+				</div>
+
+				<div v-else class="bg-elevated/40 flex justify-center p-4">
+					<iframe
+						:srcdoc="rendering.html"
+						:sandbox="FRAME_SANDBOX"
+						:title="key('frame_title')"
+						class="block rounded-md border-0 bg-white shadow-sm transition-[width]"
+						:style="{
+							width: FRAME_WIDTHS[view],
+							height: `${FRAME_HEIGHT_PX}px`,
+						}"
+					/>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>

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

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { useMailingApi } from '../composables/useMailingApi'
+import {
+	clampRetention,
+	formatClock,
+	isWithinADay,
+	MAX_RETENTION_DAYS,
+	MIN_RETENTION_DAYS,
+	RETENTION_CUSTOM,
+	RETENTION_PRESETS,
+	retentionChoice,
+} from '../utils/period'
+import type { RetentionPreview } from '../types/mailing'
+
+interface RetentionInputProps {
+	modelValue?: number | string | null
+	initialValue?: number | string | null
+	disabled?: boolean
+}
+
+const props = withDefaults(defineProps<RetentionInputProps>(), {
+	modelValue: null,
+	initialValue: null,
+	disabled: false,
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: number] }>()
+
+const KEY_PREFIX = 'dms_mailing.settings.retention.'
+const PREVIEW_DEBOUNCE_MS = 300
+const DAYS_PER_YEAR = 365
+const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+	month: 'short',
+	day: 'numeric',
+}
+
+const api = useMailingApi()
+const { t, locale } = useI18n()
+const { confirm } = useConfirm()
+const form = useEnclosingForm()
+
+function toDays(value: number | string | null | undefined): number | null {
+	const raw = Number(value)
+	return Number.isFinite(raw) && raw > 0 ? raw : null
+}
+
+const days = computed(() => toDays(props.modelValue ?? props.initialValue))
+const savedDays = computed(() => toDays(props.initialValue))
+
+const isCustomPicked = ref(false)
+let lastEmitted: number | null = null
+let confirmedDays: number | null = null
+const isCustom = computed(
+	() =>
+		isCustomPicked.value ||
+		(days.value !== null && retentionChoice(days.value) === RETENTION_CUSTOM),
+)
+const preview = ref<RetentionPreview | null>(null)
+
+const key = (
+	path: string,
+	params: Record<string, unknown> = {},
+	plural = 1,
+): string => t(`${KEY_PREFIX}${path}`, params, plural)
+
+const presetLabel = (preset: number): string =>
+	preset === DAYS_PER_YEAR
+		? key('one_year')
+		: key('days', { count: preset }, preset)
+
+const items = computed(() => [
+	...RETENTION_PRESETS.map((preset) => ({
+		value: String(preset),
+		label: presetLabel(preset),
+	})),
+	{ value: RETENTION_CUSTOM, label: key('custom') },
+])
+
+const choice = computed<string>({
+	get: () => (isCustom.value ? RETENTION_CUSTOM : String(days.value ?? '')),
+	set: (value) => {
+		isCustomPicked.value = value === RETENTION_CUSTOM
+		if (!isCustomPicked.value) emitDays(Number(value))
+	},
+})
+
+function emitDays(value: number): void {
+	lastEmitted = value
+	emit('update:modelValue', value)
+}
+
+function onCustomInput(value: number | null | undefined): void {
+	if (value === null || value === undefined) return
+	emitDays(clampRetention(value))
+}
+
+function previewParams(value: RetentionPreview): Record<string, unknown> {
+	return {
+		when: isWithinADay(value.nextRunAt, new Date())
+			? key('tonight')
+			: new Date(value.nextRunAt).toLocaleDateString(locale.value, DATE_FORMAT),
+		time: formatClock(value.nextRunAt, locale.value),
+		count: new Intl.NumberFormat(locale.value).format(value.count),
+		duration: key('days', { count: value.days }, value.days),
+	}
+}
+
+const previewText = computed(() => {
+	const value = preview.value
+	if (!value) return ''
+	const params = previewParams(value)
+	return value.count
+		? key('preview', params, value.count)
+		: key('preview_none', params)
+})
+
+/** The preview of the days now picked, when it deletes sends kept so far. */
+const deletion = computed<RetentionPreview | null>(() => {
+	const value = preview.value
+	const isShorter =
+		days.value !== null &&
+		savedDays.value !== null &&
+		days.value < savedDays.value
+	return isShorter && value?.days === days.value && value.count ? value : null
+})
+
+async function confirmDeletion(value: RetentionPreview): Promise<void> {
+	const isConfirmed = await confirm({
+		title: key('confirm_title'),
+		description: key('confirm_description', previewParams(value), value.count),
+		color: 'warning',
+		icon: 'i-ph-trash',
+		confirmLabel: key('confirm_action'),
+		cancelLabel: t('dms_mailing.common.cancel'),
+		initialFocus: 'cancel',
+	})
+	if (!isConfirmed) return
+	confirmedDays = value.days
+	await form?.submit()
+}
+
+/** Holds a save that deletes sends until it is confirmed. */
+function guardSubmit(): boolean {
+	const value = deletion.value
+	if (!value || confirmedDays === value.days) return true
+	void confirmDeletion(value)
+	return false
+}
+
+const loadPreview = useDebounceFn(async (value: number) => {
+	try {
+		preview.value = await api.retentionPreview(value)
+	} catch {
+		preview.value = null
+	}
+}, PREVIEW_DEBOUNCE_MS)
+
+watch(
+	days,
+	(value) => {
+		if (value) void loadPreview(value)
+	},
+	{ immediate: true },
+)
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (toDays(value) !== lastEmitted) isCustomPicked.value = false
+	},
+)
+
+form?.addValidator(guardSubmit)
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap items-center gap-2">
+			<DmsSegmented
+				v-model="choice"
+				:items="items"
+				:disabled="disabled"
+				overflow="wrap"
+				:aria-label="key('label')"
+			/>
+			<UInputNumber
+				v-if="isCustom"
+				:model-value="days ?? undefined"
+				:min="MIN_RETENTION_DAYS"
+				:max="MAX_RETENTION_DAYS"
+				:disabled="disabled"
+				size="sm"
+				class="w-36"
+				@update:model-value="onCustomInput"
+			/>
+			<span v-if="isCustom" class="text-muted text-[12.5px]">
+				{{ key('days_unit') }}
+			</span>
+		</div>
+		<UAlert
+			v-if="deletion"
+			color="warning"
+			variant="soft"
+			icon="i-ph-warning"
+			:description="previewText"
+		/>
+		<p v-else-if="previewText" class="text-dimmed text-[12px]">
+			{{ previewText }}
+		</p>
+	</div>
+</template>