@antelopejs/dms-mailing 0.2.2

package/frontend-vue/app/composables/useTemplateEditor.ts

@@ -0,0 +1,228 @@
+import { computed, reactive, toRefs } from 'vue'
+import type {
+	Block,
+	BlockType,
+	LocaleContent,
+	TemplateContent,
+} from '../types/mailing'
+import {
+	cloneWithNewIds,
+	createBlock,
+	findBlock,
+	findParentList,
+	removeBlock,
+} from '../utils/blocks'
+import { deepClone } from '../utils/clone'
+
+export type IfBranch = 'children' | 'elseChildren'
+
+export interface InsertTarget {
+	parentId: string
+	branch: IfBranch
+}
+
+export type RailTab = 'blocks' | 'settings' | 'template' | 'data'
+export type EditorDevice = 'desktop' | 'mobile'
+export type LocalePatch = Partial<Pick<LocaleContent, 'subject' | 'preheader'>>
+
+interface EditorCore {
+	content: TemplateContent
+	locale: string
+	locales: string[]
+	dirty: number
+	selectedId: string | null
+	subjectSelected: boolean
+	tab: RailTab
+	device: EditorDevice
+	previewMode: boolean
+	railOpen: boolean
+}
+
+const emptyLocale = (): LocaleContent => ({
+	subject: '',
+	preheader: '',
+	blocks: [],
+})
+
+function createCore(
+	content: TemplateContent,
+	locale: string,
+	locales: string[],
+): EditorCore {
+	return reactive({
+		content: deepClone(content),
+		locale,
+		locales,
+		dirty: 0,
+		selectedId: null,
+		subjectSelected: false,
+		tab: 'blocks',
+		device: 'desktop',
+		previewMode: false,
+		railOpen: true,
+	}) as EditorCore
+}
+
+function createViews(core: EditorCore) {
+	const current = computed<LocaleContent | null>(
+		() => core.content.locales[core.locale] ?? null,
+	)
+	return {
+		current,
+		selected: computed<Block | null>(() =>
+			current.value && core.selectedId
+				? findBlock(current.value.blocks, core.selectedId)
+				: null,
+		),
+		missingLocales: computed(() =>
+			core.locales.filter((code) => !core.content.locales[code]),
+		),
+	}
+}
+
+type EditorViews = ReturnType<typeof createViews>
+
+function blocksOf(views: EditorViews): Block[] | null {
+	return views.current.value?.blocks ?? null
+}
+
+function createSelectionActions(core: EditorCore) {
+	function select(id: string | null): void {
+		core.selectedId = id
+		core.subjectSelected = false
+		if (id) core.tab = 'settings'
+	}
+	function selectSubject(): void {
+		core.selectedId = null
+		core.subjectSelected = true
+		core.tab = 'settings'
+	}
+	function setLocale(code: string): void {
+		core.locale = code
+		select(null)
+	}
+	return { select, selectSubject, setLocale }
+}
+
+interface MutationDeps {
+	core: EditorCore
+	views: EditorViews
+	select: (id: string | null) => void
+	touch: () => void
+}
+
+function listFor(views: EditorViews, target?: InsertTarget): Block[] | null {
+	const blocks = blocksOf(views)
+	if (!blocks) return null
+	if (!target) return blocks
+	const parent = findBlock(blocks, target.parentId)
+	if (parent?.type !== 'if') return null
+	if (target.branch === 'elseChildren' && !parent.elseChildren)
+		parent.elseChildren = []
+	return parent[target.branch]
+}
+
+function createBlockActions({ views, select, touch }: MutationDeps) {
+	function updateBlock(id: string, patch: Partial<Block>): void {
+		const blocks = blocksOf(views)
+		const block = blocks ? findBlock(blocks, id) : null
+		if (!block) return
+		Object.assign(block, patch)
+		touch()
+	}
+	function addBlock(
+		type: BlockType,
+		target?: InsertTarget,
+		index?: number,
+	): Block {
+		const block = createBlock(type)
+		const list = listFor(views, target)
+		list?.splice(index ?? list.length, 0, block)
+		select(block.id)
+		touch()
+		return block
+	}
+	function addElse(id: string): void {
+		const blocks = blocksOf(views)
+		const block = blocks ? findBlock(blocks, id) : null
+		if (block?.type !== 'if' || block.elseChildren) return
+		block.elseChildren = [createBlock('paragraph')]
+		touch()
+	}
+	function removeElse(id: string): void {
+		const blocks = blocksOf(views)
+		const block = blocks ? findBlock(blocks, id) : null
+		if (block?.type !== 'if') return
+		block.elseChildren = null
+		touch()
+	}
+	function removeBlockById(id: string): void {
+		const blocks = blocksOf(views)
+		if (blocks && removeBlock(blocks, id)) touch()
+	}
+	return {
+		updateBlock,
+		addBlock,
+		addElse,
+		removeElse,
+		removeBlockById,
+		findBlock: (id: string) => {
+			const blocks = blocksOf(views)
+			return blocks ? findBlock(blocks, id) : null
+		},
+		parentListOf: (id: string) => {
+			const blocks = blocksOf(views)
+			return blocks ? findParentList(blocks, id) : null
+		},
+		updateLocale: (patch: LocalePatch) => {
+			if (!views.current.value) return
+			Object.assign(views.current.value, patch)
+			touch()
+		},
+	}
+}
+
+function createLifecycleActions({ core, select, touch }: MutationDeps) {
+	function createLocale(code: string, from?: string): void {
+		const source = from ? core.content.locales[from] : undefined
+		core.content.locales[code] = source
+			? { ...deepClone(source), blocks: source.blocks.map(cloneWithNewIds) }
+			: emptyLocale()
+		core.locale = code
+		touch()
+	}
+	function markSaved(): void {
+		core.dirty = 0
+	}
+	function reset(content: TemplateContent): void {
+		core.content = deepClone(content)
+		core.dirty = 0
+		select(null)
+	}
+	return { createLocale, markSaved, reset, touch }
+}
+
+export function createEditorState(
+	content: TemplateContent,
+	locale: string,
+	locales: string[],
+) {
+	const core = createCore(content, locale, locales)
+	const views = createViews(core)
+	const selection = createSelectionActions(core)
+	const deps: MutationDeps = {
+		core,
+		views,
+		select: selection.select,
+		touch: () => (core.dirty += 1),
+	}
+	return reactive({
+		...toRefs(core),
+		...views,
+		...selection,
+		...createBlockActions(deps),
+		...createLifecycleActions(deps),
+	})
+}
+
+export type EditorState = ReturnType<typeof createEditorState>

