@arquimedes.co/eureka-forms 1.3.0-test → 1.4.3-test

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

@@ -0,0 +1,72 @@
+import Types from '../constants/CBRFormStepTypes';
+import { GSmartSelect, GTextArea, GTextInput, GBaseStep } from './GenericFormSteps';
+export declare type CBRFormStep = CBRFirstNameStep | CBRMiddleNameStep | CBRLastNameStep | CBRSecondLastNameStep | PostVentaStep | CBRProjectStep | CBRDocStep | CBRCelStep | CBRPhoneStep | CBRDocTypeStep | CBREmailStep | CBRRequesterTypeStep | CBRPropertyStep | CBRSpaceTypeStep | CBRElementStep | CBRCommentStep | CBRIncidentsStep;
+export interface PostVentaStep extends GBaseStep {
+    type: Types.CBR_POSTVENTA;
+}
+export interface CBRProjectStep extends GSmartSelect {
+    type: Types.CBR_PROYECTO;
+    steps: string[];
+    /** Only has maxSize if level === 0 */
+    maxSize: number;
+}
+export interface CBRDocTypeStep extends Omit<GSmartSelect, 'showIcon'> {
+    type: Types.CBR_TIPO_DOC;
+}
+export interface CBRRequesterTypeStep extends GSmartSelect {
+    type: Types.CBR_TIPO_SOLICITANTE;
+}
+export interface CBRPropertyStep extends GSmartSelect {
+    type: Types.CBR_INMUEBLE;
+}
+export interface CBRSpaceTypeStep extends GSmartSelect {
+    type: Types.CBR_TIPO_ESPACIO;
+}
+export interface CBRFirstNameStep extends GTextInput {
+    type: Types.CBR_FIRST_NAME;
+}
+export interface CBRMiddleNameStep extends GTextInput {
+    type: Types.CBR_MIDDLE_NAME;
+}
+export interface CBRLastNameStep extends GTextInput {
+    type: Types.CBR_LAST_NAME;
+}
+export interface CBRSecondLastNameStep extends GTextInput {
+    type: Types.CBR_SECOND_LAST_NAME;
+}
+export interface CBRDocStep extends GTextInput {
+    type: Types.CBR_DOC;
+    showIcon: boolean;
+}
+export interface CBRCelStep extends GTextInput {
+    type: Types.CBR_CEL;
+}
+export interface CBRPhoneStep extends GTextInput {
+    type: Types.CBR_PHONE;
+}
+export interface CBREmailStep extends GTextInput {
+    type: Types.CBR_EMAIL;
+}
+export interface CBRElementStep extends GSmartSelect {
+    type: Types.CBR_LOCATIVAS;
+    subStep: string | null;
+    parentStep: string | null;
+}
+export interface CBRCommentStep extends Omit<GTextArea, 'hasTextEditor'> {
+    type: Types.CBR_COMENTARIO;
+}
+export interface CBRIncidentsStep extends GBaseStep {
+    type: Types.CBR_INCIDENCIAS;
+    label: string;
+    description: string | null;
+    addBtnLabel: string;
+    required: boolean;
+    unitLabel: string;
+    spaceStep: Omit<CBRSpaceTypeStep, 'id' | 'type'>;
+    newLineAfterSpace: boolean;
+    elementStep: IncidentElementStep;
+    commentStep: Omit<CBRCommentStep, 'id' | 'type'>;
+}
+export interface IncidentElementStep extends Omit<CBRElementStep, 'id' | 'subStep' | 'parentStep' | 'type'> {
+    subStep?: IncidentElementStep;
+}

package/dist/@Types/CBRFormStep.js

@@ -0,0 +1 @@
+export {};

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

