update
This commit is contained in:
234
components/EmailResponder.tsx
Normal file
234
components/EmailResponder.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Toast } from './Toast';
|
||||
|
||||
interface EmailResponderProps {
|
||||
contactEmail: string;
|
||||
contactName: string;
|
||||
originalMessage: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const EmailResponder: React.FC<EmailResponderProps> = ({
|
||||
contactEmail,
|
||||
contactName,
|
||||
originalMessage,
|
||||
onClose
|
||||
}) => {
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<'welcome' | 'project' | 'quick'>('welcome');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const [toastMessage, setToastMessage] = useState('');
|
||||
const [toastType, setToastType] = useState<'success' | 'error'>('success');
|
||||
|
||||
const templates = {
|
||||
welcome: {
|
||||
name: 'Willkommen',
|
||||
description: 'Freundliche Begrüßung mit Portfolio-Links',
|
||||
icon: '👋',
|
||||
color: 'from-green-500 to-emerald-600'
|
||||
},
|
||||
project: {
|
||||
name: 'Projekt-Anfrage',
|
||||
description: 'Professionelle Antwort für Projekt-Diskussionen',
|
||||
icon: '🚀',
|
||||
color: 'from-purple-500 to-violet-600'
|
||||
},
|
||||
quick: {
|
||||
name: 'Schnelle Antwort',
|
||||
description: 'Kurze, schnelle Bestätigung',
|
||||
icon: '⚡',
|
||||
color: 'from-amber-500 to-orange-600'
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendEmail = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/email/respond', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
to: contactEmail,
|
||||
name: contactName,
|
||||
template: selectedTemplate,
|
||||
originalMessage: originalMessage
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setToastMessage(`✅ ${data.message}`);
|
||||
setToastType('success');
|
||||
setShowToast(true);
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 2000);
|
||||
} else {
|
||||
setToastMessage(`❌ ${data.error}`);
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
}
|
||||
} catch (error) {
|
||||
setToastMessage('❌ Fehler beim Senden der E-Mail');
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2>
|
||||
<p className="text-blue-100 mt-1">Wähle ein schönes Template für deine Antwort</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white hover:text-gray-200 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="bg-gray-50 rounded-xl p-4 mb-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-sm text-gray-600">Name:</span>
|
||||
<p className="font-medium text-gray-900">{contactName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-600">E-Mail:</span>
|
||||
<p className="font-medium text-gray-900">{contactEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Original Message Preview */}
|
||||
<div className="bg-blue-50 rounded-xl p-4 mb-6">
|
||||
<h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3>
|
||||
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500">
|
||||
<p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template Selection */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-4">🎨 Template auswählen</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{Object.entries(templates).map(([key, template]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${
|
||||
selectedTemplate === key
|
||||
? 'border-blue-500 bg-blue-50 shadow-lg scale-105'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:shadow-md'
|
||||
}`}
|
||||
onClick={() => setSelectedTemplate(key as any)}
|
||||
>
|
||||
<div className={`bg-gradient-to-r ${template.color} text-white p-4 rounded-t-xl`}>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">{template.icon}</div>
|
||||
<h4 className="font-bold text-lg">{template.name}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 text-center">{template.description}</p>
|
||||
</div>
|
||||
{selectedTemplate === key && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3>
|
||||
<div className="bg-gray-100 rounded-xl p-4">
|
||||
<div className="bg-white rounded-lg shadow-sm border">
|
||||
<div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}>
|
||||
<h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
|
||||
<p className="text-sm opacity-90">An: {contactName}</p>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'}
|
||||
{selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'}
|
||||
{selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSendEmail}
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Sende...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
📧 E-Mail senden
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toast */}
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
type={toastType}
|
||||
onClose={() => setShowToast(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user