fix(appointment): correct payment flow and account-info prefill
- Booking response is double-nested: read appointment uuid/expires_at from res.data.data so the payment countdown and gateway redirect actually fire. - Payment result page (/payment/[uuid]): unwrap res.data.data, use real backend fields (amount_rials, gateway, created_at, type) and statuses (pending/success/failed/canceled/refunded); the "pay" button now re-initiates via postAppointmentPayment instead of building a URL on the API origin. - Add /payment/result interstitial that reads payment_uuid from the gateway callback and forwards to /payment/[uuid]. - Prefill account info correctly in the booking form: name from profile.label, insurances from *_id, gender as string, national_code editable unless approved. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
+38
-33
@@ -12,6 +12,27 @@ export default function PaymentDetailsPage() {
|
||||
const [payment, setPayment] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [paying, setPaying] = useState(false);
|
||||
|
||||
const handleRetryPayment = async () => {
|
||||
if (!payment?.appointment_uuid) return;
|
||||
setPaying(true);
|
||||
try {
|
||||
const res = await request.postAppointmentPayment({
|
||||
appointment_uuid: payment.appointment_uuid,
|
||||
gateway: payment.gateway || "mellat",
|
||||
frontend_address: `${window.location.origin}/payment/result`,
|
||||
});
|
||||
const redirectUrl = res?.data?.redirect_url;
|
||||
if (redirectUrl) {
|
||||
window.location.href = redirectUrl;
|
||||
} else {
|
||||
setPaying(false);
|
||||
}
|
||||
} catch {
|
||||
setPaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// بررسی لاگین بودن کاربر
|
||||
@@ -25,7 +46,7 @@ export default function PaymentDetailsPage() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await request.getPayment(params.uuid);
|
||||
setPayment(response);
|
||||
setPayment(response?.data?.data ?? null);
|
||||
} catch (err) {
|
||||
setError("خطا در دریافت اطلاعات پرداخت");
|
||||
console.error("Payment fetch error:", err);
|
||||
@@ -42,9 +63,9 @@ export default function PaymentDetailsPage() {
|
||||
const getStatusLabel = (status) => {
|
||||
const statusMap = {
|
||||
pending: "در انتظار پرداخت",
|
||||
completed: "پرداخت موفق",
|
||||
success: "پرداخت موفق",
|
||||
failed: "پرداخت ناموفق",
|
||||
canceled: "لغو شده",
|
||||
refunded: "مسترد شده",
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
};
|
||||
@@ -52,9 +73,9 @@ export default function PaymentDetailsPage() {
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
pending: "text-yellow-600 bg-yellow-50",
|
||||
completed: "text-green-600 bg-green-50",
|
||||
success: "text-green-600 bg-green-50",
|
||||
failed: "text-red-600 bg-red-50",
|
||||
canceled: "text-gray-600 bg-gray-50",
|
||||
refunded: "text-gray-600 bg-gray-50",
|
||||
};
|
||||
return colorMap[status] || "text-gray-600 bg-gray-50";
|
||||
};
|
||||
@@ -62,7 +83,8 @@ export default function PaymentDetailsPage() {
|
||||
const getPaymentMethodLabel = (method) => {
|
||||
const methodMap = {
|
||||
mellat: "بانک ملت",
|
||||
saman: "سامان کیش",
|
||||
sep: "سامان (سپ)",
|
||||
mock: "درگاه آزمایشی",
|
||||
};
|
||||
return methodMap[method] || method;
|
||||
};
|
||||
@@ -78,8 +100,8 @@ export default function PaymentDetailsPage() {
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const formatAmount = (amount) => {
|
||||
return new Intl.NumberFormat("fa-IR").format(parseInt(amount));
|
||||
const formatAmount = (rials) => {
|
||||
return new Intl.NumberFormat("fa-IR").format(Math.round(parseInt(rials) / 10));
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
@@ -136,7 +158,7 @@ export default function PaymentDetailsPage() {
|
||||
<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)} تومان
|
||||
{formatAmount(payment.amount_rials)} تومان
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -144,7 +166,7 @@ export default function PaymentDetailsPage() {
|
||||
<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)}
|
||||
{getPaymentMethodLabel(payment.gateway)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -170,17 +192,7 @@ export default function PaymentDetailsPage() {
|
||||
<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)}
|
||||
{formatDate(payment.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -188,7 +200,7 @@ export default function PaymentDetailsPage() {
|
||||
<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}
|
||||
{payment.type === "appointment" ? "رزرو نوبت" : payment.type}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -198,18 +210,11 @@ export default function PaymentDetailsPage() {
|
||||
{payment.status === "pending" ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
try {
|
||||
const apiOrigin = new URL(process.env.NEXT_PUBLIC_API_URL).origin;
|
||||
const paymentUrl = new URL(`/payment/${payment.uuid}`, apiOrigin);
|
||||
if (paymentUrl.origin === apiOrigin) {
|
||||
window.location.href = paymentUrl.href;
|
||||
}
|
||||
} catch {}
|
||||
}}
|
||||
className="flex-1 bg-[#5559CE] hover:bg-[#4448b3] text-white font-bold py-3 px-6 rounded-lg transition-colors"
|
||||
onClick={handleRetryPayment}
|
||||
disabled={paying || !payment.appointment_uuid}
|
||||
className="flex-1 bg-[#5559CE] hover:bg-[#4448b3] disabled:opacity-60 text-white font-bold py-3 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
پرداخت
|
||||
{paying ? "در حال انتقال به درگاه..." : "پرداخت"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Layout from "@/components/layout";
|
||||
|
||||
function PaymentResultRedirect() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
const paymentUuid = searchParams.get("payment_uuid");
|
||||
if (paymentUuid) {
|
||||
router.replace(`/payment/${paymentUuid}`);
|
||||
} else {
|
||||
router.replace("/dashboard?sidebar=2");
|
||||
}
|
||||
}, [searchParams, router]);
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PaymentResultPage() {
|
||||
return (
|
||||
<Layout>
|
||||
<Suspense fallback={null}>
|
||||
<PaymentResultRedirect />
|
||||
</Suspense>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user