@haus-tech/product-import-export-plugin 3.3.2-next.2 → 3.3.2-next.3

package/src/dashboard/import.tsx

@@ -1,7 +1,31 @@
-import { Button, Switch, Label, RadioGroup, RadioGroupItem } from '@vendure/dashboard'
-import { UploadIcon } from 'lucide-react'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Switch,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  toast,
+} from '@vendure/dashboard'
+import {
+  UploadIcon,
+  UploadCloudIcon,
+  FileTextIcon,
+  XIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+} from 'lucide-react'
 import { useState, useRef, useEffect } from 'react'
-import { toast } from 'sonner'
 import type { LanguageCode, Channel } from '@vendure/core'
 import { size, startsWith, endsWith, uniq } from 'lodash-es'
 import {
@@ -12,17 +36,26 @@ import {
   type PluginInitOptions,
 } from './utils'
 
-// Import page component
+const TEMPLATE_URL =
+  'https://github.com/WeAreHausTech/haus-tech-vendure-plugins-public/blob/main/packages/product-import-export-plugin/README.mdx#csv-format-for-import'
+const GUIDE_URL =
+  'https://github.com/WeAreHausTech/haus-tech-vendure-plugins-public/blob/main/packages/product-import-export-plugin/README.mdx'
+
+const MAX_SIZE_BYTES = 20 * 1024 * 1024
+
 export function ProductImportBlock() {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const [validateFile, setValidateFile] = useState<File | null>(null)
+  const [isDragActive, setIsDragActive] = useState(false)
+  const [optionsOpen, setOptionsOpen] = useState(false)
   const [updateProductSlug, setUpdateProductSlug] = useState(true)
   const [selectedMainLanguage, setSelectedMainLanguage] = useState<LanguageCode | undefined>()
   const [availableLanguages, setAvailableLanguages] = useState<LanguageCode[]>([])
   const [updatingStrategy, setUpdatingStrategy] = useState<UpdatingStrategy>('merge')
   const [config, setConfig] = useState<PluginInitOptions | null>(null)
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null)
+  const [isUploading, setIsUploading] = useState(false)
 
   useEffect(() => {
     const fetchConfig = async () => {
@@ -75,7 +108,6 @@ export function ProductImportBlock() {
     endChar: string
     isJson?: boolean
   } => {
-    // Replace starting and ending double quotes if exists
     const trimmedText = text.trim().replace(/^"/, '').replace(/"$/, '')
 
     return {
@@ -118,7 +150,6 @@ export function ProductImportBlock() {
         }
         for (const lang of languageCodes) {
           if (lang) {
-            // Check if lang is defined
             const langSpecificColumn = `${baseColumn}:${lang}`
             const langColIndex = header.indexOf(langSpecificColumn)
             const colValue = row[langColIndex]
@@ -173,7 +204,6 @@ export function ProductImportBlock() {
 
         const header = splitLines(lines[0]).map((col) => col.trim())
 
-        // Fetch channel if not already loaded (matches Angular implementation)
         let channel = currentChannel
         if (!channel) {
           try {
@@ -187,7 +217,6 @@ export function ProductImportBlock() {
               credentials: 'include',
             })
             channel = await channelRes.json()
-            // Update state for next time
             setCurrentChannel(channel)
           } catch (error) {
             console.error('Failed to fetch channel:', error)
@@ -215,7 +244,6 @@ export function ProductImportBlock() {
         }
 
         if (!selectedMainLanguage && languageCodes.length === 0) {
-          // No language codes in CSV, return channel languages so user can select
           resolve({
             isValid: true,
             langCodes: availableLanguages.map((lang) => lang) as (string | undefined)[],
@@ -252,7 +280,6 @@ export function ProductImportBlock() {
 
         const nameColumn = validationLanguage ? `name:${validationLanguage}` : 'name'
 
-        // Get optionGroups and optionValues columns for the main language
         const optionGroupsColumn = validationLanguage
           ? `optionGroups:${validationLanguage}`
           : 'optionGroups'
@@ -263,17 +290,13 @@ export function ProductImportBlock() {
         const optionGroupsIndex = header.indexOf(optionGroupsColumn)
         const optionValuesIndex = header.indexOf(optionValuesColumn)
 
-        // Loop through each row to validate the option values
         let currentOptionGroupCount = 0
 
         for (let i = 1; i < lines.length; i++) {
           const row = splitLines(lines[i]).map((col) => col.trim())
-
-          // Check if it's a product row (it has a 'name' field)
           const isProductRow = row[header.indexOf(nameColumn)]
 
           if (isProductRow) {
-            // It's a new product row, get the option groups
             const optionGroups = (row[optionGroupsIndex]?.split('|') ?? []).filter(
               (group) => group !== '',
             )
@@ -282,7 +305,6 @@ export function ProductImportBlock() {
             )
             currentOptionGroupCount = optionGroups.length
 
-            // Validate that the number of option values matches the number of option groups
             if (optionValues.length !== currentOptionGroupCount) {
               toast.error(
                 `Some product variants are missing product options. Please fill in all options: Row: ${i + 1}. Expected ${currentOptionGroupCount} option values but got ${optionValues.length}.`,
@@ -291,12 +313,10 @@ export function ProductImportBlock() {
               return
             }
           } else {
-            // It's a variant row, validate the option values
             const optionValues = (row[optionValuesIndex]?.split('|') ?? []).filter(
               (value) => value !== '',
             )
 
-            // Validate that the number of option values matches the product's option groups
             if (optionValues.length !== currentOptionGroupCount) {
               toast.error(
                 `Some product variants are missing product options. Please fill in all options: Row: ${i + 1}. Expected ${currentOptionGroupCount} option values but got ${optionValues.length}.`,
@@ -307,7 +327,6 @@ export function ProductImportBlock() {
           }
         }
 
-        // Check if a row contains JSON, if so check if it is valid. This should be done for all columns, not just translatable ones.
         for (let i = 1; i < lines.length; i++) {
           const row = splitLines(lines[i]).map((col) => col.trim())
           for (const col of header) {
@@ -338,7 +357,6 @@ export function ProductImportBlock() {
           }
         }
 
-        // Check for missing translation values in translatable base columns
         const { errorRows: missingBaseTranslatableValuesRows } = checkTranslatabeColumns(
           lines,
           translatableBaseColumns,
@@ -355,7 +373,6 @@ export function ProductImportBlock() {
           return
         }
 
-        // Check if all translatable columns have values for the main language
         const { errorRows, errorColumns } = checkTranslatabeColumns(
           lines,
           translatableColumns,
@@ -387,15 +404,15 @@ export function ProductImportBlock() {
     const { isValid, langCodes, clearFile = true } = await validateCsvStructure(file)
     if (isValid) {
       setSelectedFile(file)
+      setOptionsOpen(true)
     } else if (clearFile) {
       clearFileHandler()
       return
     } else {
-      // File is valid but needs language selection
       setSelectedFile(file)
+      setOptionsOpen(true)
     }
 
-    // Set available languages - either from CSV or from channel
     if (langCodes && langCodes.length > 0) {
       const filteredLangCodes = langCodes.filter((code) => code) as LanguageCode[]
       setAvailableLanguages(filteredLangCodes)
@@ -406,7 +423,6 @@ export function ProductImportBlock() {
       currentChannel?.availableLanguageCodes &&
       currentChannel.availableLanguageCodes.length > 0
     ) {
-      // No languages in CSV headers, use channel languages as fallback
       setAvailableLanguages(currentChannel.availableLanguageCodes)
       if (!selectedMainLanguage) {
         setSelectedMainLanguage(
@@ -418,21 +434,37 @@ export function ProductImportBlock() {
     }
   }
 
+  const handleFile = (file: File) => {
+    if (file.type !== 'text/csv' && !file.name.toLowerCase().endsWith('.csv')) {
+      toast.error('Invalid file type. Please upload a CSV file.')
+      clearFileHandler()
+      return
+    }
+
+    if (file.size > MAX_SIZE_BYTES) {
+      toast.error('File is larger than 20MB.')
+      clearFileHandler()
+      return
+    }
+
+    setValidateFile(file)
+    doValidation(file)
+  }
+
   const onFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
     const input = event.target
     if (input.files && input.files.length > 0) {
-      const file = input.files[0]
-      if (file.type !== 'text/csv') {
-        toast.error('Invalid file type. Please upload a CSV file.')
-        clearFileHandler()
-        return
-      }
-
-      setValidateFile(file)
-      doValidation(file)
+      handleFile(input.files[0])
     }
   }
 
+  const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragActive(false)
+    const file = event.dataTransfer.files?.[0]
+    if (file) handleFile(file)
+  }
+
   const clearFileHandler = () => {
     if (fileInputRef.current) {
       fileInputRef.current.value = ''
@@ -441,6 +473,7 @@ export function ProductImportBlock() {
     setValidateFile(null)
     setSelectedMainLanguage(undefined)
     setUpdatingStrategy('merge')
+    setOptionsOpen(false)
   }
 
   const onMainLanguageChange = (lang: LanguageCode) => {
@@ -451,137 +484,214 @@ export function ProductImportBlock() {
   }
 
   const uploadFile = async () => {
-    if (selectedFile && selectedMainLanguage && updatingStrategy) {
-      const formData = new FormData()
-      formData.append('file', selectedFile)
-      formData.append('updateProductSlug', updateProductSlug.toString())
-      formData.append('mainLanguage', selectedMainLanguage)
-      formData.append('updatingStrategy', updatingStrategy)
+    if (!selectedFile || !selectedMainLanguage || !updatingStrategy) {
+      toast.error('No file selected or main language not selected.')
+      return
+    }
 
-      try {
-        const serverPath = getServerLocation()
-        const res = await fetch(`${serverPath}/product-import/upload`, {
-          method: 'POST',
-          body: formData,
-          headers: {
-            ...getChannelHeader(),
-          },
-          credentials: 'include',
-        })
-
-        if (res.ok) {
-          clearFileHandler()
-          toast.success('The file was uploaded and has been added to the import queue.')
-        } else {
-          toast.error('An error occurred while uploading the file.')
-        }
-      } catch (error: unknown) {
-        console.error('Upload error:', error)
+    setIsUploading(true)
+    const formData = new FormData()
+    formData.append('file', selectedFile)
+    formData.append('updateProductSlug', updateProductSlug.toString())
+    formData.append('mainLanguage', selectedMainLanguage)
+    formData.append('updatingStrategy', updatingStrategy)
+
+    try {
+      const serverPath = getServerLocation()
+      const res = await fetch(`${serverPath}/product-import/upload`, {
+        method: 'POST',
+        body: formData,
+        headers: {
+          ...getChannelHeader(),
+        },
+        credentials: 'include',
+      })
+
+      if (res.ok) {
+        clearFileHandler()
+        toast.success('The file was uploaded and has been added to the import queue.')
+      } else {
         toast.error('An error occurred while uploading the file.')
       }
-    } else {
-      toast.error('No file selected or main language not selected.')
+    } catch (error: unknown) {
+      console.error('Upload error:', error)
+      toast.error('An error occurred while uploading the file.')
+    } finally {
+      setIsUploading(false)
     }
   }
 
   return (
-    <div className="space-y-6">
-      <div>
-        <Label htmlFor="file-upload">Upload CSV file</Label>
-        <div className="flex items-center gap-2 mt-2">
-          <input
-            ref={fileInputRef}
-            type="file"
-            id="file-upload"
-            accept=".csv"
-            onChange={onFileSelected}
-            className="hidden"
-          />
-          {selectedFile ? (
-            <>
-              <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
-                <UploadIcon className="mr-2 h-4 w-4" />
-                {selectedFile.name}
-              </Button>
-            </>
-          ) : (
-            <Button type="button" variant="default" onClick={() => fileInputRef.current?.click()}>
-              <UploadIcon className="mr-2 h-4 w-4" />
-              Select file
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {selectedFile && (
-        <div className="space-y-4 pt-4 border-t">
-          {config?.visibleOptions?.includes('updateProductSlug') && (
-            <div className="flex items-center space-x-2">
-              <Switch
-                id="update-slug"
-                checked={updateProductSlug}
-                onCheckedChange={setUpdateProductSlug}
-              />
-              <Label htmlFor="update-slug">Update product slugs based on name</Label>
-            </div>
-          )}
-
-          <div>
-            <Label>Select main language:</Label>
-            <RadioGroup
-              value={selectedMainLanguage || ''}
-              onValueChange={(val) => onMainLanguageChange(val as LanguageCode)}
-            >
-              <div className="flex flex-col gap-2 mt-2">
-                {availableLanguages.map((lang) => (
-                  <div key={lang} className="flex items-center space-x-2">
-                    <RadioGroupItem value={lang} id={`lang-${lang}`} />
-                    <Label htmlFor={`lang-${lang}`} className="font-normal">
-                      {lang}
-                    </Label>
-                  </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">
+            <UploadIcon className="h-5 w-5" />
+          </div>
+          <div className="space-y-1">
+            <CardTitle className="mb-0">Import products</CardTitle>
+            <CardDescription className="text-xs">Upload a CSV file to create or update products.</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div
+            onDragOver={(e) => {
+              e.preventDefault()
+              setIsDragActive(true)
+            }}
+            onDragLeave={() => setIsDragActive(false)}
+            onDrop={onDrop}
+            onClick={() => fileInputRef.current?.click()}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                fileInputRef.current?.click()
+              }
+            }}
+            className={`border-2 border-dashed rounded-lg px-6 py-10 text-center cursor-pointer transition-colors ${isDragActive
+              ? 'border-primary bg-primary/5'
+              : 'border-border hover:border-primary/40 hover:bg-muted/40'
+              }`}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              id="file-upload"
+              accept=".csv"
+              onChange={onFileSelected}
+              className="hidden"
+            />
+            {selectedFile ? (
+              <div className="flex flex-col items-center gap-2">
+                <FileTextIcon className="h-8 w-8 text-primary" />
+                <p className="text-sm font-medium">{selectedFile.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {(selectedFile.size / 1024).toFixed(1)} KB
+                </p>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    clearFileHandler()
+                  }}
+                >
+                  <XIcon className="mr-1 h-3 w-3" /> Remove
+                </Button>
               </div>
-            </RadioGroup>
-            <p className="text-sm text-muted-foreground mt-2 italic">
-              The main language is used as a fallback when translations are missing. It is
-              recommended to select the language that is used the most in your system.
-            </p>
+            ) : (
+              <div className="flex flex-col items-center gap-3">
+                <UploadCloudIcon className="h-10 w-10 text-muted-foreground" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">Drag &amp; drop your CSV file here</p>
+                  <p className="text-xs text-muted-foreground">or</p>
+                </div>
+                <Button type="button" variant="outline" size="sm">
+                  Choose file
+                </Button>
+                <p className="text-xs text-muted-foreground">
+                  CSV UTF-8 only &nbsp;•&nbsp; Max file size: 20MB
+                </p>
+              </div>
+            )}
           </div>
-
-          <div>
-            <Label>Strategy for facets and assets:</Label>
-            <RadioGroup
-              value={updatingStrategy}
-              onValueChange={(val) => setUpdatingStrategy(val as UpdatingStrategy)}
-            >
-              <div className="flex items-center space-x-2 mt-2">
-                <RadioGroupItem value="merge" id="merge" />
-                <Label htmlFor="merge" className="font-normal">
-                  Merge
-                </Label>
+        </CardContent>
+      </Card>
+
+      <Dialog open={optionsOpen} onOpenChange={(open) => (open ? setOptionsOpen(true) : clearFileHandler())}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Import options</DialogTitle>
+            <DialogDescription>
+              Configure how this CSV should be imported into your catalog.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {selectedFile && (
+              <div className="bg-muted/40 rounded-md px-3 py-2 text-sm flex items-center gap-2">
+                <FileTextIcon className="h-4 w-4 text-primary" />
+                <span className="font-medium truncate">{selectedFile.name}</span>
               </div>
+            )}
+
+            {config?.visibleOptions?.includes('updateProductSlug') && (
               <div className="flex items-center space-x-2">
-                <RadioGroupItem value="replace" id="replace" />
-                <Label htmlFor="replace" className="font-normal">
-                  Overwrite
-                </Label>
+                <Switch
+                  id="update-slug"
+                  checked={updateProductSlug}
+                  onCheckedChange={setUpdateProductSlug}
+                />
+                <Label htmlFor="update-slug">Update product slugs based on name</Label>
               </div>
-            </RadioGroup>
-            {updatingStrategy === 'replace' && (
-              <p className="text-sm text-red-600 mt-2">
-                Warning: This will remove existing facets and assets from products and variants.
-              </p>
             )}
+
+            <div>
+              <Label>Main language</Label>
+              <RadioGroup
+                value={selectedMainLanguage || ''}
+                onValueChange={(val) => onMainLanguageChange(val as LanguageCode)}
+              >
+                <div className="flex flex-wrap gap-3 mt-2">
+                  {availableLanguages.map((lang) => (
+                    <div key={lang} className="flex items-center space-x-2">
+                      <RadioGroupItem value={lang} id={`lang-${lang}`} />
+                      <Label htmlFor={`lang-${lang}`} className="font-normal uppercase">
+                        {lang}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </RadioGroup>
+              <p className="text-xs text-muted-foreground mt-2">
+                Used as a fallback when a translation is missing.
+              </p>
+            </div>
+
+            <div>
+              <Label>Strategy for facets and assets</Label>
+              <RadioGroup
+                value={updatingStrategy}
+                onValueChange={(val) => setUpdatingStrategy(val as UpdatingStrategy)}
+                className="mt-2"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="merge" id="merge" />
+                  <Label htmlFor="merge" className="font-normal">
+                    Merge
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="replace" id="replace" />
+                  <Label htmlFor="replace" className="font-normal">
+                    Overwrite
+                  </Label>
+                </div>
+              </RadioGroup>
+              {updatingStrategy === 'replace' && (
+                <p className="text-xs text-destructive mt-2">
+                  Warning: this will remove existing facets and assets from products and variants.
+                </p>
+              )}
+            </div>
           </div>
 
-          <div className="pt-2 border-t">
-            <Button type="button" onClick={uploadFile} disabled={!selectedMainLanguage}>
-              Start import now
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={clearFileHandler} disabled={isUploading}>
+              Cancel
             </Button>
-          </div>
-        </div>
-      )}
-    </div>
+            <Button
+              type="button"
+              onClick={uploadFile}
+              disabled={!selectedMainLanguage || isUploading}
+            >
+              {isUploading ? 'Uploading…' : 'Start import'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }

package/src/dashboard/index.tsx

@@ -3,9 +3,9 @@ import {
   DashboardRouteDefinition,
   PageTitle,
   Page,
-  PageLayout,
-  PageBlock,
+  Button,
 } from '@vendure/dashboard'
+import { HelpCircleIcon } from 'lucide-react'
 import { ExportProductsBulkAction } from './bulk-export'
 import { ProductImportBlock } from './import'
 import { ProductExportBlock } from './export'
@@ -16,41 +16,40 @@ export const productImportRoute: DashboardRouteDefinition = {
     sectionId: 'catalog',
     id: 'product-importer',
     url: '/product-importer',
-    title: 'Import/export products',
+    title: 'Import/export',
   },
   path: '/product-importer',
   loader: () => ({
-    breadcrumb: 'Import/export products',
+    breadcrumb: 'Import & export products',
   }),
   component: () => (
     <Page pageId="product-import">
-      <PageTitle>Import/export products</PageTitle>
-      <PageLayout>
-        <PageBlock
-          column="main"
-          blockId="main-form-import"
-          title="Import products"
-          description="Import products from a CSV file"
+      <div className="flex items-start justify-between">
+        <div>
+          <PageTitle>Import & export products</PageTitle>
+          <p className="text-sm text-muted-foreground mt-1">
+            Import products from CSV or export your entire catalog as CSV.
+          </p>
+        </div>
+        <a
+          href="https://wearehaustech.github.io/docs/vendure-plugins/product-import-export-plugin"
+          target="_blank"
+          rel="noreferrer"
+          className="hidden sm:inline-flex"
         >
+          <Button variant="outline" size="sm">
+            <HelpCircleIcon className="mr-2 h-4 w-4" />
+            Help & guide
+          </Button>
+        </a>
+      </div>
+      <div className="space-y-6 w-full">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
           <ProductImportBlock />
-        </PageBlock>
-        <PageBlock
-          column="main"
-          blockId="main-form-export"
-          title="Export products"
-          description="Exports all products to a CSV file. The export is added to the job queue and will be processed in the background. When the file is ready, you will receive an email and the exported file will be available to download from the list below."
-        >
           <ProductExportBlock />
-        </PageBlock>
-        <PageBlock
-          column="main"
-          blockId="main-form-exported-list"
-          title="Exported files"
-          description="Files available for download"
-        >
-          <ExportedList />
-        </PageBlock>
-      </PageLayout>
+        </div>
+        <ExportedList />
+      </div>
     </Page>
   ),
 }