96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import { useForm } from '@/app/hooks/useForm'
|
||
import { getSourceFromPath } from '@/lib/utils/pathMapper'
|
||
import { usePathname } from 'next/navigation'
|
||
import TextInput from './ui/TextInput'
|
||
import TextAreaInput from './ui/TextAreaInput'
|
||
import PhoneInput from './ui/PhoneInput'
|
||
import showToast from './ui/Toast'
|
||
import Button from './ui/Button'
|
||
import { sendMessage } from '@/lib/telegram/sendMessage'
|
||
import useUserStore from '@/app/store/userStore'
|
||
|
||
const validationRules = {
|
||
source: { required: true },
|
||
name: { required: true },
|
||
phone_number: { required: true },
|
||
message: { required: true },
|
||
}
|
||
|
||
const ContactUs = () => {
|
||
const pathname = usePathname()
|
||
const source = getSourceFromPath(pathname)
|
||
|
||
const { user } = useUserStore()
|
||
const { values, handleChange, handleSubmit, resetField } = useForm(
|
||
{
|
||
source: source,
|
||
name: user?.name || '',
|
||
phone_number: user?.phone_number || '',
|
||
message: '',
|
||
},
|
||
validationRules,
|
||
async values => {
|
||
try {
|
||
await sendMessage(values)
|
||
|
||
showToast({
|
||
type: 'success',
|
||
message: 'Ваше сообщение отправлено!',
|
||
})
|
||
|
||
resetField('message')
|
||
} catch (error) {
|
||
console.error('ContactUs - Error details:', error)
|
||
showToast({ type: 'error', message: 'Ой, что то пошло не так..' })
|
||
}
|
||
}
|
||
)
|
||
|
||
return (
|
||
<div className="overflow-hidden rounded-2xl shadow">
|
||
<div className="bg-white p-6 sm:p-8">
|
||
<div className="space-y-4">
|
||
<h2 className="text-2xl">Хотели бы связаться с нами?</h2>
|
||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||
<div className="grid h-full grid-cols-1 gap-6 md:grid-cols-2">
|
||
<div className="flex h-full flex-col space-y-4">
|
||
<TextInput
|
||
label="Ваше имя"
|
||
value={values.name}
|
||
handleChange={handleChange}
|
||
placeholder="Имя"
|
||
name="name"
|
||
style="register"
|
||
/>
|
||
<PhoneInput
|
||
value={values.phone_number}
|
||
handleChange={handleChange}
|
||
operatorsInfo={false}
|
||
/>
|
||
</div>
|
||
<TextAreaInput
|
||
value={values.message}
|
||
handleChange={handleChange}
|
||
height={145}
|
||
label="Чем бы Вы хотели с нами поделиться?"
|
||
name="message"
|
||
placeholder="Что угодно - от предложений до жалоб, мы всегда рады!"
|
||
/>
|
||
</div>
|
||
<Button
|
||
text="Отправить"
|
||
className="flex w-full items-center justify-center rounded-2xl bg-black px-6 py-4 text-sm font-semibold whitespace-nowrap text-white"
|
||
type="submit"
|
||
/>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ContactUs
|