feat: enhance payment flow with automatic redirection to appointment history after successful payment
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user