f57ceb7b8f
Some checks failed
Build and Push Docker Images / docker (push) Failing after 2m13s
- Update useQRDecoder hook to use Next.js useSearchParams() for SSR compatibility - Add auto-navigation logic to TripCalculator that automatically calculates and navigates to offset page when QR data is present - Add QR detection to CalculatorClient to conditionally render QRCalculatorLoader vs TripCalculator - Support all three calculation types: fuel, distance, and custom amount - Add 500ms delay before navigation to allow UI to render This completes the QR code flow where scanning a QR code now automatically: 1. Pre-fills calculator form with data 2. Calculates carbon footprint 3. Navigates to offset purchase page 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { TripCalculator } from '../src/components/TripCalculator';
|
|
import { QRCalculatorLoader } from '../src/components/QRCalculatorLoader';
|
|
import { OffsetOrder } from '../src/components/OffsetOrder';
|
|
import { useHasQRData } from '../src/hooks/useQRDecoder';
|
|
import type { VesselData } from '../src/types';
|
|
|
|
// Sample vessel data (same as in old App.tsx)
|
|
const sampleVessel: VesselData = {
|
|
imo: "1234567",
|
|
vesselName: "Sample Yacht",
|
|
type: "Yacht",
|
|
length: 50,
|
|
width: 9,
|
|
estimatedEnginePower: 2250
|
|
};
|
|
|
|
export function CalculatorClient() {
|
|
const hasQRData = useHasQRData(); // Check if URL contains QR code data
|
|
const [showOffsetOrder, setShowOffsetOrder] = useState(false);
|
|
const [offsetTons, setOffsetTons] = useState(0);
|
|
const [monetaryAmount, setMonetaryAmount] = useState<number | undefined>();
|
|
|
|
const handleOffsetClick = (tons: number, monetaryAmount?: number) => {
|
|
setOffsetTons(tons);
|
|
setMonetaryAmount(monetaryAmount);
|
|
setShowOffsetOrder(true);
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
const handleBackFromOffset = () => {
|
|
setShowOffsetOrder(false);
|
|
setOffsetTons(0);
|
|
setMonetaryAmount(undefined);
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
if (showOffsetOrder) {
|
|
return (
|
|
<div className="flex justify-center px-4 sm:px-0">
|
|
<OffsetOrder
|
|
tons={offsetTons}
|
|
monetaryAmount={monetaryAmount}
|
|
onBack={handleBackFromOffset}
|
|
calculatorType="trip"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<div className="text-center mb-12 max-w-4xl">
|
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
|
Calculate & Offset Your Yacht's Carbon Footprint
|
|
</h1>
|
|
<p className="text-base sm:text-lg text-gray-600">
|
|
Use the calculator below to estimate your carbon footprint and explore offsetting options through our verified projects.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center w-full max-w-4xl space-y-8">
|
|
{hasQRData ? (
|
|
<QRCalculatorLoader
|
|
vesselData={sampleVessel}
|
|
onOffsetClick={handleOffsetClick}
|
|
/>
|
|
) : (
|
|
<TripCalculator
|
|
vesselData={sampleVessel}
|
|
onOffsetClick={handleOffsetClick}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|