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

package/src/dashboard/export-dialog.tsx

@@ -6,18 +6,27 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Checkbox,
 } from '@vendure/dashboard'
-import { useRef, useState } from 'react'
+import { useState, useEffect } from 'react'
+import { toast } from 'sonner'
 import {
-  ExportConfigurationPanel,
-  type ExportConfigurationPanelHandle,
-} from './export-configuration-panel'
+  getServerLocation,
+  getChannelHeader,
+  type PluginInitOptions,
+  type ExportFields,
+  type ProductFields,
+  type VariantFields,
+} from './utils'
 
 interface ExportDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  /** Omit for export-all-only dialogs; bulk export passes selected IDs. */
-  productIds?: string[]
+  productIds: string[]
   isExportAll?: boolean
 }
 
@@ -27,15 +36,173 @@ export function ExportDialog({
   productIds,
   isExportAll = false,
 }: ExportDialogProps) {
-  const panelRef = useRef<ExportConfigurationPanelHandle>(null)
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  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 handleExport = async () => {
-    setIsSubmitting(true)
+    const trimmedFileName = fileName.trim()
+    const finalFileName = trimmedFileName || config?.defaultFileName || 'products_export.csv'
+
     try {
-      await panelRef.current?.submitExport()
-    } finally {
-      setIsSubmitting(false)
+      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')
     }
   }
 
@@ -47,21 +214,117 @@ export function ExportDialog({
           <DialogDescription>Configure export settings</DialogDescription>
         </DialogHeader>
 
-        <ExportConfigurationPanel
-          ref={panelRef}
-          productIds={productIds}
-          isExportAll={isExportAll}
-          active={open}
-          idPrefix="dialog-export"
-          fieldsAccordionDefaultOpen
-          onExportSuccess={() => onOpenChange(false)}
-        />
+        <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>
 
         <DialogFooter>
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button type="button" onClick={handleExport} disabled={isSubmitting || !open}>
+          <Button type="button" onClick={handleExport}>
             Export
           </Button>
         </DialogFooter>

package/src/dashboard/export.tsx

@@ -1,60 +1,25 @@
-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'
+import { Button } from '@vendure/dashboard'
+import { useState } from 'react'
+import { ExportDialog } from './export-dialog'
 
 export function ProductExportBlock() {
-  const panelRef = useRef<ExportConfigurationPanelHandle>(null)
-  const [isExporting, setIsExporting] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
 
-  const handleExport = async () => {
-    setIsExporting(true)
-    try {
-      await panelRef.current?.submitExport()
-    } finally {
-      setIsExporting(false)
-    }
+  const handleExport = () => {
+    setDialogOpen(true)
   }
 
   return (
-    <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>
+    <div className="space-y-4">
+      <div>
+        <Button onClick={handleExport}>Export all products</Button>
+      </div>
+      <ExportDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        productIds={[]}
+        isExportAll={true}
+      />
+    </div>
   )
 }