@spree/seller-dashboard 6.0.2 → 6.0.4

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

@@ -1,152 +0,0 @@
-import {
-  Button,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Field,
-  FieldLabel,
-  Input,
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  toastManager,
-} from '@spree/dashboard-ui'
-import { PencilIcon } from '@spree/dashboard-ui/icons'
-import type { Profile } from '@spree/seller-sdk'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useParams } from '@tanstack/react-router'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { sellerClient } from '../api-client'
-
-function errorMessage(error: unknown, fallback: string) {
-  return error instanceof Error && error.message ? error.message : fallback
-}
-
-/**
- * The business behind the seller, as the marketplace's commission invoice must
- * address it: the legal name and registration number.
- *
- * The tax registrations sit in their own card beside this one, on the same
- * panel a company's are managed from — a business trading in several regimes
- * holds a registration in each, so they are a collection rather than a field.
- *
- * Separate from the billing address, which is only where post goes.
- */
-export function SellerBusinessCard({ profile }: { profile: Profile }) {
-  const { t } = useTranslation()
-  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
-  const queryClient = useQueryClient()
-  const [editing, setEditing] = useState(false)
-
-  const [legalName, setLegalName] = useState(profile.legal_name ?? '')
-  const [registrationNumber, setRegistrationNumber] = useState(profile.registration_number ?? '')
-  // Shown in the sheet rather than as a toast: the toast stack deliberately
-  // sits below the sheet overlay, so a rejection raised here would be hidden
-  // behind the very form that caused it.
-  const [formError, setFormError] = useState<string | null>(null)
-
-  // Opening the sheet is the seller starting over, so it shows what is on file
-  // rather than whatever they last typed — the card never remounts, so an
-  // abandoned edit would otherwise outlive the sheet that made it.
-  function setSheetOpen(open: boolean) {
-    if (open) {
-      setLegalName(profile.legal_name ?? '')
-      setRegistrationNumber(profile.registration_number ?? '')
-      setFormError(null)
-    }
-    setEditing(open)
-  }
-
-  const save = useMutation({
-    mutationFn: () => {
-      setFormError(null)
-      return sellerClient().profile.update({
-        legal_name: legalName || null,
-        registration_number: registrationNumber || null,
-      })
-    },
-    onSuccess: (updated) => {
-      queryClient.setQueryData(['seller', sellerId, 'profile'], updated)
-      // A checklist kind may read these, so it has to re-evaluate.
-      void queryClient.invalidateQueries({ queryKey: ['seller', sellerId, 'onboarding'] })
-      setEditing(false)
-      toastManager.add({ type: 'success', title: t('profile.saved') })
-    },
-    onError: (err) => setFormError(errorMessage(err, t('common.error'))),
-  })
-
-  const rows = [
-    { label: t('profile.legal_name'), value: profile.legal_name },
-    { label: t('profile.registration_number'), value: profile.registration_number },
-  ]
-
-  return (
-    <>
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('profile.business_details')}</CardTitle>
-          <CardAction>
-            <Button variant="outline" size="sm" onClick={() => setSheetOpen(true)}>
-              <PencilIcon className="size-4" />
-              {t('profile.edit')}
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-2 text-sm">
-          {rows.map((row) => (
-            <div key={row.label} className="flex justify-between gap-4">
-              <span className="text-muted-foreground">{row.label}</span>
-              <span className="text-right">{row.value || '—'}</span>
-            </div>
-          ))}
-        </CardContent>
-      </Card>
-
-      <Sheet open={editing} onOpenChange={setSheetOpen}>
-        <SheetContent>
-          <SheetHeader>
-            <SheetTitle>{t('profile.business_details')}</SheetTitle>
-          </SheetHeader>
-          <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
-            {formError && (
-              <p role="alert" className="text-destructive text-sm">
-                {formError}
-              </p>
-            )}
-            <Field>
-              <FieldLabel htmlFor="legal-name">{t('profile.legal_name')}</FieldLabel>
-              <Input
-                id="legal-name"
-                value={legalName}
-                onChange={(event) => setLegalName(event.target.value)}
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="registration-number">
-                {t('profile.registration_number')}
-              </FieldLabel>
-              <Input
-                id="registration-number"
-                value={registrationNumber}
-                onChange={(event) => setRegistrationNumber(event.target.value)}
-              />
-            </Field>
-          </div>
-          <SheetFooter>
-            <Button variant="outline" size="sm" onClick={() => setSheetOpen(false)}>
-              {t('common.cancel')}
-            </Button>
-            <Button size="sm" disabled={save.isPending} onClick={() => save.mutate()}>
-              {t('common.save')}
-            </Button>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-    </>
-  )
-}

