feat: add option to view product certificate

components/products/AddToCardLeftSection.jsx

@@ -2,7 +2,7 @@
 import React, { useContext, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Award } from "lucide-react"; // Added Award icon
 import ProductContext from "@/app/contexts/productContext";
 import { backendUrl } from "@/utils/axios";
 import Image from "next/image";
@@ -26,7 +26,9 @@ const ProductGallery = ({ productId }) => {
   if (!product) {
     return null;
   }
+  
   const productImages = product?.images?.map((img) => img.image) || [];
+  const hasCertificate = product.certificate && product.certificate !== "NA";
 
   return (
     <div className="flex flex-col md:flex-row gap-4 p-4 sm:w-[70%] ">
@@ -44,7 +46,15 @@ const ProductGallery = ({ productId }) => {
         ))}
       </div>
       <div className="flex-grow h-full">
-        <Card className="p-4  h-[380px] sm:h-[80vh]">
+        <Card className="p-4 h-[380px] sm:h-[80vh] relative">
+          {/* Certificate Badge */}
+          {hasCertificate && (
+            <div className="absolute top-2 right-2 z-10 bg-green-100 text-green-800 px-2 py-1 rounded-md flex items-center text-xs font-medium">
+              <Award className="w-3 h-3 mr-1" />
+              Certified
+            </div>
+          )}
+          
           {/* Main image with carousel controls */}
           <div className="relative mb-4 h-full">
             <Image
@@ -81,6 +91,11 @@ const ProductGallery = ({ productId }) => {
             <h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
               Expert Rating
             </h3>
+            {hasCertificate && (
+              <h3 className="p-1 px-2 rounded-3xl border text-xs border-green-700 bg-green-50">
+                Certificate Available
+              </h3>
+            )}
           </div>
           <h2 className="mt-3">Note: Free Shipping on order above $ 300</h2>
           <h2 className="my-1">100% Secured Payment</h2>

components/products/AddToCardRightSection.jsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useContext, useState } from "react";
-import { Plus, Minus } from "lucide-react";
+import { Plus, Minus, FileText } from "lucide-react"; // Added FileText icon
 import ProductContext from "@/app/contexts/productContext";
 import { backendUrl } from "@/utils/axios";
 import { useCurrency } from "@/app/contexts/currencyContext";
@@ -12,6 +12,7 @@ function ProductDetails({ productId }) {
   const [selectedSize, setSelectedSize] = useState(null);
   const [selectedDesign, setSelectedDesign] = useState(null);
   const [termsAccepted, setTermsAccepted] = useState(false);
+  const [showCertificate, setShowCertificate] = useState(false);
   const { products, cartFn } = useContext(ProductContext);
   const { formatPrice, isLoading } = useCurrency();
 
@@ -27,6 +28,7 @@ function ProductDetails({ productId }) {
 
   const hasVariants = product.variants?.length > 0;
   const hasDesigns = product.design_associations?.length > 0;
+  const hasCertificate = product.certificate && product.certificate !== "NA";
 
   const selectedVariant = hasVariants
     ? product.variants.find((v) => v.size.size_name === selectedSize)
@@ -40,6 +42,15 @@ function ProductDetails({ productId }) {
 
   const totalPrice = currentPrice + designPrice;
   
+  const handleViewCertificate = () => {
+    setShowCertificate(true);
+    // If it's a PDF, open in a new tab
+    if (product.certificate.toLowerCase().endsWith('.pdf')) {
+      window.open(`${backendUrl}${product.certificate}`, '_blank');
+      setShowCertificate(false);
+    }
+  };
+
   return (
     <div className="max-w-xl p-6 space-y-6">
       <div className="flex justify-between items-start">
@@ -133,6 +144,18 @@ function ProductDetails({ productId }) {
           )}
         </div>
 
+        {hasCertificate && (
+          <div className="mt-4">
+            <button
+              onClick={handleViewCertificate}
+              className="flex items-center text-blue-600 hover:text-blue-800"
+            >
+              <FileText className="w-4 h-4 mr-2" />
+              View Certificate
+            </button>
+          </div>
+        )}
+
         {hasVariants && (
           <>
             <div className="flex items-center justify-between border rounded-md p-2 w-32">
@@ -200,6 +223,29 @@ function ProductDetails({ productId }) {
           />
         </div>
       </div>
+
+      {showCertificate && !product.certificate.toLowerCase().endsWith('.pdf') && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-4 rounded-lg max-w-4xl max-h-[90vh] overflow-auto">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-xl font-semibold">Product Certificate</h3>
+              <button 
+                onClick={() => setShowCertificate(false)}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="flex justify-center">
+              <img 
+                src={`${backendUrl}${product.certificate}`} 
+                alt="Product Certificate" 
+                className="max-w-full max-h-[70vh] object-contain"
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }