@arquimedes.co/eureka-forms 0.2.42 → 0.2.45

package/dist/App.js

@@ -67,42 +67,11 @@ import StepTypes from './constants/FormStepTypes';
 import axiosInstance from './AxiosAPI';
 function App(_a) {
     var _this = this;
+    var _b, _c;
     var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSteps", "handleConfirmed"]);
-    var _b = useState(undefined), form = _b[0], setForm = _b[1];
-    var _c = useState({}), originalValues = _c[0], setOriginalValues = _c[1];
-    var _d = useState(undefined), organizationInfo = _d[0], setOrganizationInfo = _d[1];
-    //
-    function fetchOrgData(domain) {
-        return __awaiter(this, void 0, void 0, function () {
-            var response, _a, currentOrg;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!domain) return [3 /*break*/, 2];
-                        return [4 /*yield*/, axios.get("https://".concat(domain, ".forms.").concat(process.env.REACT_APP_DOMAIN, "/api/organization?domain=").concat(domain))];
-                    case 1:
-                        _a = _b.sent();
-                        return [3 /*break*/, 4];
-                    case 2: return [4 /*yield*/, axiosInstance.get('/organization')];
-                    case 3:
-                        _a = _b.sent();
-                        _b.label = 4;
-                    case 4:
-                        response = _a;
-                        if (response === null || response === void 0 ? void 0 : response.data) {
-                            currentOrg = response.data;
-                            // document.title = currentOrg.name;
-                            // const favicon: any = document.getElementById('favicon');
-                            // if (favicon !== undefined) {
-                            //     favicon.href = currentOrg.partialLogoUrl;
-                            // }
-                            return [2 /*return*/, currentOrg];
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
+    var _d = useState(undefined), form = _d[0], setForm = _d[1];
+    var _e = useState({}), originalValues = _e[0], setOriginalValues = _e[1];
+    var _f = useState(undefined), organizationInfo = _f[0], setOrganizationInfo = _f[1];
     function fetchPreview(formData) {
         return __awaiter(this, void 0, void 0, function () {
             var response;
@@ -135,10 +104,12 @@ function App(_a) {
         }
         else if (!isWidget && apiKey) {
             //Is iframe
+            loadOrgInfo(domain);
             loadInfo(apiKey, domain);
         }
         else if (isWidget && apiKey && domain) {
             //Is iframe
+            loadOrgInfo(domain);
             loadInfo(apiKey, domain);
         }
         else {
@@ -149,38 +120,71 @@ function App(_a) {
         }
     }, []);
     var containerRef = useRef();
-    var loadInfo = function (apiKey, domain) { return __awaiter(_this, void 0, void 0, function () {
-        var url, _a, response, orgInfo, error_1;
+    var loadOrgInfo = function (domain) { return __awaiter(_this, void 0, void 0, function () {
+        var response, _a, error_1;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    _b.trys.push([0, 2, , 3]);
+                    _b.trys.push([0, 5, , 6]);
+                    if (!domain) return [3 /*break*/, 2];
+                    return [4 /*yield*/, axios.get("https://".concat(domain, ".forms.").concat(process.env.REACT_APP_DOMAIN, "/api/organization?domain=").concat(domain))];
+                case 1:
+                    _a = _b.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, axiosInstance.get('/organization')];
+                case 3:
+                    _a = _b.sent();
+                    _b.label = 4;
+                case 4:
+                    response = _a;
+                    if (response === null || response === void 0 ? void 0 : response.data) {
+                        if (response === null || response === void 0 ? void 0 : response.data) {
+                            // document.title = currentOrg.name;
+                            // const favicon: any = document.getElementById('favicon');
+                            // if (favicon !== undefined) {
+                            //     favicon.href = currentOrg.partialLogoUrl;
+                            // }
+                            //TODO cambiar el color del navbar en movil
+                            console.log(response === null || response === void 0 ? void 0 : response.data);
+                            setOrganizationInfo(response === null || response === void 0 ? void 0 : response.data);
+                        }
+                        else {
+                            setOrganizationInfo(null);
+                        }
+                    }
+                    return [3 /*break*/, 6];
+                case 5:
+                    error_1 = _b.sent();
+                    console.error(error_1);
+                    setOrganizationInfo(null);
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var loadInfo = function (apiKey, domain) { return __awaiter(_this, void 0, void 0, function () {
+        var url, response, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
                     url = "https://".concat(domain, ".forms.").concat(process.env.REACT_APP_DOMAIN, "/api/form/").concat(apiKey, "?domain=").concat(domain);
-                    return [4 /*yield*/, Promise.all([
-                            domain ? axios.get(url) : axiosInstance.get("/form/".concat(apiKey)),
-                            fetchOrgData(domain),
-                        ])];
+                    return [4 /*yield*/, (domain
+                            ? axios.get(url)
+                            : axiosInstance.get("/form/".concat(apiKey)))];
                 case 1:
-                    _a = _b.sent(), response = _a[0], orgInfo = _a[1];
+                    response = _a.sent();
                     if (response) {
                         setForm(migrateFormData(response.data));
                         if (valuesData !== undefined) {
                             setOriginalValues(valuesData);
                         }
                     }
-                    if (orgInfo) {
-                        console.log(orgInfo);
-                        setOrganizationInfo(orgInfo);
-                    }
-                    else {
-                        setOrganizationInfo(null);
-                    }
                     return [3 /*break*/, 3];
                 case 2:
-                    error_1 = _b.sent();
-                    console.error(error_1);
+                    error_2 = _a.sent();
+                    console.error(error_2);
                     setForm(null);
-                    setOrganizationInfo(null);
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
@@ -188,9 +192,9 @@ function App(_a) {
     }); };
     if (form === undefined || organizationInfo === undefined) {
         if (isWidget) {
-            return (_jsx("div", __assign({ className: styles.widgetContainer }, { children: _jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50, color: 'var(--outlineGrey)' }, void 0) }), void 0) }), void 0));
+            return (_jsx("div", __assign({ className: styles.widgetContainer }, { children: _jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50, color: (_b = organizationInfo === null || organizationInfo === void 0 ? void 0 : organizationInfo.navbarColor) !== null && _b !== void 0 ? _b : '#b8b8b8' }, void 0) }), void 0) }), void 0));
         }
-        return (_jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50, color: 'var(--outlineGrey)' }, void 0) }), void 0));
+        return (_jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50, color: (_c = organizationInfo === null || organizationInfo === void 0 ? void 0 : organizationInfo.navbarColor) !== null && _c !== void 0 ? _c : '#b8b8b8' }, void 0) }), void 0));
     }
     else if (form === null) {
         console.log('FORM IS NULL');

package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -22,13 +22,12 @@ function ConfirmationDialog(_a) {
                 maxWidth: '100vw',
                 boxSizing: 'content-box',
             },
-        }, onClose: function () {
-            onClose();
         }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
                         onClose();