package/src/pages/profile.tsx

@@ -1,395 +0,0 @@
-import { PageHeader, Slot } from '@spree/dashboard-core'
-import {
-  Button,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Field,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  Input,
-  RelativeTime,
-  ResourceLayout,
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  StatusBadge,
-  Textarea,
-  toastManager,
-} from '@spree/dashboard-ui'
-import { PackageIcon, PencilIcon, StoreIcon, UsersIcon } from '@spree/dashboard-ui/icons'
-import type { Profile } from '@spree/seller-sdk'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { useParams } from '@tanstack/react-router'
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { sellerClient } from '../api-client'
-import { CenteredMessage } from '../components/centered-message'
-import { ReadRow } from '../components/read-row'
-import { SellerAddressCard } from '../components/seller-address-card'
-import { SellerBusinessCard } from '../components/seller-business-card'
-import { SellerReturnsLocationCard } from '../components/seller-returns-location-card'
-import { SellerTaxIdentifiersCard } from '../components/seller-tax-identifiers-card'
-
-interface ProfileValues {
-  name: string
-  contact_email: string
-  billing_email: string
-  about: string
-}
-
-/**
- * The seller's own record, laid out as the operator sees it on their seller
- * page — brand hero, standing, contact — so the two views of one seller
- * describe the same thing in the same shape.
- *
- * What the operator's page has that this deliberately does not: the lifecycle
- * actions (approve, suspend, reject, delete), the settlement *editor*, and the
- * invite sheet. Those are the marketplace's decisions about this seller, not
- * the seller's own. Settlement terms are still shown, read-only: a seller who
- * cannot see how they are paid cannot query it.
- */
-export function ProfilePage() {
-  const { t } = useTranslation()
-  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
-  const [editing, setEditing] = useState(false)
-
-  const {
-    data: profile,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ['seller', sellerId, 'profile'],
-    queryFn: () => sellerClient().profile.get(),
-  })
-
-  // Only for the team count in "at a glance" — the profile payload does not
-  // carry one, and a second small read beats widening the serializer for a
-  // number the team page already fetches.
-  const { data: team } = useQuery({
-    queryKey: ['seller', sellerId, 'team'],
-    queryFn: () => sellerClient().team.list(),
-  })
-
-  if (isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
-  if (error || !profile) return <CenteredMessage>{t('common.error')}</CenteredMessage>
-
-  return (
-    <>
-      <ResourceLayout
-        header={<PageHeader title={profile.name} subtitle={t('profile.subtitle')} />}
-        main={
-          <>
-            <BrandCard profile={profile} onEdit={() => setEditing(true)} />
-            <Slot name="seller.profile.form_main" context={{ profile }} />
-          </>
-        }
-        sidebar={
-          <>
-            <StandingCard profile={profile} />
-            <AtAGlanceCard profile={profile} teamCount={team?.data?.length} />
-            <ContactCard profile={profile} onEdit={() => setEditing(true)} />
-            <SellerBusinessCard profile={profile} />
-            <SellerTaxIdentifiersCard />
-            <SellerAddressCard profile={profile} />
-            <SellerReturnsLocationCard />
-            <SettlementCard profile={profile} />
-            <Slot name="seller.profile.form_sidebar" context={{ profile }} />
-          </>
-        }
-      />
-
-      <EditProfileSheet profile={profile} open={editing} onOpenChange={setEditing} />
-    </>
-  )
-}
-
-/**
- * The storefront face of the seller: cover, logo, handle and description.
- *
- * Copied from the operator's card, including why the empty states look as
- * they do — a seller with no cover gets a slim band rather than a tall empty
- * block, and the logo tile straddles it with its own z-index so the band's
- * edge does not cut across it.
- */
-function BrandCard({ profile, onEdit }: { profile: Profile; onEdit: () => void }) {
-  const { t } = useTranslation()
-
-  return (
-    <Card className="overflow-hidden">
-      <div className="relative">
-        {profile.cover_photo_url ? (
-          <img
-            src={profile.cover_photo_url}
-            alt=""
-            className="h-40 w-full bg-accent object-cover"
-          />
-        ) : (
-          <div className="h-20 w-full border-border border-b bg-muted" />
-        )}
-        <Button size="sm" variant="outline" className="absolute top-3 right-3" onClick={onEdit}>
-          <PencilIcon className="size-4" />
-          {t('profile.edit')}
-        </Button>
-      </div>
-
-      <CardContent className="flex flex-col gap-4 px-5 pb-5">
-        <div className="-mt-10 relative z-10 flex size-20 items-center justify-center overflow-hidden rounded-xl border border-border bg-card shadow-sm">
-          {/* The square logo is the one cropped for a tile like this; the main
-              logo is the fallback, since a seller may have set only one. */}
-          {profile.square_logo_url || profile.logo_url ? (
-            <img
-              src={profile.square_logo_url ?? profile.logo_url ?? undefined}
-              alt=""
-              className="size-full object-cover"
-            />
-          ) : (
-            <StoreIcon className="size-7 text-muted-foreground" />
-          )}
-        </div>
-
-        {/* The name is already the page title; the handle is what it lacks. */}
-        <p className="text-muted-foreground text-sm">/{profile.slug}</p>
-
-        {profile.about_html ? (
-          // Server-sanitized on every write path (Spree::RichTextSanitizer),
-          // which is what makes rendering it here safe.
-          <div
-            className="prose prose-sm dark:prose-invert max-w-none"
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized server-side
-            dangerouslySetInnerHTML={{ __html: profile.about_html }}
-          />
-        ) : (
-          <p className="text-muted-foreground text-sm">{t('profile.no_about')}</p>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-/** Where the seller stands with the marketplace, and what that means. */
-function StandingCard({ profile }: { profile: Profile }) {
-  const { t } = useTranslation()
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('profile.section_standing')}</CardTitle>
-        <CardAction>
-          <StatusBadge status={profile.status} />
-        </CardAction>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-2">
-        <p className="text-muted-foreground text-sm">
-          {t(`profile.status_help.${profile.status}`, {
-            defaultValue: t('profile.status_help.pending'),
-          })}
-        </p>
-        {profile.on_holiday && (
-          <p className="text-muted-foreground text-sm">{t('profile.on_holiday_notice')}</p>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-function AtAGlanceCard({ profile, teamCount }: { profile: Profile; teamCount?: number }) {
-  const { t } = useTranslation()
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('profile.at_a_glance')}</CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-3">
-        <div className="flex items-center justify-between text-sm">
-          <span className="flex items-center gap-2 text-muted-foreground">
-            <PackageIcon className="size-4" />
-            {t('profile.products_count')}
-          </span>
-          <span>{profile.products_count}</span>
-        </div>
-        <div className="flex items-center justify-between text-sm">
-          <span className="flex items-center gap-2 text-muted-foreground">
-            <UsersIcon className="size-4" />
-            {t('profile.team_count')}
-          </span>
-          <span>{teamCount ?? '—'}</span>
-        </div>
-        <ReadRow label={t('profile.joined')}>
-          <RelativeTime iso={profile.created_at} />
-        </ReadRow>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ContactCard({ profile, onEdit }: { profile: Profile; onEdit: () => void }) {
-  const { t } = useTranslation()
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('profile.section_contact')}</CardTitle>
-        <CardAction>
-          <Button variant="outline" size="sm" onClick={onEdit}>
-            <PencilIcon className="size-4" />
-            {t('profile.edit')}
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-3">
-        <ReadRow label={t('profile.contact_email')}>
-          {profile.contact_email ? (
-            <a href={`mailto:${profile.contact_email}`}>{profile.contact_email}</a>
-          ) : null}
-        </ReadRow>
-        <ReadRow label={t('profile.billing_email')}>
-          {profile.billing_email ? (
-            <a href={`mailto:${profile.billing_email}`}>{profile.billing_email}</a>
-          ) : null}
-        </ReadRow>
-      </CardContent>
-    </Card>
-  )
-}
-
-/**
- * How and when this seller gets paid. Read-only on purpose: these are the
- * marketplace's terms, and the seller API refuses to write them — showing an
- * editor here would offer a control the server would reject.
- */
-function SettlementCard({ profile }: { profile: Profile }) {
-  const { t } = useTranslation()
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('profile.section_settlement')}</CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-3">
-        <p className="text-muted-foreground text-xs">{t('profile.operator_managed')}</p>
-        <ReadRow label={t('profile.tax_remittance')}>{profile.tax_remittance}</ReadRow>
-        <ReadRow label={t('profile.payout_schedule')}>{profile.payouts_schedule_interval}</ReadRow>
-        <ReadRow label={t('profile.minimum_payout')}>{profile.minimum_payout_amount}</ReadRow>
-      </CardContent>
-    </Card>
-  )
-}
-
-function EditProfileSheet({
-  profile,
-  open,
-  onOpenChange,
-}: {
-  profile: Profile
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) {
-  const { t } = useTranslation()
-  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
-  const queryClient = useQueryClient()
-
-  const form = useForm<ProfileValues>({
-    defaultValues: { name: '', contact_email: '', billing_email: '', about: '' },
-  })
-
-  // The sheet stays mounted across opens, so re-seed from the latest record
-  // each time it opens rather than only on first mount.
-  useEffect(() => {
-    if (!open) return
-
-    form.reset({
-      name: profile.name,
-      contact_email: profile.contact_email ?? '',
-      billing_email: profile.billing_email ?? '',
-      about: profile.about_html ?? '',
-    })
-  }, [open, profile, form])
-
-  const save = useMutation({
-    mutationFn: (values: ProfileValues) =>
-      sellerClient().profile.update({
-        name: values.name,
-        contact_email: values.contact_email || null,
-        billing_email: values.billing_email || null,
-        about: values.about || null,
-      }),
-    onSuccess: (updated) => {
-      queryClient.setQueryData(['seller', sellerId, 'profile'], updated)
-      onOpenChange(false)
-      toastManager.add({ type: 'success', title: t('profile.saved') })
-    },
-    onError: (err) =>
-      toastManager.add({
-        type: 'error',
-        title: err instanceof Error ? err.message : t('common.error'),
-      }),
-  })
-
-  const { errors } = form.formState
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>{t('profile.edit_title')}</SheetTitle>
-        </SheetHeader>
-
-        {/* `stopPropagation` after handleSubmit: this form is portalled and
-            a parent form would otherwise see the bubbling submit. */}
-        <form
-          onSubmit={(event) => {
-            form.handleSubmit((values) => save.mutate(values))(event)
-            event.stopPropagation()
-          }}
-          className="flex min-h-0 flex-1 flex-col"
-        >
-          <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="name">{t('profile.name')}</FieldLabel>
-                <Input
-                  id="name"
-                  aria-invalid={!!errors.name || undefined}
-                  {...form.register('name', { required: true })}
-                />
-                <FieldError errors={[errors.name]} />
-              </Field>
-
-              <Field>
-                <FieldLabel htmlFor="about">{t('profile.about')}</FieldLabel>
-                <Textarea id="about" rows={6} {...form.register('about')} />
-              </Field>
-
-              <Field>
-                <FieldLabel htmlFor="contact_email">{t('profile.contact_email')}</FieldLabel>
-                <Input id="contact_email" type="email" {...form.register('contact_email')} />
-              </Field>
-
-              <Field>
-                <FieldLabel htmlFor="billing_email">{t('profile.billing_email')}</FieldLabel>
-                <Input id="billing_email" type="email" {...form.register('billing_email')} />
-              </Field>
-            </FieldGroup>
-          </div>
-
-          <SheetFooter>
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-              {t('common.cancel')}
-            </Button>
-            <Button type="submit" disabled={save.isPending}>
-              {save.isPending ? t('profile.saving') : t('profile.save')}
-            </Button>
-          </SheetFooter>
-        </form>
-      </SheetContent>
-    </Sheet>
-  )
-}