648 lines
26 KiB
TypeScript
648 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
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,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import { LoginDialog } from "@/components/LoginDialog";
|
|
|
|
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 [formData, setFormData] = useState({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
appointmentType: "",
|
|
preferredDate: "",
|
|
preferredTime: "",
|
|
message: "",
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
const [booking, setBooking] = useState<Booking | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showLoginDialog, setShowLoginDialog] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Open login dialog instead of submitting directly
|
|
setShowLoginDialog(true);
|
|
};
|
|
|
|
const handleLoginSuccess = async () => {
|
|
// After successful login, proceed with booking submission
|
|
await submitBooking();
|
|
};
|
|
|
|
const submitBooking = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Convert time to 24-hour format for ISO string
|
|
const time24 = formData.preferredTime.includes("PM")
|
|
? formData.preferredTime.replace("PM", "").trim().split(":").map((v, i) =>
|
|
i === 0 ? (parseInt(v) === 12 ? 12 : parseInt(v) + 12) : v
|
|
).join(":")
|
|
: formData.preferredTime.replace("AM", "").trim().split(":").map((v, i) =>
|
|
i === 0 ? (parseInt(v) === 12 ? "00" : v.padStart(2, "0")) : v
|
|
).join(":");
|
|
|
|
// Combine date and time into scheduled_at (ISO format)
|
|
const dateTimeString = `${formData.preferredDate}T${time24}:00Z`;
|
|
|
|
// Prepare request payload
|
|
const payload = {
|
|
first_name: formData.firstName,
|
|
last_name: formData.lastName,
|
|
email: formData.email,
|
|
phone: formData.phone,
|
|
appointment_type: formData.appointmentType,
|
|
scheduled_at: dateTimeString,
|
|
duration: 60, // Default to 60 minutes
|
|
notes: formData.message || "",
|
|
};
|
|
|
|
// Simulate API call - Replace with actual API endpoint
|
|
const response = await fetch("/api/bookings", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}).catch(() => {
|
|
// Fallback to mock data if API is not available
|
|
return null;
|
|
});
|
|
|
|
let bookingData: Booking;
|
|
|
|
if (response && response.ok) {
|
|
const data: BookingsResponse = await response.json();
|
|
bookingData = data.bookings[0];
|
|
} else {
|
|
// Mock response for development - matches the API structure provided
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
bookingData = {
|
|
ID: Math.floor(Math.random() * 1000),
|
|
CreatedAt: new Date().toISOString(),
|
|
UpdatedAt: new Date().toISOString(),
|
|
DeletedAt: null,
|
|
user_id: 1,
|
|
user: {
|
|
ID: 1,
|
|
CreatedAt: new Date().toISOString(),
|
|
UpdatedAt: new Date().toISOString(),
|
|
DeletedAt: null,
|
|
first_name: formData.firstName,
|
|
last_name: formData.lastName,
|
|
email: formData.email,
|
|
phone: formData.phone,
|
|
location: "",
|
|
date_of_birth: "0001-01-01T00:00:00Z",
|
|
is_admin: false,
|
|
bookings: null,
|
|
},
|
|
scheduled_at: dateTimeString,
|
|
duration: 60,
|
|
status: "scheduled",
|
|
jitsi_room_id: `booking-${Math.floor(Math.random() * 1000)}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
jitsi_room_url: `https://meet.jit.si/booking-${Math.floor(Math.random() * 1000)}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
payment_id: "",
|
|
payment_status: "pending",
|
|
amount: 52,
|
|
notes: formData.message || "Initial consultation session",
|
|
};
|
|
}
|
|
|
|
setBooking(bookingData);
|
|
setLoading(false);
|
|
} catch (err) {
|
|
setError("Failed to submit booking. Please try again.");
|
|
setLoading(false);
|
|
console.error("Booking error:", err);
|
|
}
|
|
};
|
|
|
|
const handleChange = (field: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
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 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 from-rose-100 via-pink-50 to-orange-50">
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="/doctors.png"
|
|
alt="Therapy session"
|
|
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 text-rose-500 drop-shadow-lg">
|
|
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 bg-white custom-scrollbar">
|
|
<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-6 sm:px-8 lg:px-12 pb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => router.back()}
|
|
className="flex items-center gap-2 text-black hover:bg-gray-100 mb-4"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
<span className="hidden sm:inline">Back</span>
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-gray-900 mb-1">
|
|
Book Your Appointment
|
|
</h1>
|
|
<p className="text-sm 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-6 sm:px-8 lg:px-12 pb-6 sm:pb-8 lg:pb-12">
|
|
{booking ? (
|
|
<div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
|
|
<div className="text-center space-y-4">
|
|
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
|
|
<CheckCircle className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-semibold text-gray-900 mb-2">
|
|
Booking Confirmed!
|
|
</h2>
|
|
<p className="text-gray-600">
|
|
Your appointment has been successfully booked.
|
|
</p>
|
|
</div>
|
|
<div className="bg-gray-50 rounded-lg p-6 space-y-4 text-left">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Booking ID</p>
|
|
<p className="text-base font-semibold text-gray-900">#{booking.ID}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Patient</p>
|
|
<p className="text-base text-gray-900">
|
|
{booking.user.first_name} {booking.user.last_name}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Scheduled Time</p>
|
|
<p className="text-base text-gray-900">{formatDateTime(booking.scheduled_at)}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Duration</p>
|
|
<p className="text-base text-gray-900">{booking.duration} minutes</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Status</p>
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
|
|
{booking.status}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Amount</p>
|
|
<p className="text-base font-semibold text-gray-900">${booking.amount}</p>
|
|
</div>
|
|
{booking.notes && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">Notes</p>
|
|
<p className="text-base text-gray-900">{booking.notes}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="pt-4 flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Button
|
|
onClick={() => {
|
|
setBooking(null);
|
|
setFormData({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
appointmentType: "",
|
|
preferredDate: "",
|
|
preferredTime: "",
|
|
message: "",
|
|
});
|
|
}}
|
|
variant="outline"
|
|
>
|
|
Book Another Appointment
|
|
</Button>
|
|
<Button
|
|
onClick={() => router.push("/")}
|
|
className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
|
|
>
|
|
Return to Home
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
|
<p className="text-sm 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 text-gray-900 flex items-center gap-2">
|
|
<User className="w-5 h-5 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 text-gray-700"
|
|
>
|
|
First Name *
|
|
</label>
|
|
<Input
|
|
id="firstName"
|
|
type="text"
|
|
placeholder="John"
|
|
value={formData.firstName}
|
|
onChange={(e) =>
|
|
handleChange("firstName", e.target.value)
|
|
}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="lastName"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
Last Name *
|
|
</label>
|
|
<Input
|
|
id="lastName"
|
|
type="text"
|
|
placeholder="Doe"
|
|
value={formData.lastName}
|
|
onChange={(e) =>
|
|
handleChange("lastName", e.target.value)
|
|
}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="email"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Mail className="w-4 h-4 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)}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="phone"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Phone className="w-4 h-4 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)}
|
|
required
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Appointment Details Section */}
|
|
<div className="space-y-4 pt-6 border-t border-gray-200">
|
|
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
|
<Calendar className="w-5 h-5 text-rose-600" />
|
|
Appointment Details
|
|
</h2>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="appointmentType"
|
|
className="text-sm font-medium text-gray-700"
|
|
>
|
|
Appointment Type *
|
|
</label>
|
|
<Select
|
|
value={formData.appointmentType}
|
|
onValueChange={(value) =>
|
|
handleChange("appointmentType", value)
|
|
}
|
|
required
|
|
>
|
|
<SelectTrigger id="appointmentType" className="h-11">
|
|
<SelectValue placeholder="Select appointment type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="initial-consultation">
|
|
Initial Consultation
|
|
</SelectItem>
|
|
<SelectItem value="individual-therapy">
|
|
Individual Therapy
|
|
</SelectItem>
|
|
<SelectItem value="family-therapy">Family Therapy</SelectItem>
|
|
<SelectItem value="couples-therapy">
|
|
Couples Therapy
|
|
</SelectItem>
|
|
<SelectItem value="group-therapy">Group Therapy</SelectItem>
|
|
<SelectItem value="follow-up">Follow-up Session</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="preferredDate"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Calendar className="w-4 h-4 text-gray-500" />
|
|
Preferred Date *
|
|
</label>
|
|
<Input
|
|
id="preferredDate"
|
|
type="date"
|
|
value={formData.preferredDate}
|
|
onChange={(e) =>
|
|
handleChange("preferredDate", e.target.value)
|
|
}
|
|
required
|
|
min={new Date().toISOString().split("T")[0]}
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor="preferredTime"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<Clock className="w-4 h-4 text-gray-500" />
|
|
Preferred Time *
|
|
</label>
|
|
<Select
|
|
value={formData.preferredTime}
|
|
onValueChange={(value) =>
|
|
handleChange("preferredTime", value)
|
|
}
|
|
required
|
|
>
|
|
<SelectTrigger id="preferredTime" className="h-11">
|
|
<SelectValue placeholder="Select time" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="9:00 AM">9:00 AM</SelectItem>
|
|
<SelectItem value="10:00 AM">10:00 AM</SelectItem>
|
|
<SelectItem value="11:00 AM">11:00 AM</SelectItem>
|
|
<SelectItem value="12:00 PM">12:00 PM</SelectItem>
|
|
<SelectItem value="1:00 PM">1:00 PM</SelectItem>
|
|
<SelectItem value="2:00 PM">2:00 PM</SelectItem>
|
|
<SelectItem value="3:00 PM">3:00 PM</SelectItem>
|
|
<SelectItem value="4:00 PM">4:00 PM</SelectItem>
|
|
<SelectItem value="5:00 PM">5:00 PM</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Message Section */}
|
|
<div className="space-y-4 pt-6 border-t border-gray-200">
|
|
<label
|
|
htmlFor="message"
|
|
className="text-sm font-medium text-gray-700 flex items-center gap-2"
|
|
>
|
|
<MessageSquare className="w-4 h-4 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)}
|
|
className="w-full rounded-md border border-gray-300 bg-transparent 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"
|
|
/>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="pt-6">
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
disabled={loading}
|
|
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"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Submitting...
|
|
</>
|
|
) : (
|
|
"Submit Booking Request"
|
|
)}
|
|
</Button>
|
|
<p className="text-xs text-gray-500 text-center mt-4">
|
|
We'll review your request and get back to you within 24 hours
|
|
to confirm your appointment.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div className="mt-6 text-center">
|
|
<p className="text-gray-600">
|
|
Prefer to book by phone?{" "}
|
|
<a
|
|
href="tel:+19548073027"
|
|
className="text-rose-600 hover:text-rose-700 font-medium underline"
|
|
>
|
|
Call us at (954) 807-3027
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Login Dialog */}
|
|
<LoginDialog
|
|
open={showLoginDialog}
|
|
onOpenChange={setShowLoginDialog}
|
|
onLoginSuccess={handleLoginSuccess}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|