@crowdin/app-project-module 2.3.0 → 2.5.0

package/out/static/ui/main.bundle.js

@@ -875,7 +875,29 @@
       return values.filter((value) => value !== '');
   }
 
-  const EMPTY_PERMISSION_VALUE = '\u2015';
+  const IntegrationView = ({ appComponentRef, userErrorsTableRef, name, isErrorLogsVisible, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, integrationPagination, filtering, integrationButtonMenuItems, crowdinButtonMenuItems, }) => {
+      var _a, _b;
+      return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx("crowdin-simple-integration", { ref: appComponentRef, "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", ...(((_a = integrationButtonMenuItems === null || integrationButtonMenuItems === void 0 ? void 0 : integrationButtonMenuItems.length) !== null && _a !== void 0 ? _a : 0) > 0
+                          ? { 'integration-button-menu-items': integrationButtonMenuItems }
+                          : {}), ...(((_b = crowdinButtonMenuItems === null || crowdinButtonMenuItems === void 0 ? void 0 : crowdinButtonMenuItems.length) !== null && _b !== void 0 ? _b : 0) > 0
+                          ? { 'crowdin-button-menu-items': 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,
+                          }
+                          : {}) }) }), jsxRuntimeExports.jsxs("div", { id: "user-errors", style: { display: isErrorLogsVisible ? undefined : 'none' }, children: [jsxRuntimeExports.jsx("crowdin-show-as-table", { ref: userErrorsTableRef, "is-loading": true, id: "user-errors-table", "is-searchable": true, "total-records": "25", "search-placeholder": "Search something" }), jsxRuntimeExports.jsx("crowdin-alert", { children: "This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted." })] })] }));
+  };
+
+  const TopBar = ({ notice, isNoticeVisible, checkSubscription, subscriptionInfo, isErrorLogsVisible, isManager, infoModal, hasSettings, isOwner, onCloseNotice, onShowIntegration, onShowErrorLogs, onShowPermissions, onOpenInfoModal, onOpenSettings, onLogout, }) => {
+      return (jsxRuntimeExports.jsxs("div", { className: "mb-2.5 text-right", children: [notice && (jsxRuntimeExports.jsxs("crowdin-alert", { id: "notice", title: notice.title, ...(!notice.icon ? { 'no-icon': 'true' } : {}), ...(notice.type ? { type: notice.type } : {}), style: { display: isNoticeVisible ? 'block' : 'none', marginBottom: '12px' }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", children: jsxRuntimeExports.jsx("p", { className: "m-0", dangerouslySetInnerHTML: { __html: notice.content } }) }), notice.close && (jsxRuntimeExports.jsx("crowdin-button", { onClick: () => onCloseNotice('notice'), class: "absolute top-0 right-0", icon: true, children: "close" }))] })), checkSubscription && (jsxRuntimeExports.jsx("crowdin-alert", { id: "subscription-info", "no-icon": "true", type: "warning", style: { display: subscriptionInfo ? 'block' : 'none', marginBottom: '12px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntimeExports.jsx("p", { className: "m-0", children: subscriptionInfo ? `Your trial expires in ${subscriptionInfo.daysLeft} days.` : '' }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-2", primary: true, onClick: () => {
+                                  if (subscriptionInfo === null || subscriptionInfo === void 0 ? void 0 : subscriptionInfo.subscribeLink) {
+                                      window.open(subscriptionInfo.subscribeLink, '_blank', 'noopener,noreferrer');
+                                  }
+                              }, children: "Subscribe" })] }) })), jsxRuntimeExports.jsxs("div", { id: "buttons", className: "flex w-full items-center justify-between", children: [jsxRuntimeExports.jsxs("div", { className: "mr-auto", children: [jsxRuntimeExports.jsx("span", { style: { display: isErrorLogsVisible ? undefined : 'none' }, children: jsxRuntimeExports.jsx("crowdin-button", { id: "show-integration-btn", "icon-before": "arrow_back", onClick: onShowIntegration, children: "Integration" }) }), jsxRuntimeExports.jsx("span", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx("crowdin-button", { id: "show-error-logs-btn", "icon-before": "list", onClick: onShowErrorLogs, children: "Error logs" }) })] }), isManager && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "link", onClick: onShowPermissions, children: "Share" })), infoModal && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "info", onClick: onOpenInfoModal, children: infoModal.title })), hasSettings && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "settings", onClick: onOpenSettings, children: "Settings" })), jsxRuntimeExports.jsx("crowdin-button", { ...(!isOwner ? { disabled: true, title: 'Only the owner can log out' } : {}), "icon-before": "account_circle", onClick: onLogout, children: "Log out" })] })] }));
+  };
+
+  const EMPTY_PERMISSION_VALUE = '―';
   const getDefaultScheduleModalState = () => ({
       type: null,
       showNewFiles: true,
@@ -885,1592 +907,1770 @@
       selectedFiles: true,
       allFolderFiles: false,
   });
-  const renderConfigField = (field, settingsFieldChange, registerSettingsField, suffix = 'settings') => {
-      var _a;
-      if (!field.key) {
-          return field.labelHtml ? (jsxRuntimeExports.jsx("crowdin-p", { ...(field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), dangerouslySetInnerHTML: { __html: field.labelHtml } })) : (jsxRuntimeExports.jsx("crowdin-p", { ...(field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), children: field.label }));
+  const JOB_TYPE = {
+      updateCrowdin: 'updateCrowdin',
+      updateIntegration: 'updateIntegration',
+      updateTargetLanguages: 'updateTargetLanguages',
+      integrationSyncSettingsSave: 'integrationSyncSettingsSave',
+      crowdinSyncSettingsSave: 'crowdinSyncSettingsSave',
+      integrationSettingsSave: 'integrationSettingsSave',
+  };
+  const JOB_STATUS = {
+      created: 'created',
+      inProgress: 'inProgress',
+      failed: 'failed',
+      canceled: 'canceled',
+      finished: 'finished',
+  };
+  const FOLDER_TYPE = '0';
+  const FILE_TYPE = '1';
+  const BRANCH_TYPE = '2';
+
+  function isFolder(e) {
+      return !e.type && (e.nodeType === undefined || e.nodeType === FOLDER_TYPE || e.nodeType === BRANCH_TYPE);
+  }
+  function openModal(modal) {
+      if (!modal) {
+          return;
       }
-      const commonProps = {
-          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 (jsxRuntimeExports.jsx("crowdin-checkbox", { ref: registerSettingsField(field.key), ...commonProps, value: "false", "use-switch": true, ...(field.defaultValue === true ? { checked: String(field.defaultValue) } : {}), onChange: settingsFieldChange }));
-          case 'select':
-              return (jsxRuntimeExports.jsx("crowdin-select", { ref: registerSettingsField(field.key), ...commonProps, ...(field.isMulti ? { 'is-multi': true, 'close-on-select': 'false' } : {}), ...(field.isSearchable ? { 'is-searchable': true } : {}), "is-position-fixed": true, onChange: settingsFieldChange, children: (_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 (jsxRuntimeExports.jsx("option", { value: option.value, ...(isSelected ? { selected: true } : {}), children: option.label }, option.value));
-                  }) }));
-          case 'text':
-              return (jsxRuntimeExports.jsx("crowdin-input", { ref: registerSettingsField(field.key), ...commonProps, "with-fixed-height": true, value: field.defaultValue || '', onChange: settingsFieldChange }));
-          case 'textarea':
-              return (jsxRuntimeExports.jsx("crowdin-textarea", { ref: registerSettingsField(field.key), ...commonProps, value: field.defaultValue || '', onChange: settingsFieldChange }));
-          case 'notice':
-              return (jsxRuntimeExports.jsx("crowdin-alert", { ...(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.helpTextHtml || field.helpText || '' } }));
-          default:
-              return null;
+      modal.style.display = 'block';
+      modal.open();
+  }
+  function closeModal(modal) {
+      if (!modal) {
+          return;
       }
-  };
-  const MainPage = (props) => {
-      var _a, _b;
-      const { name, userId, notice, checkSubscription, isManager, isOwner, infoModal, configurationFields, config: configString, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, integrationPagination, excludedTargetLanguages, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, progressiveCrowdinFilesLoading, integrationButtonMenuItems, crowdinButtonMenuItems, } = props;
-      const config = reactExports.useRef(configString ? JSON.parse(configString.replace(/\\n/g, '\\\\n')) : {});
-      const folderType = '0';
-      const fileType = '1';
-      const branchType = '2';
-      const JOB_TYPE = {
-          updateCrowdin: 'updateCrowdin',
-          updateIntegration: 'updateIntegration',
-          updateTargetLanguages: 'updateTargetLanguages',
-          integrationSyncSettingsSave: 'integrationSyncSettingsSave',
-          crowdinSyncSettingsSave: 'crowdinSyncSettingsSave',
-          integrationSettingsSave: 'integrationSettingsSave',
-      };
-      const JOB_STATUS = {
-          created: 'created',
-          inProgress: 'inProgress',
-          failed: 'failed',
-          canceled: 'canceled',
-          finished: 'finished',
-      };
-      const silentJobs = [JOB_TYPE.integrationSettingsSave];
-      const appComponent = reactExports.useRef(null);
-      const asyncProgressRef = reactExports.useRef(null);
-      const infoModalRef = reactExports.useRef(null);
-      const subscriptionModal = reactExports.useRef(null);
-      const settingsModalRef = reactExports.useRef(null);
-      const scheduleModalRef = reactExports.useRef(null);
-      const selectedFilesCheckboxRef = reactExports.useRef(null);
-      const allFolderFilesCheckboxRef = reactExports.useRef(null);
-      const newFilesCheckboxRef = reactExports.useRef(null);
-      const languageModal = reactExports.useRef(null);
-      const languageSelectRef = reactExports.useRef(null);
-      const permissionsModalRef = reactExports.useRef(null);
-      const userErrorsTableRef = reactExports.useRef(null);
-      const userErrorDetailModalRef = reactExports.useRef(null);
+      modal.style.display = 'none';
+      modal.close();
+  }
+
+  /// <reference path="../../../../ui/types.d.ts" />
+  function usePermissions({ userId, hasOrganization, permissionsModalRef }) {
       const usersSelectRef = reactExports.useRef(null);
-      const settingsFieldRefs = reactExports.useRef({});
-      const refreshDependencies = useFieldDependencies(configurationFields);
-      const crowdinFilesToUpdateTargetLanguages = reactExports.useRef([]);
-      const asyncJobs = reactExports.useRef({});
-      const project = reactExports.useRef({});
-      const crowdinData = reactExports.useRef([]);
-      const fileToSync = reactExports.useRef([]);
-      const syncData = reactExports.useRef(null);
-      const subscriptionLink = reactExports.useRef('');
-      const hasLoadMoreElements = reactExports.useRef(false);
-      const savedIntegrationData = reactExports.useRef(null);
-      const currentOpenedFolders = reactExports.useRef(null);
-      const [modalLoaders, setModalLoaders] = reactExports.useState({});
-      const [languageModalState, setLanguageModalState] = reactExports.useState(null);
+      const [isLoading, setIsLoading] = reactExports.useState(false);
       const [permissionUserOptions, setPermissionUserOptions] = reactExports.useState([]);
       const [permissionsSelectedValue, setPermissionsSelectedValue] = reactExports.useState('[]');
       const [permissionsSummary, setPermissionsSummary] = reactExports.useState(null);
       const [isPermissionsConfirmVisible, setIsPermissionsConfirmVisible] = reactExports.useState(false);
-      const [isNoticeVisible, setIsNoticeVisible] = reactExports.useState(false);
-      const [isSettingsSaveDisabled, setIsSettingsSaveDisabled] = reactExports.useState(false);
-      const [scheduleModalState, setScheduleModalState] = reactExports.useState(getDefaultScheduleModalState);
-      const [isScheduleSaveDisabled, setIsScheduleSaveDisabled] = reactExports.useState(false);
-      const [subscriptionInfo, setSubscriptionInfo] = reactExports.useState(null);
-      const [isErrorLogsVisible, setIsErrorLogsVisible] = reactExports.useState(false);
-      const [selectedUserError, setSelectedUserError] = reactExports.useState(null);
-      reactExports.useEffect(() => {
-          // Event listeners
-          const listeners = {
-              refreshFilesList: (e) => {
-                  if (e.detail.refreshIntegration) {
-                      getIntegrationData({ hardReload: true });
-                  }
-                  else if (e.detail.refreshCrowdin) {
-                      getCrowdinData();
-                  }
-              },
-              crowdinFilesFolderToggled: (event) => {
-                  if (event.detail.componentId === 'crowdin-files' && event.detail.isOpen && event.detail.type === '1') {
-                      getFileProgress(event.detail.id);
-                  }
-                  if (integrationOneLevelFetching) {
-                      if (event.detail.componentId === 'integration-files' && event.detail.isOpen) {
-                          getIntegrationData({ parentId: event.detail.id, recursion: event.detail.recursion });
-                      }
-                  }
-              },
-              uploadFilesToCrowdin: uploadFilesToCrowdin,
-              uploadFilesToIntegration: uploadFilesToIntegration,
-              cancelAsyncAction: (e) => {
-                  cancelJob(e.detail);
-              },
-              keydown: (event) => {
-                  if (event.keyCode === 27) {
-                      closeModal(permissionsModalRef.current);
-                      closeModal(infoModalRef.current);
-                      closeModal(settingsModalRef.current);
-                      closeModal(scheduleModalRef.current);
-                      if (languageModal.current) {
-                          closeModal(languageModal.current);
-                      }
-                  }
-              },
-              loadMoreClick: async (e) => {
-                  var _a;
-                  const loadMoreFile = e.detail;
-                  const fileComponent = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.querySelector('#integration-files');
-                  if (!fileComponent) {
-                      return;
-                  }
-                  await fileComponent.setLoadMoreLoading(loadMoreFile.id, true);
-                  getIntegrationData({ parentId: e.detail.parent_id, paginationData: e.detail.pagination }).finally(async () => {
-                      await fileComponent.setLoadMoreLoading(loadMoreFile.id, false);
-                  });
-              },
-          };
-          if (integrationSearchListener) {
-              listeners['integrationFilterChange'] = async (event) => {
-                  const isEmptySearch = !event.detail || event.detail.trim() === '';
-                  if (isEmptySearch && savedIntegrationData.current && hasLoadMoreElements.current) {
-                      appComponent.current.setIntegrationFilesData(savedIntegrationData.current);
-                      appComponent.current.setIntegrationOpenedFolders(currentOpenedFolders.current);
-                      return;
-                  }
-                  if (!isEmptySearch && hasLoadMoreElements.current) {
-                      savedIntegrationData.current = await appComponent.current.getIntegrationFilesData();
-                      currentOpenedFolders.current = await appComponent.current.getIntegrationOpenedFolders();
-                  }
-                  getIntegrationData({ search: event.detail });
-              };
-          }
-          if (integrationPagination) {
-              listeners['fileListEnd'] = (e) => {
-                  getIntegrationData({ page: e.detail.page });
-              };
-          }
-          if (withCronSync || webhooks) {
-              listeners['integrationScheduleSync'] = setIntegrationScheduleSync;
-              listeners['crowdinScheduleSync'] = setCrowdinScheduleSync;
-              listeners['crowdinDisableSync'] = disableCrowdinSync;
-              listeners['integrationDisableSync'] = disableIntegrationSync;
-          }
-          for (const [event, handler] of Object.entries(listeners)) {
-              document.body.addEventListener(event, handler);
-          }
-          // Initial data fetch
-          getCrowdinData();
-          getIntegrationData({});
-          getActiveJobs();
-          if (checkSubscription) {
-              getSubscriptionInfo();
-          }
-          setIsNoticeVisible(Boolean(notice) && localStorage.getItem('revised_notice') !== '1');
-          return () => {
-              for (const [event, handler] of Object.entries(listeners)) {
-                  document.body.removeEventListener(event, handler);
-              }
-          };
-      }, []);
-      reactExports.useEffect(() => {
-          var _a;
-          if (!languageModalState || !((_a = languageSelectRef.current) === null || _a === void 0 ? void 0 : _a.setValue)) {
-              return;
-          }
-          languageSelectRef.current.setValue(languageModalState.languages.map((language) => language.id));
-      }, [languageModalState]);
       reactExports.useEffect(() => {
           if (usersSelectRef.current) {
               usersSelectRef.current.value = permissionsSelectedValue;
           }
       }, [permissionUserOptions, permissionsSelectedValue]);
-      reactExports.useEffect(() => {
-          syncScheduleCheckbox(selectedFilesCheckboxRef.current, {
-              checked: scheduleModalState.selectedFiles,
-          });
-          syncScheduleCheckbox(allFolderFilesCheckboxRef.current, {
-              checked: scheduleModalState.allFolderFiles,
-              hidden: !scheduleModalState.showAllFolderFiles,
-          });
-          syncScheduleCheckbox(newFilesCheckboxRef.current, {
-              checked: scheduleModalState.newFiles,
-              hidden: !scheduleModalState.showNewFiles,
-              clearSelection: scheduleModalState.newFilesClearSelection,
-          });
-      }, [scheduleModalState]);
-      // Expose centralized API to global scope for main.js compatibility
-      reactExports.useEffect(() => {
-          window.app = {
-              subscriptionModal: subscriptionModal,
-              subscriptionLink: subscriptionLink,
-              openModal: openModal,
-          };
-          return () => {
-              delete window.app;
-          };
-      }, []);
       // crowdin-users-select doesn't trigger onChange reliably, using native event listener instead
       reactExports.useEffect(() => {
           const selectElement = usersSelectRef.current;
-          if (selectElement) {
-              const handleChange = () => {
-                  checkUsers();
-              };
-              selectElement.addEventListener('change', handleChange);
-              return () => {
-                  selectElement.removeEventListener('change', handleChange);
-              };
+          if (!selectElement) {
+              return;
           }
+          const handleChange = () => checkUsers();
+          selectElement.addEventListener('change', handleChange);
+          return () => selectElement.removeEventListener('change', handleChange);
       }, []);
-      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 getUserFullName(user) {
+          if (user.full_name) {
+              return user.full_name;
+          }
+          const ownerFullName = user.name || ((user.first_name || '') + ' ' + (user.last_name || '')).trim();
+          return !!ownerFullName && (user === null || user === void 0 ? void 0 : user.login) !== ownerFullName ? `${ownerFullName} (${user === null || user === void 0 ? void 0 : user.login})` : user === null || user === void 0 ? void 0 : user.login;
       }
-      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;
+      function hideConfirmUsersBlock() {
+          var _a;
+          setIsPermissionsConfirmVisible(false);
+          (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('body-overflow-unset', true);
+      }
+      function showConfirmUsersBlock() {
+          var _a;
+          setIsPermissionsConfirmVisible(true);
+          (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('body-overflow-unset');
+      }
+      async function showPermissionsDialog() {
+          hideConfirmUsersBlock();
+          openModal(permissionsModalRef.current);
+          setIsLoading(true);
+          setPermissionsSelectedValue('[]');
+          try {
+              const [managers, users] = await 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);
+                      });
+                  }),
+              ]);
+              const parsedManagers = (JSON.parse(managers) || []);
+              const validUserIds = new Set(users.map((user) => `${user.id}`));
+              const filteredManagers = parsedManagers.filter((id) => validUserIds.has(id));
+              setPermissionUserOptions(users.map((user) => ({
+                  id: String(user.id),
+                  label: getUserFullName(user),
+              })));
+              setPermissionsSelectedValue(JSON.stringify(filteredManagers));
           }
