@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useEditorContext } from '../../composables/useEditorContext'
+
+interface Props {
+	blockId: string
+	isFirst: boolean
+	isLast: boolean
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.actions'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+</script>
+
+<template>
+	<div
+		class="border-accented bg-elevated absolute -right-14 top-0 z-20 flex flex-col gap-px rounded-md border p-0.5 shadow-lg"
+		@click.stop
+	>
+		<UButton
+			class="mailing-drag-handle cursor-grab"
+			icon="i-ph-dots-six-vertical"
+			size="xs"
+			color="neutral"
+			variant="ghost"
+			square
+			:aria-label="t(`${KEY}.drag`)"
+		/>
+		<UButton
+			icon="i-ph-arrow-up"
+			size="xs"
+			color="neutral"
+			variant="ghost"
+			square
+			:disabled="isFirst"
+			:aria-label="t(`${KEY}.move_up`)"
+			@click="editor.moveBlockById(props.blockId, -1)"
+		/>
+		<UButton
+			icon="i-ph-arrow-down"
+			size="xs"
+			color="neutral"
+			variant="ghost"
+			square
+			:disabled="isLast"
+			:aria-label="t(`${KEY}.move_down`)"
+			@click="editor.moveBlockById(props.blockId, 1)"
+		/>
+		<UButton
+			icon="i-ph-copy"
+			size="xs"
+			color="neutral"
+			variant="ghost"
+			square
+			:aria-label="t(`${KEY}.duplicate`)"
+			@click="editor.duplicateBlockById(props.blockId)"
+		/>
+		<UButton
+			icon="i-ph-trash"
+			size="xs"
+			color="error"
+			variant="ghost"
+			square
+			:aria-label="t(`${KEY}.delete`)"
+			@click="editor.removeBlockById(props.blockId)"
+		/>
+	</div>
+</template>

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

@@ -1,91 +1,126 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { PreviewResponse } from '../../types/mailing'
+import { computed, nextTick, provide, ref, watch } from 'vue'
 import { useEditorContext } from '../../composables/useEditorContext'
-import { parseTestData } from '../../utils/testData'
+import { useEditorAnnouncements } from '../../composables/useEditorAnnouncements'
+import { TOKEN_DATA_KEY } from '../../utils/tokens'
+import type { TokenData } from '../../utils/tokens'
+import { emailLogoUrl } from '#dms-layout/app/emails/components/index'
 
-const DESKTOP_WIDTH = 600
-const MOBILE_WIDTH = 380
-const MOBILE_DEVICE = 'mobile'
+const DEVICE_WIDTHS: Record<string, number> = {
+	desktop: 600,
+	mobile: 380,
+}
+/** The e-mail's font stack (`emailStyles.main`), so the paper reads like the mail. */
+const EMAIL_FONT =
+	"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+const SCROLL_OPTIONS: ScrollIntoViewOptions = {
+	block: 'nearest',
+	behavior: 'smooth',
+}
+
+/** The DMS app config the e-mail logo is read from. */
+interface EmailBrandingConfig {
+	branding?: { logo?: { default?: { light?: string } } }
+}
 
 const { t } = useI18n()
-const { editor, templateId, testData, preview } = useEditorContext()
+const { editor, session } = useEditorContext()
+useEditorAnnouncements(editor)
+
+/**
+ * The logo header the sent e-mail carries, when it can carry one: the check
+ * `EmailLayout` runs with `publicLogoOnly`.
+ */
+const logoUrl = emailLogoUrl(
+	(useDmsAppConfig() as EmailBrandingConfig).branding?.logo?.default?.light,
+	useDmsRuntimeConfig().public.dms?.clientBaseUrl ?? '',
+)
+
+const canvas = ref<HTMLElement | null>(null)
+const lastValidData = ref<Record<string, unknown>>({})
+
+const width = computed(() => `${DEVICE_WIDTHS[editor.device]}px`)
+const isTestDataInvalid = computed(
+	() => editor.isDataMode && session.testData === null,
+)
+const tokenData = computed<TokenData>(() =>
+	editor.isDataMode ? (session.testData ?? lastValidData.value) : null,
+)
 
