Skip to main content

User Portal Pages & Menus (ข้อกำหนดรายหน้าจอระบบของลูกค้า)

หน้านี้อธิบายรายละเอียดความต้องการการแสดงผล UI การรับข้อมูล (Inputs) และการตรวจสอบความถูกต้อง (Validations) แยกตามแต่ละหน้าจอและเมนูของระบบจองฝั่งลูกค้า (User Portal) ตามข้อกำหนดในเอกสาร BRD V.1.1

📸 แผนผังหน้าจอและการเชื่อมโยง (Page Flow Map)​

🧭 แถบเมนูนำทางหลัก (Header Navigation Bar)​

หน้ากากด้านบนสุดของเว็บแอปพลิเคชัน (Header) ทำหน้าที่นำทางและเข้าถึงฟังก์ชันพื้นฐานของระบบ

แถบเมนูนำทางหลัก (Header Navigation Bar)

รายละเอียดของแต่ละส่วนบนแถบเมนู (Menu Items Detail)​

เมนู / ปุ่มฟังก์ชันและพฤติกรรมการทำงาน (Function & Behavior)
Chic Car Rent Logoเมื่อคลิกจะนำทางกลับสู่หน้าแรก (Home Page) และรีเซ็ตค่าสถานะการจองเริ่มต้น
Homeนำทางกลับหน้าแรกและรีเซ็ตกล่องค้นหารถเช่า
Promotionsนำทางไปสู่หน้าแคมเปญ ส่วนลด โค้ดคูปอง และสิทธิประโยชน์ของบัตรเครดิตพันธมิตร
Services (Dropdown)แสดงรายการบริการหลัก ได้แก่:
1. Short Term Rental: เช่ารถระยะสั้นสำหรับบุคคลทั่วไป
2. Long Term Rental: บริการเช่ารถระยะยาว/เช่าดำเนินงานสำหรับองค์กร
3. Limousine Service: บริการรถเช่าพร้อมคนขับระดับพรีเมียม
Branchesแสดงข้อมูลสาขาทั้งหมด แผนที่ เวลาเปิด-ปิด เบอร์โทรศัพท์ติดต่อ และรายละเอียดจุดรับ-ส่งรถ
About Chic (Dropdown)แสดงข้อมูลเกี่ยวกับองค์กร ได้แก่:
1. About Us: ความเป็นมาและวิสัยทัศน์ของบริษัท
2. News & Activities: ข่าวสารและกิจกรรมประชาสัมพันธ์
3. Contact Us: ที่ตั้งสำนักงานใหญ่ เบอร์คอลเซ็นเตอร์ และฟอร์มติดต่อกลับ
Manage Bookingปุ่มสำหรับจัดการใบจอง:
• กรณีผู้ใช้ทั่วไป (Guest): เปิดหน้าต่างค้นหาใบจองโดยกรอก Booking Number และเบอร์โทร/อีเมลเพื่อเช็คสถานะ ชำระเงิน หรือขอยกเลิก
• กรณีสมาชิก (Member): จะนำทางเข้าสู่หน้าประวัติการเช่า (Rent History) ทันที
Social Linksลิงก์ช่องทางโซเชียลมีเดียอย่างเป็นทางการของบริษัท (TikTok, Facebook, Instagram, LINE)
• เมื่อกดจะเปิดหน้าเว็บภายนอกบนแท็บใหม่ (target="_blank") เสมอ
• แอดมินสามารถเปิดสลับปิด หรืออัปเดต URL ปลายทางได้จากระบบหลังบ้าน
Language Switcher (ปุ่มภาษา)ตัวเลือกการเปลี่ยนภาษาหลัก (Eng / ไทย)
• แสดงผลรูปธงชาติและรหัสย่อภาษาปัจจุบัน
• เมื่อคลิกจะแสดง Dropdown ให้เลือกสลับภาษา ซึ่งจะเปลี่ยนข้อความทั้งหมด (Labels, Forms, Placeholders) บน UI แบบ Real-time โดยไม่ต้องรีโหลดทั้งหน้า
Register/Loginปุ่มนำไปสู่หน้าป๊อปอัปเข้าสู่ระบบ/สมัครสมาชิก โดยมีระบบรองรับการเข้าใช้ดังนี้ (ดูรายละเอียดหัวข้อการล็อกอินถัดไป)

🔑 ระบบและช่องทางเข้าสู่ระบบ (Authentication Methods)​

