feature/WNPT-176 #1
3 changed files with 81 additions and 0 deletions
|
|
@ -2,6 +2,7 @@ import { useEffect } from 'react'
|
|||
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
|
||||
import Home from './pages/Home'
|
||||
import CafeDetail from './pages/CafeDetail'
|
||||
import PaymentSuccess from './pages/PaymentSuccess'
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname } = useLocation()
|
||||
|
|
@ -20,6 +21,7 @@ export default function App() {
|
|||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/cafe/:id" element={<CafeDetail />} />
|
||||
<Route path="/payment/success" element={<PaymentSuccess />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
|
|
|
|||
4
src/assets/success_fallback.svg
Normal file
4
src/assets/success_fallback.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="119" height="119" viewBox="0 0 119 119" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M87.6843 35.2269C86.0089 35.1574 84.1303 35.9432 82.6821 37.4859L49.8018 72.5197L36.1683 59.574C33.8655 57.3862 30.7441 56.96 29.1707 58.6174L28.278 59.556C26.7046 61.2137 27.2868 64.3147 29.5952 66.4964L46.7361 82.7002C48.7203 84.5114 52.1374 83.9803 54.4546 81.5114L89.6437 44.0199C91.961 41.5509 92.2732 38.1059 90.3456 36.2964C89.6222 35.6179 88.6899 35.2685 87.6843 35.2269Z" fill="#57A327"/>
|
||||
<path d="M59.5005 0C43.7202 0 28.586 6.26823 17.4275 17.4268C6.26893 28.5857 0 43.7192 0 59.5002C0 75.2805 6.26893 90.4147 17.4275 101.573C28.586 112.731 43.7202 119 59.5005 119C75.2808 119 90.4144 112.73 101.573 101.573C112.732 90.4137 119 75.2805 119 59.5002C119 43.7199 112.732 28.5857 101.573 17.4268C90.4144 6.26893 75.2808 0 59.5005 0ZM59.5005 9.34306C72.803 9.34306 85.5608 14.6275 94.9663 24.0337C104.372 33.4403 109.657 46.197 109.657 59.5002C109.657 72.8017 104.372 85.5593 94.9663 94.9656C85.5608 104.372 72.803 109.656 59.5005 109.656C46.1984 109.656 33.4407 104.372 24.0344 94.9656C14.6282 85.5593 9.34377 72.8017 9.34377 59.5002C9.34377 46.197 14.6282 33.4403 24.0344 24.0337C33.4407 14.6275 46.1984 9.34306 59.5005 9.34306Z" fill="#57A327"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
75
src/pages/PaymentSuccess.tsx
Normal file
75
src/pages/PaymentSuccess.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { useNavigate } from 'react-router-dom'
|
||||
import InfoIcon from '../components/InfoIcon'
|
||||
|
||||
function SuccessIcon() {
|
||||
return (
|
||||
<svg className="mx-auto h-28 w-28" viewBox="0 0 119 119" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M87.6843 35.2269C86.0089 35.1574 84.1303 35.9432 82.6821 37.4859L49.8018 72.5197L36.1683 59.574C33.8655 57.3862 30.7441 56.96 29.1707 58.6174L28.278 59.556C26.7046 61.2137 27.2868 64.3147 29.5952 66.4964L46.7361 82.7002C48.7203 84.5114 52.1374 83.9803 54.4546 81.5114L89.6437 44.0199C91.961 41.5509 92.2732 38.1059 90.3456 36.2964C89.6222 35.6179 88.6899 35.2685 87.6843 35.2269Z"
|
||||
fill="#57A327"
|
||||
/>
|
||||
<path
|
||||
d="M59.5005 0C43.7202 0 28.586 6.26823 17.4275 17.4268C6.26893 28.5857 0 43.7192 0 59.5002C0 75.2805 6.26893 90.4147 17.4275 101.573C28.586 112.731 43.7202 119 59.5005 119C75.2808 119 90.4144 112.73 101.573 101.573C112.732 90.4137 119 75.2805 119 59.5002C119 43.7199 112.732 28.5857 101.573 17.4268C90.4144 6.26893 75.2808 0 59.5005 0ZM59.5005 9.34306C72.803 9.34306 85.5608 14.6275 94.9663 24.0337C104.372 33.4403 109.657 46.197 109.657 59.5002C109.657 72.8017 104.372 85.5593 94.9663 94.9656C85.5608 104.372 72.803 109.656 59.5005 109.656C46.1984 109.656 33.4407 104.372 24.0344 94.9656C14.6282 85.5593 9.34377 72.8017 9.34377 59.5002C9.34377 46.197 14.6282 33.4403 24.0344 24.0337C33.4407 14.6275 46.1984 9.34306 59.5005 9.34306Z"
|
||||
fill="#57A327"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue