// configurator-2026.jsx — Stepper 6 étapes + composants steps + live preview // Source design : design-2026-handoff/iteration-02 à iteration-08 // Calculateur : window.RAYCAST_CALC_2026 (validé 167/167 tests) // Catalogue : window.RAYCOM_DATA_2026 // // Exposé : window.Configurator2026 (composant React) (function () { const { useState, useEffect, useMemo } = React; // ============================================================================ // INITIAL STATE — Phase 2 (avec nouveaux champs : HQ accounts, panel_capacity, scope, descriptions) // ============================================================================ function buildInitialState2026() { return { data_version: "2026", project_type: "solaire_batterie", building_type: "residentiel_unifam", client: { name: "", phone: "", phone_2: "", // Phase 2 : 2e téléphone (cell + maison) email: "", address_civic: "", address_street: "", address_city: "", address_postal: "", region_id: null, zone_key: null, orientation: "S", // Profil énergétique (variant A solaire/batt) hq_tariff: "D", bill_input_mode: "kwh", annual_hq_kwh: 0, annual_hq_bill: 0, ev_km_per_year: 0, ev_kwh_per_100km: 18, nb_ve: 0, // Phase 2 : 0/1/2 véhicules électriques hq_account_number: "", // Phase 2 : n° client HQ (9 chiffres, admissibilité LogisVert) hq_meter_number: "", // Phase 2 : n° compteur hq_contract_number: "", // Phase 2 : n° contrat (commercial) // Profil borne (variant B) panel_capacity_a: 200, // Phase 2 : 60/100/200/300/400 A // Financement + commercial financing_plan_id: "comptant", source: "Référence client" }, solar: { // P8-B : départ à 0 $ — RIEN de configuré au début (total = 0 jusqu'à l'étape 4) panneaux: 0, // 0 = pas de solaire encore → total 0$ étapes 1-3 pitch_key: "standard", floors: 2, roof_type: "bardeau", battery_brand: "none", // aucune batterie au départ → total 0$ battery_subsystem: null, battery_bundle_id: null, with_dim: false, with_v2x: false, backup_mode: "none", // none | partial | whole_home onds: 1, // Solo=1 · Duo=2 · Trio=3 // V3-E : Tout-en-un (project_type="batterie") — config spécifique sans solaire pw_count: 1, // Tesla : 1-3 Powerwall 3 dc_expansions: 0, // Tesla : DC Expansions par PW (0-3) sig_battery_kwh: 9, // Sigenergy : 6 ou 9 kWh par batterie sig_battery_qty: 2, // Sigenergy : 1-8 batteries _configured: false // P8-B : devient true quand le vendeur configure l'étape 4 }, borne: { qty: 0, modele_key: "tesla_gen3_nacs", client_supplied: false, // V3 : borne fournie par client (oui/non) // Legacy mode (slider_key + cable_m unique) — gardé pour rétrocompat slider_key: "B_garage_pvc", cable_m: 5, // V3 : multi-cables combinables (en mètres par type) cables: { A_int_nmd: 0, // NMD90 6/2 intérieur B_garage_pvc: 0, // PVC 3/4" + 3× #6 RW90 garage C_garage_teck: 0, // TECK90 6/3 garage (clippé surface) D_ext_pvc: 0, // PVC 3/4" + 3× #6 RW90 extérieur mural E_ext_teck: 0, // TECK90 6/3 extérieur F_int_emt: 0 // EMT 3/4" + 3× #6 RW90 intérieur conduit }, dcc_code: null, // OPT-DCC-12 / OPT-DCC-10-40A / etc. (exclusif avec DSDC) dsdc: false // DSDC Tesla (exclusif avec DCC) }, options_electriques: [], services: [], // Pattern descriptions (iter 11) description_overrides: {}, scope_text: "", scope_locked: false, scope_generated_at: null, // Phase 2 : statut décision soumission decision_status: "draft", // draft | accepted | thinking | refused decided_at: null }; } // ============================================================================ // ÉTAPES DÉFINITION — V3 (mai 2026) : 6 étapes solaire/batt, 5 étapes borne // ============================================================================ // Architecture V3 : // - Solaire / Solaire+Batt / Batterie (tout-en-un) → 6 étapes // - Borne seule → 5 étapes (saute "Profil énergétique" — pas pertinent pour borne) // // Internal idx 1-6 inchangé (mêmes composants). Le stepper masque l'étape 3 // ET les numéros affichés se recompactent (1-2-3-4-5 pour borne). const STEPS = [ { idx: 1, key: "type", title: "Type de projet", subtitle: "Solaire · borne · batterie", showForBorne: true }, { idx: 2, key: "profil_client", title: "Coordonnées client", subtitle: "Coords · adresse · zone", showForBorne: true }, { idx: 3, key: "profil_energie",title: "Profil énergétique", subtitle: "HQ · conso · VÉ", showForBorne: false }, // Sautée pour borne { idx: 4, key: "config", title: "Configuration", subtitle: "Système · borne", showForBorne: true }, { idx: 5, key: "options", title: "Options techniques", subtitle: "Câblage · branchements", showForBorne: true }, { idx: 6, key: "resume", title: "Résumé client", subtitle: "Décision", showForBorne: true } ]; // Helpers V3 : filtre les étapes visibles + renumérotation display function getVisibleSteps(projectType) { const isBorne = projectType === "borne"; return STEPS.filter(s => !isBorne || s.showForBorne).map((s, displayIdx) => ({ ...s, displayIdx: displayIdx + 1, // 1-5 pour borne, 1-6 pour autres totalSteps: isBorne ? 5 : 6 })); } // Step 7 (SubmissionCompletion) géré hors stepper (post-décision) // ============================================================================ // STEPPER COMPONENT — V5 (variant A : barre de progression + labels segmentés) // ============================================================================ function Stepper({ currentStep, completedSteps, onStepClick, calc, state }) { // V3 : étapes visibles selon project_type const visibleSteps = getVisibleSteps(state.project_type); const currentStepMeta = visibleSteps.find(s => s.idx === currentStep); const currentDisplayIdx = currentStepMeta?.displayIdx || currentStep; const totalSteps = visibleSteps.length; // Progression : pourcentage basé sur l'étape courante (1-indexed) // Étape 1 → ~16% (1/6), Étape 6 → 100% — distribué uniformément const progressPct = Math.round(((currentDisplayIdx - 0.5) / totalSteps) * 100); return (
{visibleSteps.map(s => { const isCurrent = s.idx === currentStep; const isDone = completedSteps.includes(s.idx); const canClick = isDone || isCurrent; const cls = `r5-stepper-seg ${isCurrent ? "active" : ""} ${isDone ? "done" : ""}`; return ( ); })}
); } // ============================================================================ // STEP 1 : Type de projet — V5 Phase 5 design // ============================================================================ function Step1Type({ state, setState, onNext }) { // V5 icons — designed by Claude Design (02-step1-type-v5.html) const CheckSm = ( ); const SvgSolar = ( ); const SvgSolarBattery = ( ); const SvgBattery = ( ); const SvgBorne = ( ); const types = [ { key: "solaire", name: "SOLAIRE", icon: SvgSolar, tag: "Panneaux + onduleur. Production réseau, économies sur la facture HQ.", includes: ["5 à 80 panneaux Thornova 500 W", "Onduleur Fox ESS ou Sigenergy", "Subvention LogisVert HQ"], price: "À partir de", priceVal: "14 800 $" }, { key: "solaire_batterie", name: <>SOLAIRE +
BATTERIES, icon: SvgSolarBattery, tag: "Production solaire couplée à un stockage. Autonomie, backup en option, V2X.", includes: ["Tesla / Fox / Sigenergy au choix", "DIM HQ + V2X compatible", "Backup partiel ou whole-home"], ribbon: "Le plus choisi", priceVal: "29 400 $" }, { key: "batterie", name: <>SYSTÈMES ESS
TOUT-EN-UN, icon: SvgBattery, tag: "Stockage seul. Optimisation tarifaire HQ et backup, sans panneaux solaires.", includes: ["Tesla Powerwall 3", "Fox AIO ou H1 Hybrid", "Sigenergy modulaire 6–48 kWh"], price: "À partir de", priceVal: "15 200 $" }, { key: "borne", name: "BORNE VÉ", icon: SvgBorne, tag: "Borne de recharge résidentielle ou multilog., installation électrique pro.", includes: ["Tesla Gen3 NACS / Universal", "FLO X3, X6, X8", "Subv. Roulez Vert 600 $"], price: "À partir de", priceVal: "1 494 $" } ]; const buildings = [ { key: "residentiel_unifam", label: "Résidentiel", meta: "unifamilial · max 20 kW" }, { key: "multilog", label: "Multilogement", meta: "4–19 log. · max 50 kW" }, { key: "com_petit", label: "Commercial petit", meta: "< 50 kW" }, { key: "com_moyen", label: "Commercial moyen", meta: "50–200 kW" }, { key: "com_grand", label: "Commercial grand", meta: "> 200 kW" } ]; const handleTypeSelect = (key) => { // P8-B : ne JAMAIS forcer panneaux:20 ici → le total reste à 0$ jusqu'à l'étape 4. // On ne fait que réinitialiser la batterie selon le type choisi (cohérence), panneaux reste 0. const solarPatch = key === "batterie" ? { panneaux: 0, roof_type: "bardeau", pitch_key: "standard" } : key === "solaire" ? { battery_brand: "none", battery_subsystem: null, battery_bundle_id: null, backup_mode: "none" } : {}; setState({ ...state, project_type: key, solar: { ...state.solar, ...solarPatch } }); }; return (
Étape 1 sur 6 · Type de projet

Quel projet souhaite-t-il réaliser ?

Vous pourrez ajuster la configuration en détail aux étapes suivantes. Cette première sélection oriente le parcours et les forfaits proposés.

{types.map(t => { const isSelected = state.project_type === t.key; return ( ); })}
Type de bâtiment

De quelle taille s'agit-il ?

Détermine les forfaits, la puissance max et l'admissibilité aux subventions.

{buildings.map(b => ( ))}
); } // ============================================================================ // STEP 2 : Coordonnées client COMPLET (V3 — validations strictes + auto-formatage) // ============================================================================ // V3 Validateurs regex stricts const V3_VALIDATORS = { nom: (v) => /^[A-Za-zÀ-ÿ\s'-]{2,50}$/.test((v || "").trim()), phone: (v) => /^\(\d{3}\)\s\d{3}-\d{4}$/.test(v || ""), email: (v) => !v || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), civic: (v) => /^\d{1,7}[A-Z]?$/.test((v || "").trim().toUpperCase()), postal: (v) => /^[A-Z]\d[A-Z]\s\d[A-Z]\d$/.test((v || "").toUpperCase()) }; // V3 Auto-formateurs function formatPhone(raw) { // "5141234567" → "(514) 123-4567" const digits = (raw || "").replace(/\D/g, "").substr(0, 10); if (digits.length <= 3) return digits; if (digits.length <= 6) return `(${digits.substr(0,3)}) ${digits.substr(3)}`; return `(${digits.substr(0,3)}) ${digits.substr(3,3)}-${digits.substr(6)}`; } function formatPostal(raw) { // "j7k2k3" → "J7K 2K3" const cleaned = (raw || "").toUpperCase().replace(/[^A-Z0-9]/g, "").substr(0, 6); if (cleaned.length <= 3) return cleaned; return `${cleaned.substr(0,3)} ${cleaned.substr(3)}`; } function filterCivic(raw) { // Numérique + 1 lettre finale max (ex. "123" ou "456B") return (raw || "").toUpperCase().replace(/[^0-9A-Z]/g, "").replace(/([A-Z]).*$/, "$1").substr(0, 7); } function filterName(raw) { // Lettres + accents + espace + apostrophe + tiret return (raw || "").replace(/[^A-Za-zÀ-ÿ\s'-]/g, ""); } function Step2ProfilClient({ state, setState, calc, onBack, onNext }) { const C = window.RAYCAST_CALC_2026; const D = window.RAYCOM_DATA_2026; const zone = calc?.zone || C.detectZone(state.client.address_postal); const updateClient = (patch) => setState({ ...state, client: { ...state.client, ...patch } }); // P8-C : Typeahead client — recherche BDD à la frappe du nom, sélection auto-remplit tout const [clientResults, setClientResults] = useState([]); const [showResults, setShowResults] = useState(false); useEffect(() => { const q = (state.client.name || "").trim(); if (q.length < 2 || !window.RaycastDB?.listClients) { setClientResults([]); return; } let alive = true; const t = setTimeout(async () => { try { const data = await window.RaycastDB.listClients({ search: q, limit: 6 }); if (alive) setClientResults(data || []); } catch (_) { if (alive) setClientResults([]); } }, 250); return () => { alive = false; clearTimeout(t); }; }, [state.client.name]); const pickClient = (cl) => { setShowResults(false); setState({ ...state, client: { ...state.client, client_id: cl.id, name: cl.name || "", phone: cl.phone || "", email: cl.email || "", address_civic: cl.address_civic || "", address_street: cl.address_street || "", address_city: cl.address_city || "", address_postal: cl.address_postal || "", source: cl.source || state.client.source, zone_key: null } }); }; // V3 : auto-formatage déclenché à chaque keystroke const updateClientFormatted = (field, value) => { let formatted = value; if (field === "phone") formatted = formatPhone(value); else if (field === "phone_2") formatted = formatPhone(value); else if (field === "address_postal")formatted = formatPostal(value); else if (field === "address_civic")formatted = filterCivic(value); else if (field === "name") formatted = filterName(value); updateClient({ [field]: formatted, ...(field === "address_postal" ? { zone_key: null } : {}) }); }; // V3 Validations strictes + zone hors couverture autorisée (sur soumission) const v3 = { name: V3_VALIDATORS.nom(state.client.name), phone: V3_VALIDATORS.phone(state.client.phone), email: V3_VALIDATORS.email(state.client.email), civic: V3_VALIDATORS.civic(state.client.address_civic), postal: V3_VALIDATORS.postal(state.client.address_postal), street: !!(state.client.address_street && state.client.address_street.trim()), city: !!(state.client.address_city && state.client.address_city.trim()) }; const canProceed = v3.name && v3.phone && v3.email && v3.civic && v3.postal && v3.street && v3.city; // Warning intelligent : si project_type ne matche pas building_type (directive JF #3) const projType = state.project_type; const bldgType = state.building_type; const mismatchWarning = (() => { if (bldgType === "multilog" && projType === "solaire_batterie") { return "Tu as choisi solaire+batterie mais le bâtiment est un multilogement. Considère « Borne VÉ multilog » ou « Solaire commercial »."; } if ((bldgType === "com_petit" || bldgType === "com_moyen" || bldgType === "com_grand") && projType !== "solaire") { return "Bâtiment commercial sélectionné — pense à basculer vers Solutions efficaces HQ (subventions commerciales)."; } return null; })(); // V5 helpers const CheckSvg = ( ); const validClass = (isValid, hasValue) => hasValue && isValid ? "valid" : hasValue && !isValid ? "error" : ""; const section01Complete = v3.name && v3.phone && v3.email; const section02Complete = v3.civic && v3.street && v3.city && v3.postal; return (
{ // P8-C : Entrée pour avancer (sauf dans un select/textarea ou si dropdown ouvert) if (e.key === "Enter" && canProceed && !showResults && e.target.tagName !== "SELECT" && e.target.tagName !== "TEXTAREA") { e.preventDefault(); onNext(); } }}>
Étape 2 sur 6 · Profil client

Qui est le client ?

Coordonnées + adresse du chantier — le code postal détecte automatiquement la zone Raycom et les frais de déplacement.

{mismatchWarning && (
Type de projet à confirmer
{mismatchWarning}
)} {/* Section 01 — Identité */}
01

Identité

{section01Complete && CheckSvg} {section01Complete ? "Complété" : "En cours"}
{ updateClientFormatted("name", e.target.value); setShowResults(true); }} onFocus={() => setShowResults(true)} onBlur={() => setTimeout(() => setShowResults(false), 180)} placeholder="Jean Tremblay" maxLength={50} autoComplete="off" /> {state.client.name && v3.name &&
{CheckSvg}
}
{showResults && clientResults.length > 0 && (
{clientResults.map(cl => ( ))}
)}
updateClientFormatted("phone", e.target.value)} placeholder="(450) 555-1234" maxLength={14} inputMode="numeric" /> {state.client.phone && v3.phone &&
{CheckSvg}
}
updateClient({ email: e.target.value })} placeholder="jean@exemple.ca" /> {state.client.email && v3.email &&
{CheckSvg}
}
{state.client.email && !v3.email && (
Format de courriel invalide
)}
updateClientFormatted("phone_2", e.target.value)} placeholder="Cell ou bureau" maxLength={14} inputMode="numeric" />
{/* Section 02 — Adresse */}
02

