@spree/seller-dashboard 1.0.0-beta.1

package/src/components/orders/order-earnings-card.tsx

@@ -0,0 +1,99 @@
+import { formatStoreDateTime } from '@spree/dashboard-core'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  StatusBadge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@spree/dashboard-ui'
+import { BanknoteIcon } from '@spree/dashboard-ui/icons'
+import type { Order } from '@spree/seller-sdk'
+import { Link, useParams } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useTransfers } from '../../hooks/use-ledger'
+import { useStoreTimezone } from '../../hooks/use-store-timezone'
+
+/**
+ * What this order earned the seller: the sale less the marketplace's
+ * commission, credited once the goods went out, and a reversal row for
+ * anything refunded since.
+ *
+ * Renders nothing until there is something to show — an order is not earned
+ * until it is fulfilled, and an empty card on every open order would only be
+ * noise.
+ */
+export function OrderEarningsCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const timezone = useStoreTimezone()
+  const { data } = useTransfers({ order_id_eq: order.id })
+
+  const transfers = data?.data ?? []
+  if (transfers.length === 0) return null
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <BanknoteIcon className="size-4" />
+          {t('orders.earnings.title')}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="p-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('earnings.columns.date')}</TableHead>
+              <TableHead>{t('earnings.columns.kind')}</TableHead>
+              <TableHead>{t('earnings.columns.status')}</TableHead>
+              <TableHead>{t('orders.earnings.payout')}</TableHead>
+              <TableHead className="text-right">{t('earnings.columns.amount')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {transfers.map((transfer) => (
+              <TableRow key={transfer.id}>
+                <TableCell className="whitespace-nowrap">
+                  {formatStoreDateTime(transfer.created_at, timezone)}
+                </TableCell>
+                <TableCell>
+                  {t(`earnings.kinds.${transfer.kind}`, { defaultValue: transfer.kind })}
+                </TableCell>
+                <TableCell>
+                  <StatusBadge
+                    status={transfer.status}
+                    label={t(`earnings.statuses.${transfer.status}`, {
+                      defaultValue: transfer.status,
+                    })}
+                  />
+                </TableCell>
+                <TableCell>
+                  {transfer.payout_id ? (
+                    <Link
+                      to="/$sellerId/payouts/$payoutId"
+                      params={{ sellerId, payoutId: transfer.payout_id }}
+                    >
+                      {t('orders.earnings.view_payout')}
+                    </Link>
+                  ) : (
+                    <span className="text-muted-foreground">
+                      {t('orders.earnings.not_settled')}
+                    </span>
+                  )}
+                </TableCell>
+                <TableCell className="text-right tabular-nums">{transfer.display_amount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/orders/order-notes-cards.tsx

@@ -0,0 +1,83 @@
+import { EditableNoteCard, NoteHtml, NoteText, RichTextEditor, Textarea } from '@spree/dashboard-ui'
+import type { Order } from '@spree/seller-sdk'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateOrderNotes } from '../../hooks/use-order'
+
+/** What the buyer asked for when they placed the order. */
+export function SpecialInstructionsCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+
+  const [editing, setEditing] = useState(false)
+  const [note, setNote] = useState(order.customer_note ?? '')
+  const serverNote = order.customer_note ?? ''
+
+  // Track the server value only while the editor is closed: any order
+  // mutation refetches this record, and adopting the incoming value mid-edit
+  // would throw away whatever the seller is part-way through typing.
+  useEffect(() => {
+    if (!editing) setNote(serverNote)
+  }, [editing, serverNote])
+
+  const mutation = useUpdateOrderNotes(order.id)
+
+  return (
+    <EditableNoteCard
+      title={t('admin.orders.detail.section_customer_note')}
+      editing={editing}
+      onEditingChange={(next) => {
+        if (!next) setNote(serverNote)
+        setEditing(next)
+      }}
+      editor={<Textarea value={note} onChange={(event) => setNote(event.target.value)} />}
+      pending={mutation.isPending}
+      onSave={() =>
+        mutation.mutate({ customer_note: note }, { onSuccess: () => setEditing(false) })
+      }
+    >
+      {serverNote ? <NoteText value={serverNote} /> : null}
+    </EditableNoteCard>
+  )
+}
+
+/**
+ * The seller's own working note.
+ *
+ * A marketplace basket splits into one order per seller, so this note is
+ * theirs alone rather than the operator's note about the whole sale.
+ */
+export function InternalNoteCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+
+  const [editing, setEditing] = useState(false)
+  // Edit the HTML, not the plain-text projection: `internal_note` has its
+  // markup stripped, so round-tripping it through the `internal_note_html`
+  // write would flatten an existing note on a save that changed nothing.
+  const [note, setNote] = useState(order.internal_note_html ?? '')
+  const serverNote = order.internal_note_html ?? ''
+
+  useEffect(() => {
+    if (!editing) setNote(serverNote)
+  }, [editing, serverNote])
+
+  const mutation = useUpdateOrderNotes(order.id)
+  const title = t('admin.orders.detail.section_internal_note')
+
+  return (
+    <EditableNoteCard
+      title={title}
+      editing={editing}
+      onEditingChange={(next) => {
+        if (!next) setNote(serverNote)
+        setEditing(next)
+      }}
+      editor={<RichTextEditor ariaLabel={title} value={note} onChange={setNote} />}
+      pending={mutation.isPending}
+      onSave={() =>
+        mutation.mutate({ internal_note: note }, { onSuccess: () => setEditing(false) })
+      }
+    >
+      {serverNote ? <NoteHtml html={serverNote} /> : null}
+    </EditableNoteCard>
+  )
+}

package/src/components/orders/order-payment-card.tsx

@@ -0,0 +1,94 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Separator,
+  StatusBadge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@spree/dashboard-ui'
+import { CreditCardIcon } from '@spree/dashboard-ui/icons'
+import type { Order } from '@spree/seller-sdk'
+import { useTranslation } from 'react-i18next'
+import { ReadRow } from '../read-row'
+
+/**
+ * What the buyer paid for this order.
+ *
+ * On a marketplace the customer pays once for a basket that may span several
+ * sellers, so what this order has is a share of that payment rather than a
+ * payment of its own — the shares are what the table lists. How the buyer
+ * paid, and to which gateway, is the marketplace's business and is not here.
+ *
+ * An order placed with this seller alone does not split, so it has no shares
+ * and only the totals above are shown.
+ */
+export function OrderPaymentCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+  const splits = order.payment_splits ?? []
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <CreditCardIcon className="size-4" />
+          {t('orders.payment.title')}
+        </CardTitle>
+        {order.payment_status && (
+          <CardAction>
+            <StatusBadge
+              status={order.payment_status}
+              label={t(`orders.payment_statuses.${order.payment_status}`, {
+                defaultValue: order.payment_status,
+              })}
+            />
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-3">
+        <ReadRow label={t('orders.summary.payment_total')}>{order.display_payment_total}</ReadRow>
+        <ReadRow label={t('orders.summary.outstanding_balance')}>
+          {order.display_amount_due}
+        </ReadRow>
+      </CardContent>
+
+      {splits.length > 0 && (
+        <>
+          <Separator />
+          <p className="px-6 pt-4 text-sm text-muted-foreground">
+            {t('orders.payment.share_help')}
+          </p>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('orders.payment.authorized')}</TableHead>
+                <TableHead>{t('orders.payment.captured')}</TableHead>
+                <TableHead>{t('orders.payment.refunded')}</TableHead>
+                <TableHead className="text-right">{t('orders.payment.refundable')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {splits.map((split) => (
+                <TableRow key={split.id}>
+                  <TableCell className="tabular-nums">{split.display_authorized_amount}</TableCell>
+                  <TableCell className="tabular-nums">{split.display_captured_amount}</TableCell>
+                  <TableCell className="tabular-nums">{split.display_refunded_amount}</TableCell>
+                  <TableCell className="text-right tabular-nums">
+                    {split.display_refundable_amount}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </>
+      )}
+    </Card>
+  )
+}

package/src/components/orders/post-sale-cards.tsx

@@ -0,0 +1,347 @@
+import { currencyParts } from '@spree/dashboard-core'
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  ClaimResolveDialog,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  StatusBadge,
+  useConfirm,
+} from '@spree/dashboard-ui'
+import {
+  ArrowLeftRightIcon,
+  BanIcon,
+  EllipsisVerticalIcon,
+  PlusIcon,
+  ShieldAlertIcon,
+} from '@spree/dashboard-ui/icons'
+import type { Claim, Order } from '@spree/seller-sdk'
+import i18n from 'i18next'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  useClaimActions,
+  useExchangeActions,
+  useOrderClaims,
+  useOrderExchanges,
+} from '../../hooks/use-post-sale'
+import { lineLabel } from './line-label'
+import { CreateClaimDialog } from './post-sale-create-dialogs'
+
+const EXCHANGE_ACTIONABLE = ['requested', 'approved', 'received']
+const CLAIM_ACTIONABLE = ['open', 'approved']
+
+/**
+ * Goods swapped for different ones.
+ *
+ * Read plus the status moves; opening one needs a replacement variant picker,
+ * which the seller's own catalogue search will bring — until then an exchange
+ * is opened by the operator or the customer and worked here.
+ */
+export function ExchangesCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+  const confirm = useConfirm()
+  const { data } = useOrderExchanges(order.id)
+  const { approve, receive, fulfill, cancel } = useExchangeActions(order.id)
+
+  const exchanges = data?.data ?? []
+  if (exchanges.length === 0) return null
+
+  async function handleCancel(id: string) {
+    const ok = await confirm({
+      title: t('orders.post_sale.exchanges.cancel_title'),
+      message: t('orders.post_sale.exchanges.cancel_message'),
+      variant: 'destructive',
+      confirmLabel: t('orders.post_sale.cancel'),
+    })
+    if (!ok) return
+    cancel.mutate(id)
+  }
+
+  return (
+    <Card variant="container">
+      <CardHeader>
+        <CardTitle>
+          <ArrowLeftRightIcon className="size-4" />
+          {t('orders.post_sale.exchanges.title')}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-4">
+        {exchanges.map((exchange) => (
+          <Card key={exchange.id} variant="nested">
+            <CardHeader>
+              <CardTitle className="text-sm font-medium">{exchange.number}</CardTitle>
+              <CardAction className="flex items-center gap-2">
+                <StatusBadge
+                  status={exchange.status}
+                  label={t(`orders.post_sale.statuses.${exchange.status}`, {
+                    defaultValue: exchange.status,
+                  })}
+                />
+                {EXCHANGE_ACTIONABLE.includes(exchange.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">
+                      {exchange.status === 'requested' && (
+                        <DropdownMenuItem onClick={() => approve.mutate(exchange.id)}>
+                          {t('orders.post_sale.approve')}
+                        </DropdownMenuItem>
+                      )}
+                      {exchange.status === 'approved' && (
+                        <DropdownMenuItem
+                          onClick={() => receive.mutate({ exchangeId: exchange.id })}
+                        >
+                          {t('orders.post_sale.exchanges.receive')}
+                        </DropdownMenuItem>
+                      )}
+                      {exchange.status === 'received' && (
+                        <DropdownMenuItem
+                          onClick={() => fulfill.mutate({ exchangeId: exchange.id })}
+                        >
+                          {t('orders.post_sale.exchanges.fulfill')}
+                        </DropdownMenuItem>
+                      )}
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        variant="destructive"
+                        onClick={() => handleCancel(exchange.id)}
+                      >
+                        {t('orders.post_sale.cancel')}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </CardAction>
+            </CardHeader>
+
+            <CardContent className="flex flex-col gap-1.5">
+              {exchange.exchange_line_items?.map((line) => (
+                <div key={line.id} className="flex items-center justify-between gap-3 text-sm">
+                  <span className="truncate">
+                    {lineLabel(line.name, line.original_variant, line.original_variant_id)} →{' '}
+                    {lineLabel(line.new_variant_name, line.new_variant, line.new_variant_id)}
+                  </span>
+                  <span className="shrink-0 text-muted-foreground">× {line.quantity}</span>
+                </div>
+              ))}
+              <p className="text-muted-foreground text-sm">
+                {t('orders.post_sale.exchanges.price_difference', {
+                  amount: exchange.display_price_difference,
+                })}
+              </p>
+            </CardContent>
+          </Card>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+/** Something went wrong with a delivery, and the seller puts it right. */
+export function ClaimsCard({ order }: { order: Order }) {
+  const { t } = useTranslation()
+  const confirm = useConfirm()
+  const { data } = useOrderClaims(order.id)
+  const { approve, deny, cancel } = useClaimActions(order.id)
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [resolving, setResolving] = useState<Claim | null>(null)
+
+  const claims = data?.data ?? []
+  const canCreate = (order.items ?? []).length > 0
+
+  async function handleCancel(id: string) {
+    const ok = await confirm({
+      title: t('orders.post_sale.claims.cancel_title'),
+      message: t('orders.post_sale.claims.cancel_message'),
+      variant: 'destructive',
+      confirmLabel: t('orders.post_sale.cancel'),
+    })
+    if (!ok) return
+    cancel.mutate(id)
+  }
+
+  async function handleDeny(id: string) {
+    const ok = await confirm({
+      title: t('orders.post_sale.claims.deny_title'),
+      message: t('orders.post_sale.claims.deny_message'),
+      variant: 'destructive',
+      confirmLabel: t('orders.post_sale.claims.deny'),
+    })
+    if (!ok) return
+    deny.mutate(id)
+  }
+
+  return (
+    <Card variant="container">
+      <CardHeader>
+        <CardTitle>
+          <ShieldAlertIcon className="size-4" />
+          {t('orders.post_sale.claims.title')}
+        </CardTitle>
+        {canCreate && (
+          <CardAction>
+            <Button variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
+              <PlusIcon className="size-4" />
+              {t('orders.post_sale.claims.create')}
+            </Button>
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-4">
+        {claims.length === 0 ? (
+          <p className="text-muted-foreground text-sm">{t('orders.post_sale.claims.empty')}</p>
+        ) : (
+          claims.map((claim) => (
+            <Card key={claim.id} variant="nested">
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">{claim.number}</CardTitle>
+                <CardAction className="flex items-center gap-2">
+                  <StatusBadge
+                    status={claim.status}
+                    label={t(`orders.post_sale.statuses.${claim.status}`, {
+                      defaultValue: claim.status,
+                    })}
+                  />
+                  {CLAIM_ACTIONABLE.includes(claim.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">
+                        {claim.status === 'open' && (
+                          <DropdownMenuItem onClick={() => approve.mutate(claim.id)}>
+                            {t('orders.post_sale.approve')}
+                          </DropdownMenuItem>
+                        )}
+                        {claim.status === 'approved' && (
+                          <DropdownMenuItem onClick={() => setResolving(claim)}>
+                            {t('orders.post_sale.claims.resolve')}
+                          </DropdownMenuItem>
+                        )}
+                        <DropdownMenuItem onClick={() => handleDeny(claim.id)}>
+                          <BanIcon className="size-4" />
+                          {t('orders.post_sale.claims.deny')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          variant="destructive"
+                          onClick={() => handleCancel(claim.id)}
+                        >
+                          {t('orders.post_sale.cancel')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                </CardAction>
+              </CardHeader>
+
+              <CardContent className="flex flex-col gap-1.5">
+                {claim.claim_line_items?.map((line) => (
+                  <div key={line.id} className="flex items-center justify-between gap-3 text-sm">
+                    <span className="min-w-0 truncate">
+                      {lineLabel(line.name, line.variant, line.variant_id)}
+                      {line.description && (
+                        <span className="text-muted-foreground"> — {line.description}</span>
+                      )}
+                    </span>
+                    <span className="shrink-0 text-muted-foreground">× {line.quantity}</span>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </CardContent>
+
+      <CreateClaimDialog order={order} open={createOpen} onOpenChange={setCreateOpen} />
+      {resolving && (
+        <ResolveClaimDialog
+          orderId={order.id}
+          order={order}
+          claim={resolving}
+          onOpenChange={() => setResolving(null)}
+        />
+      )}
+    </Card>
+  )
+}
+
+/** Money back, a replacement, or both. */
+
+/**
+ * How the seller puts a delivery right: money back, a replacement, or both.
+ *
+ * The currency is the order's — a seller has none of their own.
+ */
+function ResolveClaimDialog({
+  orderId,
+  order,
+  claim,
+  onOpenChange,
+}: {
+  orderId: string
+  order: Order
+  claim: Claim
+  onOpenChange: (open: boolean) => void
+}) {
+  const { resolve } = useClaimActions(orderId)
+  const lines = claim.claim_line_items ?? []
+  const { symbol: currencySymbol } = currencyParts(order.currency, i18n.language)
+
+  // A claim opened without per-item amounts has a refund_total of zero, and
+  // the workflow refuses to refund nothing — offer what the customer paid for
+  // the claimed items instead, which is also the ceiling it enforces.
+  const recorded = Number(claim.refund_total)
+  const paid = lines.reduce((sum, line) => sum + Number(line.paid_amount ?? 0), 0)
+  const defaultAmount =
+    Number.isFinite(recorded) && recorded > 0
+      ? claim.refund_total
+      : paid > 0
+        ? paid.toFixed(2)
+        : claim.refund_total
+
+  return (
+    <ClaimResolveDialog
+      lines={lines.map((line) => ({
+        id: line.id,
+        label: lineLabel(line.name, line.variant, line.variant_id),
+        quantity: line.quantity,
+        sendReplacement: line.send_replacement,
+      }))}
+      defaultAmount={defaultAmount}
+      currencySymbol={currencySymbol}
+      onClose={() => onOpenChange(false)}
+      pending={resolve.isPending}
+      onSubmit={({ resolution, refundMethod, amount, replacementLineItemIds }) => {
+        resolve
+          .mutateAsync({
+            claimId: claim.id,
+            resolution,
+            refundMethod,
+            amount,
+            replacementLineItemIds,
+          })
+          .then(() => onOpenChange(false))
+          .catch(() => undefined)
+      }}
+    />
+  )
+}