-                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("div", __assign({ className: styles.url, onClick: function () {
-                        var _a, _b, _c;
-                        (_c = (_b = (_a = window.open) === null || _a === void 0 ? void 0 : _a.call(window, confirmation.url, '_blank')) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
-                    } }, { children: confirmation.url }), void 0)] }), void 0) }), void 0));
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("label", __assign({ className: styles.url, onClick: function () {
+                                var _a, _b, _c;
+                                (_c = (_b = (_a = window
+                                    .open) === null || _a === void 0 ? void 0 : _a.call(window, confirmation.url, '_blank')) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+                            } }, { children: confirmation.url }), void 0)] }), void 0)] }), void 0) }), void 0));
 }
 export default ConfirmationDialog;

package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.module.css

@@ -2,11 +2,18 @@
     display: flex;
     flex-direction: column;
     width: fit-content;
-    max-height: 60vh;
+    max-height: 80vh;
     max-width: 80vw;
     position: relative;
 }
 
+.container {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: scroll;
+}
 .confirmationContainer,
 .confirmationContainer *,
 .confirmationContainer *::after,
@@ -20,8 +27,7 @@
     margin-left: auto;
     margin-right: auto;
     padding-top: 30px;
-    font-size: 10rem;
-    height: 10rem;
+    height: fit-content;
     margin-bottom: 15px;
 }
 
@@ -36,18 +42,18 @@
 .linkContainer {
     margin-top: 20px;
     font-size: 1.2rem;
-    margin-right: auto;
     margin-left: 20px;
 }
 .url {
     font-weight: bolder;
     margin-left: 40px;
     margin-right: 40px;
-    margin-top: 5px;
+    margin-top: 10px;
     margin-bottom: 40px;
     cursor: pointer;
     font-size: 1rem;
-    overflow: hidden;
+    max-width: calc(100% - 100px);
+    word-break: break-all;
 }
 .closeIcon {
     right: 15px;

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -44,7 +44,6 @@ function Selector(_a) {
                 width: widthStats.currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form),
-                maxWidth: '100%',
                 minHeight: step.description || step.required ? '55px' : '43px',
             } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);

