@haus-tech/product-import-export-plugin 2.2.0-dev.0

package/dist/services/product-export.service.js

@@ -0,0 +1,340 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductExportService = void 0;
+const common_1 = require("@nestjs/common");
+const core_1 = require("@vendure/core");
+const constants_1 = require("../constants");
+const csv_writer_1 = require("csv-writer");
+const path = __importStar(require("path"));
+const os_1 = __importDefault(require("os"));
+const lodash_1 = require("lodash");
+let ProductExportService = class ProductExportService {
+    options;
+    productService;
+    stockLevelService;
+    entityHydratorService;
+    channelService;
+    configService;
+    constructor(options, productService, stockLevelService, entityHydratorService, channelService, configService) {
+        this.options = options;
+        this.productService = productService;
+        this.stockLevelService = stockLevelService;
+        this.entityHydratorService = entityHydratorService;
+        this.channelService = channelService;
+        this.configService = configService;
+    }
+    async createExportFile(ctx, selectionIds, fileName, selectedCustomFields, exportAssetsAs, selectedExportFields) {
+        const products = await this.productService.findByIds(ctx, selectionIds);
+        const channel = await this.channelService.findOne(ctx, ctx.channelId);
+        if (!channel) {
+            throw new Error('Channel not found');
+        }
+        const languages = channel.availableLanguageCodes;
+        const allCustomFieldNames = await this.getCustomFields(ctx, selectionIds);
+        const filteredCustomFieldNames = selectedCustomFields
+            .split(',')
+            .filter((field) => allCustomFieldNames.some((f) => f.name === field))
+            .map((field) => {
+            const found = allCustomFieldNames.find((f) => f.name === field);
+            return found ? `${found.name}:${found.type}` : '';
+        });
+        const exportFile = path.join(os_1.default.tmpdir(), fileName);
+        const headers = [];
+        headers.push({ id: 'productId', title: 'productId' });
+        // Add headers for translations
+        for (const lang of languages) {
+            headers.push({ id: `name:${lang}`, title: `name:${lang}` });
+            headers.push({ id: `slug:${lang}`, title: `slug:${lang}` });
+            headers.push({ id: `description:${lang}`, title: `description:${lang}` });
+        }
+        headers.push({ id: 'assets', title: 'assets' }, ...languages.map((lang) => ({ id: `facets:${lang}`, title: `facets:${lang}` })), ...languages.map((lang) => ({ id: `optionGroups:${lang}`, title: `optionGroups:${lang}` })), ...languages.map((lang) => ({ id: `optionValues:${lang}`, title: `optionValues:${lang}` })), { id: 'sku', title: 'sku' }, { id: 'price', title: 'price' }, { id: 'taxCategory', title: 'taxCategory' }, { id: 'stockOnHand', title: 'stockOnHand' }, { id: 'trackInventory', title: 'trackInventory' }, { id: 'variantAssets', title: 'variantAssets' }, ...languages.map((lang) => ({ id: `variantFacets:${lang}`, title: `variantFacets:${lang}` })), ...filteredCustomFieldNames.map((field) => ({
+            id: field,
+            title: field,
+        })));
+        const selectedExportFieldsArray = selectedExportFields.split(',');
+        const selectedExportFieldsSet = new Set(selectedExportFieldsArray);
+        const filteredHeaders = headers.filter((header) => {
+            if (header.id.includes(':')) {
+                const field = header.id.split(':')[0];
+                return selectedExportFieldsSet.has(field);
+            }
+            return selectedExportFieldsSet.has(header.id);
+        });
+        const csvWriter = (0, csv_writer_1.createObjectCsvWriter)({
+            path: exportFile,
+            header: filteredHeaders,
+        });
+        for (const product of products) {
+            const records = [];
+            const hydratedProduct = await this.entityHydratorService.hydrate(ctx, product, {
+                relations: [
+                    'variants',
+                    'facetValues',
+                    'facetValues.facet',
+                    'optionGroups',
+                    'assets',
+                    'variants.assets',
+                    'variants.facetValues',
+                    'variants.facetValues.facet',
+                    'variants.options',
+                ],
+            });
+            const { assets = [], facetValues = [], optionGroups = [], variants = [], translations = [], customFields = {}, } = hydratedProduct;
+            const nameTranslations = this.mapTranslations(translations, 'name', languages);
+            const slugTranslations = this.mapTranslations(translations, 'slug', languages);
+            const descriptionTranslations = this.mapTranslations(translations, 'description', languages);
+            // Filter out all variants that are soft deleted
+            const activeVariants = variants.filter((v) => !v.deletedAt);
+            const productAssets = assets.length === 0
+                ? ''
+                : assets.length > 0
+                    ? this.handleAssets(assets.map(({ asset }) => asset), exportAssetsAs)
+                    : this.handleAssets([hydratedProduct.featuredAsset], exportAssetsAs);
+            const productFacets = languages.reduce((acc, lang) => {
+                acc[lang] = facetValues
+                    .map((facetValue) => this.mapFacetTranslations(facetValue, lang))
+                    .filter((facet) => facet)
+                    .join('|');
+                return acc;
+            }, {});
+            const optionGroupNames = languages.reduce((acc, lang) => {
+                acc[lang] = (0, lodash_1.sortBy)(optionGroups, (g) => g.id)
+                    .map((group) => this.mapTranslations(group.translations, 'name', [lang])[lang])
+                    .filter((name) => name)
+                    .join('|');
+                return acc;
+            }, {});
+            for (const variant of activeVariants) {
+                const variantValues = languages.reduce((acc, lang) => {
+                    acc[lang] = ((0, lodash_1.sortBy)(variant.options, (o) => o.groupId) || [])
+                        .map((option) => this.mapTranslations(option.translations, 'name', [lang])[lang])
+                        .filter((name) => name)
+                        .join('|');
+                    return acc;
+                }, {});
+                const variantAssets = this.handleAssets(variant.assets.map(({ asset }) => asset), exportAssetsAs);
+                const variantFacets = languages.reduce((acc, lang) => {
+                    acc[lang] = (variant.facetValues || [])
+                        .map((facet) => this.mapFacetTranslations(facet, lang))
+                        .filter((facet) => facet)
+                        .join('|');
+                    return acc;
+                }, {});
+                const stockOnHand = await this.getStockOnHand(ctx, variant.id); // Adjusted to fetch stock details
+                const variantTranslations = variant.translations;
+                const variantNameTranslations = this.mapTranslations(variantTranslations, 'name', languages);
+                const record = {};
+                const convertToHTML = (text) => {
+                    return text
+                        .replace(/\n/g, '<br>')
+                        .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
+                        .replace(/,\s*'/g, ", '");
+                };
+                for (const lang of languages) {
+                    const escapedDescription = convertToHTML(descriptionTranslations[lang]);
+                    const escapedName = nameTranslations[lang]
+                        .replace(/"/g, "'")
+                        .replace(/\s+/g, ' ')
+                        .replace(/,\s*'/g, ", '")
+                        .replace(/'/g, "''");
+                    record.productId = records.length === 0 ? product.id : '';
+                    record[`name:${lang}`] = records.length === 0 ? escapedName || '' : '';
+                    record[`slug:${lang}`] = records.length === 0 ? slugTranslations[lang] || '' : '';
+                    record[`description:${lang}`] = records.length === 0 ? escapedDescription || '' : '';
+                    record[`facets:${lang}`] = records.length === 0 ? productFacets[lang] : '';
+                    record[`optionGroups:${lang}`] = records.length === 0 ? optionGroupNames[lang] : '';
+                    record[`optionValues:${lang}`] = variantValues[lang];
+                    record[`variantFacets:${lang}`] = variantFacets[lang];
+                }
+                const productVariantPrices = variant.productVariantPrices.filter((price) => price.channelId === ctx.channelId);
+                record.assets = records.length === 0 ? productAssets : '';
+                record.sku = variant.sku;
+                record.price = productVariantPrices[0]?.price / 100; // Assuming the price is stored in cents
+                record.taxCategory = 'standard'; // Replace with actual tax category if available
+                record.stockOnHand = stockOnHand;
+                record.trackInventory = variant.trackInventory.toLowerCase();
+                record.variantAssets = variantAssets;
+                for (const field of filteredCustomFieldNames) {
+                    const [entity, fieldName, type] = field.split(':');
+                    if (entity === 'product') {
+                        record[field] =
+                            this.handleCustomFields(customFields, fieldName, type, exportAssetsAs) || '';
+                    }
+                    else if (entity === 'variant') {
+                        record[field] =
+                            this.handleCustomFields(variant.customFields, fieldName, type, exportAssetsAs) || '';
+                    }
+                }
+                records.push(record);
+            }
+            await csvWriter.writeRecords(records);
+        }
+        return exportFile;
+    }
+    handleAssets(assets, exportAssetsAs) {
+        if (!assets.length) {
+            return '';
+        }
+        if (exportAssetsAs === 'url') {
+            return assets.map((asset) => asset.source).join('|');
+        }
+        return JSON.stringify(assets.length > 1
+            ? assets.map((asset) => ({
+                id: asset.id,
+                name: asset.name,
+                url: asset.source,
+            }))
+            : {
+                id: assets[0].id,
+                name: assets[0].name,
+                url: assets[0].source,
+            })
+            .replace(/"/g, "'") // Replace double quotes with single quotes
+            .replace(/\s+/g, ' ') // Remove unnecessary whitespace and line breaks
+            .replace(/,\s*'/g, ", '"); // Ensure clean spacing after commas
+    }
+    handleCustomFields(customFields, fieldName, type, exportAssetsAs) {
+        const fieldValue = customFields[fieldName];
+        if (!fieldValue) {
+            return;
+        }
+        const relationsTypes = [
+            ...this.configService.customFields.Product.map((field) => {
+                if (field.type === 'relation')
+                    return field.entity.name.toLowerCase();
+            }),
+            ...this.configService.customFields.ProductVariant.map((field) => {
+                if (field.type === 'relation')
+                    return field.entity.name.toLowerCase();
+            }),
+        ].filter((type) => type);
+        if (relationsTypes.includes(type)) {
+            if (type === 'asset') {
+                return (customFields[fieldName] = this.handleAssets([fieldValue], exportAssetsAs));
+            }
+            else {
+                return (customFields[fieldName] = fieldValue.id);
+            }
+            return;
+        }
+        if (typeof fieldValue === 'object') {
+            customFields[fieldName] = customFields[fieldName] = JSON.stringify(fieldValue)
+                .replace(/"/g, "'") // Replace double quotes with single quotes
+                .replace(/\s+/g, ' ') // Remove unnecessary whitespace and line breaks
+                .replace(/,\s*'/g, ", '"); // Ensure clean spacing after commas
+        }
+        else if ((0, lodash_1.startsWith)(fieldValue, '{') || (0, lodash_1.startsWith)(fieldValue, '[')) {
+            customFields[fieldName] = fieldValue.replace(/"/g, "'").replace(/\s+/g, ' ');
+            return customFields[fieldName];
+        }
+        return customFields[fieldName];
+    }
+    // Method to fetch stock on hand for a variant
+    async getStockOnHand(ctx, variantId) {
+        const stockLevel = await this.stockLevelService.getAvailableStock(ctx, variantId);
+        return stockLevel.stockOnHand;
+    }
+    // Method to map translations for a specific field
+    mapTranslations(translations, field, languages) {
+        const translationMap = {};
+        for (const lang of languages) {
+            const translation = translations.find((t) => t.languageCode === lang);
+            translationMap[lang] = translation ? translation[field] : '';
+        }
+        return translationMap;
+    }
+    // Method to map facet translations
+    mapFacetTranslations(facetValue, lang) {
+        const facetNameTranslations = this.mapTranslations(facetValue.facet.translations, 'name', [
+            lang,
+        ]);
+        const facetValueTranslations = this.mapTranslations(facetValue.translations, 'name', [lang]);
+        if (!facetNameTranslations[lang] || !facetValueTranslations[lang]) {
+            return '';
+        }
+        return `${facetNameTranslations[lang]}:${facetValueTranslations[lang]}`;
+    }
+    async getCustomFields(ctx, productIds) {
+        const customFields = new Set();
+        (0, lodash_1.forEach)(this.configService.customFields.Product, (field) => {
+            if (field.type === 'relation') {
+                const entity = field.entity.name;
+                customFields.add({
+                    name: `product:${field.name}`,
+                    type: entity.toLowerCase(),
+                });
+                return;
+            }
+            customFields.add({
+                name: `product:${field.name}`,
+                type: field.type,
+            });
+        });
+        (0, lodash_1.forEach)(this.configService.customFields.ProductVariant, (field) => {
+            if (field.type === 'relation') {
+                const entity = field.entity.name;
+                customFields.add({
+                    name: `variant:${field.name}`,
+                    type: entity.toLowerCase(),
+                });
+                return;
+            }
+            customFields.add({
+                name: `variant:${field.name}`,
+                type: field.type,
+            });
+        });
+        return Array.from(customFields);
+    }
+    async getConfig() {
+        return this.options;
+    }
+};
+ProductExportService = __decorate([
+    (0, common_1.Injectable)(),
+    __param(0, (0, common_1.Inject)(constants_1.PRODUCT_IMPORT_EXPORT_PLUGIN_OPTIONS)),
+    __metadata("design:paramtypes", [Object, core_1.ProductService,
+        core_1.StockLevelService,
+        core_1.EntityHydrator,
+        core_1.ChannelService,
+        core_1.ConfigService])
+], ProductExportService);
+exports.ProductExportService = ProductExportService;

package/dist/services/product-import.service.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="Multer" />
+import { OnModuleInit } from '@nestjs/common';
+import { RequestContext, JobQueueService, SerializedRequestContext, SearchService, LanguageCode } from '@vendure/core';
+import { PluginInitOptions } from '../types';
+import { ProductImporter } from '../providers/import-providers/product-importer';
+export declare class ProductImportService implements OnModuleInit {
+    private options;
+    private jobQueueService;
+    private productImporter;
+    private searchService;
+    private productImportQueue;
+    constructor(options: PluginInitOptions, jobQueueService: JobQueueService, productImporter: ProductImporter, searchService: SearchService);
+    onModuleInit(): Promise<void>;
+    processFile(ctx: RequestContext, file: Express.Multer.File, updateProductSlug: boolean, mainLanguage: LanguageCode): Promise<import("@vendure/core/dist/job-queue/subscribable-job").SubscribableJob<{
+        ctx: SerializedRequestContext;
+        fileContent: string;
+        updateProductSlug: boolean;
+        mainLanguage: LanguageCode;
+    }>>;
+    private triggerProductImport;
+}

package/dist/services/product-import.service.js

@@ -0,0 +1,83 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductImportService = void 0;
+const common_1 = require("@nestjs/common");
+const core_1 = require("@vendure/core");
+const constants_1 = require("../constants");
+const product_importer_1 = require("../providers/import-providers/product-importer");
+const lodash_1 = require("lodash");
+let ProductImportService = class ProductImportService {
+    options;
+    jobQueueService;
+    productImporter;
+    searchService;
+    productImportQueue;
+    constructor(options, jobQueueService, productImporter, searchService) {
+        this.options = options;
+        this.jobQueueService = jobQueueService;
+        this.productImporter = productImporter;
+        this.searchService = searchService;
+    }
+    async onModuleInit() {
+        this.productImportQueue = await this.jobQueueService.createQueue({
+            name: 'product-import',
+            process: async (job) => {
+                // Deserialize the RequestContext from the job data
+                const ctx = core_1.RequestContext.deserialize(job.data.ctx);
+                let jobResult;
+                return new Promise((resolve, reject) => {
+                    this.productImporter
+                        .parseAndImport(job.data.fileContent, ctx, job.data.updateProductSlug, job.data.mainLanguage)
+                        .subscribe({
+                        next: (result) => {
+                            const processedCount = result.processed;
+                            const importedCount = result.imported;
+                            const percentage = (importedCount / processedCount) * 100;
+                            job.setProgress(percentage);
+                            jobResult = result;
+                        },
+                        complete: async () => {
+                            await this.searchService.reindex(ctx);
+                            resolve((0, lodash_1.omit)(jobResult, 'currentProduct'));
+                        },
+                        error: (err) => {
+                            reject(err);
+                        },
+                    });
+                });
+            },
+        });
+    }
+    async processFile(ctx, file, updateProductSlug, mainLanguage) {
+        const fileContent = file.buffer.toString('utf-8');
+        return this.triggerProductImport(ctx, fileContent, updateProductSlug, mainLanguage);
+    }
+    triggerProductImport(ctx, fileContent, updateProductSlug, mainLanguage) {
+        return this.productImportQueue.add({
+            ctx: ctx.serialize(),
+            fileContent,
+            updateProductSlug,
+            mainLanguage,
+        });
+    }
+};
+ProductImportService = __decorate([
+    (0, common_1.Injectable)(),
+    __param(0, (0, common_1.Inject)(constants_1.PRODUCT_IMPORT_EXPORT_PLUGIN_OPTIONS)),
+    __metadata("design:paramtypes", [Object, core_1.JobQueueService,
+        product_importer_1.ProductImporter,
+        core_1.SearchService])
+], ProductImportService);
+exports.ProductImportService = ProductImportService;

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+import { ID } from '@vendure/core';
+import { ParsedProduct, ParsedProductWithVariants } from './providers/import-providers/import-parser';
+/**
+ * @description
+ * The plugin can be configured using the following options:
+ */
+type ImportOptions = {
+    /**
+     * @description
+     * updateProductSlug: If true, the product slug will be updated based on the `name` field in the CSV file.
+     */
+    updateProductSlug?: boolean;
+};
+export interface PluginInitOptions {
+    importOptions: {
+        visibleOptions?: Array<keyof ImportOptions>;
+        defaultOptions?: ImportOptions;
+    };
+    exportOptions: {
+        defaultFileName?: string;
+        exportAssetsAsOptions?: Array<'url' | 'json'>;
+        defaultExportAssetsAs?: 'url' | 'json';
+        defaultExportFields?: ExportFields;
+        requiredExportFields?: ExportFields;
+    };
+}
+export type ParsedProductWithId = ParsedProductWithVariants & {
+    product: ParsedProduct & {
+        productId: number | null;
+    };
+};
+export type JsonAsset = {
+    id?: ID;
+    url: string;
+    name?: string;
+};
+type ExportFields = Array<ProductFields | VariantFields>;
+type ProductFields = 'productId' | 'name' | 'slug' | 'description' | 'assets' | 'facets' | 'optionGroups';
+type VariantFields = 'sku' | 'optionValues' | 'price' | 'taxCategory' | 'stockOnHand' | 'trackInventory' | 'variantAssets' | 'variantFacets';
+export {};

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ui/components/export-dialog.component.d.ts

@@ -0,0 +1,43 @@
+import { ElementRef, AfterViewInit, OnInit } from '@angular/core';
+import { Dialog } from '@vendure/admin-ui/core';
+type ProductFields = 'productId' | 'name' | 'slug' | 'description' | 'assets' | 'facets' | 'optionGroups';
+type VariantFields = 'sku' | 'optionValues' | 'price' | 'taxCategory' | 'stockOnHand' | 'trackInventory' | 'variantAssets' | 'variantFacets';
+type ExportFields = Array<ProductFields | VariantFields>;
+interface PluginInitOptions {
+    defaultFileName?: string;
+    exportAssetsAsOptions?: Array<'url' | 'json'>;
+    defaultExportAssetsAs?: 'url' | 'json';
+    defaultExportFields?: ExportFields;
+    requiredExportFields?: ExportFields;
+}
+export declare class ExportDialogComponent implements Dialog<{
+    result: boolean;
+    fileName?: string;
+    selectedFields?: string[];
+    exportAssetsAs?: 'url' | 'json';
+    selectedExportFields?: ExportFields;
+}>, AfterViewInit, OnInit {
+    fileNameElement: ElementRef<HTMLInputElement>;
+    resolveWith: (result?: {
+        result: boolean;
+        fileName?: string;
+        selectedFields?: string[];
+        exportAssetsAs?: 'url' | 'json';
+        selectedExportFields?: ExportFields;
+    }) => void;
+    selection: any[];
+    fileName: string;
+    customFields: string[];
+    selectedFields: string[];
+    exportAssetsAs: 'url' | 'json';
+    selectedExportFields: ExportFields;
+    availableExportFields: ExportFields;
+    config: PluginInitOptions;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    export(): void;
+    cancel(): void;
+    toggleFieldSelection(fieldName: string): void;
+    toggleExportFieldSelection(fieldName: ProductFields | VariantFields): void;
+}
+export {};

package/dist/ui/components/export-dialog.component.html

@@ -0,0 +1,78 @@
+<ng-template vdrDialogTitle>{{ 'product-export.dialog.title' | translate }}</ng-template>
+<div class="input-row">
+  <vdr-form-field [label]="'product-export.dialog.label' | translate">
+    <input
+      type="text"
+      [(ngModel)]="fileName"
+      [placeholder]="config?.defaultFileName || 'products_export.csv'"
+      style="width: 100%"
+      #fileNameInput
+    />
+  </vdr-form-field>
+</div>
+
+<div class="input-row" style="margin-top: 16px">
+  <label style="margin-bottom: 8px; display: inline-block">{{
+    'product-export.dialog.customFieldsLabel' | translate
+  }}</label>
+  <div *ngFor="let field of availableExportFields">
+    <input
+      type="checkbox"
+      [value]="field"
+      (change)="toggleExportFieldSelection(field)"
+      [checked]="selectedExportFields.includes(field)"
+      [disabled]="config.requiredExportFields.includes(field)"
+    />
+    {{ field }}
+  </div>
+</div>
+
+<div class="input-row" style="margin-top: 16px">
+  <label style="margin-bottom: 8px; display: inline-block">{{
+    'product-export.dialog.customFieldsLabel' | translate
+  }}</label>
+  <div *ngFor="let field of customFields">
+    <input
+      type="checkbox"
+      [value]="field"
+      (change)="toggleFieldSelection(field)"
+      [checked]="selectedFields.includes(field)"
+    />
+    {{ field }}
+  </div>
+</div>
+
+<span style="margin-top: 16px; margin-bottom: 8px; display: block">{{
+  'product-export.dialog.exportAssetsAs' | translate
+}}</span>
+<div class="input-row" style="margin-top: 8px">
+  <label *ngIf="config?.exportAssetsAsOptions?.includes('url')">
+    <input
+      type="radio"
+      name="exportAssets"
+      value="url"
+      [(ngModel)]="exportAssetsAs"
+      style="width: fit-content"
+    />
+    {{ 'product-export.dialog.exportAssetsAsOptions.url' | translate }}
+  </label>
+  <label *ngIf="config?.exportAssetsAsOptions?.includes('json')">
+    <input
+      type="radio"
+      name="exportAssets"
+      value="json"
+      [(ngModel)]="exportAssetsAs"
+      style="width: fit-content"
+    />
+    {{ 'product-export.dialog.exportAssetsAsOptions.json' | translate }}
+  </label>
+</div>
+
+<ng-template vdrDialogButtons>
+  <button type="button" class="btn" (click)="cancel()">
+    {{ 'common.cancel' | translate }}
+  </button>
+  <button type="button" class="btn btn-primary" (click)="export()">
+    {{ 'product-export.dialog.export' | translate }}
+  </button>
+</ng-template>