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

package/dist/mjs/App/AppHooks.js

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,11 @@
+/// <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/CustomContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const CustomContext = createContext({
+    customSteps: {},
+    customStepProps: {},
+});
+export default CustomContext;

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

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

package/dist/mjs/Contexts/FormContext.js

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+const FormContext = createContext({
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            name: 'FIRST',
+            steps: [],
+            nextSection: null,
+        },
+    },
+    steps: {},
+    size: {
+        blockSize: 0,
+        blockNum: 4,
+        spacingSize: 0,
+    },
+});
+export default FormContext;

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

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

package/dist/mjs/Contexts/SectionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const SectionContext = createContext('NULL');
+export default SectionContext;

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

@@ -0,0 +1,10 @@
+/// <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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,64 @@
+.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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,39 @@
+.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

@@ -0,0 +1,12 @@
+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>;