Adresse du chantier

{section02Complete && CheckSvg} {section02Complete ? "Complété" : "Détection zone auto"}
updateClientFormatted("address_civic", e.target.value)} placeholder="123" maxLength={7} inputMode="numeric" /> {state.client.address_civic && v3.civic &&
{CheckSvg}
}
updateClient({ address_street: e.target.value })} placeholder="rue des Pins" /> {state.client.address_street && v3.street &&
{CheckSvg}
}
updateClient({ address_city: e.target.value })} placeholder="Mascouche" /> {state.client.address_city && v3.city &&
{CheckSvg}
}
updateClientFormatted("address_postal", e.target.value)} placeholder="J7K 0H4" maxLength={7} /> {state.client.address_postal && v3.postal &&
{CheckSvg}
}
{/* Right sidebar — Zone detected */}
); } // ============================================================================ // STEP 3 : Profil énergétique CONDITIONNEL (Phase 2 — 2 variants selon project_type) // Variant A : solaire / solaire_batterie / batterie → tarif HQ + conso + VÉ + n°HQ // Variant B : borne → capacité du panneau électrique (60/100/200/300/400 A) // ============================================================================ function Step3ProfilEnergetique({ state, setState, onBack, onNext }) { const D = window.RAYCOM_DATA_2026; const C = window.RAYCAST_CALC_2026; const updateClient = (patch) => setState({ ...state, client: { ...state.client, ...patch } }); const isBorneOnly = state.project_type === "borne"; // === VARIANT B : Borne seule — capacité panneau électrique === if (isBorneOnly) { const cap = state.client.panel_capacity_a; const needsUpgrade = cap > 0 && cap < 200; return (
Étape 3 sur 6 · Capacité électrique

