@crowdin/app-project-module 0.10.2 → 0.11.1

package/README.md

@@ -405,6 +405,7 @@ const configuration = {
     customFileFormat: {
         type: 'type-xyz',
         multilingual: false,
+        autoUploadTranslations: true, //useful when single language format
         signaturePatterns: {
             fileName: '^.+\.xml$'
         },

package/out/handlers/custom-file-format/process.js

@@ -69,9 +69,19 @@ function handleParseFile(baseUrl, dataFolder, config, file, req) {
             }
         }
         if (res.strings) {
-            const stringsJson = JSON.stringify(res.strings);
+            let strings = res.strings;
+            if (config.autoUploadTranslations) {
+                strings = strings.map(string => {
+                    const translations = {};
+                    req.targetLanguages
+                        .map(targetLanguage => targetLanguage.id)
+                        .forEach(targetLanguage => (translations[targetLanguage] = { text: string.text }));
+                    return Object.assign(Object.assign({}, string), { translations });
+                });
+            }
+            const stringsJson = JSON.stringify(strings);
             if (Buffer.byteLength(stringsJson, 'utf8') < MAX_BODY_SIZE) {
-                response.strings = res.strings;
+                response.strings = strings;
             }
             else {
                 const storedFile = yield storeFile(stringsJson, dataFolder);

package/out/handlers/main.js

@@ -49,6 +49,8 @@ function handle(config, integration) {
             options.config = JSON.stringify(req.integrationSettings || {});
         }
         options.infoModal = integration.infoModal;
+        options.withCronSync = integration.withCronSync;
+        options.withWebhookSync = integration.withWebhookSync;
         return res.render(view, options);
     }));
 }

package/out/handlers/sync-settings-save.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="qs" />
+import { Response } from 'express';
+export default function handle(): (req: import("express").Request<import("express-serve-static-core").ParamsDictionary, any, any, import("qs").ParsedQs, Record<string, any>>, res: Response<any, Record<string, any>>, next: Function) => void;

package/out/handlers/sync-settings-save.js

@@ -0,0 +1,27 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("../util");
+const storage_1 = require("../storage");
+function handle() {
+    return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
+        const { files, type, provider } = req.body;
+        const existingSettings = yield (0, storage_1.getSyncSettings)(req.crowdinContext.clientId, req.crowdinContext.crowdinId, type, provider);
+        if (existingSettings) {
+            yield (0, storage_1.updateSyncSettings)(JSON.stringify(files), req.crowdinContext.clientId, req.crowdinContext.crowdinId, type, provider);
+        }
+        else {
+            yield (0, storage_1.saveSyncSettings)(JSON.stringify(files), req.crowdinContext.clientId, req.crowdinContext.crowdinId, type, provider);
+        }
+        res.status(204).end();
+    }));
+}
+exports.default = handle;

package/out/handlers/sync-settings.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="qs" />
+import { Response } from 'express';
+export default function handle(): (req: import("express").Request<import("express-serve-static-core").ParamsDictionary, any, any, import("qs").ParsedQs, Record<string, any>>, res: Response<any, Record<string, any>>, next: Function) => void;

package/out/handlers/sync-settings.js

@@ -0,0 +1,25 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("../util");
+const storage_1 = require("../storage");
+function handle() {
+    return (0, util_1.runAsyncWrapper)((req, res) => __awaiter(this, void 0, void 0, function* () {
+        let files = {};
+        const provider = req.params.provider;
+        const syncSettings = yield (0, storage_1.getSyncSettingsByProvider)(req.crowdinContext.clientId, provider);
+        if (syncSettings) {
+            files = JSON.parse(syncSettings.files) || [];
+        }
+        res.send(files);
+    }));
+}
+exports.default = handle;

package/out/index.js

@@ -48,6 +48,8 @@ const integration_data_1 = __importDefault(require("./handlers/integration-data"
 const integration_login_1 = __importDefault(require("./handlers/integration-login"));
 const integration_logout_1 = __importDefault(require("./handlers/integration-logout"));
 const integration_update_1 = __importDefault(require("./handlers/integration-update"));
+const sync_settings_save_1 = __importDefault(require("./handlers/sync-settings-save"));
+const sync_settings_1 = __importDefault(require("./handlers/sync-settings"));
 const main_1 = __importDefault(require("./handlers/main"));
 const manifest_1 = __importDefault(require("./handlers/manifest"));
 const oauth_login_1 = __importDefault(require("./handlers/oauth-login"));
@@ -93,6 +95,8 @@ function addCrowdinEndpoints(app, config) {
         app.get('/api/integration/data', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, integration_data_1.default)(integrationLogic));
         app.post('/api/crowdin/update', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, crowdin_update_1.default)(config, integrationLogic));
         app.post('/api/integration/update', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, integration_update_1.default)(config, integrationLogic));
