Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2865 | Rev 3697 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3432 stevensc 1 
import React, { useMemo, useState } from "react";
2 
import { useDispatch } from "react-redux";
3 
import { useForm } from "react-hook-form";
2781 stevensc 4 
 
3432 stevensc 5 
import { axios } from "utils";
6 
import { useFetch } from "@hooks";
7 
import { addNotification } from "@app/redux/notification/notification.actions";
2781 stevensc 8 
 
3432 stevensc 9 
import Table from "@components/table/Table";
10 
import Modal from "@components/UI/modal/Modal";
11 
import Input from "@components/UI/inputs/Input";
12 
import SelectField from "@components/UI/inputs/Select";
2781 stevensc 13 
 
14 
const TransactionTableColumns = [
15 
  {
3432 stevensc 16 
    field: "type",
17 
    headerName: "Tipo",
2781 stevensc 18 
  },
19 
  {
3432 stevensc 20 
    field: "amount",
21 
    headerName: "Monto",
2781 stevensc 22 
  },
23 
  {
3432 stevensc 24 
    field: "status",
25 
    headerName: "Estado",
2781 stevensc 26 
  },
27 
  {
3432 stevensc 28 
    field: "description",
29 
    headerName: "Descripción",
2781 stevensc 30 
  },
31 
  {
3432 stevensc 32 
    field: "updated_on",
33 
    headerName: "Fecha",
2781 stevensc 34 
  },
35 
  {
3432 stevensc 36 
    field: "provider",
37 
    headerName: "Proveedor",
38 
  },
39 
];
2781 stevensc 40 
 
41 
const Transactions = () => {
3432 stevensc 42 
  const { data: transactions } = useFetch("/account-settings/transactions");
2781 stevensc 43 
  const {
3432 stevensc 44 
    data: { balance, amounts },
45 
  } = useFetch("/account-settings");
46 
  const [showModal, setShowModal] = useState(false);
2781 stevensc 47 
 
48 
  return (
49 
    <>
3432 stevensc 50 
      <div className="acc-setting">
2781 stevensc 51 
        <h3>Transacciones</h3>
52 
 
3432 stevensc 53 
        <div className="cp-field">
54 
          <h5 id="location-formatted-address">Balance (USD)</h5>
2781 stevensc 55 
 
3432 stevensc 56 
          <div className="cpp-fiel">
57 
            <input type="text" readOnly value={balance} />
2781 stevensc 58 
          </div>
59 
 
3432 stevensc 60 
          <div className="cpp-fiel">
2781 stevensc 61 
            <input
3432 stevensc 62 
              type="button"
63 
              id="btn-add-fund"
64 
              value="Agregar fondos"
2781 stevensc 65 
              onClick={() => setShowModal(true)}
66 
            />
67 
          </div>
68 
        </div>
69 
 
3432 stevensc 70 
        <div className="cp-field">
2781 stevensc 71 
          <Table columns={TransactionTableColumns} rows={transactions.items} />
72 
        </div>
73 
      </div>
74 
      <TransactionModal
75 
        show={showModal}
76 
        amounts={amounts}
77 
        onClose={() => setShowModal(false)}
78 
      />
79 
    </>
3432 stevensc 80 
  );
81 
};
2781 stevensc 82 
 
83 
const TransactionModal = ({ show, onClose, amounts = {} }) => {
3432 stevensc 84 
  const [loading, setLoading] = useState(false);
85 
  const dispatch = useDispatch();
2781 stevensc 86 
 
2802 stevensc 87 
  const {
88 
    control,
89 
    handleSubmit,
3432 stevensc 90 
    formState: { errors },
91 
  } = useForm();
2781 stevensc 92 
 
93 
  const amountsValues = useMemo(
94 
    () =>
95 
      Object.entries(amounts).map(([key, value]) => ({
96 
        name: key,
3432 stevensc 97 
        value,
2781 stevensc 98 
      })),
99 
    [amounts]
3432 stevensc 100 
  );
2781 stevensc 101 
 
102 
  const onSubmit = handleSubmit(async (sendData) => {
3432 stevensc 103 
    setLoading(true);
104 
    const formData = new FormData();
2781 stevensc 105 
 
106 
    Object.entries(sendData).forEach(([key, value]) =>
107 
      formData.append(key, value)
3432 stevensc 108 
    );
2781 stevensc 109 
 
3432 stevensc 110 
    const response = await axios.post(
111 
      "/account-settings/transactions/add-funds",
2781 stevensc 112 
      formData
3432 stevensc 113 
    );
114 
    const { success, data } = response.data;
2781 stevensc 115 
 
116 
    if (!success) {
117 
      const errorMessage =
3432 stevensc 118 
        typeof data === "string"
2781 stevensc 119 
          ? data
3432 stevensc 120 
          : "Ha ocurrido un error, Por favor intente mas tarde";
2781 stevensc 121 
      dispatch(
122 
        addNotification({
3432 stevensc 123 
          style: "danger",
124 
          msg: errorMessage,
2781 stevensc 125 
        })
3432 stevensc 126 
      );
2781 stevensc 127 
    }
3432 stevensc 128 
    const paypalRoute = data;
129 
    window.location.replace(paypalRoute);
130 
    setLoading(false);
131 
  });
2781 stevensc 132 
 
133 
  return (
134 
    <Modal
135 
      show={show}
3432 stevensc 136 
      title="Agregar Fondos"
2781 stevensc 137 
      onClose={onClose}
138 
      onReject={onClose}
139 
      onAccept={onSubmit}
140 
      loading={loading}
141 
    >
142 
      <Input
143 
        control={control}
3432 stevensc 144 
        type="text"
145 
        name="description"
146 
        placeholder="Descripción"
2781 stevensc 147 
        error={errors.description?.message}
148 
        rules={{
3432 stevensc 149 
          required: "Por favor ingrese una descripción",
2781 stevensc 150 
        }}
151 
      />
152 
 
153 
      <SelectField
3432 stevensc 154 
        name="amount"
155 
        label="Monto"
2781 stevensc 156 
        control={control}
157 
        error={errors.amount?.message}
3432 stevensc 158 
        rules={{ required: "Por favor eliga un monto" }}
2781 stevensc 159 
        options={amountsValues}
3432 stevensc 160 
        defaultValue=""
2781 stevensc 161 
      />
162 
    </Modal>
3432 stevensc 163 
  );
164 
};
2781 stevensc 165 
 
3432 stevensc 166 
export default Transactions;