@spree/seller-dashboard 1.0.0-rc.4 → 1.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spree/seller-dashboard",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.6",
   "license": "MIT",
   "type": "module",
   "description": "Spree marketplace seller panel — the seller-facing counterpart to the admin dashboard.",
@@ -40,34 +40,44 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tanstack/react-query": "^5.90.2",
-    "@tanstack/react-router": "^1.133.32",
-    "@tanstack/router-plugin": "^1.167.35",
+    "@tanstack/router-plugin": "^1.168.46",
     "@tanstack/virtual-file-routes": "^1.162.0",
-    "i18next": "^26.2.0",
-    "lucide-react": "^1.47.0",
-    "react-hook-form": "^7.65.0",
-    "react-i18next": "^17.0.8",
-    "zod": "^4.4.3",
-    "@spree/dashboard-ui": "1.0.0-rc.3",
-    "@spree/seller-sdk": "1.0.0-rc.3",
-    "@spree/dashboard-core": "1.0.0-rc.3"
+    "lucide-react": "^1.58.0",
+    "zod": "^4.6.7",
+    "@spree/seller-sdk": "1.0.0-rc.5",
+    "@spree/core": "^0.2.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "@tanstack/react-query": "^5.104.3",
+    "@tanstack/react-router": "^1.170.44",
+    "i18next": "^26.4.7",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-hook-form": "^7.90.0",
+    "react-i18next": "^17.0.20",
+    "@spree/admin-sdk": "^1.0.0-rc.5",
+    "@spree/dashboard-core": "^1.0.0-rc.5",
+    "@spree/dashboard-ui": "^1.0.0-rc.5"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.14",
-    "@types/node": "^25.6.0",
+    "@tanstack/react-query": "^5.104.3",
+    "@tanstack/react-router": "^1.170.44",
+    "@types/node": "^26.6.5",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^6.0.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "tsup": "^8.5.0",
-    "typescript": "~6.0.3",
-    "vite": "^8.0.0"
+    "i18next": "^26.4.7",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-hook-form": "^7.90.0",
+    "react-i18next": "^17.0.20",
+    "tsup": "^9.0.0",
+    "typescript": "~7.0.2",
+    "vite": "^8.3.4",
+    "@spree/dashboard-core": "1.0.0-rc.5",
+    "@spree/dashboard-ui": "1.0.0-rc.5",
+    "@spree/admin-sdk": "1.0.0-rc.5"
   },
   "scripts": {
     "build": "pnpm generate:routes && tsup",

package/src/components/orders/fulfillment-edit-dialog.tsx

@@ -1,6 +1,7 @@
+import { isZeroMoney } from '@spree/core'
 import { formatMoney, useMoneyLocale } from '@spree/dashboard-core'
 import { FulfillmentEditDialog as SharedFulfillmentEditDialog } from '@spree/dashboard-ui'
-import { type Fulfillment, isZeroMoney, SpreeError } from '@spree/seller-sdk'
+import { type Fulfillment, SpreeError } from '@spree/seller-sdk'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFulfillmentActions } from '../../hooks/use-fulfillments'

