@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/products/page.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import ProductHero from "@/components/addOns/non-functional/heros/ProductHero";
+import Spinner from "@/components/addOns/non-functional/spinner";
+
+interface ProductCategory {
+  title: string;
+  description: string;
+  image: string;
+  link: string;
+}
+
+export default function Products() {
+  const sectionBackgroundRef = useRef<HTMLDivElement | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("All");
+  const [isMobile, setIsMobile] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const debounce = (fn: () => void, delay: number) => {
+      let timeout: NodeJS.Timeout;
+      return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay);
+      };
+    };
+
+    const checkMobile = debounce(() => {
+      setIsMobile(window.innerWidth < 768);
+    }, 100);
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const productCategories: ProductCategory[] = [
+    {
+      title: "Test Product",
+      description:
+        "New for 2025 are several styles of natural stone boulders. Check out the awesome patterns!",
+      image: "images/products/boulders.jpg",
+      link: "/products/productOne",
+    },
+  ];
+
+  const tabs = ["All", ...productCategories.map((category) => category.title)];
+
+  const filteredProducts =
+    activeTab === "All"
+      ? productCategories
+      : productCategories.filter((category) => category.title === activeTab);
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+    hover: {
+      scale: isMobile ? 1 : 1.05,
+      transition: { duration: 0.2, ease: "easeOut" },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full relative flex flex-col">
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+        }
+
+        @supports not (backdrop-filter: blur(12px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+
+        .glassmorphism:hover {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            padding: 1rem;
+          }
+          .gradient-text {
+            font-size: 2.5rem;
+          }
+        }
+
+        .line-clamp-8 {
+          display: -webkit-box;
+          -webkit-line-clamp: 8;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      `}</style>
+      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white">
+        <ProductHero />
+        <motion.section
+          className="relative z-10 py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8 bg-white"
+          variants={sectionVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          <div className="relative max-w-7xl mx-auto">
+            {/* Tabs Filter */}
+            <motion.div
+              className="mb-12 hidden sm:flex flex-wrap justify-center gap-4"
+              variants={itemVariants}
+            >
+              {tabs.map((tab) => (
+                <motion.button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-6 py-3 rounded-lg text-base sm:text-lg font-medium transition-all duration-300 ${
+                    activeTab === tab
+                      ? "bg-amber-600 text-white shadow-md"
+                      : "bg-gray-200 text-gray-800 hover:bg-gray-300"
+                  }`}
+                  variants={itemVariants}
+                >
+                  {tab}
+                </motion.button>
+              ))}
+            </motion.div>
+            {/* Dropdown (Mobile) */}
+            <motion.div
+              className="mb-12 sm:hidden px-2"
+              variants={itemVariants}
+            >
+              <div className="relative">
+                <select
+                  value={activeTab}
+                  onChange={(e) => setActiveTab(e.target.value)}
+                  className="w-full appearance-none px-5 py-3 bg-gray-200 text-gray-800 font-medium rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-green-600 transition-all duration-200"
+                >
+                  {tabs.map((tab) => (
+                    <option key={tab} value={tab}>
+                      {tab}
+                    </option>
+                  ))}
+                </select>
+                <div className="absolute inset-y-0 right-4 flex items-center pointer-events-none">
+                  <svg
+                    className="w-4 h-4 text-gray-500"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19 9l-7 7-7-7"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </motion.div>
+            {/* Filtered Products */}
+            <motion.div
+              className="space-y-12"
+              variants={sectionVariants}
+            >
+              {filteredProducts.length > 0 ? (
+                filteredProducts.map((category, index) => (
+                  <motion.div
+                    key={index}
+                    className="group bg-white rounded-xl shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-300 overflow-hidden"
+                    variants={cardVariants}
+                    initial="hidden"
+                    animate="visible"
+                    whileHover="hover"
+                  >
+                    <div className="flex flex-col md:flex-row">
+                      <div className="relative w-full md:w-1/2 h-80 sm:h-96 md:h-[600px] overflow-hidden">
+                        <Image
+                          src={category.image}
+                          alt={category.title}
+                          fill
+                          sizes="100vw"
+                          className="object-cover transition-transform duration-500 group-hover:scale-110"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-gray-800/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                      </div>
+                      <div className="p-6 sm:p-8 lg:p-12 flex flex-col w-full md:w-1/2">
+                        <h3 className="text-xl sm:text-2xl lg:text-3xl font-semibold mb-4 text-gray-900">
+                          <Link
+                            href={category.link}
+                            className="hover:text-green-600 transition-colors duration-300"
+                          >
+                            {category.title}
+                          </Link>
+                        </h3>
+                        <p className="text-base sm:text-lg lg:text-xl text-gray-700 mb-6 line-clamp-8">
+                          {category.description}
+                        </p>
+                        <Link
+                          href={category.link}
+                          className="inline-flex items-center text-gray-900 font-semibold text-base sm:text-lg lg:text-lg hover:text-green-600 transition-colors duration-300"
+                        >
+                          Explore {category.title}
+                          <svg
+                            className="ml-3 h-5 w-5 text-gray-900 group-hover:text-green-600 transition-transform duration-300 group-hover:translate-x-2"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M9 5l7 7-7 7"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </Link>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))
+              ) : (
+                <motion.p
+                  className="text-center text-lg text-gray-700"
+                  variants={itemVariants}
+                >
+                  No products found for this category.
+                </motion.p>
+              )}
+            </motion.div>
+          </div>
+        </motion.section>
+      </div>
+    </div>
+  );
+}

