@antelopejs/dms-mailing 0.2.2

package/frontend-vue/app/components/TestSendModal.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { SendResult } from '../composables/useMailingApi'
+import type {
+	TemplateContent,
+	TemplateRow,
+	TemplateStatus,
+} from '../types/mailing'
+
+interface TestSendModalProps {
+	templateId?: string
+	rowData?: TemplateRow
+	locale?: string
+	content?: TemplateContent
+	data?: Record<string, unknown>
+	/** `real` reaches actual recipients and counts in the business figures. */
+	mode?: SendMode
+	onSuccessCallback?: () => void
+}
+
+type SendMode = 'test' | 'real'
+
+const REAL_MODE: SendMode = 'real'
+const LIVE_STATUS: TemplateStatus = 'live'
+
+const MAX_RECIPIENTS = 5
+const RECIPIENT_SEPARATOR = ','
+
+const props = defineProps<TestSendModalProps>()
+
+const emit = defineEmits<{ success: [] }>()
+
+const api = useMailingApi()
+const toast = useToast()
+const { t } = useI18n()
+const { user } = useCurrentUser()
+const { uniqueLocales } = useUniqueLocales()
+
+const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+
+const localeItems = computed(() =>
+	uniqueLocales.value.map((entry) => ({
+		label: entry.name ?? entry.code,
+		value: entry.code,
+	})),
+)
+
+const isReal = computed(() => props.mode === REAL_MODE)
+const isDraft = computed(
+	() => Boolean(props.rowData) && props.rowData?.status !== LIVE_STATUS,
+)
+const confirmed = ref(false)
+
+const recipients = ref<string>(isReal.value ? '' : (user.value?.email ?? ''))
+const locale = ref<string>(props.locale ?? localeItems.value[0]?.value ?? '')
+const sending = ref(false)
+
+const addresses = computed(() =>
+	recipients.value
+		.split(RECIPIENT_SEPARATOR)
+		.map((address) => address.trim())
+		.filter(Boolean)
+		.slice(0, MAX_RECIPIENTS),
+)
+
+const canSend = computed(
+	() =>
+		addresses.value.length > 0 &&
+		!sending.value &&
+		!isDraft.value &&
+		(!isReal.value || confirmed.value),
+)
+
+function report(result: SendResult, index: number): void {
+	toast.add({
+		color: result.error ? 'error' : 'success',
+		title: addresses.value[index] ?? result.sendId,
+		description: result.error ?? t(`dms_mailing.sends.status.${result.status}`),
+	})
+}
+
+async function submit(): Promise<void> {
+	if (!canSend.value || !templateId.value) return
+	sending.value = true
+	try {
+		const response = isReal.value
+			? await api.realSend(templateId.value, {
+					to: addresses.value,
+					locale: locale.value,
+					data: props.data,
+				})
+			: await api.testSend(templateId.value, {
+					to: addresses.value,
+					locale: locale.value,
+					content: props.content,
+					data: props.data,
+				})
+		response.results.forEach(report)
+		props.onSuccessCallback?.()
+		emit('success')
+	} catch (error) {
+		toast.add({ color: 'error', title: String(error) })
+	} finally {
+		sending.value = false
+	}
+}
+</script>
+
+<template>
+	<UForm
+		:state="{ recipients, locale }"
+		class="flex flex-col gap-4"
+		@submit="submit"
+	>
+		<DmsBanner
+			v-if="isDraft"
+			color="warning"
+			icon="i-ph-warning"
+			:title="t('dms_mailing.errors.template_not_live')"
+			:description="t('dms_mailing.templates.send_modal.draft_hint')"
+		/>
+
+		<DmsBanner
+			v-else-if="isReal"
+			color="error"
+			icon="i-ph-paper-plane-tilt"
+			:title="t('dms_mailing.templates.send_modal.real_title')"
+			:description="t('dms_mailing.templates.send_modal.real_hint')"
+		/>
+
+		<UFormField
+			:label="t('dms_mailing.editor.test_send_modal.recipients')"
+			name="recipients"
+		>
+			<UInput v-model="recipients" class="w-full" autofocus />
+		</UFormField>
+
+		<UFormField :label="t('dms_mailing.sends.cols.locale')" name="locale">
+			<USelect v-model="locale" :items="localeItems" class="w-full" />
+		</UFormField>
+
+		<UCheckbox
+			v-if="isReal && !isDraft"
+			v-model="confirmed"
+			:label="t('dms_mailing.templates.send_modal.confirm')"
+		/>
+
+		<div class="flex justify-end">
+			<UButton
+				type="submit"
+				:color="isReal ? 'error' : 'primary'"
+				:label="
+					isReal
+						? t('dms_mailing.templates.send_modal.send')
+						: t('dms_mailing.editor.test_send_modal.send')
+				"
+				icon="i-ph-paper-plane-tilt"
+				:loading="sending"
+				:disabled="!canSend"
+			/>
+		</div>
+	</UForm>
+</template>

