@crowdin/app-project-module 2.2.0 → 2.4.0

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

@@ -518,80 +518,1140 @@
 
   var clientExports = requireClient();
 
+  /// <reference path="../types.d.ts" />
+  const postPromises = {};
+  let isInitialized = false;
+  let origin = null;
+  let clientId = null;
+  let restParams = '';
+  function parseJson(value) {
+      try {
+          return JSON.parse(value);
+      }
+      catch {
+          return undefined;
+      }
+  }
+  function handleMessage(event) {
+      if (event.origin !== window.location.origin || typeof event.data !== 'string') {
+          return;
+      }
+      const eventData = parseJson(event.data);
+      if (!(eventData === null || eventData === void 0 ? void 0 : eventData.uid)) {
+          return;
+      }
+      const postPromise = postPromises[eventData.uid];
+      if (postPromise) {
+          delete postPromises[eventData.uid];
+          if (postPromise.timer) {
+              clearTimeout(postPromise.timer);
+          }
+          postPromise.resolve(eventData.data);
+      }
+  }
+  function initializeCrowdinIframeContext() {
+      if (isInitialized) {
+          return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      origin = urlParams.get('origin');
+      clientId = urlParams.get('client_id');
+      restParams = window.location.search;
+      JSON.parse(window.name);
+      window.addEventListener('message', handleMessage);
+      isInitialized = true;
+  }
+  function ensureInitialized() {
+      if (!isInitialized) {
+          initializeCrowdinIframeContext();
+      }
+  }
+  function showToast(message) {
+      if (message) {
+          const toasts = document.querySelector('crowdin-toasts');
+          if (toasts && toasts.pushToasts) {
+              toasts.pushToasts([message]);
+          }
+      }
+  }
+  function reloadLocation() {
+      ensureInitialized();
+      window.location.href =
+          window.location.protocol + '//' + window.location.host + window.location.pathname + restParams;
+  }
+  function catchRejection(e, message) {
+      var _a;
+      // session expired
+      if (e.code && e.code === 401) {
+          reloadLocation();
+          return;
+      }
+      // payment required
+      if (e.code && e.code === 402 && ((_a = window.app) === null || _a === void 0 ? void 0 : _a.subscriptionModal.current)) {
+          if (window.app.subscriptionLink) {
+              window.app.subscriptionLink.current = e.message || message;
+          }
+          window.app.openModal(window.app.subscriptionModal.current);
+          return;
+      }
+      showToast(e.message || message);
+  }
+  function checkResponse(response) {
+      return new Promise((resolve, reject) => {
+          if (response.status === 204) {
+              return resolve(undefined);
+          }
+          response
+              .json()
+              .then((res) => {
+              if (![200, 201, 202, 304].includes(response.status)) {
+                  reject(res);
+              }
+              else {
+                  if (res.message) {
+                      setTimeout(() => showToast(res.message), 100);
+                  }
+                  resolve(res);
+              }
+          })
+              .catch((e) => {
+              reject(e);
+          });
+      });
+  }
+  function checkOrigin() {
+      ensureInitialized();
+      return new Promise((resolve) => {
+          AP.getJwtToken((jwtToken) => {
+              restParams = `?origin=${origin}&client_id=${clientId}&jwtToken=${jwtToken}`;
+              resolve(restParams);
+          });
+      });
+  }
+
+  function readPageProps() {
+      const element = document.getElementById('__PAGE_PROPS__');
+      return JSON.parse((element === null || element === void 0 ? void 0 : element.textContent) || '{}');
+  }
+
   var reactExports = requireReact();
 
-  const renderConfigField = (field, settingsFieldChange, 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 dependencyShowClassName = 'dependency-show';
+  const events = ['input', 'change'];
+  function useFieldDependencies(refreshKey) {
+      const cleanupRef = reactExports.useRef(() => undefined);
+      const refreshDependencies = reactExports.useCallback(() => {
+          cleanupRef.current();
+          cleanupRef.current = initializeFieldDependencies();
+      }, []);
+      reactExports.useEffect(() => {
+          refreshDependencies();
+          return () => {
+              cleanupRef.current();
+              cleanupRef.current = () => undefined;
+          };
+      }, [refreshDependencies, refreshKey]);
+      return refreshDependencies;
+  }
+  function initializeFieldDependencies(root = document) {
+      const cleanupCallbacks = [];
+      const fields = Array.from(root.querySelectorAll('[data-dependency]'));
+      fields.forEach((field) => {
+          const dependency = field.dataset.dependency;
+          if (!dependency) {
+              return;
+          }
+          try {
+              const conditions = JSON.parse(dependency);
+              applyDependencyState(field, conditions);
+              cleanupCallbacks.push(...bindDependencyListeners(field, conditions));
+          }
+          catch (e) {
+              console.error('[Dependencies] Error parsing conditions for field:', field, e);
+          }
+      });
+      return () => {
+          cleanupCallbacks.forEach((cleanup) => cleanup());
+      };
+  }
+  function bindDependencyListeners(field, conditions) {
+      const cleanupCallbacks = [];
+      conditions.forEach((rules) => {
+          Object.keys(rules).forEach((selector) => {
+              const element = document.querySelector(selector);
+              if (!element) {
+                  return;
+              }
+              events.forEach((event) => {
+                  const listener = () => applyDependencyState(field, conditions);
+                  element.addEventListener(event, listener);
+                  cleanupCallbacks.push(() => element.removeEventListener(event, listener));
+              });
+          });
+      });
+      return cleanupCallbacks;
+  }
+  function applyDependencyState(field, conditions) {
+      if (checkConditions(conditions)) {
+          field.classList.add(dependencyShowClassName);
       }
-      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 } : {}),
+      else {
+          field.classList.remove(dependencyShowClassName);
+      }
+  }
+  function checkConditions(conditions) {
+      return conditions.every((conditionObj) => {
+          const selectors = Object.keys(conditionObj);
+          return selectors.every((selector) => evaluateDependencyRule(selector, conditionObj[selector]));
+      });
+  }
+  function evaluateDependencyRule(selector, condition) {
+      const type = condition.type;
+      const currentValue = getValue(selector);
+      const checkValue = typeof condition.value === 'undefined' ? false : condition.value;
+      let minValue = typeof condition.min === 'undefined' ? false : Number.parseInt(String(condition.min), 10);
+      let maxValue = typeof condition.max === 'undefined' ? false : Number.parseInt(String(condition.max), 10);
+      const allowEmpty = typeof condition.empty === 'undefined' ? false : condition.empty;
+      const isEmpty = !allowEmpty && currentValue.length < 1;
+      const likeSelector = typeof condition.like === 'undefined' ? false : condition.like;
+      const likeSelectorValue = getValue(likeSelector);
+      const regExpPattern = typeof condition.pattern === 'undefined' ? false : condition.pattern;
+      const regExpModifier = typeof condition.modifier === 'undefined' ? 'gi' : condition.modifier;
+      const sign = typeof condition.sign === 'undefined' ? false : condition.sign;
+      const strict = typeof condition.strict === 'undefined' ? false : condition.strict;
+      const emptyTypes = ['empty', 'blank'];
+      const notEmptyTypes = ['!empty', 'notEmpty', 'not-empty', 'notempty'];
+      const equalTypes = ['equal', '=', '==', '==='];
+      const notEqualTypes = ['!equal', '!=', '!==', '!===', 'notEqual', 'not-equal', 'notequal'];
+      const regularExpressionTypes = ['regexp', 'exp', 'expression', 'match'];
+      if (type && emptyTypes.includes(type)) {
+          return currentValue.length < 1;
+      }
+      if (type && notEmptyTypes.includes(type)) {
+          return currentValue.length > 0;
+      }
+      if (type && equalTypes.includes(type)) {
+          if (isEmpty) {
+              return false;
+          }
+          if (likeSelector) {
+              return strict
+                  ? likeSelectorValue.every((value) => currentValue.includes(value))
+                  : likeSelectorValue.some((value) => currentValue.includes(value));
+          }
+          if (strict) {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.every((value) => currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return currentValue.includes(checkValue);
+              }
+          }
+          else {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.some((value) => currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return currentValue.includes(checkValue);
+              }
+          }
+      }
+      if (type && notEqualTypes.includes(type)) {
+          if (isEmpty) {
+              return false;
+          }
+          if (likeSelector) {
+              return strict
+                  ? likeSelectorValue.every((value) => !currentValue.includes(value))
+                  : likeSelectorValue.some((value) => !currentValue.includes(value));
+          }
+          if (strict) {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.every((value) => !currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return !currentValue.includes(checkValue);
+              }
+          }
+          else {
+              if (checkValue && Array.isArray(checkValue)) {
+                  return checkValue.some((value) => !currentValue.includes(value));
+              }
+              if (checkValue && !Array.isArray(checkValue)) {
+                  return !currentValue.includes(checkValue);
+              }
+          }
+      }
+      if (type && regularExpressionTypes.includes(type) && regExpPattern) {
+          if (isEmpty) {
+              return false;
+          }
+          const exp = new RegExp(regExpPattern, regExpModifier);
+          return currentValue.every((value) => exp.test(String(value)));
+      }
+      if (type === 'length') {
+          if (isEmpty) {
+              return false;
+          }
+          if (checkValue && Array.isArray(checkValue)) {
+              minValue = Number.parseInt(String(checkValue[0]), 10);
+              maxValue = typeof checkValue[1] === 'undefined' ? false : Number.parseInt(String(checkValue[1]), 10);
+          }
+          if (checkValue && !Array.isArray(checkValue)) {
+              minValue = Number.parseInt(String(checkValue), 10);
+              maxValue = false;
+          }
+          const minBoundary = minValue === false ? 0 : minValue;
+          const maxBoundary = maxValue === false ? 0 : maxValue;
+          return currentValue.every((value) => {
+              const valueLength = String(value).length;
+              if (!maxValue) {
+                  return valueLength >= minBoundary;
+              }
+              if (!minValue) {
+                  return valueLength <= maxBoundary;
+              }
+              return valueLength >= minBoundary && valueLength <= maxBoundary;
+          });
+      }
+      if (type === 'range') {
+          if (isEmpty) {
+              return false;
+          }
+          if (checkValue && Array.isArray(checkValue)) {
+              minValue = Number.parseInt(String(checkValue[0]), 10);
+              maxValue = typeof checkValue[1] === 'undefined' ? false : Number.parseInt(String(checkValue[1]), 10);
+          }
+          const minBoundary = minValue === false ? 0 : minValue;
+          const maxBoundary = maxValue === false ? 0 : maxValue;
+          return currentValue.every((value) => {
+              const numericValue = Number.parseInt(String(value), 10);
+              if (!maxValue) {
+                  return numericValue > minBoundary;
+              }
+              if (!minValue) {
+                  return numericValue < maxBoundary;
+              }
+              return numericValue > minBoundary && numericValue < maxBoundary;
+          });
+      }
+      if (type === 'compare' && sign && checkValue) {
+          if (isEmpty) {
+              return false;
+          }
+          const numericCheckValue = Number.parseInt(String(checkValue), 10);
+          switch (sign) {
+              case '<':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) < numericCheckValue);
+              case '<=':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) <= numericCheckValue);
+              case '>':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) > numericCheckValue);
+              case '>=':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) >= numericCheckValue);
+              case '=':
+              case '==':
+                  return currentValue.every((value) => Number.parseInt(String(value), 10) === numericCheckValue);
+          }
+      }
+      return false;
+  }
+  function getValue(selector) {
+      const values = [];
+      if (selector && document.querySelector(selector)) {
+          const inputType = document.querySelector(selector).tagName.toLowerCase();
+          let currentSelector = selector;
+          if (inputType === 'crowdin-select') {
+              currentSelector = `${selector} option:checked`;
+          }
+          if (inputType === 'crowdin-checkbox') {
+              currentSelector = `${selector}:not(input)`;
+          }
+          document.querySelectorAll(currentSelector).forEach((element) => {
+              const value = element.value || element.checked;
+              values.push(value);
+          });
+      }
+      return values.filter((value) => value !== '');
+  }
+
+  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,
+      showAllFolderFiles: false,
+      newFiles: false,
+      newFilesClearSelection: false,
+      selectedFiles: true,
+      allFolderFiles: false,
+  });
+  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;
+      }
+      modal.style.display = 'block';
+      modal.open();
+  }
+  function closeModal(modal) {
+      if (!modal) {
+          return;
+      }
+      modal.style.display = 'none';
+      modal.close();
+  }
+
+  /// <reference path="../../../../ui/types.d.ts" />
+  function usePermissions({ userId, hasOrganization, permissionsModalRef }) {
+      const usersSelectRef = reactExports.useRef(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);
+      reactExports.useEffect(() => {
+          if (usersSelectRef.current) {
+              usersSelectRef.current.value = permissionsSelectedValue;
+          }
+      }, [permissionUserOptions, permissionsSelectedValue]);
+      // crowdin-users-select doesn't trigger onChange reliably, using native event listener instead
+      reactExports.useEffect(() => {
+          const selectElement = usersSelectRef.current;
+          if (!selectElement) {
+              return;
+          }
+          const handleChange = () => checkUsers();
+          selectElement.addEventListener('change', handleChange);
+          return () => selectElement.removeEventListener('change', handleChange);
+      }, []);
+      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 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));
+          }
+          catch (e) {
+              catchRejection(e, "Can't fetch users");
+          }
+          finally {
+              setTimeout(() => setIsLoading(false), 500);
+          }
+      }
+      async function checkUsers() {
+          setIsLoading(true);
+          const select = usersSelectRef.current;
+          if (select.value === '[]') {
+              hideConfirmUsersBlock();
+              setTimeout(() => setIsLoading(false), 500);
+              return;
+          }
+          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,
+              });
+          }
+          catch (e) {
+              catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users");
+          }
+          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;
+              }
+              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;
+                  }
+                  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 {
+                  setTimeout(() => setIsLoading(false), 500);
+              }
+          });
+      }
+      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,
+                      },
+                  }
+                  : {}),
+              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),
+              },
+          });
+      }
+      return {
+          usersSelectRef,
+          isLoading,
+          permissionUserOptions,
+          permissionsSelectedValue,
+          permissionsSummary,
+          isPermissionsConfirmVisible,
+          showPermissionsDialog,
+          inviteUsers,
       };
