@spree/dashboard-ui 0.13.1 → 1.0.0-beta.1

package/src/spree/resource-combobox.tsx

@@ -49,7 +49,15 @@ export interface ResourceComboboxProps<T extends ComboboxOption> {
   placeholder?: string
   /** Empty state text shown in the dropdown when items is empty. */
   emptyText?: string
+  /** Optional footer below the list — e.g. a count of rows not shown. */
+  listFooter?: ReactNode
   disabled?: boolean
+
+  /**
+   * Applied to the search input, so a sibling `<FieldLabel htmlFor>` names the
+   * field for screen readers.
+   */
+  id?: string
 }
 
 /**
@@ -72,7 +80,9 @@ export function ResourceCombobox<T extends ComboboxOption>({
   renderOption,
   placeholder,
   emptyText,
+  listFooter,
   disabled,
+  id,
 }: ResourceComboboxProps<T>) {
   const selected = items.find((r) => r.id === value) ?? null
 
@@ -92,7 +102,7 @@ export function ResourceCombobox<T extends ComboboxOption>({
       // dropdown trigger + selection mechanics, not just the input.
       disabled={disabled}
     >
-      <ComboboxInput placeholder={placeholder} disabled={disabled} showClear />
+      <ComboboxInput id={id} placeholder={placeholder} disabled={disabled} showClear />
       <ComboboxContent>
         <ComboboxEmpty>{emptyText}</ComboboxEmpty>
         <ComboboxList>
@@ -102,6 +112,7 @@ export function ResourceCombobox<T extends ComboboxOption>({
             </ComboboxItem>
           )}
         </ComboboxList>
+        {listFooter}
       </ComboboxContent>
     </Combobox>
   )

package/src/spree/resource-name-cell.tsx

@@ -4,8 +4,15 @@ import { cn } from '../lib/utils'
 interface ResourceNameCellProps {
   /** Resource identifier, mirrored into the bridge data attribute. */
   id: string
-  /** Data attribute the `useRowClickBridge` listener targets (e.g. `data-payment-method-id`). */
-  dataAttr: `data-${string}`
+  /**
+   * Data attribute the `useRowClickBridge` listener targets (e.g.
+   * `data-payment-method-id`).
+   *
+   * Omit it for a row that must not be opened — a record this panel may read
+   * but not write. The cell then renders as plain text rather than a button
+   * that looks clickable and does nothing.
+   */
+  dataAttr?: `data-${string}`
   /** Primary text — the resource's display name. */
   name: ReactNode
   /** Optional secondary line. Falsy values render nothing. */
@@ -31,14 +38,24 @@ export function ResourceNameCell({
   secondary,
   nameClassName,
 }: ResourceNameCellProps) {
+  const content = (
+    <>
+      <span className={cn('font-medium', nameClassName)}>{name}</span>
+      {secondary && <span className="text-xs text-muted-foreground">{secondary}</span>}
+    </>
+  )
+
+  if (!dataAttr) {
+    return <div className="flex h-full w-full flex-col items-start text-left">{content}</div>
+  }
+
   return (
     <button
       type="button"
       {...{ [dataAttr]: id }}
       className="flex h-full w-full cursor-pointer flex-col items-start rounded text-left focus-visible:outline-none"
     >
-      <span className={cn('font-medium', nameClassName)}>{name}</span>
-      {secondary && <span className="text-xs text-muted-foreground">{secondary}</span>}
+      {content}
     </button>
   )
 }

package/src/spree/return-dialogs.tsx