package/src/components/orders/fulfillment-label-upload-dialog.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import type { CurrencyCode } from '@spree/core'
 import {
   EMPTY_FILE_UPLOAD_VALUE,
   FileUploadField,
@@ -9,7 +10,6 @@ import {
   mapSpreeErrorsToForm,
 } from '@spree/dashboard-core'
 import { LabelUploadDialog } from '@spree/dashboard-ui'
-import type { CurrencyCode } from '@spree/seller-sdk'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'

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

@@ -1,3 +1,4 @@
+import { FULFILLMENT_STATUSES, subsetOf } from '@spree/core'
 import { fulfillmentItemRows } from '@spree/dashboard-core'
 import {
   Badge,
@@ -44,8 +45,8 @@ import { ShippingLabelRow } from './shipping-label-row'
 // 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
 // success.
-const CAN_SHIP = ['unfulfilled']
-const CAN_CANCEL = ['unfulfilled']
+const CAN_SHIP = subsetOf(FULFILLMENT_STATUSES, ['unfulfilled'])
+const CAN_CANCEL = subsetOf(FULFILLMENT_STATUSES, ['unfulfilled'])
 
 /** Every parcel owed on this order, and what the seller can do with each. */
 export function FulfillmentsCard({ order }: { order: Order }) {

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

@@ -1,3 +1,4 @@
+import { isZeroMoney } from '@spree/core'
 import {
   AddressFormDialog,
   formatMoney,
@@ -21,7 +22,6 @@ import {
 } from '@spree/dashboard-ui'
 import { EllipsisVerticalIcon, PencilIcon } from '@spree/dashboard-ui/icons'
 import type { Order, OrderAddressParams } from '@spree/seller-sdk'
-import { isZeroMoney } from '@spree/seller-sdk'
 import { type ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { sellerClient } from '../../api-client'

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

@@ -1,3 +1,4 @@
+import { CLAIM_STATUSES, EXCHANGE_STATUSES, subsetOf, sumMoney } from '@spree/core'
 import { currencyParts, formatMoney, isPositiveMoney, useMoneyLocale } from '@spree/dashboard-core'
 import {
   Button,
@@ -23,7 +24,6 @@ import {
   ShieldAlertIcon,
 } from '@spree/dashboard-ui/icons'
 import type { Claim, Order } from '@spree/seller-sdk'
-import { sumMoney } from '@spree/seller-sdk'
 import i18n from 'i18next'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,8 +36,8 @@ import {
 import { lineLabel } from './line-label'
 import { CreateClaimDialog } from './post-sale-create-dialogs'
 
-const EXCHANGE_ACTIONABLE = ['requested', 'approved', 'received']
-const CLAIM_ACTIONABLE = ['open', 'approved']
+const EXCHANGE_ACTIONABLE = subsetOf(EXCHANGE_STATUSES, ['requested', 'approved', 'received'])
+const CLAIM_ACTIONABLE = subsetOf(CLAIM_STATUSES, ['open', 'approved'])
 
 /**
  * Goods swapped for different ones.

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

@@ -1,3 +1,4 @@
+import { RETURN_STATUSES, subsetOf } from '@spree/core'
 import {
   currencyParts,
   formatMoney,
@@ -35,7 +36,7 @@ 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']
+const ACTIONABLE = subsetOf(RETURN_STATUSES, ['requested', 'approved', 'received'])
 
 /**
  * Goods coming back on this order.

package/src/hooks/use-fulfillments.ts

@@ -1,6 +1,6 @@
+import type { CurrencyCode } from '@spree/core'
 import { useResourceKeyBuilder } from '@spree/dashboard-core'
 import { toastManager } from '@spree/dashboard-ui'
-import type { CurrencyCode } from '@spree/seller-sdk'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { sellerClient } from '../api-client'
 

package/src/hooks/use-post-sale.ts

@@ -1,3 +1,4 @@
+import type { ClaimResolution } from '@spree/core'
 import { useResourceKey, useResourceKeyBuilder } from '@spree/dashboard-core'
 import { toastManager } from '@spree/dashboard-ui'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
@@ -182,7 +183,7 @@ export function useClaimActions(orderId: string) {
       replacementLineItemIds,
     }: {
       claimId: string
-      resolution: 'refund' | 'replacement' | 'refund_and_replacement'
+      resolution: ClaimResolution
       refundMethod?: 'original_payment' | 'store_credit'
       amount?: string
       replacementLineItemIds?: string[]

package/src/index.ts

@@ -34,6 +34,7 @@ export {
   createSellerApiClient,
   rememberedSeller,
   rememberSeller,
+  sellerClient,
   setActiveSeller,
 } from './api-client'
 export { CenteredMessage } from './components/centered-message'

package/src/pages/onboarding.tsx

@@ -10,6 +10,8 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  Alert,
+  AlertDescription,
   Badge,
   Button,
   Card,
@@ -28,6 +30,7 @@ import {
 import {
   CheckCircle2Icon,
   ChevronRightIcon,
+  CircleAlertIcon,
   CircleIcon,
   ClockIcon,
   ExternalLinkIcon,
@@ -284,9 +287,10 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
 
   // A rejection the seller cannot read is a rejection they cannot act on.
   const rejection = submission?.status === 'rejected' && submission.review_note && (
-    <p className="rounded-md bg-destructive/10 p-3 text-destructive text-sm">
-      {submission.review_note}
-    </p>
+    <Alert variant="destructive">
+      <CircleAlertIcon />
+      <AlertDescription>{submission.review_note}</AlertDescription>
+    </Alert>
   )
 
   // Nothing to do on a finished line. The header already carries the tick and

package/src/pages/policies.tsx

@@ -15,6 +15,11 @@ import {
   FieldError,
   FieldLabel,
   Input,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemTitle,
   RichTextEditor,
   RowActions,
   Sheet,
@@ -128,19 +133,26 @@ export function PoliciesPage({ search }: { search: ResourceSearch }) {
           </CardHeader>
           <CardContent className="flex flex-col gap-3">
             <p className="text-muted-foreground text-sm">{t('policies.required.description')}</p>
-            <ul className="flex flex-col gap-2">
+            <ItemGroup className="gap-2">
               {outstanding.map((name) => (
-                <li
+                <Item
                   key={name}
-                  className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle px-3 py-2"
+                  role="listitem"
+                  variant="outline"
+                  size="sm"
+                  className="border-border-subtle"
                 >
-                  <span className="font-medium text-sm">{name}</span>
-                  <Button size="sm" variant="outline" onClick={() => setCreatingName(name)}>
-                    {t('policies.required.write')}
-                  </Button>
-                </li>
+                  <ItemContent>
+                    <ItemTitle>{name}</ItemTitle>
+                  </ItemContent>
+                  <ItemActions>
+                    <Button size="sm" variant="outline" onClick={() => setCreatingName(name)}>
+                      {t('policies.required.write')}
+                    </Button>
+                  </ItemActions>
+                </Item>
               ))}
-            </ul>
+            </ItemGroup>
           </CardContent>
         </Card>
       )}

package/src/pages/product.tsx

@@ -2,6 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import {
   CategorizationCard,
   extensionFormValues,
+  extensionRowValues,
   extensionSubmitValues,
   GeneralCard,
   InventoryCard,
@@ -17,6 +18,7 @@ import {
   Slot,
   VariantsCard,
   variantToWirePayload,
+  withExtensionRowValues,
 } from '@spree/dashboard-core'
 import { FormActions, ResourceLayout, StatusBadge, toastManager } from '@spree/dashboard-ui'
 import type { ProductCreateParams } from '@spree/seller-sdk'
@@ -106,7 +108,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
     if (form.formState.isDirty) return
 
     form.reset({
-      ...productToFormValues(product as PanelProduct, product.media),
+      ...productToFormValues(product as PanelProduct, product.media, 'seller.product'),
       ...extensionFormValues('seller.product', product),
     })
   }, [product, form])
@@ -137,6 +139,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
         // cards offer both — an allow-list that omitted them let a seller
         // set a crop or paste a video URL and watch it vanish on save.
         media: (values.media ?? []).map((item) => ({
+          ...extensionRowValues('seller.product.media', item),
           id: item.id,
           signed_id: item.signed_id ?? undefined,
           poster_signed_id: item.poster_signed_id ?? undefined,
@@ -149,7 +152,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
           variant_ids: item.variant_ids,
         })),
         variants: (values.variants ?? []).map((variant, index) =>
-          variantToWirePayload(variant, index),
+          variantToWirePayload(variant, index, 'seller.product'),
         ) as ProductCreateParams['variants'],
       }
 
@@ -181,7 +184,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
       // Raw form state, not `values`: the Zod parse strips keys the schema
       // doesn't know, which is every field a slot widget registered.
       await save.mutateAsync({
-        values,
+        values: withExtensionRowValues('seller.product', values, form.getValues()),
         extensionValues: extensionSubmitValues('seller.product', form),
       })
     } catch (err) {
@@ -236,8 +239,13 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
           main={
             <>
               <GeneralCard form={form} />
-              <VariantsCard form={form} />
-              <MediaCard productId={productId} variants={product?.variants ?? []} form={form} />
+              <VariantsCard form={form} formKey="seller.product" />
+              <MediaCard
+                productId={productId}
+                variants={product?.variants ?? []}
+                form={form}
+                formKey="seller.product"
+              />
               <PricesCard
                 form={form}
                 productName={product?.name ?? ''}
@@ -245,6 +253,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
                 defaultCurrency={profile?.default_currency}
               />
               <InventoryCard form={form} />
+              <Slot name="seller.product.form_main" context={{ product, mode }} />
             </>
           }
           sidebar={

package/src/pages/products.tsx

@@ -1,3 +1,4 @@
+import { PRODUCT_STATUSES, subsetOf } from '@spree/core'
 import type {
   BulkAction,
   BulkActionFormProps,
@@ -40,7 +41,7 @@ import '../tables/products'
  * approves it, so the only moves offered here are the two a seller makes
  * alone (docs/plans/6.0-seller-product-submission.md).
  */
-const BULK_STATUSES = ['draft', 'archived'] as const
+const BULK_STATUSES = subsetOf(PRODUCT_STATUSES, ['draft', 'archived'])
 
 type BulkStatus = (typeof BULK_STATUSES)[number]
 type StatusFormValues = { status: BulkStatus }

package/src/routes/_authenticated/$sellerId/settings/package-types.tsx

@@ -17,5 +17,5 @@ export const Route = createFileRoute('/_authenticated/$sellerId/settings/package
 function PackageTypesRoute() {
   const search = Route.useSearch() as z.infer<typeof packageTypesSearchSchema>
 
-  return <PackageTypesPage search={search} />
+  return <PackageTypesPage search={search} formKey="seller.package_type" />
 }

package/src/routes/_authenticated/$sellerId/settings/stock-locations.tsx

@@ -18,5 +18,5 @@ export const Route = createFileRoute('/_authenticated/$sellerId/settings/stock-l
 function StockLocationsRoute() {
   const search = Route.useSearch() as z.infer<typeof stockLocationsSearchSchema>
 
-  return <StockLocationsPage search={search} />
+  return <StockLocationsPage search={search} formKey="seller.stock_location" />
 }

package/src/tables/orders.tsx

@@ -1,4 +1,10 @@
-import { defineTable, formatMoney, formatStoreDateTime } from '@spree/dashboard-core'
+import { ORDER_PAYMENT_STATUSES } from '@spree/core'
+import {
+  defineTable,
+  FILTERABLE_ORDER_FULFILLMENT_STATUSES,
+  formatMoney,
+  formatStoreDateTime,
+} from '@spree/dashboard-core'
 import { ResourceNameCell, StatusBadge } from '@spree/dashboard-ui'
 import { PackageIcon } from '@spree/dashboard-ui/icons'
 import type { Order } from '@spree/seller-sdk'
@@ -17,26 +23,6 @@ function OrderDate({ iso }: { iso: string }) {
   return <>{formatStoreDateTime(iso, timezone)}</>
 }
 
-/** Mirrors the operator dashboard's order status vocabularies. */
-const FULFILLMENT_STATUSES = [
-  'unfulfilled',
-  'backorder',
-  'partial',
-  'fulfilled',
-  'delivered',
-  'canceled',
-] as const
-const PAYMENT_STATUSES = [
-  'none',
-  'authorized',
-  'partially_paid',
-  'paid',
-  'partially_refunded',
-  'refunded',
-  'overcharged',
-  'voided',
-] as const
-
 defineTable<Order>('seller-orders', {
   title: i18n.t('orders.title'),
   searchParam: 'number_cont',
@@ -69,7 +55,7 @@ defineTable<Order>('seller-orders', {
       label: i18n.t('orders.columns.fulfillment'),
       filterable: true,
       filterType: 'enum',
-      filterOptions: FULFILLMENT_STATUSES.map((status) => ({
+      filterOptions: FILTERABLE_ORDER_FULFILLMENT_STATUSES.map((status) => ({
         value: status,
         label: i18n.t(`orders.fulfillment_statuses.${status}`),
       })),
@@ -90,7 +76,7 @@ defineTable<Order>('seller-orders', {
       label: i18n.t('orders.columns.payment'),
       filterable: true,
       filterType: 'enum',
-      filterOptions: PAYMENT_STATUSES.map((status) => ({
+      filterOptions: ORDER_PAYMENT_STATUSES.map((status) => ({
         value: status,
         label: i18n.t(`orders.payment_statuses.${status}`),
       })),

package/src/tables/payouts.tsx

@@ -1,3 +1,4 @@
+import { SELLER_PAYOUT_STATUSES } from '@spree/core'
 import { defineTable, formatMoney, formatStoreDateTime } from '@spree/dashboard-core'
 import { ResourceNameCell, StatusBadge } from '@spree/dashboard-ui'
 import { HandCoinsIcon } from '@spree/dashboard-ui/icons'
@@ -18,8 +19,6 @@ function LedgerDate({ iso }: { iso: string }) {
   return <>{formatStoreDateTime(iso, timezone)}</>
 }
 
-const STATUSES = ['pending', 'processing', 'completed', 'failed', 'unresolved'] as const
-
 defineTable<Payout>('seller-payouts', {
   title: i18n.t('payouts.title'),
   searchParam: 'search',
@@ -50,7 +49,7 @@ defineTable<Payout>('seller-payouts', {
       sortable: true,
       filterable: true,
       filterType: 'enum',
-      filterOptions: STATUSES.map((status) => ({
+      filterOptions: SELLER_PAYOUT_STATUSES.map((status) => ({
         value: status,
         label: i18n.t(`earnings.statuses.${status}`),
       })),

package/src/tables/products.tsx

@@ -1,12 +1,10 @@
+import { PRODUCT_STATUSES } from '@spree/core'
 import { defineTable, formatPrice } from '@spree/dashboard-core'
 import { ResourceNameCell, StatusBadge, Thumbnail } from '@spree/dashboard-ui'
 import { PackageIcon } from '@spree/dashboard-ui/icons'
 import type { Product } from '@spree/seller-sdk'
 import i18n from 'i18next'
 
-/** Mirrors the operator dashboard's product statuses. */
-const PRODUCT_STATUSES = ['active', 'draft', 'proposed', 'rejected', 'archived'] as const
-
 defineTable<Product>('seller-products', {
   title: i18n.t('products.title'),
   searchParam: 'search',

package/src/tables/transfers.tsx

@@ -1,3 +1,4 @@
+import { SELLER_TRANSFER_KINDS, SELLER_TRANSFER_STATUSES } from '@spree/core'
 import { defineTable, formatMoney, formatStoreDateTime, useTenantId } from '@spree/dashboard-core'
 import { StatusBadge } from '@spree/dashboard-ui'
 import { BanknoteIcon } from '@spree/dashboard-ui/icons'
@@ -43,9 +44,6 @@ function LedgerDate({ iso }: { iso: string }) {
   return <>{formatStoreDateTime(iso, timezone)}</>
 }
 
-const STATUSES = ['pending', 'processing', 'completed', 'failed', 'unresolved'] as const
-const KINDS = ['earning', 'refund_reversal'] as const
-
 defineTable<Transfer>('seller-transfers', {
   title: i18n.t('earnings.transfers.title'),
   // Without this the toolbar sends `name_cont`, which the ledger does not
@@ -78,7 +76,7 @@ defineTable<Transfer>('seller-transfers', {
       label: i18n.t('earnings.columns.kind'),
       filterable: true,
       filterType: 'enum',
-      filterOptions: KINDS.map((kind) => ({
+      filterOptions: SELLER_TRANSFER_KINDS.map((kind) => ({
         value: kind,
         label: i18n.t(`earnings.kinds.${kind}`),
       })),
@@ -93,7 +91,7 @@ defineTable<Transfer>('seller-transfers', {
       sortable: true,
       filterable: true,
       filterType: 'enum',
-      filterOptions: STATUSES.map((status) => ({
+      filterOptions: SELLER_TRANSFER_STATUSES.map((status) => ({
         value: status,
         label: i18n.t(`earnings.statuses.${status}`),
       })),