US-OWN-20: Xem chi tiết thông tin Merchant

1. Điều kiện tiên quyết (Pre-conditions)

Giao diện Thông tin Tổng quan (Merchant Header)

Ảnh Merchant: Ảnh bìa đại diện cơ sở kinh doanh (Ảnh Avatar).
Tên Merchant: Hiển thị rõ ràng, font chữ nổi bật.
Mô tả (Description): Đoạn giới thiệu ngắn gọn về thế mạnh hoặc phương châm của Merchant.
Thời gian hoạt động: Hiển thị khung giờ mở - đóng cửa (VD: 08:00 - 20:00).
Địa chỉ: Hiển thị đầy đủ địa chỉ. Khi nhấn vào địa chỉ, hệ thống tích hợp mở Google Maps để dẫn đường.
Số điện thoại: Hiển thị Hotline. Khi nhấn vào, hệ thống kích hoạt trình gọi điện (Call) trên điện thoại.

Hệ thống Phân loại Dịch vụ (Tabs)

Phía dưới phần thông tin chung là hệ thống Tab để khách hàng dễ dàng lọc dịch vụ tại cửa hàng:

Tab “Tất cả”: Hiển thị toàn bộ dịch vụ mà Merchant cung cấp.
Tab “Dịch vụ thường”: Chỉ hiển thị các dịch vụ làm đẹp, sức khỏe (Grooming, Spa, Khám bệnh…).
Tab “Dịch vụ lưu trú”: Chỉ hiển thị các dịch vụ liên quan đến trông giữ, khách sạn thú cưng.
Hành vi: Khi chuyển Tab, danh sách Card dịch vụ phía dưới sẽ cập nhật tương ứng theo phân loại.

Card Dịch vụ (Service Card)

Mỗi dịch vụ trong danh sách được hiển thị dưới dạng một Card với các thông tin:

Hình ảnh: 01 ảnh đại diện cho dịch vụ.
Tên dịch vụ: VD: “Tắm sấy trọn gói”, “Cắt tỉa tạo kiểu”.
Thời gian hoàn thành: Hiển thị thời gian ước tính (VD: 30’, 60’, 120’…).
Giá dịch vụ: Hiển thị giá tiền rõ ràng (VD: 200.000đ). Nếu có giá ưu đãi, hiển thị giá gốc (bị gạch ngang) và giá khuyến mãi mới.

Tương tác & Điều hướng (Navigation)

Nút “Đặt chỗ”: Nằm trên Card. Khi nhấn, điều hướng người dùng thẳng đến màn hình Chọn lịch hẹn (US-OWN-09 / US-OWN-10) cho dịch vụ đó.
Chạm vào Card (Vùng ngoài nút): Điều hướng người dùng đến màn hình Chi tiết dịch vụ để xem mô tả chi tiết và quy trình thực hiện.

Empty State (Trạng thái rỗng)

Nếu một Tab (VD: Dịch vụ Lưu trú) không có dữ liệu nào, hiển thị thông báo thân thiện: “Merchant hiện chưa có dịch vụ trong mục này”.