@arquimedes.co/eureka-forms 1.9.133 → 2.0.0-test

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -45,62 +45,58 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cloneElement, useState } from 'react';
-import SectionComponent from '../../Section/Section';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useState } from 'react';
 import styles from './ColumnForm.module.css';
-import Loader from '../../../shared/Loader/Loader';
+import Loader from '../../../Shared/Loader/Loader';
 import React from 'react';
 import Terms from '../../Terms/Terms';
+import { useFormContext } from 'react-hook-form';
+import { useAppSelector } from '../../../hooks';
+import Section from '../../Section/Section';
+import CustomContext from '../../../Contexts/CustomContext';
 function ColumnForm(_a) {
     var _this = this;
-    var _b;
-    var onSubmit = _a.onSubmit, formController = _a.formController, props = __rest(_a, ["onSubmit", "formController"]);
-    var form = props.form, formStyle = props.formStyle, customSubmit = props.customSubmit;
-    var _c = useState(false), loading = _c[0], setLoading = _c[1];
-    var getValues = formController.getValues, setValue = formController.setValue, clearErrors = formController.clearErrors, handleSubmit = formController.handleSubmit, control = formController.control, errors = formController.formState.errors, setFocus = formController.setFocus;
-    var submit = handleSubmit(function (values) { return __awaiter(_this, void 0, void 0, function () {
-        var response;
+    var onSubmit = _a.onSubmit, customSubmitBtns = _a.customSubmitBtns;
+    var _b = useState(false), loading = _b[0], setLoading = _b[1];
+    var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, editable = _c.editable, formStyle = _c.formStyle;
+    var _d = useFormContext(), trigger = _d.trigger, getValues = _d.getValues, handleSubmit = _d.handleSubmit;
+    var sendLabel = useContext(CustomContext).sendLabel;
+    var previous = useAppSelector(function (state) { return state.site.previousSections; });
+    var next = useAppSelector(function (state) { return state.site.nextSections; });
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    var handleErrors = handleSubmit(function () { }, function (errors) {
+        console.error('Errors:', errors);
+    });
+    var submit = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var valid, values;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setLoading(true);
-                    return [4 /*yield*/, onSubmit(values)];
+                    return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
                 case 1:
-                    response = _a.sent();
+                    valid = _a.sent();
+                    /** Imprimir errores si no es valido */
+                    if (!valid) {
+                        handleErrors();
+                        return [2 /*return*/, setLoading(false)];
+                    }
+                    return [4 /*yield*/, onSubmit(getValues())];
+                case 2:
+                    values = _a.sent();
                     setLoading(false);
-                    return [2 /*return*/, response];
+                    return [2 /*return*/, values];
             }
         });
-    }); });
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), _jsx(ColumnSection, __assign({ control: control, errors: errors, getValues: getValues, setValue: setValue, clearErrors: clearErrors, setFocus: setFocus, section: form.sections[form.firstSection] }, props)), _jsx(Terms, __assign({}, props, { onSubmit: onSubmit, formController: formController })), !props.postview && props.editable && (_jsxs(React.Fragment, { children: [!customSubmit && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: submit, style: {
+    }); }, []);
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), previous.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), next.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [!customSubmitBtns && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: submit, style: {
                                 background: formStyle.primaryColor,
                                 color: formStyle.primaryContrastColor,
                             }, disabled: loading }, { children: [_jsx("div", __assign({ style: {
                                         visibility: loading
                                             ? 'hidden'
                                             : 'visible',
-                                    } }, { children: (_b = props.sendLabel) !== null && _b !== void 0 ? _b : 'Enviar' })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] })) }))), customSubmit &&
-                        cloneElement(customSubmit, {
-                            onSubmit: submit,
-                            loading: loading,
-                        })] }))] })));
+                                    } }, { children: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] })) }))), customSubmitBtns === null || customSubmitBtns === void 0 ? void 0 : customSubmitBtns(submit, loading)] }))] })));
 }
 export default ColumnForm;
-function ColumnSection(props) {
-    var section = props.section;
-    if (!props.section)
-        return _jsx(_Fragment, {});
-    return (_jsxs(React.Fragment, { children: [_jsx(SectionComponent, __assign({}, props)), section.nextSection && (_jsx(ColumnSection, __assign({}, props, { section: props.form.sections[section.nextSection] })))] }));
-}

package/dist/Form/FormTypes/ColumnForm/ColumnForm.module.css

@@ -45,7 +45,3 @@
     left: 0px;
     position: absolute;
 }
-
-.termsContainer {
-    max-width: 100%;
-}

