@antelopejs/dms-mailing 0.2.2

package/frontend-vue/app/components/editor/EditorMissingLocale.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+interface Props {
+	fallback: string
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const canDuplicate = computed(
+	() =>
+		props.fallback !== editor.locale &&
+		Boolean(editor.content.locales[props.fallback]),
+)
+</script>
+
+<template>
+	<div class="bg-elevated/40 flex flex-1 items-center justify-center p-8">
+		<div class="flex max-w-sm flex-col items-center gap-3 text-center">
+			<UIcon name="i-ph-globe-hemisphere-west" class="text-muted size-10" />
+			<h2 class="text-base font-semibold">
+				{{
+					t('dms_mailing.editor.missing_locale.title', {
+						locale: editor.locale.toUpperCase(),
+					})
+				}}
+			</h2>
+			<p class="text-muted text-sm">
+				{{
+					t('dms_mailing.editor.missing_locale.hint', {
+						locale: editor.locale.toUpperCase(),
+						fallback: fallback.toUpperCase(),
+					})
+				}}
+			</p>
+			<div class="mt-1 flex items-center gap-2">
+				<UButton
+					v-if="canDuplicate"
+					icon="i-ph-copy"
+					@click="editor.createLocale(editor.locale, fallback)"
+				>
+					{{
+						t('dms_mailing.editor.missing_locale.duplicate', {
+							fallback: fallback.toUpperCase(),
+						})
+					}}
+				</UButton>
+				<UButton
+					variant="ghost"
+					color="neutral"
+					@click="editor.createLocale(editor.locale)"
+				>
+					{{ t('dms_mailing.editor.missing_locale.blank') }}
+				</UButton>
+			</div>
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorPalette.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import type { BlockType } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import {
+	BLOCK_PALETTE,
+	LOGIC_PALETTE,
+	PALETTE_GROUP,
+	cloneFromPalette,
+} from '../../utils/blocks'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const groups = [
+	{ id: 'content', entries: BLOCK_PALETTE },
+	{ id: 'logic', entries: LOGIC_PALETTE },
+]
+
+function add(type: BlockType): void {
+	if (!editor.current) return
+	editor.addBlock(type)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<section v-for="group in groups" :key="group.id">
+			<p
+				class="text-muted mb-2 text-[11px] font-semibold uppercase tracking-wide"
+			>
+				{{ t(`dms_mailing.editor.groups.${group.id}`) }}
+			</p>
+			<draggable
+				:list="group.entries"
+				:group="PALETTE_GROUP"
+				:clone="cloneFromPalette"
+				:sort="false"
+				item-key="type"
+				class="grid grid-cols-2 gap-2"
+			>
+				<template #item="{ element }">
+					<button
+						type="button"
+						class="border-default bg-default hover:border-primary hover:text-primary flex cursor-grab items-center gap-2 rounded-md border px-2.5 py-2 text-left text-xs transition disabled:cursor-not-allowed disabled:opacity-50"
+						:disabled="!editor.current"
+						@click="add(element.type)"
+					>
+						<UIcon :name="element.icon" class="size-4 shrink-0" />
+						<span class="truncate">
+							{{ t(`dms_mailing.blocks.${element.type}`) }}
+						</span>
+					</button>
+				</template>
+			</draggable>
+		</section>
+
+		<p class="text-muted text-[11px]">
+			{{ t('dms_mailing.editor.palette.hint') }}
+		</p>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorRail.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RailTab } from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+const TABS: RailTab[] = ['blocks', 'settings', 'template', 'data']
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const items = computed(() =>
+	TABS.map((value) => ({
+		value,
+		label: t(`dms_mailing.editor.tabs.${value}`),
+	})),
+)
+
+const tab = computed({
+	get: () => editor.tab,
+	set: (value: string | number) => (editor.tab = value as RailTab),
+})
+</script>
+
+<template>
+	<div class="flex min-h-0 flex-1 flex-col">
+		<div class="border-default flex items-center gap-2 border-b p-2">
+			<UTabs
+				v-model="tab"
+				:items="items"
+				:content="false"
+				size="xs"
+				class="min-w-0 flex-1"
+			/>
+			<UButton
+				icon="i-ph-x"
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				:aria-label="t('dms_mailing.editor.toggle_rail')"
+				@click="editor.railOpen = false"
+			/>
+		</div>
+
+		<div class="min-h-0 flex-1 overflow-y-auto p-3">
+			<DmsMailingEditorPalette v-if="editor.tab === 'blocks'" />
+			<DmsMailingEditorDataPanel v-else-if="editor.tab === 'data'" />
+			<DmsMailingEditorTemplateSettings v-else-if="editor.tab === 'template'" />
+			<DmsMailingEditorSubjectSettings v-else-if="editor.subjectSelected" />
+			<DmsMailingEditorBlockSettings
+				v-else-if="editor.selected"
+				:block="editor.selected"
+			/>
+			<p v-else class="text-muted px-1 py-6 text-center text-xs">
+				{{ t('dms_mailing.editor.settings_hint') }}
+			</p>
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorSubjectSettings.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const subject = computed({
+	get: () => editor.current?.subject ?? '',
+	set: (value: string) => editor.updateLocale({ subject: value }),
+})
+
+const preheader = computed({
+	get: () => editor.current?.preheader ?? '',
+	set: (value: string) => editor.updateLocale({ preheader: value }),
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+			{{ t('dms_mailing.editor.subject') }}
+		</p>
+
+		<UFormField
+			:label="t('dms_mailing.editor.subject')"
+			:help="t('dms_mailing.editor.subject_help')"
+			size="xs"
+		>
+			<UInput v-model="subject" class="w-full" />
+		</UFormField>
+
+		<UFormField :label="t('dms_mailing.editor.preheader')" size="xs">
+			<UInput v-model="preheader" class="w-full" />
+		</UFormField>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorTemplateSettings.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import type { TemplateStatus } from '../../types/mailing'
+
+interface StatusAction {
+	action: 'publish' | 'unpublish' | 'archive'
+	icon: string
+}
+
+/** Status is not a free-form field: each transition has its own side effects. */
+const STATUS_ACTIONS: StatusAction[] = [
+	{ action: 'publish', icon: 'i-ph-rocket-launch' },
+	{ action: 'unpublish', icon: 'i-ph-eye-slash' },
+	{ action: 'archive', icon: 'i-ph-archive' },
+]
+
+const STATUS_COLOURS: Record<TemplateStatus, 'success' | 'neutral'> = {
+	live: 'success',
+	draft: 'neutral',
+	archived: 'neutral',
+}
+
+const { t } = useI18n()
+const { editor, template, name, category, runStatusAction } = useEditorContext()
+
+const statusLabel = computed(() =>
+	t(`dms_mailing.templates.status.${template.value.status}`),
+)
+
+function touchOnEdit(): void {
+	editor.touch()
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+			{{ t('dms_mailing.editor.tabs.template') }}
+		</p>
+
+		<UFormField :label="t('dms_mailing.templates.cols.name')" size="xs">
+			<UInput v-model="name" class="w-full" @update:model-value="touchOnEdit" />
+		</UFormField>
+
+		<UFormField :label="t('dms_mailing.templates.cols.slug')" size="xs">
+			<UInput :model-value="template.slug" class="w-full font-mono" disabled />
+		</UFormField>
+
+		<UFormField :label="t('dms_mailing.templates.cols.category')" size="xs">
+			<DmsMailingCategoryInput
+				v-model="category"
+				@update:model-value="touchOnEdit"
+			/>
+		</UFormField>
+
+		<USeparator />
+
+		<section class="flex flex-col gap-2">
+			<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+				{{ t('dms_mailing.templates.cols.status') }}
+			</p>
+			<UBadge
+				:color="STATUS_COLOURS[template.status]"
+				variant="subtle"
+				size="sm"
+				class="self-start"
+				:label="statusLabel"
+			/>
+			<div class="flex flex-wrap items-center gap-2">
+				<UButton
+					v-for="entry in STATUS_ACTIONS"
+					:key="entry.action"
+					size="xs"
+					variant="outline"
+					color="neutral"
+					:icon="entry.icon"
+					:label="t(`dms_mailing.templates.actions.${entry.action}`)"
+					@click="runStatusAction(entry.action)"
+				/>
+			</div>
+			<p class="text-muted text-[11px]">
+				{{ t('dms_mailing.editor.status_hint') }}
+			</p>
+		</section>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorTestSendModal.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { parseTestData } from '../../utils/testData'
+
+const RECIPIENT_SEPARATOR = /[\s,;]+/
+
+const open = defineModel<boolean>('open', { required: true })
+
+const { t } = useI18n()
+const toast = useToast()
+const { editor, api, templateId, testData } = useEditorContext()
+
+const recipients = ref('')
+const sending = ref(false)
+
+const addresses = computed(() =>
+	recipients.value.split(RECIPIENT_SEPARATOR).filter(Boolean),
+)
+
+async function send(): Promise<void> {
+	sending.value = true
+	try {
+		await api.testSend(templateId, {
+			to: addresses.value,
+			locale: editor.locale,
+			content: editor.content,
+			data: parseTestData(testData.value) ?? undefined,
+		})
+		toast.add({
+			title: t('dms_mailing.editor.test_send_modal.sent'),
+			color: 'success',
+		})
+		open.value = false
+	} finally {
+		sending.value = false
+	}
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('dms_mailing.editor.test_send_modal.title')"
+	>
+		<template #body>
+			<UFormField :label="t('dms_mailing.editor.test_send_modal.recipients')">
+				<UInput
+					v-model="recipients"
+					class="w-full"
+					placeholder="a@example.com, b@example.com"
+				/>
+			</UFormField>
+		</template>
+		<template #footer>
+			<UButton
+				icon="i-ph-paper-plane-tilt"
+				:loading="sending"
+				:disabled="addresses.length === 0"
+				@click="send()"
+			>
+				{{ t('dms_mailing.editor.test_send_modal.send') }}
+			</UButton>
+		</template>
+	</UModal>
+</template>

package/frontend-vue/app/components/editor/EditorToolbar.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { EditorDevice } from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+interface SegmentedItem {
+	label: string
+	value: string
+	icon?: string
+}
+
+const TEMPLATES_PATH = '/modules/mailing/templates'
+const LIVE_STATUS = 'live'
+const MISSING_LOCALE_SUFFIX = ' ·'
+
+const { t } = useI18n()
+const { editor, template, name, save, publish, openTestSend } =
+	useEditorContext()
+
+const localeItems = computed<SegmentedItem[]>(() =>
+	editor.locales.map((code) => ({
+		value: code,
+		label: editor.missingLocales.includes(code)
+			? `${code.toUpperCase()}${MISSING_LOCALE_SUFFIX}`
+			: code.toUpperCase(),
+	})),
+)
+
+const deviceItems = computed<SegmentedItem[]>(() => [
+	{
+		value: 'desktop',
+		label: t('dms_mailing.editor.desktop'),
+		icon: 'i-ph-monitor',
+	},
+	{
+		value: 'mobile',
+		label: t('dms_mailing.editor.mobile'),
+		icon: 'i-ph-device-mobile',
+	},
+])
+
+const locale = computed({
+	get: () => editor.locale,
+	set: (code: string) => editor.setLocale(code),
+})
+
+const device = computed({
+	get: () => editor.device,
+	set: (value: string | number) => (editor.device = value as EditorDevice),
+})
+
+// The name is not edited here: the Template tab is the one place to rename,
+// so the heading is a plain affordance that opens it.
+function openTemplateSettings(): void {
+	editor.railOpen = true
+	editor.tab = 'template'
+}
+</script>
+
+<template>
+	<header
+		class="border-default bg-default flex h-14 shrink-0 items-center gap-3 border-b px-4"
+	>
+		<UButton
+			icon="i-ph-arrow-left"
+			variant="ghost"
+			color="neutral"
+			:aria-label="t('dms_mailing.editor.back')"
+			@click="navigateDms(TEMPLATES_PATH)"
+		/>
+
+		<button
+			type="button"
+			class="hover:bg-elevated min-w-0 rounded-md px-2 py-1 text-left transition-colors"
+			:title="t('dms_mailing.editor.open_template_settings')"
+			@click="openTemplateSettings()"
+		>
+			<p class="truncate text-sm font-semibold">{{ name }}</p>
+			<p class="text-muted truncate font-mono text-[11px]">
+				{{ template.slug }}
+			</p>
+		</button>
+
+		<div class="ml-4 flex items-center gap-2">
+			<DmsSegmented
+				v-model="locale"
+				:items="localeItems"
+				size="xs"
+				:aria-label="t('dms_mailing.editor.title')"
+			/>
+			<DmsSegmented
+				v-model="device"
+				:items="deviceItems"
+				size="xs"
+				:aria-label="t('dms_mailing.editor.desktop')"
+			/>
+			<UBadge
+				:color="editor.previewMode ? 'primary' : 'neutral'"
+				variant="subtle"
+				size="sm"
+				icon="i-ph-database"
+			>
+				{{
+					editor.previewMode
+						? t('dms_mailing.editor.preview_mode.data')
+						: t('dms_mailing.editor.preview_mode.variables')
+				}}
+				<UButton
+					v-if="editor.previewMode"
+					icon="i-ph-x"
+					size="xs"
+					variant="ghost"
+					color="neutral"
+					class="-mr-1 p-0"
+					:aria-label="t('dms_mailing.editor.preview_mode.back')"
+					:title="t('dms_mailing.editor.preview_mode.back')"
+					@click="editor.previewMode = false"
+				/>
+			</UBadge>
+		</div>
+
+		<div class="ml-auto flex items-center gap-2">
+			<UButton
+				icon="i-ph-sidebar-simple"
+				variant="ghost"
+				color="neutral"
+				:aria-label="t('dms_mailing.editor.toggle_rail')"
+				@click="editor.railOpen = !editor.railOpen"
+			/>
+			<UButton
+				variant="outline"
+				color="neutral"
+				icon="i-ph-paper-plane-tilt"
+				@click="openTestSend()"
+			>
+				{{ t('dms_mailing.editor.test_send') }}
+			</UButton>
+			<UButton
+				v-if="template.status !== LIVE_STATUS"
+				variant="outline"
+				icon="i-ph-rocket-launch"
+				@click="publish()"
+			>
+				{{ t('dms_mailing.editor.publish') }}
+			</UButton>
+			<UButton
+				icon="i-ph-floppy-disk"
+				:disabled="editor.dirty === 0"
+				@click="save()"
+			>
+				{{ t('dms_mailing.editor.save') }}
+			</UButton>
+		</div>
+	</header>
+</template>

package/frontend-vue/app/components/editor/EditorVariables.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { VariableDefinition, VariableType } from '../../types/mailing'
+import { VARIABLE_TYPES } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { collectContentPaths } from '../../utils/paths'
+import { mergeVariables } from '../../utils/variables'
+
+const DEFAULT_TYPE: VariableType = 'string'
+
+const emit = defineEmits<{ insert: [string] }>()
+
+const { t } = useI18n()
+const { api, editor, templateId, variables, detectedVariables } =
+	useEditorContext()
+
+// `detectedVariables` comes from the server and only refreshes on save, so on
+// its own it strikes through a path the moment it is wired into a condition.
+// Union it with what the editor currently holds: the server list still covers
+// what a save has seen, and the live one covers what the author just did.
+const detected = computed(() => [
+	...new Set([
+		...detectedVariables.value,
+		...collectContentPaths(editor.content),
+	]),
+])
+
+const merged = computed(() => mergeVariables(detected.value, variables.value))
+const undeclared = computed(() =>
+	merged.value
+		.filter((entry) => entry.usage === 'detected')
+		.map((entry) => entry.path),
+)
+
+const declaring = ref(false)
+const saving = ref(false)
+const draft = ref<VariableDefinition>({
+	path: '',
+	type: DEFAULT_TYPE,
+	required: false,
+})
+
+function reset(): void {
+	draft.value = { path: '', type: DEFAULT_TYPE, required: false }
+	declaring.value = false
+}
+
+function startDeclaring(): void {
+	draft.value = {
+		path: undeclared.value[0] ?? '',
+		type: DEFAULT_TYPE,
+		required: false,
+	}
+	declaring.value = true
+}
+
+async function declare(): Promise<void> {
+	if (!draft.value.path) return
+	saving.value = true
+	try {
+		const next = [...variables.value, { ...draft.value }]
+		const response = await api.saveVariables(templateId, next)
+		variables.value = response.variables ?? next
+		reset()
+	} finally {
+		saving.value = false
+	}
+}
+</script>
+
+<template>
+	<section class="flex flex-col gap-2">
+		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+			{{ t('dms_mailing.editor.groups.variables') }}
+		</p>
+
+		<p v-if="merged.length === 0" class="text-muted text-[11px]">
+			{{ t('dms_mailing.editor.variables.empty') }}
+		</p>
+
+		<button
+			v-for="variable in merged"
+			:key="variable.path"
+			type="button"
+			class="border-default hover:border-primary flex items-center gap-2 rounded-md border px-2 py-1.5 text-left transition"
+			:title="t('dms_mailing.editor.variables.insert')"
+			@click="emit('insert', variable.path)"
+		>
+			<code
+				class="min-w-0 flex-1 truncate font-mono text-[11px]"
+				:class="variable.usage === 'unused' ? 'text-muted line-through' : ''"
+			>
+				{{ variable.path }}
+			</code>
+			<UBadge
+				v-if="variable.usage === 'unused'"
+				size="sm"
+				variant="subtle"
+				color="warning"
+			>
+				{{ t('dms_mailing.editor.variables.unused') }}
+			</UBadge>
+			<UBadge size="sm" variant="subtle" color="neutral">
+				{{ variable.type }}
+			</UBadge>
+			<UBadge
+				v-if="variable.required"
+				size="sm"
+				variant="subtle"
+				color="warning"
+			>
+				{{ t('dms_mailing.editor.variables.required') }}
+			</UBadge>
+		</button>
+
+		<UButton
+			v-if="!declaring"
+			size="xs"
+			variant="outline"
+			color="neutral"
+			icon="i-ph-plus"
+			@click="startDeclaring()"
+		>
+			{{ t('dms_mailing.editor.variables.declare') }}
+		</UButton>
+
+		<div
+			v-else
+			class="border-default flex flex-col gap-2 rounded-md border p-2"
+		>
+			<UFormField :label="t('dms_mailing.editor.variables.path')" size="xs">
+				<UInput
+					v-model="draft.path"
+					class="w-full"
+					placeholder="order.total"
+					list="editor-detected-paths"
+				/>
+				<datalist id="editor-detected-paths">
+					<option v-for="path in undeclared" :key="path" :value="path" />
+				</datalist>
+			</UFormField>
+			<UFormField :label="t('dms_mailing.editor.variables.type')" size="xs">
+				<USelect v-model="draft.type" class="w-full" :items="VARIABLE_TYPES" />
+			</UFormField>
+			<UFormField :label="t('dms_mailing.editor.variables.required')" size="xs">
+				<USwitch v-model="draft.required" />
+			</UFormField>
+			<div class="flex items-center gap-2">
+				<UButton
+					size="xs"
+					:loading="saving"
+					:disabled="!draft.path"
+					@click="declare()"
+				>
+					{{ t('dms_mailing.editor.variables.add') }}
+				</UButton>
+				<UButton size="xs" variant="ghost" color="neutral" @click="reset()">
+					{{ t('dms_mailing.editor.variables.cancel') }}
+				</UButton>
+			</div>
+		</div>
+	</section>
+</template>