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

package/src/App/AppFunctions.ts

@@ -0,0 +1,240 @@
+import { nanoid } from 'nanoid';
+import { Form } from '../@Types';
+import { FormStep, Mapper } from '../@Types/FormStep';
+import StepTypes, { FormTypes } from '../constants/FormStepTypes';
+import { getRawText, stringToDraft } from '../Utils/DraftFunctions';
+import { SiteState, ValuesStore } from '../States/SiteSlice';
+import { CustomStep } from '../FormSteps/CustomStep';
+import { calcSubSteps } from '../FormSteps/StepFunctions';
+import { MapperElement } from '../@Types/MapperElement';
+
+export const calcValuesStore = (
+    form: Readonly<Form>,
+    originalValues: Record<string, any> = {},
+    postview: boolean = false,
+    customSteps: Record<string, CustomStep> = {}
+): ValuesStore => {
+    const values: ValuesStore = {
+        global: {},
+        sections: {},
+    };
+    for (const idValue of Object.keys(originalValues)) {
+        const step = form.steps[idValue];
+        if (step && !form.hiddenSteps?.includes(step.id)) {
+            const value = mapOriginalValue(
+                step,
+                originalValues[step.id],
+                values,
+                form
+            );
+            if (value !== undefined) {
+                if (!values.sections[step.idSection])
+                    values.sections[step.idSection] = {};
+                values.sections[step.idSection][step.id] = value;
+            }
+        } else {
+            values.global[idValue] = originalValues[idValue];
+        }
+    }
+
+    if (postview) return values;
+    for (const section of Object.values(form.sections)) {
+        for (const idStep of section.steps) {
+            const step = form.steps[idStep];
+            if (
+                step.type !== StepTypes.MAPPER ||
+                values.sections[step.idSection]?.[step.id]
+            )
+                continue;
+            if (!values.sections[step.idSection])
+                values.sections[step.idSection] = {};
+            const { element, mappers } = addMapperStep(step, customSteps);
+            values.sections[step.idSection] = {
+                ...values.sections[step.idSection],
+                ...mappers,
+                [step.id]: [element],
+            };
+        }
+    }
+    return values;
+};
+
+export const addMapperStep = <Type>(
+    step: Mapper,
+    customSteps: Record<string, CustomStep>
+): {
+    element: MapperElement<Type>;
+    /** Record of all the new mapper values created */
+    mappers: Record<string, MapperElement<Type>[]>;
+    /** Record of all the new steps created */
+    steps: Record<string, FormStep>;
+} => {
+    const idElement = nanoid();
+    const element: MapperElement<Type> = {
+        ids: {},
+        id: idElement,
+        originalValues: {},
+        isOriginal: false,
+    };
+    let steps: Record<string, FormStep> = {};
+    let mappers: Record<string, MapperElement<Type>[]> = {};
+    for (const idStep of Object.keys(step.steps)) {
+        const baseStep = JSON.parse(JSON.stringify(step.steps[idStep]));
+        const newIdStep = step.id + '-' + idStep + '-' + idElement;
+        baseStep.id = newIdStep;
+        element.ids[idStep] = newIdStep;
+        steps[newIdStep] = baseStep;
+    }
+    calcRecursiveData(element, steps, customSteps);
+    for (const nestedStep of Object.values(step.steps)) {
+        if (nestedStep.type === StepTypes.MAPPER) {
+            const nested = addMapperStep<Type>(nestedStep, customSteps);
+            steps = { ...steps, ...nested.steps };
+            mappers = { ...mappers, ...nested.mappers };
+            mappers[element.ids[nestedStep.id]] = [nested.element];
+        }
+    }
+    return { element, mappers, steps };
+};
+
+export function calcRecursiveData<Type>(
+    element: Readonly<MapperElement<Type>>,
+    newSteps: Record<string, FormStep>,
+    customSteps: Record<string, CustomStep>
+): void {
+    if (!newSteps) return;
+    for (const idStep of Object.keys(newSteps)) {
+        const step = newSteps[idStep];
+        step.id = idStep;
+        if (step.dependencies) {
+            for (let i = 0; i < step.dependencies.length; i++) {
+                const idDep: string = step.dependencies[i];
+                const newId = element.ids[idDep];
+                if (newId) {
+                    step.dependencies[i] = newId;
+                }
+            }
+        }
+        const custom = customSteps[step?.type];
+        if (custom?.calcRecursiveData) {
+            custom.calcRecursiveData(step, element.ids);
+        }
+        calcSubSteps(
+            step.id,
+            newSteps,
+            (idStep: string): string => element.ids[idStep] ?? idStep
+        );
+    }
+}
+
+export const mapOriginalValue = (
+    step: FormStep,
+    value: any,
+    values: ValuesStore,
+    form?: Readonly<Form>
+): any => {
+    if (!value) return value;
+    switch (step?.type) {
+        case StepTypes.MAPPER: {
+            const elements = value;
+            const mappedElements: MapperElement<any>[] = [];
+            for (const element of elements) {
+                const idElement = element.id ?? nanoid();
+                const mappedElement: MapperElement<any> = {
+                    id: idElement,
+                    ids: {},
+                    originalValues: {},
+                    isOriginal: true,
+                };
+                if (element.value) {
+                    mappedElement.value = element.value;
+                }
+                for (const idStep of Object.keys(step.steps)) {
+                    const newIdStep = step.id + '-' + idStep + '-' + idElement;
+                    mappedElement.ids[idStep] = newIdStep;
+                    const value = mapOriginalValue(
+                        step.steps[idStep],
+                        element[idStep],
+                        values,
+                        form
+                    );
+                    if (value !== undefined) {
+                        if (!values.sections[step.idSection])
+                            values.sections[step.idSection] = {};
+                        values.sections[step.idSection][newIdStep] = value;
+                    }
+                }
+                for (const key of Object.keys(element)) {
+                    if (step.steps[key] || key === 'id') continue;
+                    mappedElement.originalValues[key] = element[key];
+                }
+                mappedElements.push(mappedElement);
+            }
+            return mappedElements;
+        }
+        case StepTypes.TEXTAREA: {
+            if (step.hasTextEditor) {
+                if (typeof value === 'string') {
+                    return stringToDraft(value);
+                }
+                return getRawText(value?.draft, value?.text);
+            }
+            const defaultValue = value.value ?? value;
+            if (typeof defaultValue === 'string') {
+                return defaultValue;
+            } else {
+                return defaultValue?.text ?? '';
+            }
+        }
+        case StepTypes.SELECTOR: {
+            const option = step.options.find(
+                (option) => option.value === value
+            );
+            if (!value?.value) return option;
+            return value;
+        }
+        case StepTypes.CLASSIFIER_SELECTOR: {
+            const stepClassifier = form?.classifiers?.[step.idClassifier ?? ''];
+            if (stepClassifier && !value.value) {
+                const classifier = form.classifiers?.[value];
+                return { value, label: classifier?.name };
+            }
+            break;
+        }
+        default:
+            if (
+                step.type.startsWith('CBR_') &&
+                value?.id &&
+                typeof value.id === 'number'
+            ) {
+                return { ...value, id: value.id.toString() };
+            }
+            return value;
+    }
+};
+
+export const calcInitialSections = (
+    form: Form
+): Pick<
+    SiteState,
+    'previousSections' | 'idCurrentSection' | 'nextSections'
+> => {
+    const previousSections: string[] = [];
+    const nextSections: string[] = calcNextSections(form.firstSection, form);
+    let idCurrentSection: string | null = null;
+    if (form.type === FormTypes.STEPPER) {
+        const firstSection = nextSections.shift();
+        if (firstSection) idCurrentSection = firstSection;
+    }
+
+    return { previousSections, idCurrentSection, nextSections };
+};
+
+const calcNextSections = (idSection: string, form: Form): string[] => {
+    const section = form.sections[idSection];
+    if (!section) return [];
+    const sections = [idSection];
+    if (section.nextSection)
+        sections.push(...calcNextSections(section.nextSection, form));
+    return sections;
+};

