@stacksjs/defaults 0.74.1 → 0.74.3

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>

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

@@ -0,0 +1,145 @@
+<script client>
+import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { reachOf } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+
+const open = useReactiveProp('open', false)
+const records = useReactiveProp('records', [] as AbandonedCartRecord[])
+const defaultIdleHours = useReactiveProp('defaultIdleHours', 4)
+const defaultCurrency = useReactiveProp('defaultCurrency', 'USD')
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const emit = defineEmits()
+
+const name = state('')
+const subject = state('')
+const text = state('')
+const fromName = state('')
+const fromAddress = state('')
+const idleHours = state(4)
+const minimumValue = state(0)
+const scheduledAt = state('')
+let hydrated = false
+
+effect(() => {
+  if (!open()) {
+    hydrated = false
+    return
+  }
+  if (hydrated)
+    return
+  hydrated = true
+  name.set('Cart recovery')
+  subject.set('You left something behind')
+  text.set('')
+  fromName.set('')
+  fromAddress.set('')
+  idleHours.set(defaultIdleHours())
+  minimumValue.set(0)
+  scheduledAt.set('')
+})
+
+/**
+ * Who this would actually be sent to, as the rules are being set.
+ *
+ * The same function the summary is built from, run against the rows already
+ * on the page: a rule that reaches nobody should say so while somebody is
+ * still choosing it, not after they have scheduled a send to an empty room.
+ */
+function reach(): { carts: number, value: number } {
+  return reachOf(records(), Number(idleHours()) || 0, Number(minimumValue()) || 0)
+}
+
+function money(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency: defaultCurrency() || 'USD' }).format(value)
+  }
+  catch {
+    return `${value.toFixed(2)} ${defaultCurrency()}`
+  }
+}
+
+function submit(): void {
+  const when = scheduledAt() ? new Date(scheduledAt()) : null
+  if (when && !Number.isFinite(when.getTime()))
+    return
+
+  emit('submit', {
+    name: name(),
+    subject: subject(),
+    text: text(),
+    fromName: fromName(),
+    fromAddress: fromAddress(),
+    idleHours: Number(idleHours()) || 0,
+    minimumValue: Number(minimumValue()) || 0,
+    scheduledAt: when ? when.toISOString() : null,
+    currency: defaultCurrency(),
+  })
+}
+</script>
+
+<Modal :isOpen="open()" title="New recovery campaign" description="Writes to the people whose carts went cold. The audience comes from the carts themselves, not from a list." size="lg" @close="emit('close')">
+  <div class="mt-4 space-y-4">
+    <div class="grid gap-4 sm:grid-cols-2">
+      <label class="block">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Campaign name</span>
+        <input x-model="name" type="text" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </label>
+      <label class="block">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Subject line</span>
+        <input x-model="subject" type="text" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </label>
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <label class="block">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Wait before writing</span>
+        <div class="flex gap-2 items-center mt-1">
+          <input x-model="idleHours" type="number" min="1" max="336" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+          <span class="text-gray-500 text-sm dark:text-neutral-400">hours</span>
+        </div>
+        <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Writing to somebody who is still shopping is not a recovery, it is an interruption.</span>
+      </label>
+      <label class="block">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Minimum cart value</span>
+        <input x-model="minimumValue" type="number" min="0" step="1" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+        <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave at zero to chase every cart.</span>
+      </label>
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <label class="block">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">From name</span>
+        <input x-model="fromName" type="text" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </label>
+      <label class="block">
+        <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">From address</span>
+        <input x-model="fromAddress" type="email" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </label>
+    </div>
+
+    <label class="block">
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Message</span>
+      <textarea x-model="text" rows="3" placeholder="Your cart is still here, and so is everything in it." class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea>
+    </label>
+
+    <label class="block">
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Send at</span>
+      <input x-model="scheduledAt" type="datetime-local" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+      <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave empty to save it as a draft and send it from the campaigns screen.</span>
+    </label>
+
+    <div class="p-3 bg-gray-50 dark:bg-neutral-900/50 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="font-medium text-gray-900 text-sm dark:text-white">{{ reach().carts.toLocaleString() }} carts match these rules</p>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ money(reach().value) }} of goods, counted from the carts on this page. Carts with no address on them cannot be written to and are not included.</p>
+    </div>
+
+    <div :if="error()" role="alert" class="p-3 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">{{ error() }}</div>
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Close</Button>
+      <Button :disabled="busy() || !name() || !subject()" :loading="busy()" @click="submit()">{{ scheduledAt() ? 'Schedule campaign' : 'Save as draft' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/functions/dashboard/sidebar.ts

@@ -443,6 +443,7 @@ export function buildNavSections(
       { to: '/marketing/lists', icon: 'list-settings', text: 'Lists' },
       { to: '/marketing/social-posts', icon: 'clock', text: 'Social Posts' },
       { to: '/marketing/campaigns', icon: 'rocket', text: 'Campaigns' },
+      { to: '/marketing/abandoned-carts', icon: 'cart', text: 'Abandoned Carts' },
       { to: '/marketing/reviews', icon: 'star', text: 'Reviews' },
       ...categoryNavItems(discoveredModels, 'marketing', new Set(['campaign'])),
     ]])

