@antelopejs/dms-marketing 0.4.1 → 0.5.0

package/dist/index.js

@@ -52,6 +52,7 @@ const page_1 = require("@antelopejs/interface-dms/page");
 const node_cron_1 = __importDefault(require("node-cron"));
 const config_1 = require("./config");
 const hooks_2 = require("./hooks");
+const public_endpoints_1 = require("./routes/public-endpoints");
 const services_1 = require("./services");
 const constants_1 = require("./types/constants");
 const HOURLY_CRON = "0 * * * *";
@@ -69,6 +70,7 @@ async function construct(config) {
         sourcePath: node_path_1.default.join(__dirname, "../frontend-vue"),
         renderer: { name: "vue", version: "3" },
         priority: 0,
+        publicEndpoints: public_endpoints_1.TRACKER_PUBLIC_ENDPOINTS,
     });
 }
 async function onDatabaseInitialized() {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,8BAqBC;AAiCD,0BAAkC;AAElC,oBAWC;AAhGD,6BAA8C;AAC9C,sBAAoB;AACpB,oBAAkB;AAClB,mBAAiB;AAEjB,0DAA6B;AAC7B,+DAAgE;AAChE,gEAA6D;AAC7D,6FAAqE;AACrE,2DAAqE;AACrE,yDAAmE;AACnE,0DAAqD;AACrD,qCAA8D;AAC9D,mCAAyD;AACzD,yCAKoB;AACpB,iDAAwE;AAExE,MAAM,WAAW,GAAG,WAAW,CAAC;AAEhC,MAAM,kBAAkB,GAAG,EAAE,GAAG,yBAAa,CAAC;AAE9C,IAAI,SAAS,GAAyB,IAAI,CAAC;AAC3C,IAAI,cAAc,GAA0B,IAAI,CAAC;AAE1C,KAAK,UAAU,SAAS,CAC7B,MAAoC;IAEpC,IAAA,kBAAS,EAAC,MAAM,CAAC,CAAC;IAClB,MAAM,IAAA,4BAAiB,GAAE,CAAC;IAC1B,IAAA,sCAA8B,GAAE,CAAC;IACjC,IAAA,oBAAY,EAAC,YAAI,CAAC,oBAAoB,EAAE,qBAAqB,CAAC,CAAC;IAI/D,IAAA,mCAAkB,EAChB,wDAAa,qCAAqC,GAAC,EACnD,wDAAa,iCAAiC,GAAC,CAChD,CAAC;IAEF,MAAM,IAAA,wBAAiB,EAAC;QACtB,IAAI,EAAE,gCAAoB;QAC1B,UAAU,EAAE,mBAAI,CAAC,IAAI,CAAC,SAAS,EAAE,iBAAiB,CAAC;QACnD,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;QACvC,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;AACL,CAAC;AAQD,KAAK,UAAU,qBAAqB;IAClC,MAAM,QAAQ,GAAG,IAAA,wCAAQ,EAAC,2BAAsB,CAAC,CAAC;IAClD,MAAM,IAAA,uBAAY,EAAC,QAAQ,CAAC,CAAC;IAI7B,cAAc,KAAK,WAAW,CAAC,GAAG,EAAE;QAClC,KAAK,IAAA,yBAAc,EAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACtD,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACvB,cAAc,CAAC,KAAK,EAAE,CAAC;IACvB,SAAS,KAAK,mBAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QAC5C,KAAK,IAAA,yBAAc,EAAC,QAAQ,CAAC;aAC1B,IAAI,CAAC,GAAG,EAAE,CAAC,IAAA,0BAAe,EAAC,aAAa,CAAC,CAAC;aAC1C,KAAK,CAAC,aAAa,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,aAAa,CAAC,GAAY;IACjC,iBAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,SAAS,cAAc,CAAC,GAAY;IAClC,iBAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,SAAgB,OAAO,KAAU,CAAC;AAElC,SAAgB,IAAI;IAClB,IAAI,cAAc,EAAE,CAAC;QACnB,aAAa,CAAC,cAAc,CAAC,CAAC;QAC9B,cAAc,GAAG,IAAI,CAAC;IACxB,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QAGd,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,8BAsBC;AAiCD,0BAAkC;AAElC,oBAWC;AAlGD,6BAA8C;AAC9C,sBAAoB;AACpB,oBAAkB;AAClB,mBAAiB;AAEjB,0DAA6B;AAC7B,+DAAgE;AAChE,gEAA6D;AAC7D,6FAAqE;AACrE,2DAAqE;AACrE,yDAAmE;AACnE,0DAAqD;AACrD,qCAA8D;AAC9D,mCAAyD;AACzD,gEAAqE;AACrE,yCAKoB;AACpB,iDAAwE;AAExE,MAAM,WAAW,GAAG,WAAW,CAAC;AAEhC,MAAM,kBAAkB,GAAG,EAAE,GAAG,yBAAa,CAAC;AAE9C,IAAI,SAAS,GAAyB,IAAI,CAAC;AAC3C,IAAI,cAAc,GAA0B,IAAI,CAAC;AAE1C,KAAK,UAAU,SAAS,CAC7B,MAAoC;IAEpC,IAAA,kBAAS,EAAC,MAAM,CAAC,CAAC;IAClB,MAAM,IAAA,4BAAiB,GAAE,CAAC;IAC1B,IAAA,sCAA8B,GAAE,CAAC;IACjC,IAAA,oBAAY,EAAC,YAAI,CAAC,oBAAoB,EAAE,qBAAqB,CAAC,CAAC;IAI/D,IAAA,mCAAkB,EAChB,wDAAa,qCAAqC,GAAC,EACnD,wDAAa,iCAAiC,GAAC,CAChD,CAAC;IAEF,MAAM,IAAA,wBAAiB,EAAC;QACtB,IAAI,EAAE,gCAAoB;QAC1B,UAAU,EAAE,mBAAI,CAAC,IAAI,CAAC,SAAS,EAAE,iBAAiB,CAAC;QACnD,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;QACvC,QAAQ,EAAE,CAAC;QACX,eAAe,EAAE,2CAAwB;KAC1C,CAAC,CAAC;AACL,CAAC;AAQD,KAAK,UAAU,qBAAqB;IAClC,MAAM,QAAQ,GAAG,IAAA,wCAAQ,EAAC,2BAAsB,CAAC,CAAC;IAClD,MAAM,IAAA,uBAAY,EAAC,QAAQ,CAAC,CAAC;IAI7B,cAAc,KAAK,WAAW,CAAC,GAAG,EAAE;QAClC,KAAK,IAAA,yBAAc,EAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACtD,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACvB,cAAc,CAAC,KAAK,EAAE,CAAC;IACvB,SAAS,KAAK,mBAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QAC5C,KAAK,IAAA,yBAAc,EAAC,QAAQ,CAAC;aAC1B,IAAI,CAAC,GAAG,EAAE,CAAC,IAAA,0BAAe,EAAC,aAAa,CAAC,CAAC;aAC1C,KAAK,CAAC,aAAa,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,aAAa,CAAC,GAAY;IACjC,iBAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,SAAS,cAAc,CAAC,GAAY;IAClC,iBAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,SAAgB,OAAO,KAAU,CAAC;AAElC,SAAgB,IAAI;IAClB,IAAI,cAAc,EAAE,CAAC;QACnB,aAAa,CAAC,cAAc,CAAC,CAAC;QAC9B,cAAc,GAAG,IAAI,CAAC;IACxB,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QAGd,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,SAAS,GAAG,IAAI,CAAC;IACnB,CAAC;AACH,CAAC"}

package/dist/routes/public-endpoints.d.ts

@@ -0,0 +1,2 @@
+import type { FrontendPublicEndpoint } from "@antelopejs/interface-dms/page";
+export declare const TRACKER_PUBLIC_ENDPOINTS: FrontendPublicEndpoint[];

package/dist/routes/public-endpoints.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRACKER_PUBLIC_ENDPOINTS = void 0;
+const constants_1 = require("@/types/constants");
+const SCRIPT_METHODS = ["GET", "HEAD"];
+const BEACON_METHODS = ["POST"];
+exports.TRACKER_PUBLIC_ENDPOINTS = [
+    { path: `${constants_1.API_BASE_PATH}/tracker.js`, methods: SCRIPT_METHODS },
+    { path: `${constants_1.API_BASE_PATH}/experiments.js`, methods: SCRIPT_METHODS },
+    { path: `${constants_1.API_BASE_PATH}/snapshot.js`, methods: SCRIPT_METHODS },
+    { path: `${constants_1.API_BASE_PATH}/collect`, methods: BEACON_METHODS },
+    { path: `${constants_1.API_BASE_PATH}/snapshot`, methods: BEACON_METHODS },
+];
+//# sourceMappingURL=public-endpoints.js.map

package/dist/routes/public-endpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-endpoints.js","sourceRoot":"","sources":["../../src/routes/public-endpoints.ts"],"names":[],"mappings":";;;AACA,iDAAkD;AAElD,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACvC,MAAM,cAAc,GAAG,CAAC,MAAM,CAAC,CAAC;AAQnB,QAAA,wBAAwB,GAA6B;IAChE,EAAE,IAAI,EAAE,GAAG,yBAAa,aAAa,EAAE,OAAO,EAAE,cAAc,EAAE;IAChE,EAAE,IAAI,EAAE,GAAG,yBAAa,iBAAiB,EAAE,OAAO,EAAE,cAAc,EAAE;IACpE,EAAE,IAAI,EAAE,GAAG,yBAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE;IACjE,EAAE,IAAI,EAAE,GAAG,yBAAa,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE;IAC7D,EAAE,IAAI,EAAE,GAAG,yBAAa,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE;CAC/D,CAAC"}

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

@@ -4,11 +4,12 @@ import { useDmsRoute, useDmsRouter, useI18n } from '#dms/frontend-module'
 import {
   MARKETING_CONTEXT_KEY,
   type ContextWebsite,
-  type MarketingContextPayload,
 } from '../composables/useMarketingContext'
 import { useMarketingApi } from '../composables/useMarketingApi'
+import { useMarketingContextRead } from '../composables/useMarketingReads'
+import { useMarketingNow } from '../composables/useMarketingNow'
 import { installLink } from '../composables/useMarketingRoutes'
-import { formatRelativeTime, initials } from '../utils/format'
+import { formatRelativeTime, initials, utcDayStart } from '../utils/format'
 import { MAX_PERIOD_DAYS, MS_PER_DAY, PERIOD_SCOPE } from '../constants'
 
 /**
@@ -30,7 +31,9 @@ import { MAX_PERIOD_DAYS, MS_PER_DAY, PERIOD_SCOPE } from '../constants'
  * Its children render once the URL names one of the tenant's websites; with
  * no website at all the first-run hero takes their place, and with
  * `waitingGuide` a website still waiting for its first event shows the way
- * to its install guide instead.
+ * to its install guide instead. A server render reads the context first: a
+ * URL naming no website (or one the tenant does not have) is redirected to
+ * the one saved, and the page renders on it.
  */
 const props = withDefaults(
   defineProps<{
@@ -88,11 +91,22 @@ const comparisonLabels = computed(() =>
   ),
 )
 
-const context = ref<MarketingContextPayload | null>(null)
-const loading = ref(true)
-const failed = ref(false)
+// The minute's activity of every website: read on the bar's own clock.
+const contextRead = useMarketingContextRead({
+  refreshInterval: LIVE_REFRESH_MS,
+})
+const context = contextRead.data
+/**
+ * The context could not be read, and none is shown: a failed re-read (the
+ * minute's activity, a retry) keeps the bar as it is.
+ */
+const failed = computed(
+  () =>
+    !!contextRead.error.value &&
+    contextRead.status.value !== 'pending' &&
+    !context.value,
+)
 const switching = ref(false)
-const refreshToken = ref(0)
 
 const websites = computed(() => context.value?.websites ?? [])
 /** The URL's website, while it is one of the tenant's. */
@@ -109,26 +123,8 @@ const selected = computed<ContextWebsite | null>(
   () => websites.value.find((site) => site.id === selectedId.value) ?? null,
 )
 
-async function reload(): Promise<void> {
-  loading.value = true
-  failed.value = false
-  try {
-    context.value = await api.getContext()
-  } catch {
-    failed.value = true
-  } finally {
-    loading.value = false
-  }
-}
-
-/** The websites' last events again, quietly: a failure keeps the bar as is. */
-async function refreshActivity(): Promise<void> {
-  try {
-    context.value = await api.getContext()
-  } catch {
-    // The next refresh tries again.
-  }
-}
+/** The websites and their last events again; a failure keeps the bar as is. */
+const reload = (): Promise<void> => contextRead.refresh()
 
 async function select(id: string): Promise<void> {
   if (id === selectedId.value) {
@@ -153,8 +149,10 @@ async function select(id: string): Promise<void> {
 }
 
 // The URL names no website, or one the tenant does not have: fill in the
-// saved one, without a history entry. Watched with the query too, so a block
-// rewriting the URL for its own state (the heatmap path) keeps it.
+// saved one, without a history entry (a server render redirects to it).
+// Watched with the query too, so a block rewriting the URL for its own state
+// (the heatmap path) keeps it. Set up once the context is read.
+await contextRead
 watch(
   [selectedId, () => route.query],
   ([id]) => {
@@ -165,8 +163,6 @@ watch(
   { immediate: true },
 )
 
-watch(refreshToken, () => refreshPageBlocks())
-
 // --- Period --------------------------------------------------------------------
 
 const period = usePeriodScope(props.periodScope)
@@ -190,52 +186,40 @@ const cutHint = computed(() => {
 provide(MARKETING_CONTEXT_KEY, {
   websites,
   selected,
-  refreshToken,
   select,
   reload,
 })
 
-onMounted(reload)
-
 // --- Clock -------------------------------------------------------------------
 // A period reaching today follows the clock: its blocks read again every
 // minute, through the page's live gate. The selector itself moves a day
 // preset on at midnight.
 
-const now = ref(Date.now())
+const now = useMarketingNow(CLOCK_TICK_MS)
 
 /** The period covers the present: its counts are still moving. */
 const reachesToday = computed(
   () => !!range.value && range.value.to.getTime() >= now.value,
 )
 
-/** Refresh: every block reads again. */
+/** Refresh: every block reads again, and the bar. */
 function refresh(): void {
-  refreshToken.value++
-  void refreshActivity()
-}
-
-function tick(): void {
-  now.value = Date.now()
+  refreshPageBlocks()
+  void reload()
 }
 
+/** A period reaching today: its blocks read again, through the live gate. */
 function liveRefresh(): void {
   if (reachesToday.value && linkedId.value) {
     refreshLivePageBlocks()
   }
-  void refreshActivity()
 }
 
-let clock: ReturnType<typeof setInterval> | null = null
 let live: ReturnType<typeof setInterval> | null = null
 onMounted(() => {
-  clock = setInterval(tick, CLOCK_TICK_MS)
   live = setInterval(liveRefresh, LIVE_REFRESH_MS)
 })
 onBeforeUnmount(() => {
-  if (clock) {
-    clearInterval(clock)
-  }
   if (live) {
     clearInterval(live)
   }
@@ -298,18 +282,10 @@ const websiteItems = computed(() => [
  * UTC's, the bar says when their days really start.
  */
 const utcHint = computed(() => {
-  const today = new Date(now.value)
-  if (today.getTimezoneOffset() === 0) {
-    return ''
-  }
-  const utcMidnight = new Date(
-    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()),
-  )
-  const time = new Intl.DateTimeFormat(locale.value, {
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(utcMidnight)
-  return t('page.marketing.context.utc_days', { time })
+  // The reader's zone: the browser's, which a server render reads from its
+  // cookie.
+  const time = utcDayStart(now.value, locale.value, readerTimeZone())
+  return time ? t('page.marketing.context.utc_days', { time }) : ''
 })
 </script>
 
@@ -320,7 +296,7 @@ const utcHint = computed(() => {
       role="toolbar"
       :aria-label="t('page.marketing.context.label')"
     >
-      <USkeleton v-if="loading && !context" class="h-7 w-72" />
+      <USkeleton v-if="!context && !failed" class="h-7 w-72" />
       <template v-else-if="selected">
         <UDropdownMenu :items="websiteItems" :content="{ align: 'start' }">
           <UButton

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

@@ -11,6 +11,11 @@ import {
   type MarketingFunnelStep,
   type MarketingFunnelSuggestions,
 } from '../composables/useMarketingApi'
+import {
+  useContextOnDemand,
+  useFunnelRead,
+  useFunnelSuggestions,
+} from '../composables/useMarketingReads'
 import type { ContextWebsite } from '../composables/useMarketingContext'
 import {
   funnelBuilderLink,
@@ -199,9 +204,13 @@ function clearVariationError(): void {
 
 // --- Loading -------------------------------------------------------------------
 
+// The definition edited, or the one a Duplicate copies.
+const readDefinition = useFunnelRead(funnelId || sourceId)
+const readContext = useContextOnDemand()
+
 /** A stored definition as the form holds it. */
-async function fetchDefinition(id: string) {
-  const row = await api.getFunnel(id)
+async function fetchDefinition() {
+  const row = await readDefinition()
   const experiment = parseExperimentValue(row.experiment)
   const draft: FunnelDraftValues = {
     name: row.name,
@@ -230,7 +239,7 @@ function objectiveOf(draft: FunnelDraftValues): string {
 }
 
 async function loadExisting(): Promise<void> {
-  const { draft, experiment } = await fetchDefinition(funnelId)
+  const { draft, experiment } = await fetchDefinition()
   applyValues(draft)
   original.value = experiment
   savedObjective.value = objectiveOf(draft)
@@ -242,7 +251,7 @@ const copied = ref<FunnelDraftValues | null>(null)
 /** Duplicate: the copy is a new draft, unsaved until the user saves it — its
  * experiment key must change, keys being unique per site. */
 async function loadCopy(): Promise<void> {
-  const { draft } = await fetchDefinition(sourceId)
+  const { draft } = await fetchDefinition()
   applyValues({
     ...draft,
     name: t('page.marketing.builder.copy_name', { name: draft.name }).slice(
@@ -260,7 +269,7 @@ async function loadCopy(): Promise<void> {
 const websites = ref<ContextWebsite[]>([])
 
 async function loadWebsites(): Promise<void> {
-  const payload = await api.getContext()
+  const payload = await readContext()
   websites.value = payload.websites
   const linked = queryParam('website')
   websiteId.value ||=
@@ -301,21 +310,15 @@ onMounted(load)
 
 // --- Suggestions and preview -------------------------------------------------
 
-const suggestions = ref<MarketingFunnelSuggestions>({ pages: [], events: [] })
+const NO_SUGGESTIONS: MarketingFunnelSuggestions = { pages: [], events: [] }
 
-async function loadSuggestions(): Promise<void> {
-  if (!websiteId.value) {
-    return
-  }
-  try {
-    suggestions.value = await api.getFunnelSuggestions(websiteId.value)
-  } catch {
-    suggestions.value = { pages: [], events: [] }
-  }
-}
-
-// Fires once the site is known (the context, or the funnel being edited).
-watch(websiteId, () => void loadSuggestions())
+// Read once the site is known (the context, or the funnel being edited).
+const suggestionsRead = useFunnelSuggestions(websiteId)
+const suggestions = computed(() =>
+  suggestionsRead.error.value
+    ? NO_SUGGESTIONS
+    : (suggestionsRead.data.value ?? NO_SUGGESTIONS),
+)
 
 const focusedStep = ref<number | null>(null)
 /** The step whose list Escape closed, until it is typed in again. */

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

@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import { useDmsRouter, useI18n } from '#dms/frontend-module'
 import { useMarketingContext } from '../composables/useMarketingContext'
-import {
-  useMarketingApi,
-  type MarketingFunnelStep,
-  type MarketingFunnelTemplate,
-} from '../composables/useMarketingApi'
+import type { MarketingFunnelStep } from '../composables/useMarketingApi'
+import { useFunnelTemplates } from '../composables/useMarketingReads'
 import {
   funnelBuilderLink,
   installLink,
@@ -31,31 +28,23 @@ void props
 const { t, locale } = useI18n()
 const inContext = useContextLink()
 const router = useDmsRouter()
-const api = useMarketingApi()
 const context = useMarketingContext()
 const period = usePeriodScope(PERIOD_SCOPE)
 
-const templates = ref<MarketingFunnelTemplate[] | null>(null)
-
-watch(
-  [
-    () => context.selected.value?.id,
-    () => period.value?.range?.from.getTime(),
-    () => period.value?.range?.to.getTime(),
-  ],
-  async ([website]) => {
-    if (!website) {
-      return
-    }
-    templates.value = null
-    try {
-      templates.value = await api.getFunnelTemplates(website, period.value)
-    } catch {
-      templates.value = []
-    }
-  },
-  { immediate: true },
+const templatesRead = useFunnelTemplates(
+  () => context.selected.value?.id,
+  period,
 )
+/**
+ * The site's templates; `null` while they load (the previous site's or
+ * period's included), none once the read failed.
+ */
+const templates = computed(() => {
+  if (templatesRead.error.value && templatesRead.status.value !== 'pending') {
+    return []
+  }
+  return templatesRead.placeholder.value ? null : templatesRead.data.value
+})
 
 /** The site has sent nothing yet: templates cannot come before the tracker. */
 const waiting = computed(() => context.selected.value?.state === 'waiting')

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

@@ -1,24 +1,19 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import {
   useDmsRoute,
   useDmsRouter,
   useDmsRuntimeConfig,
   useI18n,
 } from '#dms/frontend-module'
-import {
-  useMarketingApi,
-  type MarketingConnectionStatus,
-} from '../composables/useMarketingApi'
+import { useMarketingApi } from '../composables/useMarketingApi'
+import { useWebsiteConnection } from '../composables/useMarketingReads'
 import {
   installLink,
   overviewLink,
   websitesLink,
 } from '../composables/useMarketingRoutes'
-import {
-  allowHostConfirmation,
-  hostConflictOf,
-} from '../utils/host-conflict'
+import { allowHostConfirmation, hostConflictOf } from '../utils/host-conflict'
 import { trackerSnippet } from '../utils/snippet'
 
 /**
@@ -57,12 +52,20 @@ const fieldErrors = useFieldErrors({
 const websiteId = ref(
   typeof route.query.website === 'string' ? route.query.website : '',
 )
-const status = ref<MarketingConnectionStatus | null>(null)
-const failed = ref(false)
-/** The `?website=` names no site of the workspace (deleted, mistyped). */
-const missing = ref(false)
 /** Server time "Check again" waits from; null: since the site's creation. */
 const recheckSince = ref<number | null>(null)
+/** The check's polling period: `POLL_MS` while it waits for a pageview, 0 (stopped) otherwise. */
+const pollInterval = ref(0)
+const connection = useWebsiteConnection(websiteId, recheckSince, {
+  refreshInterval: pollInterval,
+})
+const status = connection.data
+/** The `?website=` names no site of the workspace (deleted, mistyped). */
+const missing = computed(
+  () => apiErrorStatus(connection.error.value) === HTTP_NOT_FOUND,
+)
+/** The last check failed; the next one is on its way. */
+const failed = computed(() => !!connection.error.value && !missing.value)
 
 // --- Step 1 ----------------------------------------------------------------------
 
@@ -95,7 +98,6 @@ async function createWebsite(): Promise<void> {
     await api.selectContextWebsite(created._id)
     websiteId.value = created._id
     await router.replace(installLink(created._id))
-    await poll()
   } catch (error) {
     const conflict = hostConflictOf(error)
     if (conflict) {
@@ -115,47 +117,27 @@ async function createWebsite(): Promise<void> {
 
 // --- Step 3: connection check ---------------------------------------------------
 
-let timer: ReturnType<typeof setTimeout> | null = null
-
-function stopPolling(): void {
-  if (timer) {
-    clearTimeout(timer)
-    timer = null
-  }
-}
-
-async function poll(): Promise<void> {
-  stopPolling()
-  if (!websiteId.value) {
-    return
-  }
-  try {
-    status.value = await api.getConnection(
-      websiteId.value,
-      recheckSince.value ?? undefined,
-    )
-    failed.value = false
-  } catch (error) {
-    if (apiErrorStatus(error) === HTTP_NOT_FOUND) {
-      missing.value = true
-      status.value = null
-      return
-    }
-    failed.value = true
-  }
-  if (!status.value?.visit) {
-    timer = setTimeout(() => void poll(), POLL_MS)
-  }
-}
+/** No pageview yet, and the site is there: the check polls. */
+const isWaiting = computed(
+  () => !!websiteId.value && !missing.value && !status.value?.visit,
+)
+// The check polls while it waits, and stops once a pageview arrived or the
+// site is gone.
+watch(
+  isWaiting,
+  (waiting) => {
+    pollInterval.value = waiting ? POLL_MS : 0
+  },
+  { immediate: true },
+)
 
 /** Waits for a pageview sent from now on, to re-verify an installed tag. */
-async function checkAgain(): Promise<void> {
+function checkAgain(): void {
   if (!status.value) {
     return
   }
   recheckSince.value = status.value.checkedAt
   status.value = { ...status.value, visit: null }
-  await poll()
 }
 
 const apiOrigin = ref('')
@@ -164,9 +146,7 @@ onMounted(() => {
   apiOrigin.value = String(
     (config.public as { dms?: { baseURL?: string } }).dms?.baseURL ?? '',
   )
-  void poll()
 })
-onBeforeUnmount(stopPolling)
 
 watch(
   () => route.query.website,
@@ -174,10 +154,8 @@ watch(
     const next = typeof value === 'string' ? value : ''
     if (next !== websiteId.value) {
       websiteId.value = next
-      status.value = null
-      missing.value = false
       recheckSince.value = null
-      void poll()
+      connection.clear()
     }
   },
 )
@@ -201,7 +179,8 @@ async function allow(hostname: string): Promise<void> {
       color: 'success',
       title: t('page.marketing.install.allowed', { host: hostname }),
     })
-    await poll()
+    // The refused host leaves the check before its button comes back.
+    await refreshPageBlocks()
   } catch (error) {
     const conflict = hostConflictOf(error)
     if (conflict) {
@@ -232,7 +211,7 @@ async function resumeTracking(): Promise<void> {
       color: 'success',
       title: t('page.marketing.websites.resumed'),
     })
-    await poll()
+    await refreshPageBlocks()
   } catch (error) {
     fieldErrors.toastError(error, {
       toastTitle: 'page.marketing.websites.save_error',
@@ -638,7 +617,9 @@ const stepTwoState = computed(() =>
                   />
                 </span>
                 <span class="min-w-0 flex-1">
-                  <span class="block font-semibold break-words text-highlighted">
+                  <span
+                    class="block font-semibold break-words text-highlighted"
+                  >
                     {{
                       t(
                         recheckSince === null
@@ -677,7 +658,9 @@ const stepTwoState = computed(() =>
               >
                 <DmsIconWell icon="i-ph-prohibit" tone="error" />
                 <span class="min-w-0 flex-1">
-                  <span class="block font-semibold break-words text-highlighted">
+                  <span
+                    class="block font-semibold break-words text-highlighted"
+                  >
                     {{
                       t(
                         'page.marketing.install.refused',