locate adress on map and find hail risk

2026-06-09 16:15:21 +05:30
parent 716d096fc8
commit 110790d5ae
8 changed files with 522 additions and 21 deletions
@@ -0,0 +1,83 @@
+/**
+ * HailRiskStep — Screen 6 "Hail risk" (spec §6).
+ * Runs geocode → /api/storm-history → Poisson model, freezes the snapshot into
+ * the session (spec §12), and renders the historical-only risk card + map.
+ */
+import React, { useEffect } from 'react';
+import { Loader2, AlertCircle } from 'lucide-react';
+import { useEstimateWizard } from '../../EstimateWizardContext';
+import { useWizardHailRisk } from '../../hooks/useWizardHailRisk';
+import PropertyMap from '../PropertyMap';
+import HailRiskSnapshot from '../HailRiskSnapshot';
+
+const HailRiskStep = () => {
+    const { inputs, session, patchSession, tenantConfig, logEvent } = useEstimateWizard();
+
+    // Reuse a previously frozen snapshot if the user navigates back/forward.
+    const alreadyHave = !!session.hailSnapshot;
+
+    const { loading, error, property, snapshot } = useWizardHailRisk({
+        address: inputs.address,
+        property: session.property,
+        enabled: !alreadyHave,
+        stormSettings: tenantConfig.stormSettings,
+    });
+
+    // Freeze property + snapshot into the session once resolved.
+    useEffect(() => {
+        if (alreadyHave) return;
+        if (snapshot && property) {
+            patchSession({ property, hailSnapshot: snapshot });
+            logEvent('hail_snapshot_generated', {
+                exposureTier: snapshot.exposureTier,
+                p10Base: snapshot.probability10yr.base,
+                confidence: snapshot.confidence,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [snapshot, property, alreadyHave]);
+
+    const shownProperty = session.property || property;
+    const shownSnapshot = session.hailSnapshot || snapshot;
+
+    if (loading && !shownSnapshot) {
+        return (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+                <Loader2 size={28} className="text-amber-500 animate-spin mb-3" />
+                <p className="text-sm text-zinc-500 dark:text-zinc-400">
+                    Checking historical storm reports for your area…
+                </p>
+            </div>
+        );
+    }
+
+    if (error && !shownSnapshot) {
+        return (
+            <div className="rounded-2xl border border-red-200 dark:border-red-500/20 bg-red-50 dark:bg-red-500/10 p-4 flex items-start gap-3">
+                <AlertCircle size={20} className="text-red-500 shrink-0" />
+                <div>
+                    <p className="font-semibold text-red-700 dark:text-red-300">Storm history unavailable</p>
+                    <p className="text-sm text-red-600 dark:text-red-400 mt-0.5">
+                        We couldn’t load storm data right now — your rep will review local hail history during your visit.
+                        You can still continue.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            {shownProperty && (
+                <PropertyMap
+                    lat={shownProperty.lat}
+                    lon={shownProperty.lon}
+                    radiusMiles={shownSnapshot?.radiusMiles ?? 20}
+                />
+            )}
+            <HailRiskSnapshot snapshot={shownSnapshot} />
+        </div>
+    );
+};
+
+export default HailRiskStep;