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

package/src/dashboard/import.tsx

@@ -1,34 +1,9 @@
-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 { Button, Switch, Label, RadioGroup, RadioGroupItem } from '@vendure/dashboard'
+import { UploadIcon } 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,
@@ -37,43 +12,19 @@ import {
   type PluginInitOptions,
 } from './utils'
 
-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
-
+// Import page component
 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()
@@ -109,7 +60,7 @@ export function ProductImportBlock() {
     }
 
     fetchConfig()
-  }, [activeChannelId])
+  }, [])
 
   const splitLines = (text: string): string[] => {
     return text.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/)
@@ -124,6 +75,7 @@ export function ProductImportBlock() {
     endChar: string
     isJson?: boolean
   } => {
+    // Replace starting and ending double quotes if exists
     const trimmedText = text.trim().replace(/^"/, '').replace(/"$/, '')
 
     return {
@@ -166,6 +118,7 @@ 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]
@@ -220,6 +173,7 @@ 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 {
@@ -233,6 +187,7 @@ 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)
@@ -260,6 +215,7 @@ 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)[],
@@ -296,6 +252,7 @@ export function ProductImportBlock() {
 
         const nameColumn = validationLanguage ? `name:${validationLanguage}` : 'name'
 
+        // Get optionGroups and optionValues columns for the main language
         const optionGroupsColumn = validationLanguage
           ? `optionGroups:${validationLanguage}`
           : 'optionGroups'
@@ -306,13 +263,17 @@ 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 !== '',
             )
@@ -321,6 +282,7 @@ 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}.`,
@@ -329,10 +291,12 @@ 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}.`,
@@ -343,6 +307,7 @@ 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) {
@@ -373,6 +338,7 @@ export function ProductImportBlock() {
           }
         }
 
+        // Check for missing translation values in translatable base columns
         const { errorRows: missingBaseTranslatableValuesRows } = checkTranslatabeColumns(
           lines,
           translatableBaseColumns,
@@ -389,6 +355,7 @@ export function ProductImportBlock() {
           return
         }
 
+        // Check if all translatable columns have values for the main language
         const { errorRows, errorColumns } = checkTranslatabeColumns(
           lines,
           translatableColumns,
@@ -420,15 +387,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)
@@ -439,6 +406,7 @@ 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(
@@ -450,35 +418,19 @@ 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) {
-      handleFile(input.files[0])
-    }
-  }
+      const file = input.files[0]
+      if (file.type !== 'text/csv') {
+        toast.error('Invalid file type. Please upload a CSV file.')
+        clearFileHandler()
+        return
+      }
 
-  const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault()
-    setIsDragActive(false)
-    const file = event.dataTransfer.files?.[0]
-    if (file) handleFile(file)
+      setValidateFile(file)
+      doValidation(file)
+    }
   }
 
   const clearFileHandler = () => {
@@ -489,7 +441,6 @@ export function ProductImportBlock() {
     setValidateFile(null)
     setSelectedMainLanguage(undefined)
     setUpdatingStrategy('merge')
-    setOptionsOpen(false)
   }
 
   const onMainLanguageChange = (lang: LanguageCode) => {
@@ -500,225 +451,137 @@ export function ProductImportBlock() {
   }
 
   const uploadFile = async () => {
-    if (!selectedFile || !selectedMainLanguage || !updatingStrategy) {
-      toast.error('No file selected or main language not selected.')
-      return
-    }
+    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)
 
-    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 {
+      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)
         toast.error('An error occurred while uploading the file.')
       }
-    } catch (error: unknown) {
-      console.error('Upload error:', error)
-      toast.error('An error occurred while uploading the file.')
-    } finally {
-      setIsUploading(false)
+    } else {
+      toast.error('No file selected or main language not selected.')
     }
   }
 
   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">
-            <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 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>
+                ))}
               </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>
-        </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>
+            <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>
+              </div>
               <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>
+                <RadioGroupItem value="replace" id="replace" />
+                <Label htmlFor="replace" className="font-normal">
+                  Overwrite
+                </Label>
               </div>
-            )}
-
-            <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.
+            </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>
-
-            <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>
 
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={clearFileHandler}
-              disabled={isUploading}
-            >
-              Cancel
+          <div className="pt-2 border-t">
+            <Button type="button" onClick={uploadFile} disabled={!selectedMainLanguage}>
+              Start import now
             </Button>
-            <Button
-              type="button"
-              onClick={uploadFile}
-              disabled={!selectedMainLanguage || isUploading}
-            >
-              {isUploading ? 'Uploading…' : 'Start import'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
+          </div>
+        </div>
+      )}
+    </div>
   )
 }