@antelopejs/dms-mailing 0.2.2

package/dist/validation/templates.schema.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateSchema = exports.testSendSchema = exports.realSendSchema = exports.previewSchema = exports.testDataSchema = exports.variablesSchema = exports.variableSchema = exports.templateContentSchema = exports.localeContentSchema = exports.blockSchema = exports.conditionSchema = exports.createTemplateSchema = exports.slugSchema = void 0;
+const zod_1 = require("zod");
+const constants_1 = require("../constants");
+const MIN_HEADING_SIZE = 12;
+const MAX_HEADING_SIZE = 48;
+const MAX_TEST_RECIPIENT_COUNT = 5;
+exports.slugSchema = zod_1.z
+    .string()
+    .trim()
+    .min(1)
+    .max(constants_1.MAX_SLUG_LENGTH)
+    .regex(constants_1.SLUG_PATTERN);
+exports.createTemplateSchema = zod_1.z.object({
+    slug: exports.slugSchema,
+    name: zod_1.z.string().trim().min(1).max(constants_1.MAX_NAME_LENGTH),
+    category: zod_1.z.string().optional(),
+    sourceTemplateId: zod_1.z.string().optional(),
+});
+exports.conditionSchema = zod_1.z.object({
+    path: zod_1.z.string().min(1),
+    operator: zod_1.z.enum(["truthy", "falsy", "eq", "ne", "gt", "lt"]),
+    value: zod_1.z.string(),
+});
+const alignSchema = zod_1.z.enum(["left", "center", "right"]);
+const base = { id: zod_1.z.string().min(1), visibleIf: exports.conditionSchema.nullable() };
+exports.blockSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion("type", [
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("hero"),
+        imageUrl: zod_1.z.string(),
+        alt: zod_1.z.string(),
+    }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("heading"),
+        text: zod_1.z.string(),
+        align: alignSchema,
+        size: zod_1.z.number().int().min(MIN_HEADING_SIZE).max(MAX_HEADING_SIZE),
+    }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("paragraph"),
+        text: zod_1.z.string(),
+        align: alignSchema,
+    }),
+    zod_1.z.object({ ...base, type: zod_1.z.literal("code"), text: zod_1.z.string() }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("list"),
+        source: zod_1.z.string().min(1),
+        labelPath: zod_1.z.string().min(1),
+        valuePath: zod_1.z.string().min(1),
+    }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("total"),
+        label: zod_1.z.string(),
+        value: zod_1.z.string(),
+    }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("button"),
+        text: zod_1.z.string(),
+        href: zod_1.z.string(),
+        align: alignSchema,
+    }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("if"),
+        condition: exports.conditionSchema,
+        children: zod_1.z.array(exports.blockSchema),
+        elseChildren: zod_1.z.array(exports.blockSchema).nullable(),
+    }),
+    zod_1.z.object({ ...base, type: zod_1.z.literal("divider") }),
+    zod_1.z.object({
+        ...base,
+        type: zod_1.z.literal("footer"),
+        text: zod_1.z.string(),
+        unsubscribeLabel: zod_1.z.string(),
+        preferencesLabel: zod_1.z.string(),
+    }),
+]));
+exports.localeContentSchema = zod_1.z.object({
+    subject: zod_1.z.string(),
+    preheader: zod_1.z.string(),
+    blocks: zod_1.z.array(exports.blockSchema),
+});
+exports.templateContentSchema = zod_1.z.object({
+    locales: zod_1.z.record(exports.localeContentSchema),
+});
+exports.variableSchema = zod_1.z.object({
+    path: zod_1.z.string().min(1),
+    type: zod_1.z.enum([
+        "string",
+        "text",
+        "number",
+        "money",
+        "date",
+        "url",
+        "boolean",
+        "array",
+    ]),
+    required: zod_1.z.boolean(),
+});
+exports.variablesSchema = zod_1.z.object({ variables: zod_1.z.array(exports.variableSchema) });
+exports.testDataSchema = zod_1.z.object({ data: zod_1.z.record(zod_1.z.unknown()) });
+exports.previewSchema = zod_1.z.object({
+    locale: zod_1.z.string().min(1).optional(),
+    content: exports.templateContentSchema.optional(),
+    data: zod_1.z.record(zod_1.z.unknown()).optional(),
+});
+exports.realSendSchema = zod_1.z.object({
+    to: zod_1.z.array(zod_1.z.string().email()).min(1).max(MAX_TEST_RECIPIENT_COUNT),
+    locale: zod_1.z.string().min(1).optional(),
+    data: zod_1.z.record(zod_1.z.unknown()).optional(),
+});
+exports.testSendSchema = exports.previewSchema.extend({
+    to: zod_1.z.array(zod_1.z.string().email()).min(1).max(MAX_TEST_RECIPIENT_COUNT),
+});
+exports.duplicateSchema = zod_1.z.object({
+    slug: exports.slugSchema,
+    name: zod_1.z.string().trim().min(1).max(constants_1.MAX_NAME_LENGTH),
+});
+//# sourceMappingURL=templates.schema.js.map

