@antelopejs/dms-mailing 0.3.4 → 0.4.0

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

@@ -0,0 +1,72 @@
+import type { SendResult } from './useMailingApi'
+import { replayOutcome } from '../utils/send-actions'
+import { sendRoute } from '../utils/send-link'
+import {
+	reasonKey,
+	suppressedReasonOf,
+	suppressionRoute,
+} from '../utils/suppression'
+
+/**
+ * The toast after a send again, from what the API answered: a success only
+ * when the e-mail went out. A suppressed address gets a warning with its
+ * place on the suppression list, a provider failure an error.
+ */
+export function useReplayToast() {
+	const toast = useToast()
+	const { t } = useI18n()
+	const { processApiMessage } = useTranslation()
+
+	/** Why nothing went: the reason only, the title already says "Not sent". */
+	const suppressedReason = (error: string | undefined): string | undefined => {
+		const reason = suppressedReasonOf(error)
+		if (!reason) return error ? processApiMessage(error) : undefined
+		return t('dms_mailing.suppressions.notice.not_sent.reason', {
+			reason: t(reasonKey(reason)),
+		})
+	}
+
+	return function reportReplay(
+		result: SendResult,
+		email: string,
+		sentTitle: string,
+	): void {
+		const seeSend = result.sendId
+			? [
+					{
+						label: t('dms_mailing.sends.drawer.see_send'),
+						onClick: () => void navigateDms(sendRoute(result.sendId)),
+					},
+				]
+			: []
+		const reason = result.error ? processApiMessage(result.error) : undefined
+		const outcome = replayOutcome(result)
+		if (outcome === 'suppressed') {
+			toast.add({
+				color: 'warning',
+				icon: 'i-ph-prohibit',
+				title: t('dms_mailing.suppressions.notice.not_sent.toast_title', {
+					email,
+				}),
+				description: suppressedReason(result.error),
+				actions: [
+					{
+						label: t('dms_mailing.suppressions.notice.open_list'),
+						onClick: () => void navigateDms(suppressionRoute(email)),
+					},
+				],
+			})
+			return
+		}
+		toast.add(
+			outcome === 'failed'
+				? {
+						color: 'error',
+						title: email,
+						description: reason,
+						actions: seeSend,
+					}
+				: { color: 'success', title: sentTitle, actions: seeSend },
+		)
+	}
+}

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

@@ -0,0 +1,35 @@
+import { useLocalizedDefaults } from './useLocalizedDefaults'
+import { useMailingApi } from './useMailingApi'
+import type { TemplateCategory } from '../types/mailing'
+
+/**
+ * The request in flight: the components mounting together (a table's
+ * category cells) share it, a later mount asks again since the settings may
+ * have changed meanwhile.
+ */
+let pending: Promise<TemplateCategory[]> | null = null
+
+/** The tenant's template categories, loaded once mounted. */
+export function useTemplateCategories() {
+	const api = useMailingApi()
+	const localized = useLocalizedDefaults()
+	const stored = ref<TemplateCategory[]>([])
+	const categories = computed(() => localized.categories(stored.value))
+
+	function listCategories(): Promise<TemplateCategory[]> {
+		pending ??= api
+			.listCategories()
+			.then((response) => response.categories)
+			.catch(() => [])
+			.finally(() => {
+				pending = null
+			})
+		return pending
+	}
+
+	onMounted(async () => {
+		stored.value = await listCategories()
+	})
+
+	return { categories }
+}

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

@@ -2,89 +2,223 @@ import type { Component } from 'vue'
 import type { TemplateContent, TemplateRow } from '../types/mailing'
 
 /**
- * How a DMS row action reaches these containers (verified against
- * `@antelopejs/interface-dms/base/types/action-target` and
- * `useTableViewRowActions.ts`):
+ * How the templates overlays are reached.
  *
- * - the declared target is
- *   `{ type: 'drawer' | 'modal', component: CustomComponent('DmsMailingX'), title?, description?, size? }`;
- *   there is no `event` target type — the set is
- *   `drawer | modal | page | external | api | exportJob`.
- * - the DMS opens the container itself and mounts the component with
- *   `{ ...target.component.options, pageId, componentId, containerId, rowData, onSuccessCallback }`,
- *   where `rowData` is the full row and `onSuccessCallback` closes the
- *   container and refreshes the table view.
- *
- * The same components are opened from our own surfaces (the gallery) through
- * `useDrawer()` / `useModal()` with an explicit id instead of `rowData`.
+ * A backend row action (`src/pages/templates.ts`) opens them itself and
+ * mounts the component with `rowData`, `onSuccessCallback` (closes the
+ * container and refreshes the table) and, for drawers, `navigation`. Our own
+ * surfaces (the gallery, the editor) open the same components through these
+ * helpers, with an explicit id; a body component closes its container by
+ * emitting `success`, with a truthy value when something changed.
  */
