Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2865 | Rev 3697 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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