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

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

@@ -0,0 +1,253 @@
+import { type ReactNode, 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 { Textarea } from '../ui/textarea'
+import {
+  type PostSaleSelection,
+  type PostSaleUnit,
+  QuantityPicker,
+  selectedUnits,
+} from './post-sale-fields'
+
+/**
+ * Opens a return: which units are coming back, why, and any note.
+ *
+ * `extraFields` is where a surface adds what only it can offer — the
+ * operator's shelf picker, for instance — so the shape stays one component.
+ * Shared by the operator's order page and the seller's.
+ */
+export function CreateReturnDialog({
+  units,
+  reasonField,
+  extraFields,
+  onClose,
+  onSubmit,
+  pending = false,
+}: {
+  units: PostSaleUnit[]
+  /** The reason picker, wired to whichever vocabulary the caller reads. */
+  reasonField?: ReactNode
+  extraFields?: ReactNode
+  onClose: () => void
+  onSubmit: (params: {
+    items: Array<{ fulfillment_item_id: string; quantity: number }>
+    memo?: string
+  }) => void
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+  const [selection, setSelection] = useState<PostSaleSelection>({})
+  const [memo, setMemo] = useState('')
+
+  const chosen = selectedUnits(selection)
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('admin.pages.orders.detail.returns.create_title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody className="flex flex-col gap-4">
+          <QuantityPicker units={units} selection={selection} onChange={setSelection} />
+          {reasonField}
+          {extraFields}
+          <Field>
+            <FieldLabel htmlFor="return-memo">
+              {t('admin.pages.orders.detail.returns.memo')}
+            </FieldLabel>
+            <Textarea
+              id="return-memo"
+              value={memo}
+              onChange={(event) => setMemo(event.target.value)}
+            />
+          </Field>
+        </DialogBody>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose} disabled={pending}>
+            {t('admin.actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            disabled={chosen.length === 0 || pending}
+            onClick={() =>
+              onSubmit({
+                items: chosen.map(([id, quantity]) => ({
+                  fulfillment_item_id: id,
+                  quantity,
+                })),
+                memo: memo.trim() || undefined,
+              })
+            }
+          >
+            {t('admin.pages.orders.detail.returns.actions.create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/** A line the claim can name, with what one unit of it cost. */
+export type ClaimableLine = PostSaleUnit & {
+  /** Unit price, used to default the refund to what was actually paid. */
+  price?: string | null
+}
+
+/**
+ * Reports a problem with a delivery: which lines, how many, and what to give
+ * back for each.
+ *
+ * A claim is about what was bought rather than what shipped — goods that
+ * never arrived are exactly what one is for — so the lines come from the
+ * order, not from its fulfillments.
+ */
+export function CreateClaimDialog({
+  lines,
+  currencySymbol,
+  reasonField,
+  onClose,
+  onSubmit,
+  pending = false,
+}: {
+  lines: ClaimableLine[]
+  currencySymbol: string
+  reasonField?: ReactNode
+  onClose: () => void
+  onSubmit: (params: {
+    items: Array<{
+      line_item_id: string
+      quantity: number
+      description?: string
+      refund_amount?: string
+    }>
+    memo?: string
+  }) => void
+  pending?: boolean
+}) {
+  const { t } = useTranslation()
+  const [selection, setSelection] = useState<PostSaleSelection>({})
+  const [amounts, setAmounts] = useState<Record<string, string>>({})
+  const [memo, setMemo] = useState('')
+
+  const chosen = selectedUnits(selection)
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('admin.pages.orders.detail.claims.create_title')}</DialogTitle>
+        </DialogHeader>
+        <DialogBody className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            {lines.map((line) => {
+              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>
+                    <Input
+                      type="number"
+                      min={0}
+                      max={line.quantity}
+                      className="w-20"
+                      value={chosenQuantity}
+                      aria-label={line.label}
+                      onChange={(event) => {
+                        const quantity = Math.max(
+                          0,
+                          Math.min(Number(event.target.value), line.quantity),
+                        )
+                        setSelection({ ...selection, [line.id]: quantity })
+                        // Default the refund to what was paid for those units;
+                        // the merchant can still overwrite it.
+                        if (quantity > 0 && !amounts[line.id]) {
+                          const unitPrice = Number(line.price)
+                          if (Number.isFinite(unitPrice)) {
+                            setAmounts((current) => ({
+                              ...current,
+                              [line.id]: (unitPrice * quantity).toFixed(2),
+                            }))
+                          }
+                        }
+                      }}
+                    />
+                  </div>
+                  {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="0.01"
+                          min="0"
+                          value={amounts[line.id] ?? ''}
+                          onChange={(event) =>
+                            setAmounts({ ...amounts, [line.id]: event.target.value })
+                          }
+                        />
+                      </InputGroup>
+                    </Field>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+
+          {reasonField}
+          <Field>
+            <FieldLabel htmlFor="claim-memo">
+              {t('admin.pages.orders.detail.returns.memo')}
+            </FieldLabel>
+            <Textarea
+              id="claim-memo"
+              value={memo}
+              onChange={(event) => setMemo(event.target.value)}
+            />
+          </Field>
+        </DialogBody>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose} disabled={pending}>
+            {t('admin.actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            disabled={chosen.length === 0 || pending}
+            onClick={() =>
+              onSubmit({
+                items: chosen.map(([id, quantity]) => ({
+                  line_item_id: id,
+                  quantity,
+                  refund_amount: amounts[id] || undefined,
+                })),
+                memo: memo.trim() || undefined,
+              })
+            }
+          >
+            {t('admin.pages.orders.detail.claims.actions.create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/spree/post-sale-fields.tsx

@@ -0,0 +1,133 @@
+import { useTranslation } from 'react-i18next'
+import { Field, FieldLabel } from '../ui/field'
+import { Input } from '../ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+
+/** A unit on the order that a return, exchange or claim can name. */
+export type PostSaleUnit = {
+  id: string
+  label: string
+  quantity: number
+}
+
+/** How many of each unit a record covers; zero means "not included". */
+export type PostSaleSelection = Record<string, number>
+
+/**
+ * Picks how many of each unit a post-sale record covers.
+ *
+ * Shared by the operator's order page and the seller's, so opening a return
+ * looks the same on both sides of a marketplace.
+ */
+export function QuantityPicker({
+  units,
+  selection,
+  onChange,
+}: {
+  units: PostSaleUnit[]
+  selection: PostSaleSelection
+  onChange: (selection: PostSaleSelection) => void
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {units.map((unit) => (
+        <div
+          key={unit.id}
+          className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle p-3"
+        >
+          <span className="min-w-0 truncate text-sm">{unit.label}</span>
+          <Input
+            type="number"
+            min={0}
+            max={unit.quantity}
+            className="w-20"
+            value={selection[unit.id] ?? 0}
+            aria-label={unit.label}
+            onChange={(event) =>
+              onChange({
+                ...selection,
+                [unit.id]: Math.max(0, Math.min(Number(event.target.value), unit.quantity)),
+              })
+            }
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/** The units a record actually covers, as id/quantity pairs. */
+export function selectedUnits(selection: PostSaleSelection): Array<[string, number]> {
+  return Object.entries(selection).filter(([, quantity]) => quantity > 0)
+}
+
+/** One entry of a merchant's reason vocabulary. */
+export type ReasonOption = {
+  id: string
+  name: string
+}
+
+/**
+ * Reason dropdown, shared by every surface that records why something
+ * happened. Optional by design — the API accepts a record without a reason,
+ * and a merchant mid-return should not be blocked because nobody has curated
+ * the list yet.
+ *
+ * With no `emptyOptionLabel` the field hides itself when the vocabulary is
+ * empty, which suits a form that has other fields to fall back on. Passing one
+ * keeps the field visible with an explicit "none" choice at the top, for a
+ * surface where the reason is the point and its absence has to be sayable.
+ *
+ * The reasons come from the caller: each panel reads its own endpoint, and
+ * which vocabulary a surface offers is not this component's business.
+ */
+export function ReasonField({
+  id,
+  reasons,
+  value,
+  onChange,
+  label,
+  emptyOptionLabel,
+}: {
+  /** Scopes the field id, since a page can show more than one of these. */
+  id: string
+  reasons: ReasonOption[]
+  value: string
+  onChange: (value: string) => void
+  label?: string
+  emptyOptionLabel?: string
+}) {
+  const { t } = useTranslation()
+
+  if (reasons.length === 0 && emptyOptionLabel === undefined) return null
+
+  // Base UI's <Select> needs `items` to resolve the trigger label; without it
+  // the closed trigger renders the raw id (see CLAUDE.md).
+  const options = [
+    ...(emptyOptionLabel === undefined ? [] : [{ value: '', label: emptyOptionLabel }]),
+    ...reasons.map((reason) => ({ value: reason.id, label: reason.name })),
+  ]
+
+  return (
+    <Field>
+      <FieldLabel htmlFor={`reason-${id}`}>
+        {label ?? t('admin.pages.orders.detail.returns.reason')}
+      </FieldLabel>
+      <Select items={options} value={value} onValueChange={(next) => onChange(next ?? '')}>
+        <SelectTrigger id={`reason-${id}`}>
+          {/* An explicit empty choice IS the label for "none", so it must show
+              rather than fall through to the placeholder Base UI renders for
+              an unset value. */}
+          <SelectValue placeholder={emptyOptionLabel ?? t('admin.common.select_placeholder')} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </Field>
+  )
+}