145 lines
4.0 KiB
Markdown
145 lines
4.0 KiB
Markdown
# Booking & Payment
|
||
|
||
## Function 1: BookingPage – Booking Form
|
||
|
||
### Objective
|
||
Build a complete booking form with information, data validation, calculate total by number of days, and send booking request.
|
||
|
||
#### Detailed Tasks
|
||
1. Route:
|
||
```
|
||
/booking/:roomId
|
||
```
|
||
2. When user clicks "Book Now" on RoomDetailPage → navigate to BookingPage.
|
||
3. Display:
|
||
- Room image, room name, price/night
|
||
- User information (auto-fill if logged in)
|
||
- Form:
|
||
+ Check-in / check-out date (DateRangePicker)
|
||
+ Number of guests
|
||
+ Notes
|
||
+ Payment method:
|
||
1. Pay at hotel
|
||
2. Bank transfer (display QR + instructions)
|
||
4. Validate using Yup + React Hook Form:
|
||
- Check-in < Check-out
|
||
- Dates not empty
|
||
- Payment method selected
|
||
5. Calculate total:
|
||
```
|
||
total = room.price * (number of nights)
|
||
```
|
||
6. "Book" button:
|
||
- Loading spinner
|
||
- Disable when submitting
|
||
|
||
7. If not logged in → redirect to /login.
|
||
|
||
---
|
||
|
||
## Function 2: Booking API (Backend communication)
|
||
|
||
### Objective
|
||
Connect and handle APIs related to booking.
|
||
|
||
#### Detailed Tasks
|
||
🔧 Endpoints:
|
||
```
|
||
POST /api/bookings → Create booking
|
||
GET /api/bookings/me → Get user's booking list
|
||
PATCH /api/bookings/:id/cancel → Cancel booking
|
||
GET /api/bookings/:id → Booking details
|
||
GET /api/bookings/check/:bookingNumber → Look up booking
|
||
```
|
||
🔄 Processing flow:
|
||
1. Frontend calls POST /api/bookings
|
||
2. Backend checks room availability:
|
||
```
|
||
GET /api/rooms/available?roomId=...&from=...&to=...
|
||
```
|
||
3. If available → create booking
|
||
- If schedule conflict → return 409 "Room already booked during this time"
|
||
4. Send booking confirmation email (if needed)
|
||
5. Return booking data to display /booking-success/:id.
|
||
|
||
---
|
||
|
||
## Function 3: BookingSuccess – Page after booking
|
||
|
||
### Objective
|
||
Display successful booking result and next actions.
|
||
|
||
#### Detailed Tasks
|
||
1. Route: /booking-success/:id
|
||
2. Call GET /api/bookings/:id → display details
|
||
3. Buttons:
|
||
- "View my bookings" → /my-bookings
|
||
- "Go to home" → /
|
||
4. If payment method is Bank transfer:
|
||
+ Display bank QR code
|
||
+ Allow upload confirmation image
|
||
+ Call POST /api/notify/payment when user confirms transfer.
|
||
|
||
---
|
||
|
||
## Function 4: MyBookingsPage – User's booking list
|
||
|
||
### Objective
|
||
Display all user's bookings + allow canceling bookings.
|
||
|
||
#### Detailed Tasks
|
||
1. Route: /my-bookings
|
||
2. API: GET /api/bookings/me
|
||
3. Display booking list:
|
||
- Room, check-in/check-out dates, total amount
|
||
- Status:
|
||
🟡 pending
|
||
🟢 confirmed
|
||
🔴 cancelled
|
||
4. "Cancel booking" button:
|
||
1. window.confirm("Are you sure you want to cancel?")
|
||
2. Call PATCH /api/bookings/:id/cancel (or DELETE /api/bookings/:id depending on implementation)
|
||
3. Cancel logic:
|
||
- Keep 20% of order value
|
||
- Refund remaining 80% to user
|
||
- Update room status to available
|
||
4. Display toast "Booking cancelled successfully"
|
||
5. Allow viewing booking details:
|
||
- Route: /bookings/:id
|
||
- Call GET /api/bookings/:id
|
||
- Display room details, user information, total amount, status.
|
||
|
||
---
|
||
|
||
## Function 5: Payment (Simulated Payment)
|
||
|
||
### Objective
|
||
Allow users to select payment method and confirm payment.
|
||
|
||
#### Detailed Tasks
|
||
- Payment methods:
|
||
1. Pay at hotel
|
||
- Booking created with status = "pending"
|
||
2. Bank transfer
|
||
- Display bank QR code (static or from API)
|
||
- Upload receipt image (image upload)
|
||
- After upload → call POST /api/notify/payment send confirmation email
|
||
- Update status = "confirmed"
|
||
|
||
---
|
||
|
||
## Function 6: UX & Performance
|
||
|
||
### Objective
|
||
Improve user experience and intuitiveness.
|
||
|
||
#### Detailed Tasks
|
||
1. Toasts (react-hot-toast or sonner)
|
||
2. Clear loading spinner
|
||
3. DateRangePicker for date selection
|
||
4. Form fully validated (and detailed error messages)
|
||
5. Focus first input
|
||
6. Auto redirect when booking succeeds / canceling booking
|
||
|
||
---
|