@arquimedes.co/eureka-forms 2.0.34-test → 2.0.36-test

package/dist/mjs/App/AppHooks.js

@@ -1,152 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { reset } from '../States/GlobalSlice';
-import { fetchOrganization } from '../Services/OrganizationService';
-import { fetchForm } from '../Services/FormService';
-import { calcCbrForm } from '../Utils/CBRFunctions';
-import { calcInitialSections, calcValuesStore } from './AppFunctions';
-import { useAppDispatch } from '../hooks';
-import InternalFormStyle from '../constants/InternalFormStyle';
-import { calcDependencies } from '../Form/FormFunctions';
-import { iterateNestedSteps } from '../FormSteps/StepFunctions';
-import { createNextState } from '@reduxjs/toolkit';
-export const useSetupApp = (isEmbedded, { preview, internal, postview, partial, editable, handleConfirmed, customSteps, valuesData, apiKey, formData, classifiers, ...others }) => {
-    const [form, setForm] = useState(undefined);
-    const [organization, setOrganization] = useState(undefined);
-    const [branding, setBranding] = useState();
-    const dispatch = useAppDispatch();
-    const loadOrg = async (idOrganization) => {
-        const organization = await fetchOrganization(idOrganization);
-        if (organization) {
-            if (!isEmbedded) {
-                // document.title = currentOrg.name;
-                // const favicon: any = document.getElementById('favicon');
-                // if (favicon !== undefined) {
-                //     favicon.href = currentOrg.partialLogoUrl;
-                // }
-                //TODO cambiar el color del navbar en movil
-                // eslint-disable-next-line no-console
-            }
-            if (!organization.customBrandings) {
-                setBranding(organization.branding);
-            }
-        }
-        return organization;
-    };
-    const loadForm = async (apiKey, idOrganization) => {
-        const form = await fetchForm(apiKey, idOrganization);
-        if (form && form.branding)
-            setBranding(form.branding);
-        return form;
-    };
-    const loadData = async () => {
-        let idOrganization = others.idOrganization;
-        let organization = null;
-        let form = formData ?? null;
-        if (form && preview && form.isStandAlone) {
-            organization = await loadOrg();
-        }
-        else if (!form && apiKey) {
-            //Is iframe or widget
-            [organization, form] = await Promise.all([
-                loadOrg(idOrganization),
-                loadForm(apiKey, idOrganization),
-            ]);
-        }
-        if (organization && !idOrganization)
-            idOrganization = organization.idOrganization;
-        setOrganization(organization);
-        /** For localhost development */
-        if (!idOrganization && process.env.NODE_ENV !== 'production') {
-            // eslint-disable-next-line no-restricted-globals
-            const match = location.origin.match(/\/\/(.*?)\./);
-            idOrganization = match ? match[1] : '';
-        }
-        if (form) {
-            form = createNextState(form, (form) => {
-                //If a rootStep is a mapper of type section
-                if (form && classifiers)
-                    form.classifiers = classifiers;
-                /** Assign the idSection to all the forms steps */
-                for (const section of Object.values(form.sections)) {
-                    for (const idStep of section.steps) {
-                        iterateNestedSteps(idStep, form.steps, (step) => {
-                            step.idSection = section.id;
-                        });
-                    }
-                }
-                const CBRStep = Object.values(form.steps).find((step) => step.type.startsWith('CBR'));
-                if (CBRStep)
-                    form = calcCbrForm(form, valuesData ?? {});
-            });
-        }
-        setForm(form);
-        if (!form || !idOrganization)
-            return;
-        const dependencies = {};
-        const values = calcValuesStore(form, valuesData, postview, customSteps);
-        dispatch(reset({
-            formStyle: internal
-                ? InternalFormStyle
-                : {
-                    ...InternalFormStyle,
-                    ...(form?.style ?? {}),
-                },
-            internal: !!internal,
-            idOrganization,
-            preview: !!preview,
-            partial: !!partial,
-            postview: !!postview,
-            editable: !!(editable ?? true),
-            values,
-            ...calcInitialSections(form),
-            dependencies: calcDependencies(form.steps, customSteps, form.steps, dependencies, values),
-        }));
-    };
-    useEffect(() => {
-        loadData();
-        return () => {
-            dispatch({ type: 'CLEAR' });
-        };
-    }, []);
-    const reload = useCallback(() => {
-        if (!form)
-            return;
-        const tempForm = { ...form };
-        setForm(undefined);
-        setTimeout(() => {
-            setForm(tempForm);
-        }, 100);
-        if (handleConfirmed) {
-            handleConfirmed();
-        }
-    }, [form]);
-    return { form, organization, branding, reload };
-};
-export const useLogRocket = (organization, form, { apiKey, internal, postview, preview, }) => {
-    const loadLogRocket = async () => {
-        if (form &&
-            organization &&
-            process.env.NODE_ENV === 'production' &&
-            //Tools
-            // apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
-            !internal &&
-            !postview &&
-            !preview) {
-            try {
-                const LogRocket = await import('logrocket');
-                LogRocket.default.init('63mg8a/forms-uv0gd');
-                LogRocket.default.identify(organization.idOrganization + '/' + apiKey, {
-                    name: organization.name +
-                        '/' +
-                        (form?.name ? form?.name : '404'),
-                });
-            }
-            catch (error) {
-                console.error('LogRocker Error', error);
-            }
-        }
-    };
-    useEffect(() => {
-        loadLogRocket();
-    }, [organization, form]);
-};

