90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { CheckCircle, Calendar, Mail, Clock, User } from "lucide-react";
|
|
import { colors } from '@/lib/colors';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
|
|
export default function AppointmentStatus() {
|
|
const { user, loading } = useAuth();
|
|
const [showStatus, setShowStatus] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Show status if user is authenticated and has appointment_booking metadata
|
|
if (user && !loading) {
|
|
const hasAppointmentBooking = user.user_metadata?.appointment_booking;
|
|
if (hasAppointmentBooking) {
|
|
setShowStatus(true);
|
|
|
|
// Hide status after 10 seconds
|
|
const timer = setTimeout(() => {
|
|
setShowStatus(false);
|
|
}, 10000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}
|
|
}, [user, loading]);
|
|
|
|
if (!showStatus) return null;
|
|
|
|
return (
|
|
<div className="fixed top-4 right-4 z-50 max-w-sm">
|
|
<div
|
|
className="p-6 rounded-2xl shadow-lg backdrop-blur-sm border-2"
|
|
style={{
|
|
backgroundColor: `${colors.background}F0`,
|
|
borderColor: colors.primary
|
|
}}
|
|
>
|
|
<div className="flex items-center space-x-3 mb-4">
|
|
<CheckCircle className="w-6 h-6" style={{ color: colors.primary }} />
|
|
<h3 className="font-semibold" style={{ color: colors.primary }}>
|
|
Termin bestätigt! ✅
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-3">
|
|
<User className="w-4 h-4" style={{ color: colors.secondary }} />
|
|
<span className="text-sm" style={{ color: colors.secondary }}>
|
|
<strong>Status:</strong> Angemeldet
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<Mail className="w-4 h-4" style={{ color: colors.secondary }} />
|
|
<span className="text-sm" style={{ color: colors.secondary }}>
|
|
<strong>E-Mail:</strong> {user?.email}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<Calendar className="w-4 h-4" style={{ color: colors.secondary }} />
|
|
<span className="text-sm" style={{ color: colors.secondary }}>
|
|
<strong>Termin:</strong> Gespeichert
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<Clock className="w-4 h-4" style={{ color: colors.secondary }} />
|
|
<span className="text-sm" style={{ color: colors.secondary }}>
|
|
<strong>Zeit:</strong> {new Date().toLocaleTimeString('de-DE')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setShowStatus(false)}
|
|
className="mt-4 w-full p-2 rounded-xl text-sm transition-all duration-200 hover:scale-105"
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
color: colors.background
|
|
}}
|
|
>
|
|
Verstanden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|