diff --git a/src/App.tsx b/src/App.tsx index c98b041..997d872 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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() { } /> } /> + } /> ) diff --git a/src/assets/success_fallback.svg b/src/assets/success_fallback.svg new file mode 100644 index 0000000..4528e14 --- /dev/null +++ b/src/assets/success_fallback.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/PaymentSuccess.tsx b/src/pages/PaymentSuccess.tsx new file mode 100644 index 0000000..1f16916 --- /dev/null +++ b/src/pages/PaymentSuccess.tsx @@ -0,0 +1,75 @@ +import { useNavigate } from 'react-router-dom' +import InfoIcon from '../components/InfoIcon' + +function SuccessIcon() { + return ( + + + + + ) +} + +function DetailRow({ label, value }: { label: string; value: string }) { + return ( +
+ {label} + {value} +
+ ) +} + +// 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 ( +
+
+ + +

جزئیات رزرو

+
+ + + + + + + +
+ +
+ +

+ کد رزرو را برای ورود نزد خود نگه دارید. اطلاعات رزرو و کد ورود تا دقایقی دیگر برای شما پیامک می‌شود. +

+
+ + +
+
+ ) +}