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

package/src/products/digital-asset-provider-sheet.tsx

@@ -0,0 +1,88 @@
+import type { DigitalAssetProvider } from '@spree/admin-sdk'
+import {
+  Button,
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@spree/dashboard-ui'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { defaultProviderSettings, ProviderSettingsFields } from './provider-settings-fields'
+import { useCreateDigitalAsset } from './use-digital-assets'
+
+interface Props {
+  productId: string
+  /** The picked source, or null when the sheet is closed. */
+  provider: DigitalAssetProvider | null
+  onOpenChange: (open: boolean) => void
+  onCreated: () => void
+}
+
+/**
+ * Captures a provider-backed asset's settings before creating it. Only opened
+ * for a provider that declares fields; a settings-free provider creates in one
+ * click from the source menu without this sheet.
+ */
+export function DigitalAssetProviderSheet({ productId, provider, onOpenChange, onCreated }: Props) {
+  const { t } = useTranslation()
+  const createAsset = useCreateDigitalAsset(productId)
+  const [values, setValues] = useState<Record<string, unknown>>({})
+  const [error, setError] = useState<string | null>(null)
+
+  // Re-seed with the provider's defaults each time a source is picked.
+  useEffect(() => {
+    if (provider) {
+      setValues(defaultProviderSettings(provider.settings_schema))
+      setError(null)
+    }
+  }, [provider])
+
+  if (!provider) return null
+
+  async function handleCreate() {
+    setError(null)
+    try {
+      await createAsset.mutateAsync({
+        provider_type: provider!.type,
+        provider_settings: values,
+      })
+      onCreated()
+      onOpenChange(false)
+    } catch (err) {
+      // useResourceMutation suppresses the toast for a 422, so surface the
+      // reason inline and keep the sheet open with the entered values.
+      setError(err instanceof Error ? err.message : t('admin.errors.unexpected'))
+    }
+  }
+
+  return (
+    <Sheet open={Boolean(provider)} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="flex flex-col">
+        <SheetHeader>
+          <SheetTitle>{provider.name}</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-1 flex-col gap-6 overflow-y-auto p-4">
+          <ProviderSettingsFields
+            schema={provider.settings_schema}
+            values={values}
+            onChange={setValues}
+          />
+
+          {error && <p className="text-destructive text-sm">{error}</p>}
+        </div>
+
+        <SheetFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            {t('admin.actions.cancel')}
+          </Button>
+          <Button type="button" onClick={handleCreate} disabled={createAsset.isPending}>
+            {createAsset.isPending ? t('admin.actions.saving') : t('admin.actions.add')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}

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

@@ -20,9 +20,9 @@ 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'
 
@@ -382,14 +382,3 @@ export function MediaEditSheet({
     </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/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
+}