package/dist/mjs/Contexts/CustomContext.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { CustomStep } from '../FormSteps/CustomStep';
-export interface CustomContextData {
-    sendLabel?: string;
-    customStepProps: Record<string, unknown>;
-    customSteps: Record<string, CustomStep>;
-    /** Function to call on postview to fetch the download url of a file */
-    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
-}
-declare const CustomContext: import("react").Context<CustomContextData>;
-export default CustomContext;

package/dist/mjs/Contexts/FormContext.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { Form } from '../@Types';
-declare const FormContext: import("react").Context<Form>;
-export default FormContext;

package/dist/mjs/Contexts/SectionContext.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const SectionContext: import("react").Context<string>;
-export default SectionContext;

package/dist/mjs/Form/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-interface ConfirmationDialogProps {
-    confirmation: {
-        case: string;
-        url: string;
-    };
-    onClose: () => void;
-}
-declare function ConfirmationDialog({ confirmation, onClose, }: ConfirmationDialogProps): JSX.Element;
-export default ConfirmationDialog;

package/dist/mjs/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CheckCircleOutlineRoundedIcon from '@material-ui/icons/CheckCircleOutlineRounded';
-import styles from './ConfirmationDialog.module.css';
-import Dialog from '@material-ui/core/Dialog';
-import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
-import { useAppSelector } from '../../hooks';
-function ConfirmationDialog({ confirmation, onClose, }) {
-    const { formStyle } = useAppSelector((state) => state.global);
-    return (_jsx(Dialog, { PaperProps: {
-            style: {
-                borderRadius: '20px',
-                maxWidth: '100vw',
-                boxSizing: 'content-box',
-            },
-        }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: { color: '#293241' }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => {
-                        onClose();
-                    }, children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }) }), _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.checkContainer, style: { color: formStyle.primaryColor }, children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }) }), _jsxs("div", { className: styles.messageContainer, children: ["Tu caso n\u00FAmero", ' ', _jsx("span", { style: { fontWeight: 'bold' }, children: confirmation.case }), ' ', "ha sido registrado!"] }), _jsx("div", { className: styles.messageContainer, children: "Pronto te estaremos dando respuesta." }), _jsxs("div", { className: styles.linkContainer, children: ["Puedes consultar el estado aqui:", ' '] }), _jsx("a", { className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
-                                color: '#293241',
-                            }, children: confirmation.url })] })] }) }));
-}
-export default ConfirmationDialog;

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

@@ -1,64 +0,0 @@
-.confirmationContainer {
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    max-height: 80vh;
-    max-width: 80vw;
-    position: relative;
-}
-
-.container {
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    overflow-y: auto;
-}
-.confirmationContainer,
-.confirmationContainer *,
-.confirmationContainer *::after,
-.confirmationContainer *::before {
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-}
-
-.checkContainer {
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 30px;
-    height: fit-content;
-    margin-bottom: 15px;
-}
-
-.messageContainer {
-    margin-top: 5px;
-    margin-left: 20px;
-    margin-right: 20px;
-    font-size: 1.2rem;
-    text-align: center;
-}
-
-.linkContainer {
-    margin-top: 20px;
-    font-size: 1.2rem;
-    margin-left: 20px;
-}
-.url {
-    font-weight: bolder;
-    margin-left: 40px;
-    margin-right: 40px;
-    margin-top: 10px;
-    margin-bottom: 40px;
-    cursor: pointer;
-    font-size: 1rem;
-    max-width: calc(100% - 100px);
-    word-break: break-all;
-}
-.closeIcon {
-    right: 15px;
-    top: 10px;
-    font-size: 26px;
-    position: absolute;
-    cursor: pointer;
-}