package/dist/index.js

@@ -13,4 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as ReactDOM from 'react-dom';
 import App from './App';
 import styles from './index.module.css';
-ReactDOM.render(_jsx("div", __assign({ className: styles.eurekaForm }, { children: _jsx(App, { isWidget: false, apiKey: window.location.pathname.replace('/', '') }, void 0) }), void 0), document.getElementById('eureka-root'));
+var urlParams = new URLSearchParams(window.location.search);
+var values = urlParams.get('data-values');
+var dataValues = undefined;
+if (values) {
+    try {
+        dataValues = JSON.parse(decodeURIComponent(values));
+    }
+    catch (error) {
+        console.error('Invalid data-values JSON', error);
+    }
+}
+ReactDOM.render(_jsx("div", __assign({ className: styles.eurekaForm }, { children: _jsx(App, { isWidget: false, apiKey: window.location.pathname.replace('/', ''), valuesData: dataValues }, void 0) }), void 0), document.getElementById('eureka-root'));

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -62,9 +62,7 @@ var useDatePickerStyles = function (props) {
             '& .EF-MuiOutlinedInput-notchedOutline': {
                 borderColor: props.outlineColor,
                 '& span': {
-                    fontSize: props.shrunkenFontSize,
-                    paddingRight: 0,
-                    paddingLeft: 0,
+                    fontSize: props.fontSize,
                 },
             },
             '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
@@ -98,6 +96,10 @@ var useDatePickerStyles = function (props) {
 var useDatePickerLabelStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            maxWidth: 'calc(100% - 50px)',
+            textOverflow: 'ellipsis',
             marginTop: '-4px',
             fontSize: props.fontSize,
             '&.Mui-focused': {
@@ -105,7 +107,7 @@ var useDatePickerLabelStyles = function (props) {
             },
             '&.EF-MuiInputLabel-shrink': {
                 marginTop: '0px',
-                fontSize: props.shrunkenFontSize,
+                maxWidth: 'calc(100% - 5px)',
             },
             '& .Mui-error': {
                 color: props.errorColor,

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormControl from '@material-ui/core/FormControl';
@@ -105,7 +105,7 @@ var useLabelInputStyles = function (props) {
             marginTop: props.height != '40px' ? '-4px' : '0px',
             '&.EF-MuiInputLabel-shrink': {
                 marginTop: '0px',
-                maxWidth: 'calc(125% - 30px)',
+                maxWidth: 'calc(100% - 5px)',
             },
             '& .Mui-error': {
                 color: props.errorColor,
@@ -156,16 +156,11 @@ function CustomSelect(_a) {
         height: height,
         color: color,
     })();
-    var inputLabel = React.useRef();
-    var _k = React.useState(0), labelWidth = _k[0], setLabelWidth = _k[1];
-    useEffect(function () {
-        setLabelWidth(inputLabel.current.offsetWidth);
-    }, [label]);
     return (_jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
             ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {
                 margin: containerMargin,
-            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ ref: inputLabel, classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate, input: _jsx(OutlinedInput, { disabled: cantEdit, labelWidth: labelWidth, name: label, classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
+            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label + (required ? ' *' : ''), classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -59,10 +59,14 @@ var useTextfieldStyles = function (props) {
             '& label': {
                 marginTop: props.multiline ? '0px' : '-4px',
                 fontSize: props.fontSize,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
             },
             '& label.EF-MuiInputLabel-shrink': {
-                fontSize: props.shrunkenFontSize,
                 marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
             },
             '& input + fieldset': {
                 borderRadius: props.borderRadius,
@@ -78,11 +82,6 @@ var useTextfieldStyles = function (props) {
                 },
                 '& .EF-MuiOutlinedInput-notchedOutline': {
                     borderColor: props.outlineColor,
-                    '& span': {
-                        fontSize: props.shrunkenFontSize,
-                        paddingRight: 0,
-                        paddingLeft: 0,
-                    },
                 },
             },
             '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "0.2.42",
+    "version": "0.2.45",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",