@spree/seller-dashboard 6.0.3 → 6.0.4

package/src/pages/products.tsx

@@ -9,7 +9,6 @@ import {
   ExportButton,
   ImportButton,
   ImportWizardDialog,
-  PageHeader,
   ResourceTable,
   Subject,
 } from '@spree/dashboard-core'
@@ -149,10 +148,7 @@ export function ProductsPage({ search }: { search: ResourceSearch & { import?: s
 
   return (
     <div className="flex flex-col gap-4">
-      <PageHeader title={t('products.title')} sticky={false} />
-
       <ResourceTable<Product>
-        hideHeader
         tableKey="seller-products"
         queryKey="seller-products"
         queryFn={(params) => sellerClient().products.list(params)}

package/src/pages/profile-settings.tsx

@@ -0,0 +1,221 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  blankToNull,
+  extensionFormValues,
+  extensionSubmitValues,
+  mapSpreeErrorsToForm,
+  PageHeader,
+  ResourceImageField,
+  SettingsSection,
+  Slot,
+  sellerFormSchema,
+  sellerFormValues,
+  signedIdParam,
+} from '@spree/dashboard-core'
+import {
+  CardContent,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FormActions,
+  Input,
+  ResourceLayout,
+  RichTextEditor,
+  useFormSubmitShortcut,
+} from '@spree/dashboard-ui'
+import { ImageIcon, StoreIcon } from '@spree/dashboard-ui/icons'
+import type { Profile } from '@spree/seller-sdk'
+import { useState } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import type { z } from 'zod/v4'
+import { CenteredMessage } from '../components/centered-message'
+import { useProfile, useUpdateProfile } from '../hooks/use-profile'
+
+/**
+ * What buyers see of the seller — name, description and images — as one
+ * form. Everything else the seller configures lives on the other settings
+ * pages.
+ */
+export function ProfileSettingsPage() {
+  const { t } = useTranslation()
+  const { data: profile, isLoading, error } = useProfile()
+
+  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (error || !profile) return <CenteredMessage>{t('common.error')}</CenteredMessage>
+
+  return <ProfileForm profile={profile} />
+}
+
+// Only what this page shows. The operator's schema also checks fields edited
+// elsewhere (the emails), and an error on a field that is not on the page
+// would block Save with nothing to see.
+const profileFormSchema = sellerFormSchema.pick({
+  name: true,
+  about: true,
+  logo_signed_id: true,
+  logo_preview_url: true,
+  logo_cleared: true,
+  square_logo_signed_id: true,
+  square_logo_preview_url: true,
+  square_logo_cleared: true,
+  cover_photo_signed_id: true,
+  cover_photo_preview_url: true,
+  cover_photo_cleared: true,
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+
+// Fields a plugin adds through this page's slots register under this key and
+// save with the page; the API accepts what extensions opened to sellers.
+const FORM_KEY = 'seller.profile'
+
+function formValues(profile: Profile) {
+  return { ...sellerFormValues(profile), ...extensionFormValues(FORM_KEY, profile) }
+}
+
+function ProfileForm({ profile }: { profile: Profile }) {
+  const { t } = useTranslation()
+  const update = useUpdateProfile()
+
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: formValues(profile),
+  })
+
+  // An image's signed id only exists once its upload finishes, so saving
+  // before then would silently drop the new image.
+  const [uploading, setUploading] = useState<ReadonlySet<string>>(new Set())
+  const trackUpload = (kind: string) => (active: boolean) =>
+    setUploading((current) => {
+      const next = new Set(current)
+      if (active) next.add(kind)
+      else next.delete(kind)
+      return next
+    })
+
+  async function onSubmit(values: ProfileFormValues) {
+    if (uploading.size > 0) return
+
+    try {
+      const updated = await update.mutateAsync({
+        ...extensionSubmitValues(FORM_KEY, form),
+        name: values.name,
+        about: blankToNull(values.about),
+        ...signedIdParam('logo', values.logo_signed_id, values.logo_cleared),
+        ...signedIdParam('square_logo', values.square_logo_signed_id, values.square_logo_cleared),
+        ...signedIdParam('cover_photo', values.cover_photo_signed_id, values.cover_photo_cleared),
+      })
+      // Saved images come back as server URLs, so the upload fields start
+      // empty again rather than holding the files just sent.
+      form.reset(formValues(updated))
+    } catch (err) {
+      // Anything that is not a field error has already been toasted.
+      mapSpreeErrorsToForm(err, form.setError)
+    }
+  }
+
+  useFormSubmitShortcut(form, onSubmit)
+
+  const { errors } = form.formState
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <ResourceLayout
+          header={
+            <PageHeader
+              title={t('nav.profile')}
+              description={t('profile.subtitle')}
+              sticky={false}
+              actions={<FormActions form={form} disabled={uploading.size > 0} />}
+            />
+          }
+          main={
+            <>
+              {errors.root?.message && (
+                <p className="text-base text-destructive" role="alert">
+                  {errors.root.message}
+                </p>
+              )}
+              <SettingsSection title={t('profile.sections.details')} icon={<StoreIcon />}>
+                <CardContent>
+                  <FieldGroup>
+                    <Field>
+                      <FieldLabel htmlFor="seller-name">{t('admin.fields.name.label')}</FieldLabel>
+                      <Input
+                        id="seller-name"
+                        aria-invalid={!!errors.name || undefined}
+                        {...form.register('name')}
+                      />
+                      <FieldError errors={[errors.name]} />
+                    </Field>
+                    <Field>
+                      <FieldLabel htmlFor="seller-about">
+                        {t('admin.fields.seller.about.label')}
+                      </FieldLabel>
+                      <Controller
+                        control={form.control}
+                        name="about"
+                        render={({ field }) => (
+                          <RichTextEditor
+                            id="seller-about"
+                            ariaLabel={t('admin.fields.seller.about.label')}
+                            value={field.value ?? ''}
+                            onChange={field.onChange}
+                          />
+                        )}
+                      />
+                      <FieldDescription>{t('admin.fields.seller.about.help')}</FieldDescription>
+                    </Field>
+                  </FieldGroup>
+                </CardContent>
+              </SettingsSection>
+
+              <SettingsSection title={t('profile.sections.images')} icon={<ImageIcon />}>
+                <CardContent>
+                  <FieldGroup>
+                    <ResourceImageField
+                      form={form}
+                      kind="logo"
+                      onUploadingChange={trackUpload('logo')}
+                      serverUrl={profile.logo_url}
+                      square
+                      translationNamespace="admin.sellers"
+                      labelKey="logo_label"
+                      helpKey="logo_help"
+                    />
+                    <ResourceImageField
+                      form={form}
+                      kind="square_logo"
+                      onUploadingChange={trackUpload('square_logo')}
+                      serverUrl={profile.square_logo_url}
+                      square
+                      translationNamespace="admin.sellers"
+                      labelKey="square_logo_label"
+                      helpKey="square_logo_help"
+                    />
+                    <ResourceImageField
+                      form={form}
+                      kind="cover_photo"
+                      onUploadingChange={trackUpload('cover_photo')}
+                      serverUrl={profile.cover_photo_url}
+                      translationNamespace="admin.sellers"
+                      labelKey="cover_photo_label"
+                      helpKey="cover_photo_help"
+                    />
+                  </FieldGroup>
+                </CardContent>
+              </SettingsSection>
+
+              <Slot name="seller.profile.form_main" context={{ profile }} />
+              <Slot name="seller.profile.form_sidebar" context={{ profile }} />
+            </>
+          }
+        />
+      </form>
+    </FormProvider>
+  )
+}

package/src/pages/reset-password.tsx

@@ -49,12 +49,12 @@ export function ResetPasswordPage({ token }: { token?: string }) {
     <div className="flex min-h-screen items-center justify-center p-6">
       <div className="w-full max-w-sm">
         <h1 className="font-medium text-xl">{t('reset_password.title')}</h1>
-        <p className="mt-1 mb-6 text-muted-foreground text-sm">{t('reset_password.subtitle')}</p>
+        <p className="mt-1 mb-6 text-muted-foreground text-base">{t('reset_password.subtitle')}</p>
 
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <FieldGroup>
             {error && (
-              <p className="text-destructive text-sm" role="alert">
+              <p className="text-destructive text-base" role="alert">
                 {error}
               </p>
             )}
@@ -94,7 +94,7 @@ export function ResetPasswordPage({ token }: { token?: string }) {
               {isSubmitting ? t('reset_password.submitting') : t('reset_password.submit')}
             </Button>
 
-            <Link to="/forgot-password" className="text-sm underline underline-offset-4">
+            <Link to="/forgot-password" className="text-base underline underline-offset-4">
               {t('reset_password.request_new_link')}
             </Link>
           </FieldGroup>

package/src/pages/seller-picker.tsx

@@ -30,7 +30,7 @@ export function SellerPicker() {
           <CardTitle>{t('seller_picker.title')}</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-2">
-          <p className="mb-2 text-muted-foreground text-sm">{t('seller_picker.subtitle')}</p>
+          <p className="mb-2 text-muted-foreground text-base">{t('seller_picker.subtitle')}</p>
           {sellers.map((seller) => (
             <Button key={seller.id} variant="outline" className="justify-between" asChild>
               <Link to="/$sellerId" params={{ sellerId: seller.id }}>

package/src/pages/taxes.tsx

@@ -0,0 +1,40 @@
+import { PageHeader, ReadRow, SettingsSection } from '@spree/dashboard-core'
+import { CardContent, ResourceLayout } from '@spree/dashboard-ui'
+import { ReceiptTextIcon } from '@spree/dashboard-ui/icons'
+import { useTranslation } from 'react-i18next'
+import { SellerTaxIdentifiersCard } from '../components/seller-tax-identifiers-card'
+import { useProfile } from '../hooks/use-profile'
+
+/**
+ * The seller's tax registrations, then who remits tax on their sales. The
+ * second is the marketplace's decision, so it is shown read-only: the seller
+ * API refuses to write it.
+ */
+export function TaxesPage() {
+  const { t } = useTranslation()
+  const { data: profile } = useProfile()
+
+  return (
+    <ResourceLayout
+      header={
+        <PageHeader title={t('taxes.title')} description={t('taxes.description')} sticky={false} />
+      }
+      main={
+        <>
+          <SellerTaxIdentifiersCard />
+          <SettingsSection
+            title={t('profile.tax_remittance')}
+            icon={<ReceiptTextIcon />}
+            description={t('profile.operator_managed')}
+          >
+            <CardContent>
+              <ReadRow label={t('profile.tax_remittance')}>
+                {profile && t(`taxes.remittance.${profile.tax_remittance}`)}
+              </ReadRow>
+            </CardContent>
+          </SettingsSection>
+        </>
+      }
+    />
+  )
+}

package/src/pages/team.tsx

@@ -365,7 +365,7 @@ function InvitationRow({ invitation }: { invitation: Invitation }) {
           <span className="font-medium">{invitation.email}</span>
         </div>
       </TableCell>
-      <TableCell className="text-muted-foreground text-sm">
+      <TableCell className="text-muted-foreground text-base">
         {invitation.expires_at ? (
           <span className="inline-flex items-center gap-1">
             <ClockIcon className="size-3.5" />

package/src/routeTree.gen.ts

@@ -30,9 +30,12 @@ import { Route as ProductsProductIdRouteImport } from './routes/_authenticated/$
 import { Route as ProductsNewRouteImport } from './routes/_authenticated/$sellerId/products/new'
 import { Route as SettingsIndexRouteImport } from './routes/_authenticated/$sellerId/settings/index'
 import { Route as SettingsDeliveryMethodsRouteImport } from './routes/_authenticated/$sellerId/settings/delivery-methods'
+import { Route as SettingsGeneralRouteImport } from './routes/_authenticated/$sellerId/settings/general'
 import { Route as SettingsPackageTypesRouteImport } from './routes/_authenticated/$sellerId/settings/package-types'
 import { Route as SettingsPoliciesRouteImport } from './routes/_authenticated/$sellerId/settings/policies'
+import { Route as SettingsProfileRouteImport } from './routes/_authenticated/$sellerId/settings/profile'
 import { Route as SettingsStockLocationsRouteImport } from './routes/_authenticated/$sellerId/settings/stock-locations'
+import { Route as SettingsTaxesRouteImport } from './routes/_authenticated/$sellerId/settings/taxes'
 import { Route as SettingsTeamRouteImport } from './routes/_authenticated/$sellerId/settings/team'
 
 const authenticatedRoute = authenticatedRouteImport.update({
@@ -140,6 +143,11 @@ const SettingsDeliveryMethodsRoute = SettingsDeliveryMethodsRouteImport.update({
   path: '/delivery-methods',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsGeneralRoute = SettingsGeneralRouteImport.update({
+  id: '/general',
+  path: '/general',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsPackageTypesRoute = SettingsPackageTypesRouteImport.update({
   id: '/package-types',
   path: '/package-types',
@@ -150,11 +158,21 @@ const SettingsPoliciesRoute = SettingsPoliciesRouteImport.update({
   path: '/policies',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsProfileRoute = SettingsProfileRouteImport.update({
+  id: '/profile',
+  path: '/profile',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsStockLocationsRoute = SettingsStockLocationsRouteImport.update({
   id: '/stock-locations',
   path: '/stock-locations',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsTaxesRoute = SettingsTaxesRouteImport.update({
+  id: '/taxes',
+  path: '/taxes',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsTeamRoute = SettingsTeamRouteImport.update({
   id: '/team',
   path: '/team',
@@ -177,9 +195,12 @@ export interface FileRoutesByFullPath {
   '/$sellerId/products/$productId': typeof ProductsProductIdRoute
   '/$sellerId/products/new': typeof ProductsNewRoute
   '/$sellerId/settings/delivery-methods': typeof SettingsDeliveryMethodsRoute
+  '/$sellerId/settings/general': typeof SettingsGeneralRoute
   '/$sellerId/settings/package-types': typeof SettingsPackageTypesRoute
   '/$sellerId/settings/policies': typeof SettingsPoliciesRoute
+  '/$sellerId/settings/profile': typeof SettingsProfileRoute
   '/$sellerId/settings/stock-locations': typeof SettingsStockLocationsRoute
+  '/$sellerId/settings/taxes': typeof SettingsTaxesRoute
   '/$sellerId/settings/team': typeof SettingsTeamRoute
   '/$sellerId/earnings/': typeof EarningsIndexRoute
   '/$sellerId/orders/': typeof OrdersIndexRoute
@@ -201,9 +222,12 @@ export interface FileRoutesByTo {
   '/$sellerId/products/$productId': typeof ProductsProductIdRoute
   '/$sellerId/products/new': typeof ProductsNewRoute
   '/$sellerId/settings/delivery-methods': typeof SettingsDeliveryMethodsRoute
+  '/$sellerId/settings/general': typeof SettingsGeneralRoute
   '/$sellerId/settings/package-types': typeof SettingsPackageTypesRoute
   '/$sellerId/settings/policies': typeof SettingsPoliciesRoute
+  '/$sellerId/settings/profile': typeof SettingsProfileRoute
   '/$sellerId/settings/stock-locations': typeof SettingsStockLocationsRoute
+  '/$sellerId/settings/taxes': typeof SettingsTaxesRoute
   '/$sellerId/settings/team': typeof SettingsTeamRoute
   '/$sellerId/earnings': typeof EarningsIndexRoute
   '/$sellerId/orders': typeof OrdersIndexRoute
@@ -229,9 +253,12 @@ export interface FileRoutesById {
   '/_authenticated/$sellerId/products/$productId': typeof ProductsProductIdRoute
   '/_authenticated/$sellerId/products/new': typeof ProductsNewRoute
   '/_authenticated/$sellerId/settings/delivery-methods': typeof SettingsDeliveryMethodsRoute
+  '/_authenticated/$sellerId/settings/general': typeof SettingsGeneralRoute
   '/_authenticated/$sellerId/settings/package-types': typeof SettingsPackageTypesRoute
   '/_authenticated/$sellerId/settings/policies': typeof SettingsPoliciesRoute
+  '/_authenticated/$sellerId/settings/profile': typeof SettingsProfileRoute
   '/_authenticated/$sellerId/settings/stock-locations': typeof SettingsStockLocationsRoute
+  '/_authenticated/$sellerId/settings/taxes': typeof SettingsTaxesRoute
   '/_authenticated/$sellerId/settings/team': typeof SettingsTeamRoute
   '/_authenticated/$sellerId/earnings/': typeof EarningsIndexRoute
   '/_authenticated/$sellerId/orders/': typeof OrdersIndexRoute
@@ -257,9 +284,12 @@ export interface FileRouteTypes {
     | '/$sellerId/products/$productId'
     | '/$sellerId/products/new'
     | '/$sellerId/settings/delivery-methods'
+    | '/$sellerId/settings/general'
     | '/$sellerId/settings/package-types'
     | '/$sellerId/settings/policies'
+    | '/$sellerId/settings/profile'
     | '/$sellerId/settings/stock-locations'
+    | '/$sellerId/settings/taxes'
     | '/$sellerId/settings/team'
     | '/$sellerId/earnings/'
     | '/$sellerId/orders/'
@@ -281,9 +311,12 @@ export interface FileRouteTypes {
     | '/$sellerId/products/$productId'
     | '/$sellerId/products/new'
     | '/$sellerId/settings/delivery-methods'
+    | '/$sellerId/settings/general'
     | '/$sellerId/settings/package-types'
     | '/$sellerId/settings/policies'
+    | '/$sellerId/settings/profile'
     | '/$sellerId/settings/stock-locations'
+    | '/$sellerId/settings/taxes'
     | '/$sellerId/settings/team'
     | '/$sellerId/earnings'
     | '/$sellerId/orders'
@@ -308,9 +341,12 @@ export interface FileRouteTypes {
     | '/_authenticated/$sellerId/products/$productId'
     | '/_authenticated/$sellerId/products/new'
     | '/_authenticated/$sellerId/settings/delivery-methods'
+    | '/_authenticated/$sellerId/settings/general'
     | '/_authenticated/$sellerId/settings/package-types'
     | '/_authenticated/$sellerId/settings/policies'
+    | '/_authenticated/$sellerId/settings/profile'
     | '/_authenticated/$sellerId/settings/stock-locations'
+    | '/_authenticated/$sellerId/settings/taxes'
     | '/_authenticated/$sellerId/settings/team'
     | '/_authenticated/$sellerId/earnings/'
     | '/_authenticated/$sellerId/orders/'
@@ -476,6 +512,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsDeliveryMethodsRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/_authenticated/$sellerId/settings/general': {
+      id: '/_authenticated/$sellerId/settings/general'
+      path: '/general'
+      fullPath: '/$sellerId/settings/general'
+      preLoaderRoute: typeof SettingsGeneralRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/_authenticated/$sellerId/settings/package-types': {
       id: '/_authenticated/$sellerId/settings/package-types'
       path: '/package-types'
@@ -490,6 +533,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsPoliciesRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/_authenticated/$sellerId/settings/profile': {
+      id: '/_authenticated/$sellerId/settings/profile'
+      path: '/profile'
+      fullPath: '/$sellerId/settings/profile'
+      preLoaderRoute: typeof SettingsProfileRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/_authenticated/$sellerId/settings/stock-locations': {
       id: '/_authenticated/$sellerId/settings/stock-locations'
       path: '/stock-locations'
@@ -497,6 +547,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsStockLocationsRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/_authenticated/$sellerId/settings/taxes': {
+      id: '/_authenticated/$sellerId/settings/taxes'
+      path: '/taxes'
+      fullPath: '/$sellerId/settings/taxes'
+      preLoaderRoute: typeof SettingsTaxesRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/_authenticated/$sellerId/settings/team': {
       id: '/_authenticated/$sellerId/settings/team'
       path: '/team'
@@ -509,18 +566,24 @@ declare module '@tanstack/react-router' {
 
 interface SettingsRouteChildren {
   SettingsDeliveryMethodsRoute: typeof SettingsDeliveryMethodsRoute
+  SettingsGeneralRoute: typeof SettingsGeneralRoute
   SettingsPackageTypesRoute: typeof SettingsPackageTypesRoute
   SettingsPoliciesRoute: typeof SettingsPoliciesRoute
+  SettingsProfileRoute: typeof SettingsProfileRoute
   SettingsStockLocationsRoute: typeof SettingsStockLocationsRoute
+  SettingsTaxesRoute: typeof SettingsTaxesRoute
   SettingsTeamRoute: typeof SettingsTeamRoute
   SettingsIndexRoute: typeof SettingsIndexRoute
 }
 
 const SettingsRouteChildren: SettingsRouteChildren = {
   SettingsDeliveryMethodsRoute: SettingsDeliveryMethodsRoute,
+  SettingsGeneralRoute: SettingsGeneralRoute,
   SettingsPackageTypesRoute: SettingsPackageTypesRoute,
   SettingsPoliciesRoute: SettingsPoliciesRoute,
+  SettingsProfileRoute: SettingsProfileRoute,
   SettingsStockLocationsRoute: SettingsStockLocationsRoute,
+  SettingsTaxesRoute: SettingsTaxesRoute,
   SettingsTeamRoute: SettingsTeamRoute,
   SettingsIndexRoute: SettingsIndexRoute,
 }

package/src/routes/_authenticated/$sellerId/profile.tsx

@@ -1,6 +1,8 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { ProfilePage } from '../../../pages/profile'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 
+// The profile moved under settings; old links and bookmarks follow it there.
 export const Route = createFileRoute('/_authenticated/$sellerId/profile')({
-  component: ProfilePage,
+  beforeLoad: ({ params }) => {
+    throw redirect({ to: '/$sellerId/settings/profile', params })
+  },
 })

package/src/routes/_authenticated/$sellerId/settings/general.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { GeneralSettingsPage } from '../../../../pages/general-settings'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/general')({
+  component: GeneralSettingsPage,
+})

package/src/routes/_authenticated/$sellerId/settings/profile.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ProfileSettingsPage } from '../../../../pages/profile-settings'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/profile')({
+  component: ProfileSettingsPage,
+})

package/src/routes/_authenticated/$sellerId/settings/taxes.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { TaxesPage } from '../../../../pages/taxes'
+
+export const Route = createFileRoute('/_authenticated/$sellerId/settings/taxes')({
+  component: TaxesPage,
+})

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

@@ -1,18 +1,14 @@
+import { SettingsContainer } from '@spree/dashboard-core'
 import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_authenticated/$sellerId/settings')({
   component: SettingsLayout,
 })
 
-/**
- * Content padding for the settings area. The rail itself lives in the chrome,
- * one level up, so it can span full height beside the top bar — this layout
- * owns only the right-hand column, matching the dashboard's settings layout.
- */
 function SettingsLayout() {
   return (
-    <div className="container mx-auto flex flex-1 flex-col gap-4 p-4 lg:p-6">
+    <SettingsContainer>
       <Outlet />
-    </div>
+    </SettingsContainer>
   )
 }

package/src/schemas/account.ts

@@ -3,7 +3,7 @@ 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
+// they act for, which is `pages/profile-settings.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

package/src/tables/products.tsx

@@ -1,6 +1,6 @@
 import { PRODUCT_STATUSES } from '@spree/core'
 import { defineTable, formatPrice, ProductStockSummary } from '@spree/dashboard-core'
-import { ResourceNameCell, StatusBadge, Thumbnail } from '@spree/dashboard-ui'
+import { ProductIdentity, StatusBadge } from '@spree/dashboard-ui'
 import { PackageIcon } from '@spree/dashboard-ui/icons'
 import type { Product } from '@spree/seller-sdk'
 import i18n from 'i18next'
@@ -19,10 +19,11 @@ defineTable<Product>('seller-products', {
       sortable: true,
       default: true,
       render: (product) => (
-        <div className="flex items-center gap-3">
-          <Thumbnail src={product.thumbnail_url} alt={product.name} />
-          <ResourceNameCell id={product.id} dataAttr="data-product-id" name={product.name} />
-        </div>
+        <ProductIdentity
+          name={product.name}
+          thumbnailUrl={product.thumbnail_url}
+          render={<button type="button" data-product-id={product.id} />}
+        />
       ),
     },
     {

package/src/components/read-row.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-
-/** One labelled value in a read-only card, with a placeholder when unset. */
-export function ReadRow({ label, children }: { label: string; children: ReactNode }) {
-  const { t } = useTranslation()
-
-  return (
-    <div className="flex items-start justify-between gap-3 text-sm">
-      <span className="text-muted-foreground">{label}</span>
-      <span className="text-right">
-        {children ?? <span className="text-muted-foreground">{t('profile.not_provided')}</span>}
-      </span>
-    </div>
-  )
-}