package/src/App/AppHooks.test.ts

@@ -0,0 +1,139 @@
+import mockAxios from 'jest-mock-axios';
+import { useSetupApp } from './AppHooks';
+import { renderHookWithProviders } from '../Utils/TestUtils';
+import { Form } from '../@Types';
+
+const BaseForm: Form = {
+    isStandAlone: true,
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            name: 'FIRST',
+            nextSection: null,
+            steps: [],
+        },
+    },
+    steps: {},
+    size: {
+        blockNum: 4,
+        blockSize: 210,
+        spacingSize: 20,
+    },
+    firstSection: 'FIRST',
+};
+
+describe('AppHooks', function () {
+    afterEach(() => {
+        mockAxios.reset();
+    });
+
+    describe('useSetupApp', function () {
+        test('Empty App', async () => {
+            const {
+                result: { current },
+                waitFor,
+            } = renderHookWithProviders(() => useSetupApp(false, {}));
+            await waitFor(() => current.form !== undefined);
+            expect(current.form).toBeNull();
+            expect(current.organization).toBeNull();
+            expect(current.branding).toBeUndefined();
+        });
+
+        test('Standalone Preview', async () => {
+            mockAxios.get.mockImplementation((): any => {
+                return Promise.resolve({
+                    data: {
+                        idOrganization: 'capta',
+                    },
+                });
+            });
+            const { result, waitFor } = renderHookWithProviders(() =>
+                useSetupApp(false, {
+                    formData: BaseForm,
+                    preview: true,
+                })
+            );
+            await waitFor(() => result.current.form !== undefined);
+            expect(mockAxios.get).toHaveBeenCalledWith('/organization');
+            expect(result.current.form).toBeTruthy();
+            expect(result.current.organization?.idOrganization).toBe('capta');
+        });
+
+        test('Embedded Form', async () => {
+            const { result, waitFor } = renderHookWithProviders(() =>
+                useSetupApp(false, {
+                    formData: BaseForm,
+                })
+            );
+            await waitFor(() => result.current.form !== undefined);
+            expect(result.current.form).toBeTruthy();
+            expect(result.current.organization).toBeNull();
+            expect(result.current.branding).toBeUndefined();
+        });
+
+        test('Apikey Default', async () => {
+            mockAxios.get.mockImplementation((a): any => {
+                if (a === '/organization') {
+                    return Promise.resolve({
+                        data: {
+                            idOrganization: 'capta',
+                            branding: {
+                                name: 'Branding',
+                            },
+                        },
+                    });
+                } else if (a === '/form/123') {
+                    return Promise.resolve({
+                        data: BaseForm,
+                    });
+                } else {
+                    return Promise.reject();
+                }
+            });
+            const { result, waitFor } = renderHookWithProviders(() =>
+                useSetupApp(false, {
+                    apiKey: '123',
+                })
+            );
+            await waitFor(() => result.current.form !== undefined);
+            expect(mockAxios.get).toHaveBeenCalledWith('/organization');
+            expect(result.current.form).toBeTruthy();
+            expect(result.current.organization?.idOrganization).toBe('capta');
+            expect(result.current.branding?.name).toBe('Branding');
+        });
+
+        test('Apikey With Custom Branding', async () => {
+            mockAxios.get.mockImplementation((a): any => {
+                if (a === '/organization') {
+                    return Promise.resolve({
+                        data: {
+                            idOrganization: 'capta',
+                            customBrandings: true,
+                        },
+                    });
+                } else if (a === '/form/123') {
+                    return Promise.resolve({
+                        data: {
+                            ...BaseForm,
+                            branding: {
+                                name: 'Custom Branding',
+                            },
+                        } as Form,
+                    });
+                } else {
+                    return Promise.reject();
+                }
+            });
+            const { result, waitFor } = renderHookWithProviders(() =>
+                useSetupApp(false, {
+                    apiKey: '123',
+                })
+            );
+            await waitFor(() => result.current.form !== undefined);
+            expect(mockAxios.get).toHaveBeenCalledWith('/organization');
+            expect(result.current.form).toBeTruthy();
+            expect(result.current.organization?.idOrganization).toBe('capta');
+            expect(result.current.branding?.name).toBe('Custom Branding');
+        });
+    });
+});

