# 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

---