@@ -16,6 +16,9 @@ export interface Form {
     style: FormStyle;
     classifiers: Record<string, ParentClassifier>;
     terms: Term[];
+    size: FormSize;
+}
+export interface FormSize {
     blockNum: 1 | 2 | 3 | 4;
     blockSize: number;
     spacingSize: number;
@@ -34,7 +37,7 @@ interface TermLink {
     type: 'LINK';
     url: string;
 }
-interface Classifier {
+export interface Classifier {
     _id: string;
     name: string;
 }

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

@@ -1,68 +1,34 @@
-import Types, { ClassifierOptionTypes, ClientInfoTypes, OptionTypes } from '../constants/FormStepTypes';
+import Types, { ClassifierOptionTypes, OptionTypes } from '../constants/FormStepTypes';
+import * as GSteps from './GenericFormSteps';
 export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
-export interface Title {
-    id: string;
+export interface Title extends GSteps.GBaseStep {
     type: Types.TITLE;
     title: string;
     description: string | null;
 }
-export interface CheckBox {
-    label: string;
-    description: string | null;
-    id: string;
+export interface CheckBox extends GSteps.GCheckBox {
     type: Types.CHECKBOX;
-    required: boolean;
-    size: 1 | 2 | 3 | 4;
 }
-export interface FileUpload {
-    id: string;
+export interface FileUpload extends GSteps.GBaseStep {
     type: Types.FILEUPLOAD;
     label: string;
     description: string | null;
     required: boolean;
     value: string[];
 }
-export interface Separator {
-    id: string;
+export interface Separator extends GSteps.GSeparator {
     type: Types.SEPARATOR;
-    transparent: boolean;
 }
-export interface TextArea {
-    id: string;
+export interface TextArea extends GSteps.GTextArea {
     type: Types.TEXTAREA;
-    label: string;
-    description: string | null;
-    required: boolean;
-    hasTextEditor: boolean;
-    isPrimary: boolean;
 }
-export interface TextInput {
-    id: string;
+export interface TextInput extends GSteps.GTextInput {
     type: Types.TEXTINPUT;
-    label: string;
-    description: string | null;
-    validation?: FormValidation;
-    required: boolean;
-    isSubject: boolean;
-    isClientInfo: boolean;
-    clientInfoType?: ClientInfoTypes;
-    size: 1 | 2 | 3 | 4;
 }
-export interface DatePicker {
-    id: string;
+export interface DatePicker extends GSteps.GDatePicker {
     type: Types.DATEPICKER;
-    label: string;
-    pickTime: boolean;
-    description: string | null;
-    required: boolean;
-    size: 1 | 2 | 3 | 4;
 }
-declare type FormValidation = {
-    message: string;
-    value: string;
-};
-export interface FormSelector {
-    id: string;
+export interface FormSelector extends GSteps.GBaseStep {
     type: Types.SELECTOR;
     label: string;
     description: string;
@@ -89,8 +55,7 @@ interface AddSectionOption {
     type: OptionTypes.ADD_SECTION;
     idSection: string;
 }
-export interface ClassifierSelector {
-    id: string;
+export interface ClassifierSelector extends GSteps.GBaseStep {
     type: Types.CLASSIFIER_SELECTOR;
     idClassifier: string | null;
     label: string;

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

@@ -0,0 +1,58 @@
+export interface GBaseStep {
+    id: string;
+    type: string;
+    dependencies?: string[];
+}
+export interface GTitle extends GBaseStep {
+    title: string;
+    description: string | null;
+}
+export interface GCheckBox extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GSeparator extends GBaseStep {
+    transparent: boolean;
+}
+export interface GTextArea extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    hasTextEditor: boolean;
+}
+export interface GTextInput extends GBaseStep {
+    label: string;
+    description: string | null;
+    validation?: {
+        message: string;
+        value: string;
+        type: 'EMAIL' | 'OTHER';
+    };
+    required: boolean;
+    showIcon?: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GDatePicker extends GBaseStep {
+    label: string;
+    description: string | null;
+    pickTime: boolean;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GAgentPicker extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    multiple: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GSmartSelect extends GBaseStep {
+    label: string;
+    description: string | null;
+    showIcon: boolean;
+    required: boolean;
+    searchable: boolean;
+    size: 1 | 2 | 3 | 4;
+}

package/dist/@Types/GenericFormSteps.js

@@ -0,0 +1 @@
+export {};

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];
@@ -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;
@@ -283,10 +283,21 @@ var migrateFormData = function (form) {
         steps[idStep] = step;
     }
     var newForm = __assign(__assign({}, form), { steps: steps });
-    if (form.spacingSize === undefined) {
-        newForm.spacingSize = 20;
-        newForm.blockNum = 4;
-        newForm.blockSize = 210;
+    if (form.size === undefined) {
+        if (form.spacingSize) {
+            newForm.size = {
+                spacingSize: form.spacingSize,
+                blockNum: form.blockNum,
+                blockSize: form.blockSize,
+            };
+        }
+        else {
+            newForm.size = {
+                spacingSize: 20,
+                blockNum: 4,
+                blockSize: 210,
+            };
+        }
     }
     return newForm;
 };

package/dist/App.module.css

@@ -7,6 +7,7 @@
     justify-content: center;
     align-items: center;
     background-color: white;
+    z-index: 5000;
 }
 
 #widget:eureka {

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, handleLoaded, originalValues, ...others }: FormComponentProps): JSX.Element;
 export default ColumnForm;

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

@@ -70,20 +70,22 @@ 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, handleLoaded = _a.handleLoaded, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "customSend", "handleLoaded", "originalValues"]);
     var _b = useState(false), tempError = _b[0], setTempError = _b[1];
-    var _c = useForm({
-        defaultValues: mapOriginal(originalValues, form),
+    var _c = useState(calcDependencies(form.steps, originalValues)), dependencyStore = _c[0], setDependencyStore = _c[1];
+    var _d = useForm({
+        defaultValues: mapOriginalValues(originalValues, form),
         mode: 'onTouched',
         shouldFocusError: true,
-    }), getValues = _c.getValues, setValue = _c.setValue, clearErrors = _c.clearErrors, control = _c.control, errors = _c.formState.errors, trigger = _c.trigger;
-    var _d = useState(undefined), sections = _d[0], setSections = _d[1];
-    var _e = useState(false), loading = _e[0], setLoading = _e[1];
-    var _f = useState(), showConfirmation = _f[0], setShowConfirmation = _f[1];
+    }), getValues = _d.getValues, setValue = _d.setValue, clearErrors = _d.clearErrors, control = _d.control, errors = _d.formState.errors, trigger = _d.trigger;
+    var _e = useState(undefined), sections = _e[0], setSections = _e[1];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(), showConfirmation = _g[0], setShowConfirmation = _g[1];
     useEffect(function () {
         var tempSections = [];
         calcNextSection(form, form.firstSection, tempSections);
         setSections(tempSections);
+        handleLoaded();
     }, []);
     if (sections === undefined) {
         return _jsx("div", {}, void 0);
@@ -93,7 +95,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,49 +106,53 @@ 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*/];
             }
         });
     }); };
     return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }, void 0), showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
                     reload();
                     setShowConfirmation(undefined);
