@haus-tech/product-import-export-plugin 3.6.3 → 3.6.4

package/src/dashboard/export-dialog.tsx

@@ -6,27 +6,18 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  Input,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  Checkbox,
 } from '@vendure/dashboard'
-import { useState, useEffect } from 'react'
-import { toast } from 'sonner'
+import { useRef, useState } from 'react'
 import {
-  getServerLocation,
-  getChannelHeader,
-  type PluginInitOptions,
-  type ExportFields,
-  type ProductFields,
-  type VariantFields,
-} from './utils'
+  ExportConfigurationPanel,
+  type ExportConfigurationPanelHandle,
+} from './export-configuration-panel'
 
 interface ExportDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  productIds: string[]
+  /** Omit for export-all-only dialogs; bulk export passes selected IDs. */
+  productIds?: string[]
   isExportAll?: boolean
 }
 
@@ -36,173 +27,15 @@ export function ExportDialog({
   productIds,
   isExportAll = false,
 }: ExportDialogProps) {
-  const mandatoryOptionFields: Array<ProductFields | VariantFields> = ['optionGroups', 'optionValues']
-  const [fileName, setFileName] = useState('')
-  const [customFields, setCustomFields] = useState<string[]>([])
-  const [selectedFields, setSelectedFields] = useState<string[]>([])
-  const [exportAssetsAs, setExportAssetsAs] = useState<'url' | 'json'>('url')
-  const [selectedExportFields, setSelectedExportFields] = useState<ExportFields>([])
-  const [customColumnNames, setCustomColumnNames] = useState<string[]>([])
-  const [selectedCustomColumns, setSelectedCustomColumns] = useState<string[]>([])
-  const [availableExportFields] = useState<ExportFields>([
-    'id',
-    'name',
-    'slug',
-    'description',
-    'assets',
-    'facets',
-    'optionGroups',
-    'sku',
-    'optionValues',
-    'price',
-    'taxCategory',
-    'stockOnHand',
-    'trackInventory',
-    'variantAssets',
-    'variantFacets',
-    'enabled',
-  ])
-  const [config, setConfig] = useState<PluginInitOptions['exportOptions'] | null>(null)
-  const [toggleAllChecked, setToggleAllChecked] = useState(false)
-
-  useEffect(() => {
-    const fetchConfig = async () => {
-      try {
-        const serverPath = getServerLocation()
-        const [configRes, customFieldsRes] = await Promise.all([
-          fetch(`${serverPath}/product-import-export/config`, {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'application/json',
-              ...getChannelHeader(),
-            },
-            credentials: 'include',
-          }),
-          fetch(`${serverPath}/product-export/custom-fields`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              ...getChannelHeader(),
-            },
-            credentials: 'include',
-            body: JSON.stringify(productIds.length > 0 ? productIds : []),
-          }),
-        ])
-
-        const configData = await configRes.json()
-        const customFieldsData = await customFieldsRes.json()
-
-        setConfig(configData.exportOptions)
-        setCustomFields(customFieldsData.map((field: { name: string }) => field.name))
-        setSelectedFields([...customFieldsData.map((field: { name: string }) => field.name)])
-
-        const columnNames =
-          configData.exportOptions?.customExportColumns?.map((c: { name: string }) => c.name) ?? []
-        setCustomColumnNames(columnNames)
-        setSelectedCustomColumns(columnNames)
-
-        setExportAssetsAs(
-          configData.exportOptions?.defaultExportAssetsAs ||
-            configData.exportOptions?.exportAssetsAsOptions?.[0] ||
-            'url',
-        )
-        if (
-          configData.exportOptions?.defaultExportFields ||
-          configData.exportOptions?.requiredExportFields
-        ) {
-          setSelectedExportFields(
-            Array.from(
-              new Set([
-                ...(configData.exportOptions.defaultExportFields || []),
-                ...(configData.exportOptions.requiredExportFields || []),
-                ...mandatoryOptionFields,
-              ]),
-            ) as ExportFields,
-          )
-        }
-      } catch (error) {
-        console.error('Failed to fetch config:', error)
-      }
-    }
-
-    if (open) {
-      fetchConfig()
-    }
-  }, [open, productIds])
-
-  const toggleFieldSelection = (fieldName: string) => {
-    setSelectedFields((prev) =>
-      prev.includes(fieldName) ? prev.filter((f) => f !== fieldName) : [...prev, fieldName],
-    )
-  }
-
-  const toggleCustomColumnSelection = (name: string) => {
-    setSelectedCustomColumns((prev) =>
-      prev.includes(name) ? prev.filter((c) => c !== name) : [...prev, name],
-    )
-  }
-
-  const toggleExportFieldSelection = (fieldName: ProductFields | VariantFields) => {
-    if (mandatoryOptionFields.includes(fieldName)) {
-      return
-    }
-    setSelectedExportFields((prev) =>
-      prev.includes(fieldName) ? prev.filter((f) => f !== fieldName) : [...prev, fieldName],
-    )
-  }
-
-  const toggleSelectAll = (checked: boolean) => {
-    setToggleAllChecked(checked)
-    if (checked) {
-      setSelectedExportFields([...availableExportFields])
-      setSelectedFields([...customFields])
-      setSelectedCustomColumns([...customColumnNames])
-    } else {
-      setSelectedExportFields([
-        ...(config?.requiredExportFields || []),
-        ...mandatoryOptionFields,
-      ])
-      setSelectedFields([])
-      setSelectedCustomColumns([])
-    }
-  }
+  const panelRef = useRef<ExportConfigurationPanelHandle>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const handleExport = async () => {
-    const trimmedFileName = fileName.trim()
-    const finalFileName = trimmedFileName || config?.defaultFileName || 'products_export.csv'
-
+    setIsSubmitting(true)
     try {
-      const serverPath = getServerLocation()
-      const endpoint = isExportAll ? 'export-all' : 'export'
-      const body = isExportAll ? undefined : JSON.stringify(productIds)
-
-      const res = await fetch(
-        `${serverPath}/product-export/${endpoint}?fileName=${encodeURIComponent(finalFileName)}&customFields=${encodeURIComponent(selectedFields.join(','))}&exportAssetsAs=${exportAssetsAs}&selectedExportFields=${encodeURIComponent([...selectedExportFields, ...selectedCustomColumns].join(','))}`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            ...getChannelHeader(),
-          },
-          credentials: 'include',
-          ...(body && { body }),
-        },
-      )
-
-      if (!res.ok) {
-        const json = await res.json()
-        throw new Error(json?.message || 'Export failed')
-      }
-
-      onOpenChange(false)
-      toast.success(
-        `Export job queued successfully. ${
-          isExportAll ? 'All' : productIds.length
-        } products will be exported.`,
-      )
-    } catch (error: unknown) {
-      console.error(error)
-      toast.error((error as Error)?.message || 'Failed to queue export')
+      await panelRef.current?.submitExport()
+    } finally {
+      setIsSubmitting(false)
     }
   }
 
