140 lines
4.6 KiB
JavaScript
140 lines
4.6 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import ArrowLeftB from "@/components/icons/ArrowLeftB";
|
|
import { Button, MenuItem, Select, FormControl, InputLabel } from "@mui/material";
|
|
import ButtonFixed from "./ButtonFixed";
|
|
import { request } from "@/services/response";
|
|
|
|
function Paying({ setStep, appointmentId }) {
|
|
const [selectedBank, setSelectedBank] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds
|
|
|
|
const banks = [
|
|
{ id: "mellat", title: "بانک ملت" },
|
|
{ id: "saman", title: "سامان کیش" }
|
|
];
|
|
|
|
useEffect(() => {
|
|
if (timeLeft === 0) return;
|
|
|
|
const timer = setInterval(() => {
|
|
setTimeLeft((prev) => prev - 1);
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [timeLeft]);
|
|
|
|
const formatTime = (seconds) => {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const secs = seconds % 60;
|
|
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
const handlePayment = async () => {
|
|
if (!selectedBank) {
|
|
alert("لطفا بانک خود را انتخاب کنید");
|
|
return;
|
|
}
|
|
|
|
if (!appointmentId) {
|
|
alert("شناسه نوبت یافت نشد");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
const paymentPayload = {
|
|
payment_method: selectedBank,
|
|
bundle: "appointment",
|
|
entity_reference_id: appointmentId
|
|
};
|
|
|
|
const response = await request.postPayment(paymentPayload);
|
|
|
|
// Redirect to payment gateway
|
|
if (response?.uuid) {
|
|
const paymentUrl = `${process.env.NEXT_PUBLIC_API_URL}/payment/${response.uuid}`;
|
|
window.location.href = paymentUrl;
|
|
} else {
|
|
setStep((prev) => prev + 1);
|
|
}
|
|
} catch (error) {
|
|
console.error("Payment error:", error);
|
|
alert("خطا در پرداخت");
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full lg:w-[59%]">
|
|
<div
|
|
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
|
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
|
|
>
|
|
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
|
اطلاعات پرداخت
|
|
</p>
|
|
|
|
<div className="mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
|
|
زمان باقیمانده:
|
|
</p>
|
|
<p className={`text-[14px] md:text-[16px] font-bold ${timeLeft < 60 ? 'text-red-500' : 'text-[#525252]'}`}>
|
|
{formatTime(timeLeft)}
|
|
</p>
|
|
</div>
|
|
|
|
<FormControl fullWidth className="!mb-4">
|
|
<InputLabel id="bank-select-label">انتخاب بانک</InputLabel>
|
|
<Select
|
|
labelId="bank-select-label"
|
|
value={selectedBank}
|
|
label="انتخاب بانک"
|
|
onChange={(e) => setSelectedBank(e.target.value)}
|
|
>
|
|
{banks.map((bank) => (
|
|
<MenuItem key={bank.id} value={bank.id}>
|
|
{bank.title}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
{/* <div className="flex justify-between items-center">
|
|
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
|
|
مبلغ پیش پرداخت (بیعانه) :
|
|
</p>
|
|
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
|
10،000 تومان
|
|
</p>
|
|
</div> */}
|
|
</div>
|
|
|
|
<span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>
|
|
|
|
<ButtonFixed>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
|
|
مبلغ قابل پرداخت : 10،000 تومان
|
|
</p>
|
|
<Button
|
|
className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
|
|
onClick={handlePayment}
|
|
variant="contained"
|
|
disabled={loading || !selectedBank || timeLeft === 0}
|
|
>
|
|
<p className={`${loading && "opacity-0"} text-[#EFEFEF] text-[16px] font-medium`}>
|
|
{timeLeft === 0 ? "زمان پرداخت تمام شد" : "پرداخت نهایی"}
|
|
</p>
|
|
{timeLeft > 0 && <ArrowLeftB />}
|
|
</Button>
|
|
</div>
|
|
</ButtonFixed>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Paying;
|