@crowdin/app-project-module 2.2.0 → 2.3.0

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

@@ -518,9 +518,374 @@
 
   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') => {
+  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);
+      }
+      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 EMPTY_PERMISSION_VALUE = '\u2015';
+  const getDefaultScheduleModalState = () => ({
+      type: null,
+      showNewFiles: true,
+      showAllFolderFiles: false,
+      newFiles: false,
+      newFilesClearSelection: false,
+      selectedFiles: true,
+      allFolderFiles: false,
+  });
+  const renderConfigField = (field, settingsFieldChange, registerSettingsField, suffix = 'settings') => {
       var _a;
       if (!field.key) {
           return field.labelHtml ? (jsxRuntimeExports.jsx("crowdin-p", { ...(field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), dangerouslySetInnerHTML: { __html: field.labelHtml } })) : (jsxRuntimeExports.jsx("crowdin-p", { ...(field.dependencySettings ? { 'data-dependency': field.dependencySettings } : {}), children: field.label }));
@@ -535,18 +900,18 @@
       };
       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 }));
+              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", { ...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) => {
+              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", { ...commonProps, "with-fixed-height": true, value: field.defaultValue || '', onChange: settingsFieldChange }));
+              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", { ...commonProps, value: field.defaultValue || '', onChange: settingsFieldChange }));
+              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:
@@ -577,9 +942,22 @@
       };
       const silentJobs = [JOB_TYPE.integrationSettingsSave];
       const appComponent = reactExports.useRef(null);
+      const asyncProgressRef = reactExports.useRef(null);
+      const infoModalRef = reactExports.useRef(null);
       const subscriptionModal = reactExports.useRef(null);
+      const settingsModalRef = reactExports.useRef(null);
+      const scheduleModalRef = reactExports.useRef(null);
+      const selectedFilesCheckboxRef = reactExports.useRef(null);
+      const allFolderFilesCheckboxRef = reactExports.useRef(null);
+      const newFilesCheckboxRef = reactExports.useRef(null);
       const languageModal = reactExports.useRef(null);
+      const languageSelectRef = reactExports.useRef(null);
+      const permissionsModalRef = reactExports.useRef(null);
+      const userErrorsTableRef = reactExports.useRef(null);
+      const userErrorDetailModalRef = reactExports.useRef(null);
       const usersSelectRef = reactExports.useRef(null);
+      const settingsFieldRefs = reactExports.useRef({});
+      const refreshDependencies = useFieldDependencies(configurationFields);
       const crowdinFilesToUpdateTargetLanguages = reactExports.useRef([]);
       const asyncJobs = reactExports.useRef({});
       const project = reactExports.useRef({});
@@ -590,6 +968,19 @@
       const hasLoadMoreElements = reactExports.useRef(false);
       const savedIntegrationData = reactExports.useRef(null);
       const currentOpenedFolders = reactExports.useRef(null);
+      const [modalLoaders, setModalLoaders] = reactExports.useState({});
+      const [languageModalState, setLanguageModalState] = reactExports.useState(null);
+      const [permissionUserOptions, setPermissionUserOptions] = reactExports.useState([]);
+      const [permissionsSelectedValue, setPermissionsSelectedValue] = reactExports.useState('[]');
+      const [permissionsSummary, setPermissionsSummary] = reactExports.useState(null);
+      const [isPermissionsConfirmVisible, setIsPermissionsConfirmVisible] = reactExports.useState(false);
+      const [isNoticeVisible, setIsNoticeVisible] = reactExports.useState(false);
+      const [isSettingsSaveDisabled, setIsSettingsSaveDisabled] = reactExports.useState(false);
+      const [scheduleModalState, setScheduleModalState] = reactExports.useState(getDefaultScheduleModalState);
+      const [isScheduleSaveDisabled, setIsScheduleSaveDisabled] = reactExports.useState(false);
+      const [subscriptionInfo, setSubscriptionInfo] = reactExports.useState(null);
+      const [isErrorLogsVisible, setIsErrorLogsVisible] = reactExports.useState(false);
+      const [selectedUserError, setSelectedUserError] = reactExports.useState(null);
       reactExports.useEffect(() => {
           // Event listeners
           const listeners = {
@@ -618,28 +1009,22 @@
               },
               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);
-                      }
+                      closeModal(permissionsModalRef.current);
+                      closeModal(infoModalRef.current);
+                      closeModal(settingsModalRef.current);
+                      closeModal(scheduleModalRef.current);
                       if (languageModal.current) {
                           closeModal(languageModal.current);
                       }
                   }
               },
               loadMoreClick: async (e) => {
+                  var _a;
                   const loadMoreFile = e.detail;
-                  const fileComponent = 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 () => {
                       await fileComponent.setLoadMoreLoading(loadMoreFile.id, false);
@@ -682,16 +1067,39 @@
           if (checkSubscription) {
               getSubscriptionInfo();
           }
-          if (notice) {
-              const noticeEl = document.getElementById('notice');
-              checkAlert(noticeEl, 'notice');
-          }
+          setIsNoticeVisible(Boolean(notice) && localStorage.getItem('revised_notice') !== '1');
           return () => {
               for (const [event, handler] of Object.entries(listeners)) {
                   document.body.removeEventListener(event, handler);
               }
           };
       }, []);
