Skip to main content

Tổng Hợp Yêu Cầu Cập Nhật App — 30/06/2026

Ngày tạo: 30/06/2026
Loại: Feature Update & Bug Fix Requests
Áp dụng cho: Mobile App (React Native)

1. Booking Calendar — Thanh Ngày Auto-scroll (Infinite Loop)​

File chi tiết: Booking-Calendar-UI.md

Thanh hiển thị ngày (date strip) trong màn hình đặt lịch cần tự động cuộn qua lại vô hạn (infinite loop / auto-scroll carousel):

Thuộc tínhYêu cầu
Hướng cuộnTrái → Phải → Trái (lặp liên tục)
Tốc độChậm, mượt (không giật)
Tương tác tayDừng auto khi user chạm; tiếp tục sau 2–3s khi thả tay
Active itemNgày đang chọn luôn hiển thị trong vùng nhìn thấy
// React Native: FlatList + setInterval hoặc
// react-native-snap-carousel với loop={true} + autoplay={true}

2. Event & Tin Tức — Bố Cục Hero + List (Theo Figma)​

Vấn đề hiện tại​

Tất cả các bài viết Event/Tin tức đang hiển thị cùng kích thước → không có sự phân cấp trực quan.

Yêu cầu bố cục mới (theo Figma)​

┌─────────────────────────────────┐
│                                 │
│   [ẢNH LỚN - TIN GẦN NHẤT]     │  ← Hero Card (bài mới nhất)
│                                 │     Ảnh full-width, tiêu đề to
│   Tiêu đề bài viết mới nhất    │     + mô tả ngắn + ngày đăng
│   Mô tả ngắn...   30/06/2026   │
│                                 │
└─────────────────────────────────┘
                ↓
┌──────────────────────────────────────────┐
│ [Ảnh nhỏ] Tiêu đề bài 2   28/06/2026   │  ← List nhỏ
│ [Ảnh nhỏ] Tiêu đề bài 3   27/06/2026   │     (các bài cũ hơn)
│ [Ảnh nhỏ] Tiêu đề bài 4   26/06/2026   │     Thumbnail nhỏ bên trái
│ [Ảnh nhỏ] Tiêu đề bài 5   25/06/2026   │     Text tiêu đề bên phải
└──────────────────────────────────────────┘
PhầnMô tảSố lượng
Hero CardBài viết mới nhất — ảnh full-width, tiêu đề lớn, mô tả ngắn, ngày đăng1 bài
List nhỏCác bài cũ hơn — thumbnail nhỏ bên trái + tiêu đề + ngày đăng bên phảiTất cả còn lại
Phân trang / Load moreNút "Xem thêm" hoặc infinite scroll khi cuộn đến cuốiKhi > 10 bài

Áp dụng cho cả 2 tab: Event (Sự kiện) và Tin tức (News) — cùng layout pattern.

3. Vòng Quay May Mắn — Popup Khi Truy Cập Lần Đầu Mỗi Ngày​

Yêu cầu​

Khi người dùng mở App lần đầu trong ngày (hoặc vào trang chủ lần đầu trong ngày), tự động hiện popup nhắc nhở Vòng quay may mắn.

Logic hiển thị​

Mở App / vào Home
        ↓
Kiểm tra: Hôm nay đã hiện popup Vòng quay chưa?
    ├── CHƯA → Hiện popup sau 1–2 giây
    └── RỒI → Bỏ qua, không hiện lại
Thuộc tínhChi tiết
Tần suất1 lần / ngày / thiết bị (reset lúc 00:00 mỗi ngày)
Thời điểm hiệnSau 1–2 giây kể từ khi Home render xong (không chặn loading)
Nội dung popupẢnh/icon vòng quay + text: "Bạn có lượt quay miễn phí hôm nay!"
CTANút "Quay ngay" → điều hướng đến màn hình Vòng quay
Bỏ quaNút "Để sau" hoặc nhấn ra ngoài → đóng popup, không hiện lại hôm nay
Lưu trạng tháiAsyncStorage: key last_spin_popup_date = YYYY-MM-DD
// Pseudo-code React Native
const today = new Date().toISOString().split('T')[0]; // "2026-06-30"
const lastShown = await AsyncStorage.getItem('last_spin_popup_date');
if (lastShown !== today) {
  setTimeout(() => showSpinPopup(), 1500);
  await AsyncStorage.setItem('last_spin_popup_date', today);
}

