Reservation Details Popup

Overview

The Reservation Details Popup is the right-side drawer that opens when a reservation in the Multi Calendar is clicked. It gives the operations team a complete overview of a booking — including guest details, OTA source, payment information, arrival/departure times, and any internal notes.

From this view, team members can:

• Review the full booking information

• Adjust planned arrival and departure times

• View payment and status information

• Read internal notes

• Mark check-in/check-out or cancel direct bookings

What It Shows

The popup is structured into several clear sections:

🧾 Header

• Displays the Reservation ID at the top.

• Shows the booking status (Confirmed, Cancelled, etc.).

• Currently, all statuses show with a green check icon for consistency.

👤 Guest & Source

• Left side: Guest initials and full name, plus phone number (if available).

• Right side: OTA (booking source) icon.

  • Supported: Airbnb, Booking.com, Rentd, and Direct bookings.

  • If the system can’t recognize the source, it defaults to the Hububb icon.

💸 Status Badges

Two small badges summarize the booking’s state:

Badge	Meaning	Example
Payment	“Paid”, “Unpaid”, or “Partially Paid”	Paid 100 %
Guest Activity	“Not Checked In”, “Checked In”, or “Checked Out”	Checked In

⏰ Extended Timings

This section lets the operations team adjust Planned Arrival and Planned Departure times.

• Available hours: 10:00 → 22:00

• When changed:

  • The new time is saved and confirmed with a toast message.

  • The system updates the booking and refreshes the calendar automatically.

• Errors (e.g., network issues) revert the time to its previous value and show an error toast.

ℹ️ Info Section

Provides a clear summary of all essential booking data:

Field	Description
Check-In / Check-Out Dates	Shown in day-month-year format
Nights	Total length of stay
Guests / Adults / Children	Guest counts for the booking
Revenue	Total amount (shown with the proper currency symbol)
Reference Number	Internal or OTA reference, if available
Payment Link	Clickable if a link exists (optional)

🗒️ Notes

A yellow panel displays any internal notes attached to the reservation. If there are no notes, the popup shows “No notes available.”

✏️ Editing or adding notes is built in but currently disabled for hosts. Future versions may allow direct note editing from this drawer.

Optional Actions (Not Visible by Default)

The code supports several management actions that are currently hidden but can be enabled later if needed:

Action	Description
Check In / Undo Check In	Mark the guest as checked in or reverse it
Check Out / Undo Check Out	Mark the guest as checked out or reverse it
Cancel Reservation	Available only for Direct bookings that aren’t already cancelled

These actions automatically update the reservation and refresh the Multi Calendar.

Behavior and Updates

• When opened, the popup always refetches the reservation to display the most recent information.

• If you adjust arrival/departure times or make any changes, the calendar updates instantly across the system.

• Updates trigger internal events (PubSub) that notify all visible calendar views to refresh.

• A toast notification confirms success or displays any errors.

• The system also pre-fetches any related communication threads (from Firebase), though chat UI is currently turned off.

Limitations & Current Behavior

• The status line always appears green, even for cancelled reservations.

• Badge colors for payment and guest activity are computed but not yet visible.

• Notes are view-only (editing is disabled).

• Action buttons (check-in/out, cancel) exist in code but are not shown in the interface.

• Payment Link and Reference Number only appear when available.

• OTA names are flexible (e.g., “Airbnb”, “AirBNB”, “BookingCom”) — all are normalized automatically.

🧪 QA Testing Checklist

Area	What to Check	Expected Behavior
Opening	Click a reservation block	Drawer slides in from the right
Header	Reservation ID and status visible	Always shows “Confirmed”, “Cancelled”, etc.
Guest Info	Guest name, initials, and OTA icon	Accurate and matches source
Payment / Activity Badges	Display correct text	Paid %, and guest status match data
Extended Timings	Change planned arrival/departure	Time updates, toast confirmation shown
Info Section	Check all displayed fields	Values match reservation details
Notes	Check for presence/absence	Displays existing notes or placeholder text
Payment Link	If present, test click	Opens link in new tab
Refresh	After editing times	Calendar updates automatically
Mobile View	Open popup on mobile	Drawer adapts to smaller width

Summary

The Reservation Details Popup brings all booking information into a single, easy-to-use panel — directly from the Multi Calendar. It helps operations and management teams quickly review and, when needed, act on any booking without switching pages.

It provides:

• Immediate visibility of key guest and booking info

• Tools for adjusting stay timings

• Quick reference for payment, source, and notes

• Seamless integration with the calendar for live updates

🧪 QA Testing Checklist

This section is meant for QA testers and internal reviewers to verify that the Reservation Details Popup (the drawer that opens on click) works correctly. It focuses on content accuracy, actions, timing changes, and data refresh.

🔹 Opening & Closing Behavior

• Clicking a reservation opens the drawer from the right-hand side.

• The drawer animates smoothly into view without delay.

• Clicking outside the drawer or pressing ESC closes it properly.

• Only one drawer can be open at a time.

🔹 Header & Status Display

• The drawer title shows “Reservation:” + reservation ID.

• The Status line displays the correct reservation status (Confirmed, Cancelled, etc.).

• Status always shows a green check icon (by design).

• The guest initials avatar and full guest name appear correctly.

• The OTA icon (Airbnb, Booking.com, Direct, Hububb) matches the booking source.

🔹 Payment & Guest Activity Badges

• The drawer shows two badges:

  • Payment Status → “Paid”, “Unpaid”, or “X% Paid”

  • Guest Activity → “Not Checked In”, “Checked In”, or “Checked Out”

• Badge labels always match the reservation’s real state.

• Colors are currently inactive (labels only) — verify consistent typography and spacing.

🔹 Extended Timings Section

• “Planned Arrival” and “Planned Departure” dropdowns are visible.

• Default times match the current reservation check-in/out.

• Selecting a new time updates the backend successfully (toast confirmation).

• Invalid times or failed requests show an error toast and revert the selection.

🔹 Info Section

• Displays accurate and readable data for:

  • Check-In / Check-Out dates

  • Nights (correct duration)

  • Guest, Adults, and Children counts

  • Revenue (amount + correct currency symbol)

  • Reference Number (if available)

  • Payment Link (clickable if provided)

• The Payment Link opens in a new tab.

🔹 Notes Section

• If notes exist, a yellow panel displays them correctly.

• If no notes exist, shows “No notes available.”

• Notes are read-only (cannot be edited) for landlords.

• Notes can be added / removed / edited only for operation users.

🔹 Actions (if enabled)

(Only for operation members)

• “Check In”, “Undo Check In”, “Check Out”, and “Undo Check Out” buttons trigger correctly.

• “Cancel Reservation” visible only for Direct bookings not already cancelled.

• Confirmations appear before performing an action.

• Success → toast message and updated drawer data.

• Errors → error toast; no state change.

• Multi Calendar updates automatically after each action.

🔹 Data Fetching & Refresh

• The drawer refetches the reservation on open (shows latest data).

• Changing arrival/departure triggers a PubSub event → calendar refreshes.

• After performing any action, data updates across all views (popover, calendar, drawer).

• Closing and reopening the drawer shows updated values.

🔹 Permissions & Roles

• Operations users (Admins) can see all fields and actions.

• Landlords can open the drawer but have read-only access

• Users without edit-reservation permission see no buttons for check-in/out or cancel.

• Notes section remains visible for all, even if read-only.

🔹 Data Integrity

• All details in the drawer match what’s shown on the reservation block and popover.

• Payment, status, and guest activity are consistent across all calendar views.

• After any change, the drawer and calendar show identical information.