@spree/dashboard-ui 1.0.0-rc.4 → 1.0.0-rc.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "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",
@@ -85,7 +85,8 @@
     "recharts": "3.10.1",
     "shadcn": "4.22.0",
     "tailwind-merge": "3.7.0",
-    "tw-animate-css": "1.4.0"
+    "tw-animate-css": "1.4.0",
+    "@spree/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/index.ts

@@ -32,6 +32,7 @@ export { decimalPlacesMessage, requiredMessage } from './lib/validation-messages
 // ---------------------------------------------------------------------------
 export * from './spree/address-block'
 export * from './spree/address-book-row'
+export * from './spree/address-select'
 export * from './spree/back-button'
 export * from './spree/bulk-dialog'
 export * from './spree/bulk-price-table'

package/src/spree/address-block.tsx

@@ -1,3 +1,4 @@
+import { intlDisplayName } from '@spree/core'
 import { useTranslation } from 'react-i18next'
 
 /**
@@ -28,24 +29,20 @@ function localizedCountryName(
   iso?: string | null,
   name?: string | null,
 ): string | null {
-  if (iso) {
-    try {
-      const localized = new Intl.DisplayNames([locale, 'en'], { type: 'region' }).of(iso)
-      if (localized) return localized
-    } catch {
-      // Runtime without Intl.DisplayNames coverage — fall back below.
-    }
-  }
-  return name ?? iso ?? null
+  const localized = iso ? intlDisplayName('region', locale, iso) : undefined
+  return localized || (name ?? iso ?? null)
 }
 
 export function AddressBlock({
   title,
   address,
+  emptyText,
 }: {
   /** Omitted where the surrounding card already names the address. */
   title?: string
   address: AddressBlockValue | null | undefined
