@antelopejs/dms-mailing 0.3.3 → 0.4.0

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

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import FormFieldRow from '../build/components/FormFieldRow.vue'
+import FormRows from '../build/components/FormRows.vue'
+import { useMailingApi } from '../composables/useMailingApi'
+import {
+	HTTP_CONFLICT,
+	apiErrorMessage,
+	apiErrorStatus,
+} from '../utils/api-error'
+import {
+	fitName,
+	freeSlug,
+	slugify,
+	validateName,
+	validateSlug,
+} from '../utils/slug'
+import { editorRoute } from '../utils/editor-route'
+import type { TemplateRow } from '../types/mailing'
+
+interface DuplicateModalProps {
+	rowData?: TemplateRow
+	templateId?: string
+	onSuccessCallback?: () => void
+}
+
+const props = defineProps<DuplicateModalProps>()
+const emit = defineEmits<{ success: [created?: boolean] }>()
+
+const api = useMailingApi()
+const toast = useToast()
+const { t } = useI18n()
+const { processApiMessage } = useTranslation()
+
+const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const source = ref<TemplateRow | null>(props.rowData ?? null)
+const takenSlugs = ref(new Set<string>())
+const name = ref('')
+const slug = ref('')
+const isSlugEdited = ref(false)
+const isSubmitted = ref(false)
+const saving = ref(false)
+const loading = ref(true)
+
+function prefill(template: TemplateRow): void {
+	name.value = fitName(template.name, (inner) =>
+		t('dms_mailing.duplicate.copy_name', { name: inner }),
+	)
+	slug.value = freeSlug(slugify(name.value), takenSlugs.value)
+}
+
+onMounted(async () => {
+	const list = await api.listTemplates().catch(() => ({ results: [] }))
+	takenSlugs.value = new Set(list.results.map((row: TemplateRow) => row.slug))
+	source.value ??=
+		list.results.find((row: TemplateRow) => row._id === templateId.value) ??
+		null
+	if (!source.value && templateId.value) {
+		const detail = await api.templateContent(templateId.value).catch(() => null)
+		source.value = detail?.template ?? null
+	}
+	if (source.value) prefill(source.value)
+	loading.value = false
+})
+
+watch(name, (value) => {
+	if (!isSlugEdited.value)
+		slug.value = freeSlug(slugify(value), takenSlugs.value)
+})
+
+const slugIssue = computed(() => validateSlug(slug.value, takenSlugs.value))
+const nameIssue = computed(() => validateName(name.value))
+
+const slugError = computed(() =>
+	slugIssue.value && (slug.value || isSubmitted.value)
+		? t(`dms_mailing.templates.slug_errors.${slugIssue.value}`)
+		: null,
+)
+const nameError = computed(() =>
+	nameIssue.value && isSubmitted.value
+		? t(`dms_mailing.templates.name_errors.${nameIssue.value}`)
+		: null,
+)
+
+function onSlugInput(value: string): void {
+	isSlugEdited.value = true
+	slug.value = value.trim().toLowerCase()
+}
+
+function close(created: boolean): void {
+	if (created && props.onSuccessCallback) {
+		props.onSuccessCallback()
+		return
+	}
+	emit('success', created)
+}
+
+function reportFailure(error: unknown): void {
+	if (apiErrorStatus(error) === HTTP_CONFLICT) {
+		takenSlugs.value = new Set([...takenSlugs.value, slug.value])
+		return
+	}
+	toast.add({
+		color: 'error',
+		title: processApiMessage(apiErrorMessage(error)),
+	})
+}
+
+async function submit(): Promise<void> {
+	isSubmitted.value = true
+	if (slugIssue.value || nameIssue.value || saving.value) return
+	saving.value = true
+	try {
+		const { id } = await api.duplicate(
+			templateId.value,
+			slug.value,
+			name.value.trim(),
+		)
+		close(true)
+		await navigateDms(editorRoute(id))
+	} catch (error) {
+		reportFailure(error)
+	} finally {
+		saving.value = false
+	}
+}
+</script>
+
+<template>
+	<form
+		class="flex flex-col gap-4"
+		novalidate
+		@submit.prevent="submit"
+		@keydown.meta.enter.prevent="submit"
+		@keydown.ctrl.enter.prevent="submit"
+	>
+		<p v-if="source" class="text-muted text-[13px] [overflow-wrap:anywhere]">
+			{{ t('dms_mailing.duplicate.source', { name: source.name }) }}
+			<span class="font-mono">{{ source.slug }}</span>
+		</p>
+		<USkeleton v-else-if="loading" class="h-4 w-2/3" />
+
+		<FormRows has-required>
+			<FormFieldRow
+				:label="t('dms_mailing.templates.cols.name')"
+				:error="nameError"
+				required
+			>
+				<template #default="{ id }">
+					<DmsInputText
+						:id="id"
+						v-model="name"
+						class="w-full"
+						autofocus
+						:disabled="loading"
+					/>
+				</template>
+			</FormFieldRow>
+
+			<FormFieldRow
+				:label="t('dms_mailing.templates.cols.slug')"
+				:error="slugError"
+				required
+			>
+				<template #label-extra>
+					<span class="text-dimmed text-xs font-normal">
+						{{ t('dms_mailing.new_template.slug_auto') }}
+					</span>
+				</template>
+				<template #default="{ id }">
+					<DmsInputText
+						:id="id"
+						:model-value="slug"
+						class="w-full"
+						:ui="{ base: 'font-mono' }"
+						:disabled="loading"
+						:trailing-icon="slugIssue ? undefined : 'i-ph-check-circle'"
+						@update:model-value="(value) => onSlugInput(String(value))"
+					/>
+				</template>
+			</FormFieldRow>
+		</FormRows>
+
+		<div
+			class="border-default flex items-center justify-end gap-2 border-t pt-4"
+		>
+			<UButton
+				color="neutral"
+				variant="outline"
+				:label="t('dms_mailing.common.cancel')"
+				@click="close(false)"
+			/>
+			<UButton
+				type="submit"
+				icon="i-ph-copy"
+				:label="t('dms_mailing.duplicate.submit')"
+				:loading="saving"
+				:disabled="loading || saving"
+			/>
+		</div>
+	</form>
+</template>

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