Quelle est la capacité du panneau électrique ?

Pour une borne VÉ, on a juste besoin de connaître l'ampérage de l'entrée pour évaluer si une mise à niveau est requise.

01

Ampérage actuel

5 options · standard 200 A
{[60, 100, 200, 300, 400].map(a => ( ))}
{needsUpgrade && (
Mise à niveau panneau recommandée
Pour brancher une borne VÉ (60 A typique), il faudra passer le panneau de {cap} A à 200 A. Option OPT-PANNEAU-RECUP ou OPT-PANNEAU-NEUFS ajoutée auto à l'étape 5.
)} {cap === 300 && (
300 A — option indicative
Le prix d'upgrade 100 → 300 A n'est pas dans la grille standard. JF / Marc-André confirmera par soumission ad hoc.
)}
Admissibilité subventions
Le projet ne contient que des bornes EV — LogisVert ne s'applique pas. Seul Roulez Vert (600 $ max résid · 5 000 $/borne multilog + ZEV 1 400 $) est disponible.
); } // === VARIANT A : Solaire / Batterie — profil énergétique complet === const tariff = D.hq_tariffs.find(t => t.id === state.client.hq_tariff) || D.hq_tariffs[0]; const annual_kwh_eff = state.client.bill_input_mode === "kwh" ? (state.client.annual_hq_kwh || 0) : (state.client.annual_hq_bill || 0) * 100 / tariff.rate; const annual_bill_eff = state.client.bill_input_mode === "dollars" ? (state.client.annual_hq_bill || 0) : (state.client.annual_hq_kwh || 0) * tariff.rate / 100; const kw_reco = annual_kwh_eff > 0 ? Math.min(20, Math.max(4, Math.round(annual_kwh_eff / 1380))) : 0; const savings_25 = annual_bill_eff > 0 ? Math.round(annual_bill_eff * 0.6 * 25 * 1.02) : 0; const hqOk = !state.client.hq_account_number || /^[A-Za-z0-9-]{6,18}$/.test(state.client.hq_account_number.replace(/\s/g, "")); const flexDIncompat = state.client.hq_tariff === "FlexD" && state.solar?.battery_brand === "none"; // Production NRCan estimate (10 kW × 1170 kWh/kW/an Mascouche) const sampleKw = kw_reco > 0 ? kw_reco : 10; const annualProd = Math.round(sampleKw * 1170); // Distribution mensuelle (% du total annuel) const monthlyDist = [3, 5, 8, 11, 13, 13, 13, 12, 9, 6, 4, 3]; // Jan-Déc const monthsLabels = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]; // Orientation compass const orientations = [ { key: "N", label: "N", isReco: false }, { key: "NE", label: "NE", isReco: false }, { key: "E", label: "E", isReco: false }, { key: "SE", label: "SE", isReco: false }, { key: "S", label: "S", isReco: true }, { key: "SO", label: "SO", isReco: true }, { key: "O", label: "O", isReco: false }, { key: "NO", label: "NO", isReco: false } ]; return (
Étape 3 sur 6 · Profil énergétique

Quel est son profil énergétique ?

Tarif HQ + consommation annuelle + véhicule électrique. Ces données alimentent l'estimation de couverture et le calcul des économies.

{/* 01 — Tarif HQ */}
01

Tarif Hydro-Québec

{D.hq_tariffs.length} tarifs résidentiels & commerciaux
{D.hq_tariffs.map(t => { const isFlexDInRed = t.id === "FlexD" && state.solar?.battery_brand === "none"; return ( ); })}
{flexDIncompat && (
FlexD/DP sont des tarifs dynamiques — peu rentables sans batterie. Recommander tarif D ou ajouter une batterie à l'étape 4.
)}
{/* 02 — Consommation */}
02

Consommation annuelle

Saisie en kWh ou en $
updateClient({ [state.client.bill_input_mode === "kwh" ? "annual_hq_kwh" : "annual_hq_bill"]: parseInt(e.target.value, 10) || 0 })} placeholder={state.client.bill_input_mode === "kwh" ? "22 400" : "1 850"} />
{state.client.bill_input_mode === "kwh" ? "kWh" : "$"}
{(annual_kwh_eff > 0 || annual_bill_eff > 0) && (
Conso / an
{C.fmtNum(annual_kwh_eff)}
kWh
Facture
{C.fmtCAD0(annual_bill_eff)}
/ an
Système reco
{kw_reco} kW
≈ {kw_reco * 2} panneaux
Économies 25 ans
{C.fmtCAD0(savings_25)}
estimées
)}
{/* 03 — Véhicule(s) électrique(s) */}
03

