@antelopejs/dms-mailing 0.3.3 → 0.4.0

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+type SaveView = 'saving' | 'saved' | 'unpublished' | 'error' | 'conflict'
+
+const DOT_CLASSES: Record<SaveView, string> = {
+	saving: 'bg-dimmed animate-pulse',
+	saved: 'bg-success',
+	unpublished: 'bg-warning',
+	error: 'bg-error',
+	conflict: 'bg-error',
+}
+const KEY = 'dms_mailing.editor.save_state'
+const LABEL_KEYS: Record<SaveView, string> = {
+	saving: `${KEY}.saving`,
+	saved: `${KEY}.saved`,
+	unpublished: `${KEY}.unpublished`,
+	error: `${KEY}.error`,
+	conflict: 'dms_mailing.editor.conflict.title',
+}
+const FAILED_VIEWS: SaveView[] = ['error', 'conflict']
+
+const { t } = useI18n()
+const { editor, session } = useEditorContext()
+
+const view = computed<SaveView>(() => {
+	const { saveStatus } = session.state
+	if (saveStatus === 'error' || saveStatus === 'conflict') return saveStatus
+	if (session.isSaving) return 'saving'
+	return session.state.changes.length > 0 ? 'unpublished' : 'saved'
+})
+
+const isFailed = computed(() => FAILED_VIEWS.includes(view.value))
+
+const label = computed(() => {
+	const count = session.state.changes.length
+	return t(LABEL_KEYS[view.value], { count }, count)
+})
+
+const hint = computed(() => {
+	if (view.value === 'conflict') return t('dms_mailing.errors.draft_conflict')
+	return view.value === 'error' ? t(`${KEY}.retry`) : t(`${KEY}.hint`)
+})
+</script>
+
+<template>
+	<div class="flex items-center gap-1">
+		<button
+			type="button"
+			class="text-muted flex items-center gap-1.5 rounded px-1.5 font-mono text-[11.5px]"
+			:class="{
+				'text-error': isFailed,
+				'hover:underline': view === 'error',
+				'cursor-default': view !== 'error',
+			}"
+			:title="hint"
+			@click="view === 'error' && session.save()"
+		>
+			<span class="size-1.5 rounded-full" :class="DOT_CLASSES[view]" />
+			{{ label }}
+		</button>
+		<UTooltip :text="t(`${KEY}.undo`)" :kbds="['meta', 'z']">
+			<UButton
+				icon="i-ph-arrow-counter-clockwise"
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				square
+				:disabled="!editor.canUndo"
+				:aria-label="t(`${KEY}.undo`)"
+				@click="editor.undo()"
+			/>
+		</UTooltip>
+		<UTooltip :text="t(`${KEY}.redo`)" :kbds="['shift', 'meta', 'z']">
+			<UButton
+				icon="i-ph-arrow-clockwise"
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				square
+				:disabled="!editor.canRedo"
+				:aria-label="t(`${KEY}.redo`)"
+				@click="editor.redo()"
+			/>
+		</UTooltip>
+	</div>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+	keys: string[]
+	label?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<span class="inline-flex items-center gap-1">
+		<span class="inline-flex items-center gap-0.5">
+			<UKbd v-for="key in keys" :key="key" :value="key" size="sm" />
+		</span>
+		<span v-if="label">{{ label }}</span>
+	</span>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+interface Props {
+	value: boolean
+	/** Evaluated from the test data (Data mode): shown, not clickable. */
+	isLocked?: boolean
+}
+
+interface ChipOption {
+	value: boolean
+	label: string
+}
+
+defineProps<Props>()
+const emit = defineEmits<{ update: [boolean] }>()
+
+const { t } = useI18n()
+
+const options: ChipOption[] = [
+	{ value: true, label: t('dms_mailing.editor.condition.simulate_true') },
+	{ value: false, label: t('dms_mailing.editor.condition.simulate_false') },
+]
+</script>
+
+<template>
+	<span
+		class="inline-flex rounded-[5px] border border-amber-600/35 bg-white p-px"
+		:title="
+			isLocked
+				? t('dms_mailing.editor.condition.sim_locked')
+				: t('dms_mailing.editor.condition.sim_hint')
+		"
+		@click.stop
+	>
+		<button
+			v-for="option in options"
+			:key="String(option.value)"
+			type="button"
+			class="rounded px-1.5 leading-4"
+			:class="[
+				option.value === value
+					? 'bg-amber-600 text-white'
+					: 'text-amber-800/70',
+				isLocked ? 'cursor-default' : 'cursor-pointer',
+			]"
+			:disabled="isLocked"
+			@click="emit('update', option.value)"
+		>
+			{{ option.label }}
+		</button>
+	</span>
+</template>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { TemplateDetails } from '../../composables/useMailingApi'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { useLocalizedDefaults } from '../../composables/useLocalizedDefaults'
+
+const KEY = 'dms_mailing.editor.template_tab'
+const NO_CATEGORY = '__none__'
+
+const { t } = useI18n()
+const toast = useToast()
+const { editor, session, actions, templateId } = useEditorContext()
+const localized = useLocalizedDefaults()
+
+const template = computed(() => session.state.template)
+const name = ref(template.value.name)
+
+watch(
+	() => template.value.name,
+	(value) => (name.value = value),
+)
+
+const categoryItems = computed(() => [
+	{ value: NO_CATEGORY, label: t(`${KEY}.no_category`), icon: 'i-ph-minus' },
+	...localized.categories(session.state.categories).map((category) => ({
+		value: category.id,
+		label: category.label,
+		icon: category.icon,
+	})),
+])
+
+async function persist(patch: Partial<TemplateDetails>): Promise<void> {
+	try {
+		await session.saveDetails(patch)
+		toast.add({ color: 'success', title: t(`${KEY}.saved`) })
+	} catch (error) {
+		session.reportError(error)
+	}
+}
+
+function saveName(): void {
+	const trimmed = name.value.trim()
+	if (!trimmed || trimmed === template.value.name) {
+		name.value = template.value.name
+		return
+	}
+	void persist({ name: trimmed })
+}
+
+const category = computed({
+	get: () => template.value.category || NO_CATEGORY,
+	set: (value: string) =>
+		void persist({ category: value === NO_CATEGORY ? null : value }),
+})
+
+const subject = computed({
+	get: () => editor.current?.subject ?? '',
+	set: (value: string) => editor.updateLocale({ subject: value }),
+})
+
+const subjectHelp = computed(() =>
+	t(
+		session.state.blockOnMissingVariables
+			? `${KEY}.subject_help_block`
+			: `${KEY}.subject_help_send`,
+	),
+)
+
+const preheader = computed({
+	get: () => editor.current?.preheader ?? '',
+	set: (value: string) => editor.updateLocale({ preheader: value }),
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<UFormField :label="t(`${KEY}.name`)" size="sm">
+			<UInput
+				v-model="name"
+				class="w-full"
+				@blur="saveName()"
+				@keydown.enter.prevent="saveName()"
+			/>
+		</UFormField>
+		<UFormField :label="t(`${KEY}.slug`)" :hint="t(`${KEY}.locked`)" size="sm">
+			<UInput
+				:model-value="template.slug"
+				icon="i-ph-lock"
+				class="w-full font-mono"
+				disabled
+			/>
+			<template #help>{{ t(`${KEY}.slug_help`) }}</template>
+		</UFormField>
+		<UFormField :label="t(`${KEY}.category`)" size="sm">
+			<USelect v-model="category" :items="categoryItems" class="w-full" />
+		</UFormField>
+
+		<template v-if="editor.current">
+			<USeparator />
+			<DmsEyebrow
+				:label="t(`${KEY}.envelope`, { locale: editor.locale.toUpperCase() })"
+			/>
+			<UFormField :label="t('dms_mailing.editor.subject')" size="sm">
+				<MailingEditorTokenField v-model="subject" />
+				<template #help>{{ subjectHelp }}</template>
+			</UFormField>
+			<UFormField :label="t('dms_mailing.editor.preheader')" size="sm">
+				<MailingEditorTokenField v-model="preheader" />
+			</UFormField>
+		</template>
+
+		<USeparator />
+		<MailingEditorLifecycle />
+
+		<USeparator />
+		<div class="flex flex-col gap-2">
+			<DmsEyebrow :label="t('dms_mailing.history.title')" />
+			<MailingVersionHistory
+				v-if="session.state.version > 0"
+				:template-id="templateId"
+				:current-version="session.state.version"
+				:status="session.state.template.status"
+				:locale="editor.locale"
+				:restore="actions.restoreVersion"
+			/>
+			<p v-else class="text-muted text-xs">
+				{{ t('dms_mailing.history.never_published') }}
+			</p>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import type { EditorCheck } from '../../utils/editor-checks'
+
+interface Props {
+	checks: EditorCheck[]
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.test_data'
+const MIN_LINES = 10
+const MAX_LINES = 18
+
+const { t } = useI18n()
+const toast = useToast()
+const { session } = useEditorContext()
+
+const saving = ref(false)
+
+const isValid = computed(() => session.testData !== null)
+
+const hint = computed(() => {
+	if (!isValid.value) return t(`${KEY}.invalid`)
+	return session.isTestDataDirty
+		? t(`${KEY}.valid_unsaved`)
+		: t(`${KEY}.valid_saved`)
+})
+
+const items = computed(() =>
+	isValid.value
+		? props.checks.map((entry) => ({
+				id: entry.id,
+				label: t(entry.key, entry.params),
+				state: entry.state,
+			}))
+		: [{ id: 'invalid', label: t(`${KEY}.fix_json`), state: 'warn' as const }],
+)
+
+async function save(): Promise<void> {
+	saving.value = true
+	try {
+		if (await session.saveTestData())
+			toast.add({ color: 'success', title: t(`${KEY}.saved`) })
+	} catch (error) {
+		session.reportError(error)
+	} finally {
+		saving.value = false
+	}
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<UFormField :label="t(`${KEY}.label`)" size="sm">
+			<template #hint>
+				<span class="text-dimmed font-mono text-[11px]">JSON</span>
+			</template>
+			<DmsInputCode
+				v-model="session.state.testDataSource"
+				language="json"
+				:min-lines="MIN_LINES"
+				:max-lines="MAX_LINES"
+				:line-numbers="false"
+			/>
+			<template #help>
+				<span :class="isValid ? 'text-success' : 'text-error'">{{ hint }}</span>
+			</template>
+		</UFormField>
+
+		<div class="flex items-center gap-1.5">
+			<UButton
+				size="sm"
+				icon="i-ph-floppy-disk"
+				:loading="saving"
+				:disabled="!isValid || !session.isTestDataDirty"
+				@click="save()"
+			>
+				{{ t(`${KEY}.save`) }}
+			</UButton>
+			<UButton
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				:disabled="!session.isTestDataDirty"
+				@click="session.resetTestData()"
+			>
+				{{ t(`${KEY}.reset`) }}
+			</UButton>
+		</div>
+
+		<USeparator />
+		<DmsEyebrow :label="t(`${KEY}.checks`)" />
+		<DmsCheckList :items="items" size="sm" />
+		<MailingEditorMissingPolicy />
+	</div>
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { useLocalizedDefaults } from '../../composables/useLocalizedDefaults'
+import { TEMPLATES_PATH } from '../../utils/pages'
+import type { StatusKey } from '../../utils/lifecycle'
+
+const STATUS_TONES: Record<StatusKey, string> = {
+	live: 'success',
+	draft: 'neutral',
+	unpublished: 'warning',
+	archived: 'warning',
+}
+const SEPARATOR = ' · '
+
+const { t } = useI18n()
+const localized = useLocalizedDefaults()
+const { editor, session } = useEditorContext()
+
+const template = computed(() => session.state.template)
+
+function goBack(): void {
+	void navigateDms(TEMPLATES_PATH)
+}
+
+/**
+ * "Live · v3", "Draft" before a first publish, "Unpublished" once taken
+ * offline: the version only reads on what customers receive.
+ */
+const statusLabel = computed(() => {
+	const label = t(`dms_mailing.templates.status.${session.statusKey}`)
+	const { version } = session.state
+	return session.statusKey === 'live' && version > 0
+		? `${label}${SEPARATOR}v${version}`
+		: label
+})
+
+const categoryLabel = computed(() => {
+	const id = template.value.category
+	if (!id) return t('dms_mailing.editor.toolbar.uncategorised')
+	return (
+		localized
+			.categories(session.state.categories)
+			.find((entry) => entry.id === id)?.label ?? id
+	)
+})
+</script>
+
+<template>
+	<div class="flex min-w-0 items-center gap-1">
+		<UTooltip :text="t('dms_mailing.editor.back')" :kbds="['escape']">
+			<UButton
+				icon="i-ph-arrow-left"
+				color="neutral"
+				variant="ghost"
+				square
+				:aria-label="t('dms_mailing.editor.back')"
+				@click="goBack()"
+			/>
+		</UTooltip>
+		<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="editor.rightTab = 'template'"
+		>
+			<span class="flex items-center gap-2">
+				<span class="text-highlighted truncate text-sm font-semibold">
+					{{ template.name }}
+				</span>
+				<DmsStatusPill
+					size="sm"
+					:tone="STATUS_TONES[session.statusKey]"
+					:label="statusLabel"
+				/>
+			</span>
+			<span class="text-muted block truncate font-mono text-[11px]">
+				{{ template.slug }}{{ SEPARATOR }}{{ categoryLabel }}
+			</span>
+		</button>
+	</div>
+</template>

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

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import {
+	computed,
+	markRaw,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+} from 'vue'
+import type { TokenFieldHandle } from '../../composables/useEditorContext'
+import { useEditorContext } from '../../composables/useEditorContext'
+import {
+	insertSuggestion,
+	insertTokenAt,
+	suggestPaths,
+	tokenQueryAt,
+} from '../../utils/autocomplete'
+import type {
+	PathSuggestion,
+	TextEdit,
+	TokenQuery,
+} from '../../utils/autocomplete'
+import { SYSTEM_PATHS } from '../../utils/paths'
+import { splitRawSegments } from '../../utils/tokens'
+
+interface Props {
+	modelValue: string
+	isMultiline?: boolean
+	placeholder?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const SINGLE_LINE_ROWS = 1
+const MULTI_LINE_ROWS = 3
+const LINE_BREAKS = /[\r\n]+/g
+const CARET_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
+const FIELD_CLASS =
+	'whitespace-pre-wrap break-words px-2.5 py-1.5 font-sans text-sm leading-6'
+
+const INVALID_CLASS = 'bg-error/15 text-error underline decoration-wavy'
+
+const { editor, session } = useEditorContext()
+const { t } = useI18n()
+
+const textarea = ref<HTMLTextAreaElement | null>(null)
+const query = ref<TokenQuery | null>(null)
+const highlighted = ref(0)
+
+const declared = computed(
+	() =>
+		new Set([
+			...editor.variables.map((variable) => variable.path),
+			...SYSTEM_PATHS,
+		]),
+)
+const segments = computed(() => splitRawSegments(props.modelValue))
+const hasInvalidToken = computed(() =>
+	segments.value.some((segment) => segment.kind === 'invalid'),
+)
+const suggestions = computed<PathSuggestion[]>(() =>
+	query.value
+		? suggestPaths(query.value.query, {
+				variables: editor.variables,
+				detected: session.detected,
+				system: SYSTEM_PATHS,
+			})
+		: [],
+)
+const isOpen = computed(() => suggestions.value.length > 0)
+
+function caret(): number {
+	return textarea.value?.selectionStart ?? props.modelValue.length
+}
+
+function refreshQuery(): void {
+	query.value = textarea.value
+		? tokenQueryAt(textarea.value.value, caret())
+		: null
+	highlighted.value = 0
+}
+
+function autosize(): void {
+	const element = textarea.value
+	if (!element) return
+	element.style.height = 'auto'
+	element.style.height = `${element.scrollHeight}px`
+}
+
+function clean(value: string): string {
+	return props.isMultiline ? value : value.replace(LINE_BREAKS, ' ')
+}
+
+function onInput(event: Event): void {
+	emit('update:modelValue', clean((event.target as HTMLTextAreaElement).value))
+	void nextTick(refreshQuery)
+}
+
+async function apply(edit: TextEdit): Promise<void> {
+	emit('update:modelValue', edit.text)
+	await nextTick()
+	textarea.value?.focus()
+	textarea.value?.setSelectionRange(edit.caret, edit.caret)
+	refreshQuery()
+}
+
+function choose(suggestion: PathSuggestion): void {
+	if (!query.value) return
+	void apply(
+		insertSuggestion(props.modelValue, query.value, caret(), suggestion.path),
+	)
+	query.value = null
+}
+
+const handle: TokenFieldHandle = markRaw({
+	insert: (path: string) =>
+		void apply(insertTokenAt(props.modelValue, caret(), path)),
+})
+
+function moveHighlight(step: number): void {
+	const count = suggestions.value.length
+	highlighted.value = (highlighted.value + step + count) % count
+}
+
+const MENU_KEYS: Record<string, () => void> = {
+	ArrowDown: () => moveHighlight(1),
+	ArrowUp: () => moveHighlight(-1),
+	Enter: () => choose(suggestions.value[highlighted.value] as PathSuggestion),
+	Tab: () => choose(suggestions.value[highlighted.value] as PathSuggestion),
+	Escape: () => (query.value = null),
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	const action = isOpen.value ? MENU_KEYS[event.key] : undefined
+	if (action) {
+		event.preventDefault()
+		event.stopPropagation()
+		action()
+		return
+	}
+	if (!props.isMultiline && event.key === 'Enter') event.preventDefault()
+}
+
+function onKeyup(event: KeyboardEvent): void {
+	if (CARET_KEYS.includes(event.key)) refreshQuery()
+}
+
+function onFocus(): void {
+	session.state.activeField = handle
+}
+
+watch(
+	() => props.modelValue,
+	() => void nextTick(autosize),
+)
+onMounted(autosize)
+onBeforeUnmount(() => {
+	if (session.state.activeField === handle) session.state.activeField = null
+})
+</script>
+
+<template>
+	<div class="relative w-full">
+		<div
+			class="border-default bg-default focus-within:border-primary focus-within:ring-primary relative rounded-md border transition-colors focus-within:ring-1"
+		>
+			<div
+				aria-hidden="true"
+				class="text-highlighted pointer-events-none absolute inset-0 overflow-hidden"
+				:class="FIELD_CLASS"
+			>
+				<template v-for="(segment, index) in segments" :key="index">
+					<span
+						v-if="segment.kind === 'token'"
+						class="rounded-sm box-decoration-clone"
+						:class="
+							declared.has(segment.value)
+								? 'bg-primary/15 text-primary'
+								: 'bg-warning/15 text-warning'
+						"
+					>
+						{{ segment.raw }}
+					</span>
+					<span
+						v-else-if="segment.kind === 'invalid'"
+						class="rounded-sm box-decoration-clone"
+						:class="INVALID_CLASS"
+					>
+						{{ segment.raw }}
+					</span>
+					<template v-else>{{ segment.raw }}</template>
+				</template>
+				<span>&#8203;</span>
+			</div>
+			<textarea
+				ref="textarea"
+				:value="modelValue"
+				:rows="isMultiline ? MULTI_LINE_ROWS : SINGLE_LINE_ROWS"
+				:placeholder="placeholder"
+				class="placeholder:text-dimmed caret-(--ui-text-highlighted) relative block w-full resize-none overflow-hidden bg-transparent text-transparent outline-none"
+				:class="FIELD_CLASS"
+				spellcheck="true"
+				@input="onInput"
+				@keydown="onKeydown"
+				@keyup="onKeyup"
+				@click="refreshQuery()"
+				@focus="onFocus()"
+				@blur="query = null"
+			/>
+		</div>
+		<p v-if="hasInvalidToken" class="text-error mt-1 text-xs">
+			{{ t('dms_mailing.editor.token_invalid') }}
+		</p>
+		<MailingEditorAutocompleteMenu
+			v-if="isOpen"
+			:items="suggestions"
+			:highlighted="highlighted"
+			@choose="choose"
+			@hover="highlighted = $event"
+		/>
+	</div>
+</template>