@stacksjs/defaults 0.75.38 → 0.75.41

package/ide/vscode/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  // The extension is its own little package: a Node (CommonJS) bundle loaded by
+  // VS Code, not part of the app or the framework, so no other tsconfig
+  // includes it. `bun run typecheck` here checks it.
+  "compilerOptions": {
+    "target": "es2022",
+    "lib": ["es2022"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["bun"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*.ts", "tests/**/*.ts"]
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.38",
+  "version": "0.75.41",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -54,9 +54,9 @@
   },
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
-    "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.75.38",
-    "@stacksjs/sanitizer": "^0.2.113",
+    "@iconify-json/hugeicons": "^1.2.35",
+    "@stacksjs/mobile": "^0.75.41",
+    "@stacksjs/sanitizer": "^0.2.348",
     "ts-qr-codes": "^0.1.8"
   }
 }

package/resources/components/Dashboard/Analytics/CampaignAnalytics.stx

@@ -1,6 +1,7 @@
 <script client>
 import type { AnalyticsRange, CampaignAnalyticsResponse } from '../../../../functions/analytics'
 import { fetchCampaignAnalytics } from '../../../../functions/analytics'
+import { formatCurrency } from '@stacksjs/commerce/money'
 import { pushToast } from '../../../../functions/toasts'
 
 const analytics = state<CampaignAnalyticsResponse | null>(null)
@@ -15,10 +16,9 @@ function formatNumber(value: number | null | undefined): string {
     : new Intl.NumberFormat().format(value)
 }
 
-function formatCurrency(value: number | null, currency: string): string {
-  return value === null
-    ? 'Not recorded'
-    : new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
+/** Campaign budgets and spend are integer minor units of `currency` (1999 is $19.99). */
+function formatMoney(value: number | null, currency: string): string {
+  return value === null ? 'Not recorded' : formatCurrency(value, currency)
 }
 
 function formatRate(value: number | null | undefined): string {
@@ -165,7 +165,7 @@ onMount(() => {
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.opens) }}</td>
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.clicks) }}</td>
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.conversions) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatCurrency(campaign.spent, campaign.currency) }}</td>
+                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatMoney(campaign.spent, campaign.currency) }}</td>
               </tr>
             </template>
           </tbody>
@@ -186,8 +186,8 @@ onMount(() => {
                 <p class="text-gray-500 text-xs dark:text-neutral-400">{{ spend.campaigns }} campaigns</p>
               </div>
               <div class="text-right">
-                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ formatCurrency(spend.spent, spend.currency) }}</p>
-                <p class="text-gray-500 text-xs dark:text-neutral-400">of {{ formatCurrency(spend.budget, spend.currency) }}</p>
+                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ formatMoney(spend.spent, spend.currency) }}</p>
+                <p class="text-gray-500 text-xs dark:text-neutral-400">of {{ formatMoney(spend.budget, spend.currency) }}</p>
               </div>
             </div>
           </template>
@@ -233,7 +233,7 @@ onMount(() => {
                 <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ channel.currency }}</td>
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ channel.campaigns }}</td>
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(channel.sent) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatCurrency(channel.spent, channel.currency) }}</td>
+                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatMoney(channel.spent, channel.currency) }}</td>
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatRate(channel.clickRate) }}</td>
                 <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatRate(channel.conversionRate) }}</td>
               </tr>

package/resources/components/Dashboard/Analytics/SalesAnalytics.stx

@@ -1,8 +1,12 @@
 <script client>
 import type { AnalyticsRange, SalesAnalyticsResponse } from '../../../../functions/analytics'
+import { formatCurrency } from '@stacksjs/commerce/money'
 import { fetchSalesAnalytics } from '../../../../functions/analytics'
 import { pushToast } from '../../../../functions/toasts'
 
+// Every amount on this page is a sum of order, payment and line-item columns,
+// which hold integer minor units. formatCurrency converts them for display
+// (stacksjs/stacks#2851).
 const analytics = state<SalesAnalyticsResponse | null>(null)
 const analyticsRange = state<AnalyticsRange>('month')
 const dateRangeDisplay = state('Last 30 days')
