feat: enhance payment flow with automatic redirection to appointment history after successful payment

This commit is contained in:
hamed
2026-07-03 10:45:35 +03:30
parent 5bec4848a2
commit 90d4a871f5
4 changed files with 25 additions and 15 deletions
+16 -6
View File
@@ -1,7 +1,7 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { request } from "@/services/response"; import { request } from "@/services/response";
import { formatToman } from "@/lib/money"; import { formatToman } from "@/lib/money";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
@@ -10,6 +10,7 @@ import Layout from "@/components/layout";
export default function PaymentDetailsPage() { export default function PaymentDetailsPage() {
const params = useParams(); const params = useParams();
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams();
const [payment, setPayment] = useState(null); const [payment, setPayment] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@@ -54,6 +55,15 @@ export default function PaymentDetailsPage() {
} }
}, [params.uuid, router]); }, [params.uuid, router]);
// پس از دیدن جزئیاتِ پرداختِ موفق، خودکار به تاریخچهٔ نوبت‌ها (تب تأییدشده) برو.
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 getStatusLabel = (status) => {
const statusMap = { const statusMap = {
pending: "در انتظار پرداخت", pending: "در انتظار پرداخت",
@@ -202,7 +212,7 @@ export default function PaymentDetailsPage() {
{/* دکمه‌ها */} {/* دکمه‌ها */}
<div className="mt-8 flex gap-4"> <div className="mt-8 flex gap-4">
{["pending", "failed", "canceled"].includes(payment.status) && {["pending", "failed", "canceled"].includes(payment.status) &&
payment.appointment_uuid ? ( payment.appointment_uuid ? (
<button <button
onClick={handleRetryPayment} onClick={handleRetryPayment}
disabled={paying} disabled={paying}
@@ -211,15 +221,15 @@ export default function PaymentDetailsPage() {
{paying {paying
? "در حال انتقال به درگاه..." ? "در حال انتقال به درگاه..."
: payment.status === "pending" : payment.status === "pending"
? "پرداخت" ? "پرداخت"
: "تلاش مجدد"} : "تلاش مجدد"}
</button> </button>
) : null} ) : null}
<button <button
onClick={() => router.push("/dashboard?sidebar=2")} 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" className="flex-1 bg-[#5559CE] hover:bg-[#4448b3] text-white font-bold py-3 px-6 rounded-lg transition-colors"
> >
بازگشت به تراکنشها بازگشت به نوبت های من
</button> </button>
</div> </div>
</div> </div>
+1 -1
View File
@@ -15,7 +15,7 @@ function PaymentResultRedirect() {
const q = status ? `?status=${status}` : ""; const q = status ? `?status=${status}` : "";
router.replace(`/payment/${paymentUuid}${q}`); router.replace(`/payment/${paymentUuid}${q}`);
} else { } else {
router.replace("/dashboard?sidebar=2"); router.replace("/dashboard?sidebar=1");
} }
}, [searchParams, router]); }, [searchParams, router]);
@@ -1,22 +1,22 @@
import Tabs from "@/app/component/Tabs"; import Tabs from "@/app/component/Tabs";
const listTab = [ const listTab = [
"همه",
"در انتظار پرداخت",
"تأیید شده", "تأیید شده",
"در انتظار پرداخت",
"انجام شده", "انجام شده",
"لغو شده", "لغو شده",
"منقضی شده", "منقضی شده",
"همه",
]; ];
function Head({ status, setStatus }) { function Head({ status, setStatus }) {
const statusMap = { const statusMap = {
0: undefined, // all 0: "confirmed",
1: "pending", 1: "pending",
2: "confirmed", 2: "completed",
3: "completed", 3: "cancelled_by_user",
4: "cancelled_by_user", 4: "expired",
5: "expired", 5: undefined, // all
}; };
const handleChange = (e, value) => { const handleChange = (e, value) => {
@@ -8,7 +8,7 @@ import Cookies from "js-cookie";
import IsTurnsDetails from "./isTurnsDetails"; import IsTurnsDetails from "./isTurnsDetails";
function Turns({ user, setIsTurnsDetails, loading }) { function Turns({ user, setIsTurnsDetails, loading }) {
const [status, setStatus] = useState(undefined); const [status, setStatus] = useState("confirmed");
const [appointments, setAppointments] = useState([]); const [appointments, setAppointments] = useState([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);