134 lines
4.1 KiB
TypeScript
134 lines
4.1 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import { useForm } from '@/app/hooks/useForm'
|
||
import Button from '@/components/ui/Button'
|
||
import showToast from '@/components/ui/Toast'
|
||
import useUserStore from '@/app/store/userStore'
|
||
|
||
import TextInput from '@/components/ui/TextInput'
|
||
import PhoneInput from '@/components/ui/PhoneInput'
|
||
|
||
const validationRules = {
|
||
firstName: { required: true },
|
||
lastName: { required: false },
|
||
phone_number: { required: true },
|
||
email: { required: true },
|
||
country: { required: false },
|
||
city: { required: false },
|
||
}
|
||
|
||
const AccountPage = () => {
|
||
const { user, setUser } = useUserStore()
|
||
|
||
const { values, handleChange, handleSubmit } = useForm(
|
||
{
|
||
firstName: user?.name || '',
|
||
lastName: user?.surname || '',
|
||
phone_number: user?.phone_number || '',
|
||
email: user?.email || '',
|
||
country: user?.country || '',
|
||
city: user?.city || '',
|
||
},
|
||
validationRules,
|
||
async values => {
|
||
try {
|
||
const response = await fetch('/api/account/main', {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(values),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const error = await response.json()
|
||
throw new Error(error.error || 'Ошибка при обновлении данных')
|
||
}
|
||
|
||
const result = await response.json()
|
||
setUser(result.user)
|
||
showToast({ type: 'success', message: 'Данные успешно обновлены!' })
|
||
} catch (error) {
|
||
showToast({
|
||
type: 'error',
|
||
message: error instanceof Error ? error.message : 'Ой, что то пошло не так..',
|
||
})
|
||
}
|
||
}
|
||
)
|
||
|
||
if (!user) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="overflow-hidden rounded-2xl shadow">
|
||
<div className="bg-white p-6 sm:p-8">
|
||
<div className="space-y-4">
|
||
<h1 className="text-2xl">Личные данные</h1>
|
||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||
<TextInput
|
||
name="firstName"
|
||
value={values.firstName}
|
||
handleChange={handleChange}
|
||
label="Имя"
|
||
placeholder="Ваше имя"
|
||
style="register"
|
||
/>
|
||
<TextInput
|
||
name="lastName"
|
||
value={values.lastName}
|
||
handleChange={handleChange}
|
||
label="Фамилия"
|
||
placeholder="Ваша фамилия"
|
||
style="register"
|
||
/>
|
||
<TextInput
|
||
name="email"
|
||
value={values.email}
|
||
handleChange={handleChange}
|
||
label="Email"
|
||
placeholder="Ваш email"
|
||
style="register"
|
||
/>
|
||
<PhoneInput
|
||
value={values.phone_number}
|
||
handleChange={handleChange}
|
||
operatorsInfo={false}
|
||
/>
|
||
<TextInput
|
||
name="country"
|
||
value={values.country}
|
||
handleChange={handleChange}
|
||
label="Страна"
|
||
placeholder="Ваша страна проживания"
|
||
style="register"
|
||
/>
|
||
<TextInput
|
||
name="city"
|
||
value={values.city}
|
||
handleChange={handleChange}
|
||
label="Город"
|
||
placeholder="Ваш город проживания"
|
||
style="register"
|
||
/>
|
||
</div>
|
||
|
||
<Button
|
||
text="Сохранить изменения"
|
||
className="bg-orange flex items-center rounded-2xl px-6 py-4 text-sm font-semibold whitespace-nowrap text-white"
|
||
type="submit"
|
||
/>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default AccountPage
|