package/frontend-vue/app/components/TokenText.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { splitTokens } from '../utils/tokens'
+
+interface Props {
+	text?: string
+}
+
+const props = defineProps<Props>()
+
+const parts = computed(() => splitTokens(props.text ?? ''))
+</script>
+
+<template>
+	<span>
+		<template v-for="(part, index) in parts" :key="index">
+			<span
+				v-if="part.kind === 'token'"
+				class="bg-primary/10 text-primary rounded px-1 font-mono text-[.88em]"
+			>
+				{{ part.value }}
+			</span>
+			<template v-else>{{ part.value }}</template>
+		</template>
+	</span>
+</template>

package/frontend-vue/app/components/blocks/Button.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ButtonBlock } from '../../types/mailing'
+
+interface Props {
+	block: ButtonBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div class="mb-4" :style="{ textAlign: block.align }">
+		<span
+			class="inline-flex h-10 items-center rounded-md bg-gray-900 px-5 text-sm font-semibold text-white"
+		>
+			<DmsMailingTokenText :text="block.text" />
+		</span>
+	</div>
+</template>

package/frontend-vue/app/components/blocks/Code.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CodeBlock } from '../../types/mailing'
+
+interface Props {
+	block: CodeBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div
+		class="mb-4 rounded-lg border border-dashed border-gray-300 py-5 text-center font-mono text-[27px] tracking-[0.25em] text-gray-900"
+	>
+		<DmsMailingTokenText :text="block.text" />
+	</div>
+</template>

package/frontend-vue/app/components/blocks/Divider.vue

@@ -0,0 +1,3 @@
+<template>
+	<hr class="my-4 border-gray-200" />
+</template>

package/frontend-vue/app/components/blocks/Footer.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { FooterBlock } from '../../types/mailing'
+
+interface Props {
+	block: FooterBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div
+		class="mt-6 border-t border-gray-200 pt-4 text-center text-xs leading-relaxed text-gray-400"
+	>
+		<DmsMailingTokenText :text="block.text" />
+		<p class="mt-1">
+			<span class="underline">{{ block.unsubscribeLabel }}</span>
+			·
+			<span class="underline">{{ block.preferencesLabel }}</span>
+		</p>
+	</div>
+</template>

package/frontend-vue/app/components/blocks/Heading.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HeadingBlock } from '../../types/mailing'
+
+interface Props {
+	block: HeadingBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<h1
+		class="mb-3 font-semibold text-gray-900"
+		:style="{ textAlign: block.align, fontSize: `${block.size}px` }"
+	>
+		<DmsMailingTokenText :text="block.text" />
+	</h1>
+</template>

package/frontend-vue/app/components/blocks/Hero.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { HeroBlock } from '../../types/mailing'
+
+const TOKEN_OPEN = '{{'
+
+interface Props {
+	block: HeroBlock
+}
+
+const props = defineProps<Props>()
+
+const hasImage = computed(
+	() =>
+		Boolean(props.block.imageUrl) && !props.block.imageUrl.includes(TOKEN_OPEN),
+)
+</script>
+
+<template>
+	<img
+		v-if="hasImage"
+		:src="block.imageUrl"
+		:alt="block.alt"
+		class="mb-4 w-full rounded-lg object-cover"
+	/>
+	<div
+		v-else
+		class="mb-4 flex h-32 items-center justify-center rounded-lg bg-[repeating-linear-gradient(45deg,#eef0f3_0_7px,#f7f8fa_7px_14px)] text-xs text-gray-400"
+	>
+		<DmsMailingTokenText :text="block.imageUrl || block.alt" />
+	</div>
+</template>

package/frontend-vue/app/components/blocks/List.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ListBlock } from '../../types/mailing'
+
+interface Props {
+	block: ListBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div class="mb-4">
+		<table class="w-full border-collapse text-sm">
+			<tbody>
+				<tr
+					v-for="row in 2"
+					:key="row"
+					class="border-b border-gray-100 last:border-0"
+				>
+					<td class="py-2 text-gray-600">
+						<DmsMailingTokenText :text="`{{${block.labelPath}}}`" />
+					</td>
+					<td class="py-2 text-right font-medium text-gray-900">
+						<DmsMailingTokenText :text="`{{${block.valuePath}}}`" />
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<p class="mt-1 font-mono text-[10px] text-gray-400">
+			#each {{ block.source }}
+		</p>
+	</div>
+</template>

package/frontend-vue/app/components/blocks/Paragraph.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ParagraphBlock } from '../../types/mailing'
+
+interface Props {
+	block: ParagraphBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<p
+		class="mb-4 text-sm leading-relaxed text-gray-600"
+		:style="{ textAlign: block.align }"
+	>
+		<DmsMailingTokenText :text="block.text" />
+	</p>
+</template>

package/frontend-vue/app/components/blocks/Total.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { TotalBlock } from '../../types/mailing'
+
+interface Props {
+	block: TotalBlock
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div
+		class="mb-4 flex items-center justify-between border-t border-gray-200 pt-3 text-sm font-semibold text-gray-900"
+	>
+		<span>{{ block.label }}</span>
+		<DmsMailingTokenText :text="block.value" />
+	</div>
+</template>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+import type { Block } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import {
+	BLOCK_COMPONENT_NAMES,
+	duplicateBlock,
+	moveBlock,
+	removeBlock,
+} from '../../utils/blocks'
+
+interface Props {
+	block: Block
+	index: number
+	list: Block[]
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const selected = computed(() => editor.selected?.id === props.block.id)
+const renderer = computed(() =>
+	resolveComponent(BLOCK_COMPONENT_NAMES[props.block.type]),
+)
+const isLast = computed(() => props.index === props.list.length - 1)
+
+function move(direction: -1 | 1): void {
+	if (moveBlock(props.list, props.block.id, direction)) editor.touch()
+}
+
+function duplicate(): void {
+	if (duplicateBlock(props.list, props.block.id)) editor.touch()
+}
+
+function remove(): void {
+	if (selected.value) editor.select(null)
+	if (removeBlock(props.list, props.block.id)) editor.touch()
+}
+</script>
+
+<template>
+	<div
+		class="group relative rounded-md px-1 py-0.5 transition"
+		:class="
+			selected ? 'ring-primary ring-2' : 'hover:ring-primary/40 hover:ring-1'
+		"
+		@click.stop="editor.select(props.block.id)"
+	>
+		<div
+			class="pointer-events-none absolute -top-2.5 left-2 z-10 flex items-center gap-1 opacity-0 transition group-hover:opacity-100"
+			:class="{ 'opacity-100': selected }"
+		>
+			<span
+				class="bg-primary text-inverted rounded px-1.5 py-0.5 text-[10px] font-medium"
+			>
+				{{ t(`dms_mailing.blocks.${props.block.type}`) }}
+			</span>
+			<UBadge
+				v-if="props.block.visibleIf"
+				size="sm"
+				color="warning"
+				variant="subtle"
+				class="font-mono"
+			>
+				if {{ props.block.visibleIf.path }}
+			</UBadge>
+		</div>
+
+		<div
+			class="border-default bg-default absolute -top-3.5 right-2 z-10 flex items-center gap-0.5 rounded-md border p-0.5 opacity-0 shadow-sm transition group-hover:opacity-100"
+			:class="{ 'opacity-100': selected }"
+		>
+			<UButton
+				class="mailing-drag-handle cursor-grab"
+				icon="i-ph-dots-six-vertical"
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				:aria-label="t('dms_mailing.editor.actions.drag')"
+			/>
+			<UButton
+				icon="i-ph-arrow-up"
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				:disabled="props.index === 0"
+				:aria-label="t('dms_mailing.editor.actions.move_up')"
+				@click.stop="move(-1)"
+			/>
+			<UButton
+				icon="i-ph-arrow-down"
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				:disabled="isLast"
+				:aria-label="t('dms_mailing.editor.actions.move_down')"
+				@click.stop="move(1)"
+			/>
+			<UButton
+				icon="i-ph-copy"
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				:aria-label="t('dms_mailing.editor.actions.duplicate')"
+				@click.stop="duplicate()"
+			/>
+			<UButton
+				icon="i-ph-trash"
+				size="xs"
+				variant="ghost"
+				color="error"
+				:aria-label="t('dms_mailing.editor.actions.delete')"
+				@click.stop="remove()"
+			/>
+		</div>
+
+		<component :is="renderer" :block="props.block" />
+	</div>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import type { Block } from '../../types/mailing'
+import type { InsertTarget } from '../../composables/useTemplateEditor'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { DRAG_GROUP, DRAG_HANDLE } from '../../utils/blocks'
+import EditorBlock from './EditorBlock.vue'
+
+interface Props {
+	list: Block[]
+	target?: InsertTarget
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+</script>
+
+<template>
+	<div>
+		<draggable
+			:list="props.list"
+			:group="DRAG_GROUP"
+			:handle="DRAG_HANDLE"
+			item-key="id"
+			ghost-class="opacity-30"
+			@change="editor.touch()"
+		>
+			<template #item="{ element, index }">
+				<EditorBlock :block="element" :index="index" :list="props.list" />
+			</template>
+		</draggable>
+
+		<button
+			v-if="props.list.length === 0"
+			type="button"
+			class="hover:border-primary hover:text-primary w-full rounded-md border border-dashed border-gray-300 py-3 text-xs text-gray-400 transition"
+			@click.stop="editor.addBlock('paragraph', props.target)"
+		>
+			+ {{ t('dms_mailing.editor.condition.add_here') }}
+		</button>
+	</div>
+</template>