matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Matt 2025-06-03 15:25:13 +02:00
parent bf38357c74
commit df2e11f600
1 changed files with 49 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/OffsetOrder.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Check, AlertCircle, ArrowLeft, Loader2, Globe2, TreePine, Waves, Factory, Wind, X } from 'lucide-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 { createOffsetOrder, getPortfolios } from '../api/wrenClient';
import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetProject } from '../types'; import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetProject } from '../types';
import { currencies, formatCurrency, getCurrencyByCode } from '../utils/currencies'; 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 // Calculate offset cost using the portfolio price
const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0); const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
// Simplified handler for project selection with maximum debugging // Completely simplified project selection handler
const handleProjectClick = (project: OffsetProject) => { const handleProjectClick = (project: OffsetProject, e: React.MouseEvent) => {
console.log('=== PROJECT CLICK HANDLER FIRED ==='); e.preventDefault();
console.log('Project name:', project.name); e.stopPropagation();
console.log('Project ID:', project.id); console.log('Opening project details for:', project.name);
console.log('Current selectedProject state:', selectedProject?.name || 'null');
// Force the state update
setSelectedProject(project); setSelectedProject(project);
console.log('State updated to:', project.name);
console.log('=== END PROJECT CLICK HANDLER ===');
}; };
// Handler for closing the lightbox // Simple lightbox close handler
const handleCloseLightbox = (e: React.MouseEvent | React.TouchEvent) => { const handleCloseLightbox = () => {
if (e) e.preventDefault(); console.log('Closing lightbox');
console.log('=== CLOSING LIGHTBOX ===');
setSelectedProject(null); setSelectedProject(null);
console.log('selectedProject set to null');
}; };
return ( return (
@ -351,16 +343,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }} transition={{ duration: 0.5, delay: 0.3 }}
> >
{portfolio.projects.map((project, index) => ( {portfolio.projects.map((project) => (
<div <div
key={project.id} 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" 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) => { onClick={(e) => handleProjectClick(project, e)}
e.preventDefault(); role="button"
e.stopPropagation(); tabIndex={0}
console.log('Project clicked:', project.name);
handleProjectClick(project);
}}
style={{ style={{
userSelect: 'none', userSelect: 'none',
WebkitUserSelect: 'none', WebkitUserSelect: 'none',
@ -476,59 +465,44 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
</> </>
) : null} ) : null}
{/* Debug info */} {/* Simplified Lightbox Modal */}
{selectedProject && ( {selectedProject && (
<div className="fixed top-4 left-4 bg-red-500 text-white p-2 rounded z-50"> <div
Selected: {selectedProject.name} className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
</div> style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
)} onClick={handleCloseLightbox}
>
{/* Project Lightbox Modal */} <div
<AnimatePresence> className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
{selectedProject && ( onClick={(e) => e.stopPropagation()}
<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 }}
> >
{/* Modal Content */} {/* Close Button */}
<div <button
className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={handleCloseLightbox}
onClick={(e) => e.stopPropagation()} 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 */} <X size={20} />
<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" {/* Project Image */}
aria-label="Close details" {selectedProject.imageUrl && (
> <div className="relative h-64 md:h-80 overflow-hidden rounded-t-lg">
<X size={20} /> <img
</button> src={selectedProject.imageUrl}
alt={selectedProject.name}
{/* Project Image */} className="w-full h-full object-cover"
{selectedProject.imageUrl && ( />
<div className="relative h-64 md:h-80 overflow-hidden rounded-t-lg"> <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
<img <div className="absolute bottom-4 left-4 right-4">
src={selectedProject.imageUrl} <h3 className="text-2xl font-bold text-white mb-2">{selectedProject.name}</h3>
alt={selectedProject.name} <div className="flex items-center space-x-2">
className="w-full h-full object-cover" <ProjectTypeIcon project={selectedProject} />
/> <span className="text-white/90">{selectedProject.type || 'Environmental Project'}</span>
<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>
</div> </div>
)} </div>
)}
{/* Project Details */} {/* Project Details */}
<div className="p-6"> <div className="p-6">
@ -584,11 +558,10 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
</p> </p>
</div> </div>
)} )}
</div>
</div> </div>
</motion.div> </div>
)} </div>
</AnimatePresence> )}
</motion.div> </motion.div>
); );
} }