package/resources/views/cms/blocks/form.stx

@@ -18,6 +18,12 @@
   const sending = state(false)
   const done = state('')
   const openedAt = Date.now()
+  // Field names with an upload in flight, so each file input can disable
+  // itself and the submit button can wait for all of them.
+  const uploading = reactive<Record<string, boolean>>({})
+  // The chosen file's name per field, so the person can see what was attached
+  // rather than only the storage path the server answered with.
+  const attached = reactive<Record<string, string>>({})
 
   effect(() => {
     if (!host() || definition())
@@ -52,10 +58,87 @@
     return conditions.action === 'show' ? matched : !matched
   }
 
+  /**
+   * Upload one file and record the storage path it returns.
+   *
+   * The submitted value for a `file` field is that path, not the file: the
+   * server checks it sits under this form's upload prefix before accepting the
+   * submission, so a path this endpoint did not issue is rejected.
+   *
+   * Size and type are enforced server-side from `config/forms.ts`; `accept` on
+   * the input is only a picker convenience, since a file dialog filter is a
+   * suggestion and not a check.
+   */
+  async function uploadFile(field: PublicFormField, event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (!file)
+      return
+
+    uploading[field.name] = true
+    errors.set({ ...errors(), [field.name]: '' })
+
+    try {
+      const uuid = host()?.dataset.formUuid
+      const payload = new FormData()
+      payload.append('field', field.name)
+      payload.append('file', file)
+
+      const reply = await fetch(`/api/forms/${uuid}/uploads`, {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: payload,
+      })
+      const body = await reply.json().catch(() => ({}))
+
+      if (!reply.ok) {
+        // Clear the input as well as the value: leaving a rejected file
+        // showing next to its own error message reads as though it was taken.
+        input.value = ''
+        delete values[field.name]
+        delete attached[field.name]
+        errors.set({ ...errors(), [field.name]: body.message ?? 'That file could not be uploaded.' })
+        return
+      }
+
+      values[field.name] = body.path
+      attached[field.name] = file.name
+    }
+    catch {
+      input.value = ''
+      errors.set({ ...errors(), [field.name]: 'That file could not be uploaded.' })
+    }
+    finally {
+      uploading[field.name] = false
+    }
+  }
+
+  /**
+   * The `accept` attribute for a field's picker.
+   *
+   * A convenience only - a file dialog filter is a suggestion, and the server
+   * enforces the real allowlist from `config/forms.ts`. Built here rather than
+   * inline in the template so the extension parameter has a type.
+   */
+  function acceptAttr(field: PublicFormField): string {
+    return (field.options.accept ?? []).map((extension: string) => `.${extension}`).join(',')
+  }
+
+  /** True while any upload is still in flight. */
+  function anyUploading(): boolean {
+    return Object.values(uploading).some(Boolean)
+  }
+
   async function submit(event: Event): Promise<void> {
     event.preventDefault()
     if (sending())
       return
+    // A submission sent mid-upload would carry no path for that field and read
+    // as a missing required answer, which is not what happened.
+    if (anyUploading()) {
+      errors.set({ _form: 'Please wait for the upload to finish.' })
+      return
+    }
     sending.set(true)
     errors.set({})
 
@@ -119,6 +202,14 @@
                 <input type="checkbox" @change="values[field.name] = $event.target.checked" class="h-4 w-4 rounded">
                 {{ field.options.placeholder ?? 'Yes' }}
               </label>
+              {{-- A file field used to fall through to the text input below, so
+                   a person typed prose into what should have been a picker and
+                   the submission could never satisfy it. --}}
+              <div :else-if="field.type === 'file'" class="mt-1.5">
+                <input type="file" :required="field.required && !values[field.name]" :disabled="uploading[field.name]" accept="{{ acceptAttr(field) }}" @change="uploadFile(field, $event)" class="block w-full text-[15px] file:mr-3 file:rounded-lg file:border-0 file:bg-gray-100 file:px-3.5 file:py-2 file:text-[14px] file:font-medium">
+                <p :if="uploading[field.name]" class="mt-1.5 text-[13px] text-gray-500">Uploading...</p>
+                <p :else-if="attached[field.name]" class="mt-1.5 text-[13px] text-green-700">Attached {{ attached[field.name] }}</p>
+              </div>
               <input :else type="{{ field.type === 'email' ? 'email' : (field.type === 'phone' ? 'tel' : (field.type === 'date' ? 'date' : (field.type === 'currency' ? 'number' : 'text'))) }}" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" @input="values[field.name] = field.type === 'currency' ? Math.round(Number($event.target.value) * 100) : $event.target.value" class="mt-1.5 w-full rounded-lg border border-gray-300 px-3.5 py-2.5 text-[15px]">
               <p :if="errors()[field.name]" class="mt-1.5 text-[13px] text-red-600">{{ errors()[field.name] }}</p>
             </template>
@@ -128,7 +219,7 @@
 
       <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" class="hidden" @input="values._hp = $event.target.value">
 
-      <button type="submit" :disabled="sending()" class="mt-7 rounded-lg px-6 py-3 font-medium bg-gray-900 text-white transition-transform active:scale-[0.98] disabled:opacity-60">
+      <button type="submit" :disabled="sending() || anyUploading()" class="mt-7 rounded-lg px-6 py-3 font-medium bg-gray-900 text-white transition-transform active:scale-[0.98] disabled:opacity-60">
         {{ sending() ? 'Sending...' : (definition()?.submitLabel ?? 'Submit') }}
       </button>
     </form>

package/routes/dashboard-api.ts

@@ -413,6 +413,11 @@ route.group({ prefix: '/api/dashboard', apiResponse: true }, () => {
   guard(route.post('/marketing/campaigns/{id}/send', 'Actions/Dashboard/Marketing/CampaignSendAction'))
   guard(route.post('/marketing/campaigns/{id}/schedule', 'Actions/Dashboard/Marketing/CampaignScheduleAction'))
   guard(route.post('/marketing/campaigns/{id}/cancel', 'Actions/Dashboard/Marketing/CampaignCancelAction'))
+  // Abandoned carts: the audience a shop already has, and the campaign that
+  // goes after it. The campaign it writes is an ordinary Campaign row, so it
+  // shows up on /marketing/campaigns and sends through the same pipeline.
+  guard(route.get('/marketing/abandoned-carts', 'Actions/Dashboard/Marketing/AbandonedCartIndexAction'))
+  guard(route.post('/marketing/abandoned-carts/campaign', 'Actions/Dashboard/Marketing/AbandonedCartCampaignAction'))
   guard(route.get('/marketing/social-posts', 'Actions/Dashboard/Marketing/SocialPostIndexAction'))
   guard(route.post('/marketing/social-posts', 'Actions/Dashboard/Marketing/SocialPostStoreAction'))
   guard(route.patch('/marketing/social-posts/{id}', 'Actions/Dashboard/Marketing/SocialPostUpdateAction'))