F

src/pages/profile/ui/ProfilePage.tsx

@@ -1,8 +1,9 @@
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useMe } from '@features/auth'
+import { useMe, useUpdatePhone } from '@features/auth'
 import { usePortfolio, useWalletAddresses } from '@features/wallet'
 import { ROUTES } from '@shared/config/routes'
-import { Button, FormField } from '@shared/ui'
+import { Button, FormField, Notification } from '@shared/ui'
 import { WalletHeader } from '@widgets/wallet-header'
 import { ProfileAvatar, ProfileSection } from '@widgets/profile'
 import styles from './ProfilePage.module.css'
@@ -11,8 +12,34 @@ export function ProfilePage() {
   const { data } = useMe()
   const { data: portfolio, isLoading: isPortfolioLoading } = usePortfolio()
   const { data: walletAddresses } = useWalletAddresses()
+  const updatePhone = useUpdatePhone()
   const navigate = useNavigate()
 
+  const [phone, setPhone] = useState('')
+  const [savedPhone, setSavedPhone] = useState('')
+  const [notification, setNotification] = useState<{ message: string; status: 'success' | 'error' } | null>(null)
+
+  useEffect(() => {
+    if (data?.phone != null) {
+      setPhone(data.phone)
+      setSavedPhone(data.phone)
+    }
+  }, [data?.phone])
+
+  function handlePhoneBlur() {
+    const next = phone.trim()
+    if (next === savedPhone || updatePhone.isPending) return
+    updatePhone.mutate(next, {
+      onSuccess: () => {
+        setSavedPhone(next)
+        setNotification({ status: 'success', message: 'Номер телефона обновлён' })
+      },
+      onError: () => {
+        setNotification({ status: 'error', message: 'Не удалось обновить номер телефона' })
+      },
+    })
+  }
+
   const capitalize = (s: string) => (s ? s[0].toUpperCase() + s.slice(1).toLowerCase() : '')
   const fullName = data
     ? [data.last_name, data.first_name, data.middle_name].filter(Boolean).map(capitalize).join(' ')
@@ -44,10 +71,10 @@ export function ProfilePage() {
         <div className={styles.sections}>
           <ProfileSection title="Личные данные">
             <div className={styles.grid2}>
-              <FormField label="Полное ФИО" value={fullName} placeholder="Например: Иванов Иван Иванович" />
+              <FormField label="Полное ФИО" value={fullName} placeholder="Например: Иванов Иван Иванович" readOnly />
               <FormField label="Адрес электронной почты" value={data?.email ?? ''} type="email" icon="check" placeholder="example@mail.ru" readOnly />
               <FormField label="Серия и номер паспорта" value={data?.passport_data ?? ''} placeholder="0000 000000" readOnly />
-              <FormField label="Номер телефона" value={data?.phone ?? ''} type="tel" icon="check" placeholder="+7 (999) 000-00-00" readOnly />
+              <FormField label="Номер телефона" value={phone} onChange={setPhone} onBlur={handlePhoneBlur} type="tel" placeholder="+7 (999) 000-00-00" />
             </div>
           </ProfileSection>
 
@@ -92,6 +119,13 @@ export function ProfilePage() {
           </ProfileSection>
         </div>
       </main>
+      {notification && (
+        <Notification
+          status={notification.status}
+          message={notification.message}
+          onClose={() => setNotification(null)}
+        />
+      )}
     </div>
   )
 }