-const width = computed(() =>
-	editor.device === MOBILE_DEVICE ? MOBILE_WIDTH : DESKTOP_WIDTH,
+watch(
+	() => session.testData,
+	(data) => {
+		if (data) lastValidData.value = data
+	},
+	{ immediate: true },
 )
-const previewData = computed(() => parseTestData(testData.value) ?? undefined)
 
-function onResolved(response: PreviewResponse): void {
-	preview.value = response
+function blockElement(id: string): HTMLElement | null {
+	return (
+		canvas.value?.querySelector<HTMLElement>(
+			`[data-block-id="${CSS.escape(id)}"]`,
+		) ?? null
+	)
 }
+
+async function revealSelectedBlock(id: string | null): Promise<void> {
+	if (!id) return
+	await nextTick()
+	const element = blockElement(id)
+	element?.scrollIntoView(SCROLL_OPTIONS)
+	if (document.activeElement === document.body)
+		element?.focus({ preventScroll: true })
+}
+
+watch(() => editor.selectedId, revealSelectedBlock)
+
+provide(TOKEN_DATA_KEY, tokenData)
 </script>
 
 <template>
-	<div
-		class="bg-elevated/60 min-w-0 flex-1 overflow-y-auto p-6"
+	<main
+		ref="canvas"
+		class="min-h-0 min-w-0 overflow-y-auto bg-[radial-gradient(circle_at_1px_1px,color-mix(in_srgb,var(--ui-text-highlighted)_7%,transparent)_1px,transparent_0)] bg-[length:18px_18px] px-6 pb-16 pt-7"
 		@click="editor.select(null)"
 	>
 		<div
-			class="mx-auto transition-all duration-200"
-			:style="{ width: `${width}px` }"
+			class="mx-auto max-w-full transition-[width] duration-200"
+			:style="{ width }"
 		>
-			<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()"
+			<UAlert
+				v-if="isTestDataInvalid"
+				color="warning"
+				variant="subtle"
+				icon="i-ph-warning"
+				class="mb-3"
+				:title="t('dms_mailing.editor.data.invalid_json_banner')"
+				:actions="[
+					{
+						label: t('dms_mailing.editor.inspector.data'),
+						color: 'warning',
+						variant: 'outline',
+						onClick: () => (editor.rightTab = 'data'),
+					},
+				]"
+				@click.stop
+			/>
+			<MailingEditorMissingLocale v-if="!editor.current" />
+			<template v-else>
+				<MailingEditorEnvelope />
+				<div
+					class="rounded-lg bg-white px-9 py-8 text-gray-900 shadow-xl"
+					:style="{ fontFamily: EMAIL_FONT }"
+					@click.stop="editor.select(null)"
 				>
-					<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"
+					<img
+						v-if="logoUrl"
+						:src="logoUrl"
+						alt=""
+						class="mx-auto mb-8 block h-[60px]"
 					/>
+					<MailingEditorBlockList :list="editor.current.blocks" />
 				</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>
+			</template>
 		</div>
-	</div>
+	</main>
 </template>

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

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+	PreviewResponse,
+	TemplateChange,
+	TemplateContent,
+} from '../../types/mailing'
+import { useMailingApi } from '../../composables/useMailingApi'
+import { describeChanges } from '../../utils/changes'
+
+interface Props {
+	templateId: string
+	locale: string
+	/** The workspace locales; the switch offers those either side carries. */
+	locales?: string[]
+	content: TemplateContent
+	publishedContent?: TemplateContent | null
+	changes?: TemplateChange[]
+	data?: Record<string, unknown>
+}
+
+type SideId = 'published' | 'draft'
+
+interface ComparedSide {
+	id: SideId
+	label: string
+	preview: PreviewResponse | null
+	preheader: string
+	/** Shown when the side renders another locale than the one asked. */
+	fallbackNote: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	locales: () => [],
+	publishedContent: null,
+	changes: () => [],
+	data: undefined,
+})
+
+const KEY = 'dms_mailing.editor.compare'
+const FRAME_SANDBOX = 'allow-same-origin'
+const INITIAL_FRAME_HEIGHT = 480
+
+const { t } = useI18n()
+const api = useMailingApi()
+
+const locale = ref(props.locale)
+const previews = ref<Record<SideId, PreviewResponse | null>>({
+	published: null,
+	draft: null,
+})
+const failed = ref(false)
+const heights = ref<Record<SideId, number>>({
+	published: INITIAL_FRAME_HEIGHT,
+	draft: INITIAL_FRAME_HEIGHT,
+})
+
+/** Fits a frame to its e-mail, so neither side scrolls on its own. */
+function fit(event: Event, side: SideId): void {
+	const body = (event.target as HTMLIFrameElement).contentDocument?.body
+	if (!body) return
+	const margin = Number.parseFloat(getComputedStyle(body).marginBottom) || 0
+	const height = Math.ceil(body.getBoundingClientRect().bottom + margin)
+	if (height) heights.value = { ...heights.value, [side]: height }
+}
+
+const localeItems = computed(() => {
+	const carried = new Set([
+		...Object.keys(props.content.locales),
+		...Object.keys(props.publishedContent?.locales ?? {}),
+	])
+	const ordered = [...props.locales, ...carried].filter((code) =>
+		carried.has(code),
+	)
+	return [...new Set(ordered)].map((code) => ({
+		label: code.toUpperCase(),
+		value: code,
+	}))
+})
+
+const lines = computed(() =>
+	describeChanges(
+		props.changes.filter((change) => change.locale === locale.value),
+		{ draft: props.content, published: props.publishedContent },
+		(key, params) => t(key, params ?? {}),
+	),
+)
+
+function fallbackNote(preview: PreviewResponse | null): string {
+	if (!preview || preview.locale === locale.value) return ''
+	return t(`${KEY}.fallback`, {
+		locale: locale.value.toUpperCase(),
+		fallback: preview.locale.toUpperCase(),
+	})
+}
+
+function preheaderOf(
+	content: TemplateContent | null,
+	preview: PreviewResponse | null,
+): string {
+	return preview ? (content?.locales[preview.locale]?.preheader ?? '') : ''
+}
+
+const sides = computed<ComparedSide[]>(() => {
+	const { published, draft } = previews.value
+	return [
+		{
+			id: 'published',
+			label: t(`${KEY}.live`),
+			preview: published,
+			preheader: preheaderOf(props.publishedContent, published),
+			fallbackNote: fallbackNote(published),
+		},
+		{
+			id: 'draft',
+			label: t(`${KEY}.draft`),
+			preview: draft,
+			preheader: preheaderOf(props.content, draft),
+			fallbackNote: fallbackNote(draft),
+		},
+	]
+})
+
+async function load(): Promise<void> {
+	const base = { locale: locale.value, data: props.data }
+	failed.value = false
+	previews.value = { published: null, draft: null }
+	try {
+		const [published, draft] = await Promise.all([
+			api.preview(props.templateId, { ...base, version: 'published' }),
+			api.preview(props.templateId, { ...base, content: props.content }),
+		])
+		previews.value = { published, draft }
+	} catch {
+		failed.value = true
+	}
+}
+
+watch(locale, load, { immediate: true })
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center gap-3">
+			<UTabs
+				v-if="localeItems.length > 1"
+				v-model="locale"
+				:items="localeItems"
+				:content="false"
+				size="xs"
+			/>
+			<ul
+				v-if="lines.length"
+				class="text-muted flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs"
+			>
+				<li
+					v-for="line in lines"
+					:key="line.key"
+					class="flex items-center gap-1"
+				>
+					<UIcon :name="line.icon" class="text-primary size-3.5 shrink-0" />
+					{{ line.text }}
+				</li>
+			</ul>
+		</div>
+
+		<DmsEmptyState
+			v-if="failed"
+			variant="error"
+			size="sm"
+			:title="t(`${KEY}.error`)"
+		/>
+		<div v-else class="grid gap-4 md:grid-cols-2">
+			<section
+				v-for="side in sides"
+				:key="side.id"
+				class="flex min-w-0 flex-col gap-2"
+			>
+				<div class="flex min-w-0 flex-col gap-0.5">
+					<div class="flex items-center gap-2">
+						<DmsEyebrow :label="side.label" />
+						<span
+							v-if="side.preview"
+							class="text-highlighted min-w-0 truncate text-xs font-medium"
+						>
+							{{ side.preview.subject }}
+						</span>
+					</div>
+					<span v-if="side.preheader" class="text-muted truncate text-xs">
+						{{ side.preheader }}
+					</span>
+					<span v-if="side.fallbackNote" class="text-warning text-xs">
+						{{ side.fallbackNote }}
+					</span>
+				</div>
+				<div class="border-default overflow-hidden rounded-md border">
+					<iframe
+						v-if="side.preview"
+						:srcdoc="side.preview.html"
+						:sandbox="FRAME_SANDBOX"
+						:title="side.label"
+						class="block w-full border-0 bg-white"
+						:style="{ height: `${heights[side.id]}px` }"
+						@load="fit($event, side.id)"
+					/>
+					<USkeleton v-else class="h-[60vh] w-full" />
+				</div>
+			</section>
+		</div>
+	</div>
+</template>

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

