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

package/src/Form/Terms/Term/MaterialTerm/MaterialTerm.module.css

@@ -1,83 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 0px;
-    padding-right: 0px;
-    width: 100%;
-}
-.checkboxContainer {
-    margin-bottom: auto;
-    margin-left: 12px;
-}
-.messageContainer {
-    font-size: 1rem;
-    padding-right: 25px;
-}
-
-.highlight {
-    font-weight: bold;
-    cursor: pointer;
-}
-.dialogContainer {
-    overflow-y: hidden;
-    max-height: 60vh;
-    min-width: 400px;
-    padding-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-}
-
-.dialogContainer,
-.dialogContainer *,
-.dialogContainer *::after,
-.dialogContainer *::before {
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-}
-
-.closeIcon {
-    right: 15px;
-    top: 10px;
-    font-size: 26px;
-    position: absolute;
-    cursor: pointer;
-}
-.dialogTitle {
-    font-size: 22px;
-    font-weight: 600;
-    margin-top: 10px;
-    padding-bottom: 5px;
-    width: calc(100% - 40px);
-    margin-bottom: 5px;
-    text-align: center;
-}
-.dialogContentContainer {
-    overflow-y: auto;
-    width: calc(100% - 35px);
-    padding-left: 20px;
-    padding-right: 10px;
-    max-height: calc(60vh - 50px);
-    margin-bottom: 15px;
-}
-.dialogContentContainer {
-    scrollbar-width: thin;
-    scrollbar-color: #787878 transparent;
-    margin-right: 1px;
-}
-.dialogContentContainer::-webkit-scrollbar {
-    width: 4px;
-}
-.dialogContentContainer::-webkit-scrollbar-track {
-    background: transparent;
-}
-.dialogContentContainer::-webkit-scrollbar-thumb {
-    background: #787878;
-    border-radius: 2px;
-}
-.dialogContentContainer::-webkit-scrollbar-thumb:hover {
-    background: #4f4f4f;
-}

package/src/Form/Terms/Term/MaterialTerm/MaterialTerm.tsx

@@ -1,160 +0,0 @@
-import { Dialog } from '@material-ui/core';
-import React from 'react';
-import { useState } from 'react';
-import { useController } from 'react-hook-form';
-import RoundedButton from '../../../../Shared/RoundedButton/RoundedButton';
-import RoundedCheckBox from '../../../../Shared/RoundedCheckBox/RoundedCheckBox';
-import { TermComponentProps } from '../Term';
-import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
-import styles from './MaterialTerm.module.css';
-import { useAppSelector } from '../../../../hooks';
-import { createSelector } from '@reduxjs/toolkit';
-import { ValuesStore } from '../../../../States/SiteSlice';
-import { RootState } from '../../../../Utils/store';
-const selectOriginalValue = createSelector(
-    [
-        (state: RootState): ValuesStore => state.site.values,
-        (state: RootState, idTerm: string): string => idTerm,
-    ],
-    (values, idTerm) => values.global[idTerm]
-);
-
-function TermComponent({ term, tempError }: TermComponentProps): JSX.Element {
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-
-    const originalValue = useAppSelector((state) =>
-        selectOriginalValue(state, term.id)
-    );
-
-    const {
-        field: { ref, ...field },
-        fieldState: { error },
-    } = useController({
-        name: term.id,
-        rules: {
-            required: true,
-        },
-        defaultValue: originalValue ?? false,
-        shouldUnregister: true,
-    });
-
-    const [showDialog, setShowDialog] = useState(false);
-    /**
-     * Function that renders the highlighted text
-     * @returns a string with span highlighted
-     */
-    const renderText = (text: string): any => {
-        if (text) {
-            const parts: any = text.split(/{{(.*?)}}/gi);
-            for (let i = 1; i < parts.length; i += 2) {
-                parts[i] = (
-                    <span
-                        className={styles.highlight}
-                        style={{
-                            color:
-                                !!error && tempError
-                                    ? formStyle.errorColor
-                                    : formStyle.primaryColor,
-                        }}
-                        key={i}
-                        onClick={(): void => {
-                            if (term.clickEffect?.type === 'LINK') {
-                                window
-                                    .open?.(term.clickEffect.url, '_blank')
-                                    ?.focus?.();
-                            } else if (term.clickEffect?.type === 'DIALOG') {
-                                setShowDialog(true);
-                            }
-                        }}
-                    >
-                        {parts[i]}
-                    </span>
-                );
-            }
-            return parts;
-        }
-    };
-    return (
-        <React.Fragment>
-            <Dialog
-                PaperProps={{
-                    style: {
-                        borderRadius: '20px',
-                    },
-                }}
-                onClose={(): void => {
-                    setShowDialog(false);
-                }}
-                open={showDialog}
-            >
-                {term.clickEffect?.type === 'DIALOG' && (
-                    <div
-                        className={styles.dialogContainer}
-                        style={{ color: formStyle.textColor }}
-                    >
-                        <div
-                            className={styles.closeIcon}
-                            onClick={(): void => {
-                                setShowDialog(false);
-                            }}
-                        >
-                            <CloseRoundedIcon fontSize="inherit" />
-                        </div>
-                        <div
-                            className={styles.dialogTitle}
-                            style={{
-                                borderBottom:
-                                    '1px solid ' + formStyle.primaryColor,
-                            }}
-                        >
-                            {term.clickEffect.title}
-                        </div>
-                        <div className={styles.dialogContentContainer}>
-                            {term.clickEffect.text}
-                        </div>
-                        <RoundedButton
-                            text={'Aceptar'}
-                            padding="20px 15px"
-                            backgroundColor={formStyle.primaryColor}
-                            color={formStyle.primaryContrastColor}
-                            fontSize={20}
-                            onClick={(): void => {
-                                setShowDialog(false);
-                                if (!postview) {
-                                    field.onChange(true);
-                                }
-                            }}
-                        ></RoundedButton>
-                    </div>
-                )}
-            </Dialog>
-            <div className={styles.container + ' noselect'}>
-                <div className={styles.checkboxContainer}>
-                    <RoundedCheckBox
-                        inputRef={ref}
-                        {...field}
-                        checked={field.value}
-                        cantEdit={postview}
-                        padding="5px"
-                        checkedColor={formStyle.primaryColor}
-                        errorColor={formStyle.errorColor}
-                        size="1.5rem"
-                        error={!!error}
-                    />
-                </div>
-                <div
-                    className={styles.messageContainer}
-                    style={{
-                        color:
-                            !!error && tempError
-                                ? formStyle.errorColor
-                                : 'inherit',
-                    }}
-                >
-                    {renderText(term.message)}
-                </div>
-            </div>
-        </React.Fragment>
-    );
-}
-export default TermComponent;

