@antelopejs/dms-mailing 0.3.3 → 0.4.0

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

@@ -1,154 +1,54 @@
 <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 = ' ·'
+import { isPublishable } from '../../utils/lifecycle'
 
 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 { editor, session, actions } = useEditorContext()
+
+const canPublishNow = computed(() =>
+	isPublishable({
+		status: session.state.template.status,
+		changeCount: session.state.changes.length,
+		dirty: editor.dirty,
+	}),
 )
-
-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"
+		class="border-default bg-default flex h-14 shrink-0 items-center gap-2.5 border-b px-3"
 	>
-		<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>
+		<MailingEditorTitle />
+		<span class="border-default h-5 border-l" />
+		<MailingEditorLocaleSwitch />
+		<MailingEditorViewSwitches />
 
-		<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')
-				}}
+		<div class="ml-auto flex items-center gap-2">
+			<MailingEditorSaveState />
+			<span class="border-default h-5 border-l" />
+			<UTooltip :text="t('dms_mailing.editor.toolbar.test_hint')" :kbds="['T']">
 				<UButton
-					v-if="editor.previewMode"
-					icon="i-ph-x"
-					size="xs"
-					variant="ghost"
+					size="sm"
 					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">
+					variant="outline"
+					icon="i-ph-flask"
+					@click="actions.test()"
+				>
+					{{ t('dms_mailing.editor.toolbar.test') }}
+				</UButton>
+			</UTooltip>
 			<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"
+				size="sm"
 				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()"
+				:disabled="!canPublishNow"
+				@click="actions.publish()"
 			>
-				{{ t('dms_mailing.editor.save') }}
+				{{ t('dms_mailing.editor.toolbar.publish') }}
+				<span class="flex items-center gap-0.5 opacity-80">
+					<UKbd value="meta" size="sm" color="primary" variant="solid" />
+					<UKbd value="enter" size="sm" color="primary" variant="solid" />
+				</span>
 			</UButton>
 		</div>
 	</header>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { VariableDefinition } from '../../types/mailing'
