117 lines
3.2 KiB
JavaScript
117 lines
3.2 KiB
JavaScript
// Main App Component
|
|
function App() {
|
|
const [showOffsetOrder, setShowOffsetOrder] = React.useState(false);
|
|
const [offsetTons, setOffsetTons] = React.useState(0);
|
|
const [monetaryAmount, setMonetaryAmount] = React.useState(undefined);
|
|
const [calculatorType, setCalculatorType] = React.useState('trip');
|
|
|
|
React.useEffect(() => {
|
|
// Log page view when component mounts
|
|
analytics.pageView('calculator');
|
|
|
|
// Make the app available globally for iframe communication
|
|
window.PuffinCalculator = {
|
|
setTheme: (theme) => {
|
|
document.body.className = theme === 'dark' ? 'dark bg-gray-900' : 'bg-gray-50';
|
|
},
|
|
resetCalculator: () => {
|
|
setShowOffsetOrder(false);
|
|
setOffsetTons(0);
|
|
setMonetaryAmount(undefined);
|
|
}
|
|
};
|
|
|
|
// Handle iframe resize
|
|
const resizeObserver = new ResizeObserver(entries => {
|
|
for (let entry of entries) {
|
|
// Notify parent if using postMessage API
|
|
if (window.parent !== window) {
|
|
window.parent.postMessage({
|
|
type: 'puffin-calculator-resize',
|
|
height: entry.contentRect.height
|
|
}, '*');
|
|
}
|
|
}
|
|
});
|
|
|
|
const rootElement = document.getElementById('root');
|
|
if (rootElement) {
|
|
resizeObserver.observe(rootElement);
|
|
}
|
|
|
|
return () => {
|
|
if (rootElement) {
|
|
resizeObserver.unobserve(rootElement);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const handleOffsetClick = (tons, monetaryAmount) => {
|
|
setOffsetTons(tons);
|
|
setMonetaryAmount(monetaryAmount);
|
|
setShowOffsetOrder(true);
|
|
|
|
// Scroll to top
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
|
// Track event
|
|
analytics.event('calculator', 'offset_click', `${tons} tons`);
|
|
};
|
|
|
|
// Render the appropriate component based on state
|
|
const renderContent = () => {
|
|
if (showOffsetOrder) {
|
|
return React.createElement(OffsetOrder, {
|
|
tons: offsetTons,
|
|
monetaryAmount: monetaryAmount,
|
|
onBack: () => {
|
|
setShowOffsetOrder(false);
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
},
|
|
calculatorType: calculatorType
|
|
});
|
|
}
|
|
|
|
return React.createElement(TripCalculator, {
|
|
vesselData: sampleVessel,
|
|
onOffsetClick: handleOffsetClick
|
|
});
|
|
};
|
|
|
|
return React.createElement('div', {
|
|
className: 'puffin-calculator min-h-[600px]'
|
|
}, [
|
|
React.createElement('div', {
|
|
key: 'content',
|
|
className: 'px-4 sm:px-6 flex justify-center'
|
|
}, renderContent())
|
|
]);
|
|
}
|
|
|
|
// Initialize the application when the DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const rootElement = document.getElementById('root');
|
|
|
|
if (!rootElement) {
|
|
console.error('Root element not found. Cannot mount Puffin Calculator.');
|
|
return;
|
|
}
|
|
|
|
// Check for React and ReactDOM
|
|
if (!window.React || !window.ReactDOM) {
|
|
console.error('React or ReactDOM not loaded. Cannot mount Puffin Calculator.');
|
|
return;
|
|
}
|
|
|
|
// Initialize React app
|
|
const root = ReactDOM.createRoot(rootElement);
|
|
root.render(React.createElement(App, {}));
|
|
|
|
// Notify when ready
|
|
if (window.parent !== window) {
|
|
window.parent.postMessage({
|
|
type: 'puffin-calculator-ready'
|
|
}, '*');
|
|
}
|
|
});
|