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

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

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

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

@@ -0,0 +1,295 @@
+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();
+    }
+}