-                } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps }, others), index)); }), form.terms &&
+                } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps, setDependencyStore: setDependencyStore, dependencyStore: dependencyStore, trigger: trigger }, others), index)); }), form.terms &&
                 !internal &&
                 form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () {
                         onSubmit();
@@ -170,15 +176,15 @@ function calcNextSection(form, idSection, sections) {
         }
     }
 }
-var mapOriginal = function (values, form) {
-    var newValues = __assign({}, values);
-    for (var _i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
+var mapOriginalValues = function (originalValues, form) {
+    var newValues = __assign({}, originalValues);
+    for (var _i = 0, _a = Object.keys(originalValues); _i < _a.length; _i++) {
         var val = _a[_i];
         var step = form.steps[val];
         if (step) {
             switch (step === null || step === void 0 ? void 0 : step.type) {
                 case Types.TEXTAREA: {
-                    var value = values[step.id];
+                    var value = originalValues[step.id];
                     if (step.hasTextEditor) {
                         delete newValues[step.id];
                     }
@@ -196,38 +202,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;
-        }
-        case Types.FILEUPLOAD: {
-            var value = values[step.id];
-            values[step.id] = value.map(function (val) { return ({
-                fileName: val.fileName,
-                S3Key: val.S3Key,
-            }); });
-            break;
+            default:
+                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) {
@@ -248,3 +256,34 @@ function stringToDraft(text) {
     });
     return draftStructure;
 }
+function calcDependencies(steps, originalValues) {
+    var dependencies = {};
+    for (var _i = 0, _a = Object.values(steps); _i < _a.length; _i++) {
+        var step = _a[_i];
+        if (step.dependencies) {
+            for (var _b = 0, _c = step.dependencies; _b < _c.length; _b++) {
+                var idDep = _c[_b];
+                var depStep = steps[idDep];
+                if (depStep && dependencies[idDep] === undefined) {
+                    switch (depStep === null || depStep === void 0 ? void 0 : depStep.type) {
+                        case Types.TEXTAREA: {
+                            if (depStep.hasTextEditor) {
+                                dependencies[idDep] = null;
+                            }
+                            else {
+                                dependencies[idDep] =
+                                    originalValues[idDep].value;
+                            }
+                            break;
+                        }
+                        default:
+                            dependencies[idDep] = originalValues[idDep];
+                            break;
+                    }
+                }
+            }
+        }
+    }
+    dependencies['CBR_PROYECTO'] = null; //REMOVE
+    return dependencies;
+}

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

@@ -5,12 +5,14 @@ import { CustomStep } from '../../App';
 export declare const getLocale: () => any;
 export interface WidthStats {
     currentBreakPoint: number;
+    isResponsive: boolean;
     isMobile: boolean;
 }
 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;
@@ -20,8 +22,10 @@ export interface FormComponentProps {
     apiKey: string | undefined;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    /** Function to call when the form has loaded */
+    handleLoaded: () => void;
 }
-declare function FormComponent({ form, internal, postview, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle'> & {
+declare function FormComponent({ form, internal, postview, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle' | 'handleLoaded'> & {
     containerRef: any;
     organization: Organization | null;
 }): JSX.Element;

package/dist/FormComponents/Form/Form.js

@@ -47,25 +47,30 @@ export var getLocale = function () {
             navigator.language ||
             navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
 };
-var blockSize = 210;
-var spacingSize = 20;
-var blockNum = 4;
 function FormComponent(_a) {
     var _b, _c;
     var form = _a.form, internal = _a.internal, postview = _a.postview, organization = _a.organization, containerRef = _a.containerRef, others = __rest(_a, ["form", "internal", "postview", "organization", "containerRef"]);
-    var _d = useState(undefined), widthStats = _d[0], setWidthStats = _d[1];
+    var _d = useState(false), loaded = _d[0], setLoaded = _d[1];
+    var _e = useState(undefined), widthStats = _e[0], setWidthStats = _e[1];
     /** Calcs the currentBreakPoint and if is mobile */
     var handleResize = function () {
         var _a;
         var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
         if (currentWidth !== undefined) {
-            var currentBreakPoint = blockNum;
+            var currentBreakPoint = form.size.blockNum;
             while (currentWidth <
-                (blockSize + spacingSize) * currentBreakPoint) {
+                (form.size.blockSize + form.size.spacingSize) *
+                    currentBreakPoint +
+                    40) {
                 currentBreakPoint--;
             }
             setWidthStats({
-                isMobile: currentWidth < (blockSize + spacingSize) * blockNum + 40,
+                isResponsive: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum +
+                        40,
+                isMobile: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) * 2 + 40,
                 currentBreakPoint: currentBreakPoint,
             });
         }
@@ -85,13 +90,20 @@ function FormComponent(_a) {
                 backgroundColor: internal
                     ? InternalFormStyle.backgroundColor
                     : form.style.backgroundColor,
-            } }, { children: _jsx(FormTypeComponent, __assign({}, others, { widthStats: widthStats, form: form, internal: internal, postview: postview, formStyle: internal ? InternalFormStyle : form.style }), void 0) }), void 0));
+            } }, { children: _jsx(FormTypeComponent, __assign({}, others, { handleLoaded: function () {
+                    setLoaded(true);
+                }, widthStats: widthStats, form: form, internal: internal, postview: postview, formStyle: internal ? InternalFormStyle : form.style }), void 0) }), void 0));
     }
     else if (organization && widthStats !== undefined) {
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_c = organization.styles) === null || _c === void 0 ? void 0 : _c.primaryColor }, void 0), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isMobile
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_c = organization.styles) === null || _c === void 0 ? void 0 : _c.primaryColor }, void 0), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
                             ? styles.fullScreenStandAloneForm
-                            : styles.standAloneFormCard, style: { backgroundColor: form.style.backgroundColor } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: form.style }), void 0) }), void 0) }), void 0)] }, void 0));
+                            : styles.standAloneFormCard, style: {
+                            backgroundColor: form.style.backgroundColor,
+                            visibility: loaded ? 'visible' : 'hidden',
+                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: form.style, handleLoaded: function () {
+                                setLoaded(true);
+                            } }), void 0) }), void 0) }), void 0)] }, void 0));
     }
     else {
         return _jsx("div", {}, void 0);