package/src/Form/Terms/Term/Term.tsx

@@ -1,20 +0,0 @@
-import { Term } from '../../../@Types/Form';
-import { FormStyleTypes } from '../../../constants/FormStepTypes';
-import { useAppSelector } from '../../../hooks';
-import MaterialTerm from './MaterialTerm/MaterialTerm';
-
-export interface TermComponentProps {
-    term: Term;
-    tempError: boolean;
-}
-function TermComponent(props: TermComponentProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialTerm {...props} />;
-        }
-    }
-}
-export default TermComponent;

package/src/Form/Terms/Terms.module.css

@@ -1,3 +0,0 @@
-.termsContainer {
-    max-width: 100%;
-}

package/src/Form/Terms/Terms.tsx

@@ -1,54 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import styles from './Terms.module.css';
-import TermComponent from './Term/Term';
-import { useFormContext } from 'react-hook-form';
-import FormContext from '../../Contexts/FormContext';
-import { useAppSelector } from '../../hooks';
-function Terms(): JSX.Element {
-    const { postview, internal } = useAppSelector((state) => state.global);
-    const isInteralAgent = useAppSelector(
-        (state) =>
-            state.site.values.global['INTERNAL_CREATING_AGENT'] !== undefined
-    );
-
-    const form = useContext(FormContext);
-    const {
-        formState: { isSubmitting },
-    } = useFormContext();
-    const [tempError, setTempError] = useState(false);
-
-    useEffect(() => {
-        if (!isSubmitting) return;
-        setTempError(true);
-        setTimeout(() => {
-            setTempError(false);
-        }, 500);
-    }, [isSubmitting]);
-
-    if (
-        form.terms &&
-        (!internal || (internal && postview)) &&
-        !isInteralAgent
-    ) {
-        return (
-            <div
-                className={styles.termsContainer}
-                style={{
-                    width:
-                        (form.size.blockSize + form.size.spacingSize) *
-                        form.size.blockNum,
-                }}
-            >
-                {form.terms.map((term) => (
-                    <TermComponent
-                        key={term.id}
-                        term={term}
-                        tempError={tempError}
-                    />
-                ))}
-            </div>
-        );
-    }
-    return <></>;
-}
-export default Terms;

package/src/FormSteps/@Construction/CBRElementStep/CBRElementStep.tsx

