new things

components/lib_components/carRentalModal.tsx

@@ -3,6 +3,7 @@
 import { innerCardTypes } from "@/types";
 import React, { useState, useEffect } from "react";
 import axios from "axios";
+import { useTranslation } from "react-i18next";
 
 interface CarRentalModalProps {
   car: innerCardTypes;
@@ -15,8 +16,10 @@ export default function CarRentalModal({
   isOpen,
   onClose,
 }: CarRentalModalProps) {
+  const { t } = useTranslation();
   const [userName, setUserName] = useState("");
-  const [phone, setPhone] = useState("");
+  const [phone, setPhone] = useState("+998 ");
+  const [phoneError, setPhoneError] = useState("");
   const [hours, setHours] = useState<number>(1);
   const [total, setTotal] = useState<number | undefined>(car?.price);
 
@@ -24,12 +27,40 @@ export default function CarRentalModal({
     if (car.price) setTotal(hours * car.price);
   }, [hours, car.price]);
 
+  const formatPhone = (value: string): string => {
+    let digits = value.replace(/\D/g, "");
+    if (digits.startsWith("998")) digits = digits.slice(3);
+    digits = digits.slice(0, 9);
+    let formatted = "+998";
+    if (digits.length > 0) formatted += " " + digits.slice(0, 2);
+    if (digits.length > 2) formatted += " " + digits.slice(2, 5);
+    if (digits.length > 5) formatted += " " + digits.slice(5, 7);
+    if (digits.length > 7) formatted += " " + digits.slice(7, 9);
+    return formatted;
+  };
+
+  const isPhoneValid = (value: string): boolean => {
+    const digits = value.replace(/\D/g, "");
+    return digits.length === 12;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhone(e.target.value);
+    setPhone(formatted);
+    if (phoneError) setPhoneError("");
+  };
+
   // 🧩 Telegramga yuboruvchi funksiya
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!userName || !phone || !hours) {
-      alert("Iltimos, barcha maydonlarni to‘ldiring!");
+      alert(t("modal-fill-required"));
+      return;
+    }
+
+    if (!isPhoneValid(phone)) {
+      setPhoneError(t("modal-phone-error"));
       return;
     }
 
@@ -65,14 +96,14 @@ export default function CarRentalModal({
         parse_mode: "Markdown",
       });
 
-      alert("✅ Buyurtmangiz muvaffaqiyatli yuborildi!");
+      alert(t("modal-success"));
       onClose();
       setUserName("");
-      setPhone("");
+      setPhone("+998 ");
       setHours(1);
     } catch (error) {
       console.error("Yuborishda xatolik:", error);
-      alert("❌ Xatolik yuz berdi. Qayta urinib ko‘ring!");
+      alert(t("modal-error"));
     }
   };
 
@@ -95,9 +126,11 @@ export default function CarRentalModal({
             <h2 className="text-2xl font-bold text-gray-800">{car.name}</h2>
             <p className="text-gray-600 mt-2">{car.path}</p>
             <p className="text-gray-700 mt-2 font-semibold">
-              Soatlik narx:{" "}
+              {t("modal-hourly-price")}{" "}
               <span className="text-red-600">
-                {car.price?.toLocaleString()} UZS
+                {car.price
+                ? Math.round(Number(car.price)).toLocaleString("ru-RU")
+                : ""} UZS
               </span>
             </p>
           </div>
@@ -107,7 +140,7 @@ export default function CarRentalModal({
         <form onSubmit={handleSubmit} className="mt-6 space-y-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
-              Ismingiz
+              {t("modal-name-label")}
             </label>
             <input
               type="text"
@@ -115,27 +148,30 @@ export default function CarRentalModal({
               className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"
               value={userName}
               onChange={(e) => setUserName(e.target.value)}
-              placeholder="Ismingizni kiriting"
+              placeholder={t("modal-name-placeholder")}
             />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
-              Telefon
+              {t("modal-phone-label")}
             </label>
             <input
               type="tel"
               name="phone"
-              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"
+              className={`w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent ${phoneError ? "border-red-500" : "border-gray-300"}`}
               value={phone}
-              onChange={(e) => setPhone(e.target.value)}
-              placeholder="+998 90 123 45 67"
+              onChange={handlePhoneChange}
+              placeholder={t("modal-phone-placeholder")}
             />
+            {phoneError && (
+              <p className="text-red-500 text-xs mt-1">{phoneError}</p>
+            )}
           </div>
 
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
-              Qancha vaqt (soat)
+              {t("modal-hours-label")}
             </label>
             <input
               type="number"
@@ -148,9 +184,11 @@ export default function CarRentalModal({
           </div>
 
           <div className="text-lg font-semibold text-gray-800 mt-2">
-            Jami summa:{" "}
+            {t("modal-total")}{" "}
             <span className="text-green-600">
-              {total?.toLocaleString()} UZS
+              {total
+                ? Math.round(Number(total)).toLocaleString("ru-RU")
+                : ""} UZS
             </span>
           </div>
 
@@ -158,7 +196,7 @@ export default function CarRentalModal({
             type="submit"
             className="w-full bg-secondary text-white py-2 rounded-lg hover:bg-primary transition font-medium"
           >
-            Buyurtma berish
+            {t("book")}
           </button>
         </form>
       </div>