Fix custom amount CO2 tons display in offset order components
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m22s

When using custom monetary amount, the header and UI were showing 0.00 tons
instead of the calculated CO2 tons based on the monetary amount.

Changes:
- OffsetOrder.tsx: Use actualOffsetTons (calculated from monetaryAmount) in header instead of raw tons parameter
- MobileOffsetOrder.tsx: Use baseTons in form message and slider display to correctly show total when using custom amount
- Both components now properly calculate and display CO2 tons from monetary amounts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt 2025-11-03 22:03:06 +01:00
parent 48022f38d4
commit 4797fbfbf5
2 changed files with 4 additions and 4 deletions

View File

@ -100,9 +100,9 @@ export function MobileOffsetOrder({ tons, monetaryAmount, onBack }: Props) {
useEffect(() => { useEffect(() => {
setFormData(prev => ({ setFormData(prev => ({
...prev, ...prev,
message: `I would like to offset ${formatTons(actualOffsetTons)} tons of CO2 (${offsetPercentage}% of ${formatTons(tons)} tons) from my yacht's emissions.` message: `I would like to offset ${formatTons(actualOffsetTons)} tons of CO2 (${offsetPercentage}% of ${formatTons(baseTons)} tons) from my yacht's emissions.`
})); }));
}, [offsetPercentage, actualOffsetTons, tons]); }, [offsetPercentage, actualOffsetTons, baseTons]);
// Save offset percentage and portfolio ID to localStorage // Save offset percentage and portfolio ID to localStorage
useEffect(() => { useEffect(() => {
@ -385,7 +385,7 @@ export function MobileOffsetOrder({ tons, monetaryAmount, onBack }: Props) {
</span> </span>
</div> </div>
<div className="text-sm text-blue-600 mt-1"> <div className="text-sm text-blue-600 mt-1">
{offsetPercentage}% of {formatTons(tons)} tons total emissions {offsetPercentage}% of {formatTons(baseTons)} tons total emissions
</div> </div>
</div> </div>
</div> </div>

View File

@ -226,7 +226,7 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
Offset Your Impact Offset Your Impact
</h2> </h2>
<p className="text-lg text-gray-600"> <p className="text-lg text-gray-600">
You're about to offset {formatTons(tons)} tons of CO You're about to offset {formatTons(actualOffsetTons)} tons of CO
</p> </p>
</motion.div> </motion.div>