Véhicule(s) électrique(s)

Pour le calcul V2X et la charge auto
Le client possède un VÉ ?
Active pour saisir km/an et conso/100 km
{state.client.nb_ve > 0 && ( <>
{[1, 2].map(n => ( ))}
updateClient({ ev_km_per_year: parseInt(e.target.value, 10) || 0 })} placeholder="20 000" />
km
updateClient({ ev_kwh_per_100km: parseFloat(e.target.value) || 0 })} placeholder="18" />
kWh
)}
{/* 04 — N° HQ + orientation + région */}
04

Hydro-Québec + toiture

Optionnel · accélère le dépôt LogisVert
updateClient({ hq_account_number: e.target.value })} placeholder="G9SJ-1234567" />
{state.client.hq_account_number && !hqOk && (
Format HQ invalide (ex. G9SJ-1234567)
)}
updateClient({ hq_meter_number: e.target.value })} placeholder="Optionnel" />
{orientations.map(o => ( ))}
{/* Right sidebar — Production NRCan */}
); } // ============================================================================ // V3-E : Step4Batterie — Sous-composant pour project_type="batterie" (tout-en-un sans solaire) // Exclusif Tesla / Fox AIO / Fox H1 / Sigenergy — pas de toiture/pente/panneaux // ============================================================================ function Step4Batterie({ state, setState, calc, updateSolar, D, C }) { const brand = state.solar.battery_brand || "fox_aio"; const pw_count = Math.max(1, Math.min(3, state.solar.pw_count || 1)); const dc_exp = state.solar.dc_expansions || 0; const sig_kwh = state.solar.sig_battery_kwh || 9; const sig_qty = state.solar.sig_battery_qty || 2; const isFox = brand === "fox_aio" || brand === "fox_h1"; const bcalc = calc?.batteryOnlyCalc; const fmt = (v) => C.fmtCAD0(v).replace(/\s/g, " "); const CheckSvg = ( ); const InfoSvg = ( ); // Brands definition const brands = [ { key: "tesla", mark: "TESLA", name: "Powerwall 3", match: (b) => b === "tesla", tagline: "Backup whole-home automatique jusqu'à 200 A. Gateway 3 incluse.", specs: [ { label: "Capacité", val: "13,5 kWh" }, { label: "Sortie", val: "11,5 kW" }, { label: "Garantie", val: "10 ans" } ], onSelect: () => updateSolar({ battery_brand: "tesla", battery_subsystem: null, battery_bundle_id: null }) }, { key: "fox", mark: "FOX ESS", name: "AIO / H1 Hybrid", match: (b) => b === "fox_aio" || b === "fox_h1", tagline: "Compact tout-en-un ou hybride modulaire. Idéal petits espaces.", specs: [ { label: "Capacité", val: "10–23 kWh" }, { label: "Sortie", val: "9,6–11,4 kW" }, { label: "Garantie", val: "10 ans" } ], onSelect: () => updateSolar({ battery_brand: "fox_aio", battery_subsystem: "aio", battery_bundle_id: "aio-114-4eq" }) }, { key: "sig", mark: "SIGENERGY", name: "SigenStor", match: (b) => b === "sig", badge: "V2X", tagline: "Modulaire empilable jusqu'à 48 kWh. Compatible V2X borne.", specs: [ { label: "Capacité", val: "6–48 kWh" }, { label: "Sortie", val: "6–12 kW" }, { label: "Modules", val: "1–8" } ], onSelect: () => updateSolar({ battery_brand: "sig", battery_subsystem: null, battery_bundle_id: null }) } ]; // Qty stepper helper const QtyStepper = ({ value, min, max, onChange }) => (
{value}
); return ( <>
Étape 4 sur 6 · Tout-en-un (batterie seule)

Choisissez votre système de batterie.

Un seul fabricant par projet. Tesla pour le whole-home backup automatique, Fox ESS pour la compacité, Sigenergy pour la modularité et le V2X.

{/* 01 — Brand selection */}
01

Fabricant

Choix exclusif
{brands.map(b => { const isSelected = b.match(brand); return ( ); })}
{/* 02 — Brand-specific config */}
02

{brand === "tesla" && "Configuration Tesla"} {isFox && "Configuration Fox ESS"} {brand === "sig" && "Configuration Sigenergy"}

{brand === "tesla" && "Powerwall + Expansions DC"} {isFox && "Sous-système + bundle"} {brand === "sig" && "Modules + LoadHub"}
{/* TESLA */} {brand === "tesla" && ( <>
Nombre de Powerwall 3
Onduleur intégré · backup automatique · max 3
updateSolar({ pw_count: v })} />
Expansions DC par Powerwall
+13,5 kWh chacune · max 3 par PW · +9 750 $ matériel + 1 195 $ install
{Array.from({ length: pw_count }).map((_, i) => (
Powerwall #{i + 1}
13,5 kWh · 11,5 kW · {dc_exp} expansion{dc_exp > 1 ? "s" : ""} DC
updateSolar({ dc_expansions: v })} />
))}
Mode de backup
Gateway 3 incluse · sélection requise
{InfoSvg}
Pourquoi Full Home Backup · Seul Tesla offre la commutation automatique de toute la maison. Le client n'a rien à faire — le Gateway 3 détecte la panne et bascule en moins de 100 ms.
)} {/* FOX ESS */} {isFox && ( <>
Sous-système Fox ESS
Ne JAMAIS mélanger EQ4000 (AIO) avec CM/CS (H1 Hybrid)
Configuration (bundle)
Capacité kWh + prix vendant
{(brand === "fox_aio" ? D.fox_ess.aio.bundles : D.fox_ess.h1_hybrid.bundles).map(b => ( ))}
Mode de backup
{brand === "fox_aio" ? "AIO : DIM intégré" : "H1 Hybrid : Hub G2 inclus dans bundle"}
)} {/* SIGENERGY */} {brand === "sig" && ( <>
Capacité par module batterie
Tout le système doit utiliser le même format
Nombre de modules (1–8)
Capacité totale : {sig_qty * sig_kwh} kWh
updateSolar({ sig_battery_qty: v })} />
LoadHub Sigenergy (DIM 200 A)
Recommandé pour optimisation tarifaire + V2X
Mode de backup
Aucun ou partiel · Full home réservé Tesla
)}
{/* Récap matériel (preview inline si pas de sidebar) */} {bcalc && bcalc.sell > 0 && (

Récap matériel — détail

Auto-calculé
{bcalc.breakdown.map((b, i) => (
{b.label}{b.qty > 1 ? ` × ${b.qty}` : ""}
{fmt(b.sell)}
))}
Sous-total matériel batterie
{fmt(bcalc.sell)}
{calc?.forfait && (
{calc.forfait.code} · {calc.forfait.label}Forfait d'installation auto
{fmt(calc.forfait.sell)}
)}
)} ); } // ============================================================================ // STEP 4 : CONFIGURATION SOLAIRE — LA CRITIQUE (étages + pente + panneaux + bons increments) // ============================================================================ function Step4Config({ state, setState, calc, onBack, onNext }) { const D = window.RAYCOM_DATA_2026; const C = window.RAYCAST_CALC_2026; const updateSolar = (patch) => setState({ ...state, solar: { ...state.solar, ...patch } }); const updateBorne = (patch) => setState({ ...state, borne: { ...state.borne, ...patch } }); const solarCalc = calc?.solarCalc; const isBorneOnly = state.project_type === "borne"; const isBatteryOnly = state.project_type === "batterie"; const showSolarSection = !isBorneOnly && !isBatteryOnly; // P8-B : départ à 0 $ — à l'arrivée sur l'étape 4 config solaire, si rien n'est encore // configuré (panneaux=0), on pré-remplit un défaut raisonnable (20 panneaux + onduleur). // Le total reste donc à 0 $ aux étapes 1-3, puis devient un vrai montant ici. useEffect(() => { if (showSolarSection && !state.solar._configured && (state.solar.panneaux || 0) === 0) { const patch = { panneaux: 20, _configured: true }; if (state.project_type === "solaire_batterie" && state.solar.battery_brand === "none") { patch.battery_brand = "fox_aio"; patch.battery_subsystem = "aio"; patch.battery_bundle_id = "aio-114-4eq"; patch.with_dim = true; } setState({ ...state, solar: { ...state.solar, ...patch } }); } if (isBatteryOnly && !state.solar._configured && state.solar.battery_brand === "none") { setState({ ...state, solar: { ...state.solar, battery_brand: "fox_aio", battery_subsystem: "aio", battery_bundle_id: "aio-114-4eq", _configured: true } }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // V3 : pas de kits préconfigurés — slider 4-50 kW par 0,5 kW // Panneau Thornova BBT54 500W → 1 panneau = 0,5 kW, donc 8 à 100 panneaux const pitchCol = C.pitchKeyToExcelCol(state.solar.pitch_key); const currentKw = (state.solar.panneaux || 0) * 0.5; // Prix indicatif à la pente actuelle pour les paliers proches const palierExact = D.solar_table_vendant.find(p => p.panneaux === state.solar.panneaux); const indicativePrice = palierExact ? palierExact[pitchCol] : null; // V5 helpers const panneaux = state.solar.panneaux || 5; const watts = panneaux * 500; const rangePct = Math.round(((panneaux - 5) / (80 - 5)) * 100); // Production estim 1170 kWh/kW/an Mascouche, ajustée par solarCalc si dispo const productionAnnuelle = calc?.production || Math.round(currentKw * 1170); const annualKwh = state.client?.annual_hq_kwh || 0; const coverage = annualKwh > 0 ? Math.min(150, Math.round((productionAnnuelle / annualKwh) * 100)) : 0; const logisVert = calc?.logisvert || 0; const ges = productionAnnuelle * 0.000688; // tonnes CO2/an // V5 SVG roof icons const roofIcons = { bardeau: , metal: , tpo: , epdm: , beton: , ground: }; return (
Étape 4 sur 6 · { isBorneOnly ? "Borne de recharge" : isBatteryOnly ? "Tout-en-un (batterie seule)" : "Configuration du système solaire" }

