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

package/src/spree/bulk-variants-table.tsx

@@ -0,0 +1,434 @@
+import type { ColumnDef } from '@tanstack/react-table'
+import { useMemo } from 'react'
+import { DataGrid, DecimalCell, ReadOnlyCell, SelectCell, SwitchCell, TextCell } from './data-grid'
+
+export interface BulkVariantsRow {
+  id: string
+  variantLabel?: string | null
+  sku?: string | null
+  barcode?: string | null
+  // Display strings — decimal weight/dimension values, or null for unset.
+  weight?: string | null
+  weightUnit?: string | null
+  height?: string | null
+  width?: string | null
+  depth?: string | null
+  dimensionsUnit?: string | null
+  preorderable?: boolean
+  backorderLimit?: string | null
+  taxCategoryId?: string | null
+  hsCode?: string | null
+  /** ISO 3166-1 alpha-2 code, never a country record id. */
+  countryOfOrigin?: string | null
+  customsDescription?: string | null
+  unitsPerCarton?: string | null
+  cartonPackageTypeId?: string | null
+  cartonWeight?: string | null
+  cartonsPerPallet?: string | null
+}
+
+export type BulkVariantsField =
+  | 'sku'
+  | 'barcode'
+  | 'weight'
+  | 'weightUnit'
+  | 'height'
+  | 'width'
+  | 'depth'
+  | 'dimensionsUnit'
+  | 'preorderable'
+  | 'backorderLimit'
+  | 'taxCategoryId'
+  | 'hsCode'
+  | 'countryOfOrigin'
+  | 'customsDescription'
+  | 'unitsPerCarton'
+  | 'cartonPackageTypeId'
+  | 'cartonWeight'
+  | 'cartonsPerPallet'
+
+export type BulkVariantsChange =
+  | { field: Exclude<BulkVariantsField, 'preorderable'>; value: string | null }
+  | { field: 'preorderable'; value: boolean }
+
+export interface BulkVariantsTableLabels {
+  /** Column headers. */
+  variant: string
+  sku: string
+  barcode: string
+  weight: string
+  weightUnit: string
+  height: string
+  width: string
+  depth: string
+  dimensionsUnit: string
+  preorderable: string
+  backorderLimit: string
+  taxCategory: string
+  hsCode: string
+  countryOfOrigin: string
+  customsDescription: string
+  unitsPerCarton: string
+  cartonPackageType: string
+  cartonWeight: string
+  cartonsPerPallet: string
+  /** Placeholder for a variant row with no options text (e.g. "Default"). */
+  variantDefault: string
+  /** Shown in unit cells with no explicit value ("inherit the default"). */
+  unitDefault: string
+  /** Shown in the tax-category cell when none is set. */
+  taxCategoryNone: string
+  /** Shown in the country-of-origin cell when none is set. */
+  countryOfOriginNone: string
+  /** Shown in the carton cell when the variant is packed into none. */
+  cartonPackageTypeNone: string
+  /** Aria label on the DataGrid for screen readers. */
+  gridAriaLabel?: string
+}
+
+export interface BulkVariantsTableProps {
+  rows: BulkVariantsRow[]
+  /** Localized strings — the caller owns translations. */
+  labels: BulkVariantsTableLabels
+  weightUnitOptions: ReadonlyArray<{ value: string; label: string }>
+  dimensionUnitOptions: ReadonlyArray<{ value: string; label: string }>
+  /** Omit to hide the tax-category column (no tax categories configured). */
+  taxCategoryOptions?: ReadonlyArray<{ value: string; label: string }>
+  /**
+   * The store's cartons. Omit to hide the packing columns entirely. The
+   * optional `hint` carries each carton's size, so two similarly named ones
+   * are told apart without leaving the sheet.
+   */
+  cartonOptions?: ReadonlyArray<{ value: string; label: string; hint?: string }>
+  /**
+   * Countries as `{ value: ISO, label: name }`. Omit to hide the customs
+   * columns entirely (e.g. the country list has not loaded yet). Values are
+   * ISO codes so the stored data survives the countries table going away.
+   */
+  countryOptions?: ReadonlyArray<{ value: string; label: string }>
+  /** Called when the user commits a value to a cell. The id is the row id. */
+  onChange: (rowId: string, change: BulkVariantsChange) => void
+}
+
+// Decimal columns in grid order, paired with their fixed keyboard column
+// coordinate (see the coordinate map in the component body).
+const DECIMAL_COLUMNS: ReadonlyArray<{
+  field: 'weight' | 'height' | 'width' | 'depth'
+  col: number
+}> = [
+  { field: 'weight', col: 3 },
+  { field: 'height', col: 5 },
+  { field: 'width', col: 6 },
+  { field: 'depth', col: 7 },
+]
+
+/**
+ * Presentational primitive for a "spreadsheet of variant fields" UI: SKU,
+ * barcode, shipping measurements + units, availability, tax category.
+ * Selection, copy/paste, and drag-fill come from the DataGrid. Owns NO data
+ * fetching, edit tracking, or save logic — the caller projects its rows into
+ * BulkVariantsRow shape and writes edits back through `onChange`.
+ */
+export function BulkVariantsTable({
+  rows,
+  labels,
+  weightUnitOptions,
+  dimensionUnitOptions,
+  taxCategoryOptions,
+  countryOptions,
+  cartonOptions,
+  onChange,
+}: BulkVariantsTableProps) {
+  const columns = useMemo<ColumnDef<BulkVariantsRow>[]>(() => {
+    // Keyboard column coordinates, fixed per column: variant label is
+    // read-only (unregistered), then sku=1, barcode=2, weight=3, unit=4,
+    // height=5, width=6, depth=7, unit=8, preorderable=9, backorder=10,
+    // tax=11, hs code=12, origin=13, customs description=14, carton=15,
+    // carton weight=16, cartons per pallet=17, units per carton=18.
+    const numericHeader = (label: string) => () => <span className="block text-right">{label}</span>
+    const rowLabel = (r: BulkVariantsRow) => r.variantLabel ?? labels.variantDefault
+
+    const defs: ColumnDef<BulkVariantsRow>[] = [
+      {
+        id: 'variant',
+        header: labels.variant,
+        cell: ({ row }) => (
+          <ReadOnlyCell className="whitespace-nowrap text-muted-foreground">
+            {rowLabel(row.original)}
+          </ReadOnlyCell>
+        ),
+      },
+      {
+        id: 'sku',
+        header: labels.sku,
+        cell: ({ row }) => (
+          <TextCell
+            coords={{ row: row.index, col: 1 }}
+            value={row.original.sku ?? null}
+            onChange={(next) => onChange(row.original.id, { field: 'sku', value: next })}
+            ariaLabel={`${labels.sku} — ${rowLabel(row.original)}`}
+          />
+        ),
+      },
+      {
+        id: 'barcode',
+        header: labels.barcode,
+        cell: ({ row }) => (
+          <TextCell
+            coords={{ row: row.index, col: 2 }}
+            value={row.original.barcode ?? null}
+            onChange={(next) => onChange(row.original.id, { field: 'barcode', value: next })}
+            ariaLabel={`${labels.barcode} — ${rowLabel(row.original)}`}
+          />
+        ),
+      },
+      ...DECIMAL_COLUMNS.map<ColumnDef<BulkVariantsRow>>(({ field, col }) => ({
+        id: field,
+        header: numericHeader(labels[field]),
+        cell: ({ row }) => (
+          <DecimalCell
+            coords={{ row: row.index, col }}
+            value={row.original[field] ?? null}
+            onChange={(next) => onChange(row.original.id, { field, value: next })}
+            ariaLabel={`${labels[field]} — ${rowLabel(row.original)}`}
+          />
+        ),
+      })),
+      {
+        id: 'weight_unit',
+        header: labels.weightUnit,
+        cell: ({ row }) => (
+          <SelectCell
+            coords={{ row: row.index, col: 4 }}
+            value={row.original.weightUnit ?? null}
+            options={weightUnitOptions}
+            nullLabel={labels.unitDefault}
+            onChange={(next) => onChange(row.original.id, { field: 'weightUnit', value: next })}
+            ariaLabel={`${labels.weightUnit} — ${rowLabel(row.original)}`}
+          />
+        ),
+      },
+      {
+        id: 'dimensions_unit',
+        header: labels.dimensionsUnit,
+        cell: ({ row }) => (
+          <SelectCell
+            coords={{ row: row.index, col: 8 }}
+            value={row.original.dimensionsUnit ?? null}
+            options={dimensionUnitOptions}
+            nullLabel={labels.unitDefault}
+            onChange={(next) => onChange(row.original.id, { field: 'dimensionsUnit', value: next })}
+            ariaLabel={`${labels.dimensionsUnit} — ${rowLabel(row.original)}`}
+          />
+        ),
+      },
+      {
+        id: 'preorderable',
+        header: labels.preorderable,
+        cell: ({ row }) => (
+          <SwitchCell
+            coords={{ row: row.index, col: 9 }}
+            value={row.original.preorderable ?? false}
+            onChange={(next) => onChange(row.original.id, { field: 'preorderable', value: next })}
+            ariaLabel={`${labels.preorderable} — ${rowLabel(row.original)}`}
+          />
+        ),
+      },
+      {
+        id: 'backorder_limit',
+        header: numericHeader(labels.backorderLimit),
+        cell: ({ row }) => (
+          <DecimalCell
+            coords={{ row: row.index, col: 10 }}
+            value={row.original.backorderLimit ?? null}
+            onChange={(next) => onChange(row.original.id, { field: 'backorderLimit', value: next })}
+            ariaLabel={`${labels.backorderLimit} — ${rowLabel(row.original)}`}
+          />
+        ),
+      },
+    ]
+
+    if (taxCategoryOptions) {
+      defs.push({
+        id: 'tax_category',
+        header: labels.taxCategory,
+        cell: ({ row }) => (
+          <SelectCell
+            coords={{ row: row.index, col: 11 }}
+            value={row.original.taxCategoryId ?? null}
+            options={taxCategoryOptions}
+            nullLabel={labels.taxCategoryNone}
+            onChange={(next) => onChange(row.original.id, { field: 'taxCategoryId', value: next })}
+            ariaLabel={`${labels.taxCategory} — ${rowLabel(row.original)}`}
+          />
+        ),
+      })
+    }
+
+    // Customs columns travel together — classification is only meaningful
+    // alongside the origin it is declared with.
+    if (countryOptions) {
+      defs.push(
+        {
+          id: 'hs_code',
+          header: labels.hsCode,
+          cell: ({ row }) => (
+            <TextCell
+              coords={{ row: row.index, col: 12 }}
+              value={row.original.hsCode ?? null}
+              onChange={(next) => onChange(row.original.id, { field: 'hsCode', value: next })}
+              ariaLabel={`${labels.hsCode} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+        {
+          id: 'country_of_origin',
+          header: labels.countryOfOrigin,
+          cell: ({ row }) => (
+            <SelectCell
+              coords={{ row: row.index, col: 13 }}
+              value={row.original.countryOfOrigin ?? null}
+              options={countryOptions}
+              nullLabel={labels.countryOfOriginNone}
+              onChange={(next) =>
+                onChange(row.original.id, { field: 'countryOfOrigin', value: next })
+              }
+              ariaLabel={`${labels.countryOfOrigin} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+        {
+          id: 'customs_description',
+          header: labels.customsDescription,
+          cell: ({ row }) => (
+            <TextCell
+              coords={{ row: row.index, col: 14 }}
+              value={row.original.customsDescription ?? null}
+              onChange={(next) =>
+                onChange(row.original.id, { field: 'customsDescription', value: next })
+              }
+              ariaLabel={`${labels.customsDescription} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+      )
+    }
+
+    // The packing chain travels together: a carton weight or a pallet count
+    // means nothing without the carton they describe.
+    if (cartonOptions) {
+      defs.push(
+        {
+          id: 'units_per_carton',
+          header: numericHeader(labels.unitsPerCarton),
+          cell: ({ row }) => (
+            <DecimalCell
+              coords={{ row: row.index, col: 18 }}
+              value={row.original.unitsPerCarton ?? null}
+              onChange={(next) =>
+                onChange(row.original.id, { field: 'unitsPerCarton', value: next })
+              }
+              ariaLabel={`${labels.unitsPerCarton} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+        {
+          id: 'carton_package_type',
+          header: labels.cartonPackageType,
+          cell: ({ row }) => (
+            <SelectCell
+              coords={{ row: row.index, col: 15 }}
+              value={row.original.cartonPackageTypeId ?? null}
+              options={cartonOptions}
+              nullLabel={labels.cartonPackageTypeNone}
+              onChange={(next) =>
+                onChange(row.original.id, { field: 'cartonPackageTypeId', value: next })
+              }
+              ariaLabel={`${labels.cartonPackageType} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+        {
+          id: 'carton_weight',
+          header: numericHeader(labels.cartonWeight),
+          cell: ({ row }) => (
+            <DecimalCell
+              coords={{ row: row.index, col: 16 }}
+              value={row.original.cartonWeight ?? null}
+              onChange={(next) => onChange(row.original.id, { field: 'cartonWeight', value: next })}
+              ariaLabel={`${labels.cartonWeight} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+        {
+          id: 'cartons_per_pallet',
+          header: numericHeader(labels.cartonsPerPallet),
+          cell: ({ row }) => (
+            <DecimalCell
+              coords={{ row: row.index, col: 17 }}
+              value={row.original.cartonsPerPallet ?? null}
+              onChange={(next) =>
+                onChange(row.original.id, { field: 'cartonsPerPallet', value: next })
+              }
+              ariaLabel={`${labels.cartonsPerPallet} — ${rowLabel(row.original)}`}
+            />
+          ),
+        },
+      )
+    }
+
+    // Reorder to visual sequence: the coordinate map above is stable, but
+    // the defs array built column groups out of order for concision.
+    const order = [
+      'variant',
+      'sku',
+      'barcode',
+      'weight',
+      'weight_unit',
+      'height',
+      'width',
+      'depth',
+      'dimensions_unit',
+      'preorderable',
+      'backorder_limit',
+      'tax_category',
+      'hs_code',
+      'country_of_origin',
+      'customs_description',
+      'units_per_carton',
+      'carton_package_type',
+      'carton_weight',
+      'cartons_per_pallet',
+    ]
+    return defs.sort((a, b) => order.indexOf(a.id as string) - order.indexOf(b.id as string))
+  }, [
+    onChange,
+    labels,
+    weightUnitOptions,
+    dimensionUnitOptions,
+    taxCategoryOptions,
+    countryOptions,
+    cartonOptions,
+  ])
+
+  // Roughly 130px a column, which is what the widest headers here ("Available
+  // for pre-order", "Customs description") need before they wrap to two lines.
+  // The grid scrolls sideways past that rather than squeezing them.
+  const minWidth = cartonOptions
+    ? 'min-w-[2470px]'
+    : countryOptions
+      ? 'min-w-[1950px]'
+      : 'min-w-[1560px]'
+
+  return (
+    <DataGrid<BulkVariantsRow>
+      rows={rows}
+      columns={columns}
+      getRowId={(row) => row.id}
+      className={minWidth}
+      aria-label={labels.gridAriaLabel}
+      // Sets a min-width well past any viewport, so it has to scroll itself.
+      scrollable
+    />
+  )
+}

package/src/spree/calculator-summary.tsx

@@ -13,7 +13,11 @@
  * draft edits update the row immediately, before any save.
  */
 export interface CalculatorPayload {
-  /** Human-readable name (e.g. "Flat Rate"). Optional; if missing the type is demodulized. */
+  /**
+   * Display name for the calculator, already localized by the caller — this
+   * package is headless and does not resolve translations itself. Optional;
+   * if missing the type is demodulized.
+   */
   label?: string | null
   /** STI class name (e.g. "Spree::Calculator::FlatRate"). Used as a label fallback. */
   type?: string | null

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

@@ -0,0 +1,219 @@
+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 { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '../ui/input-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
+import type { RefundMethod } from './return-dialogs'
+
+/** How a claim is settled. */
+export type ClaimResolution = 'refund' | 'replacement' | 'refund_and_replacement'
+
+/** One claimed line, as the resolve form needs it. */
+export type ClaimLineForResolve = {
+  id: string
+  label: string
+  quantity: number
+  /** Whether the claim was opened asking for this line to be replaced. */
+  sendReplacement: boolean
+}
+
+/**
+ * Settles a claim: money back, a replacement shipment, or both.
+ *
+ * The resolution is chosen here rather than at claim creation, so the
+ * merchant decides how to make things right once they have the facts. The
+ * currency symbol comes from the caller — the operator reads it from the
+ * store, and a seller has no currency of their own.
+ *
+ * Shared by the operator's order page and the seller's.
+ */
+export function ClaimResolveDialog({
+  lines,
+  defaultAmount,
+  currencySymbol,
+  onClose,
+  onSubmit,
+  pending = false,
+}: {
+  lines: ClaimLineForResolve[]
+  /** What to offer as the refund, already resolved by the caller. */
+  defaultAmount: string
+  currencySymbol: string
+  onClose: () => void
+  onSubmit: (params: {
+    resolution: ClaimResolution
+    refundMethod: RefundMethod
+    amount?: string
+    replacementLineItemIds: string[]
+  }) => void
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+
+  const [resolution, setResolution] = useState<ClaimResolution>('refund')
+  const [refundMethod, setRefundMethod] = useState<RefundMethod>('store_credit')
+  const [amount, setAmount] = useState(defaultAmount)
+  const [replacing, setReplacing] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(lines.map((line) => [line.id, line.sendReplacement])),
+  )
+
+  const refunding = resolution.includes('refund')
+  const sendingReplacement = resolution.includes('replacement')
+  const chosenReplacements = Object.entries(replacing)
+    .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 methodOptions = [
+    {
+      value: 'store_credit',
+      label: t('admin.pages.orders.detail.returns.refund_methods.store_credit'),
+    },
+    {
+      value: 'original_payment',
+      label: t('admin.pages.orders.detail.returns.refund_methods.original_payment'),
+    },
+  ]
+
+  // Refunding nothing, or replacing nothing, is what the server rejects —
+  // say so here instead of letting the request fail.
+  const ready =
+    (!refunding || Number(amount) > 0) && (!sendingReplacement || chosenReplacements.length > 0)
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('admin.pages.orders.detail.claims.resolve_title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody className="flex flex-col gap-4">
+          <Field>
+            <FieldLabel htmlFor="claim-resolution">
+              {t('admin.pages.orders.detail.claims.resolution')}
+            </FieldLabel>
+            <Select
+              items={resolutionOptions}
+              value={resolution}
+              onValueChange={(value) => setResolution(value as ClaimResolution)}
+            >
+              <SelectTrigger id="claim-resolution">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {resolutionOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {refunding && (
+            <>
+              <Field>
+                <FieldLabel htmlFor="claim-resolve-amount">
+                  {t('admin.pages.orders.detail.claims.refund_amount')}
+                </FieldLabel>
+                <InputGroup>
+                  <InputGroupAddon>
+                    <InputGroupText>{currencySymbol}</InputGroupText>
+                  </InputGroupAddon>
+                  <InputGroupInput
+                    id="claim-resolve-amount"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    value={amount}
+                    onChange={(event) => setAmount(event.target.value)}
+                  />
+                </InputGroup>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="claim-refund-method">
+                  {t('admin.pages.orders.detail.returns.refund_method')}
+                </FieldLabel>
+                <Select
+                  items={methodOptions}
+                  value={refundMethod}
+                  onValueChange={(value) => setRefundMethod(value as RefundMethod)}
+                >
+                  <SelectTrigger id="claim-refund-method">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {methodOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            </>
+          )}
+
+          {sendingReplacement && (
+            <div className="flex flex-col gap-2">
+              <span className="font-medium text-sm">
+                {t('admin.pages.orders.detail.claims.replacement_items')}
+              </span>
+              {lines.map((line) => (
+                <div
+                  key={line.id}
+                  className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle p-3"
+                >
+                  <span className="truncate text-sm">
+                    {line.label}
+                    <span className="text-muted-foreground"> ×{line.quantity}</span>
+                  </span>
+                  <Switch
+                    checked={replacing[line.id] ?? false}
+                    onCheckedChange={(checked) =>
+                      setReplacing({ ...replacing, [line.id]: checked })
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </DialogBody>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose} disabled={pending}>
+            {t('admin.actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            disabled={!ready || pending}
+            onClick={() =>
+              onSubmit({
+                resolution,
+                refundMethod,
+                amount: refunding ? amount : undefined,
+                replacementLineItemIds: chosenReplacements,
+              })
+            }
+          >
+            {t('admin.pages.orders.detail.claims.actions.resolve')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/spree/confirm-dialog.tsx

@@ -64,7 +64,7 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
             <DialogTitle>{options.title ?? t('admin.components.confirm_dialog.title')}</DialogTitle>
             <DialogDescription>{options.message}</DialogDescription>
           </DialogHeader>
-          <DialogFooter>
+          <DialogFooter className="border-0">
             <Button variant="outline" onClick={() => handleClose(false)}>
               {options.cancelLabel ?? t('admin.actions.cancel')}
             </Button>

package/src/spree/copy-to-clipboard-button.tsx

@@ -1,8 +1,8 @@
-import { CheckIcon, CopyIcon } from 'lucide-react'
 import type { ComponentProps, ReactNode } from 'react'
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard'
 import { cn } from '../lib/utils'
 import { Button } from '../ui/button'
+import { CheckIcon, CopyIcon } from './icons'
 
 type ButtonProps = ComponentProps<typeof Button>