@spree/seller-dashboard 6.0.3 → 6.0.4

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

@@ -1,5 +1,11 @@
 import { CLAIM_STATUSES, EXCHANGE_STATUSES, subsetOf, sumMoney } from '@spree/core'
-import { currencyParts, formatMoney, isPositiveMoney, useMoneyLocale } from '@spree/dashboard-core'
+import {
+  currencyParts,
+  formatMoney,
+  isPositiveMoney,
+  postSaleItemRow,
+  useMoneyLocale,
+} from '@spree/dashboard-core'
 import {
   Button,
   Card,
@@ -13,6 +19,11 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  FulfillmentItemList,
+  Section,
+  SectionActions,
+  SectionHeader,
+  SectionTitle,
   StatusBadge,
   useConfirm,
 } from '@spree/dashboard-ui'
@@ -35,6 +46,7 @@ import {
 } from '../../hooks/use-post-sale'
 import { lineLabel } from './line-label'
 import { CreateClaimDialog } from './post-sale-create-dialogs'
+import { useProductLink } from './use-product-link'
 
 const EXCHANGE_ACTIONABLE = subsetOf(EXCHANGE_STATUSES, ['requested', 'approved', 'received'])
 const CLAIM_ACTIONABLE = subsetOf(CLAIM_STATUSES, ['open', 'approved'])