{isBorneOnly && "Configuration de la borne EV"} {isBatteryOnly && "Choisissez votre système de batterie."} {showSolarSection && (state.project_type === "solaire" ? "Combien de panneaux solaires ?" : "Solaire + Batterie · combien ?")}

{isBorneOnly && "Modèle, type de câblage, longueur — combinez plusieurs câbles au besoin."} {isBatteryOnly && "Un seul fabricant par projet. Choix exclusif Tesla / Fox / Sigenergy."} {showSolarSection && "Le prix se met à jour en temps réel selon le nombre de panneaux Thornova 500 W. Panneau de référence non modifiable."}

{/* === V3-E : TOUT-EN-UN (batterie sans solaire) === */} {isBatteryOnly && ( )} {/* === SOLAIRE V5 === */} {showSolarSection && ( <> {/* 01 — Slider hero panneaux */}
01

Puissance solaire

Slider 5 à 80 panneaux Thornova 500 W
{panneaux}
panneaux {currentKw.toFixed(1).replace(".", ",")} kW DC · {watts.toLocaleString("fr-CA")} W
Prix indicatif
{indicativePrice ? C.fmtCAD0(indicativePrice) : "—"}
Solaire pur · sans onduleur ni forfait install
updateSolar({ panneaux: parseInt(e.target.value, 10) })} style={{ "--r5-val": `${rangePct}%`, "--val": `${rangePct}%` }} />
520406080
{/* 4 production stats live */}
Production / an
{productionAnnuelle.toLocaleString("fr-CA")} kWh
NRCan Mascouche
Couverture HQ
{annualKwh > 0 ? `${coverage} %` : "—"}
{annualKwh > 0 ? `${annualKwh.toLocaleString("fr-CA")} kWh/an` : "Conso non saisie"}
Subv. LogisVert
{logisVert > 0 ? C.fmtCAD0(logisVert) : "—"}
1 000 $/kW · plafond 40 %
GES évités
{ges.toFixed(1).replace(".", ",")} t/an
≈ {Math.round(ges / 4.6)} voiture(s)
{solarCalc?.warnings?.length > 0 && (
Avertissements
    {solarCalc.warnings.map((w, i) =>
  • {w}
    • )}
)} {solarCalc?.errors?.length > 0 && (
Configuration bloquée — sur soumission ad hoc
    {solarCalc.errors.map((e, i) =>
  • {e}
    • )}
)}
{/* 02 — Toiture grid */}
02

Type de toiture

Bardeau / métal couverts · membrane sur soumission
{D.roof_types.map(r => { const isBlocked = r.requires_quote; const isWarning = !isBlocked && r.warning; const isSelected = state.solar.roof_type === r.key; const cls = `r5-roof-card ${isSelected ? "selected" : ""} ${isWarning ? "warning" : ""} ${isBlocked ? "blocked" : ""}`; return ( ); })}
{/* 03 — Pente + Étages double-block */}
03

Pente et étages

Impact direct sur le prix au watt
Pente du toit Plat → grille p1 · Forte → p2 · Très forte → p3
{D.pitch_brackets_ui.map(p => ( ))}
Nombre d'étages +0,10 $/W par étage au-delà de 2
{state.solar.floors || 2}
{/* 04 — Onduleur (Fox / Sig / Tesla) */}
04

Onduleur

{state.project_type === "solaire" ? "Tesla exclu pour solaire seul" : "Choix exclusif"}
{state.project_type === "solaire" ? ( ) : ( )} {state.project_type === "solaire" && ( )}
{/* Sous-chooser Fox AIO vs H1 */} {(state.solar.battery_brand === "fox_aio" || state.solar.battery_brand === "fox_h1") && (
Fox ESS — sous-système ⚠️ Ne JAMAIS mélanger EQ4000 et CM/CS
)} {/* Capacité / unités batterie (solaire + batterie) — corrige C1/C2 : la batterie est chiffrée */} {state.solar.battery_brand === "tesla" && (
Capacité Tesla 13,5 kWh / Powerwall · onduleur intégré · max 4 PW + 3 exp.
Powerwall 3 : {[1, 2, 3, 4].map(n => ( ))}
Expansions DC / PW : {[0, 1, 2, 3].map(n => ( ))}
)} {(state.solar.battery_brand === "fox_aio" || state.solar.battery_brand === "fox_h1") && (
Capacité Fox — {state.solar.battery_brand === "fox_aio" ? "modules EQ4000" : "CM4000 + CS4000"} Choisir la capacité (kWh)
{(state.solar.battery_brand === "fox_aio" ? D.fox_ess.aio.bundles : D.fox_ess.h1_hybrid.bundles).map(b => ( ))}
)} {state.solar.battery_brand === "sig" && (
Capacité Sigenergy Modules 6 ou 9 kWh · 1 à 6 par colonne
Module :
Nombre : {[1, 2, 3, 4, 5, 6].map(n => ( ))}
)} {/* Backup mode si batterie */} {state.solar.battery_brand !== "none" && (
Mode backup Sub-panel ou whole-home selon batterie
{state.solar.battery_brand === "tesla" && ( )}
)} {/* Forfait install auto-détecté */} {calc?.forfait && (
Forfait d'installation auto-détecté · {calc.forfait.code} · {calc.forfait.label} → {C.fmtCAD0(calc.forfait.sell)}
2 ans MO Raycom · marge {(calc.forfait.marge * 100).toFixed(1)} % · coûtant {C.fmtCAD0(calc.forfait.cost)}
)}
)} {/* === BORNE V5 === */} {(isBorneOnly || state.borne.qty > 0) && (() => { const totalCableM = Object.values(state.borne.cables || {}).reduce((s, m) => s + (m || 0), 0); const borneCost = calc?.borne_sell || 0; return ( <> {/* Section A — Quantité + modèle (only show for borne project type) */} {isBorneOnly && (
{showSolarSection ? "05" : "01"}

Quantité & modèle

Forfait base 495 $/borne inclus
Nombre de bornes Forfait MO 2h + Z1 + breaker 60A 2P + connecteurs · 495 $/borne
{state.borne.qty}
{state.borne.qty > 0 && ( <>
Borne fournie par le client ? Si oui, Raycom installe seulement (le matériel est exclu)
{!state.borne.client_supplied && (
{Object.entries(D.borne_ev.modeles) .filter(([k, m]) => k !== "fournie_client" && k !== "flo_cable_remplacement") .map(([k, m]) => ( ))}
)} )}
)} {/* Section B — Câblage combinable */} {state.borne.qty > 0 && (
{isBorneOnly ? "02" : (showSolarSection ? "06" : "01")}

Câblage — combinable

6 types · 0 à 50 m chacun
{totalCableM}
mètres au total
Coût câblage estim.
{borneCost > 0 ? C.fmtCAD0(borneCost) : "—"}
{Object.entries(D.borne_ev.sliders).map(([cableKey, slider]) => { const currentM = (state.borne.cables && state.borne.cables[cableKey]) || 0; const valPct = Math.round((currentM / 50) * 100); const isActive = currentM > 0; return (
{slider.label} {slider.spec.split("·")[0]?.trim()}
updateBorne({ cables: { ...(state.borne.cables || {}), [cableKey]: parseInt(e.target.value, 10) || 0 } })} style={{ "--r5-val": `${valPct}%`, "--val": `${valPct}%` }} aria-label={slider.label} />
{currentM} m {isActive && actif}
); })}
)} {/* Section C — DCC / DSDC exclusif */} {state.borne.qty > 0 && (
{isBorneOnly ? "03" : (showSolarSection ? "07" : "02")}

Contrôleur de charge

DCC ou DSDC Tesla · exclusifs
{Object.entries(D.borne_ev.dcc).map(([k, d]) => ( ))}
)} ); })()}
); } // ============================================================================ // STEP 5 : Options techniques + Services (avec OptionDescriptionEditor par option) // ============================================================================ function Step5Options({ state, setState, onBack, onNext }) { const D = window.RAYCOM_DATA_2026; const C = window.RAYCAST_CALC_2026; const Descr = window.RaycastDescriptions; const [filter, setFilter] = useState(""); // V3 : options pertinentes par défaut selon project_type — 8 max au lieu de 51 // Filtre intelligent : si pas de filter actif, on montre uniquement les options pertinentes // selon le contexte du projet. Lien "Voir toutes (51)" pour expand si besoin. const [showAllOptions, setShowAllOptions] = useState(false); const RELEVANT_FOR_SOLAR = new Set([ "OPT-TECK-6-METRE", "OPT-PV-1S-METRE", "OPT-PV-2S-METRE", "OPT-PV-34S-METRE", "OPT-CONDUIT-METRE", "OPT-PANNEAU-RECUP", "OPT-PANNEAU-NEUFS", "OPT-MALT-AVANCEE" ]); const RELEVANT_FOR_BORNE = new Set([ "OPT-TECK-6-METRE", "OPT-CABLE-NMD-10", "OPT-CABLE-8RW90", "OPT-CABLE-NMWU-6", "OPT-CONDUIT-PVC-2-ENF", "OPT-PANNEAU-RECUP", "OPT-PANNEAU-NEUFS", "OPT-SECTIONNEUR-60A" ]); const RELEVANT_FOR_BATTERIE = new Set([ "OPT-TECK-6-METRE", "OPT-CABLE-NMD-10", "OPT-PANNEAU-RECUP", "OPT-PANNEAU-NEUFS", "OPT-RESEAU-WIFI", "OPT-GENERATRICE-TRANSFERT", "OPT-MALT-AVANCEE", "OPT-MO-EXTRA" ]); const relevantSet = state.project_type === "borne" ? RELEVANT_FOR_BORNE : state.project_type === "batterie" ? RELEVANT_FOR_BATTERIE : RELEVANT_FOR_SOLAR; const filteredOptions = D.options_electriques.filter(o => { // Filtre texte (toujours appliqué si présent) if (filter) { return o.label.toLowerCase().includes(filter.toLowerCase()) || o.code.toLowerCase().includes(filter.toLowerCase()); } // V3 : sans filter texte, montrer seulement les pertinentes (sauf si showAllOptions activé) if (showAllOptions) return true; return relevantSet.has(o.code); }); const toggleOption = (opt) => { const exists = state.options_electriques.find(o => o.code === opt.code); if (exists) { setState({ ...state, options_electriques: state.options_electriques.filter(o => o.code !== opt.code) }); } else { setState({ ...state, options_electriques: [...state.options_electriques, { ...opt, qty: 1 }] }); } }; const setQty = (code, qty) => { setState({ ...state, options_electriques: state.options_electriques.map(o => o.code === code ? { ...o, qty } : o) }); }; const toggleService = (sv) => { const exists = state.services.find(s => s.code === sv.code); if (exists) { setState({ ...state, services: state.services.filter(s => s.code !== sv.code) }); } else { setState({ ...state, services: [...state.services, { ...sv, qty: 1 }] }); } }; return (
Étape 5 sur 6

