Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Wireframe

Widget Connector
urlhttps://www.figma.com/file/hmRTlfoli7o2W1Y66sfcZx/Sông-Hồng?type=design&node-id=1965%3A30748&mode=design&t=vJI6KqUJOCALtkio-1


Pattern nameYêu cầu User nhập dữ liệuTypeDescriptionAction

Mock data

Note
Tiêu đề(error)Text

Image Modified


Ảnh(error)ImageHình ảnh mô tả thẻ BSL


Tên gói lượt(error)Text
  • Gói 5 lượt
  • Gói 10 lượt
  • Gói 20 lượt



Họ và tên(tick)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

50 chữ cái bao gồm dấu cách

Cảnh báo đỏ nếu nhập sai định dạng

Nếu nhập số hoặc ký tự đặc biệt: "Họ và tên không được bao gồm số và ký tự đặc biệt"

Nếu độ dài không đúng: "Họ và tên có độ dài từ 2-50 ký tự"



Giới tính(tick)Dropdown box
  • Nam 
  • Nữ



Ngày sinh(tick)

Dropdown box

Date time

User chọn ngày tháng năm sinh

Không autofill giá trị 


Image Modified


Email(error)Text

Định dạng: local-

part@domail

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

Cho

Không cho phép sửa



SĐT(error)Number

Định dạng: số

Length: tối đa 11 chữ số

Autofill SĐT của User

Cho

Không cho phép sửa



CCCD(tick)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ý(error)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
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

(tick)

Chỉ yêu cầu nếu tick vào Tick box thẻ vật lý

Number

Định dạng: số

Length: tối đa 11 chữ số




Tỉnh/TP

(tick)

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

(tick)

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ã

(tick)

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

(tick)

Chỉ yêu cầu nếu tick vào Tick box thẻ vật lý

Text

User nhập vào địa chỉ nhận hàng

Length: không giới hạn

Không check logic
Thẻ phụ(error)Tick boxCho phép user lựa chọn đăng ký mở thẻ phụNếu User ấn tick → hiển thị dòng nhập thông tin chủ thẻ phụ


Đơn giá gói lượt(error)Number

Đơn giá theo giá niêm yết


Image Added


Thanh toán(error)Number

Giá trị đơn hàng cần thanh toán

Thanh toán = Đơn giá gói lượt




Button thanh toán(error)Button

User ấn vào button để tiến hành thanh toán

Mặc định: 

Status
colourGreen
titleEnable

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ụ:
bắt buộc điền
thẻ phụ hợp lệ khi KH điển đầy đủ các trường thông tin
nếu User tick vào tick box Mở thẻ phụ
có dấu *
Họ và tên(tick)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

Ngày sinh(tick)

Dropdown box

Date time

User chọn ngày tháng năm sinh

Không autofill giá trị 

Email(tick)Text

Định dạng: local-part@domail.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ự

Hệ thống kiểm tra email đã tồn tại trong hệ thống chưa

Nếu email đã




SĐT(tick)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 đỏ

Image Added

Image Added

Image Added


CCCD(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



Số lượt tối đa(tick)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(tick)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(tick)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 đỏ

Image Removed

SĐT(tick)

Image Added


Image Added


CCCD(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



Số lượt tối đa(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



Thẻ phụ 2
Họ và tên(error)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(error)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 đỏ
Image Removed

Image Added


Image Added


CCCD
(tick)
(error)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(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



Thẻ phụ 3
Họ và tên(error)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(error)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 đỏ
TH2

Image Added


Image Added


CCCD(error)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(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



TH3: Đối với gói
10
20 lượt
Thông tin chủ thẻ phụ: có tối đa
2
5 thẻ phụ.
Bắt buộc nhập vào thông tin của chủ thẻ phụ 1, không bắt buộc nhập thông tin chủ thẻ phụ 2Thẻ phụ 1
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
(tick)
(error)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

Ngày sinh



SĐT
(tick)

Dropdown box

Date time

User chọn ngày tháng năm sinh

Không autofill giá trị 

Email(tick)Text

Định dạng: local-part@domail.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ự

(error)Number

Định dạng: số

Length: tối đa 11 chữ số

Hệ thống kiểm tra

email

SĐT đã tồn tại trong hệ thống chưa

Nếu email đã tồn tại

  • 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 đỏ

Image Added


Image Added


CCCD(error)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 đỏ

Image Removed



Số lượt tối đa(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



Thẻ phụ 5
Họ và tên(error)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
(tick)
(error)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 đỏ

Image Modified

Image Added


CCCD
(tick)
(error)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ưaNếu đã tồn tại

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(tick)Number

Định dạng: số

Length: max 12 chữ số

Không check logic



*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