272 lines
8.4 KiB
TypeScript
272 lines
8.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { getDictionary } from '@/lib/i18n';
|
|
import { Card, CardBody, CardHeader, Button } from '@/components/ui';
|
|
|
|
interface FormData {
|
|
name: string;
|
|
email: string;
|
|
phone: string;
|
|
subject: string;
|
|
message: string;
|
|
}
|
|
|
|
export function ContactForm() {
|
|
const pathname = usePathname();
|
|
const locale = pathname.split('/')[1] || 'en';
|
|
const [dict, setDict] = useState<any>({});
|
|
const [formData, setFormData] = useState<FormData>({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: '',
|
|
});
|
|
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
const [errors, setErrors] = useState<Partial<FormData>>({});
|
|
|
|
// Load dictionary on component mount and when locale changes
|
|
useEffect(() => {
|
|
const loadDict = async () => {
|
|
try {
|
|
const loadedDict = await getDictionary(locale as 'en' | 'de');
|
|
setDict(loadedDict);
|
|
} catch (error) {
|
|
console.error('Error loading dictionary:', error);
|
|
// Set empty dictionary to prevent infinite loading
|
|
setDict({});
|
|
}
|
|
};
|
|
loadDict();
|
|
}, [locale]);
|
|
|
|
const t = (key: string): string => {
|
|
if (!dict || Object.keys(dict).length === 0) return key;
|
|
|
|
const keys = key.split('.');
|
|
let value: any = dict;
|
|
|
|
for (const k of keys) {
|
|
value = value?.[k];
|
|
if (value === undefined) return key;
|
|
}
|
|
|
|
return value || key;
|
|
};
|
|
|
|
const validateForm = (): boolean => {
|
|
const newErrors: Partial<FormData> = {};
|
|
|
|
if (!formData.name.trim()) {
|
|
newErrors.name = t('contact.errors.nameRequired');
|
|
}
|
|
|
|
if (!formData.email.trim()) {
|
|
newErrors.email = t('contact.errors.emailRequired');
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
newErrors.email = t('contact.errors.emailInvalid');
|
|
}
|
|
|
|
if (!formData.message.trim()) {
|
|
newErrors.message = t('contact.errors.messageRequired');
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
setStatus('loading');
|
|
|
|
try {
|
|
const response = await fetch(`/${locale}/api/contact`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
...formData,
|
|
locale,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setStatus('success');
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: '',
|
|
});
|
|
} else {
|
|
setStatus('error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Contact form error:', error);
|
|
setStatus('error');
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
|
|
// Clear error when user starts typing
|
|
if (errors[name as keyof FormData]) {
|
|
setErrors(prev => ({
|
|
...prev,
|
|
[name]: undefined,
|
|
}));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card variant="elevated" padding="lg">
|
|
<CardHeader
|
|
title={t('contact.title')}
|
|
subtitle={t('contact.subtitle')}
|
|
/>
|
|
<CardBody>
|
|
{status === 'success' && (
|
|
<div className="p-4 bg-green-50 border border-green-200 rounded-lg text-green-800 mb-4">
|
|
{t('contact.success')}
|
|
</div>
|
|
)}
|
|
|
|
{status === 'error' && (
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 mb-4">
|
|
{t('contact.error')}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('contact.name')} *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
|
|
errors.name ? 'border-red-500 bg-red-50' : 'border-gray-300'
|
|
}`}
|
|
disabled={status === 'loading'}
|
|
aria-invalid={!!errors.name}
|
|
aria-describedby={errors.name ? 'name-error' : undefined}
|
|
/>
|
|
{errors.name && (
|
|
<p id="name-error" className="mt-1 text-sm text-red-600">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('contact.email')} *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
|
|
errors.email ? 'border-red-500 bg-red-50' : 'border-gray-300'
|
|
}`}
|
|
disabled={status === 'loading'}
|
|
aria-invalid={!!errors.email}
|
|
aria-describedby={errors.email ? 'email-error' : undefined}
|
|
/>
|
|
{errors.email && (
|
|
<p id="email-error" className="mt-1 text-sm text-red-600">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('contact.phone')}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('contact.subject')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('contact.message')} *
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows={6}
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
|
|
errors.message ? 'border-red-500 bg-red-50' : 'border-gray-300'
|
|
}`}
|
|
disabled={status === 'loading'}
|
|
aria-invalid={!!errors.message}
|
|
aria-describedby={errors.message ? 'message-error' : undefined}
|
|
/>
|
|
{errors.message && (
|
|
<p id="message-error" className="mt-1 text-sm text-red-600">{errors.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between gap-4">
|
|
<p className="text-sm text-gray-500">
|
|
{t('contact.requiredFields')}
|
|
</p>
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
size="lg"
|
|
loading={status === 'loading'}
|
|
disabled={status === 'loading'}
|
|
>
|
|
{status === 'loading' ? t('contact.sending') : t('contact.submit')}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
} |