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 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;