@antelopejs/dms-mailing 0.2.2

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

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block, Condition, TextAlign } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { fieldsFor } from '../../utils/blocks'
+import { collectPaths } from '../../utils/paths'
+
+const MIN_SIZE = 12
+const MAX_SIZE = 48
+const TEXT_FIELD_KEY = 'text'
+const ALIGNMENTS: TextAlign[] = ['left', 'center', 'right']
+const ALIGN_ICONS: Record<TextAlign, string> = {
+	left: 'i-ph-text-align-left',
+	center: 'i-ph-text-align-center',
+	right: 'i-ph-text-align-right',
+}
+
+interface Props {
+	block: Block
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const { editor, variables } = useEditorContext()
+
+const fields = computed(() => fieldsFor(props.block.type))
+const values = computed(() => props.block as unknown as Record<string, unknown>)
+
+const alignItems = ALIGNMENTS.map((value) => ({
+	value,
+	label: value,
+	icon: ALIGN_ICONS[value],
+}))
+
+function patch(key: string, value: unknown): void {
+	editor.updateBlock(props.block.id, { [key]: value } as Partial<Block>)
+}
+
+function firstPath(): string {
+	return (
+		collectPaths(
+			variables.value.map((variable) => variable.path),
+			editor.current?.blocks ?? [],
+		)[0] ?? ''
+	)
+}
+
+function enableVisibleIf(): void {
+	patch('visibleIf', {
+		path: firstPath(),
+		operator: 'truthy',
+		value: '',
+	} satisfies Condition)
+}
+
+function appendToken(path: string): void {
+	const current = values.value[TEXT_FIELD_KEY]
+	if (typeof current !== 'string') return
+	patch(TEXT_FIELD_KEY, `${current} {{${path}}}`)
+}
+
+function remove(): void {
+	editor.select(null)
+	editor.removeBlockById(props.block.id)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+			{{ t(`dms_mailing.blocks.${props.block.type}`) }}
+		</p>
+
+		<UFormField
+			v-for="field in fields"
+			:key="field.key"
+			:label="t(field.label)"
+			size="xs"
+		>
+			<UTextarea
+				v-if="field.kind === 'textarea'"
+				:model-value="String(values[field.key] ?? '')"
+				class="w-full"
+				:rows="3"
+				@update:model-value="patch(field.key, $event)"
+			/>
+			<DmsSegmented
+				v-else-if="field.kind === 'align'"
+				:model-value="String(values[field.key] ?? 'left')"
+				:items="alignItems"
+				size="xs"
+				:aria-label="t(field.label)"
+				@update:model-value="patch(field.key, $event)"
+			/>
+			<USlider
+				v-else-if="field.kind === 'size'"
+				:model-value="Number(values[field.key] ?? MIN_SIZE)"
+				:min="MIN_SIZE"
+				:max="MAX_SIZE"
+				@update:model-value="patch(field.key, $event)"
+			/>
+			<UInput
+				v-else
+				:model-value="String(values[field.key] ?? '')"
+				class="w-full"
+				@update:model-value="patch(field.key, $event)"
+			/>
+			<template v-if="field.help" #help>
+				{{ t(`dms_mailing.editor.block_settings.${field.help}`) }}
+			</template>
+		</UFormField>
+
+		<template v-if="props.block.type === 'if'">
+			<USeparator />
+			<DmsMailingEditorConditionFields
+				:condition="props.block.condition"
+				@update="patch('condition', $event)"
+			/>
+			<UButton
+				v-if="!props.block.elseChildren"
+				size="xs"
+				variant="outline"
+				color="neutral"
+				icon="i-ph-git-fork"
+				@click="editor.addElse(props.block.id)"
+			>
+				{{ t('dms_mailing.editor.condition.add_else') }}
+			</UButton>
+		</template>
+
+		<USeparator />
+
+		<section class="flex flex-col gap-2">
+			<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+				{{ t('dms_mailing.editor.groups.conditional') }}
+			</p>
+			<template v-if="props.block.visibleIf">
+				<DmsMailingEditorConditionFields
+					:condition="props.block.visibleIf"
+					@update="patch('visibleIf', $event)"
+				/>
+				<UButton
+					size="xs"
+					variant="link"
+					color="neutral"
+					class="self-start"
+					@click="patch('visibleIf', null)"
+				>
+					{{ t('dms_mailing.editor.block_settings.always_show') }}
+				</UButton>
+			</template>
+			<template v-else>
+				<UButton
+					size="xs"
+					variant="outline"
+					color="neutral"
+					icon="i-ph-funnel"
+					@click="enableVisibleIf()"
+				>
+					{{ t('dms_mailing.editor.block_settings.only_if') }}
+				</UButton>
+				<p class="text-muted text-[11px]">
+					{{ t('dms_mailing.editor.block_settings.conditional_help') }}
+				</p>
+			</template>
+		</section>
+
+		<USeparator />
+
+		<DmsMailingEditorVariables @insert="appendToken" />
+
+		<USeparator />
+
+		<UButton
+			color="error"
+			variant="soft"
+			size="xs"
+			icon="i-ph-trash"
+			block
+			@click="remove()"
+		>
+			{{ t('dms_mailing.editor.block_settings.delete_block') }}
+		</UButton>
+	</div>
+</template>

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PreviewResponse } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { parseTestData } from '../../utils/testData'
+
+const DESKTOP_WIDTH = 600
+const MOBILE_WIDTH = 380
+const MOBILE_DEVICE = 'mobile'
+
+const { t } = useI18n()
+const { editor, templateId, testData, preview } = useEditorContext()
+
+const width = computed(() =>
+	editor.device === MOBILE_DEVICE ? MOBILE_WIDTH : DESKTOP_WIDTH,
+)
+const previewData = computed(() => parseTestData(testData.value) ?? undefined)
+
+function onResolved(response: PreviewResponse): void {
+	preview.value = response
+}
+</script>
+
+<template>
+	<div
+		class="bg-elevated/60 min-w-0 flex-1 overflow-y-auto p-6"
+		@click="editor.select(null)"
+	>
+		<div
+			class="mx-auto transition-all duration-200"
+			:style="{ width: `${width}px` }"
+		>
+			<div
+				class="border-default bg-default mb-3 overflow-hidden rounded-lg border text-sm"
+			>
+				<button
+					type="button"
+					class="border-default flex w-full items-center gap-2 border-b px-3 py-2 text-left transition"
+					:class="{ 'ring-primary ring-2 ring-inset': editor.subjectSelected }"
+					@click.stop="editor.selectSubject()"
+				>
+					<span class="text-muted w-20 shrink-0 text-xs">
+						{{ t('dms_mailing.editor.subject') }}
+					</span>
+					<DmsMailingTokenText
+						:text="editor.current?.subject"
+						class="truncate font-medium"
+					/>
+				</button>
+				<div class="flex items-center gap-2 px-3 py-2">
+					<span class="text-muted w-20 shrink-0 text-xs">
+						{{ t('dms_mailing.editor.preheader') }}
+					</span>
+					<DmsMailingTokenText
+						:text="editor.current?.preheader"
+						class="text-muted truncate"
+					/>
+				</div>
+			</div>
+
+			<DmsMailingTemplatePreviewFrame
+				v-if="editor.previewMode"
+				class="border-default rounded-lg border shadow"
+				:template-id="templateId"
+				:locale="editor.locale"
+				:content="editor.content"
+				:data="previewData"
+				:width="width"
+				@resolved="onResolved"
+			/>
+
+			<div
+				v-else
+				class="rounded-lg bg-white p-6 shadow"
+				@click.stop="editor.select(null)"
+			>
+				<DmsMailingEditorBlockList
+					v-if="editor.current"
+					:list="editor.current.blocks"
+				/>
+				<button
+					type="button"
+					class="hover:border-primary hover:text-primary mt-3 w-full rounded-md border border-dashed border-gray-300 py-2 text-xs text-gray-400 transition"
+					@click.stop="editor.tab = 'blocks'"
+				>
+					+ {{ t('dms_mailing.editor.add_block') }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Condition, ConditionOperator } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import {
+	OPERATORS,
+	OPERATORS_WITH_VALUE,
+	compileCondition,
+} from '../../utils/conditions'
+import { collectPaths } from '../../utils/paths'
+
+const CLOSING_TAG = '{{/if}}'
+
+interface Props {
+	condition: Condition
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ update: [Condition] }>()
+
+const { t } = useI18n()
+const { editor, variables } = useEditorContext()
+
+const fieldOptions = computed(() =>
+	collectPaths(
+		variables.value.map((variable) => variable.path),
+		editor.current?.blocks ?? [],
+		props.condition.path,
+	),
+)
+
+const operatorItems = computed(() =>
+	OPERATORS.map((value) => ({
+		value,
+		label: t(`dms_mailing.editor.operators.${value}`),
+	})),
+)
+
+const needsValue = computed(() =>
+	OPERATORS_WITH_VALUE.includes(props.condition.operator),
+)
+const compiled = computed(() => compileCondition(props.condition))
+
+const path = computed({
+	get: () => props.condition.path,
+	set: (value: string) => emit('update', { ...props.condition, path: value }),
+})
+
+const operator = computed({
+	get: () => props.condition.operator,
+	set: (value: ConditionOperator) =>
+		emit('update', { ...props.condition, operator: value }),
+})
+
+const value = computed({
+	get: () => props.condition.value,
+	set: (next: string) => emit('update', { ...props.condition, value: next }),
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<UFormField :label="t('dms_mailing.editor.condition.field')" size="xs">
+			<USelectMenu
+				v-model="path"
+				class="w-full"
+				:items="fieldOptions"
+				create-item
+			/>
+		</UFormField>
+
+		<UFormField :label="t('dms_mailing.editor.condition.operator')" size="xs">
+			<USelect v-model="operator" class="w-full" :items="operatorItems" />
+		</UFormField>
+
+		<UFormField
+			v-if="needsValue"
+			:label="t('dms_mailing.editor.condition.value')"
+			size="xs"
+		>
+			<UInput v-model="value" class="w-full" />
+		</UFormField>
+
+		<pre
+			class="bg-elevated text-muted overflow-x-auto rounded-md px-2 py-1.5 font-mono text-[10px]"
+			>{{ compiled }} … {{ CLOSING_TAG }}</pre>
+	</div>
+</template>

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { parseTestData } from '../../utils/testData'
+
+const SETTINGS_PERMISSION = 'mailing.settings.manage'
+const TEXTAREA_ROWS = 12
+
+const { t } = useI18n()
+const toast = useToast()
+const { hasPermission, refreshIfStale } = usePermissions()
+const { editor, api, templateId, testData, preview } = useEditorContext()
+
+const parsed = computed(() => parseTestData(testData.value))
+const missing = computed(() => preview.value?.missing ?? [])
+const canManageSettings = computed(() => hasPermission(SETTINGS_PERMISSION))
+
+const blockOnMissing = ref(false)
+const savingData = ref(false)
+
+const help = computed(() => {
+	if (!editor.previewMode) return t('dms_mailing.editor.data.help_off')
+	return parsed.value
+		? t('dms_mailing.editor.data.help_valid')
+		: t('dms_mailing.editor.data.help_invalid')
+})
+
+async function loadSettings(): Promise<void> {
+	await refreshIfStale()
+	if (!canManageSettings.value) return
+	const settings = await api.settings()
+	blockOnMissing.value = Boolean(settings.blockOnMissingVariables)
+}
+
+async function toggleBlockOnMissing(value: boolean): Promise<void> {
+	const settings = await api.settings()
+	await api.saveSettings({ ...settings, blockOnMissingVariables: value })
+	blockOnMissing.value = value
+}
+
+// The one action that owns the test-data state: it stores the set and puts the
+// preview into data mode. Nothing else turns data mode on.
+async function useDataSet(): Promise<void> {
+	const data = parsed.value
+	if (!data) return
+	savingData.value = true
+	try {
+		await api.saveTestData(templateId, data)
+		editor.previewMode = true
+		toast.add({ title: t('dms_mailing.editor.data.saved'), color: 'success' })
+	} finally {
+		savingData.value = false
+	}
+}
+
+onMounted(loadSettings)
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+			{{ t('dms_mailing.editor.data.title') }}
+		</p>
+
+		<UTextarea
+			v-model="testData"
+			class="w-full font-mono text-[11px]"
+			:rows="TEXTAREA_ROWS"
+		/>
+		<p
+			class="text-[11px]"
+			:class="editor.previewMode && !parsed ? 'text-error' : 'text-muted'"
+		>
+			{{ help }}
+		</p>
+
+		<UButton
+			size="xs"
+			icon="i-ph-eye"
+			class="self-start"
+			:loading="savingData"
+			:disabled="!parsed"
+			@click="useDataSet()"
+		>
+			{{ t('dms_mailing.editor.data.use') }}
+		</UButton>
+
+		<USeparator />
+
+		<section class="flex flex-col gap-2">
+			<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
+				{{ t('dms_mailing.editor.data.controls') }}
+			</p>
+
+			<DmsBanner
+				v-if="missing.length > 0"
+				color="warning"
+				icon="i-ph-warning"
+				:title="
+					t('dms_mailing.editor.data.uncovered', {
+						count: missing.length,
+						path: missing[0],
+					})
+				"
+			>
+				<template #description>
+					<ul class="flex flex-col gap-0.5 font-mono text-[11px]">
+						<li v-for="path in missing" :key="path">{{ path }}</li>
+					</ul>
+				</template>
+			</DmsBanner>
+			<p v-else class="text-muted text-[11px]">
+				{{ t('dms_mailing.editor.data.covered') }}
+			</p>
+
+			<UFormField
+				v-if="canManageSettings"
+				:label="t('dms_mailing.editor.data.block_on_missing')"
+				size="xs"
+			>
+				<USwitch
+					:model-value="blockOnMissing"
+					@update:model-value="toggleBlockOnMissing($event)"
+				/>
+			</UFormField>
+		</section>
+	</div>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useEditorContext } from '../../composables/useEditorContext'
+
+const { t } = useI18n()
+const { editor, template, discard } = useEditorContext()
+</script>
+
+<template>
+	<div
+		class="flex h-10 shrink-0 items-center gap-3 border-b border-amber-200 bg-gradient-to-r from-amber-50 to-amber-100/40 px-4 text-[12.5px] dark:border-amber-900/60 dark:from-amber-950/60 dark:to-amber-900/20"
+	>
+		<span class="size-2 shrink-0 animate-pulse rounded-full bg-amber-500" />
+		<span class="font-medium text-amber-900 dark:text-amber-200">
+			{{ t('dms_mailing.editor.unsaved', { count: editor.dirty }) }}
+		</span>
+
+		<UBadge variant="subtle" color="neutral" size="sm">
+			{{ editor.locale.toUpperCase() }}
+		</UBadge>
+		<UBadge variant="subtle" color="neutral" size="sm" class="font-mono">
+			{{ t('dms_mailing.editor.still_called', { slug: template.slug }) }}
+		</UBadge>
+
+		<UButton
+			class="ml-auto"
+			variant="ghost"
+			color="neutral"
+			size="xs"
+			icon="i-ph-arrow-counter-clockwise"
+			@click="discard()"
+		>
+			{{ t('dms_mailing.editor.discard') }}
+		</UButton>
+	</div>
+</template>

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { IfBlock } from '../../types/mailing'
+import type { InsertTarget } from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { compileCondition, describeCondition } from '../../utils/conditions'
+
+const SIM_TRUE = 'true'
+const SIM_FALSE = 'false'
+const CLOSING_TAG = '{{/if}}'
+const DIMMED_OPACITY = 0.4
+
+interface Props {
+	block: IfBlock
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const { editor, simulation } = useEditorContext()
+
+const description = computed(() =>
+	describeCondition(props.block.condition, (key: string) => t(key)),
+)
+const compiled = computed(() => compileCondition(props.block.condition))
+
+const thenTarget = computed<InsertTarget>(() => ({
+	parentId: props.block.id,
+	branch: 'children',
+}))
+const elseTarget = computed<InsertTarget>(() => ({
+	parentId: props.block.id,
+	branch: 'elseChildren',
+}))
+
+const takesThen = computed(() => simulation[props.block.id] !== false)
+
+const simItems = computed(() => [
+	{ value: SIM_TRUE, label: t('dms_mailing.editor.condition.simulate_true') },
+	{ value: SIM_FALSE, label: t('dms_mailing.editor.condition.simulate_false') },
+])
+
+const simulated = computed({
+	get: () => (takesThen.value ? SIM_TRUE : SIM_FALSE),
+	set: (value: string | number) => {
+		simulation[props.block.id] = value === SIM_TRUE
+	},
+})
+
+const opacityOf = (active: boolean) => ({
+	opacity: active ? 1 : DIMMED_OPACITY,
+})
+</script>
+
+<template>
+	<div
+		class="my-3 rounded-lg border border-dashed border-purple-400/70 bg-purple-50/50 p-3"
+	>
+		<div class="mb-2 flex items-center gap-2">
+			<UBadge color="secondary" variant="subtle" size="sm">
+				{{ t('dms_mailing.editor.condition.if') }}
+			</UBadge>
+			<code class="min-w-0 truncate font-mono text-[11px] text-purple-700">
+				{{ description }}
+			</code>
+			<DmsSegmented
+				v-model="simulated"
+				class="ml-auto shrink-0"
+				size="xs"
+				:items="simItems"
+				:aria-label="t('dms_mailing.editor.condition.compiled')"
+				@click.stop
+			/>
+		</div>
+
+		<div :style="opacityOf(takesThen)">
+			<DmsMailingEditorBlockList
+				:list="props.block.children"
+				:target="thenTarget"
+			/>
+		</div>
+
+		<template v-if="props.block.elseChildren">
+			<div class="my-2 flex items-center gap-2">
+				<UBadge color="neutral" variant="subtle" size="sm">
+					{{ t('dms_mailing.editor.condition.else') }}
+				</UBadge>
+				<UButton
+					class="ml-auto"
+					size="xs"
+					variant="ghost"
+					color="neutral"
+					icon="i-ph-x"
+					@click.stop="editor.removeElse(props.block.id)"
+				>
+					{{ t('dms_mailing.editor.condition.remove_else') }}
+				</UButton>
+			</div>
+			<div :style="opacityOf(!takesThen)">
+				<DmsMailingEditorBlockList
+					:list="props.block.elseChildren"
+					:target="elseTarget"
+				/>
+			</div>
+		</template>
+
+		<button
+			v-else
+			type="button"
+			class="mt-2 w-full rounded-md border border-dashed border-purple-300 py-2 text-xs text-purple-500 transition hover:border-purple-500 hover:text-purple-700"
+			@click.stop="editor.addElse(props.block.id)"
+		>
+			+ {{ t('dms_mailing.editor.condition.add_else') }}
+		</button>
+
+		<code class="mt-2 block font-mono text-[10px] text-purple-400">
+			{{ compiled }} … {{ CLOSING_TAG }}
+		</code>
+	</div>
+</template>