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

package/dist/ui/components/product-import.component.js

@@ -0,0 +1,398 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductImportComponent = void 0;
+const core_1 = require("@vendure/admin-ui/core");
+const core_2 = require("@angular/core");
+const core_3 = require("@vendure/admin-ui/core");
+const core_4 = require("@ngx-translate/core");
+const lodash_1 = require("lodash");
+let ProductImportComponent = class ProductImportComponent {
+    notificationService;
+    cd;
+    translate;
+    localStorageService;
+    serverPath;
+    validateFile = null;
+    selectedFile = null;
+    updateProductSlug = true;
+    selectedMainLanguage;
+    availableLanguages = [];
+    fileUploadElement;
+    config;
+    appConfig;
+    currentChannel;
+    constructor(notificationService, cd, translate, localStorageService) {
+        this.notificationService = notificationService;
+        this.cd = cd;
+        this.translate = translate;
+        this.localStorageService = localStorageService;
+        this.serverPath = (0, core_1.getServerLocation)();
+    }
+    async ngOnInit() {
+        this.appConfig = await fetch('./vendure-ui-config.json').then((res) => res.json());
+        this.config = await fetch(`${this.serverPath}/product-import-export/config`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        })
+            .then((res) => res.json())
+            .then((data) => data.importOptions);
+    }
+    doValidation(file) {
+        this.validateCsvStructure(file).then(({ isValid, langCodes, clearFile = true }) => {
+            if (isValid) {
+                this.selectedFile = file;
+            }
+            else if (clearFile) {
+                this.clearFile();
+            }
+            if (langCodes && !this.selectedMainLanguage) {
+                this.availableLanguages = langCodes.filter((code) => code);
+                this.selectedMainLanguage =
+                    (0, lodash_1.size)(this.availableLanguages) === 1
+                        ? this.availableLanguages?.[0]
+                        : undefined;
+            }
+            this.cd.detectChanges();
+        });
+    }
+    onMainLanguageChange() {
+        this.cd.detectChanges();
+        if (this.validateFile) {
+            this.doValidation(this.validateFile);
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const file = input.files[0];
+            if (file.type !== 'text/csv') {
+                this.notificationService.error(this.translate.instant('product-import.notifications.invalid-file-type'));
+                this.clearFile();
+                return;
+            }
+            this.validateFile = file;
+            this.doValidation(file);
+        }
+    }
+    clearFile() {
+        this.fileUploadElement.nativeElement.value = '';
+        this.selectedFile = null;
+        this.validateFile = null;
+        this.selectedMainLanguage = undefined;
+    }
+    async validateCsvStructure(file) {
+        const baseColumns = ['sku'];
+        const optionalColumns = [
+            'assets',
+            'price',
+            'taxCategory',
+            'stockOnHand',
+            'trackInventory',
+            'variantAssets',
+        ];
+        const translatableBaseColumns = ['name'];
+        const translatableColumns = [
+            'slug',
+            'description',
+            'facets',
+            'optionGroups',
+            'optionValues',
+            'variantFacets',
+        ];
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                const text = e.target?.result;
+                const lines = text.split('\n');
+                // Remove empty lines
+                lines.forEach((line, index) => {
+                    if (line.trim() === '') {
+                        lines.splice(index, 1);
+                    }
+                });
+                if (lines.length > 0) {
+                    const header = this.splitLines(lines[0]).map((col) => col.trim());
+                    console.log('CSV Header:', header);
+                    this.currentChannel = await fetch(`${this.serverPath}/product-import-export/channel`, {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            ...this.getRequestHeaders(),
+                        },
+                    })
+                        .then((res) => res.json())
+                        .then((data) => data);
+                    const availableLanguages = this.currentChannel.availableLanguageCodes;
+                    // Extract all language codes from headers
+                    const languageCodes = header
+                        .map((col) => col.match(/:(\w{2})$/)?.[1])
+                        .filter((code, index, self) => code && self.indexOf(code) === index);
+                    console.log('Language Codes:', languageCodes);
+                    let validationLanguage = (0, lodash_1.size)(languageCodes) === 0 ? undefined : this.selectedMainLanguage;
+                    if (!this.selectedMainLanguage && (0, lodash_1.size)(languageCodes) < 2) {
+                        validationLanguage = languageCodes?.[0];
+                    }
+                    if (!this.selectedMainLanguage && (0, lodash_1.size)(languageCodes) > 1) {
+                        console.log('Multiple languages found in the CSV file. Please select the main language.');
+                        resolve({ isValid: true, langCodes: languageCodes, clearFile: false });
+                        return;
+                    }
+                    if (!this.selectedMainLanguage && (0, lodash_1.size)(languageCodes) === 0) {
+                        resolve({ isValid: true, langCodes: availableLanguages, clearFile: false });
+                        return;
+                    }
+                    console.log('Validation language:', validationLanguage);
+                    // Check if csv-file includes languages that are not available in the system
+                    const missingLanguages = languageCodes.filter((code) => !availableLanguages.includes(code));
+                    if (missingLanguages.length > 0) {
+                        const missingLangs = missingLanguages.join(', ');
+                        console.log('Missing languages:', missingLangs);
+                        this.notificationService.error(`${this.translate.instant('product-import.notifications.missing-languages')} ${missingLangs}`);
+                        resolve({ isValid: false });
+                        return;
+                    }
+                    // Validate base columns
+                    const missingBaseColumns = baseColumns.filter((col) => !header.includes(col));
+                    const missingTranslatableBaseColumns = translatableBaseColumns.filter((col) => !header.includes(validationLanguage ? `${col}:${validationLanguage}` : col));
+                    const combinedMissingBaseColumns = [
+                        ...missingBaseColumns,
+                        ...missingTranslatableBaseColumns,
+                    ];
+                    if (combinedMissingBaseColumns.length > 0) {
+                        const missingColumns = combinedMissingBaseColumns.join(', ');
+                        console.log('Missing base columns:', missingColumns);
+                        this.notificationService.error(`${this.translate.instant('product-import.notifications.missing-base-columns')} ${missingColumns}`);
+                        resolve({ isValid: false });
+                        return;
+                    }
+                    const nameColumn = `name:${validationLanguage}` || 'name';
+                    // Get optionGroups and optionValues columns for the main language
+                    const optionGroupsColumn = `optionGroups:${validationLanguage}` || 'optionGroups';
+                    const optionValuesColumn = `optionValues:${validationLanguage}` || 'optionValues';
+                    const optionGroupsIndex = header.indexOf(optionGroupsColumn);
+                    const optionValuesIndex = header.indexOf(optionValuesColumn);
+                    // if (optionGroupsIndex === -1 || optionValuesIndex === -1) {
+                    //   console.log(
+                    //     `Missing optionGroups or optionValues columns for language: ${validationLanguage}`,
+                    //   )
+                    //   this.notificationService.error(
+                    //     `${this.translate.instant(
+                    //       'product-import.notifications.missing-option-columns',
+                    //     )} ${validationLanguage}`,
+                    //   )
+                    //   resolve({ isValid: false })
+                    //   return
+                    // }
+                    // Loop through each row to validate the option values
+                    let currentOptionGroupCount = 0;
+                    for (let i = 1; i < lines.length; i++) {
+                        const row = this.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 !== '');
+                            const optionValues = (row[optionValuesIndex]?.split('|') ?? []).filter((value) => value !== '');
+                            currentOptionGroupCount = optionGroups.length;
+                            // Validate that the number of option values matches the number of option groups
+                            if (optionValues.length !== currentOptionGroupCount) {
+                                this.notificationService.error(`${this.translate.instant('product-import.notifications.mismatched-option-values')} Row: ${i + 1}. Expected ${currentOptionGroupCount} option values but got ${optionValues.length}.`);
+                                resolve({ isValid: false });
+                                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) {
+                                this.notificationService.error(`${this.translate.instant('product-import.notifications.mismatched-option-values')} Row: ${i + 1}. Expected ${currentOptionGroupCount} option values but got ${optionValues.length}. ${JSON.stringify(optionValues)}`);
+                                resolve({ isValid: false });
+                                return;
+                            }
+                        }
+                    }
+                    console.log('All option values for the main language are valid.');
+                    // 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 = this.splitLines(lines[i]).map((col) => col.trim());
+                        for (const col of header) {
+                            const colIndex = header.indexOf(col);
+                            if (colIndex !== -1 && row[colIndex]) {
+                                try {
+                                    const { isJson } = this.checkifJson(row[colIndex]);
+                                    if (isJson) {
+                                        JSON.parse(row[colIndex]
+                                            .trim()
+                                            .replace(/^"/, '')
+                                            .replace(/"$/, '')
+                                            .replace(/'/g, '"')
+                                            .replace(/\s+/g, ' ')
+                                            .replace(/,\s*'/g, ", '"));
+                                    }
+                                }
+                                catch (error) {
+                                    console.log(`Invalid JSON in column: ${col}, row: ${i + 1}`);
+                                    this.notificationService.error(`${this.translate.instant('product-import.notifications.invalid-json')} ${col}, row: ${i + 1}`);
+                                    resolve({ isValid: false });
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                    console.log('All JSON values are valid.');
+                    const { errorRows: missingBaseTranslatableValuesRows } = this.checkTranslatabeColumns(lines, translatableBaseColumns, header, languageCodes);
+                    if (missingBaseTranslatableValuesRows.length > 0) {
+                        console.log('Missing translation values in rows:', missingBaseTranslatableValuesRows);
+                        this.notificationService.error(`${this.translate.instant('product-import.notifications.missing-main-language-name')} Rows: ${(0, lodash_1.uniq)(missingBaseTranslatableValuesRows).join(', ')}`);
+                        resolve({ isValid: false });
+                        return;
+                    }
+                    // Check if all translatable columns have values for the main language
+                    const { errorRows, errorColumns } = this.checkTranslatabeColumns(lines, translatableColumns, header, languageCodes);
+                    if (errorRows.length > 0) {
+                        console.log('Missing translation values in rows:', errorRows);
+                        this.notificationService.warning(`${this.translate.instant('product-import.notifications.missing-translation-values')} Rows: ${(0, lodash_1.uniq)(errorRows).join(', ')} Columns: ${(0, lodash_1.uniq)(errorColumns).join(', ')}`);
+                    }
+                    resolve({ isValid: true, langCodes: languageCodes });
+                }
+                else {
+                    console.log('No lines in CSV file.');
+                    this.notificationService.error(this.translate.instant('product-import.notifications.no-lines-in-file'));
+                    resolve({ isValid: false });
+                }
+            };
+            reader.onerror = () => {
+                console.log('Error reading file.');
+                this.notificationService.error(this.translate.instant('product-import.notifications.file-read-error'));
+                resolve({ isValid: false });
+            };
+            reader.readAsText(file);
+        });
+    }
+    async uploadFile() {
+        if (this.selectedFile && this.selectedMainLanguage) {
+            const formData = new FormData();
+            formData.append('file', this.selectedFile);
+            formData.append('updateProductSlug', this.updateProductSlug.toString());
+            formData.append('mainLanguage', this.selectedMainLanguage);
+            try {
+                const res = await fetch(`${this.serverPath}/product-import/upload`, {
+                    method: 'POST',
+                    body: formData,
+                    headers: this.getRequestHeaders(),
+                });
+                if (res.ok) {
+                    this.clearFile();
+                    this.notificationService.success(this.translate.instant('product-import.notifications.upload-success'));
+                    this.cd.detectChanges();
+                }
+                else {
+                    this.notificationService.error(this.translate.instant('product-import.notifications.upload-error'));
+                }
+            }
+            catch (error) {
+                this.notificationService.error(this.translate.instant('product-import.notifications.upload-error'));
+            }
+        }
+        else {
+            this.notificationService.error(this.translate.instant('product-import.notifications.no-file-selected'));
+        }
+    }
+    splitLines(text) {
+        // Split text by commas, but not if comma is inside double quotes
+        const splittedText = text.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
+        return splittedText;
+    }
+    checkifJson(text) {
+        // Replace starting and ending double quotes if exists
+        text = text.trim().replace(/^"/, '').replace(/"$/, '');
+        return {
+            startsWithJson: (0, lodash_1.startsWith)(text.trim(), '{') || (0, lodash_1.startsWith)(text.trim(), '['),
+            endsWithJson: (0, lodash_1.endsWith)(text.trim(), '}') || (0, lodash_1.endsWith)(text.trim(), ']'),
+            startChar: text.trim().charAt(0),
+            endChar: text.trim().charAt(text.trim().length - 1),
+            isJson: (0, lodash_1.startsWith)(text.trim(), '{') ||
+                (0, lodash_1.startsWith)(text.trim(), '[') ||
+                (0, lodash_1.endsWith)(text.trim(), '}') ||
+                (0, lodash_1.endsWith)(text.trim(), ']'),
+        };
+    }
+    getRequestHeaders() {
+        const headers = {};
+        const channelToken = this.localStorageService.get('activeChannelToken');
+        const { tokenMethod, channelTokenKey } = this.appConfig;
+        if (channelToken) {
+            headers[channelTokenKey ?? 'vendure-token'] = channelToken;
+        }
+        if (tokenMethod === 'bearer') {
+            const authToken = this.localStorageService.get('authToken');
+            if (authToken) {
+                headers.authorization = `Bearer ${authToken}`;
+            }
+        }
+        return headers;
+    }
+    checkTranslatabeColumns(lines, columns, header, languageCodes) {
+        let errorRows = [];
+        let errorColumns = [];
+        if ((0, lodash_1.size)(languageCodes) < 2) {
+            console.log('Only one language found in the file.');
+            return { errorRows, errorColumns };
+        }
+        for (let i = 1; i < lines.length; i++) {
+            const row = this.splitLines(lines[i]).map((col) => col.trim());
+            for (const baseColumn of columns) {
+                const mainLanguageColumn = `${baseColumn}:${this.selectedMainLanguage}`;
+                const colIndex = header.indexOf(mainLanguageColumn);
+                const mainLanguageValue = row[colIndex];
+                const mainLanguageHasValue = mainLanguageValue !== undefined && mainLanguageValue !== '';
+                if (mainLanguageHasValue) {
+                    continue;
+                }
+                for (const lang of languageCodes) {
+                    if (lang) {
+                        // Check if lang is defined
+                        const langSpecificColumn = `${baseColumn}:${lang}`;
+                        const colIndex = header.indexOf(langSpecificColumn);
+                        const colValue = row[colIndex];
+                        const colHasValue = colValue !== undefined && colValue !== '';
+                        if (!mainLanguageHasValue && colHasValue) {
+                            errorRows.push(i + 1);
+                            errorColumns.push(langSpecificColumn);
+                        }
+                    }
+                }
+            }
+        }
+        return { errorRows, errorColumns };
+    }
+};
+__decorate([
+    (0, core_2.ViewChild)('fileUpload', { static: false }),
+    __metadata("design:type", core_2.ElementRef)
+], ProductImportComponent.prototype, "fileUploadElement", void 0);
+ProductImportComponent = __decorate([
+    (0, core_2.Component)({
+        selector: 'product-import',
+        templateUrl: './product-import.component.html',
+        standalone: true,
+        imports: [core_1.SharedModule],
+    }),
+    __metadata("design:paramtypes", [core_3.NotificationService,
+        core_2.ChangeDetectorRef,
+        core_4.TranslateService,
+        core_3.LocalStorageService])
+], ProductImportComponent);
+exports.ProductImportComponent = ProductImportComponent;