@spree/dashboard-core 1.0.0-rc.2 → 1.0.0-rc.4

package/src/components/import-button.tsx

@@ -75,7 +75,7 @@ interface ImportButtonProps {
 
 /**
  * Toolbar entry point for CSV imports: opens a Sheet with the upload form
- * (file, delimiter, template download). The CSV direct-uploads on pick via
+ * (file, delimiter, template download). The CSV uploads on pick via
  * `FileUploadField`; submitting creates the import from the signed blob id
  * and hands it to `onCreated`.
  */
@@ -190,6 +190,9 @@ export function ImportButton({
               // Windows browsers report `.csv` as `application/vnd.ms-excel`,
               // which the server's content-type validation rejects.
               transformFile={(picked) => new File([picked], picked.name, { type: 'text/csv' })}
+              // Imports are kept on private storage: a CSV can carry
+              // customer data.
+              private
             />
 
             <Field>

package/src/components/import-wizard-dialog.tsx

@@ -1,4 +1,6 @@
 import {
+  Alert,
+  AlertDescription,
   Badge,
   Button,
   Card,
@@ -33,6 +35,7 @@ import {
   CheckCircle2Icon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  CircleAlertIcon,
   DownloadIcon,
   RotateCcwIcon,
   XIcon,
@@ -107,13 +110,7 @@ export function ImportWizardDialog({ importId, onClose, onViewRecords }: ImportW
       }}
       modal
     >
-      <DialogContent
-        // Edge-to-edge minus a 3-unit gutter — see BulkPriceEditorDialog for
-        // why every inset/translate/max is overridden.
-        className="!inset-3 !w-auto !max-w-none !translate-x-0 !translate-y-0 flex flex-col p-0"
-        style={{ maxHeight: 'none' }}
-        showCloseButton={false}
-      >
+      <DialogContent fullScreen showCloseButton={false}>
         {importId && (
           <ImportWizard
             importId={importId}
@@ -472,10 +469,10 @@ function MappingStep({
         </div>
 
         {error && (
-          <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-destructive text-sm">
-            <AlertTriangleIcon className="size-4 shrink-0" />
-            <span>{error.message}</span>
-          </div>
+          <Alert variant="destructive">
+            <CircleAlertIcon />
+            <AlertDescription>{error.message}</AlertDescription>
+          </Alert>
         )}
       </CardContent>
     </Card>

package/src/components/mobile-top-bar.tsx

@@ -1,5 +1,6 @@
 import { SidebarTrigger, Skeleton } from '@spree/dashboard-ui'
 import { SearchIcon } from '@spree/dashboard-ui/icons'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useOptionalCommandPalette } from '../hooks/use-command-palette'
 import { useOptionalStore } from '../providers/store-provider'
@@ -23,9 +24,12 @@ export function MobileTopBar({
   uiLocales = [],
   onEditProfile,
   title,
+  notifications,
 }: {
   uiLocales?: ReadonlyArray<{ code: string; name: string }>
   onEditProfile?: () => void
+  /** Shown before the account menu, such as a notifications bell. */
+  notifications?: ReactNode
   /** Name shown beside the controls. Defaults to the store's, for panels that have one. */
   title?: string
 } = {}) {
@@ -69,6 +73,8 @@ export function MobileTopBar({
         </button>
       )}
 
+      {notifications}
+
       <SidebarUser variant="bar" uiLocales={uiLocales} onEditProfile={onEditProfile} />
     </div>
   )

package/src/components/money.tsx

@@ -0,0 +1,23 @@
+import { useMoneyLocale } from '../hooks/use-money-locale'
+import { formatAmount } from '../lib/formatters'
+import { useOptionalStore } from '../providers/store-provider'
+
+/**
+ * An API amount shown in the admin's own number format. Without a currency it
+ * is shown in the store's default currency, for figures the API states in it
+ * (a customer's total spent); the seller panel, which mounts no store, always
+ * passes one.
+ */
+export function Money({
+  amount,
+  currency,
+  fallback,
+}: {
+  amount: string | null | undefined
+  currency?: string | null
+  fallback?: string
+}) {
+  const locale = useMoneyLocale()
+  const store = useOptionalStore()
+  return <>{formatAmount(amount, currency ?? store?.defaultCurrency, locale, fallback)}</>
+}

package/src/components/preferences-form.tsx

@@ -1,4 +1,10 @@
-import type { PreferenceField as PreferenceFieldDef } from '@spree/admin-sdk'
+import type { CurrencyCode } from '@spree/admin-sdk'
+import {
+  compareMoney,
+  isDecimalString,
+  type PreferencePropertySchema,
+  type PreferenceSchema,
+} from '@spree/admin-sdk'
 import {
   Button,
   Field,
@@ -6,6 +12,10 @@ import {
   FieldGroup,
   FieldLabel,
   Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
   SecretInput,
   Select,
   SelectContent,
@@ -18,29 +28,111 @@ import {
 import { PlusIcon, TrashIcon } from '@spree/dashboard-ui/icons'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useMoneyLocale } from '../hooks/use-money-locale'
+import { currencyParts } from '../lib/currency-parts'
+import { CountryCombobox, CountryMultiCombobox } from './country-combobox'
 import { CurrencySelect } from './currency-select'
 import { StoreDatePicker } from './store-date-picker'
 
+/**
+ * One setting of a {@link PreferenceSchema}, flattened into what a form
+ * needs to pick its widget.
+ */
+export interface PreferenceFieldDef {
+  key: string
+  /** `string`, `text`, `password`, `boolean`, `integer`, `decimal`, `date`, `datetime`, `array`, `hash` or `object`. */
+  type: string
+  /** The schema's `format` (`money`, `currency`, `iso-country`, …), on the value or, for a list, on its items. */
+  format?: string
+  default: unknown
+  choices?: string[]
+  /** Labels the declaration gave its choices, for values that cannot name themselves (an endpoint URL). */
+  choiceLabels?: Record<string, string>
+  /** Whether the setting may be left empty (it reads back as null). */
+  nullable: boolean
+  /** The property's own JSON Schema, for widgets that need more (list items, object properties). */
+  schema: PreferencePropertySchema
+}
+
+const DECIMAL_PATTERN = '^-?\\d+(\\.\\d+)?$'
+const DECIMAL_REGEX = new RegExp(DECIMAL_PATTERN)
+
+/**
+ * The schema with only the settings `keep` accepts — for a form that edits
+ * the others with a control of its own.
+ */
+export function filterPreferenceSchema(
+  schema: PreferenceSchema,
+  keep: (key: string, property: PreferencePropertySchema) => boolean,
+): PreferenceSchema {
+  return {
+    ...schema,
+    properties: Object.fromEntries(
+      Object.entries(schema.properties).filter(([key, property]) => keep(key, property)),
+    ),
+  }
+}
+
+function fieldType(property: PreferencePropertySchema): string {
+  if (property['x-spree-secret']) return 'password'
+  const type = (Array.isArray(property.type) ? property.type : [property.type]).find(
+    (t) => t && t !== 'null',
+  )
+  if (type === 'string') {
+    if (property.format === 'date') return 'date'
+    if (property.format === 'date-time') return 'datetime'
+    if (property.format === 'money') return 'money'
+    if (property.pattern === DECIMAL_PATTERN) return 'decimal'
+    if (property['x-spree-widget'] === 'textarea') return 'text'
+    return 'string'
+  }
+  if (type === 'object') return property.properties ? 'object' : 'hash'
+  return type ?? 'string'
+}
+
+/**
+ * Flattens a preference schema into the fields a form renders, in the order
+ * the type declares them.
+ */
+export function preferenceFields(
+  schema: PreferenceSchema | null | undefined,
+): PreferenceFieldDef[] {
+  return Object.entries(schema?.properties ?? {}).map(([key, property]) => ({
+    key,
+    type: fieldType(property),
+    format: property.format ?? property.items?.format,
+    default: property.default ?? null,
+    choices: property.enum?.filter((choice): choice is string => typeof choice === 'string'),
+    choiceLabels: property['x-spree-choice-labels'],
+    nullable: Array.isArray(property.type) && property.type.includes('null'),
+    schema: property,
+  }))
+}
+
 /**
  * Hydrates a `preferences` hash with each field's default. Used to seed
  * create-mode forms when the user picks a provider/calculator so the
  * `<PreferencesForm>` shows sensible starting values instead of blanks.
  *
- * `:password` fields are always skipped — the server returns their
- * defaults as `null`, and even when it doesn't, autofilling a password
- * field is hostile UX. `contextDefaults` fills schema-declared keys whose
- * own default is null/undefined — used by callers that know about runtime
+ * Secrets are always skipped — the schema never carries their defaults, and
+ * autofilling a password field is hostile UX. `contextDefaults` fills keys
+ * whose own default is absent — used by callers that know about runtime
  * context the schema can't express (e.g. the store's default currency).
  */
 export function defaultPreferences(
-  schema: PreferenceFieldDef[],
+  schema: PreferenceSchema | null | undefined,
   contextDefaults: Record<string, unknown> = {},
 ): Record<string, unknown> {
   const out: Record<string, unknown> = {}
-  for (const field of schema) {
+  for (const field of preferenceFields(schema)) {
     if (field.type === 'password') continue
     if (field.default !== null && field.default !== undefined) {
-      out[field.key] = field.default
+      // A decimal default declared as a Ruby integer arrives as a JSON number,
+      // and the API refuses money sent back that way.
+      out[field.key] =
+        (field.type === 'decimal' || field.type === 'money') && typeof field.default === 'number'
+          ? String(field.default)
+          : field.default
       continue
     }
     const ctx = contextDefaults[field.key]
@@ -50,7 +142,7 @@ export function defaultPreferences(
 }
 
 interface PreferencesFormProps {
-  schema: PreferenceFieldDef[]
+  schema: PreferenceSchema | null | undefined
   values: Record<string, unknown>
   onChange: (next: Record<string, unknown>) => void
   /** When true, replaces sensitive `password`-typed fields with a stub label. */
@@ -64,7 +156,7 @@ interface PreferencesFormProps {
    * would let a currency the store does not trade in be saved, and a
    * calculator set to one quotes no rate at all.
    */
-  currencyOptions?: string[]
+  currencyOptions?: readonly CurrencyCode[]
   /**
    * Render date/datetime pickers inline instead of in a Popover portal.
    * Set this when the form is inside a `<Sheet>` — Base UI's Popover fails
@@ -74,16 +166,16 @@ interface PreferencesFormProps {
 }
 
 /**
- * Renders a generic configuration form from a `preference_schema` payload.
+ * Renders a generic configuration form from a type's preference schema.
  * Used by the Payment Methods edit sheet and the Promotion editor's action
  * and rule cards — anywhere we let admins tune a STI subclass's settings
  * without hard-coding a per-subclass form.
  *
  * The schema itself is the source of truth; this component intentionally
  * stays "dumb" — server-side validation surfaces errors back via the
- * mutation hook's error handling. Booleans are switches, strings are
- * inputs, integers/decimals get number inputs, and unknown types fall
- * back to a plain text input.
+ * mutation hook's error handling. The widget follows the schema: booleans
+ * are switches, currencies and countries pickers, amounts number inputs
+ * that send the exact decimal string, and anything else a text input.
  */
 export function PreferencesForm({
   schema,
@@ -94,7 +186,8 @@ export function PreferencesForm({
   currencyOptions,
   inlineDatePickers,
 }: PreferencesFormProps) {
-  if (!schema?.length) return null
+  const fields = useMemo(() => preferenceFields(schema), [schema])
+  if (!fields.length) return null
 
   function setValue(key: string, value: unknown) {
     if (Object.is(values[key], value)) return
@@ -103,7 +196,7 @@ export function PreferencesForm({
 
   return (
     <FieldGroup>
-      {schema.map((field) => (
+      {fields.map((field) => (
         <PreferenceField
           key={field.key}
           field={field}
@@ -113,6 +206,7 @@ export function PreferencesForm({
           redactPasswords={redactPasswords}
           currencyOptions={currencyOptions}
           inlineDatePickers={inlineDatePickers}
+          currency={typeof values.currency === 'string' ? values.currency : undefined}
         />
       ))}
     </FieldGroup>
@@ -125,8 +219,10 @@ interface PreferenceFieldProps {
   label?: string
   onChange: (value: unknown) => void
   redactPasswords?: boolean
-  currencyOptions?: string[]
+  currencyOptions?: readonly CurrencyCode[]
   inlineDatePickers?: boolean
+  /** The currency a money preference is in, when the record names one. */
+  currency?: string
 }
 
 export function PreferenceField({
@@ -137,8 +233,10 @@ export function PreferenceField({
   redactPasswords,
   currencyOptions,
   inlineDatePickers,
+  currency,
 }: PreferenceFieldProps) {
   const { t, i18n } = useTranslation()
+  const moneyLocale = useMoneyLocale()
   const id = `preference-${field.key}`
   // Localize the field label from the preference key when no explicit
   // override is given, falling back to a humanized key for custom/extension
@@ -152,10 +250,9 @@ export function PreferenceField({
   const descriptionKey = `${preferenceKey}_description`
   const description = i18n.exists(descriptionKey) ? t(descriptionKey) : undefined
 
-  // Currency-typed preferences (`currency`, `default_currency`,
-  // `display_currency`, …) get the store's CurrencySelect — same
-  // localized `CODE — Full Name` rendering as the rest of admin.
-  if (isCurrencyKey(field.key)) {
+  // Currencies get the store's CurrencySelect — same localized
+  // `CODE — Full Name` rendering as the rest of admin.
+  if (field.type === 'string' && field.format === 'currency') {
     return (
       <Field>
         <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
@@ -169,11 +266,33 @@ export function PreferenceField({
     )
   }
 
-  // `tiers` preference (Spree::Calculator::TieredPercent /
-  // TieredFlatRate) — a list of `{ threshold, value }` objects that the
-  // default array input would render as `[object Object]`. Render a row
-  // editor so the merchant can add tier breakpoints directly.
-  if (field.key === 'tiers') {
+  if (field.type === 'string' && field.format === 'iso-country') {
+    return (
+      <Field>
+        <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
+        <CountryCombobox id={id} value={(value as string) ?? null} onValueChange={onChange} />
+      </Field>
+    )
+  }
+
+  if (field.type === 'array' && field.format === 'iso-country') {
+    return (
+      <Field>
+        <FieldLabel>{displayLabel}</FieldLabel>
+        <CountryMultiCombobox
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onValueChange={onChange}
+        />
+      </Field>
+    )
+  }
+
+  // A tier ladder (the tiered calculators) — a list of
+  // `{ threshold, value }` objects that the default array input would render
+  // as `[object Object]`. Render a row editor so the merchant can add tier
+  // breakpoints directly.
+  const itemProperties = field.schema.items?.properties
+  if (field.type === 'array' && itemProperties?.threshold && itemProperties?.value) {
     return <TiersEditor value={value} onChange={onChange} />
   }
 
@@ -223,27 +342,52 @@ export function PreferenceField({
         </Field>
       )
 
+    case 'money':
+      return (
+        <Field>
+          <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
+          <InputGroup>
+            {currency && (
+              <InputGroupAddon>
+                <InputGroupText>{currencyParts(currency, moneyLocale).symbol}</InputGroupText>
+              </InputGroupAddon>
+            )}
+            <InputGroupInput
+              id={id}
+              type="number"
+              step="any"
+              placeholder={
+                field.nullable ? t('admin.components.preferences_form.unlimited') : undefined
+              }
+              value={value === null || value === undefined ? '' : String(value)}
+              onChange={(e) => {
+                const raw = e.target.value
+                if (raw === '') return onChange(null)
+                // The API refuses money sent as a JSON number.
+                onChange(isDecimalString(raw) ? raw : null)
+              }}
+            />
+          </InputGroup>
+          {description && <FieldDescription>{description}</FieldDescription>}
+        </Field>
+      )
+
     case 'integer':
     case 'decimal':
       return (
         <Field>
           <FieldLabel htmlFor={id}>{displayLabel}</FieldLabel>
-          <Input
+          <NumberPreferenceInput
             id={id}
-            type="number"
-            step={field.type === 'integer' ? 1 : 'any'}
-            // An empty upper-bound field means "no limit" — surface that
+            integer={field.type === 'integer'}
+            nullable={!!field.nullable}
+            // An empty optional field means "no limit" — surface that
             // rather than leaving it looking like a required blank.
             placeholder={
-              isMaxKey(field.key) ? t('admin.components.preferences_form.unlimited') : undefined
+              field.nullable ? t('admin.components.preferences_form.unlimited') : undefined
             }
-            value={value === null || value === undefined ? '' : String(value)}
-            onChange={(e) => {
-              const raw = e.target.value
-              if (raw === '') return onChange(null)
-              const parsed = field.type === 'integer' ? parseInt(raw, 10) : parseFloat(raw)
-              onChange(Number.isNaN(parsed) ? null : parsed)
-            }}
+            value={value}
+            onChange={onChange}
           />
         </Field>
       )
@@ -291,12 +435,23 @@ export function PreferenceField({
       // the set is what the server validates against, so typing anything
       // else can only fail on save.
       if (field.choices?.length) {
-        const options = field.choices.map((choice) => ({
+        // A translation wins where one exists, so the locale files stay in
+        // charge of the values that read as words; then the label the
+        // declaration supplied, for the ones that do not — a URL cannot serve
+        // as its own i18n key, let alone as a label.
+        const declared = field.choices.map((choice) => ({
           value: choice,
           label: i18n.exists(`${preferenceKey}_options.${choice}`)
             ? t(`${preferenceKey}_options.${choice}`)
-            : humanizeKey(choice),
+            : (field.choiceLabels?.[choice] ?? humanizeKey(choice)),
         }))
+        // A stored value outside the set is offered as its own option rather
+        // than dropped, so one written past the picker by an API client is not
+        // silently rewritten to the first choice.
+        const options =
+          typeof value === 'string' && value !== '' && !declared.some((o) => o.value === value)
+            ? [...declared, { value, label: value }]
+            : declared
 
         return (
           <Field>
@@ -336,6 +491,69 @@ export function PreferenceField({
   }
 }
 
+/**
+ * A number setting. Keeps what is typed locally and passes on only values the
+ * server accepts: decimals as exact strings (`.5` becomes `0.5`), integers as
+ * numbers, and an empty field as `null` only when the setting may be unset —
+ * a required one keeps its last value until a number is typed.
+ */
+function NumberPreferenceInput({
+  id,
+  integer,
+  nullable,
+  placeholder,
+  value,
+  onChange,
+}: {
+  id: string
+  integer: boolean
+  nullable: boolean
+  placeholder?: string
+  value: unknown
+  onChange: (value: unknown) => void
+}) {
+  const external = value === null || value === undefined ? '' : String(value)
+  const [text, setText] = useState(external)
+  const [lastExternal, setLastExternal] = useState(external)
+  if (external !== lastExternal) {
+    setLastExternal(external)
+    setText(external)
+  }
+
+  function commit(raw: string) {
+    setText(raw)
+    const trimmed = raw.trim()
+    if (trimmed === '') {
+      if (nullable) onChange(null)
+      return
+    }
+    const number = Number(trimmed)
+    if (!Number.isFinite(number)) return
+    if (integer) {
+      if (Number.isInteger(number)) onChange(number)
+      return
+    }
+    // `.5` or `1e-7` is a number the server would refuse as typed; send its
+    // plain decimal form.
+    onChange(
+      DECIMAL_REGEX.test(trimmed)
+        ? trimmed
+        : number.toLocaleString('en-US', { useGrouping: false, maximumFractionDigits: 20 }),
+    )
+  }
+
+  return (
+    <Input
+      id={id}
+      type="number"
+      step={integer ? 1 : 'any'}
+      placeholder={placeholder}
+      value={text}
+      onChange={(e) => commit(e.target.value)}
+    />
+  )
+}
+
 function humanizeKey(key: string): string {
   return key
     .split('_')
@@ -343,19 +561,6 @@ function humanizeKey(key: string): string {
     .join(' ')
 }
 
-function isCurrencyKey(key: string): boolean {
-  return key === 'currency' || key.endsWith('_currency')
-}
-
-// Upper-bound preferences (`max_quantity`, `max_uses`, `usage_max`,
-// `maximum_amount`, …) read "Unlimited" when left blank. Matched on the key
-// name because the wire schema doesn't carry a nullable flag — safe since the
-// placeholder only shows for an empty value, and an empty max legitimately
-// means no ceiling.
-function isMaxKey(key: string): boolean {
-  return /(?:^|_)max(?:imum)?(?:_|$)/.test(key)
-}
-
 interface TierValue {
   threshold: string
   value: string
@@ -516,5 +721,9 @@ function parseTiers(value: unknown, idPrefix: string): TierRowState[] {
       threshold: threshold === null || threshold === undefined ? '' : String(threshold),
       value: v === null || v === undefined ? '' : String(v),
     }))
-    .sort((a, b) => Number(a.threshold) - Number(b.threshold))
+    .sort((a, b) =>
+      isDecimalString(a.threshold) && isDecimalString(b.threshold)
+        ? compareMoney(a.threshold, b.threshold)
+        : 0,
+    )
 }

package/src/components/resource-combobox.tsx

@@ -109,6 +109,11 @@ export function ResourceCombobox<T extends ComboboxOption>({
     // elsewhere (a customer created on another page) never invalidates it.
     // Every search refetches; cached rows for a repeated term still paint first.
     staleTime: 0,
+    // Keeps the last results on screen while the next query loads, so the
+    // list does not blank on every keystroke. Only within one tenant: the
+    // second argument is the query those results came from.
+    placeholderData: (previous, previousQuery) =>
+      previousQuery?.queryKey[1] === tenantId ? previous : undefined,
   })
 
   // Hydrate the currently selected ID into a record so the trigger shows

package/src/components/resource-picker-sheet.tsx

@@ -1,6 +1,11 @@
 import {
   Button,
   Checkbox,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
   type PaginationMeta,
   SearchInput,
   Sheet,
@@ -308,11 +313,10 @@ export function ResourcePickerSheet<T extends PickerOption>({
                   const subtitle = getOptionSubtitle?.(option)
                   return (
                     <li key={option.id}>
-                      <button
-                        type="button"
-                        disabled={inList}
+                      <Item
+                        render={<button type="button" disabled={inList} />}
                         onClick={() => toggle(option)}
-                        className="flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+                        className="flex-nowrap gap-3 rounded-none px-4 py-2.5 text-left hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
                       >
                         <Checkbox
                           checked={checked}
@@ -320,20 +324,22 @@ export function ResourcePickerSheet<T extends PickerOption>({
                           className="pointer-events-none"
                         />
                         {getOptionImageUrl && <Thumbnail src={imageUrl} size="sm" />}
-                        <span className="min-w-0 flex-1">
-                          <span className="block truncate text-sm">{getOptionLabel(option)}</span>
+                        <ItemContent className="min-w-0 gap-0">
+                          <ItemTitle className="block truncate font-normal">
+                            {getOptionLabel(option)}
+                          </ItemTitle>
                           {subtitle && (
-                            <span className="block truncate text-muted-foreground text-xs">
+                            <ItemDescription className="line-clamp-1 text-xs">
                               {subtitle}
-                            </span>
+                            </ItemDescription>
                           )}
-                        </span>
+                        </ItemContent>
                         {inList && (
-                          <span className="shrink-0 text-muted-foreground text-xs">
+                          <ItemActions className="shrink-0 text-muted-foreground text-xs">
                             {t('admin.resource_picker.already_added')}
-                          </span>
+                          </ItemActions>
                         )}
-                      </button>
+                      </Item>
                     </li>
                   )
                 })}