Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';

import { useDispatch } from 'react-redux';

import { useForm } from 'react-hook-form';

import { axios } from '@utils';

import { useFetch } from '@hooks';

import { addNotification } from '@app/redux/notification/notification.actions';

import Table from '@components/table/Table';

import Modal from '@components/UI/modal/Modal';

import Input from '@components/UI/inputs/Input';

import SelectField from '@components/UI/inputs/Select';

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 = () => {

  const { data: transactions } = useFetch('/account-settings/transactions');

  const {

    data: { balance, amounts }

  } = useFetch('/account-settings');

  const [showModal, setShowModal] = useState(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={() => setShowModal(true)}

            />

          </div>

        </div>

        <div className='cp-field'>

          <Table columns={TransactionTableColumns} rows={transactions.items} />

        </div>

      </div>

      <TransactionModal show={showModal} amounts={amounts} onClose={() => setShowModal(false)} />

    </>

  );

};

const TransactionModal = ({ show, onClose, amounts = {} }) => {

  const [loading, setLoading] = useState(false);

  const dispatch = useDispatch();

  const {

    control,

    handleSubmit,

    formState: { errors }

  } = useForm();

  const amountsValues = useMemo(

    () =>

      Object.entries(amounts).map(([key, value]) => ({

        label: key,

        value

      })),

    [amounts]

  );

  const onSubmit = handleSubmit(async (sendData) => {

    setLoading(true);

    const formData = new FormData();

    Object.entries(sendData).forEach(([key, value]) => formData.append(key, value));

    const response = await axios.post('/account-settings/transactions/add-funds', formData);

    const { success, data } = response.data;

    if (!success) {

      const errorMessage =

        typeof data === 'string' ? data : 'Ha ocurrido un error, Por favor intente mas tarde';

      dispatch(

        addNotification({

          style: 'danger',

          msg: errorMessage

        })

      );

    }

    const paypalRoute = data;

    window.location.replace(paypalRoute);

    setLoading(false);

  });

  return (

    <Modal

      show={show}

      title='Agregar Fondos'

      onClose={onClose}

      onReject={onClose}

      onAccept={onSubmit}

      loading={loading}

    >

      <Input

        control={control}

        type='text'

        name='description'

        placeholder='Descripción'

        error={errors.description?.message}

        rules={{

          required: 'Por favor ingrese una descripción'

        }}

      />

      <SelectField

        name='amount'

        label='Monto'

        control={control}

        error={errors.amount?.message}

        rules={{ required: 'Por favor eliga un monto' }}

        options={amountsValues}

        defaultValue=''

      />

    </Modal>

  );

};

export default Transactions;