@spree/seller-dashboard 1.0.0-beta.2 → 1.0.0-beta.4

package/src/pages/order.tsx

@@ -37,10 +37,12 @@ export function OrderPage() {
   if (isError) return <RetryableError onRetry={() => refetch()} />
   if (!order) return <CenteredMessage>{t('orders.not_found')}</CenteredMessage>
 
-  const cancelable = order.status !== 'canceled'
   // Nothing can come back from an order that never went out, so the post-sale
   // cards would only render empty with a disabled button.
   const placed = !!order.completed_at
+  // Only a placed order can be cancelled — offering it on a draft gives the
+  // seller an action the backend always refuses.
+  const cancelable = placed && order.status !== 'canceled'
 
   return (
     <>

package/src/pages/seller-picker.tsx

@@ -15,7 +15,7 @@ export function SellerPicker() {
   const { t } = useTranslation()
   const { data, isLoading, error } = useQuery({
     queryKey: ['seller', 'me'],
-    queryFn: () => sellerClient().me(),
+    queryFn: () => sellerClient().me.get(),
   })
 
   if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>

package/src/pages/team.tsx

@@ -1,4 +1,4 @@
-import { Can, getInitials, PageHeader, Slot } from '@spree/dashboard-core'
+import { Can, getInitials, PageHeader, Slot, usePermissions } from '@spree/dashboard-core'
 import {
   Avatar,
   AvatarFallback,
@@ -283,6 +283,7 @@ function InvitationRow({ invitation }: { invitation: Invitation }) {
   const queryClient = useQueryClient()
   const confirm = useConfirm()
   const { copy } = useCopyToClipboard()
+  const { permissions } = usePermissions()
 
   const invalidate = () =>
     queryClient.invalidateQueries({ queryKey: ['seller', sellerId, 'invitations'] })
@@ -313,20 +314,37 @@ function InvitationRow({ invitation }: { invitation: Invitation }) {
       }),
   })
 
+  // The link carries the invitation's token, so it is fetched on demand
+  // rather than shipped with the listing.
+  const acceptanceLink = useMutation({
+    mutationFn: (id: string) => sellerClient().invitations.acceptanceLink(id),
+  })
+
   async function handleCopyLink() {
-    // Path-only when no panel origin is configured; resolve against wherever
-    // this panel is actually mounted. `BASE_URL` matters: served at /sellers
-    // (the single-node topology), origin alone would produce a link that
-    // misses the mount and 404s.
-    const url = invitation.acceptance_url.startsWith('/')
-      ? new URL(
-          `.${invitation.acceptance_url}`,
-          `${window.location.origin}${import.meta.env.BASE_URL}`,
-        ).toString()
-      : invitation.acceptance_url
-
-    await copy(url)
-    toastManager.add({ type: 'success', title: t('team.messages.link_copied') })
+    try {
+      const { acceptance_url } = await acceptanceLink.mutateAsync(invitation.id)
+      // Path-only when no panel origin is configured; resolve against wherever
+      // this panel is actually mounted. `BASE_URL` matters: served at /sellers
+      // (the single-node topology), origin alone would produce a link that
+      // misses the mount and 404s.
+      const url = acceptance_url.startsWith('/')
+        ? new URL(
+            `.${acceptance_url}`,
+            `${window.location.origin}${import.meta.env.BASE_URL}`,
+          ).toString()
+        : acceptance_url
+
+      if (!(await copy(url))) {
+        toastManager.add({ type: 'error', title: t('common.error') })
+        return
+      }
+      toastManager.add({ type: 'success', title: t('team.messages.link_copied') })
+    } catch (err) {
+      toastManager.add({
+        type: 'error',
+        title: err instanceof Error ? err.message : t('common.error'),
+      })
+    }
   }
 
   async function handleRevoke() {
@@ -371,6 +389,8 @@ function InvitationRow({ invitation }: { invitation: Invitation }) {
               key: 'copy',
               label: t('team.actions.copy_link'),
               icon: <LinkIcon className="size-4" />,
+              visible: permissions.can('update', 'seller_profile'),
+              disabled: acceptanceLink.isPending,
               onSelect: handleCopyLink,
             },
             {

package/src/panel-chrome.tsx

@@ -1,7 +1,12 @@
 import { AppShell, AppShellProvider, TenantProvider } from '@spree/dashboard-core'
 import { useParams, useRouterState } from '@tanstack/react-router'
-import type { ReactNode } from 'react'
+import { type ReactNode, useState } from 'react'
+import { AccountDialog } from './components/account-dialog'
 import { SellerSwitcher } from './components/seller-switcher'
+import { getAvailableUiLocales } from './i18n'
+
+// Derived once from the shipped locale bundles — stable for the panel's life.
+const UI_LOCALES = getAvailableUiLocales()
 
 /**
  * The panel's frame: the nav rail, and the page as a sheet beside it.
@@ -20,6 +25,10 @@ export function PanelChrome({ children }: { children: ReactNode }) {
   const inSettings = useRouterState({
     select: (state) => state.location.pathname.startsWith(`/${sellerId}/settings`),
   })
+  // The account is edited in a dialog rather than on a page, so the frame owns
+  // its open state — the trigger sits in the sidebar's account menu, which is
+  // mounted here and stays put across route changes.
+  const [accountOpen, setAccountOpen] = useState(false)
 
   return (
     // Scopes every shared query key to this seller, the way `StoreProvider`
@@ -27,7 +36,14 @@ export function PanelChrome({ children }: { children: ReactNode }) {
     // survive a switch and be shown under the next seller.
     <TenantProvider id={sellerId}>
       <AppShellProvider>
-        <AppShell tenantId={sellerId} sidebarHeader={<SellerSwitcher />} inSettings={inSettings}>
+        <AppShell
+          tenantId={sellerId}
+          sidebarHeader={<SellerSwitcher />}
+          inSettings={inSettings}
+          uiLocales={UI_LOCALES}
+          onEditProfile={() => setAccountOpen(true)}
+        >
+          <AccountDialog open={accountOpen} onOpenChange={setAccountOpen} />
           {children}
         </AppShell>
       </AppShellProvider>

package/src/routes/_authenticated/index.tsx

@@ -24,7 +24,7 @@ function SellerEntry() {
 
   const { data, isLoading, error } = useQuery({
     queryKey: ['seller', 'me'],
-    queryFn: () => sellerClient().me(),
+    queryFn: () => sellerClient().me.get(),
   })
 
   const sellers = data?.sellers ?? []

package/src/schemas/account.ts

@@ -0,0 +1,49 @@
+import { accountFormToParams, isUiLocale } from '@spree/dashboard-core'
+import type { AccountUpdateParams, MeResponse } from '@spree/seller-sdk'
+import { z } from 'zod/v4'
+
+// The signed-in person's own account (PATCH /me) — not the seller business
+// they act for, which is `pages/profile.tsx`. Every field is optional: the
+// panel asks for a name but does not require one.
+//
+// The panel's languages are NOT listed here. They are derived at render time
+// from the locale bundles the panel ships (see `getAvailableUiLocales`), which
+// is what it can actually display — the API knows nothing about that.
+//
+// The avatar is a small state machine: untouched (omit on save), uploaded
+// (send the signed id), or cleared (send null to purge). `avatar_signed_id`
+// carries a freshly direct-uploaded blob, `avatar_preview_url` a transient
+// object URL for the just-picked file, and `avatar_cleared` flags a removal of
+// the persisted photo.
+export const accountFormSchema = z.object({
+  first_name: z.string().nullable().optional(),
+  last_name: z.string().nullable().optional(),
+  selected_locale: z.string().nullable().optional(),
+  avatar_signed_id: z.string().nullable(),
+  avatar_preview_url: z.string().nullable(),
+  avatar_cleared: z.boolean(),
+})
+
+export type AccountFormValues = z.infer<typeof accountFormSchema>
+
+/** Hydrate the form from the current account (the `/me` response). */
+export function accountToForm(me: MeResponse, fallbackLocale: string): AccountFormValues {
+  return {
+    first_name: me.user.first_name ?? '',
+    last_name: me.user.last_name ?? '',
+    // A language saved from another panel may not be one this panel ships;
+    // preselecting it would show a raw code and save it straight back.
+    selected_locale:
+      me.user.selected_locale && isUiLocale(me.user.selected_locale)
+        ? me.user.selected_locale
+        : fallbackLocale,
+    avatar_signed_id: null,
+    avatar_preview_url: null,
+    avatar_cleared: false,
+  }
+}
+
+/** Map the form to the PATCH /me params (drops the frontend-only fields). */
+export function accountToParams(values: AccountFormValues): AccountUpdateParams {
+  return accountFormToParams(values)
+}