feat: add option to view product certificate

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)
@@ -39,6 +41,15 @@ function ProductDetails({ productId }) {
     : 0;
 
   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">
@@ -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>
   );
 }