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/form/SelectField'

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, errors, handleSubmit } = 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