Merge pull request #6 from BeyteFlow/feature/productDetail

connect with firebase

Author: naheel0

package-lock.json

@@ -13,6 +13,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.20",
     "clsx": "^2.1.1",
+    "firebase": "^12.8.0",
     "lucide-react": "^0.563.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.0",

package.json

@@ -1,46 +1,65 @@
-import React, {useMemo} from "react";
+import React, { useMemo, useEffect } from "react";
 import { useProductStore } from "../../../../store/product.store";
+import { collection, onSnapshot, query } from "firebase/firestore";
+import { db } from "../../../../lib/firebase";
 import ProductToolbar from "../ProductToolbar/ProductToolbar";
 import ProductGrid from "../ProductGrid/ProductGrid";
-import Pagination from "../Pagination/Pagination";
 import ProductFilters from "../ProductFilters/ProductFilters";
-import{ MOCK_PRODUCTS} from "../../services/MockProduct"
+import type{ Product } from "../../../../store/product.store";
+
 const ProductsPage: React.FC = () => {
-  const { searchQuery, sortBy, selectedCategory } = useProductStore();
+  const { products, setProducts, searchQuery, sortBy, selectedCategory } = useProductStore();
+
+  useEffect(() => {
+    // Listen to Firebase "products" collection
+    const q = query(collection(db, "products"));
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      const liveData = snapshot.docs.map(doc => ({
+        id: doc.id,
+        ...doc.data()
+      })) as Product[];
+      setProducts(liveData);
+    });
+    return () => unsubscribe();
+  }, [setProducts]);
 
   const filteredProducts = useMemo(() => {
-    let result = [...MOCK_PRODUCTS];
+    let result = [...products];
     if (searchQuery) result = result.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()));
     if (selectedCategory !== 'All') result = result.filter(p => p.category === selectedCategory);
+    
     if (sortBy === 'price-asc') result.sort((a, b) => a.price - b.price);
     if (sortBy === 'price-desc') result.sort((a, b) => b.price - a.price);
     return result;
-  }, [searchQuery, sortBy, selectedCategory]);
+  }, [products, searchQuery, sortBy, selectedCategory]);
 
   return (
-    <div className="min-h-screen bg-[#F6F4F1] selection:bg-[#111111] selection:text-white px-6 py-12 md:py-24">
+    <div className="min-h-screen bg-[#F6F4F1] px-6 py-12 md:py-24">
       <div className="max-w-7xl mx-auto">
-        
-        {/* Simple Page Heading */}
         <div className="mb-20 text-center md:text-left">
-          <h1 className="text-6xl md:text-8xl font-black text-[#111111] tracking-tight leading-none">
-            LUXE<span className="text-[#8F8F8F]">CASE</span>
+          <h1 className="text-6xl md:text-8xl font-black text-[#111111] tracking-tight">
+            ZAYQ<span className="text-[#8F8F8F]">CASE</span>
           </h1>
           <p className="mt-4 text-[#8F8F8F] font-bold uppercase tracking-[0.4em] text-xs">Essential Protection Series</p>
         </div>
 
         <ProductToolbar />
 
-        <div className="flex gap-20">
-          <ProductFilters />
+        <div className="flex flex-col md:flex-row gap-10 lg:gap-20">
+          <div className="w-full md:w-64">
+            <ProductFilters />
+          </div>
           <div className="flex-1">
-            <ProductGrid products={filteredProducts} />
-            <Pagination />
+            {products.length === 0 ? (
+                <div className="flex justify-center py-20 animate-pulse text-gray-400">Loading live collection...</div>
+            ) : (
+                <ProductGrid products={filteredProducts} />
+            )}
           </div>
         </div>
-
       </div>
     </div>
   );
 };
+
 export default ProductsPage;

src/lib/.gitkeep …/ProductDetail/hooks/useProductDetail.tssrc/lib/.gitkeep renamed to src/features/ProductDetail/hooks/useProductDetail.ts src/lib/.gitkeep renamed to src/features/ProductDetail/hooks/useProductDetail.ts

@@ -1,35 +1,70 @@
 import React from "react";
-import { Apple } from "lucide-react"
 import type { Product } from "../../../../store/product.store"
+
 const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
