@visns-studio/visns-components 4.6.13 → 4.7.1

package/components/crm/generic/GenericFormBuilder.jsx

@@ -1,1765 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import Popup from 'reactjs-popup';
-import { arrayMoveImmutable } from 'array-move';
-import { confirmAlert } from 'react-confirm-alert';
-import parse from 'html-react-parser';
-import Toggle from 'react-toggle';
-import { toast } from 'react-toastify';
-import { v4 as uuidv4 } from 'uuid';
-import { Editor } from '@tinymce/tinymce-react';
-import { CircleChevronRight, CirclePlus, CircleX, TrashCan } from 'akar-icons';
-
-import 'react-toggle/style.css';
-import 'react-datepicker/dist/react-datepicker.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
-import Breadcrumb from '../Breadcrumb';
-import CustomFetch from '../Fetch';
-import SortableList from '../../../components/cms/sorting/List';
-
-import styles from './styles/GenericFormBuilder.module.css'; // Import the CSS module
-
-function GenericFormBuilder({ setting, urlParam, userProfile }) {
-    const editorRef = useRef(null);
-    const routeParams = useParams();
-
-    const { dynamicDropdowns, fetchUrl, fields, parentUrl, formTitle } =
-        setting;
-
-    const { dataId } = useParams();
-    const [data, setData] = useState({});
-    const [dataField, setDataField] = useState({
-        id: '',
-        label: '',
-        description: '',
-        type: '',
-        options: [],
-        rows: [],
-        size: 'half',
-        required: 'no',
-    });
-    const [dataOption, setDataOption] = useState({
-        id: '',
-        label: '',
-        type: '',
-    });
-    const [rowOption, setRowOption] = useState({
-        id: '',
-        label: '',
-    });
-    const [modalShow, setModalShow] = useState(false);
-    const [modalType, setModalType] = useState({
-        type: 'create',
-        key: '',
-    });
-    const [modalFormShow, setModalFormShow] = useState(false);
-    const [roles, setRoles] = useState([]);
-
-    /** Data Option Functionalities */
-    const handleDataOption = (e) => {
-        const { name, value } = e.target;
-
-        setDataOption((items) => ({
-            ...items,
-            [name]: value,
-            id: `${slugify(value)}-`,
-        }));
-    };
-
-    const handleAddOption = (e) => {
-        e.preventDefault();
-
-        if (dataOption.label !== '') {
-            const isLabelUnique = !dataField.options.some(
-                (option) => option.label === dataOption.label
-            );
-
-            if (isLabelUnique) {
-                setDataField((items) => ({
-                    ...items,
-                    options: [...items.options, dataOption],
-                }));
-
-                setDataOption(() => ({
-                    id: '',
-                    label: '',
-                    type: '',
-                }));
-            } else {
-                toast.warn('Option label must be unique.');
-            }
-        } else {
-            toast.warn('Please enter a label for the option.');
-        }
-    };
-
-    const handleDeleteOption = (e) => {
-        e.preventDefault();
-
-        const { counter } = e.target.dataset;
-
-        setDataField((prevState) => {
-            const options = prevState.options.slice();
-            options.splice(counter, 1);
-
-            return {
-                ...prevState,
-                options: options,
-            };
-        });
-    };
-
-    /** Row Option Functionalities */
-    const handleRowOption = (e) => {
-        const { name, value } = e.target;
-
-        setRowOption((items) => ({
-            ...items,
-            [name]: value,
-            id: `${slugify(value)}-`,
-        }));
-    };
-
-    const handleAddRowOption = (e) => {
-        e.preventDefault();
-
-        // Initialize rows if it doesn't exist
-        if (!dataField.rows) {
-            setDataField((items) => ({
-                ...items,
-                rows: [],
-            }));
-        }
-
-        if (rowOption.label !== '') {
-            const isLabelUnique = dataField.rows
-                ? !dataField.rows.some(
-                      (option) => option.label === rowOption.label
-                  )
-                : true;
-
-            if (isLabelUnique) {
-                setDataField((items) => ({
-                    ...items,
-                    rows: [...(items.rows || []), rowOption],
-                }));
-
-                setRowOption(() => ({
-                    id: '',
-                    label: '',
-                }));
-            } else {
-                toast.warn('Option label must be unique.');
-            }
-        } else {
-            toast.warn('Please enter a label for the option.');
-        }
-    };
-
-    const handleDeleteRowOption = (e) => {
-        e.preventDefault();
-
-        const { counter } = e.target.dataset;
-
-        setDataField((prevState) => {
-            const rows = prevState.rows.slice();
-            rows.splice(counter, 1);
-
-            return {
-                ...prevState,
-                rows: rows,
-            };
-        });
-    };
-
-    /** Field Functionalities */
-    const onSortEnd = ({ oldIndex, newIndex }) => {
-        const newData = arrayMoveImmutable(data.detail, oldIndex, newIndex);
-
-        setData((items) => ({
-            ...items,
-            detail: newData,
-        }));
-    };
-
-    const handleCloseModal = () => {
-        setModalShow(false);
-        setDataField(() => ({
-            label: '',
-            type: '',
-            options: [],
-            // rows: [],
-            size: 'half',
-            required: 'no',
-        }));
-        setModalType(() => ({
-            type: 'create',
-            key: '',
-        }));
-    };
-
-    const handleOpenModal = () => {
-        setModalShow(true);
-    };
-
-    const slugify = (text) => {
-        return text.replace(/\s+/g, '-').toLowerCase();
-    };
-
-    const handleChangeForm = (e) => {
-        if (e) {
-            const { name, value } = e.target;
-            const updatedValue = name === 'id' ? slugify(value) : value;
-
-            setDataField((items) => ({
-                ...items,
-                [name]: updatedValue,
-            }));
-
-            if (name === 'label') {
-                setDataField((items) => ({
-                    ...items,
-                    id: slugify(value),
-                }));
-            }
-        }
-    };
-
-    const handleChangeFormRichEditor = (e, value, name) => {
-        setDataField((items) => ({
-            ...items,
-            [name]: value,
-        }));
-    };
-
-    const handleEdit = (key) => {
-        const { detail } = data;
-
-        setDataField(() => ({
-            ...detail[key],
-        }));
-
-        setModalType(() => ({
-            type: 'update',
-            key: key,
-        }));
-
-        handleOpenModal();
-    };
-
-    const handleDeleteField = (id, label) => {
-        confirmAlert({
-            title: `Delete "${label}" Field`,
-            message: 'Are you sure you want to delete this field?',
-            buttons: [
-                {
-                    label: 'Yes',
-                    onClick: () => {
-                        const index = data.detail.findIndex(
-                            (item) => item.id === id
-                        );
-
-                        if (index > -1) {
-                            let newDetail = [...data.detail];
-                            newDetail.splice(index, 1);
-
-                            setData((items) => ({
-                                ...items,
-                                detail: newDetail,
-                            }));
-
-                            handleCloseModal();
-                        }
-                    },
-                },
-                {
-                    label: 'No',
-                    onClick: () => close(),
-                },
-            ],
-        });
-    };
-
-    const handleSaveField = (e) => {
-        if (e) {
-            e.preventDefault();
-        }
-
-        let field = dataField;
-
-        field.id = formatFieldId(field.id);
-
-        let errorMessage = validateField(field);
-
-        if (errorMessage === '') {
-            saveFieldData(field);
-            handleCloseModal();
-        } else {
-            displayErrorMessage(errorMessage);
-        }
-    };
-
-    const formatFieldId = (id) => {
-        return id.includes('::') ? id : `${id}::${uuidv4()}`;
-    };
-
-    const validateField = (field) => {
-        let errors = [];
-
-        if (!isIdValid(field.id)) {
-            errors.push('Please enter a unique id for the field.');
-        }
-
-        if (field.type === 'plaintext') {
-            if (!field.label || field.label === '') {
-                errors.push('Please enter a label for the field.');
-            }
-
-            if (!field.description || field.description === '') {
-                errors.push('Please enter a description for the field.');
-            }
-        } else {
-            if (!field.label || field.label === '') {
-                errors.push('Please enter a label for the field.');
-            }
-        }
-
-        if (field.type === '') {
-            errors.push('Please select a type for the field.');
-        } else if (
-            field.type === 'dropdown' &&
-            (!field.options || field.options.length === 0)
-        ) {
-            errors.push('Please add options for the dropdown.');
-        } else if (
-            field.type === 'table_text' &&
-            (!field.options || field.options.length === 0)
-        ) {
-            errors.push('Please add options for the table.');
-        } else if (field.type === 'table_radio') {
-            if (!field.options || field.options.length === 0) {
-                errors.push('Please add options for the table.');
-            }
-            if (!field.rows || field.rows.length === 0) {
-                errors.push('Please add rows for the table.');
-            }
-        }
-
-        if (!field.size || field.size === '') {
-            errors.push('Please select a size for the field.');
-        }
-
-        if (field.required === '') {
-            errors.push('Is the field a required field?');
-        }
-
-        return errors.join('<br />');
-    };
-
-    const isIdValid = (id) => {
-        if (id === '') {
-            return false;
-        }
-        if (
-            modalType.type === 'create' ||
-            id !== data.detail[modalType.key]?.id
-        ) {
-            return data.detail
-                ? data.detail.every((field) => field.id !== id)
-                : true;
-        }
-        return true;
-    };
-
-    const saveFieldData = (field) => {
-        let newDetail =
-            modalType.type === 'create'
-                ? [...(data.detail || []), field]
-                : data.detail.map((f, index) =>
-                      index === modalType.key ? field : f
-                  );
-
-        setData((items) => ({
-            ...items,
-            detail: newDetail,
-        }));
-    };
-
-    const displayErrorMessage = (errorMessage) => {
-        toast.error(<div>{parse(errorMessage)}</div>);
-    };
-
-    /** Form Functionalities */
-    const renderClassName = (d) => {
-        const sizeClassMap = {
-            full: styles.fwBuilderItem,
-            half: styles.halfBuilderItem,
-            quarter: styles.qtrBuilderItem,
-        };
-
-        return `${styles.formBuilderItem} ${
-            sizeClassMap[d.size] || styles.halfBuilderItem
-        }`;
-    };
-
-    const renderField = (field) => {
-        switch (field.type) {
-            case 'checkbox':
-                return (
-                    <label className={styles.fi__label}>
-                        <span className={styles.fi__spancheckbox}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                        {field.options.length > 0 ? (
-                            <div className={styles.fi__optionscontainer}>
-                                {field.options.map((option, index) => (
-                                    <div
-                                        key={`${field.id}-checkbox-option-${index}`}
-                                        className={styles.fi__checkboxcontainer}
-                                    >
-                                        <input
-                                            type="checkbox"
-                                            className={
-                                                styles.fi__customcheckbox
-                                            }
-                                        />
-                                        <label
-                                            className={styles.fi__checkboxlabel}
-                                        >
-                                            {option.label}
-                                        </label>{' '}
-                                    </div>
-                                ))}
-                            </div>
-                        ) : null}
-                    </label>
-                );
-            case 'date':
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="date" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'datetime':
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="datetime-local" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'dropdown':
-            case 'dynamicDropdown':
-                return (
-                    <label className={styles.fi__label}>
-                        <select>
-                            <option>Please Select an Option</option>
-                        </select>
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'dynamicdata':
-                return (
-                    <label className={styles.fi__label}>
-                        <strong>{field.label}</strong> [Dynamic Data]
-                    </label>
-                );
-            case 'file':
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="file" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'image':
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="file" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'plaintextheading':
-                return (
-                    <label className={styles.fi__label}>
-                        <h2>{field.label}</h2>
-                    </label>
-                );
-            case 'plaintext':
-                return (
-                    <label className={styles.fi__label}>
-                        {field.description ? parse(field.description) : null}
-                    </label>
-                );
-            case 'number':
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="number" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'section':
-                return (
-                    <div className={styles.gridtxt__header}>
-                        <span>{field.label}</span>
-                    </div>
-                );
-            case 'signature':
-                return (
-                    <label className={styles.fi__label}>
-                        <span
-                            className={`${styles.fi__span} ${styles.prefocus}`}
-                        >
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                        <button
-                            type="button"
-                            className={styles.signButton}
-                            onClick={() => {
-                                // Handle signature logic here
-                            }}
-                        >
-                            Click to Sign
-                        </button>
-                        <div className={styles.signaturePlaceholder}>
-                            <p>
-                                <strong>Name:</strong> [Placeholder]
-                            </p>
-                            <p>
-                                <strong>Date:</strong> [Placeholder]
-                            </p>
-                        </div>
-                    </label>
-                );
-            case 'table_radio':
-                return (
-                    <label className={styles.fi__label}>
-                        <table className={styles.contentTable}>
-                            <thead>
-                                <tr>
-                                    <th></th>
-                                    {field.options.map((option, index) => (
-                                        <th
-                                            key={`${field.id}-table-text-option-${index}`}
-                                        >
-                                            {option.label}
-                                        </th>
-                                    ))}
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {field.rows.map((row, rowKey) => (
-                                    <tr
-                                        key={`${field.id}-table-text-row-data-${rowKey}`}
-                                    >
-                                        <td>{row.label}</td>
-                                        {field.options.map(
-                                            (option, optionKey) => (
-                                                <td
-                                                    key={`${field.id}-table-text-data-${optionKey}-${rowKey}`}
-                                                ></td>
-                                            )
-                                        )}
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                        <span
-                            className={`${styles.fi__span} ${styles.prefocus}`}
-                        >
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'table_text':
-                return (
-                    <label className={styles.fi__label}>
-                        <table className={styles.contentTable}>
-                            <thead>
-                                <tr>
-                                    {field.options.map((option, index) => (
-                                        <th
-                                            key={`${field.id}-table-text-option-${index}`}
-                                        >
-                                            {option.label}
-                                        </th>
-                                    ))}
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    {field.options.map((option, index) => (
-                                        <td
-                                            key={`${field.id}-table-text-data-${index}`}
-                                        >
-                                            [Placeholder Data]]
-                                        </td>
-                                    ))}
-                                </tr>
-                            </tbody>
-                        </table>
-                        <span
-                            className={`${styles.fi__span} ${styles.prefocus}`}
-                        >
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'textarea':
-                return (
-                    <label className={styles.fi__label}>
-                        <textarea rows="5"></textarea>
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'time':
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="time" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-            case 'toggle':
-                return (
-                    <div>
-                        <Toggle />
-                        <span className={styles.fi__toggletxt}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </div>
-                );
-            default:
-                return (
-                    <label className={styles.fi__label}>
-                        <input type="text" />
-                        <span className={styles.fi__span}>
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                    </label>
-                );
-        }
-    };
-
-    const handleCloseModalForm = () => {
-        setModalFormShow(false);
-    };
-
-    const handleOpenModalForm = () => {
-        setModalFormShow(true);
-    };
-
-    const handleChange = (e) => {
-        if (e) {
-            const { name, value } = e.target;
-
-            setData((prevState) => ({
-                ...prevState,
-                [name]: value,
-            }));
-        }
-    };
-
-    const handleSubmit = async (e) => {
-        try {
-            if (e) {
-                e.preventDefault();
-
-                let _error = '';
-
-                if (data.label === '') {
-                    _error += 'Please a label for the form.<br />';
-                }
-
-                if (_error === '') {
-                    const res = await CustomFetch(
-                        `${fetchUrl}/${dataId}`,
-                        'PUT',
-                        {
-                            ...data,
-                        }
-                    );
-
-                    if (res.data.error === '') {
-                        toast.success(
-                            "You have successfully updated the form's detail."
-                        );
-
-                        handleCloseModalForm();
-                    } else {
-                        toast.error(String(res.data.error));
-                    }
-                } else {
-                    toast.error(<div>{parse(_error)}</div>);
-                }
-            }
-        } catch (err) {
-            toast.error(`Error: ${err}`);
-        }
-    };
-
-    const fetchData = async () => {
-        try {
-            const res = await CustomFetch(
-                `${fetchUrl}/${routeParams[urlParam]}`,
-                'GET',
-                {}
-            );
-
-            setData(res.data);
-        } catch (err) {
-            toast.error(`Error: ${err}`);
-        }
-    };
-
-    const saveOnSort = async () => {
-        try {
-            const res = await CustomFetch(
-                `${fetchUrl}/sort/${dataId}`,
-                'POST',
-                {
-                    detail: data.detail,
-                }
-            );
-
-            if (res.data.error !== '') {
-                toast.error(String(res.data.error));
-            }
-        } catch (err) {
-            toast.error(`Error: ${err}`);
-        }
-    };
-
-    const fetchRoles = async () => {
-        try {
-            const res = await CustomFetch('/ajax/roles/dropdown', 'POST', {});
-
-            setRoles(res.data.data);
-        } catch (err) {
-            console.info(err);
-        }
-    };
-
-    useEffect(() => {
-        if (data.detail && data.detail.length > 0) {
-            saveOnSort();
-        }
-    }, [data.detail]);
-
-    useEffect(() => {
-        fetchData();
-        fetchRoles();
-    }, []);
-
-    return (
-        <div>
-            <div className={styles.grid__row}>
-                <div className={`${styles.grid__full} ${styles.crmtitle}`}>
-                    <Breadcrumb
-                        data={data}
-                        page={{
-                            previousUrl: parentUrl,
-                            title: 'Forms',
-                            titleKey: 'label',
-                        }}
-                    />
-                </div>
-            </div>
-            <div className={styles.grid}>
-                <div className={styles.grid__subrow}>
-                    <div className={styles.grid__subnav}>
-                        {data.detail && data.detail.length > 0 ? (
-                            <SortableList
-                                handleClick={handleEdit}
-                                handleDelete={handleDeleteField}
-                                items={data.detail}
-                                onSortEnd={onSortEnd}
-                                axis="xy"
-                                helperClass={styles.dragitem}
-                                transitionDuration={250}
-                                showImage={false}
-                                useDragHandle
-                            />
-                        ) : null}
-                    </div>
-                    <div className={styles.grid__subcontent}>
-                        <div className={styles.formSplit}>
-                            <div className={styles.gridtxt__header}>
-                                <span>{formTitle ? formTitle : null}</span>
-                            </div>
-                            {data.detail && data.detail.length > 0 ? (
-                                <div className={styles.modal__content}>
-                                    <div className={styles.formcontainer}>
-                                        <form className={styles.modalForm}>
-                                            {data.detail.map((a, b) => (
-                                                <div
-                                                    key={`form-preview-field-${b}`}
-                                                    className={renderClassName(
-                                                        a
-                                                    )}
-                                                    style={{
-                                                        minHeight: '64.2px',
-                                                    }}
-                                                >
-                                                    {renderField(a)}
-                                                </div>
-                                            ))}
-                                        </form>
-                                    </div>
-                                </div>
-                            ) : null}
-                        </div>
-                        <div className={styles.polActions}>
-                            <button
-                                className={styles.btn}
-                                onClick={handleOpenModal}
-                            >
-                                Add Field
-                            </button>
-                            <button
-                                className={styles.btn}
-                                onClick={handleOpenModalForm}
-                            >
-                                Edit Form
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <Popup
-                open={modalShow}
-                onClose={handleCloseModal}
-                closeOnDocumentClick={false}
-            >
-                <div className={styles.modalwrap}>
-                    <div className={styles.modal}>
-                        <div className={styles.modal__header}>
-                            <h1>
-                                {modalType.type === 'create'
-                                    ? 'Add new Field'
-                                    : 'Update existing Field'}
-                            </h1>
-                            <button
-                                className={styles.modal__close}
-                                onClick={handleCloseModal}
-                            >
-                                <CircleX strokeWidth={1} size={24} />
-                            </button>
-                        </div>
-                        <div className={styles.modal__content}>
-                            <div className={styles.formcontainer}>
-                                <form className={styles.modalForm}>
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <select
-                                                name="type"
-                                                value={dataField.type}
-                                                onChange={handleChangeForm}
-                                            >
-                                                <option>
-                                                    Please Select an Option
-                                                </option>
-                                                <option value="checkbox">
-                                                    Checkbox
-                                                </option>
-                                                <option value="html5_date">
-                                                    Date
-                                                </option>
-                                                <option value="html5_datetime">
-                                                    Date & Time
-                                                </option>
-                                                <option value="dropdown">
-                                                    Dropdown
-                                                </option>
-                                                {dynamicDropdowns &&
-                                                dynamicDropdowns.length > 0 ? (
-                                                    <option value="dynamicDropdown">
-                                                        Dynamic Dropdown
-                                                    </option>
-                                                ) : null}
-                                                <option value="dynamicdata">
-                                                    Dynamic Data
-                                                </option>
-                                                <option value="file">
-                                                    File
-                                                </option>
-                                                <option value="plaintextheading">
-                                                    Heading
-                                                </option>
-                                                <option value="image">
-                                                    Image
-                                                </option>
-                                                <option value="number">
-                                                    Number
-                                                </option>
-                                                <option value="plaintext">
-                                                    Plain Text
-                                                </option>
-                                                <option value="section">
-                                                    Section
-                                                </option>
-                                                <option value="signature">
-                                                    Signature
-                                                </option>
-                                                <option value="table_radio">
-                                                    Table (Radio)
-                                                </option>
-                                                <option value="table_text">
-                                                    Table (Text)
-                                                </option>
-                                                <option value="text">
-                                                    Text
-                                                </option>
-                                                <option value="textarea">
-                                                    Textarea
-                                                </option>
-                                                <option value="html5_time">
-                                                    Time
-                                                </option>
-                                                <option value="toggle">
-                                                    Toggle
-                                                </option>
-                                            </select>
-                                            <span className={styles.fi__span}>
-                                                Type *
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <input
-                                                type="text"
-                                                name="label"
-                                                value={
-                                                    dataField.label
-                                                        ? dataField.label
-                                                        : ''
-                                                }
-                                                onChange={handleChangeForm}
-                                                placeholder=" "
-                                            />
-                                            <span className={styles.fi__span}>
-                                                Label *
-                                            </span>
-                                        </label>
-                                    </div>
-                                    {dataField.type === 'dynamicdata' && (
-                                        <div className={styles.formItem}>
-                                            <label className={styles.fi__label}>
-                                                <select
-                                                    name="dynamicfield"
-                                                    value={
-                                                        dataField.dynamicfield
-                                                    }
-                                                    onChange={handleChangeForm}
-                                                >
-                                                    <option value="">
-                                                        Please select an option
-                                                    </option>
-                                                    {fields.map((category) => (
-                                                        <optgroup
-                                                            label={
-                                                                category.label
-                                                            }
-                                                            key={`dynamic-field-category-${category.id}`}
-                                                        >
-                                                            {category.data.map(
-                                                                (field) => (
-                                                                    <option
-                                                                        value={`${category.id}::${field.value}`}
-                                                                        key={`dynamic-field-category-${category.id}-${field.value}`}
-                                                                    >
-                                                                        {
-                                                                            field.label
-                                                                        }
-                                                                    </option>
-                                                                )
-                                                            )}
-                                                        </optgroup>
-                                                    ))}
-                                                </select>
-                                                <span
-                                                    className={styles.fi__span}
-                                                >
-                                                    Dynamic Field *
-                                                </span>
-                                            </label>
-                                        </div>
-                                    )}
-                                    {dataField.type === 'dynamicDropdown' && (
-                                        <div className={styles.formItem}>
-                                            <label className={styles.fi__label}>
-                                                <select
-                                                    name="dynamicDropdown"
-                                                    value={
-                                                        dataField.dynamicDropdown
-                                                    }
-                                                    onChange={handleChangeForm}
-                                                >
-                                                    <option value="">
-                                                        Please select an option
-                                                    </option>
-                                                    {dynamicDropdowns.map(
-                                                        (
-                                                            dropdown,
-                                                            dropdownKey
-                                                        ) => (
-                                                            <option
-                                                                value={`${dropdown.url}`}
-                                                                key={`dynamic-dropdown-${dropdownKey}`}
-                                                            >
-                                                                {dropdown.label}
-                                                            </option>
-                                                        )
-                                                    )}
-                                                </select>
-                                                <span
-                                                    className={styles.fi__span}
-                                                >
-                                                    Dropdown *
-                                                </span>
-                                            </label>
-                                        </div>
-                                    )}
-
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <select
-                                                name="size"
-                                                value={dataField.size}
-                                                onChange={handleChangeForm}
-                                            >
-                                                <option>
-                                                    Please Select an Option
-                                                </option>
-                                                <option value="quarter">
-                                                    Quarter
-                                                </option>
-                                                <option value="half">
-                                                    Half
-                                                </option>
-                                                <option value="full">
-                                                    Full
-                                                </option>
-                                            </select>
-                                            <span className={styles.fi__span}>
-                                                Size *
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <select
-                                                name="required"
-                                                value={dataField.required}
-                                                onChange={handleChangeForm}
-                                            >
-                                                {dataField.type ===
-                                                'section' ? (
-                                                    <option value="no">
-                                                        No
-                                                    </option>
-                                                ) : (
-                                                    <>
-                                                        <option>
-                                                            Please Select an
-                                                            Option
-                                                        </option>
-                                                        <option value="no">
-                                                            No
-                                                        </option>
-                                                        <option value="yes">
-                                                            Yes
-                                                        </option>
-                                                    </>
-                                                )}
-                                            </select>
-                                            <span className={styles.fi__span}>
-                                                Required? *
-                                            </span>
-                                        </label>
-                                    </div>
-
-                                    {dataField.type === 'image' && (
-                                        <div className={styles.formItem}>
-                                            <label className={styles.fi__label}>
-                                                <select
-                                                    name="image_qty"
-                                                    value={dataField.image_qty}
-                                                    onChange={handleChangeForm}
-                                                >
-                                                    <option>
-                                                        Please Select an Option
-                                                    </option>
-                                                    <option value="single">
-                                                        Single
-                                                    </option>
-                                                    <option value="bulk">
-                                                        Bulk
-                                                    </option>
-                                                </select>
-                                                <span
-                                                    className={styles.fi__span}
-                                                >
-                                                    Single or Bulk Image?
-                                                </span>
-                                            </label>
-                                        </div>
-                                    )}
-
-                                    {dataField.type === 'plaintext' && (
-                                        <div
-                                            className={`${styles.formItem} ${styles.fwItem}`}
-                                        >
-                                            <label className={styles.fi__label}>
-                                                <Editor
-                                                    tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
-                                                    licenseKey="gpl"
-                                                    onEditorChange={(
-                                                        value,
-                                                        e
-                                                    ) => {
-                                                        handleChangeFormRichEditor(
-                                                            e,
-                                                            value,
-                                                            'description'
-                                                        );
-                                                    }}
-                                                    onInit={(evt, editor) =>
-                                                        (editorRef.current =
-                                                            editor)
-                                                    }
-                                                    value={
-                                                        dataField.description ||
-                                                        ''
-                                                    }
-                                                    init={{
-                                                        branding: false,
-                                                        height: 500,
-                                                        menubar: false,
-                                                        plugins: [
-                                                            'advlist',
-                                                            'autolink',
-                                                            'lists',
-                                                            'link',
-                                                            'image',
-                                                            'charmap',
-                                                            'preview',
-                                                            'anchor',
-                                                            'searchreplace',
-                                                            'visualblocks',
-                                                            'code',
-                                                            'fullscreen',
-                                                            'insertdatetime',
-                                                            'media',
-                                                            'table',
-                                                            'code',
-                                                        ],
-                                                        toolbar:
-                                                            'undo redo | blocks | ' +
-                                                            'bold italic forecolor | alignleft aligncenter ' +
-                                                            'alignright alignjustify | bullist numlist outdent indent | ' +
-                                                            'removeformat | table',
-                                                        content_style:
-                                                            'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-                                                    }}
-                                                />
-                                                <span
-                                                    className={styles.fi__span}
-                                                >
-                                                    Description *
-                                                </span>
-                                            </label>
-                                        </div>
-                                    )}
-
-                                    {[
-                                        'checkbox',
-                                        'dropdown',
-                                        'table_radio',
-                                    ].includes(dataField.type) ? (
-                                        <div
-                                            className={`${styles.formItem} ${styles.fwItem}`}
-                                        >
-                                            <table
-                                                className={styles.contentTable}
-                                            >
-                                                <thead
-                                                    className={
-                                                        styles.gridHeaders
-                                                    }
-                                                >
-                                                    <tr>
-                                                        <th
-                                                            style={{
-                                                                width: '450px',
-                                                            }}
-                                                        >
-                                                            {dataField.type ===
-                                                                'table_text' ||
-                                                            dataField.type ===
-                                                                'table_radio'
-                                                                ? 'Column Header'
-                                                                : 'Label'}
-                                                        </th>
-                                                        <th></th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {dataField.options.length >
-                                                    0 ? (
-                                                        dataField.options.map(
-                                                            (
-                                                                option,
-                                                                optionKey
-                                                            ) => (
-                                                                <tr
-                                                                    key={`option-${optionKey}`}
-                                                                >
-                                                                    <td>
-                                                                        {
-                                                                            option.label
-                                                                        }
-                                                                    </td>
-                                                                    <td
-                                                                        style={{
-                                                                            textAlign:
-                                                                                'center',
-                                                                        }}
-                                                                    >
-                                                                        <button
-                                                                            className={
-                                                                                styles.btn
-                                                                            }
-                                                                            style={{
-                                                                                padding:
-                                                                                    '5px 20px',
-                                                                            }}
-                                                                            onClick={
-                                                                                handleDeleteOption
-                                                                            }
-                                                                            data-counter={
-                                                                                optionKey
-                                                                            }
-                                                                            data-tooltip-id="system-tooltip"
-                                                                            data-tooltip-content={
-                                                                                'Delete Option'
-                                                                            }
-                                                                        >
-                                                                            <TrashCan
-                                                                                strokeWidth={
-                                                                                    2
-                                                                                }
-                                                                                size={
-                                                                                    12
-                                                                                }
-                                                                            />
-                                                                        </button>
-                                                                    </td>
-                                                                </tr>
-                                                            )
-                                                        )
-                                                    ) : (
-                                                        <tr>
-                                                            <td colSpan="2">
-                                                                No entry have
-                                                                been added.
-                                                            </td>
-                                                        </tr>
-                                                    )}
-                                                </tbody>
-                                                <tfoot>
-                                                    <tr>
-                                                        <td>
-                                                            <input
-                                                                type="text"
-                                                                style={{
-                                                                    padding:
-                                                                        '5px',
-                                                                }}
-                                                                name="label"
-                                                                onChange={
-                                                                    handleDataOption
-                                                                }
-                                                                value={
-                                                                    dataOption.label
-                                                                }
-                                                            />
-                                                        </td>
-                                                        <td
-                                                            style={{
-                                                                textAlign:
-                                                                    'center',
-                                                            }}
-                                                        >
-                                                            <button
-                                                                className={
-                                                                    styles.btn
-                                                                }
-                                                                style={{
-                                                                    padding:
-                                                                        '5px 20px',
-                                                                }}
-                                                                onClick={
-                                                                    handleAddOption
-                                                                }
-                                                                data-tooltip-id="system-tooltip"
-                                                                data-tooltip-content={
-                                                                    'Add Option'
-                                                                }
-                                                            >
-                                                                <CirclePlus
-                                                                    strokeWidth={
-                                                                        2
-                                                                    }
-                                                                    size={12}
-                                                                />
-                                                            </button>
-                                                        </td>
-                                                    </tr>
-                                                </tfoot>
-                                            </table>
-                                        </div>
-                                    ) : null}
-
-                                    {['table_text'].includes(dataField.type) ? (
-                                        <div
-                                            className={`${styles.formItem} ${styles.fwItem}`}
-                                        >
-                                            <table
-                                                className={styles.contentTable}
-                                            >
-                                                <thead
-                                                    className={
-                                                        styles.gridHeaders
-                                                    }
-                                                >
-                                                    <tr>
-                                                        <th
-                                                            style={{
-                                                                width: '450px',
-                                                            }}
-                                                        >
-                                                            Column Header
-                                                        </th>
-                                                        <th>Column Type</th>
-                                                        <th></th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {dataField.options.length >
-                                                    0 ? (
-                                                        dataField.options.map(
-                                                            (
-                                                                option,
-                                                                optionKey
-                                                            ) => (
-                                                                <tr
-                                                                    key={`option-${optionKey}`}
-                                                                >
-                                                                    <td>
-                                                                        {
-                                                                            option.label
-                                                                        }
-                                                                    </td>
-                                                                    <td>
-                                                                        {
-                                                                            option.type
-                                                                        }
-                                                                    </td>
-                                                                    <td
-                                                                        style={{
-                                                                            textAlign:
-                                                                                'center',
-                                                                        }}
-                                                                    >
-                                                                        <button
-                                                                            className={
-                                                                                styles.btn
-                                                                            }
-                                                                            style={{
-                                                                                padding:
-                                                                                    '5px 20px',
-                                                                            }}
-                                                                            onClick={
-                                                                                handleDeleteOption
-                                                                            }
-                                                                            data-counter={
-                                                                                optionKey
-                                                                            }
-                                                                            data-tooltip-id="system-tooltip"
-                                                                            data-tooltip-content={
-                                                                                'Delete Option'
-                                                                            }
-                                                                        >
-                                                                            <TrashCan
-                                                                                strokeWidth={
-                                                                                    2
-                                                                                }
-                                                                                size={
-                                                                                    12
-                                                                                }
-                                                                            />
-                                                                        </button>
-                                                                    </td>
-                                                                </tr>
-                                                            )
-                                                        )
-                                                    ) : (
-                                                        <tr>
-                                                            <td colSpan="2">
-                                                                No entry have
-                                                                been added.
-                                                            </td>
-                                                        </tr>
-                                                    )}
-                                                </tbody>
-                                                <tfoot>
-                                                    <tr>
-                                                        <td>
-                                                            <input
-                                                                type="text"
-                                                                style={{
-                                                                    padding:
-                                                                        '5px',
-                                                                }}
-                                                                name="label"
-                                                                onChange={
-                                                                    handleDataOption
-                                                                }
-                                                                value={
-                                                                    dataOption.label
-                                                                }
-                                                            />
-                                                        </td>
-                                                        <td>
-                                                            <select
-                                                                name="type"
-                                                                value={
-                                                                    dataOption.type
-                                                                }
-                                                                onChange={
-                                                                    handleDataOption
-                                                                }
-                                                            >
-                                                                <option>
-                                                                    Please
-                                                                    Select an
-                                                                    Option
-                                                                </option>
-                                                                <option value="text">
-                                                                    Text
-                                                                </option>
-                                                                <option value="checkbox">
-                                                                    Checkbox
-                                                                </option>
-                                                            </select>
-                                                        </td>
-                                                        <td
-                                                            style={{
-                                                                textAlign:
-                                                                    'center',
-                                                            }}
-                                                        >
-                                                            <button
-                                                                className={
-                                                                    styles.btn
-                                                                }
-                                                                style={{
-                                                                    padding:
-                                                                        '5px 20px',
-                                                                }}
-                                                                onClick={
-                                                                    handleAddOption
-                                                                }
-                                                                data-tooltip-id="system-tooltip"
-                                                                data-tooltip-content={
-                                                                    'Add Option'
-                                                                }
-                                                            >
-                                                                <CirclePlus
-                                                                    strokeWidth={
-                                                                        2
-                                                                    }
-                                                                    size={12}
-                                                                />
-                                                            </button>
-                                                        </td>
-                                                    </tr>
-                                                </tfoot>
-                                            </table>
-                                        </div>
-                                    ) : null}
-
-                                    {['signature'].includes(dataField.type) ? (
-                                        <div className={styles.formItem}>
-                                            <label className={styles.fi__label}>
-                                                <select
-                                                    name="role"
-                                                    value={dataField.role}
-                                                    onChange={handleChangeForm}
-                                                >
-                                                    <option>
-                                                        No Role Associated
-                                                    </option>
-                                                    {roles.map(
-                                                        (role, roleKey) => (
-                                                            <option
-                                                                value={role.id}
-                                                                key={roleKey}
-                                                            >
-                                                                {role.label}
-                                                            </option>
-                                                        )
-                                                    )}
-                                                </select>
-                                                <span
-                                                    className={styles.fi__span}
-                                                >
-                                                    Single or Bulk Image?
-                                                </span>
-                                            </label>
-                                        </div>
-                                    ) : null}
-
-                                    {['table_radio'].includes(
-                                        dataField.type
-                                    ) ? (
-                                        <div
-                                            className={`${styles.formItem} ${styles.fwItem}`}
-                                        >
-                                            <table
-                                                className={styles.contentTable}
-                                            >
-                                                <thead
-                                                    className={
-                                                        styles.gridHeaders
-                                                    }
-                                                >
-                                                    <tr>
-                                                        <th
-                                                            style={{
-                                                                width: '450px',
-                                                            }}
-                                                        >
-                                                            Row Label
-                                                        </th>
-                                                        <th></th>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {dataField.rows?.length >
-                                                    0 ? (
-                                                        dataField.rows.map(
-                                                            (row, rowKey) => (
-                                                                <tr
-                                                                    key={`row-${rowKey}`}
-                                                                >
-                                                                    <td>
-                                                                        {
-                                                                            row.label
-                                                                        }
-                                                                    </td>
-                                                                    <td
-                                                                        style={{
-                                                                            textAlign:
-                                                                                'center',
-                                                                        }}
-                                                                    >
-                                                                        <button
-                                                                            className={
-                                                                                styles.btn
-                                                                            }
-                                                                            style={{
-                                                                                padding:
-                                                                                    '5px 20px',
-                                                                            }}
-                                                                            onClick={
-                                                                                handleDeleteRowOption
-                                                                            }
-                                                                            data-counter={
-                                                                                rowKey
-                                                                            }
-                                                                            data-tooltip-id="system-tooltip"
-                                                                            data-tooltip-content={
-                                                                                'Delete Option'
-                                                                            }
-                                                                        >
-                                                                            <TrashCan
-                                                                                strokeWidth={
-                                                                                    2
-                                                                                }
-                                                                                size={
-                                                                                    12
-                                                                                }
-                                                                            />
-                                                                        </button>
-                                                                    </td>
-                                                                </tr>
-                                                            )
-                                                        )
-                                                    ) : (
-                                                        <tr>
-                                                            <td colSpan="2">
-                                                                No entry have
-                                                                been added.
-                                                            </td>
-                                                        </tr>
-                                                    )}
-                                                </tbody>
-                                                <tfoot>
-                                                    <tr>
-                                                        <td>
-                                                            <input
-                                                                type="text"
-                                                                style={{
-                                                                    padding:
-                                                                        '5px',
-                                                                }}
-                                                                name="label"
-                                                                onChange={
-                                                                    handleRowOption
-                                                                }
-                                                                value={
-                                                                    rowOption.label
-                                                                }
-                                                            />
-                                                        </td>
-                                                        <td
-                                                            style={{
-                                                                textAlign:
-                                                                    'center',
-                                                            }}
-                                                        >
-                                                            <button
-                                                                className={
-                                                                    styles.btn
-                                                                }
-                                                                style={{
-                                                                    padding:
-                                                                        '5px 20px',
-                                                                }}
-                                                                onClick={
-                                                                    handleAddRowOption
-                                                                }
-                                                                data-tooltip-id="system-tooltip"
-                                                                data-tooltip-content={
-                                                                    'Add Option'
-                                                                }
-                                                            >
-                                                                <CirclePlus
-                                                                    strokeWidth={
-                                                                        2
-                                                                    }
-                                                                    size={12}
-                                                                />
-                                                            </button>
-                                                        </td>
-                                                    </tr>
-                                                </tfoot>
-                                            </table>
-                                        </div>
-                                    ) : null}
-
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                    >
-                                        <button
-                                            className={`${styles.btn}`}
-                                            onClick={handleSaveField}
-                                        >
-                                            Save
-                                        </button>
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Popup>
-
-            <Popup
-                open={modalFormShow}
-                onClose={handleCloseModalForm}
-                closeOnDocumentClick={false}
-            >
-                <div className={styles.modalwrap}>
-                    <div className={styles.modal}>
-                        <div className={styles.modal__header}>
-                            <h1>Update Form Detail</h1>
-                            <button
-                                className={styles.modal__close}
-                                onClick={handleCloseModalForm}
-                            >
-                                <CircleX strokeWidth={1} size={24} />
-                            </button>
-                        </div>
-                        <div className={styles.modal__content}>
-                            <div className={styles.formcontainer}>
-                                <form className={styles.modalForm}>
-                                    <div className={styles.formItem}>
-                                        <label className={styles.fi__label}>
-                                            <input
-                                                type="text"
-                                                name="label"
-                                                value={
-                                                    data.label ? data.label : ''
-                                                }
-                                                onChange={handleChange}
-                                            />
-                                            <span className={styles.fi__span}>
-                                                Label *
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                    >
-                                        <button
-                                            className={`${styles.btn}`}
-                                            onClick={handleSubmit}
-                                        >
-                                            Save
-                                        </button>
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Popup>
-        </div>
-    );
-}
-
-export default GenericFormBuilder;