@stacksjs/defaults 0.75.38 → 0.75.40

package/resources/components/Dashboard/Commerce/CommerceProductDetailDashboard.stx

@@ -3,11 +3,13 @@ import type {
   CommerceProductRecord,
   ProductOption,
   ProductReviewSummary,
+  ProductWritePayload,
   ProductUnitDetail,
   ProductVariantDetail,
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 interface ProductDetailResponse {
   record: CommerceProductRecord
@@ -19,20 +21,6 @@ interface ProductDetailResponse {
   defaultCurrency: string
 }
 
-interface ProductWritePayload {
-  name: string
-  description: string
-  price: number
-  imageUrl: string
-  isAvailable: boolean
-  inventoryCount: number
-  preparationTime: number
-  allergens: string
-  nutritionalInfo: string
-  categoryId: number | null
-  manufacturerId: number | null
-}
-
 const route = useRoute()
 const record = state<CommerceProductRecord | null>(null)
 const variants = state<ProductVariantDetail[]>([])
@@ -55,12 +43,7 @@ function productId(): string {
 }
 
 function formatMoney(value: number): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: defaultCurrency() }).format(value)
-  }
-  catch {
-    return `${value.toFixed(2)} ${defaultCurrency()}`
-  }
+  return formatCurrency(value, defaultCurrency())
 }
 
 function formatDate(value: string): string {

package/resources/components/Dashboard/Commerce/CommerceProductDialog.stx

@@ -3,6 +3,11 @@ import type {
   CommerceProductRecord,
   ProductOption,
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
+import { minorToInput, moneyInputStep } from '@stacksjs/commerce/money'
+import {
+  productPriceInputError,
+  productWritePayload,
+} from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -15,7 +20,9 @@ const errors = useReactiveProp('errors', {} as Record<string, string>)
 const emit = defineEmits()
 const name = state('')
 const description = state('')
-const price = state('1')
+// The price as typed, in major units ("19.99"). It is stored as integer
+// minor units (1999), converted once in `productWritePayload`.
+const price = state('')
 const imageUrl = state('')
 const isAvailable = state(true)
 const inventoryCount = state('0')
@@ -38,7 +45,7 @@ effect(() => {
   hydrationKey = key
   name.set(current?.name || '')
   description.set(current?.description || '')
-  price.set(String(current?.price ?? 1))
+  price.set(current ? minorToInput(current.price, currency()) : '')
   imageUrl.set(current?.imageUrl || '')
   isAvailable.set(current?.isAvailable ?? true)
   inventoryCount.set(String(current?.inventoryCount ?? 0))
@@ -62,14 +69,16 @@ function nutritionValid(): boolean {
   }
 }
 
+function priceError(): string {
+  return productPriceInputError(price(), currency())
+}
+
 function valid(): boolean {
-  const parsedPrice = Number(price())
   const parsedInventory = Number(inventoryCount())
   const parsedPreparation = Number(preparationTime())
   return Boolean(
     name().trim()
-    && Number.isFinite(parsedPrice)
-    && parsedPrice >= 1
+    && !priceError()
     && Number.isFinite(parsedInventory)
     && parsedInventory >= 0
     && Number.isInteger(parsedInventory)
@@ -83,20 +92,19 @@ function valid(): boolean {
 function submit(): void {
   if (!valid())
     return
-  const allergenValues = allergens().split(',').map(value => value.trim()).filter(Boolean)
-  emit('submit', {
-    name: name().trim(),
-    description: description().trim(),
-    price: Number(price()),
-    imageUrl: imageUrl().trim(),
+  emit('submit', productWritePayload({
+    name: name(),
+    description: description(),
+    price: price(),
+    imageUrl: imageUrl(),
     isAvailable: isAvailable(),
-    inventoryCount: Number(inventoryCount()),
-    preparationTime: Number(preparationTime()),
-    allergens: JSON.stringify(allergenValues),
-    nutritionalInfo: nutritionalInfo().trim() || '{}',
-    categoryId: categoryId() ? Number(categoryId()) : null,
-    manufacturerId: manufacturerId() ? Number(manufacturerId()) : null,
-  })
+    inventoryCount: inventoryCount(),
+    preparationTime: preparationTime(),
+    allergens: allergens(),
+    nutritionalInfo: nutritionalInfo(),
+    categoryId: categoryId(),
+    manufacturerId: manufacturerId(),
+  }, currency()))
 }
 
 function errorMessages(): string[] {
@@ -121,7 +129,7 @@ function errorMessages(): string[] {
         <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" type="text" maxlength="100" 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 sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" rows="3" 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">Price ({{ currency() }})</span><input x-model="price" type="number" min="1" step="0.01" 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">Price ({{ currency() }})</span><input x-model="price" type="number" min="0" :step="moneyInputStep(currency())" inputmode="decimal" required :aria-invalid="price() !== '' && priceError() !== ''" 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 :if="price() !== '' && priceError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ priceError() }}</span></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Inventory count</span><input x-model="inventoryCount" type="number" min="0" step="1" 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">Preparation time (minutes)</span><input x-model="preparationTime" type="number" min="1" step="1" 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="flex gap-3 items-center self-end px-3 py-2 min-h-10 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-md dark:border-neutral-700"><input x-model="isAvailable" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Available for commerce</span></label>

package/resources/components/Dashboard/Commerce/CommerceProductsDashboard.stx

@@ -3,9 +3,11 @@ import type {
   CommerceProductRecord,
   CommerceProductSummary,
   ProductOption,
+  ProductWritePayload,
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { minorToInput } from '@stacksjs/commerce/money'
 
 interface ProductIndexResponse {
   records: CommerceProductRecord[]
@@ -15,20 +17,6 @@ interface ProductIndexResponse {
   defaultCurrency: string
 }
 
-interface ProductWritePayload {
-  name: string
-  description: string
-  price: number
-  imageUrl: string
-  isAvailable: boolean
-  inventoryCount: number
-  preparationTime: number
-  allergens: string
-  nutritionalInfo: string
-  categoryId: number | null
-  manufacturerId: number | null
-}
-
 const emptySummary: CommerceProductSummary = {
   total: 0,
   available: 0,
@@ -135,7 +123,8 @@ function exportHref(): string {
     record.id,
     record.name,
     record.description,
-    String(record.price),
+    // Stored as integer minor units; the CSV carries the decimal a person reads.
+    minorToInput(record.price, defaultCurrency()),
     defaultCurrency(),
     record.isAvailable ? 'Available' : 'Unavailable',
     String(record.inventoryCount),

package/resources/components/Dashboard/Commerce/CommerceProductsTable.stx

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceProductRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CommerceProductRecord[])
 const loading = useReactiveProp('loading', false)
@@ -11,12 +12,7 @@ function initials(name: string): string {
 }
 
 function formatMoney(value: number): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency() }).format(value)
-  }
-  catch {
-    return `${value.toFixed(2)} ${currency()}`
-  }
+  return formatCurrency(value, currency())
 }
 
 function availabilityClass(record: CommerceProductRecord): string {

package/resources/components/Dashboard/Commerce/Delivery/ShippingMethodDialog.stx

@@ -1,4 +1,5 @@
 <script client>
+import { minorToInput, moneyInputError, parseMoneyInput } from '@stacksjs/commerce/money'
 interface ShippingMethodRecord {
   id: number
   name: string
@@ -33,33 +34,34 @@ effect(() => {
   hydrationKey = nextKey
   name.set(current?.name || '')
   description.set(current?.description || '')
-  baseRate.set(current ? (current.base_rate / 100).toFixed(2) : '')
+  baseRate.set(current ? minorToInput(current.base_rate, 'USD') : '')
   freeShipping.set(current?.free_shipping === null || current?.free_shipping === undefined
     ? ''
-    : (current.free_shipping / 100).toFixed(2))
+    : minorToInput(current.free_shipping, 'USD'))
   status.set(current?.status || 'active')
 })
 
+// Amounts are typed in dollars and stored as integer cents.
 function submit(): void {
-  const baseRateValue = Number(baseRate())
-  const freeShippingValue = freeShipping().trim() === '' ? null : Number(freeShipping())
   if (!name().trim()) {
     emit('invalid', 'Method name is required.')
     return
   }
-  if (!Number.isFinite(baseRateValue) || baseRateValue < 0) {
-    emit('invalid', 'Base rate must be a non-negative amount.')
+  const baseRateError = moneyInputError(baseRate(), 'USD')
+  if (baseRateError) {
+    emit('invalid', `Base rate: ${baseRateError}`)
     return
   }
-  if (freeShippingValue !== null && (!Number.isFinite(freeShippingValue) || freeShippingValue < 0)) {
-    emit('invalid', 'Free shipping threshold must be empty or a non-negative amount.')
+  const freeShippingError = moneyInputError(freeShipping(), 'USD', { required: false })
+  if (freeShippingError) {
+    emit('invalid', `Free shipping threshold: ${freeShippingError}`)
     return
   }
   emit('submit', {
     name: name().trim(),
     description: description().trim(),
-    baseRate: Math.round(baseRateValue * 100),
-    freeShipping: freeShippingValue === null ? null : Math.round(freeShippingValue * 100),
+    baseRate: parseMoneyInput(baseRate(), 'USD'),
+    freeShipping: parseMoneyInput(freeShipping(), 'USD', { required: false }),
     status: status(),
   })
 }

package/resources/components/Dashboard/Commerce/Delivery/ShippingMethodsTable.stx

@@ -1,4 +1,5 @@
 <script client>
+import { formatCurrency as formatMinorUnits } from '@stacksjs/commerce/money'
 interface ShippingZoneSummary {
   id: number
   name: string
@@ -17,14 +18,12 @@ interface ShippingMethodRow {
 const methods = useReactiveProp('methods', [] as ShippingMethodRow[])
 const emit = defineEmits()
 
+// Shipping amounts are stored as integer cents, in USD.
 function formatCurrency(cents?: number | null): string {
   if (cents === null || cents === undefined)
     return 'Not available'
 
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(cents / 100)
+  return formatMinorUnits(cents, 'USD', 'en-US')
 }
 
 function statusClass(status: string): string {

package/resources/components/Dashboard/Commerce/Delivery/ShippingRateDialog.stx

@@ -1,4 +1,5 @@
 <script client>
+import { minorToInput, moneyInputError, parseMoneyInput } from '@stacksjs/commerce/money'
 interface ShippingResourceOption {
   id: number
   name: string
@@ -42,7 +43,7 @@ effect(() => {
   zoneId.set(current ? String(current.shipping_zone_id) : '')
   weightFrom.set(current ? String(current.weight_from) : '')
   weightTo.set(current ? String(current.weight_to) : '')
-  amount.set(current ? (current.rate / 100).toFixed(2) : '')
+  amount.set(current ? minorToInput(current.rate, 'USD') : '')
 })
 
 function submit(): void {
@@ -50,7 +51,6 @@ function submit(): void {
   const selectedZoneId = Number(zoneId())
   const from = Number(weightFrom())
   const to = Number(weightTo())
-  const rate = Number(amount())
 
   if (!Number.isInteger(selectedMethodId) || selectedMethodId < 1) {
     emit('invalid', 'Select a shipping method.')
@@ -68,8 +68,10 @@ function submit(): void {
     emit('invalid', 'Ending weight must be greater than or equal to the starting weight.')
     return
   }
-  if (!Number.isFinite(rate) || rate < 0) {
-    emit('invalid', 'Rate must be a non-negative amount.')
+  // Typed in dollars, stored as integer cents.
+  const rateError = moneyInputError(amount(), 'USD')
+  if (rateError) {
+    emit('invalid', `Rate: ${rateError}`)
     return
   }
 
@@ -78,7 +80,7 @@ function submit(): void {
     shippingZoneId: selectedZoneId,
     weightFrom: from,
     weightTo: to,
-    rate: Math.round(rate * 100),
+    rate: parseMoneyInput(amount(), 'USD'),
   })
 }
 </script>

package/resources/components/Dashboard/Commerce/Delivery/ShippingRatesDashboard.stx

@@ -1,6 +1,7 @@
 <script client>
 import { dashboardApi } from '../../../../../functions/dashboard-api'
 import { pushToast } from '../../../../../functions/toasts'
+import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
 
 interface ShippingResourceOption {
   id: number
@@ -69,7 +70,7 @@ function filteredRecords(): ShippingRateRecord[] {
     record.shipping_zone?.name,
     record.weight_from,
     record.weight_to,
-    record.rate / 100,
+    minorToInput(record.rate, 'USD'),
   ].some(value => String(value ?? '').toLowerCase().includes(query)))
 }
 
@@ -86,7 +87,7 @@ function averageRate(): string {
   if (!records().length)
     return '$0.00'
   const average = records().reduce((sum, record) => sum + record.rate, 0) / records().length
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(average / 100)
+  return formatCurrency(average, 'USD', 'en-US')
 }
 
 function metricCards(): Array<{ label: string, value: string, detail: string }> {

package/resources/components/Dashboard/Commerce/Delivery/ShippingRatesTable.stx

@@ -1,4 +1,5 @@
 <script client>
+import { formatCurrency as formatMinorUnits } from '@stacksjs/commerce/money'
 interface ResourceSummary {
   id: number
   name: string
@@ -18,11 +19,9 @@ interface ShippingRateRow {
 const rates = useReactiveProp('rates', [] as ShippingRateRow[])
 const emit = defineEmits()
 
+// Shipping amounts are stored as integer cents, in USD.
 function formatCurrency(cents: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(cents / 100)
+  return formatMinorUnits(cents, 'USD', 'en-US')
 }
 
 function formatWeight(weight: number): string {

package/resources/components/Dashboard/Commerce/PaymentDetailsDialog.stx

@@ -1,6 +1,7 @@
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import { isRefundablePayment } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as PaymentRecord | null)
@@ -11,12 +12,7 @@ function label(value: string): string {
 }
 
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value / 100)
-  }
-  catch {
-    return `${currency} ${(value / 100).toFixed(2)}`
-  }
+  return formatCurrency(value, currency)
 }
 
 function detailRows(): Array<{ label: string, value: string }> {

package/resources/components/Dashboard/Commerce/PaymentRefundDialog.stx

@@ -1,5 +1,6 @@
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import { formatCurrency, minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as PaymentRecord | null)
@@ -18,7 +19,7 @@ effect(() => {
   if (!payment || hydrationKey === key)
     return
   hydrationKey = key
-  amount.set(((payment.amount - payment.refundAmount) / 100).toFixed(2))
+  amount.set(minorToInput(payment.amount - payment.refundAmount, payment.currency))
 })
 
 function remaining(): number {
@@ -26,9 +27,15 @@ function remaining(): number {
   return payment ? Math.max(0, payment.amount - payment.refundAmount) : 0
 }
 
+function paymentCurrency(): string {
+  return record()?.currency || 'USD'
+}
+
+// What was typed, in integer minor units, or 0 while it is not a valid amount.
 function amountCents(): number {
-  const parsed = Number(amount())
-  return Number.isFinite(parsed) ? Math.round(parsed * 100) : 0
+  if (moneyInputError(amount(), paymentCurrency(), { min: 1 }))
+    return 0
+  return parseMoneyInput(amount(), paymentCurrency(), { min: 1 })
 }
 
 function valid(): boolean {
@@ -37,12 +44,7 @@ function valid(): boolean {
 }
 
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value / 100)
-  }
-  catch {
-    return `${currency} ${(value / 100).toFixed(2)}`
-  }
+  return formatCurrency(value, currency)
 }
 
 function submit(): void {
@@ -59,7 +61,7 @@ function submit(): void {
   @close="emit('close')"
 >
     <form id="payment-refund-form" @submit.prevent="submit">
-        <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Refund amount</span><input x-model="amount" type="number" min="0.01" :max="remaining() / 100" step="0.01" 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">Refund amount</span><input x-model="amount" type="number" :min="minorToInput(1, paymentCurrency())" :max="minorToInput(remaining(), paymentCurrency())" :step="moneyInputStep(paymentCurrency())" 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>
         <p class="mt-2 text-amber-700 text-xs dark:text-amber-300">This records an already confirmed processor refund. It does not initiate money movement.</p>
     </form>
   <template #footer>

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

@@ -5,6 +5,7 @@ import type {
   AbandonedCartSummary,
   RecoveryCampaignRecord,
 } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 
@@ -88,17 +89,9 @@ effect(() => {
   page.set(1)
 })
 
+/** Cart totals and campaign thresholds are integer minor units (stacksjs/stacks#2851). */
 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()}`
-  }
+  return formatCurrency(value, summary().currency || defaultCurrency())
 }
 
 function percentage(value: number): string {

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

@@ -1,18 +1,13 @@
 <script client>
 import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as AbandonedCartRecord[])
 const loading = useReactiveProp('loading', false)
 
+/** A cart's total is integer minor units, like every commerce amount (stacksjs/stacks#2851). */
 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}`
-  }
+  return formatCurrency(value, currency)
 }
 
 /**

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

@@ -5,6 +5,7 @@ import type {
   CampaignStatus,
   CampaignType,
 } from '../../../../app/Actions/Dashboard/Marketing/campaign-records'
+import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -25,6 +26,9 @@ const fromName = state('')
 const fromAddress = state('')
 const emailListId = state('')
 const scheduledAt = state('')
+// Budget and spend as typed, in major units of `currency`. The record and
+// the API hold integer minor units (1999 is $19.99), converted at this
+// boundary through @stacksjs/commerce/money.
 const budget = state('')
 const spent = state('0')
 const currency = state('USD')
@@ -33,6 +37,8 @@ const endDate = state('')
 const canSubmit = derived(() => {
   if (!name().trim())
     return false
+  if (budgetError() || spentError())
+    return false
   return type() !== 'email'
     || Boolean(subject().trim() && template().trim() && emailListId())
 })
@@ -67,13 +73,22 @@ effect(() => {
   fromAddress.set(current?.fromAddress || '')
   emailListId.set(current?.emailListId || '')
   scheduledAt.set(localDateTime(current?.scheduledAt || ''))
-  budget.set(current?.budget ? String(current.budget) : '')
-  spent.set(String(current?.spent || 0))
-  currency.set(current?.currency || defaultCurrency())
+  const recordCurrency = current?.currency || defaultCurrency()
+  budget.set(current?.budget ? minorToInput(current.budget, recordCurrency) : '')
+  spent.set(minorToInput(current?.spent || 0, recordCurrency))
+  currency.set(recordCurrency)
   startDate.set(localDateTime(current?.startDate || ''))
   endDate.set(localDateTime(current?.endDate || ''))
 })
 
+function budgetError(): string {
+  return moneyInputError(budget(), currency(), { required: false })
+}
+
+function spentError(): string {
+  return moneyInputError(spent(), currency(), { required: false })
+}
+
 function normalizeType(event: Event): void {
   const nextType = (event.target as HTMLSelectElement).value as CampaignType
   if (nextType === 'email')
@@ -85,6 +100,7 @@ function normalizeType(event: Event): void {
 function submit(): void {
   if (!canSubmit())
     return
+  const code = currency().trim().toUpperCase()
   emit('submit', {
     name: name().trim(),
     description: description().trim(),
@@ -97,9 +113,9 @@ function submit(): void {
     fromAddress: fromAddress().trim(),
     emailListId: emailListId() || null,
     scheduledAt: databaseDateTime(scheduledAt()) || null,
-    budget: budget(),
-    spent: spent(),
-    currency: currency().trim().toUpperCase(),
+    budget: parseMoneyInput(budget(), code, { required: false }),
+    spent: parseMoneyInput(spent(), code, { required: false }) ?? 0,
+    currency: code,
     startDate: databaseDateTime(startDate()),
     endDate: databaseDateTime(endDate()),
   })
@@ -200,12 +216,14 @@ function submit(): void {
           </label>
           <label class="block">
             <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Budget</span>
-            <input x-model="budget" type="number" min="0" step="0.01" 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" />
+            <input x-model="budget" type="number" min="0" :step="moneyInputStep(currency())" 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 :if="budgetError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ budgetError() }}</span>
           </label>
           <div class="grid gap-3 grid-cols-[1fr_7rem]">
             <label class="block">
               <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Spent</span>
-              <input x-model="spent" type="number" min="0" step="0.01" 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" />
+              <input x-model="spent" type="number" min="0" :step="moneyInputStep(currency())" 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 :if="spentError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ spentError() }}</span>
             </label>
             <label class="block">
               <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Currency</span>

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

@@ -27,8 +27,10 @@ interface CampaignPayload {
   fromAddress: string
   emailListId: string | null
   scheduledAt: string | null
-  budget: string
-  spent: string
+  /** Integer minor units of `currency`, or null for no budget. */
+  budget: number | null
+  /** Integer minor units of `currency`. */
+  spent: number
   currency: string
   startDate: string
   endDate: string