-      switch (field.type) {
-          case 'checkbox':
-              return (jsxRuntimeExports.jsx("crowdin-checkbox", { ...commonProps, value: "false", "use-switch": true, ...(field.defaultValue === true ? { checked: String(field.defaultValue) } : {}), onChange: settingsFieldChange }));
-          case 'select':
-              return (jsxRuntimeExports.jsx("crowdin-select", { ...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", { ...commonProps, "with-fixed-height": true, value: field.defaultValue || '', onChange: settingsFieldChange }));
-          case 'textarea':
-              return (jsxRuntimeExports.jsx("crowdin-textarea", { ...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;
+  }
+
+  /// <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;
+          }
+          const listeners = {
+              integrationScheduleSync: setIntegrationScheduleSync,
+              crowdinScheduleSync: setCrowdinScheduleSync,
+              crowdinDisableSync: disableCrowdinSync,
+              integrationDisableSync: disableIntegrationSync,
+          };
+          for (const [event, handler] of Object.entries(listeners)) {
+              document.body.addEventListener(event, handler);
+          }
+          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 {
+              checkbox.removeAttribute('hidden');
+          }
+          if (clearSelection) {
+              checkbox.setAttribute('clear-selection', '');
+          }
+          else {
+              checkbox.removeAttribute('clear-selection');
+          }
+      }
+      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 {
+              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));
+          }
+          return found !== undefined;
+      }
+      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 }))
+              : [];
+      }
+      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 (!found && newFileStatus === 'checked') {
+                  newFileStatus = 'clear-selection';
+                  break;
+              }
+              else {
+                  newFileStatus = 'unChecked';
+              }
+          }
+          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 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 (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');
+                  }
+              }
+          }
+          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 {
+              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();
+          }
+          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');
+              }
+          }
+      }
+      async function setCrowdinScheduleSync(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.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');
+      }
+      async function disableIntegrationSync(e) {
+          if (e.detail.length === 0) {
+              showToast('Select templates which will be pushed to Crowdin');
+              return;
+          }
+          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 disableCrowdinSync(e) {
+          if (e.detail.length === 0) {
+              showToast('Select templates which will be pushed to Crowdin');
+              return;
+          }
+          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');
+      }
+      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 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];
+          }
+      }
+      function registerSettingsField(key) {
+          return (element) => {
+              if (!key) {
+                  return;
+              }
+              if (element) {
+                  settingsFieldRefs.current[key] = element;
+              }
+              else {
+                  delete settingsFieldRefs.current[key];
+              }
+          };
+      }
+      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 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();
+                              }
+                          }
+                      },
+                  });
+                  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]);
+                      }
+                  });
+                  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) {
+                  return;
+              }
+              setTimeout(() => setIsLoading(false), 500);
+              setIsSettingsSaveDisabled(false);
+              if (!isValidationError) {
+                  closeModal(settingsModalRef.current);
+                  if (reloadOnConfigSave) {
+                      getIntegrationData({ hardReload: true });
+                      getCrowdinData();
+                  }
+              }
+          }
       }
