121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
import { useNavigate } from "@/components/Common/useNavigate";
|
|
import NoData from "@/components/EmptyStates/NoData";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
getIsShowBankDetails,
|
|
hideBankDetails,
|
|
} from "@/redux/reducer/globalStateSlice";
|
|
import { t } from "@/utils";
|
|
import { createPaymentIntentApi } from "@/utils/api";
|
|
import { useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { toast } from "sonner";
|
|
|
|
const BankDetailsModal = ({ packageId, bankDetails }) => {
|
|
const { navigate } = useNavigate();
|
|
const IsShowBankDetails = useSelector(getIsShowBankDetails);
|
|
const IsBankDetails = bankDetails && Object.keys(bankDetails).length > 0;
|
|
const [IsConfirmingPayment, setIsConfirmingPayment] = useState(false);
|
|
|
|
const handleConfirmPayment = async () => {
|
|
try {
|
|
setIsConfirmingPayment(true);
|
|
const res = await createPaymentIntentApi.createIntent({
|
|
package_id: packageId,
|
|
payment_method: "bankTransfer",
|
|
});
|
|
if (res?.data?.error === false) {
|
|
toast.success(t("paymentConfirmed"));
|
|
hideBankDetails();
|
|
navigate("/transactions");
|
|
} else {
|
|
toast.error(res?.data?.message);
|
|
}
|
|
} catch (error) {
|
|
console.log("Failed to confirm Payment", error);
|
|
} finally {
|
|
setIsConfirmingPayment(false);
|
|
}
|
|
};
|
|
return (
|
|
<Dialog open={IsShowBankDetails} onOpenChange={hideBankDetails}>
|
|
<DialogContent onInteractOutside={(e) => e.preventDefault()}>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-semibold">
|
|
{t("bankAccountDetails")}
|
|
</DialogTitle>
|
|
<DialogDescription className="!text-base">
|
|
{t("pleaseTransferAmount")}
|
|
</DialogDescription>
|
|
{IsBankDetails ? (
|
|
<>
|
|
<div className="flex flex-col gap-3 !mt-8">
|
|
<div className="flex items-center gap-2">
|
|
<p className="w-[35%] opacity-60 font-medium text-base">
|
|
{t("accountHolder")}
|
|
</p>
|
|
<p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
|
|
{bankDetails?.account_holder_name}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<p className="w-[35%] opacity-60 font-medium text-base">
|
|
{t("accountNumber")}
|
|
</p>
|
|
<p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
|
|
{bankDetails?.account_number}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<p className="w-[35%] opacity-60 font-medium text-base">
|
|
{t("bankName")}
|
|
</p>
|
|
<p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
|
|
{bankDetails?.bank_name}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<p className="w-[35%] opacity-60 font-medium text-base">
|
|
SWIFT/IFSC Code
|
|
</p>
|
|
<p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
|
|
{bankDetails?.ifsc_swift_code}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center flex-wrap gap-4 !mt-8">
|
|
<button
|
|
className="px-4 py-2 border flex-1 rounded whitespace-nowrap"
|
|
onClick={hideBankDetails}
|
|
>
|
|
{t("cancel")}
|
|
</button>
|
|
<button
|
|
className="px-4 py-2 bg-primary flex-1 text-white rounded whitespace-nowrap disabled:opacity-66"
|
|
onClick={handleConfirmPayment}
|
|
disabled={IsConfirmingPayment}
|
|
>
|
|
{IsConfirmingPayment
|
|
? t("confirmingPayment")
|
|
: t("confirmPayment")}
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<NoData name={t("bankAccountDetails")} />
|
|
)}
|
|
</DialogHeader>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default BankDetailsModal;
|