package/dist/mjs/Form/Form.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Branding } from '../@Types/Branding';
-import StepTypes from '../constants/FormStepTypes';
-import { FieldValues } from 'react-hook-form';
-import { AppProps } from '../App/App';
-import CBRFormStepTypes from '../constants/CBRFormStepTypes';
-import { Form } from '../@Types';
-import { FormStep } from '../@Types/FormStep';
-import { CBRFormStep } from '../@Types/CBRFormStep';
-export declare const getLocale: () => any;
-export interface StepDependency {
-    dependents: (FormStep | CBRFormStep)[];
-    value: any | undefined;
-    type: StepTypes | CBRFormStepTypes | 'ORIGINAL';
-    empty?: boolean;
-}
-export type DependencyStore = Record<string, StepDependency>;
-export interface WidthStats {
-    currentBreakPoint: number;
-    isResponsive: boolean;
-    isMobile: boolean;
-}
-type CustomAppProps = Pick<AppProps, 'customSteps' | 'customSubmitBtns'>;
-export interface BaseFormProps extends CustomAppProps {
-    form: Form;
-    branding?: Branding;
-    reload: () => void;
-    isWidget: boolean;
-    apiKey: string | undefined;
-    customSubmit: AppProps['customSubmit'];
-    containerRef: React.RefObject<HTMLDivElement>;
-    scrollToTop?: () => void;
-}
-export interface FormComponentProps extends CustomAppProps {
-    /** Function called when users clicks submit */
-    onSubmit: (values: FieldValues) => Promise<any>;
-    scrollToTop?: () => void;
-}
-declare function FormComponent({ form, apiKey, reload, isWidget, branding, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, }: BaseFormProps): JSX.Element;
-export default FormComponent;

package/dist/mjs/Form/Form.js

@@ -1,149 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useContext, useEffect, useRef, useState, } from 'react';
-import Navbar from '../Shared/Navbar/Navbar';
-import styles from './Form.module.css';
-import InternalFormStyle from '../constants/InternalFormStyle';
-import enLocale from 'date-fns/locale/en-US';
-import esLocale from 'date-fns/locale/es';
-import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
-import StepperForm from './FormTypes/StepperForm/StepperForm';
-import { FormStyleTypes, FormTypes, } from '../constants/FormStepTypes';
-import { calcValue } from './FormFunctions';
-import { FormProvider, useForm } from 'react-hook-form';
-import widgetInstance from '../Utils/AxiosWidget';
-import axiosInstance from '../Utils/AxiosAPI';
-import ReCAPTCHA from 'react-google-recaptcha';
-import ConfirmationDialog from './ConfirmationDialog/ConfirmationDialog';
-import MaterialProviders from '../Utils/MaterialProviders';
-import { useWidthStats } from './FormHooks';
-import { IdFormContext } from '../App/App';
-import { useAppDispatch, useAppSelector } from '../hooks';
-import FormContext from '../Contexts/FormContext';
-import { getAppState } from '../Utils/store';
-import { focusStep } from '../States/SiteSlice';
-const localeMap = {
-    en: enLocale,
-    'en-US': enLocale,
-    es: esLocale,
-};
-export const getLocale = () => {
-    return (localeMap[navigator.languages && navigator.languages.length
-        ? navigator.languages[0]
-        : navigator.userLanguage ||
-            navigator.language ||
-            navigator.browserLanguage] ?? localeMap.es);
-};
-function FormComponent({ form, apiKey, reload, isWidget, branding, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, }) {
-    const { idOrganization, internal, postview } = useAppSelector((state) => state.global);
-    const formMethods = useForm({
-        mode: 'onTouched',
-        shouldFocusError: true,
-    });
-    const idForm = useContext(IdFormContext);
-    const recaptchaRef = useRef();
-    const dispatch = useAppDispatch();
-    const [showConfirmation, setShowConfirmation] = useState();
-    const idFocusStep = useAppSelector((state) => state.site.focusStep);
-    useEffect(() => {
-        if (idFocusStep) {
-            formMethods.setFocus(idFocusStep);
-            dispatch(focusStep(undefined));
-        }
-    }, [idFocusStep]);
-    const onSubmit = useCallback(async (values) => {
-        let token = null;
-        if (form.hasCaptcha && !internal && !customSubmit) {
-            token = recaptchaRef.current.getValue();
-            if (!token)
-                token = await recaptchaRef?.current.executeAsync();
-        }
-        if (!apiKey && !internal && !customSubmit)
-            return;
-        try {
-            const state = await dispatch(getAppState({ idForm })).unwrap();
-            const newValues = {
-                ...state.site.values.global,
-            };
-            const deleteIds = [];
-            for (const idStep of Object.keys(values)) {
-                newValues[idStep] = calcValue(idStep, form.steps, values, customSteps, deleteIds);
-            }
-            for (const id of deleteIds) {
-                delete newValues[id];
-            }
-            if (customSubmit)
-                return await customSubmit(newValues, reload);
-            if (customSubmitBtns)
-                return newValues;
-            const params = new URLSearchParams();
-            if (idOrganization || internal)
-                params.set('idOrganization', idOrganization ?? '');
-            if (token)
-                params.set('token', token);
-            let url = `/ticket/${internal ? form.apiKey : apiKey}`;
-            if (params.toString()) {
-                url += `?${params.toString()}`;
-            }
-            const axios = idOrganization || internal ? widgetInstance : axiosInstance;
-            const resp = await axios.post(url, newValues);
-            setShowConfirmation(resp?.data);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }, [customSteps, internal, customSubmit, idOrganization, idForm]);
-    useWidthStats(containerRef, form, postview, internal);
-    const isResponsive = useAppSelector((state) => state.widthStats.isResponsive);
-    const renderForm = () => {
-        return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: () => {
-                        reload();
-                        setShowConfirmation(undefined);
-                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, { ...formMethods, children: _jsx(FormContext.Provider, { value: form, children: _jsx(FormTypeComponent, { onSubmit: onSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) }) })] }));
-    };
-    if (!idOrganization)
-        return _jsx(_Fragment, {});
-    //If currently displaying internal or form is standalone
-    if (postview || internal || !form.isStandAlone) {
-        return (_jsx("div", { style: {
-                backgroundColor: internal
-                    ? 'transparent'
-                    : form.style?.backgroundColor ??
-                        InternalFormStyle.backgroundColor,
-                minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
-            }, children: _jsx("div", { className: styles.widgetFormContainer, ref: containerRef, children: renderForm() }) }));
-    }
-    else {
-        //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding?.images.logoUrl, color: branding?.colors?.navbarColor ??
-                        branding?.colors?.primaryColor }), _jsx("div", { className: styles.standAloneFormContainer, ref: containerRef, style: {
-                        background: form.style?.standAloneBackgroundColor ?? '#ffffff',
-                    }, children: _jsx("div", { className: isResponsive
-                            ? styles.fullScreenStandAloneForm
-                            : styles.standAloneFormCard, style: {
-                            backgroundColor: form.style?.backgroundColor ??
-                                InternalFormStyle.backgroundColor,
-                        }, children: renderForm() }) })] }));
-    }
-}
-export default FormComponent;
-function FormTypeComponent(props) {
-    const { formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const renderTypes = () => {
-        switch (form.type) {
-            case FormTypes.STEPPER: {
-                return _jsx(StepperForm, { ...props });
-            }
-            case FormTypes.COLUMN:
-            default: {
-                return _jsx(ColumnForm, { ...props });
-            }
-        }
-    };
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-            return _jsx(MaterialProviders, { children: renderTypes() });
-        default:
-            return renderTypes();
-    }
-}