package/src/App/AppHooks.ts

@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Form, Organization } from '../@Types';
+import { AppProps } from './App';
+import { Branding } from '../@Types/Branding';
+import { reset } from '../States/GlobalSlice';
+import { fetchOrganization } from '../Services/OrganizationService';
+import { fetchForm } from '../Services/FormService';
+import { FormStep } from '../@Types/FormStep';
+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: boolean,
+    {
+        preview,
+        internal,
+        postview,
+        partial,
+        editable,
+        handleConfirmed,
+        customSteps,
+        valuesData,
+        apiKey,
+        formData,
+        classifiers,
+        ...others
+    }: Omit<AppProps, 'isWidget'>
+): {
+    form: Form | undefined | null;
+    organization: Organization | undefined | null;
+    branding: Branding | undefined;
+    reload: () => void;
+} => {
+    const [form, setForm] = useState<Form | undefined | null>(undefined);
+    const [organization, setOrganization] = useState<
+        Organization | undefined | null
+    >(undefined);
+    const [branding, setBranding] = useState<Branding | undefined>();
+    const dispatch = useAppDispatch();
+
+    const loadOrg = async (
+        idOrganization?: string
+    ): Promise<Organization | null> => {
+        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: string,
+        idOrganization?: string
+    ): Promise<Form | null> => {
+        const form = await fetchForm(apiKey, idOrganization);
+        if (form && form.branding) setBranding(form.branding);
+        return form;
+    };
+
+    const loadData = async (): Promise<void> => {
+        let idOrganization = others.idOrganization;
+        let organization: Organization | null = null;
+        let form: Form | null = 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: FormStep) => {
+                                step.idSection = section.id;
+                            }
+                        );
+                    }
+                }
+
+                const CBRStep = Object.values(form.steps).find(
+                    (step: FormStep): boolean => 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: Organization | null | undefined,
+    form: Form | null | undefined,
+    {
+        apiKey,
+        internal,
+        postview,
+        preview,
+    }: Pick<AppProps, 'apiKey' | 'internal' | 'postview' | 'preview'>
+): void => {
+    const loadLogRocket = async (): Promise<void> => {
+        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/src/Contexts/CustomContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from '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>;
+}
+
+const CustomContext = createContext<CustomContextData>({
+    customSteps: {},
+    customStepProps: {},
+});
+export default CustomContext;

package/src/Contexts/FormContext.ts

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

package/src/Contexts/SectionContext.ts

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