Màn hình khách và slideshow

import { Aside } from ‘@astrojs/starlight/components’;

Phiên bản tiếng Anh

Settings — customer display & slideshow — English

Tình huống sử dụng

Cửa hàng có 1 màn hình phụ (màn hình khách) quay về phía khách để hiển thị:

• Slideshow banner — quảng cáo sản phẩm đang khuyến mãi, giờ mở cửa, thông điệp cửa hàng.
• Đơn đang thanh toán — tổng tiền, mặt hàng (khi cashier bấm Thẻ).

Bài viết này cho chủ cửa hàng cấu hình banner + (tùy chọn) màn hình phụ qua Electron.

Source: apps/vendor-web/src/app/point-of-sale/pages/settings/settings-slideshow-page.tsx + <PosCustomerDisplayBannerSetup>.

Hình: Trang Slideshow — editor banner <PosCustomerDisplayBannerSetup>, nút Sync + Edit, preview tối đa 4 ảnh. Spec owner: cashier-screenshots.spec.ts → "settings — slideshow (banner setup)".

Truy cập

Từ shell Thu ngân → Cài đặt → Slideshow (/point-of-sale/settings/slideshow).

Mục này hiển thị cho cashier có pos ghi (xem Tổng quan cài đặt).

Cấu hình banner (4 bước)

Bước 1 — Chọn banner trong cửa hàng

<PosCustomerDisplayBannerSetup> tìm banner theo tiêu đề cố định CUSTOMER_DISPLAY_BANNER_TITLE (định nghĩa trong @indochina/shared) trong cửa hàng active. Hệ thống tự đảm bảo banner này tồn tại qua hook useEnsureCustomerDisplayBanner.

Bước 2 — Mở editor

Nếu cashier có quyền store hoặc product ghi (canEditBanners), click “Sửa banner” để mở <BannerModal> — upload ảnh / chỉnh nội dung.

Nếu chưa có banner, hệ thống tự tạo 1 banner placeholder. Bạn có thể upload ảnh ngay trong POS session mà không phải qua Dashboard.

Bước 3 — Upload ảnh slideshow

Trong editor, kéo-thả hoặc chọn nhiều ảnh (slider). Hệ thống dùng parseBannerSliderImages(displayBanner.data, displayBanner.image) để tách thành slideshow.

Cấu hình slide tối đa 4 ảnh preview hiển thị trong card.

Bước 4 — Đồng bộ với desktop

Nếu cùng banner đang chạy trên Vendor Desktop, click “Đồng bộ” (syncMutation) — gọi pullCustomerDisplayBannersFromServer({ storeId, isElectronRuntime }) để pull data từ server về local.

Nút Đồng bộ bị disable khi `!serverOnline` hoặc chưa chọn cửa hàng.

Quyền truy cập

Quyền	Hành vi
store đọc HOẶC product đọc	Thấy banner (chế độ xem)
store ghi HOẶC product ghi	Thấy nút Sửa banner
Không có quyền store/product	Card thay bằng dòng “noModuleAccess”

Màn hình phụ (Electron)

PointOfSaleElectronDisplaySettings (hiển thị đầu hub cài đặt) cho phép cấu hình màn hình phụ trên Vendor Desktop:

• Mở / đóng cửa sổ màn hình khách trên display thứ 2.
• Chọn display nào sẽ nhận slideshow.
• Hiển thị preview trong panel.

Kết quả mong đợi

• Trên màn hình khách: slideshow các ảnh banner xoay vòng tự động khi cashier không bán.
• Trong lúc thanh toán thẻ: màn hình khách chuyển sang panel đơn hàng (customer-display-panel.tsx) — hiển thị tổng tiền, danh sách hàng, yêu cầu khách quẹt thẻ.

Lỗi thường gặp

Triệu chứng	Xử lý
Card banner trống / không tải	Chọn cửa hàng active trên top bar
Editor không hiện nút “Sửa banner”	Cashier thiếu store/product ghi — chủ cấp quyền
Banner cập nhật nhưng desktop không đổi	Click Đồng bộ trên card; kiểm tra Vendor Desktop đang chạy
Slideshow không xoay	Kiểm tra panel màn hình phụ trên Electron — có thể đang ở chế độ chờ
Ảnh banner mờ	Dùng PNG ≥ 1080p; tỉ lệ khuyến nghị 16:9 cho màn ngang

Xem thêm

• Tổng quan cài đặt
• Bán — thẻ & terminal
• Customer display architecture (kỹ thuật)