+    const isComingSoon = product.status === 'coming-soon';
+    const isOutOfStock = product.status === 'out-of-stock';
+
+    const handleBuyNow = () => {
+        if (isComingSoon || isOutOfStock) return;
+        const message = encodeURIComponent(`Hi ZAYQ! I'm interested in the ${product.name} (₹${product.price}). Is it in stock?`);
+        window.open(`https://wa.me/91XXXXXXXXXX?text=${message}`, '_blank'); // Replace with your WhatsApp number
+    };
+
     return (
-        <div className="flex flex-col group cursor-pointer">
-            <div className="relative aspect-4/5 rounded-3xl bg-[#E6E3DF] flex items-center justify-center overflow-hidden transition-all duration-700 ease-in-out group-hover:bg-[#EFECE8]">
-                <div
-                    className="relative w-32 h-64 sm:w-40 sm:h-80 rounded-[2.8rem] shadow-2xl border-[6px] border-[#1C1C1C] flex flex-col items-center p-2 transition-transform duration-500 ease-out group-hover:scale-105"
-                    style={{
-                        backgroundColor: product.colorHex,
-                        backgroundImage: product.type === 'clear' ? 'linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 100%)' : 'none',
-                    }}
-                >
-                    <div className="absolute top-5 left-5 w-14 h-14 bg-black/10 rounded-xl p-1.5 grid grid-cols-2 gap-1">
-                        <div className="w-5 h-5 rounded-full bg-black/30"></div>
-                        <div className="w-5 h-5 rounded-full bg-black/30"></div>
-                        <div className="w-5 h-5 rounded-full bg-black/30 col-span-2 mx-auto"></div>
+        <div className="flex flex-col group">
+            {/* Image Wrapper */}
+            <div className="relative aspect-4/5 rounded-2xl bg-[#E6E3DF] overflow-hidden transition-all duration-500 group-hover:bg-[#EFECE8]">
+                
+                {/* Status Badge */}
+                {(isComingSoon || isOutOfStock) && (
+                    <div className="absolute top-4 left-4 z-20 px-3 py-1 bg-white/90 backdrop-blur-md rounded-full shadow-sm">
+                        <p className="text-[9px] font-black uppercase tracking-widest text-black">
+                            {isComingSoon ? 'Coming Soon' : 'Sold Out'}
+                        </p>
                     </div>
-                    {product.type === 'clear' && <div className="mt-32 opacity-10"><Apple size={40} /></div>}
+                )}
+
+                {/* Actual Product Image */}
+                <div className={`w-full h-full transition-all duration-700 ease-in-out ${!isComingSoon && 'group-hover:scale-110'} ${isComingSoon ? 'blur-xl opacity-50' : 'opacity-100'}`}>
+                    {product.imageUrl ? (
+                        <img 
+                            src={product.imageUrl} 
+                            alt={product.name}
+                            className="w-full h-full object-cover"
+                        />
+                    ) : (
+                        <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+                            No Image Available
+                        </div>
+                    )}
                 </div>
-                <div className="absolute bottom-8 w-32 h-4 bg-black/5 blur-xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+                {/* Hover Overlay for In-Stock items */}
+                {!isComingSoon && !isOutOfStock && (
+                    <div className="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                )}
             </div>
-            <div className="mt-6 flex flex-col items-center text-center">
-                <h3 className="text-lg font-bold text-[#111111]">{product.name}</h3>
-                <p className="text-[#8F8F8F] text-sm font-medium">{product.category}</p>
-                <p className="text-[#111111] font-semibold mt-1">₹{product.price.toLocaleString()}</p>
-                <button className="mt-5 w-full max-w-40 py-3 bg-[#111111] text-white text-[10px] font-bold uppercase tracking-[0.2em] rounded-full transition-all duration-300 hover:bg-[#2A2A2A] hover:scale-[1.02]">
-                    Add to Cart
+
+            {/* Details Section */}
+            <div className="mt-5 flex flex-col items-center text-center">
+                <h3 className="text-base font-bold text-[#111111] tracking-tight">{product.name}</h3>
+                <p className="text-[#8F8F8F] text-xs font-medium uppercase tracking-wider mt-1">{product.category}</p>
+                <p className="text-[#111111] font-semibold mt-2">₹{product.price.toLocaleString()}</p>
+                
+                <button 
+                    onClick={handleBuyNow}
+                    disabled={isComingSoon || isOutOfStock}
+                    className={`mt-4 w-full py-3 text-[10px] font-bold uppercase tracking-[0.2em] rounded-xl transition-all duration-300 
+                        ${isComingSoon || isOutOfStock 
+                            ? 'bg-gray-200 text-gray-400 cursor-not-allowed' 
+                            : 'bg-[#111111] text-white hover:bg-black active:scale-95'}`}
+                >
+                    {isComingSoon ? 'Coming Soon' : isOutOfStock ? 'Sold Out' : 'Order via WhatsApp'}
                 </button>
             </div>
         </div>
     );
 };
+
 export default ProductCard;

src/features/ProductDetail/types/index.ts

@@ -0,0 +1,21 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore"; 
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBeWI2D-Dk9X55w6is0eBoYZRSNPLyXHY4",
+  authDomain: "zayq-1b3ee.firebaseapp.com",
+  projectId: "zayq-1b3ee",
+  storageBucket: "zayq-1b3ee.firebasestorage.app",
+  messagingSenderId: "982781196414",
+  appId: "1:982781196414:web:69841f4c02c35d8cc5c02f"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app); 
+
+export default app;