+  /** Shown in place of the address when there is none. Defaults to "Not provided". */
+  emptyText?: string
 }) {
   const { t, i18n } = useTranslation()
   return (
@@ -67,7 +64,7 @@ export function AddressBlock({
         </div>
       ) : (
         <span className="text-sm text-muted-foreground">
-          {t('admin.components.address_block.not_provided')}
+          {emptyText ?? t('admin.components.address_block.not_provided')}
         </span>
       )}
     </div>

package/src/spree/address-book-row.tsx

@@ -23,6 +23,7 @@ export interface AddressBookEntry extends AddressBlockValue {
 export function AddressBookRow({
   address,
   canEdit = true,
+  inheritedFrom,
   onEdit,
   onRemove,
   onSetDefaultBilling,
@@ -30,6 +31,11 @@ export function AddressBookRow({
 }: {
   address: AddressBookEntry
   canEdit?: boolean
+  /**
+   * Names the book this entry is inherited from. An inherited entry is read
+   * only here, and its defaults are its owner's, so neither is shown.
+   */
+  inheritedFrom?: string | null
   onEdit: () => void
   onRemove: () => void
   /** Omit either to hide that action — a book with one address has no choice. */
@@ -37,17 +43,25 @@ export function AddressBookRow({
   onSetDefaultShipping?: () => void
 }) {
   const { t } = useTranslation()
+  const inherited = inheritedFrom != null
+  const isDefaultBilling = !inherited && address.is_default_billing
+  const isDefaultShipping = !inherited && address.is_default_shipping
 
   return (
     <Item variant="outline" className="items-start">
       <ItemContent className="min-w-0">
-        {(address.label || address.is_default_billing || address.is_default_shipping) && (
+        {(address.label || inherited || isDefaultBilling || isDefaultShipping) && (
           <ItemTitle className="flex-wrap">
             {address.label}
-            {address.is_default_billing && (
+            {inherited && (
+              <Badge variant="secondary">
+                {t('admin.address_book.inherited_from', { name: inheritedFrom })}
+              </Badge>
+            )}
+            {isDefaultBilling && (
               <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
             )}
-            {address.is_default_shipping && (
+            {isDefaultShipping && (
               <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
             )}
           </ItemTitle>
@@ -55,7 +69,7 @@ export function AddressBookRow({
         <AddressBlock address={address} />
       </ItemContent>
 
-      {canEdit && (
+      {canEdit && !inherited && (
         <ItemActions>
           <RowActions
             actions={[

package/src/spree/address-select.tsx

@@ -0,0 +1,105 @@
+import { useTranslation } from 'react-i18next'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import type { AddressBlockValue } from './address-block'
+
+/** One entry a picker may offer, from whichever book it came out of. */
+export interface AddressOption extends AddressBlockValue {
+  id: string
+  label?: string | null
+}
+
+/**
+ * A set of entries under the name of the book they came from — a customer's
+ * own addresses, a company's sites. Groups are rendered in the order given.
+ */
+export interface AddressOptionGroup {
+  key: string
+  heading: string
+  addresses: AddressOption[]
+}
+
+/** The one-line form a picker shows: the entry's own name, then the street. */
+export function summarizeAddress(address: AddressOption): string {
+  const place = [address.address1, address.city, address.state_text, address.postal_code]
+    .filter(Boolean)
+    .join(', ')
+
+  const who = address.label || address.company || address.full_name
+
+  return [who, place].filter(Boolean).join(' — ')
+}
+
+/**
+ * Picks one saved address out of the books a purchase may draw on.
+ *
+ * Headless: the groups arrive as props, so the same control serves a buyer's
+ * own book, a company's sites, and both at once — which is the B2B case, where
+ * an order for a company may ship to that company's sites and to the ones it
+ * inherits from the companies above it.
+ *
+ * Base UI resolves the trigger's label from `items`, so the summary line shows
+ * instead of the raw prefixed id.
+ */
+export function AddressSelect({
+  id,
+  value,
+  onValueChange,
+  groups,
+  placeholder,
+  emptyLabel,
+  disabled,
+}: {
+  id?: string
+  /** The chosen address id, or `''` for "none picked". */
+  value: string
+  onValueChange: (value: string) => void
+  groups: AddressOptionGroup[]
+  placeholder?: string
+  /** Offered first so a merchant can take the choice back. */
+  emptyLabel?: string
+  disabled?: boolean
+}) {
+  const { t } = useTranslation()
+  const none = emptyLabel ?? t('admin.address_select.none')
+
+  const items = [
+    { value: '', label: none },
+    ...groups.flatMap((group) =>
+      group.addresses.map((address) => ({
+        value: address.id,
+        label: summarizeAddress(address),
+      })),
+    ),
+  ]
+
+  return (
+    <Select items={items} value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectTrigger id={id}>
+        <SelectValue placeholder={placeholder ?? none} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="">{none}</SelectItem>
+        {groups
+          .filter((group) => group.addresses.length > 0)
+          .map((group) => (
+            <SelectGroup key={group.key}>
+              <SelectLabel>{group.heading}</SelectLabel>
+              {group.addresses.map((address) => (
+                <SelectItem key={address.id} value={address.id}>
+                  {summarizeAddress(address)}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/spree/calculator-summary.tsx

@@ -13,6 +13,9 @@
  * Lives on the frontend (rather than as a server-rendered string) so
  * draft edits update the row immediately, before any save.
  */
+
+import { formatMoney, isDecimalString } from '@spree/core'
+
 export interface CalculatorPayload {
   /**
    * Display name for the calculator, already localized by the caller — this
@@ -101,7 +104,12 @@ function formatField(
 ): string | null {
   if (value === null || value === undefined || value === '') return null
   if (property.format === 'currency') return null
-  if (property.format === 'money') return formatMoney(value, currency)
+  if (property.format === 'money') {
+    const amount = String(value)
+    return (
+      formatMoney(amount, currency) || (isDecimalString(amount) ? `${amount} ${currency}` : amount)
+    )
+  }
   if (/(?:^|_)percent$/.test(key)) return `${value}%`
 
   const type = (Array.isArray(property.type) ? property.type : [property.type]).find(
@@ -115,19 +123,6 @@ function formatField(
   return `${humanize(key)}: ${value}`
 }
 
-function formatMoney(value: unknown, currency: string): string {
-  const amount = String(value)
-  if (!/^-?\d+(\.\d+)?$/.test(amount)) return amount
-  try {
-    // `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 `${amount} ${currency}`
-  }
-}
-
 function humanize(key: string): string {
   const spaced = key.replace(/_/g, ' ').trim()
   return spaced.charAt(0).toUpperCase() + spaced.slice(1)

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

@@ -1,3 +1,4 @@
+import { CLAIM_RESOLUTIONS, type ClaimResolution, isPositiveMoney } from '@spree/core'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
@@ -16,8 +17,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 import { Switch } from '../ui/switch'
 import type { RefundMethod } from './return-dialogs'
 
-/** How a claim is settled. */
-export type ClaimResolution = 'refund' | 'replacement' | 'refund_and_replacement'
+export type { ClaimResolution }
 
 /** One claimed line, as the resolve form needs it. */
 export type ClaimLineForResolve = {
@@ -74,12 +74,10 @@ export function ClaimResolveDialog({
     .filter(([, on]) => on)
     .map(([id]) => id)
 
-  const resolutionOptions = (['refund', 'replacement', 'refund_and_replacement'] as const).map(
-    (value) => ({
-      value,
-      label: t(`admin.pages.orders.detail.claims.resolutions.${value}`),
-    }),
-  )
+  const resolutionOptions = CLAIM_RESOLUTIONS.map((value) => ({
+    value,
+    label: t(`admin.pages.orders.detail.claims.resolutions.${value}`),
+  }))
 
   const methodOptions = [
     {
@@ -92,11 +90,11 @@ export function ClaimResolveDialog({
     },
   ]
 
+  // A number input keeps `.5` as typed; the API reads only `0.5`.
+  const refundAmount = amount.startsWith('.') ? `0${amount}` : amount
   // 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 positiveAmount = isPositiveMoney(refundAmount)
   const ready =
     (!refunding || positiveAmount) && (!sendingReplacement || chosenReplacements.length > 0)
 
@@ -211,7 +209,7 @@ export function ClaimResolveDialog({
               onSubmit({
                 resolution,
                 refundMethod,
-                amount: refunding ? amount : undefined,
+                amount: refunding ? refundAmount : undefined,
                 replacementLineItemIds: chosenReplacements,
               })
             }

package/src/spree/form-actions.tsx

@@ -22,16 +22,22 @@ export function FormSaveButton<TFieldValues extends FieldValues>({
   form,
   label,
   savingLabel,
+  dirty = false,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   label?: string
   savingLabel?: string
+  /**
+   * Unsaved changes held outside the form — custom field drafts the page
+   * saves from its own submit — counted as dirty alongside the form's own.
+   */
+  dirty?: boolean
 }) {
   const { t } = useTranslation()
   const { isDirty, isSubmitting } = useFormState({ control: form.control })
 
   return (
-    <Button type="submit" disabled={!isDirty || isSubmitting}>
+    <Button type="submit" disabled={!(isDirty || dirty) || isSubmitting}>
       {isSubmitting && <Loader2Icon className="animate-spin" />}
       {isSubmitting
         ? (savingLabel ?? t('admin.actions.saving'))
@@ -52,15 +58,22 @@ export function FormDiscardButton<TFieldValues extends FieldValues>({
   form,
   label,
   onDiscard,
+  dirty = false,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   label?: string
   onDiscard?: () => void
+  /**
+   * Unsaved changes held outside the form — custom field drafts the page
+   * saves from its own submit — counted as dirty alongside the form's own.
+   * Pass `onDiscard` too, so discarding drops them.
+   */
+  dirty?: boolean
 }) {
   const { t } = useTranslation()
   const { isDirty, isSubmitting } = useFormState({ control: form.control })
 
-  if (!isDirty) return null
+  if (!isDirty && !dirty) return null
 
   return (
     <Button
@@ -83,17 +96,23 @@ export function FormActions<TFieldValues extends FieldValues>({
   savingLabel,
   discardLabel,
   onDiscard,
+  dirty,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   saveLabel?: string
   savingLabel?: string
   discardLabel?: string
   onDiscard?: () => void
+  /**
+   * Unsaved changes held outside the form — custom field drafts the page
+   * saves from its own submit — counted as dirty alongside the form's own.
+   */
+  dirty?: boolean
 }) {
   return (
     <>
-      <FormDiscardButton form={form} label={discardLabel} onDiscard={onDiscard} />
-      <FormSaveButton form={form} label={saveLabel} savingLabel={savingLabel} />
+      <FormDiscardButton form={form} label={discardLabel} onDiscard={onDiscard} dirty={dirty} />
+      <FormSaveButton form={form} label={saveLabel} savingLabel={savingLabel} dirty={dirty} />
     </>
   )
 }
@@ -113,8 +132,11 @@ export function FormActions<TFieldValues extends FieldValues>({
 export function useFormSubmitShortcut<TFieldValues extends FieldValues>(
   form: UseFormReturn<TFieldValues, any, any>,
   onSubmit: (values: TFieldValues) => void | Promise<void>,
+  /** Unsaved changes held outside the form, as on `FormActions`. */
+  { dirty: externalDirty = false }: { dirty?: boolean } = {},
 ) {
-  const { isDirty, isSubmitting } = useFormState({ control: form.control })
+  const { isDirty: formDirty, isSubmitting } = useFormState({ control: form.control })
+  const isDirty = formDirty || externalDirty
 
   useHotkey(
     'Mod+S',

package/src/ui/badge.tsx

@@ -1,3 +1,4 @@
+import type { BuiltInStatus } from '@spree/core'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -80,6 +81,7 @@ const statusToneMap: Record<string, StatusTone> = {
   authorized: 'info',
   complete: 'success',
   completed: 'success',
+  placed: 'success',
   paid: 'success',
   fulfilled: 'success',
   delivered: 'success',
@@ -157,18 +159,36 @@ const statusToneMap: Record<string, StatusTone> = {
   ready_to_ship: 'warning',
   ordered: 'info',
   partially_received: 'info',
+  // More arrived than was ordered: done, but worth a look.
+  over_received: 'warning',
   // Gift cards.
   partially_redeemed: 'info',
   redeemed: 'neutral',
   // Price lists — `scheduled` is live-but-not-yet, which is the same shape as
   // any other "waiting on the clock" state.
   scheduled: 'info',
+  // The rest of the API's own statuses, on the same rule as above.
+  accepted: 'success',
+  waived: 'neutral',
+  withdrawn: 'neutral',
+  awaiting_confirmation: 'warning',
+  lapsed: 'neutral',
+  mapping: 'warning',
+  completed_mapping: 'info',
+  unresolved: 'destructive',
+  on_hand: 'success',
+  backordered: 'warning',
+  shipped: 'success',
+  checkout: 'neutral',
+  invalid: 'destructive',
+  purchased: 'success',
+  refund_requested: 'warning',
   // Boolean filter values. A yes/no pair is a state like any other — "in
   // stock: no" is the row an operator is looking for, and reading it in the
   // same green/red the rest of the app uses saves them parsing the word.
   true: 'success',
   false: 'destructive',
-}
+} satisfies Record<BuiltInStatus, StatusTone> & Record<string, StatusTone>
 
 // Dot fills, by tone. These read the same `--status-*` ramps the tinted Badge
 // variants use, but take the *reading* step rather than the fill step: a 6px