estimate module setup and wizard ui
This commit is contained in:
Mayur Shinde
+1
-1
@@ -33,7 +33,7 @@ dist-ssr
|
||||
|
||||
# Reference images / design workflows (local only, not for repo)
|
||||
Estimate_Section_Screens_and_Workflows/
|
||||
|
||||
LynkedUpPro_Customer_Estimate_Presentation_DIY_Wizard_Build_Spec_v1_0.pdf
|
||||
# Claude Code local config (session memory, not for repo)
|
||||
.claude/
|
||||
.vercel
|
||||
|
||||
@@ -45,6 +45,7 @@ import StormIntelPage from './pages/StormIntelPage';
|
||||
import FieldStormZonePage from './pages/FieldStormZonePage';
|
||||
import UserDetailsPage from './pages/UserDetailsPage';
|
||||
import LeadVerificationPage from './pages/LeadVerification/LeadVerificationPage';
|
||||
import CustomerEstimateWizard from './modules/estimateWizard/CustomerEstimateWizard';
|
||||
|
||||
// ... (existing imports)
|
||||
const ProtectedRoute = ({ children, allowedRoles }) => {
|
||||
@@ -74,6 +75,8 @@ function App() {
|
||||
{/* Public Routes */}
|
||||
<Route path="/" element={<Landing />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
{/* Public DIY Roofing Estimate Wizard — homeowner-facing, no auth, chrome-less */}
|
||||
<Route path="/estimate" element={<CustomerEstimateWizard />} />
|
||||
<Route
|
||||
path="/chat-assistant"
|
||||
element={
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
|
||||
ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
|
||||
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings, CloudLightning,
|
||||
HardHat, ShieldCheck
|
||||
HardHat, ShieldCheck, Sparkles
|
||||
} from 'lucide-react';
|
||||
|
||||
import PageTransition from './PageTransition';
|
||||
@@ -112,7 +112,7 @@ const Layout = () => {
|
||||
}, []);
|
||||
|
||||
// Determine standard layout vs full screen for Public pages
|
||||
const isPublic = ['/', '/login'].includes(location.pathname);
|
||||
const isPublic = ['/', '/login', '/estimate'].includes(location.pathname);
|
||||
|
||||
if (isPublic) {
|
||||
return (
|
||||
@@ -128,6 +128,7 @@ const Layout = () => {
|
||||
|
||||
const commonItems = [
|
||||
{ to: "/chat-assistant", icon: MessageSquare, label: "AI Assistant" },
|
||||
{ to: "/estimate", icon: Sparkles, label: "Estimate Wizard" },
|
||||
];
|
||||
|
||||
const homeItem = { to: "/", icon: Home, label: "Home" };
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* CustomerEstimateWizard — public entry point for the DIY Roofing Estimate Wizard.
|
||||
* Rendered chrome-less (no CRM sidebar) at the public /estimate route. The homeowner
|
||||
* is the primary user (spec §1). Wrapped in its own provider so the module stays
|
||||
* fully self-contained.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { CheckCircle2 } from 'lucide-react';
|
||||
import { EstimateWizardProvider, useEstimateWizard } from './EstimateWizardContext';
|
||||
import WizardShell from './components/WizardShell';
|
||||
|
||||
const CompletionScreen = () => {
|
||||
const { inputs, reset } = useEstimateWizard();
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-zinc-50 dark:bg-[#09090b] flex items-center justify-center px-4">
|
||||
<div className="max-w-md text-center">
|
||||
<CheckCircle2 size={56} className="text-green-500 mx-auto mb-4" />
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-white">
|
||||
Thanks{inputs.name ? `, ${inputs.name.split(' ')[0]}` : ''}!
|
||||
</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 mt-2">
|
||||
Your roof options report is being prepared. The branded report, AI recommendation, and
|
||||
booking step are delivered in Phase 5.
|
||||
</p>
|
||||
<button
|
||||
onClick={reset}
|
||||
className="mt-6 rounded-xl bg-gradient-to-r from-amber-400 to-orange-500 text-white font-semibold px-6 py-2.5 shadow-lg shadow-amber-500/25"
|
||||
>
|
||||
Build another estimate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WizardRouter = () => {
|
||||
const { session } = useEstimateWizard();
|
||||
return session.status === 'completed' ? <CompletionScreen /> : <WizardShell />;
|
||||
};
|
||||
|
||||
const CustomerEstimateWizard = ({ source = 'public' }) => (
|
||||
<EstimateWizardProvider source={source}>
|
||||
<WizardRouter />
|
||||
</EstimateWizardProvider>
|
||||
);
|
||||
|
||||
export default CustomerEstimateWizard;
|
||||
@@ -0,0 +1,157 @@
|
||||
/**
|
||||
* EstimateWizardContext — self-contained session state for the DIY Estimate Wizard.
|
||||
*
|
||||
* This is the client-side stand-in for the spec's backend entities (§12):
|
||||
* estimate_sessions, estimate_inputs, hail_risk_snapshots, recommendations,
|
||||
* customer_reports, estimate_events.
|
||||
* For the demo it persists to localStorage so an abandoned session can be resumed
|
||||
* (spec §13: "auto-save every screen to recover abandoned sessions").
|
||||
*
|
||||
* Kept separate from the global MockStoreProvider on purpose — this is a new,
|
||||
* isolated module. A Phase 5 adapter can mirror sessions into the CRM mock store.
|
||||
*/
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
||||
import { STEP_FLOW } from './data/questions';
|
||||
import { getTenantConfig } from './data/tenantConfig';
|
||||
|
||||
const STORAGE_KEY = 'lup_estimate_wizard_session_v1';
|
||||
|
||||
const EstimateWizardContext = createContext(null);
|
||||
|
||||
// A stable-ish id without relying on Date.now/Math.random being available everywhere.
|
||||
function makeSessionId() {
|
||||
const t = new Date().toISOString().replace(/[^0-9]/g, '').slice(0, 14);
|
||||
const r = Math.floor(performance.now() % 100000).toString().padStart(5, '0');
|
||||
return `es_${t}_${r}`;
|
||||
}
|
||||
|
||||
function freshSession(source = 'public') {
|
||||
return {
|
||||
id: makeSessionId(),
|
||||
tenantId: 'lynkeduppro',
|
||||
status: 'started', // started → completed | abandoned
|
||||
source, // website | ad | qr | crm | public
|
||||
startedAt: new Date().toISOString(),
|
||||
completedAt: null,
|
||||
// estimate_inputs (§12)
|
||||
inputs: {
|
||||
name: '', address: '', phone: '', email: '', consent: false, contactMethod: 'email',
|
||||
roofAgeYears: 10,
|
||||
issueType: null,
|
||||
ownershipHorizon: null,
|
||||
premiumAmount: null, premiumUnknown: false,
|
||||
budgetPreference: null,
|
||||
hoaConstraints: null,
|
||||
atticConcern: null,
|
||||
pestConcern: null,
|
||||
financingInterest: null,
|
||||
},
|
||||
property: null, // property_profiles (Phase 2)
|
||||
hailSnapshot: null, // hail_risk_snapshots (Phase 2)
|
||||
selectedPackage: null, // customer's chosen option (Phase 3)
|
||||
selectedAddons: [], // add-on ids (Phase 3)
|
||||
recommendation: null, // recommendations (Phase 4)
|
||||
report: null, // customer_reports (Phase 5)
|
||||
events: [], // estimate_events (audit/analytics)
|
||||
stepIndex: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function loadSession() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw);
|
||||
// Basic shape guard so a stale/partial blob can't crash the wizard.
|
||||
if (parsed && parsed.id && parsed.inputs) return parsed;
|
||||
} catch { /* ignore corrupt storage */ }
|
||||
return null;
|
||||
}
|
||||
|
||||
export function EstimateWizardProvider({ children, source = 'public' }) {
|
||||
const [tenantConfig] = useState(getTenantConfig);
|
||||
const [session, setSession] = useState(() => loadSession() || freshSession(source));
|
||||
const [resumed] = useState(() => !!loadSession());
|
||||
|
||||
// Autosave on every change (debounced via microtask coalescing not needed at this scale).
|
||||
useEffect(() => {
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(session)); } catch { /* quota */ }
|
||||
}, [session]);
|
||||
|
||||
const logEvent = useCallback((eventType, payload = {}) => {
|
||||
setSession(s => ({
|
||||
...s,
|
||||
events: [...s.events, { eventType, payload, occurredAt: new Date().toISOString() }],
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setInput = useCallback((key, value) => {
|
||||
setSession(s => ({ ...s, inputs: { ...s.inputs, [key]: value } }));
|
||||
}, []);
|
||||
|
||||
const patchSession = useCallback((patch) => {
|
||||
setSession(s => ({ ...s, ...patch }));
|
||||
}, []);
|
||||
|
||||
const goToStep = useCallback((index) => {
|
||||
const clamped = Math.max(0, Math.min(STEP_FLOW.length - 1, index));
|
||||
setSession(s => ({ ...s, stepIndex: clamped }));
|
||||
}, []);
|
||||
|
||||
const next = useCallback(() => {
|
||||
setSession(s => {
|
||||
const target = Math.min(STEP_FLOW.length - 1, s.stepIndex + 1);
|
||||
const stepId = STEP_FLOW[s.stepIndex]?.id;
|
||||
return {
|
||||
...s,
|
||||
stepIndex: target,
|
||||
events: [...s.events, { eventType: 'step_complete', payload: { stepId }, occurredAt: new Date().toISOString() }],
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
const back = useCallback(() => {
|
||||
setSession(s => ({ ...s, stepIndex: Math.max(0, s.stepIndex - 1) }));
|
||||
}, []);
|
||||
|
||||
const complete = useCallback(() => {
|
||||
setSession(s => ({ ...s, status: 'completed', completedAt: new Date().toISOString() }));
|
||||
}, []);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
const fresh = freshSession(source);
|
||||
setSession(fresh);
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(fresh)); } catch { /* quota */ }
|
||||
}, [source]);
|
||||
|
||||
const value = {
|
||||
session,
|
||||
inputs: session.inputs,
|
||||
tenantConfig,
|
||||
resumed,
|
||||
currentStep: STEP_FLOW[session.stepIndex],
|
||||
stepIndex: session.stepIndex,
|
||||
totalSteps: STEP_FLOW.length,
|
||||
setInput,
|
||||
patchSession,
|
||||
logEvent,
|
||||
goToStep,
|
||||
next,
|
||||
back,
|
||||
complete,
|
||||
reset,
|
||||
};
|
||||
|
||||
return (
|
||||
<EstimateWizardContext.Provider value={value}>
|
||||
{children}
|
||||
</EstimateWizardContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useEstimateWizard() {
|
||||
const ctx = useContext(EstimateWizardContext);
|
||||
if (!ctx) throw new Error('useEstimateWizard must be used within EstimateWizardProvider');
|
||||
return ctx;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* ChoiceCards — single-select card group (spec §5: cards with 2–3 answer choices).
|
||||
* Used by the generic 'cards' step type. Manufacturer-neutral, plain language.
|
||||
*/
|
||||
import React from 'react';
|
||||
import * as Icons from 'lucide-react';
|
||||
|
||||
const ChoiceCards = ({ choices = [], value, onChange }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{choices.map((choice) => {
|
||||
const selected = value === choice.value;
|
||||
const Icon = choice.icon ? Icons[choice.icon] : null;
|
||||
return (
|
||||
<button
|
||||
key={choice.value}
|
||||
type="button"
|
||||
onClick={() => onChange(choice.value)}
|
||||
aria-pressed={selected}
|
||||
className={`
|
||||
group relative text-left rounded-2xl border p-4 transition-all duration-200
|
||||
focus:outline-none focus:ring-2 focus:ring-amber-500
|
||||
${selected
|
||||
? 'border-amber-500 bg-amber-50 dark:bg-amber-500/10 shadow-md shadow-amber-500/10'
|
||||
: 'border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 hover:border-amber-400 hover:-translate-y-0.5'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{Icon && (
|
||||
<Icon
|
||||
size={22}
|
||||
className={`mb-2 ${selected ? 'text-amber-500' : 'text-zinc-400 group-hover:text-amber-500'}`}
|
||||
/>
|
||||
)}
|
||||
<div className={`font-semibold ${selected ? 'text-amber-700 dark:text-amber-300' : 'text-zinc-900 dark:text-white'}`}>
|
||||
{choice.label}
|
||||
</div>
|
||||
{choice.desc && (
|
||||
<div className="text-sm text-zinc-500 dark:text-zinc-400 mt-0.5">{choice.desc}</div>
|
||||
)}
|
||||
{selected && (
|
||||
<Icons.CheckCircle2 size={18} className="absolute top-3 right-3 text-amber-500" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChoiceCards;
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* WizardProgress — slim progress bar + step counter (spec §4: "keep the customer moving").
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
const WizardProgress = ({ stepIndex, totalSteps }) => {
|
||||
const pct = Math.round(((stepIndex + 1) / totalSteps) * 100);
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-semibold tracking-wider uppercase text-zinc-400">
|
||||
Step {stepIndex + 1} of {totalSteps}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-amber-500">{pct}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full rounded-full bg-zinc-200 dark:bg-zinc-800 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-amber-400 to-orange-500 transition-all duration-500 ease-out"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WizardProgress;
|
||||
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* WizardShell — the one-question-per-screen engine (spec §4, §5, §17 EPIC A2).
|
||||
*
|
||||
* Responsibilities:
|
||||
* - render the current step (custom component | cards | slider)
|
||||
* - gate Continue on required answers; allow explicit Skip where permitted
|
||||
* - Back/Continue navigation, completion on the final step
|
||||
* - mobile-first single-CTA layout (spec §4: "one primary CTA per screen")
|
||||
*/
|
||||
import React from 'react';
|
||||
import { ArrowLeft, ArrowRight, RotateCcw } from 'lucide-react';
|
||||
import { useEstimateWizard } from '../EstimateWizardContext';
|
||||
import WizardProgress from './WizardProgress';
|
||||
import ChoiceCards from './ChoiceCards';
|
||||
import StartStep from './steps/StartStep';
|
||||
import AddressStep from './steps/AddressStep';
|
||||
import PremiumStep from './steps/PremiumStep';
|
||||
import PlaceholderStep from './steps/PlaceholderStep';
|
||||
|
||||
// Step registry — later phases swap PlaceholderStep entries for real components.
|
||||
const STEP_COMPONENTS = {
|
||||
start: StartStep,
|
||||
address: AddressStep,
|
||||
premium: PremiumStep,
|
||||
hailRisk: (props) => <PlaceholderStep stepId="hailRisk" {...props} />,
|
||||
options: (props) => <PlaceholderStep stepId="options" {...props} />,
|
||||
addons: (props) => <PlaceholderStep stepId="addons" {...props} />,
|
||||
recommendation: (props) => <PlaceholderStep stepId="recommendation" {...props} />,
|
||||
report: (props) => <PlaceholderStep stepId="report" {...props} />,
|
||||
};
|
||||
|
||||
// Validation per step: returns true when the user may advance.
|
||||
function canAdvance(step, inputs) {
|
||||
if (step.id === 'start') return inputs.consent && inputs.name?.trim() && inputs.address?.trim();
|
||||
if (step.id === 'address') return !!inputs.address?.trim();
|
||||
if (step.type === 'cards' && step.required) return inputs[step.inputKey] != null;
|
||||
if (step.type === 'slider' && step.required) return inputs[step.inputKey] != null;
|
||||
return true;
|
||||
}
|
||||
|
||||
const SliderStep = ({ step }) => {
|
||||
const { inputs, setInput } = useEstimateWizard();
|
||||
const val = inputs[step.inputKey] ?? step.min;
|
||||
return (
|
||||
<div className="space-y-6 pt-2">
|
||||
<div className="text-center">
|
||||
<span className="text-5xl font-bold text-amber-500">{val}</span>
|
||||
<span className="text-lg text-zinc-400 ml-1">
|
||||
{val >= step.max ? `+ ${step.unit}` : step.unit}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={step.min}
|
||||
max={step.max}
|
||||
step={step.step}
|
||||
value={val}
|
||||
onChange={(e) => setInput(step.inputKey, Number(e.target.value))}
|
||||
className="w-full accent-amber-500"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-zinc-400">
|
||||
<span>{step.min} {step.unit}</span>
|
||||
<span>{Math.round((step.min + step.max) / 2)} {step.unit}</span>
|
||||
<span>{step.maxLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WizardShell = () => {
|
||||
const {
|
||||
currentStep: step, stepIndex, totalSteps, inputs,
|
||||
setInput, next, back, complete, reset, resumed, session,
|
||||
} = useEstimateWizard();
|
||||
|
||||
const isLast = stepIndex === totalSteps - 1;
|
||||
const advance = canAdvance(step, inputs);
|
||||
|
||||
const renderBody = () => {
|
||||
if (step.type === 'cards') {
|
||||
return (
|
||||
<ChoiceCards
|
||||
choices={step.choices}
|
||||
value={inputs[step.inputKey]}
|
||||
onChange={(v) => setInput(step.inputKey, v)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (step.type === 'slider') return <SliderStep step={step} />;
|
||||
const Comp = STEP_COMPONENTS[step.id];
|
||||
return Comp ? <Comp /> : null;
|
||||
};
|
||||
|
||||
const handleContinue = () => {
|
||||
if (isLast) { complete(); return; }
|
||||
next();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-zinc-50 dark:bg-[#09090b] flex flex-col">
|
||||
{/* Top bar */}
|
||||
<header className="w-full border-b border-zinc-200 dark:border-white/5 bg-white/70 dark:bg-zinc-900/60 backdrop-blur-md">
|
||||
<div className="max-w-2xl mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-bold tracking-tight text-zinc-900 dark:text-white">
|
||||
LynkedUp<span className="text-amber-500">Pro</span>
|
||||
<span className="ml-2 text-xs font-medium text-zinc-400">Roof Options</span>
|
||||
</span>
|
||||
<button
|
||||
onClick={reset}
|
||||
title="Start over"
|
||||
className="text-xs text-zinc-400 hover:text-amber-500 flex items-center gap-1"
|
||||
>
|
||||
<RotateCcw size={13} /> Start over
|
||||
</button>
|
||||
</div>
|
||||
<WizardProgress stepIndex={stepIndex} totalSteps={totalSteps} />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Resume hint */}
|
||||
{resumed && session.status !== 'completed' && stepIndex === 0 && (
|
||||
<div className="max-w-2xl mx-auto w-full px-4 pt-3">
|
||||
<div className="rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
|
||||
Welcome back — we saved your progress. You can continue or start over.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
<main className="flex-1 w-full">
|
||||
<div className="max-w-2xl mx-auto px-4 py-8">
|
||||
{/* key forces remount per step → re-triggers the enter animation */}
|
||||
<div key={step.id} className="animate-in fade-in slide-in-from-right-4 duration-300">
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-zinc-900 dark:text-white tracking-tight">
|
||||
{step.title}
|
||||
</h1>
|
||||
{step.subtitle && (
|
||||
<p className="text-zinc-500 dark:text-zinc-400 mt-1.5 mb-6">{step.subtitle}</p>
|
||||
)}
|
||||
<div className="mt-6">{renderBody()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer nav — one primary CTA */}
|
||||
<footer className="sticky bottom-0 w-full border-t border-zinc-200 dark:border-white/5 bg-white/80 dark:bg-zinc-900/70 backdrop-blur-md">
|
||||
<div className="max-w-2xl mx-auto px-4 py-3 flex items-center gap-3">
|
||||
{stepIndex > 0 && (
|
||||
<button
|
||||
onClick={back}
|
||||
className="rounded-xl border border-zinc-200 dark:border-white/10 px-4 py-2.5 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:border-amber-400 flex items-center gap-1.5"
|
||||
>
|
||||
<ArrowLeft size={16} /> Back
|
||||
</button>
|
||||
)}
|
||||
|
||||
{step.skippable && !isLast && (
|
||||
<button
|
||||
onClick={next}
|
||||
className="text-sm font-medium text-zinc-400 hover:text-amber-500 px-2"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleContinue}
|
||||
disabled={!advance}
|
||||
className={`ml-auto rounded-xl px-6 py-2.5 text-sm font-semibold flex items-center gap-1.5 transition-all
|
||||
${advance
|
||||
? 'bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-lg shadow-amber-500/25 hover:shadow-amber-500/40'
|
||||
: 'bg-zinc-200 dark:bg-zinc-800 text-zinc-400 cursor-not-allowed'}`}
|
||||
>
|
||||
{isLast ? 'Finish' : stepIndex === 0 ? 'Start estimate' : 'Continue'}
|
||||
{!isLast && <ArrowRight size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WizardShell;
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* AddressStep — Screen 2 "Property validation" (spec §4).
|
||||
* Phase 1: confirm/edit the address captured at Start.
|
||||
* Phase 2 will add geocoding (lat/lon, county, timezone) + a Leaflet map preview
|
||||
* and populate property_profiles via /api/properties/validate-address.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { MapPin, Map as MapIcon } from 'lucide-react';
|
||||
import { useEstimateWizard } from '../../EstimateWizardContext';
|
||||
|
||||
const AddressStep = () => {
|
||||
const { inputs, setInput } = useEstimateWizard();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5 flex items-center gap-1.5">
|
||||
<MapPin size={15} className="text-amber-500" /> Confirm your property address
|
||||
</span>
|
||||
<input
|
||||
className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 px-3.5 py-2.5 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500"
|
||||
placeholder="Street, city, state, ZIP"
|
||||
value={inputs.address}
|
||||
onChange={(e) => setInput('address', e.target.value)}
|
||||
autoComplete="street-address"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* Map preview placeholder — Leaflet + geocode wired in Phase 2 */}
|
||||
<div className="rounded-2xl border border-dashed border-zinc-300 dark:border-white/10 bg-zinc-50 dark:bg-white/5 p-6 flex flex-col items-center justify-center text-center">
|
||||
<MapIcon size={28} className="text-zinc-400 mb-2" />
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
We’ll confirm the location on a map and pull your area’s historical storm data in the next step.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-zinc-400">
|
||||
Final roof measurements are validated during your inspection — nothing here is binding.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressStep;
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* PlaceholderStep — temporary stand-in for steps delivered in later phases.
|
||||
* Keeps the full §4 journey navigable end-to-end during Phase 1 so the flow,
|
||||
* autosave, and progress can be demoed. Each phase replaces its entry in the
|
||||
* WizardShell step registry with the real component.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Hammer } from 'lucide-react';
|
||||
|
||||
const PHASE_BY_STEP = {
|
||||
hailRisk: 'Phase 2 — Storm/Hail Risk Intelligence (§6)',
|
||||
options: 'Phase 3 — Good / Better / Best options (§7)',
|
||||
addons: 'Phase 3 — Add-ons & upgrades (§8)',
|
||||
recommendation: 'Phase 4 — AI recommendation + 10-year value (§9, §10)',
|
||||
report: 'Phase 5 — Customer report, CRM handoff (§11)',
|
||||
};
|
||||
|
||||
const PlaceholderStep = ({ stepId }) => (
|
||||
<div className="rounded-2xl border border-dashed border-zinc-300 dark:border-white/10 bg-zinc-50 dark:bg-white/5 p-8 flex flex-col items-center justify-center text-center">
|
||||
<Hammer size={30} className="text-amber-500 mb-3" />
|
||||
<p className="font-semibold text-zinc-700 dark:text-zinc-200">Coming next</p>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
{PHASE_BY_STEP[stepId] || 'This screen is delivered in a later phase.'}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-400 mt-3">
|
||||
The journey, autosave, and progress are fully wired — Continue to walk the full flow.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default PlaceholderStep;
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* PremiumStep — annual insurance premium (spec §5).
|
||||
* Optional: amount / "I don't know" / skip. Enables the 10-year savings scenario
|
||||
* (Phase 4). Never required — skipping must not block the wizard (spec §18).
|
||||
*/
|
||||
import React from 'react';
|
||||
import { DollarSign } from 'lucide-react';
|
||||
import { useEstimateWizard } from '../../EstimateWizardContext';
|
||||
|
||||
const PremiumStep = () => {
|
||||
const { inputs, setInput } = useEstimateWizard();
|
||||
const unknown = inputs.premiumUnknown;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className={`transition-opacity ${unknown ? 'opacity-40 pointer-events-none' : ''}`}>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5 flex items-center gap-1.5">
|
||||
<DollarSign size={15} className="text-amber-500" /> Approximate annual premium
|
||||
</span>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-zinc-400">$</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
inputMode="numeric"
|
||||
className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 pl-7 pr-3.5 py-2.5 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500"
|
||||
placeholder="e.g. 4,000"
|
||||
value={inputs.premiumAmount ?? ''}
|
||||
onChange={(e) => setInput('premiumAmount', e.target.value === '' ? null : Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const nextUnknown = !unknown;
|
||||
setInput('premiumUnknown', nextUnknown);
|
||||
if (nextUnknown) setInput('premiumAmount', null);
|
||||
}}
|
||||
className={`w-full rounded-xl border px-3 py-2.5 text-sm font-medium transition-all
|
||||
${unknown
|
||||
? 'border-amber-500 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300'
|
||||
: 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-amber-400'}`}
|
||||
>
|
||||
I don’t know my premium
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-zinc-400">
|
||||
This is only used to illustrate a potential savings scenario. Any savings must be confirmed with your
|
||||
insurance carrier — we never guarantee a discount.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PremiumStep;
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* StartStep — Screen 1 "Simple Start" (spec §4 / §5).
|
||||
* Captures name, property address, mobile, email, contact method + consent.
|
||||
* Consent is required before proceeding (spec §15 Privacy / §3 compliance).
|
||||
*/
|
||||
import React from 'react';
|
||||
import { User, MapPin, Phone, Mail } from 'lucide-react';
|
||||
import { useEstimateWizard } from '../../EstimateWizardContext';
|
||||
|
||||
const Field = ({ icon: Icon, label, children }) => (
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5 flex items-center gap-1.5">
|
||||
{Icon && <Icon size={15} className="text-amber-500" />} {label}
|
||||
</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
|
||||
const inputCls =
|
||||
'w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 px-3.5 py-2.5 ' +
|
||||
'text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500';
|
||||
|
||||
const StartStep = () => {
|
||||
const { inputs, setInput } = useEstimateWizard();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Field icon={User} label="Name">
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="First and last name"
|
||||
value={inputs.name}
|
||||
onChange={(e) => setInput('name', e.target.value)}
|
||||
autoComplete="name"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field icon={MapPin} label="Property address">
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="Street, city, state, ZIP"
|
||||
value={inputs.address}
|
||||
onChange={(e) => setInput('address', e.target.value)}
|
||||
autoComplete="street-address"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Field icon={Phone} label="Mobile number">
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="(555) 123-4567"
|
||||
value={inputs.phone}
|
||||
onChange={(e) => setInput('phone', e.target.value)}
|
||||
autoComplete="tel"
|
||||
inputMode="tel"
|
||||
/>
|
||||
</Field>
|
||||
<Field icon={Mail} label="Email">
|
||||
<input
|
||||
className={inputCls}
|
||||
placeholder="you@email.com"
|
||||
value={inputs.email}
|
||||
onChange={(e) => setInput('email', e.target.value)}
|
||||
autoComplete="email"
|
||||
inputMode="email"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5 block">Best contact method?</span>
|
||||
<div className="flex gap-2">
|
||||
{['text', 'email', 'phone'].map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
type="button"
|
||||
onClick={() => setInput('contactMethod', m)}
|
||||
className={`flex-1 rounded-xl border px-3 py-2 text-sm font-medium capitalize transition-all
|
||||
${inputs.contactMethod === m
|
||||
? 'border-amber-500 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300'
|
||||
: 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-amber-400'}`}
|
||||
>
|
||||
{m}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-start gap-2.5 rounded-xl bg-zinc-50 dark:bg-white/5 p-3.5 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-0.5 h-4 w-4 accent-amber-500"
|
||||
checked={inputs.consent}
|
||||
onChange={(e) => setInput('consent', e.target.checked)}
|
||||
/>
|
||||
<span className="text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed">
|
||||
I agree to be contacted about my roof estimate and understand my address and any insurance
|
||||
details I provide are used to generate this educational report. This is not a binding quote.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StartStep;
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* questions.js — Wizard question architecture (spec §5).
|
||||
*
|
||||
* Every question must improve pricing accuracy, recommendation quality, or sales
|
||||
* follow-up (spec §5: "Do not ask curiosity questions"). Each entry maps to a key
|
||||
* stored on estimateInputs and is consumed by the scoring engine (Phase 4).
|
||||
*
|
||||
* The ordered STEP
|
||||
* _FLOW (below) defines the one-question-per-screen journey
|
||||
* (spec §4). Some "screens" are composite (Start collects contact fields) — these
|
||||
* use a dedicated component instead of the generic question renderer.
|
||||
*/
|
||||
|
||||
// Reusable answer choice sets
|
||||
export const ISSUE_CHOICES = [
|
||||
{ value: 'aging', label: 'Aging roof', desc: 'General wear, nearing end of life', icon: 'Clock', triggers: ['old_roof'] },
|
||||
{ value: 'leak', label: 'Leak or active issue', desc: 'Water intrusion or visible damage', icon: 'Droplets', triggers: ['leak'] },
|
||||
{ value: 'storm', label: 'Storm concern', desc: 'Possible hail or wind damage', icon: 'CloudLightning', triggers: [] },
|
||||
];
|
||||
|
||||
export const OWNERSHIP_CHOICES = [
|
||||
{ value: '1-5', label: '1–5 years', desc: 'May sell soon', score: 1 },
|
||||
{ value: '6-15', label: '6–15 years', desc: 'Medium-term', score: 2 },
|
||||
{ value: '16+', label: '16+ years / forever', desc: 'Long-term home', score: 3 },
|
||||
];
|
||||
|
||||
export const BUDGET_CHOICES = [
|
||||
{ value: 'lowest', label: 'Lowest upfront', desc: 'Minimize initial cost' },
|
||||
{ value: 'balanced', label: 'Balanced', desc: 'Value for the money' },
|
||||
{ value: 'longterm', label: 'Long-term protection', desc: 'Best lifecycle value' },
|
||||
];
|
||||
|
||||
export const HOA_CHOICES = [
|
||||
{ value: 'no', label: 'No' },
|
||||
{ value: 'yes', label: 'Yes' },
|
||||
{ value: 'unsure', label: 'Not sure' },
|
||||
];
|
||||
|
||||
export const ATTIC_CHOICES = [
|
||||
{ value: 'attic_hot', label: 'Hot attic', triggers: ['attic_hot'] },
|
||||
{ value: 'energy_bills', label: 'High energy bills', triggers: ['energy_bills'] },
|
||||
{ value: 'none', label: 'Not sure', triggers: [] },
|
||||
];
|
||||
|
||||
export const PESTS_CHOICES = [
|
||||
{ value: 'yes', label: 'Yes', triggers: ['pests'] },
|
||||
{ value: 'no', label: 'No', triggers: [] },
|
||||
{ value: 'unsure', label: 'Not sure', triggers: [] },
|
||||
];
|
||||
|
||||
export const FINANCING_CHOICES = [
|
||||
{ value: 'yes', label: 'Yes' },
|
||||
{ value: 'maybe', label: 'Maybe' },
|
||||
{ value: 'no', label: 'No' },
|
||||
];
|
||||
|
||||
/**
|
||||
* STEP_FLOW — ordered screens. `type` selects the renderer in WizardShell.
|
||||
* - 'component' → custom step component (key matches steps/ registry)
|
||||
* - 'cards' → single-select card group bound to `inputKey`
|
||||
* - 'slider' → numeric slider bound to `inputKey`
|
||||
* `required` gates the Continue button; `skippable` allows an explicit Skip.
|
||||
*/
|
||||
export const STEP_FLOW = [
|
||||
{ id: 'start', type: 'component', title: 'Build your roofing estimate in 3 minutes',
|
||||
subtitle: 'No pressure. Your report will show Good, Better, and Best options based on your home and goals.' },
|
||||
|
||||
{ id: 'address', type: 'component', title: 'What property is this for?',
|
||||
subtitle: "We'll use this to pull local storm history. We validate measurements later during inspection." },
|
||||
|
||||
{ id: 'roofAge', type: 'slider', inputKey: 'roofAgeYears', title: 'How old is your roof?',
|
||||
subtitle: 'Slide to estimate roof age. We will validate later during inspection.',
|
||||
min: 1, max: 20, step: 1, unit: 'yr', maxLabel: '20+ yrs', required: true },
|
||||
|
||||
{ id: 'issue', type: 'cards', inputKey: 'issueType', title: 'What is happening right now?',
|
||||
subtitle: 'This helps us tailor your options.', choices: ISSUE_CHOICES, required: true },
|
||||
|
||||
{ id: 'ownership', type: 'cards', inputKey: 'ownershipHorizon', title: 'How long do you plan to live here?',
|
||||
subtitle: 'This decides whether lowest upfront or long-term value matters more.', choices: OWNERSHIP_CHOICES, required: true },
|
||||
|
||||
{ id: 'premium', type: 'component', title: 'Annual insurance premium?',
|
||||
subtitle: 'Optional — it lets us estimate potential 10-year savings scenarios.' },
|
||||
|
||||
{ id: 'hailRisk', type: 'component', title: 'Your area’s historical hail exposure',
|
||||
subtitle: 'A historical risk estimate for your area — not a forecast.' },
|
||||
|
||||
{ id: 'budget', type: 'cards', inputKey: 'budgetPreference', title: 'What matters most for budget?',
|
||||
subtitle: 'So we recommend the right option for you — not the most expensive one.', choices: BUDGET_CHOICES, required: true },
|
||||
|
||||
{ id: 'hoa', type: 'cards', inputKey: 'hoaConstraints', title: 'HOA or design constraints?',
|
||||
subtitle: 'Some neighborhoods require approval for certain materials.', choices: HOA_CHOICES, skippable: true },
|
||||
|
||||
{ id: 'attic', type: 'cards', inputKey: 'atticConcern', title: 'Attic comfort or ventilation issues?',
|
||||
subtitle: 'Helps us suggest ventilation upgrades if useful.', choices: ATTIC_CHOICES, skippable: true },
|
||||
|
||||
{ id: 'pests', type: 'cards', inputKey: 'pestConcern', title: 'Concerned about rodents or pests?',
|
||||
subtitle: 'Helps us suggest critter-guard protection if useful.', choices: PESTS_CHOICES, skippable: true },
|
||||
|
||||
{ id: 'financing', type: 'cards', inputKey: 'financingInterest', title: 'Interested in financing?',
|
||||
subtitle: 'We can prepare financing options for your appointment.', choices: FINANCING_CHOICES, skippable: true },
|
||||
|
||||
{ id: 'options', type: 'component', title: 'Your Good / Better / Best options',
|
||||
subtitle: 'All three options, side by side. We highlight a best fit — you stay in control.' },
|
||||
|
||||
{ id: 'addons', type: 'component', title: 'Optional upgrades',
|
||||
subtitle: 'Add or remove anything. Your rep can revise after inspection.' },
|
||||
|
||||
{ id: 'recommendation', type: 'component', title: 'Our recommendation',
|
||||
subtitle: 'Here’s the best fit for your home and goals, and exactly why.' },
|
||||
|
||||
{ id: 'report', type: 'component', title: 'Your roof options report',
|
||||
subtitle: 'Email, print, or download — then book your free inspection.' },
|
||||
];
|
||||
|
||||
export const TOTAL_STEPS = STEP_FLOW.length;
|
||||
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* tenantConfig.js — Estimate Wizard tenant-configurable defaults.
|
||||
*
|
||||
* Spec §14 (Admin Controls) requires that pricing, discounts, warranty text,
|
||||
* package scope, service-life, and scoring weights are NOT hard-coded — they are
|
||||
* tenant-controlled. For the demo these defaults live here and can be overridden
|
||||
* by the admin page (Phase 5). Nothing customer-facing should bypass this object.
|
||||
*
|
||||
* Manufacturer-neutral by design (spec §3, §15): packages are generic categories,
|
||||
* internal SKU/vendor names are intentionally absent from customer-facing fields.
|
||||
*/
|
||||
|
||||
// ── Good / Better / Best packages (spec §7) ──────────────────────────────────
|
||||
export const DEFAULT_PACKAGES = [
|
||||
{
|
||||
type: 'GOOD',
|
||||
name: 'Standard Architectural',
|
||||
category: 'Architectural / laminate shingle system',
|
||||
materialClass: 'standard',
|
||||
warrantyLabel: '30-year material warranty category',
|
||||
position: 'Lowest upfront investment',
|
||||
fit: 'Shorter ownership horizon, limited budget, lower hail exposure, or preparing to sell soon.',
|
||||
// price rule: per-square installed price (demo). Real pricing engine lives in admin.
|
||||
pricePerSquare: 420,
|
||||
serviceLifeYears: 28, // tenant-configurable (e.g. 25–30)
|
||||
insuranceDiscountPct: 0, // Good is not impact-rated → no assumed discount
|
||||
hailResistance: 'Standard',
|
||||
scope: ['Architectural laminate shingles', 'Code-required underlayment', 'Standard hip/ridge', 'Standard accessories'],
|
||||
accent: 'zinc',
|
||||
},
|
||||
{
|
||||
type: 'BETTER',
|
||||
name: 'Class 4 Impact-Rated',
|
||||
category: 'Class 4 impact-rated architectural shingle system',
|
||||
materialClass: 'impact-rated',
|
||||
warrantyLabel: 'Enhanced manufacturer warranty category',
|
||||
position: 'Balanced protection and budget',
|
||||
fit: 'Medium-to-long ownership, meaningful hail exposure, wants stronger protection without premium-system cost.',
|
||||
pricePerSquare: 565,
|
||||
serviceLifeYears: 35, // tenant-configurable (e.g. 30–40)
|
||||
insuranceDiscountPct: 15, // illustrative; "ask your carrier to confirm"
|
||||
hailResistance: 'Higher',
|
||||
scope: ['Class 4 impact-rated shingles', 'Upgraded underlayment', 'Standard hip/ridge', 'Improved hail resistance'],
|
||||
accent: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'BEST',
|
||||
name: 'Premium Long-Life System',
|
||||
category: 'Composite / synthetic or stone-coated steel category',
|
||||
materialClass: 'premium',
|
||||
warrantyLabel: 'Premium long-life warranty category',
|
||||
position: 'Highest long-term protection',
|
||||
fit: 'Long ownership, high hail exposure, high premium, wants fewer future roof cycles and strongest curb appeal.',
|
||||
pricePerSquare: 950,
|
||||
serviceLifeYears: 50, // tenant-configurable (e.g. 50+)
|
||||
insuranceDiscountPct: 20, // illustrative; "ask your carrier to confirm"
|
||||
hailResistance: 'Highest',
|
||||
scope: ['Composite/synthetic or stone-coated steel', 'Premium underlayment', 'Upgraded accessories', 'Highest durability positioning'],
|
||||
accent: 'amber',
|
||||
},
|
||||
];
|
||||
|
||||
// ── Add-ons (spec §8) — plain-language, never fear-based ──────────────────────
|
||||
export const DEFAULT_ADDONS = [
|
||||
{
|
||||
id: 'hip-ridge',
|
||||
name: 'High-profile hip & ridge',
|
||||
value: 'Improves the finished look and strengthens the ridge-line appearance.',
|
||||
price: 480,
|
||||
compatibility: ['GOOD', 'BETTER', 'BEST'],
|
||||
recommendedOn: ['BEST'],
|
||||
triggerKeys: ['aesthetics'],
|
||||
},
|
||||
{
|
||||
id: 'solar-vents',
|
||||
name: 'Solar attic vents',
|
||||
value: 'Helps move hot attic air and may improve comfort and roof-system health.',
|
||||
price: 650,
|
||||
compatibility: ['GOOD', 'BETTER', 'BEST'],
|
||||
recommendedOn: [],
|
||||
triggerKeys: ['attic_hot', 'energy_bills'],
|
||||
},
|
||||
{
|
||||
id: 'gutter-guards',
|
||||
name: 'Gutter guards',
|
||||
value: 'Reduces gutter debris buildup and maintenance frequency.',
|
||||
price: 900,
|
||||
compatibility: ['GOOD', 'BETTER', 'BEST'],
|
||||
recommendedOn: [],
|
||||
triggerKeys: ['canopy'],
|
||||
},
|
||||
{
|
||||
id: 'critter-guards',
|
||||
name: 'Critter guards',
|
||||
value: 'Helps block common rodent and small-animal roofline entry points.',
|
||||
price: 350,
|
||||
compatibility: ['GOOD', 'BETTER', 'BEST'],
|
||||
recommendedOn: [],
|
||||
triggerKeys: ['pests'],
|
||||
},
|
||||
{
|
||||
id: 'upgraded-flashing',
|
||||
name: 'Upgraded flashing / penetrations',
|
||||
value: 'Improves protection around common leak points.',
|
||||
price: 520,
|
||||
compatibility: ['GOOD', 'BETTER', 'BEST'],
|
||||
recommendedOn: ['BEST'],
|
||||
triggerKeys: ['leak', 'old_roof', 'complex'],
|
||||
},
|
||||
{
|
||||
id: 'enhanced-underlayment',
|
||||
name: 'Enhanced underlayment / ice-water zones',
|
||||
value: 'Adds protection in vulnerable valleys, eaves, and penetrations.',
|
||||
price: 700,
|
||||
compatibility: ['GOOD', 'BETTER', 'BEST'],
|
||||
recommendedOn: [],
|
||||
triggerKeys: ['complex', 'leak'],
|
||||
},
|
||||
];
|
||||
|
||||
// ── Scoring weights (spec §9) — deterministic, tenant-adjustable ──────────────
|
||||
export const DEFAULT_SCORING_WEIGHTS = {
|
||||
ownershipHorizon: 0.25,
|
||||
hailRisk: 0.25,
|
||||
insuranceSavings: 0.20,
|
||||
budgetPreference: 0.15,
|
||||
roofAge: 0.10,
|
||||
aesthetics: 0.05,
|
||||
};
|
||||
|
||||
// ── Storm-risk settings (spec §6, §14) ────────────────────────────────────────
|
||||
export const DEFAULT_STORM_SETTINGS = {
|
||||
windowYears: 20, // 10 fallback / 30 for smoother trends
|
||||
radiusMiles: 10,
|
||||
minHailSizeInches: 0.75,
|
||||
dedupeWindowHours: 6,
|
||||
};
|
||||
|
||||
// ── Pricing engine knobs (spec §14) ───────────────────────────────────────────
|
||||
export const DEFAULT_PRICING = {
|
||||
wasteFactor: 1.05,
|
||||
minJobPrice: 6500,
|
||||
pitchFactor: 1.0, // multiplied per pitch/stories/complexity in admin
|
||||
taxPlaceholderPct: 0,
|
||||
permitPlaceholder: 0,
|
||||
};
|
||||
|
||||
// ── Insurance discount scenarios (spec §10/§14) — low/base/high ───────────────
|
||||
export const DEFAULT_DISCOUNT_SCENARIOS = {
|
||||
GOOD: { low: 0, base: 0, high: 0 },
|
||||
BETTER: { low: 10, base: 15, high: 18 },
|
||||
BEST: { low: 15, base: 18, high: 22 },
|
||||
};
|
||||
|
||||
// ── Report branding (spec §14) ────────────────────────────────────────────────
|
||||
export const DEFAULT_BRANDING = {
|
||||
company: 'LynkedUp Pro',
|
||||
phone: '866-259-6533',
|
||||
email: 'estimates@lynkeduppro.com',
|
||||
serviceArea: 'Texas & surrounding regions',
|
||||
primaryColor: '#fda913',
|
||||
legalFooter: 'Preliminary estimate. Not a binding quote.',
|
||||
};
|
||||
|
||||
// ── Legal / disclaimer (spec §15) — verbatim required template ────────────────
|
||||
export const DISCLAIMER_TEMPLATE =
|
||||
'This report is an educational, preliminary estimate based on the information provided and available ' +
|
||||
'property/storm data. Final pricing requires property measurement and contractor inspection. Insurance ' +
|
||||
'premium savings are illustrative only and must be confirmed with your insurance carrier or licensed ' +
|
||||
'insurance professional. Historical storm information is not a forecast or guarantee.';
|
||||
|
||||
export const TENANT_CONFIG_VERSION = 'tenant-config-v1';
|
||||
|
||||
export function getTenantConfig() {
|
||||
// Phase 5 admin page will override these from localStorage / mock store.
|
||||
return {
|
||||
version: TENANT_CONFIG_VERSION,
|
||||
packages: DEFAULT_PACKAGES,
|
||||
addons: DEFAULT_ADDONS,
|
||||
scoringWeights: DEFAULT_SCORING_WEIGHTS,
|
||||
stormSettings: DEFAULT_STORM_SETTINGS,
|
||||
pricing: DEFAULT_PRICING,
|
||||
discountScenarios: DEFAULT_DISCOUNT_SCENARIOS,
|
||||
branding: DEFAULT_BRANDING,
|
||||
disclaimer: DISCLAIMER_TEMPLATE,
|
||||
conservativeMode: false, // §18: hides customer-facing savings claims when true
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user