@stacksjs/defaults 0.75.38 → 0.75.41

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>

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 {