@solidxai/core-ui 0.1.5-beta.11 → 0.1.5-beta.13

package/dist/components/common/GeneralSettings.js

@@ -58,8 +58,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useFormik } from 'formik';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
-import { Toast } from 'primereact/toast';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { CancelButton } from './CancelButton';
 import { InputSwitch } from 'primereact/inputswitch';
 import { RadioButton } from 'primereact/radiobutton';
@@ -78,11 +77,10 @@ import { Dropdown } from 'primereact/dropdown';
 import { OpenAiProviderComponent } from './SolidSettings/LlmSettings/OpenAiProviderComponent';
 import { AnthropicProviderComponent } from './SolidSettings/LlmSettings/AnthropicProviderComponent';
 import { useDispatch } from 'react-redux';
-import { handleError } from '../../helpers/ToastContainer';
 import { ERROR_MESSAGES } from '../../constants/error-messages';
 import { useBulkUpdateSolidSettingsMutation, useLazyGetSolidSettingsQuery } from '../../redux/api/solidSettingsApi';
 import { env } from "../../adapters/env";
-import showToast from "../../helpers/showToast";
+import { showToast } from '../../redux/features/toastSlice';
 export var GeneralSettings = function () {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
     var _38 = useState(null), appLogoPreview = _38[0], setAppLogoPreview = _38[1];
@@ -97,7 +95,6 @@ export var GeneralSettings = function () {
     }, [trigger]);
     var pathname = usePathname();
     var bulkUpdateSolidSettings = useBulkUpdateSolidSettingsMutation()[0];
-    var toast = useRef(null);
     var initialValues = {
         appLogo: (_b = (_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.appLogo) !== null && _b !== void 0 ? _b : null,
         companylogo: (_d = (_c = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _c === void 0 ? void 0 : _c.companylogo) !== null && _d !== void 0 ? _d : null,
@@ -185,7 +182,7 @@ export var GeneralSettings = function () {
                             }
                         });
                         if (updatedSettingsArray_1.length === 0) {
-                            showToast(toast, "success", "No Changes", "No settings were updated");
+                            dispatch(showToast({ severity: "success", summary: "No Changes", detail: "No settings were updated" }));
                             return [2 /*return*/];
                         }
                         // Append settings array to formData
@@ -194,14 +191,14 @@ export var GeneralSettings = function () {
                     case 1:
                         response = _b.sent();
                         if (response.statusCode === 200) {
-                            showToast(toast, "success", "Updated", "Settings updated");
+                            dispatch(showToast({ severity: "success", summary: "Updated", detail: "Settings updated" }));
                             trigger("");
                         }
                         return [3 /*break*/, 3];
                     case 2:
                         error_1 = _b.sent();
                         console.log("Error updating settings:", error_1);
-                        showToast(toast, "error", ERROR_MESSAGES.FAILED, ((_a = error_1 === null || error_1 === void 0 ? void 0 : error_1.data) === null || _a === void 0 ? void 0 : _a.message) || ERROR_MESSAGES.SOMETHING_WRONG);
+                        dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FAILED, detail: ((_a = error_1 === null || error_1 === void 0 ? void 0 : error_1.data) === null || _a === void 0 ? void 0 : _a.message) || ERROR_MESSAGES.SOMETHING_WRONG }));
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
                 }
@@ -216,8 +213,8 @@ export var GeneralSettings = function () {
                 case 1:
                     errors = _a.sent();
                     errorMessages = Object.values(errors);
-                    if (errorMessages.length > 0 && toast.current) {
-                        handleError(errorMessages);
+                    if (errorMessages.length > 0) {
+                        dispatch(showToast({ severity: 'error', summary: 'Error', detail: Array.isArray(errorMessages) ? errorMessages.join(', ') : errorMessages }));
                     }
                     return [2 /*return*/];
             }
@@ -231,16 +228,10 @@ export var GeneralSettings = function () {
         right: 'The form will appear on the right side of the screen, and the banner will be positioned on the left side'
     };
     var onAppLogoDrop = useCallback(function (acceptedFiles) {
-        var _a;
         var file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                    severity: "error",
-                    summary: "File too large",
-                    detail: "Maximum file size is 2MB",
-                    sticky: true
-                });
+                dispatch(showToast({ severity: "error", summary: "File too large", detail: "Maximum file size is 2MB" }));
                 return;
             }
             formik.setFieldValue("appLogo", file);
@@ -248,16 +239,10 @@ export var GeneralSettings = function () {
         }
     }, [formik]);
     var onCompanyLogoDrop = useCallback(function (acceptedFiles) {
-        var _a;
         var file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                    severity: "error",
-                    summary: "File too large",
-                    detail: "Maximum file size is 2MB",
-                    sticky: true
-                });
+                dispatch(showToast({ severity: "error", summary: "File too large", detail: "Maximum file size is 2MB" }));
                 return;
             }
             formik.setFieldValue("companylogo", file);
@@ -299,16 +284,10 @@ export var GeneralSettings = function () {
         }
     };
     var onAuthScreenRightBackgroundImageDrop = useCallback(function (acceptedFiles) {
-        var _a;
         var file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.FILE_LARGE,
-                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
-                    sticky: true
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FILE_LARGE, detail: ERROR_MESSAGES.MAX_FILE_SIZE }));
                 return;
             }
             formik.setFieldValue("authScreenRightBackgroundImage", file);
