@stacksjs/defaults 0.75.37 → 0.75.40

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 {

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>