@crowdin/app-project-module 2.2.0 → 2.3.0

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

@@ -46388,6 +46388,122 @@ export default theme;`;
 
 	var clientExports = requireClient();
 
+	/// <reference path="../types.d.ts" />
+	const postPromises = {};
+	let isInitialized = false;
+	let origin = null;
+	let clientId = null;
+	let restParams = '';
+	let frameData$1;
+	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;
+	    frameData$1 = JSON.parse(window.name);
+	    window.addEventListener('message', handleMessage);
+	    isInitialized = true;
+	}
+	function ensureInitialized() {
+	    if (!isInitialized) {
+	        initializeCrowdinIframeContext();
+	    }
+	}
+	function getFrameData() {
+	    ensureInitialized();
+	    return frameData$1;
+	}
+	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);
+	        });
+	    });
+	}
+
 	const validateWidgetValue = (value) => {
 	    if (Array.isArray(value)) {
 	        return value;
@@ -47471,6 +47587,8 @@ export default theme;`;
 	        } }));
 	};
 
+	initializeCrowdinIframeContext();
+	const frameData = getFrameData();
 	const defaultAppearance = 'light';
 	const getAppearance = (crowdinAppearance) => {
 	    if (!['light', 'dark'].includes(crowdinAppearance)) {
@@ -47483,9 +47601,25 @@ export default theme;`;
 	        palette: {
 	            mode,
 	        },
-	        ...(mode === 'dark'
-	            ? {
-	                components: {
+	        components: {
+	            MuiButton: {
+	                styleOverrides: {
+	                    root: ({ ownerState }) => ownerState.type === 'submit'
+	                        ? {
+	                            background: '#fff',
+	                            color: '#263238',
+	                            boxShadow: 'none',
+	                            border: '1px solid rgba(38,50,56,.24)',
+	                            '&:hover': {
+	                                background: 'rgba(236, 239, 241, .54)',
+	                                boxShadow: 'none',
+	                            },
+	                        }
+	                        : {},
+	                },
+	            },
+	            ...(mode === 'dark'
+	                ? {
 	                    MuiTypography: {
 	                        styleOverrides: {
 	                            root: {
@@ -47501,9 +47635,9 @@ export default theme;`;
 	                            },
 	                        },
 	                    },
-	                },
-	            }
-	            : {}),
+	                }
+	                : {}),
+	        },
 	    });
 	}
 	const Form = withTheme({
@@ -47535,7 +47669,7 @@ export default theme;`;
 	    }
 	    return id.join('-');
 	}
-	function FormContainer({ formData, formSchema, formUiSchema, onFormRef }) {
+	function FormContainer({ formData, formSchema, formUiSchema, onFormRef, canSubmitForm }) {
 	    const [theme, setTheme] = reactExports.useState(null);
 	    const ref = reactExports.useRef();
 	    reactExports.useEffect(() => {
@@ -47561,7 +47695,16 @@ export default theme;`;
 	        monacoEditorWidget: (props) => jsxRuntimeExports.jsx(MonacoEditorWidget, { ...props, theme: theme }),
 	        jsonataEditorWidget: (props) => jsxRuntimeExports.jsx(JsonataEditorWidget, { ...props, theme: theme }),
 	    };
-	    return (jsxRuntimeExports.jsx(ThemeProvider, { theme: theme, children: jsxRuntimeExports.jsx(Form, { ref: ref, widgets: widgets, formData: formData, validator: validator, schema: formSchema, uiSchema: formUiSchema, onSubmit: (e) => {
+	    const preparedFormUiSchema = canSubmitForm
+	        ? formUiSchema
+	        : {
+	            ...formUiSchema,
+	            'ui:submitButtonOptions': {
+	                ...((formUiSchema === null || formUiSchema === void 0 ? void 0 : formUiSchema['ui:submitButtonOptions']) || {}),
+	                norender: true,
+	            },
+	        };
+	    return (jsxRuntimeExports.jsx(ThemeProvider, { theme: theme, children: jsxRuntimeExports.jsx(Form, { ref: ref, widgets: widgets, formData: formData, validator: validator, schema: formSchema, uiSchema: preparedFormUiSchema, onSubmit: (e) => {
 	                submitForm(e.formData);
 	            }, onChange: (e) => {
 	                window.currentFormData = e.formData;
@@ -47585,6 +47728,12 @@ export default theme;`;
 	    card.parentElement.style.padding = '16px';
 	    card.parentElement.style.paddingBottom = '0px';
 	}
+	function setFullWidthFormContainer() {
+	    const card = document.getElementById('card');
+	    card.parentElement.style.maxWidth = '100%';
+	    card.parentElement.style.padding = '0px';
+	    card.parentElement.style.paddingBottom = '0px';
+	}
 	function checkIfCurrentModuleCanSubmitForm() {
 	    const modulesWithoutSubmit = ['ai-prompt-provider', 'workflow-step-type', 'automation-action'];
 	    return !(AP && AP._data && AP._data.app && modulesWithoutSubmit.includes(AP._data.app.type));
@@ -47592,14 +47741,17 @@ export default theme;`;
 	function renderForm(formData = {}, formSchema, formUiSchema) {
 	    const root = clientExports.createRoot(document.getElementById('form'));
 	    const modulesWithoutBorders = ['modal', 'editor-right-panel'];
+	    const canSubmitForm = checkIfCurrentModuleCanSubmitForm();
 	    if (AP && AP._data && AP._data.app && AP._data.app.type) {
 	        const htmlElement = document.getElementsByTagName('html')[0];
 	        htmlElement.className += ' ' + AP._data.app.type + '-form';
+	        if (AP._data.app.type === 'ai-provider') {
+	            setFullWidthFormContainer();
+	        }
 	    }
-	    if (!checkIfCurrentModuleCanSubmitForm()) {
+	    if (!canSubmitForm) {
 	        removeBorders();
-	        const htmlElement = document.getElementsByTagName('html')[0];
-	        htmlElement.className += ' form-without-submit';
+	        setFullWidthFormContainer();
 	    }
 	    if (AP && AP._data && AP._data.app && modulesWithoutBorders.includes(AP._data.app.type)) {
 	        removeBorders();
@@ -47612,7 +47764,7 @@ export default theme;`;
 	    window.currentFormUiSchema = formUiSchema;
 	    root.render(jsxRuntimeExports.jsx(FormContainer, { onFormRef: (ref) => {
 	            window.formRef = ref.current;
-	        }, formData: formData, formSchema: formSchema || window.formSchema, formUiSchema: formUiSchema || window.formUiSchema }));
+	        }, formData: formData, formSchema: formSchema || window.formSchema, formUiSchema: formUiSchema || window.formUiSchema, canSubmitForm: canSubmitForm }));
 	    document.getElementById('form-loading').style.display = 'none';
 	}
 	function submitForm(formData) {