updates
This commit is contained in:
Matt
parent
5308cb61d1
commit
e816ea48d2
@ -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) {
|
export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Props) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
@ -66,19 +267,6 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
|
|||||||
fetchPortfolio();
|
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 () => {
|
const fetchPortfolio = async () => {
|
||||||
try {
|
try {
|
||||||
const allPortfolios = await getPortfolios();
|
const allPortfolios = await getPortfolios();
|
||||||
@ -141,9 +329,21 @@ 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);
|
||||||
|
|
||||||
|
// 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 (
|
return (
|
||||||
<motion.div
|
<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 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
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 }}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
transition={{ duration: 0.5 }}
|
transition={{ duration: 0.5 }}
|
||||||
whileHover={{ x: -5 }}
|
whileHover={{ x: -5 }}
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<ArrowLeft className="mr-2" size={20} />
|
<ArrowLeft className="mr-2" size={20} />
|
||||||
Back to Calculator
|
Back to Calculator
|
||||||
@ -342,55 +543,12 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
|
|||||||
transition={{ duration: 0.5, delay: 0.3 }}
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||||||
>
|
>
|
||||||
{portfolio.projects.map((project, index) => (
|
{portfolio.projects.map((project, index) => (
|
||||||
<motion.button
|
<ProjectCard
|
||||||
type="button"
|
key={project.id}
|
||||||
key={project.id}
|
project={project}
|
||||||
className="bg-gray-50 rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer text-left w-full"
|
index={index}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
onSelect={handleProjectSelect}
|
||||||
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>
|
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
@ -463,119 +621,8 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
|
|||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{/* Project Lightbox Modal */}
|
{/* Project Lightbox Modal - Rendered directly without AnimatePresence for better compatibility */}
|
||||||
<AnimatePresence>
|
{selectedProject && <ProjectLightbox project={selectedProject} onClose={handleCloseLightbox} />}
|
||||||
{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>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user