@@ -1,129 +0,0 @@
-import SmartSelectStep from '../../SmartSelectStep/SmartSelectStep';
-import { StepOptions } from '../../CBRStepMapper';
-import { GSmartSelect } from '../../../@Types/GenericFormSteps';
-import { StepProps } from '../../Step';
-import { CBRElementStep } from '../../../@Types/CBRFormStep';
-import CBRFormStepTypes from '../../../constants/CBRFormStepTypes';
-import axios from 'axios';
-import InputIcon from '../../../Shared/InputIcon/InputIcon';
-import { FormStep } from '../../../@Types/FormStep';
-import { DependencyStore } from '../../../Form/Form';
-import FormContext from '../../../Contexts/FormContext';
-import { useContext } from 'react';
-
-export interface ElementStepProps extends Omit<StepProps, 'step'> {
-    step: CBRElementStep;
-}
-
-function CBRElementStepComponent(props: ElementStepProps): JSX.Element {
-    return (
-        <SmartSelectStep
-            {...props}
-            step={props.step}
-            icon={<InputIcon icon={'LEAK'} />}
-            getOptions={getElementOptions}
-            getOptionSelected={(option, value): boolean =>
-                option.id === value.id
-            }
-            getValueString={(value): string => value?.id}
-            calcDepError={calcDepError}
-            valueOverwrite={(value: any): any => {
-                if (value) {
-                    return { ...value, subStep: props.step.subStep };
-                } else {
-                    return null;
-                }
-            }}
-            renderNestedSteps={(value: any): JSX.Element => (
-                <ElementSubStepRenderer value={value} {...props} />
-            )}
-        ></SmartSelectStep>
-    );
-}
-
-export default CBRElementStepComponent;
-
-function ElementSubStepRenderer({
-    value,
-    ...stepProps
-}: ElementStepProps & {
-    value: any;
-}): JSX.Element {
-    const form = useContext(FormContext);
-
-    if (!value || stepProps === undefined) {
-        return <div></div>;
-    }
-    const subStep = form.steps[stepProps.step.subStep ?? ''];
-    if ((subStep?.type as any) !== CBRFormStepTypes.CBR_LOCATIVAS) {
-        return <div></div>;
-    }
-    return (
-        <SmartSelectStep
-            {...stepProps}
-            step={subStep as any}
-            icon={<InputIcon icon={'LEAK'} />}
-            getOptions={getElementOptions}
-            calcDepError={calcDepError}
-            getOptionSelected={(option, value): boolean =>
-                option.id === value.id
-            }
-            getValueString={(value): string => value?.id}
-            renderNestedSteps={(value): JSX.Element => (
-                <ElementSubStepRenderer
-                    value={value}
-                    {...stepProps}
-                    step={subStep as any}
-                />
-            )}
-        ></SmartSelectStep>
-    );
-}
-
-const getElementOptions = async (
-    idOrganization: string | undefined,
-    step: GSmartSelect,
-    dependencyStore: DependencyStore
-): Promise<StepOptions[] | null> => {
-    if (step.dependencies && idOrganization) {
-        const idProyecto = dependencyStore[step.dependencies[0]]?.value?.id;
-        if (!idProyecto) {
-            return null; //null para indicar que falta la depedency
-        }
-        //Calc resp given dep, and depency Store
-        const response = (
-            await axios.get(
-                `https://integrations.${process.env.REACT_APP_DOMAIN}/sinco/cbr/Locativas?idOrganization=${idOrganization}`
-            )
-        ).data;
-        const father = dependencyStore[step.dependencies[1]]?.value;
-        if (father !== undefined && father.id === undefined) {
-            return null;
-        }
-        return response.filter((locativa: any) => {
-            if (father?.id) {
-                return (
-                    locativa.id.startsWith(father.id) &&
-                    locativa.id !== father.id
-                );
-            } else {
-                return locativa.id.length === 2;
-            }
-        });
-    } else {
-        return null;
-    }
-};
-
-const calcDepError = (steps: FormStep[]): string | undefined => {
-    for (const step of steps) {
-        const type = step.type as any;
-        if (type === CBRFormStepTypes.CBR_PROYECTO) {
-            return 'Selecciona un proyecto';
-        }
-        if (type === CBRFormStepTypes.CBR_LOCATIVAS) {
-            return 'Selecciona un padre';
-        }
-    }
-    return undefined;
-};

package/src/FormSteps/@Construction/CBRIncidentsStep/CBRIncidentsStep.tsx

