Explore

Personel Page

Add Travel Agent Page

1. Title

Purpose: Show page title

Content and Elements:

Page Title Text “Add Travel Agent”

2. Name Field

Purpose: Input the full name of the travel agent

Content and Elements:

Text Field with

Title “Name”

Placeholder “Ex : Jack Daniel”

Asterisk

Behavior and Interactions:

Editable and required

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

3. Phone Number Field

Purpose: Collect the contact number of the new travel agent

Content and Elements:

Text Field with

Title “Phone Number”

Area code default to Indonesia “+62”

Placeholder “8918293232”

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

Data Source:

Static

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

4. Bank Field

Purpose: Collect the name of the travel agent bank

Content and Elements:

Text Field with

Title “Bank”

Placeholder “Ex :BCA, BRI”

Asterisk

Behavior and Interactions:

Editable and required

Minimum 3 char

onClick Bank, show softkeyboard input with text type

State:

Default (unselected)

⁠

⁠

Active (editing)

⁠

⁠

Error (empty)

⁠

⁠

5. Account Number Field

Purpose: Collect the account number of the travel agent

Content and Elements:

Text Field with

Title “Account number”

Placeholder “Enter your account number...”

Asterisk

Behavior and Interactions:

Editable and required

onClick Bank, show softkeyboard input with number type

State:

Default (unselected)

⁠

Active (editing)

⁠

Error (empty)

⁠

6. Save Button

Purpose: Trigger validation and save the form data to Google Spreadsheets

Content and Elements:

Primary Button with Text “Save”

Behavior and Interactions:

onClick change state to loading, and validate form

If valid, save data to Google Spreadsheets with API

onSuccess, return to

Personnel Page⁠

⁠

onError, show error bottom sheet

API Name:

Google Spreadsheet API

⁠

⁠

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.