@@ -47,6 +59,7 @@ const CLAIM_ACTIONABLE = subsetOf(CLAIM_STATUSES, ['open', 'approved'])
  * is opened by the operator or the customer and worked here.
  */
 export function ExchangesCard({ order }: { order: Order }) {
+  const productLink = useProductLink()
   const { t } = useTranslation()
   const locale = useMoneyLocale()
   const confirm = useConfirm()
@@ -68,19 +81,19 @@ export function ExchangesCard({ order }: { order: Order }) {
   }
 
   return (
-    <Card variant="container">
-      <CardHeader>
-        <CardTitle>
+    <Section>
+      <SectionHeader>
+        <SectionTitle>
           <ArrowLeftRightIcon className="size-4" />
           {t('orders.post_sale.exchanges.title')}
-        </CardTitle>
-      </CardHeader>
+        </SectionTitle>
+      </SectionHeader>
 
-      <CardContent className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
         {exchanges.map((exchange) => (
-          <Card key={exchange.id} variant="nested">
+          <Card key={exchange.id}>
             <CardHeader>
-              <CardTitle className="text-sm font-medium">{exchange.number}</CardTitle>
+              <CardTitle className="text-base font-medium">{exchange.number}</CardTitle>
               <CardAction className="flex items-center gap-2">
                 <StatusBadge
                   status={exchange.status}
@@ -142,17 +155,38 @@ export function ExchangesCard({ order }: { order: Order }) {
               </CardAction>
             </CardHeader>
 
+            <FulfillmentItemList
+              productLink={productLink}
+              rows={(exchange.exchange_line_items ?? []).map((line) => {
+                const row = postSaleItemRow(
+                  line.id,
+                  {
+                    line_item_id: line.line_item_id,
+                    variant_id: line.original_variant_id,
+                    name: line.name,
+                    variant: line.original_variant,
+                    quantity: line.quantity,
+                  },
+                  order.items ?? [],
+                )
+                return {
+                  ...row,
+                  replacement: {
+                    name:
+                      line.new_variant_name || line.new_variant?.sku || line.new_variant_id || '',
+                    optionsText: line.new_variant?.options_text,
+                    thumbnailUrl: line.new_variant?.thumbnail_url,
+                    productId: line.new_variant?.product_id,
+                    displayPrice: formatMoney(line.new_variant_price, order.currency, locale, {
+                      unitPrice: true,
+                    }),
+                    label: t('admin.pages.orders.detail.claims.resolutions.replacement'),
+                  },
+                }
+              })}
+            />
             <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">
+              <p className="text-muted-foreground text-base">
                 {t('orders.post_sale.exchanges.price_difference', {
                   amount: formatMoney(exchange.price_difference, order.currency, locale),
                 })}
@@ -160,13 +194,14 @@ export function ExchangesCard({ order }: { order: Order }) {
             </CardContent>
           </Card>
         ))}
-      </CardContent>
-    </Card>
+      </div>
+    </Section>
   )
 }
 
 /** Something went wrong with a delivery, and the seller puts it right. */
 export function ClaimsCard({ order }: { order: Order }) {
+  const productLink = useProductLink()
   const { t } = useTranslation()
   const confirm = useConfirm()
   const { data } = useOrderClaims(order.id)
@@ -201,30 +236,30 @@ export function ClaimsCard({ order }: { order: Order }) {
   }
 
   return (
-    <Card variant="container">
-      <CardHeader>
-        <CardTitle>
+    <Section>
+      <SectionHeader>
+        <SectionTitle>
           <ShieldAlertIcon className="size-4" />
           {t('orders.post_sale.claims.title')}
-        </CardTitle>
+        </SectionTitle>
         {canCreate && (
-          <CardAction>
+          <SectionActions>
             <Button variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
               <PlusIcon className="size-4" />
               {t('orders.post_sale.claims.create')}
             </Button>
-          </CardAction>
+          </SectionActions>
         )}
-      </CardHeader>
+      </SectionHeader>
 
-      <CardContent className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
         {claims.length === 0 ? (
-          <p className="text-muted-foreground text-sm">{t('orders.post_sale.claims.empty')}</p>
+          <p className="text-muted-foreground text-base">{t('orders.post_sale.claims.empty')}</p>
         ) : (
           claims.map((claim) => (
-            <Card key={claim.id} variant="nested">
+            <Card key={claim.id}>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">{claim.number}</CardTitle>
+                <CardTitle className="text-base font-medium">{claim.number}</CardTitle>
                 <CardAction className="flex items-center gap-2">
                   <StatusBadge
                     status={claim.status}
@@ -268,23 +303,20 @@ export function ClaimsCard({ order }: { order: Order }) {
                 </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>
+              <FulfillmentItemList
+                productLink={productLink}
+                rows={(claim.claim_line_items ?? []).map((line) => {
+                  const row = postSaleItemRow(line.id, line, order.items ?? [])
+                  return {
+                    ...row,
+                    optionsText: [row.optionsText, line.description].filter(Boolean).join(' — '),
+                  }
+                })}
+              />
             </Card>
           ))
         )}
-      </CardContent>
+      </div>
 
       <CreateClaimDialog order={order} open={createOpen} onOpenChange={setCreateOpen} />
       {resolving && (
@@ -295,7 +327,7 @@ export function ClaimsCard({ order }: { order: Order }) {
           onOpenChange={() => setResolving(null)}
         />
       )}
-    </Card>
+    </Section>
   )
 }
 

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

@@ -22,11 +22,21 @@ import { unitLabel } from './line-label'
 
 /** Units that actually went out, which is all that can come back. */
 export function fulfilledUnits(order: Order) {
+  const lineItems = new Map((order.items ?? []).map((item) => [item.id, item]))
+
   return (order.fulfillments ?? []).flatMap((fulfillment) =>
     (fulfillment.fulfillment_items ?? []).map((item) => ({
       id: item.id,
       label: unitLabel(item),
       quantity: item.quantity,
+      product: {
+        name: item.name ?? item.id,
+        optionsText: item.options_text,
+        // The fulfillment item carries no image; its order line does.
+        thumbnailUrl: item.line_item_id
+          ? lineItems.get(item.line_item_id)?.thumbnail_url
+          : undefined,
+      },
     })),
   )
 }
@@ -137,6 +147,11 @@ export function CreateClaimDialog({
         id: item.id,
         label: unitLabel(item),
         quantity: item.quantity,
+        product: {
+          name: item.name,
+          optionsText: item.options_text,
+          thumbnailUrl: item.thumbnail_url,
+        },
         paidFor: (quantity: number) => paidForUnits(item, quantity, order.currency),
       }))}
       currencySymbol={currencySymbol}

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

@@ -3,6 +3,7 @@ import {
   currencyParts,
   formatMoney,
   isPositiveMoney,
+  postSaleItemRow,
   returnOwesNothing,
   returnRefundSummary,
   useMoneyLocale,
@@ -20,8 +21,13 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  FulfillmentItemList,
   ReturnReceiveDialog,
   ReturnRefundDialog,
+  Section,
+  SectionActions,
+  SectionHeader,
+  SectionTitle,
   StatusBadge,
   useConfirm,
 } from '@spree/dashboard-ui'
@@ -33,6 +39,7 @@ 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'
+import { useProductLink } from './use-product-link'
 
 // Refunded and canceled returns are finished; offering a menu on them would
 // open onto nothing.
@@ -46,6 +53,7 @@ const ACTIONABLE = subsetOf(RETURN_STATUSES, ['requested', 'approved', 'received
  * refunding decides where the money goes.
  */
 export function ReturnsCard({ order }: { order: Order }) {
+  const productLink = useProductLink()
   const { t } = useTranslation()
   const confirm = useConfirm()
   const { data } = useOrderReturns(order.id)
@@ -70,30 +78,30 @@ export function ReturnsCard({ order }: { order: Order }) {
   }
 
   return (
-    <Card variant="container">
-      <CardHeader className="items-center">
-        <CardTitle>
+    <Section>
+      <SectionHeader className="items-center">
+        <SectionTitle>
           <RotateCcwIcon className="size-4" />
           {t('orders.post_sale.returns.title')}
-        </CardTitle>
+        </SectionTitle>
         {canCreate && (
-          <CardAction>
+          <SectionActions>
             <Button variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
               <PlusIcon className="size-4" />
               {t('orders.post_sale.returns.create')}
             </Button>
-          </CardAction>
+          </SectionActions>
         )}
-      </CardHeader>
+      </SectionHeader>
 
-      <CardContent className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
         {returns.length === 0 ? (
-          <p className="text-muted-foreground text-sm">{t('orders.post_sale.returns.empty')}</p>
+          <p className="text-muted-foreground text-base">{t('orders.post_sale.returns.empty')}</p>
         ) : (
           returns.map((returnRecord) => (
-            <Card key={returnRecord.id} variant="nested">
+            <Card key={returnRecord.id}>
               <CardHeader>
-                <CardTitle className="text-sm font-medium">{returnRecord.number}</CardTitle>
+                <CardTitle className="text-base font-medium">{returnRecord.number}</CardTitle>
                 <CardAction className="flex items-center gap-2">
                   <StatusBadge
                     status={returnRecord.status}
@@ -140,16 +148,20 @@ export function ReturnsCard({ order }: { order: Order }) {
                 </CardAction>
               </CardHeader>
 
+              <FulfillmentItemList
+                productLink={productLink}
+                rows={(returnRecord.return_line_items ?? []).map((line) => ({
+                  ...postSaleItemRow(line.id, line, order.items ?? []),
+                  badges: <ReturnLineBadges line={line} />,
+                }))}
+              />
               <CardContent className="flex flex-col gap-1.5">
-                {returnRecord.return_line_items?.map((line) => (
-                  <ReturnLineRow key={line.id} line={line} />
-                ))}
                 <RefundSummary returnRecord={returnRecord} currency={order.currency} />
               </CardContent>
             </Card>
           ))
         )}
-      </CardContent>
+      </div>
 
       <CreateReturnDialog order={order} open={createOpen} onOpenChange={setCreateOpen} />
       {receiving && (
@@ -167,7 +179,7 @@ export function ReturnsCard({ order }: { order: Order }) {
           onOpenChange={() => setRefunding(null)}
         />
       )}
-    </Card>
+    </Section>
   )
 }
 
@@ -177,7 +189,7 @@ function RefundSummary({ returnRecord, currency }: { returnRecord: Return; curre
   const summary = returnRefundSummary(returnRecord, currency, locale)
 
   return (
-    <p className="text-muted-foreground text-sm">
+    <p className="text-muted-foreground text-base">
       {summary.kind === 'owed' &&
         t('orders.post_sale.returns.refund_total', { amount: summary.amount })}
       {summary.kind === 'refunded' &&
@@ -188,28 +200,24 @@ function RefundSummary({ returnRecord, currency }: { returnRecord: Return; curre
   )
 }
 
-function ReturnLineRow({ line }: { line: ReturnLineItem }) {
+/** What arrived back against a line. */
+function ReturnLineBadges({ 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>
+    <>
+      {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>
+      )}
+    </>
   )
 }
 

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

@@ -88,7 +88,7 @@ export function ShippingLabelRow({
   }
 
   return (
-    <CardContent className="flex flex-wrap items-center justify-between gap-2 border-border-subtle border-b py-3 text-sm">
+    <CardContent className="mx-4 px-0 flex flex-wrap items-center justify-between gap-2 border-border-subtle border-b py-3.5 text-base">
       <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>

package/src/components/orders/use-product-link.tsx

@@ -0,0 +1,10 @@
+import type { ProductLinkRender } from '@spree/dashboard-ui'
+import { Link, useParams } from '@tanstack/react-router'
+
+/** Links an item list's products to the seller's own product pages. */
+export function useProductLink(): ProductLinkRender {
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  return (productId) => (
+    <Link to="/$sellerId/products/$productId" params={{ sellerId, productId }} />
+  )
+}

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

@@ -51,14 +51,14 @@ export function ProductStatusCard({ product, onDone }: { product: Product; onDon
       <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>
+        <p className="text-muted-foreground text-base">{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">
+          <p className="text-base">
             {t('products.rejection_reason', { reason: product.submission.review_note })}
           </p>
         )}

package/src/components/seller-address-card.tsx

@@ -69,11 +69,11 @@ export function SellerAddressCard({
   const body = address ? (
     <AddressBlock address={address} />
   ) : (
-    <p className="text-muted-foreground text-sm">{t('profile.address_not_provided')}</p>
+    <p className="text-muted-foreground text-base">{t('profile.address_not_provided')}</p>
   )
 
   const editButton = (
-    <Button variant={address ? 'outline' : 'default'} size="sm" onClick={() => setEditing(true)}>
+    <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
       {address ? <PencilIcon className="size-4" /> : <PlusIcon className="size-4" />}
       {address ? t('profile.edit') : t('profile.add_address')}
     </Button>

package/src/components/seller-returns-location-card.tsx

@@ -90,18 +90,13 @@ export function SellerReturnsLocationCard({ headless = false }: { headless?: boo
     hasAddress && location ? (
       <AddressBlock address={stockLocationToAddressBlock(location)} />
     ) : (
-      <p className={failed ? 'text-destructive text-sm' : 'text-muted-foreground text-sm'}>
+      <p className={failed ? 'text-destructive text-base' : 'text-muted-foreground text-base'}>
         {t(failed ? 'common.error' : 'profile.address_not_provided')}
       </p>
     )
 
   const editButton = (
-    <Button
-      variant={hasAddress ? 'outline' : 'default'}
-      size="sm"
-      disabled={!location}
-      onClick={() => setEditing(true)}
-    >
+    <Button variant="outline" size="sm" disabled={!location} onClick={() => setEditing(true)}>
       {hasAddress ? <PencilIcon className="size-4" /> : <PlusIcon className="size-4" />}
       {hasAddress ? t('profile.edit') : t('profile.add_address')}
     </Button>

package/src/components/seller-switcher.tsx

@@ -69,7 +69,7 @@ export function SellerSwitcher() {
         <AvatarFallback>{initials}</AvatarFallback>
       </Avatar>
       {!isCollapsed && (
-        <div className="grid flex-1 text-left text-sm leading-tight">
+        <div className="grid flex-1 text-left text-base leading-tight">
           <span className="truncate font-medium text-foreground">{current?.name}</span>
         </div>
       )}

package/src/hooks/use-fulfillments.ts

@@ -12,28 +12,8 @@ import { sellerClient } from '../api-client'
  * variant and a quantity.
  */
 export function useFulfillmentActions(orderId: string) {
-  const queryClient = useQueryClient()
-  const buildKey = useResourceKeyBuilder()
-
-  function useFulfillmentMutation<TParams>(mutationFn: (params: TParams) => Promise<unknown>) {
-    return useMutation({
-      mutationFn,
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: buildKey('seller-order', orderId) })
-        queryClient.invalidateQueries({ queryKey: buildKey('seller-orders') })
-      },
-      onError: (error) => {
-        // A rejected workflow — a parcel that cannot ship, a split that would
-        // empty its source — otherwise looks like a dead button.
-        toastManager.add({
-          type: 'error',
-          title: error instanceof Error ? error.message : String(error),
-        })
-      },
-    })
-  }
-
   const fulfill = useFulfillmentMutation(
+    orderId,
     ({
       fulfillmentId,
       ...params
@@ -47,6 +27,7 @@ export function useFulfillmentActions(orderId: string) {
   )
 
   const update = useFulfillmentMutation(
+    orderId,
     ({
       fulfillmentId,
       ...params
@@ -59,11 +40,12 @@ export function useFulfillmentActions(orderId: string) {
     }) => sellerClient().orders.fulfillments.update(orderId, fulfillmentId, params),
   )
 
-  const cancel = useFulfillmentMutation((fulfillmentId: string) =>
+  const cancel = useFulfillmentMutation(orderId, (fulfillmentId: string) =>
     sellerClient().orders.fulfillments.cancel(orderId, fulfillmentId),
   )
 
   const split = useFulfillmentMutation(
+    orderId,
     ({
       fulfillmentId,
       ...params
@@ -79,6 +61,7 @@ export function useFulfillmentActions(orderId: string) {
   // boxes or a pallet under a freight PRO number are the same shape, and each
   // carries its own tracking number and carrier status.
   const createDelivery = useFulfillmentMutation(
+    orderId,
     ({
       fulfillmentId,
       ...params
@@ -92,6 +75,7 @@ export function useFulfillmentActions(orderId: string) {
   )
 
   const updateDelivery = useFulfillmentMutation(
+    orderId,
     ({
       fulfillmentId,
       deliveryId,
@@ -113,6 +97,7 @@ export function useFulfillmentActions(orderId: string) {
   )
 
   const deleteDelivery = useFulfillmentMutation(
+    orderId,
     ({ fulfillmentId, deliveryId }: { fulfillmentId: string; deliveryId: string }) =>
       sellerClient().orders.fulfillments.deliveries.delete(orderId, fulfillmentId, deliveryId),
   )
@@ -121,6 +106,7 @@ export function useFulfillmentActions(orderId: string) {
   // refunding run through the operator's carrier account, so neither is
   // offered — the endpoint refuses both.
   const uploadLabel = useFulfillmentMutation(
+    orderId,
     ({
       fulfillmentId,
       ...params
@@ -138,6 +124,7 @@ export function useFulfillmentActions(orderId: string) {
   )
 
   const deleteLabel = useFulfillmentMutation(
+    orderId,
     ({ fulfillmentId, labelId }: { fulfillmentId: string; labelId: string }) =>
       sellerClient().orders.fulfillments.labels.delete(orderId, fulfillmentId, labelId),
   )
@@ -154,3 +141,27 @@ export function useFulfillmentActions(orderId: string) {
     deleteLabel,
   }
 }
+
+function useFulfillmentMutation<TParams>(
+  orderId: string,
+  mutationFn: (params: TParams) => Promise<unknown>,
+) {
+  const queryClient = useQueryClient()
+  const buildKey = useResourceKeyBuilder()
+
+  return useMutation({
+    mutationFn,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: buildKey('seller-order', orderId) })
+      queryClient.invalidateQueries({ queryKey: buildKey('seller-orders') })
+    },
+    onError: (error) => {
+      // A rejected workflow — a parcel that cannot ship, a split that would
+      // empty its source — otherwise looks like a dead button.
+      toastManager.add({
+        type: 'error',
+        title: error instanceof Error ? error.message : String(error),
+      })
+    },
+  })
+}

package/src/hooks/use-profile.ts

@@ -0,0 +1,38 @@
+import { toastManager } from '@spree/dashboard-ui'
+import type { ProfileUpdateParams } from '@spree/seller-sdk'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useParams } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+
+export function useProfile({ enabled = true }: { enabled?: boolean } = {}) {
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+
+  return useQuery({
+    queryKey: ['seller', sellerId, 'profile'],
+    queryFn: () => sellerClient().profile.get(),
+    enabled,
+  })
+}
+
+/** Saves part of the seller's own record, wherever in the panel it is edited. */
+export function useUpdateProfile() {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (params: ProfileUpdateParams) => sellerClient().profile.update(params),
+    onSuccess: (updated) => {
+      queryClient.setQueryData(['seller', sellerId, 'profile'], updated)
+      // Onboarding requirements read the profile, so the checklist re-evaluates.
+      void queryClient.invalidateQueries({ queryKey: ['seller', sellerId, 'onboarding'] })
+      toastManager.add({ type: 'success', title: t('profile.saved') })
+    },
+    onError: (err) =>
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error && err.message ? err.message : t('common.error'),
+      }),
+  })
+}