@spree/seller-dashboard 6.0.3 → 6.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spree/seller-dashboard",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "license": "MIT",
   "type": "module",
   "description": "Spree marketplace seller panel — the seller-facing counterpart to the admin dashboard.",
@@ -36,44 +36,44 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@hookform/resolvers": "^6.0.0",
-    "@tanstack/router-plugin": "^1.168.47",
+    "@hookform/resolvers": "^7.0.5",
+    "@tanstack/router-plugin": "^1.169.0",
     "@tanstack/virtual-file-routes": "^1.162.0",
     "zod": "^4.6.7",
-    "@spree/core": "^6.0.3",
-    "@spree/seller-sdk": "6.0.3"
+    "@spree/seller-sdk": "6.0.4",
+    "@spree/core": "^6.0.4"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.104.5",
-    "@tanstack/react-router": "^1.170.45",
-    "i18next": "^26.5.3",
+    "@tanstack/react-router": "^1.170.46",
+    "i18next": "^26.5.3 || ^27.0.0",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-hook-form": "^7.90.0",
-    "react-i18next": "^17.1.0",
-    "@spree/dashboard-core": "^6.0.3",
-    "@spree/dashboard-ui": "^6.0.3",
-    "@spree/admin-sdk": "^6.0.3"
+    "react-i18next": "^17.1.0 || ^18.0.0",
+    "@spree/dashboard-core": "^6.0.4",
+    "@spree/admin-sdk": "^6.0.4",
+    "@spree/dashboard-ui": "^6.0.4"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.14",
-    "@tanstack/react-query": "^5.104.5",
-    "@tanstack/react-router": "^1.170.45",
-    "@types/node": "^26.6.5",
+    "@biomejs/biome": "^2.6.6",
+    "@tanstack/react-query": "^5.107.1",
+    "@tanstack/react-router": "^1.170.46",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "i18next": "^26.5.3",
+    "@vitejs/plugin-react": "^6.3.0",
+    "i18next": "^27.1.1",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "react-hook-form": "^7.90.0",
-    "react-i18next": "^17.1.0",
+    "react-hook-form": "^7.91.0",
+    "react-i18next": "^18.0.1",
     "tsup": "^9.0.0",
     "typescript": "~7.0.2",
