slide

components/pageParts/contact.tsx

@@ -1,25 +1,67 @@
 "use client";
 
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Text from "../lib_components/text";
 import axios from "axios";
 import { FormEvent } from "react";
 
+const normalizePhone = (value: string) => value.replace(/\D/g, "");
+
+const formatPhone = (value: string) => {
+  const digits = normalizePhone(value);
+  const raw = digits.startsWith("998") ? digits.slice(3) : digits;
+  const trimmed = raw.slice(0, 9);
+
+  const parts = [];
+  if (trimmed.length > 0) {
+    parts.push(trimmed.slice(0, 2));
+  }
+  if (trimmed.length > 2) {
+    parts.push(trimmed.slice(2, 5));
+  }
+  if (trimmed.length > 5) {
+    parts.push(trimmed.slice(5, 7));
+  }
+  if (trimmed.length > 7) {
+    parts.push(trimmed.slice(7, 9));
+  }
+
+  return parts.length > 0 ? `+998 ${parts.join(" ")}` : "";
+};
+
+const isValidPhone = (value: string) => {
+  const digits = normalizePhone(value);
+  if (digits === "") {
+    return false;
+  }
+  if (digits.length === 9) {
+    return true;
+  }
+  return /^998\d{9}$/.test(digits);
+};
+
 export default function Contact() {
   const { t } = useTranslation();
+  const [phone, setPhone] = useState("");
+
+  const handlePhoneChange = (value: string) => {
+    setPhone(formatPhone(value));
+  };
 
   const sendMessage = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const form = event.currentTarget;
-    const nameInput = form.elements.namedItem("name") as HTMLInputElement;
-    const name = nameInput?.value?.trim();
-
-    if (!name) {
-      alert("Iltimos, telefon raqamingizni kiriting!");
+    if (!phone || !isValidPhone(phone)) {
+      alert("Iltimos, telefon raqamingizni to'g'ri kiriting!");
       return;
     }
 
+    const normalized = normalizePhone(phone);
+    const formattedPhone = /^998\d{9}$/.test(normalized)
+      ? `+${normalized}`
+      : `+998${normalized}`;
+
     try {
       const token = "7940057045:AAHRFPvgUCo_7pqpXD6uq4li7-_DYx2J96g"; // Use environment variable
       const chatId = 6134458285;
@@ -28,7 +70,7 @@ export default function Contact() {
         throw new Error("Telegram token yoki chat ID topilmadi!");
       }
 
-      const message = `📞 Yangi kontakt: ${name}`;
+      const message = `📞 Yangi kontakt: ${formattedPhone}`;
 
       await axios.post(`https://api.telegram.org/bot${token}/sendMessage`, {
         chat_id: chatId,
@@ -36,7 +78,7 @@ export default function Contact() {
       });
 
       alert("✅ Muvaffaqiyatli yuborildi!");
-      form.reset();
+      setPhone("");
     } catch (error) {
       console.error("Yuborishda xatolik:", error);
       alert("❌ Yuborishda xatolik yuz berdi!");
@@ -63,9 +105,11 @@ export default function Contact() {
             onSubmit={sendMessage}
           >
             <input
-              type="text"
-              name="name"
-              placeholder="Your phone number"
+              type="tel"
+              name="phone"
+              value={phone}
+              onChange={(event) => handlePhoneChange(event.target.value)}
+              placeholder="+998 "
               required
               className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
             />