Skip to content
Add Ticket

1. Add Ticket – Order Information

1. Stepper

Purpose: Indicates user progress through the ticket creation steps
Content and Elements:
Steps 1 Highlighted (default) with Text “Order Information”
Steps 2 Greyed with Text “Detail Information”
Steps 3 Greyed with Text “Wrap Up”
Behavior and Interactions:
onClick Continue button, will move to next step and highlighted current and past steps
Data Sources:
Static
UI References:
State:
Inactive
Screenshot 2025-07-15 at 11.35.05.png
Active
Screenshot 2025-07-15 at 11.34.41.png

2. Booking Source

Purpose: Collect the source of the booking made by super admin (available when login as super admin only)
Content and Elements:
Text Field with
Title “Booking source”
Placeholder “Select options”
Asterisk
Behavior and Interactions:
Editable and required
onClick, open bottom sheet Booking source
Data Source:
Static
State:
Default (unselected)
Screenshot 2025-07-15 at 17.15.57.png
Active (editing)
Screenshot 2025-07-15 at 17.17.04.png
Error (empty)
Screenshot 2025-07-15 at 17.16.09.png

3. Booking ID Field

Purpose: Filled with booking ID/ invoice ID from OTA or other platform
Content and Elements:
Text Field with
Title “Booking ID”
Placeholder “Ex : HKR-91023”
Behavior and Interactions:
Enabled and not required

4. Date of Visit

Purpose: Enabled user to choose their date of visit to the event
Content and Elements:
Text Field with
Title “Date of visit”
Placeholder “Ex : HKR-91023”
Asterisk
Calendar icon on the right
Behavior and Interactions:
Editable and required
onClick open Bottom Sheet Calendar
State:
Default
Screenshot 2025-07-15 at 15.21.16.png
Error (empty)
Screenshot 2025-07-15 at 15.21.29.png

5. Arrival Time

Purpose: Enabled user to choose their arrival time on date to the event
Content and Elements:
Text Field with
Title “Arrival time”
Placeholder “Select arrival time”
Asterisk
Dropdown icon on the right
Behavior and Interactions:
Editable and required
onClick open Bottom Sheet Arival time
State:
Default
Screenshot 2025-07-15 at 15.22.37.png
Error (empty)
Screenshot 2025-07-15 at 15.22.18.png

6. Local ticket section

Purpose: User can input the 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 0 and minimum counter is 0
onClick + increase counter
onClick - decrease counter, disable when counter is 0

7. International ticket section

Purpose: User can input the 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 0 and minimum counter is 0
onClick + increase counter
onClick - decrease counter, disable when counter is 0

8. Continue Button

Purpose: Validate form and navigate user to the next step
Group 20.png
Group 20.png
Group 20.png
Group 20.png
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.