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

package/src/products/digital-assets-card.tsx

@@ -0,0 +1,451 @@
+import type { DigitalAssetProvider } from '@spree/admin-sdk'
+import {
+  formatFileSize,
+  getApiClient,
+  Subject,
+  useFileUpload,
+  usePermissions,
+} from '@spree/dashboard-core'
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  FileTypeIcon,
+  Pagination,
+  RowActions,
+  Skeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  toastManager,
+  useConfirm,
+} from '@spree/dashboard-ui'
+import {
+  ChevronDownIcon,
+  DownloadIcon,
+  FileDownIcon,
+  FileIcon,
+  PlusIcon,
+  UploadIcon,
+} from '@spree/dashboard-ui/icons'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { PanelDigitalAsset } from '../api-client'
+import { variantLabel } from './assignable-variants'
+import { DigitalAssetEditSheet } from './digital-asset-edit-sheet'
+import { DigitalAssetProviderSheet } from './digital-asset-provider-sheet'
+import type { PanelVariant } from './product-types'
+import {
+  useCreateDigitalAsset,
+  useDeleteDigitalAsset,
+  useDigitalAssetProviders,
+  useDigitalAssets,
+  useUpdateDigitalAsset,
+} from './use-digital-assets'
+
+export function DigitalAssetsCard({
+  productId,
+  variants,
+  readOnly = false,
+  accept,
+  notice,
+}: {
+  productId?: string
+  variants?: PanelVariant[]
+  /**
+   * Shows the files without any way to change them, for a panel whose host
+   * has not opened file uploads to this user — the seller panel when the
+   * marketplace keeps digital files to itself. With nothing to show, the
+   * card renders nothing at all.
+   */
+  readOnly?: boolean
+  /** The content types the picker offers, when the host restricts them. */
+  accept?: string[]
+  /**
+   * What else a file change does here, shown under the description — the
+   * seller panel says that a listing on sale goes back to review.
+   */
+  notice?: string
+}) {
+  const { t } = useTranslation()
+  const confirm = useConfirm()
+  const { permissions } = usePermissions()
+  const canWrite = !readOnly && permissions.can('update', Subject.Product)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const replaceInputRef = useRef<HTMLInputElement>(null)
+  // The file whose replacement the picker was opened for.
+  const replacingRef = useRef<PanelDigitalAsset | null>(null)
+  const [uploading, setUploading] = useState(false)
+  const [page, setPage] = useState(1)
+  const [editing, setEditing] = useState<PanelDigitalAsset | null>(null)
+  // The provider whose settings sheet is open, before its asset is created.
+  const [configuring, setConfiguring] = useState<DigitalAssetProvider | null>(null)
+
+  // Digital files live on private storage: they are only ever served through an
+  // authorized, signed link, never from the public bucket.
+  const fileUpload = useFileUpload({ visibility: 'private' })
+  const { data, isLoading } = useDigitalAssets(productId ?? '', page, Boolean(productId))
+  const { data: providersData } = useDigitalAssetProviders(productId ?? '', Boolean(productId))
+  // The card toasts upload failures itself, naming the file, so the
+  // mutations stay quiet about theirs.
+  const createAsset = useCreateDigitalAsset(productId ?? '', { errorMessage: false })
+  const deleteAsset = useDeleteDigitalAsset(productId ?? '')
+  const updateAsset = useUpdateDigitalAsset(productId ?? '', { errorMessage: false })
+
+  const assets: PanelDigitalAsset[] = data?.data ?? []
+  const meta = data?.meta
+  // Across every page, so emptying a later page does not read as no files.
+  const hasAssets = (meta?.count ?? assets.length) > 0
+  const hasVariants = (variants?.length ?? 0) > 1
+  const providers = providersData?.data ?? []
+  // Only providers that resolve their own deliverable go in the source menu;
+  // the file default is the plain upload button. With none of these, the card
+  // keeps its today behaviour — a single "Add file" button.
+  const sourceProviders = providers.filter((p) => !p.requires_attachment)
+
+  // One path for a new file and a replacement: upload to private storage,
+  // hand the signed id on, and name the file when either step fails — a
+  // refused upload must never be silent.
+  async function uploadThen(file: File, persist: (signedId: string) => Promise<unknown>) {
+    try {
+      const { signedId, previewUrl } = await fileUpload.mutateAsync(file)
+      // The preview is for image cards; a download has nothing to show, and
+      // an unreleased object URL pins the whole file in memory.
+      URL.revokeObjectURL(previewUrl)
+      await persist(signedId)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('admin.errors.unexpected')
+      toastManager.add({
+        type: 'error',
+        title: t('admin.digital_assets.upload_failed', { name: file.name, message }),
+      })
+    }
+  }
+
+  async function handleFiles(files: FileList | File[]) {
+    const list = Array.from(files)
+    if (list.length === 0 || !productId) return
+
+    setUploading(true)
+    try {
+      for (const file of list) {
+        await uploadThen(file, (signedId) => createAsset.mutateAsync({ signed_id: signedId }))
+      }
+      setPage(1)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  function handleFileInput(event: React.ChangeEvent<HTMLInputElement>) {
+    // `event.target.files` is a live FileList — clearing the input's value
+    // empties it, so snapshot to a real array before resetting the input
+    // (the reset lets the same file be re-selected later).
+    const files = Array.from(event.target.files ?? [])
+    event.target.value = ''
+    if (files.length > 0) void handleFiles(files)
+  }
+
+  // Replacing removes the current file for everyone who bought it, so it is
+  // confirmed before the picker opens, like deleting.
+  async function openReplace(asset: PanelDigitalAsset) {
+    const confirmed = await confirm({
+      title: t('admin.digital_assets.replace_title'),
+      message: t('admin.digital_assets.replace_description', {
+        name: asset.filename ?? t('admin.digital_assets.untitled'),
+      }),
+      variant: 'destructive',
+    })
+    if (!confirmed) return
+    replacingRef.current = asset
+    replaceInputRef.current?.click()
+  }
+
+  // Replaces the file in place, so links buyers already received serve the
+  // new one.
+  async function handleReplaceInput(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    event.target.value = ''
+    const asset = replacingRef.current
+    replacingRef.current = null
+    if (!file || !asset) return
+
+    setUploading(true)
+    try {
+      await uploadThen(file, (signedId) =>
+        updateAsset.mutateAsync({ id: asset.id, signed_id: signedId }),
+      )
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  function handleDrop(event: React.DragEvent) {
+    event.preventDefault()
+    if (event.dataTransfer.files.length > 0) void handleFiles(event.dataTransfer.files)
+  }
+
+  // A provider with settings opens a sheet to collect them; one without
+  // creates its asset immediately, exactly like the file default.
+  async function handleAddProvider(provider: DigitalAssetProvider) {
+    if (provider.settings_schema.length > 0) {
+      setConfiguring(provider)
+      return
+    }
+    try {
+      await createAsset.mutateAsync({ provider_type: provider.type })
+      setPage(1)
+    } catch (err) {
+      // The create mutation suppresses its own toast for validation errors.
+      const message = err instanceof Error ? err.message : t('admin.errors.unexpected')
+      toastManager.add({
+        type: 'error',
+        title: t('admin.digital_assets.upload_failed', { name: provider.name, message }),
+      })
+    }
+  }
+
+  async function handleDelete(asset: PanelDigitalAsset) {
+    const confirmed = await confirm({
+      title: t('admin.digital_assets.delete_title'),
+      message: t('admin.digital_assets.delete_description', {
+        name: asset.filename ?? t('admin.digital_assets.untitled'),
+      }),
+      variant: 'destructive',
+    })
+    if (!confirmed) return
+    await deleteAsset.mutateAsync(asset.id)
+    if (assets.length === 1 && page > 1) setPage(page - 1)
+  }
+
+  // A blank limit means the store's setting applies — show the number actually
+  // in force rather than an empty cell.
+  function limitLabel(own: number | null | undefined, effective: number) {
+    return own == null ? t('admin.digital_assets.store_default', { count: effective }) : String(own)
+  }
+
+  function assetVariantLabel(asset: PanelDigitalAsset) {
+    const variant = variants?.find((v) => v.id === asset.variant_id)
+    return variant ? variantLabel(variant) : '—'
+  }
+
+  if (!productId || !getApiClient().digitalAssets) return null
+  if (readOnly && !isLoading && !hasAssets) return null
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <FileDownIcon className="size-4" />
+          {t('admin.digital_assets.title')}
+        </CardTitle>
+        {/* The header action only appears once files exist — an empty card
+            invites the first upload through its dropzone, not a button. */}
+        {canWrite && hasAssets && (
+          <CardAction>
+            {sourceProviders.length === 0 ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={uploading}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <UploadIcon className="mr-2 size-4" />
+                {uploading
+                  ? t('admin.digital_assets.uploading_short')
+                  : t('admin.digital_assets.upload')}
+              </Button>
+            ) : (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button type="button" variant="outline" size="sm" disabled={uploading}>
+                    <PlusIcon className="mr-2 size-4" />
+                    {uploading
+                      ? t('admin.digital_assets.uploading_short')
+                      : t('admin.digital_assets.add')}
+                    <ChevronDownIcon className="ml-2 size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
+                    <UploadIcon className="mr-2 size-4" />
+                    {t('admin.digital_assets.source.upload')}
+                  </DropdownMenuItem>
+                  {sourceProviders.map((provider) => (
+                    <DropdownMenuItem
+                      key={provider.type}
+                      onClick={() => handleAddProvider(provider)}
+                    >
+                      {provider.name}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-4">
+        <p className="text-muted-foreground text-sm">{t('admin.digital_assets.description')}</p>
+        {notice && canWrite && <p className="text-sm">{notice}</p>}
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept={accept?.join(',')}
+          className="hidden"
+          onChange={handleFileInput}
+        />
+        <input
+          ref={replaceInputRef}
+          type="file"
+          accept={accept?.join(',')}
+          className="hidden"
+          onChange={handleReplaceInput}
+        />
+
+        {isLoading ? (
+          <Skeleton className="h-24 w-full" />
+        ) : !hasAssets && !canWrite ? (
+          <p className="text-muted-foreground text-sm">{t('admin.digital_assets.empty')}</p>
+        ) : !hasAssets ? (
+          <button
+            type="button"
+            onDrop={handleDrop}
+            onDragOver={(e) => e.preventDefault()}
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            className="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors hover:border-foreground/30 disabled:pointer-events-none disabled:opacity-60"
+          >
+            <FileIcon className="size-8 text-muted-foreground" />
+            <p className="text-muted-foreground text-sm">
+              {uploading
+                ? t('admin.digital_assets.uploading_short')
+                : t('admin.digital_assets.drop_hint')}
+            </p>
+          </button>
+        ) : (
+          <div className="overflow-hidden rounded-xl border border-border-subtle">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('admin.digital_assets.columns.file')}</TableHead>
+                  {hasVariants && (
+                    <TableHead>{t('admin.digital_assets.columns.variant')}</TableHead>
+                  )}
+                  <TableHead>{t('admin.digital_assets.columns.size')}</TableHead>
+                  <TableHead>{t('admin.digital_assets.columns.downloads')}</TableHead>
+                  <TableHead>{t('admin.digital_assets.columns.days')}</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {assets.map((asset) => (
+                  <TableRow key={asset.id}>
+                    <TableCell className="font-medium">
+                      <span className="flex items-center gap-2">
+                        <FileTypeIcon
+                          filename={asset.filename}
+                          contentType={asset.content_type}
+                          className="text-muted-foreground size-4 shrink-0"
+                        />
+                        {asset.download_url ? (
+                          <a
+                            href={asset.download_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="hover:underline"
+                          >
+                            {asset.filename ?? t('admin.digital_assets.untitled')}
+                          </a>
+                        ) : (
+                          (asset.filename ?? t('admin.digital_assets.untitled'))
+                        )}
+                      </span>
+                    </TableCell>
+                    {hasVariants && (
+                      <TableCell className="text-muted-foreground">
+                        {assetVariantLabel(asset)}
+                      </TableCell>
+                    )}
+                    <TableCell className="tabular-nums">
+                      {asset.byte_size ? formatFileSize(asset.byte_size) : '—'}
+                    </TableCell>
+                    <TableCell className="tabular-nums">
+                      {limitLabel(asset.authorized_clicks, asset.effective_authorized_clicks)}
+                    </TableCell>
+                    <TableCell className="tabular-nums">
+                      {limitLabel(asset.authorized_days, asset.effective_authorized_days)}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <RowActions
+                        actions={[
+                          {
+                            key: 'download',
+                            label: t('admin.digital_assets.download'),
+                            icon: <DownloadIcon className="size-4" />,
+                            visible: Boolean(asset.download_url),
+                            onSelect: () => window.open(asset.download_url ?? '', '_blank'),
+                          },
+                          {
+                            key: 'replace',
+                            label: t('admin.digital_assets.replace'),
+                            icon: <UploadIcon className="size-4" />,
+                            // Only a stored file can be swapped; a provider's
+                            // own deliverable has none to download.
+                            visible: canWrite && Boolean(asset.download_url),
+                            disabled: uploading,
+                            onSelect: () => openReplace(asset),
+                          },
+                          { key: 'edit', visible: canWrite, onSelect: () => setEditing(asset) },
+                          {
+                            key: 'delete',
+                            visible: canWrite,
+                            destructive: true,
+                            onSelect: () => handleDelete(asset),
+                          },
+                        ]}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {meta && <Pagination meta={meta} onPageChange={setPage} />}
+          </div>
+        )}
+      </CardContent>
+
+      <DigitalAssetEditSheet
+        productId={productId}
+        asset={editing}
+        variants={variants}
+        settingsSchema={
+          providers.find((p) => p.type === editing?.provider_type)?.settings_schema ?? []
+        }
+        open={Boolean(editing)}
+        onOpenChange={(open) => !open && setEditing(null)}
+      />
+
+      <DigitalAssetProviderSheet
+        productId={productId}
+        provider={configuring}
+        onOpenChange={(open) => !open && setConfiguring(null)}
+        onCreated={() => setPage(1)}
+      />
+    </Card>
+  )
+}

package/src/products/media-edit-sheet.tsx

@@ -1,5 +1,11 @@
 import type { ProductFormValues } from '@spree/dashboard-core'
-import { ImageUploadField, parseVideoUrl, useTranslation } from '@spree/dashboard-core'
+import {
+  extensionFieldNames,
+  ImageUploadField,
+  parseVideoUrl,
+  Slot,
+  useTranslation,
+} from '@spree/dashboard-core'
 import {
   Button,
   Field,
@@ -14,10 +20,11 @@ import {
   SheetTitle,
 } from '@spree/dashboard-ui'
 import { CheckIcon } from '@spree/dashboard-ui/icons'
-import i18n from 'i18next'
 import { useCallback, useEffect, useRef } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
+import { variantLabel } from './assignable-variants'
 import type { PanelVariant as Variant } from './product-types'
+import { useSheetSaveHandlers } from './sheet-save-handlers'
 
 // The fields this sheet edits. Snapshot, cancel-restore and the type all derive
 // from this one list, so a new editable field can't reach the form and then be
@@ -39,13 +46,25 @@ interface Props {
   variants: Variant[]
   open: boolean
   onOpenChange: (open: boolean) => void
+  /** The product form's key — names the slot and the row's extension fields. */
+  formKey: string
+  productId?: string
 }
 
 // Form-backed media editor. The sheet edits `form.media[index]` directly —
 // changes ride the parent product PATCH/POST, no per-asset API calls.
-// Cancel restores a snapshot taken on open; Done closes (parent form Save
-// commits). Same model as the per-variant Sheet.
-export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange }: Props) {
+// Cancel restores a snapshot taken on open; Done runs the slot widgets' own
+// saves, then closes (parent form Save commits). Same model as the per-variant
+// Sheet.
+export function MediaEditSheet({
+  form,
+  mediaIndex,
+  variants,
+  open,
+  onOpenChange,
+  formKey,
+  productId,
+}: Props) {
   const { t } = useTranslation()
 
   // Snapshot on open so Cancel can restore. Re-snapshot if mediaIndex changes
@@ -58,7 +77,11 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
   // freshly-uploaded row that has no id yet we fall back to the current
   // index — uploads don't surface a drag handle so the race is impossible.
   type MediaRow = NonNullable<ProductFormValues['media']>[number]
-  type Snapshot = Pick<MediaRow, (typeof EDITED_FIELDS)[number]> & { key: string | null }
+  type Snapshot = Pick<MediaRow, (typeof EDITED_FIELDS)[number]> & {
+    key: string | null
+    // Fields a `<formKey>.media.form_fields` widget edits, restored the same way.
+    extensions: Record<string, unknown>
+  }
   const snapshotRef = useRef<Snapshot | null>(null)
   const rowKey = useCallback(
     (m: MediaRow): string | null => m.id ?? m.signed_id ?? m.uploadId ?? null,
@@ -84,8 +107,18 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
       // Copy the array — the snapshot must not alias the row's own value.
       variant_ids: [...(row.variant_ids ?? [])],
       key: rowKey(row),
+      extensions: structuredClone(
+        Object.fromEntries(
+          extensionFieldNames(`${formKey}.media`).map((name) => [
+            name,
+            (row as Record<string, unknown>)[name],
+          ]),
+        ),
+      ),
     }
-  }, [open, mediaIndex, form, rowKey])
+  }, [open, mediaIndex, form, rowKey, formKey])
+
+  const { onSave, saveAll, saving } = useSheetSaveHandlers()
 
   const entry = form.watch(`media.${mediaIndex}`)
   if (!entry) return null
@@ -180,6 +213,8 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
   }
 
   const handleCancel = () => {
+    // A save already sent can't be called back, so the sheet stays until it settles.
+    if (saving) return
     const snap = snapshotRef.current
     if (snap) {
       // Resolve the row by stable key — the media array may have reordered
@@ -203,6 +238,13 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
           shouldTouch: false,
         })
       }
+      for (const [name, value] of Object.entries(snap.extensions)) {
+        // Extension names are outside the typed row.
+        form.setValue(`media.${targetIndex}.${name}` as any, value, {
+          shouldDirty: false,
+          shouldTouch: false,
+        })
+      }
     }
     onOpenChange(false)
   }
@@ -309,13 +351,30 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
               </div>
             </Field>
           )}
+
+          <Slot
+            name={`${formKey}.media.form_fields`}
+            context={{
+              productId,
+              media: entry,
+              mediaIndex,
+              fieldPrefix: `media.${mediaIndex}`,
+              onSave,
+            }}
+          />
         </div>
 
         <SheetFooter>
-          <Button type="button" variant="outline" onClick={handleCancel}>
+          <Button type="button" variant="outline" disabled={saving} onClick={handleCancel}>
             {t('admin.actions.cancel')}
           </Button>
-          <Button type="button" onClick={() => onOpenChange(false)}>
+          <Button
+            type="button"
+            disabled={saving}
+            onClick={async () => {
+              if (await saveAll()) onOpenChange(false)
+            }}
+          >
             {t('admin.actions.done')}
           </Button>
         </SheetFooter>
@@ -323,14 +382,3 @@ export function MediaEditSheet({ form, mediaIndex, variants, open, onOpenChange
     </Sheet>
   )
 }
-
-function variantLabel(v: Variant): string {
-  const named = v as { options_text?: string; name?: string; sku?: string | null }
-  return (
-    named.options_text ||
-    named.name ||
-    named.sku ||
-    v.id ||
-    i18n.t('admin.products.variants.variant_label')
-  )
-}

package/src/products/normalize-quantity.ts

@@ -2,10 +2,9 @@
 // `Spree::Variant`'s own validations so a merchant hears about a bad value
 // while typing rather than on save.
 
-/** What a buyer is quoted in. Stored quantities stay units at every level. */
-export const PURCHASE_UNITS = ['unit', 'carton'] as const
+import { PURCHASE_UNITS, type PurchaseUnit } from '@spree/core'
 
-export type PurchaseUnit = (typeof PURCHASE_UNITS)[number]
+export { PURCHASE_UNITS, type PurchaseUnit }
 
 /**
  * Reads a quantity rule from a number input. Blank means the rule is unset,

package/src/products/product-bulk-price-editor.tsx

@@ -1,12 +1,10 @@
-import type { CurrencyCode } from '@spree/admin-sdk'
+import { type CurrencyCode, currencyParts, normalizeMoneyInput } from '@spree/core'
 import type { ProductFormValues, VariantPriceFormValues } from '@spree/dashboard-core'
 import { type BulkPriceRow, BulkPriceTable } from '@spree/dashboard-ui'
 import { useCallback, useMemo } from 'react'
 import { type UseFormReturn, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useMoneyLocale } from '../hooks/use-money-locale'
-import { currencyParts } from '../lib/currency-parts'
-import { normalizeMoneyInput } from '../lib/normalize-money'
 import { composeOptionsText } from '../products/variants-matrix'
 import { useFormOptionTypes as useOptionTypes } from './use-product-form-data'