package/dist/validation/templates.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.schema.js","sourceRoot":"","sources":["../../src/validation/templates.schema.ts"],"names":[],"mappings":"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"}

package/frontend-vue/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/frontend-vue/.prettierrc

@@ -0,0 +1,11 @@
+{
+	"semi": false,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"endOfLine": "auto",
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"useTabs": true,
+
+	"htmlWhitespaceSensitivity": "ignore",
+	"tailwindStylesheet": "~/assets/css/main.css"
+}

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { MailingComponentProps } from '../types/component'
+import type { AttentionResponse } from '../composables/useMailingApi'
+import type { AttentionItem, AttentionTone } from '../types/mailing'
+
+const OVERVIEW_PERIOD_SCOPE = 'mailing-overview'
+
+const TONE_CLASSES: Record<AttentionTone, string> = {
+	warning: 'bg-warning/10 text-warning',
+	error: 'bg-error/10 text-error',
+	neutral: 'bg-elevated text-muted',
+}
+
+defineProps<MailingComponentProps>()
+
+const api = useMailingApi()
+const { t } = useI18n()
+const { processI18n } = useTranslation()
+
+const { data, loading } = useMailingPeriodData<AttentionResponse>(
+	OVERVIEW_PERIOD_SCOPE,
+	(query) => api.attention(query),
+)
+
+const items = computed(() => data.value?.items ?? [])
+
+function open(item: AttentionItem): void {
+	if (!item.to) return
+	navigateDms(item.to)
+}
+</script>
+
+<template>
+	<DmsCard :padded="false" class="p-5 sm:p-6">
+		<h2 class="text-highlighted mb-3 text-sm font-semibold">
+			{{ t('dms_mailing.overview.attention_title') }}
+		</h2>
+
+		<USkeleton v-if="loading && !items.length" class="h-24 w-full" />
+
+		<p v-else-if="!items.length" class="text-muted text-[13px]">
+			{{ t('dms_mailing.overview.attention_empty') }}
+		</p>
+
+		<div v-else class="flex flex-col gap-1">
+			<UButton
+				v-for="item in items"
+				:key="item.id"
+				color="neutral"
+				variant="ghost"
+				class="items-start gap-3 text-left"
+				:disabled="!item.to"
+				@click="open(item)"
+			>
+				<span
+					:class="TONE_CLASSES[item.tone]"
+					class="grid size-[30px] shrink-0 place-items-center rounded-lg"
+				>
+					<UIcon :name="item.icon" class="size-4" aria-hidden="true" />
+				</span>
+				<span class="min-w-0 flex-1">
+					<span class="text-toned block text-[13px] font-medium">
+						{{ processI18n(item.title, item.params) }}
+					</span>
+					<span class="text-dimmed mt-0.5 block text-[11.5px]">
+						{{ processI18n(item.description, item.params) }}
+					</span>
+				</span>
+				<UIcon
+					v-if="item.to"
+					name="i-ph-caret-right"
+					class="text-dimmed size-4 shrink-0"
+					aria-hidden="true"
+				/>
+			</UButton>
+		</div>
+	</DmsCard>
+</template>

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import {
+	parseCategories,
+	serializeCategories,
+	slugifyId,
+} from '../utils/categories'
+import type { TemplateCategory } from '../types/mailing'
+
+interface CategoriesInputProps {
+	modelValue?: TemplateCategory[] | string | null
+	initialValue?: TemplateCategory[] | string | null
+	disabled?: boolean
+}
+
+const DEFAULT_ICON = 'i-ph-folder'
+
+const props = withDefaults(defineProps<CategoriesInputProps>(), {
+	modelValue: null,
+	initialValue: null,
+	disabled: false,
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const { t } = useI18n()
+
+const categories = ref<TemplateCategory[]>(
+	parseCategories(props.modelValue ?? props.initialValue).map((entry) => ({
+		...entry,
+	})),
+)
+
+function onEdit(): void {
+	emit('update:modelValue', serializeCategories(categories.value))
+}
+
+// The id is stored on every template, so it is derived once at creation and
+// never follows a later rename.
+function addCategory(): void {
+	categories.value.push({ id: '', label: '', icon: DEFAULT_ICON })
+	onEdit()
+}
+
+function onLabelInput(index: number): void {
+	const entry = categories.value[index]
+	if (entry && !entry.id) entry.id = slugifyId(entry.label)
+	onEdit()
+}
+
+function removeCategory(index: number): void {
+	categories.value.splice(index, 1)
+	onEdit()
+}
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		const parsed = parseCategories(value)
+		if (serializeCategories(parsed) !== serializeCategories(categories.value)) {
+			categories.value = parsed.map((entry) => ({ ...entry }))
+		}
+	},
+)
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div
+			v-for="(category, index) in categories"
+			:key="index"
+			class="flex items-center gap-2"
+		>
+			<UIcon
+				:name="category.icon || DEFAULT_ICON"
+				class="text-dimmed size-4 shrink-0"
+				aria-hidden="true"
+			/>
+			<UInput
+				v-model="category.label"
+				:placeholder="t('dms_mailing.settings.categories.label')"
+				:disabled="disabled"
+				size="sm"
+				class="flex-1"
+				@update:model-value="onLabelInput(index)"
+			/>
+			<UInput
+				v-model="category.icon"
+				:placeholder="DEFAULT_ICON"
+				:disabled="disabled"
+				size="sm"
+				class="w-40 font-mono"
+				@update:model-value="onEdit"
+			/>
+			<code class="text-dimmed w-28 shrink-0 truncate font-mono text-[11px]">
+				{{ category.id }}
+			</code>
+			<UButton
+				v-if="!disabled"
+				icon="i-ph-x"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				:title="t('dms_mailing.settings.categories.remove')"
+				@click="removeCategory(index)"
+			/>
+		</div>
+
+		<p v-if="!categories.length" class="text-muted text-[12.5px]">
+			{{ t('dms_mailing.settings.categories.empty') }}
+		</p>
+
+		<UButton
+			v-if="!disabled"
+			icon="i-ph-plus"
+			variant="link"
+			size="sm"
+			class="self-start"
+			:label="t('dms_mailing.settings.categories.add')"
+			@click="addCategory"
+		/>
+
+		<p class="text-dimmed text-[11.5px]">
+			{{ t('dms_mailing.settings.categories.hint') }}
+		</p>
+	</div>
+</template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+	fromCategoryOption,
+	NO_CATEGORY,
+	toCategoryOption,
+} from '../utils/categories'
+import type { TemplateCategory } from '../types/mailing'
+
+interface CategoryInputProps {
+	modelValue?: string | null
+	initialValue?: string | null
+	disabled?: boolean
+}
+
+const props = withDefaults(defineProps<CategoryInputProps>(), {
+	modelValue: null,
+	initialValue: null,
+	disabled: false,
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const api = useMailingApi()
+const { t } = useI18n()
+
+const categories = ref<TemplateCategory[]>([])
+const selected = ref<string>(
+	toCategoryOption(props.modelValue ?? props.initialValue),
+)
+
+const items = computed(() => [
+	{ label: t('dms_mailing.templates.uncategorised'), value: NO_CATEGORY },
+	...categories.value.map((entry) => ({
+		label: entry.label,
+		value: entry.id,
+	})),
+])
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		selected.value = toCategoryOption(value)
+	},
+)
+
+onMounted(async () => {
+	try {
+		const response = await api.listCategories()
+		categories.value = response.categories
+	} catch {
+		categories.value = []
+	}
+})
+</script>
+
+<template>
+	<USelect
+		v-model="selected"
+		:items="items"
+		value-key="value"
+		:disabled="disabled"
+		class="w-full"
+		@update:model-value="
+			emit('update:modelValue', fromCategoryOption(selected))
+		"
+	/>
+</template>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { TemplateContentResponse } from '../types/mailing'
+import { useMailingApi } from '../composables/useMailingApi'
+
+const { t } = useI18n()
+const route = useDmsRoute()
+const api = useMailingApi()
+
+const templateId = computed(() => String(route.query.id ?? ''))
+const requestedLocale = computed(() =>
+	route.query.locale ? String(route.query.locale) : null,
+)
+
+const loaded = ref<TemplateContentResponse | null>(null)
+const loading = ref(true)
+const failed = ref(false)
+
+async function load(): Promise<void> {
+	loading.value = true
+	failed.value = false
+	try {
+		loaded.value = await api.templateContent(templateId.value)
+	} catch {
+		failed.value = true
+	} finally {
+		loading.value = false
+	}
+}
+
+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
+			v-else-if="failed || !loaded"
+			class="flex flex-1 flex-col items-center justify-center gap-3"
+		>
+			<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>
+		</div>
+
+		<DmsMailingEditorWorkspace
+			v-else
+			:key="templateId"
+			:loaded="loaded"
+			:template-id="templateId"
+			:requested-locale="requestedLocale"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { MailingComponentProps } from '../types/component'
+import type { FunnelResponse } from '../composables/useMailingApi'
+import type { FunnelStep } from '../types/mailing'
+
+const OVERVIEW_PERIOD_SCOPE = 'mailing-overview'
+const UNSUBSCRIBED_STEP_ID = 'unsubscribed'
+const RATE_DECIMALS = 1
+
+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 steps = computed(() => data.value?.steps ?? [])
+
+const numberFormat = computed(() => new Intl.NumberFormat(locale.value))
+
+function stepColor(step: FunnelStep): 'warning' | 'primary' {
+	return step.id === UNSUBSCRIBED_STEP_ID ? 'warning' : 'primary'
+}
+
+function formatRate(rate: number): string {
+	return `${rate.toFixed(RATE_DECIMALS)} %`
+}
+</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>
+
+		<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"
+				>
+					{{ 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>
+		</div>
+	</DmsCard>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+interface HtmlPreviewModalProps {
+	html: string
+	height?: number
+}
+
+const DEFAULT_HEIGHT = 620
+
+withDefaults(defineProps<HtmlPreviewModalProps>(), { height: DEFAULT_HEIGHT })
+</script>
+
+<template>
+	<iframe
+		:srcdoc="html"
+		sandbox="allow-same-origin"
+		title="preview"
+		class="block w-full border-0 bg-white"
+		:style="{ height: `${height}px` }"
+	/>
+</template>