Улучшить мобильное меню и форму заявки, добавить номер лида и заменить middleware на proxy

components/lead-form.tsx

@@ -2,8 +2,68 @@
 
 import { useState } from "react";
 
+type FieldErrors = {
+  company?: string;
+  phone?: string;
+  email?: string;
+};
+
+function getPhoneDigits(input: string) {
+  return input.replace(/\D/g, "").slice(0, 11);
+}
+
+function formatRussianPhoneInput(input: string) {
+  const digits = getPhoneDigits(input);
+
+  if (!digits) {
+    return "";
+  }
+
+  let normalized = digits;
+
+  if (normalized[0] === "8") {
+    normalized = `7${normalized.slice(1)}`;
+  }
+
+  if (normalized[0] !== "7") {
+    normalized = `7${normalized.slice(0, 10)}`;
+  }
+
+  normalized = normalized.slice(0, 11);
+
+  const country = "+7";
+  const part1 = normalized.slice(1, 4);
+  const part2 = normalized.slice(4, 7);
+  const part3 = normalized.slice(7, 9);
+  const part4 = normalized.slice(9, 11);
+
+  let result = country;
+
+  if (part1) {
+    result += ` (${part1}`;
+  }
+
+  if (part1.length === 3) {
+    result += ")";
+  }
+
+  if (part2) {
+    result += ` ${part2}`;
+  }
+
+  if (part3) {
+    result += `-${part3}`;
+  }
+
+  if (part4) {
+    result += `-${part4}`;
+  }
+
+  return result;
+}
+
 function normalizePhone(input: string) {
-  const digits = input.replace(/\D/g, "");
+  const digits = getPhoneDigits(input);
 
   if (digits.length === 11 && (digits.startsWith("7") || digits.startsWith("8"))) {
     return `7${digits.slice(1)}`;
@@ -20,29 +80,70 @@ function isValidEmail(email: string) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 }
 
-export default function LeadForm() {
+type LeadFormProps = {
+  id?: string;
+  title?: string;
+  description?: string;
+  compact?: boolean;
+};
+
+export default function LeadForm({
+  id,
+  title,
+  description,
+  compact = false,
+}: LeadFormProps) {
   const [company, setCompany] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [resultMessage, setResultMessage] = useState("");
+  const [submitError, setSubmitError] = useState(false);
+  const [errors, setErrors] = useState<FieldErrors>({});
+
+  function validateFields() {
+    const nextErrors: FieldErrors = {};
+    const normalizedPhone = normalizePhone(phone);
+    const trimmedCompany = company.trim();
+    const trimmedEmail = email.trim();
+
+    if (trimmedCompany.length < 2) {
+      nextErrors.company = "Укажите название объекта или компании";
+    }
+
+    if (!normalizedPhone) {
+      nextErrors.phone = "Введите российский номер в формате +7";
+    }
+
+    if (!trimmedEmail) {
+      nextErrors.email = "Введите email";
+    } else if (!isValidEmail(trimmedEmail)) {
+      nextErrors.email = "Проверьте корректность email";
+    }
+
+    return {
+      nextErrors,
+      normalizedPhone,
+      trimmedCompany,
+      trimmedEmail,
+    };
+  }
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setResultMessage("");
+    setSubmitError(false);
 
-    const normalizedPhone = normalizePhone(phone);
-    if (!normalizedPhone) {
-      setResultMessage("Введите корректный российский телефон");
-      return;
-    }
-
-    if (!isValidEmail(email.trim())) {
-      setResultMessage("Введите корректный email");
+    const { nextErrors, normalizedPhone, trimmedCompany, trimmedEmail } =
+      validateFields();
+
+    if (Object.keys(nextErrors).length > 0 || !normalizedPhone) {
+      setErrors(nextErrors);
       return;
     }
 
+    setErrors({});
     setIsSubmitting(true);
 
     try {
@@ -52,79 +153,165 @@ export default function LeadForm() {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          company,
+          company: trimmedCompany,
           phone: normalizedPhone,
-          email,
-          message,
+          email: trimmedEmail,
+          message: message.trim(),
         }),
       });
 
       const data = await response.json();
 
       if (!response.ok) {
+        setSubmitError(true);
         setResultMessage(data.error || "Ошибка отправки");
         return;
       }
 
+      setSubmitError(false);
       setResultMessage("Заявка отправлена. Мы свяжемся с вами.");
       setCompany("");
       setPhone("");
       setEmail("");
       setMessage("");
     } catch {
+      setSubmitError(true);
       setResultMessage("Не удалось сохранить заявку");
     } finally {
       setIsSubmitting(false);
     }
   }
 