@@ -214,117 +47,21 @@ export function ExportDialog({
           <DialogDescription>Configure export settings</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <div>
-            <Label htmlFor="file-name">File name (optional)</Label>
-            <p className="text-sm text-muted-foreground mt-1">
-              A timestamp will be automatically added to the filename to ensure uniqueness.
-            </p>
-            <Input
-              id="file-name"
-              value={fileName}
-              onChange={(e) => setFileName(e.target.value)}
-              placeholder={config?.defaultFileName || 'products_export.csv'}
-              className="mt-1"
-            />
-          </div>
-
-          <div>
-            <Label>Select fields to export</Label>
-            <div className="flex items-center space-x-2 mt-2">
-              <Checkbox
-                id="select-all"
-                checked={toggleAllChecked}
-                onCheckedChange={(checked) => toggleSelectAll(checked as boolean)}
-              />
-              <Label htmlFor="select-all" className="font-normal">
-                Select all
-              </Label>
-            </div>
-            <div className="grid grid-cols-2 gap-2 mt-2">
-              {availableExportFields.map((field) => (
-                <div key={field} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={`field-${field}`}
-                    checked={selectedExportFields.includes(field)}
-                    onCheckedChange={() => toggleExportFieldSelection(field)}
-                    disabled={
-                      config?.requiredExportFields?.includes(field) ||
-                      mandatoryOptionFields.includes(field)
-                    }
-                  />
-                  <Label htmlFor={`field-${field}`} className="font-normal">
-                    {field}
-                  </Label>
-                </div>
-              ))}
-            </div>
-            {customFields.length > 0 && (
-              <div className="grid grid-cols-2 gap-2 mt-2">
-                {customFields.map((field) => (
-                  <div key={field} className="flex items-center space-x-2">
-                    <Checkbox
-                      id={`custom-${field}`}
-                      checked={selectedFields.includes(field)}
-                      onCheckedChange={() => toggleFieldSelection(field)}
-                    />
-                    <Label htmlFor={`custom-${field}`} className="font-normal">
-                      {field}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-            )}
-            {customColumnNames.length > 0 && (
-              <div className="grid grid-cols-2 gap-2 mt-2">
-                {customColumnNames.map((name) => (
-                  <div key={name} className="flex items-center space-x-2">
-                    <Checkbox
-                      id={`custom-column-${name}`}
-                      checked={selectedCustomColumns.includes(name)}
-                      onCheckedChange={() => toggleCustomColumnSelection(name)}
-                    />
-                    <Label htmlFor={`custom-column-${name}`} className="font-normal">
-                      {name}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div>
-            <Label>Export assets as:</Label>
-            <RadioGroup
-              value={exportAssetsAs}
-              onValueChange={(val) => setExportAssetsAs(val as 'url' | 'json')}
-              className="mt-2"
-            >
-              {config?.exportAssetsAsOptions?.includes('url') && (
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="url" id="assets-url" />
-                  <Label htmlFor="assets-url" className="font-normal">
-                    URL
-                  </Label>
-                </div>
-              )}
-              {config?.exportAssetsAsOptions?.includes('json') && (
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="json" id="assets-json" />
-                  <Label htmlFor="assets-json" className="font-normal">
-                    JSON
-                  </Label>
-                </div>
-              )}
-            </RadioGroup>
-          </div>
-        </div>
+        <ExportConfigurationPanel
+          ref={panelRef}
+          productIds={productIds}
+          isExportAll={isExportAll}
+          active={open}
+          idPrefix="dialog-export"
+          fieldsAccordionDefaultOpen
+          onExportSuccess={() => onOpenChange(false)}
+        />
 
         <DialogFooter>
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button type="button" onClick={handleExport}>
+          <Button type="button" onClick={handleExport} disabled={isSubmitting || !open}>
             Export
           </Button>
         </DialogFooter>

package/src/dashboard/export.tsx

@@ -1,25 +1,60 @@
-import { Button } from '@vendure/dashboard'
-import { useState } from 'react'
-import { ExportDialog } from './export-dialog'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@vendure/dashboard'
+import { DownloadIcon, InfoIcon } from 'lucide-react'
+import { useRef, useState } from 'react'
+import {
+  ExportConfigurationPanel,
+  type ExportConfigurationPanelHandle,
+} from './export-configuration-panel'
 
 export function ProductExportBlock() {
-  const [dialogOpen, setDialogOpen] = useState(false)
+  const panelRef = useRef<ExportConfigurationPanelHandle>(null)
+  const [isExporting, setIsExporting] = useState(false)
 
-  const handleExport = () => {
-    setDialogOpen(true)
+  const handleExport = async () => {
+    setIsExporting(true)
+    try {
+      await panelRef.current?.submitExport()
+    } finally {
+      setIsExporting(false)
+    }
   }
 
   return (
-    <div className="space-y-4">
-      <div>
-        <Button onClick={handleExport}>Export all products</Button>
-      </div>
-      <ExportDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        productIds={[]}
-        isExportAll={true}
-      />
-    </div>
+    <Card className="h-full">
+      <CardHeader className="flex flex-row items-start gap-3 space-y-0 items-center">
+        <div className="bg-primary/10 text-primary rounded-md p-2 flex h-9 w-9 items-center justify-center">
+          <DownloadIcon className="h-5 w-5" />
+        </div>
+        <div className="space-y-1">
+          <CardTitle className="mb-0">Export all products</CardTitle>
+          <CardDescription className="text-xs">Export all your products to a CSV file.</CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <ExportConfigurationPanel
+          ref={panelRef}
+          isExportAll
+          active
+          idPrefix="page-export"
+        />
+
+        <Button className="w-full" onClick={handleExport} disabled={isExporting}>
+          <DownloadIcon className="mr-2 h-4 w-4" />
+          {isExporting ? 'Queuing export…' : 'Export products'}
+        </Button>
+
+        <div className="flex items-start gap-2 text-xs text-muted-foreground">
+          <InfoIcon className="h-3.5 w-3.5 shrink-0" />
+          <span>You will receive an email when the export is ready to download.</span>
+        </div>
+      </CardContent>
+    </Card>
   )
 }