ระบบสมัครสมาชิกและล็อกอินรองรับ 3 รูปแบบหลัก เพื่ออำนวยความสะดวกให้แก่ลูกค้าและรองรับกลุ่มนักท่องเที่ยวชาวจีนและต่างชาติ:

  1. ล็อกอินผ่านเบอร์โทรศัพท์ (Mobile OTP): กรอกเบอร์มือถือหลักเพื่อรับรหัสผ่าน OTP 6 หลักทาง SMS ในการยืนยันตัวตนเข้าระบบอย่างรวดเร็ว
  2. ล็อกอินผ่านอีเมล (Email & Password): วิธีการลงทะเบียนแบบดั้งเดิม เหมาะสำหรับสมาชิกประจำหรือลูกค้าองค์กร
  3. ระบบล็อกอินทางโซเชียล (Social Sign-On / SSO):
    • LINE Login & Facebook Login: ช่องทางหลักที่เชื่อมโยง API ของโซเชียล ยืนยันตัวตนสำเร็จในคลิกเดียว
    • WeChat Login & WhatsApp Login: ตัวเลือกเสริมสำหรับลูกค้านักท่องเที่ยวจีนและต่างชาติ (ในระบบเบื้องต้น หาก API OAuth2 ไม่รองรับในบางประเทศ จะมีขั้นตอน fallback ให้ใช้การยืนยันรหัสผ่านทางอีเมล/เบอร์โทรศัพท์พร้อมแจ้งเตือนแทน)

1. หน้าหลัก (Home Page)​

หน้าแรกที่ผู้ใช้ทั่วไปและสมาชิกเข้าถึง เพื่อดูข้อมูลบริการและเริ่มทำการค้นหารถเช่า

ส่วนประกอบของหน้าจอ (UI Components)​

  1. Search Widget (กล่องค้นหา):
    • Dropdown เลือกสาขารับรถ (Pickup Branch) และสาขาคืนรถ (Return Branch)
    • Date & Time Picker เลือกวันเวลาที่รับ (Pickup Date/Time) และคืนรถ (Return Date/Time)
    • ช่องกรอกรหัสโปรโมชั่น (Promotion/CDP Code)
    • ปุ่มกด "ค้นหารถยนต์ (Search)"
  2. Promotional Banner (ป้ายโปรโมชั่น): แสดงป้าย Banner ภาพสไลด์ (Carousel) ส่วนลดหรือแคมเปญปัจจุบัน
  3. Car Fleet Categories (หมวดหมู่รถยนต์): แถบเลือกประเภทรถยนต์ (Sedan, SUV, Van)
  4. Static Sections:
    • About Us: ข้อมูลเบื้องต้นเกี่ยวกับ Prime Car Rent
    • Our Services: ข้อมูลบริการและเงื่อนไขหลัก
    • Testimonials: ส่วนแสดงรีวิวคะแนนความพึงพอใจของลูกค้า

การตรวจสอบความถูกต้อง (Validations)​

  • วันและเวลาคืนรถต้องเป็นเวลาหลังจากวันเวลารับรถเสมอ
  • สาขารับและคืนรถต้องอยู่ในสถานะ Active ในระบบหลังบ้าน

2. หน้าผลการค้นหารถ (Search Results Page)​

หน้าแสดงรายการรถยนต์ที่ว่างตามเงื่อนไขวันและเวลาที่ลูกค้าเลือกค้นหา

ส่วนประกอบของหน้าจอ (UI Components)​

  1. Filter Panel (แถบตัวกรอง):
    • ประเภทรถ (Car Class): SUV, Sedan, Van
    • ระบบเกียร์ (Transmission): Auto, Manual
    • ประเภทเชื้อเพลิง (Fuel): Gasoline, Diesel, Hybrid, Electric
    • ช่วงราคาค่าเช่าต่อวัน (Price Range Slider): ขั้นต่ำสุด - สูงสุด
  2. Car Listings (รายการรถเช่า):
    • การ์ดรถแต่ละคันแสดงข้อมูล: ภาพรถ, รุ่นรถ, คุณลักษณะ (เกียร์, จำนวนที่นั่ง, ขนาดกระเป๋าเดินทาง, ประเภทน้ำมัน)
    • ราคาต่อวัน (Price per Day) และราคารวมรวมภาษี (Total Price inc. VAT)
    • ป้ายบอกสถานะความพร้อมรถ:
      • Available: แสดงปุ่ม "จองรถคันนี้ (Book Now)" ในสถานะ Active
      • Unavailable: ป้ายสีเทา ปิดการกดปุ่มจอง (Disabled) เมื่อ Allotment จาก CarPro เป็น 0
  3. ปุ่มขอจองพิเศษ (Request Now): แสดงเมื่อการค้นหาไม่มีรถว่างเลยตามข้อกำหนด (ดูรายละเอียดข้อ 2.1)

2.1 หน้าต่างขอจองพิเศษ (Request Now Form)​

