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

package/src/dashboard/import.tsx

@@ -1,9 +1,34 @@
-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 { useActiveChannelKey } from './use-active-channel-key'
 import {
   getServerLocation,
   getChannelHeader,
@@ -12,19 +37,43 @@ 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.md#csv-format-for-import'
+const GUIDE_URL =
+  'https://github.com/WeAreHausTech/haus-tech-vendure-plugins-public/blob/main/packages/product-import-export-plugin/README.md'
+
+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)
+  const activeChannelId = useActiveChannelKey()
+
+  useEffect(() => {
+    setSelectedFile(null)
+    setValidateFile(null)
+    setSelectedMainLanguage(undefined)
+    setAvailableLanguages([])
+    setUpdatingStrategy('merge')
+    setOptionsOpen(false)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }, [activeChannelId])
 
   useEffect(() => {
+    if (!activeChannelId) return
+
     const fetchConfig = async () => {
       try {
         const serverPath = getServerLocation()
@@ -60,7 +109,7 @@ export function ProductImportBlock() {
     }
 
     fetchConfig()
-  }, [])
+  }, [activeChannelId])
 
   const splitLines = (text: string): string[] => {
     return text.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/)
@@ -75,7 +124,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 +166,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 +220,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 +233,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 +260,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 +296,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 +306,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 +321,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 +329,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 +343,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 +373,6 @@ export function ProductImportBlock() {
           }
         }
 
-        // Check for missing translation values in translatable base columns
         const { errorRows: missingBaseTranslatableValuesRows } = checkTranslatabeColumns(
           lines,
           translatableBaseColumns,
@@ -355,7 +389,6 @@ export function ProductImportBlock() {
           return
         }
 
-        // Check if all translatable columns have values for the main language
         const { errorRows, errorColumns } = checkTranslatabeColumns(
           lines,
           translatableColumns,
@@ -387,15 +420,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 +439,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 +450,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 +489,7 @@ export function ProductImportBlock() {
     setValidateFile(null)
     setSelectedMainLanguage(undefined)
     setUpdatingStrategy('merge')
+    setOptionsOpen(false)
   }
 
   const onMainLanguageChange = (lang: LanguageCode) => {
@@ -451,137 +500,225 @@ 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>
+            ) : (
+              <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>
-            </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>
-
-          <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>
+    </>
   )
 }