@@ -1,20 +0,0 @@
-import { CBRIncidentsStep as CBRIncidentsStepType } from '../../../@Types/CBRFormStep';
-import { FormStyleTypes } from '../../../constants/FormStepTypes';
-import { StepProps } from '../../Step';
-import MaterialCBRIncidentsStep from './MaterialCBRIncidentsStep/MaterialCBRIncidentsStep';
-import { useAppSelector } from '../../../hooks';
-export interface CBRIncidentsStepProps extends Omit<StepProps, 'step'> {
-    /** The CBRIncidentsStep to display */
-    step: CBRIncidentsStepType;
-}
-function CBRIncidentsStep(props: CBRIncidentsStepProps): JSX.Element {
-    const { formStyle } = useAppSelector((state) => state.global);
-
-    switch (formStyle.type) {
-        case FormStyleTypes.MATERIAL:
-        default: {
-            return <MaterialCBRIncidentsStep {...props} />;
-        }
-    }
-}
-export default CBRIncidentsStep;

package/src/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.module.css

@@ -1,60 +0,0 @@
-.container,
-.mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
-    width: fit-content;
-    border-radius: 20px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    position: relative;
-}
-.container {
-    max-width: calc(100% - 112px);
-    padding-right: 55px;
-    padding-left: 55px;
-}
-
-.mobileContainer {
-    max-width: calc(100% - 42px);
-    padding-right: 20px;
-    padding-left: 20px;
-}
-
-.titleLbl {
-    width: 100%;
-    font-size: 20px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: default;
-    margin-left: 10px;
-    margin-bottom: 10px;
-}
-
-.contentContainer {
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    max-width: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
-
-.deleteBtn,
-.disabledDeleteBtn {
-    font-size: 24px;
-    position: absolute;
-    right: 15px;
-    top: 15px;
-}
-
-.deleteBtn {
-    cursor: pointer;
-}

package/src/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.tsx

@@ -1,81 +0,0 @@
-import styles from './Incident.module.css';
-import { CBRIncidentsStepProps } from '../../CBRIncidentsStep';
-import { Incident } from '../MaterialCBRIncidentsStep';
-import StepComponent from '../../../../Step';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-import TextAreaStep from '../../../../TextAreaStep/TextAreaStep';
-import { TextArea } from '../../../../../@Types/FormStep';
-import FormContext from '../../../../../Contexts/FormContext';
-import { useAppSelector } from '../../../../../hooks';
-import { useContext } from 'react';
-
-function IncidentComponent({
-    step,
-    incident,
-    handleDelete,
-    ...others
-}: CBRIncidentsStepProps & {
-    incident: Incident;
-    handleDelete: () => void;
-}): JSX.Element {
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const widthStats = useAppSelector((state) => state.widthStats);
-
-    const spaceStep = form.steps[incident.idSpaceStep];
-    const elementStep = form.steps[incident.idElementStep];
-    const commentStep = form.steps[incident.idCommentStep];
-    if (incident.deleted) {
-        return <div></div>;
-    }
-    return (
-        <div
-            className={
-                widthStats.isMobile || form.size.blockNum < 3
-                    ? styles.mobileContainer
-                    : styles.container
-            }
-        >
-            <div
-                className={styles.contentContainer}
-                style={{
-                    width:
-                        (form.size.blockSize + form.size.spacingSize) *
-                        (form.size.blockNum - 1),
-                }}
-            >
-                <div
-                    className={styles.titleLbl}
-                    style={{ color: formStyle.textColor }}
-                >
-                    {step.unitLabel + ' ' + incident.num}:
-                </div>
-                <div
-                    className={
-                        !others.editable || postview
-                            ? styles.disabledDeleteBtn
-                            : styles.deleteBtn
-                    }
-                    style={{ color: formStyle.textColor }}
-                    onClick={(): void => {
-                        if (others.editable && !postview) {
-                            handleDelete();
-                        }
-                    }}
-                >
-                    <DeleteRoundedIcon fontSize="inherit" />
-                </div>
-
-                <StepComponent {...others} step={spaceStep} />
-                <StepComponent {...others} step={elementStep} />
-                <TextAreaStep
-                    {...others}
-                    step={commentStep as TextArea}
-                    maxLength={200}
-                />
-            </div>
-        </div>
-    );
-}
-
-export default IncidentComponent;

package/src/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.module.css

@@ -1,34 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    width: calc(100% - 20px);
-    max-width: calc(100% - 20px);
-    padding: 5px 10px;
-}
-
-.titleLbl {
-    font-size: 24px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: default;
-}
-
-.descriptionPar {
-    font-size: 16px;
-    white-space: pre-wrap;
-    cursor: default;
-}
-.btnContainer {
-    margin-top: 15px;
-    margin-left: 15px;
-    margin-bottom: 3px;
-    width: fit-content;
-}
-
-.errorMsg {
-    font-size: 0.75rem;
-    margin-top: 5px;
-    margin-left: 15px;
-}