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

package/src/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/src/Form/ConfirmationDialog/ConfirmationDialog.tsx

@@ -1,79 +0,0 @@
-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';
-interface ConfirmationDialogProps {
-    confirmation: { case: string; url: string };
-    onClose: () => void;
-}
-
-function ConfirmationDialog({
-    confirmation,
-    onClose,
-}: ConfirmationDialogProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-    return (
-        <Dialog
-            PaperProps={{
-                style: {
-                    borderRadius: '20px',
-                    maxWidth: '100vw',
-                    boxSizing: 'content-box',
-                },
-            }}
-            open={true}
-        >
-            <div
-                className={styles.confirmationContainer}
-                style={{ color: '#293241' }}
-            >
-                <div
-                    className={styles.closeIcon}
-                    onClick={(): void => {
-                        onClose();
-                    }}
-                >
-                    <CloseRoundedIcon fontSize="inherit" />
-                </div>
-                <div className={styles.container}>
-                    <div
-                        className={styles.checkContainer}
-                        style={{ color: formStyle.primaryColor }}
-                    >
-                        <CheckCircleOutlineRoundedIcon
-                            fontSize="inherit"
-                            style={{ fontSize: '160px' }}
-                        />
-                    </div>
-                    <div className={styles.messageContainer}>
-                        Tu caso número{' '}
-                        <span style={{ fontWeight: 'bold' }}>
-                            {confirmation.case}
-                        </span>{' '}
-                        ha sido registrado!
-                    </div>
-                    <div className={styles.messageContainer}>
-                        Pronto te estaremos dando respuesta.
-                    </div>
-                    <div className={styles.linkContainer}>
-                        Puedes consultar el estado aqui:{' '}
-                    </div>
-                    <a
-                        className={styles.url}
-                        data-testid="ResUrl"
-                        target="_blank"
-                        href={confirmation.url}
-                        style={{
-                            color: '#293241',
-                        }}
-                    >
-                        {confirmation.url}
-                    </a>
-                </div>
-            </div>
-        </Dialog>
-    );
-}
-
-export default ConfirmationDialog;

package/src/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/src/Form/Form.tsx