package/frontend-vue/app/emails/EmailMailingTemplate.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import EmailLayout from '#dms-layout/app/emails/components/EmailLayout.vue'
+import MailingBlocks from './components/MailingBlocks.vue'
+import type { ResolvedEmail } from '../types/mailing'
+
+interface Props {
+	locale: string
+	email: ResolvedEmail
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<EmailLayout :title="email.subject" :lang="locale">
+		<EPreview v-if="email.preheader">{{ email.preheader }}</EPreview>
+
+		<MailingBlocks :blocks="email.blocks" />
+
+		<template #footer>
+			<MailingBlocks :blocks="email.blocks" footer-only />
+		</template>
+	</EmailLayout>
+</template>

package/frontend-vue/app/emails/components/MailingBlocks.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import EmailButton from '#dms-layout/app/emails/components/EmailButton.vue'
+import EmailOTP from '#dms-layout/app/emails/components/EmailOTP.vue'
+import { emailStyles } from '#dms-layout/app/emails/components/index'
+import type {
+	ResolvedBlock,
+	ResolvedHeading,
+	ResolvedParagraph,
+} from '../../types/mailing'
+
+const FOOTER_TYPE = 'footer'
+
+const heroStyle = { width: '100%', borderRadius: '8px', marginBottom: '20px' }
+const totalStyle = { ...emailStyles.text, fontWeight: '600' }
+const rowLabelStyle = { ...emailStyles.text, margin: '0' }
+const rowValueStyle = {
+	...emailStyles.text,
+	margin: '0',
+	textAlign: 'right' as const,
+}
+
+interface Props {
+	blocks: ResolvedBlock[]
+	footerOnly?: boolean
+}
+
+const props = defineProps<Props>()
+
+const visibleBlocks = computed(() =>
+	props.blocks.filter((block) =>
+		props.footerOnly ? block.type === FOOTER_TYPE : block.type !== FOOTER_TYPE,
+	),
+)
+
+const headingStyle = (block: ResolvedHeading) => ({
+	...emailStyles.heading,
+	textAlign: block.align,
+	fontSize: `${block.size}px`,
+})
+
+const paragraphStyle = (block: ResolvedParagraph) => ({
+	...emailStyles.text,
+	textAlign: block.align,
+})
+</script>
+
+<template>
+	<template v-for="block in visibleBlocks" :key="block.id">
+		<EImg
+			v-if="block.type === 'hero'"
+			:src="block.imageUrl"
+			:alt="block.alt"
+			:style="heroStyle"
+		/>
+
+		<EHeading
+			v-else-if="block.type === 'heading'"
+			as="h1"
+			:style="headingStyle(block)"
+		>
+			{{ block.text }}
+		</EHeading>
+
+		<EText
+			v-else-if="block.type === 'paragraph'"
+			:style="paragraphStyle(block)"
+		>
+			{{ block.text }}
+		</EText>
+
+		<EmailOTP v-else-if="block.type === 'code'" :code="block.text" />
+
+		<ESection v-else-if="block.type === 'list'">
+			<ERow v-for="(row, index) in block.rows" :key="index">
+				<EColumn>
+					<EText :style="rowLabelStyle">{{ row.label }}</EText>
+				</EColumn>
+				<EColumn align="right">
+					<EText :style="rowValueStyle">{{ row.value }}</EText>
+				</EColumn>
+			</ERow>
+		</ESection>
+
+		<ESection v-else-if="block.type === 'total'">
+			<ERow>
+				<EColumn>
+					<EText :style="totalStyle">{{ block.label }}</EText>
+				</EColumn>
+				<EColumn align="right">
+					<EText :style="totalStyle">{{ block.value }}</EText>
+				</EColumn>
+			</ERow>
+		</ESection>
+
+		<ESection
+			v-else-if="block.type === 'button'"
+			:style="{ textAlign: block.align }"
+		>
+			<EmailButton :href="block.href">{{ block.text }}</EmailButton>
+		</ESection>
+
+		<EHr v-else-if="block.type === 'divider'" :style="emailStyles.divider" />
+
+		<EText v-else-if="block.type === 'footer'" :style="emailStyles.footer">
+			{{ block.text }}
+			<br />
+			<ELink v-if="block.unsubscribeUrl" :href="block.unsubscribeUrl">
+				{{ block.unsubscribeLabel }}
+			</ELink>
+			·
+			<ELink v-if="block.preferencesUrl" :href="block.preferencesUrl">
+				{{ block.preferencesLabel }}
+			</ELink>
+		</EText>
+	</template>
+</template>

package/frontend-vue/app/plugins/template-gallery-display.client.ts

@@ -0,0 +1,14 @@
+import TemplateGallery from '../components/TemplateGallery.vue'
+
+const GALLERY_DISPLAY_ID = 'gallery'
+const GALLERY_DISPLAY_ORDER = 5
+
+export default defineDmsPlugin(() => {
+	registerTableViewDisplay({
+		id: GALLERY_DISPLAY_ID,
+		label: 'dms_mailing.templates.display.gallery',
+		icon: 'i-ph-squares-four',
+		order: GALLERY_DISPLAY_ORDER,
+		component: TemplateGallery,
+	})
+})

package/frontend-vue/app/types/component.ts

@@ -0,0 +1,29 @@
+/**
+ * Identity the DMS page renderer hands to every component it mounts. Optional
+ * here because the mailing components are also mounted directly by our own
+ * pages and drawers, outside the renderer.
+ */
+export interface MailingComponentProps {
+	componentId?: string
+	pageId?: string
+}
+
+export interface GalleryPagination {
+	pageIndex: number
+	pageSize: number
+	total: number
+	setPage: (index: number) => void
+	setPageSize: (size: number) => void
+}
+
+/**
+ * The slice of the DMS `TableViewDisplayContext` the gallery display consumes.
+ * Declared structurally so the layer does not import from the dms-ui layer.
+ */
+export interface GalleryDisplayContext<T> {
+	items: T[]
+	loading: boolean
+	pagination: GalleryPagination
+	options?: Record<string, unknown>
+	refresh: () => Promise<void> | void
+}