@@ -316,16 +295,10 @@ export var GeneralSettings = function () {
         }
     }, [formik]);
     var onAuthScreenLeftBackgroundImageDrop = useCallback(function (acceptedFiles) {
-        var _a;
         var file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.FILE_LARGE,
-                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
-                    sticky: true,
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FILE_LARGE, detail: ERROR_MESSAGES.MAX_FILE_SIZE }));
                 return;
             }
             formik.setFieldValue("authScreenLeftBackgroundImage", file);
@@ -333,16 +306,10 @@ export var GeneralSettings = function () {
         }
     }, [formik]);
     var onAuthScreenCenterBackgroundImageDrop = useCallback(function (acceptedFiles) {
-        var _a;
         var file = acceptedFiles[0];
         if (file) {
             if (file.size > 2 * 1024 * 1024) {
-                (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                    severity: "error",
-                    summary: ERROR_MESSAGES.FILE_LARGE,
-                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
-                    sticky: true,
-                });
+                dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.FILE_LARGE, detail: ERROR_MESSAGES.MAX_FILE_SIZE }));
                 return;
             }
             formik.setFieldValue("authScreenCenterBackgroundImage", file);
@@ -448,80 +415,80 @@ export var GeneralSettings = function () {
         formik.setFieldValue("solidXGenAiCodeBuilderConfig.availableProviders", updatedProfiles);
     };
     var currentProfile = ((_36 = formik.values.solidXGenAiCodeBuilderConfig.availableProviders) !== null && _36 !== void 0 ? _36 : []).find(function (p) { return p.provider === formik.values.solidXGenAiCodeBuilderConfig.defaultProvider; }) || null;