+  const fieldClassName =
+    "w-full rounded-2xl border bg-black/30 px-4 py-3.5 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-emerald-500 sm:px-5 sm:py-4";
+  const labelClassName = "mb-2 block text-sm font-medium text-neutral-200";
+  const helperClassName = "mt-2 text-xs text-neutral-500";
+  const errorClassName = "mt-2 text-xs text-rose-300";
+
   return (
-    <form onSubmit={handleSubmit} className="mt-8 grid gap-4 sm:gap-5">
-      <input
-        type="text"
-        placeholder="Название ЖК, ТСЖ или УК"
-        value={company}
-        onChange={(e) => setCompany(e.target.value)}
-        className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
-        required
-      />
-
-      <input
-        type="tel"
-        placeholder="+7 (999) 123-45-67"
-        value={phone}
-        onChange={(e) => setPhone(e.target.value)}
-        className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
-        required
-      />
-
-      <input
-        type="email"
-        placeholder="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
-        required
-      />
-
-      <textarea
-        placeholder="Опишите текущий шлагбаум и что хотите добавить"
-        value={message}
-        onChange={(e) => setMessage(e.target.value)}
-        className="min-h-32 w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
-      />
-
-      <button
-        type="submit"
-        disabled={isSubmitting}
-        className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold hover:bg-emerald-500 transition-colors disabled:opacity-60"
-      >
-        {isSubmitting ? "Отправка..." : "Отправить заявку"}
-      </button>
-
-      {resultMessage && (
-        <p className="text-sm text-neutral-300">{resultMessage}</p>
+    <div id={id}>
+      {(title || description) && (
+        <div className={compact ? "mb-6" : "mb-8"}>
+          {title && (
+            <h3 className="text-2xl font-semibold tracking-[-0.03em] sm:text-3xl">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-400 sm:text-base">
+              {description}
+            </p>
+          )}
+        </div>
       )}
-    </form>
+
+      <form onSubmit={handleSubmit} className="grid gap-4 sm:gap-5" noValidate>
+        <div>
+          <label htmlFor="lead-company" className={labelClassName}>
+            Объект или компания
+          </label>
+          <input
+            id="lead-company"
+            type="text"
+            placeholder="Например: ЖК Сокол, ТСЖ Север, УК Домсервис"
+            value={company}
+            onChange={(e) => {
+              setCompany(e.target.value);
+              if (errors.company) {
+                setErrors((current) => ({ ...current, company: undefined }));
+              }
+            }}
+            className={`${fieldClassName} ${errors.company ? "border-rose-400/70" : "border-white/10"}`}
+            autoComplete="organization"
+            required
+          />
+          {errors.company ? (
+            <p className={errorClassName}>{errors.company}</p>
+          ) : (
+            <p className={helperClassName}>Укажите ЖК, ТСЖ, УК или адрес объекта</p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="lead-phone" className={labelClassName}>
+            Телефон
+          </label>
+          <input
+            id="lead-phone"
+            type="tel"
+            placeholder="+7 (999) 123-45-67"
+            value={phone}
+            onChange={(e) => {
+              setPhone(formatRussianPhoneInput(e.target.value));
+              if (errors.phone) {
+                setErrors((current) => ({ ...current, phone: undefined }));
+              }
+            }}
+            className={`${fieldClassName} ${errors.phone ? "border-rose-400/70" : "border-white/10"}`}
+            inputMode="numeric"
+            autoComplete="tel"
+            required
+          />
+          {errors.phone ? (
+            <p className={errorClassName}>{errors.phone}</p>
+          ) : (
+            <p className={helperClassName}>Только мобильные и городские номера РФ</p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="lead-email" className={labelClassName}>
+            Email
+          </label>
+          <input
+            id="lead-email"
+            type="email"
+            placeholder="name@company.ru"
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              if (errors.email) {
+                setErrors((current) => ({ ...current, email: undefined }));
+              }
+            }}
+            className={`${fieldClassName} ${errors.email ? "border-rose-400/70" : "border-white/10"}`}
+            autoComplete="email"
+            required
+          />
+          {errors.email ? (
+            <p className={errorClassName}>{errors.email}</p>
+          ) : (
+            <p className={helperClassName}>Отправим ответ и детали по этому адресу</p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="lead-message" className={labelClassName}>
+            Комментарий
+          </label>
+          <textarea
+            id="lead-message"
+            placeholder="Коротко опишите объект, текущий шлагбаум и что хотите улучшить"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            className="min-h-32 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3.5 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-emerald-500 sm:px-5 sm:py-4"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold transition-colors hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {isSubmitting ? "Отправка..." : "Оставить заявку"}
+        </button>
+
+        {resultMessage && (
+          <p className={`text-sm ${submitError ? "text-rose-300" : "text-emerald-300"}`}>
+            {resultMessage}
+          </p>
+        )}
+      </form>
+    </div>
   );
-}
+}