@spree/seller-dashboard 1.0.0-beta.1

package/src/pages/product.tsx

@@ -0,0 +1,250 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  CategorizationCard,
+  GeneralCard,
+  InventoryCard,
+  MediaCard,
+  mapSpreeErrorsToForm,
+  newProductFormDefaults,
+  PageHeader,
+  type PanelProduct,
+  PricesCard,
+  type ProductFormValues,
+  productFormSchema,
+  productToFormValues,
+  VariantsCard,
+  variantToWirePayload,
+} from '@spree/dashboard-core'
+import { FormActions, ResourceLayout, StatusBadge, toastManager } from '@spree/dashboard-ui'
+import type { ProductParams } from '@spree/seller-sdk'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate, useParams } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+import { CenteredMessage } from '../components/centered-message'
+import { ProductStatusCard } from '../components/product-status-card'
+import { RetryableError } from '../components/retryable-error'
+
+/** Everything the form edits, in one request. */
+const PRODUCT_EXPAND = [
+  'variants',
+  'variants.prices',
+  'variants.stock_levels',
+  'variants.stock_levels.stock_location',
+  'default_variant',
+  'default_variant.prices',
+  'default_variant.stock_levels',
+  'default_variant.stock_levels.stock_location',
+  'media',
+  'submission',
+].join(',')
+
+/**
+ * One product, created or edited.
+ *
+ * The same cards the operator's dashboard renders, in the same order, from
+ * `@spree/dashboard-core` — the two forms are one form, and the differences
+ * are only what a seller may not do. Publishing to channels and tax category
+ * are absent because they are marketplace configuration, the Categorization
+ * card offers only the product type and delivery profile (filing a listing
+ * under categories, collections and tags is the operator's at review), and
+ * status is not a field here at all: a seller submits for review and the
+ * marketplace decides (docs/plans/6.0-seller-product-submission.md).
+ */
+export function ProductPage({ mode }: { mode: 'new' | 'edit' }) {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const params = useParams({ strict: false }) as { productId?: string }
+  const productId = mode === 'edit' ? params.productId : undefined
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+
+  const productKey = ['seller', sellerId, 'product', productId]
+  const {
+    data: product,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: productKey,
+    queryFn: () => sellerClient().products.get(productId as string, PRODUCT_EXPAND),
+    enabled: !!productId,
+  })
+
+  // The seller panel has no StoreProvider — its tenant is a seller and the
+  // store is derived server-side — so the currencies the price cards need
+  // come from the profile, which reports the store's.
+  const { data: profile } = useQuery({
+    queryKey: ['seller', sellerId, 'profile'],
+    queryFn: () => sellerClient().profile.get(),
+  })
+
+  const form = useForm<ProductFormValues>({
+    // Cast for the same reason the operator's form does: `z.coerce.number()`
+    // infers `unknown` input, which the resolver's generic will not accept.
+    resolver: zodResolver(productFormSchema) as any,
+    // The operator's defaults, which seed one placeholder variant — without
+    // it the Prices and Inventory cards render no row, so a seller could not
+    // price or stock a new listing at all.
+    defaultValues: newProductFormDefaults(),
+  })
+
+  // Reset once the record arrives, so the inputs show what was last saved
+  // rather than the blank defaults the form mounted with.
+  //
+  // Never over unsaved work: submitting for review invalidates this query,
+  // and an unguarded reset would throw away whatever the seller had typed
+  // but not saved. After a save RHF has already cleared isDirty, so the
+  // round-trip still re-hydrates.
+  useEffect(() => {
+    if (!product) return
+    if (form.formState.isDirty) return
+
+    form.reset(productToFormValues(product as PanelProduct, product.media))
+  }, [product, form])
+
+  const save = useMutation({
+    mutationFn: (values: ProductFormValues) => {
+      const payload: ProductParams = {
+        name: values.name,
+        description: values.description,
+        slug: values.slug || undefined,
+        meta_title: values.meta_title ?? undefined,
+        meta_description: values.meta_description ?? undefined,
+        // Null is a real value here — it detaches the type. The profile has
+        // no such state: a product always ships under one, so an empty pick
+        // 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.
+        // 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.
+        media: (values.media ?? []).map((item) => ({
+          id: item.id,
+          signed_id: item.signed_id ?? undefined,
+          poster_signed_id: item.poster_signed_id ?? undefined,
+          alt: item.alt ?? undefined,
+          position: item.position,
+          media_type: item.media_type,
+          external_video_url: item.external_video_url ?? undefined,
+          focal_point_x: item.focal_point_x ?? undefined,
+          focal_point_y: item.focal_point_y ?? undefined,
+          variant_ids: item.variant_ids,
+        })),
+        variants: (values.variants ?? []).map((variant, index) =>
+          variantToWirePayload(variant, index),
+        ) as ProductParams['variants'],
+      }
+
+      return productId
+        ? sellerClient().products.update(productId, payload)
+        : sellerClient().products.create(payload)
+    },
+    onSuccess: (saved) => {
+      void queryClient.invalidateQueries({ queryKey: ['seller-products'] })
+      // Invalidated, never seeded: the write's response carries no expands, so
+      // planting it would blank the variants and media the form is showing —
+      // the reset effect would read a product whose collections are undefined.
+      void queryClient.invalidateQueries({ queryKey: ['seller', sellerId, 'product', saved.id] })
+      toastManager.add({ type: 'success', title: t('products.saved') })
+      if (!productId) {
+        // Replace history rather than pushing — otherwise back lands on the
+        // (now-stale) new product form.
+        navigate({
+          to: '/$sellerId/products/$productId',
+          params: { sellerId, productId: saved.id },
+          replace: true,
+        })
+      }
+    },
+  })
+
+  async function onSubmit(values: ProductFormValues) {
+    try {
+      await save.mutateAsync(values)
+    } catch (err) {
+      if (!mapSpreeErrorsToForm(err, form.setError)) {
+        toastManager.add({
+          type: 'error',
+          title: err instanceof Error ? err.message : t('common.error'),
+        })
+      }
+    }
+  }
+
+  if (mode === 'edit' && isLoading) return <CenteredMessage>{t('common.loading')}</CenteredMessage>
+  if (mode === 'edit' && isError) return <RetryableError onRetry={() => refetch()} />
+  if (mode === 'edit' && !product)
+    return <CenteredMessage>{t('products.not_found')}</CenteredMessage>
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit, (errors) => {
+          // A schema rejection otherwise does nothing visible: the fields at
+          // fault may be in a card the seller cannot see.
+          toastManager.add({
+            type: 'error',
+            title: t('common.error'),
+            description: Object.keys(errors).join(', '),
+          })
+        })}
+      >
+        {form.formState.errors.root?.message && (
+          <p className="text-destructive text-sm" role="alert">
+            {form.formState.errors.root.message}
+          </p>
+        )}
+        <ResourceLayout
+          header={
+            <PageHeader
+              title={product?.name ?? t('products.new_title')}
+              backTo="products"
+              badges={
+                product?.status ? (
+                  <StatusBadge
+                    status={product.status}
+                    label={t(`products.statuses.${product.status}`)}
+                  />
+                ) : undefined
+              }
+              actions={<FormActions form={form} saveLabel={t('common.save')} />}
+            />
+          }
+          main={
+            <>
+              <GeneralCard form={form} />
+              <VariantsCard form={form} />
+              <MediaCard productId={productId} variants={product?.variants ?? []} form={form} />
+              <PricesCard
+                form={form}
+                productName={product?.name ?? ''}
+                currencies={profile?.supported_currencies}
+                defaultCurrency={profile?.default_currency}
+              />
+              <InventoryCard form={form} />
+            </>
+          }
+          sidebar={
+            <>
+              {productId && product && (
+                <ProductStatusCard
+                  product={product}
+                  onDone={() => {
+                    void queryClient.invalidateQueries({ queryKey: productKey })
+                    void queryClient.invalidateQueries({ queryKey: ['seller-products'] })
+                  }}
+                />
+              )}
+              <CategorizationCard form={form} />
+            </>
+          }
+        />
+      </form>
+    </FormProvider>
+  )
+}

