Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3590 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4372 stevensc 1 
/* eslint-disable react/prop-types */
2 
import { axios } from "../../../utils";
1 www 3 
import React, { useEffect, useRef, useState } from "react";
4 
import { useForm } from "react-hook-form";
5 
import { useDispatch } from "react-redux";
6 
import { addNotification } from "../../../redux/notification/notification.actions";
7 
import BootstrapModal from "../../../shared/bootstrapModal/BootstrapModal";
8 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
9 
import Spinner from "../../../shared/loading-spinner/Spinner";
10 
import MaterialTable from "../../../shared/materialTable/MaterialTable";
11 
 
12 
const TransactionTableColumns = [
13 
  {
14 
    field: "type",
15 
    headerName: "Tipo",
16 
  },
17 
  {
18 
    field: "amount",
19 
    headerName: "Monto",
20 
  },
21 
  {
22 
    field: "status",
23 
    headerName: "Estado",
24 
  },
25 
  {
26 
    field: "description",
27 
    headerName: "Descripción",
28 
  },
29 
  {
30 
    field: "updated_on",
31 
    headerName: "Fecha",
32 
  },
33 
  {
34 
    field: "provider",
35 
    headerName: "Proveedor",
36 
  },
37 
];
38 
 
4372 stevensc 39 
const Transactions = ({ routeTransactions, amounts, balance, routeAddFunds }) => {
40 
 
41 
  const formEl = useRef();
1 www 42 
  const dispatch = useDispatch();
43 
  const { register, handleSubmit, errors } = useForm();
44 
 
45 
  const [transactionData, setTransactionData] = useState({});
46 
  const [transactionModalOpen, setTransactionModalOpen] = useState(false);
47 
  const [modalLoading, setModalLoading] = useState(false);
48 
 
49 
  useEffect(async () => {
50 
    const resData = (await axios.get(routeTransactions)).data;
51 
    if (!resData.success) {
52 
      return dispatch(
53 
        addNotification({
54 
          style: "danger",
55 
          msg: "Ha ocurrido un error, por favor recargue la pagina",
56 
        })
57 
      );
58 
    }
59 
    setTransactionData(resData.data);
60 
  }, []);
61 
 
62 
  const onSubmit = async (data) => {
63 
    setModalLoading(true);
64 
    const formData = new FormData();
65 
    Object.entries(data).map(([key, value]) => {
66 
      formData.append(key, value);
67 
    });
68 
    const resData = (await axios.post(routeAddFunds, formData)).data;
69 
    if (!resData.success) {
70 
      const errorMessage =
71 
        typeof resData.data === "string"
72 
          ? resData.data
73 
          : "Ha ocurrido un error, Por favor intente mas tarde";
74 
      dispatch(
75 
        addNotification({
76 
          style: "danger",
77 
          msg: errorMessage,
78 
        })
79 
      );
80 
    }
81 
    const paypalRoute = resData.data;
82 
    window.location.replace(paypalRoute);
83 
    setModalLoading(false);
84 
  };
85 
 
86 
  return (
4372 stevensc 87 
    <>
1 www 88 
      <div className="acc-setting">
89 
        <h3>Transacciones</h3>
4372 stevensc 90 
        <div className="cp-field">
1 www 91 
          <h5 id="location-formatted-address">Balance (USD)</h5>
92 
          <div className="cpp-fiel">
93 
            <input type="text" readOnly value={balance} />
94 
          </div>
95 
          <div className="cpp-fiel">
96 
            <input
97 
              type="button"
98 
              id="btn-add-fund"
99 
              value="Agregar fondos"
100 
              onClick={() => setTransactionModalOpen(true)}
101 
            />
102 
          </div>
103 
        </div>
4372 stevensc 104 
        <div className="cp-field">
1 www 105 
          <MaterialTable
106 
            columns={TransactionTableColumns}
107 
            rows={transactionData.items}
108 
            count={transactionData.total}
109 
          />
110 
        </div>
111 
      </div>
112 
      <BootstrapModal
113 
        show={transactionModalOpen}
114 
        title="Agregar Fondos"
115 
        onClose={() => setTransactionModalOpen(false)}
4372 stevensc 116 
        onAccept={() => formEl.current.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }))}
1 www 117 
      >
4372 stevensc 118 
        {modalLoading && <Spinner />}
119 
        <form onSubmit={handleSubmit(onSubmit)} ref={formEl}>
120 
          <div className="form-group">
121 
            <input
122 
              type="text"
123 
              name="description"
124 
              id="description"
125 
              placeholder="Descripción"
126 
              ref={register({
127 
                required: "Por favor ingrese una descripción",
128 
                maxLength: {
129 
                  value: 50,
130 
                  message: "Máximo 50 caracteres",
131 
                },
132 
              })}
133 
            ></input>
134 
            <FormErrorFeedback>
135 
              {errors?.description?.message}
136 
            </FormErrorFeedback>
137 
            <select
138 
              name="amount"
139 
              id="amount"
140 
              ref={register({
141 
                required: "Por favor eliga un monto",
142 
              })}
143 
              defaultValue=""
144 
            >
145 
              <option value="">Monto</option>
146 
              {Object.entries(amounts).map(([key, value]) => (
147 
                <option value={key} key={key}>
148 
                  {value}
149 
                </option>
150 
              ))}
151 
              <FormErrorFeedback>{errors?.amount?.message}</FormErrorFeedback>
152 
            </select>
153 
          </div>
154 
        </form>
1 www 155 
      </BootstrapModal>
4372 stevensc 156 
    </>
1 www 157 
  );
158 
};
159 
 
160 
export default Transactions;