Hotel-Booking/docs/tasks_3_Booking_&_Payment.md

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

---