-const TEMPLATE_DRAWER_COMPONENT = 'DmsMailingTemplateDrawer'
-const TEST_SEND_MODAL_COMPONENT = 'DmsMailingTestSendModal'
+const COMPONENTS = {
+	details: 'MailingTemplateDrawer',
+	testSend: 'MailingTestSendModal',
+	realSend: 'MailingRealSendModal',
+	newTemplate: 'MailingNewTemplateModal',
+	duplicate: 'MailingDuplicateModal',
+} as const
+
+type OverlayName = keyof typeof COMPONENTS
+
 const DRAWER_DIRECTION = 'right'
-const TEST_SEND_MODAL_SIZE = 'md'
+const SEND_MODAL_SIZE = 'md'
+const NEW_TEMPLATE_MODAL_SIZE = 'lg'
+const DUPLICATE_MODAL_SIZE = 'md'
+
+/** Called once an overlay closes after changing something. */
+export type OverlayDone = () => void
 
-export interface TemplateDrawerHandle {
-	open: (templateId: string) => void
+export interface DetailsOptions {
+	/** The rows shown around it, for the drawer's previous / next buttons. */
+	rows?: TemplateRow[]
+	onDone?: OverlayDone
 }
 
-export function useTemplateDrawer(): TemplateDrawerHandle {
-	const { open } = useDrawer()
-	const { t } = useI18n()
-	const component = resolveComponent(TEMPLATE_DRAWER_COMPONENT) as Component
+export interface TestSendOptions {
+	/** Locale preselected in the dialog. */
+	locale?: string
+	/** The editor's unsaved draft, sent instead of the saved content. */
+	content?: TemplateContent
+	/** The editor's data set, sent instead of the saved test data. */
+	data?: Record<string, unknown>
+	onDone?: OverlayDone
+}
 
-	return {
-		open: (templateId: string) =>
-			void open({
-				title: t('dms_mailing.templates.actions.details'),
-				component,
-				componentOptions: { templateId },
-				direction: DRAWER_DIRECTION,
-			}),
-	}
+export interface RealSendOptions {
+	/** The row when the caller has it: saves a round trip for the status. */
+	rowData?: TemplateRow
+	onDone?: OverlayDone
+}
+
+export interface NewTemplateOptions {
+	/** Prefills the name (a search with no match, a starter whose slug is taken). */
+	initialName?: string
+	/** Preselects a starter in "Start from". */
+	initialStarterId?: string
+	onDone?: OverlayDone
 }
 
-export interface TestSendModalHandle {
-	open: (
-		templateId: string,
-		locale?: string,
-		content?: TemplateContent,
-		data?: Record<string, unknown>,
+export interface DuplicateOptions {
+	rowData?: TemplateRow
+	onDone?: OverlayDone
+}
+
+export interface TemplateOverlays {
+	/** Opens the details drawer of a template, from the right. */
+	openDetails: (
+		template: TemplateRow | string,
+		options?: DetailsOptions,
 	) => void
+	/**
+	 * Opens the test-send dialog. Works for any status: the subject gets a
+	 * `[TEST]` prefix and the send stays out of the figures.
+	 */
+	openTestSend: (templateId: string, options?: TestSendOptions) => void
+	/**
+	 * Opens the real-send dialog: the red confirmation on a live template,
+	 * the refusal with its way out on any other.
+	 */
+	openRealSend: (templateId: string, options?: RealSendOptions) => void
+	/** Opens the new-template dialog. */
+	openNewTemplate: (options?: NewTemplateOptions) => void
+	/** Opens the duplicate dialog of a template. */
+	openDuplicate: (templateId: string, options?: DuplicateOptions) => void
 }
 
-export interface RealSendModalHandle {
-	open: (templateId: string, rowData: TemplateRow, locale?: string) => void
+interface ContainerHandle {
+	result: Promise<unknown>
+	patch: (patch: Record<string, unknown>) => void
 }
 
-/** The real-send modal: same component, `real` mode, its own title. */
-export function useRealSendModal(): RealSendModalHandle {
-	const { open } = useModal()
-	const { t } = useI18n()
-	const component = resolveComponent(TEST_SEND_MODAL_COMPONENT) as Component
+function settle(handle: ContainerHandle, onDone?: OverlayDone): void {
+	void handle.result
+		.then((result) => {
+			if (result) onDone?.()
+		})
+		.catch(() => undefined)
+}
 
+function rowNavigation(
+	rows: TemplateRow[],
+	current: TemplateRow,
+	go: (row: TemplateRow) => void,
+) {
+	const index = rows.findIndex((row) => row._id === current._id)
+	if (index < 0) return undefined
+	const at = (position: number) => () => {
+		const target = rows[position]
+		if (target) go(target)
+	}
 	return {
-		open: (templateId, rowData, locale) =>
-			void open({
-				title: t('dms_mailing.templates.send_modal.title'),
-				component,
-				componentOptions: { templateId, rowData, locale, mode: 'real' },
-				size: TEST_SEND_MODAL_SIZE,
-			}),
+		index,
+		total: rows.length,
+		hasPrev: index > 0,
+		hasNext: index < rows.length - 1,
+		prev: at(index - 1),
+		next: at(index + 1),
 	}
 }
 
-export function useTestSendModal(): TestSendModalHandle {
-	const { open } = useModal()
+/**
+ * Opens the templates overlays (details drawer, test and real sends, new
+ * template, duplicate) from a component's setup.
+ */
+export function useTemplateDrawer(): TemplateOverlays {
+	const drawer = useDrawer()
+	const modal = useModal()
 	const { t } = useI18n()
-	const component = resolveComponent(TEST_SEND_MODAL_COMPONENT) as Component
+	const components = Object.fromEntries(
+		Object.entries(COMPONENTS).map(([name, id]) => [
+			name,
+			resolveComponent(id) as Component,
+		]),
+	) as Record<OverlayName, Component>
+
+	function openDetails(
+		template: TemplateRow | string,
+		options: DetailsOptions = {},
+	): void {
+		const row = typeof template === 'string' ? undefined : template
+		const templateId = typeof template === 'string' ? template : template._id
+		let handle: ContainerHandle | undefined
+		const bodyFor = (target: TemplateRow | undefined, id: string) => ({
+			templateId: id,
+			rowData: target,
+			onChanged: options.onDone,
+			navigation: target
+				? rowNavigation(options.rows ?? [], target, (next) =>
+						handle?.patch({
+							componentOptions: bodyFor(next, next._id),
+							componentKey: next._id,
+						}),
+					)
+				: undefined,
+		})
+		handle = drawer.open({
+			title: t('dms_mailing.templates.actions.details'),
+			component: components.details,
+			componentOptions: bodyFor(row, templateId),
+			componentKey: templateId,
+			direction: DRAWER_DIRECTION,
+		})
+		settle(handle, options.onDone)
+	}
+
+	function openTestSend(templateId: string, options: TestSendOptions = {}) {
+		const { onDone, ...body } = options
+		const handle = modal.open({
+			title: t('dms_mailing.test_send.title'),
+			icon: 'i-ph-flask',
+			component: components.testSend,
+			componentOptions: { templateId, ...body },
+			size: SEND_MODAL_SIZE,
+		})
+		settle(handle, onDone)
+	}
+
+	function openRealSend(templateId: string, options: RealSendOptions = {}) {
+		const handle = modal.open({
+			title: t('dms_mailing.real_send.title'),
+			icon: 'i-ph-paper-plane-right',
+			color: 'error',
+			component: components.realSend,
+			componentOptions: { templateId, rowData: options.rowData },
+			size: SEND_MODAL_SIZE,
+		})
+		settle(handle, options.onDone)
+	}
+
+	function openNewTemplate(options: NewTemplateOptions = {}) {
+		const { onDone, ...body } = options
+		const handle = modal.open({
+			title: t('dms_mailing.new_template.title'),
+			description: t('dms_mailing.new_template.description'),
+			icon: 'i-ph-envelope-simple',
+			component: components.newTemplate,
+			componentOptions: body,
+			size: NEW_TEMPLATE_MODAL_SIZE,
+		})
+		settle(handle, onDone)
+	}
+
+	function openDuplicate(templateId: string, options: DuplicateOptions = {}) {
+		const handle = modal.open({
+			title: t('dms_mailing.duplicate.title'),
+			description: t('dms_mailing.duplicate.description'),
+			icon: 'i-ph-copy',
+			component: components.duplicate,
+			componentOptions: { templateId, rowData: options.rowData },
+			size: DUPLICATE_MODAL_SIZE,
+		})
+		settle(handle, options.onDone)
+	}
 
 	return {
-		open: (templateId, locale, content, data) =>
-			void open({
-				title: t('dms_mailing.editor.test_send_modal.title'),
-				component,
-				componentOptions: { templateId, locale, content, data },
-				size: TEST_SEND_MODAL_SIZE,
-			}),
+		openDetails,
+		openTestSend,
+		openRealSend,
+		openNewTemplate,
+		openDuplicate,
 	}
 }