122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
import { Form, Input, Button, Typography, message } from 'antd';
|
||
import { useEffect, useState } from 'react';
|
||
|
||
const { TextArea } = Input;
|
||
const { Paragraph } = Typography;
|
||
|
||
interface Props {
|
||
formData: any;
|
||
updateFormData: (data: any) => void;
|
||
onPrev: () => void;
|
||
onNext: () => void;
|
||
}
|
||
|
||
export default function StepDescription({
|
||
formData,
|
||
updateFormData,
|
||
onPrev,
|
||
onNext,
|
||
}: Props) {
|
||
const [form] = Form.useForm();
|
||
const [submitting, setSubmitting] = useState(false);
|
||
|
||
useEffect(() => {
|
||
form.setFieldsValue({
|
||
problemDescription: formData.problemDescription ?? '',
|
||
});
|
||
}, [form, formData.problemDescription]);
|
||
|
||
const handleContinue = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
|
||
if (!formData.session_id) {
|
||
message.error('Не найден session_id. Попробуйте обновить страницу.');
|
||
return;
|
||
}
|
||
|
||
setSubmitting(true);
|
||
|
||
const response = await fetch('/api/v1/claims/description', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
session_id: formData.session_id,
|
||
claim_id: formData.claim_id,
|
||
phone: formData.phone,
|
||
email: formData.email,
|
||
problem_description: values.problemDescription,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`Ошибка API: ${response.status}`);
|
||
}
|
||
|
||
message.success('Описание отправлено, продолжаем заполнение');
|
||
updateFormData(values);
|
||
onNext();
|
||
} catch (error) {
|
||
console.error(error);
|
||
message.error('Не получилось сохранить описание. Попробуйте ещё раз.');
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ marginTop: 24 }}>
|
||
<Button onClick={onPrev} size="large">
|
||
← Назад
|
||
</Button>
|
||
|
||
<div
|
||
style={{
|
||
marginTop: 24,
|
||
padding: 24,
|
||
background: '#f6f8fa',
|
||
borderRadius: 12,
|
||
border: '1px solid #e0e6ed',
|
||
}}
|
||
>
|
||
<Paragraph style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>
|
||
📄 Опишите проблему
|
||
</Paragraph>
|
||
<Paragraph type="secondary" style={{ marginBottom: 24 }}>
|
||
Расскажите, что произошло, в свободной форме. Чем больше деталей —
|
||
тем быстрее команда сможет разобраться, какие документы нужны и куда
|
||
направить заявку.
|
||
</Paragraph>
|
||
|
||
<Form layout="vertical" form={form}>
|
||
<Form.Item
|
||
label="Описание ситуации"
|
||
name="problemDescription"
|
||
rules={[
|
||
{ required: true, message: 'Поле обязательно' },
|
||
{
|
||
min: 20,
|
||
message: 'Опишите, пожалуйста, минимум в пару предложений',
|
||
},
|
||
]}
|
||
>
|
||
<TextArea
|
||
autoSize={{ minRows: 6 }}
|
||
maxLength={3000}
|
||
showCount
|
||
placeholder="Например: заключил договор на оказание услуг..., деньги списали..., услугу не выполнили..."
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
|
||
<Button type="primary" size="large" onClick={handleContinue} loading={submitting}>
|
||
Продолжить →
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|