-    "vite": "^8.3.4",
-    "@spree/dashboard-core": "6.0.3",
-    "@spree/admin-sdk": "6.0.3",
-    "@spree/dashboard-ui": "6.0.3"
+    "vite": "^8.3.7",
+    "@spree/admin-sdk": "6.0.4",
+    "@spree/dashboard-core": "6.0.4",
+    "@spree/dashboard-ui": "6.0.4"
   },
   "scripts": {
     "build": "pnpm generate:routes && tsup",

package/src/api-client.ts

@@ -146,6 +146,8 @@ export function createSellerApiClient({
       update: (id, params) => sellerClient().packageTypes.update(id, params),
       delete: (id) => sellerClient().packageTypes.delete(id),
     },
+    deleteProductMedia: (productId, mediaId) =>
+      sellerClient().products.media.delete(productId, mediaId),
     digitalAssets: {
       list: (productId, params) => sellerClient().products.digitalAssets.list(productId, params),
       // Sellers upload files only, so a file is the one thing a new asset must carry.

package/src/components/account-dialog.tsx

@@ -175,7 +175,7 @@ function AccountForm({
     <form onSubmit={form.handleSubmit(onSubmit)} className="contents">
       <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/components/centered-message.tsx

@@ -1,7 +1,7 @@
 /** Full-height placeholder for the panel's loading and error states. */
 export function CenteredMessage({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen items-center justify-center text-muted-foreground text-sm">
+    <div className="flex min-h-screen items-center justify-center text-muted-foreground text-base">
       {children}
     </div>
   )

package/src/components/finance/balance-summary.tsx

@@ -51,7 +51,7 @@ export function BalanceSummary({ balances }: { balances: Balance[] }) {
             </CardHeader>
             <CardContent className="flex flex-col gap-3">
               <span className="text-2xl font-semibold tabular-nums">{held(balance.balance)}</span>
-              <dl className="flex flex-col gap-1 text-sm">
+              <dl className="flex flex-col gap-1 text-base">
                 <Figure label={t('earnings.balance.earned')} value={sold(balance.earned)} />
                 {balance.converted && (
                   <Figure label={t('earnings.balance.payable')} value={held(balance.payable)} />

package/src/components/orders/fulfillment-deliveries.tsx

@@ -50,7 +50,7 @@ export function FulfillmentDeliveries({
   }
 
   return (
-    <CardContent className="flex flex-col gap-2 border-border-subtle border-b py-3 text-sm">
+    <CardContent className="mx-4 px-0 flex flex-col gap-2 border-border-subtle border-b py-3.5 text-base">
       {deliveries.map((delivery) => (
         <div key={delivery.id} className="flex flex-wrap items-center justify-between gap-2">
           <div className="flex min-w-0 flex-wrap items-center gap-2">

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

@@ -4,11 +4,8 @@ import {
   Badge,
   Button,
   Card,
-  CardAction,
   CardContent,
   CardFooter,
-  CardHeader,
-  CardTitle,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -16,6 +13,10 @@ import {
   DropdownMenuTrigger,
   FulfillmentItemList,
   FulfillmentPanel,
+  Section,
+  SectionActions,
+  SectionHeader,
+  SectionTitle,
   StatusBadge,
   useConfirm,
 } from '@spree/dashboard-ui'
@@ -41,6 +42,7 @@ import { FulfillmentFulfillForm } from './fulfillment-fulfill-form'
 import { FulfillmentLabelUploadDialog } from './fulfillment-label-upload-dialog'
 import { FulfillmentSplitDialog } from './fulfillment-split-dialog'
 import { ShippingLabelRow } from './shipping-label-row'
+import { useProductLink } from './use-product-link'
 
 // A parcel that has not gone out is the only one still to ship or cancel.
 // Reading these off "not unfulfilled" once badged a canceled parcel as a
@@ -54,14 +56,14 @@ export function FulfillmentsCard({ order }: { order: Order }) {
   const fulfillments = order.fulfillments ?? []
 
   return (
-    <Card variant="container">
-      <CardHeader>
-        <CardTitle>
+    <Section>
+      <SectionHeader>
+        <SectionTitle>
           <TruckIcon className="size-4" />
           {t('orders.fulfillments.title')}
           {fulfillments.length > 0 && <Badge variant="outline">{fulfillments.length}</Badge>}
-        </CardTitle>
-        <CardAction>
+        </SectionTitle>
+        <SectionActions>
           {order.fulfillment_status && (
             <StatusBadge
               status={order.fulfillment_status}
@@ -70,25 +72,30 @@ export function FulfillmentsCard({ order }: { order: Order }) {
               })}
             />
           )}
-        </CardAction>
-      </CardHeader>
+        </SectionActions>
+      </SectionHeader>
 
       {fulfillments.length === 0 ? (
-        <CardContent>
-          <p className="py-8 text-center text-muted-foreground">{t('orders.fulfillments.empty')}</p>
-        </CardContent>
+        <Card>
+          <CardContent>
+            <p className="py-8 text-center text-muted-foreground">
+              {t('orders.fulfillments.empty')}
+            </p>
+          </CardContent>
+        </Card>
       ) : (
-        <CardContent className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4">
           {fulfillments.map((fulfillment) => (
             <FulfillmentRow key={fulfillment.id} order={order} fulfillment={fulfillment} />
           ))}
-        </CardContent>
+        </div>
       )}
-    </Card>
+    </Section>
   )
 }
 
 function FulfillmentRow({ order, fulfillment }: { order: Order; fulfillment: Fulfillment }) {
+  const productLink = useProductLink()
   const orderId = order.id
   const { t } = useTranslation()
   const confirm = useConfirm()
@@ -187,7 +194,7 @@ function FulfillmentRow({ order, fulfillment }: { order: Order; fulfillment: Ful
       }
     >
       {fulfillment.delivery_method_name && (
-        <CardContent className="flex items-center justify-between border-border-subtle border-b py-3 text-sm">
+        <CardContent className="mx-4 px-0 flex items-center justify-between border-border-subtle border-b py-3.5 text-base">
           <span className="text-muted-foreground">{fulfillment.delivery_method_name}</span>
         </CardContent>
       )}
@@ -214,10 +221,13 @@ function FulfillmentRow({ order, fulfillment }: { order: Order; fulfillment: Ful
         />
       ) : (
         <>
-          <FulfillmentItemList rows={fulfillmentItemRows(fulfillment, order.items ?? [])} />
+          <FulfillmentItemList
+            productLink={productLink}
+            rows={fulfillmentItemRows(fulfillment, order.items ?? [])}
+          />
 
           {shippable && (
-            <CardFooter className="justify-end gap-2 py-3">
+            <CardFooter className="justify-end gap-2 py-3.5">
               <Button type="button" size="sm" onClick={() => setFulfilling(true)}>
                 <TruckIcon data-icon="inline-start" />
                 {t('orders.fulfill')}
@@ -226,7 +236,7 @@ function FulfillmentRow({ order, fulfillment }: { order: Order; fulfillment: Ful
           )}
 
           {!shippable && deliveries.length === 0 && (
-            <CardFooter className="justify-end gap-2 py-3">
+            <CardFooter className="justify-end gap-2 py-3.5">
               <Button
                 type="button"
                 size="sm"

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

@@ -11,16 +11,21 @@ import {
   Button,
   Card,
   CardAction,
+  CardContent,
   CardHeader,
   CardTitle,
+  CurrencyLabel,
   cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Section,
+  SectionHeader,
+  SectionTitle,
   Separator,
 } from '@spree/dashboard-ui'
-import { EllipsisVerticalIcon, PencilIcon } from '@spree/dashboard-ui/icons'
+import { EllipsisVerticalIcon, PencilIcon, ReceiptTextIcon } from '@spree/dashboard-ui/icons'
 import type { Order, OrderAddressParams } from '@spree/seller-sdk'
 import { type ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -33,21 +38,17 @@ function SummaryRow({
   value,
   bold,
   danger,
-  highlight,
 }: {
   label: string
   value: ReactNode
   bold?: boolean
   danger?: boolean
-  highlight?: boolean
 }) {
   return (
-    <div
-      className={cn('flex items-center justify-between px-5 py-2.5', highlight && 'bg-accent/50')}
-    >
-      <span className="text-sm">{label}</span>
+    <div className="flex items-center justify-between py-3 first:pt-0 last:pb-0">
+      <span className="text-base">{label}</span>
       <span
-        className={cn('text-sm tabular-nums', bold && 'font-bold', danger && 'text-destructive')}
+        className={cn('text-base tabular-nums', bold && 'font-bold', danger && 'text-destructive')}
       >
         {value}
       </span>
@@ -84,87 +85,96 @@ export function OrderSummaryCard({ order }: { order: Order }) {
   const placed = Boolean(order.completed_at)
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('orders.summary.title')}</CardTitle>
-      </CardHeader>
-
-      <div className="py-1">
-        <SummaryRow
-          label={t('orders.summary.created_at')}
-          value={formatDate(order.created_at, timezone)}
-        />
-        {order.completed_at && (
+    <Section>
+      <SectionHeader>
+        <SectionTitle>
+          <ReceiptTextIcon className="size-4" />
+          {t('orders.summary.title')}
+        </SectionTitle>
+      </SectionHeader>
+      <Card>
+        <CardContent className="flex flex-col">
           <SummaryRow
-            label={t('orders.summary.completed_at')}
-            value={formatDate(order.completed_at, timezone)}
+            label={t('orders.summary.created_at')}
+            value={formatDate(order.created_at, timezone)}
           />
-        )}
-
-        {order.canceled_at && (
-          <>
-            <Separator />
+          {order.completed_at && (
             <SummaryRow
-              label={t('orders.summary.canceled_at')}
-              value={formatDate(order.canceled_at, timezone)}
+              label={t('orders.summary.completed_at')}
+              value={formatDate(order.completed_at, timezone)}
             />
-            {order.cancel_reason_name && (
+          )}
+
+          {order.canceled_at && (
+            <>
+              <Separator />
               <SummaryRow
-                label={t('orders.summary.cancel_reason')}
-                value={order.cancel_reason_name}
+                label={t('orders.summary.canceled_at')}
+                value={formatDate(order.canceled_at, timezone)}
               />
-            )}
-            {order.cancel_note && (
-              <SummaryRow label={t('orders.summary.cancel_note')} value={order.cancel_note} />
-            )}
-          </>
-        )}
+              {order.cancel_reason_name && (
+                <SummaryRow
+                  label={t('orders.summary.cancel_reason')}
+                  value={order.cancel_reason_name}
+                />
+              )}
+              {order.cancel_note && (
+                <SummaryRow label={t('orders.summary.cancel_note')} value={order.cancel_note} />
+              )}
+            </>
+          )}
 
-        <Separator />
+          <Separator />
 
-        <SummaryRow label={t('orders.summary.currency')} value={order.currency} />
+          <SummaryRow
+            label={t('orders.summary.currency')}
+            value={<CurrencyLabel code={order.currency} />}
+          />
 
-        <Separator />
+          <Separator />
 
-        <SummaryRow label={t('orders.summary.subtotal')} value={money(order.item_total)} />
+          <SummaryRow label={t('orders.summary.subtotal')} value={money(order.item_total)} />
 
-        {isPositiveMoney(order.delivery_total) && (
-          <SummaryRow label={t('orders.summary.shipping')} value={money(order.delivery_total)} />
-        )}
+          {isPositiveMoney(order.delivery_total) && (
+            <SummaryRow label={t('orders.summary.shipping')} value={money(order.delivery_total)} />
+          )}
 
-        {!isZeroMoney(order.discount_total) && (
-          <SummaryRow label={t('orders.summary.promotions')} value={money(order.discount_total)} />
-        )}
+          {!isZeroMoney(order.discount_total) && (
+            <SummaryRow
+              label={t('orders.summary.promotions')}
+              value={money(order.discount_total)}
+            />
+          )}
 
-        {!isZeroMoney(order.adjustment_total) && (
-          <SummaryRow
-            label={t('orders.summary.adjustments')}
-            value={money(order.adjustment_total)}
-          />
-        )}
+          {!isZeroMoney(order.adjustment_total) && (
+            <SummaryRow
+              label={t('orders.summary.adjustments')}
+              value={money(order.adjustment_total)}
+            />
+          )}
 
-        {isPositiveMoney(order.included_tax_total) && (
-          <SummaryRow
-            label={t('orders.summary.tax_included')}
-            value={money(order.included_tax_total)}
-          />
-        )}
+          {isPositiveMoney(order.included_tax_total) && (
+            <SummaryRow
+              label={t('orders.summary.tax_included')}
+              value={money(order.included_tax_total)}
+            />
+          )}
 
-        {/* Shown on a placed order even at zero, so "no tax was charged" reads
+          {/* Shown on a placed order even at zero, so "no tax was charged" reads
             as an answer rather than a missing row. */}
-        {(isPositiveMoney(order.additional_tax_total) ||
-          (placed && isZeroMoney(order.included_tax_total))) && (
-          <SummaryRow
-            label={t('orders.summary.tax_additional')}
-            value={money(order.additional_tax_total)}
-          />
-        )}
+          {(isPositiveMoney(order.additional_tax_total) ||
+            (placed && isZeroMoney(order.included_tax_total))) && (
+            <SummaryRow
+              label={t('orders.summary.tax_additional')}
+              value={money(order.additional_tax_total)}
+            />
+          )}
 
-        <Separator />
+          <Separator />
 
-        <SummaryRow label={t('orders.summary.total')} value={money(order.total)} bold />
+          <SummaryRow label={t('orders.summary.total')} value={money(order.total)} bold />
 
-        {/* What the marketplace charged the seller on this sale. Below the
+          {/* What the marketplace charged the seller on this sale. Below the
             order total because it is not part of what the buyer paid — it is
             billed to the seller separately.
 
@@ -180,45 +190,48 @@ export function OrderSummaryCard({ order }: { order: Order }) {
             Shown on every placed order, including one whose fee came to
             zero: a zero-rated or exempt rate is an answer the seller needs,
             and every order here is a seller's by definition. */}
-        {placed && (
-          <>
-            <Separator />
+          {placed && (
+            <>
+              <Separator />
 
-            <SummaryRow
-              label={t('orders.summary.commission_fee')}
-              value={money(order.commission_amount_total)}
-            />
+              <SummaryRow
+                label={t('orders.summary.commission_fee')}
+                value={money(order.commission_amount_total)}
+              />
+
+              {isPositiveMoney(order.commission_tax_total) && (
+                <SummaryRow
+                  label={t('orders.summary.commission_tax')}
+                  value={money(order.commission_tax_total)}
+                />
+              )}
 
-            {isPositiveMoney(order.commission_tax_total) && (
               <SummaryRow
-                label={t('orders.summary.commission_tax')}
-                value={money(order.commission_tax_total)}
+                label={t('orders.summary.commission_total')}
+                value={money(order.commission_total)}
+                bold
               />
-            )}
+            </>
+          )}
 
-            <SummaryRow
-              label={t('orders.summary.commission_total')}
-              value={money(order.commission_total)}
-              bold
-            />
-          </>
-        )}
+          <Separator />
 
-        <Separator />
+          {/* What has been paid and what is still owed, set apart together. */}
 
-        <SummaryRow
-          label={t('orders.summary.payment_total')}
-          value={money(order.payment_total)}
-          highlight
-        />
-        <SummaryRow
-          label={t('orders.summary.outstanding_balance')}
-          value={money(order.amount_due)}
-          highlight
-          danger={outstanding}
-        />
-      </div>
-    </Card>
+          <div className="-mx-2 rounded-lg bg-accent/50 px-2 py-3">
+            <SummaryRow
+              label={t('orders.summary.payment_total')}
+              value={money(order.payment_total)}
+            />
+            <SummaryRow
+              label={t('orders.summary.outstanding_balance')}
+              value={money(order.amount_due)}
+              danger={outstanding}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </Section>
   )
 }
 

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

@@ -1,4 +1,4 @@
-import { formatMoney, useMoneyLocale } from '@spree/dashboard-core'
+import { formatMoney, ReadRow, useMoneyLocale } from '@spree/dashboard-core'
 import {
   Card,
   CardAction,
@@ -17,7 +17,6 @@ import {
 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.
@@ -64,7 +63,7 @@ export function OrderPaymentCard({ order }: { order: Order }) {
       {splits.length > 0 && (
         <>
           <Separator />
-          <p className="px-6 pt-4 text-sm text-muted-foreground">
+          <p className="px-6 pt-4 text-base text-muted-foreground">
             {t('orders.payment.share_help')}
           </p>
           <Table>