@@ -13,9 +17,6 @@ function formatNumber(value: number): string {
   return new Intl.NumberFormat().format(value)
 }
 
-function formatCurrency(value: number, currency: string): string {
-  return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
-}
 
 function formatDateRange(start: string, end: string): string {
   const formatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' })

package/resources/components/Dashboard/Billing/BillingPlanSummary.stx

@@ -1,5 +1,6 @@
 <script client>
 import type { BillingSubscription } from '../../../../functions/billing/dashboard'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const subscription = useReactiveProp<BillingSubscription | null>('subscription', null)
 
@@ -16,7 +17,9 @@ function amount(): string {
     return 'Not reported'
   if (!currency)
     return `${new Intl.NumberFormat().format(value)} minor units`
-  return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency.toUpperCase() }).format(value / 100)
+  // Provider amounts are integer minor units: dividing by 100 was a hundred
+  // times too small for a zero-decimal currency such as JPY.
+  return formatCurrency(value, currency)
 }
 
 function date(value: string): string {

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

@@ -1,12 +1,15 @@
 <script client>
 import type { CouponRecord } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CouponRecord | null)
+const currency = useReactiveProp('currency', 'USD')
 const emit = defineEmits()
 
+// Fixed discounts and order thresholds are integer minor units.
 function money(value: number): string {
-  return new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(value)
+  return formatCurrency(value, currency())
 }
 
 function discount(current: CouponRecord | null): string {

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

@@ -4,10 +4,12 @@ import type {
   CouponRecord,
   CouponStatus,
 } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
+import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
 const record = useReactiveProp('record', null as CouponRecord | null)
+const currency = useReactiveProp('currency', 'USD')
 const busy = useReactiveProp('busy', false)
 const errors = useReactiveProp('errors', {} as Record<string, string>)
 const emit = defineEmits()
@@ -40,9 +42,13 @@ effect(() => {
   status.set(current?.status || 'Active')
   isActive.set(current?.isActive ?? true)
   discountType.set(current?.discountType || 'percentage')
-  discountValue.set(String(current?.discountValue || 10))
-  minOrderAmount.set(current?.minOrderAmount ? String(current.minOrderAmount) : '')
-  maxDiscountAmount.set(current?.maxDiscountAmount ? String(current.maxDiscountAmount) : '')
+  // A percentage is shown as stored; money fields are stored as integer
+  // minor units and shown as the decimal.
+  discountValue.set(current
+    ? current.discountType === 'fixed_amount' ? minorToInput(current.discountValue, currency()) : String(current.discountValue)
+    : '10')
+  minOrderAmount.set(current?.minOrderAmount ? minorToInput(current.minOrderAmount, currency()) : '')
+  maxDiscountAmount.set(current?.maxDiscountAmount ? minorToInput(current.maxDiscountAmount, currency()) : '')
   freeProductId.set(current?.freeProductId || '')
   usageLimit.set(current?.usageLimit ? String(current.usageLimit) : '')
   startDate.set(current?.startDate || '')
@@ -56,8 +62,24 @@ function optionalNumber(value: string): number | undefined {
   return Number.isFinite(result) ? result : undefined
 }
 
+function optionalMoney(value: string): number | undefined {
+  return parseMoneyInput(value, currency(), { required: false }) ?? undefined
+}
+
+function discountValueValid(): boolean {
+  if (discountType() === 'fixed_amount')
+    return !moneyInputError(discountValue(), currency(), { min: 1 })
+  const rate = Number(discountValue())
+  return Number.isFinite(rate) && rate >= 0.01 && rate <= 100
+}
+
 function valid(): boolean {
-  return Boolean(code().trim() && Number(discountValue()) >= 0.01)
+  return Boolean(
+    code().trim()
+    && discountValueValid()
+    && !moneyInputError(minOrderAmount(), currency(), { required: false })
+    && !moneyInputError(maxDiscountAmount(), currency(), { required: false }),
+  )
 }
 
 function submit(): void {
@@ -69,9 +91,11 @@ function submit(): void {
     status: status(),
     isActive: isActive(),
     discountType: discountType(),
-    discountValue: Number(discountValue()),
-    minOrderAmount: optionalNumber(minOrderAmount()),
-    maxDiscountAmount: optionalNumber(maxDiscountAmount()),
+    discountValue: discountType() === 'fixed_amount'
+      ? parseMoneyInput(discountValue(), currency(), { min: 1 })
+      : Number(discountValue()),
+    minOrderAmount: optionalMoney(minOrderAmount()),
+    maxDiscountAmount: optionalMoney(maxDiscountAmount()),
     freeProductId: freeProductId().trim() || undefined,
     usageLimit: optionalNumber(usageLimit()),
     startDate: startDate() || undefined,
@@ -103,9 +127,9 @@ 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" 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="Scheduled">Scheduled</option><option value="Expired">Expired</option></select></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">Discount type</span><select x-model="discountType" 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="percentage">Percentage</option><option value="fixed_amount">Fixed amount</option></select></label>
-          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Discount value</span><input x-model="discountValue" type="number" min="0.01" 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">Minimum order amount</span><input x-model="minOrderAmount" type="number" min="0" step="0.01" placeholder="No minimum" 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">Maximum discount amount</span><input x-model="maxDiscountAmount" type="number" min="0" step="0.01" placeholder="No maximum" 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 value</span><input x-model="discountValue" type="number" :min="discountType() === 'fixed_amount' ? '0' : '0.01'" :step="discountType() === 'fixed_amount' ? moneyInputStep(currency()) : '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">Minimum order amount</span><input x-model="minOrderAmount" type="number" min="0" :step="moneyInputStep(currency())" placeholder="No minimum" 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">Maximum discount amount</span><input x-model="maxDiscountAmount" type="number" min="0" :step="moneyInputStep(currency())" placeholder="No maximum" 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">Usage limit</span><input x-model="usageLimit" type="number" min="1" step="1" placeholder="No limit" 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">Free product ID</span><input x-model="freeProductId" type="text" placeholder="Optional" 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>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Start date</span><input x-model="startDate" 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>

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

@@ -7,6 +7,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { minorToInput } from '@stacksjs/commerce/money'
 
 interface CouponIndexResponse {
   records: CouponRecord[]
@@ -104,7 +105,8 @@ function exportHref(): string {
     record.status,
     record.isActive ? 'Enabled' : 'Disabled',
     record.discountType,
-    String(record.discountValue),
+    // A fixed amount is stored in minor units; the CSV carries the decimal.
+    record.discountType === 'fixed_amount' ? minorToInput(record.discountValue, 'USD') : String(record.discountValue),
     String(record.usageCount),
     record.usageLimit === null ? '' : String(record.usageLimit),
     record.startDate,

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

@@ -1,8 +1,10 @@
 <script client>
 import type { CouponRecord } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CouponRecord[])
 const loading = useReactiveProp('loading', false)
+const currency = useReactiveProp('currency', 'USD')
 const emit = defineEmits()
 
 function statusClass(status: string): string {
@@ -13,10 +15,11 @@ function statusClass(status: string): string {
   return 'bg-gray-100 text-gray-700 dark:bg-neutral-700 dark:text-neutral-300'
 }
 
+// A percentage is a rate, not money; a fixed amount is integer minor units.
 function discount(record: CouponRecord): string {
   return record.discountType === 'percentage'
     ? `${record.discountValue}%`
-    : new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(record.discountValue)
+    : formatCurrency(record.discountValue, currency())
 }
 
 function date(value: string): string {

package/resources/components/Dashboard/Commerce/CommerceCustomerDetailsDialog.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 open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CommerceCustomerRecord | null)
@@ -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/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 {