@crowdin/app-project-module 0.105.1 → 0.107.0-cf-0

package/out/views/MainPage.js

@@ -0,0 +1,1784 @@
+"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, forcePushSources, forcePushTranslations, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, progressiveCrowdinFilesLoading, 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',
+        });
+    }
+    if (forcePushSources) {
+        integrationButtonMenuItems.push({
+            label: 'Force Sync',
+            title: 'Force sync files to Crowdin',
+            action: 'forcePushSources',
+        });
+    }
+    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: "all-folder-files", name: "all-folder-files", label: "All files in the folder", class: "hydrated", hidden: true, 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,
+                        progressiveCrowdinFilesLoading,
+                    }),
+                } }))));
+};
+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, progressiveCrowdinFilesLoading, } = 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", async (event) => {
+        const isEmptySearch = !event.detail || event.detail.trim() === '';
+
+        if (isEmptySearch && savedIntegrationData && hasLoadMoreElements) {
+            appComponent.setIntegrationFilesData(savedIntegrationData);
+            appComponent.setIntegrationOpenedFolders(currentOpenedFolders);
+            return;
+        }
+
+        if (!isEmptySearch && hasLoadMoreElements) {
+            savedIntegrationData = await appComponent.getIntegrationFilesData();
+            currentOpenedFolders = await appComponent.getIntegrationOpenedFolders();
+        }
+
+        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 = [];
+    let hasLoadMoreElements = false;
+    let savedIntegrationData = null;
+    let currentOpenedFolders = null;
+
+    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 transformCrowdinItemToTree(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;
+    }
+
+    function getCrowdinData() {
+        appComponent.setAttribute('is-crowdin-loading', true);
+        
+        ${progressiveCrowdinFilesLoading
+        ? `
+        checkOrigin()
+            .then(restParams => {
+                const dirPromise = fetch('api/crowdin/files' + restParams + '&mode=directories')
+                    .then(checkResponse)
+                    .then((directories) => {
+                        const dirTree = directories.map(transformCrowdinItemToTree);
+                        crowdinData = dirTree;
+                        appComponent.setCrowdinFilesData(dirTree);
+                        return dirTree;
+                    });
+
+                const filesPromise = fetch('api/crowdin/files' + restParams + '&mode=files')
+                    .then(checkResponse);
+
+                const projectPromise = fetch('api/crowdin/project' + restParams)
+                    .then(checkResponse);
+
+                return Promise.all([dirPromise, filesPromise, projectPromise]);
+            })
+            .then(([dirTree, files, projectData]) => {
+                const fileTree = files.map(transformCrowdinItemToTree);
+                crowdinData = [...dirTree, ...fileTree];
+                appComponent.setCrowdinFilesData(crowdinData);
+
+                project = projectData;
+                const languagesSorted = project.targetLanguages.map(language => ({
+                  sourceLanguageId: projectData.sourceLanguage.editorCode,
+                  projectEditorLink: projectData.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);
+            })
+        `
+        : `
+        checkOrigin()
+            .then(restParams => {
+                const filesPromise = fetch('api/crowdin/files' + restParams)
+                    .then(checkResponse);
+
+                const projectPromise = fetch('api/crowdin/project' + restParams)
+                    .then(checkResponse);
+
+                return Promise.all([filesPromise, projectPromise]);
+            })
+            .then(([files, projectData]) => {
+                const tree = files.map(transformCrowdinItemToTree);
+                crowdinData = tree;
+                appComponent.setCrowdinFilesData(tree);
+
+                project = projectData;
+                const languagesSorted = project.targetLanguages.map(language => ({
+                  sourceLanguageId: projectData.sourceLanguage.editorCode,
+                  projectEditorLink: projectData.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,
+        paginationData,
+      } = {},
+      recursionState = null
+    ) {
+        if (!paginationData) {
+          appComponent.setAttribute('is-integration-loading', true);
+        }
+
+        return checkOrigin()
+            .then(restParams => {
+                let url = \`api/integration/data\${restParams}&parent_id=\${encodeURIComponent(parentId)}&search=\${encodeURIComponent(search)}&page=\${page}\`;
+                if (paginationData) {
+                    url += \`&paginationData=\${encodeURIComponent(JSON.stringify(paginationData))}\`;
+                }
+                return fetch(url);
+            })
+            .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,
+                        pagination: e.pagination,
+                    };
+                    if (e.type) {
+                        item.isNew = e.isNew;
+                        item.isUpdated = e.isUpdated;
+                        item.notSynced = e.notSynced;
+                        item.synced = e.synced;
+                        item.type = e.type;
+                        item.node_type = fileType;
+                    } else {
+                        item.node_type = e.nodeType || folderType;
+                    }
+                    return item;
+                });
+
+                if ((!paginationData && !parentId && !search) || hardReload) {
+                    hasLoadMoreElements = tree.some(item => item.node_type === 'load-more');
+                }
+
+                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;
+        let forcePushSources = false;
+        if (event.detail?.action === 'uploadTranslations') {
+            files = event.detail.files;
+            uploadTranslations = true;
+            forcePushSources = true;
+        } else if (event.detail?.action === 'excludedTargetLanguages') {
+          fileToSync = event.detail.files;
+          openLanguageModal();
+          return;
+        } else if (event.detail?.action === 'forcePushSources') {
+            files = event.detail.files;
+            forcePushSources = true;
+        } 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,
+            isUpdated: f.isUpdated,
+        }));
+        `
+        : `
+        req = files.filter(f => f.node_type !== folderType).map(f => ({
+            name: f.name,
+            id: f.id,
+            type: f.type,
+            parentId: f.parent_id,
+            isUpdated: f.isUpdated,
+        }));
+        `}
+        checkOrigin()
+            .then(restParams => fetch(\`api/crowdin/update\${restParams}&uploadTranslations=\${uploadTranslations}&languages=\${languages}&forcePushSources=\${forcePushSources}\`, {
+                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 (!onFinally) {
+                    onFinally = (() => {
+                      appComponent.setAttribute('is-to-crowdin-process', false);
+                      getCrowdinData();
+                    });
+                }
+                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 });
+    })
+    `
+        : ''}
+
+    document.body.addEventListener('loadMoreClick', async (e) => {
+      const loadMoreFile = e.detail;
+      const fileComponent = document.getElementById('integration-files')
+
+      await fileComponent.setLoadMoreLoading(loadMoreFile.id, true);
+
+      getIntegrationData({ parentId: e.detail.parent_id, paginationData: e.detail.pagination })
+        .finally(async () => {
+          await fileComponent.setLoadMoreLoading(loadMoreFile.id, false);
+        });
+    });
+
+    ${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 allFolderFiles = scheduleModal.querySelector('#all-folder-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') {
+            ${(syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)
+            ? `
+            appComponent.setIntegrationScheduleSync(syncData, newFile, selectedFiles);
+            `
+            : `
+            appComponent.setIntegrationScheduleSync(syncData);
+            `}
+            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) : [],
+            );
+            `
+            : `
+            if (allFolderFiles) {
+                const integrationExpandedFolders = syncData.filter(file => file.node_type === folderType).map(file => ({
+                    ...file,
+                    nodeType: file.node_type,
+                    parentId: file.parent_id,
+                }));
+                updateSyncSettings(syncedFiles, 'schedule', 'integration', integrationExpandedFolders);
+            } else {
+                updateSyncSettings(syncedFiles, 'schedule', 'integration');
+            }
+            `}
+        }
+
+        closeModal(scheduleModal);
+    }
+
+    async function openScheduleModal(type, options = {}) {
+        const { showAllFolderFiles = false, showNewFiles = true } = options;
+        
+        const newFile = scheduleModal.querySelector('#new-files')
+        const selectedFiles = scheduleModal.querySelector('#selected-files');
+        const allFolderFiles = scheduleModal.querySelector('#all-folder-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 (showNewFiles) {
+            newFile.removeAttribute('hidden');
+            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');
+            }
+        } else {
+            newFile.setAttribute('hidden', '');
+            newFile.checked = false;
+        }
+
+        if (showAllFolderFiles) {
+            allFolderFiles.removeAttribute('hidden');
+            allFolderFiles.checked = false;
+            allFolderFiles.value = false;
+        } else {
+            allFolderFiles.setAttribute('hidden', '');
+            allFolderFiles.checked = false;
+        }
+
+        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 allFolderFiles = document.getElementById('all-folder-files').checked || false;
+        const buttonSaveScheduleSync = document.getElementById('save-schedule-sync');
+
+        if (newFilesStatus || selectedFiles || allFolderFiles) {
+            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);
+
+        const shouldShowModal = isFolder && !newIntegrationFiles;
+        const showNewFiles = true; // завжди показуємо New files коли є syncNewElements.integration
+        const showAllFolderFiles = hasLoadMoreElements; // показуємо All files якщо є hasLoadMoreElements
+
+        if (shouldShowModal) {
+            await openScheduleModal('integration', { showNewFiles, showAllFolderFiles });
+            return;
+        }
+
+        appComponent.setIntegrationScheduleSync(e.detail);
+        appComponent.setIntegrationFilesHasSyncOption(true);
+        const syncedFiles = await appComponent.getIntegrationScheduleSync(true);
+        `
+            : `
+        syncData = e.detail;
+        const isFolder = await hasFolder(e.detail);
+
+        if (hasLoadMoreElements && isFolder) {
+            await openScheduleModal('integration', { showNewFiles: false, showAllFolderFiles: true });
+            return;
+        }
+
+        const syncedFiles = await appComponent.getIntegrationScheduleSync();
+        `}
+
+        appComponent.setAttribute('is-integration-sync-settings-in-progress', true);
+
+        ${integrationOneLevelFetching
+            ? `
+        updateSyncSettings(syncedFiles, 'schedule', 'integration', getIntegrationFoldersToExpand(e.detail, syncedFiles));
+        `
+            : `
+        if (hasLoadMoreElements) {
+            const integrationExpandedFolders = e.detail.filter(file => file.node_type === folderType).map(file => ({
+              ...file,
+              nodeType: file.node_type,
+              parentId: file.parent_id,
+            }));
+
+            updateSyncSettings(syncedFiles, 'schedule', 'integration', integrationExpandedFolders);
+        } else {
+            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, hasLoadMoreElements }),
+            }))
+            .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);
+    }
+  `;
+}