61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
||
import InfoIcon from '../components/InfoIcon'
|
||
import SuccessIcon from '../components/SuccessIcon'
|
||
|
||
function DetailRow({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<div className="flex items-center justify-between py-2">
|
||
<span className="text-gray-500">{label}</span>
|
||
<span className="font-medium text-gray-900">{value}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// mock reservation summary — will come from the payment gateway's return params once integrated
|
||
const mockReservation = {
|
||
count: '۳ نفر',
|
||
fullName: 'هستی حصادی',
|
||
phone: '۰۹۱۲۳۴۵۶۷۸۹',
|
||
cafeName: 'بیبای',
|
||
matchName: 'برزیل-مراکش',
|
||
dateTime: 'پنجشنبه ۲۷ خرداد - ساعت ۲:۰۰',
|
||
reservationCode: 'HH-۲۸۴۷',
|
||
}
|
||
|
||
export default function PaymentSuccess() {
|
||
const navigate = useNavigate()
|
||
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
|
||
<div className="w-full max-w-sm rounded-3xl bg-white p-6 shadow-lg">
|
||
<SuccessIcon />
|
||
|
||
<h2 className="mt-6 text-right font-bold text-gray-900">جزئیات رزرو</h2>
|
||
<div className="mt-2">
|
||
<DetailRow label="تعداد" value={mockReservation.count} />
|
||
<DetailRow label="به نام" value={mockReservation.fullName} />
|
||
<DetailRow label="شماره تماس" value={mockReservation.phone} />
|
||
<DetailRow label="کافه" value={mockReservation.cafeName} />
|
||
<DetailRow label="بازی" value={mockReservation.matchName} />
|
||
<DetailRow label="تاریخ و ساعت" value={mockReservation.dateTime} />
|
||
<DetailRow label="کد رزرو" value={mockReservation.reservationCode} />
|
||
</div>
|
||
|
||
<div className="mt-4 flex items-center justify-end gap-2 rounded-2xl bg-[#ECF2F8] px-4 py-3">
|
||
<InfoIcon />
|
||
<p className="text-right text-sm text-gray-600">
|
||
کد رزرو را برای ورود نزد خود نگه دارید. اطلاعات رزرو و کد ورود تا دقایقی دیگر برای شما پیامک میشود.
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => navigate('/')}
|
||
className="mt-4 w-full rounded-2xl bg-[#223D5D] py-4 text-lg font-semibold text-white"
|
||
>
|
||
صفحه اصلی
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|