Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import { axios } from "../../../utils";
import React, { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";
import BootstrapModal from "../../../shared/bootstrapModal/BootstrapModal";
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../shared/loading-spinner/Spinner";
import MaterialTable from "../../../shared/materialTable/MaterialTable";

const TransactionTableColumns = [
  {
    field: "type",
    headerName: "Tipo",
  },
  {
    field: "amount",
    headerName: "Monto",
  },
  {
    field: "status",
    headerName: "Estado",
  },
  {
    field: "description",
    headerName: "Descripción",
  },
  {
    field: "updated_on",
    headerName: "Fecha",
  },
  {
    field: "provider",
    headerName: "Proveedor",
  },
];

const Transactions = ({ routeTransactions, amounts, balance, routeAddFunds }) => {

  const formEl = useRef();
  const dispatch = useDispatch();
  const { register, handleSubmit, errors } = useForm();

  const [transactionData, setTransactionData] = useState({});
  const [transactionModalOpen, setTransactionModalOpen] = useState(false);
  const [modalLoading, setModalLoading] = useState(false);

  useEffect(async () => {
    const resData = (await axios.get(routeTransactions)).data;
    if (!resData.success) {
      return dispatch(
        addNotification({
          style: "danger",
          msg: "Ha ocurrido un error, por favor recargue la pagina",
        })
      );
    }
    setTransactionData(resData.data);
  }, []);

  const onSubmit = async (data) => {
    setModalLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    const resData = (await axios.post(routeAddFunds, formData)).data;
    if (!resData.success) {
      const errorMessage =
        typeof resData.data === "string"
          ? resData.data
          : "Ha ocurrido un error, Por favor intente mas tarde";
      dispatch(
        addNotification({
          style: "danger",
          msg: errorMessage,
        })
      );
    }
    const paypalRoute = resData.data;
    window.location.replace(paypalRoute);
    setModalLoading(false);
  };

  return (
    <>
      <div className="acc-setting">
        <h3>Transacciones</h3>
        <div className="cp-field">
          <h5 id="location-formatted-address">Balance (USD)</h5>
          <div className="cpp-fiel">
            <input type="text" readOnly value={balance} />
          </div>
          <div className="cpp-fiel">
            <input
              type="button"
              id="btn-add-fund"
              value="Agregar fondos"
              onClick={() => setTransactionModalOpen(true)}
            />
          </div>
        </div>
        <div className="cp-field">
          <MaterialTable
            columns={TransactionTableColumns}
            rows={transactionData.items}
            count={transactionData.total}
          />
        </div>
      </div>
      <BootstrapModal
        show={transactionModalOpen}
        title="Agregar Fondos"
        onClose={() => setTransactionModalOpen(false)}
        onAccept={() => formEl.current.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }))}
      >
        {modalLoading && <Spinner />}
        <form onSubmit={handleSubmit(onSubmit)} ref={formEl}>
          <div className="form-group">
            <input
              type="text"
              name="description"
              id="description"
              placeholder="Descripción"
              ref={register({
                required: "Por favor ingrese una descripción",
                maxLength: {
                  value: 50,
                  message: "Máximo 50 caracteres",
                },
              })}
            ></input>
            <FormErrorFeedback>
              {errors?.description?.message}
            </FormErrorFeedback>
            <select
              name="amount"
              id="amount"
              ref={register({
                required: "Por favor eliga un monto",
              })}
              defaultValue=""
            >
              <option value="">Monto</option>
              {Object.entries(amounts).map(([key, value]) => (
                <option value={key} key={key}>
                  {value}
                </option>
              ))}
              <FormErrorFeedback>{errors?.amount?.message}</FormErrorFeedback>
            </select>
          </div>
        </form>
      </BootstrapModal>
    </>
  );
};

export default Transactions;