@stacksjs/defaults 0.75.38 → 0.75.41

package/resources/components/Dashboard/Commerce/Delivery/ShippingRateDialog.stx

@@ -1,4 +1,5 @@
 <script client>
+import { minorToInput, moneyInputError, parseMoneyInput } from '@stacksjs/commerce/money'
 interface ShippingResourceOption {
   id: number
   name: string
@@ -42,7 +43,7 @@ effect(() => {
   zoneId.set(current ? String(current.shipping_zone_id) : '')
   weightFrom.set(current ? String(current.weight_from) : '')
   weightTo.set(current ? String(current.weight_to) : '')
-  amount.set(current ? (current.rate / 100).toFixed(2) : '')
+  amount.set(current ? minorToInput(current.rate, 'USD') : '')
 })
 
 function submit(): void {
@@ -50,7 +51,6 @@ function submit(): void {
   const selectedZoneId = Number(zoneId())
   const from = Number(weightFrom())
   const to = Number(weightTo())
-  const rate = Number(amount())
 
   if (!Number.isInteger(selectedMethodId) || selectedMethodId < 1) {
     emit('invalid', 'Select a shipping method.')
@@ -68,8 +68,10 @@ function submit(): void {
     emit('invalid', 'Ending weight must be greater than or equal to the starting weight.')
     return
   }
-  if (!Number.isFinite(rate) || rate < 0) {
-    emit('invalid', 'Rate must be a non-negative amount.')
+  // Typed in dollars, stored as integer cents.
+  const rateError = moneyInputError(amount(), 'USD')
+  if (rateError) {
+    emit('invalid', `Rate: ${rateError}`)
     return
   }
 
@@ -78,7 +80,7 @@ function submit(): void {
     shippingZoneId: selectedZoneId,
     weightFrom: from,
     weightTo: to,
-    rate: Math.round(rate * 100),
+    rate: parseMoneyInput(amount(), 'USD'),
   })
 }
 </script>

package/resources/components/Dashboard/Commerce/Delivery/ShippingRatesDashboard.stx

@@ -1,6 +1,7 @@
 <script client>
 import { dashboardApi } from '../../../../../functions/dashboard-api'
 import { pushToast } from '../../../../../functions/toasts'
+import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
 
 interface ShippingResourceOption {
   id: number
@@ -69,7 +70,7 @@ function filteredRecords(): ShippingRateRecord[] {
     record.shipping_zone?.name,
     record.weight_from,
     record.weight_to,
-    record.rate / 100,
+    minorToInput(record.rate, 'USD'),
   ].some(value => String(value ?? '').toLowerCase().includes(query)))
 }
 
@@ -86,7 +87,7 @@ function averageRate(): string {
   if (!records().length)
     return '$0.00'
   const average = records().reduce((sum, record) => sum + record.rate, 0) / records().length
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(average / 100)
+  return formatCurrency(average, 'USD', 'en-US')
 }
 
 function metricCards(): Array<{ label: string, value: string, detail: string }> {

package/resources/components/Dashboard/Commerce/Delivery/ShippingRatesTable.stx

@@ -1,4 +1,5 @@
 <script client>
+import { formatCurrency as formatMinorUnits } from '@stacksjs/commerce/money'
 interface ResourceSummary {
   id: number
   name: string
@@ -18,11 +19,9 @@ interface ShippingRateRow {
 const rates = useReactiveProp('rates', [] as ShippingRateRow[])
 const emit = defineEmits()
 
+// Shipping amounts are stored as integer cents, in USD.
 function formatCurrency(cents: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(cents / 100)
+  return formatMinorUnits(cents, 'USD', 'en-US')
 }
 
 function formatWeight(weight: number): string {

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

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

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

@@ -1,5 +1,6 @@
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import { formatCurrency, minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as PaymentRecord | null)
@@ -18,7 +19,7 @@ effect(() => {
   if (!payment || hydrationKey === key)
     return
   hydrationKey = key
-  amount.set(((payment.amount - payment.refundAmount) / 100).toFixed(2))
+  amount.set(minorToInput(payment.amount - payment.refundAmount, payment.currency))
 })
 
 function remaining(): number {
@@ -26,9 +27,15 @@ function remaining(): number {
   return payment ? Math.max(0, payment.amount - payment.refundAmount) : 0
 }
 
+function paymentCurrency(): string {
+  return record()?.currency || 'USD'
+}
+
+// What was typed, in integer minor units, or 0 while it is not a valid amount.
 function amountCents(): number {
-  const parsed = Number(amount())
-  return Number.isFinite(parsed) ? Math.round(parsed * 100) : 0
+  if (moneyInputError(amount(), paymentCurrency(), { min: 1 }))
+    return 0
+  return parseMoneyInput(amount(), paymentCurrency(), { min: 1 })
 }
 
 function valid(): boolean {
@@ -37,12 +44,7 @@ function valid(): boolean {
 }
 
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value / 100)
-  }
-  catch {
-    return `${currency} ${(value / 100).toFixed(2)}`
-  }
+  return formatCurrency(value, currency)
 }
 
 function submit(): void {
@@ -59,7 +61,7 @@ function submit(): void {
   @close="emit('close')"
 >
     <form id="payment-refund-form" @submit.prevent="submit">
-        <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Refund amount</span><input x-model="amount" type="number" min="0.01" :max="remaining() / 100" step="0.01" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
+        <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Refund amount</span><input x-model="amount" type="number" :min="minorToInput(1, paymentCurrency())" :max="minorToInput(remaining(), paymentCurrency())" :step="moneyInputStep(paymentCurrency())" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
         <p class="mt-2 text-amber-700 text-xs dark:text-amber-300">This records an already confirmed processor refund. It does not initiate money movement.</p>
     </form>
   <template #footer>

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

@@ -5,6 +5,7 @@ import type {
   AbandonedCartSummary,
   RecoveryCampaignRecord,
 } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 
@@ -88,17 +89,9 @@ effect(() => {
   page.set(1)
 })
 
+/** Cart totals and campaign thresholds are integer minor units (stacksjs/stacks#2851). */
 function money(value: number): string {
-  try {
-    return new Intl.NumberFormat(undefined, {
-      style: 'currency',
-      currency: summary().currency || defaultCurrency() || 'USD',
-      maximumFractionDigits: 0,
-    }).format(value)
-  }
-  catch {
-    return `${Math.round(value)} ${defaultCurrency()}`
-  }
+  return formatCurrency(value, summary().currency || defaultCurrency())
 }
 
 function percentage(value: number): string {

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

@@ -1,18 +1,13 @@
 <script client>
 import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as AbandonedCartRecord[])
 const loading = useReactiveProp('loading', false)
 
+/** A cart's total is integer minor units, like every commerce amount (stacksjs/stacks#2851). */
 function money(value: number, currency: string): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency || 'USD' }).format(value)
-  }
-  catch {
-    // A currency the browser does not know is not a reason to render nothing
-    // where a number belongs.
-    return `${value.toFixed(2)} ${currency}`
-  }
+  return formatCurrency(value, currency)
 }
 
 /**

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

@@ -5,6 +5,7 @@ import type {
   CampaignStatus,
   CampaignType,
 } from '../../../../app/Actions/Dashboard/Marketing/campaign-records'
+import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -25,6 +26,9 @@ const fromName = state('')
 const fromAddress = state('')
 const emailListId = state('')
 const scheduledAt = state('')
+// Budget and spend as typed, in major units of `currency`. The record and
+// the API hold integer minor units (1999 is $19.99), converted at this
+// boundary through @stacksjs/commerce/money.
 const budget = state('')
 const spent = state('0')
 const currency = state('USD')
@@ -33,6 +37,8 @@ const endDate = state('')
 const canSubmit = derived(() => {
   if (!name().trim())
     return false
+  if (budgetError() || spentError())
+    return false
   return type() !== 'email'
     || Boolean(subject().trim() && template().trim() && emailListId())
 })
@@ -67,13 +73,22 @@ effect(() => {
   fromAddress.set(current?.fromAddress || '')
   emailListId.set(current?.emailListId || '')
   scheduledAt.set(localDateTime(current?.scheduledAt || ''))
-  budget.set(current?.budget ? String(current.budget) : '')
-  spent.set(String(current?.spent || 0))
-  currency.set(current?.currency || defaultCurrency())
+  const recordCurrency = current?.currency || defaultCurrency()
+  budget.set(current?.budget ? minorToInput(current.budget, recordCurrency) : '')
+  spent.set(minorToInput(current?.spent || 0, recordCurrency))
+  currency.set(recordCurrency)
   startDate.set(localDateTime(current?.startDate || ''))
   endDate.set(localDateTime(current?.endDate || ''))
 })
 
+function budgetError(): string {
+  return moneyInputError(budget(), currency(), { required: false })
+}
+
+function spentError(): string {
+  return moneyInputError(spent(), currency(), { required: false })
+}
+
 function normalizeType(event: Event): void {
   const nextType = (event.target as HTMLSelectElement).value as CampaignType
   if (nextType === 'email')
@@ -85,6 +100,7 @@ function normalizeType(event: Event): void {
 function submit(): void {
   if (!canSubmit())
     return
+  const code = currency().trim().toUpperCase()
   emit('submit', {
     name: name().trim(),
     description: description().trim(),
@@ -97,9 +113,9 @@ function submit(): void {
     fromAddress: fromAddress().trim(),
     emailListId: emailListId() || null,
     scheduledAt: databaseDateTime(scheduledAt()) || null,
-    budget: budget(),
-    spent: spent(),
-    currency: currency().trim().toUpperCase(),
+    budget: parseMoneyInput(budget(), code, { required: false }),
+    spent: parseMoneyInput(spent(), code, { required: false }) ?? 0,
+    currency: code,
     startDate: databaseDateTime(startDate()),
     endDate: databaseDateTime(endDate()),
   })
@@ -200,12 +216,14 @@ function submit(): void {
           </label>
           <label class="block">
             <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Budget</span>
-            <input x-model="budget" type="number" min="0" step="0.01" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+            <input x-model="budget" type="number" min="0" :step="moneyInputStep(currency())" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+            <span :if="budgetError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ budgetError() }}</span>
           </label>
           <div class="grid gap-3 grid-cols-[1fr_7rem]">
             <label class="block">
               <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Spent</span>
-              <input x-model="spent" type="number" min="0" step="0.01" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+              <input x-model="spent" type="number" min="0" :step="moneyInputStep(currency())" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+              <span :if="spentError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ spentError() }}</span>
             </label>
             <label class="block">
               <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Currency</span>

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

@@ -27,8 +27,10 @@ interface CampaignPayload {
   fromAddress: string
   emailListId: string | null
   scheduledAt: string | null
-  budget: string
-  spent: string
+  /** Integer minor units of `currency`, or null for no budget. */
+  budget: number | null
+  /** Integer minor units of `currency`. */
+  spent: number
   currency: string
   startDate: string
   endDate: string

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

@@ -1,6 +1,7 @@
 <script client>
 import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
 import { reachOf } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
+import { formatCurrency, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
 const open = useReactiveProp('open', false)
 const records = useReactiveProp('records', [] as AbandonedCartRecord[])
@@ -16,7 +17,9 @@ const text = state('')
 const fromName = state('')
 const fromAddress = state('')
 const idleHours = state(4)
-const minimumValue = state(0)
+// The threshold as typed, in major units. Carts and the stored rule hold
+// integer minor units (stacksjs/stacks#2851).
+const minimumValue = state('0')
 const scheduledAt = state('')
 let hydrated = false
 
@@ -34,7 +37,7 @@ effect(() => {
   fromName.set('')
   fromAddress.set('')
   idleHours.set(defaultIdleHours())
-  minimumValue.set(0)
+  minimumValue.set('0')
   scheduledAt.set('')
 })
 
@@ -46,22 +49,30 @@ effect(() => {
  * still choosing it, not after they have scheduled a send to an empty room.
  */
 function reach(): { carts: number, value: number } {
-  return reachOf(records(), Number(idleHours()) || 0, Number(minimumValue()) || 0)
+  return reachOf(records(), Number(idleHours()) || 0, minimumMinor())
+}
+
+function minimumError(): string {
+  return moneyInputError(minimumValue(), defaultCurrency(), { required: false })
+}
+
+/** The typed threshold in minor units, or 0 while it is empty or unreadable. */
+function minimumMinor(): number {
+  if (minimumError())
+    return 0
+  return parseMoneyInput(minimumValue(), defaultCurrency(), { required: false }) ?? 0
 }
 
 function money(value: number): string {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency: defaultCurrency() || 'USD' }).format(value)
-  }
-  catch {
-    return `${value.toFixed(2)} ${defaultCurrency()}`
-  }
+  return formatCurrency(value, defaultCurrency())
 }
 
 function submit(): void {
   const when = scheduledAt() ? new Date(scheduledAt()) : null
   if (when && !Number.isFinite(when.getTime()))
     return
+  if (minimumError())
+    return
 
   emit('submit', {
     name: name(),
@@ -70,7 +81,7 @@ function submit(): void {
     fromName: fromName(),
     fromAddress: fromAddress(),
     idleHours: Number(idleHours()) || 0,
-    minimumValue: Number(minimumValue()) || 0,
+    minimumValue: minimumMinor(),
     scheduledAt: when ? when.toISOString() : null,
     currency: defaultCurrency(),
   })
@@ -101,8 +112,9 @@ function submit(): void {
       </label>
       <label class="block">
         <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Minimum cart value</span>
-        <input x-model="minimumValue" type="number" min="0" step="1" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
-        <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave at zero to chase every cart.</span>
+        <input x-model="minimumValue" type="number" min="0" :step="moneyInputStep(defaultCurrency())" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+        <span :if="minimumError()" class="block mt-1 text-red-600 text-xs dark:text-red-400">{{ minimumError() }}</span>
+        <span :if="!minimumError()" class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Leave at zero to chase every cart.</span>
       </label>
     </div>
 
@@ -139,7 +151,7 @@ function submit(): void {
   <template #footer>
     <div class="flex gap-2 justify-end w-full">
       <Button :disabled="busy()" variant="secondary" @click="emit('close')">Close</Button>
-      <Button :disabled="busy() || !name() || !subject()" :loading="busy()" @click="submit()">{{ scheduledAt() ? 'Schedule campaign' : 'Save as draft' }}</Button>
+      <Button :disabled="busy() || !name() || !subject() || !!minimumError()" :loading="busy()" @click="submit()">{{ scheduledAt() ? 'Schedule campaign' : 'Save as draft' }}</Button>
     </div>
   </template>
 </Modal>

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

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

package/resources/components/Storefront/CartDrawer.stx

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

package/resources/views/cart.stx

@@ -15,15 +15,17 @@ interface CartItemRow {
   weight_grams: number | null
 }
 
-// The column of `carts` this page reads. The query selects `*`.
+// The columns of `carts` this page reads. The query selects `*`.
 interface CartRow {
   id: number
+  currency: string | null
 }
 
 interface StorefrontLineItem { lineTotal: number }
 
 const { verifyCartCookie } = require('../../app/Storefront/CartCookie')
 const { readStorefront } = require('../../app/Storefront/StorefrontDatabase')
+const { storefrontCurrency, storefrontMoney, storefrontSummary } = require('../../app/Storefront/StorefrontMoney')
 
 // Signed by the storefront actions as the token, a dot and its HMAC. An
 // unsigned or tampered cookie is no cart, and is never looked up.
@@ -35,6 +37,8 @@ const found = token
       if (!row)
         return { cart: null, items: [] }
 
+      // Every amount below is integer minor units of the cart's currency.
+      const currency = storefrontCurrency(row.currency)
       const lines = db.query<CartItemRow, [number]>(`
         SELECT ci.id, ci.quantity, ci.unit_price, ci.total_price, ci.product_name,
               ci.product_image, ci.product_sku, p.weight_grams
@@ -52,9 +56,9 @@ const found = token
           name: line.product_name,
           weight: line.weight_grams ? `${line.weight_grams}g` : '',
           qty,
-          priceLabel: `$${price.toFixed(2)}`,
+          priceLabel: storefrontMoney(price, currency),
           lineTotal,
-          lineTotalLabel: `$${lineTotal.toFixed(2)}`,
+          lineTotalLabel: storefrontMoney(lineTotal, currency),
           image: line.product_image,
         }
       })
@@ -66,27 +70,19 @@ const found = token
 const cart = found.cart
 const items = found.items
 
-// Mirror the rule used by PlaceOrderAction so the price the shopper
-// sees in their cart matches the total they're actually charged. Both
-// sides read STOREFRONT_FREE_SHIPPING_THRESHOLD / STOREFRONT_FLAT_SHIPPING
-// from the environment with the same defaults — keep them in sync via
-// app/Actions/Storefront/_shipping.ts when changing.
-const FREE_SHIPPING_THRESHOLD = Number(process.env.STOREFRONT_FREE_SHIPPING_THRESHOLD ?? 40) || 40
-const FLAT_SHIPPING = Number(process.env.STOREFRONT_FLAT_SHIPPING ?? 5) || 5
+// The same shipping rule PlaceOrderAction charges with
+// (app/Actions/Storefront/_shipping.ts), in minor units, so the price the
+// shopper sees in their cart matches the total they're actually charged.
 const subtotal = items.reduce((sum: number, i: StorefrontLineItem) => sum + i.lineTotal, 0)
-const shipping = subtotal <= 0 ? 0 : (subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : FLAT_SHIPPING)
-const total = subtotal + shipping
-const remainingForFree = Math.max(0, FREE_SHIPPING_THRESHOLD - subtotal)
-
-// Pre-format every numeric so the OrderSummary component template doesn't
-// have to call .toFixed() on a defineProps local — STX's SSR pass doesn't
-// reliably expose those locals, so callers do the formatting.
-const subtotalLabel = `$${subtotal.toFixed(2)}`
-const shippingLabel = shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`
-const totalLabel = `$${total.toFixed(2)}`
-const freeShippingNote = (shipping > 0 && remainingForFree > 0)
-  ? `Add $${remainingForFree.toFixed(2)} more for free shipping.`
-  : ''
+
+// Pre-format every amount so the OrderSummary component template doesn't
+// have to format a defineProps local — STX's SSR pass doesn't reliably
+// expose those locals, so callers do the formatting.
+const summary = storefrontSummary(subtotal, storefrontCurrency(cart?.currency))
+const subtotalLabel = summary.subtotalLabel
+const shippingLabel = summary.shippingLabel
+const totalLabel = summary.totalLabel
+const freeShippingNote = summary.freeShippingNote
 </script>
 
 @section('content')

package/resources/views/checkout/contact.stx

@@ -14,6 +14,7 @@ interface CartSummaryRow {
 // migration creates any but `id` (see app/Storefront/StorefrontDatabase.ts).
 interface CartRow {
   id: number
+  currency: string | null
   email: string | null
 }
 
@@ -21,6 +22,7 @@ interface StorefrontLineItem { lineTotal: number }
 
 const { verifyCartCookie } = require('../../../app/Storefront/CartCookie')
 const { readStorefront } = require('../../../app/Storefront/StorefrontDatabase')
+const { storefrontCurrency, storefrontMoney, storefrontSummary } = require('../../../app/Storefront/StorefrontMoney')
 
 // Signed by the storefront actions as the token, a dot and its HMAC. An
 // unsigned or tampered cookie is no cart, and is never looked up.
@@ -32,6 +34,8 @@ const found = token
       if (!row)
         return { cart: null, items: [] }
 
+      // Every amount below is integer minor units of the cart's currency.
+      const currency = storefrontCurrency(row.currency)
       const lines = db.query<CartSummaryRow, [number]>(`
         SELECT product_name, quantity, total_price
         FROM cart_items WHERE cart_id = ?1 ORDER BY id ASC
@@ -42,7 +46,7 @@ const found = token
           name: line.product_name,
           qty,
           lineTotal,
-          lineTotalLabel: `$${lineTotal.toFixed(2)}`,
+          lineTotalLabel: storefrontMoney(lineTotal, currency),
         }
       })
 
@@ -53,21 +57,15 @@ const found = token
 const cart = found.cart
 const items = found.items
 
-// Mirror the rule in PlaceOrderAction's _shipping helper so the running
+// The same shipping rule PlaceOrderAction charges with
+// (app/Actions/Storefront/_shipping.ts), in minor units, so the running
 // totals on every checkout step match what gets charged.
-const FREE_SHIPPING_THRESHOLD = Number(process.env.STOREFRONT_FREE_SHIPPING_THRESHOLD ?? 40) || 40
-const FLAT_SHIPPING = Number(process.env.STOREFRONT_FLAT_SHIPPING ?? 5) || 5
 const subtotal = items.reduce((s: number, i: StorefrontLineItem) => s + i.lineTotal, 0)
-const shipping = subtotal <= 0 ? 0 : (subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : FLAT_SHIPPING)
-const total = subtotal + shipping
-const remainingForFree = Math.max(0, FREE_SHIPPING_THRESHOLD - subtotal)
-
-const subtotalLabel = `$${subtotal.toFixed(2)}`
-const shippingLabel = shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`
-const totalLabel = `$${total.toFixed(2)}`
-const freeShippingNote = (shipping > 0 && remainingForFree > 0)
-  ? `Add $${remainingForFree.toFixed(2)} more for free shipping.`
-  : ''
+const summary = storefrontSummary(subtotal, storefrontCurrency(cart?.currency))
+const subtotalLabel = summary.subtotalLabel
+const shippingLabel = summary.shippingLabel
+const totalLabel = summary.totalLabel
+const freeShippingNote = summary.freeShippingNote
 
 const prefilledEmail = cart?.email || ''
 </script>