@spree/dashboard-core 1.0.0-rc.4 → 1.0.0-rc.6

package/src/products/product-form-cards.tsx

@@ -13,13 +13,14 @@ import {
   useSortable,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import type { CurrencyCode } from '@spree/admin-sdk'
+import type { CurrencyCode } from '@spree/core'
 import type { MediaType, ProductFormValues } from '@spree/dashboard-core'
 import {
   getApiClient,
   MediaPickerSheet,
   parseVideoUrl,
   ResourceMultiAutocomplete,
+  Slot,
   TagCombobox,
   useFileUpload,
   useOptionalStore,
@@ -86,7 +87,11 @@ import { InventorySection } from './inventory-section'
 import { MediaEditSheet } from './media-edit-sheet'
 import { ProductBulkPriceEditor } from './product-bulk-price-editor'
 import { variantHasTaxCategoryOverride } from './product-form-mapping'
-import type { VariantFormValues } from './product-schema'
+import {
+  ASSIGNABLE_PRODUCT_STATUSES,
+  type MediaFormValues,
+  type VariantFormValues,
+} from './product-schema'
 import type {
   PanelMedia as Media,
   PanelProduct as Product,
@@ -175,8 +180,12 @@ export function GeneralCard({
 // Variants (just a passthrough so the page composition reads top-down)
 // ---------------------------------------------------------------------------
 
-export function VariantsCard({ form, seedFromType }: FormCardProps & { seedFromType?: boolean }) {
-  return <VariantsSection form={form} seedFromType={seedFromType} />
+export function VariantsCard({
+  form,
+  seedFromType,
+  formKey = 'product',
+}: FormCardProps & { seedFromType?: boolean; formKey?: string }) {
+  return <VariantsSection form={form} seedFromType={seedFromType} formKey={formKey} />
 }
 
 // ---------------------------------------------------------------------------
@@ -260,6 +269,13 @@ export function PricesCard({
 // merchant sees where uploads will go but can't trigger them.
 // ---------------------------------------------------------------------------
 
+/**
+ * A media entry appended to the gallery without an upload: a `signed_id` from
+ * a finished upload, a library `source_media_id`, or an external video link.
+ * `previewUrl` is what the tile shows until the product is saved.
+ */
+export type NewMediaEntry = Omit<MediaFormValues, 'position' | 'uploadId'>
+
 interface PendingUpload {
   id: string
   file: File
@@ -289,8 +305,11 @@ export function MediaCard({
   productId,
   variants,
   form,
+  formKey = 'product',
 }: {
   productId?: string
+  /** The product form's key — names the media slots and the rows' extension fields. */
+  formKey?: string
   // The MediaEditSheet's "assign to variant" pill row needs the list of
   // server-persisted variants — only those have an id that can ride the
   // PATCH's media[].variant_ids. Form-state variants without a server id
@@ -413,20 +432,21 @@ export function MediaCard({
 
   // An external video has no file to upload — it goes straight into form state
   // with its link, and the provider's own still stands in as the preview.
-  const handleAddVideo = useCallback(
-    (url: string) => {
+  // Appends entries that need no upload of their own — a video link, a
+  // library pick, or whatever a `<formKey>.media.actions` widget hands over —
+  // positioned after the existing ones. They save with the product.
+  const appendMedia = useCallback(
+    (entries: NewMediaEntry[]) => {
       const current = form.getValues('media') ?? []
       form.setValue(
         'media',
         [
           ...current,
-          {
-            media_type: 'external_video' as const,
-            external_video_url: url,
-            position: current.length + 1,
-            previewUrl: parseVideoUrl(url)?.thumbnailUrl ?? undefined,
+          ...entries.map((entry, index) => ({
+            ...entry,
+            position: current.length + index + 1,
             uploadId: crypto.randomUUID(),
-          },
+          })),
         ],
         { shouldDirty: true },
       )
@@ -434,31 +454,34 @@ export function MediaCard({
     [form],
   )
 
+  const handleAddVideo = useCallback(
+    (url: string) =>
+      appendMedia([
+        {
+          media_type: 'external_video',
+          external_video_url: url,
+          previewUrl: parseVideoUrl(url)?.thumbnailUrl ?? undefined,
+        },
+      ]),
+    [appendMedia],
+  )
+
   // Files picked from the library become ordinary form entries carrying the
   // source's id. The product save places them, sharing the file rather than
   // uploading a second copy.
   const handleAddFromLibrary = useCallback(
-    (picked: Media[]) => {
-      const current = form.getValues('media') ?? []
-      form.setValue(
-        'media',
-        [
-          ...current,
-          ...picked.map((media, index) => ({
-            source_media_id: media.id,
-            alt: media.alt ?? undefined,
-            media_type: (media.media_type ?? 'image') as MediaType,
-            position: current.length + index + 1,
-            previewUrl: media.small_url ?? media.original_url ?? undefined,
-            videoUrl: media.video_url ?? null,
-            posterUrl: media.poster_url ?? null,
-            uploadId: crypto.randomUUID(),
-          })),
-        ],
-        { shouldDirty: true },
-      )
-    },
-    [form],
+    (picked: Media[]) =>
+      appendMedia(
+        picked.map((media) => ({
+          source_media_id: media.id,
+          alt: media.alt ?? undefined,
+          media_type: (media.media_type ?? 'image') as MediaType,
+          previewUrl: media.small_url ?? media.original_url ?? undefined,
+          videoUrl: media.video_url ?? null,
+          posterUrl: media.poster_url ?? null,
+        })),
+      ),
+    [appendMedia],
   )
 
   const handleDelete = useCallback(
@@ -620,6 +643,11 @@ export function MediaCard({
               <FilmIcon />
               {t('admin.products.media.add_video')}
             </Button>
+
+            <Slot
+              name={`${formKey}.media.actions`}
+              context={{ productId, addMedia: appendMedia }}
+            />
           </div>
         </CardContent>
       </Card>
@@ -649,6 +677,8 @@ export function MediaCard({
           onOpenChange={(open) => {
             if (!open) setEditingIndex(null)
           }}
+          formKey={formKey}
+          productId={productId}
         />
       )}
     </>
@@ -889,8 +919,6 @@ export function SEOCard({ form, product }: FormCardProps & { product?: Product }
 // Status
 // ---------------------------------------------------------------------------
 
-const ASSIGNABLE_STATUSES = ['draft', 'active', 'archived']
-
 export function StatusCard({
   form,
   reviewActions,
@@ -915,9 +943,11 @@ export function StatusCard({
   // made, so the operator can move the product on from here like any other —
   // overriding their own refusal is not a review action, and leaving the
   // picker disabled there was a dead end with no way out.
-  const inReview = Boolean(status) && !ASSIGNABLE_STATUSES.includes(status as string)
+  const inReview = Boolean(status) && !ASSIGNABLE_PRODUCT_STATUSES.includes(status as string)
   const awaitingDecision = status === 'proposed'
-  const values = inReview ? [status as string, ...ASSIGNABLE_STATUSES] : ASSIGNABLE_STATUSES
+  const values = inReview
+    ? [status as string, ...ASSIGNABLE_PRODUCT_STATUSES]
+    : ASSIGNABLE_PRODUCT_STATUSES
 
   return (
     <SharedStatusCard<ProductFormValues>

package/src/products/product-form-mapping.ts

@@ -1,3 +1,4 @@
+import { extensionFormValues, extensionRowValues } from '../lib/form-fields-registry'
 import { i18n } from '../lib/i18n'
 import { normalizeQuantityRule } from './normalize-quantity'
 import type { MediaType, ProductFormValues, VariantFormValues } from './product-schema'
@@ -11,8 +12,18 @@ import type { PanelMedia, PanelProduct, PanelVariant } from './product-types'
  * this mapping would be two ways to disagree.
  */
 
-export function variantToFormValues(variant: PanelVariant, position: number): VariantFormValues {
+/**
+ * `formKey` is the product form's key (`'product'`, or `'seller.product'` in
+ * the seller panel); the rows' extension fields are registered under
+ * `${formKey}.variant` and `${formKey}.media`.
+ */
+export function variantToFormValues(
+  variant: PanelVariant,
+  position: number,
+  formKey = 'product',
+): VariantFormValues {
   return {
+    ...extensionFormValues(`${formKey}.variant`, variant),
     id: variant.id,
     sku: variant.sku ?? null,
     barcode: variant.barcode ?? null,
@@ -76,8 +87,9 @@ export function variantToFormValues(variant: PanelVariant, position: number): Va
 // late paint) so a new media field can't reach one and miss the other.
 // Takes the generated SDK type rather than a hand-listed shape, so a field
 // added to the serializer can't quietly go missing here.
-export function mediaToFormValues(media: PanelMedia, index: number) {
+export function mediaToFormValues(media: PanelMedia, index: number, formKey = 'product') {
   return {
+    ...extensionFormValues(`${formKey}.media`, media),
     id: media.id,
     alt: media.alt ?? null,
     position: media.position ?? index + 1,
@@ -108,6 +120,7 @@ export function productToFormValues(
   // captures it atomically instead of via a follow-up setValue that races
   // with the merchant's unsaved edits.
   media?: PanelMedia[],
+  formKey = 'product',
 ): ProductFormValues {
   const hasVariants = (product.variant_count ?? 0) > 0
   const variantSource = hasVariants
@@ -140,14 +153,14 @@ export function productToFormValues(
     meta_title: product.meta_title ?? '',
     meta_description: product.meta_description ?? '',
     slug: product.slug ?? '',
-    variants: variantSource.map((v, i) => variantToFormValues(v, i)),
+    variants: variantSource.map((v, i) => variantToFormValues(v, i, formKey)),
     custom_fields:
       product.custom_fields?.map((cf) => ({
         id: cf.id,
         custom_field_definition_id: cf.custom_field_definition_id,
         value: cf.value,
       })) ?? [],
-    media: media?.map(mediaToFormValues) ?? [],
+    media: media?.map((m, i) => mediaToFormValues(m, i, formKey)) ?? [],
     product_publications: (product.product_publications ?? []).map((l) => ({
       id: l.id,
       channel_id: l.channel_id,
@@ -157,6 +170,31 @@ export function productToFormValues(
   }
 }
 
+/**
+ * The submitted values with each variant and media row's extension fields put
+ * back from live form state. The Zod parse behind a submit strips keys the
+ * schema doesn't know from every row; it keeps the rows' order, so row `i` of
+ * the parse is row `i` of the form. Call it first in a submit handler, before
+ * rows are filtered or reordered.
+ */
+export function withExtensionRowValues(
+  formKey: string,
+  values: ProductFormValues,
+  raw: Partial<ProductFormValues>,
+): ProductFormValues {
+  return {
+    ...values,
+    variants: values.variants?.map((variant, index) => ({
+      ...variant,
+      ...extensionRowValues(`${formKey}.variant`, raw.variants?.[index]),
+    })),
+    media: values.media?.map((media, index) => ({
+      ...media,
+      ...extensionRowValues(`${formKey}.media`, raw.media?.[index]),
+    })),
+  }
+}
+
 // Strip UI-only fields (stock_location_name) and undefined entries so the
 // PATCH body matches the Admin API VariantUpdateParams shape exactly. The
 // Spree::Product#variants= setter reconciles by id, creates new entries,
@@ -187,13 +225,14 @@ export function prepareVariantsTaxForProductSave(
   })
 }
 
-export function variantToWirePayload(v: VariantFormValues, index: number) {
+export function variantToWirePayload(v: VariantFormValues, index: number, formKey = 'product') {
   // DB columns `sku` and `weight` are NOT NULL with defaults ("", 0.0).
   // The other scalar fields (barcode, dimensions, weight_unit,
   // dimensions_unit, tax_category_id) ARE nullable — those we always send
   // even when null so the merchant can clear them. NOT-NULL fields fall
   // back to their schema defaults when blank.
   const payload: Record<string, unknown> = {
+    ...extensionRowValues(`${formKey}.variant`, v),
     position: index + 1,
     options: v.options,
     sku: v.sku ?? '',

package/src/products/product-schema.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest'
+import { productFormSchema } from './product-schema'
+
+describe('productFormSchema status', () => {
+  it('accepts a status an extension added, so the form still saves', () => {
+    expect(productFormSchema.shape.status.safeParse('pending_compliance').success).toBe(true)
+  })
+})

package/src/products/product-schema.ts

@@ -1,3 +1,4 @@
+import { MEDIA_TYPES, type MediaType, PRODUCT_STATUSES, subsetOf } from '@spree/core'
 import { requiredMessage } from '@spree/dashboard-ui'
 import i18n from 'i18next'
 import { z } from 'zod/v4'
@@ -103,9 +104,7 @@ export type CustomFieldFormValues = z.infer<typeof customFieldFormSchema>
 // `source_media_id` (a file picked from the library). All can hold edits to
 // alt, position, and variant_ids that the parent product PATCH/POST ships
 // inline. previewUrl + uploadId are UI-only; stripped at submit.
-export const MEDIA_TYPES = ['image', 'video', 'external_video'] as const
-
-export type MediaType = (typeof MEDIA_TYPES)[number]
+export { MEDIA_TYPES, type MediaType }
 
 export const mediaFormSchema = z
   .object({
@@ -169,6 +168,13 @@ export const productPublicationFormSchema = z.object({
 
 export type ProductPublicationFormValues = z.infer<typeof productPublicationFormSchema>
 
+/** Statuses a merchant sets by hand; the rest come from the review workflow. */
+export const ASSIGNABLE_PRODUCT_STATUSES = subsetOf(PRODUCT_STATUSES, [
+  'draft',
+  'active',
+  'archived',
+])
+
 export const productFormSchema = z.object({
   // General
   name: z.string().min(1, { error: requiredMessage('name') }),
@@ -176,10 +182,11 @@ export const productFormSchema = z.object({
 
   // Status
   // Every status the API may answer, not just the ones a form sets. A
-  // marketplace product also comes back `proposed` or `rejected`, and a schema
-  // that rejects those makes the whole form unsavable rather than flagging a
-  // field (docs/plans/6.0-seller-product-submission.md).
-  status: z.enum(['draft', 'active', 'archived', 'proposed', 'rejected']).optional(),
+  // marketplace product also comes back `proposed` or `rejected`, an extension
+  // may add statuses of its own, and a schema that rejects any of those makes
+  // the whole form unsavable rather than flagging a field
+  // (docs/plans/6.0-seller-product-submission.md).
+  status: z.string().optional(),
 
   // Categorization
   category_ids: z.array(z.string()).optional(),

package/src/products/product-types.ts

@@ -1,4 +1,4 @@
-import type { CountryCode, CurrencyCode } from '@spree/admin-sdk'
+import type { CountryCode, CurrencyCode } from '@spree/core'
 
 /**
  * What the shared product form reads off a product, its variants and its

package/src/products/provider-settings-fields.tsx

@@ -0,0 +1,110 @@
+import type { DigitalAssetProviderSettingField } from '@spree/admin-sdk'
+import {
+  Field,
+  FieldLabel,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@spree/dashboard-ui'
+
+interface Props {
+  schema: DigitalAssetProviderSettingField[]
+  values: Record<string, unknown>
+  onChange: (values: Record<string, unknown>) => void
+}
+
+/**
+ * Renders one input per provider-declared setting. The provider owns the field
+ * list (its `settings_schema`), so this stays generic: a provider ships no
+ * dashboard code, it just names its fields and types. Labels come straight from
+ * the field key — a provider names a setting for the merchant, not for i18n.
+ */
+export function ProviderSettingsFields({ schema, values, onChange }: Props) {
+  if (schema.length === 0) return null
+
+  function set(key: string, value: unknown) {
+    onChange({ ...values, [key]: value })
+  }
+
+  return (
+    <>
+      {schema.map((field) => {
+        const value = values[field.key]
+        const id = `provider-setting-${field.key}`
+
+        if (field.type === 'boolean') {
+          return (
+            <Field key={field.key} className="flex-row items-center justify-between">
+              <FieldLabel htmlFor={id}>{field.key}</FieldLabel>
+              <Switch
+                id={id}
+                checked={Boolean(value)}
+                onCheckedChange={(checked) => set(field.key, checked)}
+              />
+            </Field>
+          )
+        }
+
+        if (field.type === 'select') {
+          return (
+            <Field key={field.key}>
+              <FieldLabel htmlFor={id}>{field.key}</FieldLabel>
+              <Select
+                value={value == null ? '' : String(value)}
+                onValueChange={(v) => set(field.key, v)}
+              >
+                <SelectTrigger id={id}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {(field.in ?? []).map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+          )
+        }
+
+        return (
+          <Field key={field.key}>
+            <FieldLabel htmlFor={id}>{field.key}</FieldLabel>
+            <Input
+              id={id}
+              type={field.type === 'number' ? 'number' : 'text'}
+              value={value == null ? '' : String(value)}
+              onChange={(e) => {
+                if (field.type !== 'number') {
+                  set(field.key, e.target.value)
+                  return
+                }
+                // An empty or invalid number input yields NaN, which would
+                // serialize to null and silently clear the setting. Keep it
+                // unset instead of writing a bogus value.
+                const parsed = e.target.valueAsNumber
+                set(field.key, Number.isFinite(parsed) ? parsed : undefined)
+              }}
+            />
+          </Field>
+        )
+      })}
+    </>
+  )
+}
+
+/** Seed field values from a provider's schema defaults (create flow). */
+export function defaultProviderSettings(
+  schema: DigitalAssetProviderSettingField[],
+): Record<string, unknown> {
+  const values: Record<string, unknown> = {}
+  for (const field of schema) {
+    if (field.default !== undefined) values[field.key] = field.default
+  }
+  return values
+}

package/src/products/sheet-save-handlers.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from 'react'
+
+/** Persists a slot widget's own edits; resolves `false` to keep the sheet open. */
+export type SheetSaveHandler = () => Promise<boolean>
+
+/**
+ * Lets widgets in a product-page sheet's slot save their own records when the
+ * sheet's Done is pressed. The sheet's fields ride the product's Save, but a
+ * widget writing a different record (a variant's custom fields) has no other
+ * moment that matches what the merchant expects: Done keeps, Cancel drops.
+ */
+export function useSheetSaveHandlers() {
+  const handlers = useRef(new Set<SheetSaveHandler>())
+  const [saving, setSaving] = useState(false)
+
+  /** Registers a handler; the returned function unregisters it. */
+  const onSave = useCallback((handler: SheetSaveHandler) => {
+    handlers.current.add(handler)
+    return () => {
+      handlers.current.delete(handler)
+    }
+  }, [])
+
+  // A widget that throws keeps the sheet open like one that resolves `false`,
+  // rather than escaping as an unhandled rejection from the Done click.
+  const saveAll = useCallback(async () => {
+    setSaving(true)
+    try {
+      const results = await Promise.allSettled([...handlers.current].map((handler) => handler()))
+      return results.every((result) => result.status === 'fulfilled' && result.value)
+    } finally {
+      setSaving(false)
+    }
+  }, [])
+
+  return { onSave, saveAll, saving }
+}

package/src/products/use-digital-assets.ts

@@ -0,0 +1,66 @@
+import { getApiClient, i18n, useResourceKey, useResourceMutation } from '@spree/dashboard-core'
+import { useQuery } from '@tanstack/react-query'
+import type { PanelDigitalAssetParams } from '../api-client'
+
+// The logical invalidation key (tenant id auto-injected by useResourceMutation).
+const digitalAssetsKey = (productId: string) => ['products', productId, 'digital-assets']
+
+function digitalAssetsClient() {
+  const client = getApiClient().digitalAssets
+  if (!client) throw new Error('This panel cannot manage digital files.')
+  return client
+}
+
+export function useDigitalAssets(productId: string, page = 1, enabled = true) {
+  return useQuery({
+    queryKey: useResourceKey('products', productId, 'digital-assets', page),
+    queryFn: () => digitalAssetsClient().list(productId, { page, limit: 25 }),
+    enabled: enabled && Boolean(productId) && Boolean(getApiClient().digitalAssets),
+  })
+}
+
+// The selectable sources for a new asset. Almost always just the File default,
+// so a host with no extra provider gets a one-entry list and the card keeps its
+// plain "Add file" button.
+export function useDigitalAssetProviders(productId: string, enabled = true) {
+  const providers = getApiClient().digitalAssets?.providers
+  return useQuery({
+    // Not keyed by product: the registry is the same for all of them.
+    queryKey: useResourceKey('digital-asset-providers'),
+    queryFn: () => providers!(productId),
+    enabled: enabled && Boolean(productId) && Boolean(providers),
+    staleTime: Number.POSITIVE_INFINITY, // the registry doesn't change at runtime
+  })
+}
+
+/**
+ * `errorMessage: false` hands every failure to the caller — the card names
+ * the file in its own toast, and two toasts for one refusal is noise.
+ */
+export function useCreateDigitalAsset(productId: string, options: { errorMessage?: false } = {}) {
+  return useResourceMutation({
+    mutationFn: (params: PanelDigitalAssetParams) =>
+      digitalAssetsClient().create(productId, params),
+    invalidate: [digitalAssetsKey(productId)],
+    successMessage: i18n.t('admin.messages.digital_asset_saved'),
+    ...options,
+  })
+}
+
+export function useUpdateDigitalAsset(productId: string, options: { errorMessage?: false } = {}) {
+  return useResourceMutation({
+    mutationFn: ({ id, ...params }: PanelDigitalAssetParams & { id: string }) =>
+      digitalAssetsClient().update(productId, id, params),
+    invalidate: [digitalAssetsKey(productId)],
+    successMessage: i18n.t('admin.messages.digital_asset_saved'),
+    ...options,
+  })
+}
+
+export function useDeleteDigitalAsset(productId: string) {
+  return useResourceMutation({
+    mutationFn: (id: string) => digitalAssetsClient().delete(productId, id),
+    invalidate: [digitalAssetsKey(productId)],
+    successMessage: i18n.t('admin.messages.digital_asset_removed'),
+  })
+}