@@ -5,28 +5,34 @@ import { useEditorContext } from '../../composables/useEditorContext'
 import {
 	OPERATORS,
 	OPERATORS_WITH_VALUE,
-	compileCondition,
+	evaluateCondition,
 } from '../../utils/conditions'
-import { collectPaths } from '../../utils/paths'
 
-const CLOSING_TAG = '{{/if}}'
+type ConditionOutcome = 'branch' | 'visibility'
 
 interface Props {
 	condition: Condition
+	outcome: ConditionOutcome
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<{ update: [Condition] }>()
 
+const KEY = 'dms_mailing.editor.condition'
+
 const { t } = useI18n()
-const { editor, variables } = useEditorContext()
+const { editor, session } = useEditorContext()
 
-const fieldOptions = computed(() =>
-	collectPaths(
-		variables.value.map((variable) => variable.path),
-		editor.current?.blocks ?? [],
-		props.condition.path,
-	),
+const pathItems = computed(() =>
+	[
+		...new Set([
+			...editor.variables.map((variable) => variable.path),
+			...session.detected,
+			props.condition.path,
+		]),
+	]
+		.filter(Boolean)
+		.sort(),
 )
 
 const operatorItems = computed(() =>
@@ -39,50 +45,54 @@ const operatorItems = computed(() =>
 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 evaluation = computed(() => {
+	if (!session.testData) return null
+	const result = evaluateCondition(props.condition, session.testData)
+	return t(`${KEY}.eval_${props.outcome}_${result}`)
 })
 
-const value = computed({
-	get: () => props.condition.value,
-	set: (next: string) => emit('update', { ...props.condition, value: next }),
-})
+function update(patch: Partial<Condition>): void {
+	emit('update', { ...props.condition, ...patch })
+}
 </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
+		<USelectMenu
+			:model-value="condition.path"
+			:items="pathItems"
+			create-item
+			icon="i-ph-brackets-curly"
+			class="w-full font-mono"
+			size="sm"
+			:aria-label="t(`${KEY}.field`)"
+			@update:model-value="update({ path: String($event) })"
+			@create="update({ path: String($event) })"
+		/>
+		<div class="grid grid-cols-2 gap-2">
+			<USelect
+				:model-value="condition.operator"
+				:items="operatorItems"
+				size="sm"
+				:aria-label="t(`${KEY}.operator`)"
+				@update:model-value="update({ operator: $event as ConditionOperator })"
 			/>
-		</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
+				:model-value="needsValue ? condition.value : ''"
+				size="sm"
+				:disabled="!needsValue"
+				:placeholder="needsValue ? t(`${KEY}.value`) : t(`${KEY}.no_value`)"
+				:aria-label="t(`${KEY}.value`)"
+				@update:model-value="update({ value: String($event) })"
+			/>
+		</div>
+		<p
+			v-if="evaluation"
+			class="text-muted flex items-center gap-1.5 font-mono text-[11px]"
 		>
-			<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>
+			<UIcon name="i-ph-database" class="size-3.5 shrink-0" />
+			{{ evaluation }}
+		</p>
 	</div>
 </template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Condition, IfBlock } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+interface Props {
+	block: IfBlock
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.condition'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const elseCount = computed(() => props.block.elseChildren?.length ?? 0)
+
+const hasElse = computed({
+	get: () => Boolean(props.block.elseChildren),
+	set: (value: boolean) => editor.setElse(props.block.id, value),
+})
+
+function update(condition: Condition): void {
+	editor.updateBlock(props.block.id, { condition } as Partial<IfBlock>)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div
+			class="border-warning/40 bg-warning/10 flex flex-col gap-2 rounded-lg border p-3"
+		>
+			<p class="text-highlighted text-[13px] font-medium">
+				{{ t(`${KEY}.first_branch_if`) }}
+			</p>
+			<MailingEditorConditionFields
+				:condition="block.condition"
+				outcome="branch"
+				@update="update"
+			/>
+		</div>
+
+		<USwitch
+			v-model="hasElse"
+			:label="t(`${KEY}.else_branch`)"
+			:description="
+				hasElse
+					? t(`${KEY}.else_count`, { count: elseCount }, elseCount)
+					: t(`${KEY}.else_off`)
+			"
+		/>
+	</div>
+</template>