-  };
-  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',
+      return {
+          isLoading,
+          isSettingsSaveDisabled,
+          fillSettingsForm,
+          saveSettings,
+          registerSettingsField,
+          settingsFieldChange,
       };
-      const JOB_STATUS = {
-          created: 'created',
-          inProgress: 'inProgress',
-          failed: 'failed',
-          canceled: 'canceled',
-          finished: 'finished',
-      };
-      const silentJobs = [JOB_TYPE.integrationSettingsSave];
-      const appComponent = reactExports.useRef(null);
-      const subscriptionModal = reactExports.useRef(null);
-      const languageModal = reactExports.useRef(null);
-      const usersSelectRef = reactExports.useRef(null);
+  }
+
+  /// <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 syncData = reactExports.useRef(null);
-      const subscriptionLink = 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(() => {
-          // Event listeners
           const listeners = {
               refreshFilesList: (e) => {
                   if (e.detail.refreshIntegration) {
@@ -616,34 +1676,20 @@
               cancelAsyncAction: (e) => {
                   cancelJob(e.detail);
               },
-              keydown: (event) => {
-                  if (event.keyCode === 27) {
-                      const permissions = document.getElementById('permissions-modal');
-                      // not sure where we get users from here
-                      // @ts-ignore
-                      if (users) {
-                          closeModal(permissions);
-                      }
-                      const infoModalEl = document.getElementById('info-modal');
-                      if (infoModalEl) {
-                          closeModal(infoModalEl);
-                      }
-                      const settingsModal = document.getElementById('settings-modal');
-                      if (settingsModal) {
-                          closeModal(settingsModal);
-                      }
-                      if (languageModal.current) {
-                          closeModal(languageModal.current);
-                      }
-                  }
-              },
               loadMoreClick: async (e) => {
+                  var _a;
                   const loadMoreFile = e.detail;
-                  const fileComponent = document.getElementById('integration-files');
+                  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 () => {
+                  try {
+                      await getIntegrationData({ parentId: e.detail.parent_id, paginationData: e.detail.pagination });
+                  }
+                  finally {
                       await fileComponent.setLoadMoreLoading(loadMoreFile.id, false);
-                  });
+                  }
               },
           };
           if (integrationSearchListener) {
@@ -666,64 +1712,18 @@
                   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();
-          }
-          if (notice) {
-              const noticeEl = document.getElementById('notice');
-              checkAlert(noticeEl, 'notice');
-          }
           return () => {
               for (const [event, handler] of Object.entries(listeners)) {
                   document.body.removeEventListener(event, handler);
               }
           };
       }, []);
-      // 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);
-              };
-          }
-      }, []);
-      function integrationLogout() {
-          checkOrigin()
-              .then((queryParams) => fetch(`api/logout${queryParams}`, { method: 'POST' }))
-              .then(checkResponse)
-              .then(reloadLocation)
-              .then(() => localStorage.removeItem(`revised_${name}`))
-              .catch((e) => catchRejection(e, e.error || 'Looks like you are not logged in'));
-      }
       function transformCrowdinItemToTree(e) {
           const item = {
               parent_id: e.parentId ? e.parentId : '0',
@@ -736,22 +1736,21 @@
           };
           if (e.type) {
               item.type = e.type;
-              item.node_type = fileType;
+              item.node_type = FILE_TYPE;
               item.failed = e.failed;
               item.excludedTargetLanguages = e.excludedTargetLanguages;
           }
           else {
-              item.node_type = e.nodeType || folderType;
+              item.node_type = e.nodeType || FOLDER_TYPE;
           }
           return item;
       }
-      function getCrowdinData() {
-          var _a;
+      async function getCrowdinData() {
+          var _a, _b, _c, _d, _f;
           (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setAttribute('is-crowdin-loading', 'true');
-          let promise;
-          if (progressiveCrowdinFilesLoading) {
-              promise = checkOrigin()
-                  .then((restParams) => {
+          try {
+              const restParams = await checkOrigin();
+              if (progressiveCrowdinFilesLoading) {
                   const dirPromise = fetch('api/crowdin/files' + restParams + '&mode=directories')
                       .then(checkResponse)
                       .then((directories) => {
@@ -761,15 +1760,14 @@
                       (_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 [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];
-                  (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.setCrowdinFilesData(crowdinData.current);
+                  (_b = appComponent.current) === null || _b === void 0 ? void 0 : _b.setCrowdinFilesData(crowdinData.current);
                   project.current = projectData;
                   const languagesSorted = project.current.targetLanguages
                       .map((language) => ({
@@ -778,22 +1776,17 @@
                       ...language,
                   }))
                       .sort((a, b) => a.name.localeCompare(b.name));
-                  if (project.current.inContext && ((_b = config.current) === null || _b === void 0 ? void 0 : _b.inContext)) {
+                  if (project.current.inContext && ((_c = config.current) === null || _c === void 0 ? void 0 : _c.inContext)) {
                       languagesSorted.push({ ...project.current.inContextPseudoLanguage, inContext: true });
                   }
                   setLanguagesForTranslation(languagesSorted);
-                  (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.setCrowdinLanguagesData(languagesSorted);
-              });
-          }
-          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;
+                  (_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);
@@ -805,37 +1798,35 @@
                       ...language,
                   }))
                       .sort((a, b) => a.name.localeCompare(b.name));
-                  if (project.current.inContext && ((_a = config.current) === null || _a === void 0 ? void 0 : _a.inContext)) {
+                  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);
-              });
-          }
-          promise
-              .then(() => {
+              }
               if (withCronSync || webhooks) {
-                  return getSyncSettings('crowdin');
+                  await getSyncSettings('crowdin');
               }
-          })
-              .catch((e) => catchRejection(e, "Can't fetch Crowdin data"))
-              .finally(() => appComponent.current.setAttribute('is-crowdin-loading', false));
+          }
+          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) {
+      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;
-          return checkOrigin()
-              .then((restParams) => {
+          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))}`;
               }
-              return fetch(url);
-          })
-              .then(checkResponse)
-              .then(async (res) => {
+              const res = await checkResponse(await fetch(url));
               const files = res.data;
               const stopPagination = res.stopPagination;
               const tree = files.map((e) => {
@@ -855,10 +1846,10 @@
                       item.notSynced = e.notSynced;
                       item.synced = e.synced;
                       item.type = e.type;
-                      item.node_type = fileType;
+                      item.node_type = FILE_TYPE;
                   }
                   else {
-                      item.node_type = e.nodeType || folderType;
+                      item.node_type = e.nodeType || FOLDER_TYPE;
                   }
                   return item;
               });
@@ -870,17 +1861,16 @@
                   appComponent.current.setIntegrationFilesData(tree);
               }
               else if (tree.length) {
-                  appComponent.current.pushIntegrationFilesData(tree).then(() => {
+                  appComponent.current.pushIntegrationFilesData(tree).then(async () => {
                       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);
-                              }
-                          });
+                          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);
+                          }
                       }
                   });
               }
@@ -912,18 +1902,18 @@
                   }
                   const folderItems = files.filter(isFolder);
                   if (folderItems.length === 0) {
-                      return Promise.resolve();
+                      return;
                   }
                   folderItems.forEach((folder) => recursionStateLocal.openedFolders.add(folder.id));
-                  const currentOpenedFolders = await appComponent.current.getIntegrationOpenedFolders();
+                  const openedFoldersNow = await appComponent.current.getIntegrationOpenedFolders();
                   appComponent.current.setIntegrationOpenedFolders([
-                      ...currentOpenedFolders,
+                      ...openedFoldersNow,
                       ...recursionStateLocal.openedFolders,
                   ]);
-                  const recursivePromises = folderItems.map(async (folder) => {
+                  await Promise.all(folderItems.map(async (folder) => {
                       recursionStateLocal.calls++;
                       try {
-                          return getIntegrationData({ parentId: folder.id, recursion: true }, recursionState);
+                          await getIntegrationData({ parentId: folder.id, recursion: true }, recursionState);
                       }
                       finally {
                           recursionStateLocal.calls--;
@@ -931,24 +1921,23 @@
                               recursionStateLocal.setLoading(false);
                           }
                       }
-                  });
-                  return Promise.all(recursivePromises);
+                  }));
               }
-          })
-              .then(() => {
               if (withCronSync || webhooks) {
-                  getSyncSettings('integration');
+                  await getSyncSettings('integration');
               }
-          })
-              .catch((e) => catchRejection(e, `Can't fetch ${name} templates`))
-              .finally(() => {
+          }
+          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;
@@ -965,10 +1954,7 @@
               if (currentScheduleDisabled === nextScheduleDisabled) {
                   return null;
               }
-              return {
-                  ...item,
-                  scheduleDisabled: nextScheduleDisabled,
-              };
+              return { ...item, scheduleDisabled: nextScheduleDisabled };
           })
               .filter(Boolean);
           if (provider === 'crowdin') {
@@ -996,1176 +1982,695 @@
       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);
-                  }
-                  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"));
-      }
-      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;
-          }
-          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 {
-              files = event.detail;
-          }
-          if (languages.length > 0) {
-              forcePushSources = true;
-          }
-          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;
-          }
-          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 {
-              req = files
-                  .filter((f) => f.node_type !== folderType)
-                  .map((f) => ({
-                  name: f.name,
-                  id: f.id,
-                  type: f.type,
-                  parentId: f.parent_id,
-                  isUpdated: f.isUpdated,
-              }));
-          }
-          checkOrigin()
-              .then((restParams) => fetch(`api/crowdin/update${restParams}&uploadTranslations=${uploadTranslations}&languages=${languages}&forcePushSources=${forcePushSources}`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify(req),
-          }))
-              .then(checkResponse)
-              .then((res) => {
-              checkJob({
-                  jobId: res === 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'));
-      }
-      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 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;
+              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.');
           }
-          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 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 ([JOB_STATUS.created, JOB_STATUS.inProgress].includes(job.status) && job.progress < 100) {
-                  setTimeout(() => {
-                      checkJob({ jobId, jobType, onSuccess, onError, onFinally });
-                  }, asyncProgress.checkInterval);
-                  return;
               }
               else {
-                  if (onSuccess) {
-                      onSuccess(job);
+                  if (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) {
+                      appComponent.current.setIntegrationScheduleSync(res, true, true);
+                  }
+                  else {
+                      appComponent.current.setIntegrationScheduleSync(res);
                   }
               }
-              if (onFinally) {
-                  onFinally(job);
-              }
-          })
-              .catch((e) => {
-              if (onFinally) {
-                  onFinally();
-              }
-              if (!silentJobs.find((type) => type === jobType)) {
-                  pushJobs([
-                      {
-                          id: jobId,
-                          isFailed: true,
-                      },
-                  ]);
-              }
-              showToast('Sync status check failed');
-          });
+              await applyAutoSyncPausedMarkers(provider, res);
+          }
+          catch (e) {
+              catchRejection(e, "Can't fetch file progress");
+          }
       }
