@stacksjs/defaults 0.74.2 → 0.74.4

package/app/Actions/Monitoring/error-provider.ts

@@ -0,0 +1,130 @@
+import type { DashboardProviderUnavailable } from '../Dashboard/dashboard-provider'
+import { errors } from '@stacksjs/commerce'
+import { HQ_READ_UNAVAILABLE, readThroughProvider, resolveDashboardDriver } from '../Dashboard/dashboard-provider'
+
+/**
+ * Where the Errors section reads from.
+ *
+ * Every one of these actions used to call `@stacksjs/commerce` directly, which
+ * is how error tracking came to be served by the shopping package: the store
+ * lives there for historical reasons and nine dashboard actions grew a
+ * dependency on it. Routing the reads through one provider puts that coupling
+ * in a single file, so replacing the store later is a change here rather than
+ * a change in nine actions.
+ *
+ * Read paths only. Resolving, ignoring, unresolving and deleting an error stay
+ * exactly where they were and always act on the local store. A section reading
+ * from a remote provider while writing to a local one would silently disagree
+ * with itself, so the write actions are deliberately left untouched until a
+ * provider exists that can actually accept a write.
+ */
+
+/**
+ * The record shapes the error store deals in.
+ *
+ * Derived from the store's own functions rather than imported, because
+ * `@stacksjs/commerce` exposes its errors module as a value and keeps these
+ * interfaces inside it. Deriving them means the provider contract follows the
+ * store automatically, and it keeps this refactor out of the commerce package.
+ */
+export type DashboardErrorRecord = NonNullable<Awaited<ReturnType<typeof errors.fetchById>>>
+export type DashboardGroupedError = Awaited<ReturnType<typeof errors.fetchGrouped>>[number]
+export type DashboardErrorStats = Awaited<ReturnType<typeof errors.fetchStats>>
+
+export interface DashboardErrorTimelinePoint {
+  hour: string
+  count: number
+}
+
+export interface DashboardErrorsProvider {
+  grouped: () => Promise<DashboardGroupedError[]>
+  stats: () => Promise<DashboardErrorStats>
+  timeline: () => Promise<DashboardErrorTimelinePoint[]>
+  byGroup: (type: string, message: string) => Promise<DashboardErrorRecord[]>
+  byId: (id: number) => Promise<DashboardErrorRecord | undefined>
+}
+
+/** Wraps a payload with the reason its section is empty. */
+export type DashboardErrorsEnvelope<T> = { data: T } & Partial<DashboardProviderUnavailable>
+
+/**
+ * This application's own error store.
+ *
+ * Not wrapped in a catch. These actions have never caught a store failure, and
+ * adding one here would convert today's error response into a misleading empty
+ * list, which is a behaviour change rather than the refactor this is meant to be.
+ */
+export const localErrorsProvider: DashboardErrorsProvider = {
+  grouped: () => errors.fetchGrouped(),
+  stats: () => errors.fetchStats(),
+  timeline: () => errors.fetchTimeline(),
+  byGroup: (type, message) => errors.fetchByGroup(type, message),
+  byId: id => errors.fetchById(id),
+}
+
+/**
+ * The empty answer for each read, used when a remote provider cannot be reached.
+ *
+ * `stats` has no natural empty value, so it reports zeros. A section showing
+ * zeros next to its reason is clearer than one showing nothing at all.
+ */
+const EMPTY_STATS: DashboardErrorStats = {
+  total: 0,
+  unresolved: 0,
+  resolved: 0,
+  ignored: 0,
+  last_24h: 0,
+  trend: 0,
+}
+
+async function resolveErrorsProvider(): Promise<{ provider: DashboardErrorsProvider, remote: boolean }> {
+  const driver = await resolveDashboardDriver('errors')
+  return { provider: localErrorsProvider, remote: driver.name !== 'local' }
+}
+
+/**
+ * Runs one error read through the configured provider.
+ *
+ * A local read is handed straight back, failures included. A remote read is
+ * guarded, so an unreachable provider yields the empty value plus a reason
+ * rather than taking the section down.
+ */
+async function readErrors<T>(
+  empty: T,
+  read: (provider: DashboardErrorsProvider) => Promise<T>,
+  isValid: (payload: unknown) => boolean,
+): Promise<DashboardErrorsEnvelope<T>> {
+  const { provider, remote } = await resolveErrorsProvider()
+
+  if (!remote)
+    return { data: await read(provider) }
+
+  const payload = await readThroughProvider<DashboardErrorsEnvelope<T>>(
+    'errors',
+    reason => ({ data: empty, unavailable: reason }),
+    async () => ({ data: empty, unavailable: HQ_READ_UNAVAILABLE }),
+    candidate => isValid((candidate as DashboardErrorsEnvelope<T>)?.data),
+  )
+
+  return payload
+}
+
+export function readGroupedErrors(): Promise<DashboardErrorsEnvelope<DashboardGroupedError[]>> {
+  return readErrors([], provider => provider.grouped(), Array.isArray)
+}
+
+export function readErrorStats(): Promise<DashboardErrorsEnvelope<DashboardErrorStats>> {
+  return readErrors(EMPTY_STATS, provider => provider.stats(), payload => Boolean(payload) && typeof payload === 'object')
+}
+
+export function readErrorTimeline(): Promise<DashboardErrorsEnvelope<DashboardErrorTimelinePoint[]>> {
+  return readErrors([], provider => provider.timeline(), Array.isArray)
+}
+
+export function readErrorsByGroup(type: string, message: string): Promise<DashboardErrorsEnvelope<DashboardErrorRecord[]>> {
+  return readErrors([], provider => provider.byGroup(type, message), Array.isArray)
+}
+
+export function readErrorById(id: number): Promise<DashboardErrorsEnvelope<DashboardErrorRecord | undefined>> {
+  return readErrors<DashboardErrorRecord | undefined>(undefined, provider => provider.byId(id), () => true)
+}

