@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -1,62 +1,86 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useBlockContext } from '../../composables/useBlockContext'
 import { useEditorContext } from '../../composables/useEditorContext'
+import { localeLanguage, pickLocale } from '../../utils/locales'
 
-interface Props {
-	fallback: string
-}
-
-const props = defineProps<Props>()
+const KEY = 'dms_mailing.editor.missing_locale'
 
 const { t } = useI18n()
-const { editor } = useEditorContext()
+const { editor, session } = useEditorContext()
+const blockContext = useBlockContext()
+
+const locale = computed(() => editor.locale.toUpperCase())
+const present = computed(() => Object.keys(editor.content.locales))
+
+/** The workspace fallback is the locale missing: sends go to the first one carried. */
+const isFallbackMissing = computed(
+	() => editor.locale === session.state.fallbackLocale,
+)
+
+/** What a send asking for this locale gets today, as the server picks it. */
+const source = computed(() =>
+	pickLocale(present.value, editor.locale, session.state.fallbackLocale),
+)
+
+const affected = computed(() =>
+	(session.state.performance?.fallbacks ?? [])
+		.filter(
+			(entry) =>
+				localeLanguage(entry.requested) === localeLanguage(editor.locale),
+		)
+		.reduce((sum, entry) => sum + entry.count, 0),
+)
 
 const canDuplicate = computed(
-	() =>
-		props.fallback !== editor.locale &&
-		Boolean(editor.content.locales[props.fallback]),
+	() => source.value !== editor.locale && present.value.includes(source.value),
 )
+
+const description = computed(() => {
+	const params = {
+		locale: locale.value,
+		fallback: source.value.toUpperCase(),
+		first: source.value.toUpperCase(),
+		count: affected.value,
+	}
+	if (!present.value.length) return t(`${KEY}.no_locale`, params)
+	if (isFallbackMissing.value) return t(`${KEY}.fallback_is_missing`, params)
+	return affected.value > 0
+		? t(`${KEY}.affected`, params, affected.value)
+		: t(`${KEY}.hint`, params)
+})
+
+const actions = computed(() => [
+	...(canDuplicate.value
+		? [
+				{
+					label: t(`${KEY}.duplicate`, {
+						fallback: source.value.toUpperCase(),
+					}),
+					icon: 'i-ph-copy',
+					onClick: () => editor.createLocale(editor.locale, source.value),
+				},
+			]
+		: []),
+	{
+		label: t(`${KEY}.blank`),
+		color: 'neutral' as const,
+		variant: canDuplicate.value ? ('ghost' as const) : ('solid' as const),
+		onClick: () =>
+			editor.createLocale(editor.locale, undefined, blockContext()),
+	},
+])
 </script>
 
 <template>
-	<div class="bg-elevated/40 flex flex-1 items-center justify-center p-8">
-		<div class="flex max-w-sm flex-col items-center gap-3 text-center">
-			<UIcon name="i-ph-globe-hemisphere-west" class="text-muted size-10" />
-			<h2 class="text-base font-semibold">
-				{{
-					t('dms_mailing.editor.missing_locale.title', {
-						locale: editor.locale.toUpperCase(),
-					})
-				}}
-			</h2>
-			<p class="text-muted text-sm">
-				{{
-					t('dms_mailing.editor.missing_locale.hint', {
-						locale: editor.locale.toUpperCase(),
-						fallback: fallback.toUpperCase(),
-					})
-				}}
-			</p>
-			<div class="mt-1 flex items-center gap-2">
-				<UButton
-					v-if="canDuplicate"
-					icon="i-ph-copy"
-					@click="editor.createLocale(editor.locale, fallback)"
-				>
-					{{
-						t('dms_mailing.editor.missing_locale.duplicate', {
-							fallback: fallback.toUpperCase(),
-						})
-					}}
-				</UButton>
-				<UButton
-					variant="ghost"
-					color="neutral"
-					@click="editor.createLocale(editor.locale)"
-				>
-					{{ t('dms_mailing.editor.missing_locale.blank') }}
-				</UButton>
-			</div>
-		</div>
+	<div class="border-default bg-default shadow-xs mt-10 rounded-lg border">
+		<DmsEmptyState
+			icon="i-ph-globe-hemisphere-west"
+			tone="warning"
+			size="lg"
+			:title="t(`${KEY}.title_short`, { locale })"
+			:description="description"
+			:actions="actions"
+		/>
 	</div>
 </template>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { SETTINGS_PATH } from '../../utils/pages'