+        app.get('/api/sync-settings/:provider', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, sync_settings_1.default)());
+        app.post('/api/sync-settings', json_response_1.default, (0, crowdin_client_1.default)(config), (0, integration_credentials_1.default)(config, integrationLogic), (0, sync_settings_save_1.default)());
         if (integrationLogic.oauthLogin) {
             app.get((0, util_1.getOauthRoute)(integrationLogic), (0, oauth_login_1.default)(config, integrationLogic));
         }
@@ -101,6 +105,13 @@ function addCrowdinEndpoints(app, config) {
                 cron.schedule(job.expression, () => (0, util_1.runJob)(config, integrationLogic, job).catch(console.error));
             });
         }
+        if (integrationLogic.withCronSync) {
+            cron.schedule('0 * * * *', () => (0, util_1.filesCron)(config, integrationLogic, '1').catch(console.error));
+            cron.schedule('0 */3 * * *', () => (0, util_1.filesCron)(config, integrationLogic, '3').catch(console.error));
+            cron.schedule('0 */6 * * *', () => (0, util_1.filesCron)(config, integrationLogic, '6').catch(console.error));
+            cron.schedule('0 */12 * * *', () => (0, util_1.filesCron)(config, integrationLogic, '12').catch(console.error));
+            cron.schedule('0 0 * * *', () => (0, util_1.filesCron)(config, integrationLogic, '24').catch(console.error));
+        }
     }
     if (config.customFileFormat) {
         app.post('/process', (0, process_1.default)(config.baseUrl, config.customFileFormat.filesFolder || config.dbFolder, config.customFileFormat));

package/out/models/index.d.ts

@@ -127,6 +127,14 @@ export interface IntegrationLogic {
      * background jobs that will be executed for each crowdin project and user
      */
     cronJobs?: CronJob[];
+    withCronSync?: {
+        crowdin: boolean;
+        integration: boolean;
+    };
+    withWebhookSync?: {
+        crowdin: boolean;
+        integration: boolean;
+    };
 }
 export interface ConfigurationField {
     key: string;
@@ -321,9 +329,13 @@ export interface CustomFileFormatLogic {
      */
     multilingual?: boolean;
     /**
-     *  Contains fileName and/or fileContent regular expressions used to detect file type when uploading a new source file via UI (or via API without specified type parameter). If the file matches regular expressions, it's labeled as a custom format file.
+     * Contains fileName and/or fileContent regular expressions used to detect file type when uploading a new source file via UI (or via API without specified type parameter). If the file matches regular expressions, it's labeled as a custom format file.
      */
     signaturePatterns?: SignaturePatterns;
+    /**
+     * Flag to automatically upload translations
+     */
+    autoUploadTranslations?: boolean;
     /**
      * Used for initial source file upload, source file update, and translation upload
      */
@@ -371,7 +383,12 @@ export interface ProcessFileString {
     hasPlurals?: boolean;
     labels?: string[];
     text: string | SourceStringsModel.PluralText;
-    translations?: any;
+    translations?: StringTranslations;
+}
+export interface StringTranslations {
+    [language: string]: {
+        text: string | SourceStringsModel.PluralText;
+    };
 }
 export interface CustomMTLogic {
     translate: (client: Crowdin, context: CrowdinContextInfo, projectId: number, source: string, target: string, strings: string[]) => Promise<string[]>;
@@ -411,3 +428,10 @@ export interface CrowdinAppUtilities {
         client?: Crowdin;
     }>;
 }
+export interface IntegrationSyncSettings {
+    id: string;
+    files?: any;
+    integrationId: string;
+    crowdinId: string;
+    provider: string;
+}

package/out/storage/index.d.ts

@@ -1,4 +1,4 @@
-import { CrowdinCredentials, IntegrationCredentials } from '../models';
+import { CrowdinCredentials, IntegrationCredentials, IntegrationSyncSettings } from '../models';
 export declare function connect(folder: string): Promise<void>;
 export declare function saveCrowdinCredentials(credentials: CrowdinCredentials): Promise<void>;
 export declare function updateCrowdinCredentials(credentials: CrowdinCredentials): Promise<void>;
@@ -15,3 +15,8 @@ export declare function saveMetadata(id: string, metadata: any): Promise<void>;
 export declare function updateMetadata(id: string, metadata: any): Promise<void>;
 export declare function getMetadata(id: string): Promise<any | undefined>;
 export declare function deleteMetadata(id: string): Promise<void>;
+export declare function getSyncSettingsByProvider(integrationId: string, provider: string): Promise<IntegrationSyncSettings | undefined>;
+export declare function getAllSyncSettingsByType(type: string): Promise<IntegrationSyncSettings[]>;
+export declare function saveSyncSettings(files: any, integrationId: string, crowdinId: string, type: string, provider: string): Promise<void>;
+export declare function updateSyncSettings(files: any, integrationId: string, crowdinId: string, type: string, provider: string): Promise<void>;
+export declare function getSyncSettings(integrationId: string, crowdinId: string, type: string, provider: string): Promise<IntegrationSyncSettings | undefined>;

package/out/storage/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteMetadata = exports.getMetadata = exports.updateMetadata = exports.saveMetadata = exports.deleteIntegrationCredentials = exports.getAllIntegrationCredentials = exports.getIntegrationCredentials = exports.updateIntegrationConfig = exports.updateIntegrationCredentials = exports.saveIntegrationCredentials = exports.deleteCrowdinCredentials = exports.getAllCrowdinCredentials = exports.getCrowdinCredentials = exports.updateCrowdinCredentials = exports.saveCrowdinCredentials = exports.connect = void 0;
+exports.getSyncSettings = exports.updateSyncSettings = exports.saveSyncSettings = exports.getAllSyncSettingsByType = exports.getSyncSettingsByProvider = exports.deleteMetadata = exports.getMetadata = exports.updateMetadata = exports.saveMetadata = exports.deleteIntegrationCredentials = exports.getAllIntegrationCredentials = exports.getIntegrationCredentials = exports.updateIntegrationConfig = exports.updateIntegrationCredentials = exports.saveIntegrationCredentials = exports.deleteCrowdinCredentials = exports.getAllCrowdinCredentials = exports.getCrowdinCredentials = exports.updateCrowdinCredentials = exports.saveCrowdinCredentials = exports.connect = void 0;
 const path_1 = require("path");
 const sqlite3_1 = __importDefault(require("sqlite3"));
 let _res;
@@ -75,6 +75,17 @@ function connect(folder) {
             );
             `, []);
             yield _run(`
+            create table if not exists sync_settings
+            (
+                id             integer not null primary key autoincrement,
+                files          varchar     null,
+                integration_id varchar not null,
+                crowdin_id     varchar not null,
+                type           varchar not null,
+                provider       varchar not null
+            );
+            `, []);
+            yield _run(`
             create table if not exists app_metadata
             (
                 id        varchar not null primary key,
@@ -167,6 +178,7 @@ function deleteCrowdinCredentials(id) {
     return __awaiter(this, void 0, void 0, function* () {
         yield run('DELETE FROM crowdin_credentials where id = ?', [id]);
         yield run('DELETE FROM integration_credentials where crowdin_id = ?', [id]);
+        yield run('DELETE FROM sync_settings WHERE crowdin_id = ?', [id]);
     });
 }
 exports.deleteCrowdinCredentials = deleteCrowdinCredentials;
@@ -203,6 +215,7 @@ function getAllIntegrationCredentials(crowdinId) {
 exports.getAllIntegrationCredentials = getAllIntegrationCredentials;
 function deleteIntegrationCredentials(id) {
     return run('DELETE FROM integration_credentials where id = ?', [id]);
+    return run('DELETE FROM sync_settings where integration_id = ?', [id]);
 }
 exports.deleteIntegrationCredentials = deleteIntegrationCredentials;
 function saveMetadata(id, metadata) {
@@ -228,3 +241,41 @@ function deleteMetadata(id) {
     });
 }
 exports.deleteMetadata = deleteMetadata;
+function getSyncSettingsByProvider(integrationId, provider) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const row = yield get('SELECT id, files, integration_id as integrationId, crowdin_id as crowdinId, type, provider FROM sync_settings WHERE integration_id = ? AND provider = ?', [integrationId, provider]);
+        if (row) {
+            return row;
+        }
+    });
+}
+exports.getSyncSettingsByProvider = getSyncSettingsByProvider;
+function getAllSyncSettingsByType(type) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return each('SELECT id, files, integration_id as integrationId, crowdin_id as crowdinId, type, provider FROM sync_settings WHERE type = ?', [type]);
+    });
+}
+exports.getAllSyncSettingsByType = getAllSyncSettingsByType;
+function saveSyncSettings(files, integrationId, crowdinId, type, provider) {
+    return run('INSERT INTO sync_settings(files, integration_id, crowdin_id, type, provider) VALUES (?, ?, ?, ?, ?)', [
+        files,
+        integrationId,
+        crowdinId,
+        type,
+        provider,
+    ]);
+}
+exports.saveSyncSettings = saveSyncSettings;
+function updateSyncSettings(files, integrationId, crowdinId, type, provider) {
+    return run('UPDATE sync_settings SET files = ? WHERE integration_id = ? AND crowdin_id = ? AND type = ? AND provider = ?', [files, integrationId, crowdinId, type, provider]);
+}
+exports.updateSyncSettings = updateSyncSettings;
+function getSyncSettings(integrationId, crowdinId, type, provider) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const row = yield get('SELECT id, files, integration_id as integrationId, crowdin_id as crowdinId, type FROM sync_settings WHERE integration_id = ? AND crowdin_id = ? AND type = ? AND provider = ?', [integrationId, crowdinId, type, provider]);
+        if (row) {
+            return row;
+        }
+    });
+}
+exports.getSyncSettings = getSyncSettings;

