From 23a236a03674234b3538aac63fe0c08e045a1d4e Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@clientright.ru>
Date: Tue, 25 Nov 2025 12:37:46 +0300
Subject: [PATCH] fix: Move React hooks before conditional render in
 StepClaimConfirmation

Fixed React Hooks order violation:
- Moved handleSendCode, handleVerifyCode, handleCancelSMS useCallback hooks BEFORE conditional render
- Changed handleCancelSMS to useCallback for consistency
- Moved phone/displayPhone calculations before conditional render
- All hooks now called in the same order on every render

This fixes the error: 'Rendered more hooks than during the previous render'

Files:
- frontend/src/components/form/StepClaimConfirmation.tsx
---
 .../components/form/StepClaimConfirmation.tsx | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/form/StepClaimConfirmation.tsx b/frontend/src/components/form/StepClaimConfirmation.tsx
index 8f4b9b9..2d1fdba 100644
--- a/frontend/src/components/form/StepClaimConfirmation.tsx
+++ b/frontend/src/components/form/StepClaimConfirmation.tsx
@@ -281,17 +281,6 @@ export default function StepClaimConfirmation({
     };
   }, [onNext, onPrev, sendSMSCode, claimPlanData]);
 
-  if (loading) {
-    return (
-      <Card>
-        <div style={{ textAlign: 'center', padding: '40px' }}>
-          <Spin size="large" />
-          <p style={{ marginTop: '16px' }}>Загрузка формы подтверждения...</p>
-        </div>
-      </Card>
-    );
-  }
-
   // Обработчик отправки SMS-кода из модалки
   const handleSendCode = useCallback(async () => {
     const phone = 
@@ -330,14 +319,15 @@ export default function StepClaimConfirmation({
   }, [claimPlanData, smsForm, verifySMSCode]);
 
   // Обработчик отмены SMS-апрува
-  const handleCancelSMS = () => {
+  const handleCancelSMS = useCallback(() => {
     setSmsModalVisible(false);
     setSmsCodeSent(false);
     setPendingFormData(null);
     smsForm.resetFields();
     message.info('Подтверждение отменено');
-  };
+  }, [smsForm]);
 
+  // Вычисляем телефон для отображения (до условного рендера)
   const phone = 
     claimPlanData?.propertyName?.applicant?.phone ||
     claimPlanData?.propertyName?.user?.mobile ||
@@ -345,6 +335,17 @@ export default function StepClaimConfirmation({
     '';
   const displayPhone = phone ? (phone.length > 4 ? `${phone.slice(0, -4)}****` : '****') : '****';
 
+  if (loading) {
+    return (
+      <Card>
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+          <Spin size="large" />
+          <p style={{ marginTop: '16px' }}>Загрузка формы подтверждения...</p>
+        </div>
+      </Card>
+    );
+  }
+
   return (
     <>
       <Card