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

---
 src/components/OffsetOrder.tsx | 125 +++++++++++++--------------------
 1 file changed, 49 insertions(+), 76 deletions(-)

diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index b53fe37..8c64fce 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Check, AlertCircle, ArrowLeft, Loader2, Globe2, TreePine, Waves, Factory, Wind, X } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { createOffsetOrder, getPortfolios } from '../api/wrenClient';
 import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetProject } from '../types';
 import { currencies, formatCurrency, getCurrencyByCode } from '../utils/currencies';
@@ -128,26 +128,18 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
   // Calculate offset cost using the portfolio price
   const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
 
-  // Simplified handler for project selection with maximum debugging
-  const handleProjectClick = (project: OffsetProject) => {
-    console.log('=== PROJECT CLICK HANDLER FIRED ===');
-    console.log('Project name:', project.name);
-    console.log('Project ID:', project.id);
-    console.log('Current selectedProject state:', selectedProject?.name || 'null');
-    
-    // Force the state update
+  // Completely simplified project selection handler
+  const handleProjectClick = (project: OffsetProject, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('Opening project details for:', project.name);
     setSelectedProject(project);
-    
-    console.log('State updated to:', project.name);
-    console.log('=== END PROJECT CLICK HANDLER ===');
   };
 
-  // Handler for closing the lightbox
-  const handleCloseLightbox = (e: React.MouseEvent | React.TouchEvent) => {
-    if (e) e.preventDefault();
-    console.log('=== CLOSING LIGHTBOX ===');
+  // Simple lightbox close handler
+  const handleCloseLightbox = () => {
+    console.log('Closing lightbox');
     setSelectedProject(null);
-    console.log('selectedProject set to null');
   };
 
   return (
@@ -351,16 +343,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.5, delay: 0.3 }}
               >
-                {portfolio.projects.map((project, index) => (
+                {portfolio.projects.map((project) => (
                   <div
                     key={project.id}
                     className="bg-gray-50 rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer border border-gray-200 hover:border-blue-300"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      console.log('Project clicked:', project.name);
-                      handleProjectClick(project);
-                    }}
+                    onClick={(e) => handleProjectClick(project, e)}
+                    role="button"
+                    tabIndex={0}
                     style={{ 
                       userSelect: 'none',
                       WebkitUserSelect: 'none',
@@ -476,59 +465,44 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         </>
       ) : null}
 
-      {/* Debug info */}
+      {/* Simplified Lightbox Modal */}
       {selectedProject && (
-        <div className="fixed top-4 left-4 bg-red-500 text-white p-2 rounded z-50">
-          Selected: {selectedProject.name}
-        </div>
-      )}
-
-      {/* Project Lightbox Modal */}
-      <AnimatePresence>
-        {selectedProject && (
-          <motion.div 
-            className="fixed inset-0 z-50 flex items-center justify-center p-4"
-            style={{ 
-              backgroundColor: 'rgba(0, 0, 0, 0.7)',
-              backdropFilter: 'blur(4px)'
-            }}
-            onClick={(e) => handleCloseLightbox(e)}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+        <div 
+          className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
+          onClick={handleCloseLightbox}
+        >
+          <div
+            className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
           >
-            {/* Modal Content */}
-            <div
-              className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
-              onClick={(e) => e.stopPropagation()}
+            {/* Close Button */}
+            <button
+              onClick={handleCloseLightbox}
+              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"
             >
-              {/* Close Button */}
-              <button
-                onClick={handleCloseLightbox}
-                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 */}
-              {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>
+              <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">
@@ -584,11 +558,10 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                   </p>
                 </div>
               )}
-              </div>
             </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+          </div>
+        </div>
+      )}
     </motion.div>
   );
 }