priceContact added

2026-02-01 19:19:46 +05:00
parent 96acd12d9c
commit 63b363b142
8 changed files with 393 additions and 5 deletions
--- a/app/[locale]/products/[slug]/page.tsx
+++ b/app/[locale]/products/[slug]/page.tsx
@@ -25,11 +25,13 @@ export default function SlugPage() {
          <SliderComp imgs={DATA[0].images} />

          <RightSide
+            id={1}
            title={DATA[0].title}
            name={DATA[0].name}
            statusColor={statusColor}
            statusText={statusText}
            description={DATA[0].description}
+            image={DATA[0].images[0]}
          />
        </div>
        <Features features={DATA[0].features} />
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,7 @@ import { Footer, Navbar } from "@/components/layout";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import BackAnimatsiya from "@/components/backAnimatsiya/backAnimatsiya";
+import { PriceModal } from "@/components/priceContact";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -61,6 +62,7 @@ export default async function RootLayout({
          <Navbar />
          {children}
          <Footer />
+           <PriceModal />
          <Analytics />
        </NextIntlClientProvider>
      </body>
--- a/components/pages/products/slug/rightSide.tsx
+++ b/components/pages/products/slug/rightSide.tsx
@@ -1,4 +1,4 @@
-
+import { usePriceModalStore } from "@/store/useProceModalStore";
 import { Facebook } from "lucide-react";

 const socialLinks = [
@@ -11,11 +11,13 @@ const socialLinks = [
 ];

 interface RightSideProps {
+  id: number;
  title: string;
  name: string;
  description: string;
  statusText: string;
  statusColor: string;
+  image: string;
 }

 export function RightSide({
@@ -24,7 +26,18 @@ export function RightSide({
  description,
  statusColor,
  statusText,
+  id,
+  image,
 }: RightSideProps) {
+  const openModal = usePriceModalStore((state) => state.openModal);
+  const handleGetPrice = () => {
+    openModal({
+      id: id,
+      name: title,
+      image: image,
+      inStock: true,
+    });
+  };
  return (
    <div className="flex flex-col justify-center">
      {/* Title */}
@@ -71,7 +84,7 @@ export function RightSide({
                        Narxni bilish
                      </button> */}
          <button
-            onClick={() => {}}
+            onClick={handleGetPrice}
            className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
          >
            Xabar yuborish
--- a/components/priceContact.tsx
+++ b/components/priceContact.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import { usePriceModalStore } from "@/store/useProceModalStore";
+
+export function PriceModal() {
+  const t = useTranslations("priceModal");
+  const { isOpen, product, closeModal } = usePriceModalStore();
+
+  const [formData, setFormData] = useState({
+    name: "",
+    phone: "+998 ",
+    captcha: "",
+  });
+
+  const [errors, setErrors] = useState({
+    name: "",
+    phone: "",
+    captcha: "",
+  });
+
+  const [captchaCode, setCaptchaCode] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Generate random captcha
+  useEffect(() => {
+    if (isOpen) {
+      const code = Math.random().toString(36).substring(2, 8).toUpperCase();
+      setCaptchaCode(code);
+    }
+  }, [isOpen]);
+
+  // Reset form when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setFormData({ name: "", phone: "+998 ", captcha: "" });
+      setErrors({ name: "", phone: "", captcha: "" });
+    }
+  }, [isOpen]);
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  const formatPhoneNumber = (value: string) => {
+    const numbers = value.replace(/\D/g, "");
+    if (!numbers.startsWith("998")) {
+      return "+998 ";
+    }
+    
+    let formatted = "+998 ";
+    const rest = numbers.slice(3);
+    
+    if (rest.length > 0) formatted += rest.slice(0, 2);
+    if (rest.length > 2) formatted += " " + rest.slice(2, 5);
+    if (rest.length > 5) formatted += " " + rest.slice(5, 7);
+    if (rest.length > 7) formatted += " " + rest.slice(7, 9);
+    
+    return formatted;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhoneNumber(e.target.value);
+    setFormData({ ...formData, phone: formatted });
+    if (errors.phone) {
+      setErrors({ ...errors, phone: "" });
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+    if (errors[name as keyof typeof errors]) {
+      setErrors({ ...errors, [name]: "" });
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {
+      name: "",
+      phone: "",
+      captcha: "",
+    };
+
+    if (!formData.name.trim()) {
+      newErrors.name = t("validation.nameRequired");
+    }
+
+    const phoneNumbers = formData.phone.replace(/\D/g, "");
+    if (phoneNumbers.length !== 12) {
+      newErrors.phone = t("validation.phoneRequired");
+    } else if (!phoneNumbers.startsWith("998")) {
+      newErrors.phone = t("validation.phoneInvalid");
+    }
+
+    if (!formData.captcha.trim()) {
+      newErrors.captcha = t("validation.captchaRequired");
+    } else if (formData.captcha.toUpperCase() !== captchaCode) {
+      newErrors.captcha = t("validation.captchaRequired");
+    }
+
+    setErrors(newErrors);
+    return !newErrors.name && !newErrors.phone && !newErrors.captcha;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // API call logikangiz
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+
+      // Success
+      alert(t("success"));
+      closeModal();
+    } catch (error) {
+      alert(t("error"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!isOpen || !product) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={closeModal}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        {/* Close button */}
+        <button
+          onClick={closeModal}
+          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"
+          aria-label="Close modal"
+        >
+          <X size={24} />
+        </button>
+
+        {/* Content */}
+        <div className="p-8">
+          <h2 className="text-3xl font-bold mb-8">{t("title")}</h2>
+
+          {/* Product Info */}
+          <div className="bg-[#f5f0e8] rounded-lg p-6 mb-8 flex items-center gap-6">
+            <div className="relative w-24 h-24 shrink-0">
+              <Image
+                src={product.image}
+                alt={product.name}
+                fill
+                className="object-contain"
+              />
+            </div>
+            <div>
+              <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
+              <span className="text-green-600 font-medium">
+                {t("product.inStock")}
+              </span>
+            </div>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Name */}
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium mb-2">
+                {t("form.name")}
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleInputChange}
+                placeholder={t("form.namePlaceholder")}
+                className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 ${
+                  errors.name ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.name && (
+                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+              )}
+            </div>
+
+            {/* Phone */}
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium mb-2">
+                {t("form.phone")}
+              </label>
+              <div className="relative">
+                <input
+                  type="tel"
+                  id="phone"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handlePhoneChange}
+                  placeholder={t("form.phonePlaceholder")}
+                  className={`w-full pl-2 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 ${
+                    errors.phone ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+              </div>
+              {errors.phone && (
+                <p className="text-red-500 text-sm mt-1">{errors.phone}</p>
+              )}
+            </div>
+
+            {/* Captcha */}
+            {/* <div>
+              <label htmlFor="captcha" className="block text-sm font-medium mb-2">
+                {t("form.captcha")}
+              </label>
+              <div className="flex gap-4">
+                <div className="relative w-40 h-12 bg-linear-to-r from-purple-200 via-pink-200 to-blue-200 rounded-lg flex items-center justify-center">
+                  <span className="text-2xl font-bold tracking-widest select-none">
+                    {captchaCode}
+                  </span>
+                  <div className="absolute inset-0 opacity-30">
+                    <svg className="w-full h-full">
+                      <line x1="0" y1="0" x2="100%" y2="100%" stroke="currentColor" strokeWidth="1" />
+                      <line x1="100%" y1="0" x2="0" y2="100%" stroke="currentColor" strokeWidth="1" />
+                    </svg>
+                  </div>
+                </div>
+                <input
+                  type="text"
+                  id="captcha"
+                  name="captcha"
+                  value={formData.captcha}
+                  onChange={handleInputChange}
+                  placeholder={t("form.captchaPlaceholder")}
+                  className={`flex-1 px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 ${
+                    errors.captcha ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+              </div>
+              {errors.captcha && (
+                <p className="text-red-500 text-sm mt-1">{errors.captcha}</p>
+              )}
+            </div> */}
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full bg-[#8B1538] hover:bg-[#6d1028] text-white font-semibold py-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? t("form.submitting") : t("form.submit")}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/messages/en.json
+++ b/messages/en.json
@@ -228,5 +228,29 @@
  "contactTitle": "Send us your phone number",
  "contactSubTitle": "Our staff will contact you",
  "enterPhone": "Enter your phone number",
-  "send": "Send"
+  "send": "Send",
+  "priceModal": {
+    "title": "Get Price",
+    "product": {
+      "inStock": "In Stock"
+    },
+    "form": {
+      "name": "Name",
+      "namePlaceholder": "Enter your name",
+      "phone": "Phone",
+      "phonePlaceholder": "+998 91 234 56 78",
+      "captcha": "Spam Protection",
+      "captchaPlaceholder": "Enter code",
+      "submit": "Submit",
+      "submitting": "Submitting..."
+    },
+    "validation": {
+      "nameRequired": "Please enter your name",
+      "phoneRequired": "Please enter phone number",
+      "phoneInvalid": "Invalid phone format",
+      "captchaRequired": "Please enter code"
+    },
+    "success": "Your request has been sent successfully!",
+    "error": "An error occurred. Please try again."
+  }
 }
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -228,5 +228,29 @@
  "contactTitle": "Отправьте нам свой номер",
  "contactSubTitle": "Наши сотрудники свяжутся с вами",
  "enterPhone": "Введите ваш номер телефона",
-  "send": "Отправить"
+  "send": "Отправить",
+  "priceModal": {
+    "title": "Узнать цену",
+    "product": {
+      "inStock": "В наличии"
+    },
+    "form": {
+      "name": "Имя",
+      "namePlaceholder": "Введите ваше имя",
+      "phone": "Телефон",
+      "phonePlaceholder": "+998 91 234 56 78",
+      "captcha": "Защита от спама",
+      "captchaPlaceholder": "Введите код",
+      "submit": "Отправить",
+      "submitting": "Отправка..."
+    },
+    "validation": {
+      "nameRequired": "Введите ваше имя",
+      "phoneRequired": "Введите номер телефона",
+      "phoneInvalid": "Неверный формат телефона",
+      "captchaRequired": "Введите код"
+    },
+    "success": "Ваш запрос успешно отправлен!",
+    "error": "Произошла ошибка. Попробуйте снова."
+  }
 }
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -228,5 +228,30 @@
  "contactTitle": "Bizga raqamingizni yuboring",
  "contactSubTitle": "Xodimlarimiz siz bilan bog'lanishadi",
  "enterPhone": "Telefon raqamingiz kiriting",
-  "send": "Yuborish"
+  "send": "Yuborish",
+
+  "priceModal": {
+    "title": "Narxni bilish",
+    "product": {
+      "inStock": "Sotuvda mavjud"
+    },
+    "form": {
+      "name": "Ism",
+      "namePlaceholder": "Ismingizni kiriting",
+      "phone": "Telefon raqam",
+      "phonePlaceholder": "+998 91 234 56 78",
+      "captcha": "Spamdan himoya",
+      "captchaPlaceholder": "Kodni kiriting",
+      "submit": "Yuborish",
+      "submitting": "Yuborilmoqda..."
+    },
+    "validation": {
+      "nameRequired": "Iltimos, ismingizni kiriting",
+      "phoneRequired": "Iltimos, telefon raqamingizni kiriting",
+      "phoneInvalid": "Telefon raqami noto‘g‘ri formatda kiritilgan",
+      "captchaRequired": "Iltimos, kodni kiriting"
+    },
+    "success": "So‘rovingiz muvaffaqiyatli yuborildi!",
+    "error": "Xatolik yuz berdi. Iltimos, qayta urinib ko‘ring."
+  }
 }
--- a/store/useProceModalStore.ts
+++ b/store/useProceModalStore.ts
@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+
+interface Product {
+  id: number;
+  name: string;
+  image: string;
+  inStock: boolean;
+}
+
+interface PriceModalStore {
+  isOpen: boolean;
+  product: Product | null;
+  openModal: (product: Product) => void;
+  closeModal: () => void;
+}
+
+export const usePriceModalStore = create<PriceModalStore>((set) => ({
+  isOpen: false,
+  product: null,
+  openModal: (product) => set({ isOpen: true, product }),
+  closeModal: () => set({ isOpen: false, product: null }),
+}));