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>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|