@stacksjs/defaults 0.75.38 → 0.75.40

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

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
+import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -30,7 +31,8 @@ effect(() => {
   name.set(current?.name || '')
   email.set(current?.email || '')
   phone.set(current?.phone || '')
-  totalSpent.set(String(current?.totalSpent ?? 0))
+  // Stored as integer minor units; the field shows the decimal.
+  totalSpent.set(minorToInput(current?.totalSpent ?? 0, currency()))
   lastOrder.set(current?.lastOrder.slice(0, 10) || '')
   status.set(current?.status === 'Inactive' ? 'Inactive' : 'Active')
   avatar.set(current?.avatar || '')
@@ -47,12 +49,10 @@ function validAvatar(): boolean {
 }
 
 function valid(): boolean {
-  const spend = Number(totalSpent())
   return Boolean(
     name().trim().length >= 2
     && email().trim()
-    && Number.isFinite(spend)
-    && spend >= 0
+    && !moneyInputError(totalSpent(), currency())
     && validAvatar()
   )
 }
@@ -64,7 +64,7 @@ function submit(): void {
     name: name().trim(),
     email: email().trim(),
     phone: phone().trim(),
-    totalSpent: Number(totalSpent()),
+    totalSpent: parseMoneyInput(totalSpent(), currency()),
     lastOrder: lastOrder() || undefined,
     status: status(),
     avatar: avatar().trim(),
@@ -95,7 +95,7 @@ function errorMessages(): string[] {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Email</span><input x-model="email" type="email" 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">Phone <span class="font-normal text-gray-400 dark:text-neutral-500">(optional)</span></span><input x-model="phone" type="tel" maxlength="50" 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">Status</span><select x-model="status" 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"><option value="Active">Active</option><option value="Inactive">Inactive</option></select></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Recorded spend ({{ currency() }})</span><input x-model="totalSpent" type="number" min="0" 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">Recorded spend ({{ currency() }})</span><input x-model="totalSpent" type="number" min="0" :step="moneyInputStep(currency())" 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">Last order</span><input x-model="lastOrder" type="date" 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">Avatar URL</span><input x-model="avatar" type="url" placeholder="https://cdn.example.com/customers/avatar.jpg" 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" /><span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">Use a persisted HTTP asset URL. The dashboard uses initials when rendering the table.</span></label>
         </div>

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

@@ -5,6 +5,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
 
 interface CustomerIndexResponse {
   records: CommerceCustomerRecord[]
@@ -59,16 +60,7 @@ function timestamp(value: string): number {
 }
 
 function formatMoney(value: number): string {
-  try {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: currency(),
-      maximumFractionDigits: 2,
-    }).format(value)
-  }
-  catch {
-    return `${value.toFixed(2)} ${currency()}`
-  }
+  return formatCurrency(value, currency())
 }
 
 function filteredRecords(): CommerceCustomerRecord[] {
@@ -122,7 +114,7 @@ function exportHref(): string {
     record.email,
     record.phone,
     record.status,
-    String(record.totalSpent),
+    minorToInput(record.totalSpent, currency()),
     record.lastOrder,
     record.avatar,
   ])

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

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CommerceCustomerRecord[])
 const loading = useReactiveProp('loading', false)
@@ -7,12 +8,7 @@ const currency = useReactiveProp('currency', 'USD')
 const emit = defineEmits()
 
 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 formatDate(value: string): string {

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

@@ -1,15 +1,11 @@
 <script client>
 import type { GiftCardSummary } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const { summary } = defineProps<{ summary: GiftCardSummary }>()
 
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
-  }
-  catch {
-    return `${currency} ${value.toFixed(2)}`
-  }
+  return formatCurrency(value, currency)
 }
 </script>
 

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

@@ -1,17 +1,13 @@
 <script client>
 import type { GiftCardRecord } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as GiftCardRecord | null)
 const emit = defineEmits()
 
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
-  }
-  catch {
-    return `${currency} ${value.toFixed(2)}`
-  }
+  return formatCurrency(value, currency)
 }
 
 function dateTime(value: string): string {

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

@@ -1,5 +1,6 @@
 <script client>
 import type { GiftCardRecord, GiftCardStatus } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
+import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -8,8 +9,9 @@ const busy = useReactiveProp('busy', false)
 const errors = useReactiveProp('errors', {} as Record<string, string>)
 const emit = defineEmits()
 const code = state('')
-const initialBalance = state('50')
-const currentBalance = state('50')
+// Balances as typed, in major units. Stored as integer minor units.
+const initialBalance = state('50.00')
+const currentBalance = state('50.00')
 const currency = state('USD')
 const status = state<GiftCardStatus>('ACTIVE')
 const purchaserId = state('')
@@ -24,7 +26,7 @@ const lastUsedDate = state('')
 const templateId = state('')
 const customerId = state('')
 let hydrationKey = ''
-let previousInitialBalance = '50'
+let previousInitialBalance = '50.00'
 
 function generatedCode(): string {
   const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
@@ -61,11 +63,12 @@ effect(() => {
     return
   hydrationKey = key
   code.set(current?.code || generatedCode())
-  const hydratedInitialBalance = String(current?.initialBalance || 50)
+  const cardCurrency = current?.currency || 'USD'
+  const hydratedInitialBalance = current?.initialBalance ? minorToInput(current.initialBalance, cardCurrency) : '50.00'
   initialBalance.set(hydratedInitialBalance)
-  currentBalance.set(String(current?.currentBalance ?? current?.initialBalance ?? 50))
+  currentBalance.set(current ? minorToInput(current.currentBalance ?? current.initialBalance, cardCurrency) : hydratedInitialBalance)
   previousInitialBalance = hydratedInitialBalance
-  currency.set(current?.currency || 'USD')
+  currency.set(cardCurrency)
   status.set(current?.status || 'ACTIVE')
   purchaserId.set(current?.purchaserId || '')
   recipientEmail.set(current?.recipientEmail || '')
@@ -102,13 +105,13 @@ function optionalCustomerId(): number | undefined {
 }
 
 function balanceError(): string {
-  const initial = Number(initialBalance())
-  const current = Number(currentBalance())
-  if (!Number.isFinite(initial) || initial < 1)
-    return 'Initial balance must be at least 1.'
-  if (!Number.isFinite(current) || current < 0)
-    return 'Current balance cannot be negative.'
-  if (current > initial)
+  const initialError = moneyInputError(initialBalance(), currency(), { min: 1 })
+  if (initialError)
+    return `Initial balance: ${initialError}`
+  const currentError = moneyInputError(currentBalance(), currency())
+  if (currentError)
+    return `Current balance: ${currentError}`
+  if (parseMoneyInput(currentBalance(), currency()) > parseMoneyInput(initialBalance(), currency()))
     return 'Current balance cannot exceed the initial balance.'
   return ''
 }
@@ -126,8 +129,8 @@ function submit(): void {
     return
   emit('submit', {
     code: code().trim().toUpperCase(),
-    initialBalance: Number(initialBalance()),
-    currentBalance: Number(currentBalance()),
+    initialBalance: parseMoneyInput(initialBalance(), currency()),
+    currentBalance: parseMoneyInput(currentBalance(), currency()),
     currency: currency().trim().toUpperCase(),
     status: status(),
     purchaser_id: purchaserId().trim() || undefined,
@@ -165,8 +168,8 @@ function errorMessages(): string[] {
         </ul>
         <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">Code</span><input x-model="code" type="text" maxlength="50" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm uppercase 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">Initial balance</span><input x-model="initialBalance" 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" @input="syncCurrentBalance($event)" /></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Current balance</span><input x-model="currentBalance" :max="initialBalance()" type="number" min="0" 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">Initial balance</span><input x-model="initialBalance" type="number" min="0" :step="moneyInputStep(currency())" 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" @input="syncCurrentBalance($event)" /></label>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Current balance</span><input x-model="currentBalance" :max="initialBalance()" type="number" min="0" :step="moneyInputStep(currency())" 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 :if="balanceError()" class="sm:col-span-2 -mt-2 text-red-600 text-xs dark:text-red-400">{{ balanceError() }}</p>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Currency</span><input x-model="currency" type="text" minlength="3" maxlength="3" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm uppercase 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">Status</span><select x-model="status" 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"><option value="ACTIVE">Active</option><option value="USED">Used</option><option value="EXPIRED">Expired</option><option value="DEACTIVATED">Deactivated</option></select></label>

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

@@ -6,6 +6,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { minorToInput } from '@stacksjs/commerce/money'
 
 interface GiftCardIndexResponse {
   records: GiftCardRecord[]
@@ -125,8 +126,8 @@ function exportHref(): string {
     record.isDigital ? 'Digital' : 'Physical',
     record.isReloadable ? 'Reloadable' : 'Single use',
     record.currency,
-    String(record.initialBalance),
-    String(record.currentBalance),
+    minorToInput(record.initialBalance, record.currency),
+    minorToInput(record.currentBalance, record.currency),
     record.expiryDate,
     record.lastUsedDate,
   ])

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

@@ -1,5 +1,6 @@
 <script client>
 import type { GiftCardRecord, GiftCardStatus } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const { records = [], loading = false } = defineProps<{ records: GiftCardRecord[], loading?: boolean }>()
 const emit = defineEmits<{
@@ -9,12 +10,7 @@ const emit = defineEmits<{
 }>()
 
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
-  }
-  catch {
-    return `${currency} ${value.toFixed(2)}`
-  }
+  return formatCurrency(value, currency)
 }
 
 function date(value: string): string {

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

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

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

@@ -3,6 +3,7 @@ import type {
   CommerceOrderRecord,
   OrderCustomerOption,
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-order-records'
+import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -43,12 +44,14 @@ effect(() => {
   customerId.set(current?.customerId || '')
   couponId.set(current?.couponId || '')
   status.set(current?.status || statuses()[0] || 'PENDING')
-  totalAmount.set(String(current?.totalAmount ?? 0))
-  currency.set(current?.currency || defaultCurrency())
-  taxAmount.set(String(current?.taxAmount ?? 0))
-  discountAmount.set(String(current?.discountAmount ?? 0))
-  deliveryFee.set(String(current?.deliveryFee ?? 0))
-  tipAmount.set(String(current?.tipAmount ?? 0))
+  // Stored amounts are integer minor units; the fields show the decimal.
+  const orderCurrency = current?.currency || defaultCurrency()
+  currency.set(orderCurrency)
+  totalAmount.set(minorToInput(current?.totalAmount ?? 0, orderCurrency))
+  taxAmount.set(minorToInput(current?.taxAmount ?? 0, orderCurrency))
+  discountAmount.set(minorToInput(current?.discountAmount ?? 0, orderCurrency))
+  deliveryFee.set(minorToInput(current?.deliveryFee ?? 0, orderCurrency))
+  tipAmount.set(minorToInput(current?.tipAmount ?? 0, orderCurrency))
   orderType.set(current?.orderType || orderTypes()[0] || 'DELIVERY')
   deliveryAddress.set(current?.deliveryAddress || '')
   specialInstructions.set(current?.specialInstructions || '')
@@ -60,9 +63,14 @@ function label(value: string): string {
   return value.replaceAll('_', ' ').toLowerCase().replace(/\b\w/g, letter => letter.toUpperCase())
 }
 
-function validNumber(value: string): boolean {
-  const result = Number(value)
-  return Number.isFinite(result) && result >= 0
+// An empty optional amount means zero, as it did before amounts were
+// converted to minor units.
+function validNumber(value: string, required = false): boolean {
+  return !moneyInputError(value, currency(), { required })
+}
+
+function minorAmount(value: string): number {
+  return parseMoneyInput(value, currency(), { required: false }) ?? 0
 }
 
 function valid(): boolean {
@@ -70,7 +78,7 @@ function valid(): boolean {
     status().trim()
     && orderType().trim()
     && currency().trim().length === 3
-    && validNumber(totalAmount())
+    && validNumber(totalAmount(), true)
     && validNumber(taxAmount())
     && validNumber(discountAmount())
     && validNumber(deliveryFee())
@@ -85,12 +93,12 @@ function submit(): void {
     customerId: customerId() ? Number(customerId()) : undefined,
     couponId: couponId() ? Number(couponId()) : undefined,
     status: status().trim(),
-    totalAmount: Number(totalAmount()),
+    totalAmount: parseMoneyInput(totalAmount(), currency()),
     currency: currency().trim().toUpperCase(),
-    taxAmount: Number(taxAmount()),
-    discountAmount: Number(discountAmount()),
-    deliveryFee: Number(deliveryFee()),
-    tipAmount: Number(tipAmount()),
+    taxAmount: minorAmount(taxAmount()),
+    discountAmount: minorAmount(discountAmount()),
+    deliveryFee: minorAmount(deliveryFee()),
+    tipAmount: minorAmount(tipAmount()),
     orderType: orderType().trim(),
     deliveryAddress: deliveryAddress().trim() || undefined,
     specialInstructions: specialInstructions().trim() || undefined,
@@ -123,11 +131,11 @@ function errorMessages(): string[] {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" 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"><template :for="option in statuses()" :key="option"><option :value="option">{{ label(option) }}</option></template></select></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order type</span><select x-model="orderType" 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"><template :for="option in orderTypes()" :key="option"><option :value="option">{{ label(option) }}</option></template></select></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Currency</span><input x-model="currency" type="text" minlength="3" maxlength="3" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm uppercase 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">Total amount</span><input x-model="totalAmount" type="number" min="0" 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">Tax amount</span><input x-model="taxAmount" 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" /></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Discount amount</span><input x-model="discountAmount" 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" /></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Delivery fee</span><input x-model="deliveryFee" 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" /></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Tip amount</span><input x-model="tipAmount" 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" /></label>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Total amount</span><input x-model="totalAmount" type="number" min="0" :step="moneyInputStep(currency())" 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">Tax amount</span><input x-model="taxAmount" 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" /></label>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Discount amount</span><input x-model="discountAmount" 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" /></label>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Delivery fee</span><input x-model="deliveryFee" 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" /></label>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Tip amount</span><input x-model="tipAmount" 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" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Estimated delivery time</span><input x-model="estimatedDeliveryTime" 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" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Coupon relation ID</span><input x-model="couponId" type="number" min="1" 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" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Applied coupon reference</span><input x-model="appliedCouponId" type="text" class="mt-1 px-3 py-2 w-full font-mono 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>

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

@@ -6,6 +6,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-order-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
 
 interface OrderIndexResponse {
   records: CommerceOrderRecord[]
@@ -75,16 +76,7 @@ function timestamp(value: string): number {
 }
 
 function formatMoney(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency,
-      maximumFractionDigits: 2,
-    }).format(value)
-  }
-  catch {
-    return `${value.toFixed(2)} ${currency}`
-  }
+  return formatCurrency(value, currency)
 }
 
 function label(value: string): string {
@@ -154,12 +146,12 @@ function exportHref(): string {
     record.status,
     record.orderType,
     String(record.itemCount),
-    String(record.totalAmount),
+    minorToInput(record.totalAmount, record.currency),
     record.currency,
-    String(record.taxAmount),
-    String(record.discountAmount),
-    String(record.deliveryFee),
-    String(record.tipAmount),
+    minorToInput(record.taxAmount, record.currency),
+    minorToInput(record.discountAmount, record.currency),
+    minorToInput(record.deliveryFee, record.currency),
+    minorToInput(record.tipAmount, record.currency),
     record.deliveryAddress,
     record.createdAt,
   ])

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

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

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

@@ -3,6 +3,7 @@ import type {
   PaymentRecord,
 } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import { isSuccessfulPayment } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 interface CountRow {
   key: string
@@ -55,12 +56,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)
 }
 </script>
 

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

@@ -1,5 +1,6 @@
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as PaymentRecord[])
 const loading = useReactiveProp('loading', false)
@@ -10,12 +11,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 date(value: string): string {

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

@@ -1,4 +1,5 @@
 <script client>
+import { formatCurrency } from '@stacksjs/commerce/money'
 interface PosCartLine {
   productId: string
   name: string
@@ -17,12 +18,7 @@ const totalAmount = useReactiveProp('totalAmount', 0)
 const emit = defineEmits()
 
 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())
 }
 </script>
 

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

@@ -1,6 +1,7 @@
 <script client>
 import type { CommercePosProduct } from '../../../../app/Actions/Dashboard/Commerce/commerce-pos'
 import type { ProductOption } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const products = useReactiveProp('products', [] as CommercePosProduct[])
 const categories = useReactiveProp('categories', [] as ProductOption[])
@@ -16,12 +17,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 sellable(product: CommercePosProduct): boolean {

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

@@ -1,5 +1,6 @@
 <script client>
 import type { CommercePosCustomer } from '../../../../app/Actions/Dashboard/Commerce/commerce-pos'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 interface PosPaymentMethod {
   id: string
@@ -38,12 +39,7 @@ effect(() => {
 })
 
 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 submit(): void {

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

@@ -6,6 +6,7 @@ import type {
 import type { ProductOption } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 interface PosPaymentMethod {
   id: string
@@ -91,8 +92,10 @@ const checkoutKey = state('')
 const receipt = state<PosReceipt | null>(null)
 const receiptOpen = state(false)
 
+// Amounts are integer minor units (cents for USD). Only tax can produce a
+// fraction of one, and it rounds to the nearest unit as the server does.
 function money(value: number): number {
-  return Math.round((value + Number.EPSILON) * 100) / 100
+  return Math.round(value)
 }
 
 function cartUnits(): number {
@@ -112,12 +115,7 @@ function totalAmount(): number {
 }
 
 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 visibleProducts(): CommercePosProduct[] {

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

@@ -1,4 +1,5 @@
 <script client>
+import { formatCurrency } from '@stacksjs/commerce/money'
 interface PosReceiptLine {
   productId: number
   name: string
@@ -25,14 +26,7 @@ const receipt = useReactiveProp('receipt', null as PosReceipt | null)
 const emit = defineEmits()
 
 function formatMoney(value: number): string {
-  const current = receipt()
-  const currency = current?.currency || 'USD'
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
-  }
-  catch {
-    return `${value.toFixed(2)} ${currency}`
-  }
+  return formatCurrency(value, receipt()?.currency || 'USD')
 }
 
 function formatDate(value: string): string {