CHAGEE — Sơ đồ luồng người dùng 6 LUỒNG

Mỗi bước = 1 màn của bản clone (bấm để mở màn thật ở tab mới). Quy tắc / logic riêng của từng màn nằm ngay trong hộp bên dưới màn đó.

🟢 LUỒNG 1 · ĐẶT HÀNG — PICKUP (Tự đến lấy)

Trang chủ

WF-2.1 · home-login.html

📋 Quy tắc / Logic WF-2.1

• R1 Vào từ màn chờ 3s (hoặc chạm) → đây.
• R2 Bấm PICKUP để đặt hàng tự đến lấy.
• R3 Khách: bấm Đơn hàng/Voucher/Tài khoản → hiện đăng nhập 🔒.
• R4 Đổi ngôn ngữ Việt / Anh.

→

bấm Pickup

Menu tự lấy

WF-2.3 · menu-pickup.html

📋 Quy tắc / Logic WF-2.3

• R1 Bấm dòng cửa hàng → chọn nơi tự lấy (cần chọn để đặt).
• R2 Chọn món → mở Chi tiết sản phẩm.
• R3 Chuyển qua lại tab PICKUP ↔ DELIVERY.

→

chọn món

Chi tiết sản phẩm

WF-2.5 · product-detail.html

📋 Quy tắc / Logic WF-2.5

• R1 Chọn size · mức đá · độ ngọt · số lượng.
• R2 Giá cập nhật theo lựa chọn.
• R3 Bấm Thêm vào giỏ → khách phải đăng nhập trước 🔒.

→

thêm vào giỏ

Giỏ hàng 🔒

WF-2.6 · cart.html

📋 Quy tắc / Logic WF-2.6

• R1 Cần đăng nhập mới vào được.
• R2 Xem lại món · sửa số lượng · phí bao bì.
• R3 Chọn Voucher (tuỳ chọn) rồi bấm Thanh toán.

→

chọn voucher

Voucher

WF-2.17 · voucher.html

📋 Quy tắc / Logic WF-2.17

• R1 Chọn 1 mã hợp lệ để áp giảm giá vào đơn.
• R2 Chưa có mã → trạng thái rỗng, nhập/thêm mã.
• R3 Áp xong → quay lại giỏ / tiếp tục thanh toán.

→

áp dụng → Thanh toán

💳

Thanh toán

Chưa dựng.

🚧 Thanh toán

WF-2.8 · chưa dựng

📋 Quy tắc / Logic (dự kiến) WF-2.8

• R1 Chọn phương thức: tiền mặt/tại quầy · ví (Momo/ZaloPay/VNPay) · thẻ · QR.
• R2 Cần cổng đối tác? → Có (sang cổng) / Không (xong tại quầy).

→

ví / thẻ / QR

ẢNH APP GỐC

Thanh toán QR

WF-2.10 · ảnh app gốc

📋 Quy tắc / Logic WF-2.10

• R1 Thẻ “Thanh toán đa năng” + mã QR + mã giao dịch.
• R2 Chia sẻ / Tải mã · list app ngân hàng quét QR.
• R3 Thanh toán thành công → Hoàn tất; chưa xong → quay lại.

Đang mượn ảnh app gốc (WF-2.10), thay asset khách lúc golive.

→

thành công

Hoàn tất

EX-1 · order-history-detail.html

📋 Quy tắc / Logic EX-1

• R1 Báo ĐƠN HÀNG ĐÃ HOÀN THÀNH · cộng Tea Leaves (tem) · nút Đánh giá.
• R2 Chi tiết đơn: món & tuỳ chọn · cửa hàng · địa chỉ & người nhận · voucher/chiết khấu · VAT · phí giao & bao bì · tổng thanh toán · phương thức.
• R3 Ghi số đơn · thời gian đặt · ghi chú; cùng màn này dùng lại khi mở từ Lịch sử đơn (Luồng 3).

EX-1: màn ngoài spec wireframe (chưa có WF id riêng cho Chi tiết đơn).

🟣 LUỒNG 2 · ĐẶT HÀNG — DELIVERY (Giao hàng)

🟠 LUỒNG 3 · LỊCH SỬ ĐƠN

🔵 LUỒNG 4 · TÀI KHOẢN

🔔 LUỒNG 4b · THÔNG BÁO (từ nút chuông ở Tài khoản)

🟦 LUỒNG 5 · ĐĂNG NHẬP (khách → đã đăng nhập)

🔴 LUỒNG 6 · CALORIE