Options techniques + services

Ajuste la soumission au contexte du chantier. Chaque option cochée affiche sa description catalogue — personnalisable au besoin pour cette soumission.

Options électriques · {showAllOptions ? `${D.options_electriques.length} affichées` : `${filteredOptions.length} pertinentes`}
setFilter(e.target.value)} style={{ marginBottom: 14 }} /> {!showAllOptions && !filter && (
💡 Affichage des options les plus pertinentes pour {state.project_type === "borne" ? "borne VÉ" : state.project_type === "batterie" ? "stockage tout-en-un" : "système solaire"}. Cliquez sur « Voir toutes » pour la liste complète.
)}
{filteredOptions.map(opt => { const selected = state.options_electriques.find(o => o.code === opt.code); return (
toggleOption(opt)} />
{opt.label}
{opt.code} · {opt.unit} · {C.fmtCAD0(opt.sell)}
{selected && ( setQty(opt.code, parseInt(e.target.value, 10) || 1)} /> )}
{selected && Descr && ( )}
); })}
Services vendeur ({D.services_vendeur.length} disponibles)
{D.services_vendeur.map(sv => { const selected = state.services.find(s => s.code === sv.code); return (
toggleService(sv)} />
{sv.label}
{sv.code} · {C.fmtCAD0(sv.sell)}
{selected && Descr && ( )}
); })}
); } // ============================================================================ // STEP 6 : Résumé + Acceptation + PDF // ============================================================================ function Step6Resume({ state, setState, calc, onBack, onSave, onGeneratePDF, onDecide }) { const C = window.RAYCAST_CALC_2026; const D = window.RAYCOM_DATA_2026; const fmt = (v) => C.fmtCAD0(v || 0); const Descr = window.RaycastDescriptions; // Group lines by category (V5 layout : Solaire / Batterie / Installation / Options / Bornes) const groups = useMemo(() => { const g = []; // Solaire if (calc?.solarCalc && calc.solar_sell > 0) { g.push({ title: `Solaire · ${calc.solarCalc.panneaux} panneaux · ${calc.solarCalc.kw} kW`, sub: fmt(calc.solar_sell), rows: [{ qty: `${calc.solarCalc.panneaux}×`, name: "Thornova BBT54 500W All Black Bifacial", desc: `Pente ${state.solar.pitch_key} · ${state.solar.floors} étage(s) · ${calc.solarCalc.kw} kW DC`, price: fmt(calc.solar_sell) }] }); } // Batterie tout-en-un if (calc?.batteryOnlyCalc && calc.battery_sell > 0) { g.push({ title: `Batterie ${calc.batteryOnlyCalc.brand === "tesla" ? "Tesla" : calc.batteryOnlyCalc.brand === "sig" ? "Sigenergy" : "Fox ESS"}`, sub: fmt(calc.battery_sell), rows: calc.batteryOnlyCalc.breakdown.map(b => ({ qty: `${b.qty}×`, name: b.label, desc: "", price: fmt(b.sell) })) }); } else if (calc?.battery_sell > 0) { g.push({ title: "Batterie", sub: fmt(calc.battery_sell), rows: [{ qty: "1×", name: calc.battery_label || "Batterie", desc: "Onduleur + batteries · garantie manufacturier", price: fmt(calc.battery_sell) }] }); } // Installation forfait if (calc?.forfait) { const zoneRow = calc.zone_sell > 0 ? { qty: "—", name: `Zone ${calc.zone.zone_key}`, desc: calc.zone.label, price: fmt(calc.zone_sell) } : { qty: "—", name: `Zone ${calc.zone?.zone_key || "Z1"}`, desc: "Incluse dans le forfait", price: "0 $", priceClass: "success" }; g.push({ title: "Installation", sub: fmt(calc.install_sell + (calc.zone_sell || 0)), rows: [ { qty: "1×", name: calc.forfait.label, desc: `${calc.forfait.code} · 2 ans MO Raycom`, price: fmt(calc.install_sell) }, zoneRow ] }); } // Borne EV if (calc?.borneCalc && calc.borne_sell > 0) { g.push({ title: `Borne EV · ${calc.borneCalc.qty || 1} borne(s)`, sub: fmt(calc.borne_sell), rows: [{ qty: `${calc.borneCalc.qty || 1}×`, name: calc.borneCalc.modele_label || "Borne EV", desc: `${calc.borneCalc.slider_label || ""} · forfait base inclus`, price: fmt(calc.borne_sell) }] }); } // Options électriques const opts = state.options_electriques || []; if (opts.length > 0) { g.push({ title: "Options électriques", sub: fmt(calc.options_sell), rows: opts.map(o => ({ qty: `${o.qty || 1}×`, name: o.label, desc: `${o.code} · ${o.unit}`, price: fmt((o.sell || 0) * (o.qty || 1)) })) }); } // Services internes const svc = state.services || []; if (svc.length > 0) { g.push({ title: "Services internes", sub: fmt(calc.services_sell), rows: svc.map(s => ({ qty: `${s.qty || 1}×`, name: s.label, desc: s.code, price: fmt((s.sell || 0) * (s.qty || 1)) })) }); } return g; }, [state, calc]); // Hero KPIs const heroSavings = calc?.savings_25 || 0; const payback = isFinite(calc?.payback) ? calc.payback : 0; const ges = calc?.production ? (calc.production * 0.000688) : 0; // ~0.688 kg CO2/kWh × prod kWh → tonnes const autonomy = calc?.autonomy_days ? Math.round(calc.autonomy_days * 24) : 0; // Subv flow const grant = calc?.total_grant || 0; const htBeforeGrant = (calc?.ht || 0) + (calc?.tps || 0) + (calc?.tvq || 0); const netCost = calc?.net_cost || 0; // Payment plans const planId = state.client?.financing_plan_id || "comptant"; const monthly = calc?.fin?.monthly || 0; const cashAmount = calc?.ttc || 0; const monthlyEstimate = (() => { const P = cashAmount; const r = 0.1299 / 12; const n = 240; const m = P > 0 ? P * (r / (1 - Math.pow(1 + r, -n))) : 0; return isFinite(m) ? m : 0; })(); const projectScopeHTML = (() => { // Build a friendly scope description with chips const parts = []; if (calc?.solarCalc?.panneaux) { parts.push(<>Installation d'un système solaire de {calc.solarCalc.panneaux} panneaux Thornova 500W totalisant {calc.solarCalc.kw} kW DC); } if (calc?.batteryOnlyCalc?.brand === "tesla") { parts.push(<>, couplé à {state.solar.pw_count} Powerwall 3 avec backup {state.solar.backup_mode === "whole_home" ? "whole-home automatique" : state.solar.backup_mode === "partial" ? "partiel" : "désactivé"}); } else if (calc?.battery_sell > 0) { parts.push(<>, couplé à {calc.battery_label}); } if (state.solar?.roof_type && state.project_type !== "batterie" && state.project_type !== "borne") { parts.push(<>. Toiture {state.solar.roof_type}, pente {state.solar.pitch_key} sur résidence {state.solar.floors} étage(s)); } if (calc?.zone) { parts.push(<> dans la zone {calc.zone.zone_key} ({state.client?.address_city || ""})); } parts.push(<>. Le système comprend l'installation complète par notre équipe RBQ 5590-9402, la mise en service, et un suivi 2 ans MO. Permis municipal non inclus — à la charge du client.); return parts; })(); const decisionStatus = state.decision_status || "draft"; return ( <>
Étape 6 sur 6 · Récap final