src/features/products/components/Page/ProductsPage.tsx

@@ -1,62 +1,64 @@
 import { create } from 'zustand'
 
-// =====================
-// Types
-// =====================
-
 export interface Product {
-  id: number
-  name: string
-  price: number
-  category: string
-  colorHex: string
-  type: 'matte' | 'clear' | 'leather'
+  id: string; // Changed to string for Firebase compatibility
+  name: string;
+  price: number;
+  category: string;
+  imageUrl: string; // Added for your product images
+  status: 'in-stock' | 'out-of-stock' | 'coming-soon'; // PRD Section 9
+  type: 'matte' | 'clear' | 'leather';
+  isFeatured?: boolean;
 }
 
 type SortBy = 'featured' | 'price-asc' | 'price-desc'
 
 interface ProductState {
-  // data
-  products: Product[]
-
-  // ui state
-  searchQuery: string
-  sortBy: SortBy
-  selectedCategory: string
-  currentPage: number
+  products: Product[];
+  searchQuery: string;
+  sortBy: SortBy;
+  selectedCategory: string;
+  currentPage: number;
 
-  // actions
-  setSearchQuery: (q: string) => void
-  setSortBy: (s: SortBy) => void
-  setSelectedCategory: (c: string) => void
-  setCurrentPage: (p: number) => void
-  setProducts: (products: Product[]) => void
+  // Actions
+  setProducts: (products: Product[]) => void;
+  setSearchQuery: (q: string) => void;
+  setSortBy: (s: SortBy) => void;
+  setSelectedCategory: (c: string) => void;
+  setCurrentPage: (p: number) => void;
+  
+  // Getter for filtered products
+  getFilteredProducts: () => Product[];
 }
 
-// =====================
-// Store
-// =====================
-
-export const useProductStore = create<ProductState>((set) => ({
+export const useProductStore = create<ProductState>((set, get) => ({
   products: [],
-
   searchQuery: '',
   sortBy: 'featured',
   selectedCategory: 'All',
   currentPage: 1,
 
-  setSearchQuery: (q) =>
-    set({ searchQuery: q, currentPage: 1 }),
-
-  setSortBy: (s) =>
-    set({ sortBy: s }),
-
-  setSelectedCategory: (c) =>
-    set({ selectedCategory: c, currentPage: 1 }),
-
-  setCurrentPage: (p) =>
-    set({ currentPage: p }),
+  setProducts: (products) => set({ products }),
+  setSearchQuery: (q) => set({ searchQuery: q, currentPage: 1 }),
+  setSortBy: (s) => set({ sortBy: s }),
+  setSelectedCategory: (c) => set({ selectedCategory: c, currentPage: 1 }),
+  setCurrentPage: (p) => set({ currentPage: p }),
 
-  setProducts: (products) =>
-    set({ products }),
-}))
+  // Logic to filter and sort products in one place
+  getFilteredProducts: () => {
+    const { products, searchQuery, selectedCategory, sortBy } = get();
+    
+    return products
+      .filter((p) => {
+        const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesCategory = selectedCategory === 'All' || p.category === selectedCategory;
+        return matchesSearch && matchesCategory;
+      })
+      .sort((a, b) => {
+        if (sortBy === 'price-asc') return a.price - b.price;
+        if (sortBy === 'price-desc') return b.price - a.price;
+        if (sortBy === 'featured') return a.isFeatured === b.isFeatured ? 0 : a.isFeatured ? -1 : 1;
+        return 0;
+      });
+  },
+}))