กรณีค้นหารถแล้วขึ้นป้าย "Unavailable" หรือไม่พบรถว่างในช่วงเวลานั้น ระบบจะแสดงหน้าต่าง Pop-up ให้ผู้ใช้กรอกข้อมูลส่งคำขอมาทางอีเมลเพื่อให้ฝ่าย Reservations ติดต่อกลับ

  • ข้อมูลที่ต้องรับ (Inputs): ชื่อ-นามสกุล, เบอร์โทรศัพท์, อีเมล, สาขารับ-คืนรถ, วันเวลารับ-คืนรถ, ประเภทรถที่ต้องการ
  • การส่งข้อมูล: ยิงส่งอีเมลไปยัง reservations@chiccarrent.com แบบอัตโนมัติ

3. หน้ากรอกข้อมูลคนขับ & บริการเสริม (Booking Details Page)​

หน้าจอรับข้อมูลและพิสูจน์ตัวตนของผู้เช่า รวมถึงระบุการเลือกซื้อผลิตภัณฑ์เพิ่มเติม

ส่วนประกอบของหน้าจอ (UI Components)​

  1. Tenant Details (ข้อมูลผู้ติดต่อ): ช่องกรอก ชื่อ-นามสกุล, เบอร์โทรศัพท์, อีเมลผู้จอง
  2. Driver Selection (ผู้ขับขี่):
    • ปุ่มเลือก (Radio) "ผู้จองขับรถเอง (Self-Driver)": ระบบจะนำข้อมูลบัญชีสมาชิกมากรอกให้อัตโนมัติ (Auto-fill)
    • ปุ่มเลือก (Radio) "ผู้อื่นเป็นผู้ขับ (Other Driver)": แสดงช่องให้กรอกข้อมูลเพิ่มเติม ได้แก่ ชื่อ-นามสกุล, เบอร์โทรศัพท์, และเลขใบขับขี่ของผู้ขับจริง
  3. Add-on Services Selection (การเลือกซื้อประกันและบริการเสริม):
    • รายการแบบเลือกติ๊ก (Checkbox) และระบุจำนวน (Quantity) พร้อมรายละเอียดและอัตราค่าบริการของ Add-on แต่ละประเภท (CDW, SCDW, Baby Seat ฯลฯ)
    • ระบบคำนวณราคาแบบ Real-time เมื่อกดยื่นเลือกเพิ่ม

4. หน้าทบทวนราคาและเลือกวิธีชำระเงิน (Review & Payment Page)​

หน้าจอสรุปรายละเอียดราคาทั้งหมดก่อนชำระเงินจริง และดำเนินการชำระเงินผ่าน Gateway

ส่วนประกอบของหน้าจอ (UI Components)​

  1. Price Summary Sidebar (กล่องสรุปราคารวม):
    • ราคาค่าเช่ารถยนต์ (ราคาแยก VAT และราคาสุทธิ)
    • รายการและราคาค่าบริการเสริม (Add-ons) ทั้งหมดที่เลือกซื้อ
    • ค่าธรรมเนียมคืนรถต่างสาขา (OWR Fee - ถ้ามี)
    • ยอดรวมภาษีมูลค่าเพิ่ม (VAT 7%)
    • ยอดรวมสุทธิที่ต้องชำระ (Grand Total)
  2. Acceptance Box: กล่องติ๊กยอมรับข้อตกลงและนโยบายความเป็นส่วนตัว (Terms & Conditions and Privacy Policy Acceptance Checkbox) หากไม่กดจะไม่สามารถกดจ่ายเงินได้
  3. Payment Methods (ช่องทางการชำระเงิน):
    • Credit/Debit Card: ช่องกรอกข้อมูลบัตรเครดิต (เลขบัตร, ชื่อผู้ถือบัตร, วันหมดอายุ, CVV) เชื่อมโยง Gateway
    • PromptPay QR Code: แสดงรูปภาพ QR Code พร้อมแสดง นาฬิกานับถอยหลัง 30 นาที (Countdown Timer) หากชำระไม่ทันภายในเวลา ระบบจะปรับใบจองเป็น Expired และยกเลิกสิทธิ์จองทันที

5. หน้าแสดงความสำเร็จ (Booking Confirmation Page)​

แสดงสถานะหลังจากระบบได้รับผลยืนยันการชำระเงินสำเร็จ (Payment webhook)

ส่วนประกอบของหน้าจอ (UI Components)​

  • ไอคอนชำระเงินสำเร็จ (Success Icon)
  • หมายเลขการจอง (Booking Number) เช่น CCR202605-0012
  • รายละเอียดการจองย่อ: รุ่นรถ, สาขารับ-คืน, วันเวลาที่จอง
  • ข้อความชี้แจง: "ระบบส่งใบยืนยันการจองเรียบร้อยแล้วไปที่อีเมล/SMS ของคุณ"
  • ปุ่มกด "ไปที่หน้าประวัติการจอง" และ "กลับหน้าหลัก"

