651 lines
24 KiB
TypeScript
651 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Button } from "@/components/ui/button";
|
|
import { CheckCircle, Calendar, Mail, ArrowLeft } from "lucide-react";
|
|
import { supabase } from '@/lib/supabase';
|
|
import { colors } from '@/lib/colors';
|
|
import AppointmentForm from './AppointmentForm';
|
|
import EmailVerification from './EmailVerification';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
|
|
type BookingStep = 'form' | 'verification' | 'success';
|
|
|
|
interface AppointmentData {
|
|
name: string;
|
|
telefon: string;
|
|
firma: string;
|
|
email: string;
|
|
beschreibung: string;
|
|
termin_datum?: Date;
|
|
termin_time?: string;
|
|
}
|
|
|
|
export default function AppointmentBooking() {
|
|
const { user } = useAuth();
|
|
const [currentStep, setCurrentStep] = useState<BookingStep>('form');
|
|
const [appointmentData, setAppointmentData] = useState<AppointmentData | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [testMode, setTestMode] = useState(false); // Production mode - no test indicators
|
|
const [tableStructure, setTableStructure] = useState<string[]>([]);
|
|
const [productionMode, setProductionMode] = useState(false); // Enable email verification
|
|
const [customerAction, setCustomerAction] = useState<'created' | 'updated' | null>(null);
|
|
|
|
const handleFormSubmit = async (data: AppointmentData) => {
|
|
setAppointmentData(data);
|
|
|
|
// Always go to email verification step
|
|
setCurrentStep('verification');
|
|
};
|
|
|
|
const handleVerificationComplete = async () => {
|
|
if (!appointmentData) return;
|
|
|
|
// Prüfe Authentifizierung nach E-Mail-Bestätigung
|
|
if (!user) {
|
|
setError('Bitte bestätige zuerst deine E-Mail-Adresse, um den Termin zu speichern.');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Create the appointment datetime by combining date and time
|
|
console.log('=== DATE PROCESSING DEBUG ===');
|
|
console.log('Input termin_datum:', appointmentData.termin_datum);
|
|
console.log('Input termin_time:', appointmentData.termin_time);
|
|
console.log('Input termin_datum type:', typeof appointmentData.termin_datum);
|
|
console.log('Input termin_datum instanceof Date:', appointmentData.termin_datum instanceof Date);
|
|
|
|
// Check if termin_datum is actually a Date object
|
|
if (!(appointmentData.termin_datum instanceof Date)) {
|
|
console.error('❌ termin_datum is not a Date object!');
|
|
setError('Fehler: Ungültiges Datum. Bitte wählen Sie einen Termin aus.');
|
|
return;
|
|
}
|
|
|
|
const appointmentDateTime = new Date(appointmentData.termin_datum);
|
|
console.log('Created appointmentDateTime:', appointmentDateTime);
|
|
console.log('appointmentDateTime.toISOString():', appointmentDateTime.toISOString());
|
|
|
|
const [hours] = appointmentData.termin_time!.split(':').map(Number);
|
|
console.log('Extracted hours:', hours);
|
|
|
|
// Create the appointment datetime in local time to avoid timezone issues
|
|
const year = appointmentDateTime.getFullYear();
|
|
const month = appointmentDateTime.getMonth();
|
|
const day = appointmentDateTime.getDate();
|
|
|
|
console.log('Date components:', { year, month, day, hours });
|
|
|
|
// Create the final appointment datetime in local time
|
|
const finalAppointmentDateTime = new Date(year, month, day, hours, 0, 0, 0);
|
|
console.log('Final appointmentDateTime (local):', finalAppointmentDateTime);
|
|
console.log('Final appointmentDateTime.toISOString():', finalAppointmentDateTime.toISOString());
|
|
console.log('Final appointmentDateTime.getTime():', finalAppointmentDateTime.getTime());
|
|
console.log('Final appointmentDateTime local string:', finalAppointmentDateTime.toLocaleString('de-DE'));
|
|
|
|
// Store the appointment time in local time format
|
|
const localTimeString = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}T${hours.toString().padStart(2, '0')}:00:00`;
|
|
console.log('Local time string to save:', localTimeString);
|
|
|
|
// Check if customer already exists (by email)
|
|
console.log('=== CUSTOMER CHECK DEBUG ===');
|
|
console.log('Input email:', appointmentData.email);
|
|
console.log('Input email type:', typeof appointmentData.email);
|
|
console.log('Input email length:', appointmentData.email.length);
|
|
console.log('Input email trimmed:', appointmentData.email.trim());
|
|
console.log('Input email lowercase:', appointmentData.email.trim().toLowerCase());
|
|
|
|
// First, let's check what's in the database for this email
|
|
await checkSpecificEmail(appointmentData.email);
|
|
|
|
// Try multiple email variations to find existing customer
|
|
const emailVariations = [
|
|
appointmentData.email.trim(),
|
|
appointmentData.email.trim().toLowerCase(),
|
|
appointmentData.email.trim().toUpperCase()
|
|
];
|
|
|
|
console.log('Checking email variations:', emailVariations);
|
|
|
|
let existingCustomers: any[] = [];
|
|
let checkError: any = null;
|
|
|
|
// Try each email variation
|
|
for (const emailVariation of emailVariations) {
|
|
const { data, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.eq('email', emailVariation)
|
|
.order('erstellt_am', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error(`Error checking email variation "${emailVariation}":`, error);
|
|
checkError = error;
|
|
continue;
|
|
}
|
|
|
|
if (data && data.length > 0) {
|
|
console.log(`Found ${data.length} customers with email "${emailVariation}"`);
|
|
existingCustomers = data;
|
|
break;
|
|
}
|
|
}
|
|
|
|
console.log('Database query result:', { existingCustomers, checkError });
|
|
console.log('Number of existing customers found:', existingCustomers?.length || 0);
|
|
|
|
if (existingCustomers && existingCustomers.length > 0) {
|
|
console.log('All found customers with this email:');
|
|
existingCustomers.forEach((customer, index) => {
|
|
console.log(`${index + 1}. ID: ${customer.id}, Email: "${customer.email}", Created: ${customer.erstellt_am}, Termin: ${customer.termin_datum}`);
|
|
});
|
|
}
|
|
|
|
if (checkError) {
|
|
console.error('Error checking existing customer:', checkError);
|
|
setError('Fehler beim Überprüfen der Kundendaten. Bitte versuchen Sie es erneut.');
|
|
return;
|
|
}
|
|
|
|
const existingCustomer = existingCustomers && existingCustomers.length > 0 ? existingCustomers[0] : null;
|
|
|
|
if (existingCustomer) {
|
|
console.log('✅ Existing customer found:', existingCustomer);
|
|
console.log('Will UPDATE existing customer with ID:', existingCustomer.id);
|
|
|
|
// Warn if there are multiple entries with the same email
|
|
if (existingCustomers.length > 1) {
|
|
console.warn(`⚠️ Found ${existingCustomers.length} entries with email ${appointmentData.email}. Using the most recent one.`);
|
|
}
|
|
} else {
|
|
console.log('❌ No existing customer found - will CREATE new');
|
|
}
|
|
|
|
const appointmentDataToSave = {
|
|
email: appointmentData.email,
|
|
beschreibung: `${appointmentData.beschreibung}\n\nTermin: ${formatAppointmentDate(appointmentData.termin_datum!, appointmentData.termin_time!)}\n\nKontakt: ${appointmentData.name} (${appointmentData.telefon})\nFirma: ${appointmentData.firma}`,
|
|
termin_datum: localTimeString, // Store in local time format
|
|
ansprechpartner_name: appointmentData.name,
|
|
telefon: appointmentData.telefon,
|
|
firma: appointmentData.firma,
|
|
berater: 'Webklar Team',
|
|
zielgruppe: 'Terminanfrage'
|
|
};
|
|
|
|
let result;
|
|
|
|
if (existingCustomer) {
|
|
// Use upsert to ensure we update the existing customer
|
|
console.log('🔄 Starting UPSERT operation for customer ID:', existingCustomer.id);
|
|
|
|
const newDescription = `${existingCustomer.beschreibung || ''}\n\n--- NEUER TERMIN ---\n${appointmentDataToSave.beschreibung}`;
|
|
|
|
console.log('New description:', newDescription);
|
|
|
|
// Use upsert with the existing ID to force update
|
|
const { data: upsertData, error: upsertError } = await supabase
|
|
.from('kunden_projekte')
|
|
.upsert({
|
|
id: existingCustomer.id, // Use existing ID to force update
|
|
...appointmentDataToSave,
|
|
beschreibung: newDescription,
|
|
erstellt_am: new Date().toISOString()
|
|
}, {
|
|
onConflict: 'id' // Update on ID conflict
|
|
})
|
|
.select('*');
|
|
|
|
if (upsertError) {
|
|
console.error('❌ Error upserting customer:', upsertError);
|
|
setError('Fehler beim Aktualisieren der Kundendaten. Bitte versuchen Sie es erneut.');
|
|
return;
|
|
}
|
|
|
|
if (!upsertData || upsertData.length === 0) {
|
|
console.error('❌ Upsert operation returned no data');
|
|
setError('Fehler beim Aktualisieren der Kundendaten. Bitte versuchen Sie es erneut.');
|
|
return;
|
|
}
|
|
|
|
result = upsertData[0];
|
|
console.log('✅ Customer updated via upsert:', result);
|
|
|
|
// Verify the update by fetching the customer again
|
|
const { data: verifyData, error: verifyError } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.eq('id', existingCustomer.id)
|
|
.single();
|
|
|
|
if (verifyError) {
|
|
console.warn('⚠️ Could not verify update:', verifyError);
|
|
} else {
|
|
console.log('✅ Update verified - customer data:', verifyData);
|
|
}
|
|
|
|
setCustomerAction('updated');
|
|
} else {
|
|
// Create new customer record ONLY if no existing customer found
|
|
console.log('🆕 Starting CREATE operation for new customer');
|
|
console.log('Create data:', appointmentDataToSave);
|
|
|
|
const { data, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.insert(appointmentDataToSave)
|
|
.select('*');
|
|
|
|
if (error) {
|
|
console.error('❌ Error creating customer:', error);
|
|
setError('Fehler beim Erstellen der Kundendaten. Bitte versuchen Sie es erneut.');
|
|
return;
|
|
}
|
|
|
|
if (!data || data.length === 0) {
|
|
console.error('❌ Create operation returned no data');
|
|
setError('Fehler beim Erstellen der Kundendaten. Bitte versuchen Sie es erneut.');
|
|
return;
|
|
}
|
|
|
|
result = data[0]; // Get the first (and only) created record
|
|
console.log('✅ Customer created successfully:', result);
|
|
setCustomerAction('created');
|
|
}
|
|
|
|
setCurrentStep('success');
|
|
} catch (err) {
|
|
console.error('Unexpected error saving appointment:', err);
|
|
setError('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
setCurrentStep('form');
|
|
setError(null);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setCurrentStep('form');
|
|
setAppointmentData(null);
|
|
setError(null);
|
|
setLoading(false);
|
|
setCustomerAction(null);
|
|
};
|
|
|
|
const testDatabaseConnection = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Test basic connection and get table structure
|
|
const { data, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.limit(1);
|
|
|
|
if (error) {
|
|
console.error('Database connection test failed:', error);
|
|
setError(`Datenbank-Verbindung fehlgeschlagen: ${error.message}`);
|
|
return;
|
|
}
|
|
|
|
console.log('Database connection successful:', data);
|
|
const columns = Object.keys(data[0] || {});
|
|
console.log('Table structure:', columns);
|
|
setTableStructure(columns);
|
|
|
|
// Analyze which columns we can use
|
|
const availableColumns = {
|
|
email: columns.includes('email'),
|
|
description: columns.includes('description') || columns.includes('beschreibung'),
|
|
termin_datum: columns.includes('termin_datum'),
|
|
name: columns.includes('name') || columns.includes('ansprechpartn'),
|
|
phone: columns.includes('phone') || columns.includes('telefon'),
|
|
company: columns.includes('company') || columns.includes('firma')
|
|
};
|
|
|
|
console.log('Available columns for appointment:', availableColumns);
|
|
|
|
let statusMessage = '✅ Datenbank-Verbindung erfolgreich!\n\n';
|
|
statusMessage += '📋 Verfügbare Spalten:\n';
|
|
Object.entries(availableColumns).forEach(([key, available]) => {
|
|
statusMessage += `${available ? '✅' : '❌'} ${key}\n`;
|
|
});
|
|
|
|
setError(statusMessage);
|
|
|
|
} catch (err) {
|
|
console.error('Connection test error:', err);
|
|
setError('❌ Datenbank-Verbindung fehlgeschlagen');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const cleanupDuplicateCustomers = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Find all customers with duplicate emails
|
|
const { data: allCustomers, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.order('erstellt_am', { ascending: true });
|
|
|
|
if (error) {
|
|
console.error('Error fetching customers:', error);
|
|
setError('Fehler beim Laden der Kundendaten.');
|
|
return;
|
|
}
|
|
|
|
// Group by email
|
|
const emailGroups: { [email: string]: any[] } = {};
|
|
allCustomers?.forEach(customer => {
|
|
if (!emailGroups[customer.email]) {
|
|
emailGroups[customer.email] = [];
|
|
}
|
|
emailGroups[customer.email].push(customer);
|
|
});
|
|
|
|
// Find duplicates
|
|
const duplicates = Object.entries(emailGroups)
|
|
.filter(([email, customers]) => customers.length > 1)
|
|
.map(([email, customers]) => ({ email, customers }));
|
|
|
|
console.log('Found duplicate customers:', duplicates);
|
|
|
|
if (duplicates.length === 0) {
|
|
setError('✅ Keine Duplikate gefunden!');
|
|
return;
|
|
}
|
|
|
|
let statusMessage = `🔍 ${duplicates.length} E-Mail-Adressen mit Duplikaten gefunden:\n\n`;
|
|
|
|
duplicates.forEach(({ email, customers }) => {
|
|
statusMessage += `📧 ${email}: ${customers.length} Einträge\n`;
|
|
customers.forEach((customer, index) => {
|
|
statusMessage += ` ${index + 1}. ID: ${customer.id} (${customer.erstellt_am})\n`;
|
|
});
|
|
statusMessage += '\n';
|
|
});
|
|
|
|
statusMessage += '💡 Tipp: Der neueste Eintrag wird für neue Termine verwendet.';
|
|
|
|
setError(statusMessage);
|
|
|
|
} catch (err) {
|
|
console.error('Cleanup error:', err);
|
|
setError('Fehler beim Bereinigen der Duplikate.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const checkSpecificEmail = async (email: string) => {
|
|
console.log('🔍 Checking specific email:', email);
|
|
|
|
const { data, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.eq('email', email)
|
|
.order('erstellt_am', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('Error checking email:', error);
|
|
return;
|
|
}
|
|
|
|
console.log(`Found ${data?.length || 0} entries for email "${email}":`);
|
|
data?.forEach((entry, index) => {
|
|
console.log(`${index + 1}. ID: ${entry.id}, Email: "${entry.email}", Created: ${entry.erstellt_am}`);
|
|
});
|
|
|
|
return data;
|
|
};
|
|
|
|
const formatAppointmentDate = (date: Date, time: string) => {
|
|
return new Intl.DateTimeFormat('de-DE', {
|
|
weekday: 'long',
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
}).format(date) + ` um ${time} Uhr`;
|
|
};
|
|
|
|
const cleanupIncorrectDates = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
console.log('🧹 Cleaning up incorrect appointment dates...');
|
|
|
|
// Find all entries with the incorrect date "2025-07-21 07:00:00"
|
|
const { data: incorrectEntries, error: findError } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('*')
|
|
.eq('termin_datum', '2025-07-21T07:00:00.000Z');
|
|
|
|
if (findError) {
|
|
console.error('Error finding incorrect entries:', findError);
|
|
setError('Fehler beim Finden der fehlerhaften Einträge.');
|
|
return;
|
|
}
|
|
|
|
console.log(`Found ${incorrectEntries?.length || 0} entries with incorrect date`);
|
|
|
|
if (incorrectEntries && incorrectEntries.length > 0) {
|
|
// Update all incorrect entries to remove the termin_datum
|
|
const { error: updateError } = await supabase
|
|
.from('kunden_projekte')
|
|
.update({ termin_datum: null })
|
|
.eq('termin_datum', '2025-07-21T07:00:00.000Z');
|
|
|
|
if (updateError) {
|
|
console.error('Error updating incorrect entries:', updateError);
|
|
setError('Fehler beim Bereinigen der fehlerhaften Einträge.');
|
|
return;
|
|
}
|
|
|
|
console.log('✅ Successfully cleaned up incorrect appointment dates');
|
|
alert(`✅ ${incorrectEntries.length} fehlerhafte Termine wurden bereinigt!`);
|
|
} else {
|
|
console.log('No incorrect entries found');
|
|
alert('✅ Keine fehlerhaften Termine gefunden!');
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Unexpected error cleaning up dates:', err);
|
|
setError('Ein unerwarteter Fehler ist aufgetreten.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-4xl mx-auto">
|
|
{/* Production Mode Indicator */}
|
|
{productionMode && (
|
|
<div className="mb-4 p-3 rounded-xl border-2 border-green-500 bg-green-50">
|
|
<p className="text-sm text-green-700">
|
|
✅ <strong>Terminbuchung aktiv:</strong> Ihre Termine werden direkt in unserem System gespeichert.
|
|
</p>
|
|
<div className="mt-2 flex space-x-2">
|
|
<Button
|
|
onClick={testDatabaseConnection}
|
|
disabled={loading}
|
|
className="text-xs"
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
{loading ? 'Teste...' : '🔍 DB-Verbindung testen'}
|
|
</Button>
|
|
<Button
|
|
onClick={cleanupDuplicateCustomers}
|
|
disabled={loading}
|
|
className="text-xs"
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
{loading ? 'Prüfe...' : '🔍 Duplikate prüfen'}
|
|
</Button>
|
|
<Button
|
|
onClick={cleanupIncorrectDates}
|
|
disabled={loading}
|
|
className="text-xs"
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
{loading ? 'Bereinige...' : '🧹 Fehlerhafte Termine bereinigen'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Enhanced Step Indicator */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-center space-x-2 sm:space-x-4">
|
|
{/* Step 1 */}
|
|
<div className={`flex flex-col items-center space-y-2 ${
|
|
currentStep === 'form' ? 'text-primary' :
|
|
currentStep === 'verification' || currentStep === 'success' ? 'text-primary' : 'text-gray-400'
|
|
}`}>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
|
|
currentStep === 'form'
|
|
? 'bg-primary text-white shadow-lg scale-110'
|
|
: currentStep === 'verification' || currentStep === 'success'
|
|
? 'bg-primary text-white shadow-lg'
|
|
: 'bg-gray-200 text-gray-500'
|
|
}`}>
|
|
<Calendar className="w-5 h-5" />
|
|
</div>
|
|
<span className="text-xs sm:text-sm font-medium text-center">Termin auswählen</span>
|
|
</div>
|
|
|
|
{/* Connector 1 */}
|
|
<div className={`w-8 sm:w-12 h-1 rounded-full transition-all duration-300 ${
|
|
currentStep === 'verification' || currentStep === 'success'
|
|
? 'bg-primary'
|
|
: 'bg-gray-200'
|
|
}`}></div>
|
|
|
|
{/* Step 2 */}
|
|
<div className={`flex flex-col items-center space-y-2 ${
|
|
currentStep === 'verification' || currentStep === 'success'
|
|
? 'text-primary'
|
|
: 'text-gray-400'
|
|
}`}>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
|
|
currentStep === 'verification'
|
|
? 'bg-primary text-white shadow-lg scale-110'
|
|
: currentStep === 'success'
|
|
? 'bg-primary text-white shadow-lg'
|
|
: 'bg-gray-200 text-gray-500'
|
|
}`}>
|
|
<Mail className="w-5 h-5" />
|
|
</div>
|
|
<span className="text-xs sm:text-sm font-medium text-center">E-Mail bestätigen</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Display */}
|
|
{error && (
|
|
<div className="mb-6 p-4 rounded-xl border-2 border-red-500 bg-red-50">
|
|
<pre className="text-red-600 text-sm whitespace-pre-wrap">{error}</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step Content */}
|
|
{currentStep === 'form' && (
|
|
<AppointmentForm
|
|
onSubmit={handleFormSubmit}
|
|
loading={loading}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 'verification' && appointmentData && (
|
|
<EmailVerification
|
|
email={appointmentData.email}
|
|
onVerificationComplete={handleVerificationComplete}
|
|
onBack={handleBack}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 'success' && appointmentData && (
|
|
<div className="w-full max-w-md mx-auto">
|
|
<div
|
|
className="p-6 sm:p-8 rounded-3xl shadow-lg backdrop-blur-sm text-center"
|
|
style={{ backgroundColor: `${colors.background}F0` }}
|
|
>
|
|
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
style={{ backgroundColor: `${colors.primary}20` }}>
|
|
<CheckCircle className="w-8 h-8" style={{ color: colors.primary }} />
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-bold mb-4" style={{ color: colors.primary }}>
|
|
Termin bestätigt!
|
|
</h3>
|
|
|
|
<div className="space-y-4 mb-6">
|
|
<p className="text-sm" style={{ color: colors.secondary }}>
|
|
{customerAction === 'created'
|
|
? 'Vielen Dank für Ihre erste Terminanfrage! Ihr Kundenprofil wurde erstellt.'
|
|
: 'Vielen Dank für Ihre weitere Terminanfrage! Ihr bestehendes Kundenprofil wurde aktualisiert.'
|
|
}
|
|
</p>
|
|
|
|
<div className="p-4 rounded-xl border-2"
|
|
style={{
|
|
backgroundColor: `${colors.primary}10`,
|
|
borderColor: colors.primary
|
|
}}>
|
|
<p className="font-semibold mb-2" style={{ color: colors.primary }}>
|
|
Ihr Termin:
|
|
</p>
|
|
<p className="text-sm" style={{ color: colors.secondary }}>
|
|
{formatAppointmentDate(appointmentData.termin_datum!, appointmentData.termin_time!)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-xl border-2"
|
|
style={{
|
|
backgroundColor: `${colors.primary}10`,
|
|
borderColor: colors.primary
|
|
}}>
|
|
<p className="font-semibold mb-2" style={{ color: colors.primary }}>
|
|
Kontaktdaten:
|
|
</p>
|
|
<p className="text-sm" style={{ color: colors.secondary }}>
|
|
{appointmentData.name}<br />
|
|
{appointmentData.firma}<br />
|
|
{appointmentData.email}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs mb-6" style={{ color: colors.secondary }}>
|
|
Vielen Dank für Ihre Terminanfrage! Wir werden uns in Kürze bei Ihnen melden, um den Termin zu bestätigen.
|
|
</p>
|
|
|
|
<Button
|
|
onClick={handleReset}
|
|
className="w-full rounded-xl"
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
color: colors.background
|
|
}}
|
|
>
|
|
Neuen Termin buchen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|