package/out/util/index.d.ts

@@ -14,3 +14,4 @@ export declare function applyDefaults(config: Config, integration: IntegrationLo
 export declare function prepareCrowdinClient(config: Config, credentials: CrowdinCredentials): Promise<Crowdin>;
 export declare function prepareIntegrationCredentials(config: Config, integration: IntegrationLogic, integrationCredentials: IntegrationCredentials): Promise<any>;
 export declare function runJob(config: Config, integration: IntegrationLogic, job: CronJob): Promise<void>;
+export declare function filesCron(config: Config, integration: IntegrationLogic, period: string): Promise<void>;

package/out/util/index.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runJob = exports.prepareIntegrationCredentials = exports.prepareCrowdinClient = exports.applyDefaults = exports.getRootFolder = exports.getOauthRoute = exports.decryptData = exports.encryptData = exports.runAsyncWrapper = exports.CodeError = void 0;
+exports.filesCron = exports.runJob = exports.prepareIntegrationCredentials = exports.prepareCrowdinClient = exports.applyDefaults = exports.getRootFolder = exports.getOauthRoute = exports.decryptData = exports.encryptData = exports.runAsyncWrapper = exports.CodeError = void 0;
 const crowdin_api_client_1 = __importDefault(require("@crowdin/crowdin-api-client"));
 const crowdinAppFunctions = __importStar(require("@crowdin/crowdin-apps-functions"));
 const axios_1 = __importDefault(require("axios"));
@@ -156,6 +156,46 @@ function applyDefaults(config, integration) {
             ],
         };
     }