+import { computed, onMounted } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+const SETTINGS_PERMISSION = 'modules.mailing.configure.settings'
+const KEY = 'dms_mailing.editor'
+
+const { t } = useI18n()
+const { hasPermission, refreshIfStale } = usePermissions()
+const { session } = useEditorContext()
+
+const canManage = computed(() => hasPermission(SETTINGS_PERMISSION))
+
+const policy = computed(() =>
+	t(
+		session.state.blockOnMissingVariables
+			? `${KEY}.template_tab.subject_help_block`
+			: `${KEY}.template_tab.subject_help_send`,
+	),
+)
+
+onMounted(() => void refreshIfStale())
+</script>
+
+<template>
+	<p class="text-muted flex flex-wrap items-center gap-x-1.5 text-xs">
+		<UIcon name="i-ph-info" class="size-3.5 shrink-0" />
+		<span>{{ policy }}</span>
+		<UButton
+			v-if="canManage"
+			size="xs"
+			variant="link"
+			color="primary"
+			class="p-0"
+			trailing-icon="i-ph-arrow-up-right"
+			@click="navigateDms(SETTINGS_PATH)"
+		>
+			{{ t(`${KEY}.test_data.policy_link`) }}
+		</UButton>
+	</p>
+</template>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import type {
+	EditorNotice,
+	NoticeAction,
+	NoticeTone,
+} from '../../utils/lifecycle'
+import { noticeMomentOf, publishedMoment } from '../../utils/lifecycle'
+
+interface Props {
+	notice: EditorNotice
+}
+
+interface NoticeButton {
+	icon: string
+	labelKey: string
+	run: () => unknown
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.notice'
+
+const TONE_CLASSES: Record<NoticeTone, string> = {
+	primary: 'border-primary/30 from-primary/15 via-primary/5',
+	warning: 'border-warning/40 from-warning/15 via-warning/5',
+	error: 'border-error/40 from-error/15 via-error/5',
+}
+
+const TONE_ICONS: Record<NoticeTone, string> = {
+	primary: 'i-ph-shield-check',
+	warning: 'i-ph-eye-slash',
+	error: 'i-ph-warning',
+}
+
+const TONE_ICON_CLASSES: Record<NoticeTone, string> = {
+	primary: 'text-primary',
+	warning: 'text-warning',
+	error: 'text-error',
+}
+
+const { t, locale } = useI18n()
+const { session, actions } = useEditorContext()
+
+const BUTTONS: Record<NoticeAction, NoticeButton> = {
+	compare: {
+		icon: 'i-ph-columns',
+		labelKey: `${KEY}.compare`,
+		run: () => actions.compare(),
+	},
+	discard: {
+		icon: 'i-ph-arrow-counter-clockwise',
+		labelKey: `${KEY}.discard`,
+		run: () => actions.discard(),
+	},
+	reload: {
+		icon: 'i-ph-arrows-clockwise',
+		labelKey: 'dms_mailing.editor.conflict.reload',
+		run: () => actions.reload(),
+	},
+	overwrite: {
+		icon: 'i-ph-upload-simple',
+		labelKey: 'dms_mailing.editor.conflict.overwrite',
+		run: () => actions.overwrite(),
+	},
+	retry: {
+		icon: 'i-ph-arrows-clockwise',
+		labelKey: `${KEY}.retry`,
+		run: () => session.save(),
+	},
+	republish: {
+		icon: 'i-ph-rocket-launch',
+		labelKey: 'dms_mailing.editor.publish_review.republish',
+		run: () => actions.publish(),
+	},
+}
+
+const text = computed(() => {
+	const { state } = session
+	const moment = publishedMoment(
+		noticeMomentOf(props.notice.kind, state.template),
+		String(locale.value),
+	)
+	const count = state.changes.length
+	const params = {
+		version: state.version,
+		count,
+		slug: state.template.slug,
+		date: moment?.date ?? '',
+		time: moment?.time ?? '',
+	}
+	return t(`${KEY}.${props.notice.kind}`, params, count)
+})
+
+const buttons = computed(() =>
+	props.notice.actions.map((action) => ({ action, ...BUTTONS[action] })),
+)
+</script>
+
+<template>
+	<div
+		class="text-toned flex h-[38px] shrink-0 items-center gap-2.5 border-b bg-gradient-to-r to-transparent px-4 text-[12.5px]"
+		:class="TONE_CLASSES[notice.tone]"
+		:role="notice.tone === 'error' ? 'alert' : 'status'"
+	>
+		<UIcon
+			:name="TONE_ICONS[notice.tone]"
+			class="size-4 shrink-0"
+			:class="TONE_ICON_CLASSES[notice.tone]"
+		/>
+		<span class="min-w-0 truncate" :title="text">{{ text }}</span>
+		<div class="ml-auto flex shrink-0 items-center gap-1">
+			<UButton
+				v-for="button in buttons"
+				:key="button.action"
+				size="xs"
+				color="neutral"
+				variant="ghost"
+				:icon="button.icon"
+				@click="button.run()"
+			>
+				{{ t(button.labelKey, { version: session.state.version }) }}
+			</UButton>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { blockLabelKey, buildOutline } from '../../utils/blocks'
+import type { OutlineRow } from '../../utils/blocks'
+
+const INDENT_PX = 14
+const BASE_PADDING_PX = 8
+const LOGIC_TYPE = 'if'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const rows = computed(() => buildOutline(editor.current?.blocks ?? []))
+
+function labelOf(row: OutlineRow): string {
+	return row.kind === 'else'
+		? t('dms_mailing.editor.condition.else')
+		: t(blockLabelKey(row.type))
+}
+
+function isActive(row: OutlineRow): boolean {
+	return row.kind === 'block' && editor.selectedId === row.blockId
+}
+</script>
+
+<template>
+	<div v-if="rows.length" class="flex flex-col gap-px">
+		<button
+			v-for="row in rows"
+			:key="row.key"
+			type="button"
+			class="flex h-8 items-center gap-2 rounded-md pr-2 text-left text-[12.5px] transition-colors"
+			:class="
+				isActive(row)
+					? 'bg-primary/10 text-highlighted'
+					: 'text-toned hover:bg-elevated'
+			"
+			:style="{ paddingLeft: `${BASE_PADDING_PX + row.depth * INDENT_PX}px` }"
+			@click="editor.select(row.blockId)"
+		>
+			<UIcon
+				:name="row.icon"
+				class="size-3.5 shrink-0"
+				:class="
+					row.type === LOGIC_TYPE
+						? 'text-warning'
+						: isActive(row)
+							? 'text-primary'
+							: 'text-dimmed'
+				"
+			/>
+			<span class="shrink-0">{{ labelOf(row) }}</span>
+			<code
+				v-if="row.summary"
+				class="text-dimmed min-w-0 truncate font-mono text-[11px]"
+			>
+				{{ row.summary }}
+			</code>
+		</button>
+	</div>
+	<p v-else class="text-muted text-xs">
+		{{ t('dms_mailing.editor.outline.empty') }}
+	</p>
+</template>

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

@@ -1,62 +1,115 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable'
-import type { BlockType } from '../../types/mailing'
+import { computed, nextTick, ref, watch } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import { useEditorContext } from '../../composables/useEditorContext'
+import { useBlockContext } from '../../composables/useBlockContext'
 import {
 	BLOCK_PALETTE,
 	LOGIC_PALETTE,
-	PALETTE_GROUP,
-	cloneFromPalette,
+	filterPalette,
+	paletteLabelKey,
 } from '../../utils/blocks'
+import type { BlockContext, PaletteEntry } from '../../utils/blocks'
+
+interface PaletteGroup {
+	id: string
+	entries: PaletteEntry[]
+}
+
+interface FocusableInput {
+	inputRef?: HTMLInputElement
+}
+
+const KEY = 'dms_mailing.editor.palette'
 
 const { t } = useI18n()
 const { editor } = useEditorContext()
+const blockContext = useBlockContext()
+
+const query = ref('')
+const search = ref<(ComponentPublicInstance & FocusableInput) | null>(null)
+
+const labelOf = (entry: PaletteEntry): string => t(paletteLabelKey(entry.type))
 
-const groups = [
-	{ id: 'content', entries: BLOCK_PALETTE },
-	{ id: 'logic', entries: LOGIC_PALETTE },
-]
+const groups = computed<PaletteGroup[]>(() =>
+	[
+		{
+			id: 'content',
+			entries: filterPalette(BLOCK_PALETTE, query.value, labelOf),
+		},
+		{
+			id: 'logic',
+			entries: filterPalette(LOGIC_PALETTE, query.value, labelOf),
+		},
+	].filter((group) => group.entries.length > 0),
+)
 
-function add(type: BlockType): void {
+/** A tile dropped on the canvas gets what a clicked one gets. */
+const dropContext = (): BlockContext => ({
+	...blockContext(),
+	locale: editor.locale,
+})
+
+function add(entry: PaletteEntry): void {
 	if (!editor.current) return
-	editor.addBlock(type)
+	editor.addBlockUnderSelected(entry.type, blockContext())
+	query.value = ''
+}
+
+function addFirstMatch(): void {
+	const first = groups.value[0]?.entries[0]
+	if (first) add(first)
 }
+
+watch(
+	() => editor.isSearchRequested,
+	async (isRequested) => {
+		if (!isRequested) return
+		editor.isSearchRequested = false
+		await nextTick()
+		search.value?.inputRef?.focus()
+	},
+	{ immediate: true },
+)
 </script>
 
 <template>
 	<div class="flex flex-col gap-4">
-		<section v-for="group in groups" :key="group.id">
-			<p
-				class="text-muted mb-2 text-[11px] font-semibold uppercase tracking-wide"
-			>
-				{{ t(`dms_mailing.editor.groups.${group.id}`) }}
-			</p>
-			<draggable
-				:list="group.entries"
-				:group="PALETTE_GROUP"
-				:clone="cloneFromPalette"
-				:sort="false"
-				item-key="type"
-				class="grid grid-cols-2 gap-2"
-			>
-				<template #item="{ element }">
-					<button
-						type="button"
-						class="border-default bg-default hover:border-primary hover:text-primary flex cursor-grab items-center gap-2 rounded-md border px-2.5 py-2 text-left text-xs transition disabled:cursor-not-allowed disabled:opacity-50"
-						:disabled="!editor.current"
-						@click="add(element.type)"
-					>
-						<UIcon :name="element.icon" class="size-4 shrink-0" />
-						<span class="truncate">
-							{{ t(`dms_mailing.blocks.${element.type}`) }}
-						</span>
-					</button>
-				</template>
-			</draggable>
-		</section>
-
-		<p class="text-muted text-[11px]">
-			{{ t('dms_mailing.editor.palette.hint') }}
+		<UInput
+			ref="search"
+			v-model="query"
+			size="sm"
+			icon="i-ph-magnifying-glass"
+			:placeholder="t(`${KEY}.search`)"
+			:aria-label="t(`${KEY}.search`)"
+			class="w-full"
+			@keydown.enter.prevent="addFirstMatch()"
+			@keydown.escape.stop="query = ''"
+		>
+			<template #trailing>
+				<UKbd value="/" size="sm" />
+			</template>
+		</UInput>
+
+		<MailingEditorPaletteGroup
+			v-for="group in groups"
+			:key="group.id"
+			:title="t(`dms_mailing.editor.groups.${group.id}`)"
+			:entries="group.entries"
+			:disabled="!editor.current"
+			:block-context="dropContext"
+			@add="add"
+		/>
+
+		<p v-if="groups.length === 0" class="text-muted text-xs">
+			{{ t(`${KEY}.no_match`, { query }) }}
 		</p>
+
+		<div
+			class="border-default text-muted flex gap-2 rounded-lg border border-dashed p-3 text-xs leading-relaxed"
+		>
+			<UIcon name="i-ph-info" class="mt-0.5 size-3.5 shrink-0" />
+			<span>{{ t(`${KEY}.help`) }}</span>
+		</div>
 	</div>
 </template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import {
+	PALETTE_GROUP,
+	cloneFromPalette,
+	paletteLabelKey,
+} from '../../utils/blocks'
+import type { BlockContext, PaletteEntry } from '../../utils/blocks'
+
+interface Props {
+	title: string
+	entries: PaletteEntry[]
+	disabled?: boolean
+	/** What a tile dropped on the canvas borrows from the template. */
+	blockContext?: () => BlockContext
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+	blockContext: () => ({}),
+})
+const emit = defineEmits<{ add: [PaletteEntry] }>()
+
+const { t } = useI18n()
+
+const clone = (entry: PaletteEntry) =>
+	cloneFromPalette(entry, props.blockContext())
+</script>
+
+<template>
+	<section>
+		<DmsEyebrow :label="title" class="mb-2 block" />
+		<draggable
+			:list="entries"
+			:group="PALETTE_GROUP"
+			:clone="clone"
+			:sort="false"
+			:disabled="disabled"
+			item-key="type"
+			class="grid grid-cols-2 gap-1.5"
+		>
+			<template #item="{ element }">
+				<button
+					type="button"
+					class="border-default bg-default text-toned hover:border-primary/60 hover:text-highlighted group flex min-h-9 cursor-grab items-center gap-2 rounded-md border px-2.5 py-1 text-left text-xs transition disabled:cursor-not-allowed disabled:opacity-50"
+					:class="{ 'col-span-2': element.isWide }"
+					:disabled="disabled"
+					@click="emit('add', element)"
+				>
+					<UIcon
+						:name="element.icon"
+						class="size-4 shrink-0"
+						:class="
+							element.type === 'if'
+								? 'text-warning'
+								: 'text-dimmed group-hover:text-primary'
+						"
+					/>
+					<span class="line-clamp-2 min-w-0 leading-tight">
+						{{ t(paletteLabelKey(element.type)) }}
+					</span>
+				</button>
+			</template>
+		</draggable>
+	</section>
+</template>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { ChangeLine } from '../../utils/changes'
+import type { PublishReviewChoice } from '../../composables/useEditorActions'
+
+interface Props {
+	lines: ChangeLine[]
+	/** What refuses the publish (a blank subject); the button stays disabled. */
+	blockers?: string[]
+	warnings: string[]
+	nextVersion: number
+	currentVersion: number
+	/** Puts the current version live again rather than a new one. */
+	isRepublish?: boolean
+}
+
+withDefaults(defineProps<Props>(), { blockers: () => [], isRepublish: false })
+const emit = defineEmits<{ success: [PublishReviewChoice] }>()
+
+const KEY = 'dms_mailing.editor.publish_review'
+
+const { t } = useI18n()
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<ul v-if="lines.length" class="flex flex-col gap-2 text-[13px]">
+			<li v-for="line in lines" :key="line.key" class="text-toned flex gap-2">
+				<UIcon :name="line.icon" class="text-primary mt-0.5 size-4 shrink-0" />
+				<div class="flex min-w-0 flex-col gap-0.5">
+					<span>{{ line.text }}</span>
+					<span
+						v-if="line.before !== undefined"
+						class="text-muted line-clamp-2 text-xs"
+					>
+						<span class="line-through">{{ line.before }}</span>
+						→
+						<span class="text-highlighted">{{ line.after }}</span>
+					</span>
+				</div>
+			</li>
+		</ul>
+		<p v-else class="text-muted text-[13px]">
+			{{ t(`${KEY}.no_changes`, { version: currentVersion }) }}
+		</p>
+
+		<DmsBanner
+			v-if="blockers.length"
+			tone="error"
+			icon="i-ph-prohibit"
+			:title="t(`${KEY}.blockers`, { count: blockers.length }, blockers.length)"
+		>
+			<template #description>
+				<ul class="flex flex-col gap-1">
+					<li v-for="blocker in blockers" :key="blocker">{{ blocker }}</li>
+				</ul>
+			</template>
+		</DmsBanner>
+
+		<DmsBanner
+			v-if="warnings.length"
+			tone="warning"
+			icon="i-ph-warning"
+			:title="t(`${KEY}.checks`, { count: warnings.length }, warnings.length)"
+		>
+			<template #description>
+				<ul class="flex flex-col gap-1">
+					<li v-for="warning in warnings" :key="warning">{{ warning }}</li>
+				</ul>
+			</template>
+		</DmsBanner>
+
+		<div class="border-default -mx-1 flex items-center gap-2 border-t pt-4">
+			<UButton
+				color="neutral"
+				variant="ghost"
+				icon="i-ph-flask"
+				@click="emit('success', 'test')"
+			>
+				{{ t(`${KEY}.test_first`) }}
+			</UButton>
+			<UButton
+				class="ml-auto"
+				color="neutral"
+				variant="outline"
+				@click="emit('success', 'keep')"
+			>
+				{{ t(`${KEY}.keep_editing`) }}
+			</UButton>
+			<UButton
+				icon="i-ph-rocket-launch"
+				:disabled="blockers.length > 0"
+				@click="emit('success', 'publish')"
+			>
+				{{
+					t(isRepublish ? `${KEY}.republish` : `${KEY}.confirm`, {
+						version: nextVersion,
+					})
+				}}
+			</UButton>
+		</div>
+	</div>
+</template>