YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
System Architecture▾
Module Convention▾
Scalar Convention▾
Kiosk for Customers
The number of customers at the store has increased, and the staff is having trouble processing orders. Let's create a kiosk for customers to order ice cream. A kiosk is a simple interface that allows customers to order ice cream.
Add Schema
There is some missing information in the current schema to allow customers to order directly from the kiosk. We need to add serve type and contact information. Let's expand the schema to add these features.
apps/koyo/lib/icecreamOrder/icecreamOrder.constant.ts
Let's understand the new schema additions:
🍽️
ServeType: An enum defining how the customer wants their order - for here, take out, or delivery
📱
phone: Customer's phone number with validation using isPhoneNumber for pickup notifications
📋
LightIcecreamOrder: Updated to include serveType for display in order lists and dashboards
Next, we need to add dictionary entries for the new fields and enum values:
apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts
Next, let's add serveType and phone selection to the order form template.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Template.tsx
Finally, let's display serveType on the order card to clearly show whether the customer's order is for here or take out, etc.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Unit.tsx
Kiosk Landing Page
The first thing customers see when they approach the kiosk is the landing page. Think of it like the welcome screen at a fast-food restaurant kiosk - it should be inviting, easy to understand, and guide customers to their first choice: "For Here" or "Take Out".
Let's create the landing page for the kiosk ordering flow:
apps/koyo/app/[lang]/icecreamOrder/page.tsx
Let's break down the key features of this landing page:
🌍Link.Lang
Language switcher buttons allow customers to choose their preferred language. This is essential for kiosks in tourist areas or multicultural neighborhoods.
🔗Link with Query Params
The "For Here" and "Take Out" buttons pass serveType as a query parameter to the next page. This pre-fills the order form with the customer's choice.
✨Visual Design
Large buttons with emojis make the interface touch-friendly. Gradient backgrounds and hover effects give the kiosk a distinct look.
After customers complete their order, they need a confirmation page. Let's create a success page that reassures them:
apps/koyo/app/[lang]/icecreamOrder/success/page.tsx
The success page provides important feedback to customers:
✓
A large checkmark icon gives instant visual confirmation that the order was successful
📢
Clear instructions tell customers to wait for their order number to be called
🏠
A 'Place New Order' button allows the next customer to start fresh
Order Form Page
The heart of the kiosk is the order form page. This is where customers actually customize their ice cream - choosing size, toppings, and entering their phone number for pickup notifications. Think of this page like the main ordering screen at a bubble tea shop where you select your drink size and add-ons.
The page needs to handle query parameters from the landing page and provide an intuitive form experience:
apps/koyo/app/[lang]/icecreamOrder/new/page.tsx
Let's understand the key components of this order form page:
🔍searchParams
Next.js provides searchParams as a Promise that contains URL query parameters. We extract the serveType to pre-fill the order form with the customer's choice from the landing page.
📝Load.Edit
The Load.Edit component handles form state management, validation, and submission. It connects to the slice for data persistence and automatically navigates to the success page on submit.
↩️onCancel="back"
Setting onCancel to "back" enables the cancel button to navigate back to the previous page. This provides an easy way for customers to change their mind.
Now let's style the Template component for the kiosk experience. Each section is wrapped in a card with icons:
apps/koyo/lib/icecreamOrder/IcecreamOrder.Template.tsx
The Template component uses these Field components for kiosk-friendly input:
📏
Field.ToggleSelect: Large, touch-friendly buttons for selecting a single option (size)
🍓
Field.MultiToggleSelect: Allows selecting multiple options (toppings) with visual feedback
📱
Field.Phone: Phone number input with formatting and validation built-in
In the next tutorial, we'll explore how to use Scalar for computed values and aggregations. This will allow you to display dynamic information like order totals, wait times, and statistics in real-time.