@crowdin/app-project-module 0.98.0-cf-1 → 0.98.0

package/out/views/MainPage.js

@@ -1,1613 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainPage = void 0;
-const react_1 = __importDefault(require("react"));
-const Head_1 = require("./layout/Head");
-const renderConfigField = (field, suffix = 'settings') => {
-    var _a;
-    if (!field.key) {
-        return field.labelHtml ? (react_1.default.createElement("crowdin-p", Object.assign({}, (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), { dangerouslySetInnerHTML: { __html: field.labelHtml } }))) : (react_1.default.createElement("crowdin-p", Object.assign({}, (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {})), field.label));
-    }
-    const commonProps = Object.assign(Object.assign(Object.assign({ id: `${field.key}-${suffix}`, key: field.key, label: field.label }, (field.helpText ? { 'help-text': field.helpText } : {})), (field.helpTextHtml ? { 'help-text-html': field.helpTextHtml } : {})), (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}));
-    switch (field.type) {
-        case 'checkbox':
-            return (react_1.default.createElement("crowdin-checkbox", Object.assign({}, commonProps, { value: "false", "use-switch": true }, (field.defaultValue === true ? { checked: String(field.defaultValue) } : {}), { onchange: "settingsFieldChange(this)" })));
-        case 'select':
-            return (react_1.default.createElement("crowdin-select", Object.assign({}, commonProps, (field.isMulti ? { 'is-multi': true, 'close-on-select': 'false' } : {}), (field.isSearchable ? { 'is-searchable': true } : {}), { "is-position-fixed": true, onchange: "settingsFieldChange(this)" }), (_a = field.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
-                const isSelected = Array.isArray(field.defaultValue)
-                    ? field.defaultValue.includes(option.value)
-                    : field.defaultValue === option.value;
-                return (react_1.default.createElement("option", Object.assign({ value: option.value }, (isSelected ? { selected: true } : {})), option.label));
-            })));
-        case 'text':
-            return (react_1.default.createElement("crowdin-input", Object.assign({}, commonProps, { "with-fixed-height": true, value: field.defaultValue || '', onchange: "settingsFieldChange(this)" })));
-        case 'textarea':
-            return (react_1.default.createElement("crowdin-textarea", Object.assign({}, commonProps, { value: field.defaultValue || '', onchange: "settingsFieldChange(this)" })));
-        case 'notice':
-            return (react_1.default.createElement("crowdin-alert", Object.assign({}, (field.noticeType ? { type: field.noticeType } : {}), (field.label ? { title: field.label } : {}), (field.noIcon ? { 'no-icon': String(field.noIcon) } : {}), (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), { dangerouslySetInnerHTML: { __html: field.helpText || '' } })));
-        default:
-            return null;
-    }
-};
-const MainPage = (props) => {
-    const { name, userId, notice, checkSubscription, isManager, isOwner, infoModal, configurationFields, config = '{}', syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, integrationPagination, uploadTranslations, excludedTargetLanguages, forcePushTranslations, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, sentryData, } = props;
-    // Build integration button menu items
-    const integrationButtonMenuItems = [];
-    if (uploadTranslations) {
-        integrationButtonMenuItems.push({
-            label: 'Sync translations',
-            title: 'Sync translations to Crowdin',
-            action: 'uploadTranslations',
-        });
-    }
-    if (excludedTargetLanguages) {
-        integrationButtonMenuItems.push({
-            label: 'Select target languages',
-            title: 'Upload file for translation into selected languages',
-            action: 'excludedTargetLanguages',
-        });
-    }
-    const crowdinButtonMenuItems = [];
-    if (forcePushTranslations) {
-        crowdinButtonMenuItems.push({
-            label: 'Force Sync Translations',
-            action: 'forcePushTranslations',
-        });
-    }
-    return (react_1.default.createElement("html", { lang: "en" },
-        react_1.default.createElement(Head_1.Head, { sentryData: sentryData }),
-        react_1.default.createElement("body", null,
-            react_1.default.createElement("div", { className: "i_w" },
-                react_1.default.createElement("div", { className: "top" },
-                    notice && (react_1.default.createElement("crowdin-alert", Object.assign({ id: "notice", title: notice.title }, (!notice.icon ? { 'no-icon': 'true' } : {}), (notice.type ? { type: notice.type } : {}), { style: { display: 'none', marginBottom: '12px' } }),
-                        react_1.default.createElement("div", { className: "box-center" },
-                            react_1.default.createElement("p", { className: "m-0", dangerouslySetInnerHTML: { __html: notice.content } })),
-                        notice.close && (react_1.default.createElement("crowdin-button", { onclick: "closeAlert(this, 'notice')", className: "dismiss-alert", icon: true }, "close")))),
-                    checkSubscription && (react_1.default.createElement("crowdin-alert", { id: "subscription-info", "no-icon": "true", type: "warning", style: { display: 'none', marginBottom: '12px' } },
-                        react_1.default.createElement("div", { className: "box-center" },
-                            react_1.default.createElement("p", { className: "m-0" }),
-                            react_1.default.createElement("crowdin-button", { class: "ml-1", primary: true, onclick: "window.open(subscriptionLink,'_blank')" }, "Subscribe")))),
-                    react_1.default.createElement("div", { id: "buttons" },
-                        react_1.default.createElement("crowdin-button", { id: "show-integration-btn", class: "hidden", "icon-before": "arrow_back", onclick: "showIntegration();" }, "Integration"),
-                        react_1.default.createElement("crowdin-button", { id: "show-error-logs-btn", "icon-before": "list", onclick: "showErrorLogs();" }, "Error logs"),
-                        isManager && (react_1.default.createElement("crowdin-button", { "icon-before": "link", onclick: "showPermissionsDialog()" }, "Share")),
-                        infoModal && (react_1.default.createElement("crowdin-button", { "icon-before": "info", onclick: "openModal(infoModal);" }, infoModal.title)),
-                        configurationFields && (react_1.default.createElement("crowdin-button", { "icon-before": "settings", onclick: "openModal(settingsModal);fillSettingsForm();" }, "Settings")),
-                        react_1.default.createElement("crowdin-button", Object.assign({}, (!isOwner ? { disabled: true, title: 'Only the owner can log out' } : {}), { "icon-before": "account_circle", onclick: "integrationLogout()" }), "Log out"))),
-                react_1.default.createElement("crowdin-simple-integration", Object.assign({ "async-progress": true }, ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) ? { 'skip-crowdin-auto-schedule': true } : {}), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) ? { 'skip-integration-auto-schedule': true } : {}), ((withCronSync === null || withCronSync === void 0 ? void 0 : withCronSync.crowdin) || (webhooks === null || webhooks === void 0 ? void 0 : webhooks.crowdin) ? { 'crowdin-schedule': 'true' } : {}), ((withCronSync === null || withCronSync === void 0 ? void 0 : withCronSync.integration) || (webhooks === null || webhooks === void 0 ? void 0 : webhooks.integration) ? { 'integration-schedule': 'true' } : {}), (integrationOneLevelFetching ? { 'integration-one-level-fetching': 'true' } : {}), (integrationSearchListener ? { 'allow-integration-filter-change-listener': 'true' } : {}), (integrationPagination ? { 'integration-load-more-files': 'true' } : {}), { "integration-name": name, "integration-logo": "logo.png" }, (integrationButtonMenuItems.length > 0
-                    ? { 'integration-button-menu-items': JSON.stringify(integrationButtonMenuItems) }
-                    : {}), (crowdinButtonMenuItems.length > 0 ? { 'crowdin-button-menu-items': JSON.stringify(crowdinButtonMenuItems) } : {}), ((filtering === null || filtering === void 0 ? void 0 : filtering.crowdinLanguages) ? { 'crowdin-filter': true } : {}), ((filtering === null || filtering === void 0 ? void 0 : filtering.integrationFilterConfig)
-                    ? { 'integration-filter': true, 'integration-filter-config': filtering.integrationFilterConfig }
-                    : {}))),
-                react_1.default.createElement("div", { id: "user-errors", className: "hidden" },
-                    react_1.default.createElement("crowdin-show-as-table", { "is-loading": true, id: "user-errors-table", "is-searchable": true, "total-records": "25", "search-placeholder": "Search something" }),
-                    react_1.default.createElement("crowdin-alert", null, "This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted."))),
-            react_1.default.createElement("crowdin-toasts", null),
-            react_1.default.createElement("crowdin-async-progress", { cancelAsyncAction: "" }),
-            react_1.default.createElement("crowdin-modal", { style: { display: 'none' }, id: "subscription-modal", "modal-width": "50", "close-button": "false" },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("crowdin-alert", { type: "warning" },
-                        "Subscribe to continue using the ",
-                        name,
-                        " app.")),
-                react_1.default.createElement("div", { slot: "footer" },
-                    react_1.default.createElement("crowdin-button", { primary: true, onclick: "window.open(subscriptionLink,'_blank')" }, "Subscribe"),
-                    react_1.default.createElement("crowdin-button", { outlined: true, onclick: "window.open('https://crowdin.com/contacts','_blank')" }, "Contact us"),
-                    react_1.default.createElement("crowdin-button", { class: "ml-10", secondary: true, onclick: "integrationLogout()" }, "Log out"))),
-            react_1.default.createElement("crowdin-modal", { style: { display: 'none' }, id: "permissions-modal", "modal-title": "Share", "close-button-title": "Close", "close-button": true, "body-overflow-unset": true },
-                react_1.default.createElement("div", { className: "loader hidden" },
-                    react_1.default.createElement("crowdin-progress-indicator", null)),
-                react_1.default.createElement("div", { className: "permissions-modal-content" },
-                    react_1.default.createElement("div", { className: "select-users-block" },
-                        react_1.default.createElement("crowdin-users-select", { "allow-new-options": true, "is-multi": true, "is-searchable": true, id: "users", key: "users", label: "Users", "help-text": "Search for members by name, username, email, or invite new ones using their email.", "is-position-fixed": true, onchange: "checkUsers()" })),
-                    react_1.default.createElement("div", { className: "select-users-info" },
-                        react_1.default.createElement("div", { className: "confirm-users-block mt-2 hidden" },
-                            react_1.default.createElement("table", null,
-                                react_1.default.createElement("thead", null,
-                                    react_1.default.createElement("tr", null,
-                                        react_1.default.createElement("th", { style: { width: '40%' } }, "Access"),
-                                        react_1.default.createElement("th", { style: { width: '35%' } }, "Users"),
-                                        react_1.default.createElement("th", { className: "status", style: { width: '20%' } }, "Upcoming changes"))),
-                                react_1.default.createElement("tbody", null,
-                                    hasOrganization && (react_1.default.createElement("tr", { className: "organization-invite" },
-                                        react_1.default.createElement("td", null,
-                                            react_1.default.createElement("crowdin-p", null, "Registration in Organization"),
-                                            react_1.default.createElement("div", { className: "permission-description" })),
-                                        react_1.default.createElement("td", { className: "affected-users" }),
-                                        react_1.default.createElement("td", { className: "status" }))),
-                                    react_1.default.createElement("tr", { className: "project-invite" },
-                                        react_1.default.createElement("td", null,
-                                            react_1.default.createElement("crowdin-p", null, "Project Manager Access")),
-                                        react_1.default.createElement("td", { className: "affected-users" }),
-                                        react_1.default.createElement("td", { className: "status" })),
-                                    react_1.default.createElement("tr", { className: "application-settings-invite" },
-                                        react_1.default.createElement("td", null,
-                                            react_1.default.createElement("crowdin-p", null, "Application Visibility Access"),
-                                            react_1.default.createElement("div", { className: "permission-description" })),
-                                        react_1.default.createElement("td", { className: "affected-users" }),
-                                        react_1.default.createElement("td", { className: "status" })),
-                                    react_1.default.createElement("tr", { className: "application-credentials-invite" },
-                                        react_1.default.createElement("td", null,
-                                            react_1.default.createElement("crowdin-p", null, "Access to the Integration"),
-                                            react_1.default.createElement("div", { className: "permission-description" }, "This provides access to sync files and modify the current integration settings.")),
-                                        react_1.default.createElement("td", { className: "affected-users" }),
-                                        react_1.default.createElement("td", { className: "status" }))))),
-                        zenModeUrl && (react_1.default.createElement("div", { className: "mt-2" },
-                            react_1.default.createElement("crowdin-input", { "with-fixed-height": true, label: "Zen Mode link", "help-text": "This focused view allows you to concentrate solely on the Integrations section, eliminating other distractions.", value: zenModeUrl, name: "zenModeLink", "with-copy-button": true }))))),
-                react_1.default.createElement("div", { slot: "footer" },
-                    react_1.default.createElement("crowdin-button", { id: "confirm-users-btn", outlined: true, onclick: "inviteUsers()" }, "Save"))),
-            excludedTargetLanguages && (react_1.default.createElement("crowdin-modal", { "modal-width": "50", "modal-title": "Select Target Languages for Translation", id: "excluded-languages" })),
-            infoModal && (react_1.default.createElement("crowdin-modal", { style: { display: 'none' }, id: "info-modal", "modal-width": "50", "modal-title": infoModal.title, "close-button-title": "Close" },
-                react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: infoModal.content } }))),
-            configurationFields && (react_1.default.createElement("crowdin-modal", { style: { display: 'none' }, id: "settings-modal", "modal-width": "65", "modal-title": "Settings", "close-button-title": "Close" },
-                react_1.default.createElement("div", { className: "loader hidden" },
-                    react_1.default.createElement("crowdin-progress-indicator", null)),
-                react_1.default.createElement("div", { id: "modal-content" },
-                    react_1.default.createElement("crowdin-tabs", { "tabs-config": JSON.stringify(configurationFields.map((f) => f.name)), "active-tab": "1" }, configurationFields.map((tab, tabIndex) => (react_1.default.createElement("div", { slot: `tab-${tabIndex + 1}` },
-                        react_1.default.createElement("div", { className: "crowdin-form" }, tab.fields.map((field) => (react_1.default.createElement(react_1.default.Fragment, null,
-                            renderConfigField(field),
-                            react_1.default.createElement("div", Object.assign({ style: { padding: '8px' } }, (field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {})))))))))))),
-                react_1.default.createElement("div", { slot: "footer" },
-                    react_1.default.createElement("crowdin-button", { id: "settings-save-btn", outlined: true, onclick: "saveSettings()" }, "Save")))),
-            ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (react_1.default.createElement("crowdin-modal", { style: { display: 'none' }, id: "confirm-schedule-modal", "modal-width": "50", "modal-title": "Synchronization options", "close-button-title": "Close", "close-button": "true", "body-overflow-unset": true },
-                react_1.default.createElement("crowdin-checkbox", { id: "selected-files", name: "selected-files", label: "Selected files", class: "hydrated", onchange: "onChangeAutoSynchronizationOptions(this)" }),
-                react_1.default.createElement("crowdin-checkbox", { id: "new-files", name: "new-files", label: "New files", class: "hydrated", onchange: "onChangeAutoSynchronizationOptions(this)" }),
-                react_1.default.createElement("div", { slot: "footer" },
-                    react_1.default.createElement("crowdin-button", { outlined: true, id: "save-schedule-sync", onclick: "saveScheduleSync()" }, "Save")))),
-            react_1.default.createElement("crowdin-modal", { style: { display: 'none' }, id: "user-error-detail", "close-button-title": "Close", "close-button": "true" }),
-            react_1.default.createElement("script", { type: "text/javascript", dangerouslySetInnerHTML: {
-                    __html: generateMainScript({
-                        name,
-                        userId,
-                        syncNewElements,
-                        withCronSync,
-                        webhooks,
-                        integrationOneLevelFetching,
-                        integrationSearchListener,
-                        integrationPagination,
-                        config,
-                        configurationFields,
-                        excludedTargetLanguages,
-                        infoModal,
-                        checkSubscription,
-                        reloadOnConfigSave,
-                        asyncProgress,
-                        notice,
-                    }),
-                } }))));
-};
-exports.MainPage = MainPage;
-// Helper function to generate main JavaScript
-function generateMainScript(options) {
-    const { name, userId, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, integrationPagination, config, configurationFields, excludedTargetLanguages, infoModal, checkSubscription, reloadOnConfigSave, asyncProgress, notice, } = options;
-    return `
-    document.body.addEventListener('refreshFilesList', (e) => {
-        if (e.detail.refreshIntegration) {
-            getIntegrationData({ hardReload: true });
-        } else if (e.detail.refreshCrowdin) {
-            getCrowdinData();
-        }
-    });
-    
-    document.body.addEventListener('crowdinFilesFolderToggled', (event) => {
-        if (event.detail.componentId === 'crowdin-files' && event.detail.isOpen && event.detail.type === '1') {
-            getFileProgress(event.detail.id);
-        }
-        ${integrationOneLevelFetching
-        ? `
-        if (event.detail.componentId === 'integration-files' && event.detail.isOpen) {
-            getIntegrationData({ parentId: event.detail.id, recursion: event.detail.recursion });
-        }
-        `
-        : ''}
-    });
-    
-    document.body.addEventListener('uploadFilesToCrowdin', uploadFilesToCrowdin);
-    document.body.addEventListener('uploadFilesToIntegration', uploadFilesToIntegration);
-    document.body.addEventListener('cancelAsyncAction', (e) => {
-      cancelJob(e.detail);
-    });
-    
-    ${integrationSearchListener
-        ? `
-    document.body.addEventListener("integrationFilterChange", (event) => {
-        getIntegrationData({ search: event.detail });
-    });
-    `
-        : ''}
-    
-    const appComponent = document.querySelector('crowdin-simple-integration');
-    const subscriptionModal = document.getElementById('subscription-modal');
-
-    const folderType = '0';
-    const fileType = '1';
-    const branchType = '2';
-
-    const JOB_TYPE = {
-        updateCrowdin: 'updateCrowdin',
-        updateIntegration: 'updateIntegration',
-        integrationSyncSettingsSave: 'integrationSyncSettingsSave',
-        crowdinSyncSettingsSave: 'crowdinSyncSettingsSave',
-    };
-
-    const JOB_STATUS = {
-        created: 'created',
-        inProgress: 'inProgress',
-        failed: 'failed',
-        canceled: 'canceled',
-        finished: 'finished',
-    };
-
-    const silentJobs = [
-        JOB_TYPE.integrationSyncSettingsSave,
-        JOB_TYPE.crowdinSyncSettingsSave,
-    ];
-
-    const asyncJobs = {};
-    let project = {};
-    let crowdinData = [];
-    let fileToSync = [];
-
-    getCrowdinData();
-    getIntegrationData({});
-    getActiveJobs();
-
-    function integrationLogout() {
-        checkOrigin()
-            .then(queryParams => fetch(\`api/logout\${queryParams}\`, { method: 'POST' }))
-            .then(checkResponse)
-            .then(reloadLocation)
-            .then(localStorage.removeItem('revised_${name}'))
-            .catch(e => catchRejection(e, e.error || 'Looks like you are not logged in'));
-    }
-
-    function getCrowdinData() {
-        appComponent.setAttribute('is-crowdin-loading', true);
-        checkOrigin()
-            .then(restParams => fetch('api/crowdin/files' + restParams))
-            .then(checkResponse)
-            .then((res) => {
-                const tree = res.map(e => {
-                    const item = {
-                        parent_id: e.parentId ? e.parentId : '0',
-                        name: e.name,
-                        id: e.id,
-                        customContent: e.customContent,
-                        labels: e.labels,
-                        disabled: e.disabled,
-                        tooltip: e.tooltip,
-                    };
-                    if (e.type) {
-                        item.type = e.type;
-                        item.node_type = fileType;
-                        item.failed = e.failed;
-                        item.excludedTargetLanguages = e.excludedTargetLanguages;
-                    } else {
-                        item.node_type = e.nodeType || folderType;
-                    }
-                    return item;
-                });
-                crowdinData = tree;
-                appComponent.setCrowdinFilesData(tree);
-                return checkOrigin();
-            })
-            .then(restParams => fetch('api/crowdin/project' + restParams))
-            .then(checkResponse)
-            .then((res) => {
-                project = res;
-                const languagesSorted = project.targetLanguages.map(language => ({
-                  sourceLanguageId: res.sourceLanguage.editorCode,
-                  projectEditorLink: res.projectEditorLink,
-                  ...language,
-                })).sort((a, b) => a.name.localeCompare(b.name));
-
-                if (project.inContext && config?.inContext) {
-                    languagesSorted.push({...project.inContextPseudoLanguage, inContext: true});
-                }
-
-                setLanguagesForTranslation(languagesSorted);
-                appComponent.setCrowdinLanguagesData(languagesSorted);
-            })
-            ${withCronSync || webhooks ? `.then(() => getSyncSettings('crowdin'))` : ''}
-            .catch(e => catchRejection(e, 'Can\\'t fetch Crowdin data'))
-            .finally(() => (appComponent.setAttribute('is-crowdin-loading', false)));
-    }
-
-    function getIntegrationData({ hardReload = false, parentId = '', search = '', page = 0, recursion = false } = {}, recursionState = null) {
-        appComponent.setAttribute('is-integration-loading', true);
-        return checkOrigin()
-            .then(restParams => fetch(\`api/integration/data\${restParams}&parent_id=\${encodeURIComponent(parentId)}&search=\${encodeURIComponent(search)}&page=\${page}\`))
-            .then(checkResponse)
-            .then(async (res) => {
-                const files = res.data;
-                const stopPagination = res.stopPagination;
-                const tree = files.map(e => {
-                    const item = {
-                        parent_id: e.parentId ? e.parentId : '0',
-                        name: e.name,
-                        id: e.id,
-                        customContent: e.customContent,
-                        labels: e.labels,
-                        disabled: e.disabled,
-                        tooltip: e.tooltip,
-                    };
-                    if (e.type) {
-                        item.isNew = e.isNew;
-                        item.isUpdated = e.isUpdated;
-                        item.notSynced = e.notSynced;
-                        item.type = e.type;
-                        item.node_type = fileType;
-                    } else {
-                        item.node_type = e.nodeType || folderType;
-                    }
-                    return item;
-                });
-
-                const appIntegrationFiles = appComponent.querySelector('#integration-files');
-                if (hardReload) {
-                    appComponent.setIntegrationFilesData(tree);
-                } else if (tree.length) {
-                    appComponent.pushIntegrationFilesData(tree).then(() => {
-                        if (parentId) {
-                            appIntegrationFiles.getSelected().then(async selection => {
-                              const selectedIds = selection?.filter((node) => node).map(({id}) => id.toString());
-                              const filteredNodes = tree.filter((node) => !selectedIds.includes(node.id.toString()) && selectedIds.includes(node.parent_id.toString()));
-
-                              if (filteredNodes?.length) {
-                                const filteredNodesId = filteredNodes.map(({id}) => id.toString());
-                                await appIntegrationFiles.setSelected(filteredNodesId);
-                              }
-                            });
-                        }
-                    });
-                }
-                
-                ${integrationPagination
-        ? `
-                if (stopPagination) {
-                    appIntegrationFiles.setAttribute('load-more-disabled', true);
-                } else {
-                    appIntegrationFiles.setAttribute('load-more-disabled', false);
-                }
-                `
-        : ''}
-                
-                if (search) {
-                    const openIds = files.filter(e => !e.type).map(e => e.id);
-                    appComponent.setIntegrationOpenedFolders(openIds);
-                }
-
-                if (recursion) {
-                    if (!recursionState) {
-                        recursionState = {
-                            openedFolders: new Set(),
-                            calls: 0,
-                            setLoading(isLoading) {
-                                appComponent.setAttribute('is-integration-loading', isLoading);
-                            },
-                        };
-                        recursionState.setLoading(true);
-                    }
-
-                    if (parentId) {
-                        recursionState.openedFolders.add(parentId);
-                    }
-
-                    const folderItems = files.filter(isFolder);
-
-                    if (folderItems.length === 0) {
-                        return Promise.resolve();
-                    }
-
-                    folderItems.forEach(folder => recursionState.openedFolders.add(folder.id));
-
-                    const currentOpenedFolders = await appComponent.getIntegrationOpenedFolders();
-                    appComponent.setIntegrationOpenedFolders([...currentOpenedFolders, ...recursionState.openedFolders]);
-
-                    const recursivePromises = folderItems.map(async folder => {
-                        recursionState.calls++;
-
-                        try {
-                            return getIntegrationData({ parentId: folder.id, recursion: true }, recursionState);
-                        } finally {
-                            recursionState.calls--;
-                            if (recursionState.calls === 0) {
-                                recursionState.setLoading(false);
-                            }
-                        }
-                    });
-
-                    return Promise.all(recursivePromises);
-                }
-            })
-            ${withCronSync || webhooks ? `.then(() => getSyncSettings('integration'))` : ''}
-            .catch(e => catchRejection(e, 'Can\\'t fetch ${name} templates'))
-            .finally(() => {
-                if (!recursionState && !recursion) {
-                    appComponent.setAttribute('is-integration-loading', false);
-                } else if (recursionState && recursionState.calls === 0) {
-                    appComponent.setAttribute('is-integration-loading', false);
-                }
-            });
-    }
-
-    function getSyncSettings(provider) {
-        checkOrigin()
-            .then(restParams => fetch(\`/api/sync-settings/\${provider}\` + restParams))
-            .then(checkResponse)
-            .then((res) => {
-                if (provider === 'crowdin') {
-                    ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin)
-        ? `appComponent.setCrowdinScheduleSync(res, true, true);`
-        : `appComponent.setCrowdinScheduleSync(res);`}
-                } else {
-                    ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)
-        ? `appComponent.setIntegrationScheduleSync(res, true, true);`
-        : `appComponent.setIntegrationScheduleSync(res);`}
-                }
-            })
-            .catch(e => catchRejection(e, 'Can\\'t fetch file progress'));
-    }
-
-    function getFileProgress(fileId) {
-        checkOrigin()
-            .then(restParams => fetch(\`api/crowdin/file-progress/\${fileId}\` + restParams))
-            .then(checkResponse)
-            .then((res) => (appComponent.addCrowdinFileProgress(res)))
-            .catch(e => catchRejection(e, 'Can\\'t fetch file progress'));
-    }
-
-    function uploadFilesToCrowdin(event, languages = []) {
-        let files = [];
-        let uploadTranslations = false;
-        if (event.detail?.action === 'uploadTranslations') {
-            files = event.detail.files;
-            uploadTranslations = true;
-        } else if (event.detail?.action === 'excludedTargetLanguages') {
-          fileToSync = event.detail.files;
-          openLanguageModal();
-          return;
-        } else {
-            files = event.detail;
-        }
-
-        if (event.detail?.length === 0 || !event.detail) {
-            showToast('Select templates which will be pushed to Crowdin');
-            return;
-        }
-        
-        appComponent.setAttribute('is-to-crowdin-process', true);
-        let req;
-        ${integrationOneLevelFetching
-        ? `
-        req = files.map(f => ({
-            name: f.name,
-            id: f.id,
-            type: f.type,
-            parentId: f.parent_id,
-            nodeType: f.node_type
-        }));
-        `
-        : `
-        req = files.filter(f => f.node_type !== folderType).map(f => ({
-            name: f.name,
-            id: f.id,
-            type: f.type,
-            parentId: f.parent_id
-        }));
-        `}
-        
-        checkOrigin()
-            .then(restParams => fetch(\`api/crowdin/update\${restParams}&uploadTranslations=\${uploadTranslations}&languages=\${languages}\`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(req)
-            }))
-            .then(checkResponse)
-            .then((res) => {
-                checkJob({
-                    jobId: res?.jobId,
-                    jobType: JOB_TYPE.updateCrowdin,
-                })
-            })
-            .catch(e => catchRejection(e, 'Can\\'t upload templates to Crowdin'));
-    }
-
-    function getActiveJobs() {
-        checkOrigin()
-            .then(restParams => fetch(\`api/jobs\${restParams}\`))
-            .then(checkResponse)
-            .then((jobs) => {
-                if (!Array.isArray(jobs)) {
-                  return;
-                }
-
-                jobs.forEach((job) => {
-                    switch (job.type) {
-                        case JOB_TYPE.updateCrowdin:
-                            appComponent.setAttribute('is-to-crowdin-process', true);
-                            break;
-                        case JOB_TYPE.updateIntegration:
-                            appComponent.setAttribute('is-to-integration-process', true);
-                            break;
-                        case JOB_TYPE.crowdinSyncSettingsSave:
-                            appComponent.setAttribute(\`is-crowdin-sync-settings-in-progress\`, true)
-                            break;
-                        case JOB_TYPE.integrationSyncSettingsSave:
-                            appComponent.setAttribute(\`is-integration-sync-settings-in-progress\`, true)
-                            break;
-                        default:
-                    }
-
-                    checkJob({
-                        jobId: job.id,
-                        jobType: job.type,
-                    })
-                })
-            })
-            .catch(e => catchRejection(e, 'Sync status check failed'))
-    }
-
-    function cancelJob(jobId) {
-        if (asyncJobs[jobId]?.isFailed) {
-            return;
-        }
-
-        checkOrigin()
-            .then(restParams => fetch('api/jobs' + restParams + '&jobId=' + jobId, {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' },
-            }))
-            .then(checkResponse)
-            .then(() => showToast('Cancellation…'))
-            .catch(e => catchRejection(e, 'Sync cancellation failed'));
-    }
-
-    function checkJob({jobId, jobType, onSuccess, onError, onFinally}) {
-        switch (jobType) {
-            case JOB_TYPE.updateCrowdin:
-                if (!onSuccess) {
-                    onSuccess = ((job) => {
-                        getCrowdinData();
-                    });
-                }
-
-                if (!onFinally) {
-                    onFinally = (() => appComponent.setAttribute('is-to-crowdin-process', false));
-                }
-                break;
-            case JOB_TYPE.updateIntegration:
-                if (!onFinally) {
-                    onFinally = (() => appComponent.setAttribute('is-to-integration-process', false));
-                }
-                break;
-            case JOB_TYPE.crowdinSyncSettingsSave:
-                if (!onFinally) {
-                    onFinally = (() => appComponent.setAttribute(\`is-crowdin-sync-settings-in-progress\`, false));
-                }
-                break;
-            case JOB_TYPE.integrationSyncSettingsSave:
-                if (!onFinally) {
-                    onFinally = (() => appComponent.setAttribute(\`is-integration-sync-settings-in-progress\`, false));
-                }
-                break;
-            default:
-        }
-
-        checkOrigin()
-            .then(restParams => fetch('api/jobs' + restParams + '&jobId=' + jobId))
-            .then(checkResponse)
-            .then((job) => {
-                const isFailed = [JOB_STATUS.failed, JOB_STATUS.canceled].includes(job.status);
-                const progress = isFailed || JOB_STATUS.finished === job.status ? 100 : job.progress;
-                const info = JOB_STATUS.canceled === job.status ? \`Cancelled\\n\${job.info || ''}\` : job.info;
-
-                !silentJobs.find((type) => type === jobType) && pushJobs([ {
-                    id: job.id,
-                    title: job.title,
-                    progress,
-                    info,
-                    isFailed,
-                } ]);
-
-                if (isFailed) {
-                    onError && onError();
-                } else if ([JOB_STATUS.created, JOB_STATUS.inProgress].includes(job.status) && job.progress < 100) {
-                    setTimeout(() => {
-                        checkJob({jobId, jobType, onSuccess, onError, onFinally});
-                    }, ${asyncProgress.checkInterval});
-                    return;
-                } else {
-                    onSuccess && onSuccess(job);
-                }
-
-                onFinally && onFinally(job);
-            })
-            .catch((e) => {
-                onFinally && onFinally();
-
-                !silentJobs.find((type) => type === jobType) && pushJobs([ {
-                    id: jobId,
-                    isFailed: true,
-                } ]);
-
-                showToast('Sync status check failed');
-            });
-    }
-
-    function pushJobs(jobs) {
-        const el = document.querySelector('crowdin-async-progress');
-        if (el && el.pushJobs) {
-            el.pushJobs(jobs);
-            jobs.forEach((job) => (asyncJobs[job.id] = job));
-        } else {
-            setTimeout(() => {
-                pushJobs(jobs);
-            }, 300);
-        }
-    }
-
-    function uploadFilesToIntegration(event) {
-        let files = {};
-        let forcePushTranslations = false;
-        if (event.detail?.action === 'forcePushTranslations') {
-          files = event.detail.files;
-          forcePushTranslations = true;
-        } else {
-          files = event.detail;
-        }
-
-        if (Object.keys(event.detail).length === 0 || !event.detail) {
-            showToast('Select files which will be uploaded to ${name}');
-            return;
-        }
-
-        appComponent.setAttribute('is-to-integration-process', true);
-        const req = {};
-        Object.keys(files)
-            .filter(id => crowdinData.find(c => c.id === id).node_type === fileType)
-            .forEach(id => (req[id] = files[id]));
-        checkOrigin()
-            .then(restParams => fetch(\`api/integration/update\${restParams}&forcePushTranslations=\${forcePushTranslations}\`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(req)
-            }))
-            .then(checkResponse)
-            .then((res) => {
-                checkJob({
-                    jobId: res?.jobId,
-                    jobType: JOB_TYPE.updateIntegration,
-                })
-            })
-            .catch(e => catchRejection(e, 'Can\\'t upload files to ${name}'))
-    }
-
-    function openLanguageModal() {
-      openModal(languageModal);
-    }
-
-    async function uploadFilesToCrowdinWithExcludedLanguages() {
-      const languageSelect = document.querySelector('#language-select');
-      const selectedLanguages = await languageSelect.getValue();
-      closeModal(languageModal);
-      uploadFilesToCrowdin({ detail: fileToSync }, selectedLanguages);
-    }
-
-    async function setLanguagesForTranslation(languages) {
-      const languageIds = languages.map(language => language.id);
-      if (languageModal) {
-        let modalContent = \`
-      <div>
-        <crowdin-select
-          is-multi
-          is-searchable
-          is-position-fixed
-          close-on-select="false"
-          name="languages"
-          id="language-select"
-          label="Languages"
-        >\`;
-
-        for (const language of languages) {
-          modalContent += \`<option value="\${language.id}">\${language.name}</option>\`;
-        }
-
-        modalContent += \`
-        </crowdin-select>
-        </div>
-        <div slot="footer">
-            <crowdin-button id="upload-exclude-languages" outlined onclick="uploadFilesToCrowdinWithExcludedLanguages()">
-                <div class="integration-icon-button">
-                  <span>Sync to</span>
-                  <crowdin-logo is-icon/>
-                </div>
-            </crowdin-button>
-        </div>
-    \`;
-
-        languageModal.innerHTML = modalContent;
-
-        const select = document.querySelector('#language-select')
-        await select.setValue(languageIds);
-      }
-    }
-
-    function hideConfirmUsersBlock() {
-        const confirmUsersBlock = document.querySelector('.confirm-users-block');
-        confirmUsersBlock.classList.add('hidden');
-
-        const permissionsModal = document.getElementById('permissions-modal');
-        permissionsModal.setAttribute('body-overflow-unset', true)
-    }
-
-    function getUserFullName(user) {
-        if (user.full_name) {
-            return user.full_name;
-        }
-
-        const ownerFullName = user.name || ((user.first_name || '') + ' ' + (user.last_name || '')).trim();
-
-        return !!ownerFullName && user?.login !== ownerFullName
-            ? \`\${ownerFullName} (\${user?.login})\`
-            : user?.login;
-    }
-
-    function showPermissionsDialog() {
-        hideConfirmUsersBlock();
-        openModal(permissions)
-        setLoader('#permissions-modal');
-        const select = document.getElementById('users');
-
-        select.value = '[]';
-
-        Promise.all([
-            new Promise((resolve) => {
-                checkOrigin()
-                    .then(restParams => fetch('api/users' + restParams))
-                    .then(checkResponse)
-                    .then((res) => {
-                        resolve(JSON.stringify(res.data.managers));
-                    })
-            }),
-            new Promise((resolve) => {
-                AP.getUsers(res => {
-                    const users = Object.values(res).filter(user => user.id !== Number('${userId}'));
-
-                    resolve(users.map(user => \`<option value="\${user.id}">\${sanitizeHTML(getUserFullName(user))}</option>\`).join(''));
-                })
-            })
-        ])
-            .then(([managers, users]) => {
-                select.innerHTML = users;
-                select.value = managers;
-            })
-            .catch(e => catchRejection(e, 'Can\\'t fetch users'))
-            .finally(() => unsetLoader('#permissions-modal'));
-    }
-
-    function showConfirmUsersBlock() {
-        const confirmUsersBlock = document.querySelector('.confirm-users-block');
-        confirmUsersBlock.classList.remove('hidden');
-
-        const permissionsModal = document.getElementById('permissions-modal');
-        permissionsModal.removeAttribute('body-overflow-unset')
-    }
-
-    function checkUsers() {
-        setLoader('#permissions-modal');
-
-        const select = document.getElementById('users');
-
-        if (select.value === '[]') {
-            hideConfirmUsersBlock();
-            unsetLoader('#permissions-modal');
-            return;
-        }
-
-        const users = JSON.parse(select.value);
-        const user_ids = users.filter(id => parseInt(id));
-        const emails = users.filter(id => !parseInt(id));
-
-        const params = { user_ids, emails };
-
-        Promise.all([
-            new Promise((resolve) => {
-                checkOrigin()
-                    .then(restParams => fetch('api/users' + restParams))
-                    .then(checkResponse)
-                    .then((usersResponse) => {
-                        resolve(usersResponse.data.managers);
-                    });
-            }),
-            new Promise((resolve) => {
-                AP.validateUsers(params, (res) => {
-                    resolve(res.data);
-                });
-            }),
-            new Promise((resolve) => {
-                AP.getUsers(res => {
-                    resolve(res);
-                });
-            })
-        ])
-        .then(([appManagers, checkUsersResponse, allUsers]) => {
-            const newUserEmails = checkUsersResponse.newUserEmails.map(email => ({name: email}));
-
-            const newProjectManagers = [
-                ...newUserEmails,
-                ...checkUsersResponse.newProjectManagers.map(user => ({
-                    name: getUserFullName(user),
-                })),
-            ];
-
-            const newApplicationAccessUsers = [
-                ...newUserEmails,
-                ...checkUsersResponse.newApplicationAccessUsers.map(user => ({
-                    name: getUserFullName(user),
-                })),
-            ];
-
-            const newApplicationManagers = [
-                ...newUserEmails,
-                ...Object.values(allUsers)
-                    .filter(user => users.some(id => +id === user.id) && !appManagers.some(id => +id === user.id))
-                    .map(user => ({name: getUserFullName(user)})),
-            ];
-
-            prepareUsersConfirmBlock({
-                ...checkUsersResponse,
-                newUserEmails,
-                newProjectManagers,
-                newApplicationAccessUsers,
-                newApplicationManagers,
-            });
-        })
-        .catch(e => catchRejection(e, e?.error || 'Can\\'t invite users'))
-        .finally(() => unsetLoader('#permissions-modal'));
-    }
-
-    function inviteUsers() {
-        setLoader('#permissions-modal');
-
-        const select = document.getElementById('users');
-        const users = JSON.parse(select.value);
-        const user_ids = users.filter(id => parseInt(id));
-        const emails = users.filter(id => !parseInt(id));
-
-        const params = { user_ids, emails };
-
-        AP.inviteUsers(params, (res) => {
-            if (!res.success) {
-                catchRejection(res, res?.error?.message || 'Can\\'t invite users')
-                unsetLoader('#permissions-modal');
-                return;
-            }
-
-            checkOrigin()
-                .then(restParams => fetch('api/invite-users' + restParams, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(res.data)
-                }))
-                .then(checkResponse)
-                .then((res) => {
-                    if (!res.success) {
-                        catchRejection(res, res?.message || 'Can\\'t invite users');
-                        return;
-                    }
-
-                    showToast('Users successfully updated');
-                    hideConfirmUsersBlock();
-                    closeModal(permissions);
-                })
-                .catch((e) => catchRejection(e, e?.error || 'Can\\'t invite users'))
-                .finally(() => unsetLoader('#permissions-modal'));
-        });
-    }
-
-    function prepareUsersConfirmBlock(usersData) {
-        showConfirmUsersBlock();
-
-        const organizationInvite = document.querySelector('.organization-invite');
-        const projectInvite = document.querySelector('.project-invite');
-        const applicationCredentialsInvite = document.querySelector('.application-credentials-invite');
-
-        const grantedElement = '<crowdin-p>&horbar;</crowdin-p>';
-        const willGrantedElement = '<span class="badge badge-will-be-granted">Will Be Granted</span>';
-        const notAvailableElement = '<span class="badge badge-not-available">Action Required</span>';
-
-        // only in enterprise
-        if (organizationInvite) {
-            const organizationWillGrantElement = \`<span class="badge badge-will-be-granted">Will Be Registered</span>\`;
-
-            processUsersWhoWillBeInvitedToOrganization(organizationInvite, usersData, organizationWillGrantElement, grantedElement, notAvailableElement);
-        }
-
-        processUsersWhoWillBeInvited(projectInvite, usersData.newProjectManagers, willGrantedElement, grantedElement);
-        processUsersWhoWillBeInvited(applicationCredentialsInvite, usersData.newApplicationManagers, willGrantedElement, grantedElement);
-
-        processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement);
-    }
-
-    function processUsersWhoWillBeInvitedToOrganization(element, usersData, willGrantedElement, alreadyGrantedMessage, notAvailableElement) {
-        const tooltip = element.querySelector('.status');
-        const description = element.querySelector('.permission-description');
-        const userList = element.querySelector('.affected-users');
-
-        description.classList.remove('text-warning');
-        description.innerText = '';
-
-        const users = usersData.newUserEmails;
-
-        if (users.length) {
-            if (usersData.inviteRestricted) {
-                description.classList.add('text-warning');
-                description.innerText = 'New user invitations are restricted to administrators.';
-
-                tooltip.innerHTML = notAvailableElement;
-            } else {
-                tooltip.innerHTML = willGrantedElement;
-            }
-
-            let affectedUsers = '<ul>';
-            for (const user of users) {
-                affectedUsers += \`<li><crowdin-p>\${sanitizeHTML(user.name)}</crowdin-p></li>\`;
-            }
-            affectedUsers += '</ul>';
-            userList.innerHTML = affectedUsers;
-        } else {
-            tooltip.innerHTML = alreadyGrantedMessage;
-            userList.innerHTML = alreadyGrantedMessage;
-        }
-    }
-
-    function processUsersWhoWillBeInvited(element, users, grantMessage, alreadyGrantedMessage) {
-        const tooltip = element.querySelector('.status');
-        const userList = element.querySelector('.affected-users');
-
-        if (users.length) {
-            tooltip.innerHTML = grantMessage;
-
-            let affectedUsers = '<ul>';
-            for (const user of users) {
-                affectedUsers += \`<li><crowdin-p>\${sanitizeHTML(user.name)}</crowdin-p></li>\`;
-            }
-            affectedUsers += '</ul>';
-            userList.innerHTML = affectedUsers;
-        } else {
-            tooltip.innerHTML = alreadyGrantedMessage;
-            userList.innerHTML = alreadyGrantedMessage;
-        }
-    }
-
-    function processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement) {
-        const applicationSettingsInvite = document.querySelector('.application-settings-invite');
-
-        const tooltip = applicationSettingsInvite.querySelector('.status');
-        const description = applicationSettingsInvite.querySelector('.permission-description');
-        const userList = applicationSettingsInvite.querySelector('.affected-users');
-
-        let descriptionMessage = 'This can be configured in organization settings (Apps section).';
-        description.classList.remove('text-warning');
-        description.innerText = descriptionMessage;
-
-        let affectedUsers = '<ul>';
-
-        if (!usersData.newApplicationAccessUsers.length) {
-            tooltip.innerHTML = grantedElement;
-            userList.innerHTML = grantedElement;
-        } else {
-            if (usersData.isAdmin) {
-                tooltip.innerHTML = willGrantedElement;
-                for (const user of usersData.newApplicationAccessUsers) {
-                    affectedUsers += \`<li><crowdin-p>\${sanitizeHTML(user.name)}</crowdin-p></li>\`;
-                }
-                userList.innerHTML = affectedUsers + '</ul>';
-            } else {
-                descriptionMessage += ' Only organization admins have permission to update this setting.';
-
-                description.classList.add('text-warning');
-                description.innerText = descriptionMessage;
-
-                tooltip.innerHTML = notAvailableElement;
-                for (const user of usersData.newApplicationAccessUsers) {
-                    affectedUsers += \`<li><crowdin-p>\${sanitizeHTML(user.name)}</crowdin-p></li>\`;
-                }
-                userList.innerHTML = affectedUsers + '</ul>';
-            }
-        }
-    }
-
-    function setLoader(id) {
-        const loader = document.querySelector(\`\${id} .loader\`);
-        loader.classList.remove('hidden');
-    }
-
-    function unsetLoader(id) {
-        const loader = document.querySelector(\`\${id} .loader\`);
-        setTimeout(function() {
-            loader.classList.add('hidden');
-        }, 500)
-    }
-
-    ${configurationFields
-        ? `
-    const settingsModal = document.getElementById('settings-modal');
-    const settingsSaveBtn = document.getElementById('settings-save-btn');
-    let config = JSON.parse('${config}'.replace(/\\n/g, '\\\\n'));
-    const newCrowdinFiles = config?.['new-crowdin-files'];
-    const newIntegrationFiles = config?.['new-integration-files'];
-
-    function triggerEvent(el, type) {
-        const e = document.createEvent('HTMLEvents');
-        e.initEvent(type, false, true);
-        el.dispatchEvent(e);
-    }
-
-    function fillSettingsForm() {
-        Object.entries(config).forEach(([key, value]) => {
-            const el = document.getElementById(\`\${key}-settings\`);
-            if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
-                if (el.tagName.toLowerCase() === 'crowdin-select') {
-                    if (el.hasAttribute('is-multi')) {
-                        el.value = JSON.stringify(value);
-                    } else {
-                        el.value = JSON.stringify([value]);
-                    }
-                } else if (el.tagName.toLowerCase() === 'crowdin-checkbox') {
-                    el.checked = !!value;
-                } else if (el.tagName.toLowerCase() === 'crowdin-textarea') {
-                  el.value = value;
-                  el.setValue(value);
-                } else {
-                    el.value = value;
-                }
-
-                triggerEvent(el, 'change');
-            }
-        });
-    }
-
-    function saveSettings() {
-        setLoader('#settings-modal');
-        const settingsElements = Array.from(document.querySelectorAll('#modal-content crowdin-tabs > div'));
-        const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input', 'crowdin-textarea'];
-        const configReq = {};
-
-        settingsElements.forEach(tab => {
-            const formElements = Array.from(tab.querySelectorAll('.crowdin-form > *'));
-            formElements
-                .filter(e => tags.includes(e.tagName.toLowerCase()))
-                .forEach(e => {
-                    const key = e.getAttribute('key');
-                    let value;
-                    if (e.tagName.toLowerCase() === 'crowdin-select') {
-                        value = JSON.parse(e.value);
-                        if (!e.hasAttribute('is-multi')) {
-                            value = value.length > 0 ? value[0] : undefined;
-                        }
-                    } else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
-                        value = !!e.checked;
-                    } else {
-                        value = e.value;
-                    }
-                    configReq[key] = value;
-                });
-        });
-
-        let isValidationError = false;
-        settingsSaveBtn.setAttribute('disabled', true);
-        checkOrigin()
-            .then(restParams => fetch('api/settings' + restParams, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ config: configReq })
-            }))
-            .then(checkResponse)
-            .then(() => {
-                showToast('Settings successfully saved');
-                config = configReq;
-            })
-            .catch(e => {
-                if (e?.error && e?.error?.type === 'validation_error') {
-                    Object.keys(e?.error?.details).forEach(key => {
-                        const el = document.getElementById(\`\${key}-settings\`);
-                        if (el) {
-                            el.setAttribute('error', 'true');
-                            el.setAttribute('error-text', e?.error?.details[key]);
-                        }
-                    });
-
-                    isValidationError = true;
-                    showToast(e?.error?.details?.message || 'Can\\'t save settings');
-                    settingsSaveBtn.removeAttribute('disabled');
-                    return;
-                }
-                catchRejection(e, 'Can\\'t save settings')
-            })
-            .finally(() => {
-                unsetLoader('#settings-modal');
-                settingsSaveBtn.removeAttribute('disabled');
-                if (!isValidationError) {
-                    closeModal(settingsModal);
-                    ${reloadOnConfigSave
-            ? `
-                    getIntegrationData({ hardReload: true });
-                    getCrowdinData();
-                    `
-            : ''}
-                }
-            });
-    }
-    `
-        : `
-    const settingsModal = undefined;
-    `}
-
-    const permissions = document.getElementById('permissions-modal');
-
-    ${excludedTargetLanguages
-        ? `
-    const languageModal = document.getElementById('excluded-languages');
-    `
-        : `
-    const languageModal = undefined;
-    `}
-
-    ${infoModal
-        ? `
-    const infoModal = document.getElementById('info-modal');
-    `
-        : `
-    const infoModal = undefined;
-    `}
-
-    document.addEventListener('keydown', (event) => {
-        if (event.keyCode == 27) {
-            if (users) {
-                closeModal(permissions);
-            }
-            if (infoModal) {
-                closeModal(infoModal);
-            }
-            if (settingsModal) {
-                closeModal(settingsModal);
-            }
-            if (languageModal) {
-              closeModal(languageModal);
-            }
-        }
-    });
-
-    ${integrationPagination
-        ? `
-    document.body.addEventListener('fileListEnd', (e) => {
-        getIntegrationData({ page: e.detail.page });
-    })
-    `
-        : ''}
-
-    ${withCronSync || webhooks
-        ? `
-    const scheduleModal = document.getElementById('confirm-schedule-modal');
-    let syncData;
-
-    document.body.addEventListener('integrationScheduleSync', setIntegrationScheduleSync);
-    document.body.addEventListener('crowdinScheduleSync', setCrowdinScheduleSync);
-    document.body.addEventListener('crowdinDisableSync', disableCrowdinSync);
-    document.body.addEventListener('integrationDisableSync', disableIntegrationSync);
-
-    function getIntegrationFoldersToExpand(allData, syncedFiles) {
-        return Array.isArray(allData)
-            ? allData.filter(
-                    node => (node.node_type === folderType && !syncedFiles.find((syncedFile) => syncedFile.parent_id === node.id))
-                ).map(node => ({
-                    ...node,
-                    nodeType: node.node_type,
-                    parentId: node.parent_id,
-                }))
-            : [];
-    }
-
-    async function saveScheduleSync() {
-        const newFile = scheduleModal.querySelector('#new-files').checked || false;
-        const selectedFiles = scheduleModal.querySelector('#selected-files').checked || false;
-
-        const type = scheduleModal.getAttribute('data-type');
-
-        if (type === 'crowdin') {
-            appComponent.setCrowdinScheduleSync(syncData, newFile, selectedFiles);
-            appComponent.setCrowdinFilesHasSyncOption(true);
-            const syncedFiles = await appComponent.getCrowdinScheduleSync(true);
-            appComponent.setAttribute('is-crowdin-sync-settings-in-progress', true);
-            updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
-        } else if (type === 'integration') {
-            appComponent.setIntegrationScheduleSync(syncData, newFile, selectedFiles);
-            appComponent.setIntegrationFilesHasSyncOption(true);
-            const syncedFiles = await appComponent.getIntegrationScheduleSync(true);
-            appComponent.setAttribute('is-integration-sync-settings-in-progress', true);
-            ${integrationOneLevelFetching
-            ? `
-            updateSyncSettings(
-                syncedFiles,
-                'schedule',
-                'integration',
-                selectedFiles ? getIntegrationFoldersToExpand(syncData, syncedFiles) : [],
-            );
-            `
-            : `
-            updateSyncSettings(syncedFiles, 'schedule', 'integration');
-            `}
-        }
-
-        closeModal(scheduleModal);
-    }
-
-    async function openScheduleModal(type) {
-        const newFile = scheduleModal.querySelector('#new-files')
-        const selectedFiles = scheduleModal.querySelector('#selected-files');
-        let newFileStatus = 'unChecked';
-
-        const integrationSyncFolders = (await document.querySelector('crowdin-simple-integration').getIntegrationScheduleSync(true))
-            .filter(elements => elements.node_type === '0');
-
-        const selectedIntegrationFolders = (await document.getElementById('integration-files').getSelected(true))
-            .filter(elements => elements.node_type === '0');
-
-        for (let i = 0; i < selectedIntegrationFolders.length; i++) {
-            const selectedElement = selectedIntegrationFolders[i];
-
-            const found = integrationSyncFolders.some(integrationElement =>
-                integrationElement.id === selectedElement.id
-            );
-
-            if (found) {
-                newFileStatus = 'checked';
-            } else if (!found && newFileStatus === 'checked') {
-                newFileStatus = 'clear-selection';
-                break;
-            } else {
-                newFileStatus = 'unChecked';
-            }
-        }
-
-        if (newFileStatus === 'checked') {
-            newFile[newFileStatus] = true;
-            newFile.value = true;
-            newFile.removeAttribute('clear-selection');
-        } else if (newFileStatus === 'clear-selection') {
-            newFile.checked = false;
-            newFile.value = false;
-            newFile.setAttribute(newFileStatus, '');
-        } else {
-            newFile.checked = false;
-            newFile.value = false;
-            newFile.removeAttribute('clear-selection');
-        }
-
-        selectedFiles.checked = true;
-        selectedFiles.value = true;
-        scheduleModal.querySelector('#save-schedule-sync').setAttribute('disabled', false);
-        scheduleModal.setAttribute('data-type', type);
-        openModal(scheduleModal);
-    }
-
-    function onChangeAutoSynchronizationOptions() {
-        const newFiles = document.getElementById('new-files');
-        newFiles.removeAttribute('clear-selection');
-
-        const newFilesStatus = newFiles.checked || false;
-        const selectedFiles = document.getElementById('selected-files').checked || false;
-        const buttonSaveScheduleSync = document.getElementById('save-schedule-sync');
-
-        if (newFilesStatus || selectedFiles) {
-            buttonSaveScheduleSync.removeAttribute('disabled');
-        } else {
-            buttonSaveScheduleSync.setAttribute('disabled', true);
-        }
-    }
-
-    async function hasFolder(selectedFiles) {
-        let isFolder;
-        if (Array.isArray(selectedFiles)) {
-            isFolder = selectedFiles.find((file) => file.node_type === folderType || file.node_type === branchType);
-        } else {
-            const files = await appComponent.getCrowdinFilesData();
-            const folders = files.filter((file) => file.node_type === folderType || file.node_type === branchType);
-            isFolder = folders.find((folder) => selectedFiles.hasOwnProperty(folder.id));
-        }
-
-        return isFolder !== undefined;
-    }
-
-    async function setIntegrationScheduleSync(e) {
-        if (e.detail.length === 0) {
-            showToast('Select templates which will be pushed to Crowdin');
-            return;
-        }
-
-        ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)
-            ? `
-        syncData = e.detail;
-        const isFolder = await hasFolder(e.detail);
-        if (isFolder && !newIntegrationFiles) {
-            await openScheduleModal('integration');
-            return;
-        }
-
-        appComponent.setIntegrationScheduleSync(e.detail);
-        appComponent.setIntegrationFilesHasSyncOption(true);
-        const syncedFiles = await appComponent.getIntegrationScheduleSync(true);
-        `
-            : `
-        const syncedFiles = await appComponent.getIntegrationScheduleSync();
-        `}
-
-        appComponent.setAttribute('is-integration-sync-settings-in-progress', true);
-        ${integrationOneLevelFetching
-            ? `
-        updateSyncSettings(syncedFiles, 'schedule', 'integration', getIntegrationFoldersToExpand(e.detail, syncedFiles));
-        `
-            : `
-        updateSyncSettings(syncedFiles, 'schedule', 'integration');
-        `}
-    }
-
-    async function setCrowdinScheduleSync(e) {
-        if (e.detail.length === 0) {
-            showToast('Select templates which will be pushed to Crowdin');
-            return;
-        }
-
-        ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin)
-            ? `
-        syncData = e.detail;
-        const isFolder = await hasFolder(e.detail);
-        if (isFolder && !newCrowdinFiles) {
-            await openScheduleModal('crowdin');
-            return;
-        }
-
-        appComponent.setCrowdinScheduleSync(e.detail);
-        appComponent.setCrowdinFilesHasSyncOption(true);
-        const syncedFiles = await appComponent.getCrowdinScheduleSync(true);
-        `
-            : `
-        const syncedFiles = await appComponent.getCrowdinScheduleSync();
-        `}
-        appComponent.setAttribute('is-crowdin-sync-settings-in-progress', true);
-        updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
-    }
-
-    async function disableIntegrationSync(e) {
-        if (e.detail.length === 0) {
-            showToast('Select templates which will be pushed to Crowdin');
-            return;
-        }
-        appComponent.setAttribute('is-integration-sync-settings-in-progress', true);
-        ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)
-            ? `
-        const syncedFiles = await appComponent.getIntegrationScheduleSync(true);
-        `
-            : `
-        const syncedFiles = await appComponent.getIntegrationScheduleSync();
-        `}
-
-        updateSyncSettings(syncedFiles, 'schedule', 'integration');
-    }
-
-    async function disableCrowdinSync(e) {
-        if (e.detail.length === 0) {
-            showToast('Select templates which will be pushed to Crowdin');
-            return;
-        }
-        appComponent.setAttribute('is-crowdin-sync-settings-in-progress', true);
-        ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin)
-            ? `
-        const syncedFiles = await appComponent.getCrowdinScheduleSync(true);
-        `
-            : `
-        const syncedFiles = await appComponent.getCrowdinScheduleSync();
-        `}
-
-        updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
-    }
-
-    function updateSyncSettings(files, type, provider, expandIntegrationFolders = []) {
-        checkOrigin()
-            .then(restParams => fetch('api/sync-settings' + restParams, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ files, type,  provider, expandIntegrationFolders })
-            }))
-            .then(checkResponse)
-            .then((res) => {
-                checkJob({
-                    jobId: res?.jobId,
-                    jobType: JOB_TYPE[\`\${provider}SyncSettingsSave\`],
-                })
-            })
-            .catch(e => catchRejection(e, 'Can\\'t save schedule sync settings'));
-    }
-    `
-        : ''}
-
-    ${checkSubscription
-        ? `
-    const subscriptionInfo = document.getElementById('subscription-info');
-    const subscriptionInfoText = subscriptionInfo.getElementsByTagName('p')[0];
-    function getSubscriptionInfo() {
-        checkOrigin()
-            .then(restParams => fetch('api/subscription-info' + restParams))
-            .then(checkResponse)
-            .then((res) => {
-                if (res.showInfo) {
-                    subscriptionLink = res.subscribeLink;
-                    subscriptionInfoText.textContent = \`Your trial expires in \${res.daysLeft} days.\`
-                    subscriptionInfo.style.display = 'block';
-                }
-            });
-    }
-
-    getSubscriptionInfo();
-    `
-        : ''}
-
-    function checkAlert(alert, suffix) {
-        const name = suffix ?? '${name}';
-        const revised = localStorage.getItem(\`revised_\${name}\`) === '1';
-        if (!revised) {
-            alert.style.display = 'block';
-        }
-    }
-    function closeAlert(el, suffix) {
-        const name = suffix ?? '${name}';
-        const alert = el.closest('crowdin-alert');
-        alert.style.display = 'none';
-        localStorage.setItem(\`revised_\${name}\`, 1);
-    }
-
-    ${notice
-        ? `
-    const notice = document.getElementById('notice');
-    checkAlert(notice, 'notice');
-    `
-        : ''}
-
-    function showErrorLogs() {
-        document.getElementById('show-error-logs-btn').classList.add('hidden');
-        document.getElementById('show-integration-btn').classList.remove('hidden');
-
-        appComponent.classList.add('hidden');
-        document.getElementById('user-errors').classList.remove('hidden');
-
-        checkOrigin()
-            .then(restParams => fetch('api/user-errors' + restParams))
-            .then(checkResponse)
-            .then((res) => {
-                const table = document.getElementById('user-errors-table');
-
-                const clickRow = (field, index, item) => {
-                    const modal = document.getElementById('user-error-detail');
-                    openModal(modal);
-                    modal.innerHTML = getUserErrorDetail(item);
-                };
-
-                const formatDate = (field, index, item) => {
-                  return item.formattedDate;
-                }
-
-                table.setTableConfig && table.setTableConfig({
-                    defaultSortingColumn: "createdAt",
-                    defaultSortingDir: "desc",
-                    headerFields: [
-                        {
-                            field: "createdAt",
-                            name: "Date",
-                            isSortable: true,
-                            clickFn: clickRow,
-                            formatFn: formatDate,
-                        },
-                        {
-                            field: "action",
-                            name: "Action",
-                            clickFn: clickRow,
-                        },
-                        {
-                            field: "message",
-                            name: "Message",
-                            clickFn: clickRow,
-                        }
-                    ],
-                });
-
-                table.setTableData(JSON.stringify(res));
-                table.setAttribute(\`is-loading\`, false);
-            })
-            .catch(e => catchRejection(e, 'Can\\'t fetch error logs'));
-    }
-
-    function showIntegration() {
-        document.getElementById('show-error-logs-btn').classList.remove('hidden');
-        document.getElementById('show-integration-btn').classList.add('hidden');
-
-        appComponent.classList.remove('hidden');
-        document.getElementById('user-errors').classList.add('hidden');
-    }
-
-    function isJSON(string) {
-      try {
-        JSON.parse(string);
-        return true;
-      } catch (e) {
-        return false;
-      }
-    }
-
-    function getUserErrorDetail(error) {
-      const data = JSON.parse(error.data);
-
-      let html = '<div class="error-detail-table"><table>';
-      html += \`<tr><td>Action</td><td>\${sanitizeHTML(error.action)}</td></tr>\`;
-      if (isJSON(error.message)) {
-        html += \`<tr><td>Message</td><td><pre>\${sanitizeHTML(error.message)}<pre></td></tr>\`;
-      } else {
-        html += \`<tr><td>Message</td><td>\${sanitizeHTML(error.message)}</td></tr>\`;
-      }
-      html += \`<tr><td>Date/time</td><td>\${sanitizeHTML(error.formattedDate)}</td></tr>\`;
-
-      if (data.requestParams) {
-        html += \`<tr><td>Method</td><td>\${sanitizeHTML(data.requestParams.method)}</td></tr>\`;
-      }
-
-      if (data.responseData) {
-        html += \`<tr><td>Response Data</td><td><pre>\${sanitizeHTML(JSON.stringify(data.responseData, null, 2))}</pre></td></tr>\`;
-      }
-
-      if (data.appData) {
-        if (Array.isArray(data.appData)) {
-          html += \`<tr><td>App Data</td><td><pre>\${sanitizeHTML(JSON.stringify(data.appData, null, 2))}</pre></td></tr>\`;
-        } else if (typeof data.appData === 'object') {
-          for (const key in data.appData) {
-            html += \`<tr><td>\${sanitizeHTML(key.charAt(0).toUpperCase() + key.slice(1))}</td><td><pre>\${sanitizeHTML(JSON.stringify(data.appData[key], null, 2))}</pre></td></tr>\`;
-          }
-        } else {
-          html += \`<tr><td>App Data</td><td>\${sanitizeHTML(data.appData)}</td></tr>\`;
-        }
-      }
-
-        html += '</table></div>';
-
-        return html;
-    }
-
-    function sanitizeHTML(str) {
-      const tempDiv = document.createElement('div');
-      tempDiv.textContent = str;
-      return tempDiv.innerHTML;
-    }
-
-    function openModal(modal) {
-      modal.style.display = 'block';
-      modal.open()
-    }
-
-    function closeModal(modal) {
-      modal.style.display = 'none';
-      modal.close()
-    }
-
-    function settingsFieldChange(el) {
-        el.removeAttribute('error');
-        el.removeAttribute('error-text');
-    }
-
-    function isFolder(e) {
-      return !e.type && (e.nodeType === undefined || e.nodeType === folderType || e.nodeType === branchType);
-    }
-  `;
-}