Users-Wrench/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import InputCom from "../../Helpers/Inputs/InputCom";
import ModalCom from "../../Helpers/ModalCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";

import usersService from "../../../services/UsersService";

function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
  const apiURL = new usersService();

  const navigate = useNavigate();

  let [requestStatus, setRequestStatus] = useState({
    message: "",
    loading: false,
    status: false,
  });
  let [pageLoading, setPageLoading] = useState(true);

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = () => {
    setRequestStatus({ message: "", loading: true, status: false });
    let reqData = {
      amount: Number(state.amount * 100),
      Fee: Number(state.fee),
      recipientid: Number(state.recipientID),
    };
    apiURL
      .sendMoney(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
          setRequestStatus({
            message: "Could not perform transaction",
            loading: false,
            status: false,
          });
          return;
        }
        setRequestStatus({
          message: "transfer successful",
          loading: false,
          status: true,
        });
        toast.success("Transfer sucessful");
        setTimeout(() => {
          navigate("/my-wallet", { replace: true });
          window.location.reload(true);
        }, 1000);
      })
      .catch((error) => {
        setRequestStatus({
          message: "Opps! something went wrong! Try Again",
          loading: false,
          status: false,
        });
      });
  };

  return (
    <ModalCom action={action} situation={situation}>
      <div className="content-wrapper w-[90%] md:w-[600px]">
        <div className="w-full">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
            <div className="px-4 md:px-8 py-4">
              <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
                {`Withdraw from ${wallet.description} Wallet : ${
                  wallet.symbol
                }${(wallet.amount * 0.01).toFixed(2)}`}
              </h2>
            </div>
            <hr />
            <div className="px-4 md:px-8 py-4 add-fund-info">
              <h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
                Confirm Withdraw to Account
              </h2>
              {/* AMOUNT */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Amount:"
                  type="text"
                  name="amount"
                  value={state?.amount || ""}
                  disable={true}
                />
              </div>

              {/* RECIPIENT ACC: */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Recipient Acc:"
                  type="text"
                  name="recipient"
                  value={state?.details.recipient || ""}
                  disable={true}
                />
              </div>

              {/* PROCESSING FEE: */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Processing Fee:"
                  type="text"
                  name="processingFee"
                  value={(state?.fee * 0.01).toFixed(2) || ""}
                  disable={true}
                />
              </div>

              {/* TOTAL */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Total"
                  type="text"
                  name="total"
                  value={(state?.total * 0.01).toFixed(2) || ""}
                  disable={true}
                />
              </div>

              {/* COMMENT/NOTE */}
              <div className="field w-full mb-3">
                <InputCom
                  fieldClass="px-6"
                  label="Comment/Note:"
                  type="text"
                  name="comment"
                  value={state?.comment || ""}
                  disable={true}
                />
              </div>
            </div>

            <hr />
            {requestStatus.message && (
              <p
                className={`text-base ${
                  requestStatus.status ? "text-green-500" : "text-red-500"
                } px-4 md:px-8 py-4`}
              >
                {requestStatus.message}
              </p>
            )}
            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
              <button
                type="button"
                onClick={action}
                className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
              >
                <span className="text-gradient">Cancel</span>
              </button>
              {requestStatus.loading ? (
                <LoadingSpinner size="8" color="sky-blue" />
              ) : (
                <button
                  onClick={handleSubmit}
                  className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
                >
                  Transfer
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </ModalCom>
  );
}

export default ConfirmNairaWithdraw;