@@ -1,295 +0,0 @@
-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 { Branding } from '../@Types/Branding';
-import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
-import StepperForm from './FormTypes/StepperForm/StepperForm';
-import StepTypes, {
-    FormStyleTypes,
-    FormTypes,
-} from '../constants/FormStepTypes';
-import { calcValue } from './FormFunctions';
-import { FieldValues, 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 { AppProps, IdFormContext } from '../App/App';
-import CBRFormStepTypes from '../constants/CBRFormStepTypes';
-import { useAppDispatch, useAppSelector } from '../hooks';
-import { Form } from '../@Types';
-import FormContext from '../Contexts/FormContext';
-import { getAppState } from '../Utils/store';
-import { focusStep } from '../States/SiteSlice';
-import { FormStep } from '../@Types/FormStep';
-import { CBRFormStep } from '../@Types/CBRFormStep';
-
-const localeMap: any = {
-    en: enLocale,
-    'en-US': enLocale,
-    es: esLocale,
-};
-
-export const getLocale = (): any => {
-    return (
-        localeMap[
-            navigator.languages && navigator.languages.length
-                ? navigator.languages[0]
-                : (navigator as any).userLanguage ||
-                  navigator.language ||
-                  (navigator as any).browserLanguage
-        ] ?? localeMap.es
-    );
-};
-
-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;
-}
-
-function FormComponent({
-    form,
-    apiKey,
-    reload,
-    isWidget,
-    branding,
-    scrollToTop,
-    customSteps,
-    containerRef,
-    customSubmit,
-    customSubmitBtns,
-}: BaseFormProps): JSX.Element {
-    const { idOrganization, internal, postview } = useAppSelector(
-        (state) => state.global
-    );
-
-    const formMethods = useForm({
-        mode: 'onTouched',
-        shouldFocusError: true,
-    });
-    const idForm = useContext(IdFormContext);
-    const recaptchaRef = useRef<any>();
-    const dispatch = useAppDispatch();
-    const [showConfirmation, setShowConfirmation] = useState<
-        undefined | { case: string; url: string }
-    >();
-    const idFocusStep = useAppSelector((state) => state.site.focusStep);
-
-    useEffect(() => {
-        if (idFocusStep) {
-            formMethods.setFocus(idFocusStep);
-            dispatch(focusStep(undefined));
-        }
-    }, [idFocusStep]);
-
-    const onSubmit = useCallback(
-        async (values: FieldValues): Promise<Record<string, any> | void> => {
-            let token: string | null = 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: Record<string, any> = {
-                    ...state.site.values.global,
-                };
-                const deleteIds: string[] = [];
-                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 = (): JSX.Element => {
-        return (
-            <React.Fragment>
-                {showConfirmation !== undefined && (
-                    <ConfirmationDialog
-                        confirmation={showConfirmation}
-                        onClose={(): void => {
-                            reload();
-                            setShowConfirmation(undefined);
-                        }}
-                    />
-                )}
-                {form.hasCaptcha && !internal && (
-                    <ReCAPTCHA
-                        ref={recaptchaRef}
-                        sitekey="6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p"
-                        size={'invisible'}
-                        badge={'bottomright'}
-                    />
-                )}
-                <FormProvider {...formMethods}>
-                    <FormContext.Provider value={form}>
-                        <FormTypeComponent
-                            onSubmit={onSubmit}
-                            scrollToTop={scrollToTop}
-                            customSubmitBtns={customSubmitBtns}
-                        />
-                    </FormContext.Provider>
-                </FormProvider>
-            </React.Fragment>
-        );
-    };
-
-    if (!idOrganization) return <></>;
-    //If currently displaying internal or form is standalone
-    if (postview || internal || !form.isStandAlone) {
-        return (
-            <div
-                style={{
-                    backgroundColor: internal
-                        ? 'transparent'
-                        : form.style?.backgroundColor ??
-                          InternalFormStyle.backgroundColor,
-                    minHeight:
-                        form.isStandAlone && !isWidget ? '100vh' : '100%',
-                }}
-            >
-                <div className={styles.widgetFormContainer} ref={containerRef}>
-                    {renderForm()}
-                </div>
-            </div>
-        );
-    } else {
-        //Standalone cant have widget
-        return (
-            <React.Fragment>
-                <Navbar
-                    logo={branding?.images.logoUrl}
-                    color={
-                        branding?.colors?.navbarColor ??
-                        branding?.colors?.primaryColor
-                    }
-                />
-                <div
-                    className={styles.standAloneFormContainer}
-                    ref={containerRef}
-                    style={{
-                        background:
-                            form.style?.standAloneBackgroundColor ?? '#ffffff',
-                    }}
-                >
-                    <div
-                        className={
-                            isResponsive
-                                ? styles.fullScreenStandAloneForm
-                                : styles.standAloneFormCard
-                        }
-                        style={{
-                            backgroundColor:
-                                form.style?.backgroundColor ??
-                                InternalFormStyle.backgroundColor,
-                        }}
-                    >
-                        {renderForm()}
-                    </div>
-                </div>
-            </React.Fragment>
-        );
-    }
-}
-
-export default FormComponent;
-
-function FormTypeComponent(props: FormComponentProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-
-    const renderTypes = (): JSX.Element => {
-        switch (form.type) {
-            case FormTypes.STEPPER: {
-                return <StepperForm {...props} />;
-            }
-            case FormTypes.COLUMN:
-            default: {
-                return <ColumnForm {...props} />;
-            }
-        }
-    };
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-            return <MaterialProviders>{renderTypes()}</MaterialProviders>;
-        default:
-            return renderTypes();
-    }
-}