@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -1,186 +0,0 @@
-<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/EditorDataPanel.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useEditorContext } from '../../composables/useEditorContext'
-import { parseTestData } from '../../utils/testData'
-
-// Default permission of the mailing settings page (its fullId). The Vue layer
-// has no access to the server-side page registry, so it is spelled out here.
-const SETTINGS_PERMISSION = 'settings.mailing.settings'
-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

@@ -1,35 +0,0 @@
-<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/EditorRail.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { RailTab } from '../../composables/useTemplateEditor'
-import { useEditorContext } from '../../composables/useEditorContext'
-
-const TABS: RailTab[] = ['blocks', 'settings', 'template', 'data']
-
-const { t } = useI18n()
-const { editor } = useEditorContext()
-
-const items = computed(() =>
-	TABS.map((value) => ({
-		value,
-		label: t(`dms_mailing.editor.tabs.${value}`),
-	})),
-)
-
-const tab = computed({
-	get: () => editor.tab,
-	set: (value: string | number) => (editor.tab = value as RailTab),
-})
-</script>
-
-<template>
-	<div class="flex min-h-0 flex-1 flex-col">
-		<div class="border-default flex items-center gap-2 border-b p-2">
-			<UTabs
-				v-model="tab"
-				:items="items"
-				:content="false"
-				size="xs"
-				class="min-w-0 flex-1"
-			/>
-			<UButton
-				icon="i-ph-x"
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				:aria-label="t('dms_mailing.editor.toggle_rail')"
-				@click="editor.railOpen = false"
-			/>
-		</div>
-
-		<div class="min-h-0 flex-1 overflow-y-auto p-3">
-			<DmsMailingEditorPalette v-if="editor.tab === 'blocks'" />
-			<DmsMailingEditorDataPanel v-else-if="editor.tab === 'data'" />
-			<DmsMailingEditorTemplateSettings v-else-if="editor.tab === 'template'" />
-			<DmsMailingEditorSubjectSettings v-else-if="editor.subjectSelected" />
-			<DmsMailingEditorBlockSettings
-				v-else-if="editor.selected"
-				:block="editor.selected"
-			/>
-			<p v-else class="text-muted px-1 py-6 text-center text-xs">
-				{{ t('dms_mailing.editor.settings_hint') }}
-			</p>
-		</div>
-	</div>
-</template>

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

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useEditorContext } from '../../composables/useEditorContext'
-
-const { t } = useI18n()
-const { editor } = useEditorContext()
-
-const subject = computed({
-	get: () => editor.current?.subject ?? '',
-	set: (value: string) => editor.updateLocale({ subject: value }),
-})
-
-const preheader = computed({
-	get: () => editor.current?.preheader ?? '',
-	set: (value: string) => editor.updateLocale({ preheader: value }),
-})
-</script>
-
-<template>
-	<div class="flex flex-col gap-4">
-		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
-			{{ t('dms_mailing.editor.subject') }}
-		</p>
-
-		<UFormField
-			:label="t('dms_mailing.editor.subject')"
-			:help="t('dms_mailing.editor.subject_help')"
-			size="xs"
-		>
-			<UInput v-model="subject" class="w-full" />
-		</UFormField>
-
-		<UFormField :label="t('dms_mailing.editor.preheader')" size="xs">
-			<UInput v-model="preheader" class="w-full" />
-		</UFormField>
-	</div>
-</template>

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

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useEditorContext } from '../../composables/useEditorContext'
-import type { TemplateStatus } from '../../types/mailing'
-
-interface StatusAction {
-	action: 'publish' | 'unpublish' | 'archive'
-	icon: string
-}
-
-/** Status is not a free-form field: each transition has its own side effects. */
-const STATUS_ACTIONS: StatusAction[] = [
-	{ action: 'publish', icon: 'i-ph-rocket-launch' },
-	{ action: 'unpublish', icon: 'i-ph-eye-slash' },
-	{ action: 'archive', icon: 'i-ph-archive' },
-]
-
-const STATUS_COLOURS: Record<TemplateStatus, 'success' | 'neutral'> = {
-	live: 'success',
-	draft: 'neutral',
-	archived: 'neutral',
-}
-
-const { t } = useI18n()
-const { editor, template, name, category, runStatusAction } = useEditorContext()
-
-const statusLabel = computed(() =>
-	t(`dms_mailing.templates.status.${template.value.status}`),
-)
-
-function touchOnEdit(): void {
-	editor.touch()
-}
-</script>
-
-<template>
-	<div class="flex flex-col gap-4">
-		<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
-			{{ t('dms_mailing.editor.tabs.template') }}
-		</p>
-
-		<UFormField :label="t('dms_mailing.templates.cols.name')" size="xs">
-			<UInput v-model="name" class="w-full" @update:model-value="touchOnEdit" />
-		</UFormField>
-
-		<UFormField :label="t('dms_mailing.templates.cols.slug')" size="xs">
-			<UInput :model-value="template.slug" class="w-full font-mono" disabled />
-		</UFormField>
-
-		<UFormField :label="t('dms_mailing.templates.cols.category')" size="xs">
-			<DmsMailingCategoryInput
-				v-model="category"
-				@update:model-value="touchOnEdit"
-			/>
-		</UFormField>
-
-		<USeparator />
-
-		<section class="flex flex-col gap-2">
-			<p class="text-muted text-[11px] font-semibold uppercase tracking-wide">
-				{{ t('dms_mailing.templates.cols.status') }}
-			</p>
-			<UBadge
-				:color="STATUS_COLOURS[template.status]"
-				variant="subtle"
-				size="sm"
-				class="self-start"
-				:label="statusLabel"
-			/>
-			<div class="flex flex-wrap items-center gap-2">
-				<UButton
-					v-for="entry in STATUS_ACTIONS"
-					:key="entry.action"
-					size="xs"
-					variant="outline"
-					color="neutral"
-					:icon="entry.icon"
-					:label="t(`dms_mailing.templates.actions.${entry.action}`)"
-					@click="runStatusAction(entry.action)"
-				/>
-			</div>
-			<p class="text-muted text-[11px]">
-				{{ t('dms_mailing.editor.status_hint') }}
-			</p>
-		</section>
-	</div>
-</template>

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

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useEditorContext } from '../../composables/useEditorContext'
-import { parseTestData } from '../../utils/testData'
-
-const RECIPIENT_SEPARATOR = /[\s,;]+/
-
-const open = defineModel<boolean>('open', { required: true })
-
-const { t } = useI18n()
-const toast = useToast()
-const { editor, api, templateId, testData } = useEditorContext()
-
-const recipients = ref('')
-const sending = ref(false)
-
-const addresses = computed(() =>
-	recipients.value.split(RECIPIENT_SEPARATOR).filter(Boolean),
-)
-
-async function send(): Promise<void> {
-	sending.value = true
-	try {
-		await api.testSend(templateId, {
-			to: addresses.value,
-			locale: editor.locale,
-			content: editor.content,
-			data: parseTestData(testData.value) ?? undefined,
-		})
-		toast.add({
-			title: t('dms_mailing.editor.test_send_modal.sent'),
-			color: 'success',
-		})
-		open.value = false
-	} finally {
-		sending.value = false
-	}
-}
-</script>
-
-<template>
-	<UModal
-		v-model:open="open"
-		:title="t('dms_mailing.editor.test_send_modal.title')"
-	>
-		<template #body>
-			<UFormField :label="t('dms_mailing.editor.test_send_modal.recipients')">
-				<UInput
-					v-model="recipients"
-					class="w-full"
-					placeholder="a@example.com, b@example.com"
-				/>
-			</UFormField>
-		</template>
-		<template #footer>
-			<UButton
-				icon="i-ph-paper-plane-tilt"
-				:loading="sending"
-				:disabled="addresses.length === 0"
-				@click="send()"
-			>
-				{{ t('dms_mailing.editor.test_send_modal.send') }}
-			</UButton>
-		</template>
-	</UModal>
-</template>