@spree/dashboard-ui 1.0.0-rc.2 → 1.0.0-rc.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",

package/src/index.ts

@@ -26,7 +26,7 @@ export {
 } from './lib/date-range-presets'
 export { sameRichText, shouldEmitRichTextChange } from './lib/same-rich-text'
 export { cn } from './lib/utils'
-export { requiredMessage } from './lib/validation-messages'
+export { decimalPlacesMessage, requiredMessage } from './lib/validation-messages'
 // ---------------------------------------------------------------------------
 // Spree composed components — headless, accept data via props
 // ---------------------------------------------------------------------------

package/src/lib/validation-messages.ts

@@ -17,3 +17,15 @@ import i18n from 'i18next'
 export function requiredMessage(field: string): () => string {
   return () => i18n.t('admin.validation.required', { field: i18n.t(`admin.fields.${field}.label`) })
 }
+
+/**
+ * Lazy "<Field> can have at most <count> decimal places" message, for amounts
+ * and rates the server keeps to a fixed number of decimals.
+ */
+export function decimalPlacesMessage(field: string, count: number): () => string {
+  return () =>
+    i18n.t('admin.validation.too_many_decimals', {
+      field: i18n.t(`admin.fields.${field}.label`),
+      count,
+    })
+}

package/src/spree/calculator-summary.tsx

@@ -5,7 +5,8 @@
  * model (delivery methods, tax rates, …).
  *
  * The expected payload mirrors the admin API's calculator embed: a
- * `{ label, preferences, preference_schema }` triple. The component is
+ * `{ label, preferences, schema }` triple, `schema` being the JSON Schema of
+ * the calculator's preferences. The component is
  * tolerant of partial input — missing schema or preferences just fall
  * back to the label alone.
  *