+      reactExports.useEffect(() => {
+          var _a;
+          if (!languageModalState || !((_a = languageSelectRef.current) === null || _a === void 0 ? void 0 : _a.setValue)) {
+              return;
+          }
+          languageSelectRef.current.setValue(languageModalState.languages.map((language) => language.id));
+      }, [languageModalState]);
+      reactExports.useEffect(() => {
+          if (usersSelectRef.current) {
+              usersSelectRef.current.value = permissionsSelectedValue;
+          }
+      }, [permissionUserOptions, permissionsSelectedValue]);
+      reactExports.useEffect(() => {
+          syncScheduleCheckbox(selectedFilesCheckboxRef.current, {
+              checked: scheduleModalState.selectedFiles,
+          });
+          syncScheduleCheckbox(allFolderFilesCheckboxRef.current, {
+              checked: scheduleModalState.allFolderFiles,
+              hidden: !scheduleModalState.showAllFolderFiles,
+          });
+          syncScheduleCheckbox(newFilesCheckboxRef.current, {
+              checked: scheduleModalState.newFiles,
+              hidden: !scheduleModalState.showNewFiles,
+              clearSelection: scheduleModalState.newFilesClearSelection,
+          });
+      }, [scheduleModalState]);
       // Expose centralized API to global scope for main.js compatibility
       reactExports.useEffect(() => {
           window.app = {
@@ -1234,7 +1642,7 @@
           });
       }
       function pushJobs(jobs) {
-          const el = document.querySelector('crowdin-async-progress');
+          const el = asyncProgressRef.current;
           if (el && el.pushJobs) {
               el.pushJobs(jobs);
               jobs.forEach((job) => (asyncJobs.current[job.id] = job));
@@ -1348,33 +1756,32 @@
               .catch((e) => catchRejection(e, `Can't sync translations to ${name}`));
       }
       function openLanguageModal() {
+          setLanguageModalState((state) => {
+              var _a, _b;
+              return ({
+                  languages: (_b = (_a = state === null || state === void 0 ? void 0 : state.languages) !== null && _a !== void 0 ? _a : project.current.targetLanguages) !== null && _b !== void 0 ? _b : [],
+                  action: 'syncToCrowdin',
+              });
+          });
           openModal(languageModal.current);
       }
       function openLanguageModalForCrowdinFiles() {
-          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);
+          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 languageSelect = document.querySelector('#language-select');
-          const selectedLanguages = await languageSelect.getValue();
+          const selectedLanguages = await languageSelectRef.current.getValue();
           closeModal(languageModal.current);
           uploadFilesToCrowdin({ detail: fileToSync.current }, selectedLanguages);
       }
       async function updateCrowdinFilesTargetLanguages() {
-          const languageSelect = document.querySelector('#language-select');
-          const selectedLanguages = await languageSelect.getValue();
+          const selectedLanguages = await languageSelectRef.current.getValue();
           closeModal(languageModal.current);
           const fileIds = Object.keys(crowdinFilesToUpdateTargetLanguages.current).map((id) => parseInt(id, 10));
           if (fileIds.length === 0) {
@@ -1397,54 +1804,13 @@
           })
               .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);
-          }
+      function setLanguagesForTranslation(languages, action = 'syncToCrowdin') {
+          setLanguageModalState({ languages, action });
       }
       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);
+          var _a;
+          setIsPermissionsConfirmVisible(false);
+          (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('body-overflow-unset', true);
       }
       function getUserFullName(user) {
           if (user.full_name) {
@@ -1454,12 +1820,10 @@
           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);
+          openModal(permissionsModalRef.current);
           setLoader('#permissions-modal');
-          const select = document.getElementById('users');
-          select.value = '[]';
+          setPermissionsSelectedValue('[]');
           Promise.all([
               new Promise((resolve) => {
                   checkOrigin()
@@ -1481,23 +1845,23 @@
               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);
+              setPermissionUserOptions(availableUsers.map((user) => ({
+                  id: String(user.id),
+                  label: getUserFullName(user),
+              })));
+              setPermissionsSelectedValue(JSON.stringify(filteredManagers));
           })
               .catch((e) => catchRejection(e, "Can't fetch users"))
               .finally(() => unsetLoader('#permissions-modal'));
       }
       function showConfirmUsersBlock() {
-          const confirmUsersBlock = document.querySelector('.confirm-users-block');
-          confirmUsersBlock.classList.remove('hidden');
-          const permissionsModal = document.getElementById('permissions-modal');
-          permissionsModal.removeAttribute('body-overflow-unset');
+          var _a;
+          setIsPermissionsConfirmVisible(true);
+          (_a = permissionsModalRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('body-overflow-unset');
       }
       function checkUsers() {
           setLoader('#permissions-modal');
-          const select = document.getElementById('users');
+          const select = usersSelectRef.current;
           if (select.value === '[]') {
               hideConfirmUsersBlock();
               unsetLoader('#permissions-modal');
@@ -1560,7 +1924,7 @@
       }
       function inviteUsers() {
           setLoader('#permissions-modal');
-          const select = document.getElementById('users');
+          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));
@@ -1580,14 +1944,13 @@
               }))
                   .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);
+                  closeModal(permissionsModalRef.current);
               })
                   .catch((e) => catchRejection(e, (e === null || e === void 0 ? void 0 : e.error) || "Can't invite users"))
                   .finally(() => unsetLoader('#permissions-modal'));