Voici le projet, {state.client?.name || "client"}.

{state.client?.address_city || "Mascouche"} · Zone {calc?.zone?.zone_key || "Z1"} Soumission valide 30 jours {calc?.warnings?.length ? `${calc.warnings.length} avertissement(s)` : "Aucun avertissement"}
{/* HERO KPIs */}
Économies estimées sur 25 ans
{fmt(heroSavings).replace(" $", "")}$
Net après subventions et financement. Hypothèse : tarif HQ {state.client?.hq_tariff || "D"}, +3 %/an.
Retour sur invest.
{payback > 0 ? payback.toFixed(1).replace(".", ",") : "—"}ans
{planId === "comptant" ? "Comptant" : "Financement"}
GES évités
{ges > 0 ? ges.toFixed(1).replace(".", ",") : "—"}t/an
≈ {Math.round(ges / 4.6)} voiture(s) retirée(s)
Autonomie batterie
{autonomy > 0 ? autonomy : "—"}h
Charges critiques
{/* Body 2-col */}
{/* Left column */}
{/* Subvention flow */} {grant > 0 && (

Subventions disponibles

Coût avant subv.
{fmt(htBeforeGrant)}
TTC tout inclus
Net après subv.
{fmt(netCost)}
−{fmt(grant)} d'aide
{calc.logisvert > 0 && (
LogisVert · Hydro-Québec ({calc.solarCalc?.kw || 0} kW × 1 000 $)
{fmt(calc.logisvert)}
)} {(calc.commercial_subv?.cii_federal || 0) > 0 && (
Crédit d'impôt fédéral CII (30 %)
{fmt(calc.commercial_subv.cii_federal)}
)} {(calc.commercial_subv?.solutions_efficaces || 0) > 0 && (
Solutions efficaces HQ (commercial)
{fmt(calc.commercial_subv.solutions_efficaces)}
)} {calc.rve > 0 && (
Roulez Vert (borne EV)
{fmt(calc.rve)}
)}
)} {/* Project scope */}

Description du projet

{Descr && }

{projectScopeHTML}

{/* Detail table grouped */}