-          else {
-              item.node_type = e.nodeType || folderType;
+          catch (e) {
+              catchRejection(e, "Can't fetch users");
+          }
+          finally {
+              setTimeout(() => setIsLoading(false), 500);
           }
-          return item;
       }
-      function getCrowdinData() {
-          var _a;
-          (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setAttribute('is-crowdin-loading', 'true');
-          let promise;
-          if (progressiveCrowdinFilesLoading) {
-              promise = checkOrigin()
-                  .then((restParams) => {
-                  const dirPromise = fetch('api/crowdin/files' + restParams + '&mode=directories')
-                      .then(checkResponse)
-                      .then((directories) => {
-                      var _a;
-                      const dirTree = directories.map(transformCrowdinItemToTree);
-                      crowdinData.current = dirTree;
-                      (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.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]) => {
-                  var _a, _b, _c;
-                  const fileTree = files.map(transformCrowdinItemToTree);
-                  crowdinData.current = [...dirTree, ...fileTree];
-                  (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setCrowdinFilesData(crowdinData.current);
-                  project.current = projectData;
-                  const languagesSorted = project.current.targetLanguages
-                      .map((language) => ({
-                      sourceLanguageId: projectData.sourceLanguage.editorCode,
-                      projectEditorLink: projectData.projectEditorLink,
-                      ...language,
-                  }))
-                      .sort((a, b) => a.name.localeCompare(b.name));
-                  if (project.current.inContext && ((_b = config.current) === null || _b === void 0 ? void 0 : _b.inContext)) {
-                      languagesSorted.push({ ...project.current.inContextPseudoLanguage, inContext: true });
-                  }
-                  setLanguagesForTranslation(languagesSorted);
-                  (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.setCrowdinLanguagesData(languagesSorted);
-              });
+      async function checkUsers() {
+          setIsLoading(true);
+          const select = usersSelectRef.current;
+          if (select.value === '[]') {
+              hideConfirmUsersBlock();
+              setTimeout(() => setIsLoading(false), 500);
+              return;
           }
-          else {
-              promise = 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]) => {
-                  var _a;
-                  const tree = files.map(transformCrowdinItemToTree);
-                  crowdinData.current = tree;
-                  appComponent.current.setCrowdinFilesData(tree);
-                  project.current = projectData;
-                  const languagesSorted = project.current.targetLanguages
-                      .map((language) => ({
-                      sourceLanguageId: projectData.sourceLanguage.editorCode,
-                      projectEditorLink: projectData.projectEditorLink,
-                      ...language,
-                  }))
-                      .sort((a, b) => a.name.localeCompare(b.name));
-                  if (project.current.inContext && ((_a = config.current) === null || _a === void 0 ? void 0 : _a.inContext)) {
-                      languagesSorted.push({ ...project.current.inContextPseudoLanguage, inContext: true });
-                  }
-                  setLanguagesForTranslation(languagesSorted);
-                  appComponent.current.setCrowdinLanguagesData(languagesSorted);
+          const users = JSON.parse(select.value);
+          const user_ids = users.filter((id) => parseInt(id));
+          const emails = users.filter((id) => !parseInt(id));
+          try {
+              const [appManagers, checkUsersResponse, allUsers] = await 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({ user_ids, emails }, (res) => resolve(res.data));
+                  }),
+                  new Promise((resolve) => {
+                      AP.getUsers((res) => resolve(res));
+                  }),
+              ]);
+              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,
               });
           }
-          promise
-              .then(() => {
-              if (withCronSync || webhooks) {
-                  return getSyncSettings('crowdin');
-              }
-          })
-              .catch((e) => catchRejection(e, "Can't fetch Crowdin data"))
-              .finally(() => appComponent.current.setAttribute('is-crowdin-loading', false));
-      }
-      function getIntegrationData({ hardReload = false, parentId = '', search = '', page = 0, recursion = false, paginationData } = {}, recursionState = null) {
-          if (!paginationData) {
-              appComponent.current.setAttribute('is-integration-loading', true);
+          catch (e) {
+              catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users");
           }
-          let recursionStateLocal = recursionState;
-          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.current = tree.some((item) => item.node_type === 'load-more');
-              }
-              const appIntegrationFiles = appComponent.current.querySelector('#integration-files');
-              if (hardReload) {
-                  appComponent.current.setIntegrationFilesData(tree);
-              }
-              else if (tree.length) {
-                  appComponent.current.pushIntegrationFilesData(tree).then(() => {
-                      if (parentId) {
-                          appIntegrationFiles.getSelected().then(async (selection) => {
-                              const selectedIds = selection === null || selection === void 0 ? void 0 : 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 === null || filteredNodes === void 0 ? void 0 : filteredNodes.length) {
-                                  const filteredNodesId = filteredNodes.map(({ id }) => id.toString());
-                                  await appIntegrationFiles.setSelected(filteredNodesId);
-                              }
-                          });
-                      }
-                  });
-              }
-              if (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.current.setIntegrationOpenedFolders(openIds);
+          finally {
+              setTimeout(() => setIsLoading(false), 500);
+          }
+      }
+      function inviteUsers() {
+          setIsLoading(true);
+          const select = usersSelectRef.current;
+          const users = JSON.parse(select.value);
+          const user_ids = users.filter((id) => parseInt(id));
+          const emails = users.filter((id) => !parseInt(id));
+          AP.inviteUsers({ user_ids, emails }, async (res) => {
+              var _a;
+              if (!res.success) {
+                  catchRejection(res, ((_a = res === null || res === void 0 ? void 0 : res.error) === null || _a === void 0 ? void 0 : _a.message) || "Can't invite users");
+                  setTimeout(() => setIsLoading(false), 500);
+                  return;
               }
-              if (recursion) {
-                  if (!recursionStateLocal) {
-                      recursionStateLocal = {
-                          openedFolders: new Set(),
-                          calls: 0,
-                          setLoading(isLoading) {
-                              appComponent.current.setAttribute('is-integration-loading', isLoading);
-                          },
-                      };
-                      recursionStateLocal.setLoading(true);
-                  }
-                  if (parentId) {
-                      recursionStateLocal.openedFolders.add(parentId);
-                  }
-                  const folderItems = files.filter(isFolder);
-                  if (folderItems.length === 0) {
-                      return Promise.resolve();
+              try {
+                  const restParams = await checkOrigin();
+                  const inviteRes = await checkResponse(await fetch('api/invite-users' + restParams, {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify(res.data),
+                  }));
+                  if (!inviteRes.success) {
+                      catchRejection(inviteRes, (inviteRes === null || inviteRes === void 0 ? void 0 : inviteRes.message) || "Can't invite users");
+                      return;
                   }
-                  folderItems.forEach((folder) => recursionStateLocal.openedFolders.add(folder.id));
-                  const currentOpenedFolders = await appComponent.current.getIntegrationOpenedFolders();
-                  appComponent.current.setIntegrationOpenedFolders([
-                      ...currentOpenedFolders,
-                      ...recursionStateLocal.openedFolders,
-                  ]);
-                  const recursivePromises = folderItems.map(async (folder) => {
-                      recursionStateLocal.calls++;
-                      try {
-                          return getIntegrationData({ parentId: folder.id, recursion: true }, recursionState);
-                      }
-                      finally {
-                          recursionStateLocal.calls--;
-                          if (recursionStateLocal.calls === 0) {
-                              recursionStateLocal.setLoading(false);
-                          }
-                      }
-                  });
-                  return Promise.all(recursivePromises);
-              }
-          })
-              .then(() => {
-              if (withCronSync || webhooks) {
-                  getSyncSettings('integration');
+                  showToast('Users successfully updated');
+                  hideConfirmUsersBlock();
+                  closeModal(permissionsModalRef.current);
               }
-          })
-              .catch((e) => catchRejection(e, `Can't fetch ${name} templates`))
-              .finally(() => {
-              if (!recursionStateLocal && !recursion) {
-                  appComponent.current.setAttribute('is-integration-loading', false);
+              catch (e) {
+                  catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users");
               }
-              else if (recursionStateLocal && recursionStateLocal.calls === 0) {
-                  appComponent.current.setAttribute('is-integration-loading', false);
+              finally {
+                  setTimeout(() => setIsLoading(false), 500);
               }
           });
       }
-      function isScheduleDisabled(currentConfig = config.current) {
-          var _a;
-          return String((_a = currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.schedule) !== null && _a !== void 0 ? _a : '0') === '0';
-      }
-      async function applyAutoSyncPausedMarkers(provider, syncSettingsFiles = []) {
-          var _a, _b, _c, _d;
-          const isDisabled = isScheduleDisabled();
-          const configuredIds = new Set((Array.isArray(syncSettingsFiles) ? syncSettingsFiles : []).map((item) => `${item.id}`));
-          const getChangedItems = (tree = []) => tree
-              .map((item) => {
-              const nextScheduleDisabled = Boolean(item.schedule) && isDisabled && configuredIds.has(`${item.id}`);
-              const currentScheduleDisabled = Boolean(item.scheduleDisabled);
-              if (currentScheduleDisabled === nextScheduleDisabled) {
-                  return null;
-              }
-              return {
-                  ...item,
-                  scheduleDisabled: nextScheduleDisabled,
-              };
-          })
-              .filter(Boolean);
-          if (provider === 'crowdin') {
-              const changedItems = getChangedItems(crowdinData.current || []);
-              if (changedItems.length) {
-                  const changedById = new Map(changedItems.map((item) => [`${item.id}`, item]));
-                  crowdinData.current = (crowdinData.current || []).map((item) => changedById.get(`${item.id}`) || item);
-                  (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.updateCrowdinFileData(changedItems);
-              }
-              return;
-          }
-          const integrationData = await ((_c = (_b = appComponent.current) === null || _b === void 0 ? void 0 : _b.getIntegrationFilesData) === null || _c === void 0 ? void 0 : _c.call(_b));
-          if (Array.isArray(integrationData)) {
-              const changedItems = getChangedItems(integrationData);
-              if (changedItems.length) {
-                  (_d = appComponent.current) === null || _d === void 0 ? void 0 : _d.updateIntegrationFileData(changedItems);
-              }
-          }
-      }
-      async function fetchSyncSettingsFiles(provider) {
-          const restParams = await checkOrigin();
-          const res = await fetch(`/api/sync-settings/${provider}` + restParams).then(checkResponse);
-          return Array.isArray(res) ? res : [];
-      }
-      async function refreshAutoSyncPausedIndicatorsAndWarning() {
-          const [crowdinSyncSettings, integrationSyncSettings] = await Promise.all([
-              fetchSyncSettingsFiles('crowdin'),
-              fetchSyncSettingsFiles('integration'),
-          ]);
-          await applyAutoSyncPausedMarkers('crowdin', crowdinSyncSettings);
-          await applyAutoSyncPausedMarkers('integration', integrationSyncSettings);
-          if (isScheduleDisabled() && (crowdinSyncSettings.length || integrationSyncSettings.length)) {
-              showToast('Auto Sync is configured for some files, but sync schedule is disabled in app settings.');
-          }
-      }
-      function getSyncSettings(provider) {
-          checkOrigin()
-              .then((restParams) => fetch(`/api/sync-settings/${provider}` + restParams))
-              .then(checkResponse)
-              .then(async (res) => {
-              if (provider === 'crowdin') {
-                  if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) {
-                      appComponent.current.setCrowdinScheduleSync(res, true, true);
-                  }
-                  else {
-                      appComponent.current.setCrowdinScheduleSync(res);
-                  }
-              }
-              else {
-                  if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
-                      appComponent.current.setIntegrationScheduleSync(res, true, true);
+      function prepareUsersConfirmBlock(usersData) {
+          showConfirmUsersBlock();
+          const toNames = (users = []) => users.map((user) => user.name);
+          const applicationSettingsDescription = 'This can be configured in organization settings (Apps section).';
+          const hasApplicationAccessUsers = usersData.newApplicationAccessUsers.length > 0;
+          setPermissionsSummary({
+              ...(hasOrganization
+                  ? {
+                      organization: {
+                          status: usersData.newUserEmails.length
+                              ? usersData.inviteRestricted
+                                  ? 'actionRequired'
+                                  : 'willBeRegistered'
+                              : 'granted',
+                          users: toNames(usersData.newUserEmails),
+                          description: usersData.inviteRestricted
+                              ? 'New user invitations are restricted to administrators.'
+                              : '',
+                          isWarning: usersData.inviteRestricted,
+                      },
                   }
-                  else {
-                      appComponent.current.setIntegrationScheduleSync(res);
-                  }
-              }
-              await applyAutoSyncPausedMarkers(provider, 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.current.addCrowdinFileProgress(res))
-              .catch((e) => catchRejection(e, "Can't fetch file progress"));
+                  : {}),
+              project: {
+                  status: usersData.newProjectManagers.length ? 'willBeGranted' : 'granted',
+                  users: toNames(usersData.newProjectManagers),
+              },
+              applicationSettings: {
+                  status: hasApplicationAccessUsers
+                      ? usersData.isAdmin
+                          ? 'willBeGranted'
+                          : 'actionRequired'
+                      : 'granted',
+                  users: toNames(usersData.newApplicationAccessUsers),
+                  description: hasApplicationAccessUsers
+                      ? usersData.isAdmin
+                          ? applicationSettingsDescription
+                          : `${applicationSettingsDescription} Only organization admins have permission to update this setting.`
+                      : applicationSettingsDescription,
+                  isWarning: hasApplicationAccessUsers && !usersData.isAdmin,
+              },
+              applicationCredentials: {
+                  status: usersData.newApplicationManagers.length ? 'willBeGranted' : 'granted',
+                  users: toNames(usersData.newApplicationManagers),
+              },
+          });
       }
-      function uploadFilesToCrowdin(event, languages = []) {
-          var _a, _b, _c, _d, _e;
-          let files = [];
-          let uploadTranslations = false;
-          let forcePushSources = false;
-          if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.action) === 'uploadTranslations') {
-              files = event.detail.files;
-              uploadTranslations = true;
-              forcePushSources = true;
-          }
-          else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.action) === 'excludedTargetLanguages') {
-              fileToSync.current = event.detail.files;
-              openLanguageModal();
+      return {
+          usersSelectRef,
+          isLoading,
+          permissionUserOptions,
+          permissionsSelectedValue,
+          permissionsSummary,
+          isPermissionsConfirmVisible,
+          showPermissionsDialog,
+          inviteUsers,
+      };
+  }
+
+  /// <reference path="../../../../ui/types.d.ts" />
+  function useSchedule({ appComponent, config, scheduleModalRef, withCronSync, webhooks, syncNewElements, integrationOneLevelFetching, hasLoadMoreElements, updateSyncSettings, }) {
+      const selectedFilesCheckboxRef = reactExports.useRef(null);
+      const allFolderFilesCheckboxRef = reactExports.useRef(null);
+      const newFilesCheckboxRef = reactExports.useRef(null);
+      const syncData = reactExports.useRef(null);
+      const [scheduleModalState, setScheduleModalState] = reactExports.useState(getDefaultScheduleModalState);
+      const [isScheduleSaveDisabled, setIsScheduleSaveDisabled] = reactExports.useState(false);
+      reactExports.useEffect(() => {
+          syncScheduleCheckbox(selectedFilesCheckboxRef.current, {
+              checked: scheduleModalState.selectedFiles,
+          });
+          syncScheduleCheckbox(allFolderFilesCheckboxRef.current, {
+              checked: scheduleModalState.allFolderFiles,
+              hidden: !scheduleModalState.showAllFolderFiles,
+          });
+          syncScheduleCheckbox(newFilesCheckboxRef.current, {
+              checked: scheduleModalState.newFiles,
+              hidden: !scheduleModalState.showNewFiles,
+              clearSelection: scheduleModalState.newFilesClearSelection,
+          });
+      }, [scheduleModalState]);
+      reactExports.useEffect(() => {
+          if (!withCronSync && !webhooks) {
               return;
           }
-          else if (((_c = event.detail) === null || _c === void 0 ? void 0 : _c.action) === 'forcePushSources') {
-              files = event.detail.files;
-              forcePushSources = true;
+          const listeners = {
+              integrationScheduleSync: setIntegrationScheduleSync,
+              crowdinScheduleSync: setCrowdinScheduleSync,
+              crowdinDisableSync: disableCrowdinSync,
+              integrationDisableSync: disableIntegrationSync,
+          };
+          for (const [event, handler] of Object.entries(listeners)) {
+              document.body.addEventListener(event, handler);
           }
-          else if (((_d = event.detail) === null || _d === void 0 ? void 0 : _d.action) === 'syncTranslationsToIntegration') {
-              syncTranslationsToIntegration(event.detail.files);
+          return () => {
+              for (const [event, handler] of Object.entries(listeners)) {
+                  document.body.removeEventListener(event, handler);
+              }
+          };
+      }, []);
+      function syncScheduleCheckbox(checkbox, { checked, hidden = false, clearSelection = false, }) {
+          if (!checkbox) {
               return;
           }
+          checkbox.checked = checked;
+          checkbox.value = checked;
+          if (hidden) {
+              checkbox.setAttribute('hidden', '');
+          }
           else {
-              files = event.detail;
+              checkbox.removeAttribute('hidden');
           }
-          if (languages.length > 0) {
-              forcePushSources = true;
+          if (clearSelection) {
+              checkbox.setAttribute('clear-selection', '');
           }
-          if (((_e = event.detail) === null || _e === void 0 ? void 0 : _e.length) === 0 || !event.detail) {
-              showToast('Select templates which will be pushed to Crowdin');
-              return;
+          else {
+              checkbox.removeAttribute('clear-selection');
           }
-          appComponent.current.setAttribute('is-to-crowdin-process', true);
-          let req;
-          if (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,
-              }));
+      }
+      async function hasFolder(selectedFiles) {
+          let found;
+          if (Array.isArray(selectedFiles)) {
+              found = selectedFiles.find((file) => file.node_type === FOLDER_TYPE || file.node_type === BRANCH_TYPE);
           }
           else {
-              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,
-              }));
+              const files = await appComponent.current.getCrowdinFilesData();
+              const folders = files.filter((file) => file.node_type === FOLDER_TYPE || file.node_type === BRANCH_TYPE);
+              found = folders.find((folder) => selectedFiles.hasOwnProperty(folder.id));
           }
-          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 === null || res === void 0 ? void 0 : 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:
-                      case JOB_TYPE.updateTargetLanguages:
-                          appComponent.current.setAttribute('is-to-crowdin-process', true);
-                          break;
-                      case JOB_TYPE.updateIntegration:
-                          appComponent.current.setAttribute('is-to-integration-process', true);
-                          break;
-                      case JOB_TYPE.crowdinSyncSettingsSave:
-                          appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
-                          break;
-                      case JOB_TYPE.integrationSyncSettingsSave:
-                          appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
-                          break;
-                  }
-                  checkJob({
-                      jobId: job.id,
-                      jobType: job.type,
-                  });
-              });
-          })
-              .catch((e) => catchRejection(e, 'Sync status check failed'));
+          return found !== undefined;
       }
