115 lines
3.9 KiB
React
115 lines
3.9 KiB
React
'use client';
|
|
|
|
import { Form, Input, Select, Button, message } from 'antd';
|
|
import { useLanguage } from '@/app/context/LanguageContext';
|
|
|
|
const { TextArea } = Input;
|
|
|
|
export default function TicketForm() {
|
|
const { t, locale } = useLanguage();
|
|
const [form] = Form.useForm();
|
|
|
|
const handleFinish = async (values) => {
|
|
// -------------------------------------------------------------------
|
|
// TODO: Connect to the real ticketing/support API.
|
|
//
|
|
// import axios from 'axios';
|
|
//
|
|
// try {
|
|
// await axios.post('/api/tickets', values);
|
|
// } catch (err) {
|
|
// message.error('...');
|
|
// return;
|
|
// }
|
|
// -------------------------------------------------------------------
|
|
console.log('Ticket submitted (placeholder):', values);
|
|
message.success(t.ticket.successMsg);
|
|
form.resetFields();
|
|
};
|
|
|
|
return (
|
|
<section id="support" className="relative px-6 md:px-16 py-20 md:py-28 bg-page border-t border-subtle">
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="text-center mb-10">
|
|
<span className="text-brand-400 text-sm font-semibold tracking-wide">{t.ticket.eyebrow}</span>
|
|
<h2 className="text-2xl md:text-4xl font-extrabold brand-gradient-text mt-3 mb-3">
|
|
{t.ticket.title}
|
|
</h2>
|
|
<p className="text-secondary text-sm md:text-base">{t.ticket.subtitle}</p>
|
|
</div>
|
|
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
onFinish={handleFinish}
|
|
requiredMark={false}
|
|
initialValues={{ priority: 'medium' }}
|
|
>
|
|
<div className="grid md:grid-cols-2 gap-x-4">
|
|
<Form.Item
|
|
label={<span className="text-secondary">{t.ticket.name}</span>}
|
|
name="name"
|
|
rules={[{ required: true, message: t.ticket.requiredMsg }]}
|
|
>
|
|
<Input size="large" placeholder={t.ticket.namePlaceholder} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={<span className="text-secondary">{t.ticket.phone}</span>}
|
|
name="phone"
|
|
rules={[
|
|
{ required: true, message: t.ticket.requiredMsg },
|
|
{ pattern: /^[0-9+\s-]{7,15}$/, message: t.ticket.invalidPhone },
|
|
]}
|
|
>
|
|
<Input size="large" placeholder={t.ticket.phonePlaceholder} dir="ltr" />
|
|
</Form.Item>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-x-4">
|
|
<Form.Item
|
|
label={<span className="text-secondary">{t.ticket.email}</span>}
|
|
name="email"
|
|
rules={[{ type: 'email', message: t.ticket.invalidEmail }]}
|
|
>
|
|
<Input size="large" placeholder={t.ticket.emailPlaceholder} dir="ltr" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={<span className="text-secondary">{t.ticket.priority}</span>}
|
|
name="priority"
|
|
>
|
|
<Select
|
|
size="large"
|
|
options={t.ticket.priorities.map((p) => ({ value: p.value, label: p.label }))}
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
|
|
<Form.Item
|
|
label={<span className="text-secondary">{t.ticket.subject}</span>}
|
|
name="subject"
|
|
rules={[{ required: true, message: t.ticket.requiredMsg }]}
|
|
>
|
|
<Input size="large" placeholder={t.ticket.subjectPlaceholder} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={<span className="text-secondary">{t.ticket.message}</span>}
|
|
name="message"
|
|
rules={[{ required: true, message: t.ticket.requiredMsg }]}
|
|
>
|
|
<TextArea rows={5} placeholder={t.ticket.messagePlaceholder} />
|
|
</Form.Item>
|
|
|
|
<Form.Item className="mb-0">
|
|
<Button type="primary" size="large" htmlType="submit" block>
|
|
{t.ticket.submit}
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|