Wireframe

Pattern name	Type	Description	Action	Note
Tiêu đề	Text
Ảnh	Image	Hình ảnh mô tả thẻ BSL
Tên gói lượt	Text	Gói 5 lượt Gói 10 lượt Gói 20 lượt
Họ và tên	Text	Họ và tên chủ thẻ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
Giới tính	Dropdown box	Nam Nữ
Ngày sinh	Dropdown box Date time	User chọn ngày tháng năm sinh Không autofill giá trị
Email	Text	Định dạng: local-part@domain.com Local part length: max 64 ký tự bao gồm chữ cái La-tinh, số 0-9 và các ký tự: gạch dưới, chấm, gạch ngang Email length: max 255 ký tự	Autofill email của User Không cho phép sửa
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Autofill SĐT của User Không cho phép sửa
CCCD	Number	Định dạng: số Length: max 12 chữ số	Hệ thống kiểm tra số CCCD đã tồn tại trong hệ thống chưa Nếu đã tồn tại → cảnh báo, chuyển màu đỏ
~~Tick box thẻ vật lý~~	~~Tick box~~	~~Cho phép user lựa chọn đăng ký nhận thẻ vật lý~~ ~~Default: không tick~~	~~Nếu User ấn tick → hiển thị/enable dòng nhập thông tin vận chuyển~~
Thẻ vật lý: Khách hàng luôn luôn được phát hành 1 thẻ vật lý khi đăng ký hội viên lần đầu tiên
SĐT nhận hàng	Number	Định dạng: số Length: tối đa 11 chữ số
Tỉnh/TP	Dropdown box	Danh sách các tỉnh/TP của Việt Nam	Hiển thị đầy đủ danh sách các tỉnh/TP của Việt Nam
Quận/huyện	Dropdown box	Danh sách quận/huyện	Hiển thị đầy đủ danh sách quận huyện của tỉnh/TP tương ứng đã lựa chọn ở ô trên
Phường/xã	Dropdown box	Danh sách phường/xã	Hiển thị đầy đủ danh sách phường/xã của quận/huyện tương ứng đã lựa chọn ở ô trên
Địa chỉ nhận hàng	Text	User nhập vào địa chỉ nhận hàng Length: không giới hạn	Không check logic
Đơn giá gói lượt	Number	Đơn giá theo giá niêm yết
Thanh toán	Number	Giá trị đơn hàng cần thanh toán Thanh toán = Đơn giá gói lượt
Button thanh toán	Button	User ấn vào button để tiến hành thanh toán	Mặc định: Khi User ấn vào button, BE thực hiện khởi tạo đơn hàng và khởi tạo giao dịch Ghi nhận trạng thái đơn hàng: Chưa thanh toán	Nếu Đơn hàng được ghi nhận trạng thái Đã thanh toán → gửi thông tin đơn hàng sang CVN → CVN cập nhật thông tin hội viên, gửi lại thông tin cho Popp → hiển thị lên app
Thẻ phụ		Sau khi thanh toán thành công, hiển thị Pop-up cho phép đăng ký thẻ phụ. KH có thể không đăng ký thẻ phụ ngay tại thời điểm đó.
*TH1: Đối với gói 5 lượt*
Thông tin chủ thẻ phụ: chỉ có 1 thẻ phụ - 1 chủ thẻ phụ: thẻ phụ hợp lệ khi KH điển đầy đủ các trường thông tin có dấu *
Họ và tên	Text	Họ và tên chủ thẻ phụ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Hệ thống kiểm tra SĐT đã tồn tại trong hệ thống chưa TH1: SĐT có tồn tại Nếu SĐT đã gắn với thẻ BSL → cảnh báo, chuyển màu đỏ Nếu SĐT đã gắn với thẻ phụ → cảnh báo, chuyển màu đỏ TH2: SĐT không tồn tại → cảnh báo, chuyển màu đỏ
CCCD	Number	Định dạng: số Length: max 12 chữ số	Không check logic
*TH2: Đối với gói 10 lượt*
Thông tin chủ thẻ phụ: có tối đa 3 thẻ phụ. Thẻ phụ hợp lệ khi KH điển đầy đủ các trường thông tin có dấu của 1 thẻ*
Thẻ phụ 1
Họ và tên	Text	Họ và tên chủ thẻ phụ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Hệ thống kiểm tra SĐT đã tồn tại trong hệ thống chưa TH1: SĐT có tồn tại Nếu SĐT đã gắn với thẻ BSL → cảnh báo, chuyển màu đỏ Nếu SĐT đã gắn với thẻ phụ → cảnh báo, chuyển màu đỏ TH2: SĐT không tồn tại → cảnh báo, chuyển màu đỏ
CCCD	Number	Định dạng: số Length: max 12 chữ số	Không check logic
Số lượt tối đa
Thẻ phụ 2
Họ và tên	Text	Họ và tên chủ thẻ phụ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Hệ thống kiểm tra SĐT đã tồn tại trong hệ thống chưa TH1: SĐT có tồn tại Nếu SĐT đã gắn với thẻ BSL → cảnh báo, chuyển màu đỏ Nếu SĐT đã gắn với thẻ phụ → cảnh báo, chuyển màu đỏ Hệ thống kiểm tra SĐT trùng lặp với SĐT chủ thẻ 1, nếu SĐT trùng lặp → cảnh báo, chuyển màu đỏ TH2: SĐT không tồn tại → cảnh báo, chuyển màu đỏ
CCCD	Number	Định dạng: số Length: max 12 chữ số	Hệ thống kiểm tra số CCCD trùng lặp với CCCD chủ thẻ 1 Nếu trùng lặp → cảnh báo, chuyển màu đỏ
Số lượt tối đa
Thẻ phụ 3
Họ và tên	Text	Họ và tên chủ thẻ phụ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Hệ thống kiểm tra SĐT đã tồn tại trong hệ thống chưa TH1: SĐT có tồn tại Nếu SĐT đã gắn với thẻ BSL → cảnh báo, chuyển màu đỏ Nếu SĐT đã gắn với thẻ phụ → cảnh báo, chuyển màu đỏ Hệ thống kiểm tra SĐT trùng lặp với SĐT chủ thẻ 1&2, nếu SĐT trùng lặp → cảnh báo, chuyển màu đỏ TH2: SĐT không tồn tại → cảnh báo, chuyển màu đỏ
CCCD	Number	Định dạng: số Length: max 12 chữ số	Hệ thống kiểm tra số CCCD trùng lặp với CCCD chủ thẻ 1&2 Nếu trùng lặp → cảnh báo, chuyển màu đỏ
Số lượt tối đa
*TH3: Đối với gói 20 lượt*
Thông tin chủ thẻ phụ: có tối đa 5 thẻ phụ. Thẻ phụ hợp lệ khi KH điển đầy đủ các trường thông tin có dấu của 1 thẻ*
Thẻ phụ 1 (logic như trên)
Thẻ phụ 2 (logic như trên)
Thẻ phụ 3 (logic như trên)
Thẻ phụ 4
Họ và tên	Text	Họ và tên chủ thẻ phụ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Hệ thống kiểm tra SĐT đã tồn tại trong hệ thống chưa TH1: SĐT có tồn tại Nếu SĐT đã gắn với thẻ BSL → cảnh báo, chuyển màu đỏ Nếu SĐT đã gắn với thẻ phụ → cảnh báo, chuyển màu đỏ Hệ thống kiểm tra SĐT trùng lặp với SĐT chủ thẻ 1&2&3, nếu SĐT trùng lặp → cảnh báo, chuyển màu đỏ TH2: SĐT không tồn tại → cảnh báo, chuyển màu đỏ
CCCD	Number	Định dạng: số Length: max 12 chữ số	Hệ thống kiểm tra số CCCD trùng lặp với CCCD chủ thẻ 1,2,3 Nếu trùng lặp → cảnh báo, chuyển màu đỏ
Số lượt tối đa
Thẻ phụ 5
Họ và tên	Text	Họ và tên chủ thẻ phụ Định dạng: chữ cái La tinh Không bao gồm số và ký tự đăng biệt Length: từ 2 đến 32 chữ cái bao gồm dấu cách
SĐT	Number	Định dạng: số Length: tối đa 11 chữ số	Hệ thống kiểm tra SĐT đã tồn tại trong hệ thống chưa TH1: SĐT có tồn tại Nếu SĐT đã gắn với thẻ BSL → cảnh báo, chuyển màu đỏ Nếu SĐT đã gắn với thẻ phụ → cảnh báo, chuyển màu đỏ Hệ thống kiểm tra SĐT trùng lặp với SĐT chủ thẻ 1,2,3,4, nếu SĐT trùng lặp → cảnh báo, chuyển màu đỏ TH2: SĐT không tồn tại → cảnh báo, chuyển màu đỏ
CCCD	Number	Định dạng: số Length: max 12 chữ số	Hệ thống kiểm tra số CCCD trùng lặp với CCCD chủ thẻ 1,2,3,4 Nếu trùng lặp → cảnh báo, chuyển màu đỏ
Số lượt tối đa
*Lưu ý: Hệ thống ghi nhận đăng ký thẻ phụ hợp lệ khi User điền đủ tất cả các trường thông tin của thẻ phụ bao gồm: Họ và tên, SĐT, CCCD