@arquimedes.co/eureka-forms 1.2.0-test → 1.4.0-test

package/dist/@Types/FormStep.d.ts

@@ -1,4 +1,4 @@
-import Types, { ClassifierOptionTypes, ClientInfoTypes, OptionTypes } from '../constants/FormStepTypes';
+import Types, { ClassifierOptionTypes, OptionTypes } from '../constants/FormStepTypes';
 export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
 export interface Title {
     id: string;
@@ -34,7 +34,6 @@ export interface TextArea {
     description: string | null;
     required: boolean;
     hasTextEditor: boolean;
-    isPrimary: boolean;
 }
 export interface TextInput {
     id: string;
@@ -43,9 +42,6 @@ export interface TextInput {
     description: string | null;
     validation?: FormValidation;
     required: boolean;
-    isSubject: boolean;
-    isClientInfo: boolean;
-    clientInfoType?: ClientInfoTypes;
     size: 1 | 2 | 3 | 4;
 }
 export interface DatePicker {
@@ -55,7 +51,6 @@ export interface DatePicker {
     pickTime: boolean;
     description: string | null;
     required: boolean;
-    showIcon: boolean;
     size: 1 | 2 | 3 | 4;
 }
 declare type FormValidation = {

package/dist/App.d.ts

@@ -19,6 +19,8 @@ export interface AppProps {
     valuesData?: Record<string, unknown>;
     /** Custom steps to display */
     customSteps?: Record<string, CustomStep>;
+    /** Custom function to call on send */
+    customSend?: (values: any, reload: Function) => Promise<void>;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
     /** Function to call after the confimation dialog has been closed */
@@ -28,7 +30,7 @@ export interface CustomStep {
     component: ReactNode;
     updateValue: (idStep: string, values: Record<string, any>, form: Form) => void;
 }
-declare function App({ apiKey, domain, preview, formData, postview, isWidget, internal, valuesData, customSteps, handleConfirmed, ...others }: AppProps): JSX.Element;
+declare function App({ apiKey, domain, preview, formData, postview, isWidget, internal, valuesData, customSend, customSteps, handleConfirmed, ...others }: AppProps): JSX.Element;
 export default App;
 export declare enum SIZES {
     SMALL = "SMALL",

package/dist/App.js

@@ -68,7 +68,7 @@ import widgetInstance from './AxiosWidget';
 function App(_a) {
     var _this = this;
     var _b, _c, _d, _e;
-    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 apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSend = _a.customSend, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSend", "customSteps", "handleConfirmed"]);
     var _f = useState(undefined), form = _f[0], setForm = _f[1];
     var _g = useState({}), originalValues = _g[0], setOriginalValues = _g[1];
     var _h = useState(undefined), organizationInfo = _h[0], setOrganizationInfo = _h[1];
@@ -127,7 +127,7 @@ function App(_a) {
                     if (!(organizationInfo && form !== undefined)) return [3 /*break*/, 4];
                     if (!(process.env.NODE_ENV === 'production' &&
                         apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
-                        apiKey !== 'X4aMB86AHeg4qRs4CH4o8' &&
+                        apiKey !== 'FORMSTEST' &&
                         !internal &&
                         !postview &&
                         !preview)) return [3 /*break*/, 4];
@@ -256,7 +256,7 @@ function App(_a) {
                     if (handleConfirmed) {
                         handleConfirmed();
                     }
-                }, postview: postview === true, internal: internal === true, apiKey: apiKey, domain: domain, originalValues: originalValues, containerRef: containerRef, organization: organizationInfo, customSteps: customSteps !== null && customSteps !== void 0 ? customSteps : {} }), void 0) }), void 0));
+                }, postview: postview === true, internal: internal === true, apiKey: apiKey, domain: domain, customSend: customSend, originalValues: originalValues, containerRef: containerRef, organization: organizationInfo, customSteps: customSteps !== null && customSteps !== void 0 ? customSteps : {} }), void 0) }), void 0));
     }
 }
 export default App;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../Form';
-declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, originalValues, ...others }: FormComponentProps): JSX.Element;
+declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, customSend, originalValues, ...others }: FormComponentProps): JSX.Element;
 export default ColumnForm;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -70,7 +70,7 @@ import axiosInstance from '../../../AxiosAPI';
 import widgetInstance from '../../../AxiosWidget';
 function ColumnForm(_a) {
     var _this = this;
-    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "originalValues"]);
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, customSend = _a.customSend, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "customSend", "originalValues"]);
     var _b = useState(false), tempError = _b[0], setTempError = _b[1];
     var _c = useForm({
         defaultValues: mapOriginal(originalValues, form),
@@ -93,7 +93,7 @@ function ColumnForm(_a) {
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    if (!(apiKey || internal)) return [3 /*break*/, 8];
+                    if (!(apiKey || internal)) return [3 /*break*/, 11];
                     return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
                 case 1:
                     valid = _c.sent();
@@ -104,42 +104,46 @@ function ColumnForm(_a) {
                     setTimeout(function () {
                         setTempError(false);
                     }, 500);
-                    return [3 /*break*/, 8];
+                    return [3 /*break*/, 11];
                 case 2:
-                    _c.trys.push([2, 7, , 8]);
+                    _c.trys.push([2, 10, , 11]);
                     setLoading(true);
                     for (_i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
                         idStep = _a[_i];
                         updateValue(idStep, values, form, customSteps);
                     }
-                    if (internal) {
-                        // eslint-disable-next-line no-console
-                        console.log('UPDATED:', values);
-                    }
+                    if (!customSend) return [3 /*break*/, 4];
+                    return [4 /*yield*/, customSend(values, reload)];
+                case 3:
+                    _c.sent();
+                    return [3 /*break*/, 9];
+                case 4:
                     payload = {
                         formValues: { steps: values },
                     };
                     url = "/ticket/" + (internal ? form.apiKey : apiKey);
-                    if (!(domain || internal)) return [3 /*break*/, 4];
+                    if (!(domain || internal)) return [3 /*break*/, 6];
                     return [4 /*yield*/, widgetInstance.post(url + "?idOrganization=" + domain, payload)];
-                case 3:
-                    _b = _c.sent();
-                    return [3 /*break*/, 6];
-                case 4: return [4 /*yield*/, axiosInstance.post(url, payload)];
                 case 5:
                     _b = _c.sent();
-                    _c.label = 6;
-                case 6:
+                    return [3 /*break*/, 8];
+                case 6: return [4 /*yield*/, axiosInstance.post(url, payload)];
+                case 7:
+                    _b = _c.sent();
+                    _c.label = 8;
+                case 8:
                     resp = _b;
                     setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    _c.label = 9;
+                case 9:
                     setLoading(false);
-                    return [3 /*break*/, 8];
-                case 7:
+                    return [3 /*break*/, 11];
+                case 10:
                     error_1 = _c.sent();
                     console.error(error_1);
                     setLoading(false);
-                    return [3 /*break*/, 8];
-                case 8: return [2 /*return*/];
+                    return [3 /*break*/, 11];
+                case 11: return [2 /*return*/];
             }
         });
     }); };
@@ -196,38 +200,40 @@ var mapOriginal = function (values, form) {
 };
 var updateValue = function (idStep, values, form, customSteps) {
     var step = form.steps[idStep];
-    switch (step === null || step === void 0 ? void 0 : step.type) {
-        case Types.TEXTAREA: {
-            var value = values[step.id];
-            if (step.hasTextEditor) {
-                var currentContent = value.getCurrentContent();
-                values[step.id] = {
-                    value: currentContent.getPlainText(),
-                    draft: convertToRaw(currentContent),
-                };
+    var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
+    if (custom !== undefined) {
+        custom.updateValue(idStep, values, form);
+    }
+    else {
+        switch (step === null || step === void 0 ? void 0 : step.type) {
+            case Types.TEXTAREA: {
+                var value = values[step.id];
+                if (step.hasTextEditor) {
+                    var currentContent = value.getCurrentContent();
+                    values[step.id] = {
+                        value: currentContent.getPlainText(),
+                        draft: convertToRaw(currentContent),
+                    };
+                }
+                else {
+                    values[step.id] = {
+                        value: value,
+                        draft: stringToDraft(value),
+                    };
+                }
+                break;
             }
-            else {
-                values[step.id] = {
-                    value: value,
-                    draft: stringToDraft(value),
-                };
+            case Types.FILEUPLOAD: {
+                var value = values[step.id];
+                values[step.id] = value.map(function (val) { return ({
+                    fileName: val.fileName,
+                    S3Key: val.S3Key,
+                }); });
+                break;
             }
-            break;
+            default:
+                break;
         }
-        case Types.FILEUPLOAD: {
-            var value = values[step.id];
-            values[step.id] = value.map(function (val) { return ({
-                fileName: val.fileName,
-                S3Key: val.S3Key,
-            }); });
-            break;
-        }
-        default:
-            var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
-            if (custom !== undefined) {
-                custom.updateValue(idStep, values, form);
-            }
-            break;
     }
 };
 function stringToDraft(text) {

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

@@ -24,10 +24,8 @@ function ConfirmationDialog(_a) {
             },
         }, 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), _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, "data-testid": "ResUrl", 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: _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("a", __assign({ className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
+                                color: formStyle.textColor,
                             } }, { children: confirmation.url }), void 0)] }), void 0)] }), void 0) }), void 0));
 }
 export default ConfirmationDialog;

