Ticket form: new stack + description step

2025-11-14 19:06:36 +03:00
parent 3d121054ab
commit 3306d01e0d
16 changed files with 488 additions and 73 deletions
--- a/frontend/src/components/form/StepDescription.tsx
+++ b/frontend/src/components/form/StepDescription.tsx
@@ -0,0 +1,121 @@
+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>
+  );
+}
+