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]) => ({
        name: 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 { data: response } = await axios.post(
      '/account-settings/transactions/add-funds',
      formData
    )
    const { success, data } = response

    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