@@ -1595,107 +1958,58 @@
       }
       function prepareUsersConfirmBlock(usersData) {
           showConfirmUsersBlock();
-          const organizationInvite = document.querySelector('.organization-invite');
-          const projectInvite = document.querySelector('.project-invite');
-          const applicationCredentialsInvite = document.querySelector('.application-credentials-invite');
-          const grantedElement = '<crowdin-p>&horbar;</crowdin-p>';
-          const willGrantedElement = '<span class="badge badge-will-be-granted">Will Be Granted</span>';
-          const notAvailableElement = '<span class="badge badge-not-available">Action Required</span>';
-          // only in enterprise
-          if (organizationInvite) {
-              const organizationWillGrantElement = '<span class="badge badge-will-be-granted">Will Be Registered</span>';
-              processUsersWhoWillBeInvitedToOrganization(organizationInvite, usersData, organizationWillGrantElement, grantedElement, notAvailableElement);
-          }
-          processUsersWhoWillBeInvited(projectInvite, usersData.newProjectManagers, willGrantedElement, grantedElement);
-          processUsersWhoWillBeInvited(applicationCredentialsInvite, usersData.newApplicationManagers, willGrantedElement, grantedElement);
-          processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement);
-      }
-      function processUsersWhoWillBeInvitedToOrganization(element, usersData, willGrantedElement, alreadyGrantedMessage, notAvailableElement) {
-          const tooltip = element.querySelector('.status');
-          const description = element.querySelector('.permission-description');
-          const userList = element.querySelector('.affected-users');
-          description.classList.remove('text-warning');
-          description.innerText = '';
-          const users = usersData.newUserEmails;
-          if (users.length) {
-              if (usersData.inviteRestricted) {
-                  description.classList.add('text-warning');
-                  description.innerText = 'New user invitations are restricted to administrators.';
-                  tooltip.innerHTML = notAvailableElement;
-              }
-              else {
-                  tooltip.innerHTML = willGrantedElement;
-              }
-              let affectedUsers = '<ul>';
-              for (const user of users) {
-                  affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-              }
-              affectedUsers += '</ul>';
-              userList.innerHTML = affectedUsers;
-          }
-          else {
-              tooltip.innerHTML = alreadyGrantedMessage;
-              userList.innerHTML = alreadyGrantedMessage;
-          }
-      }
-      function processUsersWhoWillBeInvited(element, users, grantMessage, alreadyGrantedMessage) {
-          const tooltip = element.querySelector('.status');
-          const userList = element.querySelector('.affected-users');
-          if (users.length) {
-              tooltip.innerHTML = grantMessage;
-              let affectedUsers = '<ul>';
-              for (const user of users) {
-                  affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-              }
-              affectedUsers += '</ul>';
-              userList.innerHTML = affectedUsers;
-          }
-          else {
-              tooltip.innerHTML = alreadyGrantedMessage;
-              userList.innerHTML = alreadyGrantedMessage;
-          }
-      }
-      function processUsersWhoWillBeInvitedApplicationSettings(usersData, willGrantedElement, grantedElement, notAvailableElement) {
-          const applicationSettingsInvite = document.querySelector('.application-settings-invite');
-          const tooltip = applicationSettingsInvite.querySelector('.status');
-          const description = applicationSettingsInvite.querySelector('.permission-description');
-          const userList = applicationSettingsInvite.querySelector('.affected-users');
-          let descriptionMessage = 'This can be configured in organization settings (Apps section).';
-          description.classList.remove('text-warning');
-          description.innerText = descriptionMessage;
-          let affectedUsers = '<ul>';
-          if (!usersData.newApplicationAccessUsers.length) {
-              tooltip.innerHTML = grantedElement;
-              userList.innerHTML = grantedElement;
-          }
-          else {
-              if (usersData.isAdmin) {
-                  tooltip.innerHTML = willGrantedElement;
-                  for (const user of usersData.newApplicationAccessUsers) {
-                      affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
-                  }
-                  userList.innerHTML = affectedUsers + '</ul>';
-              }
-              else {
-                  descriptionMessage += ' Only organization admins have permission to update this setting.';
-                  description.classList.add('text-warning');
-                  description.innerText = descriptionMessage;
-                  tooltip.innerHTML = notAvailableElement;
-                  for (const user of usersData.newApplicationAccessUsers) {
-                      affectedUsers += `<li><crowdin-p>${sanitizeHTML(user.name)}</crowdin-p></li>`;
+          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,
+                      },
                   }
-                  userList.innerHTML = affectedUsers + '</ul>';
-              }
-          }
+                  : {}),
+              project: {
+                  status: usersData.newProjectManagers.length ? 'willBeGranted' : 'granted',
+                  users: toNames(usersData.newProjectManagers),
+              },
+              applicationSettings: {
+                  status: hasApplicationAccessUsers
+                      ? usersData.isAdmin
+                          ? 'willBeGranted'
+                          : 'actionRequired'
+                      : 'granted',
+                  users: toNames(usersData.newApplicationAccessUsers),
+                  description: hasApplicationAccessUsers
+                      ? usersData.isAdmin
+                          ? applicationSettingsDescription
+                          : `${applicationSettingsDescription} Only organization admins have permission to update this setting.`
+                      : applicationSettingsDescription,
+                  isWarning: hasApplicationAccessUsers && !usersData.isAdmin,
+              },
+              applicationCredentials: {
+                  status: usersData.newApplicationManagers.length ? 'willBeGranted' : 'granted',
+                  users: toNames(usersData.newApplicationManagers),
+              },
+          });
       }
       function setLoader(id) {
-          const loader = document.querySelector(`${id} .loader`);
-          loader.classList.remove('hidden');
+          const loaderKey = id.replace(/^#/, '');
+          setModalLoaders((currentLoaders) => ({ ...currentLoaders, [loaderKey]: true }));
       }
       function unsetLoader(id) {
-          const loader = document.querySelector(`${id} .loader`);
+          const loaderKey = id.replace(/^#/, '');
           setTimeout(function () {
-              loader.classList.add('hidden');
+              setModalLoaders((currentLoaders) => ({ ...currentLoaders, [loaderKey]: false }));
           }, 500);
       }
       function triggerEvent(el, type) {
@@ -1703,9 +2017,56 @@
           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 (e) {
+              return [value];
+          }
+      }
+      function registerSettingsField(key) {
+          return (element) => {
+              if (!key) {
+                  return;
+              }
+              if (element) {
+                  settingsFieldRefs.current[key] = element;
+              }
+              else {
+                  delete settingsFieldRefs.current[key];
+              }
+          };
+      }
+      function syncScheduleCheckbox(checkbox, { checked, hidden = false, clearSelection = false, }) {
+          if (!checkbox) {
+              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');
+          }
+      }
       function fillSettingsForm() {
           Object.entries(config.current).forEach(([key, value]) => {
-              const el = document.getElementById(`${key}-settings`);
+              const el = settingsFieldRefs.current[key];
               if (el && (value || el.tagName.toLowerCase() === 'crowdin-checkbox')) {
                   if (el.tagName.toLowerCase() === 'crowdin-select') {
                       if (el.hasAttribute('is-multi')) {
@@ -1728,45 +2089,37 @@
                   triggerEvent(el, 'change');
               }
           });
-          // Reinitialize dependencies after form is filled
-          setTimeout(() => {
-              if (window.initializeDependencies) {
-                  window.initializeDependencies();
-              }
-          }, 100);
+          setTimeout(refreshDependencies, 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;
-                      }
+          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;
                   }
-                  else if (e.tagName.toLowerCase() === 'crowdin-checkbox') {
-                      value = !!e.checked;
+                  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;
                   }
-                  else {
-                      value = e.value;
+                  if (tagName === 'crowdin-checkbox') {
+                      configReq[field.key] = !!el.checked;
+                      return;
                   }
-                  configReq[key] = value;
+                  configReq[field.key] = el.value;
               });
           });
           let isValidationError = false;
           let isSettingsSaveJobPending = false;
           let isSettingsSaveFailed = false;
-          settingsSaveBtn.setAttribute('disabled', true);
+          setIsSettingsSaveDisabled(true);
           checkOrigin()
               .then((restParams) => fetch('api/settings' + restParams, {
               method: 'POST',
@@ -1791,10 +2144,9 @@
                       },
                       onFinally: () => {
                           unsetLoader('#settings-modal');
-                          settingsSaveBtn.removeAttribute('disabled');
+                          setIsSettingsSaveDisabled(false);
                           if (!isValidationError && !isSettingsSaveFailed) {
-                              const settingsModal = document.getElementById('settings-modal');
-                              closeModal(settingsModal);
+                              closeModal(settingsModalRef.current);
                               if (reloadOnConfigSave) {
                                   getIntegrationData({ hardReload: true });
                                   getCrowdinData();
@@ -1813,7 +2165,7 @@
               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`);
+                      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]);
@@ -1821,7 +2173,7 @@
                   });
                   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');
+                  setIsSettingsSaveDisabled(false);
                   return;
               }
               catchRejection(e, "Can't save settings");
@@ -1831,10 +2183,9 @@
                   return;
               }
               unsetLoader('#settings-modal');
-              settingsSaveBtn.removeAttribute('disabled');
+              setIsSettingsSaveDisabled(false);
               if (!isValidationError) {
-                  const settingsModal = document.getElementById('settings-modal');
-                  closeModal(settingsModal);
+                  closeModal(settingsModalRef.current);
                   if (reloadOnConfigSave) {
                       getIntegrationData({ hardReload: true });
                       getCrowdinData();
@@ -1855,11 +2206,7 @@
               : [];
       }
       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');
+          const { type, newFiles: newFile, selectedFiles, allFolderFiles } = scheduleModalState;
           if (type === 'crowdin') {
               const crowdinFiles = await appComponent.current.getCrowdinFilesData();
               const syncedFileIds = Object.keys(syncData.current);
@@ -1902,19 +2249,15 @@
                   }
               }
           }
-          closeModal(scheduleModal);
+          closeModal(scheduleModalRef.current);
       }
       async function openScheduleModal(type, options = {}) {
-          var _a, _b;
-          const scheduleModal = document.getElementById('confirm-schedule-modal');
+          var _a, _b, _c, _d;
           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');
+          const integrationSyncFolders = ((await ((_b = (_a = appComponent.current) === null || _a === void 0 ? void 0 : _a.getIntegrationScheduleSync) === null || _b === void 0 ? void 0 : _b.call(_a, true))) || []).filter((elements) => elements.node_type === '0');
+          const integrationFiles = (_c = appComponent.current) === null || _c === void 0 ? void 0 : _c.querySelector('#integration-files');
+          const selectedIntegrationFolders = ((await ((_d = integrationFiles === null || integrationFiles === void 0 ? void 0 : integrationFiles.getSelected) === null || _d === void 0 ? void 0 : _d.call(integrationFiles, true))) || []).filter((elements) => elements.node_type === '0');
           for (let i = 0; i < selectedIntegrationFolders.length; i++) {
               const selectedElement = selectedIntegrationFolders[i];
               const found = integrationSyncFolders.some((integrationElement) => integrationElement.id === selectedElement.id);
@@ -1929,56 +2272,33 @@
                   newFileStatus = 'unChecked';
               }
           }
-          if (showNewFiles) {
-              newFile.removeAttribute('hidden');
-              if (newFileStatus === 'checked') {
-                  newFile[newFileStatus] = true;
-                  newFile.value = true;
-                  newFile.removeAttribute('clear-selection');
-              }
-              else if (newFileStatus === 'clear-selection') {
-                  newFile.checked = false;
-                  newFile.value = false;
-                  newFile.setAttribute(newFileStatus, '');
-              }
-              else {
-                  newFile.checked = false;
-                  newFile.value = false;
-                  newFile.removeAttribute('clear-selection');
-              }
-          }
-          else {
-              newFile.setAttribute('hidden', '');
-              newFile.checked = false;
-          }
-          if (showAllFolderFiles) {
-              allFolderFiles.removeAttribute('hidden');
-              allFolderFiles.checked = false;
-              allFolderFiles.value = false;
-          }
-          else {
-              allFolderFiles.setAttribute('hidden', '');
-              allFolderFiles.checked = false;
-          }
-          selectedFiles.checked = true;
-          selectedFiles.value = true;
-          scheduleModal.querySelector('#save-schedule-sync').setAttribute('disabled', false);
-          scheduleModal.setAttribute('data-type', type);
-          openModal(scheduleModal);
+          setScheduleModalState({
+              type,
+              showAllFolderFiles,
+              showNewFiles,
+              newFiles: showNewFiles && newFileStatus === 'checked',
+              newFilesClearSelection: showNewFiles && newFileStatus === 'clear-selection',
+              selectedFiles: true,
+              allFolderFiles: false,
+          });
+          setIsScheduleSaveDisabled(false);
+          openModal(scheduleModalRef.current);
       }
       function onChangeAutoSynchronizationOptions() {
-          const newFiles = document.getElementById('new-files');
-          newFiles.removeAttribute('clear-selection');
-          const newFilesStatus = newFiles.checked || false;
-          const selectedFiles = document.getElementById('selected-files').checked || false;
-          const allFolderFiles = document.getElementById('all-folder-files').checked || false;
-          const buttonSaveScheduleSync = document.getElementById('save-schedule-sync');
-          if (newFilesStatus || selectedFiles || allFolderFiles) {
-              buttonSaveScheduleSync.removeAttribute('disabled');
-          }
-          else {
-              buttonSaveScheduleSync.setAttribute('disabled', true);
-          }
+          var _a, _b, _c;
+          const nextState = {
+              newFiles: scheduleModalState.showNewFiles ? !!((_a = newFilesCheckboxRef.current) === null || _a === void 0 ? void 0 : _a.checked) : false,
+              selectedFiles: !!((_b = selectedFilesCheckboxRef.current) === null || _b === void 0 ? void 0 : _b.checked),
+              allFolderFiles: scheduleModalState.showAllFolderFiles
+                  ? !!((_c = allFolderFilesCheckboxRef.current) === null || _c === void 0 ? void 0 : _c.checked)
+                  : false,
+          };
+          setScheduleModalState((currentState) => ({
+              ...currentState,
+              ...nextState,
+              newFilesClearSelection: false,
+          }));
+          setIsScheduleSaveDisabled(!nextState.newFiles && !nextState.selectedFiles && !nextState.allFolderFiles);
       }
       async function hasFolder(selectedFiles) {
           let isFolder;
@@ -2122,46 +2442,31 @@
               .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';
+                  setSubscriptionInfo({ daysLeft: res.daysLeft, subscribeLink: res.subscribeLink });
               }
           });
       }
-      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 closeAlert(suffix) {
+          const alertName = suffix ;
+          setIsNoticeVisible(false);
+          localStorage.setItem(`revised_${alertName}`, '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');
+          setIsErrorLogsVisible(true);
           checkOrigin()
               .then((restParams) => fetch('api/user-errors' + restParams))
               .then(checkResponse)
               .then((res) => {
-              const table = document.getElementById('user-errors-table');
+              const table = userErrorsTableRef.current;
               const clickRow = (field, index, item) => {
-                  const modal = document.getElementById('user-error-detail');
-                  openModal(modal);
-                  modal.innerHTML = getUserErrorDetail(item);
+                  setSelectedUserError(item);
+                  openModal(userErrorDetailModalRef.current);
               };
               const formatDate = (field, index, item) => {
                   return item.formattedDate;
@@ -2197,10 +2502,7 @@
               .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');
+          setIsErrorLogsVisible(false);
       }
       function isJSON(string) {
           try {
@@ -2213,79 +2515,129 @@
       }
       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>`;
+          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) {
-              html += `<tr><td>Method</td><td>${sanitizeHTML(data.requestParams.method)}</td></tr>`;
+              rows.push({ label: 'Method', value: data.requestParams.method });
           }
           if (data.responseData) {
-              html += `<tr><td>Response Data</td><td><pre>${sanitizeHTML(JSON.stringify(data.responseData, null, 2))}</pre></td></tr>`;
+              rows.push({
+                  label: 'Response Data',
+                  value: jsxRuntimeExports.jsx("pre", { className: preClassName, children: JSON.stringify(data.responseData, null, 2) }),
+              });
           }
           if (data.appData) {
               if (Array.isArray(data.appData)) {
-                  html += `<tr><td>App Data</td><td><pre>${sanitizeHTML(JSON.stringify(data.appData, null, 2))}</pre></td></tr>`;
+                  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) {
-                      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>`;
+                      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 {
-                  html += `<tr><td>App Data</td><td>${sanitizeHTML(data.appData)}</td></tr>`;
+                  rows.push({ label: 'App Data', value: data.appData });
               }
           }
-          html += '</table></div>';
-          return html;
+          return (jsxRuntimeExports.jsx("div", { className: "-m-6 h-auto max-h-[579px] overflow-auto", children: jsxRuntimeExports.jsx("table", { className: "w-full border-separate border-spacing-0", children: jsxRuntimeExports.jsx("tbody", { children: rows.map((row) => (jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("td", { className: "min-w-[200px] p-2 px-6 align-top font-medium", children: row.label }), jsxRuntimeExports.jsx("td", { className: "break-all bg-[var(--crowdin-primary-blue-gray,#f6f6f6)] p-2 px-6 text-[var(--crowdin-body-color,rgba(38,50,56,0.87))]", children: row.value })] }, row.label))) }) }) }));
+      }
+      function renderPermissionStatus(status) {
+          switch (status) {
+              case 'willBeGranted':
+                  return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-info)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-white)]", children: "Will Be Granted" }));
+              case 'willBeRegistered':
+                  return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-info)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-white)]", children: "Will Be Registered" }));
+              case 'actionRequired':
+                  return (jsxRuntimeExports.jsx("span", { className: "inline-block cursor-default rounded-[15px] bg-[var(--crowdin-warning-bg)] px-3 py-1 text-center text-xs font-medium text-[var(--crowdin-warning)]", children: "Action Required" }));
+              case 'granted':
+              default:
+                  return jsxRuntimeExports.jsx("crowdin-p", { children: EMPTY_PERMISSION_VALUE });
+          }
       }
-      function sanitizeHTML(str) {
-          const tempDiv = document.createElement('div');
-          tempDiv.textContent = str;
-          return tempDiv.innerHTML;
+      function renderPermissionUsers(row) {
+          if (!row || row.users.length === 0) {
+              return row ? renderPermissionStatus(row.status) : null;
+          }
+          return (jsxRuntimeExports.jsx("ul", { className: "m-0 list-none p-0", children: row.users.map((user) => (jsxRuntimeExports.jsx("li", { className: "mb-1 text-sm last:mb-0", children: jsxRuntimeExports.jsx("crowdin-p", { children: user }) }, user))) }));
+      }
+      function renderPermissionRowDescription(row) {
+          if (!(row === null || row === void 0 ? void 0 : row.description)) {
+              return null;
+          }
+          return (jsxRuntimeExports.jsx("div", { className: row.isWarning
+                  ? 'mt-1 text-xs text-[var(--crowdin-warning)]'
+                  : 'mt-1 text-xs text-[var(--crowdin-text-muted)]', children: row.description }));
       }
       function openModal(modal) {
+          if (!modal) {
+              return;
+          }
           modal.style.display = 'block';
           modal.open();
       }
       function closeModal(modal) {
+          if (!modal) {
+              return;
+          }
           modal.style.display = 'none';
           modal.close();
       }
-      function settingsFieldChange(el) {
-          el.removeAttribute('error');
-          el.removeAttribute('error-text');
+      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 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);
+      return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-[1420px] px-6 py-4", children: [jsxRuntimeExports.jsxs("div", { className: "mb-2.5 text-right", children: [notice && (jsxRuntimeExports.jsxs("crowdin-alert", { id: "notice", title: notice.title, ...(!notice.icon ? { 'no-icon': 'true' } : {}), ...(notice.type ? { type: notice.type } : {}), style: { display: isNoticeVisible ? 'block' : 'none', marginBottom: '12px' }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", children: jsxRuntimeExports.jsx("p", { className: "m-0", dangerouslySetInnerHTML: { __html: notice.content } }) }), notice.close && (jsxRuntimeExports.jsx("crowdin-button", { onClick: () => closeAlert('notice'), class: "absolute top-0 right-0", icon: true, children: "close" }))] })), checkSubscription && (jsxRuntimeExports.jsx("crowdin-alert", { id: "subscription-info", "no-icon": "true", type: "warning", style: { display: subscriptionInfo ? 'block' : 'none', marginBottom: '12px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntimeExports.jsx("p", { className: "m-0", children: subscriptionInfo ? `Your trial expires in ${subscriptionInfo.daysLeft} days.` : '' }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-2", primary: true, onClick: () => {
+                                                  if (subscriptionInfo === null || subscriptionInfo === void 0 ? void 0 : subscriptionInfo.subscribeLink) {
+                                                      window.open(subscriptionInfo.subscribeLink, '_blank', 'noopener,noreferrer');
+                                                  }
+                                              }, children: "Subscribe" })] }) })), jsxRuntimeExports.jsxs("div", { id: "buttons", className: "flex w-full items-center justify-between", children: [jsxRuntimeExports.jsxs("div", { className: "mr-auto", children: [jsxRuntimeExports.jsx("span", { style: { display: isErrorLogsVisible ? undefined : 'none' }, children: jsxRuntimeExports.jsx("crowdin-button", { id: "show-integration-btn", "icon-before": "arrow_back", onClick: () => showIntegration(), children: "Integration" }) }), jsxRuntimeExports.jsx("span", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx("crowdin-button", { id: "show-error-logs-btn", "icon-before": "list", onClick: () => showErrorLogs(), children: "Error logs" }) })] }), isManager && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "link", onClick: () => showPermissionsDialog(), children: "Share" })), infoModal && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "info", onClick: () => openModal(infoModalRef.current), children: infoModal.title })), configurationFields && (jsxRuntimeExports.jsx("crowdin-button", { "icon-before": "settings", onClick: () => {
+                                              openModal(settingsModalRef.current);
                                               fillSettingsForm();
-                                          }, children: "Settings" })), jsxRuntimeExports.jsx("crowdin-button", { ...(!isOwner ? { disabled: true, title: 'Only the owner can log out' } : {}), "icon-before": "account_circle", onClick: () => integrationLogout(), children: "Log out" })] })] }), jsxRuntimeExports.jsx("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
+                                          }, children: "Settings" })), jsxRuntimeExports.jsx("crowdin-button", { ...(!isOwner ? { disabled: true, title: 'Only the owner can log out' } : {}), "icon-before": "account_circle", onClick: () => integrationLogout(), children: "Log out" })] })] }), jsxRuntimeExports.jsx("div", { style: { display: isErrorLogsVisible ? 'none' : undefined }, children: jsxRuntimeExports.jsx("crowdin-simple-integration", { ref: appComponent, "async-progress": true, ...((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) ? { 'skip-crowdin-auto-schedule': true } : {}), ...((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration) ? { 'skip-integration-auto-schedule': true } : {}), ...((withCronSync === null || withCronSync === void 0 ? void 0 : withCronSync.crowdin) || (webhooks === null || webhooks === void 0 ? void 0 : webhooks.crowdin) ? { 'crowdin-schedule': 'true' } : {}), ...((withCronSync === null || withCronSync === void 0 ? void 0 : withCronSync.integration) || (webhooks === null || webhooks === void 0 ? void 0 : webhooks.integration)
+                                  ? { 'integration-schedule': 'true' }
+                                  : {}), ...(integrationOneLevelFetching ? { 'integration-one-level-fetching': 'true' } : {}), ...(integrationSearchListener ? { 'allow-integration-filter-change-listener': 'true' } : {}), ...(integrationPagination ? { 'integration-load-more-files': 'true' } : {}), "integration-name": name, "integration-logo": "logo.png", ...(((_a = integrationButtonMenuItems === null || integrationButtonMenuItems === void 0 ? void 0 : integrationButtonMenuItems.length) !== null && _a !== void 0 ? _a : 0) > 0
+                                  ? { 'integration-button-menu-items': integrationButtonMenuItems }
+                                  : {}), ...(((_b = crowdinButtonMenuItems === null || crowdinButtonMenuItems === void 0 ? void 0 : crowdinButtonMenuItems.length) !== null && _b !== void 0 ? _b : 0) > 0
+                                  ? { 'crowdin-button-menu-items': crowdinButtonMenuItems }
+                                  : {}), ...((filtering === null || filtering === void 0 ? void 0 : filtering.crowdinLanguages) ? { 'crowdin-filter': true } : {}), ...((filtering === null || filtering === void 0 ? void 0 : filtering.integrationFilterConfig)
+                                  ? {
+                                      'integration-filter': true,
+                                      'integration-filter-config': filtering.integrationFilterConfig,
+                                  }
+                                  : {}) }) }), jsxRuntimeExports.jsxs("div", { id: "user-errors", style: { display: isErrorLogsVisible ? undefined : 'none' }, children: [jsxRuntimeExports.jsx("crowdin-show-as-table", { ref: userErrorsTableRef, "is-loading": true, id: "user-errors-table", "is-searchable": true, "total-records": "25", "search-placeholder": "Search something" }), jsxRuntimeExports.jsx("crowdin-alert", { children: "This table displays the most recent error logs from the past month. Logs older than one month will be automatically deleted." })] })] }), jsxRuntimeExports.jsx("crowdin-toasts", {}), jsxRuntimeExports.jsx("crowdin-async-progress", { ref: asyncProgressRef, cancelAsyncAction: "" }), jsxRuntimeExports.jsxs("crowdin-modal", { ref: subscriptionModal, style: { display: 'none' }, id: "subscription-modal", "modal-width": "50", "close-button": "false", children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("crowdin-alert", { type: "warning", children: ["Subscribe to continue using the ", name, " app."] }) }), jsxRuntimeExports.jsxs("div", { slot: "footer", children: [jsxRuntimeExports.jsx("crowdin-button", { primary: true, onClick: () => window.open(subscriptionLink.current, '_blank', 'noopener,noreferrer'), children: "Subscribe" }), jsxRuntimeExports.jsx("crowdin-button", { outlined: true, onClick: () => window.open('https://crowdin.com/contacts', '_blank', 'noopener,noreferrer'), children: "Contact us" }), jsxRuntimeExports.jsx("crowdin-button", { class: "ml-2.5", secondary: true, onClick: () => integrationLogout(), children: "Log out" })] })] }), jsxRuntimeExports.jsxs("crowdin-modal", { ref: permissionsModalRef, style: { display: 'none' }, id: "permissions-modal", "modal-title": "Share", "close-button-title": "Close", "close-button": true, "body-overflow-unset": true, children: [jsxRuntimeExports.jsx("div", { className: modalLoaders['permissions-modal']
+                              ? 'absolute inset-0 z-[4] flex items-center justify-center bg-white/30'
+                              : 'hidden', children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("crowdin-users-select", { ref: usersSelectRef, "allow-new-options": true, "is-multi": true, "is-searchable": true, id: "users", label: "Users", "help-text": "Search for members by name, username, email, or invite new ones using their email.", "is-position-fixed": true, children: permissionUserOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.id, children: option.label }, option.id))) }, "users") }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: isPermissionsConfirmVisible ? 'mt-4' : 'hidden', children: jsxRuntimeExports.jsxs("table", { className: "w-full border-separate border-spacing-0", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left text-sm", style: { width: '40%' }, children: "Access" }), jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left text-sm", style: { width: '35%' }, children: "Users" }), jsxRuntimeExports.jsx("th", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right text-sm", style: { width: '20%' }, children: "Upcoming changes" })] }) }), jsxRuntimeExports.jsxs("tbody", { children: [hasOrganization && (jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Registration in Organization" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization)] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.organization) &&
+                                                                          renderPermissionStatus(permissionsSummary.organization.status) })] })), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: jsxRuntimeExports.jsx("crowdin-p", { children: "Project Manager Access" }) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.project) &&
+                                                                          renderPermissionStatus(permissionsSummary.project.status) })] }), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Application Visibility Access" }), renderPermissionRowDescription(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings)] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationSettings) &&
+                                                                          renderPermissionStatus(permissionsSummary.applicationSettings.status) })] }), jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsxs("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: [jsxRuntimeExports.jsx("crowdin-p", { children: "Access to the Integration" }), jsxRuntimeExports.jsx("div", { className: "mt-1 text-xs text-[var(--crowdin-text-muted)]", children: "This provides access to sync files and modify the current integration settings." })] }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-left align-top", children: renderPermissionUsers(permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) }), jsxRuntimeExports.jsx("td", { className: "border-b border-[var(--crowdin-border-color)] p-4 text-right align-top", children: (permissionsSummary === null || permissionsSummary === void 0 ? void 0 : permissionsSummary.applicationCredentials) &&
+                                                                          renderPermissionStatus(permissionsSummary.applicationCredentials.status) })] })] })] }) }), zenModeUrl && (jsxRuntimeExports.jsx("div", { className: "mt-4", children: jsxRuntimeExports.jsx("crowdin-input", { "with-fixed-height": true, label: "Zen Mode link", "help-text": "This focused view allows you to concentrate solely on the Integrations section, eliminating other distractions.", value: zenModeUrl, name: "zenModeLink", "with-copy-button": true }) }))] })] }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "confirm-users-btn", outlined: true, onClick: () => inviteUsers(), children: "Save" }) })] }), excludedTargetLanguages && (jsxRuntimeExports.jsx("crowdin-modal", { ref: languageModal, style: { display: 'none' }, "modal-width": "50", "modal-title": "Select Target Languages for Translation", id: "excluded-languages", children: languageModalState && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("crowdin-select", { ref: languageSelectRef, "is-multi": true, "is-searchable": true, "is-position-fixed": true, "close-on-select": "false", name: "languages", id: "language-select", label: "Languages", children: languageModalState.languages.map((language) => (jsxRuntimeExports.jsx("option", { value: language.id, children: language.name }, language.id))) }) }), jsxRuntimeExports.jsxs("div", { slot: "footer", children: [jsxRuntimeExports.jsx("span", { hidden: languageModalState.action !== 'updateCrowdinTargetLanguages', children: jsxRuntimeExports.jsx("crowdin-button", { id: "update-crowdin-target-languages", outlined: true, onClick: () => updateCrowdinFilesTargetLanguages(), children: "Update Target Languages" }) }), jsxRuntimeExports.jsx("span", { hidden: languageModalState.action !== 'syncToCrowdin', children: jsxRuntimeExports.jsx("crowdin-button", { id: "upload-exclude-languages", outlined: true, onClick: () => uploadFilesToCrowdinWithExcludedLanguages(), children: jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center gap-1", children: [jsxRuntimeExports.jsx("span", { children: "Sync to" }), jsxRuntimeExports.jsx("crowdin-logo", { "is-icon": true })] }) }) })] })] })) })), infoModal && (jsxRuntimeExports.jsx("crowdin-modal", { ref: infoModalRef, style: { display: 'none' }, id: "info-modal", "modal-width": "50", "modal-title": infoModal.title, "close-button-title": "Close", children: jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: infoModal.content } }) })), configurationFields && (jsxRuntimeExports.jsxs("crowdin-modal", { ref: settingsModalRef, style: { display: 'none' }, id: "settings-modal", "modal-width": "65", "modal-title": "Settings", "close-button-title": "Close", children: [jsxRuntimeExports.jsx("div", { className: modalLoaders['settings-modal']
+                              ? 'absolute inset-0 z-[4] flex items-center justify-center bg-white/30'
+                              : 'hidden', children: jsxRuntimeExports.jsx("crowdin-progress-indicator", {}) }), jsxRuntimeExports.jsx("div", { id: "modal-content", children: jsxRuntimeExports.jsx("crowdin-tabs", { "tabs-config": JSON.stringify(configurationFields.map((f) => f.name)), "active-tab": "1", children: configurationFields.map((tab, tabIndex) => (jsxRuntimeExports.jsx("div", { slot: `tab-${tabIndex + 1}`, children: jsxRuntimeExports.jsx("div", { children: tab.fields.map((field, fieldIndex) => (jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [renderConfigField(field, settingsFieldChange, registerSettingsField), jsxRuntimeExports.jsx("div", { style: { padding: '8px' }, ...(field.dependencySettings
                                                       ? { 'data-dependency': field.dependencySettings }
-                                                      : {}) })] }, field.key))) }) }, tabIndex))) }) }), 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" })] }));
+                                                      : {}) })] }, field.key || `${tabIndex}-${fieldIndex}`))) }) }, tabIndex))) }) }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { id: "settings-save-btn", outlined: true, disabled: isSettingsSaveDisabled, onClick: () => saveSettings(), children: "Save" }) })] })), ((syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.crowdin) || (syncNewElements === null || syncNewElements === void 0 ? void 0 : syncNewElements.integration)) && (jsxRuntimeExports.jsxs("crowdin-modal", { ref: scheduleModalRef, style: { display: 'none' }, id: "confirm-schedule-modal", "modal-width": "50", "modal-title": "Synchronization options", "close-button-title": "Close", "close-button": "true", "body-overflow-unset": true, children: [jsxRuntimeExports.jsx("crowdin-checkbox", { ref: selectedFilesCheckboxRef, id: "selected-files", name: "selected-files", label: "Selected files", class: "hydrated", checked: scheduleModalState.selectedFiles, value: String(scheduleModalState.selectedFiles), onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("crowdin-checkbox", { ref: allFolderFilesCheckboxRef, id: "all-folder-files", name: "all-folder-files", label: "All files in the folder", class: "hydrated", hidden: !scheduleModalState.showAllFolderFiles, checked: scheduleModalState.allFolderFiles, value: String(scheduleModalState.allFolderFiles), onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("crowdin-checkbox", { ref: newFilesCheckboxRef, id: "new-files", name: "new-files", label: "New files", class: "hydrated", hidden: !scheduleModalState.showNewFiles, checked: scheduleModalState.newFiles, value: String(scheduleModalState.newFiles), ...(scheduleModalState.newFilesClearSelection ? { 'clear-selection': '' } : {}), onChange: () => onChangeAutoSynchronizationOptions() }), jsxRuntimeExports.jsx("div", { slot: "footer", children: jsxRuntimeExports.jsx("crowdin-button", { outlined: true, id: "save-schedule-sync", disabled: isScheduleSaveDisabled, onClick: () => saveScheduleSync(), children: "Save" }) })] })), jsxRuntimeExports.jsx("crowdin-modal", { ref: userErrorDetailModalRef, style: { display: 'none' }, id: "user-error-detail", "close-button-title": "Close", "close-button": "true", children: selectedUserError && getUserErrorDetail(selectedUserError) })] }));
   };
 
-  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