Skip to content
Gallery
FSD Hikaria
FSD Hikaria
Share
Explore
Add Ticket

3. Wrap Up

1. Stepper

Purpose: Indicates user progress through the ticket creation steps
Content and Elements:
Steps 1 Highlighted with Text “Order Information”
Steps 2 Highlighted with Text “Detail Information”
Steps 3 Highlighted with Text “Wrap Up”
Behavior and Interactions:
onClick Previous button, will move to previous step and highlighted current and past steps
Data Sources:
Static

2. Order information section

Purpose: Displays the summary of ticket booked by the booker
Content and Elements:
Title Text “Order Information”
Booking ID on the right of Order Information
Title Text “Date of Visit”
Title Text “Arrival Time”
Text Button with Text “Edit” on the right side
Behavior and Interactions:
Booking ID, Date of Visit and Arrival Time is autofilled from step 1
onClick Edit Button, backtrack to step 1
Data Sources:
Dynamic - autofilled from step 1

3. Ticket information section

Purpose: Displays the summary of ticket quantities per category booked by the booker
Content and Elements:
Title Text “Ticket Information”
Text Button with Text “Edit” on the right side
Behavior and Interactions:
Show category only if tickets booked is more than 0
onClick Edit Button, backtrack to step 1
Data Sources:
Dynamic - autofilled from step 1

4. Detail information section

Purpose: Displays the details booking form from steps 2
Content and Elements:
Title Text “Detail Information”
Title Text “Booking Name”
Title Text “Phone Number”
Title Text “Email”
Title Text “Nationality”
Title Text “Booking Source”
Title Text “Payment Status”
Title Text “Payment”
Title Text “Transaction ID”
Title Text “Guest Status”
Title Text “Driver/ Travel Agent ID”
Text Button with Text “Edit” on the right side
Behavior and Interactions:
Booking Name, Phone Number, Email, Nationality, Booking Source, Payment Status, Payment, Transaction ID, Guest Status, Driver/ Travel Agent ID is autofilled from step 2
Only show Transaction ID if the payment method is EDC
onClick Edit Button, backtrack to step 2
Data Sources:
Dynamic - autofilled from step 2

5. Price information section

Purpose: Displays the total, discount and final ticket price
Content and Elements:
Title Text “Price Information”
Title Text “Total Price”
Title Text “Discount”
Title Text “Nett Price”
Text Button with Text “Edit” on the right side
Behavior and Interactions:
Total Price, Discount and Nett Price is auto calculated from step 2
onClick Edit Button, backtrack to step 2
Data Sources:
Dynamic - autofilled from step 2

6. Other information section

Purpose: Displays the optional field like referral code and notes
Content and Elements:
Title Text “Other Information”
Title Text “Referral Code”
Title Text “Notes”
Text Button with Text “Edit” on the right side
Behavior and Interactions:
Referral Code, Notes is autofilled from step 2
onClick Edit Button, backtrack to step 2
Data Sources:
Dynamic - autofilled from step 2

7. Previous Button

Purpose: Navigate user to the previous page to edit the order information
Content and Elements:
Secondary Button with Title “Previous”
Behavior and Interactions:
onClick save current session data and navigate user to
previous page
⁠
⁠

8. Save Ticket Button

Purpose: Submit the ticket booking information to spreadsheet
Content and Elements:
Primary Button with Text “Save Tickets”
Behavior and Interactions:
onClick, change button state to loading and Save data to Spreadsheet file using Google Sheet API
onSuccess, navigate to
Success Page
⁠
⁠
onError, show error bottom sheet
Data Source:
Google Sheet API
⁠
Page 3.png
⁠
⁠
⁠
Page 3.png
⁠
⁠
⁠
Page 3.png
⁠
⁠
⁠
Page 3.png
⁠
⁠

1. Stepper
2. Order information section
3. Ticket information section
4. Detail information section
5. Price information section
6. Other information section
7. Previous Button
8. Save Ticket 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.