398 lines
19 KiB
TypeScript
398 lines
19 KiB
TypeScript
import { Head } from '@inertiajs/react';
|
|
import { useState, useEffect } from 'react';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Strona główna',
|
|
href: '/',
|
|
},
|
|
{
|
|
title: 'Kontakt',
|
|
href: '/kontakt',
|
|
},
|
|
];
|
|
|
|
interface ContactData {
|
|
system_email: string;
|
|
telephone: string;
|
|
email: string;
|
|
address: string;
|
|
fax: string;
|
|
}
|
|
|
|
interface ContactApiResponse {
|
|
contact: ContactData;
|
|
}
|
|
|
|
export default function Contact() {
|
|
const [contactData, setContactData] = useState<ContactData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: '',
|
|
agreement: false,
|
|
});
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
const [submitStatus, setSubmitStatus] = useState<{
|
|
success: boolean;
|
|
message: string;
|
|
} | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/contact')
|
|
.then(response => response.json())
|
|
.then((data: ContactApiResponse) => {
|
|
setContactData(data.contact);
|
|
setLoading(false);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching contact data:', error);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
|
|
// Clear error for this field when user starts typing
|
|
if (errors[name]) {
|
|
setErrors(prev => {
|
|
const newErrors = { ...prev };
|
|
delete newErrors[name];
|
|
return newErrors;
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleCheckboxChange = (checked: boolean) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
agreement: checked,
|
|
}));
|
|
|
|
// Clear error for agreement when user checks it
|
|
if (errors.agreement) {
|
|
setErrors(prev => {
|
|
const newErrors = { ...prev };
|
|
delete newErrors.agreement;
|
|
return newErrors;
|
|
});
|
|
}
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const newErrors: Record<string, string> = {};
|
|
|
|
if (!formData.name.trim()) {
|
|
newErrors.name = 'Imię i nazwisko jest wymagane';
|
|
}
|
|
|
|
if (!formData.email.trim()) {
|
|
newErrors.email = 'Adres e-mail jest wymagany';
|
|
} else if (!/^\S+@\S+\.\S+$/.test(formData.email)) {
|
|
newErrors.email = 'Podaj poprawny adres e-mail';
|
|
}
|
|
|
|
if (!formData.subject.trim()) {
|
|
newErrors.subject = 'Temat jest wymagany';
|
|
}
|
|
|
|
if (!formData.message.trim()) {
|
|
newErrors.message = 'Treść wiadomości jest wymagana';
|
|
}
|
|
|
|
if (!formData.agreement) {
|
|
newErrors.agreement = 'Wymagana jest zgoda na przetwarzanie danych osobowych';
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
setSubmitting(true);
|
|
setSubmitStatus(null);
|
|
|
|
try {
|
|
const csrfToken = document.head?.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
|
|
|
|
const response = await fetch('/kontakt/wyslij', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken,
|
|
'Accept': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
setSubmitStatus({
|
|
success: true,
|
|
message: data.message || 'Wiadomość została wysłana pomyślnie.'
|
|
});
|
|
|
|
// Resetowanie formularza po udanym wysłaniu
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: '',
|
|
agreement: false,
|
|
});
|
|
} else {
|
|
setSubmitStatus({
|
|
success: false,
|
|
message: data.message || 'Wystąpił błąd podczas wysyłania wiadomości.'
|
|
});
|
|
|
|
if (data.errors) {
|
|
setErrors(data.errors);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Błąd wysyłania formularza:', error);
|
|
setSubmitStatus({
|
|
success: false,
|
|
message: 'Wystąpił błąd podczas wysyłania wiadomości. Spróbuj ponownie później.'
|
|
});
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Kontakt" />
|
|
<div className="bg-background">
|
|
<main className="max-w-screen-xl mx-auto px-4 xl:px-0 py-8">
|
|
<h1 className="text-3xl font-bold mb-6">Kontakt</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dane kontaktowe</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{loading ? (
|
|
<div className="animate-pulse space-y-3">
|
|
<div className="h-4 bg-muted rounded w-3/4"></div>
|
|
<div className="h-4 bg-muted rounded w-1/2"></div>
|
|
<div className="h-4 bg-muted rounded w-2/3"></div>
|
|
<div className="h-4 bg-muted rounded w-3/5"></div>
|
|
<div className="h-4 bg-muted rounded w-1/3"></div>
|
|
</div>
|
|
) : contactData ? (
|
|
<>
|
|
<div>
|
|
<h3 className="font-medium text-muted-foreground">Adres:</h3>
|
|
<p className="mt-1" dangerouslySetInnerHTML={{ __html: contactData.address }}></p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-medium text-muted-foreground">Telefon:</h3>
|
|
<p className="mt-1">{contactData.telephone}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-medium text-muted-foreground">Fax:</h3>
|
|
<p className="mt-1">{contactData.fax}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-medium text-muted-foreground">E-mail:</h3>
|
|
<p className="mt-1">
|
|
<a
|
|
href={`mailto:${contactData.email}`}
|
|
className="text-primary hover:underline"
|
|
>
|
|
{contactData.email}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p>Nie udało się załadować danych kontaktowych.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-8">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Mapa</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="aspect-video rounded-md overflow-hidden">
|
|
<iframe
|
|
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2420.3711291827294!2d16.8160558!3d52.6532738!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47046cc587759f69%3A0xe9da2228ba6bf067!2sSamodzielny%20Publiczny%20Zak%C5%82ad%20Opieki%20Zdrowotnej%20w%20Obornikach!5e0!3m2!1spl!2spl!4v1745879921955!5m2!1spl!2spl"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 0 }}
|
|
allowFullScreen
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
></iframe>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Formularz kontaktowy</CardTitle>
|
|
<CardDescription>Skontaktuj się z nami</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{submitStatus && (
|
|
<Alert className={`mb-6 ${submitStatus.success ? 'bg-green-50 text-green-800 border-green-200 contrast:bg-black contrast:border-green-700' : 'bg-red-50 dark:bg-red-200 contrast:bg-black contrast:border-red-700 text-red-800 border-red-200'}`}>
|
|
<AlertTitle className='contrast:text-foreground'>{submitStatus.success ? 'Sukces!' : 'Błąd!'}</AlertTitle>
|
|
<AlertDescription className="dark:text-black">{submitStatus.message}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Imię i nazwisko *</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
autoComplete='off'
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className={errors.name ? 'border-red-500' : ''}
|
|
/>
|
|
{errors.name && (
|
|
<p className="text-sm text-red-500">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Adres e-mail *</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
autoComplete='off'
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className={errors.email ? 'border-red-500' : ''}
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-sm text-red-500">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">Telefon</Label>
|
|
<Input
|
|
autoComplete='off'
|
|
id="phone"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="subject">Temat *</Label>
|
|
<Input
|
|
autoComplete='off'
|
|
id="subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
className={errors.subject ? 'border-red-500' : ''}
|
|
/>
|
|
{errors.subject && (
|
|
<p className="text-sm text-red-500">{errors.subject}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="message">Treść wiadomości *</Label>
|
|
<Textarea
|
|
autoComplete='off'
|
|
id="message"
|
|
name="message"
|
|
rows={5}
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
className={cn('dark:bg-transparent', errors.message ? 'border-red-500' : '')}
|
|
/>
|
|
{errors.message && (
|
|
<p className="text-sm text-red-500">{errors.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id="agreement"
|
|
checked={formData.agreement}
|
|
onCheckedChange={handleCheckboxChange}
|
|
className={`mt-1 ${errors.agreement ? 'border-red-500' : ''}`}
|
|
/>
|
|
<div className="grid gap-1.5 leading-none">
|
|
<Label
|
|
htmlFor="agreement"
|
|
className="text-sm font-normal"
|
|
>
|
|
Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w powyższym formularzu. *
|
|
</Label>
|
|
{errors.agreement && (
|
|
<p className="text-sm text-red-500">{errors.agreement}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<Button
|
|
type="submit"
|
|
disabled={submitting}
|
|
className="cursor-pointer"
|
|
>
|
|
{submitting ? 'Wysyłanie...' : 'Wyślij wiadomość'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|