-      function cancelJob(jobId) {
-          var _a;
-          if ((_a = asyncJobs.current[jobId]) === null || _a === void 0 ? void 0 : _a.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 getIntegrationFoldersToExpand(allData, syncedFiles) {
+          return Array.isArray(allData)
+              ? allData
+                  .filter((node) => node.node_type === FOLDER_TYPE &&
+                  !syncedFiles.find((syncedFile) => syncedFile.parent_id === node.id))
+                  .map((node) => ({ ...node, nodeType: node.node_type, parentId: node.parent_id }))
+              : [];
       }
-      function checkJob({ jobId, jobType, onSuccess, onError, onFinally }) {
-          switch (jobType) {
-              case JOB_TYPE.updateCrowdin:
-              case JOB_TYPE.updateTargetLanguages:
-                  if (!onFinally) {
-                      onFinally = () => {
-                          appComponent.current.setAttribute('is-to-crowdin-process', false);
-                          getCrowdinData();
-                      };
-                  }
-                  break;
-              case JOB_TYPE.updateIntegration:
-                  if (!onFinally) {
-                      onFinally = () => appComponent.current.setAttribute('is-to-integration-process', false);
-                  }
-                  break;
-              case JOB_TYPE.crowdinSyncSettingsSave:
-                  if (!onFinally) {
-                      onFinally = () => appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', false);
-                  }
-                  break;
-              case JOB_TYPE.integrationSyncSettingsSave:
-                  if (!onFinally) {
-                      onFinally = () => appComponent.current.setAttribute('is-integration-sync-settings-in-progress', false);
-                  }
-                  break;
-          }
-          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;
-              if (!silentJobs.find((type) => type === jobType)) {
-                  pushJobs([
-                      {
-                          id: job.id,
-                          title: job.title,
-                          progress,
-                          info,
-                          isFailed,
-                      },
-                  ]);
-              }
-              if (isFailed) {
-                  if (onError) {
-                      onError();
-                  }
+      async function openScheduleModal(type, options = {}) {
+          var _a, _b, _c, _d;
+          const { showAllFolderFiles = false, showNewFiles = true } = options;
+          let newFileStatus = 'unChecked';
+          const integrationSyncFolders = ((await ((_b = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.getIntegrationScheduleSync) === null || _b === void 0 ? void 0 : _b.call(_a, true))) || []).filter((elements) => elements.node_type === FOLDER_TYPE);
+          const integrationFiles = (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.querySelector('#integration-files');
+          const selectedIntegrationFolders = ((await ((_d = integrationFiles === null || integrationFiles === void 0 ? void 0 : integrationFiles.getSelected) === null || _d === void 0 ? void 0 : _d.call(integrationFiles, true))) || []).filter((elements) => elements.node_type === FOLDER_TYPE);
+          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 ([JOB_STATUS.created, JOB_STATUS.inProgress].includes(job.status) && job.progress < 100) {
-                  setTimeout(() => {
-                      checkJob({ jobId, jobType, onSuccess, onError, onFinally });
-                  }, asyncProgress.checkInterval);
-                  return;
+              else if (!found && newFileStatus === 'checked') {
+                  newFileStatus = 'clear-selection';
+                  break;
               }
               else {
-                  if (onSuccess) {
-                      onSuccess(job);
-                  }
-              }
-              if (onFinally) {
-                  onFinally(job);
-              }
-          })
-              .catch((e) => {
-              if (onFinally) {
-                  onFinally();
-              }
-              if (!silentJobs.find((type) => type === jobType)) {
-                  pushJobs([
-                      {
-                          id: jobId,
-                          isFailed: true,
-                      },
-                  ]);
+                  newFileStatus = 'unChecked';
               }
-              showToast('Sync status check failed');
-          });
-      }
-      function pushJobs(jobs) {
-          const el = asyncProgressRef.current;
-          if (el && el.pushJobs) {
-              el.pushJobs(jobs);
-              jobs.forEach((job) => (asyncJobs.current[job.id] = job));
-          }
-          else {
-              setTimeout(() => {
-                  pushJobs(jobs);
-              }, 300);
           }
+          setScheduleModalState({
+              type,
+              showAllFolderFiles,
+              showNewFiles,
+              newFiles: showNewFiles && newFileStatus === 'checked',
+              newFilesClearSelection: showNewFiles && newFileStatus === 'clear-selection',
+              selectedFiles: true,
+              allFolderFiles: false,
+          });
+          setIsScheduleSaveDisabled(false);
+          openModal(scheduleModalRef.current);
       }
-      function uploadFilesToIntegration(event) {
-          var _a, _b, _c, _d;
-          let files = {};
-          let forcePushTranslations = false;
-          if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.action) === 'forcePushTranslations') {
-              files = event.detail.files;
-              forcePushTranslations = true;
-          }
-          else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.action) === 'excludedTargetLanguages') {
-              crowdinFilesToUpdateTargetLanguages.current = event.detail.files;
-              openLanguageModalForCrowdinFiles();
-              return;
+      function onChangeAutoSynchronizationOptions() {
+          var _a, _b, _c;
+          const nextState = {
+              newFiles: scheduleModalState.showNewFiles ? !!((_a = newFilesCheckboxRef.current) === null || _a === void 0 ? void 0 : _a.checked) : false,
+              selectedFiles: !!((_b = selectedFilesCheckboxRef.current) === null || _b === void 0 ? void 0 : _b.checked),
+              allFolderFiles: scheduleModalState.showAllFolderFiles
+                  ? !!((_c = allFolderFilesCheckboxRef.current) === null || _c === void 0 ? void 0 : _c.checked)
+                  : false,
+          };
+          setScheduleModalState((currentState) => ({
+              ...currentState,
+              ...nextState,
+              newFilesClearSelection: false,
+          }));
+          setIsScheduleSaveDisabled(!nextState.newFiles && !nextState.selectedFiles && !nextState.allFolderFiles);
+      }
+      async function saveScheduleSync() {
+          const { type, newFiles: newFile, selectedFiles, allFolderFiles } = scheduleModalState;
+          if (type === 'crowdin') {
+              const crowdinFiles = await appComponent.current.getCrowdinFilesData();
+              const syncedFileIds = Object.keys(syncData.current);
+              const crowdinFolderIds = crowdinFiles
+                  .filter((file) => file.node_type === FOLDER_TYPE || file.node_type === BRANCH_TYPE)
+                  .filter((file) => syncedFileIds.includes(String(file.id)))
+                  .map((file) => String(file.id));
+              appComponent.current.setCrowdinScheduleSync(syncData.current, newFile, selectedFiles);
+              appComponent.current.setCrowdinFilesHasSyncOption(true);
+              const syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
+              appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+              updateSyncSettings(syncedFiles, 'schedule', 'crowdin', [], crowdinFolderIds);
           }
-          else if (((_c = event.detail) === null || _c === void 0 ? void 0 : _c.action) === 'syncSourcesToCrowdin') {
-              syncToCrowdinFromCrowdinFiles(event.detail.files, false);
-              return;
+          else if (type === 'integration') {
+              if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
+                  appComponent.current.setIntegrationScheduleSync(syncData.current, newFile, selectedFiles);
+              }
+              else {
+                  appComponent.current.setIntegrationScheduleSync(syncData.current);
+              }
+              appComponent.current.setIntegrationFilesHasSyncOption(true);
+              const syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
+              appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+              if (integrationOneLevelFetching) {
+                  updateSyncSettings(syncedFiles, 'schedule', 'integration', selectedFiles ? getIntegrationFoldersToExpand(syncData.current, syncedFiles) : []);
+              }
+              else {
+                  if (allFolderFiles) {
+                      const integrationExpandedFolders = syncData.current
+                          .filter((file) => file.node_type === FOLDER_TYPE)
+                          .map((file) => ({ ...file, nodeType: file.node_type, parentId: file.parent_id }));
+                      updateSyncSettings(syncedFiles, 'schedule', 'integration', integrationExpandedFolders);
+                  }
+                  else {
+                      updateSyncSettings(syncedFiles, 'schedule', 'integration');
+                  }
+              }
           }
-          else if (((_d = event.detail) === null || _d === void 0 ? void 0 : _d.action) === 'syncTranslationsToCrowdin') {
-              syncToCrowdinFromCrowdinFiles(event.detail.files, true);
+          closeModal(scheduleModalRef.current);
+      }
+      async function setIntegrationScheduleSync(e) {
+          var _a;
+          if (e.detail.length === 0) {
+              showToast('Select templates which will be pushed to Crowdin');
               return;
           }
+          let syncedFiles;
+          if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
+              const newIntegrationFiles = (_a = config.current) === null || _a === void 0 ? void 0 : _a['new-integration-files'];
+              syncData.current = e.detail;
+              const isFolder = await hasFolder(e.detail);
+              const shouldShowModal = isFolder && !newIntegrationFiles;
+              const showNewFiles = true;
+              const showAllFolderFiles = hasLoadMoreElements.current;
+              if (shouldShowModal) {
+                  await openScheduleModal('integration', { showNewFiles, showAllFolderFiles });
+                  return;
+              }
+              appComponent.current.setIntegrationScheduleSync(e.detail);
+              appComponent.current.setIntegrationFilesHasSyncOption(true);
+              syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
+          }
           else {
-              files = event.detail;
+              syncData.current = e.detail;
+              const isFolder = await hasFolder(e.detail);
+              if (hasLoadMoreElements.current && isFolder) {
+                  await openScheduleModal('integration', { showNewFiles: false, showAllFolderFiles: true });
+                  return;
+              }
+              syncedFiles = await appComponent.current.getIntegrationScheduleSync();
           }
-          if (Object.keys(event.detail).length === 0 || !event.detail) {
-              showToast('Select files which will be uploaded to ${name}');
-              return;
+          appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+          if (integrationOneLevelFetching) {
+              updateSyncSettings(syncedFiles, 'schedule', 'integration', getIntegrationFoldersToExpand(e.detail, syncedFiles));
+          }
+          else {
+              if (hasLoadMoreElements.current) {
+                  const integrationExpandedFolders = e.detail
+                      .filter((file) => file.node_type === FOLDER_TYPE)
+                      .map((file) => ({ ...file, nodeType: file.node_type, parentId: file.parent_id }));
+                  updateSyncSettings(syncedFiles, 'schedule', 'integration', integrationExpandedFolders);
+              }
+              else {
+                  updateSyncSettings(syncedFiles, 'schedule', 'integration');
+              }
           }
-          appComponent.current.setAttribute('is-to-integration-process', true);
-          const req = {};
-          Object.keys(files)
-              .filter((id) => crowdinData.current.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 === null || res === void 0 ? void 0 : res.jobId,
-                  jobType: JOB_TYPE.updateIntegration,
-              });
-          })
-              .catch((e) => catchRejection(e, `Can't upload files to ${name}`));
       }
-      function syncToCrowdinFromCrowdinFiles(files, uploadTranslations) {
-          if (!files || Object.keys(files).length === 0) {
-              showToast('Select files to sync');
+      async function setCrowdinScheduleSync(e) {
+          var _a;
+          if (e.detail.length === 0) {
+              showToast('Select templates which will be pushed to Crowdin');
               return;
           }
-          appComponent.current.setAttribute('is-to-crowdin-process', true);
-          const req = {};
-          Object.keys(files)
-              .filter((id) => { var _a; return ((_a = crowdinData.current.find((c) => c.id === id)) === null || _a === void 0 ? void 0 : _a.node_type) === fileType; })
-              .forEach((id) => (req[id] = files[id]));
-          checkOrigin()
-              .then((restParams) => fetch(`api/crowdin/update${restParams}&matchFromCrowdin=true&uploadTranslations=${uploadTranslations}`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify(req),
-          }))
-              .then(checkResponse)
-              .then((res) => {
-              checkJob({
-                  jobId: res === null || res === void 0 ? void 0 : res.jobId,
-                  jobType: JOB_TYPE.updateCrowdin,
-              });
-          })
-              .catch((e) => catchRejection(e, "Can't sync files to Crowdin"));
+          let syncedFiles;
+          if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) {
+              const newCrowdinFiles = (_a = config.current) === null || _a === void 0 ? void 0 : _a['new-crowdin-files'];
+              syncData.current = e.detail;
+              const isFolder = await hasFolder(e.detail);
+              if (isFolder && !newCrowdinFiles) {
+                  await openScheduleModal('crowdin');
+                  return;
+              }
+              appComponent.current.setCrowdinScheduleSync(e.detail);
+              appComponent.current.setCrowdinFilesHasSyncOption(true);
+              syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
+          }
+          else {
+              syncedFiles = await appComponent.current.getCrowdinScheduleSync();
+          }
+          appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+          updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
       }
-      function syncTranslationsToIntegration(files) {
-          if (!files || files.length === 0) {
-              showToast('Select files to sync');
+      async function disableIntegrationSync(e) {
+          if (e.detail.length === 0) {
+              showToast('Select templates which will be pushed to Crowdin');
               return;
           }
-          appComponent.current.setAttribute('is-to-integration-process', true);
-          const 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/integration/update${restParams}&matchFromIntegration=true`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify(req),
-          }))
-              .then(checkResponse)
-              .then((res) => {
-              checkJob({
-                  jobId: res === null || res === void 0 ? void 0 : res.jobId,
-                  jobType: JOB_TYPE.updateIntegration,
-              });
-          })
-              .catch((e) => catchRejection(e, `Can't sync translations to ${name}`));
-      }
-      function openLanguageModal() {
-          setLanguageModalState((state) => {
-              var _a, _b;
-              return ({
-                  languages: (_b = (_a = state === null || state === void 0 ? void 0 : state.languages) !== null && _a !== void 0 ? _a : project.current.targetLanguages) !== null && _b !== void 0 ? _b : [],
-                  action: 'syncToCrowdin',
-              });
-          });
-          openModal(languageModal.current);
-      }
-      function openLanguageModalForCrowdinFiles() {
-          setLanguageModalState((state) => {
-              var _a, _b;
-              return ({
-                  languages: (_b = (_a = state === null || state === void 0 ? void 0 : state.languages) !== null && _a !== void 0 ? _a : project.current.targetLanguages) !== null && _b !== void 0 ? _b : [],
-                  action: 'updateCrowdinTargetLanguages',
-              });
-          });
-          openModal(languageModal.current);
-      }
-      async function uploadFilesToCrowdinWithExcludedLanguages() {
-          const selectedLanguages = await languageSelectRef.current.getValue();
-          closeModal(languageModal.current);
-          uploadFilesToCrowdin({ detail: fileToSync.current }, selectedLanguages);
+          appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
+          const syncedFiles = (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)
+              ? await appComponent.current.getIntegrationScheduleSync(true)
+              : await appComponent.current.getIntegrationScheduleSync();
+          updateSyncSettings(syncedFiles, 'schedule', 'integration');
       }
-      async function updateCrowdinFilesTargetLanguages() {
-          const selectedLanguages = await languageSelectRef.current.getValue();
-          closeModal(languageModal.current);
-          const fileIds = Object.keys(crowdinFilesToUpdateTargetLanguages.current).map((id) => parseInt(id, 10));
-          if (fileIds.length === 0) {
-              showToast('Select files to update');
+      async function disableCrowdinSync(e) {
+          if (e.detail.length === 0) {
+              showToast('Select templates which will be pushed to Crowdin');
               return;
           }
-          appComponent.current.setAttribute('is-to-crowdin-process', true);
-          checkOrigin()
-              .then((restParams) => fetch(`api/crowdin/files-target-languages${restParams}`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ fileIds, languages: selectedLanguages }),
-          }))
-              .then(checkResponse)
-              .then((res) => {
-              checkJob({
-                  jobId: res === null || res === void 0 ? void 0 : res.jobId,
-                  jobType: JOB_TYPE.updateTargetLanguages,
-              });
-          })
-              .catch((e) => catchRejection(e, "Can't update files target languages"));
-      }
-      function setLanguagesForTranslation(languages, action = 'syncToCrowdin') {
-          setLanguageModalState({ languages, action });
+          appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+          const syncedFiles = (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin)
+              ? await appComponent.current.getCrowdinScheduleSync(true)
+              : await appComponent.current.getCrowdinScheduleSync();
+          updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
       }
-      function hideConfirmUsersBlock() {
-          var _a;
-          setIsPermissionsConfirmVisible(false);
-          (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('body-overflow-unset', true);
+      return {
+          selectedFilesCheckboxRef,
+          allFolderFilesCheckboxRef,
+          newFilesCheckboxRef,
+          scheduleModalState,
+          isScheduleSaveDisabled,
+          onChangeAutoSynchronizationOptions,
+          saveScheduleSync,
+      };
+  }
+
+  /// <reference path="../../../../ui/types.d.ts" />
+  function useSettings({ configurationFields, config, settingsModalRef, reloadOnConfigSave, refreshDependencies, checkJob, getCrowdinData, getIntegrationData, refreshAutoSyncPausedIndicatorsAndWarning, }) {
+      const settingsFieldRefs = reactExports.useRef({});
+      const [isLoading, setIsLoading] = reactExports.useState(false);
+      const [isSettingsSaveDisabled, setIsSettingsSaveDisabled] = reactExports.useState(false);
+      function triggerEvent(el, type) {
+          const e = document.createEvent('HTMLEvents');
+          e.initEvent(type, false, true);
+          el.dispatchEvent(e);
       }
-      function getUserFullName(user) {
-          if (user.full_name) {
-              return user.full_name;
+      function parseCrowdinSelectValue(value) {
+          if (Array.isArray(value)) {
+              return value;
+          }
+          if (value === undefined || value === null || value === '') {
+              return [];
+          }
+          try {
+              const parsedValue = JSON.parse(value);
+              return Array.isArray(parsedValue) ? parsedValue : [parsedValue];
+          }
+          catch {
+              return [value];
           }
-          const ownerFullName = user.name || ((user.first_name || '') + ' ' + (user.last_name || '')).trim();
-          return !!ownerFullName && (user === null || user === void 0 ? void 0 : user.login) !== ownerFullName ? `${ownerFullName} (${user === null || user === void 0 ? void 0 : user.login})` : user === null || user === void 0 ? void 0 : user.login;
       }
-      function showPermissionsDialog() {
-          hideConfirmUsersBlock();
-          openModal(permissionsModalRef.current);
-          setLoader('#permissions-modal');
-          setPermissionsSelectedValue('[]');
-          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);
-                  });
-              }),
-          ])
-              .then(([managers, users]) => {
-              const parsedManagers = (JSON.parse(managers) || []);
-              const availableUsers = users;
-              const validUserIds = new Set(availableUsers.map((user) => `${user.id}`));
-              const filteredManagers = parsedManagers.filter((id) => validUserIds.has(id));
-              setPermissionUserOptions(availableUsers.map((user) => ({
-                  id: String(user.id),
-                  label: getUserFullName(user),
-              })));
-              setPermissionsSelectedValue(JSON.stringify(filteredManagers));
-          })
-              .catch((e) => catchRejection(e, "Can't fetch users"))
-              .finally(() => unsetLoader('#permissions-modal'));
+      function registerSettingsField(key) {
+          return (element) => {
+              if (!key) {
+                  return;
+              }
+              if (element) {
+                  settingsFieldRefs.current[key] = element;
+              }
+              else {
+                  delete settingsFieldRefs.current[key];
+              }
+          };
       }
