@stacksjs/defaults 0.75.37 → 0.75.40

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

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

@@ -1,6 +1,7 @@
 <script client>
 import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
 import { reachOf } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { formatCurrency, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const records = useReactiveProp('records', [] as AbandonedCartRecord[])
@@ -16,7 +17,9 @@ const text = state('')
 const fromName = state('')
 const fromAddress = state('')
 const idleHours = state(4)
-const minimumValue = state(0)
+// The threshold as typed, in major units. Carts and the stored rule hold
+// integer minor units (stacksjs/stacks#2851).
+const minimumValue = state('0')
 const scheduledAt = state('')
 let hydrated = false
 
@@ -34,7 +37,7 @@ effect(() => {
   fromName.set('')
   fromAddress.set('')
   idleHours.set(defaultIdleHours())
-  minimumValue.set(0)
+  minimumValue.set('0')
   scheduledAt.set('')
 })
 
@@ -46,22 +49,30 @@ effect(() => {
  * 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)
+  return reachOf(records(), Number(idleHours()) || 0, minimumMinor())
+}
+
+function minimumError(): string {
+  return moneyInputError(minimumValue(), defaultCurrency(), { required: false })
+}
+
+/** The typed threshold in minor units, or 0 while it is empty or unreadable. */
+function minimumMinor(): number {
+  if (minimumError())
+    return 0
+  return parseMoneyInput(minimumValue(), defaultCurrency(), { required: false }) ?? 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()}`
-  }
+  return formatCurrency(value, defaultCurrency())
 }
 
 function submit(): void {
   const when = scheduledAt() ? new Date(scheduledAt()) : null
   if (when && !Number.isFinite(when.getTime()))
     return
+  if (minimumError())
+    return
 
   emit('submit', {
     name: name(),
@@ -70,7 +81,7 @@ function submit(): void {
     fromName: fromName(),
     fromAddress: fromAddress(),
     idleHours: Number(idleHours()) || 0,
-    minimumValue: Number(minimumValue()) || 0,
+    minimumValue: minimumMinor(),
     scheduledAt: when ? when.toISOString() : null,
     currency: defaultCurrency(),
   })
@@ -101,8 +112,9 @@ function submit(): void {
       </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>
+        <input x-model="minimumValue" type="number" min="0" :step="moneyInputStep(defaultCurrency())" 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="minimumError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ minimumError() }}</span>
+        <span :if="!minimumError()" class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave at zero to chase every cart.</span>
       </label>
     </div>
 
@@ -139,7 +151,7 @@ function submit(): void {
   <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>
+      <Button :disabled="busy() || !name() || !subject() || !!minimumError()" :loading="busy()" @click="submit()">{{ scheduledAt() ? 'Schedule campaign' : 'Save as draft' }}</Button>
     </div>
   </template>
 </Modal>

package/resources/components/Dashboard/Transaction/index.stx

@@ -1,4 +1,6 @@
 <script server>
+import { formatCurrency } from '@stacksjs/commerce/money'
+
 interface indexProps {
   transactionHistory?: any[]
 }
@@ -15,8 +17,9 @@ function formatTimestampDate(timestamp: number) {
     return lineData?.[0]?.plan?.interval || ''
   }
 
-  function getUnitPrice(lineData: Array<{ price?: { unit_amount?: number | string } }> | undefined) {
-    return (Number(lineData?.[0]?.price?.unit_amount || 0) / 100).toFixed(2)
+  // Stripe reports `unit_amount` in the currency's minor unit.
+  function getUnitPrice(lineData: Array<{ price?: { unit_amount?: number | string, currency?: string } }> | undefined) {
+    return formatCurrency(lineData?.[0]?.price?.unit_amount || 0, lineData?.[0]?.price?.currency || 'USD')
   }
 
   function getLastDigits(paymentIntent: { payment_method?: { card?: { last4?: string } } } | undefined) {
@@ -66,7 +69,7 @@ function formatTimestampDate(timestamp: number) {
                   {{ formatTimestampDate(transaction.created_at) }}
                 </td>
                 <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
-                  ${{ getUnitPrice(transaction.unit_price) }}
+                  {{ getUnitPrice(transaction.unit_price) }}
                 </td>
                 <td class="flex items-center px-3 py-4 space-x-2 text-gray-500 text-sm whitespace-nowrap">
                   <slot name="cardBrand" />

package/resources/components/Storefront/CartDrawer.stx

@@ -143,7 +143,11 @@
     return String(s ?? '').replace(/[&<>"']/g, c => entities[c] ?? c)
   }
 
-  const render = (items: Array<{ slug?: string, name?: string, image?: string, qty?: number | string, price?: number | string, lineTotal?: number | string }> | null | undefined, subtotal: number | string) => {
+  // Amounts arrive from /api/cart already formatted (`priceLabel`,
+  // `lineTotalLabel`, `subtotalLabel`): the stored values are integer minor
+  // units of the cart's currency, and only the server formats them, through
+  // @stacksjs/commerce/money.
+  const render = (items: Array<{ slug?: string, name?: string, image?: string, qty?: number | string, priceLabel?: string, lineTotalLabel?: string }> | null | undefined, subtotalLabel: string) => {
     if (!list || !empty || !footer) return
     if (!items || items.length === 0) {
       list.classList.add('hidden')
@@ -159,8 +163,8 @@
       const name = escapeHtml(it.name || '')
       const image = escapeHtml(it.image || '')
       const qty = Number(it.qty) || 0
-      const price = Number(it.price) || 0
-      const lineTotal = Number(it.lineTotal) || 0
+      const priceLabel = escapeHtml(it.priceLabel || '')
+      const lineTotalLabel = escapeHtml(it.lineTotalLabel || '')
       return [
         '<li class="flex gap-3 items-start">',
         '  <a href="/products/' + slug + '" class="block overflow-hidden flex-shrink-0 h-16 w-16 bg-stone-200 rounded-xl">',
@@ -168,13 +172,13 @@
         '  </a>',
         '  <div class="flex-1 min-w-0">',
         '    <p class="font-semibold text-sm text-stone-900 truncate">' + name + '</p>',
-        '    <p class="mt-0.5 text-stone-500 text-xs">Qty ' + qty + ' · $' + price.toFixed(2) + '</p>',
+        '    <p class="mt-0.5 text-stone-500 text-xs">Qty ' + qty + ' · ' + priceLabel + '</p>',
         '  </div>',
-        '  <p class="font-semibold text-sm text-stone-900">$' + lineTotal.toFixed(2) + '</p>',
+        '  <p class="font-semibold text-sm text-stone-900">' + lineTotalLabel + '</p>',
         '</li>',
       ].join('')
     }).join('')
-    if (subtotalEl) subtotalEl.textContent = '$' + (Number(subtotal) || 0).toFixed(2)
+    if (subtotalEl) subtotalEl.textContent = subtotalLabel
   }
 
   let inflightRefresh: Promise<void> | null = null
@@ -193,7 +197,7 @@
         })
         if (!res.ok) return
         const data = await res.json()
-        render(data.items || [], data.subtotal || 0)
+        render(data.items || [], data.subtotalLabel || '')
         const badge = document.querySelector('[data-stx-cart-count]')
         if (badge) {
           const total = (data.items || []).reduce((sum: number, item: { qty?: number | string }) => sum + (Number(item.qty) || 0), 0)