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;