@@ -0,0 +1,238 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog'
+import { Field, FieldLabel } from '../ui/field'
+import { Input } from '../ui/input'
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
+
+/** How money goes back to the buyer. */
+export type RefundMethod = 'original_payment' | 'store_credit'
+
+/** One line of a return, as the receipt form needs it. */
+export type ReturnLineForReceipt = {
+  id: string
+  label: string
+  quantity: number
+}
+
+type ReceiptRow = { quantity: number; resellable: boolean }
+
+/**
+ * Records what actually arrived: a quantity per line, and whether each can go
+ * back on the shelf.
+ *
+ * Deliberately not defaulted server-side — an omitted `items` means "receive
+ * everything as requested", so a partial receipt has to say so line by line.
+ * Shared by the operator's order page and the seller's.
+ */
+export function ReturnReceiveDialog({
+  lines,
+  onClose,
+  onSubmit,
+  pending = false,
+}: {
+  lines: ReturnLineForReceipt[]
+  onClose: () => void
+  onSubmit: (
+    items: Array<{ return_line_item_id: string; quantity: number; resellable: boolean }>,
+  ) => void
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+  const [rows, setRows] = useState<Record<string, ReceiptRow>>(() =>
+    Object.fromEntries(
+      lines.map((line) => [line.id, { quantity: line.quantity, resellable: true }]),
+    ),
+  )
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('admin.pages.orders.detail.returns.receive_title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody className="flex flex-col gap-4">
+          {lines.map((line) => (
+            <div key={line.id} className="flex flex-col gap-3">
+              <span className="font-medium text-sm">{line.label}</span>
+              <div className="flex flex-col gap-3">
+                <Field>
+                  <FieldLabel htmlFor={`qty-${line.id}`}>
+                    {t('admin.pages.orders.detail.returns.received_quantity')}
+                  </FieldLabel>
+                  <Input
+                    id={`qty-${line.id}`}
+                    type="number"
+                    min={0}
+                    max={line.quantity}
+                    value={rows[line.id]?.quantity ?? 0}
+                    onChange={(event) =>
+                      setRows((current) => ({
+                        ...current,
+                        [line.id]: {
+                          // `min`/`max` bind the stepper only — a typed value
+                          // reaches onChange unclamped.
+                          quantity: Math.max(
+                            0,
+                            Math.min(Number(event.target.value) || 0, line.quantity),
+                          ),
+                          resellable: current[line.id]?.resellable ?? true,
+                        },
+                      }))
+                    }
+                  />
+                </Field>
+                <Field orientation="horizontal">
+                  <FieldLabel htmlFor={`resellable-${line.id}`}>
+                    {t('admin.pages.orders.detail.returns.resellable')}
+                  </FieldLabel>
+                  <Switch
+                    id={`resellable-${line.id}`}
+                    checked={rows[line.id]?.resellable ?? true}
+                    onCheckedChange={(checked) =>
+                      setRows((current) => ({
+                        ...current,
+                        [line.id]: {
+                          quantity: current[line.id]?.quantity ?? 0,
+                          resellable: checked,
+                        },
+                      }))
+                    }
+                  />
+                </Field>
+              </div>
+            </div>
+          ))}
+        </DialogBody>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose} disabled={pending}>
+            {t('admin.actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            disabled={pending}
+            onClick={() =>
+              onSubmit(
+                lines.map((line) => ({
+                  return_line_item_id: line.id,
+                  quantity: rows[line.id]?.quantity ?? 0,
+                  resellable: rows[line.id]?.resellable ?? true,
+                })),
+              )
+            }
+          >
+            {t('admin.pages.orders.detail.returns.actions.receive')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/**
+ * Gives the money back: how much, and by what means.
+ *
+ * The currency symbol comes from the caller — the operator's panel reads it
+ * from the store it is looking at, and a seller has no currency of their own.
+ */
+export function ReturnRefundDialog({
+  refundableTotal,
+  currencySymbol,
+  onClose,
+  onSubmit,
+  pending = false,
+}: {
+  refundableTotal: string
+  currencySymbol: string
+  onClose: () => void
+  onSubmit: (params: { refundMethod: RefundMethod; amount?: string }) => void
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+  const [refundMethod, setRefundMethod] = useState<RefundMethod>('original_payment')
+  const [amount, setAmount] = useState(refundableTotal)
+
+  const methodOptions = [
+    {
+      value: 'original_payment',
+      label: t('admin.pages.orders.detail.returns.refund_methods.original_payment'),
+    },
+    {
+      value: 'store_credit',
+      label: t('admin.pages.orders.detail.returns.refund_methods.store_credit'),
+    },
+  ]
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('admin.pages.orders.detail.returns.refund_title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody className="flex flex-col gap-4">
+          <Field>
+            <FieldLabel htmlFor="refund-amount">
+              {t('admin.pages.orders.detail.returns.refund_amount')}
+            </FieldLabel>
+            <InputGroup>
+              <InputGroupAddon>
+                <InputGroupText>{currencySymbol}</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                id="refund-amount"
+                type="number"
+                step="0.01"
+                min="0"
+                value={amount}
+                onChange={(event) => setAmount(event.target.value)}
+              />
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="refund-method">
+              {t('admin.pages.orders.detail.returns.refund_method')}
+            </FieldLabel>
+            <Select
+              items={methodOptions}
+              value={refundMethod}
+              onValueChange={(value) => setRefundMethod(value as RefundMethod)}
+            >
+              <SelectTrigger id="refund-method">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {methodOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+        </DialogBody>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose} disabled={pending}>
+            {t('admin.actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            disabled={pending}
+            onClick={() => onSubmit({ refundMethod, amount })}
+          >
+            {t('admin.pages.orders.detail.returns.actions.refund')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/spree/route-error-boundary.tsx

@@ -1,4 +1,3 @@
-import { AlertTriangleIcon, RotateCcwIcon } from 'lucide-react'
 import { Component, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
@@ -10,6 +9,7 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from '../ui/empty'
+import { AlertTriangleIcon, RotateCcwIcon } from './icons'
 
 interface ErrorStateProps {
   /** Headline. Defaults to "Something went wrong". */

package/src/spree/row-actions.tsx

@@ -1,4 +1,3 @@
-import { CopyIcon, EllipsisVerticalIcon, EyeIcon, PencilIcon, Trash2Icon } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
@@ -8,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
+import { CopyIcon, EllipsisVerticalIcon, EyeIcon, PencilIcon, Trash2Icon } from './icons'
 
 export interface RowAction {
   /** Stable key for React reconciliation. Doubles as the i18n action slug
@@ -73,7 +73,7 @@ export function RowActions({ actions }: RowActionsProps) {
             key={action.key}
             onClick={action.onSelect}
             disabled={action.disabled}
-            className={action.destructive ? 'text-destructive focus:text-destructive' : undefined}
+            variant={action.destructive ? 'destructive' : undefined}
           >
             {action.icon ?? BUILTIN_ICONS[action.key]}
             {action.label ?? t(`admin.row_actions.${action.key}`)}

package/src/spree/search-input.tsx

@@ -0,0 +1,76 @@
+import type * as React from 'react'
+import { useRef } from 'react'
+import { cn } from '../lib/utils'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../ui/input-group'
+import { SearchIcon, XIcon } from './icons'
+
+/**
+ * Search box with a leading magnifier and our own clear button.
+ *
+ * The clear button is hand-rolled rather than `type="search"`'s native one:
+ * that control is unstyleable, ignores the design tokens, renders at a size no
+ * touch guideline would accept, and Safari on iOS omits it entirely — so on a
+ * phone the field could not be cleared at all. The input stays `type="text"`
+ * to keep the native affordance from rendering alongside this one, and carries
+ * `role="searchbox"` so it still announces as a search field — the role a
+ * `type="search"` input would have given it for free.
+ *
+ * Clearing returns focus to the field, since the user is almost always about
+ * to type a different query.
+ */
+export function SearchInput({
+  value,
+  onValueChange,
+  className,
+  clearLabel = 'Clear search',
+  ...props
+}: Omit<React.ComponentProps<'input'>, 'value' | 'onChange' | 'type' | 'className'> & {
+  value: string
+  onValueChange: (value: string) => void
+  /** Sizing and surface for the whole field. The input fills it. */
+  className?: string
+  /** Accessible name for the clear button. */
+  clearLabel?: string
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <InputGroup className={className}>
+      <InputGroupAddon>
+        <SearchIcon className="size-4" />
+      </InputGroupAddon>
+      {/* `h-full` so callers size the field once, on the wrapper, rather than
+          repeating the same height rule on both. */}
+      <InputGroupInput
+        ref={inputRef}
+        type="text"
+        role="searchbox"
+        value={value}
+        onChange={(event) => onValueChange(event.target.value)}
+        className="h-full"
+        {...props}
+      />
+      {value && (
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            // `icon-sm` rather than the default `xs`: that variant hardcodes
+            // `h-6`, which tailwind-merge cannot reconcile against a `size-*`
+            // override, so the button would stay 24px however it was classed.
+            size="icon-sm"
+            aria-label={clearLabel}
+            onClick={() => {
+              onValueChange('')
+              inputRef.current?.focus()
+            }}
+            // Touch-sized by default and only compact from `md` up, so a phone
+            // always gets the larger target whether or not the field happens to
+            // sit inside the mobile drawer. The glyph stays small either way.
+            className={cn('size-9 rounded-full md:size-6 in-data-[mobile=true]:size-9')}
+          >
+            <XIcon className="size-4" />
+          </InputGroupButton>
+        </InputGroupAddon>
+      )}
+    </InputGroup>
+  )
+}

package/src/spree/secret-input.tsx

@@ -1,4 +1,3 @@
-import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
@@ -20,11 +19,9 @@ interface SecretInputProps {
   value: unknown
   onChange: (value: unknown) => void
   /**
-   * When true, a value that arrives carrying the server's mask token
-   * (`••••3K9z`) is treated as "already stored" — show the masked badge
-   * with a Replace button instead of an editable input. Cancel restores
-   * the original masked value so the backend's round-trip guard keeps
-   * the existing secret.
+   * @deprecated Masked values always render as the stored badge — there is
+   * nothing to reveal, since the server never sends the secret. Retained so
+   * existing callers keep compiling; the prop has no effect.
    */
   redactWhenMasked?: boolean
   /** Replaces the default "Stored on the server. Click Replace to rotate." caption. */
@@ -34,12 +31,13 @@ interface SecretInputProps {
 }
 
 /**
- * Stripe-style credential field. When the value comes back from the API
- * masked (`••••3K9z`), display it as a read-only badge with a "Replace"
- * button. Replace switches to a password input pre-filled empty so the
- * admin opts in to rotation; Cancel reverts to the masked badge so the
- * next save preserves the existing secret via the backend's masked
- * round-trip guard.
+ * Stripe-style credential field. A stored secret arrives from the API as a
+ * mask (`••••3K9z`) and renders as a read-only badge with a "Replace"
+ * button — never as an input, and never with a reveal toggle, because the
+ * server does not send the secret and there is nothing to unhide. Replace
+ * switches to an empty password input so the admin opts in to rotation;
+ * Cancel reverts to the badge so the next save preserves the existing
+ * secret via the backend's masked round-trip guard.
  *
  * Domain-agnostic — used by `<PreferencesForm>` for `:password`-typed
  * preferences, but also suitable for any other secret that round-trips
@@ -50,7 +48,6 @@ export function SecretInput({
   label,
   value,
   onChange,
-  redactWhenMasked = false,
   helpText,
   placeholder,
 }: SecretInputProps) {
@@ -59,15 +56,16 @@ export function SecretInput({
   // Captured at click time so Cancel can restore the original mask even
   // after `onChange('')` has cleared the parent value.
   const [pendingMask, setPendingMask] = useState<string | null>(null)
-  const [revealed, setRevealed] = useState(false)
   const replacing = pendingMask !== null
 
-  if (redactWhenMasked && storedMask && !replacing) {
+  // A stored secret always renders as the badge: the server sent a mask,
+  // not the value, so there is nothing a reveal toggle could show.
+  if (storedMask && !replacing) {
     return (
       <Field>
         <FieldLabel htmlFor={id}>{label}</FieldLabel>
         <div className="flex items-center gap-2">
-          <div className="flex min-h-8 w-full min-w-0 items-center rounded-lg border border-border bg-muted/40 px-2.5 py-1.5 shadow-xs">
+          <div className="flex min-h-8 w-full min-w-0 items-center rounded-lg border border-border bg-muted/40 px-2.5 py-1.5">
             <span className="font-mono text-sm tabular-nums text-muted-foreground" id={id}>
               {storedMask}
             </span>
@@ -95,37 +93,25 @@ export function SecretInput({
     <Field>
       <FieldLabel htmlFor={id}>{label}</FieldLabel>
       <div className="flex items-center gap-2">
-        <div className="relative flex-1">
-          <Input
-            id={id}
-            type={revealed ? 'text' : 'password'}
-            autoComplete="new-password"
-            placeholder={
-              replacing ? t('admin.components.secret_input.new_value_placeholder') : placeholder
-            }
-            value={(value as string) ?? ''}
-            onChange={(e) => onChange(e.target.value)}
-            className="pr-9"
-          />
-          <button
-            type="button"
-            aria-label={revealed ? t('admin.a11y.hide_value') : t('admin.a11y.show_value')}
-            aria-pressed={revealed}
-            onClick={() => setRevealed((v) => !v)}
-            className="absolute inset-y-0 right-0 flex items-center px-2.5 text-muted-foreground hover:text-foreground"
-          >
-            {revealed ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
-          </button>
-        </div>
+        <Input
+          id={id}
+          type="password"
+          autoComplete="new-password"
+          placeholder={
+            replacing ? t('admin.components.secret_input.new_value_placeholder') : placeholder
+          }
+          value={(value as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          className="flex-1"
+        />
         {replacing && (
           <Button
             type="button"
             size="sm"
-            variant="ghost"
+            variant="outline"
             onClick={() => {
               onChange(pendingMask)
               setPendingMask(null)
-              setRevealed(false)
             }}
           >
             {t('admin.actions.cancel')}