@antelopejs/dms-marketing 0.2.2

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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  useDmsRoute,
+  useDmsRouter,
+  useI18n,
+} from '#dms/frontend-module'
+
+interface TopListTabItem {
+  id: string
+  title: string
+  value: number
+  to?: { path: string, query?: Record<string, string> }
+}
+
+interface TopListTab {
+  id: string
+  label: string
+  items: TopListTabItem[]
+}
+
+/**
+ * One overview card holding sibling top lists behind pill tabs. The rows
+ * mirror dms-ui's DmsTopListCard rendering, re-done locally because that
+ * card carries its own DmsCard chrome and cannot nest inside another card.
+ * A single tab renders as a plain list: no pill bar.
+ */
+const props = defineProps<{
+  title: string
+  tabs: TopListTab[]
+  emptyLabel: string
+  /** URL query key persisting the active tab; omit for free state. */
+  stateKey?: string
+  footerLabel?: string
+  footerTo?: { path: string, query?: Record<string, string> }
+}>()
+
+const route = useDmsRoute()
+const router = useDmsRouter()
+const { locale } = useI18n()
+
+const HIGHLIGHTED_RANKS = 3
+
+const tabItems = computed(() =>
+  props.tabs.map(tab => ({ label: tab.label, value: tab.id })))
+
+function initialTab(): string {
+  const wanted = props.stateKey ? route.query[props.stateKey] : undefined
+  return typeof wanted === 'string' && props.tabs.some(tab => tab.id === wanted)
+    ? wanted
+    : (props.tabs[0]?.id ?? '')
+}
+
+const activeId = ref(initialTab())
+
+// Conditional tabs (countries follows geoipEnabled, false until the fetch
+// settles) can be missing at mount and appear later: adopt the tab the URL
+// still asks for once it exists. The activeId watcher keeps the query in
+// step with every manual pick, so re-reading it can never override one.
+// The fallback covers the reverse: the active tab disappearing.
+watch(() => props.tabs, (tabs) => {
+  const wanted = props.stateKey ? route.query[props.stateKey] : undefined
+  if (typeof wanted === 'string' && tabs.some(tab => tab.id === wanted)) {
+    activeId.value = wanted
+    return
+  }
+  if (!tabs.some(tab => tab.id === activeId.value)) {
+    activeId.value = tabs[0]?.id ?? ''
+  }
+})
+
+// Replace, not push: paging through tabs must not stack history entries.
+// The default tab keeps the URL bare so a copied link stays minimal.
+watch(activeId, (id) => {
+  const key = props.stateKey
+  if (!key) {
+    return
+  }
+  const query = Object.fromEntries(
+    Object.entries(route.query).filter(([name]) => name !== key),
+  )
+  if (id !== props.tabs[0]?.id) {
+    query[key] = id
+  }
+  void router.replace({ query })
+})
+
+const activeTab = computed(() =>
+  props.tabs.find(tab => tab.id === activeId.value) ?? props.tabs[0])
+
+function rankClass(index: number): string {
+  return index < HIGHLIGHTED_RANKS ? 'font-semibold text-primary' : 'text-muted'
+}
+
+function formatCount(value: number): string {
+  return value.toLocaleString(locale.value)
+}
+</script>
+
+<template>
+  <!-- The grid stretches the cards of a row; the growing body soaks up the
+       slack so every footer anchors to the bottom edge. -->
+  <UCard class="flex flex-col" :ui="{ body: 'grow' }">
+    <template #header>
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <p class="font-medium">{{ title }}</p>
+        <UTabs
+          v-if="tabs.length > 1"
+          v-model="activeId"
+          :items="tabItems"
+          :content="false"
+          size="xs"
+        />
+      </div>
+    </template>
+
+    <!-- min-h holds the height of a full list — 8 rows of 2.5rem plus 7
+         divide-y pixels — so switching to a shorter tab never jumps. -->
+    <ul
+      v-if="activeTab && activeTab.items.length > 0"
+      class="grid min-h-[calc(20rem+7px)] content-start gap-x-3 divide-y divide-default [grid-template-columns:1.75rem_minmax(0,1fr)_auto]"
+    >
+      <li
+        v-for="(item, index) in activeTab.items"
+        :key="item.id"
+        class="relative col-[1/-1] grid grid-cols-subgrid items-center py-2.5 transition-colors hover:bg-elevated/60"
+        :class="item.to ? 'cursor-pointer' : ''"
+      >
+        <DmsLink
+          v-if="item.to"
+          :to="item.to"
+          class="absolute inset-0 z-10"
+          :aria-label="item.title"
+        />
+        <span
+          class="text-center font-mono text-xs tabular-nums"
+          :class="rankClass(index)"
+        >
+          {{ String(index + 1).padStart(2, '0') }}
+        </span>
+        <p class="min-w-0 truncate text-sm font-medium">{{ item.title }}</p>
+        <span class="justify-self-end whitespace-nowrap text-xs tabular-nums text-muted">
+          {{ formatCount(item.value) }}
+        </span>
+      </li>
+    </ul>
+
+    <div v-else class="flex min-h-[calc(20rem+7px)] items-center justify-center">
+      <p class="text-sm text-muted">{{ emptyLabel }}</p>
+    </div>
+
+    <template v-if="footerLabel && footerTo" #footer>
+      <DmsLink
+        :to="footerTo"
+        class="inline-flex items-center gap-1 text-sm text-muted transition-colors hover:text-highlighted"
+      >
+        {{ footerLabel }}
+        <UIcon name="i-ph-arrow-right" class="size-4" />
+      </DmsLink>
+    </template>
+  </UCard>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDmsRuntimeConfig, useI18n } from '#dms/frontend-module'
+import type { MarketingWebsite } from '../composables/useMarketingApi'
+
+const props = defineProps<{ website: MarketingWebsite }>()
+const { t } = useI18n()
+const config = useDmsRuntimeConfig()
+
+const backendOrigin = computed(() =>
+  String((config.public as { dms?: { baseURL?: string } }).dms?.baseURL ?? ''),
+)
+
+const CLOSING_TAG = '</' + 'script>'
+
+const snippet = computed(() =>
+  `<script defer src="${backendOrigin.value}/api/marketing/tracker.js" data-website-id="${props.website._id}">${CLOSING_TAG}`,
+)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p class="text-sm text-muted">
+      {{ t('page.marketing.websites.snippet.description', { name: website.name }) }}
+    </p>
+    <div class="flex items-start gap-2 rounded-lg bg-elevated p-3">
+      <pre class="min-w-0 flex-1 overflow-x-auto text-xs"><code>{{ snippet }}</code></pre>
+      <DmsCopyButton :value="snippet" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from '#dms/frontend-module'
+import {
+  parseExperimentVariationsValue,
+  type ExperimentVariationDraft,
+} from '../composables/useExperiment'
+
+/**
+ * The arms of an experiment, inside DmsMarketingExperimentInput: a list of
+ * {key, weight} rows emitted as the array itself. Bounds mirror the backend
+ * MIN/MAX_EXPERIMENT_VARIATIONS; the first arm is the control.
+ */
+const MIN_VARIATIONS = 2
+const MAX_VARIATIONS = 8
+const DEFAULT_WEIGHT = 1
+
+const props = defineProps<{
+  modelValue?: ExperimentVariationDraft[] | string | null
+  initialValue?: ExperimentVariationDraft[] | string | null
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ExperimentVariationDraft[]]
+}>()
+
+const { t } = useI18n()
+
+function emptyVariation(): ExperimentVariationDraft {
+  return { key: '', weight: DEFAULT_WEIGHT }
+}
+
+function parseValue(
+  raw: ExperimentVariationDraft[] | string | null | undefined,
+): ExperimentVariationDraft[] {
+  // Copies, not references: the drafts are mutated by the inputs below and
+  // must never write through to the prop value.
+  const variations = parseExperimentVariationsValue(raw).map(variation => ({
+    ...variation,
+  }))
+  while (variations.length < MIN_VARIATIONS) {
+    variations.push(emptyVariation())
+  }
+  return variations
+}
+
+const variations = ref<ExperimentVariationDraft[]>(
+  parseValue(props.modelValue ?? props.initialValue),
+)
+
+const totalWeight = computed(() =>
+  variations.value.reduce(
+    (sum, variation) => sum + Math.max(variation.weight || 0, 0),
+    0,
+  ),
+)
+
+function sharePercent(variation: ExperimentVariationDraft): number {
+  if (totalWeight.value <= 0) {
+    return Math.round(100 / variations.value.length)
+  }
+  return Math.round(
+    (Math.max(variation.weight || 0, 0) / totalWeight.value) * 100,
+  )
+}
+
+// Values are emitted untrimmed — trimming here would eat characters
+// mid-typing through the v-model echo; the DataType schema trims server-side.
+function onEdit(): void {
+  emit(
+    'update:modelValue',
+    variations.value.map(variation => ({
+      key: variation.key,
+      weight: variation.weight,
+    })),
+  )
+}
+
+function addVariation(): void {
+  if (variations.value.length >= MAX_VARIATIONS) {
+    return
+  }
+  variations.value.push(emptyVariation())
+  onEdit()
+}
+
+function removeVariation(index: number): void {
+  if (variations.value.length <= MIN_VARIATIONS) {
+    return
+  }
+  variations.value.splice(index, 1)
+  onEdit()
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const parsed = parseValue(value)
+    if (JSON.stringify(parsed) !== JSON.stringify(variations.value)) {
+      variations.value = parsed
+    }
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div
+      v-for="(variation, index) in variations"
+      :key="index"
+      class="flex items-center gap-2"
+    >
+      <UBadge
+        v-if="index === 0"
+        :label="t('page.marketing.funnels.results.control')"
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        class="w-16 justify-center shrink-0"
+      />
+      <span v-else class="w-16 shrink-0" />
+      <UInput
+        v-model="variation.key"
+        :placeholder="t('page.marketing.funnels.form.variation_key')"
+        :disabled="props.disabled"
+        class="flex-1 font-mono"
+        size="sm"
+        @update:model-value="onEdit"
+      />
+      <UInput
+        v-model.number="variation.weight"
+        type="number"
+        min="0"
+        :disabled="props.disabled"
+        class="w-20"
+        size="sm"
+        @update:model-value="onEdit"
+      />
+      <span class="w-10 shrink-0 text-right text-xs text-muted">
+        {{ sharePercent(variation) }}%
+      </span>
+      <UButton
+        v-if="!props.disabled"
+        icon="i-ph-x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :disabled="variations.length <= MIN_VARIATIONS"
+        @click="removeVariation(index)"
+      />
+    </div>
+    <UButton
+      v-if="!props.disabled && variations.length < MAX_VARIATIONS"
+      icon="i-ph-plus"
+      :label="t('page.marketing.funnels.form.add_variation')"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      class="self-start"
+      @click="addVariation"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+import { toValue, type MaybeRefOrGetter } from 'vue'
+
+/**
+ * Derives one stable id per child from the id the DMS page renderer hands the
+ * component. dms-ui primitives key their events and their persisted state on
+ * it, so two children sharing an id share that state; the `${parent}-child`
+ * shape is the one DmsRecursiveComponent uses.
+ */
+export function useChildId(
+  componentId: MaybeRefOrGetter<string | undefined>,
+): (suffix: string) => string {
+  return (suffix: string) => `${toValue(componentId)}-${suffix}`
+}

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

@@ -0,0 +1,59 @@
+import type {
+  MarketingExperimentRun,
+  MarketingExperimentStatus,
+} from './useMarketingApi'
+
+/**
+ * The A/B facet of a funnel as it travels through the form layer.
+ *
+ * The value reaches components either as the real object or as a JSON string —
+ * the input and the list display both have to read the two shapes, so the
+ * parse lives once here. Invalid input answers null (or an empty list), never
+ * a throw: this runs while rendering a cell.
+ */
+export interface ExperimentVariationDraft {
+  key: string
+  weight: number
+}
+
+export interface ExperimentDraft {
+  key: string
+  status?: MarketingExperimentStatus
+  variations: ExperimentVariationDraft[]
+  /** Read-only here: the pane reads how many runs the split has had, the
+   * form carries them back untouched and the backend re-derives them. */
+  runs: MarketingExperimentRun[]
+}
+
+function parseJsonValue(raw: unknown): unknown {
+  if (typeof raw !== 'string') {
+    return raw
+  }
+  try {
+    return raw ? JSON.parse(raw) : null
+  }
+  catch {
+    return null
+  }
+}
+
+export function parseExperimentVariationsValue(
+  raw: unknown,
+): ExperimentVariationDraft[] {
+  const parsed = parseJsonValue(raw)
+  return Array.isArray(parsed) ? (parsed as ExperimentVariationDraft[]) : []
+}
+
+export function parseExperimentValue(raw: unknown): ExperimentDraft | null {
+  const parsed = parseJsonValue(raw)
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return null
+  }
+  const candidate = parsed as Partial<ExperimentDraft>
+  return {
+    key: typeof candidate.key === 'string' ? candidate.key : '',
+    status: candidate.status,
+    variations: parseExperimentVariationsValue(candidate.variations),
+    runs: Array.isArray(candidate.runs) ? candidate.runs : [],
+  }
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Funnel steps as they travel through the form layer.
+ *
+ * The value reaches components either as the real array or as a JSON string —
+ * the input and the table display both have to read the two shapes, so the
+ * parse lives once here. Invalid input answers an empty list, never a throw:
+ * this runs while rendering a cell.
+ */
+export interface FunnelStepDraft {
+  kind: 'url' | 'custom'
+  value: string
+}
+
+export function parseFunnelStepsValue(raw: unknown): FunnelStepDraft[] {
+  let parsed: unknown = raw
+  if (typeof raw === 'string') {
+    try {
+      parsed = raw ? JSON.parse(raw) : []
+    }
+    catch {
+      parsed = []
+    }
+  }
+  return Array.isArray(parsed) ? (parsed as FunnelStepDraft[]) : []
+}

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

@@ -0,0 +1,90 @@
+import { ref, type Ref } from 'vue'
+
+/**
+ * A read whose answers may land out of order, resolved so that only the
+ * newest one is ever shown.
+ *
+ * Every surface of this module refetches on a selection, a period and
+ * sometimes a search box, and those fetches are not ordered: a slow answer for
+ * the site, page or funnel the user just left would otherwise repaint over the
+ * one on screen. The rule is the same everywhere — stamp each run, and let a
+ * run write only while it is still the latest — which is exactly what this
+ * owns instead of leaving it to be re-derived per component.
+ *
+ * `fetcher` returns `null` when there is nothing to ask for (no selection yet,
+ * or server-side, where there is no session to authenticate with). That is a
+ * settled empty state, not a failure and not a load: it clears the data and
+ * leaves nothing spinning.
+ */
+export interface LatestRequest<T> {
+  /** Newest answer, or null before the first one and after any failure. */
+  data: Ref<T | null>
+  loading: Ref<boolean>
+  failed: Ref<boolean>
+  /** Cause of the last failure, for callers that surface a message. */
+  error: Ref<unknown>
+  /**
+   * False until a run has settled. This is what tells "not asked yet" from
+   * "asked, and there is nothing" — a component that renders an empty state
+   * on the former flashes it before its first fetch resolves.
+   */
+  settled: Ref<boolean>
+  run: () => Promise<void>
+}
+
+export function useLatestRequest<T>(
+  fetcher: () => Promise<T> | null,
+): LatestRequest<T> {
+  const data = ref(null) as Ref<T | null>
+  const loading = ref(false)
+  const failed = ref(false)
+  const error = ref<unknown>(null)
+  const settled = ref(false)
+
+  let latest = 0
+
+  async function run(): Promise<void> {
+    const request = ++latest
+    // Cleared before the guard below, so a retry with nothing to fetch cannot
+    // leave a stale error on screen.
+    failed.value = false
+    error.value = null
+
+    // Called synchronously: the fetcher reads the selection as it is now, not
+    // as it will be once the previous request resolves.
+    const pending = fetcher()
+    if (!pending) {
+      data.value = null
+      loading.value = false
+      settled.value = true
+      return
+    }
+
+    loading.value = true
+    try {
+      const result = await pending
+      if (request !== latest) {
+        return
+      }
+      data.value = result
+    }
+    catch (cause) {
+      if (request !== latest) {
+        return
+      }
+      failed.value = true
+      error.value = cause
+      data.value = null
+    }
+    finally {
+      // A superseded run owns none of the shared state — not even the flag
+      // that says the newest one is still in flight.
+      if (request === latest) {
+        loading.value = false
+        settled.value = true
+      }
+    }
+  }
+
+  return { data, loading, failed, error, settled, run }
+}