-      function showConfirmUsersBlock() {
-          var _a;
-          setIsPermissionsConfirmVisible(true);
-          (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('body-overflow-unset');
+      function settingsFieldChange(eventOrElement) {
+          var _a, _b;
+          const el = (eventOrElement === null || eventOrElement === void 0 ? void 0 : eventOrElement.currentTarget) || (eventOrElement === null || eventOrElement === void 0 ? void 0 : eventOrElement.target) || eventOrElement;
+          (_a = el === null || el === void 0 ? void 0 : el.removeAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'error');
+          (_b = el === null || el === void 0 ? void 0 : el.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(el, 'error-text');
       }
-      function checkUsers() {
-          setLoader('#permissions-modal');
-          const select = usersSelectRef.current;
-          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);
+      function fillSettingsForm() {
+          Object.entries(config.current).forEach(([key, value]) => {
+              const el = settingsFieldRefs.current[key];
+              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');
+              }
+          });
+          setTimeout(refreshDependencies, 100);
+      }
+      async function saveSettings() {
+          var _a, _b, _c, _d;
+          setIsLoading(true);
+          const configReq = {};
+          configurationFields === null || configurationFields === void 0 ? void 0 : configurationFields.forEach((tab) => {
+              tab.fields.forEach((field) => {
+                  if (!field.key) {
+                      return;
+                  }
+                  const el = settingsFieldRefs.current[field.key];
+                  if (!el) {
+                      return;
+                  }
+                  const tagName = el.tagName.toLowerCase();
+                  if (tagName === 'crowdin-select') {
+                      const value = parseCrowdinSelectValue(el.value);
+                      configReq[field.key] = el.hasAttribute('is-multi') ? value : value[0];
+                      return;
+                  }
+                  if (tagName === 'crowdin-checkbox') {
+                      configReq[field.key] = !!el.checked;
+                      return;
+                  }
+                  configReq[field.key] = el.value;
+              });
+          });
+          let isValidationError = false;
+          let isSettingsSaveJobPending = false;
+          let isSettingsSaveFailed = false;
+          setIsSettingsSaveDisabled(true);
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch('api/settings' + restParams, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ config: configReq }),
+              }));
+              if (res === null || res === void 0 ? void 0 : res.jobId) {
+                  isSettingsSaveJobPending = true;
+                  checkJob({
+                      jobId: res.jobId,
+                      jobType: JOB_TYPE.integrationSettingsSave,
+                      onSuccess: () => {
+                          showToast('Settings successfully saved');
+                          config.current = configReq;
+                          refreshAutoSyncPausedIndicatorsAndWarning().catch((e) => catchRejection(e, "Can't fetch sync settings warning"));
+                      },
+                      onError: () => {
+                          isSettingsSaveFailed = true;
+                          showToast("Can't save settings");
+                      },
+                      onFinally: () => {
+                          setTimeout(() => setIsLoading(false), 500);
+                          setIsSettingsSaveDisabled(false);
+                          if (!isValidationError && !isSettingsSaveFailed) {
+                              closeModal(settingsModalRef.current);
+                              if (reloadOnConfigSave) {
+                                  getIntegrationData({ hardReload: true });
+                                  getCrowdinData();
+                              }
+                          }
+                      },
                   });
-              }),
-              new Promise((resolve) => {
-                  AP.getUsers((res) => {
-                      resolve(res);
+                  return;
+              }
+              showToast('Settings successfully saved');
+              config.current = configReq;
+              refreshAutoSyncPausedIndicatorsAndWarning().catch((e) => catchRejection(e, "Can't fetch sync settings warning"));
+          }
+          catch (e) {
+              if ((e === null || e === void 0 ? void 0 : e.error) && ((_a = e === null || e === void 0 ? void 0 : e.error) === null || _a === void 0 ? void 0 : _a.type) === 'validation_error') {
+                  Object.keys((_b = e === null || e === void 0 ? void 0 : e.error) === null || _b === void 0 ? void 0 : _b.details).forEach((key) => {
+                      var _a;
+                      const el = settingsFieldRefs.current[key];
+                      if (el) {
+                          el.setAttribute('error', 'true');
+                          el.setAttribute('error-text', (_a = e === null || e === void 0 ? void 0 : e.error) === null || _a === void 0 ? void 0 : _a.details[key]);
+                      }
                   });
-              }),
-          ])
-              .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 === null || e === void 0 ? void 0 : e.error) || "Can't invite users"))
-              .finally(() => unsetLoader('#permissions-modal'));
-      }
-      function inviteUsers() {
-          setLoader('#permissions-modal');
-          const select = usersSelectRef.current;
-          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) => {
-              var _a;
-              if (!res.success) {
-                  catchRejection(res, ((_a = res === null || res === void 0 ? void 0 : res.error) === null || _a === void 0 ? void 0 : _a.message) || "Can't invite users");
-                  unsetLoader('#permissions-modal');
+                  isValidationError = true;
+                  showToast(((_d = (_c = e === null || e === void 0 ? void 0 : e.error) === null || _c === void 0 ? void 0 : _c.details) === null || _d === void 0 ? void 0 : _d.message) || "Can't save settings");
+                  setIsSettingsSaveDisabled(false);
                   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 === null || res === void 0 ? void 0 : res.message) || "Can't invite users");
-                      return;
+              catchRejection(e, "Can't save settings");
+          }
+          finally {
+              if (isSettingsSaveJobPending) {
+                  return;
+              }
+              setTimeout(() => setIsLoading(false), 500);
+              setIsSettingsSaveDisabled(false);
+              if (!isValidationError) {
+                  closeModal(settingsModalRef.current);
+                  if (reloadOnConfigSave) {
+                      getIntegrationData({ hardReload: true });
+                      getCrowdinData();
                   }
-                  showToast('Users successfully updated');
-                  hideConfirmUsersBlock();
-                  closeModal(permissionsModalRef.current);
-              })
-                  .catch((e) => catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users"))
-                  .finally(() => unsetLoader('#permissions-modal'));
-          });
+              }
+          }
       }