package/dist/mjs/Form/Form.module.css

@@ -1,39 +0,0 @@
-.standAloneFormContainer {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    min-height: calc(100vh - 60px);
-    display: flex;
-    overflow-x: hidden;
-}
-
-.fullScreenStandAloneForm {
-    width: 100%;
-    padding: 20px;
-    min-height: 100%;
-    overflow: hidden;
-}
-
-.standAloneFormCard {
-    -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    margin-top: 30px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    width: fit-content;
-    border-radius: 15px;
-    padding: 20px;
-    margin-bottom: 30px;
-}
-
-.widgetFormContainer {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    width: fit-content;
-    max-width: 100%;
-}

package/dist/mjs/Form/FormFunctions.d.ts

@@ -1,12 +0,0 @@
-import { FormStep, Mapper } from '../@Types/FormStep';
-import { DependencyStore } from './Form';
-import { CustomStep } from '../FormSteps/CustomStep';
-import { CBRFormStep } from '../@Types/CBRFormStep';
-import { MapperElement } from '../@Types/MapperElement';
-import { ValuesStore } from '../States/SiteSlice';
-/**
- * Function that cals the value of a step to output on submit
- */
-export declare const calcValue: (idStep: string, steps: Record<string, FormStep>, values: Record<string, any>, customSteps: Record<string, CustomStep> | undefined, deleteIds: string[], value?: any) => any;
-export declare function calcDependencies(steps: Record<string, FormStep | CBRFormStep>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep | CBRFormStep>, dependencies?: DependencyStore, values?: ValuesStore, addDependents?: boolean): DependencyStore;
-export declare const calcMapperSubSteps: (step: Mapper, elements: MapperElement<any>[] | undefined, customSteps: Record<string, CustomStep>) => Record<string, FormStep>;