From e816ea48d2b26447d8fea1fa744c4808809e1917 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 3 Jun 2025 15:09:20 +0200
Subject: [PATCH] updates

---
 src/components/OffsetOrder.tsx | 399 ++++++++++++++++++---------------
 1 file changed, 223 insertions(+), 176 deletions(-)

diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index 32edcbd..e1e0e9f 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -40,6 +40,207 @@ const ProjectTypeIcon = ({ project }: ProjectTypeIconProps) => {
   }
 };
 
+// Project card component to improve readability and ensure consistent behavior
+const ProjectCard = ({ 
+  project, 
+  index, 
+  onSelect 
+}: { 
+  project: OffsetProject; 
+  index: number; 
+  onSelect: (project: OffsetProject) => void;
+}) => {
+  // Handler to ensure event propagation is stopped correctly
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('Project clicked:', project.name);
+    onSelect(project);
+  };
+
+  return (
+    <motion.button 
+      type="button"
+      key={project.id} 
+      className="bg-gray-50 rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer text-left w-full flex flex-col"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: 0.1 * index }}
+      whileHover={{ scale: 1.03 }}
+      whileTap={{ scale: 0.98 }}
+      onClick={handleClick}
+      aria-label={`View details for ${project.name}`}
+    >
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center space-x-2">
+          <ProjectTypeIcon project={project} />
+          <h4 className="font-semibold text-gray-900">{project.name}</h4>
+        </div>
+        {project.percentage && (
+          <span className="text-sm text-gray-600 font-medium">
+            {(project.percentage * 100).toFixed(1)}%
+          </span>
+        )}
+      </div>
+      {project.imageUrl && (
+        <div className="relative h-32 mb-3 rounded-lg overflow-hidden">
+          <img
+            src={project.imageUrl}
+            alt={project.name}
+            className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 hover:scale-110"
+          />
+        </div>
+      )}
+      <p className="text-sm text-gray-600 mb-3">
+        {project.shortDescription || project.description}
+      </p>
+      <div className="space-y-1 text-sm mt-3">
+        <div className="flex justify-between">
+          <span className="text-gray-500">Price per ton:</span>
+          <span className="text-gray-900 font-medium">
+            ${project.pricePerTon.toFixed(2)}
+          </span>
+        </div>
+      </div>
+      <div className="mt-3 text-center">
+        <span className="text-xs text-blue-600 font-medium">Click for details</span>
+      </div>
+    </motion.button>
+  );
+};
+
+// Lightbox modal component
+const ProjectLightbox = ({
+  project,
+  onClose
+}: {
+  project: OffsetProject | null;
+  onClose: () => void;
+}) => {
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  // Prevent body scrolling when modal is open
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+
+  if (!project) return null;
+  
+  return (
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black bg-opacity-50"
+        aria-hidden="true"
+      />
+      
+      {/* Modal Content */}
+      <div
+        className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto z-60"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors z-10"
+          aria-label="Close details"
+        >
+          <X size={20} />
+        </button>
+        
+        {/* Project Image */}
+        {project.imageUrl && (
+          <div className="relative h-64 md:h-80 overflow-hidden rounded-t-lg">
+            <img
+              src={project.imageUrl}
+              alt={project.name}
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+            <div className="absolute bottom-4 left-4 right-4">
+              <h3 className="text-2xl font-bold text-white mb-2">{project.name}</h3>
+              <div className="flex items-center space-x-2">
+                <ProjectTypeIcon project={project} />
+                <span className="text-white/90">{project.type || 'Environmental Project'}</span>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {/* Project Details */}
+        <div className="p-6">
+          {!project.imageUrl && (
+            <>
+              <h3 className="text-2xl font-bold text-gray-900 mb-2">{project.name}</h3>
+              <div className="flex items-center space-x-2 mb-4">
+                <ProjectTypeIcon project={project} />
+                <span className="text-gray-600">{project.type || 'Environmental Project'}</span>
+              </div>
+            </>
+          )}
+          
+          <p className="text-gray-700 mb-6">
+            {project.description || project.shortDescription}
+          </p>
+          
+          <div className="grid grid-cols-2 gap-4 mb-6">
+            <div className="bg-gray-50 p-4 rounded-lg">
+              <p className="text-sm text-gray-600 mb-1">Price per Ton</p>
+              <p className="text-xl font-bold text-gray-900">${project.pricePerTon.toFixed(2)}</p>
+            </div>
+            {project.percentage && (
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <p className="text-sm text-gray-600 mb-1">Portfolio Allocation</p>
+                <p className="text-xl font-bold text-gray-900">{(project.percentage * 100).toFixed(1)}%</p>
+              </div>
+            )}
+          </div>
+          
+          {(project.location || project.verificationStandard) && (
+            <div className="space-y-3 mb-6">
+              {project.location && (
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-600">Location:</span>
+                  <span className="font-medium text-gray-900">{project.location}</span>
+                </div>
+              )}
+              {project.verificationStandard && (
+                <div className="flex items-center justify-between">
+                  <span className="text-gray-600">Verification Standard:</span>
+                  <span className="font-medium text-gray-900">{project.verificationStandard}</span>
+                </div>
+              )}
+            </div>
+          )}
+          
+          {project.impactMetrics && project.impactMetrics.co2Reduced > 0 && (
+            <div className="bg-blue-50 p-4 rounded-lg">
+              <p className="text-sm text-blue-700 mb-1">Impact Metrics</p>
+              <p className="text-lg font-semibold text-blue-900">
+                {project.impactMetrics.co2Reduced.toLocaleString()} tons CO₂ reduced
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Props) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -66,19 +267,6 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
     fetchPortfolio();
   }, []);
 
-  // handle Escape key to close lightbox
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setSelectedProject(null);
-    };
-    if (selectedProject) {
-      document.addEventListener('keydown', onKey);
-    }
-    return () => {
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [selectedProject]);
-
   const fetchPortfolio = async () => {
     try {
       const allPortfolios = await getPortfolios();
@@ -141,9 +329,21 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
   // Calculate offset cost using the portfolio price
   const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
 
+  // Handler for project selection
+  const handleProjectSelect = (project: OffsetProject) => {
+    console.log(`Setting selected project: ${project.name}`);
+    setSelectedProject(project);
+  };
+
+  // Handler for closing the lightbox
+  const handleCloseLightbox = () => {
+    console.log('Closing lightbox');
+    setSelectedProject(null);
+  };
+
   return (
     <motion.div 
-      className="bg-white rounded-lg shadow-xl p-8 max-w-4xl w-full"
+      className="bg-white rounded-lg shadow-xl p-8 max-w-4xl w-full relative"
       initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
@@ -155,6 +355,7 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 0.5 }}
         whileHover={{ x: -5 }}
+        type="button"
       >
         <ArrowLeft className="mr-2" size={20} />
         Back to Calculator
@@ -342,55 +543,12 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                 transition={{ duration: 0.5, delay: 0.3 }}
               >
                 {portfolio.projects.map((project, index) => (
-                  <motion.button 
-                    type="button"
-                    key={project.id} 
-                    className="bg-gray-50 rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer text-left w-full"
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.1 * index }}
-                    whileHover={{ scale: 1.03 }}
-                    whileTap={{ scale: 0.98 }}
-                    onClick={() => {
-                      console.log('Project clicked:', project.name);
-                      setSelectedProject(project);
-                    }}
-                  >
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="flex items-center space-x-2">
-                        <ProjectTypeIcon project={project} />
-                        <h4 className="font-semibold text-gray-900">{project.name}</h4>
-                      </div>
-                      {project.percentage && (
-                        <span className="text-sm text-gray-600 font-medium">
-                          {(project.percentage * 100).toFixed(1)}%
-                        </span>
-                      )}
-                    </div>
-                    {project.imageUrl && (
-                      <div className="relative h-32 mb-3 rounded-lg overflow-hidden">
-                        <img
-                          src={project.imageUrl}
-                          alt={project.name}
-                          className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 hover:scale-110"
-                        />
-                      </div>
-                    )}
-                    <p className="text-sm text-gray-600 mb-3">
-                      {project.shortDescription || project.description}
-                    </p>
-                    <div className="space-y-1 text-sm mt-3">
-                      <div className="flex justify-between">
-                        <span className="text-gray-500">Price per ton:</span>
-                        <span className="text-gray-900 font-medium">
-                          ${project.pricePerTon.toFixed(2)}
-                        </span>
-                      </div>
-                    </div>
-                    <div className="mt-3 text-center">
-                      <span className="text-xs text-blue-600 font-medium">Click for details</span>
-                    </div>
-                  </motion.button>
+                  <ProjectCard 
+                    key={project.id}
+                    project={project}
+                    index={index}
+                    onSelect={handleProjectSelect}
+                  />
                 ))}
               </motion.div>
             )}
