945 lines
42 KiB
TypeScript
945 lines
42 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useMemo, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Calendar,
|
|
Clock,
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MessageSquare,
|
|
ArrowLeft,
|
|
Heart,
|
|
CheckCircle2,
|
|
CheckCircle,
|
|
Loader2,
|
|
LogOut,
|
|
CalendarCheck,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import { LoginDialog } from "@/components/LoginDialog";
|
|
import { SignupDialog } from "@/components/SignupDialog";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { useAppointments } from "@/hooks/useAppointments";
|
|
import { toast } from "sonner";
|
|
import type { Appointment } from "@/lib/models/appointments";
|
|
|
|
interface User {
|
|
ID: number;
|
|
CreatedAt?: string;
|
|
UpdatedAt?: string;
|
|
DeletedAt?: string | null;
|
|
first_name: string;
|
|
last_name: string;
|
|
email: string;
|
|
phone: string;
|
|
location: string;
|
|
date_of_birth?: string;
|
|
is_admin?: boolean;
|
|
bookings?: null;
|
|
}
|
|
|
|
interface Booking {
|
|
ID: number;
|
|
CreatedAt: string;
|
|
UpdatedAt: string;
|
|
DeletedAt: string | null;
|
|
user_id: number;
|
|
user: User;
|
|
scheduled_at: string;
|
|
duration: number;
|
|
status: string;
|
|
jitsi_room_id: string;
|
|
jitsi_room_url: string;
|
|
payment_id: string;
|
|
payment_status: string;
|
|
amount: number;
|
|
notes: string;
|
|
}
|
|
|
|
interface BookingsResponse {
|
|
bookings: Booking[];
|
|
limit: number;
|
|
offset: number;
|
|
total: number;
|
|
}
|
|
|
|
export default function BookNowPage() {
|
|
const router = useRouter();
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
const { isAuthenticated, logout } = useAuth();
|
|
const {
|
|
create,
|
|
isCreating,
|
|
weeklyAvailability,
|
|
isLoadingWeeklyAvailability,
|
|
availabilityOverview,
|
|
isLoadingAvailabilityOverview,
|
|
availabilityConfig,
|
|
} = useAppointments();
|
|
const [formData, setFormData] = useState({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
selectedSlots: [] as Array<{ day: number; time_slot: string }>, // New format
|
|
message: "",
|
|
});
|
|
const [booking, setBooking] = useState<Booking | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showLoginDialog, setShowLoginDialog] = useState(false);
|
|
const [showSignupDialog, setShowSignupDialog] = useState(false);
|
|
const [loginPrefillEmail, setLoginPrefillEmail] = useState<string | undefined>(undefined);
|
|
|
|
// Helper function to convert day name to day number (0-6)
|
|
const getDayNumber = (dayName: string): number => {
|
|
const dayMap: Record<string, number> = {
|
|
'monday': 0,
|
|
'tuesday': 1,
|
|
'wednesday': 2,
|
|
'thursday': 3,
|
|
'friday': 4,
|
|
'saturday': 5,
|
|
'sunday': 6,
|
|
};
|
|
return dayMap[dayName.toLowerCase()] ?? -1;
|
|
};
|
|
|
|
// Get available days from availability overview (primary) or weekly availability (fallback)
|
|
const availableDaysOfWeek = useMemo(() => {
|
|
// Try availability overview first (preferred)
|
|
if (availabilityOverview && availabilityOverview.available && availabilityOverview.next_available_dates && availabilityOverview.next_available_dates.length > 0) {
|
|
// Group by day name and get unique days with their slots from next_available_dates
|
|
const dayMap = new Map<string, { day: number; dayName: string; availableSlots: Set<string> }>();
|
|
|
|
availabilityOverview.next_available_dates.forEach((dateInfo: any) => {
|
|
if (!dateInfo || !dateInfo.day_name) return;
|
|
|
|
const dayName = String(dateInfo.day_name).trim();
|
|
const dayNum = getDayNumber(dayName);
|
|
|
|
if (dayNum >= 0 && dayNum <= 6 && dateInfo.available_slots && Array.isArray(dateInfo.available_slots) && dateInfo.available_slots.length > 0) {
|
|
const existingDay = dayMap.get(dayName);
|
|
|
|
if (existingDay) {
|
|
// Merge slots if day already exists
|
|
dateInfo.available_slots.forEach((slot: string) => {
|
|
existingDay.availableSlots.add(String(slot).toLowerCase().trim());
|
|
});
|
|
} else {
|
|
// Create new day entry
|
|
const slotsSet = new Set<string>();
|
|
dateInfo.available_slots.forEach((slot: string) => {
|
|
slotsSet.add(String(slot).toLowerCase().trim());
|
|
});
|
|
dayMap.set(dayName, {
|
|
day: dayNum,
|
|
dayName: dayName,
|
|
availableSlots: slotsSet,
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Convert Map values to array and sort by day number
|
|
return Array.from(dayMap.values())
|
|
.map(day => ({
|
|
day: day.day,
|
|
dayName: day.dayName,
|
|
availableSlots: Array.from(day.availableSlots),
|
|
}))
|
|
.sort((a, b) => a.day - b.day);
|
|
}
|
|
|
|
// Fallback to weekly availability
|
|
if (weeklyAvailability) {
|
|
// Handle both array format and object with 'week' property
|
|
const weekArray = Array.isArray(weeklyAvailability)
|
|
? weeklyAvailability
|
|
: (weeklyAvailability as any)?.week;
|
|
|
|
if (weekArray && Array.isArray(weekArray)) {
|
|
return weekArray
|
|
.filter(day => {
|
|
const dayNum = Number(day.day);
|
|
return day.is_available &&
|
|
day.available_slots &&
|
|
Array.isArray(day.available_slots) &&
|
|
day.available_slots.length > 0 &&
|
|
!isNaN(dayNum) &&
|
|
dayNum >= 0 &&
|
|
dayNum <= 6;
|
|
})
|
|
.map(day => ({
|
|
day: Number(day.day),
|
|
dayName: day.day_name || 'Unknown',
|
|
availableSlots: day.available_slots || [],
|
|
}))
|
|
.sort((a, b) => a.day - b.day);
|
|
}
|
|
}
|
|
|
|
return [];
|
|
}, [availabilityOverview, weeklyAvailability]);
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
toast.success("Logged out successfully");
|
|
router.push("/");
|
|
};
|
|
|
|
// Handle submit button click
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
// Check if user is authenticated
|
|
if (!isAuthenticated) {
|
|
// Open login dialog if not authenticated
|
|
setShowLoginDialog(true);
|
|
return;
|
|
}
|
|
|
|
// If authenticated, proceed with booking
|
|
await submitBooking();
|
|
};
|
|
|
|
const handleLoginSuccess = async () => {
|
|
// Close login dialog
|
|
setShowLoginDialog(false);
|
|
// After successful login, proceed with booking submission
|
|
await submitBooking();
|
|
};
|
|
|
|
const handleSignupSuccess = async () => {
|
|
// Close signup dialog
|
|
setShowSignupDialog(false);
|
|
// After successful signup, proceed with booking submission
|
|
await submitBooking();
|
|
};
|
|
|
|
const handleSwitchToSignup = () => {
|
|
// Close login dialog and open signup dialog
|
|
setShowLoginDialog(false);
|
|
setTimeout(() => {
|
|
setShowSignupDialog(true);
|
|
}, 100);
|
|
};
|
|
|
|
const handleSwitchToLogin = (email?: string) => {
|
|
// Close signup dialog and open login dialog with email prefilled
|
|
setShowSignupDialog(false);
|
|
setLoginPrefillEmail(email);
|
|
setTimeout(() => {
|
|
setShowLoginDialog(true);
|
|
}, 100);
|
|
};
|
|
|
|
const submitBooking = async () => {
|
|
setError(null);
|
|
|
|
try {
|
|
// Get current slots from formData
|
|
const currentSlots = formData.selectedSlots || [];
|
|
|
|
// Check if slots are selected
|
|
if (!currentSlots || currentSlots.length === 0) {
|
|
setError("Please select at least one day and time slot combination by clicking on the time slot buttons.");
|
|
return;
|
|
}
|
|
|
|
// Prepare and validate slots - only send exactly what user selected
|
|
// Filter out duplicates and ensure we only send the specific selected slots
|
|
const uniqueSlots = new Map<string, { day: number; time_slot: string }>();
|
|
|
|
currentSlots.forEach(slot => {
|
|
if (!slot) return;
|
|
|
|
// Get day - handle any format
|
|
let dayNum: number;
|
|
if (typeof slot.day === 'number') {
|
|
dayNum = slot.day;
|
|
} else {
|
|
dayNum = parseInt(String(slot.day || 0), 10);
|
|
}
|
|
|
|
// Validate day
|
|
if (isNaN(dayNum) || dayNum < 0 || dayNum > 6) {
|
|
return;
|
|
}
|
|
|
|
// Get time_slot - normalize
|
|
const timeSlot = String(slot.time_slot || '').trim().toLowerCase();
|
|
|
|
// Validate time_slot - accept morning, afternoon, evening
|
|
if (!timeSlot || !['morning', 'afternoon', 'evening'].includes(timeSlot)) {
|
|
return;
|
|
}
|
|
|
|
// Create unique key to prevent duplicates
|
|
const uniqueKey = `${dayNum}-${timeSlot}`;
|
|
uniqueSlots.set(uniqueKey, {
|
|
day: dayNum,
|
|
time_slot: timeSlot as "morning" | "afternoon" | "evening",
|
|
});
|
|
});
|
|
|
|
// Convert map to array
|
|
const validSlots = Array.from(uniqueSlots.values()).map(slot => ({
|
|
day: slot.day,
|
|
time_slot: slot.time_slot as "morning" | "afternoon" | "evening",
|
|
}));
|
|
|
|
// Final validation check
|
|
if (!validSlots || validSlots.length === 0) {
|
|
setError("Please select at least one day and time slot combination by clicking on the time slot buttons.");
|
|
return;
|
|
}
|
|
|
|
// Validate and limit field lengths to prevent database errors
|
|
const firstName = formData.firstName.trim().substring(0, 100);
|
|
const lastName = formData.lastName.trim().substring(0, 100);
|
|
const email = formData.email.trim().toLowerCase().substring(0, 100);
|
|
const phone = formData.phone ? formData.phone.trim().substring(0, 100) : undefined;
|
|
const reason = formData.message ? formData.message.trim().substring(0, 100) : undefined;
|
|
|
|
// Validate required fields
|
|
if (!firstName || firstName.length === 0) {
|
|
setError("First name is required.");
|
|
return;
|
|
}
|
|
if (!lastName || lastName.length === 0) {
|
|
setError("Last name is required.");
|
|
return;
|
|
}
|
|
if (!email || email.length === 0) {
|
|
setError("Email address is required.");
|
|
return;
|
|
}
|
|
if (!email.includes('@')) {
|
|
setError("Please enter a valid email address.");
|
|
return;
|
|
}
|
|
|
|
// Prepare payload with validated and limited fields
|
|
// CRITICAL: Only send exactly what the user selected, nothing more
|
|
const selectedSlotsPayload = validSlots.map(slot => ({
|
|
day: Number(slot.day), // Ensure it's a number (0-6)
|
|
time_slot: String(slot.time_slot).toLowerCase().trim() as "morning" | "afternoon" | "evening", // Ensure lowercase and correct type
|
|
}));
|
|
|
|
// Build payload with ONLY the fields the API requires/accepts
|
|
// API required: first_name, last_name, email, selected_slots
|
|
// API optional: phone, reason
|
|
// DO NOT include: preferred_dates, preferred_time_slots (not needed)
|
|
const payload = {
|
|
first_name: firstName,
|
|
last_name: lastName,
|
|
email: email,
|
|
selected_slots: selectedSlotsPayload, // Only send what user explicitly selected (day + time_slot format)
|
|
...(phone && phone.length > 0 && { phone: phone }),
|
|
...(reason && reason.length > 0 && { reason: reason }),
|
|
};
|
|
|
|
// Call the actual API using the hook
|
|
const appointmentData = await create(payload);
|
|
|
|
// Convert API response to Booking format for display
|
|
// Use a stable ID - if appointmentData.id exists, use it, otherwise use 0
|
|
const appointmentId = appointmentData.id ? parseInt(appointmentData.id, 10) : 0;
|
|
const now = new Date().toISOString();
|
|
|
|
const bookingData: Booking = {
|
|
ID: appointmentId || 0,
|
|
CreatedAt: appointmentData.created_at || now,
|
|
UpdatedAt: appointmentData.updated_at || now,
|
|
DeletedAt: null,
|
|
user_id: 0, // API doesn't return user_id in this response
|
|
user: {
|
|
ID: 0,
|
|
first_name: appointmentData.first_name,
|
|
last_name: appointmentData.last_name,
|
|
email: appointmentData.email,
|
|
phone: appointmentData.phone || "",
|
|
location: "",
|
|
is_admin: false,
|
|
bookings: null,
|
|
},
|
|
scheduled_at: appointmentData.scheduled_datetime || "",
|
|
duration: appointmentData.scheduled_duration || 60,
|
|
status: appointmentData.status || "pending_review",
|
|
jitsi_room_id: appointmentData.jitsi_room_id || "",
|
|
jitsi_room_url: appointmentData.jitsi_meet_url || "",
|
|
payment_id: "",
|
|
payment_status: "pending",
|
|
amount: 0,
|
|
notes: appointmentData.reason || "",
|
|
};
|
|
|
|
setBooking(bookingData);
|
|
toast.success("Appointment request submitted successfully! We'll review and get back to you soon.");
|
|
|
|
// Stay on the booking page to show the receipt - no redirect
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : "Failed to submit booking. Please try again.";
|
|
setError(errorMessage);
|
|
toast.error(errorMessage);
|
|
}
|
|
};
|
|
|
|
const handleChange = (field: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
// Handle slot selection (day + time slot combination)
|
|
// CRITICAL: Only toggle the specific slot that was clicked, nothing else
|
|
const handleSlotToggle = useCallback((day: number, timeSlot: string) => {
|
|
const normalizedDay = Number(day);
|
|
const normalizedTimeSlot = String(timeSlot).toLowerCase().trim();
|
|
|
|
// Validate inputs
|
|
if (isNaN(normalizedDay) || normalizedDay < 0 || normalizedDay > 6) {
|
|
return; // Invalid day, don't change anything
|
|
}
|
|
|
|
if (!['morning', 'afternoon', 'evening'].includes(normalizedTimeSlot)) {
|
|
return; // Invalid time slot, don't change anything
|
|
}
|
|
|
|
setFormData((prev) => {
|
|
|
|
const currentSlots = prev.selectedSlots || [];
|
|
|
|
// Helper to check if two slots match EXACTLY (both day AND time_slot)
|
|
const slotsMatch = (slot1: { day: number; time_slot: string }, slot2: { day: number; time_slot: string }) => {
|
|
return Number(slot1.day) === Number(slot2.day) &&
|
|
String(slot1.time_slot).toLowerCase().trim() === String(slot2.time_slot).toLowerCase().trim();
|
|
};
|
|
|
|
const targetSlot = { day: normalizedDay, time_slot: normalizedTimeSlot };
|
|
|
|
// Check if this EXACT slot exists (check for duplicates too)
|
|
const existingIndex = currentSlots.findIndex(slot => slotsMatch(slot, targetSlot));
|
|
|
|
if (existingIndex >= 0) {
|
|
// Remove ONLY this specific slot (also removes duplicates)
|
|
const newSlots = currentSlots.filter(slot => !slotsMatch(slot, targetSlot));
|
|
return {
|
|
...prev,
|
|
selectedSlots: newSlots,
|
|
};
|
|
} else {
|
|
// Add ONLY this specific slot if it doesn't exist (prevent duplicates)
|
|
const newSlots = [...currentSlots, targetSlot];
|
|
return {
|
|
...prev,
|
|
selectedSlots: newSlots,
|
|
};
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
// Check if a slot is selected
|
|
const isSlotSelected = (day: number, timeSlot: string): boolean => {
|
|
const normalizedDay = Number(day);
|
|
const normalizedTimeSlot = String(timeSlot).toLowerCase().trim();
|
|
|
|
return (formData.selectedSlots || []).some(
|
|
slot => Number(slot.day) === normalizedDay &&
|
|
String(slot.time_slot).toLowerCase().trim() === normalizedTimeSlot
|
|
);
|
|
};
|
|
|
|
const formatDateTime = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={`min-h-screen ${isDark ? 'bg-gray-900' : 'bg-white'}`}>
|
|
{/* Main Content */}
|
|
<main className="min-h-screen flex">
|
|
{/* Left Side - Image (Fixed) */}
|
|
<div className={`hidden lg:block fixed top-0 left-0 h-screen w-1/2 overflow-hidden z-10 bg-gradient-to-br ${isDark ? 'from-gray-900 via-gray-800 to-gray-900' : 'from-rose-100 via-pink-50 to-orange-50'}`}>
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="/session.jpg"
|
|
alt="Therapy session with diverse clients"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
sizes="50vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/50"></div>
|
|
</div>
|
|
|
|
{/* Logo at Top */}
|
|
<div className="absolute top-0 left-0 right-0 z-20 flex items-center p-6">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<div className="bg-gradient-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
|
|
<Heart className="h-5 w-5 text-white fill-white" />
|
|
</div>
|
|
<span className={`font-bold text-lg drop-shadow-lg ${isDark ? 'text-rose-400' : 'text-rose-500'}`}>
|
|
Attune Heart Therapy
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Overlay Content - Lower Position */}
|
|
<div className="relative z-10 w-full h-full flex items-end justify-center px-12 pb-20">
|
|
<div className="space-y-4 text-center max-w-sm">
|
|
<h2 className="text-xl md:text-2xl font-bold leading-tight text-white drop-shadow-lg">
|
|
Begin Your Journey to Wellness
|
|
</h2>
|
|
<p className="text-sm md:text-base text-white/95 leading-relaxed drop-shadow-md">
|
|
Take the first step towards healing and growth. Our compassionate team is here to support you every step of the way.
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-2 pt-3">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Safe and confidential environment</span>
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Experienced licensed therapists</span>
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Personalized treatment plans</span>
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
<span className="text-white/95 text-xs md:text-sm">Flexible scheduling options</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Form (Scrollable) */}
|
|
<div className={`w-full lg:w-1/2 lg:ml-auto fixed top-0 right-0 h-screen overflow-y-auto custom-scrollbar ${isDark ? 'bg-gray-900' : 'bg-white'}`}>
|
|
<div className="flex items-start justify-center min-h-full">
|
|
<div className="w-full max-w-2xl">
|
|
{/* Page Header */}
|
|
<div className="pt-4 sm:pt-6 lg:pt-8 px-4 sm:px-6 lg:px-12 pb-4 sm:pb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => router.back()}
|
|
className={`flex items-center gap-2 mb-3 sm:mb-4 ${isDark ? 'text-white hover:bg-gray-800' : 'text-black hover:bg-gray-100'}`}
|
|
>
|
|
<ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
<span className="hidden sm:inline text-sm sm:text-base">Back</span>
|
|
</Button>
|
|
<div>
|
|
<h1 className={`text-xl sm:text-2xl font-semibold mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
Book Your Appointment
|
|
</h1>
|
|
<p className={`text-xs sm:text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
|
|
Fill out the form below and we'll get back to you to confirm your appointment
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Booking Form or Success Message */}
|
|
<div className="px-4 sm:px-6 lg:px-12 pb-6 sm:pb-8 lg:pb-12">
|
|
{booking ? (
|
|
<div className={`rounded-xl sm:rounded-2xl shadow-lg p-4 sm:p-6 lg:p-8 border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
|
|
<div className="text-center space-y-6">
|
|
<div className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center ${isDark ? 'bg-green-900/30' : 'bg-green-100'}`}>
|
|
<CheckCircle className={`w-8 h-8 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
|
|
</div>
|
|
<div>
|
|
<h2 className={`text-2xl font-semibold mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
Booking Request Submitted!
|
|
</h2>
|
|
<p className={`text-base ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
|
|
Your appointment request has been received.
|
|
</p>
|
|
</div>
|
|
<div className={`rounded-lg p-6 space-y-4 text-left ${isDark ? 'bg-gray-700/50' : 'bg-gray-50'}`}>
|
|
<div>
|
|
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Name</p>
|
|
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{booking.user.first_name} {booking.user.last_name}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Email</p>
|
|
<p className={`text-base ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{booking.user.email}
|
|
</p>
|
|
</div>
|
|
{booking.user.phone && (
|
|
<div>
|
|
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Phone</p>
|
|
<p className={`text-base ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{booking.user.phone}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`rounded-lg p-4 ${isDark ? 'bg-blue-900/20 border border-blue-800/50' : 'bg-blue-50 border border-blue-200'}`}>
|
|
<p className={`text-sm ${isDark ? 'text-blue-300' : 'text-blue-800'}`}>
|
|
You will be contacted shortly to confirm your appointment.
|
|
</p>
|
|
</div>
|
|
<div className="pt-4 flex justify-center">
|
|
<Button
|
|
onClick={() => router.back()}
|
|
className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
|
|
>
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className={`rounded-xl sm:rounded-2xl shadow-lg p-4 sm:p-6 lg:p-8 border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
|
|
{error && (
|
|
<div className={`mb-6 p-4 rounded-lg border ${isDark ? 'bg-red-900/20 border-red-800' : 'bg-red-50 border-red-200'}`}>
|
|
<p className={`text-sm ${isDark ? 'text-red-200' : 'text-red-800'}`}>{error}</p>
|
|
</div>
|
|
)}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Personal Information Section */}
|
|
<div className="space-y-4">
|
|
<h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
<User className={`w-5 h-5 ${isDark ? 'text-rose-400' : 'text-rose-600'}`} />
|
|
Personal Information
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="firstName"
|
|
className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
|
|
>
|
|
First Name *
|
|
</label>
|
|
<Input
|
|
id="firstName"
|
|
type="text"
|
|
placeholder="John"
|
|
value={formData.firstName}
|
|
onChange={(e) =>
|
|
handleChange("firstName", e.target.value)
|
|
}
|
|
maxLength={100}
|
|
required
|
|
className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="lastName"
|
|
className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
|
|
>
|
|
Last Name *
|
|
</label>
|
|
<Input
|
|
id="lastName"
|
|
type="text"
|
|
placeholder="Doe"
|
|
value={formData.lastName}
|
|
onChange={(e) =>
|
|
handleChange("lastName", e.target.value)
|
|
}
|
|
maxLength={100}
|
|
required
|
|
className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="email"
|
|
className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
|
|
>
|
|
<Mail className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
|
|
Email Address *
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="john.doe@example.com"
|
|
value={formData.email}
|
|
onChange={(e) => handleChange("email", e.target.value)}
|
|
maxLength={100}
|
|
required
|
|
className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="phone"
|
|
className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
|
|
>
|
|
<Phone className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
|
|
Phone Number *
|
|
</label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder="+1 (555) 123-4567"
|
|
value={formData.phone}
|
|
onChange={(e) => handleChange("phone", e.target.value)}
|
|
maxLength={100}
|
|
required
|
|
className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Appointment Details Section */}
|
|
<div className={`space-y-4 pt-6 border-t ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
|
|
<h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
<Calendar className={`w-5 h-5 ${isDark ? 'text-rose-400' : 'text-rose-600'}`} />
|
|
Appointment Details
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
|
|
>
|
|
<Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
|
|
Available Days & Times *
|
|
</label>
|
|
{(isLoadingWeeklyAvailability || isLoadingAvailabilityOverview) ? (
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Loading availability...
|
|
</div>
|
|
) : availableDaysOfWeek.length === 0 ? (
|
|
<p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
|
|
No available days at the moment. Please check back later.
|
|
</p>
|
|
) : (
|
|
<>
|
|
<p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'} mb-3`}>
|
|
Select one or more day-time combinations that work for you. You can select multiple time slots for the same day (e.g., Monday Morning and Monday Evening).
|
|
</p>
|
|
{/* Selected Slots Summary */}
|
|
{formData.selectedSlots && formData.selectedSlots.length > 0 && (
|
|
<div className={`mb-4 p-3 rounded-lg border ${isDark ? 'bg-gray-800/50 border-gray-700' : 'bg-rose-50/50 border-rose-200'}`}>
|
|
<p className={`text-xs font-medium mb-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
|
|
Selected: {formData.selectedSlots.length} time slot{formData.selectedSlots.length !== 1 ? 's' : ''}
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{formData.selectedSlots.map((slot, idx) => {
|
|
const dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
const timeSlotLabels: Record<string, string> = {
|
|
morning: "Morning",
|
|
afternoon: "Lunchtime",
|
|
evening: "Evening",
|
|
};
|
|
const dayName = dayNames[slot.day] || `Day ${slot.day}`;
|
|
const timeLabel = timeSlotLabels[String(slot.time_slot).toLowerCase()] || slot.time_slot;
|
|
return (
|
|
<span
|
|
key={idx}
|
|
className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-rose-600/30 text-rose-300 border border-rose-500/30' : 'bg-rose-100 text-rose-700 border border-rose-200'}`}
|
|
>
|
|
{dayName} {timeLabel}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="space-y-4">
|
|
{availableDaysOfWeek.map((dayInfo, dayIndex) => {
|
|
// Ensure day is always a valid number (already validated in useMemo)
|
|
const currentDay = typeof dayInfo.day === 'number' && !isNaN(dayInfo.day)
|
|
? dayInfo.day
|
|
: dayIndex; // Fallback to index if invalid
|
|
|
|
// Skip if day is still invalid
|
|
if (isNaN(currentDay) || currentDay < 0 || currentDay > 6) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div key={`day-wrapper-${currentDay}-${dayIndex}`} className="space-y-2">
|
|
<h4 className={`text-sm font-semibold ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
|
|
{dayInfo.dayName || `Day ${currentDay}`}
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{dayInfo.availableSlots.map((timeSlot: string, slotIndex: number) => {
|
|
if (!timeSlot) return null;
|
|
|
|
const timeSlotLabels: Record<string, string> = {
|
|
morning: "Morning",
|
|
afternoon: "Lunchtime",
|
|
evening: "Evening",
|
|
};
|
|
// Normalize time slot for consistent comparison
|
|
const normalizedTimeSlot = String(timeSlot).toLowerCase().trim();
|
|
// Create unique key combining day, time slot, and index to ensure uniqueness
|
|
const slotKey = `day-${currentDay}-slot-${normalizedTimeSlot}-${slotIndex}`;
|
|
// Check if THIS specific day-time combination is selected
|
|
const isSelected = isSlotSelected(currentDay, normalizedTimeSlot);
|
|
|
|
return (
|
|
<button
|
|
key={slotKey}
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// Pass the specific day and time slot for this button
|
|
handleSlotToggle(currentDay, normalizedTimeSlot);
|
|
}}
|
|
aria-pressed={isSelected}
|
|
className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border-2 transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 ${
|
|
isSelected
|
|
? isDark
|
|
? 'bg-rose-600 border-rose-500 text-white hover:bg-rose-700'
|
|
: 'bg-rose-500 border-rose-500 text-white hover:bg-rose-600'
|
|
: isDark
|
|
? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-rose-500 hover:bg-gray-650'
|
|
: 'bg-white border-gray-300 text-gray-700 hover:border-rose-500 hover:bg-rose-50'
|
|
}`}
|
|
>
|
|
<span className="text-sm font-medium">
|
|
{timeSlotLabels[normalizedTimeSlot] || timeSlot}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Message Section */}
|
|
<div className={`space-y-4 pt-6 border-t ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
|
|
<label
|
|
htmlFor="message"
|
|
className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
|
|
>
|
|
<MessageSquare className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
|
|
Additional Message (Optional)
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
rows={4}
|
|
placeholder="Tell us about any specific concerns or preferences..."
|
|
value={formData.message}
|
|
onChange={(e) => handleChange("message", e.target.value)}
|
|
maxLength={100}
|
|
className={`w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-rose-500 focus-visible:border-rose-500 disabled:cursor-not-allowed disabled:opacity-50 ${isDark ? 'border-gray-600 bg-gray-700 text-white placeholder:text-gray-400 focus-visible:ring-rose-400 focus-visible:border-rose-400' : 'border-gray-300 bg-white text-gray-900 placeholder:text-gray-500'}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="pt-6">
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
disabled={isCreating || availableDaysOfWeek.length === 0 || formData.selectedSlots.length === 0}
|
|
className="w-full bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all h-12 text-base font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isCreating ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Submitting...
|
|
</>
|
|
) : (
|
|
"Request Appointment"
|
|
)}
|
|
</Button>
|
|
<p className={`text-xs text-center mt-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
|
|
We'll review your request and get back to you within 24 hours
|
|
to confirm your appointment.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Logout Button - Only show when authenticated */}
|
|
{isAuthenticated && (
|
|
<div className="mt-6 flex justify-center">
|
|
<Button
|
|
onClick={handleLogout}
|
|
variant="outline"
|
|
className="bg-red-600 hover:bg-red-700 text-white border-red-600 hover:border-red-700"
|
|
>
|
|
<LogOut className="w-4 h-4 mr-2" />
|
|
Logout
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Login Dialog */}
|
|
<LoginDialog
|
|
open={showLoginDialog}
|
|
onOpenChange={(open) => {
|
|
setShowLoginDialog(open);
|
|
if (!open) {
|
|
setLoginPrefillEmail(undefined);
|
|
}
|
|
}}
|
|
onLoginSuccess={handleLoginSuccess}
|
|
onSwitchToSignup={handleSwitchToSignup}
|
|
prefillEmail={loginPrefillEmail}
|
|
/>
|
|
|
|
{/* Signup Dialog */}
|
|
<SignupDialog
|
|
open={showSignupDialog}
|
|
onOpenChange={setShowSignupDialog}
|
|
onSignupSuccess={handleSignupSuccess}
|
|
onSwitchToLogin={handleSwitchToLogin}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|