@spree/dashboard-ui 6.0.2 → 6.0.4

package/src/spree/fulfill-items-form.tsx

@@ -8,8 +8,8 @@ import { Checkbox } from '../ui/checkbox'
 import { Field, FieldLabel } from '../ui/field'
 import { Input } from '../ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import { Thumbnail } from '../ui/thumbnail'
-import { PackageIcon, TriangleAlertIcon } from './icons'
+import { TriangleAlertIcon } from './icons'
+import { ProductIdentity } from './product-identity'
 
 /** A pickable row: what it looks like and how many units are on offer. */
 export type FulfillableRowData = {
@@ -48,10 +48,7 @@ function ItemQuantityRow({
 
   return (
     <div
-      className={cn(
-        'my-2 flex items-center gap-3 rounded-lg py-2 pl-2',
-        selected && 'bg-accent-strong',
-      )}
+      className={cn('my-2 flex items-center gap-3 rounded-lg p-2', selected && 'bg-accent-strong')}
     >
       <Controller
         control={form.control}
@@ -74,14 +71,12 @@ function ItemQuantityRow({
         )}
       />
 
-      <Thumbnail src={row.thumbnailUrl} fallback={<PackageIcon />} />
-
-      <div className="min-w-0 flex-1">
-        <div className="truncate font-medium text-sm">{row.name}</div>
-        {row.optionsText && (
-          <div className="truncate text-muted-foreground text-xs">{row.optionsText}</div>
-        )}
-      </div>
+      <ProductIdentity
+        name={row.name}
+        subtitle={row.optionsText}
+        thumbnailUrl={row.thumbnailUrl}
+        className="flex-1"
+      />
 
       <Controller
         control={form.control}
@@ -108,7 +103,7 @@ function ItemQuantityRow({
               }}
               onBlur={field.onBlur}
             />
-            <span className="w-16 whitespace-nowrap text-muted-foreground text-sm">
+            <span className="w-16 whitespace-nowrap text-muted-foreground text-base">
               {t('admin.orders.fulfill.of_units', { count: row.quantity })}
             </span>
           </div>
@@ -172,7 +167,7 @@ export function FulfillItemsForm({
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
       {errors.root?.message && (
-        <p className="text-destructive text-sm" role="alert">
+        <p className="px-4 pt-3 text-destructive text-base" role="alert">
           {errors.root.message}
         </p>
       )}
@@ -180,7 +175,10 @@ export function FulfillItemsForm({
       {rows.length === 0 ? (
         <p className="py-6 text-center text-muted-foreground">{t('admin.orders.fulfill.empty')}</p>
       ) : (
-        <div className="divide-y">
+        // Rows are inset 8px so a selected row's fill sits inside the card,
+        // and their own 8px padding lines the content up with the 16px card
+        // content below.
+        <div className="divide-y px-2">
           {rows.map((row, index) => (
             <ItemQuantityRow
               key={row.key}
@@ -194,7 +192,7 @@ export function FulfillItemsForm({
         </div>
       )}
 
-      <div className="grid grid-cols-1 gap-4 border-border-subtle border-t py-3 sm:grid-cols-2">
+      <div className="mx-4 grid grid-cols-1 gap-4 border-border-subtle border-t py-3 sm:grid-cols-2">
         <Field>
           <FieldLabel htmlFor={`${idPrefix}-tracking`}>
             {t('admin.orders.fulfill.tracking_label')}
@@ -241,7 +239,7 @@ export function FulfillItemsForm({
         render={({ field }) => (
           <label
             htmlFor={`${idPrefix}-notify`}
-            className="flex cursor-pointer items-center gap-2 py-3 text-sm"
+            className="flex cursor-pointer items-center gap-2 px-4 py-3 text-base"
           >
             <Checkbox
               id={`${idPrefix}-notify`}
@@ -254,7 +252,7 @@ export function FulfillItemsForm({
       />
 
       {!shipsEverything && totalSelected > 0 && (
-        <div className="px-3 pb-3">
+        <div className="px-4 pb-3">
           <Alert variant="warning">
             <TriangleAlertIcon />
             <AlertDescription>{t('admin.orders.fulfill.partial_hint')}</AlertDescription>
@@ -262,8 +260,8 @@ export function FulfillItemsForm({
         </div>
       )}
 
-      <div className="flex items-center justify-end gap-2 border-border-subtle border-t py-3">
-        <span className="mr-auto text-muted-foreground text-sm">
+      <div className="mx-4 flex items-center justify-end gap-2 border-border-subtle border-t py-3">
+        <span className="mr-auto text-muted-foreground text-base">
           {t('admin.orders.fulfill.units_selected')}: {totalSelected} / {totalAvailable}
         </span>
         <Button type="button" size="sm" variant="outline" onClick={onCancel}>

package/src/spree/fulfillment-edit-dialog.tsx

@@ -125,7 +125,7 @@ export function FulfillmentEditDialog({
 
           <DialogBody className="flex flex-col gap-4">
             {errorMessage && (
-              <p className="text-sm text-destructive" role="alert">
+              <p className="text-base text-destructive" role="alert">
                 {errorMessage}
               </p>
             )}

package/src/spree/fulfillment-item-list.tsx

@@ -1,7 +1,18 @@
-import type { ReactNode } from 'react'
-import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '../ui/item'
-import { Thumbnail } from '../ui/thumbnail'
-import { PackageIcon } from './icons'
+import type { ReactElement, ReactNode } from 'react'
+import { Item, ItemActions } from '../ui/item'
+import { CornerDownRightIcon } from './icons'
+import { ProductIdentity } from './product-identity'
+
+/** What an exchanged unit was swapped for. */
+export type FulfillmentItemReplacement = {
+  name: string
+  optionsText?: string | null
+  thumbnailUrl?: string | null
+  productId?: string | null
+  displayPrice?: string | null
+  /** Read out before the replacement, since the arrow says it only by sight. */
+  label?: string
+}
 
 /**
  * One row of a fulfillment's item list, already joined to its line item by
@@ -18,50 +29,98 @@ export type FulfillmentItemRowData = {
   thumbnailUrl?: string | null
   displayPrice?: string | null
   priceSource?: ReactNode
+  /** Beside the name, for state the row's own surface tracks (a return's receipt). */
+  badges?: ReactNode
+  productId?: string | null
+  /** An exchange's new item, shown under the one going back. */
+  replacement?: FulfillmentItemReplacement
   quantity: number
 }
 
+/** Builds the link a product opens; routing belongs to the app. */
+export type ProductLinkRender = (productId: string) => ReactElement
+
 /**
  * What a fulfillment holds: what it looks like, what it costs and how many
  * units travel together.
  *
  * Read-only — changing what an order contains after placement belongs to the
  * order edit screen, not here. Shared by the operator's order page and the
- * seller's so a parcel's contents read the same on both.
+ * seller's so a parcel's contents read the same on both, and by the return,
+ * exchange and claim cards so a unit looks the same wherever it goes.
  */
-function ItemRow({ row }: { row: FulfillmentItemRowData }) {
+function ItemRow({
+  row,
+  productLink,
+}: {
+  row: FulfillmentItemRowData
+  productLink?: ProductLinkRender
+}) {
+  const linkFor = (productId?: string | null) =>
+    productId && productLink ? productLink(productId) : undefined
+  const replacement = row.replacement
+
   return (
-    <Item className="flex-nowrap gap-3 rounded-none border-0 p-3">
-      <Thumbnail src={row.thumbnailUrl} fallback={<PackageIcon />} />
+    <div className="py-3">
+      <Item className="flex-nowrap gap-3 rounded-none border-0 p-0">
+        <ProductIdentity
+          name={row.name}
+          subtitle={row.optionsText}
+          thumbnailUrl={row.thumbnailUrl}
+          badges={row.badges}
+          render={linkFor(row.productId)}
+          className="flex-1"
+        />
 
-      <ItemContent className="min-w-0 gap-0">
-        <ItemTitle className="block truncate">{row.name}</ItemTitle>
-        {row.optionsText && (
-          <ItemDescription className="line-clamp-1 text-xs">{row.optionsText}</ItemDescription>
-        )}
-      </ItemContent>
+        <ItemActions className="min-w-0 shrink flex-col items-end gap-0 text-right text-muted-foreground text-base">
+          {row.displayPrice ? (
+            <span className="whitespace-nowrap">
+              {row.displayPrice} × {row.quantity}
+            </span>
+          ) : (
+            <span className="whitespace-nowrap">× {row.quantity}</span>
+          )}
+          {row.priceSource && <div className="max-w-full truncate text-xs">{row.priceSource}</div>}
+        </ItemActions>
+      </Item>
 
-      <ItemActions className="min-w-0 shrink flex-col items-end gap-0 text-right text-muted-foreground text-sm">
-        {row.displayPrice ? (
-          <span className="whitespace-nowrap">
-            {row.displayPrice} × {row.quantity}
-          </span>
-        ) : (
-          <span className="whitespace-nowrap">× {row.quantity}</span>
-        )}
-        {row.priceSource && <div className="max-w-full truncate text-xs">{row.priceSource}</div>}
-      </ItemActions>
-    </Item>
+      {replacement && (
+        <Item className="mt-4 flex-nowrap gap-3 rounded-none border-0 p-0 pl-3">
+          <CornerDownRightIcon aria-hidden className="size-4 shrink-0 text-muted-foreground" />
+          {replacement.label && <span className="sr-only">{replacement.label}</span>}
+          <ProductIdentity
+            name={replacement.name}
+            subtitle={replacement.optionsText}
+            thumbnailUrl={replacement.thumbnailUrl}
+            render={linkFor(replacement.productId)}
+            className="flex-1"
+          />
+          {replacement.displayPrice && (
+            <ItemActions className="whitespace-nowrap text-muted-foreground text-base">
+              {replacement.displayPrice} × {row.quantity}
+            </ItemActions>
+          )}
+        </Item>
+      )}
+    </div>
   )
 }
 
-export function FulfillmentItemList({ rows }: { rows: FulfillmentItemRowData[] }) {
+export function FulfillmentItemList({
+  rows,
+  productLink,
+}: {
+  rows: FulfillmentItemRowData[]
+  /** Makes each product a link to its page. */
+  productLink?: ProductLinkRender
+}) {
   if (rows.length === 0) return null
 
   return (
-    <div className="divide-y">
+    // Inset by margin so the rules between rows stop short of the card's edges.
+    <div className="mx-4 divide-y">
       {rows.map((row) => (
-        <ItemRow key={row.key} row={row} />
+        <ItemRow key={row.key} row={row} productLink={productLink} />
       ))}
     </div>
   )

package/src/spree/fulfillment-panel.tsx

@@ -31,9 +31,9 @@ export function FulfillmentPanel({
   children: ReactNode
 }) {
   return (
-    <Card variant="nested">
+    <Card>
       <CardHeader>
-        <CardTitle className="min-w-0 font-normal text-sm">
+        <CardTitle className="min-w-0 font-normal text-base">
           <StatusBadge status={status} label={statusLabel} />
           {location && (
             <div className="flex min-w-0 items-center gap-1.5 text-muted-foreground text-xs">

package/src/spree/icons.ts

@@ -24,6 +24,7 @@ export {
   BotIcon,
   BoxesIcon,
   BracesIcon,
+  BugIcon,
   Building2Icon,
   CalculatorIcon,
   CalendarIcon,
@@ -38,6 +39,7 @@ export {
   ChevronsLeftIcon,
   ChevronsRightIcon,
   ChevronsUpDownIcon,
+  ChevronUpIcon,
   CircleAlertIcon,
   CircleCheckIcon,
   CircleDotIcon,
@@ -48,6 +50,7 @@ export {
   CommandIcon,
   CopyIcon,
   CornerDownLeftIcon,
+  CornerDownRightIcon,
   CreditCardIcon,
   DownloadIcon,
   EllipsisVerticalIcon,
@@ -73,6 +76,7 @@ export {
   GlobeLockIcon,
   GripVerticalIcon,
   HandCoinsIcon,
+  HashIcon,
   HistoryIcon,
   HomeIcon,
   ImageIcon,
@@ -83,6 +87,7 @@ export {
   KeyRoundIcon,
   LanguagesIcon,
   LayersIcon,
+  LayoutGridIcon,
   LibraryIcon,
   LinkIcon,
   ListChecksIcon,
@@ -100,6 +105,7 @@ export {
   Maximize,
   MenuIcon,
   MessageCircleIcon,
+  MessageSquareIcon,
   Minus,
   MinusIcon,
   MonitorIcon,
@@ -111,6 +117,7 @@ export {
   PackageCheckIcon,
   PackageIcon,
   PackageXIcon,
+  PaletteIcon,
   PanelLeftIcon,
   PaperclipIcon,
   PauseIcon,
@@ -166,6 +173,7 @@ export {
   UploadIcon,
   UserIcon,
   UserMinusIcon,
+  UserPenIcon,
   UserPlusIcon,
   UsersIcon,
   UsersRoundIcon,

package/src/spree/json-preview-drawer.tsx

@@ -19,6 +19,7 @@ import {
   ExternalLinkIcon,
   Loader2Icon,
   RotateCcwIcon,
+  TerminalIcon,
   XIcon,
 } from './icons'
 import { type JsonValueLinkResolver, JsonValueView } from './json-value-view'
@@ -51,6 +52,12 @@ export interface JsonPreviewDrawerProps {
    * convention.
    */
   resolveLink?: JsonValueLinkResolver
+  /**
+   * A ready-made shell command that repeats the request. When given, the
+   * toolbar offers "Copy as curl". Build it with a placeholder in place of
+   * any credential — the drawer copies it verbatim.
+   */
+  curl?: string
 }
 
 export function JsonPreviewDrawer({
@@ -60,6 +67,7 @@ export function JsonPreviewDrawer({
   fetch,
   endpoint,
   resolveLink,
+  curl,
 }: JsonPreviewDrawerProps) {
   const { t } = useTranslation()
   const resolvedTitle = title ?? t('admin.components.json_preview_drawer.title')
@@ -111,7 +119,8 @@ export function JsonPreviewDrawer({
   }
 
   const [collapsed, setCollapsed] = useState<boolean | number>(2)
-  const { copied: copiedAll, copy } = useCopyToClipboard()
+  const { copied: copiedJson, copy: copyJson } = useCopyToClipboard()
+  const { copied: copiedCurl, copy: copyCurl } = useCopyToClipboard()
 
   const formatted = useMemo(() => (data ? JSON.stringify(data, null, 2) : ''), [data])
 
@@ -122,7 +131,7 @@ export function JsonPreviewDrawer({
         showCloseButton={false}
         className="w-full sm:max-w-2xl bg-zinc-950 text-zinc-100 border-zinc-800 overflow-hidden"
       >
-        <SheetHeader className="border-b border-zinc-800 bg-zinc-950 text-zinc-100 rounded-t-xl">
+        <SheetHeader className="border-b border-zinc-800 bg-zinc-950 text-zinc-100 rounded-t-2xl">
           <SheetTitle className="text-zinc-100 font-mono text-base">{resolvedTitle}</SheetTitle>
           {endpoint && (
             <SheetDescription className="text-zinc-400 font-mono text-xs">
@@ -159,12 +168,28 @@ export function JsonPreviewDrawer({
           <DepthControl value={collapsed} onChange={setCollapsed} />
 
           <span className="ml-auto inline-flex items-center gap-1">
-            <ToolbarButton size="xs" onClick={() => formatted && copy(formatted)} disabled={!data}>
-              {copiedAll ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
-              {copiedAll
+            <ToolbarButton
+              size="xs"
+              onClick={() => formatted && copyJson(formatted)}
+              disabled={!data}
+            >
+              {copiedJson ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
+              {copiedJson
                 ? t('admin.components.json_preview_drawer.copied')
-                : t('admin.components.json_preview_drawer.copy_all')}
+                : t('admin.components.json_preview_drawer.copy_json')}
             </ToolbarButton>
+            {curl && (
+              <ToolbarButton size="xs" onClick={() => copyCurl(curl)}>
+                {copiedCurl ? (
+                  <CheckIcon className="size-3.5" />
+                ) : (
+                  <TerminalIcon className="size-3.5" />
+                )}
+                {copiedCurl
+                  ? t('admin.components.json_preview_drawer.copied')
+                  : t('admin.components.json_preview_drawer.copy_curl')}
+              </ToolbarButton>
+            )}
             <ToolbarButton
               size="icon-xs"
               onClick={() => refetch()}
@@ -193,7 +218,7 @@ export function JsonPreviewDrawer({
           </span>
         </div>
 
-        <div className="themed-scrollbar flex-1 overflow-auto p-4 font-mono text-sm">
+        <div className="themed-scrollbar flex-1 overflow-auto p-4 font-mono text-base">
           {isLoading ? (
             <p className="text-zinc-500">{t('admin.common.loading')}</p>
           ) : error ? (

package/src/spree/json-value-view.tsx

@@ -71,7 +71,7 @@ export function JsonValueView({
   return (
     <div
       className={cn(
-        'font-mono text-sm',
+        'font-mono text-base',
         // The vscode theme is dark — when the parent doesn't already paint a
         // dark background, paint one here so the syntax colors stay legible.
         !bare && 'bg-zinc-950 text-zinc-100 rounded-md p-3',
@@ -87,9 +87,19 @@ export function JsonValueView({
         enableClipboard
         shortenTextAfterLength={60}
         components={{
-          value: ({ value: v, type, ...rest }) => (
-            <ValueRenderer value={v} type={type} resolveLink={resolveLink} {...rest} />
-          ),
+          // The viewer's own props, which React would warn about on a <span>.
+          value: ({
+            value: v,
+            type,
+            parentValue: _parentValue,
+            data: _data,
+            visible: _visible,
+            quotes: _quotes,
+            namespace: _namespace,
+            setValue: _setValue,
+            keyName: _keyName,
+            ...rest
+          }) => <ValueRenderer value={v} type={type} resolveLink={resolveLink} {...rest} />,
         }}
       />
     </div>

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

@@ -90,7 +90,7 @@ export function LabelUploadDialog({
 
           <DialogBody className="flex flex-col gap-4">
             {errors.root?.message && (
-              <p className="text-destructive text-sm" role="alert">
+              <p className="text-destructive text-base" role="alert">
                 {errors.root.message}
               </p>
             )}

package/src/spree/language-menu-items.tsx

@@ -34,7 +34,7 @@ export function LanguageMenuItems({ label, locales, value, onSelect }: LanguageM
     // Not a DropdownMenuItem: the row is a container for the select, and menu
     // items steal the pointer and close the menu on click.
     <div className="flex items-center justify-between gap-2 rounded-lg px-2 py-1.5">
-      <span className="text-sm text-foreground">{label}</span>
+      <span className="text-base text-foreground">{label}</span>
       {/* The select is transparent and stretched over the pill, so the hit area
           tracks the pill's width whatever the locale name is. `focus-within`
           carries the focus ring, since `opacity-0` hides the native one. */}

package/src/spree/metadata/metadata-card.tsx

@@ -72,7 +72,7 @@ export function MetadataList({
           {externalReferencesTitle && (
             <h4 className="text-xs font-medium text-muted-foreground">{externalReferencesTitle}</h4>
           )}
-          <dl className="grid grid-cols-[minmax(160px,1fr)_2fr] items-center gap-x-4 gap-y-1 text-sm">
+          <dl className="grid grid-cols-[minmax(160px,1fr)_2fr] items-center gap-x-4 gap-y-1 text-base">
             {Object.entries(externalReferences).map(([system, key]) => (
               <Fragment key={system}>
                 <dt>
@@ -94,7 +94,7 @@ export function MetadataList({
           {both && metadataTitle && (
             <h4 className="text-xs font-medium text-muted-foreground">{metadataTitle}</h4>
           )}
-          <dl className="grid grid-cols-[minmax(160px,1fr)_2fr] gap-x-4 gap-y-2 text-sm">
+          <dl className="grid grid-cols-[minmax(160px,1fr)_2fr] gap-x-4 gap-y-2 text-base">
             {Object.entries(metadata).map(([key, value]) => (
               <Fragment key={key}>
                 <dt>

package/src/spree/order-cancel-dialog.tsx

@@ -67,7 +67,7 @@ export function OrderCancelDialog({
 
           <DialogBody>
             {errors.root?.message && (
-              <p className="text-destructive text-sm" role="alert">
+              <p className="text-destructive text-base" role="alert">
                 {errors.root.message}
               </p>
             )}
@@ -94,7 +94,7 @@ export function OrderCancelDialog({
                   render={({ field }) => (
                     <label
                       htmlFor="order-cancel-refund"
-                      className="flex cursor-pointer items-start gap-2 text-sm"
+                      className="flex cursor-pointer items-start gap-2 text-base"
                     >
                       <Checkbox
                         id="order-cancel-refund"
@@ -119,7 +119,7 @@ export function OrderCancelDialog({
                   render={({ field }) => (
                     <label
                       htmlFor="order-cancel-notify"
-                      className="flex cursor-pointer items-center gap-2 text-sm"
+                      className="flex cursor-pointer items-center gap-2 text-base"
                     >
                       <Checkbox
                         id="order-cancel-notify"

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

@@ -12,10 +12,12 @@ import {
 import { Field, FieldLabel } from '../ui/field'
 import { Input } from '../ui/input'
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+import { Item, ItemActions, ItemContent, ItemFooter } from '../ui/item'
 import { Textarea } from '../ui/textarea'
 import {
   type PostSaleSelection,
   type PostSaleUnit,
+  PostSaleUnitLabel,
   QuantityPicker,
   selectedUnits,
 } from './post-sale-fields'
@@ -158,12 +160,11 @@ export function CreateClaimDialog({
               const chosenQuantity = selection[line.id] ?? 0
 
               return (
-                <div
-                  key={line.id}
-                  className="flex flex-col gap-2 rounded-lg border border-border-subtle p-3"
-                >
-                  <div className="flex items-center justify-between gap-4">
-                    <span className="min-w-0 truncate text-sm">{line.label}</span>
+                <Item variant="outline" key={line.id}>
+                  <ItemContent className="min-w-0">
+                    <PostSaleUnitLabel unit={line} />
+                  </ItemContent>
+                  <ItemActions>
                     <Input
                       type="number"
                       min={0}
@@ -187,35 +188,37 @@ export function CreateClaimDialog({
                         }
                       }}
                     />
-                  </div>
+                  </ItemActions>
                   {chosenQuantity > 0 && (
-                    <Field>
-                      <FieldLabel htmlFor={`claim-amount-${line.id}`}>
-                        {t('admin.pages.orders.detail.claims.refund_amount')}
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon>
-                          <InputGroupText>{currencySymbol}</InputGroupText>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id={`claim-amount-${line.id}`}
-                          type="number"
-                          step="any"
-                          min="0"
-                          value={amounts[line.id] ?? ''}
-                          onChange={(event) => {
-                            setAmounts({ ...amounts, [line.id]: event.target.value })
-                            // Clearing the field hands it back to the quantity.
-                            setTypedAmounts({
-                              ...typedAmounts,
-                              [line.id]: event.target.value !== '',
-                            })
-                          }}
-                        />
-                      </InputGroup>
-                    </Field>
+                    <ItemFooter className="flex-col items-stretch">
+                      <Field>
+                        <FieldLabel htmlFor={`claim-amount-${line.id}`}>
+                          {t('admin.pages.orders.detail.claims.refund_amount')}
+                        </FieldLabel>
+                        <InputGroup>
+                          <InputGroupAddon>
+                            <InputGroupText>{currencySymbol}</InputGroupText>
+                          </InputGroupAddon>
+                          <InputGroupInput
+                            id={`claim-amount-${line.id}`}
+                            type="number"
+                            step="any"
+                            min="0"
+                            value={amounts[line.id] ?? ''}
+                            onChange={(event) => {
+                              setAmounts({ ...amounts, [line.id]: event.target.value })
+                              // Clearing the field hands it back to the quantity.
+                              setTypedAmounts({
+                                ...typedAmounts,
+                                [line.id]: event.target.value !== '',
+                              })
+                            }}
+                          />
+                        </InputGroup>
+                      </Field>
+                    </ItemFooter>
                   )}
-                </div>
+                </Item>
               )
             })}
           </div>