Skip to main content

Màn Hình: Đổi Voucher Thành Công (Voucher Exchange Success Modal)

Ngày tạo: 01/07/2026
Loại: Giao diện ứng dụng (APP UI) — Hộp thoại thông báo thành công

Ảnh tham chiếu:

  • [Ảnh màn hình đổi voucher thành công](./images/My Voucher 3.png)

1. Mô Tả Chung​

Đây là giao diện hộp thoại dạng popup (modal) xuất hiện ngay sau khi người dùng thực hiện giao dịch đổi voucher thành công. Hộp thoại này thông báo trạng thái giao dịch và cung cấp các lựa chọn hành động tiếp theo cho người dùng.

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

![Đổi Voucher thành công](./images/My Voucher 3.png)

Thành phầnLoại phần tửChi tiết hiển thị / Hành vi
Nền mờ (Backdrop)OverlayLớp phủ làm tối và mờ mờ toàn bộ giao diện phía dưới để làm nổi bật hộp thoại modal ở giữa.
Hộp thoại (Modal Card)CardThẻ màu trắng bo góc lớn chứa các thông tin trạng thái và nút hành động.
Icon Thành côngImage/IconHình tròn màu xám ở trên cùng (ở phiên bản thực tế sẽ là icon check xanh hoặc hình minh họa quà tặng thành công).
Tiêu đề thông báoTextChữ in đậm nổi bật: "Đổi voucher thành công".
Nội dung thông báoTextHướng dẫn người dùng: "Kiểm tra mục Voucher của bạn để có thể sử dụng ngay".
Nút "Xem voucher"ButtonNút CTA chính màu cam chữ trắng để đi tới ví voucher. Điều hướng tới Voucher của bạn.
Nút "Quay lại"ButtonNút phụ viền xám nền trắng, chữ đen để đóng modal và quay lại trang Gói Voucher.

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

  1. Nhấn "Xem voucher":
    • Đóng popup modal.
    • Điều hướng người dùng trực tiếp tới tab "Chưa sử dụng" trong màn hình Voucher của bạn để người dùng có thể xem voucher vừa đổi.
  2. Nhấn "Quay lại":
    • Đóng popup modal.
    • Quay trở lại màn hình Gói Voucher.
  3. Dismiss Modal:
    • Theo thiết kế chuẩn, người dùng không thể tắt modal này bằng cách nhấn ra vùng nền mờ bên ngoài để tránh việc bỏ qua thông tin quan trọng mà chưa đưa ra quyết định hành động.