forked from UKSOURCE/hailearning.edu.vn
feat: UI appointment contact pricing page
This commit is contained in:
LNHA
@@ -1,501 +1,487 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import appointmentData from "./appointment.json";
|
||||
import { useState, useEffect, FormEvent } from "react";
|
||||
|
||||
// Types for appointment data from CMS
|
||||
interface AppointmentHero {
|
||||
title: string;
|
||||
backgroundImage: string;
|
||||
subtitle: string;
|
||||
heading: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface AppointmentForm {
|
||||
heading: string;
|
||||
fields: Array<{
|
||||
name: string;
|
||||
label: string;
|
||||
type: string;
|
||||
placeholder: string;
|
||||
required: boolean;
|
||||
colClass: string;
|
||||
}>;
|
||||
submitButton: {
|
||||
text: string;
|
||||
icon: string;
|
||||
buttonClass: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface AppointmentData {
|
||||
hero: AppointmentHero;
|
||||
visaOptions: string[];
|
||||
form: AppointmentForm;
|
||||
}
|
||||
|
||||
export default function AppointmentPage() {
|
||||
const [selectedType, setSelectedType] = useState("consultation");
|
||||
const [selectedConsultant, setSelectedConsultant] = useState("");
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const [selectedTime, setSelectedTime] = useState("");
|
||||
const [selectedOffice, setSelectedOffice] = useState("online");
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||||
|
||||
const [appointmentData, setAppointmentData] = useState<AppointmentData | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: "",
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
visaType: "",
|
||||
country: "",
|
||||
travelDate: "",
|
||||
previousVisa: "",
|
||||
notes: "",
|
||||
address: "",
|
||||
appointmentDate: "",
|
||||
message: "",
|
||||
visaTypes: [] as string[],
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState<{
|
||||
type: "success" | "error" | null;
|
||||
message: string;
|
||||
}>({ type: null, message: "" });
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>,
|
||||
// Calendar state
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
|
||||
|
||||
// Calendar helper functions
|
||||
const months = [
|
||||
"January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"
|
||||
];
|
||||
|
||||
const getDaysInMonth = (year: number, month: number) => {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
};
|
||||
|
||||
const getFirstDayOfMonth = (year: number, month: number) => {
|
||||
const day = new Date(year, month, 1).getDay();
|
||||
// Convert Sunday (0) to 7 for Monday-first calendar
|
||||
return day === 0 ? 7 : day;
|
||||
};
|
||||
|
||||
const generateCalendarDays = () => {
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
const daysInMonth = getDaysInMonth(year, month);
|
||||
const firstDay = getFirstDayOfMonth(year, month);
|
||||
const today = new Date();
|
||||
|
||||
const days: React.ReactNode[] = [];
|
||||
|
||||
// Empty cells for days before the first day of the month
|
||||
for (let i = 1; i < firstDay; i++) {
|
||||
days.push(<div key={`empty-${i}`} className="date empty"></div>);
|
||||
}
|
||||
|
||||
// Days of the month
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const isToday =
|
||||
day === today.getDate() &&
|
||||
month === today.getMonth() &&
|
||||
year === today.getFullYear();
|
||||
|
||||
days.push(
|
||||
<div
|
||||
key={day}
|
||||
className={`date ${isToday ? "today active" : ""}`}
|
||||
onClick={() => handleDateClick(year, month, day)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return days;
|
||||
};
|
||||
|
||||
const handleDateClick = (year: number, month: number, day: number) => {
|
||||
const selectedDate = new Date(year, month, day);
|
||||
const formattedDate = selectedDate.toISOString().split("T")[0];
|
||||
setFormData((prev) => ({ ...prev, appointmentDate: formattedDate }));
|
||||
};
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
|
||||
};
|
||||
|
||||
const handleNextMonth = () => {
|
||||
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
|
||||
};
|
||||
|
||||
// Fetch appointment data from CMS
|
||||
useEffect(() => {
|
||||
const fetchAppointmentData = async () => {
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/appointment`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success && result.data) {
|
||||
setAppointmentData(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching appointment data:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAppointmentData();
|
||||
}, [apiUrl]);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (visaType: string, checked: boolean) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
visaTypes: checked
|
||||
? [...prev.visaTypes, visaType]
|
||||
: prev.visaTypes.filter((v) => v !== visaType),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Appointment booked:", {
|
||||
type: selectedType,
|
||||
consultant: selectedConsultant,
|
||||
date: selectedDate,
|
||||
time: selectedTime,
|
||||
office: selectedOffice,
|
||||
...formData,
|
||||
});
|
||||
alert(
|
||||
"Đặt lịch thành công! Chúng tôi sẽ liên hệ xác nhận trong thời gian sớm nhất.",
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus({ type: null, message: "" });
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/appointment/submit`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.success) {
|
||||
setSubmitStatus({
|
||||
type: "success",
|
||||
message: data.message || "Thank you! Your appointment has been submitted.",
|
||||
});
|
||||
// Reset form
|
||||
setFormData({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
address: "",
|
||||
appointmentDate: "",
|
||||
message: "",
|
||||
visaTypes: [],
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus({
|
||||
type: "error",
|
||||
message: data.error || "Something went wrong. Please try again.",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Submit error:", error);
|
||||
setSubmitStatus({
|
||||
type: "error",
|
||||
message: "Network error. Please check your connection and try again.",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Get data with fallbacks
|
||||
const hero = appointmentData?.hero || {
|
||||
title: "Make Appointment",
|
||||
backgroundImage: "/assets/img/inner-page/breadcrumb.jpg",
|
||||
subtitle: "About Our Consultancy",
|
||||
heading: "Want to meet us for your need?",
|
||||
description: "24/7 customer support is always ready to answer all your questions",
|
||||
};
|
||||
|
||||
const visaOptions = appointmentData?.visaOptions || [
|
||||
"Canada Immigration",
|
||||
"Tourist Visa",
|
||||
"Medical Visa",
|
||||
"Coaching",
|
||||
"Student Visa",
|
||||
"Spouse Visa",
|
||||
"Job Opportunity",
|
||||
"Exam",
|
||||
];
|
||||
|
||||
const formSettings = appointmentData?.form || {
|
||||
heading: "Request Appointment",
|
||||
submitButton: {
|
||||
text: "Request Appointment",
|
||||
icon: "fa-solid fa-arrow-right",
|
||||
buttonClass: "theme-btn",
|
||||
},
|
||||
};
|
||||
|
||||
// Get background image URL
|
||||
const backgroundImage = hero.backgroundImage?.startsWith("http")
|
||||
? hero.backgroundImage
|
||||
: hero.backgroundImage?.startsWith("/")
|
||||
? hero.backgroundImage
|
||||
: `/assets/img/inner-page/breadcrumb.jpg`;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="loading-wrapper" style={{ minHeight: "50vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const toggleFaq = (index: number) => {
|
||||
setOpenFaq(openFaq === index ? null : index);
|
||||
};
|
||||
|
||||
const selectedAppointmentType = appointmentData.appointmentTypes.find(
|
||||
(type) => type.id === selectedType,
|
||||
);
|
||||
const selectedConsultantData = appointmentData.consultants.find(
|
||||
(c) => c.id === selectedConsultant,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{appointmentData.title}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
{appointmentData.subtitle}
|
||||
</p>
|
||||
|
||||
{/* Benefits */}
|
||||
<div className="grid md:grid-cols-4 gap-6 max-w-4xl mx-auto">
|
||||
{appointmentData.hero.benefits.map((benefit, index) => (
|
||||
<div key={index} className="bg-blue-50 p-4 rounded-lg">
|
||||
<p className="text-blue-800 font-medium">{benefit}</p>
|
||||
</div>
|
||||
))}
|
||||
<>
|
||||
{/* Breadcrumb-Wrapper Section Start */}
|
||||
<section
|
||||
className="breadcrumb-wrapper fix bg-cover"
|
||||
style={{ backgroundImage: `url(${backgroundImage})` }}
|
||||
>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/inner-page/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">{hero.title}</h1>
|
||||
<ul className="breadcrumb-list">
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</li>
|
||||
<li>{hero.title}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* Booking Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
Đặt Lịch Hẹn
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Appointment Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Loại tư vấn <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{appointmentData.appointmentTypes.map((type) => (
|
||||
<div
|
||||
key={type.id}
|
||||
className={`border rounded-lg p-4 cursor-pointer transition-colors ${
|
||||
selectedType === type.id
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedType(type.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-3">{type.icon}</span>
|
||||
<div>
|
||||
<h3 className="font-semibold">{type.name}</h3>
|
||||
{type.popular && (
|
||||
<span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
|
||||
Phổ biến
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-bold text-blue-600">
|
||||
{type.price}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{type.duration}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm">
|
||||
{type.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
{/* Appointment Section Start */}
|
||||
<section className="appointment-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="appointment-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="appointment-content">
|
||||
<div className="section-title mb-0">
|
||||
{hero.subtitle && (
|
||||
<span className="sub-title-2">{hero.subtitle}</span>
|
||||
)}
|
||||
{hero.heading && (
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{hero.heading}
|
||||
</h2>
|
||||
)}
|
||||
</div>
|
||||
<h5>Have any questions?</h5>
|
||||
{hero.description && <p>{hero.description}</p>}
|
||||
</div>
|
||||
|
||||
{/* Consultant Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Chọn chuyên gia
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className={`border rounded-lg p-4 cursor-pointer transition-colors ${
|
||||
selectedConsultant === ""
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedConsultant("")}
|
||||
>
|
||||
<div className="font-medium">
|
||||
Để chúng tôi chọn chuyên gia phù hợp
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
Dựa trên loại visa và quốc gia bạn quan tâm
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="calendar">
|
||||
<div className="calendar-header">
|
||||
<h2 id="month-year">{months[currentDate.getMonth()]} {currentDate.getFullYear()}</h2>
|
||||
<div>
|
||||
<button type="button" onClick={handlePrevMonth}><</button>
|
||||
<button type="button" onClick={handleNextMonth}>></button>
|
||||
</div>
|
||||
|
||||
{appointmentData.consultants.map((consultant) => (
|
||||
<div
|
||||
key={consultant.id}
|
||||
className={`border rounded-lg p-4 cursor-pointer transition-colors ${
|
||||
selectedConsultant === consultant.id
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedConsultant(consultant.id)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mr-4">
|
||||
<span className="text-gray-600">👤</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold">
|
||||
{consultant.name}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{consultant.title}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<span className="mr-2">
|
||||
⭐ {consultant.rating}
|
||||
</span>
|
||||
<span className="mr-2">
|
||||
({consultant.reviews} đánh giá)
|
||||
</span>
|
||||
<span>{consultant.experience}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date & Time */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Ngày hẹn <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
<div className="days">
|
||||
<div>Mon</div>
|
||||
<div>Tue</div>
|
||||
<div>Wed</div>
|
||||
<div>Thu</div>
|
||||
<div>Fri</div>
|
||||
<div>Sat</div>
|
||||
<div>Sun</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Giờ hẹn <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={selectedTime}
|
||||
onChange={(e) => setSelectedTime(e.target.value)}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">Chọn giờ</option>
|
||||
{appointmentData.timeSlots.map((slot) => (
|
||||
<option
|
||||
key={slot.time}
|
||||
value={slot.time}
|
||||
disabled={!slot.available}
|
||||
>
|
||||
{slot.label} {!slot.available && "(Đã đặt)"}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="dates" id="dates">
|
||||
{generateCalendarDays()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Office Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Hình thức tư vấn <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className={`border rounded-lg p-4 cursor-pointer transition-colors ${
|
||||
selectedOffice === "online"
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedOffice("online")}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-3">💻</span>
|
||||
<div>
|
||||
<div className="font-medium">Tư vấn online</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
Video call qua Zoom/Google Meet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{appointmentData.offices.map((office, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`border rounded-lg p-4 cursor-pointer transition-colors ${
|
||||
selectedOffice === office.name
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedOffice(office.name)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-3">🏢</span>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
Văn phòng {office.name}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{office.address}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{office.hours}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personal Information */}
|
||||
<div className="border-t pt-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Thông Tin Cá Nhân
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{appointmentData.formFields.map((field) => (
|
||||
<div
|
||||
key={field.name}
|
||||
className={
|
||||
field.type === "textarea" ? "md:col-span-2" : ""
|
||||
}
|
||||
>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{field.label}
|
||||
{field.required && (
|
||||
<span className="text-red-500 ml-1">*</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
{field.type === "textarea" ? (
|
||||
<textarea
|
||||
name={field.name}
|
||||
value={
|
||||
formData[field.name as keyof typeof formData]
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
placeholder={field.placeholder}
|
||||
required={field.required}
|
||||
rows={4}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
) : field.type === "select" ? (
|
||||
<select
|
||||
name={field.name}
|
||||
value={
|
||||
formData[field.name as keyof typeof formData]
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
required={field.required}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">
|
||||
Chọn {field.label.toLowerCase()}
|
||||
</option>
|
||||
{field.options?.map((option, index) => (
|
||||
<option key={index} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type={field.type}
|
||||
name={field.name}
|
||||
value={
|
||||
formData[field.name as keyof typeof formData]
|
||||
}
|
||||
onChange={handleInputChange}
|
||||
placeholder={field.placeholder}
|
||||
required={field.required}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors font-medium text-lg"
|
||||
>
|
||||
Đặt Lịch Hẹn
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Booking Summary */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Tóm Tắt Đặt Lịch
|
||||
</h3>
|
||||
|
||||
{selectedAppointmentType && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Loại tư vấn:</span>
|
||||
<span className="font-medium">
|
||||
{selectedAppointmentType.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Thời gian:</span>
|
||||
<span className="font-medium">
|
||||
{selectedAppointmentType.duration}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Phí:</span>
|
||||
<span className="font-medium text-blue-600">
|
||||
{selectedAppointmentType.price}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{selectedConsultantData && (
|
||||
<div className="border-t pt-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Chuyên gia:</span>
|
||||
<span className="font-medium">
|
||||
{selectedConsultantData.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDate && selectedTime && (
|
||||
<div className="border-t pt-3">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Ngày giờ:</span>
|
||||
<span className="font-medium">
|
||||
{selectedDate} lúc{" "}
|
||||
{
|
||||
appointmentData.timeSlots.find(
|
||||
(s) => s.time === selectedTime,
|
||||
)?.label
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedOffice && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Hình thức:</span>
|
||||
<span className="font-medium">
|
||||
{selectedOffice === "online"
|
||||
? "Online"
|
||||
: `Văn phòng ${selectedOffice}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="bg-blue-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Cần Hỗ Trợ?
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center">
|
||||
<span className="text-blue-600 mr-2">📞</span>
|
||||
<span>1900 1234</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-blue-600 mr-2">✉️</span>
|
||||
<span>info@visaservice.com</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-blue-600 mr-2">💬</span>
|
||||
<span>Chat trực tuyến 24/7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<div className="mt-16">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
|
||||
Câu Hỏi Thường Gặp
|
||||
</h2>
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{appointmentData.faqs.map((faq, index) => (
|
||||
{/* Contact Section Start */}
|
||||
<div className="contact-section section-padding fix pt-0">
|
||||
<div className="container">
|
||||
<div className="contact-from-wrapper">
|
||||
{/* Status Message */}
|
||||
{submitStatus.type && (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-md overflow-hidden"
|
||||
className={`alert ${submitStatus.type === "success"
|
||||
? "alert-success"
|
||||
: "alert-danger"
|
||||
} text-center mb-4`}
|
||||
>
|
||||
<button
|
||||
className="w-full p-6 text-left hover:bg-gray-50 transition-colors"
|
||||
onClick={() => toggleFaq(index)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<span className="text-gray-400">
|
||||
{openFaq === index ? "−" : "+"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
{openFaq === index && (
|
||||
<div className="px-6 pb-6">
|
||||
<p className="text-gray-700">{faq.answer}</p>
|
||||
</div>
|
||||
)}
|
||||
{submitStatus.message}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="contact-form-items">
|
||||
<div className="row g-4">
|
||||
<div className="col-xl-12">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-4">
|
||||
<div className="form-clt">
|
||||
<span>Your Name *</span>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="form-clt">
|
||||
<span>Your Email *</span>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="Your email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="form-clt">
|
||||
<span>Your Phone</span>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="Phone Number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-clt">
|
||||
<span>Your Address</span>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
placeholder="Your address"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form-clt">
|
||||
<span>Appointment Date</span>
|
||||
<input
|
||||
type="date"
|
||||
name="appointmentDate"
|
||||
value={formData.appointmentDate}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="form-clt">
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder="Type your message"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{visaOptions.length > 0 && (
|
||||
<div className="cheak-list-item">
|
||||
<div className="cheak-list">
|
||||
{visaOptions.slice(0, Math.ceil(visaOptions.length / 2)).map((visa, index) => (
|
||||
<div className="form-check" key={index}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`visa-${index}`}
|
||||
checked={formData.visaTypes.includes(visa)}
|
||||
onChange={(e) =>
|
||||
handleCheckboxChange(visa, e.target.checked)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`visa-${index}`}
|
||||
>
|
||||
{visa}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="cheak-list mb-0">
|
||||
{visaOptions.slice(Math.ceil(visaOptions.length / 2)).map((visa, index) => (
|
||||
<div className="form-check" key={index + Math.ceil(visaOptions.length / 2)}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`visa-${index + Math.ceil(visaOptions.length / 2)}`}
|
||||
checked={formData.visaTypes.includes(visa)}
|
||||
onChange={(e) =>
|
||||
handleCheckboxChange(visa, e.target.checked)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`visa-${index + Math.ceil(visaOptions.length / 2)}`}
|
||||
>
|
||||
{visa}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={formSettings.submitButton?.buttonClass || "theme-btn"}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "SUBMITTING..." : (formSettings.submitButton?.text || "Request Appointment")}
|
||||
<i className={formSettings.submitButton?.icon || "fa-solid fa-arrow-right"}></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user