4. Chi Tiết Chi Nhánh — Ẩn Section "Dịch Vụ Spa"​

File ảnh gốc: z7978306939224_886c0029577133c9142f0735a06becf0.jpg

Vấn đề​

Màn hình Chi tiết Chi nhánh (Branch Detail) đang hiển thị section "Dịch vụ Spa" phía dưới thông tin chi nhánh → gây nhầm lẫn ngữ cảnh, section này chỉ thuộc về trang chủ.

Yêu cầu​

  • Ẩn hoàn toàn component/section "Dịch vụ Spa" khỏi màn hình BranchDetailScreen.
  • Section này chỉ được render trên HomeScreen, không được mount vào BranchDetailScreen.
  • Kiểm tra prop hoặc route params để conditionally render: if (screen === 'BranchDetail') return null.

5. Dropdown Select — Đổi Thành Bottom Sheet / Modal Có Scroll​

File ảnh gốc: z7978306939224_886c0029577133c9142f0735a06becf0.jpg

Vấn đề hiện tại​

Dropdown "Chọn nhóm dịch vụ" (và các dropdown khác trong form đặt lịch) khi mở ra, danh sách options đổ xuống inline ngay trong trang → khi có nhiều data, danh sách dài sẽ đẩy toàn bộ nội dung phía dưới xuống → layout bị vỡ, trải nghiệm xấu.

Yêu cầu thay đổi​

Hiện tạiYêu cầu mới
Cơ chế mởInline expand (đổ xuống tại chỗ)Bottom Sheet / Modal popup xuất hiện từ dưới lên
ScrollĐẩy content xuốngScroll nội dung bên trong bottom sheet bằng ngón tay
ĐóngNhấn lại dropdownVuốt xuống (swipe down) hoặc nhấn ra ngoài vùng
Chọn item—Nhấn vào item → tự động đóng bottom sheet, hiển thị giá trị đã chọn
Chiều caoCo giãn theo nội dungTối đa 60% chiều cao màn hình, có scroll bên trong nếu vượt

Áp dụng cho tất cả dropdown trong form Booking​

  • Chọn thành phố
  • Chọn chi nhánh
  • Chọn nhóm dịch vụ
  • Chọn dịch vụ cụ thể
  • Chọn số lượng người

Thiết kế Bottom Sheet​

─────────────────────── (drag handle)
  Chọn nhóm dịch vụ
───────────────────────
  🔍 Tìm kiếm... (optional)
───────────────────────
  ● Massage Body         10 dịch vụ
  ○ Body Scrub            1 dịch vụ
  ○ Massage Foot          5 dịch vụ
  ○ Facial                3 dịch vụ
  ○ Healing Land          5 dịch vụ
  ○ ...
  (cuộn ngón tay)
// React Native: dùng @gorhom/bottom-sheet hoặc react-native-modal
import BottomSheet from '@gorhom/bottom-sheet';
// snapPoints={['60%']} với nội dung ScrollView bên trong

Checklist Tổng Hợp​

#Hạng mụcĐộ ưu tiênTrạng thái
1Booking Calendar: thanh ngày auto-scroll loopTrung bình☐ Chưa làm
2Event/Tin tức: layout Hero + List theo FigmaCao☐ Chưa làm
3Vòng quay: popup lần đầu mỗi ngàyTrung bình☐ Chưa làm
4Chi nhánh detail: ẩn section Dịch vụ SpaCao☐ Chưa làm
5Dropdown Booking: đổi sang Bottom Sheet modalCao☐ Chưa làm