307 lines
9.4 KiB
React
307 lines
9.4 KiB
React
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
|
|
import React, { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { toast } from "react-toastify";
|
|
import usersService from "../../../services/UsersService";
|
|
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
|
|
function ThePaymentText({ value }) {
|
|
return (
|
|
<div className="my-2 flex items-center gap-5">
|
|
<div className="card-details flex items-center gap-3">
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
{value.description} Card
|
|
</h1>
|
|
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
|
Bank **************{value.digits}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AmountSection({ currency, amount, country }) {
|
|
const formattedAmount = (Number(amount) / 100).toFixed(2);
|
|
return (
|
|
<div
|
|
className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
|
|
>
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
Amount({currency})
|
|
</h1>
|
|
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
{formattedAmount}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TransactionFeeSection({ currency, fee, country }) {
|
|
const formattedFee = (Number(fee) / 100).toFixed(2);
|
|
return (
|
|
<div
|
|
className={`flex items-center border-b border-gray-600 ${
|
|
country == "US" ? "gap-[2.7rem]" : "gap-4"
|
|
}`}
|
|
>
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
Transaction Fee
|
|
</h1>
|
|
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
{formattedFee}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TotalSection({ currency, amount, fee, country }) {
|
|
const total = (Number(amount) + Number(fee)) / 100;
|
|
const formattedTotal = total.toFixed(2);
|
|
return (
|
|
<div
|
|
className={`flex items-center ${
|
|
country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
|
|
}`}
|
|
>
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
Total
|
|
</h1>
|
|
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
{formattedTotal}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ConfirmAddFund({
|
|
confirmCredit,
|
|
onClose,
|
|
walletItem,
|
|
setConfirmCredit,
|
|
}) {
|
|
const __confirmData = confirmCredit?.data;
|
|
const __confirmCountry = walletItem?.country;
|
|
const __confirmCardDetails = __confirmData.card
|
|
? JSON.parse(__confirmData.card)
|
|
: "";
|
|
|
|
const apiURL = new usersService();
|
|
const navigate = useNavigate();
|
|
|
|
const [requestStatus, setRequestStatus] = useState({
|
|
message: "",
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
|
|
const config = {
|
|
public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
|
|
tx_ref: Date.now(),
|
|
currency: "NGN",
|
|
payment_options: "card,mobilemoney,ussd",
|
|
customizations: {
|
|
title: "WrenchBoard",
|
|
description: "Topup Payment",
|
|
logo: "https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg",
|
|
},
|
|
};
|
|
|
|
const fwConfig = {
|
|
...config,
|
|
text: "Proceed",
|
|
callback: (response) => {
|
|
onSuccessPayment();
|
|
closePaymentModal();
|
|
},
|
|
onClose: () => {},
|
|
};
|
|
|
|
const onSuccessPayment = () => {
|
|
setRequestStatus({ message: "", loading: true, status: false });
|
|
const reqData = { amount: __confirmData?.account, currency: "NGN" };
|
|
|
|
apiURL
|
|
.startTopUp(reqData)
|
|
.then((res) => {
|
|
if (res.data.internal_return < 0) {
|
|
setRequestStatus({
|
|
message: "Could not finish transaction",
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
toast.success("Opps! something went wrong");
|
|
} else {
|
|
setRequestStatus({
|
|
message: "Topup successful",
|
|
loading: false,
|
|
status: true,
|
|
});
|
|
toast.success("Account Topup was successful");
|
|
setTimeout(() => {
|
|
navigate("/my-wallet", { replace: true });
|
|
}, 1000);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
setRequestStatus({
|
|
message: "Opps! An Error Occured",
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
toast.success("Opps! something went wrong");
|
|
});
|
|
};
|
|
|
|
const handlePrevCard = async () => {
|
|
const { amount, credit_reference, currency } = __confirmData;
|
|
const { card_uid } = __confirmCardDetails;
|
|
|
|
const reqData = {
|
|
amount: amount * 100,
|
|
card_uid,
|
|
credit_reference,
|
|
currency,
|
|
};
|
|
|
|
try {
|
|
setConfirmCredit((prev) => ({
|
|
...prev,
|
|
show: {
|
|
acceptConfirm: { loader: true },
|
|
},
|
|
}));
|
|
const res = await apiURL.getPaidPrevCard(reqData);
|
|
const _response = res.data;
|
|
if (res.data.internal_return < 0) {
|
|
setConfirmCredit((prev) => ({
|
|
...prev,
|
|
show: {
|
|
acceptConfirm: { loader: false },
|
|
},
|
|
}));
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => {
|
|
setConfirmCredit((prev) => ({
|
|
...prev,
|
|
show: {
|
|
awaitConfirm: { loader: false, state: false },
|
|
acceptConfirm: { loader: false, state: true },
|
|
},
|
|
data: _response,
|
|
}));
|
|
}, 1500);
|
|
} catch (error) {
|
|
setConfirmCredit((prev) => ({
|
|
...prev,
|
|
show: {
|
|
acceptConfirm: { loader: false },
|
|
},
|
|
}));
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="content-wrapper w-full h-[32rem]">
|
|
<div className="w-full mb-10">
|
|
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
|
<div className="px-4 md:p-8 py-4 add-fund-info">
|
|
<div className="field w-full mb-3 min-h-[45px]">
|
|
{confirmCredit?.show?.awaitConfirm?.state && (
|
|
<div className="flex flex-col gap-2">
|
|
<AmountSection
|
|
currency={__confirmData?.currency}
|
|
amount={__confirmData?.amount}
|
|
country={__confirmCountry}
|
|
/>
|
|
<TransactionFeeSection
|
|
currency={__confirmData?.currency}
|
|
fee={__confirmData?.fee}
|
|
country={__confirmCountry}
|
|
/>
|
|
<TotalSection
|
|
currency={__confirmData?.currency}
|
|
amount={__confirmData?.amount}
|
|
fee={__confirmData?.fee}
|
|
country={__confirmCountry}
|
|
/>
|
|
{__confirmCountry === "US" && (
|
|
<div className="flex items-center gap-8">
|
|
<label
|
|
htmlFor="payment"
|
|
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
|
>
|
|
Payment Method
|
|
</label>
|
|
<span className="text-[#181c32] dark:text-white">
|
|
{__confirmCardDetails ? (
|
|
<ThePaymentText value={__confirmCardDetails} />
|
|
) : null}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div
|
|
className={`${
|
|
__confirmCountry === "US"
|
|
? "gap-[3.7rem]"
|
|
: "gap-[9.81rem]"
|
|
} flex items-center`}
|
|
>
|
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
Reference No
|
|
</h1>
|
|
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
{__confirmData?.credit_reference}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={
|
|
__confirmCountry === "US" ? "min-h-[96px]" : "min-h-[200px]"
|
|
}
|
|
></div>
|
|
<hr />
|
|
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
|
<button
|
|
className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
{__confirmCountry === "US" && (
|
|
<button
|
|
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
|
|
onClick={
|
|
__confirmData?.cardType === "prev"
|
|
? handlePrevCard
|
|
: () => console.log("Test me")
|
|
}
|
|
>
|
|
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
|
<LoadingSpinner size="6" color="sky-blue" />
|
|
) : (
|
|
"Proceed"
|
|
)}
|
|
</button>
|
|
)}
|
|
{__confirmCountry === "NG" && (
|
|
<FlutterWaveButton
|
|
{...fwConfig}
|
|
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ConfirmAddFund;
|