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

65
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,28 +465,13 @@ 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 */}
<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 }}
> >
{/* Modal Content */}
<div <div
className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -586,9 +560,8 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
)} )}
</div> </div>
</div> </div>
</motion.div> </div>
)} )}
</AnimatePresence>
</motion.div> </motion.div>
); );
} }