Skip to main content

Màn Hình: Chi Tiết Đổi Voucher (Voucher Exchange Detail)

Ngày tạo: 01/07/2026
Loại: Giao diện ứng dụng (APP UI) — Chi tiết đổi điểm lấy Voucher

Ảnh tham chiếu:

  • [Ảnh màn hình chi tiết đổi voucher](./images/My Voucher 1.png)

1. Mô Tả Chung​

Màn hình này hiển thị chi tiết của một voucher mà người dùng có thể đổi bằng điểm tích lũy (GPoint). Màn hình này bao gồm thông tin về số điểm cần thiết để đổi, mô tả voucher, điều khoản sử dụng và nút thực hiện đổi điểm.

2. Chi Tiết Giao Diện & Thành Phần​

![Chi tiết đổi Voucher](./images/My Voucher 1.png)

Thành phầnLoại phần tửChi tiết hiển thị / Hành vi
Ảnh nền HeaderImageHình ảnh dịch vụ (massage đá nóng) hiển thị ở phía trên làm nền cho thẻ thông tin.
Nút Quay lạiButtonNút tròn màu trắng có icon mũi tên quay lại (<-), nằm đè lên góc trên bên trái của ảnh nền. Quay lại Gói Voucher.
Thẻ Thông tin VoucherCardThẻ nổi bo góc đè lên ảnh nền, bao gồm:
- Logo thương hiệu: Vòng tròn màu xám trung tâm.
- Tiêu đề voucher: “Golden Lotus: Giảm 50% giá vé Jjim Jil Bang tháng 12” (chữ đậm căn giữa).
- Chi phí đổi (GPoint): Icon chữ G màu vàng + chữ đậm “1.500 GPoint”.
Thông tin voucherSectionKhung nền trắng bo góc chứa văn bản mô tả ngắn gọn về ưu đãi và nội dung của voucher dưới dạng danh sách số thứ tự.
Điều khoản sử dụngSectionKhung nền trắng bo góc chứa quy định và điều kiện áp dụng voucher dưới dạng danh sách số thứ tự.
Nút Đổi voucher (CTA)ButtonNút màu cam nổi bật cố định dưới cùng của màn hình với dòng chữ trắng "Đổi voucher". Nhấn vào để tới màn hình Kiểm tra thông tin đổi Voucher.

3. Luồng Nghiệp Vụ & Logic Hoạt Động​

  1. Kiểm tra điều kiện đổi:
    • Khi người dùng nhấn nút "Đổi voucher":
      • Nếu số GPoint khả dụng của người dùng lớn hơn hoặc bằng 1.500: Chuyển sang màn hình Kiểm tra thông tin đổi Voucher.
      • Nếu số GPoint khả dụng nhỏ hơn 1.500: Hiển thị thông báo (toast/alert) cảnh báo điểm tích lũy không đủ và không cho phép thực hiện đổi.
  2. Quay lại: Nhấn vào nút Back góc trên trái để quay về trang Gói Voucher.