240 lines
10 KiB
JavaScript
240 lines
10 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import { request } from "@/services/response";
|
|
import { formatToman } from "@/lib/money";
|
|
import Cookies from "js-cookie";
|
|
import Layout from "@/components/layout";
|
|
|
|
export default function PaymentDetailsPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const [payment, setPayment] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [paying, setPaying] = useState(false);
|
|
|
|
const handleRetryPayment = () => {
|
|
if (!payment?.appointment_uuid) return;
|
|
setPaying(true);
|
|
// بدون XHR: ریدایرکت خالص به entry واحد پرداخت در بکاند.
|
|
const apiBase = process.env.NEXT_PUBLIC_API_URL;
|
|
const gateway = payment.gateway || "mellat";
|
|
const ret = encodeURIComponent(`${window.location.origin}/payment/result`);
|
|
window.location.href =
|
|
`${apiBase}/api/v1/payment/order/${payment.appointment_uuid}` +
|
|
`?gateway=${encodeURIComponent(gateway)}&return=${ret}`;
|
|
};
|
|
|
|
useEffect(() => {
|
|
// بررسی لاگین بودن کاربر
|
|
const userInfo = Cookies.get("userInfo");
|
|
if (!userInfo) {
|
|
router.push(`/login?redirect=${encodeURIComponent(pathname)}`);
|
|
return;
|
|
}
|
|
|
|
const fetchPaymentDetails = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await request.getPayment(params.uuid);
|
|
// سازگار با پاسخ flat (جدید) و double-nested (قدیمی)
|
|
setPayment(response?.data?.data ?? response?.data ?? null);
|
|
} catch (err) {
|
|
setError("خطا در دریافت اطلاعات پرداخت");
|
|
console.error("Payment fetch error:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (params.uuid) {
|
|
fetchPaymentDetails();
|
|
}
|
|
}, [params.uuid, router, pathname]);
|
|
|
|
// پس از دیدن جزئیاتِ پرداختِ موفق، خودکار به تاریخچهٔ نوبتها (تب تأییدشده) برو.
|
|
useEffect(() => {
|
|
const isSuccess = searchParams.get("status") === "success" || payment?.status === "success";
|
|
if (isSuccess) {
|
|
const t = setTimeout(() => router.push("/dashboard?sidebar=1"), 4000);
|
|
return () => clearTimeout(t);
|
|
}
|
|
}, [payment, searchParams, router]);
|
|
|
|
const getStatusLabel = (status) => {
|
|
const statusMap = {
|
|
pending: "در انتظار پرداخت",
|
|
success: "پرداخت موفق",
|
|
failed: "پرداخت ناموفق",
|
|
canceled: "پرداخت لغو شد",
|
|
refunded: "مسترد شده",
|
|
};
|
|
return statusMap[status] || status;
|
|
};
|
|
|
|
const getStatusColor = (status) => {
|
|
const colorMap = {
|
|
pending: "text-yellow-600 bg-yellow-50",
|
|
success: "text-green-600 bg-green-50",
|
|
failed: "text-red-600 bg-red-50",
|
|
canceled: "text-red-600 bg-red-50",
|
|
refunded: "text-gray-600 bg-gray-50",
|
|
};
|
|
return colorMap[status] || "text-gray-600 bg-gray-50";
|
|
};
|
|
|
|
const getPaymentMethodLabel = (method) => {
|
|
const methodMap = {
|
|
mellat: "بانک ملت",
|
|
sep: "سامان (سپ)",
|
|
mock: "درگاه آزمایشی",
|
|
};
|
|
return methodMap[method] || method;
|
|
};
|
|
|
|
const formatDate = (timestamp) => {
|
|
const date = new Date(parseInt(timestamp) * 1000);
|
|
return new Intl.DateTimeFormat("fa-IR", {
|
|
timeZone: "Asia/Tehran",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}).format(date);
|
|
};
|
|
|
|
const formatAmount = (rials) => formatToman(rials);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Layout>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-12 h-12 border-4 border-[#5559CE] border-t-transparent rounded-full animate-spin"></div>
|
|
<p className="text-[#3B3B3B] text-[16px]">در حال بارگذاری...</p>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<Layout>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
|
|
<p className="text-red-600 text-center">{error}</p>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (!payment) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="container mx-auto px-4 py-8 max-w-4xl mt-20 md:mt-24">
|
|
<div className="bg-white rounded-lg shadow-md border border-gray-200 p-6 md:p-8">
|
|
<h1 className="text-2xl md:text-3xl font-bold text-[#3B3B3B] mb-6">
|
|
جزئیات پرداخت
|
|
</h1>
|
|
|
|
<div className="space-y-4">
|
|
{/* وضعیت پرداخت */}
|
|
<div className="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span className="text-[#616161] font-medium">وضعیت:</span>
|
|
<span
|
|
className={`px-4 py-2 rounded-full font-bold ${getStatusColor( payment.status )}`}
|
|
>
|
|
{getStatusLabel(payment.status)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* مبلغ */}
|
|
<div className="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span className="text-[#616161] font-medium">مبلغ:</span>
|
|
<span className="text-[#3B3B3B] font-bold text-lg">
|
|
{formatAmount(payment.amount_rials)} تومان
|
|
</span>
|
|
</div>
|
|
|
|
{/* روش پرداخت */}
|
|
<div className="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span className="text-[#616161] font-medium">روش پرداخت:</span>
|
|
<span className="text-[#3B3B3B] font-bold">
|
|
{getPaymentMethodLabel(payment.gateway)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* شناسه پرداخت */}
|
|
<div className="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span className="text-[#616161] font-medium">شناسه پرداخت:</span>
|
|
<span className="text-[#3B3B3B] font-mono text-sm">
|
|
{payment.uuid}
|
|
</span>
|
|
</div>
|
|
|
|
{/* شماره مرجع */}
|
|
{payment.reference_id && (
|
|
<div className="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span className="text-[#616161] font-medium">شماره مرجع:</span>
|
|
<span className="text-[#3B3B3B] font-bold">
|
|
{payment.reference_id}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* تاریخ ایجاد */}
|
|
<div className="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span className="text-[#616161] font-medium">تاریخ ایجاد:</span>
|
|
<span className="text-[#3B3B3B]">
|
|
{formatDate(payment.created_at)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* نوع سرویس */}
|
|
<div className="flex justify-between items-center py-3">
|
|
<span className="text-[#616161] font-medium">نوع سرویس:</span>
|
|
<span className="text-[#3B3B3B] font-bold">
|
|
{payment.type === "appointment" ? "رزرو نوبت" : payment.type}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* دکمهها */}
|
|
<div className="mt-8 flex gap-4">
|
|
{["pending", "failed", "canceled"].includes(payment.status) &&
|
|
payment.appointment_uuid ? (
|
|
<button
|
|
onClick={handleRetryPayment}
|
|
disabled={paying}
|
|
className="flex-1 bg-[#5559CE] hover:bg-[#4448b3] disabled:opacity-60 text-white font-bold py-3 px-6 rounded-lg transition-colors"
|
|
>
|
|
{paying
|
|
? "در حال انتقال به درگاه..."
|
|
: payment.status === "pending"
|
|
? "پرداخت"
|
|
: "تلاش مجدد"}
|
|
</button>
|
|
) : null}
|
|
<button
|
|
onClick={() => router.push("/dashboard?sidebar=1")}
|
|
className="flex-1 bg-[#5559CE] hover:bg-[#4448b3] text-white font-bold py-3 px-6 rounded-lg transition-colors"
|
|
>
|
|
بازگشت به نوبت های من
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|