Skip to main content

Yêu Cầu Chỉnh Sửa: Nhóm Chi Nhánh, Lọc Sự Kiện Theo Vị Trí & Hiển Thị Voucher

Ngày cập nhật: 30/06/2026
Loại: Feature Improvement & Layout Fixes

Ảnh feedback:

1. Tối Ưu Hiển Thị Số Điểm / Voucher (Tránh Tràn Chữ)​

Yêu cầu​

  • Tiến hành kiểm thử giao diện (test text container) với số điểm GPoint lớn trong khoảng từ 10.000 đến 10.000.000 point.
  • Thiết lập thuộc tính flexShrink, adjustsFontSizeToFit (trên iOS) hoặc điều chỉnh chiều rộng tối thiểu (minWidth) của box chứa điểm và voucher để đảm bảo khi số điểm lớn, text không bị xuống dòng, không bị tràn hay bị che khuất (...).

2. Giao Diện Voucher & Tích Hợp Mã QR Sử Dụng​

Yêu cầu​

  • Thiết lập sẵn một số voucher mẫu (mock data) trong tài khoản của người dùng.
  • Khi click vào từng Voucher: Mở ra màn hình chi tiết Voucher hiển thị:
    • Thông tin chi tiết: điều khoản sử dụng, hạn dùng, chi nhánh áp dụng.
    • Mã QR Code: Render mã QR code tương ứng với mã Voucher để khách hàng có thể đưa cho lễ tân quét trực tiếp tại quầy khi sử dụng dịch vụ.

3. Nhóm Chi Nhánh Theo Tỉnh Thành / Khu Vực​

Hiện trạng​

Danh sách chi nhánh (Branch) trên trang chủ đang hiển thị lẫn lộn các chi nhánh của tất cả các tỉnh thành và xuất hiện chi nhánh ảo mang tên "1".

Yêu cầu chỉnh sửa​

  • Xóa bỏ chi nhánh ảo tên "1" khỏi cơ sở dữ liệu và giao diện.
  • Nhóm danh sách chi nhánh theo Khu vực (Tỉnh/Thành phố: TP.HCM, Đà Nẵng, Hà Nội...):
    • Trên màn hình trang chủ, phần Branch chỉ hiển thị danh sách các tab/nút khu vực (Ví dụ: TP. Hồ Chí Minh, Đà Nẵng, Hà Nội).
    • Khi người dùng click chọn một khu vực cụ thể (Ví dụ: TP. Hồ Chí Minh), App sẽ hiển thị thông tin giới thiệu ngắn về các chi nhánh khu vực đó, kèm số lượng chi nhánh hiện có.
    • Phía dưới hiển thị danh sách các chi nhánh thuộc khu vực được chọn (Ví dụ: Healing World Thảo Điền, Healing Spa Land Quận 7...).

4. Loại Bỏ Badge Không Cần Thiết Trên Card Sự Kiện (Event Card)​

Hiện trạng​

Các sự kiện ưu đãi đang hiển thị badge "Đang mở" (màu xanh lá đè lên ảnh) và badge "Miễn phí" ở phần thông tin chi tiết. Các badge này không đúng tính chất của sự kiện ưu đãi.

Yêu cầu chỉnh sửa​

  • Ẩn/Xóa hoàn toàn badge "Đang mở" và "Miễn phí" khỏi component Card Sự Kiện.

5. Tự Động Định Vị Chọn Khu Vực Để Lọc Sự Kiện​

Yêu cầu​

  • Khi người dùng mở ứng dụng lần đầu, hệ thống sẽ yêu cầu quyền truy cập vị trí (GPS) để xác định tỉnh thành hiện tại của người dùng.
  • Dựa trên tỉnh thành quét được, ứng dụng sẽ tự động chọn khu vực tương ứng làm mặc định trên trang chủ.
  • Lọc danh sách Sự kiện/Ưu đãi: Hệ thống sẽ tự động lọc và hiển thị danh sách các sự kiện/ưu đãi thuộc chi nhánh ở khu vực đó (Ví dụ: Phát hiện người dùng ở Đà Nẵng ➔ Chỉ hiển thị danh sách các sự kiện ưu đãi áp dụng tại chi nhánh Đà Nẵng).

Checklist Kỹ Thuật​

  • Check layout text với số điểm 10.000.000 trên cả màn hình nhỏ (iPhone SE, Android màn hình nhỏ).
  • Tích hợp thư viện tạo mã QR (ví dụ: react-native-qrcode-svg) trong trang chi tiết Voucher.
  • Viết API endpoint /branches/grouped để trả về danh sách chi nhánh được nhóm theo tỉnh thành.
  • Xóa badge "Đang mở" và "Miễn phí" khỏi code UI Event Card.
  • Tích hợp thư viện định vị (ví dụ: expo-location hoặc react-native-geolocation-service) để tự động nhận diện tỉnh thành khi vào App và truyền param city lên API lấy danh sách Event.