-      function pushJobs(jobs) {
-          const el = document.querySelector('crowdin-async-progress');
-          if (el && el.pushJobs) {
-              el.pushJobs(jobs);
-              jobs.forEach((job) => (asyncJobs.current[job.id] = job));
+      async function getFileProgress(fileId) {
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch(`api/crowdin/file-progress/${fileId}` + restParams));
+              appComponent.current.addCrowdinFileProgress(res);
           }
-          else {
-              setTimeout(() => {
-                  pushJobs(jobs);
-              }, 300);
+          catch (e) {
+              catchRejection(e, "Can't fetch file progress");
           }
       }
-      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') {
+      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;
-              forcePushTranslations = true;
+              uploadTranslations = true;
+              forcePushSources = true;
           }
           else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.action) === 'excludedTargetLanguages') {
-              crowdinFilesToUpdateTargetLanguages.current = event.detail.files;
-              openLanguageModalForCrowdinFiles();
+              fileToSync.current = event.detail.files;
+              openLanguageModal();
               return;
           }
-          else if (((_c = event.detail) === null || _c === void 0 ? void 0 : _c.action) === 'syncSourcesToCrowdin') {
-              syncToCrowdinFromCrowdinFiles(event.detail.files, false);
-              return;
+          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) === 'syncTranslationsToCrowdin') {
-              syncToCrowdinFromCrowdinFiles(event.detail.files, true);
+          else if (((_d = event.detail) === null || _d === void 0 ? void 0 : _d.action) === 'syncTranslationsToIntegration') {
+              syncTranslationsToIntegration(event.detail.files);
               return;
           }
           else {
               files = event.detail;
           }
-          if (Object.keys(event.detail).length === 0 || !event.detail) {
-              showToast('Select files which will be uploaded to ${name}');
-              return;
+          if (languages.length > 0) {
+              forcePushSources = true;
           }
-          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');
+          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);
-          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"));
-      }
-      function syncTranslationsToIntegration(files) {
-          if (!files || files.length === 0) {
-              showToast('Select files to sync');
-              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() {
-          openModal(languageModal.current);
-      }
-      function openLanguageModalForCrowdinFiles() {
-          const languages = project.current.targetLanguages || [];
-          const buttonHtml = `
-        <crowdin-button id="update-crowdin-target-languages" outlined">
-            Update Target Languages
-        </crowdin-button>
-      `;
-          setTimeout(() => {
-              const btn = document.querySelector('#update-crowdin-target-languages');
-              if (btn) {
-                  btn.addEventListener('click', () => updateCrowdinFilesTargetLanguages());
-              }
-          }, 0);
-          setLanguagesForTranslation(languages, buttonHtml);
-          openModal(languageModal.current);
-      }
-      async function uploadFilesToCrowdinWithExcludedLanguages() {
-          const languageSelect = document.querySelector('#language-select');
-          const selectedLanguages = await languageSelect.getValue();
-          closeModal(languageModal.current);
-          uploadFilesToCrowdin({ detail: fileToSync.current }, selectedLanguages);
-      }
-      async function updateCrowdinFilesTargetLanguages() {
-          const languageSelect = document.querySelector('#language-select');
-          const selectedLanguages = await languageSelect.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;
+          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,
+              }));
           }
-          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"));
-      }
-      async function setLanguagesForTranslation(languages, buttonHtml) {
-          const defaultButtonHtml = `
-        <crowdin-button id="upload-exclude-languages" outlined">
-            <div class="integration-icon-button">
-              <span>Sync to</span>
-              <crowdin-logo is-icon/>
-            </div>
-        </crowdin-button>
-      `;
-          setTimeout(() => {
-              const btn = document.querySelector('#upload-exclude-languages');
-              if (btn) {
-                  btn.addEventListener('click', () => uploadFilesToCrowdinWithExcludedLanguages());
-              }
-          }, 0);
-          const languageIds = languages.map((language) => language.id);
-          if (languageModal.current) {
-              let modalContent = `<div>
-        <crowdin-select
-          is-multi
-          is-searchable
-          is-position-fixed
-          close-on-select="false"
-          name="languages"
-          id="language-select"
-          label="Languages"
-        >
-        `;
-              for (const language of languages) {
-                  modalContent += `<option value="${language.id}">${language.name}</option>`;
-              }
-              modalContent += `
-        </crowdin-select>
-        </div>
-        <div slot="footer">
-            ${buttonHtml || defaultButtonHtml}
-        </div>
-        `;
-              languageModal.current.innerHTML = modalContent;
-              const select = document.querySelector('#language-select');
-              await select.setValue(languageIds);
+          else {
+              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,
+              }));
           }
