Explore

Order Information Page

Order Information

1. Toolbar

Purpose: Indicates page title and navigation icon to go back to previous page

Content and Elements:

Back navigation

Title Text “Order Information”

Behavior and Interactions:

onClick Back Navigation, go back to

previous page⁠

⁠

Data Sources:

Static

2. Booking Source

Purpose: Filled with the source of the booking

Content and Elements:

Text with

Title “Booking Source”

Content from API

3. Booking ID

Purpose: Filled with booking ID/ invoice ID from OTA or other platform

Content and Elements:

Text with

Title “Booking ID”

Content from API

Behavior and Interactions:

Enabled and not required

4. Date of Visit

Purpose: Enabled user to change their date of visit to the event

Content and Elements:

Text Field with

Title “Date of visit”

Filled with data from API

Asterisk

Calendar icon on the right

Behavior and Interactions:

Editable and required

onClick open Bottom Sheet Calendar

State:

Default

⁠

⁠

Error (empty)

⁠

⁠

5. Arrival Time

Purpose: Enabled user to change their arrival time on date to the event

Content and Elements:

Text Field with

Title “Arrival time”

Filled with data from API

Asterisk

Dropdown icon on the right

Behavior and Interactions:

Editable and required

onClick open Bottom Sheet Arival time

State:

Default

⁠

⁠

Error (empty)

⁠

⁠

6. Local ticket section

Purpose: User can change the number of ticket they want to book with adult and child for local visitor

Content and Elements:

Section Title Text “Local tickets option”

Text “Adult Local” with default price and quantity counter

Text “Child Local” with subtitle “3-12 years old, default price and quantity counter

Behavior and Interactions:

Get default price from Firebase config

Default counter is filled with data from API and minimum counter is 0

onClick + increase counter

onClick - decrease counter, disable when counter is 0

7. International ticket section

Purpose: User can change the number ticket they want to book with adult and child for International visitor

Content and Elements:

Section Title Text “International tickets option”

Text “Adult Local” with default price and quantity counter

Text “Child Local” with subtitle “3-12 years old, default price and quantity counter

Behavior and Interactions:

Get default price from Firebase config

Default counter is filled with data from API and minimum counter is 0

onClick + increase counter

onClick - decrease counter, disable when counter is 0

8. Save Changes Button

Purpose: Validate form and save changes user make then navigate to the previous page

Content and Elements:

Primary Button with Text “Save Changes”

Behavior and Interactions:

onClick, validate form

Date of Visit and Arrival time is not empty

If empty, change empty field state to error state

Total ticket options (local and international) should be more than 0

If total ticket is 0 show error toast

⁠

⁠

If form is valid, save changes to the API then navigate to the previous page with updated data

⁠

⁠

6. Local ticket section

7. International ticket section

8. Save Changes Button

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.