package/app/Models/EmailIdempotency.ts

@@ -17,7 +17,10 @@ export default defineModel({
     useApi: {
       uri: 'email-idempotency',
       routes: ['index', 'show', 'destroy'],
-      middleware: ['auth'],
+      // Reads stay as they were; writes need an admin.
+      // idempotency keys are what stop a retry from sending twice,
+      // so `auth` alone let any signed-in caller do it (stacksjs/stacks#2412).
+      middleware: { read: ['auth'], write: ['auth', 'role:admin'] },
     },
   },
 

package/app/Models/EmailSuppression.ts

@@ -25,7 +25,10 @@ export default defineModel({
     useApi: {
       uri: 'email-suppressions',
       routes: ['index', 'show', 'destroy'],
-      middleware: ['auth'],
+      // Reads stay as they were; writes need an admin.
+      // a suppression entry is a compliance record - deleting one re-enables mail to someone who bounced or opted out,
+      // so `auth` alone let any signed-in caller do it (stacksjs/stacks#2412).
+      middleware: { read: ['auth'], write: ['auth', 'role:admin'] },
     },
   },
 

package/app/Models/EmailWebhookEvent.ts

@@ -25,7 +25,10 @@ export default defineModel({
     useApi: {
       uri: 'email-webhook-events',
       routes: ['index', 'show', 'destroy'],
-      middleware: ['auth'],
+      // Reads stay as they were; writes need an admin.
+      // provider webhook events are the audit trail for what the provider told us,
+      // so `auth` alone let any signed-in caller do it (stacksjs/stacks#2412).
+      middleware: { read: ['auth'], write: ['auth', 'role:admin'] },
     },
   },
 

package/app/Models/Request.ts

@@ -36,7 +36,10 @@ export default defineModel({
     useApi: {
       uri: 'requests',
       routes: ['index', 'store', 'show', 'update', 'destroy'],
-      middleware: ['auth'],
+      // Reads stay as they were; writes need an admin.
+      // request logs are an audit trail, and carry whatever the request carried,
+      // so `auth` alone let any signed-in caller do it (stacksjs/stacks#2412).
+      middleware: { read: ['auth'], write: ['auth', 'role:admin'] },
     },
   },
 

package/functions/api-url.test.ts

@@ -0,0 +1,61 @@
+/**
+ * `resolveApiBaseUrl` must survive a `window` that is not a DOM.
+ *
+ * It guarded on `typeof window !== 'undefined'` and then read
+ * `window.location.origin`. Test harnesses assign `globalThis.window =
+ * globalThis` so browser code can be imported off-DOM, and that object has no
+ * `location` - so the guard passed and the next property read threw.
+ *
+ * Callers resolve this at MODULE scope (`monitoring/errors.ts` builds its
+ * `baseURL` there), so the throw happened on import: an unhandled error
+ * between tests, attributed to no test, which is why it survived a full-suite
+ * cleanup that fixed everything with a name (stacksjs/stacks#2421).
+ */
+import { afterEach, describe, expect, it } from 'bun:test'
+import { resolveApiBaseUrl } from './api-url'
+
+const REAL = {
+  window: (globalThis as any).window,
+  configured: (globalThis as any).__STACKS_API_URL__,
+}
+
+afterEach(() => {
+  for (const [key, value] of Object.entries({ window: REAL.window, __STACKS_API_URL__: REAL.configured })) {
+    if (value === undefined)
+      delete (globalThis as any)[key]
+    else
+      (globalThis as any)[key] = value
+  }
+})
+
+describe('resolveApiBaseUrl', () => {
+  it('falls back to the relative path when window has no location', () => {
+    // Exactly what a harness leaves behind: a window that is not a DOM.
+    ;(globalThis as any).window = globalThis
+    delete (globalThis as any).__STACKS_API_URL__
+
+    expect(resolveApiBaseUrl()).toBe('/api')
+  })
+
+  it('uses the origin when there is a real one', () => {
+    ;(globalThis as any).window = { location: { origin: 'https://app.test' } }
+    delete (globalThis as any).__STACKS_API_URL__
+
+    expect(resolveApiBaseUrl()).toBe('https://app.test/api')
+    expect(resolveApiBaseUrl('/v1')).toBe('https://app.test/v1')
+  })
+
+  it('prefers an injected URL over the origin, without its trailing slashes', () => {
+    ;(globalThis as any).window = { location: { origin: 'https://app.test' } }
+    ;(globalThis as any).__STACKS_API_URL__ = 'https://api.test//'
+
+    expect(resolveApiBaseUrl()).toBe('https://api.test')
+  })
+
+  it('falls back to the relative path off-DOM entirely', () => {
+    delete (globalThis as any).window
+    delete (globalThis as any).__STACKS_API_URL__
+
+    expect(resolveApiBaseUrl()).toBe('/api')
+  })
+})

package/functions/api-url.ts

@@ -15,8 +15,25 @@ export function resolveApiBaseUrl(defaultPath = '/api'): string {
   if (configured)
     return configured.replace(/\/+$/, '')
 
-  if (typeof window !== 'undefined')
-    return `${window.location.origin}${defaultPath}`
+  /*
+   * `window.location`, not just `window`.
+   *
+   * A global named `window` is not proof of a DOM. Test harnesses assign
+   * `globalThis.window = globalThis` to make browser code importable off-DOM,
+   * and that object has no `location` - so the guard passed and the very next
+   * property read threw `undefined is not an object`. Callers compute this at
+   * MODULE scope (`monitoring/errors.ts` builds its `baseURL` there), so the
+   * throw happened on import, before any code could catch it: it surfaced as an
+   * unhandled error between tests, attributed to no test at all
+   * (stacksjs/stacks#2421).
+   *
+   * Reading the origin defensively costs nothing in a real browser and keeps
+   * this resolvable anywhere - a worker, SSR, a partial DOM shim - where the
+   * honest answer is the relative default.
+   */
+  const origin = typeof window !== 'undefined' ? window.location?.origin : undefined
+  if (origin)
+    return `${origin}${defaultPath}`
 
   return defaultPath
 }

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.74.2",
+  "version": "0.74.4",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.74.2",
+  "version": "0.74.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -54,7 +54,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.74.2",
+    "@stacksjs/mobile": "^0.74.4",
     "@stacksjs/sanitizer": "^0.2.113",
     "ts-qr-codes": "^0.1.8"
   }

package/resources/components/Dashboard/Marketing/AbandonedCartsDashboard.stx

@@ -0,0 +1,240 @@
+<script client>
+import type {
+  AbandonedCartIndexPayload,
+  AbandonedCartRecord,
+  AbandonedCartSummary,
+  RecoveryCampaignRecord,
+} from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+const emptySummary: AbandonedCartSummary = {
+  open: 0,
+  openValue: 0,
+  contacted: 0,
+  recovered: 0,
+  recoveredValue: 0,
+  recoveryRate: 0,
+  averageValue: 0,
+  currency: 'USD',
+}
+
+const records = state<AbandonedCartRecord[]>([])
+const summary = state<AbandonedCartSummary>({ ...emptySummary })
+const campaigns = state<RecoveryCampaignRecord[]>([])
+/*
+ * The shop's configured currency, and the fallback for a page with no carts
+ * on it. The carts themselves carry their own, and `summary().currency` is
+ * the one the numbers on this screen are actually in - a shop trading in
+ * euros should not be shown a dollar sign because the framework's default
+ * says USD.
+ */
+const defaultCurrency = state('USD')
+const defaultIdleHours = state(4)
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const stateFilter = state('open')
+const idleFilter = state('all')
+const sort = state('value')
+const page = state(1)
+const perPage = 10
+const dialogOpen = state(false)
+const saving = state(false)
+const saveError = state('')
+
+function filteredRecords(): AbandonedCartRecord[] {
+  const query = search().trim().toLowerCase()
+  const minimumIdle = idleFilter() === 'all' ? 0 : Number(idleFilter())
+
+  return [...records()]
+    .filter((record) => {
+      if (stateFilter() === 'open' && record.state === 'recovered')
+        return false
+      if (stateFilter() === 'cold' && (record.state !== 'abandoned' || record.contacted))
+        return false
+      if (stateFilter() === 'chased' && !record.contacted)
+        return false
+      if (stateFilter() === 'recovered' && record.state !== 'recovered')
+        return false
+      if (record.idleHours < minimumIdle)
+        return false
+      return !query || [record.customerName, record.customerEmail, record.id, ...record.items]
+        .some(value => String(value).toLowerCase().includes(query))
+    })
+    .sort((left, right) => {
+      if (sort() === 'idle')
+        return right.idleHours - left.idleHours
+      if (sort() === 'customer')
+        return left.customerName.localeCompare(right.customerName)
+      return right.value - left.value || right.idleHours - left.idleHours
+    })
+}
+
+function visibleRecords(): AbandonedCartRecord[] {
+  const start = (page() - 1) * perPage
+  return filteredRecords().slice(start, start + perPage)
+}
+
+function totalPages(): number {
+  return Math.max(1, Math.ceil(filteredRecords().length / perPage))
+}
+
+effect(() => {
+  search()
+  stateFilter()
+  idleFilter()
+  sort()
+  page.set(1)
+})
+
+function money(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: summary().currency || defaultCurrency() || 'USD',
+      maximumFractionDigits: 0,
+    }).format(value)
+  }
+  catch {
+    return `${Math.round(value)} ${defaultCurrency()}`
+  }
+}
+
+function percentage(value: number): string {
+  return `${value.toFixed(1)}%`
+}
+
+function campaignTiming(campaign: RecoveryCampaignRecord): string {
+  const stamp = campaign.sentAt || campaign.scheduledAt
+  if (!stamp)
+    return 'Not scheduled'
+  const date = new Date(stamp.replace(' ', 'T'))
+  if (!Number.isFinite(date.getTime()))
+    return 'Not scheduled'
+  const when = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+  return campaign.sentAt ? `Sent ${when}` : `Scheduled ${when}`
+}
+
+async function loadCarts(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<AbandonedCartIndexPayload>('/api/dashboard/marketing/abandoned-carts')
+    if (!data || !Array.isArray(data.records) || !data.summary || !Array.isArray(data.campaigns))
+      throw new TypeError('Abandoned cart resources were not returned in the expected shape.')
+    records.set(data.records)
+    summary.set(data.summary)
+    campaigns.set(data.campaigns)
+    defaultCurrency.set(data.defaultCurrency || 'USD')
+    defaultIdleHours.set(data.defaultIdleHours || 4)
+    if (page() > totalPages())
+      page.set(totalPages())
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+    pushToast('error', 'Could not load abandoned carts', { detail: loadError() })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function openCompose(): void {
+  saveError.set('')
+  dialogOpen.set(true)
+}
+
+function closeCompose(): void {
+  if (saving())
+    return
+  dialogOpen.set(false)
+  saveError.set('')
+}
+
+async function createCampaign(payload: Record<string, unknown>): Promise<void> {
+  saving.set(true)
+  saveError.set('')
+  try {
+    await dashboardApi('/api/dashboard/marketing/abandoned-carts/campaign', { method: 'POST', body: payload })
+    dialogOpen.set(false)
+    pushToast('success', payload.scheduledAt ? 'Recovery campaign scheduled' : 'Recovery campaign saved as a draft')
+    await loadCarts()
+  }
+  catch (error) {
+    saveError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function previousPage(): void {
+  if (page() > 1)
+    page.set(page() - 1)
+}
+
+function nextPage(): void {
+  if (page() < totalPages())
+    page.set(page() + 1)
+}
+
+onMount(() => {
+  void loadCarts()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Abandoned Carts</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The audience that already chose the products. Every other campaign starts by guessing.</p>
+    </div>
+    <div class="flex gap-2">
+      <Button :loading="loading()" variant="secondary" @click="loadCarts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+      <Button @click="openCompose()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-mail-send-01"></span>New recovery campaign</Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCarts()">Retry</Button></div>
+
+  <section aria-label="Cart recovery metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-5">
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Sitting there</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().open.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Carts abandoned or expired</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Worth</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().openValue) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ money(summary().averageValue) }} average</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Chased</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().contacted.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Written to and still cold</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recovered</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().recoveredValue) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().recovered.toLocaleString() }} carts checked out after an email</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recovery rate</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ percentage(summary().recoveryRate) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Of the carts actually chased</p></article>
+  </section>
+
+  <section :if="campaigns().length > 0" aria-label="Recovery campaigns" class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <h2 class="font-semibold text-gray-900 text-sm dark:text-white">Recovery campaigns</h2>
+    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Ordinary campaigns aimed at cold carts. They send, report and are edited on the campaigns screen like any other.</p>
+    <ul class="mt-3 divide-gray-200 divide-y dark:divide-neutral-700">
+      <template :for="campaign in campaigns">
+        <li class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p class="font-medium text-gray-900 text-sm dark:text-white">{{ campaign.name }}</p>
+            <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Carts idle {{ campaign.idleHours }}h or more<span :if="campaign.minimumValue > 0"> · {{ money(campaign.minimumValue) }} and up</span> · {{ campaignTiming(campaign) }}</p>
+          </div>
+          <div class="flex gap-3 items-center">
+            <p class="text-gray-500 text-xs dark:text-neutral-400">{{ campaign.sentCount.toLocaleString() }} sent</p>
+            <span class="inline-flex px-2 py-1 font-medium text-xs bg-gray-100 dark:bg-neutral-700 rounded-full">{{ campaign.status }}</span>
+          </div>
+        </li>
+      </template>
+    </ul>
+  </section>
+
+  <section class="space-y-3">
+    <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+      <label><span class="sr-only">Search carts</span><input x-model="search" type="search" placeholder="Search by customer or product" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
+      <label><span class="sr-only">Filter cart state</span><select x-model="stateFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="open">Still out there</option><option value="cold">Never chased</option><option value="chased">Already chased</option><option value="recovered">Recovered</option><option value="all">Everything</option></select></label>
+      <label><span class="sr-only">Filter by how long the cart has been idle</span><select x-model="idleFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">Any age</option><option value="4">Idle 4h or more</option><option value="24">Idle a day or more</option><option value="72">Idle 3 days or more</option></select></label>
+      <label><span class="sr-only">Sort carts</span><select x-model="sort" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="value">Highest value</option><option value="idle">Longest idle</option><option value="customer">Customer</option></select></label>
+    </div>
+    <AbandonedCartsTable :records="visibleRecords()" :loading="loading()" />
+    <div :if="filteredRecords().length > perPage" class="flex items-center justify-between"><p class="text-gray-500 text-sm dark:text-neutral-400">Page {{ page() }} of {{ totalPages() }}</p><div class="flex gap-2"><Button :disabled="page() === 1" variant="secondary" @click="previousPage()">Previous</Button><Button :disabled="page() === totalPages()" variant="secondary" @click="nextPage()">Next</Button></div></div>
+  </section>
+</div>
+
+<RecoveryCampaignDialog :open="dialogOpen()" :records="records()" :defaultIdleHours="defaultIdleHours()" :defaultCurrency="summary().currency || defaultCurrency()" :busy="saving()" :error="saveError()" @submit="createCampaign" @close="closeCompose()" />