-      }
-      function hideConfirmUsersBlock() {
-          const confirmUsersBlock = document.querySelector('.confirm-users-block');
-          confirmUsersBlock.classList.add('hidden');
-          const permissionsModal = document.getElementById('permissions-modal');
-          permissionsModal.setAttribute('body-overflow-unset', true);
-      }
-      function getUserFullName(user) {
-          if (user.full_name) {
-              return user.full_name;
+          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 });
           }
-          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() {
-          const permissions = document.getElementById('permissions-modal');
-          hideConfirmUsersBlock();
-          openModal(permissions);
-          setLoader('#permissions-modal');
-          const select = document.getElementById('users');
-          select.value = '[]';
-          Promise.all([
-              new Promise((resolve) => {
-                  checkOrigin()
-                      .then((restParams) => fetch('api/users' + restParams))
-                      .then(checkResponse)
-                      .then((res) => {
-                      resolve(JSON.stringify(res.data.managers));
-                  });
-              }),
-              new Promise((resolve) => {
-                  AP.getUsers((res) => {
-                      const users = Object.values(res).filter((user) => user.id !== Number(userId));
-                      resolve(users);
-                  });
-              }),
-          ])
-              .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));
-              select.innerHTML = availableUsers
-                  .map((user) => `<option value="${user.id}">${sanitizeHTML(getUserFullName(user))}</option>`)
-                  .join('');
-              select.value = JSON.stringify(filteredManagers);
-          })
-              .catch((e) => catchRejection(e, "Can't fetch users"))
-              .finally(() => unsetLoader('#permissions-modal'));
-      }
-      function showConfirmUsersBlock() {
-          const confirmUsersBlock = document.querySelector('.confirm-users-block');
-          confirmUsersBlock.classList.remove('hidden');
-          const permissionsModal = document.getElementById('permissions-modal');
-          permissionsModal.removeAttribute('body-overflow-unset');
-      }
-      function checkUsers() {
-          setLoader('#permissions-modal');
-          const select = document.getElementById('users');
-          if (select.value === '[]') {
-              hideConfirmUsersBlock();
-              unsetLoader('#permissions-modal');
-              return;
+          catch (e) {
+              catchRejection(e, "Can't upload templates to Crowdin");
           }
-          const users = JSON.parse(select.value);
-          const user_ids = users.filter((id) => parseInt(id));
-          const emails = users.filter((id) => !parseInt(id));
-          const params = { user_ids, emails };
-          Promise.all([
-              new Promise((resolve) => {
-                  checkOrigin()
-                      .then((restParams) => fetch('api/users' + restParams))
-                      .then(checkResponse)
-                      .then((usersResponse) => {
-                      resolve(usersResponse.data.managers);
-                  });
-              }),
-              new Promise((resolve) => {
-                  AP.validateUsers(params, (res) => {
-                      resolve(res.data);
-                  });
-              }),
-              new Promise((resolve) => {
-                  AP.getUsers((res) => {
-                      resolve(res);
-                  });
-              }),
-          ])
-              .then(([appManagers, checkUsersResponse, allUsers]) => {
-              const newUserEmails = checkUsersResponse.newUserEmails.map((email) => ({ name: email }));
-              const newProjectManagers = [
-                  ...newUserEmails,
-                  ...checkUsersResponse.newProjectManagers.map((user) => ({
-                      name: getUserFullName(user),
-                  })),
-              ];
-              const newApplicationAccessUsers = [
-                  ...newUserEmails,
-                  ...checkUsersResponse.newApplicationAccessUsers.map((user) => ({
-                      name: getUserFullName(user),
-                  })),
-              ];
-              const newApplicationManagers = [
-                  ...newUserEmails,
-                  ...Object.values(allUsers)
-                      .filter((user) => users.some((id) => +id === user.id) && !appManagers.some((id) => +id === user.id))
-                      .map((user) => ({ name: getUserFullName(user) })),
-              ];
-              prepareUsersConfirmBlock({
-                  ...checkUsersResponse,
-                  newUserEmails,
-                  newProjectManagers,
-                  newApplicationAccessUsers,
-                  newApplicationManagers,
-              });
-          })
-              .catch((e) => catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users"))
-              .finally(() => unsetLoader('#permissions-modal'));
       }
-      function inviteUsers() {
-          setLoader('#permissions-modal');
-          const select = document.getElementById('users');
-          const users = JSON.parse(select.value);
-          const user_ids = users.filter((id) => parseInt(id));
-          const emails = users.filter((id) => !parseInt(id));
-          const params = { user_ids, emails };
-          AP.inviteUsers(params, (res) => {
-              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');
+      async function getActiveJobs() {
+          try {
+              const restParams = await checkOrigin();
+              const jobs = await checkResponse(await fetch(`api/jobs${restParams}`));
+              if (!Array.isArray(jobs)) {
                   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) => {
-                  const permissions = document.getElementById('permissions-modal');
-                  if (!res.success) {
-                      catchRejection(res, (res === null || res === void 0 ? void 0 : res.message) || "Can't invite users");
-                      return;
-                  }
-                  showToast('Users successfully updated');
-                  hideConfirmUsersBlock();
-                  closeModal(permissions);
-              })
-                  .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 organizationInvite = document.querySelector('.organization-invite');
-          const projectInvite = document.querySelector('.project-invite');
-          const applicationCredentialsInvite = document.querySelector('.application-credentials-invite');
-          const grantedElement = '<crowdin-p>&horbar;</crowdin-p>';
-          const willGrantedElement = '<span class="badge badge-will-be-granted">Will Be Granted</span>';
-          const notAvailableElement = '<span class="badge badge-not-available">Action Required</span>';
-          // only in enterprise
-          if (organizationInvite) {
-              const organizationWillGrantElement = '<span class="badge badge-will-be-granted">Will Be Registered</span>';
-              processUsersWhoWillBeInvitedToOrganization(organizationInvite, usersData, organizationWillGrantElement, grantedElement, notAvailableElement);
-          }
-          processUsersWhoWillBeInvited(projectInvite, usersData.newProjectManagers, willGrantedElement, grantedElement);
-          processUsersWhoWillBeInvited(applicationCredentialsInvite, usersData.newApplicationManagers, willGrantedElement, grantedElement);
-          processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement);
-      }
-      function processUsersWhoWillBeInvitedToOrganization(element, usersData, willGrantedElement, alreadyGrantedMessage, notAvailableElement) {
-          const tooltip = element.querySelector('.status');
-          const description = element.querySelector('.permission-description');
-          const userList = element.querySelector('.affected-users');
-          description.classList.remove('text-warning');
-          description.innerText = '';
-          const users = usersData.newUserEmails;
-          if (users.length) {
-              if (usersData.inviteRestricted) {
-                  description.classList.add('text-warning');
-                  description.innerText = 'New user invitations are restricted to administrators.';
-                  tooltip.innerHTML = notAvailableElement;
-              }
-              else {
-                  tooltip.innerHTML = willGrantedElement;
-              }
-              let affectedUsers = '<ul>';
-              for (const user of users) {
-                  affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-              }
-              affectedUsers += '</ul>';
-              userList.innerHTML = affectedUsers;
+              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 });
+              });
           }
-          else {
-              tooltip.innerHTML = alreadyGrantedMessage;
-              userList.innerHTML = alreadyGrantedMessage;
+          catch (e) {
+              catchRejection(e, 'Sync status check failed');
           }
       }
-      function processUsersWhoWillBeInvited(element, users, grantMessage, alreadyGrantedMessage) {
-          const tooltip = element.querySelector('.status');
-          const userList = element.querySelector('.affected-users');
-          if (users.length) {
-              tooltip.innerHTML = grantMessage;
-              let affectedUsers = '<ul>';
-              for (const user of users) {
-                  affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-              }
-              affectedUsers += '</ul>';
-              userList.innerHTML = affectedUsers;
+      async function cancelJob(jobId) {
+          var _a;
+          if ((_a = asyncJobs.current[jobId]) === null || _a === void 0 ? void 0 : _a.isFailed) {
+              return;
           }
-          else {
-              tooltip.innerHTML = alreadyGrantedMessage;
-              userList.innerHTML = alreadyGrantedMessage;
-          }
-      }
-      function processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement) {
-          const applicationSettingsInvite = document.querySelector('.application-settings-invite');
-          const tooltip = applicationSettingsInvite.querySelector('.status');
-          const description = applicationSettingsInvite.querySelector('.permission-description');
-          const userList = applicationSettingsInvite.querySelector('.affected-users');
-          let descriptionMessage = 'This can be configured in organization settings (Apps section).';
-          description.classList.remove('text-warning');
-          description.innerText = descriptionMessage;
-          let affectedUsers = '<ul>';
-          if (!usersData.newApplicationAccessUsers.length) {
-              tooltip.innerHTML = grantedElement;
-              userList.innerHTML = grantedElement;
+          try {
+              const restParams = await checkOrigin();
+              await checkResponse(await fetch('api/jobs' + restParams + '&jobId=' + jobId, {
+                  method: 'DELETE',
+                  headers: { 'Content-Type': 'application/json' },
+              }));
+              showToast('Cancellation…');
           }
-          else {
-              if (usersData.isAdmin) {
-                  tooltip.innerHTML = willGrantedElement;
-                  for (const user of usersData.newApplicationAccessUsers) {
-                      affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-                  }
-                  userList.innerHTML = affectedUsers + '</ul>';
-              }
-              else {
-                  descriptionMessage += ' Only organization admins have permission to update this setting.';
-                  description.classList.add('text-warning');
-                  description.innerText = descriptionMessage;
-                  tooltip.innerHTML = notAvailableElement;
-                  for (const user of usersData.newApplicationAccessUsers) {
-                      affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-                  }
-                  userList.innerHTML = affectedUsers + '</ul>';
-              }
+          catch (e) {
+              catchRejection(e, 'Sync cancellation failed');
           }
       }
-      function setLoader(id) {
-          const loader = document.querySelector(`${id} .loader`);
-          loader.classList.remove('hidden');
-      }
-      function unsetLoader(id) {
-          const loader = document.querySelector(`${id} .loader`);
-          setTimeout(function () {
-              loader.classList.add('hidden');
-          }, 500);
-      }
-      function triggerEvent(el, type) {
-          const e = document.createEvent('HTMLEvents');
-          e.initEvent(type, false, true);
-          el.dispatchEvent(e);
-      }
-      function fillSettingsForm() {
-          Object.entries(config.current).forEach(([key, value]) => {
-              const el = document.getElementById(`${key}-settings`);
-              if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
-                  if (el.tagName.toLowerCase() === 'crowdin-select') {
-                      if (el.hasAttribute('is-multi')) {
-                          el.value = JSON.stringify(value);
-                      }
-                      else {
-                          el.value = JSON.stringify([value]);
-                      }
+      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();
+                      };
                   }
-                  else if (el.tagName.toLowerCase() === 'crowdin-checkbox') {
-                      el.checked = !!value;
+                  break;
+              case JOB_TYPE.updateIntegration:
+                  if (!onFinally) {
+                      onFinally = () => appComponent.current.setAttribute('is-to-integration-process', false);
                   }
-                  else if (el.tagName.toLowerCase() === 'crowdin-textarea') {
-                      el.value = value;
-                      el.setValue(value);
+                  break;
+              case JOB_TYPE.crowdinSyncSettingsSave:
+                  if (!onFinally) {
+                      onFinally = () => appComponent.current.setAttribute('is-crowdin-sync-settings-in-progress', false);
                   }
-                  else {
-                      el.value = value;
+                  break;
+              case JOB_TYPE.integrationSyncSettingsSave:
+                  if (!onFinally) {
+                      onFinally = () => appComponent.current.setAttribute('is-integration-sync-settings-in-progress', false);
                   }
-                  triggerEvent(el, 'change');
+                  break;
+          }
+          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 }]);
               }
-          });
-          // Reinitialize dependencies after form is filled
-          setTimeout(() => {
-              if (window.initializeDependencies) {
-                  window.initializeDependencies();
-              }
-          }, 100);
-      }
-      function saveSettings() {
-          const settingsSaveBtn = document.getElementById('settings-save-btn');
-          setLoader('#settings-modal');
-          const settingsElements = Array.from(document.querySelectorAll('#modal-content crowdin-tabs > div'));
-          const tags = ['crowdin-checkbox', 'crowdin-select', 'crowdin-input', 'crowdin-textarea'];
-          const configReq = {};
-          settingsElements.forEach((tab) => {
-              const formElements = Array.from(tab.querySelectorAll('.crowdin-form > *'));
-              formElements
-                  .filter((e) => tags.includes(e.tagName.toLowerCase()))
-                  .forEach((e) => {
-                  const key = e.getAttribute('_key');
-                  let value;
-                  if (e.tagName.toLowerCase() === 'crowdin-select') {
-                      value = JSON.parse(e.value);
-                      if (!e.hasAttribute('is-multi')) {
-                          value = value.length > 0 ? value[0] : undefined;
-                      }
-                  }
-                  else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
-                      value = !!e.checked;
-                  }
-                  else {
-                      value = e.value;
+              if (isFailed) {
+                  if (onError) {
+                      onError();
                   }
-                  configReq[key] = value;
-              });
-          });
-          let isValidationError = false;
-          let isSettingsSaveJobPending = false;
-          let isSettingsSaveFailed = false;
-          settingsSaveBtn.setAttribute('disabled', true);
-          checkOrigin()
-              .then((restParams) => fetch('api/settings' + restParams, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ config: configReq }),
-          }))
-              .then(checkResponse)
-              .then((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');
-                          settingsSaveBtn.removeAttribute('disabled');
-                          if (!isValidationError && !isSettingsSaveFailed) {
-                              const settingsModal = document.getElementById('settings-modal');
-                              closeModal(settingsModal);
-                              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 = document.getElementById(`${key}-settings`);
-                      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");
-                  settingsSaveBtn.removeAttribute('disabled');
-                  return;
               }
-              catchRejection(e, "Can't save settings");
-          })
-              .finally(() => {
-              if (isSettingsSaveJobPending) {
+              else if ([JOB_STATUS.created, JOB_STATUS.inProgress].includes(job.status) && job.progress < 100) {
+                  setTimeout(() => checkJob({ jobId, jobType, onSuccess, onError, onFinally }), asyncProgress.checkInterval);
                   return;
               }
-              unsetLoader('#settings-modal');
-              settingsSaveBtn.removeAttribute('disabled');
-              if (!isValidationError) {
-                  const settingsModal = document.getElementById('settings-modal');
-                  closeModal(settingsModal);
-                  if (reloadOnConfigSave) {
-                      getIntegrationData({ hardReload: true });
-                      getCrowdinData();
-                  }
-              }
-          });
-      }
-      function getIntegrationFoldersToExpand(allData, syncedFiles) {
-          return Array.isArray(allData)
-              ? allData
-                  .filter((node) => node.node_type === folderType &&
-                  !syncedFiles.find((syncedFile) => syncedFile.parent_id === node.id))
-                  .map((node) => ({
-                  ...node,
-                  nodeType: node.node_type,
-                  parentId: node.parent_id,
-              }))
-              : [];
-      }
-      async function saveScheduleSync() {
-          const scheduleModal = document.getElementById('confirm-schedule-modal');
-          const newFile = scheduleModal.querySelector('#new-files').checked || false;
-          const selectedFiles = scheduleModal.querySelector('#selected-files').checked || false;
-          const allFolderFiles = scheduleModal.querySelector('#all-folder-files').checked || false;
-          const type = scheduleModal.getAttribute('data-type');
-          if (type === 'crowdin') {
-              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);
-          }
-          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 === 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(scheduleModal);
-      }
-      async function openScheduleModal(type, options = {}) {
-          var _a, _b;
-          const scheduleModal = document.getElementById('confirm-schedule-modal');
-          const { showAllFolderFiles = false, showNewFiles = true } = options;
-          const newFile = scheduleModal.querySelector('#new-files');
-          const selectedFiles = scheduleModal.querySelector('#selected-files');
-          const allFolderFiles = scheduleModal.querySelector('#all-folder-files');
-          let newFileStatus = 'unChecked';
-          const integrationSyncFolders = ((await ((_a = document.querySelector('crowdin-simple-integration')) === null || _a === void 0 ? void 0 : _a.getIntegrationScheduleSync(true))) ||
-              []).filter((elements) => elements.node_type === '0');
-          const selectedIntegrationFolders = ((await ((_b = document.getElementById('integration-files')) === null || _b === void 0 ? void 0 : _b.getSelected(true))) || []).filter((elements) => elements.node_type === '0');
-          for (let i = 0; i < selectedIntegrationFolders.length; i++) {
-              const selectedElement = selectedIntegrationFolders[i];
-              const found = integrationSyncFolders.some((integrationElement) => integrationElement.id === selectedElement.id);
-              if (found) {
-                  newFileStatus = 'checked';
-              }
-              else if (!found && newFileStatus === 'checked') {
-                  newFileStatus = 'clear-selection';
-                  break;
-              }
-              else {
-                  newFileStatus = 'unChecked';
+              if (onFinally) {
+                  onFinally(job);
               }
           }
-          if (showNewFiles) {
-              newFile.removeAttribute('hidden');
-              if (newFileStatus === 'checked') {
-                  newFile[newFileStatus] = true;
-                  newFile.value = true;
-                  newFile.removeAttribute('clear-selection');
-              }
-              else if (newFileStatus === 'clear-selection') {
-                  newFile.checked = false;
-                  newFile.value = false;
-                  newFile.setAttribute(newFileStatus, '');
+          catch (_e) {
+              if (onFinally) {
+                  onFinally();
               }
-              else {
-                  newFile.checked = false;
-                  newFile.value = false;
-                  newFile.removeAttribute('clear-selection');
+              if (!silentJobs.find((type) => type === jobType)) {
+                  pushJobs([{ id: jobId, isFailed: true }]);
               }
+              showToast('Sync status check failed');
           }
-          else {
-              newFile.setAttribute('hidden', '');
-              newFile.checked = false;
-          }
-          if (showAllFolderFiles) {
-              allFolderFiles.removeAttribute('hidden');
-              allFolderFiles.checked = false;
-              allFolderFiles.value = false;
-          }
-          else {
-              allFolderFiles.setAttribute('hidden', '');
-              allFolderFiles.checked = false;
-          }
-          selectedFiles.checked = true;
-          selectedFiles.value = true;
-          scheduleModal.querySelector('#save-schedule-sync').setAttribute('disabled', false);
-          scheduleModal.setAttribute('data-type', type);
-          openModal(scheduleModal);
       }
-      function onChangeAutoSynchronizationOptions() {
-          const newFiles = document.getElementById('new-files');
-          newFiles.removeAttribute('clear-selection');
-          const newFilesStatus = newFiles.checked || false;
-          const selectedFiles = document.getElementById('selected-files').checked || false;
-          const allFolderFiles = document.getElementById('all-folder-files').checked || false;
-          const buttonSaveScheduleSync = document.getElementById('save-schedule-sync');
-          if (newFilesStatus || selectedFiles || allFolderFiles) {
-              buttonSaveScheduleSync.removeAttribute('disabled');
+      function pushJobs(jobs) {
+          const el = asyncProgressRef.current;
+          if (el && el.pushJobs) {
+              el.pushJobs(jobs);
+              jobs.forEach((job) => (asyncJobs.current[job.id] = job));
           }
           else {
-              buttonSaveScheduleSync.setAttribute('disabled', true);
+              setTimeout(() => pushJobs(jobs), 300);
           }
       }
-      async function hasFolder(selectedFiles) {
-          let isFolder;
-          if (Array.isArray(selectedFiles)) {
-              isFolder = selectedFiles.find((file) => file.node_type === folderType || file.node_type === branchType);
+      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 {
-              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));
+          else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.action) === 'excludedTargetLanguages') {
+              crowdinFilesToUpdateTargetLanguages.current = event.detail.files;
+              openLanguageModalForCrowdinFiles();
+              return;
           }
-          return isFolder !== undefined;
-      }
-      async function setIntegrationScheduleSync(e) {
-          var _a;
-          if (e.detail.length === 0) {
-              showToast('Select templates which will be pushed to Crowdin');
+          else if (((_c = event.detail) === null || _c === void 0 ? void 0 : _c.action) === 'syncSourcesToCrowdin') {
+              syncToCrowdinFromCrowdinFiles(event.detail.files, false);
               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 (((_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);
+          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 });
           }
-          else {
-              syncedFiles = await appComponent.current.getCrowdinScheduleSync();
+          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"));
-      }
-      function getSubscriptionInfo() {
-          const subscriptionInfo = document.getElementById('subscription-info');
-          const subscriptionInfoText = subscriptionInfo.getElementsByTagName('p')[0];
-          checkOrigin()
-              .then((restParams) => fetch('api/subscription-info' + restParams))
-              .then(checkResponse)
-              .then((res) => {
-              if (res.showInfo) {
-                  subscriptionLink.current = res.subscribeLink;
-                  subscriptionInfoText.textContent = `Your trial expires in ${res.daysLeft} days.`;
-                  subscriptionInfo.style.display = 'block';
-              }
+          }
+          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 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) }),
           });
       }
-      function checkAlert(alert, suffix) {
-          const name = suffix ;
-          const revised = localStorage.getItem(`revised_${name}`) === '1';
-          if (!revised) {
-              alert.style.display = 'block';
-          }
-      }
-      function closeAlert(el, suffix) {
-          const name = suffix ;
-          const alert = el.closest('crowdin-alert');
-          alert.style.display = 'none';
-          localStorage.setItem(`revised_${name}`, 1);
-      }
-      function showErrorLogs() {
-          document.getElementById('show-error-logs-btn').classList.add('hidden');
-          document.getElementById('show-integration-btn').classList.remove('hidden');
-          appComponent.current.classList.add('hidden');
-          document.getElementById('user-errors').classList.remove('hidden');
-          checkOrigin()
-              .then((restParams) => fetch('api/user-errors' + restParams))
-              .then(checkResponse)
-              .then((res) => {
-              const table = document.getElementById('user-errors-table');
-              const clickRow = (field, index, item) => {
-                  const modal = document.getElementById('user-error-detail');
-                  openModal(modal);
-                  modal.innerHTML = getUserErrorDetail(item);
-              };
-              const formatDate = (field, index, item) => {
-                  return item.formattedDate;
+      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) {
+          setIsNoticeVisible(false);
+          localStorage.setItem(`revised_${suffix !== null && suffix !== void 0 ? suffix : name}`, '1');
+      }
+      async function showErrorLogs() {
+          setIsErrorLogsVisible(true);
+          try {
+              const restParams = await checkOrigin();
+              const res = await checkResponse(await fetch('api/user-errors' + restParams));
+              const table = userErrorsTableRef.current;
+              const clickRow = (_field, _index, item) => {
+                  setSelectedUserError(item);
+                  openModal(userErrorDetailModalRef.current);
               };
+              const formatDate = (_field, _index, item) => item.formattedDate;
               if (table.setTableConfig) {
                   table.setTableConfig({
                       defaultSortingColumn: 'createdAt',
@@ -2178,114 +2683,30 @@
                               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() {
-          document.getElementById('show-error-logs-btn').classList.remove('hidden');
-          document.getElementById('show-integration-btn').classList.add('hidden');
-          appComponent.current.classList.remove('hidden');
-          document.getElementById('user-errors').classList.add('hidden');
-      }
-      function isJSON(string) {
-          try {
-              JSON.parse(string);
-              return true;
           }
           catch (e) {
-              return false;
+              catchRejection(e, "Can't fetch error logs");
           }
       }
-      function getUserErrorDetail(error) {
-          const data = JSON.parse(error.data);
-          let html = '<div class="error-detail-table"><table>';
-          html += `<tr><td>Action</td><td>${sanitizeHTML(error.action)}</td></tr>`;
-          if (isJSON(error.message)) {
-              html += `<tr><td>Message</td><td><pre>${sanitizeHTML(error.message)}<pre></td></tr>`;
-          }
-          else {
-              html += `<tr><td>Message</td><td>${sanitizeHTML(error.message)}</td></tr>`;
-          }
-          html += `<tr><td>Date/time</td><td>${sanitizeHTML(error.formattedDate)}</td></tr>`;
-          if (data.requestParams) {
-              html += `<tr><td>Method</td><td>${sanitizeHTML(data.requestParams.method)}</td></tr>`;
-          }
-          if (data.responseData) {
-              html += `<tr><td>Response Data</td><td><pre>${sanitizeHTML(JSON.stringify(data.responseData, null, 2))}</pre></td></tr>`;
-          }
-          if (data.appData) {
-              if (Array.isArray(data.appData)) {
-                  html += `<tr><td>App Data</td><td><pre>${sanitizeHTML(JSON.stringify(data.appData, null, 2))}</pre></td></tr>`;
-              }
-              else if (typeof data.appData === 'object') {
-                  for (const key in data.appData) {
-                      html += `<tr><td>${sanitizeHTML(key.charAt(0).toUpperCase() + key.slice(1))}</td><td><pre>${sanitizeHTML(JSON.stringify(data.appData[key], null, 2))}</pre></td></tr>`;
-                  }
-              }
-              else {
-                  html += `<tr><td>App Data</td><td>${sanitizeHTML(data.appData)}</td></tr>`;
-              }
-          }
-          html += '</table></div>';
-          return html;
-      }
-      function sanitizeHTML(str) {
-          const tempDiv = document.createElement('div');
-          tempDiv.textContent = str;
-          return tempDiv.innerHTML;
-      }
-      function openModal(modal) {
-          modal.style.display = 'block';
-          modal.open();
-      }
-      function closeModal(modal) {
-          modal.style.display = 'none';
-          modal.close();
-      }
-      function settingsFieldChange(el) {
-          el.removeAttribute('error');
-          el.removeAttribute('error-text');
-      }
-      function isFolder(e) {
-          return !e.type && (e.nodeType === undefined || e.nodeType === folderType || e.nodeType === branchType);
-      }
-      return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "i_w", children: [jsxRuntimeExports.jsxs("div", { className: "top", children: [notice && (jsxRuntimeExports.jsxs("crowdin-alert", { id: "notice", title: notice.title, ...(!notice.icon ? { 'no-icon': 'true' } : {}), ...(notice.type ? { type: notice.type } : {}), style: { display: 'none', marginBottom: '12px' }, children: [jsxRuntimeExports.jsx("div", { className: "box-center", children: jsxRuntimeExports.jsx("p", { className: "m-0", dangerouslySetInnerHTML: { __html: notice.content } }) }), notice.close && (jsxRuntimeExports.jsx("crowdin-button", { onClick: (e) => closeAlert(e, 'notice'), class: "dismiss-alert", icon: true, children: "close" }))] })), checkSubscription && (jsxRuntimeExports.jsx("crowdin-alert", { id: "subscription-info", "no-icon": "true", type: "warning", style: { display: 'none', marginBottom: '12px' }, children: jsxRuntimeExports.jsxs("div", { className: "box-center", children: [jsxRuntimeExports.jsx("p", { className: "m-0" }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-1", primary: true, onClick: () => window.open(subscriptionLink.current, '_blank'), children: "Subscribe" })] }) })), jsxRuntimeExports.jsxs("div", { id: "buttons", children: [jsxRuntimeExports.jsx("crowdin-button", { id: "show-integration-btn", class: "hidden", "icon-before": "arrow_back", onClick: () => showIntegration(), children: "Integration" }), 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: () => {
-                                              const infoModalEl = document.getElementById('info-modal');
-                                              openModal(infoModalEl);
-                                          }, children: infoModal.title })), configurationFields && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "settings", onClick: () => {
-                                              const settingsModal = document.getElementById('settings-modal');
-                                              openModal(settingsModal);
-                                              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("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", className: "hidden", children: [jsxRuntimeExports.jsx("crowdin-show-as-table", { "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", { 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'), children: "Subscribe" }), jsxRuntimeExports.jsx("crowdin-button", { outlined: true, onClick: () => window.open('https://crowdin.com/contacts', '_blank'), children: "Contact us" }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-10", secondary: true, onClick: () => integrationLogout(), children: "Log out" })] })] }), jsxRuntimeExports.jsxs("crowdin-modal", { 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: "loader hidden", children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsxs("div", { className: "permissions-modal-content", children: [jsxRuntimeExports.jsx("div", { className: "select-users-block", 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 }, "users") }), jsxRuntimeExports.jsxs("div", { className: "select-users-info", children: [jsxRuntimeExports.jsx("div", { className: "confirm-users-block mt-2 hidden", children: jsxRuntimeExports.jsxs("table", { children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { style: { width: '40%' }, children: "Access" }), jsxRuntimeExports.jsx("th", { style: { width: '35%' }, children: "Users" }), jsxRuntimeExports.jsx("th", { className: "status", style: { width: '20%' }, children: "Upcoming changes" })] }) }), jsxRuntimeExports.jsxs("tbody", { children: [hasOrganization && (jsxRuntimeExports.jsxs("tr", { className: "organization-invite", children: [jsxRuntimeExports.jsxs("td", { children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Registration in Organization" }), jsxRuntimeExports.jsx("div", { className: "permission-description" })] }), jsxRuntimeExports.jsx("td", { className: "affected-users" }), jsxRuntimeExports.jsx("td", { className: "status" })] })), jsxRuntimeExports.jsxs("tr", { className: "project-invite", children: [jsxRuntimeExports.jsx("td", { children: jsxRuntimeExports.jsx("crowdin-p", { children: "Project Manager Access" }) }), jsxRuntimeExports.jsx("td", { className: "affected-users" }), jsxRuntimeExports.jsx("td", { className: "status" })] }), jsxRuntimeExports.jsxs("tr", { className: "application-settings-invite", children: [jsxRuntimeExports.jsxs("td", { children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Application Visibility Access" }), jsxRuntimeExports.jsx("div", { className: "permission-description" })] }), jsxRuntimeExports.jsx("td", { className: "affected-users" }), jsxRuntimeExports.jsx("td", { className: "status" })] }), jsxRuntimeExports.jsxs("tr", { className: "application-credentials-invite", children: [jsxRuntimeExports.jsxs("td", { children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Access to the Integration" }), jsxRuntimeExports.jsx("div", { className: "permission-description", children: "This provides access to sync files and modify the current integration settings." })] }), jsxRuntimeExports.jsx("td", { className: "affected-users" }), jsxRuntimeExports.jsx("td", { className: "status" })] })] })] }) }), zenModeUrl && (jsxRuntimeExports.jsx("div", { className: "mt-2", 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, "modal-width": "50", "modal-title": "Select Target Languages for Translation", id: "excluded-languages" })), infoModal && (jsxRuntimeExports.jsx("crowdin-modal", { 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", { style: { display: 'none' }, id: "settings-modal", "modal-width": "65", "modal-title": "Settings", "close-button-title": "Close", children: [jsxRuntimeExports.jsx("div", { className: "loader 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", { className: "crowdin-form", children: tab.fields.map((field) => (jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [renderConfigField(field, settingsFieldChange), jsxRuntimeExports.jsx("div", { style: { padding: '8px' }, ...(field.dependencySettings
-                                                      ? { 'data-dependency': field.dependencySettings }
-                                                      : {}) })] }, field.key))) }) }, tabIndex))) }) }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "settings-save-btn", outlined: true, 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", { 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", { id: "selected-files", name: "selected-files", label: "Selected files", class: "hydrated", onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("crowdin-checkbox", { id: "all-folder-files", name: "all-folder-files", label: "All files in the folder", class: "hydrated", hidden: true, onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("crowdin-checkbox", { id: "new-files", name: "new-files", label: "New files", class: "hydrated", onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { outlined: true, id: "save-schedule-sync", onClick: () => saveScheduleSync(), children: "Save" }) })] })), jsxRuntimeExports.jsx("crowdin-modal", { style: { display: 'none' }, id: "user-error-detail", "close-button-title": "Close", "close-button": "true" })] }));
+      function showIntegration() {
+          setIsErrorLogsVisible(false);
+      }
+      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 })] }));
   };
 
-  clientExports.createRoot(document.getElementById('root')).render(jsxRuntimeExports.jsx(MainPage, { ...window.__PAGE_PROPS__ }));
+  initializeCrowdinIframeContext();
+  const props = readPageProps();
+  clientExports.createRoot(document.getElementById('root')).render(jsxRuntimeExports.jsx(MainPage, { ...props }));
 
 })();
 //# sourceMappingURL=main.bundle.js.map