@haus-tech/product-import-export-plugin 3.3.10-next.1 → 3.3.10-next.2

package/src/dashboard/import.tsx

@@ -1,31 +1,7 @@
-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 {
@@ -36,26 +12,17 @@ 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)
 
   useEffect(() => {
     const fetchConfig = async () => {
@@ -108,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 {
@@ -150,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]
@@ -204,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 {
@@ -217,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)
@@ -244,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)[],
@@ -280,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'
@@ -290,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 !== '',
             )
@@ -305,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}.`,
@@ -313,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}.`,
@@ -327,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) {
@@ -357,6 +338,7 @@ export function ProductImportBlock() {
           }
         }
 
+        // Check for missing translation values in translatable base columns
         const { errorRows: missingBaseTranslatableValuesRows } = checkTranslatabeColumns(
           lines,
           translatableBaseColumns,
@@ -373,6 +355,7 @@ export function ProductImportBlock() {
           return
         }
 
+        // Check if all translatable columns have values for the main language
         const { errorRows, errorColumns } = checkTranslatabeColumns(
           lines,
           translatableColumns,
@@ -404,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)
@@ -423,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(
@@ -434,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 = () => {
@@ -473,7 +441,6 @@ export function ProductImportBlock() {
     setValidateFile(null)
     setSelectedMainLanguage(undefined)
     setUpdatingStrategy('merge')
-    setOptionsOpen(false)
   }
 
   const onMainLanguageChange = (lang: LanguageCode) => {
@@ -484,214 +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>
   )
 }

package/src/dashboard/index.tsx

@@ -3,9 +3,9 @@ import {
   DashboardRouteDefinition,
   PageTitle,
   Page,
-  Button,
+  PageLayout,
+  PageBlock,
 } from '@vendure/dashboard'
-import { HelpCircleIcon } from 'lucide-react'
 import { ExportProductsBulkAction } from './bulk-export'
 import { ProductImportBlock } from './import'
 import { ProductExportBlock } from './export'
@@ -16,40 +16,41 @@ export const productImportRoute: DashboardRouteDefinition = {
     sectionId: 'catalog',
     id: 'product-importer',
     url: '/product-importer',
-    title: 'Import/export',
+    title: 'Import/export products',
   },
   path: '/product-importer',
   loader: () => ({
-    breadcrumb: 'Import & export products',
+    breadcrumb: 'Import/export products',
   }),
   component: () => (
     <Page pageId="product-import">
-      <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"
+      <PageTitle>Import/export products</PageTitle>
+      <PageLayout>
+        <PageBlock
+          column="main"
+          blockId="main-form-import"
+          title="Import products"
+          description="Import products from a CSV file"
         >
-          <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 />
-        </div>
-        <ExportedList />
-      </div>
+        </PageBlock>
+        <PageBlock
+          column="main"
+          blockId="main-form-exported-list"
+          title="Exported files"
+          description="Files available for download"
+        >
+          <ExportedList />
+        </PageBlock>
+      </PageLayout>
     </Page>
   ),
 }