@@ -22,7 +23,14 @@ export interface CalculatorPayload {
   /** STI class name (e.g. "Spree::Calculator::FlatRate"). Used as a label fallback. */
   type?: string | null
   preferences?: Record<string, unknown> | null
-  preference_schema?: ReadonlyArray<{ key: string; type: string }> | null
+  schema?: { properties?: Record<string, CalculatorPropertySchema> } | null
+}
+
+/** The part of a preference's JSON Schema the summary reads. */
+interface CalculatorPropertySchema {
+  type?: string | string[]
+  format?: string
+  pattern?: string
 }
 
 interface CalculatorSummaryProps {
@@ -60,14 +68,14 @@ export function formatCalculatorSummary(
     calculator.label?.trim() ||
     (calculator.type ? (calculator.type.split('::').pop() ?? calculator.type) : '')
 
-  const schema = calculator.preference_schema
+  const properties = Object.entries(calculator.schema?.properties ?? {})
   const prefs = calculator.preferences
 
-  if (!schema?.length || !prefs) return label || null
+  if (!properties.length || !prefs) return label || null
 
   const currency = (typeof prefs.currency === 'string' && prefs.currency) || 'USD'
-  const details = schema
-    .map((field) => formatField(field, prefs[field.key], currency))
+  const details = properties
+    .map(([key, property]) => formatField(key, property, prefs[key], currency))
     .filter((s): s is string => s !== null)
     .join(', ')
 
@@ -76,50 +84,47 @@ export function formatCalculatorSummary(
 }
 
 /**
- * Formats one preference value by naming convention. Calculators don't
- * carry richer field metadata (no `display_format`, no `unit`), so we
- * fall back to key-name heuristics that match the Ruby preference
- * declarations in `Spree::Calculator::*`.
+ * Formats one preference value from its schema.
  *
- * - `amount` / `*_amount` decimals → currency-formatted.
- * - `*_percent` decimals → `N%`.
- * - `currency` strings → omitted (folded into the money formatting).
+ * - money → currency-formatted.
+ * - `*_percent` values → `N%`.
+ * - currencies → omitted (folded into the money formatting).
  * - booleans → humanized key when true; skipped when false.
- * - lists (tiers) → their length; other objects → omitted.
+ * - lists (tiers) → their length; objects → omitted.
  * - everything else → `key: value`.
  */
 function formatField(
-  field: { key: string; type: string },
+  key: string,
+  property: CalculatorPropertySchema,
   value: unknown,
   currency: string,
 ): string | null {
   if (value === null || value === undefined || value === '') return null
-  if (field.key === 'currency') return null
+  if (property.format === 'currency') return null
+  if (property.format === 'money') return formatMoney(value, currency)
+  if (/(?:^|_)percent$/.test(key)) return `${value}%`
 
-  if (field.type === 'decimal') {
-    if (/(?:^|_)percent$/.test(field.key)) return `${value}%`
-    if (field.key === 'amount' || field.key.endsWith('_amount')) {
-      return formatMoney(value, currency)
-    }
-    return `${humanize(field.key)}: ${value}`
-  }
-  if (field.type === 'boolean') {
-    return value ? humanize(field.key) : null
-  }
-  if (field.type === 'array') {
-    return Array.isArray(value) && value.length ? `${humanize(field.key)}: ${value.length}` : null
+  const type = (Array.isArray(property.type) ? property.type : [property.type]).find(
+    (t) => t !== 'null',
+  )
+  if (type === 'boolean') return value ? humanize(key) : null
+  if (type === 'array') {
+    return Array.isArray(value) && value.length ? `${humanize(key)}: ${value.length}` : null
   }
-  if (field.type === 'hash') return null
-  return `${humanize(field.key)}: ${value}`
+  if (type === 'object') return null
+  return `${humanize(key)}: ${value}`
 }
 
 function formatMoney(value: unknown, currency: string): string {
-  const n = typeof value === 'number' ? value : Number(value)
-  if (Number.isNaN(n)) return String(value)
+  const amount = String(value)
+  if (!/^-?\d+(\.\d+)?$/.test(amount)) return amount
   try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n)
+    // `Intl` reads a numeric string exactly; its ES2022 typings only list numbers.
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(
+      amount as unknown as number,
+    )
   } catch {
-    return `${n} ${currency}`
+    return `${amount} ${currency}`
   }
 }
 

package/src/spree/claim-resolve-dialog.tsx

@@ -93,8 +93,11 @@ export function ClaimResolveDialog({
 
   // Refunding nothing, or replacing nothing, is what the server rejects —
   // say so here instead of letting the request fail.
+  // The amount is the canonical decimal string a number input yields, so
+  // "above zero" is unsigned digits with a non-zero digit among them.
+  const positiveAmount = /^(\d+(\.\d+)?|\.\d+)$/.test(amount) && /[1-9]/.test(amount)
   const ready =
-    (!refunding || Number(amount) > 0) && (!sendingReplacement || chosenReplacements.length > 0)
+    (!refunding || positiveAmount) && (!sendingReplacement || chosenReplacements.length > 0)
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
@@ -138,7 +141,7 @@ export function ClaimResolveDialog({
                   <InputGroupInput
                     id="claim-resolve-amount"
                     type="number"
-                    step="0.01"
+                    step="any"
                     min="0"
                     value={amount}
                     onChange={(event) => setAmount(event.target.value)}

package/src/spree/icons.ts

@@ -18,6 +18,7 @@ export {
   BanIcon,
   BanknoteIcon,
   BarChart3Icon as AnalyticsIcon,
+  BellIcon,
   BoldIcon,
   BookOpenIcon,
   BoxesIcon,

package/src/spree/label-upload-dialog.tsx

@@ -127,7 +127,7 @@ export function LabelUploadDialog({
                   <InputGroupInput
                     id="label-cost"
                     type="number"
-                    step="0.01"
+                    step="any"
                     min="0"
                     {...form.register('cost')}
                   />

package/src/spree/post-sale-create-dialogs.tsx

@@ -100,18 +100,11 @@ export function CreateReturnDialog({
 
 /** A line the claim can name, with what the customer paid for it. */
 export type ClaimableLine = PostSaleUnit & {
-  /** The whole line after discounts, used to default the refund to what was actually paid. */
-  discountedAmount?: string | null
-  /** Tax charged on top of the line's price, which a claim refunds with it. */
-  additionalTaxTotal?: string | null
-}
-
-/** What the customer paid for `quantity` units of the line, or blank when that is unknown. */
-function paidForUnits(line: ClaimableLine, quantity: number): string {
-  const paid = Number(line.discountedAmount) + Number(line.additionalTaxTotal ?? 0)
-  if (quantity <= 0 || line.discountedAmount == null || !Number.isFinite(paid)) return ''
-
-  return ((paid * quantity) / line.quantity).toFixed(2)
+  /**
+   * What the customer paid, tax included, for that many units of the line, as
+   * a decimal string — the default refund. Blank when it is unknown.
+   */
+  paidFor?: (quantity: number) => string
 }
 
 /**
@@ -189,7 +182,7 @@ export function CreateClaimDialog({
                         if (!typedAmounts[line.id]) {
                           setAmounts((current) => ({
                             ...current,
-                            [line.id]: paidForUnits(line, quantity),
+                            [line.id]: quantity > 0 ? (line.paidFor?.(quantity) ?? '') : '',
                           }))
                         }
                       }}
@@ -207,7 +200,7 @@ export function CreateClaimDialog({
                         <InputGroupInput
                           id={`claim-amount-${line.id}`}
                           type="number"
-                          step="0.01"
+                          step="any"
                           min="0"
                           value={amounts[line.id] ?? ''}
                           onChange={(event) => {

package/src/spree/quantity-tier-editor.tsx

@@ -106,7 +106,7 @@ export function QuantityTierEditor({
                 )}
                 <InputGroupInput
                   type="number"
-                  step="0.01"
+                  step="any"
                   value={row.value}
                   disabled={disabled}
                   aria-label={labels.value}

package/src/spree/return-dialogs.tsx

@@ -139,49 +139,6 @@ export function ReturnReceiveDialog({
   )
 }
 
-/** True when a received return is owed nothing, so completing it moves no money. */
-export function returnOwesNothing(refundableTotal: string): boolean {
-  return Number(refundableTotal) === 0
-}
-
-export type ReturnRefundFigures = {
-  status: string
-  refund_total: string
-  display_refund_total: string
-  refunded_total: string
-  display_refunded_total: string
-}
-
-/**
- * What a return's card reports: what it is owed until money goes back, then
- * what actually went back — which a merchant keeping a restocking fee makes
- * less than it was owed, so that case also names the full amount. Money that
- * went back counts even before the return is marked refunded: a refund that
- * succeeded on one payment and was declined on the next leaves it received.
- */
-export function returnRefundSummary(
-  returnRecord: ReturnRefundFigures,
-):
-  | { kind: 'owed'; amount: string }
-  | { kind: 'refunded'; amount: string }
-  | { kind: 'refunded_short'; amount: string; total: string } {
-  const refunded = Number(returnRecord.refunded_total)
-
-  if (returnRecord.status !== 'refunded' && refunded === 0) {
-    return { kind: 'owed', amount: returnRecord.display_refund_total }
-  }
-
-  if (refunded < Number(returnRecord.refund_total)) {
-    return {
-      kind: 'refunded_short',
-      amount: returnRecord.display_refunded_total,
-      total: returnRecord.display_refund_total,
-    }
-  }
-
-  return { kind: 'refunded', amount: returnRecord.display_refunded_total }
-}
-
 /**
  * Gives the money back: how much, and by what means. A return owed nothing
  * (a free gift sent back) is completed instead, with nothing to choose.
@@ -193,6 +150,7 @@ export function returnRefundSummary(
  */
 export function ReturnRefundDialog({
   refundableTotal,
+  owesNothing,
   refundTaxTotal,
   currencySymbol,
   onClose,
@@ -200,6 +158,8 @@ export function ReturnRefundDialog({
   pending = false,
 }: {
   refundableTotal: string
+  /** True when the return is owed nothing, so it is completed rather than refunded. */
+  owesNothing: boolean
   refundTaxTotal?: string
   currencySymbol: string
   onClose: () => void
@@ -209,7 +169,6 @@ export function ReturnRefundDialog({
   const { t } = useTranslation()
   const [refundMethod, setRefundMethod] = useState<RefundMethod>('original_payment')
   const [amount, setAmount] = useState(refundableTotal)
-  const owesNothing = returnOwesNothing(refundableTotal)
 
   const methodOptions = [
     {
@@ -250,7 +209,7 @@ export function ReturnRefundDialog({
                   <InputGroupInput
                     id="refund-amount"
                     type="number"
-                    step="0.01"
+                    step="any"
                     min="0"
                     value={amount}
                     onChange={(event) => setAmount(event.target.value)}