Explore

Homepage - Ticket Validation

Ticket Validation

⁠

⁠

1. Scan Ticket Header

Purpose: Show section title and short prompt to user

Content and Elements:

Barcode icon

Title Text “Scan your tickets”

Subtitle Text “Scan the customer ticket using camera”

Data Sources:

Static

2. Scan QR Code

Purpose: Scan button will enable user to scan QR code with device camera and validate ticket

Content and Elements:

Primary button with icon barcode and Text “Scan”

Behavior and Interactions:

onClick, open device camera and start scanning QR Code

⁠
⁠
⁠

3. Manual Input Field

Purpose: When scan QR code might failed, user has options to manualy input ticket code and checking ticket validity

Content and Elements:

Manual Input prompt Text “Have trouble when scan the ticket? Input the code manually”

Ticket Code Field (required)

Secondary button with Text “Check”

Behavior and Interactions:

onClick Check button, validate

If ticket code is empty, show error state with text “Ticket Code is Required”

If ticket code is valid, send ticket code with API Request and change button state to loading

onResponse API,

Success, navigate to Valid Ticket page

Error, show bottom sheet error

Data Sources:

Dynamic

API Name:

Google Sheets API - check

State:

Input Field

Default

⁠

⁠

Error

⁠

⁠

Button

Default

⁠

⁠

⁠

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.

Ticket Validation

1. Scan Ticket Header

2. Scan QR Code

⁠⁠⁠

3. Manual Input Field

⁠
⁠
⁠