Détail du devis

{groups.length} catégorie(s)
{groups.map((g, gi) => (
{g.title} {g.sub}
{g.rows.map((r, ri) => (
{r.qty}
{r.name}
{r.desc &&
{r.desc}
}
{r.price}
))}
))} {/* Totals */}
Sous-total HT
{fmt(calc?.ht)}
{grant > 0 && (
−
Subventions (LogisVert + CII + Roulez Vert + commercial)
−{fmt(grant)}
)}
+
TPS 5,000 % + TVQ 9,975 %
{fmt((calc?.tps || 0) + (calc?.tvq || 0))}
TOTAL net TTC
{fmt(netCost > 0 ? netCost : (calc?.ttc || 0))}
{/* Calendrier de paiement */} {(calc?.payment_schedule?.length || 0) > 0 && (

Calendrier de paiement

{calc.payment_schedule.map(p => (
{p.sequence}.
{p.label}
Déclencheur : {p.trigger_event.replace(/_/g, " ")} · {p.method_options.join(" · ")}
{fmt(p.amount_cad)}
))}
)} {/* Commission vendeur retirée (V7 — directive JF 29 mai 2026) */}
{/* Right sidebar — sticky */}
{/* Barre de badges (RBQ·CMEQ·Tesla·2ans) retirée — V7/V2 §3.3 (épuration). Le RBQ légal reste au pied de page de l'app + dans le PDF. */} {/* Back nav */}
); } // ============================================================================ // LIVE PREVIEW (right column) // ============================================================================ function LivePreview({ calc, viewMode = "internal" }) { const C = window.RAYCAST_CALC_2026; if (!calc) return null; const internal = viewMode === "internal"; return ( ); } // ============================================================================ // STEP 7 : SubmissionCompletion (Phase 2 — post-décision CTA) // ============================================================================ function SubmissionCompletion({ state, setState, calc, onReturnToDashboard, onGeneratePDF }) { const C = window.RAYCAST_CALC_2026; // REACT-5 Phase 3 : délai 6s (au lieu de 8) + animation plus douce via .r26-success-card-enter const [countdown, setCountdown] = useState(6); const [cancelled, setCancelled] = useState(false); const decision = state.decision_status || "accepted"; useEffect(() => { if (cancelled) return; if (countdown <= 0) { onReturnToDashboard?.(); return; } const t = setTimeout(() => setCountdown(countdown - 1), 1000); return () => clearTimeout(t); }, [countdown, cancelled, onReturnToDashboard]); const isAccept = decision === "accepted"; const isThink = decision === "thinking"; const isRefuse = decision === "refused"; const heroBg = isAccept ? "linear-gradient(135deg, #10b981, #059669)" : isThink ? "linear-gradient(135deg, #f59e0b, #d97706)" : "linear-gradient(135deg, #94a3b8, #64748b)"; const heroIcon = isAccept ? ( ) : isThink ? "⋯" : "✗"; const heroTitle = isAccept ? "Soumission acceptée !" : isThink ? "Soumission en réflexion" : "Soumission refusée"; const heroSub = isAccept ? "Le contrat est en route vers le client." : isThink ? "Relance programmée à J+5, J+12, J+30." : "Documenté pour analyse — la soumission reste accessible."; return (
{heroIcon}

{heroTitle}

Soumission {state.quote_id || "brouillon"} · {state.client?.name || "client"} · {C.fmtCAD0(calc?.ttc || 0)} TTC

{heroSub}

{/* Status cards */}
✓
Soumission enregistrée
BD Supabase · {new Date().toLocaleTimeString("fr-CA")}
📄
PDF généré
html2canvas + jsPDF · téléchargé
{isAccept ? "✉" : "⏰"}
{isAccept ? "Contrat envoyé" : "Relance programmée"}
{isAccept ? "Courriel client" : "J+5, J+12, J+30"}
{/* Recap strip */}
{calc?.solarCalc && {calc.solarCalc.kw} kW · {calc.solarCalc.panneaux} panneaux 500W} {calc?.battery_sell > 0 && {calc.battery_label || "Batterie"}} {calc?.borneCalc?.qty > 0 && {calc.borneCalc.qty}× borne {calc.borneCalc.modele_label}} {calc?.total_grant > 0 && Subv {C.fmtCAD0(calc.total_grant)}} {calc?.fin?.monthly > 0 && {C.fmtCAD0(calc.fin.monthly)}/mois}
{/* Actions */}
{!cancelled && (
Retour automatique au dashboard dans {countdown} seconde{countdown > 1 ? "s" : ""}
)}
); } // ============================================================================ // MAIN COMPONENT // ============================================================================ function Configurator2026({ state: extState, setState: extSetState, initialState, onSave, onGeneratePDF, user, submissionNumber, hideHeader }) { // Controlled (state/setState from props) ou standalone (state interne) const [innerState, setInnerState] = useState(() => extState || initialState || buildInitialState2026()); const state = extState != null ? extState : innerState; const setState = extSetState || setInnerState; const [currentStep, setCurrentStep] = useState(1); const [completedSteps, setCompletedSteps] = useState([]); // Calcul live à chaque changement d'état const calc = useMemo(() => { try { return window.RAYCAST_CALC_2026.fullCalc2026(state); } catch (e) { console.error("fullCalc2026 error:", e); return window.RAYCAST_CALC_2026.zeroCalc(); } }, [state]); // Mark step complete on next — V3 : skip step 3 (Profil énergétique) si project_type=borne const isBorne = state.project_type === "borne"; const goNext = () => { if (!completedSteps.includes(currentStep)) { setCompletedSteps([...completedSteps, currentStep]); } let next = currentStep + 1; // V3 : borne saute Profil énergétique (étape 3 → directement étape 4) if (next === 3 && isBorne) next = 4; setCurrentStep(Math.min(7, next)); }; const goBack = () => { let prev = currentStep - 1; // V3 : retour depuis étape 4 quand borne → directement étape 2 (saute étape 3) if (prev === 3 && isBorne) prev = 2; setCurrentStep(Math.max(1, prev)); }; const goToStep = (idx) => { // V3 : empêcher de cliquer sur étape 3 si borne if (idx === 3 && isBorne) return; setCurrentStep(idx); }; // V7 : scroll-to-top fluide à chaque changement d'étape (directive V2 §5 B.1) useEffect(() => { try { window.scrollTo({ top: 0, behavior: "smooth" }); } catch (e) { window.scrollTo(0, 0); } }, [currentStep]); const handleSave = () => onSave?.(state, calc); const handlePDF = () => onGeneratePDF?.(state, calc); // Phase 2 : décisions CTA étape 6 → étape 7 (SubmissionCompletion) const handleDecide = (decision) => { setState({ ...state, decision_status: decision, decided_at: new Date().toISOString() }); if (!completedSteps.includes(6)) setCompletedSteps([...completedSteps, 6]); setCurrentStep(7); // Sauvegarde async + PDF si accept if (decision === "accepted") { handlePDF(); } handleSave(); }; return (
{/* Header (caché si app shell v25 fournit déjà la Toolbar) */} {!hideHeader && (
R
RAYCAST
Raycom 2026
{submissionNumber && (
#{submissionNumber} {state.client.name || "Nouveau client"} auto
)}
{user && ( )}
)} {/* Stepper */} {/* Main grid */}
{currentStep === 1 && } {currentStep === 2 && } {currentStep === 3 && } {currentStep === 4 && } {currentStep === 5 && } {currentStep === 6 && } {currentStep === 7 && onSave && onSave(state, calc, { goToDashboard: true })} onGeneratePDF={handlePDF} />}
); } // Expose window.Configurator2026 = Configurator2026; window.buildInitialState2026 = buildInitialState2026; })();