@@ -2,25 +2,38 @@
 import { computed, onMounted, ref } from 'vue'
 import type { TemplateContentResponse } from '../types/mailing'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useRecordLabel } from '../composables/useEditorContext'
+import { templateIdFrom } from '../utils/editor-route'
+import { TEMPLATES_PATH } from '../utils/pages'
+import type { EditorRouteParams } from '../utils/editor-route'
+
+interface Props {
+	routeParams?: EditorRouteParams
+}
+
+const props = defineProps<Props>()
 
 const { t } = useI18n()
 const route = useDmsRoute()
 const api = useMailingApi()
+const setRecordLabel = useRecordLabel()
 
-const templateId = computed(() => String(route.query.id ?? ''))
-const requestedLocale = computed(() =>
+const templateId = computed(() => templateIdFrom(props.routeParams, route.path))
+const locale = ref<string | null>(
 	route.query.locale ? String(route.query.locale) : null,
 )
 
 const loaded = ref<TemplateContentResponse | null>(null)
 const loading = ref(true)
 const failed = ref(false)
+const generation = ref(0)
 
 async function load(): Promise<void> {
-	loading.value = true
 	failed.value = false
 	try {
 		loaded.value = await api.templateContent(templateId.value)
+		setRecordLabel(loaded.value.template.name)
+		generation.value += 1
 	} catch {
 		failed.value = true
 	} finally {
@@ -28,36 +41,58 @@ async function load(): Promise<void> {
 	}
 }
 
+async function retry(): Promise<void> {
+	loading.value = true
+	await load()
+}
+
+const errorActions = computed(() => [
+	{
+		label: t('dms_mailing.editor.states.back'),
+		icon: 'i-ph-arrow-left',
+		color: 'neutral' as const,
+		variant: 'outline' as const,
+		onClick: () => navigateDms(TEMPLATES_PATH),
+	},
+	{
+		label: t('dms_mailing.editor.states.retry'),
+		icon: 'i-ph-arrows-clockwise',
+		onClick: () => retry(),
+	},
+])
+
 onMounted(load)
 </script>
 
 <template>
-	<div class="flex h-full min-h-0 flex-col">
-		<div
-			v-if="loading"
-			class="text-muted flex flex-1 items-center justify-center gap-2 text-sm"
-		>
-			<UIcon name="i-ph-circle-notch" class="size-4 animate-spin" />
-			{{ t('dms_mailing.editor.loading') }}
-		</div>
+	<div class="flex h-full min-h-0 flex-1 flex-col">
+		<MailingEditorLoading v-if="loading" />
 
 		<div
 			v-else-if="failed || !loaded"
-			class="flex flex-1 flex-col items-center justify-center gap-3"
+			class="flex flex-1 items-center justify-center p-8"
 		>
-			<UIcon name="i-ph-warning-circle" class="text-error size-8" />
-			<p class="text-muted text-sm">{{ t('dms_mailing.editor.load_error') }}</p>
-			<UButton variant="outline" icon="i-ph-arrow-clockwise" @click="load()">
-				{{ t('dms_mailing.editor.back') }}
-			</UButton>
+			<DmsEmptyState
+				variant="error"
+				hatched
+				:title="t('dms_mailing.editor.states.error_title')"
+				:actions="errorActions"
+			>
+				<p>{{ t('dms_mailing.editor.states.error_description') }}</p>
+				<p class="text-dimmed mt-2 font-mono text-[11px]">
+					GET /api/mailing/templates/{{ templateId }}/content
+				</p>
+			</DmsEmptyState>
 		</div>
 
-		<DmsMailingEditorWorkspace
+		<MailingEditorWorkspace
 			v-else
-			:key="templateId"
+			:key="`${templateId}-${generation}`"
+			v-model:locale="locale"
 			:loaded="loaded"
 			:template-id="templateId"
-			:requested-locale="requestedLocale"
+			:reload="load"
+			@renamed="setRecordLabel"
 		/>
 	</div>
 </template>

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import FormFieldRow from '../build/components/FormFieldRow.vue'
+import FormRows from '../build/components/FormRows.vue'
+import { useMailingApi } from '../composables/useMailingApi'
+import { useReplayToast } from '../composables/useReplayToast'
+import { correctedAddressError } from '../utils/send-actions'
+import type { SendRow } from '../types/mailing'
+
+interface FixAddressModalProps {
+	rowData?: SendRow
+	sendId?: string
+	/** Template version the send used; 0 for a draft test. */
+	version?: number
+}
+
+const props = withDefaults(defineProps<FixAddressModalProps>(), {
+	rowData: undefined,
+	sendId: undefined,
+	version: 0,
+})
+
+const emit = defineEmits<{ success: [sent?: boolean] }>()
+
+const KEY_PREFIX = 'dms_mailing.sends.fix_address.'
+
+const api = useMailingApi()
+const reportReplay = useReplayToast()
+const { t } = useI18n()
+
+const previous = computed(() => props.rowData?.recipientEmail ?? '')
+const address = ref(previous.value)
+const isTouched = ref(false)
+const sending = ref(false)
+
+const key = (path: string, params: Record<string, unknown> = {}): string =>
+	t(`${KEY_PREFIX}${path}`, params)
+
+const errorKey = computed(() =>
+	correctedAddressError(address.value, previous.value),
+)
+const visibleError = computed(() =>
+	isTouched.value && errorKey.value ? t(errorKey.value) : undefined,
+)
+
+const versionLabel = computed(() =>
+	props.version
+		? key('version', { version: props.version })
+		: key('draft_version'),
+)
+
+const sendIdValue = computed(() => props.rowData?._id ?? props.sendId ?? '')
+
+/** A test sent to another address stays a test: the text says so. */
+const descriptionKey = computed(() =>
+	props.rowData?.isTest ? 'description_test' : 'description',
+)
+
+async function submit(): Promise<void> {
+	if (sending.value) return
+	isTouched.value = true
+	if (errorKey.value || !sendIdValue.value) return
+	sending.value = true
+	try {
+		const email = address.value.trim()
+		const result = await api.replay(sendIdValue.value, email)
+		reportReplay(result, email, key('sent', { email }))
+		emit('success', true)
+	} catch (error) {
+		useApiError(error)
+	} finally {
+		sending.value = false
+	}
+}
+</script>
+
+<template>
+	<form class="flex flex-col gap-4" @submit.prevent="submit">
+		<p class="text-muted text-[13px] leading-relaxed">
+			{{ key(descriptionKey, { email: previous }) }}
+			{{ key('app_reminder') }}
+		</p>
+
+		<FormRows has-required>
+			<FormFieldRow :label="key('label')" :error="visibleError" required>
+				<template #default="{ id }">
+					<DmsInputEmail
+						:id="id"
+						v-model="address"
+						class="w-full"
+						autofocus
+						:placeholder="previous"
+						@blur="isTouched = true"
+					/>
+				</template>
+			</FormFieldRow>
+		</FormRows>
+
+		<DmsKeyValueList
+			dense
+			:items="[
+				{
+					id: 'previous',
+					label: key('previous'),
+					value: previous,
+					tone: 'error',
+				},
+				{
+					id: 'template',
+					label: key('template'),
+					value: `${rowData?.templateSlug ?? ''} · ${versionLabel}`,
+				},
+			]"
+		/>
+
+		<div
+			class="border-default flex items-center justify-end gap-2 border-t pt-4"
+		>
+			<UButton
+				color="neutral"
+				variant="outline"
+				:label="key('cancel')"
+				@click="emit('success', false)"
+			/>
+			<UButton
+				type="submit"
+				icon="i-ph-paper-plane-tilt"
+				:label="key('submit')"
+				:loading="sending"
+				:disabled="isTouched && !!errorKey"
+			/>
+		</div>
+	</form>
+</template>

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

@@ -1,66 +1,169 @@
 <script setup lang="ts">
+import { mailingPath, type FunnelResponse } from '../composables/useMailingApi'
+import {
+	biggestDrop,
+	formatRate,
+	FUNNEL_KINDS,
+	FUNNEL_LEAK_STEP,
+	funnelTakeaway,
+	isMeasured,
+	type FunnelStepReading,
+	type FunnelTakeaway,
+} from '../utils/funnel'
 import type { MailingComponentProps } from '../types/component'
-import type { FunnelResponse } from '../composables/useMailingApi'
-import type { FunnelStep } from '../types/mailing'
+import type { FunnelKind } from '../types/mailing'
 
 const OVERVIEW_PERIOD_SCOPE = 'mailing-overview'
-const UNSUBSCRIBED_STEP_ID = 'unsubscribed'
-const RATE_DECIMALS = 1
+const MAILING_SENDS_TOPIC = 'mailing:sends'
+/** The funnel route, its `kind` filled from the card's own switch. */
+const FUNNEL_URL = `${mailingPath('metrics', 'funnel')}?kind={{params.kind}}`
+const SKELETON_ROWS = 5
+const KEY_PREFIX = 'dms_mailing.funnel_card.'
+const NOT_TRACKED_KEY = 'dms_mailing.metrics.not_tracked'
+
+const TAKEAWAY_KEYS: Record<FunnelTakeaway, string> = {
+	empty: `${KEY_PREFIX}no_drop`,
+	untracked: `${KEY_PREFIX}untracked`,
+	no_loss: `${KEY_PREFIX}no_loss`,
+	drop: `${KEY_PREFIX}takeaway`,
+}
 
 defineProps<MailingComponentProps>()
 
-const api = useMailingApi()
 const { t, locale } = useI18n()
 const { processI18n } = useTranslation()
 
-const { data, loading } = useMailingPeriodData<FunnelResponse>(
-	OVERVIEW_PERIOD_SCOPE,
-	(query) => api.funnel(query),
-)
+const kind = ref<FunnelKind>('all')
 
-const steps = computed(() => data.value?.steps ?? [])
+const {
+	data,
+	isLoading: loading,
+	error,
+	refresh,
+} = useChartFetch<FunnelResponse>({
+	fetchUrl: FUNNEL_URL,
+	routeParams: () => ({ kind: kind.value }),
+	periodScope: OVERVIEW_PERIOD_SCOPE,
+	realtimeTopic: MAILING_SENDS_TOPIC,
+})
 
+const steps = computed<FunnelStepReading[]>(() => data.value?.steps ?? [])
+const total = computed(() => steps.value[0]?.count ?? 0)
 const numberFormat = computed(() => new Intl.NumberFormat(locale.value))
+const hasFailed = computed(() => !data.value && !!error.value)
 
-function stepColor(step: FunnelStep): 'warning' | 'primary' {
-	return step.id === UNSUBSCRIBED_STEP_ID ? 'warning' : 'primary'
-}
+const kindItems = computed(() =>
+	FUNNEL_KINDS.map((value) => ({
+		value,
+		label: t(`${KEY_PREFIX}kinds.${value}`),
+	})),
+)
 
-function formatRate(rate: number): string {
-	return `${rate.toFixed(RATE_DECIMALS)} %`
-}
+const errorActions = computed(() => [
+	{
+		label: t(`${KEY_PREFIX}retry`),
+		icon: 'i-ph-arrows-clockwise',
+		color: 'neutral' as const,
+		variant: 'outline' as const,
+		onClick: () => void refresh(),
+	},
+])
+
+const stepLabel = (step: FunnelStepReading): string => processI18n(step.label)
+
+const takeaway = computed(() => {
+	const drop = biggestDrop(steps.value)
+	return t(
+		TAKEAWAY_KEYS[funnelTakeaway(steps.value)],
+		drop
+			? {
+					from: stepLabel(drop.from).toLocaleLowerCase(locale.value),
+					to: stepLabel(drop.to).toLocaleLowerCase(locale.value),
+				}
+			: {},
+	)
+})
+
+const isLeak = (step: FunnelStepReading): boolean =>
+	step.id === FUNNEL_LEAK_STEP
 </script>
 
 <template>
-	<DmsCard :padded="false" class="p-5 sm:p-6">
-		<h2 class="text-highlighted mb-4 text-sm font-semibold">
-			{{ t('dms_mailing.overview.funnel_title') }}
-		</h2>
+	<DmsCard class="h-full" :padded="false" :title="t(`${KEY_PREFIX}title`)">
+		<template #actions>
+			<DmsSegmented
+				v-model="kind"
+				size="xs"
+				:items="kindItems"
+				:aria-label="t(`${KEY_PREFIX}kind_label`)"
+			/>
+		</template>
 
-		<USkeleton v-if="loading && !steps.length" class="h-28 w-full" />
-
-		<div v-else class="flex flex-col gap-3">
-			<div v-for="step in steps" :key="step.id" class="flex items-center gap-3">
-				<span class="text-muted w-28 shrink-0 truncate text-[12.5px]">
-					{{ processI18n(step.label) }}
-				</span>
-				<UProgress
-					:model-value="step.rate"
-					:color="stepColor(step)"
-					size="sm"
-					class="flex-1"
-				/>
-				<span
-					class="text-highlighted w-16 shrink-0 text-right text-[12.5px] font-medium tabular-nums"
+		<DmsEmptyState
+			v-if="hasFailed"
+			variant="error"
+			size="sm"
+			:title="t(`${KEY_PREFIX}error_title`)"
+			:actions="errorActions"
+		/>
+		<div v-else class="@container flex flex-col gap-3.5 p-5">
+			<template v-if="loading && !steps.length">
+				<USkeleton v-for="row in SKELETON_ROWS" :key="row" class="h-5 w-full" />
+			</template>
+			<template v-else>
+				<div
+					v-for="step in steps"
+					:key="step.id"
+					data-funnel-step
+					class="@md:grid-cols-[6.5rem_minmax(0,1fr)_4.5rem_3.5rem] grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-1.5"
 				>
-					{{ numberFormat.format(step.count) }}
-				</span>
-				<span
-					class="text-dimmed w-14 shrink-0 text-right text-[11.5px] tabular-nums"
-				>
-					{{ formatRate(step.rate) }}
-				</span>
-			</div>
+					<span
+						class="truncate text-[12.5px]"
+						:class="isLeak(step) ? 'text-warning' : 'text-toned'"
+					>
+						{{ stepLabel(step) }}
+					</span>
+					<DmsMeter
+						as="span"
+						class="@md:order-none @md:col-span-1 order-last col-span-3"
+						:value="isMeasured(step) ? step.count : 0"
+						:max="Math.max(total, 1)"
+						:tone="isLeak(step) ? 'warning' : 'primary'"
+						size="sm"
+					/>
+					<template v-if="isMeasured(step)">
+						<span
+							class="text-highlighted @md:min-w-0 min-w-[4.5rem] text-right font-mono text-[12.5px] font-semibold tabular-nums"
+						>
+							{{ numberFormat.format(step.count) }}
+						</span>
+						<span
+							class="@md:min-w-0 min-w-[3.5rem] text-right font-mono text-[11.5px] tabular-nums"
+							:class="isLeak(step) ? 'text-warning' : 'text-dimmed'"
+						>
+							{{ formatRate(step.rate, locale) }}
+						</span>
+					</template>
+					<span
+						v-else
+						data-funnel-untracked
+						class="text-dimmed col-span-2 text-right text-[11.5px]"
+					>
+						{{ t(NOT_TRACKED_KEY) }}
+					</span>
+				</div>
+			</template>
 		</div>
+
+		<template v-if="!hasFailed" #footer>
+			<span class="text-muted flex items-center gap-2 text-[12.5px]">
+				<UIcon
+					name="i-ph-info"
+					class="text-dimmed size-4 shrink-0"
+					aria-hidden="true"
+				/>
+				{{ takeaway }}
+			</span>
+		</template>
 	</DmsCard>
 </template>