-      function prepareUsersConfirmBlock(usersData) {
-          showConfirmUsersBlock();
-          const toNames = (users = []) => users.map((user) => user.name);
-          const applicationSettingsDescription = 'This can be configured in organization settings (Apps section).';
-          const hasApplicationAccessUsers = usersData.newApplicationAccessUsers.length > 0;
-          setPermissionsSummary({
-              ...(hasOrganization
-                  ? {
-                      organization: {
-                          status: usersData.newUserEmails.length
-                              ? usersData.inviteRestricted
-                                  ? 'actionRequired'
-                                  : 'willBeRegistered'
-                              : 'granted',
-                          users: toNames(usersData.newUserEmails),
-                          description: usersData.inviteRestricted
-                              ? 'New user invitations are restricted to administrators.'
-                              : '',
-                          isWarning: usersData.inviteRestricted,
-                      },
+      return {
+          isLoading,
+          isSettingsSaveDisabled,
+          fillSettingsForm,
+          saveSettings,
+          registerSettingsField,
+          settingsFieldChange,
+      };
+  }
+
+  /// <reference path="../../../../ui/types.d.ts" />
+  function useSyncOperations({ appComponent, asyncProgressRef, config, name, integrationOneLevelFetching, integrationSearchListener, integrationPagination, withCronSync, webhooks, progressiveCrowdinFilesLoading, asyncProgress, syncNewElements, }) {
+      const crowdinFilesToUpdateTargetLanguages = reactExports.useRef([]);
+      const asyncJobs = reactExports.useRef({});
+      const project = reactExports.useRef({});
+      const crowdinData = reactExports.useRef([]);
+      const fileToSync = reactExports.useRef([]);
+      const hasLoadMoreElements = reactExports.useRef(false);
+      const savedIntegrationData = reactExports.useRef(null);
+      const currentOpenedFolders = reactExports.useRef(null);
+      const languageModal = reactExports.useRef(null);
+      const languageSelectRef = reactExports.useRef(null);
+      const [languageModalState, setLanguageModalState] = reactExports.useState(null);
+      const silentJobs = [JOB_TYPE.integrationSettingsSave];
+      reactExports.useEffect(() => {
+          var _a;
+          if (!languageModalState || !((_a = languageSelectRef.current) === null || _a === void 0 ? void 0 : _a.setValue)) {
+              return;
+          }
+          languageSelectRef.current.setValue(languageModalState.languages.map((language) => language.id));
+      }, [languageModalState]);
+      reactExports.useEffect(() => {
+          const listeners = {
+              refreshFilesList: (e) => {
+                  if (e.detail.refreshIntegration) {
+                      getIntegrationData({ hardReload: true });
+                  }
+                  else if (e.detail.refreshCrowdin) {
+                      getCrowdinData();
                   }
-                  : {}),
-              project: {
-                  status: usersData.newProjectManagers.length ? 'willBeGranted' : 'granted',
-                  users: toNames(usersData.newProjectManagers),
               },
-              applicationSettings: {
-                  status: hasApplicationAccessUsers
-                      ? usersData.isAdmin
-                          ? 'willBeGranted'
-                          : 'actionRequired'
-                      : 'granted',
-                  users: toNames(usersData.newApplicationAccessUsers),
-                  description: hasApplicationAccessUsers
-                      ? usersData.isAdmin
-                          ? applicationSettingsDescription
-                          : `${applicationSettingsDescription} Only organization admins have permission to update this setting.`
-                      : applicationSettingsDescription,
-                  isWarning: hasApplicationAccessUsers && !usersData.isAdmin,
+              crowdinFilesFolderToggled: (event) => {
+                  if (event.detail.componentId === 'crowdin-files' && event.detail.isOpen && event.detail.type === '1') {
+                      getFileProgress(event.detail.id);
+                  }
+                  if (integrationOneLevelFetching) {
+                      if (event.detail.componentId === 'integration-files' && event.detail.isOpen) {
+                          getIntegrationData({ parentId: event.detail.id, recursion: event.detail.recursion });
+                      }
+                  }
               },
-              applicationCredentials: {
-                  status: usersData.newApplicationManagers.length ? 'willBeGranted' : 'granted',
-                  users: toNames(usersData.newApplicationManagers),
+              uploadFilesToCrowdin: uploadFilesToCrowdin,
+              uploadFilesToIntegration: uploadFilesToIntegration,
+              cancelAsyncAction: (e) => {
+                  cancelJob(e.detail);
               },
-          });
+              loadMoreClick: async (e) => {
+                  var _a;
+                  const loadMoreFile = e.detail;
+                  const fileComponent = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.querySelector('#integration-files');
+                  if (!fileComponent) {
+                      return;
+                  }
+                  await fileComponent.setLoadMoreLoading(loadMoreFile.id, true);
+                  try {
+                      await getIntegrationData({ parentId: e.detail.parent_id, paginationData: e.detail.pagination });
+                  }
+                  finally {
+                      await fileComponent.setLoadMoreLoading(loadMoreFile.id, false);
+                  }
+              },
+          };
+          if (integrationSearchListener) {
+              listeners['integrationFilterChange'] = async (event) => {
+                  const isEmptySearch = !event.detail || event.detail.trim() === '';
+                  if (isEmptySearch && savedIntegrationData.current && hasLoadMoreElements.current) {
+                      appComponent.current.setIntegrationFilesData(savedIntegrationData.current);
+                      appComponent.current.setIntegrationOpenedFolders(currentOpenedFolders.current);
+                      return;
+                  }
+                  if (!isEmptySearch && hasLoadMoreElements.current) {
+                      savedIntegrationData.current = await appComponent.current.getIntegrationFilesData();
+                      currentOpenedFolders.current = await appComponent.current.getIntegrationOpenedFolders();
+                  }
+                  getIntegrationData({ search: event.detail });
+              };
+          }
+          if (integrationPagination) {
+              listeners['fileListEnd'] = (e) => {
+                  getIntegrationData({ page: e.detail.page });
+              };
+          }
+          for (const [event, handler] of Object.entries(listeners)) {
+              document.body.addEventListener(event, handler);
+          }
+          getCrowdinData();
+          getIntegrationData({});
+          getActiveJobs();
+          return () => {
+              for (const [event, handler] of Object.entries(listeners)) {
+                  document.body.removeEventListener(event, handler);
+              }
+          };
+      }, []);
+      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 = FILE_TYPE;
+              item.failed = e.failed;
+              item.excludedTargetLanguages = e.excludedTargetLanguages;
+          }
+          else {
+              item.node_type = e.nodeType || FOLDER_TYPE;
+          }
+          return item;
+      }
+      async function getCrowdinData() {
+          var _a, _b, _c, _d, _f;
+          (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setAttribute('is-crowdin-loading', 'true');
+          try {
+              const restParams = await checkOrigin();
+              if (progressiveCrowdinFilesLoading) {
+                  const dirPromise = fetch('api/crowdin/files' + restParams + '&mode=directories')
+                      .then(checkResponse)
+                      .then((directories) => {
+                      var _a;
+                      const dirTree = directories.map(transformCrowdinItemToTree);
+                      crowdinData.current = dirTree;
+                      (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setCrowdinFilesData(dirTree);
+                      return dirTree;
+                  });
+                  const [dirTree, files, projectData] = await Promise.all([
+                      dirPromise,
+                      fetch('api/crowdin/files' + restParams + '&mode=files').then(checkResponse),
+                      fetch('api/crowdin/project' + restParams).then(checkResponse),
+                  ]);
+                  const fileTree = files.map(transformCrowdinItemToTree);
+                  crowdinData.current = [...dirTree, ...fileTree];
+                  (_b = appComponent.current) === null || _b === void 0 ? void 0 : _b.setCrowdinFilesData(crowdinData.current);
+                  project.current = projectData;
+                  const languagesSorted = project.current.targetLanguages
+                      .map((language) => ({
+                      sourceLanguageId: projectData.sourceLanguage.editorCode,
+                      projectEditorLink: projectData.projectEditorLink,
+                      ...language,
+                  }))
+                      .sort((a, b) => a.name.localeCompare(b.name));
+                  if (project.current.inContext && ((_c = config.current) === null || _c === void 0 ? void 0 : _c.inContext)) {
+                      languagesSorted.push({ ...project.current.inContextPseudoLanguage, inContext: true });
+                  }
+                  setLanguagesForTranslation(languagesSorted);
+                  (_d = appComponent.current) === null || _d === void 0 ? void 0 : _d.setCrowdinLanguagesData(languagesSorted);
+              }
+              else {
+                  const [files, projectData] = await Promise.all([
+                      fetch('api/crowdin/files' + restParams).then(checkResponse),
+                      fetch('api/crowdin/project' + restParams).then(checkResponse),
+                  ]);
+                  const tree = files.map(transformCrowdinItemToTree);
+                  crowdinData.current = tree;
+                  appComponent.current.setCrowdinFilesData(tree);
+                  project.current = projectData;
+                  const languagesSorted = project.current.targetLanguages
+                      .map((language) => ({
+                      sourceLanguageId: projectData.sourceLanguage.editorCode,
+                      projectEditorLink: projectData.projectEditorLink,
+                      ...language,
+                  }))
+                      .sort((a, b) => a.name.localeCompare(b.name));
+                  if (project.current.inContext && ((_f = config.current) === null || _f === void 0 ? void 0 : _f.inContext)) {
+                      languagesSorted.push({ ...project.current.inContextPseudoLanguage, inContext: true });
+                  }
+                  setLanguagesForTranslation(languagesSorted);
+                  appComponent.current.setCrowdinLanguagesData(languagesSorted);
+              }
+              if (withCronSync || webhooks) {
+                  await getSyncSettings('crowdin');
+              }
+          }
+          catch (e) {
+              catchRejection(e, "Can't fetch Crowdin data");
+          }
+          finally {
+              appComponent.current.setAttribute('is-crowdin-loading', false);
+          }
+      }
+      async function getIntegrationData({ hardReload = false, parentId = '', search = '', page = 0, recursion = false, paginationData } = {}, recursionState = null) {
+          if (!paginationData) {
+              appComponent.current.setAttribute('is-integration-loading', true);
+          }
+          let recursionStateLocal = recursionState;
+          try {
+              const restParams = await checkOrigin();
+              let url = `api/integration/data${restParams}&parent_id=${encodeURIComponent(parentId)}&search=${encodeURIComponent(search)}&page=${page}`;
+              if (paginationData) {
+                  url += `&paginationData=${encodeURIComponent(JSON.stringify(paginationData))}`;
+              }
+              const res = await checkResponse(await fetch(url));
+              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 = FILE_TYPE;
+                  }
+                  else {
+                      item.node_type = e.nodeType || FOLDER_TYPE;
+                  }
+                  return item;
+              });
+              if ((!paginationData && !parentId && !search) || hardReload) {
+                  hasLoadMoreElements.current = tree.some((item) => item.node_type === 'load-more');
+              }
+              const appIntegrationFiles = appComponent.current.querySelector('#integration-files');
+              if (hardReload) {
+                  appComponent.current.setIntegrationFilesData(tree);
+              }
+              else if (tree.length) {
+                  appComponent.current.pushIntegrationFilesData(tree).then(async () => {
+                      if (parentId) {
+                          const selection = await appIntegrationFiles.getSelected();
+                          const selectedIds = selection === null || selection === void 0 ? void 0 : 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 === null || filteredNodes === void 0 ? void 0 : filteredNodes.length) {
+                              const filteredNodesId = filteredNodes.map(({ id }) => id.toString());
+                              await appIntegrationFiles.setSelected(filteredNodesId);
+                          }
+                      }
+                  });
+              }
+              if (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.current.setIntegrationOpenedFolders(openIds);
+              }
+              if (recursion) {
+                  if (!recursionStateLocal) {
+                      recursionStateLocal = {
+                          openedFolders: new Set(),
+                          calls: 0,
+                          setLoading(isLoading) {
+                              appComponent.current.setAttribute('is-integration-loading', isLoading);
+                          },
+                      };
+                      recursionStateLocal.setLoading(true);
+                  }
+                  if (parentId) {
+                      recursionStateLocal.openedFolders.add(parentId);
+                  }
+                  const folderItems = files.filter(isFolder);
+                  if (folderItems.length === 0) {
+                      return;
+                  }
+                  folderItems.forEach((folder) => recursionStateLocal.openedFolders.add(folder.id));
+                  const openedFoldersNow = await appComponent.current.getIntegrationOpenedFolders();
+                  appComponent.current.setIntegrationOpenedFolders([
+                      ...openedFoldersNow,
+                      ...recursionStateLocal.openedFolders,
+                  ]);
+                  await Promise.all(folderItems.map(async (folder) => {
+                      recursionStateLocal.calls++;
+                      try {
+                          await getIntegrationData({ parentId: folder.id, recursion: true }, recursionState);
+                      }
+                      finally {
+                          recursionStateLocal.calls--;
+                          if (recursionStateLocal.calls === 0) {
+                              recursionStateLocal.setLoading(false);
+                          }
+                      }
+                  }));
+              }
+              if (withCronSync || webhooks) {
+                  await getSyncSettings('integration');
+              }
+          }
+          catch (e) {
+              catchRejection(e, `Can't fetch ${name} templates`);
+          }
+          finally {
+              if (!recursionStateLocal && !recursion) {
+                  appComponent.current.setAttribute('is-integration-loading', false);
+              }
+              else if (recursionStateLocal && recursionStateLocal.calls === 0) {
+                  appComponent.current.setAttribute('is-integration-loading', false);
+              }
+          }
+      }
+      function isScheduleDisabled(currentConfig = config.current) {
+          var _a;
+          return String((_a = currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.schedule) !== null && _a !== void 0 ? _a : '0') === '0';
       }
-      function setLoader(id) {
-          const loaderKey = id.replace(/^#/, '');
-          setModalLoaders((currentLoaders) => ({ ...currentLoaders, [loaderKey]: true }));
+      async function applyAutoSyncPausedMarkers(provider, syncSettingsFiles = []) {
+          var _a, _b, _c, _d;
+          const isDisabled = isScheduleDisabled();
+          const configuredIds = new Set((Array.isArray(syncSettingsFiles) ? syncSettingsFiles : []).map((item) => `${item.id}`));
+          const getChangedItems = (tree = []) => tree
+              .map((item) => {
+              const nextScheduleDisabled = Boolean(item.schedule) && isDisabled && configuredIds.has(`${item.id}`);
+              const currentScheduleDisabled = Boolean(item.scheduleDisabled);
+              if (currentScheduleDisabled === nextScheduleDisabled) {
+                  return null;
+              }
+              return { ...item, scheduleDisabled: nextScheduleDisabled };
+          })
+              .filter(Boolean);
+          if (provider === 'crowdin') {
+              const changedItems = getChangedItems(crowdinData.current || []);
+              if (changedItems.length) {
+                  const changedById = new Map(changedItems.map((item) => [`${item.id}`, item]));
+                  crowdinData.current = (crowdinData.current || []).map((item) => changedById.get(`${item.id}`) || item);
+                  (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.updateCrowdinFileData(changedItems);
+              }
+              return;
+          }
+          const integrationData = await ((_c = (_b = appComponent.current) === null || _b === void 0 ? void 0 : _b.getIntegrationFilesData) === null || _c === void 0 ? void 0 : _c.call(_b));
+          if (Array.isArray(integrationData)) {
+              const changedItems = getChangedItems(integrationData);
+              if (changedItems.length) {
+                  (_d = appComponent.current) === null || _d === void 0 ? void 0 : _d.updateIntegrationFileData(changedItems);
+              }
+          }
       }
-      function unsetLoader(id) {
-          const loaderKey = id.replace(/^#/, '');
-          setTimeout(function () {
-              setModalLoaders((currentLoaders) => ({ ...currentLoaders, [loaderKey]: false }));
-          }, 500);
+      async function fetchSyncSettingsFiles(provider) {
+          const restParams = await checkOrigin();
+          const res = await fetch(`/api/sync-settings/${provider}` + restParams).then(checkResponse);
+          return Array.isArray(res) ? res : [];
       }
-      function triggerEvent(el, type) {
-          const e = document.createEvent('HTMLEvents');
-          e.initEvent(type, false, true);
-          el.dispatchEvent(e);
+      async function refreshAutoSyncPausedIndicatorsAndWarning() {
+          const [crowdinSyncSettings, integrationSyncSettings] = await Promise.all([
+              fetchSyncSettingsFiles('crowdin'),
+              fetchSyncSettingsFiles('integration'),
+          ]);
+          await applyAutoSyncPausedMarkers('crowdin', crowdinSyncSettings);
+          await applyAutoSyncPausedMarkers('integration', integrationSyncSettings);
+          if (isScheduleDisabled() && (crowdinSyncSettings.length || integrationSyncSettings.length)) {
+              showToast('Auto Sync is configured for some files, but sync schedule is disabled in app settings.');
+          }
       }
-      function parseCrowdinSelectValue(value) {
-          if (Array.isArray(value)) {
-              return value;
+      async function getSyncSettings(provider) {
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`/api/sync-settings/${provider}` + restParams));
+              if (provider === 'crowdin') {
+                  if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) {
+                      appComponent.current.setCrowdinScheduleSync(res, true, true);
+                  }
+                  else {
+                      appComponent.current.setCrowdinScheduleSync(res);
+                  }
+              }
+              else {
+                  if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
+                      appComponent.current.setIntegrationScheduleSync(res, true, true);
+                  }
+                  else {
+                      appComponent.current.setIntegrationScheduleSync(res);
+                  }
+              }
+              await applyAutoSyncPausedMarkers(provider, res);
           }
-          if (value === undefined || value === null || value === '') {
-              return [];
+          catch (e) {
+              catchRejection(e, "Can't fetch file progress");
           }
+      }
+      async function getFileProgress(fileId) {
           try {
-              const parsedValue = JSON.parse(value);
-              return Array.isArray(parsedValue) ? parsedValue : [parsedValue];
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/crowdin/file-progress/${fileId}` + restParams));
+              appComponent.current.addCrowdinFileProgress(res);
           }
           catch (e) {
-              return [value];
+              catchRejection(e, "Can't fetch file progress");
           }
       }
-      function registerSettingsField(key) {
-          return (element) => {
-              if (!key) {
-                  return;
-              }
-              if (element) {
-                  settingsFieldRefs.current[key] = element;
-              }
-              else {
-                  delete settingsFieldRefs.current[key];
-              }
-          };
-      }
-      function syncScheduleCheckbox(checkbox, { checked, hidden = false, clearSelection = false, }) {
-          if (!checkbox) {
+      async function uploadFilesToCrowdin(event, languages = []) {
+          var _a, _b, _c, _d, _f;
+          let files = [];
+          let uploadTranslations = false;
+          let forcePushSources = false;
+          if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.action) === 'uploadTranslations') {
+              files = event.detail.files;
+              uploadTranslations = true;
+              forcePushSources = true;
+          }
+          else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.action) === 'excludedTargetLanguages') {
+              fileToSync.current = event.detail.files;
+              openLanguageModal();
               return;
           }
-          checkbox.checked = checked;
-          checkbox.value = checked;
-          if (hidden) {
-              checkbox.setAttribute('hidden', '');
+          else if (((_c = event.detail) === null || _c === void 0 ? void 0 : _c.action) === 'forcePushSources') {
+              files = event.detail.files;
+              forcePushSources = true;
+          }
+          else if (((_d = event.detail) === null || _d === void 0 ? void 0 : _d.action) === 'syncTranslationsToIntegration') {
+              syncTranslationsToIntegration(event.detail.files);
+              return;
           }
           else {
-              checkbox.removeAttribute('hidden');
+              files = event.detail;
           }
-          if (clearSelection) {
-              checkbox.setAttribute('clear-selection', '');
+          if (languages.length > 0) {
+              forcePushSources = true;
+          }
+          if (((_f = event.detail) === null || _f === void 0 ? void 0 : _f.length) === 0 || !event.detail) {
+              showToast('Select templates which will be pushed to Crowdin');
+              return;
+          }
+          appComponent.current.setAttribute('is-to-crowdin-process', true);
+          let req;
+          if (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,
+              }));
           }
           else {
-              checkbox.removeAttribute('clear-selection');
+              req = files
+                  .filter((f) => f.node_type !== FOLDER_TYPE)
+                  .map((f) => ({
+                  name: f.name,
+                  id: f.id,
+                  type: f.type,
+                  parentId: f.parent_id,
+                  isUpdated: f.isUpdated,
+              }));
+          }
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/crowdin/update${restParams}&uploadTranslations=${uploadTranslations}&languages=${languages}&forcePushSources=${forcePushSources}`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(req),
+              }));
+              checkJob({ jobId: res === null || res === void 0 ? void 0 : res.jobId, jobType: JOB_TYPE.updateCrowdin });
+          }
+          catch (e) {
+              catchRejection(e, "Can't upload templates to Crowdin");
           }
       }
-      function fillSettingsForm() {
-          Object.entries(config.current).forEach(([key, value]) => {
-              const el = settingsFieldRefs.current[key];
-              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');
-              }
-          });
-          setTimeout(refreshDependencies, 100);
-      }
-      function saveSettings() {
-          setLoader('#settings-modal');
-          const configReq = {};
-          configurationFields === null || configurationFields === void 0 ? void 0 : configurationFields.forEach((tab) => {
-              tab.fields.forEach((field) => {
-                  if (!field.key) {
-                      return;
-                  }
-                  const el = settingsFieldRefs.current[field.key];
-                  if (!el) {
-                      return;
-                  }
-                  const tagName = el.tagName.toLowerCase();
-                  if (tagName === 'crowdin-select') {
-                      const value = parseCrowdinSelectValue(el.value);
-                      configReq[field.key] = el.hasAttribute('is-multi') ? value : value[0];
-                      return;
-                  }
-                  if (tagName === 'crowdin-checkbox') {
-                      configReq[field.key] = !!el.checked;
-                      return;
-                  }
-                  configReq[field.key] = el.value;
-              });
-          });
-          let isValidationError = false;
-          let isSettingsSaveJobPending = false;
-          let isSettingsSaveFailed = false;
-          setIsSettingsSaveDisabled(true);
-          checkOrigin()
-              .then((restParams) => fetch('api/settings' + restParams, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ config: configReq }),
-          }))
-              .then(checkResponse)
-              .then((res) => {
-              if (res === null || res === void 0 ? void 0 : res.jobId) {
-                  isSettingsSaveJobPending = true;
-                  checkJob({
-                      jobId: res.jobId,
-                      jobType: JOB_TYPE.integrationSettingsSave,
-                      onSuccess: () => {
-                          showToast('Settings successfully saved');
-                          config.current = configReq;
-                          refreshAutoSyncPausedIndicatorsAndWarning().catch((e) => catchRejection(e, "Can't fetch sync settings warning"));
-                      },
-                      onError: () => {
-                          isSettingsSaveFailed = true;
-                          showToast("Can't save settings");
-                      },
-                      onFinally: () => {
-                          unsetLoader('#settings-modal');
-                          setIsSettingsSaveDisabled(false);
-                          if (!isValidationError && !isSettingsSaveFailed) {
-                              closeModal(settingsModalRef.current);
-                              if (reloadOnConfigSave) {
-                                  getIntegrationData({ hardReload: true });
-                                  getCrowdinData();
-                              }
-                          }
-                      },
-                  });
-                  return;
-              }
-              showToast('Settings successfully saved');
-              config.current = configReq;
-              refreshAutoSyncPausedIndicatorsAndWarning().catch((e) => catchRejection(e, "Can't fetch sync settings warning"));
-          })
-              .catch((e) => {
-              var _a, _b, _c, _d;
-              if ((e === null || e === void 0 ? void 0 : e.error) && ((_a = e === null || e === void 0 ? void 0 : e.error) === null || _a === void 0 ? void 0 : _a.type) === 'validation_error') {
-                  Object.keys((_b = e === null || e === void 0 ? void 0 : e.error) === null || _b === void 0 ? void 0 : _b.details).forEach((key) => {
-                      var _a;
-                      const el = settingsFieldRefs.current[key];
-                      if (el) {
-                          el.setAttribute('error', 'true');
-                          el.setAttribute('error-text', (_a = e === null || e === void 0 ? void 0 : e.error) === null || _a === void 0 ? void 0 : _a.details[key]);
-                      }
-                  });
-                  isValidationError = true;
-                  showToast(((_d = (_c = e === null || e === void 0 ? void 0 : e.error) === null || _c === void 0 ? void 0 : _c.details) === null || _d === void 0 ? void 0 : _d.message) || "Can't save settings");
-                  setIsSettingsSaveDisabled(false);
-                  return;
-              }
-              catchRejection(e, "Can't save settings");
-          })
-              .finally(() => {
-              if (isSettingsSaveJobPending) {
+      async function getActiveJobs() {
+          try {
+              const restParams = await checkOrigin();
+              const jobs = await checkResponse(await fetch(`api/jobs${restParams}`));
+              if (!Array.isArray(jobs)) {
                   return;
               }
-              unsetLoader('#settings-modal');
-              setIsSettingsSaveDisabled(false);
-              if (!isValidationError) {
-                  closeModal(settingsModalRef.current);
-                  if (reloadOnConfigSave) {
-                      getIntegrationData({ hardReload: true });
-                      getCrowdinData();
+              jobs.forEach((job) => {
+                  switch (job.type) {
+                      case JOB_TYPE.updateCrowdin:
+                      case JOB_TYPE.updateTargetLanguages:
+                          appComponent.current.setAttribute('is-to-crowdin-process', true);
+                          break;
+                      case JOB_TYPE.updateIntegration:
+                          appComponent.current.setAttribute('is-to-integration-process', true);
+                          break;
+                      case JOB_TYPE.crowdinSyncSettingsSave:
+                          appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
+                          break;
+                      case JOB_TYPE.integrationSyncSettingsSave:
+                          appComponent.current.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 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 cancelJob(jobId) {
+          var _a;
+          if ((_a = asyncJobs.current[jobId]) === null || _a === void 0 ? void 0 : _a.isFailed) {
+              return;
+          }
+          try {
+              const restParams = await checkOrigin();
+              await checkResponse(await fetch('api/jobs' + restParams + '&jobId=' + jobId, {
+                  method: 'DELETE',
+                  headers: { 'Content-Type': 'application/json' },
+              }));
+              showToast('Cancellation…');
+          }
+          catch (e) {
+              catchRejection(e, 'Sync cancellation failed');
+          }
       }
-      async function saveScheduleSync() {
-          const { type, newFiles: newFile, selectedFiles, allFolderFiles } = scheduleModalState;
-          if (type === 'crowdin') {
-              const crowdinFiles = await appComponent.current.getCrowdinFilesData();
-              const syncedFileIds = Object.keys(syncData.current);
-              const crowdinFolderIds = crowdinFiles
-                  .filter((file) => file.node_type === folderType || file.node_type === branchType)
-                  .filter((file) => syncedFileIds.includes(String(file.id)))
-                  .map((file) => String(file.id));
-              appComponent.current.setCrowdinScheduleSync(syncData.current, newFile, selectedFiles);
-              appComponent.current.setCrowdinFilesHasSyncOption(true);
-              const syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
-              appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
-              updateSyncSettings(syncedFiles, 'schedule', 'crowdin', [], crowdinFolderIds);
+      async function checkJob({ jobId, jobType, onSuccess, onError, onFinally }) {
+          switch (jobType) {
+              case JOB_TYPE.updateCrowdin:
+              case JOB_TYPE.updateTargetLanguages:
+                  if (!onFinally) {
+                      onFinally = () => {
+                          appComponent.current.setAttribute('is-to-crowdin-process', false);
+                          getCrowdinData();
+                      };
+                  }
+                  break;
+              case JOB_TYPE.updateIntegration:
+                  if (!onFinally) {
+                      onFinally = () => appComponent.current.setAttribute('is-to-integration-process', false);
+                  }
+                  break;
+              case JOB_TYPE.crowdinSyncSettingsSave:
+                  if (!onFinally) {
+                      onFinally = () => appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', false);
+                  }
+                  break;
+              case JOB_TYPE.integrationSyncSettingsSave:
+                  if (!onFinally) {
+                      onFinally = () => appComponent.current.setAttribute('is-integration-sync-settings-in-progress', false);
+                  }
+                  break;
           }
-          else if (type === 'integration') {
-              if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
-                  appComponent.current.setIntegrationScheduleSync(syncData.current, newFile, selectedFiles);
+          try {
+              const restParams = await checkOrigin();
+              const job = await checkResponse(await fetch('api/jobs' + restParams + '&jobId=' + jobId));
+              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;
+              if (!silentJobs.find((type) => type === jobType)) {
+                  pushJobs([{ id: job.id, title: job.title, progress, info, isFailed }]);
               }
-              else {
-                  appComponent.current.setIntegrationScheduleSync(syncData.current);
+              if (isFailed) {
+                  if (onError) {
+                      onError();
+                  }
               }
-              appComponent.current.setIntegrationFilesHasSyncOption(true);
-              const syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
-              appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
-              if (integrationOneLevelFetching) {
-                  updateSyncSettings(syncedFiles, 'schedule', 'integration', selectedFiles ? getIntegrationFoldersToExpand(syncData.current, syncedFiles) : []);
+              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 {
-                  if (allFolderFiles) {
-                      const integrationExpandedFolders = syncData.current
-                          .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');
+                  if (onSuccess) {
+                      onSuccess(job);
                   }
               }
-          }
-          closeModal(scheduleModalRef.current);
-      }
-      async function openScheduleModal(type, options = {}) {
-          var _a, _b, _c, _d;
-          const { showAllFolderFiles = false, showNewFiles = true } = options;
-          let newFileStatus = 'unChecked';
-          const integrationSyncFolders = ((await ((_b = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.getIntegrationScheduleSync) === null || _b === void 0 ? void 0 : _b.call(_a, true))) || []).filter((elements) => elements.node_type === '0');
-          const integrationFiles = (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.querySelector('#integration-files');
-          const selectedIntegrationFolders = ((await ((_d = integrationFiles === null || integrationFiles === void 0 ? void 0 : integrationFiles.getSelected) === null || _d === void 0 ? void 0 : _d.call(integrationFiles, 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';
+              if (onFinally) {
+                  onFinally(job);
               }
-              else if (!found && newFileStatus === 'checked') {
-                  newFileStatus = 'clear-selection';
-                  break;
+          }
+          catch (_e) {
+              if (onFinally) {
+                  onFinally();
               }
-              else {
-                  newFileStatus = 'unChecked';
+              if (!silentJobs.find((type) => type === jobType)) {
+                  pushJobs([{ id: jobId, isFailed: true }]);
               }
+              showToast('Sync status check failed');
           }
-          setScheduleModalState({
-              type,
-              showAllFolderFiles,
-              showNewFiles,
-              newFiles: showNewFiles && newFileStatus === 'checked',
-              newFilesClearSelection: showNewFiles && newFileStatus === 'clear-selection',
-              selectedFiles: true,
-              allFolderFiles: false,
-          });
-          setIsScheduleSaveDisabled(false);
-          openModal(scheduleModalRef.current);
-      }
-      function onChangeAutoSynchronizationOptions() {
-          var _a, _b, _c;
-          const nextState = {
-              newFiles: scheduleModalState.showNewFiles ? !!((_a = newFilesCheckboxRef.current) === null || _a === void 0 ? void 0 : _a.checked) : false,
-              selectedFiles: !!((_b = selectedFilesCheckboxRef.current) === null || _b === void 0 ? void 0 : _b.checked),
-              allFolderFiles: scheduleModalState.showAllFolderFiles
-                  ? !!((_c = allFolderFilesCheckboxRef.current) === null || _c === void 0 ? void 0 : _c.checked)
-                  : false,
-          };
-          setScheduleModalState((currentState) => ({
-              ...currentState,
-              ...nextState,
-              newFilesClearSelection: false,
-          }));
-          setIsScheduleSaveDisabled(!nextState.newFiles && !nextState.selectedFiles && !nextState.allFolderFiles);
       }
-      async function hasFolder(selectedFiles) {
-          let isFolder;
-          if (Array.isArray(selectedFiles)) {
-              isFolder = selectedFiles.find((file) => file.node_type === folderType || file.node_type === branchType);
+      function pushJobs(jobs) {
+          const el = asyncProgressRef.current;
+          if (el && el.pushJobs) {
+              el.pushJobs(jobs);
+              jobs.forEach((job) => (asyncJobs.current[job.id] = job));
           }
           else {
-              const files = await appComponent.current.getCrowdinFilesData();
-              const folders = files.filter((file) => file.node_type === folderType || file.node_type === branchType);
-              isFolder = folders.find((folder) => selectedFiles.hasOwnProperty(folder.id));
+              setTimeout(() => pushJobs(jobs), 300);
           }
-          return isFolder !== undefined;
       }
-      async function setIntegrationScheduleSync(e) {
-          var _a;
-          if (e.detail.length === 0) {
-              showToast('Select templates which will be pushed to Crowdin');
+      async function uploadFilesToIntegration(event) {
+          var _a, _b, _c, _d;
+          let files = {};
+          let forcePushTranslations = false;
+          if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.action) === 'forcePushTranslations') {
+              files = event.detail.files;
+              forcePushTranslations = true;
+          }
+          else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.action) === 'excludedTargetLanguages') {
+              crowdinFilesToUpdateTargetLanguages.current = event.detail.files;
+              openLanguageModalForCrowdinFiles();
               return;
           }
-          let syncedFiles;
-          if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
-              const newIntegrationFiles = (_a = config.current) === null || _a === void 0 ? void 0 : _a['new-integration-files'];
-              syncData.current = e.detail;
-              const isFolder = await hasFolder(e.detail);
-              const shouldShowModal = isFolder && !newIntegrationFiles;
-              const showNewFiles = true; // завжди показуємо New files коли є syncNewElements.integration
-              const showAllFolderFiles = hasLoadMoreElements.current; // показуємо All files якщо є hasLoadMoreElements
-              if (shouldShowModal) {
-                  await openScheduleModal('integration', { showNewFiles, showAllFolderFiles });
-                  return;
-              }
-              appComponent.current.setIntegrationScheduleSync(e.detail);
-              appComponent.current.setIntegrationFilesHasSyncOption(true);
-              syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
+          else if (((_c = event.detail) === null || _c === void 0 ? void 0 : _c.action) === 'syncSourcesToCrowdin') {
+              syncToCrowdinFromCrowdinFiles(event.detail.files, false);
+              return;
+          }
+          else if (((_d = event.detail) === null || _d === void 0 ? void 0 : _d.action) === 'syncTranslationsToCrowdin') {
+              syncToCrowdinFromCrowdinFiles(event.detail.files, true);
+              return;
           }
           else {
-              syncData.current = e.detail;
-              const isFolder = await hasFolder(e.detail);
-              if (hasLoadMoreElements.current && isFolder) {
-                  await openScheduleModal('integration', { showNewFiles: false, showAllFolderFiles: true });
-                  return;
-              }
-              syncedFiles = await appComponent.current.getIntegrationScheduleSync();
+              files = event.detail;
           }
-          appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
-          if (integrationOneLevelFetching) {
-              updateSyncSettings(syncedFiles, 'schedule', 'integration', getIntegrationFoldersToExpand(e.detail, syncedFiles));
+          if (Object.keys(event.detail).length === 0 || !event.detail) {
+              showToast(`Select files which will be uploaded to ${name}`);
+              return;
           }
-          else {
-              if (hasLoadMoreElements.current) {
-                  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');
-              }
+          appComponent.current.setAttribute('is-to-integration-process', true);
+          const req = {};
+          Object.keys(files)
+              .filter((id) => crowdinData.current.find((c) => c.id === id).node_type === FILE_TYPE)
+              .forEach((id) => (req[id] = files[id]));
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/integration/update${restParams}&forcePushTranslations=${forcePushTranslations}`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(req),
+              }));
+              checkJob({ jobId: res === null || res === void 0 ? void 0 : res.jobId, jobType: JOB_TYPE.updateIntegration });
+          }
+          catch (e) {
+              catchRejection(e, `Can't upload files to ${name}`);
           }
       }
-      async function setCrowdinScheduleSync(e) {
-          var _a;
-          if (e.detail.length === 0) {
-              showToast('Select templates which will be pushed to Crowdin');
+      async function syncToCrowdinFromCrowdinFiles(files, uploadTranslations) {
+          if (!files || Object.keys(files).length === 0) {
+              showToast('Select files to sync');
               return;
           }
-          let syncedFiles;
-          if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) {
-              const newCrowdinFiles = (_a = config.current) === null || _a === void 0 ? void 0 : _a['new-crowdin-files'];
-              syncData.current = e.detail;
-              const isFolder = await hasFolder(e.detail);
-              if (isFolder && !newCrowdinFiles) {
-                  await openScheduleModal('crowdin');
-                  return;
-              }
-              appComponent.current.setCrowdinScheduleSync(e.detail);
-              appComponent.current.setCrowdinFilesHasSyncOption(true);
-              syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
-          }
-          else {
-              syncedFiles = await appComponent.current.getCrowdinScheduleSync();
+          appComponent.current.setAttribute('is-to-crowdin-process', true);
+          const req = {};
+          Object.keys(files)
+              .filter((id) => { var _a; return ((_a = crowdinData.current.find((c) => c.id === id)) === null || _a === void 0 ? void 0 : _a.node_type) === FILE_TYPE; })
+              .forEach((id) => (req[id] = files[id]));
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/crowdin/update${restParams}&matchFromCrowdin=true&uploadTranslations=${uploadTranslations}`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(req),
+              }));
+              checkJob({ jobId: res === null || res === void 0 ? void 0 : res.jobId, jobType: JOB_TYPE.updateCrowdin });
+          }
+          catch (e) {
+              catchRejection(e, "Can't sync files to Crowdin");
           }
-          appComponent.current.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');
+      async function syncTranslationsToIntegration(files) {
+          if (!files || files.length === 0) {
+              showToast('Select files to sync');
               return;
           }
-          appComponent.current.setAttribute('is-integration-sync-settings-in-progress', true);
-          let syncedFiles;
-          if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
-              syncedFiles = await appComponent.current.getIntegrationScheduleSync(true);
+          appComponent.current.setAttribute('is-to-integration-process', true);
+          const req = files
+              .filter((f) => f.node_type !== FOLDER_TYPE)
+              .map((f) => ({ name: f.name, id: f.id, type: f.type, parentId: f.parent_id }));
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/integration/update${restParams}&matchFromIntegration=true`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(req),
+              }));
+              checkJob({ jobId: res === null || res === void 0 ? void 0 : res.jobId, jobType: JOB_TYPE.updateIntegration });
           }
-          else {
-              syncedFiles = await appComponent.current.getIntegrationScheduleSync();
+          catch (e) {
+              catchRejection(e, `Can't sync translations to ${name}`);
           }
-          updateSyncSettings(syncedFiles, 'schedule', 'integration');
       }
-      async function disableCrowdinSync(e) {
-          if (e.detail.length === 0) {
-              showToast('Select templates which will be pushed to Crowdin');
+      function openLanguageModal() {
+          setLanguageModalState((state) => {
+              var _a, _b;
+              return ({
+                  languages: (_b = (_a = state === null || state === void 0 ? void 0 : state.languages) !== null && _a !== void 0 ? _a : project.current.targetLanguages) !== null && _b !== void 0 ? _b : [],
+                  action: 'syncToCrowdin',
+              });
+          });
+          openModal(languageModal.current);
+      }
+      function openLanguageModalForCrowdinFiles() {
+          setLanguageModalState((state) => {
+              var _a, _b;
+              return ({
+                  languages: (_b = (_a = state === null || state === void 0 ? void 0 : state.languages) !== null && _a !== void 0 ? _a : project.current.targetLanguages) !== null && _b !== void 0 ? _b : [],
+                  action: 'updateCrowdinTargetLanguages',
+              });
+          });
+          openModal(languageModal.current);
+      }
+      async function uploadFilesToCrowdinWithExcludedLanguages() {
+          const selectedLanguages = await languageSelectRef.current.getValue();
+          closeModal(languageModal.current);
+          uploadFilesToCrowdin({ detail: fileToSync.current }, selectedLanguages);
+      }
+      async function updateCrowdinFilesTargetLanguages() {
+          const selectedLanguages = await languageSelectRef.current.getValue();
+          closeModal(languageModal.current);
+          const fileIds = Object.keys(crowdinFilesToUpdateTargetLanguages.current).map((id) => parseInt(id, 10));
+          if (fileIds.length === 0) {
+              showToast('Select files to update');
               return;
           }
-          appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', true);
-          let syncedFiles;
-          if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) {
-              syncedFiles = await appComponent.current.getCrowdinScheduleSync(true);
+          appComponent.current.setAttribute('is-to-crowdin-process', true);
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/crowdin/files-target-languages${restParams}`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ fileIds, languages: selectedLanguages }),
+              }));
+              checkJob({ jobId: res === null || res === void 0 ? void 0 : res.jobId, jobType: JOB_TYPE.updateTargetLanguages });
           }
-          else {
-              syncedFiles = await appComponent.current.getCrowdinScheduleSync();
+          catch (e) {
+              catchRejection(e, "Can't update files target languages");
           }
-          updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
       }
-      function updateSyncSettings(files, type, provider, expandIntegrationFolders = [], folderIds = []) {
-          checkOrigin()
-              .then((restParams) => fetch('api/sync-settings' + restParams, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                  files,
-                  type,
-                  provider,
-                  expandIntegrationFolders,
-                  hasLoadMoreElements: hasLoadMoreElements.current,
-                  folderIds,
-              }),
-          }))
-              .then(checkResponse)
-              .then((res) => {
+      function setLanguagesForTranslation(languages, action = 'syncToCrowdin') {
+          setLanguageModalState({ languages, action });
+      }
+      async function updateSyncSettings(files, type, provider, expandIntegrationFolders = [], folderIds = []) {
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch('api/sync-settings' + restParams, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({
+                      files,
+                      type,
+                      provider,
+                      expandIntegrationFolders,
+                      hasLoadMoreElements: hasLoadMoreElements.current,
+                      folderIds,
+                  }),
+              }));
               checkJob({
                   jobId: res === null || res === void 0 ? void 0 : res.jobId,
                   jobType: JOB_TYPE[`${provider}SyncSettingsSave`],
               });
-          })
-              .catch((e) => catchRejection(e, "Can't save schedule sync settings"));
+          }
+          catch (e) {
+              catchRejection(e, "Can't save schedule sync settings");
+          }
+      }
+      return {
+          getCrowdinData,
+          getIntegrationData,
+          checkJob,
+          cancelJob,
+          getActiveJobs,
+          updateSyncSettings,
+          refreshAutoSyncPausedIndicatorsAndWarning,
+          uploadFilesToCrowdin,
+          uploadFilesToIntegration,
+          updateCrowdinFilesTargetLanguages,
+          uploadFilesToCrowdinWithExcludedLanguages,
+          languageModalState,
+          languageModalRef: languageModal,
+          languageSelectRef,
+          crowdinData,
+          hasLoadMoreElements,
+      };
+  }
+
+  const ExcludedLanguagesModal = ({ modalRef, languageSelectRef, languageModalState, onUpdateTargetLanguages, onSyncToCrowdin, }) => {
+      return (jsxRuntimeExports.jsx("crowdin-modal", { ref: modalRef, style: { display: 'none' }, "modal-width": "50", "modal-title": "Select Target Languages for Translation", id: "excluded-languages", children: languageModalState && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("crowdin-select", { ref: languageSelectRef, "is-multi": true, "is-searchable": true, "is-position-fixed": true, "close-on-select": "false", name: "languages", id: "language-select", label: "Languages", children: languageModalState.languages.map((language) => (jsxRuntimeExports.jsx("option", { value: language.id, children: language.name }, language.id))) }) }), jsxRuntimeExports.jsxs("div", { slot: "footer", children: [jsxRuntimeExports.jsx("span", { hidden: languageModalState.action !== 'updateCrowdinTargetLanguages', children: jsxRuntimeExports.jsx("crowdin-button", { id: "update-crowdin-target-languages", outlined: true, onClick: onUpdateTargetLanguages, children: "Update Target Languages" }) }), jsxRuntimeExports.jsx("span", { hidden: languageModalState.action !== 'syncToCrowdin', children: jsxRuntimeExports.jsx("crowdin-button", { id: "upload-exclude-languages", outlined: true, onClick: onSyncToCrowdin, children: jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center gap-1", children: [jsxRuntimeExports.jsx("span", { children: "Sync to" }), jsxRuntimeExports.jsx("crowdin-logo", { "is-icon": true })] }) }) })] })] })) }));
+  };
+
+  const InfoModal = ({ modalRef, infoModal }) => {
+      return (jsxRuntimeExports.jsx("crowdin-modal", { ref: modalRef, style: { display: 'none' }, id: "info-modal", "modal-width": "50", "modal-title": infoModal.title, "close-button-title": "Close", children: jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: infoModal.content } }) }));
+  };
+
+  function renderPermissionStatus(status) {
+      switch (status) {
+          case 'willBeGranted':
+              return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-info)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-white)]", children: "Will Be Granted" }));
+          case 'willBeRegistered':
+              return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-info)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-white)]", children: "Will Be Registered" }));
+          case 'actionRequired':
+              return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-warning-bg)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-warning)]", children: "Action Required" }));
+          case 'granted':
+          default:
+              return jsxRuntimeExports.jsx("crowdin-p", { children: EMPTY_PERMISSION_VALUE });
       }
-      function getSubscriptionInfo() {
-          checkOrigin()
-              .then((restParams) => fetch('api/subscription-info' + restParams))
-              .then(checkResponse)
-              .then((res) => {
-              if (res.showInfo) {
-                  subscriptionLink.current = res.subscribeLink;
-                  setSubscriptionInfo({ daysLeft: res.daysLeft, subscribeLink: res.subscribeLink });
-              }
+  }
+  function renderPermissionUsers(row) {
+      if (!row || row.users.length === 0) {
+          return row ? renderPermissionStatus(row.status) : null;
+      }
+      return (jsxRuntimeExports.jsx("ul", { className: "m-0 list-none p-0", children: row.users.map((user) => (jsxRuntimeExports.jsx("li", { className: "mb-1 text-sm last:mb-0", children: jsxRuntimeExports.jsx("crowdin-p", { children: user }) }, user))) }));
+  }
+  function renderPermissionRowDescription(row) {
+      if (!(row === null || row === void 0 ? void 0 : row.description)) {
+          return null;
+      }
+      return (jsxRuntimeExports.jsx("div", { className: row.isWarning
+              ? 'mt-1 text-xs text-[var(--crowdin-warning)]'
+              : 'mt-1 text-xs text-[var(--crowdin-text-muted)]', children: row.description }));
+  }
+  const PermissionsModal = ({ modalRef, usersSelectRef, isLoading, permissionUserOptions, isConfirmVisible, permissionsSummary, hasOrganization, zenModeUrl, onSave, }) => {
+      return (jsxRuntimeExports.jsxs("crowdin-modal", { ref: modalRef, style: { display: 'none' }, id: "permissions-modal", "modal-title": "Share", "close-button-title": "Close", "close-button": true, "body-overflow-unset": true, children: [jsxRuntimeExports.jsx("div", { className: isLoading ? 'absolute inset-0 z-[4] flex items-center justify-center bg-white/30' : 'hidden', children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("crowdin-users-select", { ref: usersSelectRef, "allow-new-options": true, "is-multi": true, "is-searchable": true, id: "users", label: "Users", "help-text": "Search for members by name, username, email, or invite new ones using their email.", "is-position-fixed": true, children: permissionUserOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.id, children: option.label }, option.id))) }, "users") }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: isConfirmVisible ? 'mt-4' : 'hidden', children: jsxRuntimeExports.jsxs("table", { className: "w-full border-separate border-spacing-0", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left text-sm", style: { width: '40%' }, children: "Access" }), jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left text-sm", style: { width: '35%' }, children: "Users" }), jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right text-sm", style: { width: '20%' }, children: "Upcoming changes" })] }) }), jsxRuntimeExports.jsxs("tbody", { children: [hasOrganization && (jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Registration in Organization" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization)] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) &&
+                                                                  renderPermissionStatus(permissionsSummary.organization.status) })] })), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: jsxRuntimeExports.jsx("crowdin-p", { children: "Project Manager Access" }) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) &&
+                                                                  renderPermissionStatus(permissionsSummary.project.status) })] }), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Application Visibility Access" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings)] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) &&
+                                                                  renderPermissionStatus(permissionsSummary.applicationSettings.status) })] }), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Access to the Integration" }), jsxRuntimeExports.jsx("div", { className: "mt-1 text-xs text-[var(--crowdin-text-muted)]", children: "This provides access to sync files and modify the current integration settings." })] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) &&
+                                                                  renderPermissionStatus(permissionsSummary.applicationCredentials.status) })] })] })] }) }), zenModeUrl && (jsxRuntimeExports.jsx("div", { className: "mt-4", children: jsxRuntimeExports.jsx("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 }) }))] })] }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "confirm-users-btn", outlined: true, onClick: onSave, children: "Save" }) })] }));
+  };
+
+  const ScheduleModal = ({ modalRef, selectedFilesCheckboxRef, allFolderFilesCheckboxRef, newFilesCheckboxRef, scheduleModalState, isSaveDisabled, onChangeOptions, onSave, }) => {
+      return (jsxRuntimeExports.jsxs("crowdin-modal", { ref: modalRef, 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, children: [jsxRuntimeExports.jsx("crowdin-checkbox", { ref: selectedFilesCheckboxRef, id: "selected-files", name: "selected-files", label: "Selected files", class: "hydrated", checked: scheduleModalState.selectedFiles, value: String(scheduleModalState.selectedFiles), onChange: onChangeOptions }), jsxRuntimeExports.jsx("crowdin-checkbox", { ref: allFolderFilesCheckboxRef, id: "all-folder-files", name: "all-folder-files", label: "All files in the folder", class: "hydrated", hidden: !scheduleModalState.showAllFolderFiles, checked: scheduleModalState.allFolderFiles, value: String(scheduleModalState.allFolderFiles), onChange: onChangeOptions }), jsxRuntimeExports.jsx("crowdin-checkbox", { ref: newFilesCheckboxRef, id: "new-files", name: "new-files", label: "New files", class: "hydrated", hidden: !scheduleModalState.showNewFiles, checked: scheduleModalState.newFiles, value: String(scheduleModalState.newFiles), ...(scheduleModalState.newFilesClearSelection ? { 'clear-selection': '' } : {}), onChange: onChangeOptions }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { outlined: true, id: "save-schedule-sync", disabled: isSaveDisabled, onClick: onSave, children: "Save" }) })] }));
+  };
+
+  function renderConfigField(field, settingsFieldChange, registerSettingsField, suffix = 'settings') {
+      var _a;
+      if (!field.key) {
+          return field.labelHtml ? (jsxRuntimeExports.jsx("crowdin-p", { ...(field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), dangerouslySetInnerHTML: { __html: field.labelHtml } })) : (jsxRuntimeExports.jsx("crowdin-p", { ...(field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), children: field.label }));
+      }
+      const commonProps = {
+          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 (jsxRuntimeExports.jsx("crowdin-checkbox", { ref: registerSettingsField(field.key), ...commonProps, value: "false", "use-switch": true, ...(field.defaultValue === true ? { checked: String(field.defaultValue) } : {}), onChange: settingsFieldChange }));
+          case 'select':
+              return (jsxRuntimeExports.jsx("crowdin-select", { ref: registerSettingsField(field.key), ...commonProps, ...(field.isMulti ? { 'is-multi': true, 'close-on-select': 'false' } : {}), ...(field.isSearchable ? { 'is-searchable': true } : {}), "is-position-fixed": true, onChange: settingsFieldChange, children: (_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 (jsxRuntimeExports.jsx("option", { value: option.value, ...(isSelected ? { selected: true } : {}), children: option.label }, option.value));
+                  }) }));
+          case 'text':
+              return (jsxRuntimeExports.jsx("crowdin-input", { ref: registerSettingsField(field.key), ...commonProps, "with-fixed-height": true, value: field.defaultValue || '', onChange: settingsFieldChange }));
+          case 'textarea':
+              return (jsxRuntimeExports.jsx("crowdin-textarea", { ref: registerSettingsField(field.key), ...commonProps, value: field.defaultValue || '', onChange: settingsFieldChange }));
+          case 'notice':
+              return (jsxRuntimeExports.jsx("crowdin-alert", { ...(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.helpTextHtml || field.helpText || '' } }));
+          default:
+              return null;
+      }
+  }
+  const SettingsModal = ({ modalRef, isLoading, configurationFields, isSaveDisabled, settingsFieldChange, registerSettingsField, onSave, }) => {
+      return (jsxRuntimeExports.jsxs("crowdin-modal", { ref: modalRef, style: { display: 'none' }, id: "settings-modal", "modal-width": "65", "modal-title": "Settings", "close-button-title": "Close", children: [jsxRuntimeExports.jsx("div", { className: isLoading ? 'absolute inset-0 z-[4] flex items-center justify-center bg-white/30' : 'hidden', children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsx("div", { id: "modal-content", children: jsxRuntimeExports.jsx("crowdin-tabs", { "tabs-config": JSON.stringify(configurationFields.map((f) => f.name)), "active-tab": "1", children: configurationFields.map((tab, tabIndex) => (jsxRuntimeExports.jsx("div", { slot: `tab-${tabIndex + 1}`, children: jsxRuntimeExports.jsx("div", { children: tab.fields.map((field, fieldIndex) => (jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [renderConfigField(field, settingsFieldChange, registerSettingsField), jsxRuntimeExports.jsx("div", { style: { padding: '8px' }, ...(field.dependencySettings
+                                              ? { 'data-dependency': field.dependencySettings }
+                                              : {}) })] }, field.key || `${tabIndex}-${fieldIndex}`))) }) }, tabIndex))) }) }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "settings-save-btn", outlined: true, disabled: isSaveDisabled, onClick: onSave, children: "Save" }) })] }));
+  };
+
+  const SubscriptionModal = ({ modalRef, subscriptionLink, name, onLogout }) => {
+      return (jsxRuntimeExports.jsxs("crowdin-modal", { ref: modalRef, style: { display: 'none' }, id: "subscription-modal", "modal-width": "50", "close-button": "false", children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("crowdin-alert", { type: "warning", children: ["Subscribe to continue using the ", name, " app."] }) }), jsxRuntimeExports.jsxs("div", { slot: "footer", children: [jsxRuntimeExports.jsx("crowdin-button", { primary: true, onClick: () => { var _a; return window.open((_a = subscriptionLink.current) !== null && _a !== void 0 ? _a : '', '_blank', 'noopener,noreferrer'); }, children: "Subscribe" }), jsxRuntimeExports.jsx("crowdin-button", { outlined: true, onClick: () => window.open('https://crowdin.com/contacts', '_blank', 'noopener,noreferrer'), children: "Contact us" }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-2.5", secondary: true, onClick: onLogout, children: "Log out" })] })] }));
+  };
+
+  function isJSON(string) {
+      try {
+          JSON.parse(string);
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  }
+  function getUserErrorDetail(error) {
+      const data = JSON.parse(error.data);
+      const preClassName = 'block rounded bg-[#eceff1] p-4 text-[87.5%] text-[#212529]';
+      const rows = [
+          { label: 'Action', value: error.action },
+          {
+              label: 'Message',
+              value: isJSON(error.message) ? jsxRuntimeExports.jsx("pre", { className: preClassName, children: error.message }) : error.message,
+          },
+          { label: 'Date/time', value: error.formattedDate },
+      ];
+      if (data.requestParams) {
+          rows.push({ label: 'Method', value: data.requestParams.method });
+      }
+      if (data.responseData) {
+          rows.push({
+              label: 'Response Data',
+              value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.responseData, null, 2) }),
           });
       }
+      if (data.appData) {
+          if (Array.isArray(data.appData)) {
+              rows.push({
+                  label: 'App Data',
+                  value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.appData, null, 2) }),
+              });
+          }
+          else if (typeof data.appData === 'object') {
+              for (const key in data.appData) {
+                  rows.push({
+                      label: key.charAt(0).toUpperCase() + key.slice(1),
+                      value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.appData[key], null, 2) }),
+                  });
+              }
+          }
+          else {
+              rows.push({ label: 'App Data', value: data.appData });
+          }
+      }
+      return (jsxRuntimeExports.jsx("div", { className: "-m-6 h-auto max-h-[579px] overflow-auto", children: jsxRuntimeExports.jsx("table", { className: "w-full border-separate border-spacing-0", children: jsxRuntimeExports.jsx("tbody", { children: rows.map((row) => (jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("td", { className: "min-w-[200px] p-2 px-6 align-top font-medium", children: row.label }), jsxRuntimeExports.jsx("td", { className: "break-all bg-[var(--crowdin-primary-blue-gray,#f6f6f6)] p-2 px-6 text-[var(--crowdin-body-color,rgba(38,50,56,0.87))]", children: row.value })] }, row.label))) }) }) }));
+  }
+  const UserErrorDetailModal = ({ modalRef, selectedUserError }) => {
+      return (jsxRuntimeExports.jsx("crowdin-modal", { ref: modalRef, style: { display: 'none' }, id: "user-error-detail", "close-button-title": "Close", "close-button": "true", children: selectedUserError && getUserErrorDetail(selectedUserError) }));
+  };
+
+  const MainPage = (props) => {
+      const { name, userId, notice, checkSubscription, isManager, isOwner, infoModal, configurationFields, config: configString, syncNewElements, withCronSync, webhooks, integrationOneLevelFetching, integrationSearchListener, integrationPagination, excludedTargetLanguages, filtering, hasOrganization, zenModeUrl, asyncProgress = { checkInterval: 3000 }, reloadOnConfigSave, progressiveCrowdinFilesLoading, integrationButtonMenuItems, crowdinButtonMenuItems, } = props;
+      const config = reactExports.useRef(configString ? JSON.parse(configString.replace(/\\n/g, '\\\\n')) : {});
+      const appComponent = reactExports.useRef(null);
+      const asyncProgressRef = reactExports.useRef(null);
+      const infoModalRef = reactExports.useRef(null);
+      const subscriptionModal = reactExports.useRef(null);
+      const settingsModalRef = reactExports.useRef(null);
+      const scheduleModalRef = reactExports.useRef(null);
+      const permissionsModalRef = reactExports.useRef(null);
+      const userErrorsTableRef = reactExports.useRef(null);
+      const userErrorDetailModalRef = reactExports.useRef(null);
+      const subscriptionLink = reactExports.useRef('');
+      const refreshDependencies = useFieldDependencies(configurationFields);
+      const [isNoticeVisible, setIsNoticeVisible] = reactExports.useState(false);
+      const [subscriptionInfo, setSubscriptionInfo] = reactExports.useState(null);
+      const [isErrorLogsVisible, setIsErrorLogsVisible] = reactExports.useState(false);
+      const [selectedUserError, setSelectedUserError] = reactExports.useState(null);
+      const syncOps = useSyncOperations({
+          appComponent,
+          asyncProgressRef,
+          config,
+          name,
+          integrationOneLevelFetching,
+          integrationSearchListener,
+          integrationPagination,
+          withCronSync,
+          webhooks,
+          progressiveCrowdinFilesLoading,
+          asyncProgress,
+          syncNewElements,
+      });
+      const permissions = usePermissions({
+          userId,
+          hasOrganization,
+          permissionsModalRef,
+      });
+      const settings = useSettings({
+          configurationFields,
+          config,
+          settingsModalRef,
+          reloadOnConfigSave,
+          refreshDependencies,
+          checkJob: syncOps.checkJob,
+          getCrowdinData: syncOps.getCrowdinData,
+          getIntegrationData: syncOps.getIntegrationData,
+          refreshAutoSyncPausedIndicatorsAndWarning: syncOps.refreshAutoSyncPausedIndicatorsAndWarning,
+      });
+      const schedule = useSchedule({
+          appComponent,
+          config,
+          scheduleModalRef,
+          withCronSync,
+          webhooks,
+          syncNewElements,
+          integrationOneLevelFetching,
+          hasLoadMoreElements: syncOps.hasLoadMoreElements,
+          updateSyncSettings: syncOps.updateSyncSettings,
+      });
+      reactExports.useEffect(() => {
+          const handleKeydown = (event) => {
+              if (event.keyCode === 27) {
+                  closeModal(permissionsModalRef.current);
+                  closeModal(infoModalRef.current);
+                  closeModal(settingsModalRef.current);
+                  closeModal(scheduleModalRef.current);
+                  if (syncOps.languageModalRef.current) {
+                      closeModal(syncOps.languageModalRef.current);
+                  }
+              }
+          };
+          document.body.addEventListener('keydown', handleKeydown);
+          return () => document.body.removeEventListener('keydown', handleKeydown);
+      }, []);
+      // Expose centralized API to global scope for main.js compatibility
+      reactExports.useEffect(() => {
+          window.app = {
+              subscriptionModal,
+              subscriptionLink,
+              openModal,
+          };
+          return () => {
+              delete window.app;
+          };
+      }, []);
+      reactExports.useEffect(() => {
+          setIsNoticeVisible(Boolean(notice) && localStorage.getItem('revised_notice') !== '1');
+          if (checkSubscription) {
+              getSubscriptionInfo();
+          }
+      }, []);
+      async function getSubscriptionInfo() {
+          const restParams = await checkOrigin();
+          const res = await checkResponse(await fetch('api/subscription-info' + restParams));
+          if (res.showInfo) {
+              subscriptionLink.current = res.subscribeLink;
+              setSubscriptionInfo({ daysLeft: res.daysLeft, subscribeLink: res.subscribeLink });
+          }
+      }
+      async function integrationLogout() {
+          try {
+              const queryParams = await checkOrigin();
+              await checkResponse(await fetch(`api/logout${queryParams}`, { method: 'POST' }));
+              reloadLocation();
+              localStorage.removeItem(`revised_${name}`);
+          }
+          catch (e) {
+              catchRejection(e, e.error || 'Looks like you are not logged in');
+          }
+      }
       function closeAlert(suffix) {
-          const alertName = suffix ;
           setIsNoticeVisible(false);
-          localStorage.setItem(`revised_${alertName}`, '1');
+          localStorage.setItem(`revised_${suffix !== null && suffix !== void 0 ? suffix : name}`, '1');
       }
-      function showErrorLogs() {
+      async function showErrorLogs() {
           setIsErrorLogsVisible(true);
-          checkOrigin()
-              .then((restParams) => fetch('api/user-errors' + restParams))
-              .then(checkResponse)
-              .then((res) => {
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch('api/user-errors' + restParams));
               const table = userErrorsTableRef.current;
-              const clickRow = (field, index, item) => {
+              const clickRow = (_field, _index, item) => {
                   setSelectedUserError(item);
                   openModal(userErrorDetailModalRef.current);
               };
-              const formatDate = (field, index, item) => {
-                  return item.formattedDate;
-              };
+              const formatDate = (_field, _index, item) => item.formattedDate;
               if (table.setTableConfig) {
                   table.setTableConfig({
                       defaultSortingColumn: 'createdAt',
@@ -2483,156 +2683,25 @@
                               clickFn: clickRow,
                               formatFn: formatDate,
                           },
-                          {
-                              field: 'action',
-                              name: 'Action',
-                              clickFn: clickRow,
-                          },
-                          {
-                              field: 'message',
-                              name: 'Message',
-                              clickFn: clickRow,
-                          },
+                          { 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() {
-          setIsErrorLogsVisible(false);
-      }
-      function isJSON(string) {
-          try {
-              JSON.parse(string);
-              return true;
           }
           catch (e) {
-              return false;
-          }
-      }
-      function getUserErrorDetail(error) {
-          const data = JSON.parse(error.data);
-          const preClassName = 'block rounded bg-[#eceff1] p-4 text-[87.5%] text-[#212529]';
-          const rows = [
-              { label: 'Action', value: error.action },
-              {
-                  label: 'Message',
-                  value: isJSON(error.message) ? jsxRuntimeExports.jsx("pre", { className: preClassName, children: error.message }) : error.message,
-              },
-              { label: 'Date/time', value: error.formattedDate },
-          ];
-          if (data.requestParams) {
-              rows.push({ label: 'Method', value: data.requestParams.method });
-          }
-          if (data.responseData) {
-              rows.push({
-                  label: 'Response Data',
-                  value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.responseData, null, 2) }),
-              });
-          }
-          if (data.appData) {
-              if (Array.isArray(data.appData)) {
-                  rows.push({
-                      label: 'App Data',
-                      value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.appData, null, 2) }),
-                  });
-              }
-              else if (typeof data.appData === 'object') {
-                  for (const key in data.appData) {
-                      rows.push({
-                          label: key.charAt(0).toUpperCase() + key.slice(1),
-                          value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.appData[key], null, 2) }),
-                      });
-                  }
-              }
-              else {
-                  rows.push({ label: 'App Data', value: data.appData });
-              }
-          }
-          return (jsxRuntimeExports.jsx("div", { className: "-m-6 h-auto max-h-[579px] overflow-auto", children: jsxRuntimeExports.jsx("table", { className: "w-full border-separate border-spacing-0", children: jsxRuntimeExports.jsx("tbody", { children: rows.map((row) => (jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("td", { className: "min-w-[200px] p-2 px-6 align-top font-medium", children: row.label }), jsxRuntimeExports.jsx("td", { className: "break-all bg-[var(--crowdin-primary-blue-gray,#f6f6f6)] p-2 px-6 text-[var(--crowdin-body-color,rgba(38,50,56,0.87))]", children: row.value })] }, row.label))) }) }) }));
-      }
-      function renderPermissionStatus(status) {
-          switch (status) {
-              case 'willBeGranted':
-                  return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-info)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-white)]", children: "Will Be Granted" }));
-              case 'willBeRegistered':
-                  return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-info)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-white)]", children: "Will Be Registered" }));
-              case 'actionRequired':
-                  return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-warning-bg)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-warning)]", children: "Action Required" }));
-              case 'granted':
-              default:
-                  return jsxRuntimeExports.jsx("crowdin-p", { children: EMPTY_PERMISSION_VALUE });
-          }
-      }
-      function renderPermissionUsers(row) {
-          if (!row || row.users.length === 0) {
-              return row ? renderPermissionStatus(row.status) : null;
-          }
-          return (jsxRuntimeExports.jsx("ul", { className: "m-0 list-none p-0", children: row.users.map((user) => (jsxRuntimeExports.jsx("li", { className: "mb-1 text-sm last:mb-0", children: jsxRuntimeExports.jsx("crowdin-p", { children: user }) }, user))) }));
-      }
-      function renderPermissionRowDescription(row) {
-          if (!(row === null || row === void 0 ? void 0 : row.description)) {
-              return null;
-          }
-          return (jsxRuntimeExports.jsx("div", { className: row.isWarning
-                  ? 'mt-1 text-xs text-[var(--crowdin-warning)]'
-                  : 'mt-1 text-xs text-[var(--crowdin-text-muted)]', children: row.description }));
-      }
-      function openModal(modal) {
-          if (!modal) {
-              return;
-          }
-          modal.style.display = 'block';
-          modal.open();
-      }
-      function closeModal(modal) {
-          if (!modal) {
-              return;
+              catchRejection(e, "Can't fetch error logs");
           }
-          modal.style.display = 'none';
-          modal.close();
       }
-      function settingsFieldChange(eventOrElement) {
-          var _a, _b;
-          const el = (eventOrElement === null || eventOrElement === void 0 ? void 0 : eventOrElement.currentTarget) || (eventOrElement === null || eventOrElement === void 0 ? void 0 : eventOrElement.target) || eventOrElement;
-          (_a = el === null || el === void 0 ? void 0 : el.removeAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'error');
-          (_b = el === null || el === void 0 ? void 0 : el.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(el, 'error-text');
+      function showIntegration() {
+          setIsErrorLogsVisible(false);
       }
-      function isFolder(e) {
-          return !e.type && (e.nodeType === undefined || e.nodeType === folderType || e.nodeType === branchType);
-      }
-      return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-[1420px] px-6 py-4", children: [jsxRuntimeExports.jsxs("div", { className: "mb-2.5 text-right", children: [notice && (jsxRuntimeExports.jsxs("crowdin-alert", { id: "notice", title: notice.title, ...(!notice.icon ? { 'no-icon': 'true' } : {}), ...(notice.type ? { type: notice.type } : {}), style: { display: isNoticeVisible ? 'block' : 'none', marginBottom: '12px' }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", children: jsxRuntimeExports.jsx("p", { className: "m-0", dangerouslySetInnerHTML: { __html: notice.content } }) }), notice.close && (jsxRuntimeExports.jsx("crowdin-button", { onClick: () => closeAlert('notice'), class: "absolute top-0 right-0", icon: true, children: "close" }))] })), checkSubscription && (jsxRuntimeExports.jsx("crowdin-alert", { id: "subscription-info", "no-icon": "true", type: "warning", style: { display: subscriptionInfo ? 'block' : 'none', marginBottom: '12px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntimeExports.jsx("p", { className: "m-0", children: subscriptionInfo ? `Your trial expires in ${subscriptionInfo.daysLeft} days.` : '' }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-2", primary: true, onClick: () => {
-                                                  if (subscriptionInfo === null || subscriptionInfo === void 0 ? void 0 : subscriptionInfo.subscribeLink) {
-                                                      window.open(subscriptionInfo.subscribeLink, '_blank', 'noopener,noreferrer');
-                                                  }
-                                              }, children: "Subscribe" })] }) })), jsxRuntimeExports.jsxs("div", { id: "buttons", className: "flex w-full items-center justify-between", children: [jsxRuntimeExports.jsxs("div", { className: "mr-auto", children: [jsxRuntimeExports.jsx("span", { style: { display: isErrorLogsVisible ? undefined : 'none' }, children: jsxRuntimeExports.jsx("crowdin-button", { id: "show-integration-btn", "icon-before": "arrow_back", onClick: () => showIntegration(), children: "Integration" }) }), jsxRuntimeExports.jsx("span", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx("crowdin-button", { id: "show-error-logs-btn", "icon-before": "list", onClick: () => showErrorLogs(), children: "Error logs" }) })] }), isManager && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "link", onClick: () => showPermissionsDialog(), children: "Share" })), infoModal && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "info", onClick: () => openModal(infoModalRef.current), children: infoModal.title })), configurationFields && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "settings", onClick: () => {
-                                              openModal(settingsModalRef.current);
-                                              fillSettingsForm();
-                                          }, children: "Settings" })), jsxRuntimeExports.jsx("crowdin-button", { ...(!isOwner ? { disabled: true, title: 'Only the owner can log out' } : {}), "icon-before": "account_circle", onClick: () => integrationLogout(), children: "Log out" })] })] }), jsxRuntimeExports.jsx("div", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx("crowdin-simple-integration", { ref: appComponent, "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", ...(((_a = integrationButtonMenuItems === null || integrationButtonMenuItems === void 0 ? void 0 : integrationButtonMenuItems.length) !== null && _a !== void 0 ? _a : 0) > 0
-                                  ? { 'integration-button-menu-items': integrationButtonMenuItems }
-                                  : {}), ...(((_b = crowdinButtonMenuItems === null || crowdinButtonMenuItems === void 0 ? void 0 : crowdinButtonMenuItems.length) !== null && _b !== void 0 ? _b : 0) > 0
-                                  ? { 'crowdin-button-menu-items': 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,
-                                  }
-                                  : {}) }) }), jsxRuntimeExports.jsxs("div", { id: "user-errors", style: { display: isErrorLogsVisible ? undefined : 'none' }, children: [jsxRuntimeExports.jsx("crowdin-show-as-table", { ref: userErrorsTableRef, "is-loading": true, id: "user-errors-table", "is-searchable": true, "total-records": "25", "search-placeholder": "Search something" }), jsxRuntimeExports.jsx("crowdin-alert", { children: "This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted." })] })] }), jsxRuntimeExports.jsx("crowdin-toasts", {}), jsxRuntimeExports.jsx("crowdin-async-progress", { ref: asyncProgressRef, cancelAsyncAction: "" }), jsxRuntimeExports.jsxs("crowdin-modal", { ref: subscriptionModal, style: { display: 'none' }, id: "subscription-modal", "modal-width": "50", "close-button": "false", children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("crowdin-alert", { type: "warning", children: ["Subscribe to continue using the ", name, " app."] }) }), jsxRuntimeExports.jsxs("div", { slot: "footer", children: [jsxRuntimeExports.jsx("crowdin-button", { primary: true, onClick: () => window.open(subscriptionLink.current, '_blank', 'noopener,noreferrer'), children: "Subscribe" }), jsxRuntimeExports.jsx("crowdin-button", { outlined: true, onClick: () => window.open('https://crowdin.com/contacts', '_blank', 'noopener,noreferrer'), children: "Contact us" }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-2.5", secondary: true, onClick: () => integrationLogout(), children: "Log out" })] })] }), jsxRuntimeExports.jsxs("crowdin-modal", { ref: permissionsModalRef, style: { display: 'none' }, id: "permissions-modal", "modal-title": "Share", "close-button-title": "Close", "close-button": true, "body-overflow-unset": true, children: [jsxRuntimeExports.jsx("div", { className: modalLoaders['permissions-modal']
-                              ? 'absolute inset-0 z-[4] flex items-center justify-center bg-white/30'
-                              : 'hidden', children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("crowdin-users-select", { ref: usersSelectRef, "allow-new-options": true, "is-multi": true, "is-searchable": true, id: "users", label: "Users", "help-text": "Search for members by name, username, email, or invite new ones using their email.", "is-position-fixed": true, children: permissionUserOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.id, children: option.label }, option.id))) }, "users") }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: isPermissionsConfirmVisible ? 'mt-4' : 'hidden', children: jsxRuntimeExports.jsxs("table", { className: "w-full border-separate border-spacing-0", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left text-sm", style: { width: '40%' }, children: "Access" }), jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left text-sm", style: { width: '35%' }, children: "Users" }), jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right text-sm", style: { width: '20%' }, children: "Upcoming changes" })] }) }), jsxRuntimeExports.jsxs("tbody", { children: [hasOrganization && (jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Registration in Organization" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization)] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) &&
-                                                                          renderPermissionStatus(permissionsSummary.organization.status) })] })), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: jsxRuntimeExports.jsx("crowdin-p", { children: "Project Manager Access" }) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) &&
-                                                                          renderPermissionStatus(permissionsSummary.project.status) })] }), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Application Visibility Access" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings)] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) &&
-                                                                          renderPermissionStatus(permissionsSummary.applicationSettings.status) })] }), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Access to the Integration" }), jsxRuntimeExports.jsx("div", { className: "mt-1 text-xs text-[var(--crowdin-text-muted)]", children: "This provides access to sync files and modify the current integration settings." })] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) &&
-                                                                          renderPermissionStatus(permissionsSummary.applicationCredentials.status) })] })] })] }) }), zenModeUrl && (jsxRuntimeExports.jsx("div", { className: "mt-4", children: jsxRuntimeExports.jsx("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 }) }))] })] }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "confirm-users-btn", outlined: true, onClick: () => inviteUsers(), children: "Save" }) })] }), excludedTargetLanguages && (jsxRuntimeExports.jsx("crowdin-modal", { ref: languageModal, style: { display: 'none' }, "modal-width": "50", "modal-title": "Select Target Languages for Translation", id: "excluded-languages", children: languageModalState && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("crowdin-select", { ref: languageSelectRef, "is-multi": true, "is-searchable": true, "is-position-fixed": true, "close-on-select": "false", name: "languages", id: "language-select", label: "Languages", children: languageModalState.languages.map((language) => (jsxRuntimeExports.jsx("option", { value: language.id, children: language.name }, language.id))) }) }), jsxRuntimeExports.jsxs("div", { slot: "footer", children: [jsxRuntimeExports.jsx("span", { hidden: languageModalState.action !== 'updateCrowdinTargetLanguages', children: jsxRuntimeExports.jsx("crowdin-button", { id: "update-crowdin-target-languages", outlined: true, onClick: () => updateCrowdinFilesTargetLanguages(), children: "Update Target Languages" }) }), jsxRuntimeExports.jsx("span", { hidden: languageModalState.action !== 'syncToCrowdin', children: jsxRuntimeExports.jsx("crowdin-button", { id: "upload-exclude-languages", outlined: true, onClick: () => uploadFilesToCrowdinWithExcludedLanguages(), children: jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center gap-1", children: [jsxRuntimeExports.jsx("span", { children: "Sync to" }), jsxRuntimeExports.jsx("crowdin-logo", { "is-icon": true })] }) }) })] })] })) })), infoModal && (jsxRuntimeExports.jsx("crowdin-modal", { ref: infoModalRef, style: { display: 'none' }, id: "info-modal", "modal-width": "50", "modal-title": infoModal.title, "close-button-title": "Close", children: jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: infoModal.content } }) })), configurationFields && (jsxRuntimeExports.jsxs("crowdin-modal", { ref: settingsModalRef, style: { display: 'none' }, id: "settings-modal", "modal-width": "65", "modal-title": "Settings", "close-button-title": "Close", children: [jsxRuntimeExports.jsx("div", { className: modalLoaders['settings-modal']
-                              ? 'absolute inset-0 z-[4] flex items-center justify-center bg-white/30'
-                              : 'hidden', children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsx("div", { id: "modal-content", children: jsxRuntimeExports.jsx("crowdin-tabs", { "tabs-config": JSON.stringify(configurationFields.map((f) => f.name)), "active-tab": "1", children: configurationFields.map((tab, tabIndex) => (jsxRuntimeExports.jsx("div", { slot: `tab-${tabIndex + 1}`, children: jsxRuntimeExports.jsx("div", { children: tab.fields.map((field, fieldIndex) => (jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [renderConfigField(field, settingsFieldChange, registerSettingsField), jsxRuntimeExports.jsx("div", { style: { padding: '8px' }, ...(field.dependencySettings
-                                                      ? { 'data-dependency': field.dependencySettings }
-                                                      : {}) })] }, field.key || `${tabIndex}-${fieldIndex}`))) }) }, tabIndex))) }) }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "settings-save-btn", outlined: true, disabled: isSettingsSaveDisabled, onClick: () => saveSettings(), children: "Save" }) })] })), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsxs("crowdin-modal", { ref: scheduleModalRef, 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, children: [jsxRuntimeExports.jsx("crowdin-checkbox", { ref: selectedFilesCheckboxRef, id: "selected-files", name: "selected-files", label: "Selected files", class: "hydrated", checked: scheduleModalState.selectedFiles, value: String(scheduleModalState.selectedFiles), onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("crowdin-checkbox", { ref: allFolderFilesCheckboxRef, id: "all-folder-files", name: "all-folder-files", label: "All files in the folder", class: "hydrated", hidden: !scheduleModalState.showAllFolderFiles, checked: scheduleModalState.allFolderFiles, value: String(scheduleModalState.allFolderFiles), onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("crowdin-checkbox", { ref: newFilesCheckboxRef, id: "new-files", name: "new-files", label: "New files", class: "hydrated", hidden: !scheduleModalState.showNewFiles, checked: scheduleModalState.newFiles, value: String(scheduleModalState.newFiles), ...(scheduleModalState.newFilesClearSelection ? { 'clear-selection': '' } : {}), onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { outlined: true, id: "save-schedule-sync", disabled: isScheduleSaveDisabled, onClick: () => saveScheduleSync(), children: "Save" }) })] })), jsxRuntimeExports.jsx("crowdin-modal", { ref: userErrorDetailModalRef, style: { display: 'none' }, id: "user-error-detail", "close-button-title": "Close", "close-button": "true", children: selectedUserError && getUserErrorDetail(selectedUserError) })] }));
+      return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-[1420px] px-6 py-4", children: [jsxRuntimeExports.jsx(TopBar, { notice: notice, isNoticeVisible: isNoticeVisible, checkSubscription: checkSubscription, subscriptionInfo: subscriptionInfo, isErrorLogsVisible: isErrorLogsVisible, isManager: isManager, infoModal: infoModal, hasSettings: !!configurationFields, isOwner: isOwner, onCloseNotice: closeAlert, onShowIntegration: showIntegration, onShowErrorLogs: showErrorLogs, onShowPermissions: permissions.showPermissionsDialog, onOpenInfoModal: () => openModal(infoModalRef.current), onOpenSettings: () => {
+                              openModal(settingsModalRef.current);
+                              settings.fillSettingsForm();
+                          }, onLogout: integrationLogout }), jsxRuntimeExports.jsx(IntegrationView, { appComponentRef: appComponent, userErrorsTableRef: userErrorsTableRef, name: name, isErrorLogsVisible: isErrorLogsVisible, syncNewElements: syncNewElements, withCronSync: withCronSync, webhooks: webhooks, integrationOneLevelFetching: integrationOneLevelFetching, integrationSearchListener: integrationSearchListener, integrationPagination: integrationPagination, filtering: filtering, integrationButtonMenuItems: integrationButtonMenuItems, crowdinButtonMenuItems: crowdinButtonMenuItems })] }), jsxRuntimeExports.jsx("crowdin-toasts", {}), jsxRuntimeExports.jsx("crowdin-async-progress", { ref: asyncProgressRef, cancelAsyncAction: "" }), jsxRuntimeExports.jsx(SubscriptionModal, { modalRef: subscriptionModal, subscriptionLink: subscriptionLink, name: name, onLogout: integrationLogout }), jsxRuntimeExports.jsx(PermissionsModal, { modalRef: permissionsModalRef, usersSelectRef: permissions.usersSelectRef, isLoading: permissions.isLoading, permissionUserOptions: permissions.permissionUserOptions, isConfirmVisible: permissions.isPermissionsConfirmVisible, permissionsSummary: permissions.permissionsSummary, hasOrganization: hasOrganization, zenModeUrl: zenModeUrl, onSave: permissions.inviteUsers }), excludedTargetLanguages && (jsxRuntimeExports.jsx(ExcludedLanguagesModal, { modalRef: syncOps.languageModalRef, languageSelectRef: syncOps.languageSelectRef, languageModalState: syncOps.languageModalState, onUpdateTargetLanguages: syncOps.updateCrowdinFilesTargetLanguages, onSyncToCrowdin: syncOps.uploadFilesToCrowdinWithExcludedLanguages })), infoModal && jsxRuntimeExports.jsx(InfoModal, { modalRef: infoModalRef, infoModal: infoModal }), configurationFields && (jsxRuntimeExports.jsx(SettingsModal, { modalRef: settingsModalRef, isLoading: settings.isLoading, configurationFields: configurationFields, isSaveDisabled: settings.isSettingsSaveDisabled, settingsFieldChange: settings.settingsFieldChange, registerSettingsField: settings.registerSettingsField, onSave: settings.saveSettings })), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsx(ScheduleModal, { modalRef: scheduleModalRef, selectedFilesCheckboxRef: schedule.selectedFilesCheckboxRef, allFolderFilesCheckboxRef: schedule.allFolderFilesCheckboxRef, newFilesCheckboxRef: schedule.newFilesCheckboxRef, scheduleModalState: schedule.scheduleModalState, isSaveDisabled: schedule.isScheduleSaveDisabled, onChangeOptions: schedule.onChangeAutoSynchronizationOptions, onSave: schedule.saveScheduleSync })), jsxRuntimeExports.jsx(UserErrorDetailModal, { modalRef: userErrorDetailModalRef, selectedUserError: selectedUserError })] }));
   };
 
   initializeCrowdinIframeContext();