route handlers for account/main

frontend/components/AccountSidebar.tsx

@@ -85,7 +85,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
                 href={item.href}
                 className={`${
                   isActive
-                    ? 'bg-orange/80 text-white'
+                    ? 'bg-orange text-white'
                     : 'text-gray-600 hover:bg-gray-100'
                 } flex items-center p-4 text-sm font-medium rounded-lg transition-colors`}
               >

frontend/components/ContactUs.tsx

@@ -0,0 +1,94 @@
+'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 {
+        showToast({ type: 'error', message: 'Ой, что то пошло не так..' })
+      }
+    }
+  )
+
+  return (
+    <div className="rounded-2xl shadow overflow-hidden">
+      <div className="p-6 bg-white sm:p-8">
+        <div className="space-y-4">
+          <h2 className="text-2xl">Хотели бы связаться с нами?</h2>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 h-full">
+              <div className="space-y-4 h-full flex flex-col">
+                <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="text-sm font-semibold py-4 px-6 bg-black text-white flex items-center justify-center w-full rounded-2xl whitespace-nowrap"
+              type="submit"
+            />
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ContactUs

frontend/components/ui/TextAreaInput.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { TextAreaProps } from '@/app/types'
+
+const TextAreaInput = ({
+  value,
+  handleChange,
+  label,
+  name,
+  placeholder,
+  height,
+}: TextAreaProps) => {
+  return (
+    <div>
+      <label
+        className="block mb-2 font-medium text-sm text-gray-500"
+        htmlFor={name}
+      >
+        {label}
+      </label>
+      <textarea
+        id={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+        style={{ minHeight: height ? `${height}px` : '160px' }}
+        className="w-full px-3 py-2 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-white"
+        autoComplete={name}
+      />
+    </div>
+  )
+}
+
+export default TextAreaInput