package/resources/components/Dashboard/Marketing/AbandonedCartsTable.stx

@@ -0,0 +1,96 @@
+<script client>
+import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+
+const records = useReactiveProp('records', [] as AbandonedCartRecord[])
+const loading = useReactiveProp('loading', false)
+
+function money(value: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency || 'USD' }).format(value)
+  }
+  catch {
+    // A currency the browser does not know is not a reason to render nothing
+    // where a number belongs.
+    return `${value.toFixed(2)} ${currency}`
+  }
+}
+
+/**
+ * How long ago, in the units a person would actually say it in.
+ *
+ * "37.4 hours" is a measurement; "2 days" is how somebody decides whether a
+ * cart is still worth chasing.
+ */
+function idle(hours: number): string {
+  if (hours < 1)
+    return 'under an hour'
+  if (hours < 48)
+    return `${Math.round(hours)}h`
+  return `${Math.round(hours / 24)} days`
+}
+
+function contents(record: AbandonedCartRecord): string {
+  if (record.items.length === 0)
+    return `${record.itemCount} item${record.itemCount === 1 ? '' : 's'}`
+  const shown = record.items.slice(0, 2).join(', ')
+  const rest = record.itemCount - Math.min(2, record.items.length)
+  return rest > 0 ? `${shown} +${rest} more` : shown
+}
+
+function stateLabel(record: AbandonedCartRecord): string {
+  if (record.state === 'recovered')
+    return 'Recovered'
+  if (record.state === 'expired')
+    return 'Expired'
+  return record.contacted ? 'Chased' : 'Cold'
+}
+
+function stateClass(record: AbandonedCartRecord): string {
+  if (record.state === 'recovered')
+    return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+  if (record.state === 'expired')
+    return 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300'
+  return record.contacted
+    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
+    : 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
+}
+</script>
+
+<div class="overflow-x-auto bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+    <thead class="bg-gray-50 dark:bg-neutral-900/50">
+      <tr>
+        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Customer</th>
+        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Left behind</th>
+        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Value</th>
+        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Idle</th>
+        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">State</th>
+      </tr>
+    </thead>
+    <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+      <template :if="loading()">
+        <tr><td colspan="5" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading carts</td></tr>
+      </template>
+      <template :else-if="records().length === 0">
+        <tr><td colspan="5" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-shopping-cart-01"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No carts to chase</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Nothing matches these filters, which, for once, is the good outcome.</p></td></tr>
+      </template>
+      <template :else>
+        <template :for="record in records">
+          <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-700/40">
+            <td class="px-4 py-4 max-w-xs">
+              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.customerName }}</p>
+              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.customerEmail || 'No address on the cart' }}</p>
+            </td>
+            <td class="px-4 py-4 max-w-sm">
+              <p class="text-gray-900 text-sm dark:text-white">{{ contents(record) }}</p>
+              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Cart #{{ record.id }}</p>
+            </td>
+            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm tabular-nums dark:text-white">{{ money(record.value, record.currency) }}</p></td>
+            <td class="px-4 py-4"><p class="text-gray-900 text-sm dark:text-white">{{ idle(record.idleHours) }}</p></td>
+            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + stateClass(record)">{{ stateLabel(record) }}</span></td>
+          </tr>
+        </template>
+      </template>
+    </tbody>
+  </table>
+</div>