@antelopejs/dms-mailing 0.3.4 → 0.4.1

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { SUBJECT_RECOMMENDED_LENGTH } from '../../utils/lifecycle'
+
+const KEY = 'dms_mailing.editor.envelope'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const subject = computed(() => editor.current?.subject ?? '')
+const preheader = computed(() => editor.current?.preheader ?? '')
+const isTooLong = computed(
+	() => subject.value.length > SUBJECT_RECOMMENDED_LENGTH,
+)
+
+function openEnvelope(): void {
+	editor.select(null)
+	editor.rightTab = 'template'
+}
+</script>
+
+<template>
+	<div
+		class="border-default bg-default shadow-xs mb-3.5 grid grid-cols-[max-content_minmax(0,1fr)] overflow-hidden rounded-md border text-sm"
+	>
+		<button
+			type="button"
+			class="hover:bg-elevated/50 col-span-2 grid min-h-[38px] w-full grid-cols-subgrid items-center gap-x-2.5 px-3 text-left"
+			@click.stop="openEnvelope()"
+		>
+			<DmsEyebrow
+				:label="t(`${KEY}.subject`)"
+				class="min-w-[78px] whitespace-nowrap"
+			/>
+			<span class="flex min-w-0 items-center gap-2.5">
+				<MailingTokenText
+					v-if="subject"
+					:text="subject"
+					variant="ui"
+					class="text-highlighted min-w-0 truncate"
+				/>
+				<span v-else class="text-dimmed">{{ t(`${KEY}.subject_empty`) }}</span>
+				<span
+					class="ml-auto shrink-0 font-mono text-[11px]"
+					:class="isTooLong ? 'text-warning' : 'text-dimmed'"
+					:title="
+						t(`${KEY}.subject_length`, { max: SUBJECT_RECOMMENDED_LENGTH })
+					"
+				>
+					{{ subject.length }} / {{ SUBJECT_RECOMMENDED_LENGTH }}
+				</span>
+			</span>
+		</button>
+		<button
+			type="button"
+			class="border-default hover:bg-elevated/50 col-span-2 grid min-h-[38px] w-full grid-cols-subgrid items-center gap-x-2.5 border-t px-3 text-left"
+			@click.stop="openEnvelope()"
+		>
+			<DmsEyebrow
+				:label="t(`${KEY}.preheader`)"
+				class="min-w-[78px] whitespace-nowrap"
+			/>
+			<span class="flex min-w-0 items-center">
+				<MailingTokenText
+					v-if="preheader"
+					:text="preheader"
+					variant="ui"
+					class="text-muted min-w-0 truncate"
+				/>
+				<span v-else class="text-dimmed">
+					{{ t(`${KEY}.preheader_empty`) }}
+				</span>
+			</span>
+		</button>
+	</div>
+</template>

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

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } 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
+import { describeCondition, evaluateCondition } from '../../utils/conditions'
+import { TOKEN_DATA_KEY } from '../../utils/tokens'
 
 interface Props {
 	block: IfBlock
@@ -17,104 +12,59 @@ interface Props {
 const props = defineProps<Props>()
 
 const { t } = useI18n()
-const { editor, simulation } = useEditorContext()
+const { editor } = useEditorContext()
+const data = inject(TOKEN_DATA_KEY, null)
 
 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 evaluated = computed<boolean | null>(() =>
+	data?.value ? evaluateCondition(props.block.condition, data.value) : null,
+)
 
-const simulated = computed({
-	get: () => (takesThen.value ? SIM_TRUE : SIM_FALSE),
-	set: (value: string | number) => {
-		simulation[props.block.id] = value === SIM_TRUE
-	},
-})
+const takesThen = computed(
+	() => evaluated.value ?? editor.simulation[props.block.id] !== false,
+)
 
-const opacityOf = (active: boolean) => ({
-	opacity: active ? 1 : DIMMED_OPACITY,
-})
+function simulate(value: boolean): void {
+	editor.simulation[props.block.id] = value
+}
 </script>
 
 <template>
 	<div
-		class="my-3 rounded-lg border border-dashed border-purple-400/70 bg-purple-50/50 p-3"
+		class="relative my-1 rounded-lg border-[1.5px] border-dashed border-amber-600/55 bg-amber-100/35 px-2.5 pb-2 pt-7"
 	>
-		<div class="mb-2 flex items-center gap-2">
-			<UBadge color="secondary" variant="subtle" size="sm">
+		<div
+			class="absolute inset-x-2 top-1.5 flex items-center gap-1.5 font-mono text-[10.5px] font-semibold text-amber-800"
+		>
+			<span class="rounded bg-amber-600 px-1.5 py-px tracking-wider text-white">
 				{{ 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
+			</span>
+			<span class="min-w-0 truncate">{{ description }}</span>
+			<MailingEditorSimChip
+				class="ml-auto"
+				:value="takesThen"
+				:is-locked="evaluated !== null"
+				@update="simulate"
 			/>
 		</div>
 
-		<div :style="opacityOf(takesThen)">
-			<DmsMailingEditorBlockList
-				:list="props.block.children"
-				:target="thenTarget"
-			/>
+		<div :class="{ 'opacity-40': !takesThen }">
+			<MailingEditorBlockList :list="block.children" />
 		</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>
+		<template v-if="block.elseChildren">
+			<div
+				class="my-2.5 flex items-center gap-2 font-mono text-[10.5px] font-semibold text-amber-800/80"
+			>
+				{{ t('dms_mailing.editor.condition.else') }}
+				<span class="h-px flex-1 border-t border-dashed border-amber-600/45" />
 			</div>
-			<div :style="opacityOf(!takesThen)">
-				<DmsMailingEditorBlockList
-					:list="props.block.elseChildren"
-					:target="elseTarget"
-				/>
+			<div :class="{ 'opacity-40': takesThen }">
+				<MailingEditorBlockList :list="block.elseChildren" />
 			</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>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Block, BlockType } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { useBlockContext } from '../../composables/useBlockContext'
+
+interface Props {
+	list: Block[]
+	index: number
+	isEmpty?: boolean
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.canvas'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+const blockContext = useBlockContext()
+
+const isOpen = ref(false)
+
+function pick(type: BlockType): void {
+	editor.insertInto(props.list, props.index, type, blockContext())
+	isOpen.value = false
+}
+</script>
+
+<template>
+	<UPopover
+		v-model:open="isOpen"
+		:content="{ side: 'bottom', align: 'center' }"
+	>
+		<button
+			v-if="isEmpty"
+			type="button"
+			class="my-1 w-full rounded-md border border-dashed border-gray-300 py-3 text-xs text-gray-400 transition hover:border-cyan-500 hover:text-cyan-700"
+			@click.stop
+		>
+			+ {{ t(`${KEY}.add_here`) }}
+		</button>
+		<button
+			v-else
+			type="button"
+			class="group relative -mx-2 block h-2.5 w-[calc(100%+1rem)] cursor-pointer outline-none"
+			:aria-label="t(`${KEY}.insert`)"
+			@click.stop
+		>
+			<span
+				class="absolute inset-x-0 top-1 h-0.5 rounded bg-cyan-500 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+				:class="isOpen ? 'opacity-100' : 'opacity-0'"
+			/>
+			<span
+				class="absolute -top-1.5 left-1/2 grid size-[22px] -translate-x-1/2 place-items-center rounded-full bg-cyan-500 text-white ring-4 ring-white transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-focus-visible:ring-cyan-200"
+				:class="isOpen ? 'opacity-100' : 'opacity-0'"
+			>
+				<UIcon name="i-ph-plus" class="size-3.5" />
+			</span>
+		</button>
+		<template #content>
+			<MailingEditorBlockPicker @pick="pick" />
+		</template>
+	</UPopover>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RightTab } from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { openIssueCount, testDataChecks } from '../../utils/editor-checks'
+
+const KEY = 'dms_mailing.editor.inspector'
+
+const { t } = useI18n()
+const { editor, session } = useEditorContext()
+
+const checks = computed(() =>
+	testDataChecks({
+		variables: editor.variables,
+		detected: session.detected,
+		data: session.testData ?? {},
+		blocks: editor.current?.blocks ?? [],
+	}),
+)
+const issues = computed(() =>
+	session.testData ? openIssueCount(checks.value) : 1,
+)
+
+const items = computed(() => [
+	{ value: 'block', label: t(`${KEY}.block`) },
+	{
+		value: 'data',
+		label: t(`${KEY}.data`),
+		...(issues.value > 0
+			? {
+					badge: {
+						label: String(issues.value),
+						color: 'warning' as const,
+						variant: 'subtle' as const,
+					},
+				}
+			: {}),
+	},
+	{ value: 'template', label: t(`${KEY}.template`) },
+])
+
+const tab = computed({
+	get: () => editor.rightTab,
+	set: (value: string | number) => (editor.rightTab = value as RightTab),
+})
+</script>
+
+<template>
+	<aside class="border-default bg-elevated/30 flex min-h-0 flex-col border-l">
+		<UTabs
+			v-model="tab"
+			:items="items"
+			:content="false"
+			variant="link"
+			size="sm"
+			class="border-default shrink-0 border-b px-2"
+		/>
+		<div class="min-h-0 flex-1 overflow-y-auto p-4">
+			<template v-if="editor.rightTab === 'block'">
+				<MailingEditorBlockInspector
+					v-if="editor.selected"
+					:key="editor.selected.id"
+					:block="editor.selected"
+				/>
+				<DmsEmptyState
+					v-else
+					size="sm"
+					icon="i-ph-cursor-click"
+					:title="t(`${KEY}.empty_title`)"
+					:description="t(`${KEY}.empty_description`)"
+				/>
+			</template>
+			<MailingEditorTestDataPane
+				v-else-if="editor.rightTab === 'data'"
+				:checks="checks"
+			/>
+			<MailingEditorTemplatePane v-else />
+		</div>
+	</aside>
+</template>

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { LeftTab } from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+interface ShortcutEntry {
+	keys: string[]
+	label: string
+}
+
+const KEY = 'dms_mailing.editor.left'
+
+const SHORTCUTS: ShortcutEntry[] = [
+	{ keys: ['meta', 's'], label: 'shortcut_save' },
+	{ keys: ['meta', 'enter'], label: 'shortcut_publish' },
+	{ keys: ['T'], label: 'shortcut_test' },
+	{ keys: ['/'], label: 'shortcut_search' },
+	{ keys: ['backspace'], label: 'shortcut_delete' },
+	{ keys: ['meta', 'D'], label: 'shortcut_duplicate' },
+	{ keys: ['meta', 'Z'], label: 'shortcut_undo' },
+	{ keys: ['meta', 'shift', 'Z'], label: 'shortcut_redo' },
+	{ keys: ['escape'], label: 'shortcut_escape' },
+]
+
+const { t } = useI18n()
+const { editor, session } = useEditorContext()
+
+const variableCount = computed(
+	() =>
+		new Set([
+			...editor.variables.map((variable) => variable.path),
+			...session.detected,
+		]).size,
+)
+
+const items = computed(() => [
+	{ value: 'blocks', label: t(`${KEY}.blocks`) },
+	{ value: 'outline', label: t(`${KEY}.outline`) },
+	{
+		value: 'variables',
+		label: t(`${KEY}.variables`),
+		badge: {
+			label: String(variableCount.value),
+			color: 'neutral' as const,
+			variant: 'subtle' as const,
+		},
+	},
+])
+
+const tab = computed({
+	get: () => editor.leftTab,
+	set: (value: string | number) => (editor.leftTab = value as LeftTab),
+})
+</script>
+
+<template>
+	<aside class="border-default bg-elevated/30 flex min-h-0 flex-col border-r">
+		<UTabs
+			v-model="tab"
+			:items="items"
+			:content="false"
+			variant="link"
+			size="sm"
+			class="border-default shrink-0 border-b px-2"
+		/>
+		<div class="min-h-0 flex-1 overflow-y-auto p-3.5">
+			<MailingEditorPalette v-if="editor.leftTab === 'blocks'" />
+			<MailingEditorOutline v-else-if="editor.leftTab === 'outline'" />
+			<MailingEditorVariablesPane v-else />
+		</div>
+		<footer class="border-default shrink-0 border-t px-2 py-1.5">
+			<UPopover :content="{ side: 'top', align: 'start' }">
+				<UButton
+					icon="i-ph-keyboard"
+					size="xs"
+					color="neutral"
+					variant="ghost"
+					block
+					class="justify-start"
+				>
+					{{ t(`${KEY}.shortcuts`) }}
+				</UButton>
+				<template #content>
+					<ul
+						class="flex flex-col gap-1.5 p-3 text-xs"
+						:aria-label="t(`${KEY}.shortcuts`)"
+					>
+						<li
+							v-for="shortcut in SHORTCUTS"
+							:key="shortcut.label"
+							class="flex items-center justify-between gap-6"
+						>
+							<span class="text-muted">
+								{{ t(`${KEY}.${shortcut.label}`) }}
+							</span>
+							<MailingEditorShortcutHint :keys="shortcut.keys" />
+						</li>
+					</ul>
+				</template>
+			</UPopover>
+		</footer>
+	</aside>
+</template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import type { StatusKey } from '../../utils/lifecycle'
+import { lifecycleActions } from '../../utils/lifecycle'
+
+const KEY = 'dms_mailing.editor.lifecycle'
+const STATUS_TONES: Record<StatusKey, 'success' | 'neutral' | 'warning'> = {
+	live: 'success',
+	draft: 'neutral',
+	unpublished: 'warning',
+	archived: 'warning',
+}
+const NO_VALUE = '—'
+
+const { t, locale } = useI18n()
+const { session, actions } = useEditorContext()
+
+const status = computed(() => session.state.template.status)
+
+const stats = computed(() => {
+	const sends = session.state.performance?.sends
+	return [
+		{
+			eyebrow: t(`${KEY}.status`),
+			value: t(`dms_mailing.templates.status.${session.statusKey}`),
+			detailTone: STATUS_TONES[session.statusKey],
+		},
+		{
+			eyebrow: t(`${KEY}.version`),
+			value: session.state.version > 0 ? `v${session.state.version}` : NO_VALUE,
+		},
+		{
+			eyebrow: t(`${KEY}.sends`),
+			value:
+				sends === undefined
+					? NO_VALUE
+					: sends.toLocaleString(String(locale.value)),
+		},
+	]
+})
+
+const buttons = computed(() => lifecycleActions(status.value))
+</script>
+
+<template>
+	<div class="flex flex-col gap-3">
+		<DmsEyebrow :label="t(`${KEY}.title`)" />
+		<DmsStatGroup :items="stats" layout="joined" :columns="3" />
+		<div class="flex flex-wrap items-center gap-1.5">
+			<UButton
+				v-for="button in buttons"
+				:key="button.action"
+				size="sm"
+				:color="button.action === 'archive' ? 'warning' : 'neutral'"
+				:variant="button.action === 'archive' ? 'ghost' : 'outline'"
+				:icon="button.icon"
+				@click="actions.runLifecycle(button.action)"
+			>
+				{{ t(`${KEY}.${button.action}`) }}
+			</UButton>
+		</div>
+		<p class="text-muted text-xs">
+			{{ t(`${KEY}.refuse_warning`, { slug: session.state.template.slug }) }}
+		</p>
+	</div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+	<div class="flex flex-1 items-start justify-center p-10" aria-busy="true">
+		<div
+			class="border-default bg-default grid w-full max-w-md gap-3 rounded-lg border p-5"
+		>
+			<div class="flex items-center gap-3">
+				<USkeleton class="size-8 rounded-lg" />
+				<USkeleton class="h-3 w-40" />
+			</div>
+			<USkeleton class="h-9 rounded-lg" />
+			<USkeleton class="h-24 rounded-lg" />
+			<USkeleton class="h-3 w-4/5" />
+			<USkeleton class="h-3 w-3/5" />
+			<span class="text-dimmed font-mono text-[11px]">
+				{{ t('dms_mailing.editor.loading') }}
+			</span>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { pickLocale } from '../../utils/locales'
+
+interface LocaleItem {
+	code: string
+	isMissing: boolean
+}
+
+const { t } = useI18n()
+const { editor, session } = useEditorContext()
+
+const items = computed<LocaleItem[]>(() =>
+	editor.locales.map((code) => ({
+		code,
+		isMissing: editor.missingLocales.includes(code),
+	})),
+)
+
+function titleOf(item: LocaleItem): string | undefined {
+	if (!item.isMissing) return undefined
+	const present = Object.keys(editor.content.locales)
+	const fallback = pickLocale(present, item.code, session.state.fallbackLocale)
+	return t('dms_mailing.editor.toolbar.locale_missing', {
+		fallback: fallback.toUpperCase(),
+	})
+}
+</script>
+
+<template>
+	<div
+		role="radiogroup"
+		:aria-label="t('dms_mailing.editor.toolbar.locale')"
+		class="ring-default bg-(--dms-bg-muted) inline-flex h-6 items-center gap-0.5 rounded-lg p-0.5 ring ring-inset"
+	>
+		<button
+			v-for="item in items"
+			:key="item.code"
+			type="button"
+			role="radio"
+			:aria-checked="editor.locale === item.code"
+			:title="titleOf(item)"
+			class="inline-flex h-full items-center gap-1.5 rounded-[6px] px-[7px] font-mono text-[11.5px] transition-colors"
+			:class="
+				editor.locale === item.code
+					? 'text-highlighted ring-accented bg-(--dms-surface-card) shadow-xs font-semibold ring'
+					: 'text-muted hover:text-highlighted font-medium'
+			"
+			@click="editor.setLocale(item.code)"
+		>
+			<span
+				class="size-1.5 rounded-full"
+				:class="
+					item.isMissing ? 'ring-warning ring-1 ring-inset' : 'bg-success'
+				"
+			/>
+			{{ item.code.toUpperCase() }}
+		</button>
+	</div>
+</template>