new things

2026-04-27 12:29:17 +05:00
parent 5b7dbd5019
commit cfa84d04ab
6 changed files with 117 additions and 43 deletions
--- a/app/[lang]/[carType]/[carDeatil]/page.tsx
+++ b/app/[lang]/[carType]/[carDeatil]/page.tsx
@@ -8,6 +8,7 @@ import { usePathname, useParams } from "next/navigation";
 import { logoImg } from "@/assets";
 import { useSubCategory } from "@/store/subCategory";
 import { minimumValues } from "@/data/minimimValues";
+import { useTranslation } from "react-i18next";
 import { LoadingSkeleton } from "@/components/loadingProduct";
 import { EmptyState } from "@/components/emptyState";
 import { ErrorState } from "@/components/errorState";
@@ -32,6 +33,7 @@ function checkCategory(categoryName: string | undefined, lang: string) {
 }

 export default function CarDetailPage() {
+  const { t } = useTranslation();
  const [modalOpen, setModalOpen] = useState<boolean>(false);

  const initialSubCategory = useSubCategory(
@@ -107,7 +109,8 @@ export default function CarDetailPage() {
    );
  }

-  const firstData = cars[0];
+  const firstData = cars[0]?.data[0];
+  console.log("First Data: ", firstData);

  if (!firstData) {
    return (
@@ -138,7 +141,7 @@ export default function CarDetailPage() {
            alt={firstData?.name ? firstData?.name : "image"}
            width={600}
            height={200}
-            className="rounded-lg object-cover border border-gray-200 w-full"
+            className="rounded-lg object-contain border border-gray-200 w-full"
          />
        </div>

@@ -147,7 +150,9 @@ export default function CarDetailPage() {
          <div className="text-lg font-semibold flex gap-2">
            {isMinimum ? <p>{text}</p> : <Text txt="hour-price" />} :
            <span className="font-medium flex gap-2 text-gray-500">
-              {firstData.price?.toLocaleString("uz-UZ")}
+              {firstData.price
+                ? Math.round(Number(firstData.price)).toLocaleString("ru-RU")
+                : ""}
              <Text txt="wallet" />
            </span>
          </div>
@@ -181,22 +186,24 @@ export default function CarDetailPage() {
      </div>

      {/* Texnik xususiyatlar */}
-      <div className="w-full border-t border-gray-300 pt-6">
-        <h2 className="text-xl font-semibold mb-4 text-secondary">
-          Texnik xususiyatlari
-        </h2>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700">
-          {firstData?.features.map((item: any) => (
-            <div
-              key={item.id}
-              className="p-3 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition"
-            >
-              <p className="font-medium">{item?.name}:</p>
-              <p className="text-gray-600">{item?.value}</p>
-            </div>
-          ))}
+      {firstData?.features.length > 0 && (
+        <div className="w-full border-t border-gray-300 pt-6">
+          <h2 className="text-xl font-semibold mb-4 text-secondary">
+            {t("tech-features")}
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700">
+            {firstData?.features?.map((item: any) => (
+              <div
+                key={item.id}
+                className="p-3 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition"
+              >
+                <p className="font-medium">{item?.name}:</p>
+                <p className="text-gray-600">{item?.value}</p>
+              </div>
+            ))}
+          </div>
        </div>
-      </div>
+      )}

      {/* Ijara modal */}
      <CarRentalModal
--- a/app/[lang]/layout.tsx
+++ b/app/[lang]/layout.tsx
@@ -1,4 +1,3 @@
-import { dir } from "i18next";
 import Header from "@/components/nav_foot/header";
 import Navbar from "@/components/nav_foot/navbar";
 import Footer from "@/components/nav_foot/footer";
@@ -17,7 +16,7 @@ export default async function LangLayout({
  const { lang } = await params; // ✅ await bilan destructuring

  return (
-    <html lang={lang} dir="rtl">
+    <html lang={lang} dir="rtl" suppressHydrationWarning>
      <body>
        <Suspense fallback={null}>
          <Header />
@@ -29,7 +28,7 @@ export default async function LangLayout({
        </section>
        <Footer />
        <UpScrollIcon />
-        <Time/>
+        <Time />
      </body>
    </html>
  );
--- a/components/lib_components/carRentalModal.tsx
+++ b/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>
--- a/components/pageParts/contact.tsx
+++ b/components/pageParts/contact.tsx
@@ -53,7 +53,7 @@ export default function Contact() {
    event.preventDefault();

    if (!phone || !isValidPhone(phone)) {
-      alert("Iltimos, telefon raqamingizni to'g'ri kiriting!");
+      alert(t("contact-phone-error"));
      return;
    }

@@ -77,11 +77,11 @@ export default function Contact() {
        text: message,
      });

-      alert("✅ Muvaffaqiyatli yuborildi!");
+      alert(t("contact-success"));
      setPhone("");
    } catch (error) {
      console.error("Yuborishda xatolik:", error);
-      alert("❌ Yuborishda xatolik yuz berdi!");
+      alert(t("contact-error"));
    }
  };

--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -188,5 +188,20 @@
  "retry": "Повторить",
  "downloadError": "Ошибка при загрузке данных",
  "noData": "Специальная техника не найдена",
-  "noDataDesc": "На данный момент товары отсутствуют. Пожалуйста, попробуйте позже."
+  "noDataDesc": "На данный момент товары отсутствуют. Пожалуйста, попробуйте позже.",
+  "tech-features": "Технические характеристики",
+  "modal-fill-required": "Пожалуйста, заполните все поля!",
+  "modal-phone-error": "Введите полный номер телефона: +998 XX XXX XX XX",
+  "modal-success": "Ваш заказ успешно отправлен!",
+  "modal-error": "Произошла ошибка. Попробуйте ещё раз!",
+  "modal-hourly-price": "Почасовая цена:",
+  "modal-name-label": "Ваше имя",
+  "modal-name-placeholder": "Введите ваше имя",
+  "modal-phone-label": "Телефон",
+  "modal-phone-placeholder": "+998 90 123 45 67",
+  "modal-hours-label": "Количество часов",
+  "modal-total": "Итоговая сумма:",
+  "contact-phone-error": "Пожалуйста, введите правильный номер телефона!",
+  "contact-success": "Успешно отправлено!",
+  "contact-error": "Произошла ошибка при отправке!"
 }
--- a/public/locales/uz/common.json
+++ b/public/locales/uz/common.json
@@ -188,5 +188,20 @@
  "retry": "Qayta urinish",
  "downloadError": "Ma'lumotlarni yuklashda xatolik",
  "noData": "Mahsus texnikalar topilmadi",
-  "noDataDesc": "Hozircha mahsulotlar mavjud emas. Iltimos, keyinroq qayta urinib ko'ring."
+  "noDataDesc": "Hozircha mahsulotlar mavjud emas. Iltimos, keyinroq qayta urinib ko'ring.",
+  "tech-features": "Texnik xususiyatlari",
+  "modal-fill-required": "Iltimos, barcha maydonlarni to'ldiring!",
+  "modal-phone-error": "Telefon raqamini to'liq kiriting: +998 XX XXX XX XX",
+  "modal-success": "Buyurtmangiz muvaffaqiyatli yuborildi!",
+  "modal-error": "Xatolik yuz berdi. Qayta urinib ko'ring!",
+  "modal-hourly-price": "Soatlik narx:",
+  "modal-name-label": "Ismingiz",
+  "modal-name-placeholder": "Ismingizni kiriting",
+  "modal-phone-label": "Telefon",
+  "modal-phone-placeholder": "+998 90 123 45 67",
+  "modal-hours-label": "Qancha vaqt (soat)",
+  "modal-total": "Jami summa:",
+  "contact-phone-error": "Iltimos, telefon raqamingizni to'g'ri kiriting!",
+  "contact-success": "Muvaffaqiyatli yuborildi!",
+  "contact-error": "Yuborishda xatolik yuz berdi!"
 }