+    if (integration.withCronSync) {
+        const getUserSettings = integration.getConfiguration;
+        integration.getConfiguration = (projectId, crowdinClient, integrationCredentials) => __awaiter(this, void 0, void 0, function* () {
+            let fields = [];
+            if (getUserSettings) {
+                fields = yield getUserSettings(projectId, crowdinClient, integrationCredentials);
+            }
+            return [
+                {
+                    key: 'schedule',
+                    label: 'Sync schedule',
+                    helpText: 'Set the frequency for pushing sources and translations',
+                    type: 'select',
+                    options: [
+                        {
+                            value: '1',
+                            label: '1 hour',
+                        },
+                        {
+                            value: '3',
+                            label: '3 hours',
+                        },
+                        {
+                            value: '6',
+                            label: '6 hours',
+                        },
+                        {
+                            value: '12',
+                            label: '12 hours',
+                        },
+                        {
+                            value: '24',
+                            label: '24 hours',
+                        },
+                    ],
+                },
+                ...fields,
+            ];
+        });
+    }
 }
 exports.applyDefaults = applyDefaults;
 function prepareCrowdinClient(config, credentials) {
@@ -244,3 +284,31 @@ function runJob(config, integration, job) {
     });
 }
 exports.runJob = runJob;
+function filesCron(config, integration, period) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const syncSettingsList = yield (0, storage_1.getAllSyncSettingsByType)('schedule');
+        yield Promise.all(syncSettingsList.map((syncSettings) => __awaiter(this, void 0, void 0, function* () {
+            const files = JSON.parse(syncSettings.files);
+            const crowdinCredentials = yield (0, storage_1.getCrowdinCredentials)(syncSettings.crowdinId);
+            const integrationCredentials = yield (0, storage_1.getIntegrationCredentials)(syncSettings.integrationId);
+            if (crowdinCredentials && integrationCredentials) {
+                const intConfig = integrationCredentials.config
+                    ? JSON.parse(integrationCredentials.config)
+                    : { schedule: 24 };
+                if (period === intConfig.schedule) {
+                    const projectId = crowdinAppFunctions.getProjectId(integrationCredentials.id);
+                    const crowdinClient = yield prepareCrowdinClient(config, crowdinCredentials);
+                    const apiCredentials = yield prepareIntegrationCredentials(config, integration, integrationCredentials);
+                    const rootFolder = yield getRootFolder(config, integration, crowdinClient, projectId);
+                    if (syncSettings.provider === 'crowdin') {
+                        yield integration.updateIntegration(projectId, crowdinClient, apiCredentials, files, rootFolder, intConfig);
+                    }
+                    else {
+                        yield integration.updateCrowdin(projectId, crowdinClient, apiCredentials, files, rootFolder, intConfig);
+                    }
+                }
+            }
+        })));
+    });
+}
+exports.filesCron = filesCron;

