Explore

Edit Booking

Detail Information Page

1. Toolbar

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

Content and Elements:

Back navigation

Title Text “Detail Information”

Behavior and Interactions:

onClick Back Navigation, go back to

previous page⁠

⁠

Data Sources:

Static

2. Booking Name Field

Purpose: Change the full name of the person making the booking

Content and Elements:

Text Field with

Title “Booking name”

Booking Name fill in with data from API

Asterisk

Behavior and Interactions:

Editable and required

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

3. Phone Number Field

Purpose: Change the contact number of the person making the booking

Content and Elements:

Text Field with

Title “Phone Number”

Area code fill in with data from API

Phone number fill in with data from API

Asterisk

Behavior and Interactions:

Editable and required

onClick Area Code, open bottom sheet area code

onClick Phone Number, show softkeyboard input with phone number type

Min. Char 5, Max. Char 13

Data Source:

Static

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

4. Email

Purpose: Change the email used to send the Ticket QR code and payment status

Content and Elements:

Text Field with

Title “Email”

Email fill in with data from API

Asterisk

Behavior and Interactions:

Editable and required

Fill in with data from API

onClick open softkeyboard with email type

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

5. Nationality

Purpose: Change the nationality of the visitor

Content and Elements:

Text Field with

Title “Nationality”

Nationality fill in with data from API

Asterisk

Dropdown icon on the right

Behavior and Interactions:

Editable and required

Fill in with data from API

onClick, open bottom sheet Nationality

Data Source:

Static

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

6. Payment Method

Purpose: Change the payment method the customer use to pay

Content and Elements:

Text Field with

Title “Payment Method”

Payment method fill in with data from API.

Default placeholder “Select option”

Asterisk

Hidden Text Field with:

Title “Transaction ID”

Fill in with data from API

Default placeholder “Ex : OTA-910920392”

Asterisk

Behavior and Interactions:

Editable and required

onClick, open bottom sheet Payment Method

If selected method is `EDC`

show Transaction ID Field

Transaction ID is required

Data Source:

Static

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

7. Guest Status

Purpose: Determined the guest visitation status to the event

Content and Elements:

Text Field with

Title “Guest status”

Fill in with data from API

Default placeholder “Select status”

Asterisk

Behavior and Interactions:

Editable and required

onClick, open bottom sheet Guest Status

Data Source:

Static

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

8. Driver/ Travel Agent ID

Purpose: Tracking for partnership/ referral tracking

Content and Elements:

Text Field with

Title “Driver/ Travel Agent ID”

Fill in with data from API

Default placeholder “Select driver”

Asterisk

Behavior and Interactions:

Editable and required

onClick, open bottom sheet Driver/ Travel agent ID

Data Source:

Dynamic

API Name:

Google Sheet API

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

9. Payment Status

Purpose: Change the indication of the payment status

Content and Elements:

Text Field with

Title “Payment Status”

Fill in with data from API

Default placeholder “Select status”

Asterisk

Behavior and Interactions:

Editable and required

onClick, open bottom sheet Payment Status

Data Source:

Static

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

10. Total Price

Purpose: Change the total price for all ticket booked

Content and Elements:

Text Field with

Title “Total Price”

Fill in with data from API

Asterisk

Behavior and Interactions:

Required

Editable only by super admin, show state disable with autocalculate data from total booked ticket

If Editable, onClick open softkeyboard with number type

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

11. Toogle Discount

Purpose: Toggle to show/ hide the discount fields

Content and Elements:

Toggle with Title “Discount”

Discount type fill in with data from API

Discount Amount fill in with data from API

Behavior and Interactions:

Toggle default is inactive

onClick, change discount status active/ inactive

If Active, show Discount Type field and Discount amount field

If Inactive, hide Discount Type field and Discount amount field

State:

Toggle

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Text Field

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

12. Nett Price

Purpose: Show the total price after discount if applicable that customer has to paid

Content and Elements:

Rectangle border for view separation

Title Text “Nett price”

Total price calculated from total price - discount (if applicable)

Data Sources:

Dynamic

13. Referral Code

Purpose: Change the referral code of the person making the booking

Content and Elements:

Text Field with

Title “Referral Code”

Referral code fill in with data from API

Behavior and Interactions:

Editable and not required

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

14. Notes

Purpose: Change booking notes

Content and Elements:

Text Field with

Title “Notes”

Notes fill in with data from API

Behavior and Interactions:

Editable and not required

Scrollable and max height 4 lines

State:

Default (unselected)

⁠

⁠

1. Toolbar

2. Booking Name Field

3. Phone Number Field

8. Driver/ Travel Agent ID

15. 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.