Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3697
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>
 - 
 
68 
        </div>
 - 
 
69 
 
 - 
 
70 
        <div className="cp-field">
 67 
          </div>
71 
          <Table columns={TransactionTableColumns} rows={transactions.items} />
 - 
 
72 
        </div>
 68 
        </div>
73 
      </div>
 69 
 
74 
      <TransactionModal
 70 
        <div className='cp-field'>
Línea 75... Línea 71...
75 
        show={showModal}
 71 
          <Table columns={TransactionTableColumns} rows={transactions.items} />
Línea 85... Línea 81...
85 
  const dispatch = useDispatch();
 81 
  const dispatch = useDispatch();
Línea 86... Línea 82...
86 
 
 82 
 
87 
  const {
 83 
  const {
88 
    control,
 84 
    control,
89 
    handleSubmit,
 85 
    handleSubmit,
90 
    formState: { errors },
 86 
    formState: { errors }
Línea 91... Línea 87...
91 
  } = useForm();
 87 
  } = useForm();
92 
 
 88 
 
93 
  const amountsValues = useMemo(
 89 
  const amountsValues = useMemo(
94 
    () =>
 90 
    () =>
95 
      Object.entries(amounts).map(([key, value]) => ({
 91 
      Object.entries(amounts).map(([key, value]) => ({
96 
        name: key,
 92 
        label: key,
97 
        value,
 93 
        value
98 
      })),
 94 
      })),
Línea 99... Línea 95...
99 
    [amounts]
 95 
    [amounts]
100 
  );
 96 
  );
101 
 
 97 
 
Línea 102... Línea 98...
102 
  const onSubmit = handleSubmit(async (sendData) => {
 98 
  const onSubmit = handleSubmit(async (sendData) => {
103 
    setLoading(true);
 - 
 
104 
    const formData = new FormData();
 - 
 
105 
 
 99 
    setLoading(true);
106 
    Object.entries(sendData).forEach(([key, value]) =>
 - 
 
107 
      formData.append(key, value)
 100 
    const formData = new FormData();
108 
    );
 - 
 
109 
 
 - 
 
110 
    const response = await axios.post(
 101 
 
Línea 111... Línea 102...
111 
      "/account-settings/transactions/add-funds",
 102 
    Object.entries(sendData).forEach(([key, value]) => formData.append(key, value));
112 
      formData
 103 
 
113 
    );
 - 
 
114 
    const { success, data } = response.data;
 - 
 
115 
 
 104 
    const response = await axios.post('/account-settings/transactions/add-funds', formData);
116 
    if (!success) {
 105 
    const { success, data } = response.data;
117 
      const errorMessage =
 106 
 
118 
        typeof data === "string"
 107 
    if (!success) {
119 
          ? data
 108 
      const errorMessage =
120 
          : "Ha ocurrido un error, Por favor intente mas tarde";
 109 
        typeof data === 'string' ? data : 'Ha ocurrido un error, Por favor intente mas tarde';
121 
      dispatch(
 110 
      dispatch(
122 
        addNotification({
 111 
        addNotification({
123 
          style: "danger",
 112 
          style: 'danger',
124 
          msg: errorMessage,
 113 
          msg: errorMessage
Línea 131... Línea 120...
131 
  });
 120 
  });
Línea 132... Línea 121...
132 
 
 121 
 
133 
  return (
 122 
  return (
134 
    <Modal
 123 
    <Modal
135 
      show={show}
 124 
      show={show}
136 
      title="Agregar Fondos"
 125 
      title='Agregar Fondos'
137 
      onClose={onClose}
 126 
      onClose={onClose}
138 
      onReject={onClose}
 127 
      onReject={onClose}
139 
      onAccept={onSubmit}
 128 
      onAccept={onSubmit}
140 
      loading={loading}
 129 
      loading={loading}
141 
    >
 130 
    >
142 
      <Input
 131 
      <Input
143 
        control={control}
 132 
        control={control}
144 
        type="text"
 133 
        type='text'
145 
        name="description"
 134 
        name='description'
146 
        placeholder="Descripción"
 135 
        placeholder='Descripción'
147 
        error={errors.description?.message}
 136 
        error={errors.description?.message}
148 
        rules={{
 137 
        rules={{
149 
          required: "Por favor ingrese una descripción",
 138 
          required: 'Por favor ingrese una descripción'
150 
        }}
 139 
        }}
Línea 151... Línea 140...
151 
      />
 140 
      />
152 
 
 141 
 
153 
      <SelectField
 142 
      <SelectField
154 
        name="amount"
 143 
        name='amount'
155 
        label="Monto"
 144 
        label='Monto'
156 
        control={control}
 145 
        control={control}
157 
        error={errors.amount?.message}
 146 
        error={errors.amount?.message}
158 
        rules={{ required: "Por favor eliga un monto" }}
 147 
        rules={{ required: 'Por favor eliga un monto' }}
159 
        options={amountsValues}
 148 
        options={amountsValues}
160 
        defaultValue=""
 149 
        defaultValue=''
161 
      />
 150 
      />
162 
    </Modal>
 151 
    </Modal>