package/out/views/login.handlebars

@@ -61,6 +61,8 @@
     <crowdin-toasts></crowdin-toasts>
 </body>
 <script type="text/javascript">
+    const loginButton = document.querySelector('crowdin-button');
+
     function oauthLogin() {
         const url = '{{{ oauthUrl }}}';
         const oauthWindow = window.open(url, '{{ name }}', 'location=0,status=0,width=800,height=400'); 
@@ -86,6 +88,8 @@
                 {{/ifeq}}
             {{/each}}
         };
+        loginButton.setAttribute('disabled', true);
+        loginButton.setAttribute('is-loading', true);
         checkOrigin()
             .then(queryParams =>
                 fetch(`api/login${queryParams}`, {
@@ -96,7 +100,11 @@
             )
             .then(checkResponse)
             .then(reloadLocation)
-            .catch(e => catchRejection(e, 'Credentials are not stored'));
+            .catch(e => catchRejection(e, 'Credentials are not stored'))
+            .finally(() => {
+                loginButton.setAttribute('disabled', false);
+                loginButton.setAttribute('is-loading', false);
+            });
     }
 </script>
 

package/out/views/main.handlebars

@@ -13,7 +13,22 @@
             {{/if}}
             <crowdin-button icon-before="account_circle" onclick="integrationLogout()">Log out</crowdin-button>
         </div>
-        <crowdin-simple-integration integration-name="{{name}}" integration-logo="logo.png">
+        <crowdin-simple-integration
+                {{#if withWebhookSync.crowdin}}
+                    crowdin-sync="true"
+                {{/if}}
+                {{#if withWebhookSync.integration}}
+                    integration-sync="true"
+                {{/if}}
+                {{#if withCronSync.crowdin}}
+                    crowdin-schedule="true"
+                {{/if}}
+                {{#if withCronSync.integration}}
+                    integration-schedule="true"
+                {{/if}}
+                integration-name="{{name}}"
+                integration-logo="logo.png"
+        >
         </crowdin-simple-integration>
     </div>
     <crowdin-toasts></crowdin-toasts>
@@ -25,7 +40,7 @@
     </crowdin-modal>
     {{/if}}
     {{#if configurationFields}}
-        <crowdin-modal id="settings-modal" modal-width="50" modal-title="Settings" close-button-title="Close">
+        <crowdin-modal id="settings-modal" body-overflow-unset modal-width="50" modal-title="Settings" close-button-title="Close">
             <div id="modal-content">
                 {{#each configurationFields}}
                     {{#ifeq type "checkbox"}}
@@ -82,7 +97,6 @@
     {{/if}}
 </body>
 <script type="text/javascript">
-
     document.body.addEventListener('refreshFilesList', (e) => {
         if (e.detail.refreshIntegration) {
             getIntegrationData();
@@ -146,6 +160,9 @@
             .then((res) => {
                 project = res;
                 appComponent.setCrowdinLanguagesData(project.targetLanguages)
+                {{#if withCronSync}}
+                    getSyncSettings('crowdin');
+                {{/if}}
             })
             .catch(e => catchRejection(e, 'Can\'t fetch Crowdin data'))
             .finally(() => (appComponent.setAttribute('is-crowdin-loading', false)));
@@ -173,10 +190,22 @@
                 });
                 appComponent.setIntegrationFilesData(tree);
             })
+            {{#if withCronSync}}
+                .then(() => getSyncSettings('integration'))
+            {{/if}}
             .catch(e => catchRejection(e, 'Can\'t fetch {{name}} templates'))
             .finally(() => (appComponent.setAttribute('is-integration-loading', false)));
     }
 
+    function getSyncSettings(provider) {
+        const filesComponent = appComponent.querySelector(`#${provider}-files`);
+        checkOrigin()
+            .then(restParams => fetch(`/api/sync-settings/${provider}` + restParams))
+            .then(checkResponse)
+            .then((res) => filesComponent.addScheduledFiles(res))
+            .catch(e => catchRejection(e, 'Can\'t fetch file progress'));
+    }
+
     function getFileProgress(fileId) {
         checkOrigin()
             .then(restParams => fetch(`api/crowdin/file-progress/${fileId}` + restParams))
@@ -311,6 +340,69 @@
             }
         }
     });
+
+    {{#if withCronSync}}
+        document.body.addEventListener('integrationScheduleSync', setIntegrationScheduleSync);
+        document.body.addEventListener('crowdinScheduleSync', setCrowdinScheduleSync);
+        document.body.addEventListener('crowdinDisableSync', disableCrowdinSync);
+        document.body.addEventListener('integrationDisableSync', disableIntegrationSync);
+
+        async function setIntegrationScheduleSync(e) {
+            if (e.detail.length === 0) {
+                showToast('Select templates which will be pushed to Crowdin');
+                return;
+            }
+            appComponent.setAttribute('is-integration-loading', true);
+            const syncedFiles = await appComponent.getIntegrationScheduleSync();
+
+            updateSyncSettings(syncedFiles, 'schedule', 'integration');
+        }
+
+        async function setCrowdinScheduleSync(e) {
+            if (e.detail.length === 0) {
+                showToast('Select templates which will be pushed to Crowdin');
+                return;
+            }
+            appComponent.setAttribute('is-crowdin-loading', true);
+            const syncedFiles = await appComponent.getCrowdinScheduleSync();
+
+            updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
+        }
+
+        async function disableIntegrationSync(e) {
+            if (e.detail.length === 0) {
+                showToast('Select templates which will be pushed to Crowdin');
+                return;
+            }
+            appComponent.setAttribute('is-integration-loading', true);
+            const syncedFiles = await appComponent.getIntegrationScheduleSync();
+
+            updateSyncSettings(syncedFiles, 'schedule', 'integration');
+        }
+
+        async function disableCrowdinSync(e) {
+            if (e.detail.length === 0) {
+                showToast('Select templates which will be pushed to Crowdin');
+                return;
+            }
+            appComponent.setAttribute('is-crowdin-loading', true);
+            const syncedFiles = await appComponent.getCrowdinScheduleSync();
+
+            updateSyncSettings(syncedFiles, 'schedule', 'crowdin');
+        }
+
+        function updateSyncSettings(files, type, provider) {
+            checkOrigin()
+                .then(restParams => fetch('api/sync-settings' + restParams, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ files, type,  provider })
+                }))
+                .then(checkResponse)
+                .catch(e => catchRejection(e, 'Can\'t save schedule sync settings'))
+                .finally(() => (appComponent.setAttribute(`is-${provider}-loading`, false)));
+        }
+    {{/if}}
 </script>
 
 </html>

package/out/views/partials/head.handlebars

@@ -4,7 +4,10 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title></title>
     <link rel="stylesheet" href="assets/css/styles.css">
-    <script src="https://crowdin-web-components.s3.amazonaws.com/crowdin-web-components.js"></script>
+    <script type="module"
+            src="https://crowdin-web-components.s3.amazonaws.com/crowdin-web-components/crowdin-web-components.esm.js"></script>
+    <script nomodule=""
+            src="https://crowdin-web-components.s3.amazonaws.com/crowdin-web-components/crowdin-web-components.js"></script>
     <script type="text/javascript" src="https://cdn.crowdin.com/apps/dist/iframe.js"></script>
     <script type="text/javascript" src="assets/js/polyfills/promise.js"></script>
     <script type="text/javascript" src="assets/js/polyfills/fetch.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdin/app-project-module",
-  "version": "0.10.2",
+  "version": "0.11.1",
   "description": "Module that generates for you all common endpoints for serving standalone Crowdin App",
   "main": "out/index.js",
   "types": "out/index.d.ts",