package/app/products/productOne/page.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { ProductDescCarousel } from "@/components/addOns/functional/carousels/ProductDescCarousel";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { useAuth } from "@clerk/nextjs";
+import ProductHero from "@/components/addOns/non-functional/heros/ProductHero";
+import { StrapiUser, UploadedImage, Category } from "@/lib/types";
+import { compressImage } from "@/lib/utils/compressImage";
+import { PRODUCT_PAGE } from "../constants/product";
+
+const PRODUCT_CATEGORIES: Category[] = [
+  "indoor",
+  "outdoor",
+  "commercial",
+
+];
+
+export default function BaggedCementProducts() {
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { isSignedIn, getToken } = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+  const [galleryUser, setUser] = useState<StrapiUser | null>(null);
+  const [subCategories, setSubCategories] = useState<string[]>([]);
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+
+  useEffect(() => {
+    setUser(user);
+  }, [user, authLoading, isSignedIn]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
+
+    return () => {
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+    };
+  }, [checkSession]);
+
+  const fetchInitialData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+
+      const headers: HeadersInit = { "Content-Type": "application/json" };
+      if (isSignedIn) {
+        const token = await getToken();
+        if (!token) {
+          throw new Error(PRODUCT_PAGE.ERRORS.NO_AUTH_TOKEN);
+        }
+        headers.Authorization = `Bearer ${token}`;
+      }
+
+      const response = await fetch("/api/gallery-data", { headers });
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error("Gallery fetch failed:", { status: response.status, errorText });
+        throw new Error(PRODUCT_PAGE.ERRORS.FETCH_IMAGES_FAILED.replace("${errorText}", errorText));
+      }
+
+      const { data: images, meta }: { data: UploadedImage[]; meta?: { pagination?: { total: number } } } = await response.json();
+
+      if (meta && meta.pagination && meta.pagination.total > 100) {
+        setError(PRODUCT_PAGE.ERRORS.PAGINATION_WARNING);
+      }
+
+      setUploadedImages(images || []);
+      const subCats: string[] = images
+        .filter((img) => img.category === "indoor" && typeof img.subCategory === "string" && img.subCategory !== "")
+        .reduce<string[]>((acc, img) => {
+          const subCategory = img.subCategory as string;
+          return acc.includes(subCategory) ? acc : [...acc, subCategory];
+        }, []);
+      setSubCategories(subCats);
+    } catch (err) {
+      console.error("Fetch error details:", err);
+      setError(err instanceof Error ? err.message : PRODUCT_PAGE.ERRORS.FETCH_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isSignedIn, getToken]);
+
+  useEffect(() => {
+    fetchInitialData();
+  }, [fetchInitialData]);
+
+  const handleImageUpload = async (
+    e: React.FormEvent<HTMLFormElement>,
+    file: File | null,
+    title: string,
+    description: string,
+    category: Category,
+    subCategory: string
+  ) => {
+    e.preventDefault();
+
+    if (!file) {
+      setError(PRODUCT_PAGE.ERRORS.NO_FILE_SELECTED);
+      return;
+    }
+
+    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+      setError(PRODUCT_PAGE.ERRORS.INVALID_FILE_TYPE);
+      return;
+    }
+
+    if (!isAdmin) {
+      setError(PRODUCT_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+
+    if (!subCategory) {
+      setError("Subcategory is required");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const token = await getToken();
+      if (!token) {
+        setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const compressedFile = await compressImage(file);
+
+      const formData = new FormData();
+      formData.append("file", compressedFile);
+      formData.append("title", title || `Image ${new Date().toISOString()}`);
+      formData.append("description", description || "");
+      formData.append("category", category || "bagged-cement-products");
+      formData.append("subCategory", subCategory);
+
+      const response = await fetch("/api/gallery-data", {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("Upload error response:", errorData);
+        if (response.status === 401) {
+          setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(PRODUCT_PAGE.ERRORS.UPLOAD_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data }: { data: UploadedImage[] } = await response.json();
+      setUploadedImages(data || []);
+      if (subCategory && !subCategories.includes(subCategory)) {
+        setSubCategories([...subCategories, subCategory]);
+      }
+      setError(null);
+    } catch (err) {
+      console.error("Upload error details:", err);
+      setError(err instanceof Error ? err.message : PRODUCT_PAGE.ERRORS.UPLOAD_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteImage = async (documentId: string) => {
+    if (!isAdmin) {
+      setError(PRODUCT_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const token = await getToken();
+      if (!token) {
+        setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+        return;
+      }
+
+      const response = await fetch("/api/gallery-data", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("Delete error response:", errorData);
+        if (response.status === 401) {
+          setError(PRODUCT_PAGE.ERRORS.AUTHENTICATION_ERROR);
+          return;
+        }
+        throw new Error(PRODUCT_PAGE.ERRORS.DELETE_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const { data }: { data: UploadedImage[] } = await response.json();
+      setUploadedImages(data || []);
+      const subCats: string[] = data
+        .filter((img) => img.category === "indoor" && typeof img.subCategory === "string" && img.subCategory !== "")
+        .reduce<string[]>((acc, img) => {
+          const subCategory = img.subCategory as string;
+          return acc.includes(subCategory) ? acc : [...acc, subCategory];
+        }, []);
+      setSubCategories(subCats);
+      setError(null);
+    } catch (err) {
+      console.error("Delete error details:", err);
+      setError(err instanceof Error ? err.message : PRODUCT_PAGE.ERRORS.DELETE_IMAGE_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading || authLoading) {
+    return <Spinner />;
+  }
+
+  const imageSrc = uploadedImages[0]?.url ?? "/placeholder.jpg";
+
+  return (
+    <div className="min-h-screen w-full bg-white font-sans">
+      <div className="w-full pt-20 lg:pt-40 pb-16 relative z-10 container-padding">
+        {error && (
+          <div className="text-red-600 text-center p-4 mb-4 max-w-4xl mx-auto bg-red-50 border border-red-200 rounded-lg backdrop-blur-sm">
+            {error}
+          </div>
+        )}
+
+        <ProductHero />
+
+        <div className="mb-8">
+          <ProductDescCarousel
+            user={galleryUser}
+            uploadedImages={uploadedImages}
+            setUploadedImages={setUploadedImages}
+            error={error}
+            setError={setError}
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            handleImageUpload={handleImageUpload}
+            handleDeleteImage={handleDeleteImage}
+            visibleCategories={["indoor"]}
+            fixedCategory="indoor"
+            visibleSubCategories={subCategories}
+            setVisibleSubCategories={setSubCategories} 
+          />
+        </div>
+
+      </div>
+    </div>
+  );
+}