refactor: enhance payment handling by adding frontend_address to payment payload and implement PaymentDetailsPage component
This commit is contained in:
hamed
@@ -0,0 +1,231 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { request } from "@/services/response";
|
||||
import Cookies from "js-cookie";
|
||||
import Layout from "@/components/layout";
|
||||
|
||||
export default function PaymentDetailsPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const [payment, setPayment] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// بررسی لاگین بودن کاربر
|
||||
const userInfo = Cookies.get("userInfo");
|
||||
if (!userInfo) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchPaymentDetails = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await request.getPayment(params.uuid);
|
||||
setPayment(response);
|
||||
} catch (err) {
|
||||
setError("خطا در دریافت اطلاعات پرداخت");
|
||||
console.error("Payment fetch error:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (params.uuid) {
|
||||
fetchPaymentDetails();
|
||||
}
|
||||
}, [params.uuid, router]);
|
||||
|
||||
const getStatusLabel = (status) => {
|
||||
const statusMap = {
|
||||
pending: "در انتظار پرداخت",
|
||||
completed: "پرداخت موفق",
|
||||
failed: "پرداخت ناموفق",
|
||||
canceled: "لغو شده",
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
pending: "text-yellow-600 bg-yellow-50",
|
||||
completed: "text-green-600 bg-green-50",
|
||||
failed: "text-red-600 bg-red-50",
|
||||
canceled: "text-gray-600 bg-gray-50",
|
||||
};
|
||||
return colorMap[status] || "text-gray-600 bg-gray-50";
|
||||
};
|
||||
|
||||
const getPaymentMethodLabel = (method) => {
|
||||
const methodMap = {
|
||||
mellat: "بانک ملت",
|
||||
saman: "سامان کیش",
|
||||
};
|
||||
return methodMap[method] || method;
|
||||
};
|
||||
|
||||
const formatDate = (timestamp) => {
|
||||
const date = new Date(parseInt(timestamp) * 1000);
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
return new Intl.NumberFormat("fa-IR").format(parseInt(amount));
|
||||
};
|
||||
|
||||
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)} تومان
|
||||
</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.payment_method)}
|
||||
</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)}
|
||||
</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.changed)}
|
||||
</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.bundle === "appointment" ? "رزرو نوبت" : payment.bundle}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* دکمهها */}
|
||||
<div className="mt-8 flex gap-4">
|
||||
{payment.status === "pending" ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
const paymentUrl = `${process.env.NEXT_PUBLIC_API_URL}/payment/${payment.uuid}`;
|
||||
window.location.href = paymentUrl;
|
||||
}}
|
||||
className="flex-1 bg-[#5559CE] hover:bg-[#4448b3] text-white font-bold py-3 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
پرداخت
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="flex-1 bg-gray-200 hover:bg-gray-300 text-[#3B3B3B] font-bold py-3 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
بروزرسانی وضعیت
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
payment.frontend_address && (
|
||||
<button
|
||||
onClick={() => router.push(payment.frontend_address)}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -46,7 +46,8 @@ function Paying({ setStep, appointmentId }) {
|
||||
const paymentPayload = {
|
||||
payment_method: selectedBank,
|
||||
bundle: "appointment",
|
||||
entity_reference_id: appointmentId
|
||||
entity_reference_id: appointmentId,
|
||||
frontend_address: typeof window !== 'undefined' ? window.location.origin : ''
|
||||
};
|
||||
|
||||
const response = await request.postPayment(paymentPayload);
|
||||
|
||||
@@ -68,6 +68,7 @@ export const request = {
|
||||
),
|
||||
postAppointment: (data) => api.post(`api/v1/appointment`, data, { requireAuth: true }),
|
||||
postPayment: (data) => api.post(`api/v1/payment`, data, { requireAuth: true }),
|
||||
getPayment: (uuid) => api.get(`api/v1/payment/${uuid}`, { requireAuth: true }),
|
||||
postDoctor: (data) => api.post("api/v1/doctor", data),
|
||||
postImageUpload: (data) =>
|
||||
api.post("file/upload/clinic_pro/doctor/field_image", data, {
|
||||
|
||||
Reference in New Issue
Block a user