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

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 3.3.2-next.2
+
+### 🚀 Features
+
+- **product-import-export-plugin:** enhance email notification and import/export functionality ([c133dc5](https://github.com/WeAreHausTech/haus-tech-vendure-plugins-public/commit/c133dc5))
+
+## 3.3.2-next.1
+
+### 🚀 Features
+
+- **product-import-export-plugin:** enforce import/export acceptance criteria and enhance documentation ([b1a93b6](https://github.com/WeAreHausTech/haus-tech-vendure-plugins-public/commit/b1a93b6))
+- **product-import-export-plugin:** update pre-version command and clean up export artifacts ([1cde024](https://github.com/WeAreHausTech/haus-tech-vendure-plugins-public/commit/1cde024))
+
 ## 3.3.2-next.0
 
 ### 🚀 Features

package/README.mdx

@@ -19,16 +19,16 @@ A Vendure plugin for importing and exporting product data via CSV. Supports bulk
 
 ## Features
 
-* **Import** – Bulk upload products from CSV with validation, custom fields, assets, facets, and variants
-* **Export** – Export products to CSV with selected fields; export all products or a selection
-* **Storage strategies** – Store exported files in S3 or locally on disk (with automatic fallback)
-* **UI** – Admin UI and Dashboard integration for import and export
+- **Import** – Bulk upload products from CSV with validation, custom fields, assets, facets, and variants
+- **Export** – Export products to CSV with selected fields; export all products or a selection
+- **Storage strategies** – Store exported files in S3 or locally on disk (with automatic fallback)
+- **UI** – Admin UI and Dashboard integration for import and export
 
 ![Dashboard UI](assets/Screenshot-dashboard-ui.png)
 
 ## Compatibility
 
-Vendure **^2.0.0** or **^3.0.0**
+Vendure **^3.6.0**
 
 ## Getting started
 
@@ -65,13 +65,13 @@ export const config = {
 
 ### Import options
 
-| Option                   | Type                                            | Default    | Description                                                                                                                  |
-| ------------------------ | ----------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `updateProductSlug`      | `boolean`                                       | `true`     | Update product slug from the `name` field in the CSV                                                                         |
-| `restoreSoftDeleted`     | `boolean`                                       | `true`     | Restore soft-deleted products/variants found by id or SKU during import. If `false`, new products will be created instead. |
-| `storageStrategy`        | `ImportJobStorageStrategy`                      | local disk | Strategy instance for queued import file storage and retrieval.                                                              |
-| `storageStrategyFactory` | `(injector: Injector) => ImportJobStorageStrategy` | `undefined` | Factory for DI-aware strategy creation (recommended for S3/remote storage).                                                  |
-| `importJobStorage`       | `'local' \| 's3'`                              | `'local'`  | Deprecated compatibility flag. Prefer `storageStrategy` / `storageStrategyFactory`.                                          |
+| Option                   | Type                                               | Default     | Description                                                                                                                |
+| ------------------------ | -------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `updateProductSlug`      | `boolean`                                          | `true`      | Update product slug from the `name` field in the CSV                                                                       |
+| `restoreSoftDeleted`     | `boolean`                                          | `true`      | Restore soft-deleted products/variants found by id or SKU during import. If `false`, new products will be created instead. |
+| `storageStrategy`        | `ImportJobStorageStrategy`                         | local disk  | Strategy instance for queued import file storage and retrieval.                                                            |
+| `storageStrategyFactory` | `(injector: Injector) => ImportJobStorageStrategy` | `undefined` | Factory for DI-aware strategy creation (recommended for S3/remote storage).                                                |
+| `importJobStorage`       | `'local' \| 's3'`                                  | `'local'`   | Deprecated compatibility flag. Prefer `storageStrategy` / `storageStrategyFactory`.                                        |
 
 Available import storage strategies:
 
@@ -94,8 +94,8 @@ Available import storage strategies:
 
 The plugin supports configurable storage for exported files:
 
-* **S3** – Stores export files in an S3-compatible bucket
-* **Disk (default)** – Saves files locally on the server
+- **S3** – Stores export files in an S3-compatible bucket
+- **Disk (default)** – Saves files locally on the server
 
 ## CSV Format for Import
 
@@ -106,21 +106,21 @@ The plugin supports configurable storage for exported files:
 
 ### Optional columns
 
-| Column                        | Format                                                       | Example                                                                                    |
-| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| `name`, `slug`, `description` | Text, or `name:en`, `name:sv` for translations               | `My Product`                                                                               |
-| `assets`                      | Pipe-separated URLs, or JSON `[{"url":"...","name":"..."}]`  | `https://example.com/1.jpg\|https://example.com/2.jpg`                                     |
-| `facets`                      | `facet:value` pairs, pipe-separated                          | `Brand:Acme\|Category:Electronics`                                                         |
-| `optionGroups`                | Pipe-separated group names                                   | `Size\|Color`                                                                              |
-| `optionValues`                | Pipe-separated values (order matches option groups)          | `Large\|Blue`                                                                              |
-| `price`                       | Number (in smallest currency unit)                           | `9999`                                                                                     |
-| `taxCategory`                 | Tax category name                                            | `standard`                                                                                 |
-| `stockOnHand`                 | Number                                                       | `100`                                                                                      |
-| `trackInventory`              | `true` or `false`                                            | `true`                                                                                     |
-| `variantAssets`               | Same format as `assets`                                      | `https://example.com/variant.jpg`                                                          |
-| `variantFacets`               | Same format as `facets`                                      | `Material:Cotton`                                                                          |
-| `enabled`                     | `true` or `false`                                            | `true`                                                                                     |
-| Custom fields                 | Column name = custom field name; value depends on field type | Add columns for any Product or ProductVariant custom fields defined in your Vendure config |
+| Column                        | Format                                                                                                                             | Example                                                                                    |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `name`, `slug`, `description` | Text, or `name:en`, `name:sv` for translations                                                                                     | `My Product`                                                                               |
+| `assets`                      | Pipe-separated URLs, or JSON `[{"url":"...","name":"..."}]`                                                                        | `https://example.com/1.jpg\|https://example.com/2.jpg`                                     |
+| `facets`                      | `facet:value` pairs, pipe-separated                                                                                                | `Brand:Acme\|Category:Electronics`                                                         |
+| `optionGroups`                | Pipe-separated group names. Use `name:code` to share a group across products (see [Sharing option groups](#sharing-option-groups)) | `Size\|Color` or `size:shoe-size`                                                          |
+| `optionValues`                | Pipe-separated values (order matches option groups)                                                                                | `Large\|Blue`                                                                              |
+| `price`                       | Number (in smallest currency unit)                                                                                                 | `9999`                                                                                     |
+| `taxCategory`                 | Tax category name                                                                                                                  | `standard`                                                                                 |
+| `stockOnHand`                 | Number                                                                                                                             | `100`                                                                                      |
+| `trackInventory`              | `true` or `false`                                                                                                                  | `true`                                                                                     |
+| `variantAssets`               | Same format as `assets`                                                                                                            | `https://example.com/variant.jpg`                                                          |
+| `variantFacets`               | Same format as `facets`                                                                                                            | `Material:Cotton`                                                                          |
+| `enabled`                     | `true` or `false`                                                                                                                  | `true`                                                                                     |
+| Custom fields                 | Column name = custom field name; value depends on field type                                                                       | Add columns for any Product or ProductVariant custom fields defined in your Vendure config |
 
 #### Import behavior rules
 
@@ -128,6 +128,28 @@ The plugin supports configurable storage for exported files:
 - If a column exists in the header but the cell is empty, that field is explicitly cleared.
 - For products with more than one variant, `optionGroups` and `optionValues` are required.
 
+#### Sharing option groups
+
+By default, each product gets its own option groups. To **share an option group** across
+multiple products (e.g. a common "Size" group for all shoes), use the `name:code` syntax in the
+`optionGroups` column: `size:shoe-size`. All products that reference the same code will share
+a single option group. Products using a plain name (e.g. just `size`) will each get their own
+independent option group.
+
+```csv
+...optionGroups     , optionValues , ...
+# Each shoe product shares a single "shoe-size" option group:
+"size:shoe-size"    , Small        , ...
+"size:shoe-size"    , Medium       , ...
+# This product gets its own independent "size" group:
+"size"              , 4GB          , ...
+```
+
+The first product to reference a given code defines the full set of option values for that
+shared group; subsequent products may use any subset of those values. Codes are language-
+agnostic — only the `name` portion before the colon is translated per language column
+(`optionGroups:en`, `optionGroups:sv`, etc.).
+
 #### Multi-language support
 
 Use language-specific columns by suffixing the field name with the language code. The language codes must match those configured in your Vendure instance (e.g. `en`, `sv`).
@@ -186,16 +208,31 @@ The Admin UI offers basic import and export. Some features such as the export-al
 
 ## Optional: Email notification on export complete
 
-If you use `@vendure/email-plugin`, you can add an email notification when an export finishes by importing it in the handler from the `/email` subpath. Create a template in your email templates directory: `product-export-complete/body.hbs`
+If you use `@vendure/email-plugin`, you can add an email notification when an export finishes from the `/email` subpath.
+
+The plugin now provides a default fallback template for `product-export-complete/body.hbs`.  
+If you define your own template in your app's template directory, your template takes precedence.
+Note: templates for `@vendure/email-plugin` should be valid MJML.
 
 ```typescript
-import { DefaultEmailPlugin } from '@vendure/email-plugin'
-import { productExportedHandler } from '@haus-tech/product-import-export-plugin/email'
+import path from 'path'
+import {
+  DefaultEmailPlugin,
+  FileBasedTemplateLoader,
+  defaultEmailHandlers,
+} from '@vendure/email-plugin'
+import {
+  withProductExportedHandler,
+  withProductExportedTemplateFallback,
+} from '@haus-tech/product-import-export-plugin/email'
 
 export const config = {
   plugins: [
     DefaultEmailPlugin.init({
-      handlers: [productExportedHandler],
+      handlers: withProductExportedHandler(defaultEmailHandlers),
+      templateLoader: withProductExportedTemplateFallback(
+        new FileBasedTemplateLoader(path.join(__dirname, '../static/email/templates')),
+      ),
     }),
   ],
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haus-tech/product-import-export-plugin",
-  "version": "3.3.2-next.1",
+  "version": "3.3.2-next.3",
   "description": "A Vendure plugin for importing and exporting products using a CSV file",
   "author": "Haus Tech",
   "repository": {
@@ -53,13 +53,13 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "csv-parse": "^5.6.0",
+    "csv-parse": "^6.0.0",
     "csv-stringify": "^6.6.0"
   },
   "peerDependencies": {
-    "@vendure/core": "^2.0.0 || ^3.0.0",
-    "@vendure/email-plugin": "^2.0.0 || ^3.0.0",
-    "csv-parse": "^5.5.6",
+    "@vendure/core": "^3.6.0",
+    "@vendure/email-plugin": "^3.6.0",
+    "csv-parse": "^6.0.0",
     "csv-stringify": "^6.5.1",
     "slug": "^9.1.0"
   },

package/src/dashboard/bulk-export.tsx

@@ -22,6 +22,7 @@ export function ExportProductsBulkAction({
   return (
     <>
       <DataTableBulkActionItem
+        closeOnClick={false}
         onClick={() => setDialogOpen(true)}
         label="Export products to CSV"
         icon={DownloadIcon}

package/src/dashboard/export-configuration-panel.tsx

@@ -0,0 +1,418 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Checkbox,
+  Input,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  RadioGroup,
+  RadioGroupItem,
+  toast,
+} from '@vendure/dashboard'
+import { ChevronRight, InfoIcon } from 'lucide-react'
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  forwardRef,
+  useState,
+} from 'react'
+import {
+  getServerLocation,
+  getChannelHeader,
+  type PluginInitOptions,
+  type ExportFields,
+  type ProductFields,
+  type VariantFields,
+} from './utils'
+
+const MANDATORY_OPTION_FIELDS: Array<ProductFields | VariantFields> = [
+  'optionGroups',
+  'optionValues',
+]
+
+const AVAILABLE_EXPORT_FIELDS: ExportFields = [
+  'name',
+  'slug',
+  'description',
+  'assets',
+  'facets',
+  'optionGroups',
+  'sku',
+  'optionValues',
+  'price',
+  'taxCategory',
+  'stockOnHand',
+  'trackInventory',
+  'variantAssets',
+  'variantFacets',
+  'enabled',
+]
+
+export type ExportConfigurationPanelProps = {
+  /** Selected product IDs for scoped export; omit when `isExportAll` (treated as empty). */
+  productIds?: string[]
+  isExportAll: boolean
+  /** Fetch config + fields only while true (e.g. dialog `open`) */
+  active: boolean
+  /** Prefix for input/checkbox ids so modal vs page never collide */
+  idPrefix?: string
+  /** Expand “Select fields to export” on first paint (e.g. modal); inline page keeps it collapsed */
+  fieldsAccordionDefaultOpen?: boolean
+  onExportSuccess?: () => void
+}
+
+export type ExportConfigurationPanelHandle = {
+  submitExport: () => Promise<void>
+}
+
+export const ExportConfigurationPanel = forwardRef<
+  ExportConfigurationPanelHandle,
+  ExportConfigurationPanelProps
+>(function ExportConfigurationPanel(
+  {
+    productIds,
+    isExportAll,
+    active,
+    idPrefix = 'export-config',
+    fieldsAccordionDefaultOpen = false,
+    onExportSuccess,
+  },
+  ref,
+) {
+  const resolvedProductIds = productIds ?? []
+
+  const [config, setConfig] = useState<PluginInitOptions['exportOptions'] | null>(null)
+
+  const [fileName, setFileName] = useState('')
+  const [customFieldNames, setCustomFieldNames] = useState<string[]>([])
+  const [selectedCustomFields, setSelectedCustomFields] = useState<string[]>([])
+  const [exportAssetsAs, setExportAssetsAs] = useState<'url' | 'json'>('url')
+  const [selectedExportFields, setSelectedExportFields] = useState<ExportFields>([])
+  const [toggleAllChecked, setToggleAllChecked] = useState(false)
+
+  /** Stable primitive so effects / callbacks don’t churn on fresh array references with the same IDs. */
+  const productIdsFetchKey = resolvedProductIds.join(',')
+
+  useEffect(() => {
+    if (!active) return
+
+    const fetchInitial = async () => {
+      try {
+        const serverPath = getServerLocation()
+        const [configRes, customFieldsRes] = await Promise.all([
+          fetch(`${serverPath}/product-import-export/config`, {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+              ...getChannelHeader(),
+            },
+            credentials: 'include',
+          }),
+          fetch(`${serverPath}/product-export/custom-fields`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              ...getChannelHeader(),
+            },
+            credentials: 'include',
+            body: JSON.stringify(
+              resolvedProductIds.length > 0 ? resolvedProductIds : [],
+            ),
+          }),
+        ])
+
+        const configData = await configRes.json()
+        const customFieldsData = await customFieldsRes.json()
+
+        setConfig(configData.exportOptions)
+
+        const names = customFieldsData.map((field: { name: string }) => field.name)
+        setCustomFieldNames(names)
+        setSelectedCustomFields([...names])
+
+        const defaultAssets =
+          configData.exportOptions?.defaultExportAssetsAs ||
+          configData.exportOptions?.exportAssetsAsOptions?.[0] ||
+          'url'
+        setExportAssetsAs(defaultAssets)
+
+        const initialExportFields = Array.from(
+          new Set([
+            ...(configData.exportOptions?.defaultExportFields || []),
+            ...(configData.exportOptions?.requiredExportFields || []),
+            ...MANDATORY_OPTION_FIELDS,
+          ]),
+        ) as ExportFields
+
+        setSelectedExportFields(initialExportFields)
+      } catch (error) {
+        console.error('Failed to fetch export config:', error)
+      }
+    }
+
+    fetchInitial()
+  }, [active, productIdsFetchKey])
+
+  const derivedToggleAll = useMemo(() => {
+    const allStandard = AVAILABLE_EXPORT_FIELDS.every((f) => selectedExportFields.includes(f))
+    const allCustom =
+      customFieldNames.length === 0 ||
+      customFieldNames.every((f) => selectedCustomFields.includes(f))
+    return allStandard && allCustom
+  }, [selectedExportFields, selectedCustomFields, customFieldNames])
+
+  useEffect(() => {
+    setToggleAllChecked(derivedToggleAll)
+  }, [derivedToggleAll])
+
+  const toggleCustomField = (fieldName: string) => {
+    setSelectedCustomFields((prev) =>
+      prev.includes(fieldName) ? prev.filter((f) => f !== fieldName) : [...prev, fieldName],
+    )
+  }
+
+  const toggleExportField = (fieldName: ProductFields | VariantFields) => {
+    if (MANDATORY_OPTION_FIELDS.includes(fieldName)) return
+    setSelectedExportFields((prev) =>
+      prev.includes(fieldName)
+        ? prev.filter((f) => f !== fieldName)
+        : [...prev, fieldName],
+    )
+  }
+
+  const toggleSelectAll = (checked: boolean) => {
+    setToggleAllChecked(checked)
+    if (checked) {
+      setSelectedExportFields([...AVAILABLE_EXPORT_FIELDS])
+      setSelectedCustomFields([...customFieldNames])
+    } else {
+      setSelectedExportFields([
+        ...(config?.requiredExportFields || []),
+        ...MANDATORY_OPTION_FIELDS,
+      ])
+      setSelectedCustomFields([])
+    }
+  }
+
+  const bothAssetModes =
+    config?.exportAssetsAsOptions?.includes('url') &&
+    config?.exportAssetsAsOptions?.includes('json')
+
+  const submitExport = useCallback(async () => {
+    try {
+      const serverPath = getServerLocation()
+      const trimmed = fileName.trim()
+      const finalFileName = trimmed || config?.defaultFileName || 'products_export.csv'
+      const endpoint = isExportAll ? 'export-all' : 'export'
+      const body = isExportAll ? undefined : JSON.stringify(resolvedProductIds)
+
+      const res = await fetch(
+        `${serverPath}/product-export/${endpoint}?fileName=${encodeURIComponent(
+          finalFileName,
+        )}&customFields=${encodeURIComponent(
+          selectedCustomFields.join(','),
+        )}&exportAssetsAs=${exportAssetsAs}&selectedExportFields=${encodeURIComponent(
+          selectedExportFields.join(','),
+        )}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...getChannelHeader(),
+          },
+          credentials: 'include',
+          ...(body && { body }),
+        },
+      )
+
+      if (!res.ok) {
+        const json = await res.json().catch(() => ({}))
+        throw new Error(json?.message || 'Export failed')
+      }
+
+      toast.success(
+        isExportAll
+          ? 'Export queued. You will receive an email when the file is ready.'
+          : `Export job queued successfully. ${resolvedProductIds.length} products will be exported.`,
+      )
+      onExportSuccess?.()
+    } catch (error: unknown) {
+      console.error(error)
+      toast.error((error as Error)?.message || 'Failed to queue export')
+    }
+  }, [
+    fileName,
+    config?.defaultFileName,
+    isExportAll,
+    productIdsFetchKey,
+    selectedCustomFields,
+    exportAssetsAs,
+    selectedExportFields,
+    onExportSuccess,
+  ])
+
+  useImperativeHandle(ref, () => ({ submitExport }), [submitExport])
+
+  if (!active) {
+    return null
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor={`${idPrefix}-file-name`}>File name (optional)</Label>
+        <p className="text-xs text-muted-foreground mt-1">
+          A timestamp is added automatically for uniqueness.
+        </p>
+        <Input
+          id={`${idPrefix}-file-name`}
+          value={fileName}
+          onChange={(e) => setFileName(e.target.value)}
+          placeholder={config?.defaultFileName || 'products_export.csv'}
+          className="mt-2"
+        />
+      </div>
+
+      <Accordion
+        className="border rounded-lg px-3"
+        defaultValue={
+          fieldsAccordionDefaultOpen ? ['select-fields'] : ([] as string[])
+        }
+      >
+        <AccordionItem value="select-fields" className="border-0">
+          <AccordionTrigger className="group/trigger flex w-full items-center gap-3 py-3 text-sm hover:no-underline [&>svg:last-child]:size-4 [&>svg:last-child]:shrink-0 [&>svg:last-child]:self-center">
+            <ChevronRight className="text-primary size-4 shrink-0 self-center transition-transform duration-200 group-data-[state=open]/trigger:rotate-90" />
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-1 self-center text-left leading-snug">
+              <span className="font-medium text-foreground">Configure fields to export</span>
+            </span>
+          </AccordionTrigger>
+          <AccordionContent className="space-y-4 pb-4 pt-4 border-t border-border">
+            <div className="flex items-center space-x-2 pt-2">
+              <Checkbox
+                id={`${idPrefix}-select-all`}
+                checked={toggleAllChecked}
+                onCheckedChange={(checked) => toggleSelectAll(checked === true)}
+              />
+              <Label htmlFor={`${idPrefix}-select-all`} className="font-normal">
+                Select all fields
+              </Label>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+              {AVAILABLE_EXPORT_FIELDS.map((field) => (
+                <div key={field} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={`${idPrefix}-field-${field}`}
+                    checked={selectedExportFields.includes(field)}
+                    onCheckedChange={() => toggleExportField(field)}
+                    disabled={
+                      config?.requiredExportFields?.includes(field) ||
+                      MANDATORY_OPTION_FIELDS.includes(field)
+                    }
+                  />
+                  <Label htmlFor={`${idPrefix}-field-${field}`} className="font-normal">
+                    {field}
+                  </Label>
+                </div>
+              ))}
+            </div>
+
+            {customFieldNames.length > 0 && (
+              <div className="space-y-2 pt-4 border-t">
+                <Label className="text-muted-foreground pb-2">Custom fields</Label>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {customFieldNames.map((field) => (
+                    <div key={field} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={`${idPrefix}-custom-${field}`}
+                        checked={selectedCustomFields.includes(field)}
+                        onCheckedChange={() => toggleCustomField(field)}
+                      />
+                      <Label htmlFor={`${idPrefix}-custom-${field}`} className="font-normal">
+                        {field}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+      {bothAssetModes ? (
+        <Accordion className="border rounded-lg px-3" defaultValue={[]}>
+          <AccordionItem value="advanced-settings" className="border-0">
+            <AccordionTrigger className="group/trigger flex w-full items-center gap-3 py-3 text-sm hover:no-underline [&>svg:last-child]:size-4 [&>svg:last-child]:shrink-0 [&>svg:last-child]:self-center">
+              <ChevronRight className="text-primary size-4 shrink-0 self-center transition-transform duration-200 group-data-[state=open]/trigger:rotate-90" />
+              <span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-1 self-center text-left leading-snug">
+                <span className="font-medium text-foreground">Advanced settings</span>
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="space-y-4 pb-4 pt-4 border-t border-border">
+              <div className="flex flex-row flex-wrap items-center gap-x-6 gap-y-2 pt-2">
+                <div className="flex shrink-0 items-center gap-1">
+                  <Label className="font-medium">Export assets as</Label>
+                  <Popover>
+                    <PopoverTrigger
+                      type="button"
+                      className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                      aria-label="What does export assets as mean?"
+                    >
+                      <InfoIcon className="h-4 w-4" />
+                    </PopoverTrigger>
+                    <PopoverContent className="w-80 text-sm" align="start" side="top">
+                      <p className="font-medium text-foreground">Asset columns in the CSV</p>
+                      <p className="mt-2 text-muted-foreground">
+                        Controls how product and variant asset fields are serialized in the export.
+                      </p>
+                      <ul className="mt-3 list-disc space-y-2 pl-4 text-muted-foreground">
+                        <li>
+                          <span className="font-medium text-foreground">URL only</span> — each cell
+                          lists asset file URLs separated by{' '}
+                          <span className="font-mono text-xs">|</span>.
+                        </li>
+                        <li>
+                          <span className="font-medium text-foreground">Full JSON</span> — each cell
+                          contains JSON with <span className="font-mono text-xs">id</span>,{' '}
+                          <span className="font-mono text-xs">name</span>, and{' '}
+                          <span className="font-mono text-xs">url</span> per asset.
+                        </li>
+                      </ul>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <RadioGroup
+                  value={exportAssetsAs}
+                  onValueChange={(val) => setExportAssetsAs(val as 'url' | 'json')}
+                  className="flex flex-row flex-wrap gap-6"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="url" id={`${idPrefix}-assets-url`} />
+                    <Label htmlFor={`${idPrefix}-assets-url`} className="font-normal">
+                      URL only
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="json" id={`${idPrefix}-assets-json`} />
+                    <Label htmlFor={`${idPrefix}-assets-json`} className="font-normal">
+                      Full JSON
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      ) : null}
+    </div>
+  )
+})
+
+ExportConfigurationPanel.displayName = 'ExportConfigurationPanel'