@spree/seller-dashboard 6.0.2 → 6.0.4

package/src/pages/general-settings.tsx

@@ -0,0 +1,233 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  blankToNull,
+  mapSpreeErrorsToForm,
+  PageHeader,
+  SettingsFieldGroup,
+  SettingsRow,
+  SettingsSection,
+  StoreDatePicker,
+} from '@spree/dashboard-core'
+import {
+  CardContent,
+  FormActions,
+  Input,
+  ResourceLayout,
+  useFormSubmitShortcut,
+} from '@spree/dashboard-ui'
+import { Building2Icon, CalendarOffIcon, MailIcon, MapPinIcon } from '@spree/dashboard-ui/icons'
+import type { Profile } from '@spree/seller-sdk'
+import { Controller, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { z } from 'zod/v4'
+import { CenteredMessage } from '../components/centered-message'
+import { SellerAddressCard } from '../components/seller-address-card'
+import { SellerReturnsLocationCard } from '../components/seller-returns-location-card'
+import { useProfile, useUpdateProfile } from '../hooks/use-profile'
+
+const generalSettingsSchema = z.object({
+  contact_email: z.email().or(z.literal('')),
+  billing_email: z.email().or(z.literal('')),
+  legal_name: z.string().trim(),
+  registration_number: z.string().trim(),
+  holiday_mode_until: z.string(),
+})
+
+type GeneralSettingsValues = z.infer<typeof generalSettingsSchema>
+
+function formValues(profile: Profile): GeneralSettingsValues {
+  return {
+    contact_email: profile.contact_email ?? '',
+    billing_email: profile.billing_email ?? '',
+    legal_name: profile.legal_name ?? '',
+    registration_number: profile.registration_number ?? '',
+    holiday_mode_until: profile.holiday_mode_until ?? '',
+  }
+}
+
+/**
+ * The seller's own configuration that buyers never see: how the marketplace
+ * reaches them, the business behind them, where post and returns go, and
+ * whether they are taking orders.
+ */
+export function GeneralSettingsPage() {
+  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 <GeneralSettingsForm profile={profile} />
+}
+
+function GeneralSettingsForm({ profile }: { profile: Profile }) {
+  const { t } = useTranslation()
+  const update = useUpdateProfile()
+
+  const form = useForm<GeneralSettingsValues>({
+    resolver: zodResolver(generalSettingsSchema),
+    defaultValues: formValues(profile),
+  })
+
+  async function onSubmit(values: GeneralSettingsValues) {
+    try {
+      const updated = await update.mutateAsync({
+        contact_email: blankToNull(values.contact_email),
+        billing_email: blankToNull(values.billing_email),
+        legal_name: blankToNull(values.legal_name),
+        registration_number: blankToNull(values.registration_number),
+        holiday_mode_until: blankToNull(values.holiday_mode_until),
+      })
+      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 (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <ResourceLayout
+        header={
+          <PageHeader
+            title={t('settings_general.title')}
+            description={t('settings_general.description')}
+            sticky={false}
+            actions={<FormActions form={form} />}
+          />
+        }
+        main={
+          <>
+            {errors.root?.message && (
+              <p className="text-base text-destructive" role="alert">
+                {errors.root.message}
+              </p>
+            )}
+            <SettingsSection title={t('settings_general.sections.contact')} icon={<MailIcon />}>
+              <CardContent>
+                <SettingsFieldGroup>
+                  <SettingsRow
+                    label={t('admin.fields.contact_email.label')}
+                    htmlFor="seller-contact-email"
+                    help={t('admin.fields.seller.contact_email.help')}
+                    error={errors.contact_email}
+                  >
+                    <Input
+                      id="seller-contact-email"
+                      type="email"
+                      className="@md/field-group:w-80"
+                      aria-invalid={!!errors.contact_email || undefined}
+                      {...form.register('contact_email')}
+                    />
+                  </SettingsRow>
+                  <SettingsRow
+                    label={t('admin.fields.seller.billing_email.label')}
+                    htmlFor="seller-billing-email"
+                    help={t('admin.fields.seller.billing_email.help')}
+                    error={errors.billing_email}
+                  >
+                    <Input
+                      id="seller-billing-email"
+                      type="email"
+                      className="@md/field-group:w-80"
+                      aria-invalid={!!errors.billing_email || undefined}
+                      {...form.register('billing_email')}
+                    />
+                  </SettingsRow>
+                </SettingsFieldGroup>
+              </CardContent>
+            </SettingsSection>
+
+            <SettingsSection
+              title={t('settings_general.sections.business')}
+              icon={<Building2Icon />}
+            >
+              <CardContent>
+                <SettingsFieldGroup>
+                  <SettingsRow
+                    label={t('profile.legal_name')}
+                    htmlFor="seller-legal-name"
+                    error={errors.legal_name}
+                  >
+                    <Input
+                      id="seller-legal-name"
+                      className="@md/field-group:w-80"
+                      {...form.register('legal_name')}
+                    />
+                  </SettingsRow>
+                  <SettingsRow
+                    label={t('profile.registration_number')}
+                    htmlFor="seller-registration-number"
+                    error={errors.registration_number}
+                  >
+                    <Input
+                      id="seller-registration-number"
+                      className="@md/field-group:w-80"
+                      {...form.register('registration_number')}
+                    />
+                  </SettingsRow>
+                </SettingsFieldGroup>
+              </CardContent>
+            </SettingsSection>
+
+            {/* Each address saves on its own from a dialog. The dialog's form
+                is portalled but still a React child of this one, so its submit
+                would bubble here and save the page too. */}
+            <section onSubmit={(event) => event.stopPropagation()}>
+              <SettingsSection
+                title={t('settings_general.sections.addresses')}
+                icon={<MapPinIcon />}
+              >
+                <CardContent>
+                  <SettingsFieldGroup>
+                    <SettingsRow label={t('profile.billing_address')}>
+                      <SellerAddressCard profile={profile} headless />
+                    </SettingsRow>
+                    <SettingsRow label={t('profile.returns_address')}>
+                      <SellerReturnsLocationCard headless />
+                    </SettingsRow>
+                  </SettingsFieldGroup>
+                </CardContent>
+              </SettingsSection>
+            </section>
+
+            <SettingsSection
+              title={t('settings_general.sections.holiday')}
+              icon={<CalendarOffIcon />}
+            >
+              <CardContent>
+                <SettingsFieldGroup>
+                  <Controller
+                    name="holiday_mode_until"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <SettingsRow
+                        label={t('admin.fields.seller.holiday_mode_until.label')}
+                        htmlFor="seller-holiday-mode-until"
+                        help={t('admin.fields.seller.holiday_mode_until.help')}
+                        error={fieldState.error}
+                      >
+                        <StoreDatePicker
+                          className="w-full @md/field-group:w-80"
+                          id="seller-holiday-mode-until"
+                          value={field.value || null}
+                          onChange={(next) => field.onChange(next ?? '')}
+                          placeholder={t('admin.fields.seller.holiday_mode_until.placeholder')}
+                          includeTime
+                        />
+                      </SettingsRow>
+                    )}
+                  />
+                </SettingsFieldGroup>
+              </CardContent>
+            </SettingsSection>
+          </>
+        }
+      />
+    </form>
+  )
+}

package/src/pages/home.tsx

@@ -98,7 +98,7 @@ export function HomePage() {
           <CardTitle>{t('home.selling_title')}</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-muted-foreground text-base">
             {profile.sellable ? t('home.selling_yes') : t('home.selling_no')}
           </p>
         </CardContent>

package/src/pages/login.tsx

@@ -44,12 +44,12 @@ export function LoginPage() {
     <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('login.title')}</h1>
-        <p className="mt-1 mb-6 text-muted-foreground text-sm">{t('login.subtitle')}</p>
+        <p className="mt-1 mb-6 text-muted-foreground text-base">{t('login.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>
             )}
@@ -83,7 +83,7 @@ export function LoginPage() {
               {isSubmitting ? t('login.submitting') : t('login.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('login.forgot_password')}
             </Link>
           </FieldGroup>

package/src/pages/onboarding.tsx

@@ -43,6 +43,7 @@ import { sellerClient } from '../api-client'
 import { CenteredMessage } from '../components/centered-message'
 import { SellerAddressCard } from '../components/seller-address-card'
 import { SellerReturnsLocationCard } from '../components/seller-returns-location-card'
+import { useProfile } from '../hooks/use-profile'
 
 /**
  * What the marketplace asks of this seller before admitting them.
@@ -105,10 +106,10 @@ export function OnboardingPage() {
           <Progress value={progressPercentage(progress)} />
 
           {submitted ? (
-            <p className="text-muted-foreground text-sm">{t('onboarding.under_review')}</p>
+            <p className="text-muted-foreground text-base">{t('onboarding.under_review')}</p>
           ) : (
             <div className="flex items-center justify-between gap-4">
-              <p className="text-muted-foreground text-sm">
+              <p className="text-muted-foreground text-base">
                 {blocking.length === 0
                   ? t('onboarding.ready')
                   : t('onboarding.remaining', { count: blocking.length })}
@@ -132,7 +133,7 @@ export function OnboardingPage() {
         // `multiple` because these are independent — a seller does them in any
         // order — so opening one must not close the one they were reading.
         // Opens on the first outstanding line, which answers "what next".
-        <Card className="overflow-hidden py-0">
+        <Card className="overflow-hidden">
           <Accordion multiple defaultValue={openByDefault}>
             {requirements.map((requirement) => (
               <AccordionItem key={requirement.id} value={requirement.id}>
@@ -156,7 +157,7 @@ export function OnboardingPage() {
                 </AccordionTrigger>
                 <AccordionContent className="flex flex-col gap-3 ps-12">
                   {requirement.description && (
-                    <p className="text-muted-foreground text-sm">{requirement.description}</p>
+                    <p className="text-muted-foreground text-base">{requirement.description}</p>
                   )}
                   <RequirementAction requirement={requirement} />
                 </AccordionContent>
@@ -189,15 +190,9 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
   const [file, setFile] = useState<FileUploadValue>(EMPTY_FILE_UPLOAD_VALUE)
   const [fields, setFields] = useState<Record<string, string>>({})
 
-  // Only the billing address needs it, and it is already loaded by the
-  // profile page and the sidebar switcher — this reads the same cache entry.
-  // The returns address does not: it lives on a stock location, which its own
-  // card fetches.
-  const { data: profile } = useQuery({
-    queryKey: ['seller', sellerId, 'profile'],
-    queryFn: () => sellerClient().profile.get(),
-    enabled: requirement.kind === 'billing_address',
-  })
+  // Only the billing address edits it. The returns address does not: it
+  // lives on a stock location, which its own card fetches.
+  const { data: profile } = useProfile({ enabled: requirement.kind === 'billing_address' })
 
   const invalidate = () =>
     queryClient.invalidateQueries({ queryKey: ['seller', sellerId, 'onboarding'] })
@@ -301,11 +296,17 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
     return (
       <>
         {rejection}
-        <p className="text-muted-foreground text-sm">{t('onboarding.awaiting_review')}</p>
+        <p className="text-muted-foreground text-base">{t('onboarding.awaiting_review')}</p>
       </>
     )
   }
 
+  // The contact email is edited on General, everything else on Profile; the
+  // server says when the email is the only thing a profile still lacks.
+  const route =
+    requirement.blocker?.state === 'contact_email_missing'
+      ? '/$sellerId/settings/general'
+      : panelRoute(requirement.kind)
   return (
     <>
       {rejection}
@@ -407,7 +408,13 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
         </div>
       )}
 
-      {/* Addresses are filled in here rather than on the profile page: a
+      {/* Why the line is not done yet, when the server can say: what a
+          profile still lacks, or where a payout provider has got to. */}
+      {requirement.blocker?.message && (
+        <p className="text-muted-foreground text-base">{requirement.blocker.message}</p>
+      )}
+
+      {/* Addresses are filled in here rather than on the settings page: a
           seller working through setup should not be sent away and lose their
           place. Same card either way, so the two cannot diverge. */}
       {requirement.kind === 'billing_address' && profile && (
@@ -429,12 +436,8 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
           repeatedly wondering why nothing changed. */}
       {requirement.kind === 'payout_account' && (
         <div className="flex flex-col items-start gap-2">
-          {requirement.blocker?.message && (
-            <p className="text-muted-foreground text-sm">{requirement.blocker.message}</p>
-          )}
-
           {requirement.blocker?.state === 'pending' ? (
-            <p className="text-muted-foreground text-sm">
+            <p className="text-muted-foreground text-base">
               {t('onboarding.awaiting_payout_provider')}
             </p>
           ) : (
@@ -456,10 +459,10 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
           about (a provider's hosted flow), and it has no idea how this panel
           routes. Anything unmapped falls through to `action_url` below, so a
           kind added by a gem still gets a way in without this file changing. */}
-      {panelRoute(requirement.kind) && (
+      {route && (
         <div className="flex justify-start">
           <Button asChild>
-            <Link to={panelRoute(requirement.kind)!} params={{ sellerId }}>
+            <Link to={route} params={{ sellerId }}>
               {t('onboarding.go')}
               <ChevronRightIcon className="size-4" />
             </Link>
@@ -497,7 +500,7 @@ function RequirementAction({ requirement }: { requirement: RequirementStatus })
 function panelRoute(kind: string): string | undefined {
   switch (kind) {
     case 'complete_profile':
-      return '/$sellerId/profile'
+      return '/$sellerId/settings/profile'
     case 'policy':
       return '/$sellerId/settings/policies'
     case 'delivery_method':

package/src/pages/order.tsx

@@ -78,7 +78,8 @@ export function OrderPage() {
                 )}
               </>
             }
-            resource={{ id: order.id, number: order.number }}
+            resource={order}
+            endpoint={`/api/v3/seller/orders/${order.id}`}
             destructiveItems={
               cancelable ? (
                 <DropdownMenuItem variant="destructive" onClick={() => setCanceling(true)}>

package/src/pages/orders.tsx

@@ -1,14 +1,12 @@
-import { ExportButton, PageHeader, type ResourceSearch, ResourceTable } from '@spree/dashboard-core'
+import { ExportButton, type ResourceSearch, ResourceTable } from '@spree/dashboard-core'
 import { useRowClickBridge } from '@spree/dashboard-ui'
 import type { Order } from '@spree/seller-sdk'
 import { useNavigate, useParams } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { sellerClient } from '../api-client'
 import '../tables/orders'
 
 /** What this seller has sold, newest first. */
 export function OrdersPage({ search }: { search: ResourceSearch }) {
-  const { t } = useTranslation()
   const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
   const navigate = useNavigate()
 
@@ -17,17 +15,12 @@ export function OrdersPage({ search }: { search: ResourceSearch }) {
   )
 
   return (
-    <div className="flex flex-col gap-4">
-      <PageHeader title={t('orders.title')} sticky={false} />
-
-      <ResourceTable<Order>
-        hideHeader
-        tableKey="seller-orders"
-        queryKey="seller-orders"
-        queryFn={(params) => sellerClient().orders.list(params)}
-        searchParams={search}
-        actions={(ctx) => <ExportButton type="orders" {...ctx} />}
-      />
-    </div>
+    <ResourceTable<Order>
+      tableKey="seller-orders"
+      queryKey="seller-orders"
+      queryFn={(params) => sellerClient().orders.list(params)}
+      searchParams={search}
+      actions={(ctx) => <ExportButton type="orders" {...ctx} />}
+    />
   )
 }

package/src/pages/payout.tsx

@@ -3,6 +3,7 @@ import {
   formatStoreDateTime,
   Money,
   PageHeader,
+  ReadRow,
   Slot,
   useMoneyLocale,
 } from '@spree/dashboard-core'
@@ -26,7 +27,6 @@ import { Link, useParams } from '@tanstack/react-router'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CenteredMessage } from '../components/centered-message'
-import { ReadRow } from '../components/read-row'
 import { RetryableError } from '../components/retryable-error'
 import { usePayout, useTransfers } from '../hooks/use-ledger'
 import { useStoreTimezone } from '../hooks/use-store-timezone'
@@ -71,7 +71,8 @@ export function PayoutPage() {
               label={t(`earnings.statuses.${payout.status}`, { defaultValue: payout.status })}
             />
           }
-          resource={{ id: payout.id }}
+          resource={payout}
+          endpoint={`/api/v3/seller/payouts/${payout.id}`}
         />
       }
       main={
@@ -93,9 +94,11 @@ export function PayoutPage() {
               <Skeleton className="h-16 w-full" />
             </div>
           ) : transfersFailed ? (
-            <p className="px-6 pb-6 text-sm text-destructive">{t('payouts.detail.covers_error')}</p>
+            <p className="px-6 pb-6 text-base text-destructive">
+              {t('payouts.detail.covers_error')}
+            </p>
           ) : rows.length === 0 ? (
-            <p className="px-6 pb-6 text-sm text-muted-foreground">
+            <p className="px-6 pb-6 text-base text-muted-foreground">
               {t('payouts.detail.covers_empty')}
             </p>
           ) : (

package/src/pages/payouts.tsx

@@ -1,9 +1,16 @@
-import { PageHeader, type ResourceSearch, ResourceTable } from '@spree/dashboard-core'
+import {
+  formatAmount,
+  PageHeader,
+  type ResourceSearch,
+  ResourceTable,
+  useMoneyLocale,
+} from '@spree/dashboard-core'
 import { useRowClickBridge } from '@spree/dashboard-ui'
 import type { Payout } from '@spree/seller-sdk'
 import { useNavigate, useParams } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { sellerClient } from '../api-client'
+import { useProfile } from '../hooks/use-profile'
 import '../tables/payouts'
 
 /** What the marketplace has sent this seller, and what is on its way. */
@@ -11,6 +18,8 @@ export function PayoutsPage({ search }: { search: ResourceSearch }) {
   const { t } = useTranslation()
   const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
   const navigate = useNavigate()
+  const { data: profile } = useProfile()
+  const moneyLocale = useMoneyLocale()
 
   useRowClickBridge('data-payout-id', (payoutId: string) =>
     navigate({ to: '/$sellerId/payouts/$payoutId', params: { sellerId, payoutId } }),
@@ -18,7 +27,19 @@ export function PayoutsPage({ search }: { search: ResourceSearch }) {
 
   return (
     <div className="flex flex-col gap-4">
-      <PageHeader title={t('payouts.title')} subtitle={t('payouts.subtitle')} />
+      <PageHeader
+        title={t('payouts.title')}
+        subtitle={t('payouts.subtitle')}
+        // The marketplace's terms, read-only: the seller API refuses to write them.
+        description={
+          profile &&
+          [
+            `${t('profile.payout_schedule')}: ${profile.payouts_schedule_interval ? t(`payouts.schedule_intervals.${profile.payouts_schedule_interval}`) : '—'}`,
+            `${t('profile.minimum_payout')}: ${formatAmount(profile.minimum_payout_amount, profile.default_currency, moneyLocale)}`,
+            t('profile.operator_managed'),
+          ].join(' · ')
+        }
+      />
 
       <ResourceTable<Payout>
         hideHeader

package/src/pages/policies.tsx

@@ -124,7 +124,17 @@ export function PoliciesPage({ search }: { search: ResourceSearch }) {
 
   return (
     <div className="flex flex-col gap-6">
-      <PageHeader title={t('policies.title')} subtitle={t('policies.description')} sticky={false} />
+      <PageHeader
+        title={t('policies.title')}
+        description={t('policies.description')}
+        sticky={false}
+        actions={
+          <Button size="sm" onClick={() => setCreatingName('')}>
+            <PlusIcon className="size-4" />
+            {t('policies.add')}
+          </Button>
+        }
+      />
 
       {outstanding.length > 0 && (
         <Card>
@@ -132,7 +142,7 @@ export function PoliciesPage({ search }: { search: ResourceSearch }) {
             <CardTitle>{t('policies.required.title')}</CardTitle>
           </CardHeader>
           <CardContent className="flex flex-col gap-3">
-            <p className="text-muted-foreground text-sm">{t('policies.required.description')}</p>
+            <p className="text-muted-foreground text-base">{t('policies.required.description')}</p>
             <ItemGroup className="gap-2">
               {outstanding.map((name) => (
                 <Item
@@ -176,12 +186,6 @@ export function PoliciesPage({ search }: { search: ResourceSearch }) {
             ]}
           />
         )}
-        actions={
-          <Button size="sm" onClick={() => setCreatingName('')}>
-            <PlusIcon className="size-4" />
-            {t('policies.add')}
-          </Button>
-        }
       />
 
       {creatingName !== null && (

package/src/pages/product.tsx

@@ -18,6 +18,7 @@ import {
   productToFormValues,
   Slot,
   useAssignableVariants,
+  useCommitRemovedProductMedia,
   VariantsCard,
   variantToWirePayload,
   withExtensionRowValues,
@@ -68,6 +69,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
   const productId = mode === 'edit' ? params.productId : undefined
   const navigate = useNavigate()
   const queryClient = useQueryClient()
+  const commitRemovedMedia = useCommitRemovedProductMedia(productId ?? '')
 
   const productKey = ['seller', sellerId, 'product', productId]
   const {
@@ -141,8 +143,9 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
         // means "leave it".
         product_type_id: values.product_type_id ?? null,
         delivery_profile_id: values.delivery_profile_id ?? undefined,
-        // Both lists are the whole intent: anything the seller removed is
-        // absent here, which is what tells the API to drop it.
+        // Variants are the whole intent: one the seller removed is absent
+        // here, which tells the API to drop it. Media is not — a file left out
+        // stays, and removed files go through the media DELETE after the save.
         // The video address and the focal point ride along because the
         // 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.
@@ -195,6 +198,15 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
         values: withExtensionRowValues('seller.product', values, form.getValues()),
         extensionValues: extensionSubmitValues('seller.product', form),
       })
+      // Files the seller removed go only once the product itself saved.
+      if (productId && values.removed_media_ids?.length) {
+        const failed = await commitRemovedMedia(values.removed_media_ids)
+        if (failed > 0) toastManager.add({ type: 'error', title: t('common.error') })
+        // Committed: the next save must not try them again.
+        form.setValue('removed_media_ids', [], { shouldDirty: false })
+        // The product refetched on save may still list them; read it again.
+        await queryClient.invalidateQueries({ queryKey: productKey })
+      }
     } catch (err) {
       if (!mapSpreeErrorsToForm(err, form.setError)) {
         toastManager.add({
@@ -224,7 +236,7 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
         })}
       >
         {form.formState.errors.root?.message && (
-          <p className="text-destructive text-sm" role="alert">
+          <p className="text-destructive text-base" role="alert">
             {form.formState.errors.root.message}
           </p>
         )}
@@ -233,6 +245,8 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
             <PageHeader
               title={product?.name ?? t('products.new_title')}
               backTo="products"
+              resource={product}
+              endpoint={product ? `/api/v3/seller/products/${product.id}` : undefined}
               badges={
                 product?.status ? (
                   <StatusBadge
@@ -247,13 +261,13 @@ export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
           main={
             <>
               <GeneralCard form={form} />
-              <VariantsCard form={form} formKey="seller.product" />
               <MediaCard
                 productId={productId}
                 variants={assignableVariants}
                 form={form}
                 formKey="seller.product"
               />
+              <VariantsCard form={form} formKey="seller.product" />
               <PricesCard
                 form={form}
                 productName={product?.name ?? ''}