@@ -463,119 +621,8 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         </>
       ) : null}
 
-      {/* Project Lightbox Modal */}
-      <AnimatePresence>
-        {selectedProject && (
-          <motion.div
-            className="fixed inset-0 z-50 flex items-center justify-center p-4"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={() => setSelectedProject(null)}
-          >
-            {/* Backdrop */}
-            <motion.div
-              className="absolute inset-0 bg-black bg-opacity-50"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 0.5 }}
-              exit={{ opacity: 0 }}
-            />
-            
-            {/* Modal Content */}
-            <motion.div
-              className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto z-60"
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.9, opacity: 0 }}
-              transition={{ type: "spring", stiffness: 300, damping: 30 }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {/* Close Button */}
-              <button
-                onClick={() => setSelectedProject(null)}
-                className="absolute top-4 right-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors z-10"
-              >
-                <X size={20} />
-              </button>
-              
-              {/* Project Image */}
-              {selectedProject.imageUrl && (
-                <div className="relative h-64 md:h-80 overflow-hidden rounded-t-lg">
-                  <img
-                    src={selectedProject.imageUrl}
-                    alt={selectedProject.name}
-                    className="w-full h-full object-cover"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-                  <div className="absolute bottom-4 left-4 right-4">
-                    <h3 className="text-2xl font-bold text-white mb-2">{selectedProject.name}</h3>
-                    <div className="flex items-center space-x-2">
-                      <ProjectTypeIcon project={selectedProject} />
-                      <span className="text-white/90">{selectedProject.type || 'Environmental Project'}</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Project Details */}
-              <div className="p-6">
-                {!selectedProject.imageUrl && (
-                  <>
-                    <h3 className="text-2xl font-bold text-gray-900 mb-2">{selectedProject.name}</h3>
-                    <div className="flex items-center space-x-2 mb-4">
-                      <ProjectTypeIcon project={selectedProject} />
-                      <span className="text-gray-600">{selectedProject.type || 'Environmental Project'}</span>
-                    </div>
-                  </>
-                )}
-                
-                <p className="text-gray-700 mb-6">
-                  {selectedProject.description || selectedProject.shortDescription}
-                </p>
-                
-                <div className="grid grid-cols-2 gap-4 mb-6">
-                  <div className="bg-gray-50 p-4 rounded-lg">
-                    <p className="text-sm text-gray-600 mb-1">Price per Ton</p>
-                    <p className="text-xl font-bold text-gray-900">${selectedProject.pricePerTon.toFixed(2)}</p>
-                  </div>
-                  {selectedProject.percentage && (
-                    <div className="bg-gray-50 p-4 rounded-lg">
-                      <p className="text-sm text-gray-600 mb-1">Portfolio Allocation</p>
-                      <p className="text-xl font-bold text-gray-900">{(selectedProject.percentage * 100).toFixed(1)}%</p>
-                    </div>
-                  )}
-                </div>
-                
-                {(selectedProject.location || selectedProject.verificationStandard) && (
-                  <div className="space-y-3 mb-6">
-                    {selectedProject.location && (
-                      <div className="flex items-center justify-between">
-                        <span className="text-gray-600">Location:</span>
-                        <span className="font-medium text-gray-900">{selectedProject.location}</span>
-                      </div>
-                    )}
-                    {selectedProject.verificationStandard && (
-                      <div className="flex items-center justify-between">
-                        <span className="text-gray-600">Verification Standard:</span>
-                        <span className="font-medium text-gray-900">{selectedProject.verificationStandard}</span>
-                      </div>
-                    )}
-                  </div>
-                )}
-                
-                {selectedProject.impactMetrics && selectedProject.impactMetrics.co2Reduced > 0 && (
-                  <div className="bg-blue-50 p-4 rounded-lg">
-                    <p className="text-sm text-blue-700 mb-1">Impact Metrics</p>
-                    <p className="text-lg font-semibold text-blue-900">
-                      {selectedProject.impactMetrics.co2Reduced.toLocaleString()} tons CO₂ reduced
-                    </p>
-                  </div>
-                )}
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {/* Project Lightbox Modal - Rendered directly without AnimatePresence for better compatibility */}
+      {selectedProject && <ProjectLightbox project={selectedProject} onClose={handleCloseLightbox} />}
     </motion.div>
   );
 }