package/dist/FormComponents/Form/Form.d.ts

@@ -11,6 +11,7 @@ export interface FormComponentProps {
     form: Form;
     originalValues: Record<string, unknown>;
     customSteps: Record<string, CustomStep>;
+    customSend?: (values: any, reload: Function) => Promise<void>;
     widthStats: WidthStats;
     internal: boolean;
     reload: Function;

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, inputRef: field.ref, cantEdit: postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id], required: step.required }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -190,7 +190,8 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container, "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
+    return (_jsxs("div", __assign({ className: styles.container +
+            (error || !!errors[step.id] ? ' EF-error' : ''), "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
                     var files = e.target.files;
                     if (files) {
                         var filesArray = Array.from(files);

package/dist/FormComponents/Step/Step.js

@@ -33,6 +33,10 @@ import FileUploadStep from './FileUploadStep/FileUploadStep';
 import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
 function StepComponent(_a) {
     var step = _a.step, props = __rest(_a, ["step"]);
+    var customStep = props.customSteps[step.type];
+    if (customStep) {
+        return customStep.component(__assign({ step: step }, props));
+    }
     switch (step.type) {
         case Types.TITLE: {
             return _jsx(TitleStep, __assign({ step: step }, props), void 0);
@@ -62,13 +66,7 @@ function StepComponent(_a) {
             return _jsx(FileUploadStep, __assign({ step: step }, props), void 0);
         }
         default:
-            var customStep = props.customSteps[step.type];
-            if (customStep) {
-                return customStep.component(__assign({ step: step }, props));
-            }
-            else {
-                return _jsx("div", {}, void 0);
-            }
+            return _jsx("div", {}, void 0);
     }
 }
 export default StepComponent;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,10 +20,9 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var _b;
     var step = _a.step, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
-    var _c = useState(false), hovering = _c[0], setHovering = _c[1];
-    var _d = useState(false), focus = _d[0], setFocus = _d[1];
+    var _b = useState(false), hovering = _b[0], setHovering = _b[1];
+    var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
         if (focus) {
             return {
@@ -42,6 +41,23 @@ function TextAreaStep(_a) {
             };
         }
     };
+    var calcDefaultStringValue = function (defaultValue) {
+        var _a;
+        if (typeof defaultValue === 'string') {
+            return defaultValue;
+        }
+        else {
+            return (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) !== null && _a !== void 0 ? _a : '';
+        }
+    };
+    var calcDefaultDraftValue = function (defaultValue) {
+        if (typeof defaultValue === 'string') {
+            return EditorState.createWithContent(convertFromRaw(stringToDraft(defaultValue)));
+        }
+        else {
+            return EditorState.createWithContent(convertFromRaw(getRawText(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.draft, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text)));
+        }
+    };
     if (step.hasTextEditor) {
         return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
                 '--eureka-outline': formStyle.outlineColor,
@@ -54,7 +70,7 @@ function TextAreaStep(_a) {
                         if (!postview) {
                             setFocus(false);
                         }
-                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
+                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', "data-testid": step.id, style: calcStyle(), onMouseEnter: function () {
                             if (!postview) {
                                 setHovering(true);
                             }
@@ -67,7 +83,7 @@ function TextAreaStep(_a) {
                                 setFocus(true);
                             }
                         } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
-                                ? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
+                                ? calcDefaultDraftValue(originalValues[step.id])
                                 : EditorState.createEmpty(), rules: step.required
                                 ? {
                                     validate: function (editorState) {
@@ -95,7 +111,7 @@ function TextAreaStep(_a) {
                                 }
                                 return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
                                         setFocus(true);
-                                    }, "data-testid": step.id, readOnly: postview, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar +
+                                    }, readOnly: postview, onBlur: field.onBlur, stripPastedStyles: true, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar +
                                         (postview
                                             ? ' postview-editor-toolbar'
                                             : ''), editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
@@ -123,7 +139,7 @@ function TextAreaStep(_a) {
     else {
         return (_jsx("div", __assign({ className: styles.container, style: {
                 paddingBottom: step.description || !!errors[step.id] ? '0px' : '23px',
-            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: (_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : '', rules: {
+            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: calcDefaultStringValue(originalValues[step.id]), rules: {
                     required: step.required
                         ? 'Este campo es obligatorio'
                         : undefined,

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -27,7 +27,7 @@
 
 .editor {
     margin: -5px 10px 0 10px;
-    height: calc(100% - 46px) !important;
+    height: calc(100% - 22px) !important;
 }
 
 .wrapper {

package/dist/constants/FormStepTypes.d.ts

@@ -25,10 +25,4 @@ export declare enum ClassifierOptionTypes {
     HIDE = "CLASSIFIER_HIDE",
     NESTED = "CLASSIFIER_NESTED"
 }
-export declare enum ClientInfoTypes {
-    NAME = "NAME",
-    LASTNAME = "LASTNAME",
-    EMAIL = "EMAIL",
-    OTHER = "OTHER"
-}
 export default TYPES;

package/dist/constants/FormStepTypes.js

@@ -30,11 +30,4 @@ export var ClassifierOptionTypes;
     ClassifierOptionTypes["HIDE"] = "CLASSIFIER_HIDE";
     ClassifierOptionTypes["NESTED"] = "CLASSIFIER_NESTED";
 })(ClassifierOptionTypes || (ClassifierOptionTypes = {}));
-export var ClientInfoTypes;
-(function (ClientInfoTypes) {
-    ClientInfoTypes["NAME"] = "NAME";
-    ClientInfoTypes["LASTNAME"] = "LASTNAME";
-    ClientInfoTypes["EMAIL"] = "EMAIL";
-    ClientInfoTypes["OTHER"] = "OTHER";
-})(ClientInfoTypes || (ClientInfoTypes = {}));
 export default TYPES;

package/dist/shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import { DatePickerProps } from '@material-ui/pickers';
 interface StyleProps {
     /** The color of the text */
     textColor?: string;
@@ -38,13 +38,11 @@ interface StyleProps {
     helperTextColor?: string;
 }
 interface RoundedDatePickerProps extends StyleProps {
-    /** If the calendar icon should be shown */
-    showIcon?: boolean;
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
  */
-declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & KeyboardDatePickerProps> {
+declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & DatePickerProps> {
     render(): JSX.Element;
 }
 export default RoundedDatePicker;

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -39,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { KeyboardDatePicker, KeyboardDateTimePicker, } from '@material-ui/pickers';
+import { DatePicker, DateTimePicker, } from '@material-ui/pickers';
 import { getLocale } from '../../FormComponents/Form/Form';
 import { format } from 'date-fns';
 var useDatePickerStyles = function (props) {
@@ -47,8 +47,9 @@ var useDatePickerStyles = function (props) {
         root: {
             borderRadius: props.borderRadius,
             backgroundColor: props.backgroundColor,
+            cursor: props.cantEdit ? 'default' : 'pointer',
             '& input, textarea': {
-                cursor: props.cantEdit ? 'default' : 'text',
+                cursor: props.cantEdit ? 'default' : 'pointer',
                 padding: props.padding,
                 fontWeight: props.fontWeight,
                 color: props.textColor,
@@ -210,7 +211,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.showIcon, showIcon = _r === void 0 ? true : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "pickTime", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.cantEdit, cantEdit = _r === void 0 ? false : _r, _s = _a.pickTime, pickTime = _s === void 0 ? false : _s, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -277,7 +278,7 @@ function CustomDatePicker(_a) {
         helperTextColor: helperTextColor,
     })();
     if (pickTime) {
-        return (_jsx(KeyboardDateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -286,6 +287,7 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
@@ -298,7 +300,7 @@ function CustomDatePicker(_a) {
             }, variant: "dialog" }), void 0));
     }
     else {
-        return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -307,6 +309,7 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.2.0-test",
+    "version":"1.4.0-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -57,11 +57,12 @@
         "@types/react-router-dom": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^4.24.0",
         "@typescript-eslint/parser": "^4.24.0",
-        "cypress": "^9.5.1",
+        "cypress": "^9.5.2",
         "eslint": "^7.27.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^3.4.0",
         "jest-junit": "^12.2.0",
+        "local-web-server": "^5.2.0",
         "postcss-normalize": "^10.0.1",
         "prettier": "^2.3.0",
         "react": "^17.0.2",
@@ -76,8 +77,7 @@
         "react": "^17.x.x",
         "react-dom": "^17.x.x",
         "react-draft-wysiwyg": "^1.14.x",
-        "react-hook-form": "^7.6.4",
-        "react-router-dom": "^5.2.0"
+        "react-hook-form": "^7.6.4"
     },
     "publishConfig": {
         "access": "public"