Booking Details

By incorporating the tabs, the user will be able to informed decisions.

In this page

Overview: Cards

Dec 20^th, 2024

Product Dates

Adding product‐specific dates to each card and sidebar (Booking Summary) in the Overview section of the Booking Details page will provide users with relevant context about the status or state of each item. The displayed date(s) will align with the nature of the product or item, offering clarity and improving the overall user experience.

CSS Update

See design specs for the update on the font weight and font color.

Dec 20^th, 2024

Insurance Card

Stakeholders requested adding the number of travelers that have purchased a plan. In the card, under the name of the travel protection plan, the number of travelers will display.

CSS Update

See design specs for the update on the font weight and font color for the 'plan name' and the 'number of travelers'.

Overview

Feb 21^st, 2024

Agency Fee Card

If a fee has been applied to a Group booking, then we need to show card that states the amount and date of the fee.

Cards

The cards will display multiple data.

Unfilled Cards & the Insurance Card

These following shows cards that do not contain data. For insurance, the user will need to contact Classic Vacations.

Color for Circles

There is a state for the circles that contain the icons.

Dec 8^th, 2023

Travelers

Travelers in this Booking

The Travelers section will inherit the card grid layout. When the user clicks on the link, a modal will appear.

Dec 8^th, 2023

Room

Room Page

If there are multiple rooms, user will see a card for each room. The card will display the travelers in each room.

Search for Rooms

When user clicks on the 'Change Room' link, they will see the search box. When in the search state, the 'Make a Payment' is disabled.

Search Results

User can reserve a room or KEEP the confirmed room. The 'Make a Payment' is disabled.

Updated

Room 1 card reflects the update.

Transfers

Transfer Not Purchased

When transfer hasn't been purchased, the pattern will be the following:

Select a Transfer

User will click on the 'Add a Transfer' button and a modal will appear with transfers for the user to select.

Transfer Selected

After the user clicks on the 'I want this transfer' button, the page will show a card with the transfer selected:

• The circle that contains the icon will be a darker grey.
• An Add to Cart button will appear.

Transfer Purchased

What does the page look like when a transfer has been purchased.

• The color of the circle is teal when an item is purchased.

Dec 13^th, 2023

Excursions

Excursion Not Purchased

When a tour hasn't been purchased, the pattern will be the following:

Select a Tour

User will click on the 'Add Excursion' button and a modal will appear with tours for the user to select.

Excursion Selected

After the user clicks on the 'I want this tourr' button, the page will show a card with the tour selected:

• The circle that contains the icon will be a darker grey.
• An Add to Cart button will appear.
• User can select a date.
• If the user no longer wants to the tour, they can remove it.
• A card will appear for the user to add another tour.

Excursion Purchased

What does the page look like when an excursion has been purchased?

• The color of the circle is teal when an item is purchased.
• Date of the tour is shown in the card.

Feb 21^st, 2024

Review

Agency Planning Fee

We need to all the Planning Agency Fee in the sidebar summary.

Items for Review

User can add flights, transfers, insurance, and room to this cart.

Payment History

This page can be accessed from the Overview page.