package/dist/Form/FormTypes/StepperForm/StepperForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../../Form';
-declare function StepperForm({}: FormComponentProps): JSX.Element;
+declare function StepperForm({ onSubmit }: FormComponentProps): JSX.Element;
 export default StepperForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -1,6 +1,125 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// import styles from './StepperForm.module.css';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useState } from 'react';
+import styles from './StepperForm.module.css';
+import Loader from '../../../Shared/Loader/Loader';
+import Terms from '../../Terms/Terms';
+import { useFormContext } from 'react-hook-form';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import Section from '../../Section/Section';
+import CustomContext from '../../../Contexts/CustomContext';
+import * as SiteReducer from '../../../States/SiteStateReducer';
+import { getAppState } from '../../../Utils/store';
 function StepperForm(_a) {
-    return _jsx("div", {});
+    var _this = this;
+    var onSubmit = _a.onSubmit;
+    var _b = useState(undefined), loading = _b[0], setLoading = _b[1];
+    var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, editable = _c.editable, formStyle = _c.formStyle;
+    var _d = useFormContext(), trigger = _d.trigger, getValues = _d.getValues, handleSubmit = _d.handleSubmit;
+    var sendLabel = useContext(CustomContext).sendLabel;
+    var dispatch = useAppDispatch();
+    var previous = useAppSelector(function (state) { return state.site.previousSections; });
+    var idCurrent = useAppSelector(function (state) { return state.site.idCurrentSection; });
+    var next = useAppSelector(function (state) { return state.site.nextSections; });
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    var handleErrors = handleSubmit(function () { }, function (errors) {
+        console.error('Errors:', errors);
+    });
+    var handlePrevious = useCallback(function () {
+        dispatch(SiteReducer.handlePrevious(getValues()));
+    }, []);
+    var handleNext = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var valid, state, values, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading('NEXT');
+                    return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
+                case 1:
+                    valid = _a.sent();
+                    /** Imprimir errores si no es valido */
+                    if (!valid) {
+                        handleErrors();
+                        return [2 /*return*/, setLoading(undefined)];
+                    }
+                    if (next.length > 0) {
+                        dispatch(SiteReducer.handleNext(getValues()));
+                        return [2 /*return*/, setLoading(undefined)];
+                    }
+                    return [4 /*yield*/, dispatch(getAppState()).unwrap()];
+                case 2:
+                    state = _a.sent();
+                    values = state.site.previousSections.reduce(function (v, idSection) { return (__assign(__assign({}, v), state.site.values.sections[idSection])); }, {});
+                    /** Add the current section's values */
+                    values = __assign(__assign({}, values), getValues());
+                    return [4 /*yield*/, onSubmit(values)];
+                case 3:
+                    response = _a.sent();
+                    setLoading(undefined);
+                    return [2 /*return*/, response];
+            }
+        });
+    }); }, [next]);
+    if (!idCurrent)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [previous.length > 0 && (_jsxs("button", __assign({ "data-testid": "form__back", className: styles.formBtn, onClick: handlePrevious, style: {
+                            background: formStyle.primaryColor,
+                            color: formStyle.primaryContrastColor,
+                        }, disabled: !!loading }, { children: [_jsx("div", __assign({ style: {
+                                    visibility: loading === 'BACK' ? 'hidden' : 'visible',
+                                } }, { children: "Volver" })), loading === 'BACK' && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] }))), (next.length > 0 || (!postview && editable)) && (_jsxs("button", __assign({ "data-testid": "form__submit", className: styles.formBtn, onClick: handleNext, style: {
+                            background: formStyle.primaryColor,
+                            color: formStyle.primaryContrastColor,
+                        }, disabled: !!loading }, { children: [_jsx("div", __assign({ style: {
+                                    visibility: loading === 'NEXT' ? 'hidden' : 'visible',
+                                } }, { children: next.length > 0
+                                    ? 'Siguiente'
+                                    : sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' })), loading === 'NEXT' && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] })))] }))] })));
 }
 export default StepperForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.module.css

@@ -0,0 +1,53 @@
+.container {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+    position: relative;
+}
+.curtain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+.btnsContainer {
+    margin-top: 10px;
+    max-width: calc(100% - 40px);
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -ms-flexbox; /* TWEENER - IE 10 */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px 20px;
+}
+
+.formBtn {
+    max-width: 100%;
+    border-radius: 20px;
+    padding: 15px 20px;
+    font-size: 1.4rem;
+    cursor: pointer;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: none;
+    position: relative;
+}
+.formBtn[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.loaderContainer {
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    left: 0px;
+    position: absolute;
+}

package/dist/Form/Hooks.d.ts

@@ -0,0 +1,9 @@
+export declare const selectCurrentValues: ((state: {
+    global: import("../States/GlobalStateReducer").GlobalState;
+    site: import("../States/SiteStateReducer").SiteState;
+    widthStats: import("./Form").WidthStats;
+}) => Record<string, any>) & import("reselect").OutputSelectorFields<(args_0: string | null, args_1: Record<string, Record<string, any>>) => Record<string, any>, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};

package/dist/Form/Hooks.js

@@ -0,0 +1,7 @@
+import { createSelector } from 'reselect';
+export var selectCurrentValues = createSelector([
+    function (state) { return state.site.idCurrentSection; },
+    function (state) {
+        return state.site.values.sections;
+    },
+], function (idCurrent, values) { var _a; return (_a = values[idCurrent !== null && idCurrent !== void 0 ? idCurrent : '']) !== null && _a !== void 0 ? _a : {}; });

package/dist/Form/Section/MaterialSection/MaterialSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SectionComponentProps } from '../Section';
-declare function MaterialSection({ form, section, widthStats, sendLabel, ...others }: SectionComponentProps): JSX.Element;
+declare function MaterialSection({ idSection }: SectionComponentProps): JSX.Element;
 export default MaterialSection;

package/dist/Form/Section/MaterialSection/MaterialSection.js

@@ -9,34 +9,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../../FormSteps/Step';
 import styles from './MaterialSection.module.css';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useContext } from 'react';
+import CustomContext from '../../../Contexts/CustomContext';
+import FormContext from '../../../Contexts/FormContext';
 function MaterialSection(_a) {
     var _b;
-    var form = _a.form, section = _a.section, widthStats = _a.widthStats, sendLabel = _a.sendLabel, others = __rest(_a, ["form", "section", "widthStats", "sendLabel"]);
+    var idSection = _a.idSection;
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var editable = useAppSelector(function (state) { return state.global; }).editable;
+    var form = useContext(FormContext);
+    var sendLabel = useContext(CustomContext).sendLabel;
+    var section = form.sections[idSection];
+    if (!section)
+        return _jsx(_Fragment, {});
     return (_jsx("div", __assign({ className: styles.container, style: {
             width: (form.size.blockSize + form.size.spacingSize) *
                 form.size.blockNum,
             justifyContent: sendLabel !== undefined &&
-                widthStats.currentBreakPoint < form.size.blockNum
+                currentBreakPoint < form.size.blockNum
                 ? 'center'
                 : 'normal',
         } }, { children: (_b = section.steps) === null || _b === void 0 ? void 0 : _b.map(function (idStep) {
             var step = form.steps[idStep];
-            return (_createElement(StepComponent, __assign({}, others, { globalEditable: others.editable, widthStats: widthStats, form: form, step: step, key: idStep, level: 0 })));
+            return (_jsx(StepComponent, { editable: editable, step: step, level: 0 }, idStep));
         }) })));
 }
 export default MaterialSection;

package/dist/Form/Section/Section.d.ts

@@ -1,38 +1,6 @@
 /// <reference types="react" />
-import { Control, FieldValues, UseFormGetValues } from 'react-hook-form';
-import { Organization } from '../../@Types';
-import { Form, FormStyle, Section } from '../../@Types/Form';
-import { CustomStep } from '../../App';
-import { DependencyStore, WidthStats } from '../Form';
-export interface RecursiveData {
-    form: Form;
-    organization: Organization;
-    control: Control<FieldValues, object>;
-    formStyle: FormStyle;
-    /** If the formsteps can be edited (For internal) */
-    editable: boolean;
-    preview: boolean;
-    postview: boolean;
-    partial: boolean;
-    domain?: string;
-    errors: Record<string, any>;
-    widthStats: WidthStats;
-    clearErrors: Function;
-    getValues: UseFormGetValues<FieldValues>;
-    originalValues: Record<string, any>;
-    customSteps: Record<string, CustomStep>;
-    customStepProps: Record<string, any>;
-    /** Function to call on postview to fetch the download url of a file */
-    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
-    dependencyStore: DependencyStore;
-    setDependencyStore: React.Dispatch<React.SetStateAction<DependencyStore>>;
-    setFocus: (id: string) => void;
-    setValue: (id: string, value: any) => void;
-}
-export interface SectionComponentProps extends RecursiveData {
-    /** The custom send label to display */
-    sendLabel?: string;
-    section: Section;
+export interface SectionComponentProps {
+    idSection: string;
 }
 declare function SectionComponent(props: SectionComponentProps): JSX.Element;
 export default SectionComponent;

package/dist/Form/Section/Section.js

@@ -12,12 +12,18 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialSection from './MaterialSection/MaterialSection';
+import SectionContext from '../../Contexts/SectionContext';
+import { useAppSelector } from '../../hooks';
 function SectionComponent(props) {
-    switch (props.formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return _jsx(MaterialSection, __assign({}, props));
+    var formStyle = useAppSelector(function (state) { return state.global.formStyle; });
+    var renderSectionType = function () {
+        switch (formStyle.type) {
+            case FormStyleTypes.MATERIAL:
+            default: {
+                return _jsx(MaterialSection, __assign({}, props));
+            }
         }
-    }
+    };
+    return (_jsx(SectionContext.Provider, __assign({ value: props.idSection }, { children: renderSectionType() })));
 }
 export default SectionComponent;

package/dist/Form/Terms/Term/MaterialTerm/MaterialTerm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TermComponentProps } from '../Term';
-declare function TermComponent({ term, errors, control, postview, setValue, formStyle, tempError, }: TermComponentProps): JSX.Element;
+declare function TermComponent({ term, tempError }: TermComponentProps): JSX.Element;
 export default TermComponent;

package/dist/Form/Terms/Term/MaterialTerm/MaterialTerm.js

@@ -24,15 +24,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from '@material-ui/core';
 import React from 'react';
 import { useState } from 'react';
-import { Controller } from 'react-hook-form';
-import RoundedButton from '../../../../shared/RoundedButton/RoundedButton';
-import RoundedCheckBox from '../../../../shared/RoundedCheckBox/RoundedCheckBox';
+import { useController } from 'react-hook-form';
+import RoundedButton from '../../../../Shared/RoundedButton/RoundedButton';
+import RoundedCheckBox from '../../../../Shared/RoundedCheckBox/RoundedCheckBox';
 import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 import styles from './MaterialTerm.module.css';
+import { useAppSelector } from '../../../../hooks';
 function TermComponent(_a) {
     var _b;
-    var term = _a.term, errors = _a.errors, control = _a.control, postview = _a.postview, setValue = _a.setValue, formStyle = _a.formStyle, tempError = _a.tempError;
-    var _c = useState(false), showDialog = _c[0], setShowDialog = _c[1];
+    var term = _a.term, tempError = _a.tempError;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var _d = useController({
+        name: term.id,
+        rules: {
+            required: true,
+        },
+        defaultValue: false,
+        shouldUnregister: true,
+    }), _e = _d.field, ref = _e.ref, field = __rest(_e, ["ref"]), error = _d.fieldState.error;
+    var _f = useState(false), showDialog = _f[0], setShowDialog = _f[1];
     /**
      * Function that renders the highlighted text
      * @returns a string with span highlighted
@@ -42,7 +52,7 @@ function TermComponent(_a) {
             var parts = text.split(/{{(.*?)}}/gi);
             for (var i = 1; i < parts.length; i += 2) {
                 parts[i] = (_jsx("span", __assign({ className: styles.highlight, style: {
-                        color: !!errors[term.id] && tempError
+                        color: !!error && tempError
                             ? formStyle.errorColor
                             : formStyle.primaryColor,
                     }, onClick: function () {
@@ -72,15 +82,10 @@ function TermComponent(_a) {
                             } }, { children: term.clickEffect.title })), _jsx("div", __assign({ className: styles.dialogContentContainer }, { children: term.clickEffect.text })), _jsx(RoundedButton, { text: 'Aceptar', padding: "20px 15px", backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, fontSize: 20, onClick: function () {
                                 setShowDialog(false);
                                 if (!postview) {
-                                    setValue(term.id, true);
+                                    field.onChange(true);
                                 }
-                            } })] }))) })), _jsxs("div", __assign({ className: styles.container + ' noselect' }, { children: [_jsx("div", __assign({ className: styles.checkboxContainer }, { children: _jsx(Controller, { name: term.id, control: control, rules: {
-                                required: true,
-                            }, defaultValue: false, shouldUnregister: true, render: function (_a) {
-                                var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-                                return (_jsx(RoundedCheckBox, __assign({ inputRef: ref }, field, { checked: field.value, cantEdit: postview, padding: "5px", checkedColor: formStyle.primaryColor, errorColor: formStyle.errorColor, size: "1.5rem", error: !!errors[term.id] })));
-                            } }) })), _jsx("div", __assign({ className: styles.messageContainer, style: {
-                            color: !!errors[term.id] && tempError
+                            } })] }))) })), _jsxs("div", __assign({ className: styles.container + ' noselect' }, { children: [_jsx("div", __assign({ className: styles.checkboxContainer }, { children: _jsx(RoundedCheckBox, __assign({ inputRef: ref }, field, { checked: field.value, cantEdit: postview, padding: "5px", checkedColor: formStyle.primaryColor, errorColor: formStyle.errorColor, size: "1.5rem", error: !!error })) })), _jsx("div", __assign({ className: styles.messageContainer, style: {
+                            color: !!error && tempError
                                 ? formStyle.errorColor
                                 : 'inherit',
                         } }, { children: renderText(term.message) }))] }))] }));

package/dist/Form/Terms/Term/Term.d.ts

@@ -1,15 +1,8 @@
 /// <reference types="react" />
-import { Control, FieldValues } from 'react-hook-form';
-import { Form, FormStyle, Term } from '../../../@Types/Form';
+import { Term } from '../../../@Types/Form';
 export interface TermComponentProps {
     term: Term;
-    form: Form;
-    control: Control<FieldValues, object>;
-    errors: Record<string, any>;
-    formStyle: FormStyle;
-    postview: boolean;
     tempError: boolean;
-    setValue: Function;
 }
 declare function TermComponent(props: TermComponentProps): JSX.Element;
 export default TermComponent;

package/dist/Form/Terms/Term/Term.js

@@ -11,9 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../../constants/FormStepTypes';
+import { useAppSelector } from '../../../hooks';
 import MaterialTerm from './MaterialTerm/MaterialTerm';
 function TermComponent(props) {
-    switch (props.formStyle.type) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             return _jsx(MaterialTerm, __assign({}, props));

package/dist/Form/Terms/Terms.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { FormComponentProps } from '../Form';
-declare function Terms({ form, internal, postview, formStyle, originalValues, formController, }: FormComponentProps): JSX.Element;
+declare function Terms(): JSX.Element;
 export default Terms;

package/dist/Form/Terms/Terms.js

@@ -10,26 +10,35 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import styles from '../Form.module.css';
+import { useContext, useEffect, useState } from 'react';
+import styles from './Terms.module.css';
 import TermComponent from './Term/Term';
-function Terms(_a) {
-    var form = _a.form, internal = _a.internal, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues, formController = _a.formController;
-    var setValue = formController.setValue, control = formController.control, formState = formController.formState;
+import { useFormContext } from 'react-hook-form';
+import FormContext from '../../Contexts/FormContext';
+import { useAppSelector } from '../../hooks';
+function Terms() {
+    var _a = useAppSelector(function (state) { return state.global; }), postview = _a.postview, internal = _a.internal;
+    var isInteralAgent = useAppSelector(function (state) {
+        return state.site.values.global['INTERNAL_CREATING_AGENT'] !== undefined;
+    });
+    var form = useContext(FormContext);
+    var isSubmitting = useFormContext().formState.isSubmitting;
     var _b = useState(false), tempError = _b[0], setTempError = _b[1];
     useEffect(function () {
+        if (!isSubmitting)
+            return;
         setTempError(true);
         setTimeout(function () {
             setTempError(false);
         }, 500);
-    }, [formState.isSubmitting]);
+    }, [isSubmitting]);
     if (form.terms &&
         (!internal || (internal && postview)) &&
-        (originalValues === null || originalValues === void 0 ? void 0 : originalValues['INTERNAL_CREATING_AGENT']) === undefined) {
+        !isInteralAgent) {
         return (_jsx("div", __assign({ className: styles.termsContainer, style: {
                 width: (form.size.blockSize + form.size.spacingSize) *
                     form.size.blockNum,
-            } }, { children: form.terms.map(function (term) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: formState.errors, form: form, formStyle: formStyle }, term.id)); }) })));
+            } }, { children: form.terms.map(function (term) { return (_jsx(TermComponent, { term: term, tempError: tempError }, term.id)); }) })));
     }
     return _jsx(_Fragment, {});
 }

package/dist/Form/Terms/Terms.module.css

@@ -0,0 +1,3 @@
+.termsContainer {
+    max-width: 100%;
+}

package/dist/FormSteps/@Construction/CBRElementStep/CBRElementStep.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { StepProps } from '../../Step';
 import { CBRElementStep } from '../../../@Types/CBRFormStep';
-declare function CBRElementStepComponent(props: ElementSubStepRendererProps): JSX.Element;
-export default CBRElementStepComponent;
-export interface ElementSubStepRendererProps extends Omit<StepProps, 'step'> {
+export interface ElementStepProps extends Omit<StepProps, 'step'> {
     step: CBRElementStep;
 }
+declare function CBRElementStepComponent(props: ElementStepProps): JSX.Element;
+export default CBRElementStepComponent;