-    return (_jsxs("div", { className: "page-parent-wrapper", children: [_jsx(Toast, { ref: toast }), _jsx("div", { className: "solid-form-wrapper", children: _jsx("div", { className: "solid-form-section", children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [_jsxs("div", { className: "page-header secondary-border-bottom", children: [_jsx("div", { className: "form-wrapper-title ", children: "Settings" }), _jsxs("div", { className: "gap-3 flex", children: [formik.dirty &&
-                                                _jsx(Button, { label: "Save", size: "small", onClick: function () { return showError(); }, type: "submit" }), _jsx(CancelButton, {})] })] }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content", children: [pathname.includes("app-settings") &&
-                                        _jsxs(_Fragment, { children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsxs("div", { className: "col-12 md:col-6", children: [_jsx("p", { className: 'font-bold ', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "App Logo " }), _jsxs("div", { children: [_jsxs("div", __assign({}, getAppLogoRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAppLogoInputProps())), _jsx(SettingDropzoneActivePlaceholder, {})] })), _jsx("div", { className: "mt-2", children: (function () {
-                                                                                        var logoSrc = SolidLogo.src || SolidLogo;
-                                                                                        var src = appLogoPreview
-                                                                                            ? appLogoPreview
-                                                                                            : formik.values.appLogo
-                                                                                                ? formik.values.appLogo
-                                                                                                : logoSrc;
-                                                                                        var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
-                                                                                        if (!isBlobOrAbsolute && !src.startsWith("/")) {
-                                                                                            src = "".concat(env("API_URL"), "/").concat(src);
-                                                                                        }
-                                                                                        return (_jsx(SolidUploadedImage, { src: src, className: 'solid-app-logo' }));
-                                                                                    })() }), formik.values.appLogo && (_jsx(SettingsImageRemoveButton, { onClick: removeAppLogo }))] })] }), _jsxs("div", { className: "col-12 md:col-6", children: [_jsx("p", { className: 'font-bold ', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Company Logo " }), _jsxs("div", { children: [_jsxs("div", __assign({}, getCompanyLogoRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getCompanyLogoInputProps())), _jsx(SettingDropzoneActivePlaceholder, {})] })), _jsx("div", { className: "mt-2", children: (function () {
-                                                                                        var logoSrc = SolidLogo.src || SolidLogo;
-                                                                                        var src = companyLogoPreview
-                                                                                            ? companyLogoPreview
-                                                                                            : formik.values.companylogo
-                                                                                                ? formik.values.companylogo
-                                                                                                : logoSrc;
-                                                                                        var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
-                                                                                        if (!isBlobOrAbsolute && !src.startsWith("/")) {
-                                                                                            src = "".concat(env("API_URL"), "/").concat(src);
-                                                                                        }
-                                                                                        return (_jsx(SolidUploadedImage, { src: src, className: 'solid-compony-logo' }));
-                                                                                    })() }), formik.values.companylogo && (_jsx(SettingsImageRemoveButton, { onClick: removeCompanyLogo }))] })] })] }) }) }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "App Logo Position" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "appLogoPosition-in_form_view", name: "appLogoPosition", value: "in_form_view", checked: formik.values.appLogoPosition === "in_form_view", onChange: function (e) { return formik.setFieldValue("appLogoPosition", e.value); } }), _jsx("label", { htmlFor: "appLogoPosition-in_form_view", className: "ml-2", children: "In Form View" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "appLogoPosition-in_image_view", name: "appLogoPosition", value: "in_image_view", checked: formik.values.appLogoPosition === "in_image_view", onChange: function (e) { return formik.setFieldValue("appLogoPosition", e.value); } }), _jsx("label", { htmlFor: "appLogoPosition-in_image_view", className: "ml-2", children: "In Image View" })] })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Title & Description Details " }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Show Details on Authentication Screen" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "showAuthContent", checked: formik.values.showAuthContent, onChange: function (e) { return formik.setFieldValue("showAuthContent", e.value); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Title" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appTitle", name: "appTitle", onChange: formik.handleChange, value: formik.values.appTitle, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Subtitle" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appSubtitle", name: "appSubtitle", onChange: formik.handleChange, value: formik.values.appSubtitle, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Description" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputTextarea, { rows: 3, id: "appDescription", name: "appDescription", onChange: formik.handleChange, value: formik.values.appDescription, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Copyright" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputTextarea, { rows: 3, id: "copyright", name: "copyright", onChange: formik.handleChange, value: formik.values.copyright, className: 'w-full' }) })] }) })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Legal Links" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Show Legal Links" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "showLegalLinks", checked: formik.values.showLegalLinks, onChange: function (e) { return formik.setFieldValue("showLegalLinks", e.value); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 py-2 md:py-0", children: _jsx("label", { className: "form-field-label", children: "Terms and Conditions Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appTnc", name: "appTnc", onChange: formik.handleChange, value: formik.values.appTnc, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Privacy Policy Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appPrivacyPolicy", name: "appPrivacyPolicy", onChange: formik.handleChange, value: formik.values.appPrivacyPolicy, className: 'w-full' }) })] }) })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-10 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Enable Dark Mode" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "enableDarkMode", checked: formik.values.enableDarkMode, onChange: function (e) { return formik.setFieldValue("enableDarkMode", e.value); } }) })] }) }) }) }) })] }), pathname.includes("authentication-settings") &&
-                                        _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "User Authentication  " }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Public Registration" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "allowPublicRegistration", checked: formik.values.allowPublicRegistration, onChange: function (e) { return formik.setFieldValue("allowPublicRegistration", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Based Authentication" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "passwordBasedAuth", checked: formik.values.passwordBasedAuth, onChange: function (e) { return formik.setFieldValue("passwordBasedAuth", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Authentication" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "passwordLessAuth", checked: formik.values.passwordLessAuth, onChange: function (e) { return formik.setFieldValue("passwordLessAuth", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Auto Activate User on Registration " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "activateUserOnRegistration", checked: formik.values.activateUserOnRegistration, onChange: function (e) { return formik.setFieldValue("activateUserOnRegistration", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Allow Login/ Signup with Google " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "iamGoogleOAuthEnabled", checked: formik.values.iamGoogleOAuthEnabled, onChange: function (e) { return formik.setFieldValue("iamGoogleOAuthEnabled", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Force Password change on first Login " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "forceChangePasswordOnFirstLogin", checked: formik.values.forceChangePasswordOnFirstLogin, onChange: function (e) { return formik.setFieldValue("forceChangePasswordOnFirstLogin", e.value); } }) })] }) }), formik.values.passwordLessAuth === true &&
-                                                                    _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 sm:col-12 lg:col-5 xl:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Registration Method" }) }), _jsx("div", { className: 'col-12 sm:col-12 lg:col-6 xl:col-6', children: _jsxs("div", { className: "flex align-items-center gap-3 mt-3 lg:mt-0", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessRegistrationValidateWhat-email", name: "passwordlessRegistrationValidateWhat", value: "email", checked: formik.values.passwordlessRegistrationValidateWhat === "email", onChange: function (e) { return formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessRegistrationValidateWhat-email", className: "ml-2", children: "Email" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessRegistrationValidateWhat-mobile", name: "passwordlessRegistrationValidateWhat", value: "mobile", checked: formik.values.passwordlessRegistrationValidateWhat === "mobile", onChange: function (e) { return formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessRegistrationValidateWhat-mobile", className: "ml-2", children: "Mobile" })] })] }) })] }) }), formik.values.passwordLessAuth === true &&
-                                                                    _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 sm:col-12 lg:col-5 xl:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Login Method" }) }), _jsx("div", { className: 'col-12 sm:col-12 lg:col-6 xl:col-6', children: _jsxs("div", { className: "flex align-items-center gap-3 mt-3 lg:mt-0", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessLoginValidateWhat-email", name: "passwordlessLoginValidateWhat", value: "email", checked: formik.values.passwordlessLoginValidateWhat === "email", onChange: function (e) { return formik.setFieldValue("passwordlessLoginValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessLoginValidateWhat-email", className: "ml-2", children: "Email" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessLoginValidateWhat-mobile", name: "passwordlessLoginValidateWhat", value: "mobile", checked: formik.values.passwordlessLoginValidateWhat === "mobile", onChange: function (e) { return formik.setFieldValue("passwordlessLoginValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessLoginValidateWhat-mobile", className: "ml-2", children: "Mobile" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessLoginValidateWhat-selectable", name: "passwordlessLoginValidateWhat", value: "selectable", checked: formik.values.passwordlessLoginValidateWhat === "selectable", onChange: function (e) { return formik.setFieldValue("passwordlessLoginValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessLoginValidateWhat-selectable", className: "ml-2", children: "Selectable" })] })] }) })] }) })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Authentication Screen Layout" }), _jsx("div", { className: 'formgrid grid', children: _jsxs("div", { className: 'col-12 lg:col-10 xl:col-8', children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "authPagesLayout-left", name: "authPagesLayout", value: "left", checked: formik.values.authPagesLayout === "left", onChange: function (e) { return formik.setFieldValue("authPagesLayout", e.value); } }), _jsx("label", { htmlFor: "authPagesLayout-left", className: "ml-2", children: "Left" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "authPagesLayout-center", name: "authPagesLayout", value: "center", checked: formik.values.authPagesLayout === "center", onChange: function (e) { return formik.setFieldValue("authPagesLayout", e.value); } }), _jsx("label", { htmlFor: "authPagesLayout-center", className: "ml-2", children: "Center" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "authPagesLayout-right", name: "authPagesLayout", value: "right", checked: formik.values.authPagesLayout === "right", onChange: function (e) { return formik.setFieldValue("authPagesLayout", e.value); } }), _jsx("label", { htmlFor: "authPagesLayout-right", className: "ml-2", children: "Right" })] })] }), _jsxs("p", { className: "mt-3 text-sm font-bold", children: ["Note : ", positionMap[formik.values.authPagesLayout]] })] }) }), formik.values.authPagesLayout === "center" && _jsx(_Fragment, {}), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsxs("div", { className: "col-12 md:col-8 lg:col-6", children: [_jsxs("p", { className: 'font-bold ', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: [formik.values.authPagesLayout === "center" ? "Background" : "Banner", " Image"] }), formik.values.authPagesLayout === "left" &&
-                                                                        _jsxs("div", { children: [_jsxs("div", __assign({}, getAuthScreenLeftBackgroundImageRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAuthScreenLeftBackgroundImageInputProps())), _jsx(SettingDropzoneActivePlaceholder, { note: "Recommended: 724×724px | Aspect ratio: 1:1" })] })), _jsx("div", { className: "mt-2", children: (function () {
-                                                                                        var logoSrc = AuthScreenLeftBackgroundImage.src || AuthScreenLeftBackgroundImage;
-                                                                                        var src = authScreenLeftBackgroundImagePreview
-                                                                                            ? authScreenLeftBackgroundImagePreview
-                                                                                            : formik.values.authScreenLeftBackgroundImage
-                                                                                                ? formik.values.authScreenLeftBackgroundImage
-                                                                                                : logoSrc;
-                                                                                        var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
-                                                                                        if (!isBlobOrAbsolute && !src.startsWith("/")) {
-                                                                                            src = "".concat(env("API_URL"), "/").concat(src);
-                                                                                        }
-                                                                                        return (_jsx(SolidUploadedImage, { src: src, height: 400, width: 400, maxHeight: 400 }));
-                                                                                    })() }), formik.values.authScreenLeftBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenLeftBackgroundImage }))] }), formik.values.authPagesLayout === "right" &&
-                                                                        _jsxs("div", { children: [_jsxs("div", __assign({}, getAuthScreenRightBackgroundImageRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAuthScreenRightBackgroundImageInputProps())), _jsx(SettingDropzoneActivePlaceholder, { note: "Recommended: 724×724px | Aspect ratio: 1:1" })] })), _jsx("div", { className: "mt-2", children: (function () {
-                                                                                        var logoSrc = AuthScreenRightBackgroundImage.src || AuthScreenRightBackgroundImage;
-                                                                                        var src = authScreenRightBackgroundImagePreview
-                                                                                            ? authScreenRightBackgroundImagePreview
-                                                                                            : formik.values.authScreenRightBackgroundImage
-                                                                                                ? formik.values.authScreenRightBackgroundImage
-                                                                                                : logoSrc;
-                                                                                        var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
-                                                                                        if (!isBlobOrAbsolute && !src.startsWith("/")) {
-                                                                                            src = "".concat(env("API_URL"), "/").concat(src);
-                                                                                        }
-                                                                                        return (_jsx(SolidUploadedImage, { src: src, height: 400, width: 400, maxHeight: 400 }));
-                                                                                    })() }), formik.values.authScreenRightBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenRightBackgroundImage }))] }), formik.values.authPagesLayout === "center" &&
-                                                                        _jsxs("div", { children: [_jsxs("div", __assign({}, getAuthScreenCenterBackgroundImageRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAuthScreenCenterBackgroundImageInputProps())), _jsx(SettingDropzoneActivePlaceholder, { note: "Recommended: 1440px × 724px | Aspect ratio: 2:1" })] })), _jsx("div", { className: "mt-2", children: (function () {
-                                                                                        var logoSrc = AuthScreenCenterBackgroundImage.src || AuthScreenCenterBackgroundImage;
-                                                                                        var src = authScreenCenterBackgroundImagePreview
-                                                                                            ? authScreenCenterBackgroundImagePreview
-                                                                                            : formik.values.authScreenCenterBackgroundImage
-                                                                                                ? formik.values.authScreenCenterBackgroundImage
-                                                                                                : logoSrc;
-                                                                                        var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
-                                                                                        if (!isBlobOrAbsolute && !src.startsWith("/")) {
-                                                                                            src = "".concat(env("API_URL"), "/").concat(src);
-                                                                                        }
-                                                                                        return (_jsx(SolidUploadedImage, { src: src, height: 300, width: 600, maxHeight: 300 }));
-                                                                                    })() }), formik.values.authScreenCenterBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenCenterBackgroundImage }))] })] }) }) }) }), _jsx("div", { className: 'mt-2 lg:mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), ((_37 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _37 === void 0 ? void 0 : _37.enableDarkMode) === true &&
-                                                    _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold mt-3 lg:mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Authentication Screen Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "theme-light", name: "authPagesTheme", value: "light", checked: formik.values.authPagesTheme === "light", onChange: function (e) { return formik.setFieldValue("authPagesTheme", e.value); } }), _jsx("label", { htmlFor: "theme-light", className: "ml-2", children: "Solid Light" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "theme-dark", name: "authPagesTheme", value: "dark", checked: formik.values.authPagesTheme === "dark", onChange: function (e) { return formik.setFieldValue("authPagesTheme", e.value); } }), _jsx("label", { htmlFor: "theme-dark", className: "ml-2", children: "Solid Dark" })] })] }) }) })] })] }), pathname.includes("misc-settings") &&
-                                        _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Contact Support" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: "col-12 lg:col-10 xl:col-8", children: _jsxs("div", { className: 'formgrid grid', children: [_jsx("div", { className: "col-12 md:col-6 pb-3 md:pb-0", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Contact Support Email" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "contactSupportEmail", name: "contactSupportEmail", onChange: formik.handleChange, value: formik.values.contactSupportEmail, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Display Name" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "contactSupportDisplayName", name: "contactSupportDisplayName", onChange: formik.handleChange, value: formik.values.contactSupportDisplayName, className: 'w-full' }) })] }) })] }) }) })] }), pathname.includes("ai-settings") &&
-                                        _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Ai Details" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsx("div", { className: "col-12 md:col-10 lg:col-6 mt-3 md:mt-4", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-3 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Default Provider" }) }), _jsx("div", { className: "col-12 md:col-9", children: _jsx(Dropdown, { className: 'w-full', value: formik.values.solidXGenAiCodeBuilderConfig.defaultProvider, options: [
-                                                                                    { label: "OpenAI", value: "openai" },
-                                                                                    { label: "Anthropic", value: "anthropic" },
-                                                                                ], onChange: function (e) { return handleProviderSelect(e.value); }, placeholder: "Select Provider" }) })] }) }) }) }) }), _jsx(Divider, {}), _jsx("div", { className: 'grid', children: _jsx("div", { className: 'col-12 md:col-6', children: formik.values.solidXGenAiCodeBuilderConfig.defaultProvider && (_jsxs(_Fragment, { children: [formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "openai" && (_jsx(OpenAiProviderComponent, { profile: currentProfile, onUpdate: handleProfileUpdate })), formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "anthropic" && (_jsx(AnthropicProviderComponent, { profile: currentProfile, onUpdate: handleProfileUpdate }))] })) }) })] })] })] }) }) })] }));
+    return (_jsx("div", { className: "page-parent-wrapper", children: _jsx("div", { className: "solid-form-wrapper", children: _jsx("div", { className: "solid-form-section", children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [_jsxs("div", { className: "page-header secondary-border-bottom", children: [_jsx("div", { className: "form-wrapper-title ", children: "Settings" }), _jsxs("div", { className: "gap-3 flex", children: [formik.dirty &&
+                                            _jsx(Button, { label: "Save", size: "small", onClick: function () { return showError(); }, type: "submit" }), _jsx(CancelButton, {})] })] }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content", children: [pathname.includes("app-settings") &&
+                                    _jsxs(_Fragment, { children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsxs("div", { className: "col-12 md:col-6", children: [_jsx("p", { className: 'font-bold ', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "App Logo " }), _jsxs("div", { children: [_jsxs("div", __assign({}, getAppLogoRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAppLogoInputProps())), _jsx(SettingDropzoneActivePlaceholder, {})] })), _jsx("div", { className: "mt-2", children: (function () {
+                                                                                    var logoSrc = SolidLogo.src || SolidLogo;
+                                                                                    var src = appLogoPreview
+                                                                                        ? appLogoPreview
+                                                                                        : formik.values.appLogo
+                                                                                            ? formik.values.appLogo
+                                                                                            : logoSrc;
+                                                                                    var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
+                                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                                        src = "".concat(env("API_URL"), "/").concat(src);
+                                                                                    }
+                                                                                    return (_jsx(SolidUploadedImage, { src: src, className: 'solid-app-logo' }));
+                                                                                })() }), formik.values.appLogo && (_jsx(SettingsImageRemoveButton, { onClick: removeAppLogo }))] })] }), _jsxs("div", { className: "col-12 md:col-6", children: [_jsx("p", { className: 'font-bold ', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Company Logo " }), _jsxs("div", { children: [_jsxs("div", __assign({}, getCompanyLogoRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getCompanyLogoInputProps())), _jsx(SettingDropzoneActivePlaceholder, {})] })), _jsx("div", { className: "mt-2", children: (function () {
+                                                                                    var logoSrc = SolidLogo.src || SolidLogo;
+                                                                                    var src = companyLogoPreview
+                                                                                        ? companyLogoPreview
+                                                                                        : formik.values.companylogo
+                                                                                            ? formik.values.companylogo
+                                                                                            : logoSrc;
+                                                                                    var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
+                                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                                        src = "".concat(env("API_URL"), "/").concat(src);
+                                                                                    }
+                                                                                    return (_jsx(SolidUploadedImage, { src: src, className: 'solid-compony-logo' }));
+                                                                                })() }), formik.values.companylogo && (_jsx(SettingsImageRemoveButton, { onClick: removeCompanyLogo }))] })] })] }) }) }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "App Logo Position" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "appLogoPosition-in_form_view", name: "appLogoPosition", value: "in_form_view", checked: formik.values.appLogoPosition === "in_form_view", onChange: function (e) { return formik.setFieldValue("appLogoPosition", e.value); } }), _jsx("label", { htmlFor: "appLogoPosition-in_form_view", className: "ml-2", children: "In Form View" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "appLogoPosition-in_image_view", name: "appLogoPosition", value: "in_image_view", checked: formik.values.appLogoPosition === "in_image_view", onChange: function (e) { return formik.setFieldValue("appLogoPosition", e.value); } }), _jsx("label", { htmlFor: "appLogoPosition-in_image_view", className: "ml-2", children: "In Image View" })] })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Title & Description Details " }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Show Details on Authentication Screen" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "showAuthContent", checked: formik.values.showAuthContent, onChange: function (e) { return formik.setFieldValue("showAuthContent", e.value); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Title" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appTitle", name: "appTitle", onChange: formik.handleChange, value: formik.values.appTitle, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "App Subtitle" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appSubtitle", name: "appSubtitle", onChange: formik.handleChange, value: formik.values.appSubtitle, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Description" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputTextarea, { rows: 3, id: "appDescription", name: "appDescription", onChange: formik.handleChange, value: formik.values.appDescription, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-4", children: _jsxs("div", { className: "formgrid grid align-items-start", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Copyright" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputTextarea, { rows: 3, id: "copyright", name: "copyright", onChange: formik.handleChange, value: formik.values.copyright, className: 'w-full' }) })] }) })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Legal Links" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Show Legal Links" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "showLegalLinks", checked: formik.values.showLegalLinks, onChange: function (e) { return formik.setFieldValue("showLegalLinks", e.value); } }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 py-2 md:py-0", children: _jsx("label", { className: "form-field-label", children: "Terms and Conditions Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appTnc", name: "appTnc", onChange: formik.handleChange, value: formik.values.appTnc, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Privacy Policy Link" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "appPrivacyPolicy", name: "appPrivacyPolicy", onChange: formik.handleChange, value: formik.values.appPrivacyPolicy, className: 'w-full' }) })] }) })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-10 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Enable Dark Mode" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "enableDarkMode", checked: formik.values.enableDarkMode, onChange: function (e) { return formik.setFieldValue("enableDarkMode", e.value); } }) })] }) }) }) }) })] }), pathname.includes("authentication-settings") &&
+                                    _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "User Authentication  " }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "formgrid grid", children: [_jsx("div", { className: "col-12", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Public Registration" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "allowPublicRegistration", checked: formik.values.allowPublicRegistration, onChange: function (e) { return formik.setFieldValue("allowPublicRegistration", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Based Authentication" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "passwordBasedAuth", checked: formik.values.passwordBasedAuth, onChange: function (e) { return formik.setFieldValue("passwordBasedAuth", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Authentication" }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "passwordLessAuth", checked: formik.values.passwordLessAuth, onChange: function (e) { return formik.setFieldValue("passwordLessAuth", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Auto Activate User on Registration " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "activateUserOnRegistration", checked: formik.values.activateUserOnRegistration, onChange: function (e) { return formik.setFieldValue("activateUserOnRegistration", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Allow Login/ Signup with Google " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "iamGoogleOAuthEnabled", checked: formik.values.iamGoogleOAuthEnabled, onChange: function (e) { return formik.setFieldValue("iamGoogleOAuthEnabled", e.value); } }) })] }) }), _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-10 sm:col-9 lg:col-5", children: _jsx("label", { className: "form-field-label", children: "Force Password change on first Login " }) }), _jsx("div", { className: "col-2 sm:col-3 lg:col-7", children: _jsx(InputSwitch, { name: "forceChangePasswordOnFirstLogin", checked: formik.values.forceChangePasswordOnFirstLogin, onChange: function (e) { return formik.setFieldValue("forceChangePasswordOnFirstLogin", e.value); } }) })] }) }), formik.values.passwordLessAuth === true &&
+                                                                _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 sm:col-12 lg:col-5 xl:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Registration Method" }) }), _jsx("div", { className: 'col-12 sm:col-12 lg:col-6 xl:col-6', children: _jsxs("div", { className: "flex align-items-center gap-3 mt-3 lg:mt-0", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessRegistrationValidateWhat-email", name: "passwordlessRegistrationValidateWhat", value: "email", checked: formik.values.passwordlessRegistrationValidateWhat === "email", onChange: function (e) { return formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessRegistrationValidateWhat-email", className: "ml-2", children: "Email" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessRegistrationValidateWhat-mobile", name: "passwordlessRegistrationValidateWhat", value: "mobile", checked: formik.values.passwordlessRegistrationValidateWhat === "mobile", onChange: function (e) { return formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessRegistrationValidateWhat-mobile", className: "ml-2", children: "Mobile" })] })] }) })] }) }), formik.values.passwordLessAuth === true &&
+                                                                _jsx("div", { className: "col-12 mt-3", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 sm:col-12 lg:col-5 xl:col-5", children: _jsx("label", { className: "form-field-label", children: "Password Less Login Method" }) }), _jsx("div", { className: 'col-12 sm:col-12 lg:col-6 xl:col-6', children: _jsxs("div", { className: "flex align-items-center gap-3 mt-3 lg:mt-0", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessLoginValidateWhat-email", name: "passwordlessLoginValidateWhat", value: "email", checked: formik.values.passwordlessLoginValidateWhat === "email", onChange: function (e) { return formik.setFieldValue("passwordlessLoginValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessLoginValidateWhat-email", className: "ml-2", children: "Email" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessLoginValidateWhat-mobile", name: "passwordlessLoginValidateWhat", value: "mobile", checked: formik.values.passwordlessLoginValidateWhat === "mobile", onChange: function (e) { return formik.setFieldValue("passwordlessLoginValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessLoginValidateWhat-mobile", className: "ml-2", children: "Mobile" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "passwordlessLoginValidateWhat-selectable", name: "passwordlessLoginValidateWhat", value: "selectable", checked: formik.values.passwordlessLoginValidateWhat === "selectable", onChange: function (e) { return formik.setFieldValue("passwordlessLoginValidateWhat", e.value); } }), _jsx("label", { htmlFor: "passwordlessLoginValidateWhat-selectable", className: "ml-2", children: "Selectable" })] })] }) })] }) })] }) }) }), _jsx("div", { className: 'mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), _jsx("p", { className: 'font-bold mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Authentication Screen Layout" }), _jsx("div", { className: 'formgrid grid', children: _jsxs("div", { className: 'col-12 lg:col-10 xl:col-8', children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "authPagesLayout-left", name: "authPagesLayout", value: "left", checked: formik.values.authPagesLayout === "left", onChange: function (e) { return formik.setFieldValue("authPagesLayout", e.value); } }), _jsx("label", { htmlFor: "authPagesLayout-left", className: "ml-2", children: "Left" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "authPagesLayout-center", name: "authPagesLayout", value: "center", checked: formik.values.authPagesLayout === "center", onChange: function (e) { return formik.setFieldValue("authPagesLayout", e.value); } }), _jsx("label", { htmlFor: "authPagesLayout-center", className: "ml-2", children: "Center" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "authPagesLayout-right", name: "authPagesLayout", value: "right", checked: formik.values.authPagesLayout === "right", onChange: function (e) { return formik.setFieldValue("authPagesLayout", e.value); } }), _jsx("label", { htmlFor: "authPagesLayout-right", className: "ml-2", children: "Right" })] })] }), _jsxs("p", { className: "mt-3 text-sm font-bold", children: ["Note : ", positionMap[formik.values.authPagesLayout]] })] }) }), formik.values.authPagesLayout === "center" && _jsx(_Fragment, {}), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsxs("div", { className: "col-12 md:col-8 lg:col-6", children: [_jsxs("p", { className: 'font-bold ', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: [formik.values.authPagesLayout === "center" ? "Background" : "Banner", " Image"] }), formik.values.authPagesLayout === "left" &&
+                                                                    _jsxs("div", { children: [_jsxs("div", __assign({}, getAuthScreenLeftBackgroundImageRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAuthScreenLeftBackgroundImageInputProps())), _jsx(SettingDropzoneActivePlaceholder, { note: "Recommended: 724×724px | Aspect ratio: 1:1" })] })), _jsx("div", { className: "mt-2", children: (function () {
+                                                                                    var logoSrc = AuthScreenLeftBackgroundImage.src || AuthScreenLeftBackgroundImage;
+                                                                                    var src = authScreenLeftBackgroundImagePreview
+                                                                                        ? authScreenLeftBackgroundImagePreview
+                                                                                        : formik.values.authScreenLeftBackgroundImage
+                                                                                            ? formik.values.authScreenLeftBackgroundImage
+                                                                                            : logoSrc;
+                                                                                    var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
+                                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                                        src = "".concat(env("API_URL"), "/").concat(src);
+                                                                                    }
+                                                                                    return (_jsx(SolidUploadedImage, { src: src, height: 400, width: 400, maxHeight: 400 }));
+                                                                                })() }), formik.values.authScreenLeftBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenLeftBackgroundImage }))] }), formik.values.authPagesLayout === "right" &&
+                                                                    _jsxs("div", { children: [_jsxs("div", __assign({}, getAuthScreenRightBackgroundImageRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAuthScreenRightBackgroundImageInputProps())), _jsx(SettingDropzoneActivePlaceholder, { note: "Recommended: 724×724px | Aspect ratio: 1:1" })] })), _jsx("div", { className: "mt-2", children: (function () {
+                                                                                    var logoSrc = AuthScreenRightBackgroundImage.src || AuthScreenRightBackgroundImage;
+                                                                                    var src = authScreenRightBackgroundImagePreview
+                                                                                        ? authScreenRightBackgroundImagePreview
+                                                                                        : formik.values.authScreenRightBackgroundImage
+                                                                                            ? formik.values.authScreenRightBackgroundImage
+                                                                                            : logoSrc;
+                                                                                    var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
+                                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                                        src = "".concat(env("API_URL"), "/").concat(src);
+                                                                                    }
+                                                                                    return (_jsx(SolidUploadedImage, { src: src, height: 400, width: 400, maxHeight: 400 }));
+                                                                                })() }), formik.values.authScreenRightBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenRightBackgroundImage }))] }), formik.values.authPagesLayout === "center" &&
+                                                                    _jsxs("div", { children: [_jsxs("div", __assign({}, getAuthScreenCenterBackgroundImageRootProps(), { className: "solid-dropzone-wrapper", style: { borderRadius: 8 }, children: [_jsx("input", __assign({}, getAuthScreenCenterBackgroundImageInputProps())), _jsx(SettingDropzoneActivePlaceholder, { note: "Recommended: 1440px × 724px | Aspect ratio: 2:1" })] })), _jsx("div", { className: "mt-2", children: (function () {
+                                                                                    var logoSrc = AuthScreenCenterBackgroundImage.src || AuthScreenCenterBackgroundImage;
+                                                                                    var src = authScreenCenterBackgroundImagePreview
+                                                                                        ? authScreenCenterBackgroundImagePreview
+                                                                                        : formik.values.authScreenCenterBackgroundImage
+                                                                                            ? formik.values.authScreenCenterBackgroundImage
+                                                                                            : logoSrc;
+                                                                                    var isBlobOrAbsolute = (src === null || src === void 0 ? void 0 : src.startsWith("blob:")) || (src === null || src === void 0 ? void 0 : src.startsWith("http"));
+                                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                                        src = "".concat(env("API_URL"), "/").concat(src);
+                                                                                    }
+                                                                                    return (_jsx(SolidUploadedImage, { src: src, height: 300, width: 600, maxHeight: 300 }));
+                                                                                })() }), formik.values.authScreenCenterBackgroundImage && (_jsx(SettingsImageRemoveButton, { onClick: removeAuthScreenCenterBackgroundImage }))] })] }) }) }) }), _jsx("div", { className: 'mt-2 lg:mt-4', style: { borderBottom: '1px dashed #D8E2EA' } }), ((_37 = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _37 === void 0 ? void 0 : _37.enableDarkMode) === true &&
+                                                _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold mt-3 lg:mt-4', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Authentication Screen Theme" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "theme-light", name: "authPagesTheme", value: "light", checked: formik.values.authPagesTheme === "light", onChange: function (e) { return formik.setFieldValue("authPagesTheme", e.value); } }), _jsx("label", { htmlFor: "theme-light", className: "ml-2", children: "Solid Light" })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx(RadioButton, { inputId: "theme-dark", name: "authPagesTheme", value: "dark", checked: formik.values.authPagesTheme === "dark", onChange: function (e) { return formik.setFieldValue("authPagesTheme", e.value); } }), _jsx("label", { htmlFor: "theme-dark", className: "ml-2", children: "Solid Dark" })] })] }) }) })] })] }), pathname.includes("misc-settings") &&
+                                    _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Contact Support" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: "col-12 lg:col-10 xl:col-8", children: _jsxs("div", { className: 'formgrid grid', children: [_jsx("div", { className: "col-12 md:col-6 pb-3 md:pb-0", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Contact Support Email" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "contactSupportEmail", name: "contactSupportEmail", onChange: formik.handleChange, value: formik.values.contactSupportEmail, className: 'w-full' }) })] }) }), _jsx("div", { className: "col-12 md:col-6", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-5 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Display Name" }) }), _jsx("div", { className: "col-12 md:col-7", children: _jsx(InputText, { type: "text", id: "contactSupportDisplayName", name: "contactSupportDisplayName", onChange: formik.handleChange, value: formik.values.contactSupportDisplayName, className: 'w-full' }) })] }) })] }) }) })] }), pathname.includes("ai-settings") &&
+                                    _jsxs(_Fragment, { children: [_jsx("p", { className: 'font-bold', style: { fontSize: 16, color: 'var(--solid-setting-title)' }, children: "Ai Details" }), _jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'col-12 lg:col-10 xl:col-8', children: _jsx("div", { className: "formgrid grid", children: _jsx("div", { className: "col-12 md:col-10 lg:col-6 mt-3 md:mt-4", children: _jsxs("div", { className: "formgrid grid align-items-center", children: [_jsx("div", { className: "col-12 md:col-3 pb-2 md:pb-0", children: _jsx("label", { className: "form-field-label", children: "Default Provider" }) }), _jsx("div", { className: "col-12 md:col-9", children: _jsx(Dropdown, { className: 'w-full', value: formik.values.solidXGenAiCodeBuilderConfig.defaultProvider, options: [
+                                                                                { label: "OpenAI", value: "openai" },
+                                                                                { label: "Anthropic", value: "anthropic" },
+                                                                            ], onChange: function (e) { return handleProviderSelect(e.value); }, placeholder: "Select Provider" }) })] }) }) }) }) }), _jsx(Divider, {}), _jsx("div", { className: 'grid', children: _jsx("div", { className: 'col-12 md:col-6', children: formik.values.solidXGenAiCodeBuilderConfig.defaultProvider && (_jsxs(_Fragment, { children: [formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "openai" && (_jsx(OpenAiProviderComponent, { profile: currentProfile, onUpdate: handleProfileUpdate })), formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "anthropic" && (_jsx(AnthropicProviderComponent, { profile: currentProfile, onUpdate: handleProfileUpdate }))] })) }) })] })] })] }) }) }) }));
 };
 //# sourceMappingURL=GeneralSettings.js.map