🚀 MVP: FastAPI + React форма с SMS верификацией

✅ Инфраструктура: PostgreSQL, Redis, RabbitMQ, S3 ✅ Backend: SMS сервис + API endpoints ✅ Frontend: React форма (3 шага) + SMS верификация
2025-10-24 16:19:58 +03:00
parent 8af23e90fa
commit 0f82eef08d
42 changed files with 2902 additions and 241 deletions
--- a/frontend/src/pages/ClaimForm.tsx
+++ b/frontend/src/pages/ClaimForm.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Steps, Card, message } from 'antd';
+import Step1Phone from '../components/form/Step1Phone';
+import Step2Details from '../components/form/Step2Details';
+import Step3Payment from '../components/form/Step3Payment';
+import './ClaimForm.css';
+
+const { Step } = Steps;
+
+interface FormData {
+  // Шаг 1
+  phone: string;
+  email?: string;
+  inn?: string;
+  policyNumber: string;
+  policySeries?: string;
+  
+  // Шаг 2
+  incidentDate?: string;
+  incidentDescription?: string;
+  transportType?: string;
+  uploadedFiles?: string[];
+  
+  // Шаг 3
+  paymentMethod: string;
+  bankName?: string;
+  cardNumber?: string;
+  accountNumber?: string;
+}
+
+export default function ClaimForm() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [formData, setFormData] = useState<FormData>({
+    phone: '',
+    policyNumber: '',
+    paymentMethod: 'sbp',
+  });
+  const [isPhoneVerified, setIsPhoneVerified] = useState(false);
+
+  const updateFormData = (data: Partial<FormData>) => {
+    setFormData({ ...formData, ...data });
+  };
+
+  const nextStep = () => {
+    setCurrentStep(currentStep + 1);
+  };
+
+  const prevStep = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const response = await fetch('http://147.45.146.17:8100/api/v1/claims/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          phone: formData.phone,
+          email: formData.email,
+          inn: formData.inn,
+          policy_number: formData.policyNumber,
+          policy_series: formData.policySeries,
+          incident_date: formData.incidentDate,
+          incident_description: formData.incidentDescription,
+          transport_type: formData.transportType,
+          payment_method: formData.paymentMethod,
+          bank_name: formData.bankName,
+          card_number: formData.cardNumber,
+          account_number: formData.accountNumber,
+          uploaded_files: formData.uploadedFiles || [],
+        }),
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        message.success(`Заявка ${result.claim_number} успешно создана!`);
+        // Сброс формы
+        setFormData({
+          phone: '',
+          policyNumber: '',
+          paymentMethod: 'sbp',
+        });
+        setCurrentStep(0);
+        setIsPhoneVerified(false);
+      } else {
+        message.error('Ошибка при создании заявки');
+      }
+    } catch (error) {
+      message.error('Ошибка соединения с сервером');
+      console.error(error);
+    }
+  };
+
+  const steps = [
+    {
+      title: 'Телефон и полис',
+      content: (
+        <Step1Phone
+          formData={formData}
+          updateFormData={updateFormData}
+          onNext={nextStep}
+          isPhoneVerified={isPhoneVerified}
+          setIsPhoneVerified={setIsPhoneVerified}
+        />
+      ),
+    },
+    {
+      title: 'Детали происшествия',
+      content: (
+        <Step2Details
+          formData={formData}
+          updateFormData={updateFormData}
+          onNext={nextStep}
+          onPrev={prevStep}
+        />
+      ),
+    },
+    {
+      title: 'Способ выплаты',
+      content: (
+        <Step3Payment
+          formData={formData}
+          updateFormData={updateFormData}
+          onPrev={prevStep}
+          onSubmit={handleSubmit}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="claim-form-container">
+      <Card title="Подать заявку на выплату" className="claim-form-card">
+        <Steps current={currentStep} className="steps">
+          {steps.map((item) => (
+            <Step key={item.title} title={item.title} />
+          ))}
+        </Steps>
+        <div className="steps-content">{steps[currentStep].content}</div>
+      </Card>
+    </div>
+  );
+}
+