+import { variableTypeItems } from '../../utils/variable-types'
+import { isValidVariablePath, suggestVariablePath } from '../../utils/variables'
+import type { VariableSubmission } from '../../utils/variables'
+
+interface Props {
+	value: VariableDefinition
+	isNew: boolean
+	/** The path the content uses now, which a new path may replace. */
+	usedPath?: string | null
+	/** How many places of the content use `usedPath`. */
+	usageCount?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	usedPath: null,
+	usageCount: 0,
+})
+const emit = defineEmits<{ save: [VariableSubmission]; cancel: [] }>()
+
+const KEY = 'dms_mailing.editor.variables'
+
+const { t } = useI18n()
+
+const typeItems = computed(() => variableTypeItems((key) => t(key)))
+
+const draft = ref<VariableDefinition>({ ...props.value })
+const shouldReplace = ref(true)
+
+const path = computed(() => draft.value.path.trim())
+const isPathValid = computed(() => isValidVariablePath(path.value))
+const pathError = computed(() =>
+	path.value && !isPathValid.value
+		? t(`${KEY}.invalid_path`, {
+				suggestion: suggestVariablePath(path.value),
+			})
+		: undefined,
+)
+const canReplace = computed(
+	() =>
+		isPathValid.value &&
+		props.usageCount > 0 &&
+		Boolean(props.usedPath) &&
+		path.value !== props.usedPath,
+)
+
+function submit(): void {
+	if (!isPathValid.value) return
+	emit('save', {
+		value: { ...draft.value, path: path.value },
+		shouldReplaceInContent: canReplace.value && shouldReplace.value,
+	})
+}
+</script>
+
+<template>
+	<form
+		class="border-default bg-default mt-1 flex flex-col gap-2.5 rounded-md border p-2.5"
+		@submit.prevent="submit()"
+	>
+		<UFormField :label="t(`${KEY}.path`)" :error="pathError" size="xs">
+			<UInput
+				v-model="draft.path"
+				class="w-full font-mono"
+				placeholder="order.total"
+				autofocus
+			/>
+		</UFormField>
+		<UCheckbox
+			v-if="canReplace"
+			v-model="shouldReplace"
+			size="sm"
+			:label="t(`${KEY}.rename_in_blocks`, { count: usageCount }, usageCount)"
+		/>
+		<UFormField :label="t(`${KEY}.type`)" size="xs">
+			<USelect
+				v-model="draft.type"
+				class="w-full"
+				:items="typeItems"
+				value-key="value"
+			/>
+		</UFormField>
+		<USwitch v-model="draft.required" size="sm" :label="t(`${KEY}.required`)" />
+		<div class="flex items-center gap-2">
+			<UButton type="submit" size="xs" :disabled="!isPathValid">
+				{{ isNew ? t(`${KEY}.add`) : t(`${KEY}.save`) }}
+			</UButton>
+			<UButton
+				size="xs"
+				color="neutral"
+				variant="ghost"
+				@click="emit('cancel')"
+			>
+				{{ t(`${KEY}.cancel`) }}
+			</UButton>
+		</div>
+	</form>
+</template>

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { MergedVariable } from '../../utils/variables'
+import { variableTypeLabelKey } from '../../utils/variable-types'
+import VariablePath from '../VariablePath.vue'
+
+interface Props {
+	variable: MergedVariable
+}
+
+defineProps<Props>()
+const emit = defineEmits<{ insert: []; edit: []; remove: [] }>()
+
+const KEY = 'dms_mailing.editor.variables'
+
+const { t } = useI18n()
+</script>
+
+<template>
+	<div
+		class="border-default bg-default hover:border-primary/50 group flex flex-col gap-1 rounded-md border px-2 py-1.5 transition-colors"
+		:class="{ 'border-warning/50 bg-warning/5': variable.usage === 'detected' }"
+	>
+		<div class="flex items-center gap-2">
+			<button
+				type="button"
+				class="flex min-w-0 flex-1 items-center gap-1 text-left"
+				:title="`${t(`${KEY}.insert`)} · ${variable.path}`"
+				@click="emit('insert')"
+			>
+				<VariablePath
+					:path="variable.path"
+					class="text-[11.5px]"
+					:class="
+						variable.usage === 'unused'
+							? 'text-dimmed line-through'
+							: 'text-highlighted'
+					"
+				/>
+				<span v-if="variable.required" class="text-warning text-xs">*</span>
+			</button>
+			<span
+				v-if="variable.usage === 'declared'"
+				class="text-dimmed shrink-0 text-[10.5px]"
+			>
+				{{ t(variableTypeLabelKey(variable.type)) }}
+			</span>
+			<template v-if="variable.usage !== 'detected'">
+				<UButton
+					icon="i-ph-pencil-simple"
+					size="xs"
+					color="neutral"
+					variant="ghost"
+					square
+					class="opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
+					:aria-label="t(`${KEY}.edit`)"
+					@click="emit('edit')"
+				/>
+				<UButton
+					icon="i-ph-trash"
+					size="xs"
+					color="error"
+					variant="ghost"
+					square
+					class="opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"
+					:aria-label="t(`${KEY}.remove`)"
+					@click="emit('remove')"
+				/>
+			</template>
+		</div>
+		<div
+			v-if="variable.usage === 'detected'"
+			class="flex items-center justify-between gap-2"
+		>
+			<DmsStatusPill tone="warning" size="sm" :label="t(`${KEY}.undeclared`)" />
+			<UButton size="xs" variant="soft" color="warning" @click="emit('edit')">
+				{{ t(`${KEY}.declare_one`) }}
+			</UButton>
+		</div>
+		<DmsStatusPill
+			v-else-if="variable.usage === 'unused'"
+			tone="neutral"
+			size="sm"
+			class="self-start"
+			:label="t(`${KEY}.unused`)"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { VariableDefinition } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import {
+	countPathUsages,
+	inferVariableType,
+	mergeVariables,
+} from '../../utils/variables'
+import type { MergedVariable, VariableSubmission } from '../../utils/variables'
+import {
+	systemVariableChecks,
+	systemVariables,
+} from '../../utils/system-variables'
+
+interface VariableDraft {
+	original: string | null
+	/** The path the content uses, when the draft starts from a used one. */
+	usedPath: string | null
+	value: VariableDefinition
+}
+
+const KEY = 'dms_mailing.editor.variables'
+
+const { t } = useI18n()
+const { confirm } = useConfirm()
+const { editor, session } = useEditorContext()
+
+const merged = computed(() =>
+	mergeVariables(session.detected, editor.variables),
+)
+const systemVars = computed(() =>
+	systemVariables(editor.content, session.state.template.category),
+)
+const systemChecks = computed(() =>
+	systemVariableChecks(
+		editor.content,
+		session.state.template.category,
+		session.testData ?? {},
+	),
+)
+const draft = ref<VariableDraft | null>(null)
+
+const usageCount = computed(() =>
+	draft.value?.usedPath
+		? countPathUsages(editor.content, draft.value.usedPath)
+		: 0,
+)
+
+function startNew(path = ''): void {
+	draft.value = {
+		original: null,
+		usedPath: path || null,
+		value: {
+			path,
+			type: inferVariableType(editor.content, path),
+			required: false,
+		},
+	}
+}
+
+function edit(variable: MergedVariable): void {
+	if (variable.usage === 'detected') return startNew(variable.path)
+	draft.value = {
+		original: variable.path,
+		usedPath: variable.usage === 'unused' ? null : variable.path,
+		value: {
+			path: variable.path,
+			type: variable.type,
+			required: variable.required,
+		},
+	}
+}
+
+/**
+ * Declarations are part of the draft: the change autosaves with the content,
+ * undoes with it and reaches callers only once published.
+ */
+function save({ value, shouldReplaceInContent }: VariableSubmission): void {
+	const original = draft.value?.original
+	const usedPath = draft.value?.usedPath
+	const kept = editor.variables.filter(
+		(variable) => variable.path !== original && variable.path !== value.path,
+	)
+	const rename =
+		shouldReplaceInContent && usedPath
+			? { from: usedPath, to: value.path }
+			: undefined
+	editor.setVariables([...kept, value], rename)
+	draft.value = null
+}
+
+function isRemovalConfirmed(variable: MergedVariable): Promise<boolean> {
+	const count = countPathUsages(editor.content, variable.path)
+	if (count === 0) return Promise.resolve(true)
+	return confirm({
+		title: t(`${KEY}.remove_used_title`, { path: variable.path }),
+		description: t(`${KEY}.remove_used_description`, { count }, count),
+		color: 'error',
+	})
+}
+
+async function remove(variable: MergedVariable): Promise<void> {
+	if (!(await isRemovalConfirmed(variable))) return
+	editor.setVariables(
+		editor.variables.filter((entry) => entry.path !== variable.path),
+	)
+}
+
+function insert(path: string): void {
+	session.state.activeField?.insert(path)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<DmsEyebrow :label="t(`${KEY}.insert_hint`)" />
+		<p class="text-muted text-xs">{{ t(`${KEY}.draft_hint`) }}</p>
+
+		<p v-if="merged.length === 0" class="text-muted text-xs">
+			{{ t(`${KEY}.empty`) }}
+		</p>
+
+		<MailingEditorVariableRow
+			v-for="variable in merged"
+			:key="variable.path"
+			:variable="variable"
+			@insert="insert(variable.path)"
+			@edit="edit(variable)"
+			@remove="remove(variable)"
+		/>
+
+		<MailingEditorVariableForm
+			v-if="draft"
+			:value="draft.value"
+			:is-new="draft.original === null"
+			:used-path="draft.usedPath"
+			:usage-count="usageCount"
+			@save="save"
+			@cancel="draft = null"
+		/>
+		<UButton
+			v-else
+			size="sm"
+			color="neutral"
+			variant="outline"
+			icon="i-ph-plus"
+			block
+			class="mt-1"
+			@click="startNew()"
+		>
+			{{ t(`${KEY}.declare`) }}
+		</UButton>
+
+		<MailingSystemVariables
+			class="mt-3"
+			:variables="systemVars"
+			:checks="systemChecks"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {
+	EditorDevice,
+	PreviewMode,
+} from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const deviceItems = computed(() => [
+	{
+		value: 'desktop',
+		label: t('dms_mailing.editor.desktop'),
+		icon: 'i-ph-desktop',
+	},
+	{
+		value: 'mobile',
+		label: t('dms_mailing.editor.mobile'),
+		icon: 'i-ph-device-mobile',
+	},
+])
+
+const modeItems = computed(() => [
+	{
+		value: 'variables',
+		label: t('dms_mailing.editor.toolbar.mode_variables'),
+		icon: 'i-ph-brackets-curly',
+	},
+	{
+		value: 'data',
+		label: t('dms_mailing.editor.toolbar.mode_data'),
+		icon: 'i-ph-database',
+	},
+])
+
+const device = computed({
+	get: () => editor.device,
+	set: (value: string | number | undefined) =>
+		(editor.device = value as EditorDevice),
+})
+
+const mode = computed({
+	get: () => editor.previewMode,
+	set: (value: string | number | undefined) =>
+		(editor.previewMode = value as PreviewMode),
+})
+</script>
+
+<template>
+	<div class="flex items-center gap-2">
+		<UTooltip
+			:text="
+				editor.device === 'desktop'
+					? t('dms_mailing.editor.toolbar.desktop')
+					: t('dms_mailing.editor.toolbar.mobile')
+			"
+		>
+			<span class="inline-flex">
+				<DmsSegmented
+					v-model="device"
+					size="xs"
+					:items="deviceItems"
+					:aria-label="t('dms_mailing.editor.toolbar.device')"
+				/>
+			</span>
+		</UTooltip>
+		<DmsSegmented
+			v-model="mode"
+			size="xs"
+			:items="modeItems"
+			:aria-label="t('dms_mailing.editor.toolbar.mode')"
+		/>
+	</div>
+</template>