package/src/pages/products.tsx

@@ -0,0 +1,228 @@
+import type {
+  BulkAction,
+  BulkActionFormProps,
+  BulkActionOutcome,
+  ResourceSearch,
+} from '@spree/dashboard-core'
+import {
+  ExportButton,
+  ImportButton,
+  ImportWizardDialog,
+  PageHeader,
+  ResourceTable,
+  Subject,
+} from '@spree/dashboard-core'
+import {
+  BulkDialog,
+  Button,
+  Field,
+  FieldLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  toastManager,
+  useRowClickBridge,
+} from '@spree/dashboard-ui'
+import { ArchiveIcon, PlusIcon, SendIcon, Trash2Icon } from '@spree/dashboard-ui/icons'
+import type { BulkProductResult, Product } from '@spree/seller-sdk'
+import { useNavigate, useParams } from '@tanstack/react-router'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { sellerClient } from '../api-client'
+import '../tables/products'
+
+/**
+ * The statuses a seller may move a selection to.
+ *
+ * `active` is absent by design: a listing goes on sale when the marketplace
+ * approves it, so the only moves offered here are the two a seller makes
+ * alone (docs/plans/6.0-seller-product-submission.md).
+ */
+const BULK_STATUSES = ['draft', 'archived'] as const
+
+type BulkStatus = (typeof BULK_STATUSES)[number]
+type StatusFormValues = { status: BulkStatus }
+
+/** This seller's own catalog. */
+export function ProductsPage({ search }: { search: ResourceSearch & { import?: string } }) {
+  const { t } = useTranslation()
+  const { sellerId } = useParams({ from: '/_authenticated/$sellerId' })
+  const navigate = useNavigate()
+
+  const open = (productId: string) =>
+    navigate({ to: '/$sellerId/products/$productId', params: { sellerId, productId } })
+
+  useRowClickBridge('data-product-id', open)
+
+  const bulkActions = useMemo<BulkAction<unknown>[]>(() => {
+    // These endpoints move what they can and leave the rest, so the selection
+    // size is not the outcome. The success toast is told what the server
+    // actually did, and anything it left alone gets a second toast saying so —
+    // otherwise "15 submitted" sits next to "12 were left alone".
+    const report = (result: BulkProductResult, skippedMessage: string): BulkActionOutcome => {
+      if (result.skipped_count) {
+        toastManager.add({
+          type: 'info',
+          title: t('products.bulk.skipped', {
+            count: result.skipped_count,
+            message: skippedMessage,
+          }),
+        })
+      }
+
+      return { count: result.product_count }
+    }
+
+    const submitAction: BulkAction<unknown> = {
+      key: 'submit-for-review',
+      label: t('products.submit_for_review'),
+      icon: <SendIcon className="size-4" />,
+      subject: Subject.Product,
+      confirm: {
+        title: t('products.bulk.submit_confirm_title'),
+        message: t('products.bulk.submit_confirm_description'),
+        confirmLabel: t('products.submit_for_review'),
+      },
+      run: async ({ ids }) =>
+        report(
+          await sellerClient().products.bulkSubmit({ ids }),
+          t('products.bulk.skipped_submit'),
+        ),
+      successMessage: t('products.bulk.submitted'),
+      errorMessage: t('products.bulk.submit_failed'),
+    }
+
+    const statusAction: BulkAction<StatusFormValues> = {
+      key: 'set-status',
+      label: t('products.bulk.set_status_action'),
+      icon: <ArchiveIcon className="size-4" />,
+      subject: Subject.Product,
+      form: (props) => <StatusPickerDialog {...props} />,
+      run: async ({ ids, formValues }) =>
+        report(
+          await sellerClient().products.bulkStatusUpdate({ ids, status: formValues!.status }),
+          t('products.bulk.skipped_refused'),
+        ),
+      successMessage: t('products.bulk.status_updated'),
+      errorMessage: t('products.bulk.status_update_failed'),
+    }
+
+    const deleteAction: BulkAction<unknown> = {
+      key: 'delete',
+      label: t('common.delete'),
+      icon: <Trash2Icon className="size-4" />,
+      subject: Subject.Product,
+      action: 'destroy',
+      confirm: {
+        title: t('products.bulk.delete_confirm_title'),
+        message: t('products.bulk.delete_confirm_description'),
+        confirmLabel: t('common.delete'),
+        variant: 'destructive',
+      },
+      run: async ({ ids }) =>
+        report(
+          await sellerClient().products.bulkDestroy({ ids }),
+          t('products.bulk.skipped_refused'),
+        ),
+      successMessage: t('products.bulk.deleted'),
+      errorMessage: t('products.bulk.delete_failed'),
+    }
+
+    return [submitAction, statusAction, deleteAction] as BulkAction<unknown>[]
+  }, [t])
+
+  // The wizard is driven by an `?import=` param rather than component state,
+  // so a refresh (or the link in the import-done email) reopens it.
+  const openImportWizard = (id: string) =>
+    navigate({ search: (prev: Record<string, unknown>) => ({ ...prev, import: id }) as never })
+
+  const closeImportWizard = () =>
+    navigate({
+      search: (prev: Record<string, unknown>) => {
+        const { import: _i, ...rest } = prev
+        return rest as never
+      },
+    })
+
+  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)}
+        searchParams={search}
+        bulkActions={bulkActions}
+        actions={(ctx) => (
+          <>
+            <ImportButton
+              type="products"
+              subject={Subject.Product}
+              onCreated={(imp) => openImportWizard(imp.id)}
+              resultsPath={`/${sellerId}/products`}
+            />
+            <ExportButton type="products" {...ctx} />
+            <Button
+              onClick={() => navigate({ to: '/$sellerId/products/new', params: { sellerId } })}
+            >
+              <PlusIcon className="size-4" />
+              {t('products.add')}
+            </Button>
+          </>
+        )}
+      />
+
+      <ImportWizardDialog
+        importId={search.import ?? null}
+        onClose={closeImportWizard}
+        // Imported products land as drafts awaiting review, so "view records"
+        // returns to this very list — where the seller submits them.
+        onViewRecords={() => navigate({ to: '/$sellerId/products', params: { sellerId } })}
+      />
+    </div>
+  )
+}
+
+function StatusPickerDialog({ onSubmit, onCancel }: BulkActionFormProps<StatusFormValues>) {
+  const { t } = useTranslation()
+  const [status, setStatus] = useState<BulkStatus>('draft')
+
+  const statusItems = BULK_STATUSES.map((value) => ({
+    value,
+    label: t(`products.statuses.${value}`),
+  }))
+
+  return (
+    <BulkDialog
+      title={t('products.bulk.status_dialog_title')}
+      description={t('products.bulk.status_dialog_description')}
+      submitLabel={t('common.apply')}
+      onCancel={onCancel}
+      onSubmit={() => onSubmit({ status })}
+    >
+      <Field>
+        <FieldLabel>{t('products.fields.status')}</FieldLabel>
+        <Select
+          items={statusItems}
+          value={status}
+          onValueChange={(value) => setStatus(value as BulkStatus)}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {statusItems.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </Field>
+    </BulkDialog>
+  )
+}