@spree/seller-dashboard 1.0.0-beta.1

package/src/components/orders/post-sale-create-dialogs.tsx

@@ -0,0 +1,201 @@
+import { currencyParts } from '@spree/dashboard-core'
+import {
+  Field,
+  FieldLabel,
+  ReasonField,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  CreateClaimDialog as SharedCreateClaimDialog,
+  CreateReturnDialog as SharedCreateReturnDialog,
+} from '@spree/dashboard-ui'
+import type { Order } from '@spree/seller-sdk'
+import i18n from 'i18next'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useClaimActions, useReturnActions } from '../../hooks/use-post-sale'
+import { useReasons } from '../../hooks/use-reasons'
+import { useStockLocations } from '../../hooks/use-stock-locations'
+import { unitLabel } from './line-label'
+
+/** Units that actually went out, which is all that can come back. */
+export function fulfilledUnits(order: Order) {
+  return (order.fulfillments ?? []).flatMap((fulfillment) =>
+    (fulfillment.fulfillment_items ?? []).map((item) => ({
+      id: item.id,
+      label: unitLabel(item),
+      quantity: item.quantity,
+    })),
+  )
+}
+
+/**
+ * Takes goods back on one of this seller's orders.
+ *
+ * The shelf list is the seller's own, so a marketplace warehouse never
+ * appears — and the server refuses one anyway. Shelves that accept returns
+ * lead, the rest stay selectable, since a one-off return has to be routable
+ * somewhere even when none is flagged.
+ */
+export function CreateReturnDialog({
+  order,
+  open,
+  onOpenChange,
+}: {
+  order: Order
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const { t } = useTranslation()
+  const { create } = useReturnActions(order.id)
+  const [reasonId, setReasonId] = useState('')
+  const [stockLocationId, setStockLocationId] = useState('')
+  const { data: locationsData } = useStockLocations(open)
+
+  const locationOptions = (locationsData?.data ?? [])
+    .filter((location) => location.active)
+    .sort((a, b) => Number(b.returns_enabled) - Number(a.returns_enabled))
+    .map((location) => ({
+      value: location.id,
+      label: location.returns_enabled
+        ? location.name
+        : t('admin.pages.orders.detail.returns.location_no_returns', { name: location.name }),
+    }))
+
+  if (!open) return null
+
+  return (
+    <SharedCreateReturnDialog
+      units={fulfilledUnits(order)}
+      reasonField={<ReturnReasonField value={reasonId} onChange={setReasonId} />}
+      extraFields={
+        <Field>
+          <FieldLabel htmlFor="return-location">
+            {t('admin.pages.orders.detail.returns.location')}
+          </FieldLabel>
+          <Select
+            items={locationOptions}
+            value={stockLocationId}
+            onValueChange={(value) => setStockLocationId((value as string) ?? '')}
+          >
+            <SelectTrigger id="return-location">
+              <SelectValue placeholder={t('admin.pages.orders.detail.returns.location_default')} />
+            </SelectTrigger>
+            <SelectContent>
+              {locationOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </Field>
+      }
+      onClose={() => onOpenChange(false)}
+      pending={create.isPending}
+      onSubmit={({ items, memo }) => {
+        create
+          .mutateAsync({
+            items,
+            memo,
+            reason_id: reasonId || undefined,
+            stock_location_id: stockLocationId || undefined,
+          })
+          .then(() => onOpenChange(false))
+          .catch(() => undefined)
+      }}
+    />
+  )
+}
+
+/**
+ * Reports a problem with a delivery on one of this seller's orders.
+ *
+ * The lines come from the order rather than its parcels: a claim is about
+ * what was bought, and goods that never arrived are exactly what one is for.
+ */
+export function CreateClaimDialog({
+  order,
+  open,
+  onOpenChange,
+}: {
+  order: Order
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const { create } = useClaimActions(order.id)
+  const [reasonId, setReasonId] = useState('')
+  const { symbol: currencySymbol } = currencyParts(order.currency, i18n.language)
+
+  if (!open) return null
+
+  return (
+    <SharedCreateClaimDialog
+      lines={(order.items ?? []).map((item) => ({
+        id: item.id,
+        label: unitLabel(item),
+        quantity: item.quantity,
+        price: item.price,
+      }))}
+      currencySymbol={currencySymbol}
+      reasonField={<ClaimReasonField value={reasonId} onChange={setReasonId} />}
+      onClose={() => onOpenChange(false)}
+      pending={create.isPending}
+      onSubmit={({ items, memo }) => {
+        create
+          .mutateAsync({ items, memo, reason_id: reasonId || undefined })
+          .then(() => onOpenChange(false))
+          .catch(() => undefined)
+      }}
+    />
+  )
+}
+
+/**
+ * The seller picks from the marketplace's vocabulary — the operator decides
+ * what the reasons are, so this reads the store's list rather than one of the
+ * seller's own.
+ */
+function ReturnReasonField({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (value: string) => void
+}) {
+  const { t } = useTranslation()
+  const { data } = useReasons('return-reasons')
+
+  return (
+    <ReasonField
+      id="return"
+      reasons={(data?.data ?? []).filter((reason) => reason.active)}
+      value={value}
+      onChange={onChange}
+      label={t('orders.post_sale.reason')}
+    />
+  )
+}
+
+function ClaimReasonField({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (value: string) => void
+}) {
+  const { t } = useTranslation()
+  const { data } = useReasons('claim-reasons')
+
+  return (
+    <ReasonField
+      id="claim"
+      reasons={(data?.data ?? []).filter((reason) => reason.active)}
+      value={value}
+      onChange={onChange}
+      label={t('orders.post_sale.reason')}
+    />
+  )
+}

package/src/components/orders/returns-card.tsx

@@ -0,0 +1,258 @@
+import { currencyParts } from '@spree/dashboard-core'
+import {
+  Badge,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  ReturnReceiveDialog,
+  ReturnRefundDialog,
+  StatusBadge,
+  useConfirm,
+} from '@spree/dashboard-ui'
+import { EllipsisVerticalIcon, PlusIcon, RotateCcwIcon } from '@spree/dashboard-ui/icons'
+import type { Order, Return, ReturnLineItem } from '@spree/seller-sdk'
+import i18n from 'i18next'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useOrderReturns, useReturnActions } from '../../hooks/use-post-sale'
+import { lineLabel } from './line-label'
+import { CreateReturnDialog, fulfilledUnits } from './post-sale-create-dialogs'
+
+// Refunded and canceled returns are finished; offering a menu on them would
+// open onto nothing.
+const ACTIONABLE = ['requested', 'approved', 'received']
+
+/**
+ * Goods coming back on this order.
+ *
+ * Each status change is its own action rather than an editable field, because
+ * each carries different arguments — receiving records what actually arrived,
+ * refunding decides where the money goes.
+ */
+export function ReturnsCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+  const confirm = useConfirm()
+  const { data } = useOrderReturns(order.id)
+  const { approve, cancel } = useReturnActions(order.id)
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [receiving, setReceiving] = useState<Return | null>(null)
+  const [refunding, setRefunding] = useState<Return | null>(null)
+
+  const returns = data?.data ?? []
+  const canCreate = fulfilledUnits(order).length > 0
+
+  async function handleCancel(returnRecord: Return) {
+    const ok = await confirm({
+      title: t('orders.post_sale.returns.cancel_title'),
+      message: t('orders.post_sale.returns.cancel_message'),
+      variant: 'destructive',
+      confirmLabel: t('orders.post_sale.cancel'),
+    })
+    if (!ok) return
+    cancel.mutate(returnRecord.id)
+  }
+
+  return (
+    <Card variant="container">
+      <CardHeader className="items-center">
+        <CardTitle>
+          <RotateCcwIcon className="size-4" />
+          {t('orders.post_sale.returns.title')}
+        </CardTitle>
+        {canCreate && (
+          <CardAction>
+            <Button variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
+              <PlusIcon className="size-4" />
+              {t('orders.post_sale.returns.create')}
+            </Button>
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-4">
+        {returns.length === 0 ? (
+          <p className="text-muted-foreground text-sm">{t('orders.post_sale.returns.empty')}</p>
+        ) : (
+          returns.map((returnRecord) => (
+            <Card key={returnRecord.id} variant="nested">
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">{returnRecord.number}</CardTitle>
+                <CardAction className="flex items-center gap-2">
+                  <StatusBadge
+                    status={returnRecord.status}
+                    label={t(`orders.post_sale.statuses.${returnRecord.status}`, {
+                      defaultValue: returnRecord.status,
+                    })}
+                  />
+                  {ACTIONABLE.includes(returnRecord.status) && (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon-xs">
+                          <EllipsisVerticalIcon className="size-4" />
+                          <span className="sr-only">{t('admin.actions.actions_menu')}</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        {returnRecord.status === 'requested' && (
+                          <DropdownMenuItem onClick={() => approve.mutate(returnRecord.id)}>
+                            {t('orders.post_sale.approve')}
+                          </DropdownMenuItem>
+                        )}
+                        {returnRecord.status === 'approved' && (
+                          <DropdownMenuItem onClick={() => setReceiving(returnRecord)}>
+                            {t('orders.post_sale.returns.receive')}
+                          </DropdownMenuItem>
+                        )}
+                        {returnRecord.status === 'received' && (
+                          <DropdownMenuItem onClick={() => setRefunding(returnRecord)}>
+                            {t('orders.post_sale.returns.refund')}
+                          </DropdownMenuItem>
+                        )}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          variant="destructive"
+                          onClick={() => handleCancel(returnRecord)}
+                        >
+                          {t('orders.post_sale.cancel')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                </CardAction>
+              </CardHeader>
+
+              <CardContent className="flex flex-col gap-1.5">
+                {returnRecord.return_line_items?.map((line) => (
+                  <ReturnLineRow key={line.id} line={line} />
+                ))}
+                <p className="text-muted-foreground text-sm">
+                  {t('orders.post_sale.returns.refund_total', {
+                    amount: returnRecord.display_refund_total,
+                  })}
+                </p>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </CardContent>
+
+      <CreateReturnDialog order={order} open={createOpen} onOpenChange={setCreateOpen} />
+      {receiving && (
+        <ReceiveDialog
+          orderId={order.id}
+          returnRecord={receiving}
+          onOpenChange={() => setReceiving(null)}
+        />
+      )}
+      {refunding && (
+        <RefundDialog
+          orderId={order.id}
+          order={order}
+          returnRecord={refunding}
+          onOpenChange={() => setRefunding(null)}
+        />
+      )}
+    </Card>
+  )
+}
+
+function ReturnLineRow({ line }: { line: ReturnLineItem }) {
+  const { t } = useTranslation()
+  const label = lineLabel(line.name, line.variant, line.variant_id)
+
+  return (
+    <div className="flex items-center justify-between gap-3 text-sm">
+      <span className="truncate">{label}</span>
+      <span className="flex shrink-0 items-center gap-2 text-muted-foreground">
+        {line.received_quantity > 0 && line.received_quantity < line.quantity && (
+          <Badge variant="outline">
+            {t('orders.post_sale.returns.partially_received', {
+              received: line.received_quantity,
+              quantity: line.quantity,
+            })}
+          </Badge>
+        )}
+        {!line.resellable && (
+          <Badge variant="outline">{t('orders.post_sale.returns.not_resellable')}</Badge>
+        )}
+        × {line.quantity}
+      </span>
+    </div>
+  )
+}
+
+/** What actually turned up, and whether it can go back on the shelf. */
+
+/** What the seller records as having arrived back. */
+function ReceiveDialog({
+  orderId,
+  returnRecord,
+  onOpenChange,
+}: {
+  orderId: string
+  returnRecord: Return
+  onOpenChange: (open: boolean) => void
+}) {
+  const { receive } = useReturnActions(orderId)
+
+  return (
+    <ReturnReceiveDialog
+      lines={(returnRecord.return_line_items ?? []).map((line) => ({
+        id: line.id,
+        label: lineLabel(line.name, line.variant, line.variant_id),
+        quantity: line.quantity,
+      }))}
+      onClose={() => onOpenChange(false)}
+      pending={receive.isPending}
+      onSubmit={(items) => {
+        receive
+          .mutateAsync({ returnId: returnRecord.id, items })
+          .then(() => onOpenChange(false))
+          .catch(() => undefined)
+      }}
+    />
+  )
+}
+
+/**
+ * The seller took the money for their own child order, so giving it back is
+ * theirs. The currency is the order's — a seller has none of their own.
+ */
+function RefundDialog({
+  orderId,
+  order,
+  returnRecord,
+  onOpenChange,
+}: {
+  orderId: string
+  order: Order
+  returnRecord: Return
+  onOpenChange: (open: boolean) => void
+}) {
+  const { refund } = useReturnActions(orderId)
+  const { symbol: currencySymbol } = currencyParts(order.currency, i18n.language)
+
+  return (
+    <ReturnRefundDialog
+      refundableTotal={returnRecord.refundable_total}
+      currencySymbol={currencySymbol}
+      onClose={() => onOpenChange(false)}
+      pending={refund.isPending}
+      onSubmit={({ refundMethod, amount }) => {
+        refund
+          .mutateAsync({ returnId: returnRecord.id, refundMethod, amount })
+          .then(() => onOpenChange(false))
+          .catch(() => undefined)
+      }}
+    />
+  )
+}

package/src/components/orders/shipping-label-row.tsx

@@ -0,0 +1,124 @@
+import { downloadFromApi, getApiClient, useAuth } from '@spree/dashboard-core'
+import {
+  Badge,
+  Button,
+  CardContent,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  toastManager,
+  useConfirm,
+} from '@spree/dashboard-ui'
+import {
+  EllipsisVerticalIcon,
+  PrinterIcon,
+  ReceiptTextIcon,
+  TrashIcon,
+} from '@spree/dashboard-ui/icons'
+import type { ShippingLabel } from '@spree/seller-sdk'
+import { useTranslation } from 'react-i18next'
+import { useFulfillmentActions } from '../../hooks/use-fulfillments'
+
+/**
+ * The label bound to a parcel: what it cost and how to print it.
+ *
+ * Refunding is absent by design — postage bought through the marketplace's
+ * carrier account is the operator's to reverse, and the endpoint refuses it.
+ * Only a label the seller uploaded can be removed, since that is the only one
+ * no carrier holds a record of.
+ */
+export function ShippingLabelRow({
+  orderId,
+  fulfillmentId,
+  label,
+}: {
+  orderId: string
+  fulfillmentId: string
+  label: ShippingLabel
+}) {
+  const { t } = useTranslation()
+  const { token } = useAuth()
+  const confirm = useConfirm()
+  const { deleteLabel } = useFulfillmentActions(orderId)
+
+  const deletable = label.source === 'uploaded'
+
+  async function print() {
+    if (!label.download_url) return
+
+    // A rejected download inside a click handler is otherwise unhandled, so
+    // the file silently never arrives.
+    try {
+      await downloadFromApi(
+        token,
+        label.download_url,
+        `${label.tracking_number ?? 'label'}.${label.format ?? 'pdf'}`,
+        getApiClient().downloadHeaders?.() ?? {},
+      )
+    } catch {
+      // Deliberately not the thrown message: `downloadFromApi` reports the
+      // transport in English ("Download failed: 404"), which would land
+      // untranslated in a localized panel and tells the merchant nothing they
+      // can act on.
+      toastManager.add({ type: 'error', title: t('admin.errors.label_download_failed') })
+    }
+  }
+
+  async function handleDelete() {
+    const ok = await confirm({
+      message: t('orders.fulfillments.confirm_delete_label'),
+      variant: 'destructive',
+      confirmLabel: t('common.delete'),
+    })
+    if (!ok) return
+    deleteLabel.mutate({ fulfillmentId, labelId: label.id })
+  }
+
+  return (
+    <CardContent className="flex flex-wrap items-center justify-between gap-2 border-border-subtle border-b py-3 text-sm">
+      <div className="flex flex-wrap items-center gap-2">
+        <ReceiptTextIcon className="size-4 text-muted-foreground" />
+        <span className="text-muted-foreground">{t('orders.fulfillments.label_title')}</span>
+        {label.source === 'uploaded' && (
+          <Badge variant="secondary">{t('orders.fulfillments.label_uploaded')}</Badge>
+        )}
+        {label.display_cost && (
+          <span className="text-muted-foreground">
+            {t('orders.fulfillments.label_cost', { amount: label.display_cost })}
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {label.download_url && (
+          <Button type="button" variant="outline" size="sm" onClick={print}>
+            <PrinterIcon data-icon="inline-start" />
+            {t('orders.fulfillments.print_label')}
+          </Button>
+        )}
+
+        {deletable && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon-xs">
+                <EllipsisVerticalIcon className="size-4" />
+                <span className="sr-only">{t('admin.actions.actions_menu')}</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                variant="destructive"
+                disabled={deleteLabel.isPending}
+                onClick={handleDelete}
+              >
+                <TrashIcon className="size-4" />
+                {t('orders.fulfillments.delete_label')}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </CardContent>
+  )
+}

package/src/components/product-status-card.tsx

@@ -0,0 +1,111 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  StatusBadge,
+  toastManager,
+  useConfirm,
+} from '@spree/dashboard-ui'
+import type { Product } from '@spree/seller-sdk'
+import { useMutation } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+
+/**
+ * Where a product stands with the marketplace, and the one move available
+ * from here.
+ *
+ * Not a status dropdown: a seller cannot choose to be on sale. They submit
+ * and the operator decides, so each status offers only what it can actually
+ * do next (docs/plans/6.0-seller-product-submission.md).
+ */
+export function ProductStatusCard({ product, onDone }: { product: Product; onDone: () => void }) {
+  const { t } = useTranslation()
+  const confirm = useConfirm()
+
+  const move = useMutation({
+    mutationFn: (action: 'submit' | 'draft' | 'archive') =>
+      sellerClient().products[action](product.id),
+    onSuccess: () => {
+      toastManager.add({ type: 'success', title: t('products.status_updated') })
+      onDone()
+    },
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      }),
+  })
+
+  const status = product.status
+  const canSubmit = status === 'draft' || status === 'rejected'
+  const canTakeDown = status === 'active' || status === 'proposed'
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('products.fields.status')}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col items-start gap-3">
+        <StatusBadge status={status} label={t(`products.statuses.${status}`)} />
+
+        <p className="text-muted-foreground text-sm">{t(`products.status_help.${status}`)}</p>
+
+        {/* Why the marketplace turned it down, so the seller knows what to
+            fix. It lives on the submission rather than the product: a note
+            the seller could overwrite by saving their own product was no
+            record of anything. */}
+        {status === 'rejected' && product.submission?.review_note && (
+          <p className="text-sm">
+            {t('products.rejection_reason', { reason: product.submission.review_note })}
+          </p>
+        )}
+
+        <div className="flex flex-wrap gap-2">
+          {canSubmit && (
+            <Button disabled={move.isPending} onClick={() => move.mutate('submit')}>
+              {t('products.submit_for_review')}
+            </Button>
+          )}
+
+          {canTakeDown && (
+            <Button
+              variant="outline"
+              disabled={move.isPending}
+              onClick={async () => {
+                const confirmed = await confirm({
+                  title: t('products.take_down_confirm_title'),
+                  message: t('products.take_down_confirm_description'),
+                  confirmLabel: t('products.take_down'),
+                })
+                if (confirmed) move.mutate('draft')
+              }}
+            >
+              {t('products.take_down')}
+            </Button>
+          )}
+
+          {status !== 'archived' && (
+            <Button
+              variant="outline"
+              disabled={move.isPending}
+              onClick={async () => {
+                const confirmed = await confirm({
+                  title: t('products.archive_confirm_title'),
+                  message: t('products.archive_confirm_description'),
+                  confirmLabel: t('products.archive'),
+                  variant: 'destructive',
+                })
+                if (confirmed) move.mutate('archive')
+              }}
+            >
+              {t('products.archive')}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}