@antelopejs/dms-mailing 0.3.3 → 0.4.0

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+interface NewTemplateSourceTileProps {
+	title: string
+	subtitle: string
+	isPicked: boolean
+	/** No preview: the blank page's dashed placeholder. */
+	isBlank?: boolean
+	starterId?: string
+	templateId?: string
+}
+
+const PREVIEW_WIDTH = 600
+const PREVIEW_SCALE = 0.24
+
+withDefaults(defineProps<NewTemplateSourceTileProps>(), {
+	isBlank: false,
+	starterId: undefined,
+	templateId: undefined,
+})
+
+const emit = defineEmits<{ pick: [] }>()
+</script>
+
+<template>
+	<button
+		type="button"
+		role="radio"
+		:aria-checked="isPicked"
+		class="flex min-w-0 flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors"
+		:class="
+			isPicked
+				? 'border-primary ring-primary/30 ring-2'
+				: 'border-default hover:border-accented'
+		"
+		@click="emit('pick')"
+	>
+		<span
+			v-if="isBlank"
+			class="border-default text-dimmed flex h-[72px] items-center justify-center rounded border border-dashed"
+		>
+			<UIcon name="i-ph-plus" class="size-5" />
+		</span>
+		<span
+			v-else
+			class="bg-elevated/40 pointer-events-none flex h-[72px] justify-center overflow-hidden rounded"
+		>
+			<MailingTemplatePreviewFrame
+				:starter-id="starterId"
+				:template-id="templateId"
+				:width="PREVIEW_WIDTH"
+				:scale="PREVIEW_SCALE"
+				:label="title"
+				lazy
+				decorative
+			/>
+		</span>
+		<span
+			class="text-highlighted line-clamp-2 text-[12.5px] font-medium leading-snug [overflow-wrap:anywhere]"
+			:title="title"
+		>
+			{{ title }}
+		</span>
+		<span
+			class="text-dimmed mt-auto truncate font-mono text-[11px]"
+			:title="subtitle"
+		>
+			{{ subtitle }}
+		</span>
+	</button>
+</template>

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

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { useMailingApi } from '../composables/useMailingApi'
+import { useSetupHidesPeriod } from '../composables/useOverviewSetup'
+import {
+	isSetupComplete,
+	needsSetup,
+	setupSteps,
+	type SetupFacts,
+	type SetupStep,
+	type SetupStepState,
+} from '../utils/overview-setup'
+import type { Component } from 'vue'
+import type { MailingComponentProps } from '../types/component'
+
+defineProps<MailingComponentProps>()
+
+type GateState = 'loading' | 'error' | 'ready'
+
+const OVERVIEW_PERIOD_SCOPE = 'mailing-overview'
+const NEW_TEMPLATE_MODAL = 'MailingNewTemplateModal'
+const NEW_TEMPLATE_MODAL_SIZE = 'lg'
+const KEY_PREFIX = 'dms_mailing.setup.'
+const SKELETON_ROWS = 4
+
+const STEP_MARKER_CLASSES: Record<SetupStepState, string> = {
+	done: 'bg-success/10 text-success ring-success/30',
+	current: 'bg-primary text-inverted ring-primary',
+	todo: 'bg-elevated text-muted ring-default',
+}
+
+const STEP_BUTTON_VARIANTS: Record<SetupStepState, 'solid' | 'outline'> = {
+	done: 'outline',
+	current: 'solid',
+	todo: 'outline',
+}
+
+const api = useMailingApi()
+const { t } = useI18n()
+const { open: openModal } = useModal()
+const hidesPeriod = useSetupHidesPeriod(OVERVIEW_PERIOD_SCOPE)
+
+const facts = ref<SetupFacts | null>(null)
+const state = ref<GateState>('loading')
+const isResumed = ref(false)
+
+const steps = computed<SetupStep[]>(() =>
+	facts.value ? setupSteps(facts.value) : [],
+)
+const isBlocking = computed(() => !!facts.value && needsSetup(facts.value))
+const showsSetup = computed(() => isBlocking.value || isResumed.value)
+const showsDashboard = computed(() => !!facts.value && !isBlocking.value)
+const canResume = computed(
+	() =>
+		showsDashboard.value &&
+		!isResumed.value &&
+		!!facts.value &&
+		!isSetupComplete(facts.value),
+)
+
+const key = (path: string): string => t(`${KEY_PREFIX}${path}`)
+
+const errorActions = computed(() => [
+	{
+		label: key('retry'),
+		icon: 'i-ph-arrows-clockwise',
+		onClick: () => void load(),
+	},
+])
+
+const stepDescription = (step: SetupStep): string =>
+	key(`steps.${step.id}.${step.state === 'done' ? 'done' : 'description'}`)
+
+async function load(): Promise<void> {
+	state.value = 'loading'
+	try {
+		facts.value = await api.setupFacts()
+		state.value = 'ready'
+	} catch {
+		state.value = 'error'
+	}
+}
+
+function createTemplate(): void {
+	const modal = openModal({
+		title: t('dms_mailing.setup.create_template'),
+		component: resolveComponent(NEW_TEMPLATE_MODAL) as Component,
+		size: NEW_TEMPLATE_MODAL_SIZE,
+	})
+	void modal.result.then(load, load)
+}
+
+watch(isBlocking, (blocking) => {
+	hidesPeriod.value = blocking
+})
+
+onMounted(load)
+onBeforeUnmount(() => {
+	hidesPeriod.value = false
+})
+</script>
+
+<template>
+	<DmsCard
+		v-if="state === 'loading' && !facts"
+		:padded="false"
+		aria-busy="true"
+	>
+		<div class="flex flex-col gap-3 p-6 sm:p-8">
+			<USkeleton class="h-6 w-56" />
+			<USkeleton v-for="row in SKELETON_ROWS" :key="row" class="h-10 w-full" />
+		</div>
+	</DmsCard>
+
+	<DmsCard v-else-if="state === 'error' && !facts" :padded="false">
+		<DmsEmptyState
+			variant="error"
+			:title="key('error_title')"
+			:description="key('error_description')"
+			:actions="errorActions"
+		/>
+	</DmsCard>
+
+	<div v-else class="flex flex-col gap-4">
+		<div v-if="canResume" class="flex justify-end">
+			<UButton
+				size="xs"
+				color="neutral"
+				variant="ghost"
+				icon="i-ph-list-checks"
+				:label="key('resume')"
+				@click="isResumed = true"
+			/>
+		</div>
+
+		<DmsCard v-if="showsSetup" :padded="false">
+			<div
+				class="grid gap-8 p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]"
+			>
+				<div class="flex flex-col items-start gap-3">
+					<DmsIconWell icon="i-ph-envelope-simple" tone="primary" size="xl" />
+					<h3 class="text-highlighted text-lg font-semibold">
+						{{ key('title') }}
+					</h3>
+					<p class="text-muted max-w-[52ch] text-[13.5px] leading-relaxed">
+						{{ key('description') }}
+					</p>
+					<div class="mt-1.5 flex flex-wrap items-center gap-2">
+						<UButton
+							icon="i-ph-plus"
+							:label="key('create_template')"
+							@click="createTemplate"
+						/>
+						<UPopover>
+							<UButton
+								color="neutral"
+								variant="ghost"
+								:label="key('how_it_works')"
+							/>
+							<template #content>
+								<div class="flex max-w-80 flex-col gap-2 p-4 text-[13px]">
+									<p class="text-highlighted font-semibold">
+										{{ key('how_it_works') }}
+									</p>
+									<p class="text-muted leading-relaxed">
+										{{ key('how_it_works_body') }}
+									</p>
+								</div>
+							</template>
+						</UPopover>
+						<UButton
+							v-if="isResumed && !isBlocking"
+							color="neutral"
+							variant="ghost"
+							icon="i-ph-x"
+							:label="key('hide')"
+							@click="isResumed = false"
+						/>
+					</div>
+				</div>
+
+				<ol class="flex flex-col gap-1">
+					<li v-for="step in steps" :key="step.id">
+						<DmsListRow
+							as="div"
+							:title="key(`steps.${step.id}.title`)"
+							:description="stepDescription(step)"
+							:current="step.state === 'current'"
+						>
+							<template #leading>
+								<span
+									:class="STEP_MARKER_CLASSES[step.state]"
+									class="grid size-7 shrink-0 place-items-center rounded-full font-mono text-[12px] font-semibold ring"
+								>
+									<UIcon
+										v-if="step.state === 'done'"
+										name="i-ph-check"
+										class="size-3.5"
+										aria-hidden="true"
+									/>
+									<template v-else>{{ step.number }}</template>
+								</span>
+							</template>
+							<template v-if="step.state !== 'done' && step.to" #trailing>
+								<UButton
+									size="sm"
+									:variant="STEP_BUTTON_VARIANTS[step.state]"
+									:color="step.state === 'current' ? 'primary' : 'neutral'"
+									:label="key(`steps.${step.id}.action`)"
+									@click="navigateDms(step.to)"
+								/>
+							</template>
+						</DmsListRow>
+					</li>
+				</ol>
+			</div>
+		</DmsCard>
+
+		<slot v-if="showsDashboard" />
+	</div>
+</template>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useMailingApi } from '../composables/useMailingApi'
+import { useSetupHidesPeriod } from '../composables/useOverviewSetup'
+import { presetShortLabelKey } from '../utils/period'
+import type { Component } from 'vue'
+import type { MailingComponentProps } from '../types/component'
+import type { ProviderInfo } from '../types/mailing'
+
+interface PageHeaderProps extends MailingComponentProps {
+	periodScope?: string
+	presets?: string[]
+	defaultPreset?: string
+	defaultComparison?: string
+	showProvider?: boolean
+}
+
+defineOptions({ inheritAttrs: false })
+
+const PERIOD_COMPONENT_SUFFIX = ':period'
+
+const props = withDefaults(defineProps<PageHeaderProps>(), {
+	periodScope: undefined,
+	presets: () => [],
+	defaultPreset: undefined,
+	defaultComparison: undefined,
+	showProvider: true,
+})
+
+const api = useMailingApi()
+const { t } = useI18n()
+
+const StatusPill = resolveComponent('DmsStatusPill') as Component
+const PeriodSelector = resolveComponent('DmsPeriodSelector') as Component
+
+const provider = ref<ProviderInfo | null>(null)
+const hidesPeriod = useSetupHidesPeriod(props.periodScope)
+
+const presetLabels = computed(() =>
+	Object.fromEntries(
+		props.presets.map((preset) => [preset, t(presetShortLabelKey(preset))]),
+	),
+)
+
+const providerPill = computed(() =>
+	provider.value?.connected
+		? {
+				tone: 'success',
+				dot: 'live',
+				label: t('dms_mailing.page_header.provider_connected', {
+					name: provider.value.name,
+				}),
+			}
+		: {
+				tone: 'warning',
+				dot: 'static',
+				label: t('dms_mailing.page_header.no_provider'),
+			},
+)
+
+function renderProvider() {
+	if (!props.showProvider || !provider.value) return null
+	return h(StatusPill, {
+		...providerPill.value,
+		title: t('dms_mailing.page_header.provider_hint'),
+	})
+}
+
+function renderPeriod() {
+	if (!props.periodScope || hidesPeriod.value) return null
+	return h(PeriodSelector, {
+		id: props.periodScope,
+		componentId: `${props.componentId ?? props.periodScope}${PERIOD_COMPONENT_SUFFIX}`,
+		pageId: props.pageId ?? '',
+		variant: 'segmented',
+		size: 'sm',
+		showRangeLabel: false,
+		presets: props.presets.length ? props.presets : undefined,
+		presetLabels: presetLabels.value,
+		defaultPreset: props.defaultPreset,
+		defaultComparison: props.defaultComparison,
+	})
+}
+
+usePageHeaderActions(() => [renderProvider(), renderPeriod()])
+
+onMounted(async () => {
+	if (!props.showProvider) return
+	try {
+		provider.value = await api.provider()
+	} catch {
+		provider.value = { name: '', connected: false, features: null }
+	}
+})
+</script>
+
+<template>
+	<span hidden />
+</template>