6. หน้าข้อมูลส่วนตัวสมาชิก (Profile Management Page)​

หน้าจัดการข้อมูลส่วนตัวของผู้ใช้ (แสดงสิทธิ์เฉพาะผู้ใช้ที่เข้าสู่ระบบแบบสมาชิก)

ส่วนประกอบของหน้าจอ (UI Components)​

  1. Personal Information Form (ฟอร์มข้อมูลส่วนตัว): ชื่อ-นามสกุล, เบอร์โทรศัพท์, อีเมลหลัก, ที่อยู่ติดต่อ
  2. Driver's License Upload (การแนบใบขับขี่):
    • พื้นที่ลากวางอัปโหลดไฟล์ (Drag-and-Drop file uploader) รองรับไฟล์รูปภาพ (JPG, PNG) และ PDF
    • การตรวจสอบ (Validations): จำกัดขนาดไฟล์ไม่เกิน 5MB ตรวจสอบนามสกุลไฟล์ หากไฟล์ไม่ถูกต้องแสดงกล่องข้อความสีแดงแจ้งเตือนทันที
  3. Account Linking & Merge (การผูกบัญชี):
    • แสดงสถานะรายการเชื่อมต่อ (Linked Accounts) เช่น LINE: Linked, Facebook: Not Linked
    • ปุ่มกด "เชื่อมต่อบัญชีเสริม (Link Account)"
    • ปุ่มกด "รวมบัญชี (Merge Accounts)" ในกรณีที่ระบบหลังบ้านตรวจพบหมายเลขโทรศัพท์หรืออีเมลซ้ำซ้อนกันระหว่างบัญชี
  4. Saved Cards: รายการข้อมูลบัตรเครดิตที่ลูกค้าเคยบันทึกไว้ และปุ่มสำหรับกดลบบัตรออก

7. หน้าประวัติการเช่า (Rent History Page)​

หน้ารวมรายการจองทั้งหมดที่สมาชิกเคยทำรายการไว้ในอดีตและปัจจุบัน

ส่วนประกอบของหน้าจอ (UI Components)​

  1. Filter Tabs (แถบกรองสถานะ):
    • แถบแสดงใบจองทั้งหมด (All)
    • แถบกำลังใช้งานอยู่ (Ongoing)
    • แถบการเช่าสำเร็จสิ้นสุดแล้ว (Completed)
    • แถบที่ยกเลิกไปแล้ว (Canceled)
  2. Date Range Picker (กรองช่วงเวลา): กรองรายการด้วยช่วงเวลา เช่น ย้อนหลัง 3 เดือน หรือ ระบุวันเวลาที่เริ่ม-สิ้นสุด
  3. Booking Cards List (รายการการจอง):
    • หมายเลขการจอง, วันรับ-คืนรถ, สถานที่รับ-คืน, ยอดรวมเงินค่าเช่า
    • ป้ายแสดงสถานะสถานะการจองตามจริง
    • Action Buttons (ปุ่มการจัดการใบจอง):
      • ปุ่มดูรายละเอียด (View Details): แสดงรายการใบจองและราคาค่าเช่า
      • ปุ่มแก้ไขการจอง (Modify Booking): แสดงและให้กดได้ต่อเมื่อระยะเวลาปัจจุบันห่างจากเวลารับรถอย่างน้อย 24 ชั่วโมง
      • ปุ่มยกเลิกการจอง (Cancel Booking): แสดงและให้กดได้เมื่อสถานะการจองเป็น Confirm และห่างจากเวลารับรถไม่น้อยกว่า 24 ชั่วโมง

7.1 หน้าต่างแก้ไขการจอง (Modify Booking Modal/Page)​

แสดงฟอร์มที่อนุญาตให้แก้ไข ข้อมูลผู้ขับขี่, วันเวลารับ-คืนรถ และสถานที่รับ-คืนรถ โดยระบบจะพาเข้าสู่ขั้นตอนยืนยันและชำระเงินส่วนต่าง (ถ้ามีราคาเพิ่มขึ้น) ตามเงื่อนไขการแก้ไขการจอง

7.2 หน้าต่างยกเลิกการจอง (Cancel Booking Pop-up)​

  • แสดงฟิลด์บังคับกรอกเหตุผลการยกเลิก (Cancellation Reason)
  • คำนวณค่าธรรมเนียมและยอดเงินที่จะได้รับคืนแสดงให้ลูกค้าตัดสินใจก่อนยืนยันกดยกเลิก