document.addEventListener('DOMContentLoaded', function() { /* ========================================================= MOSIA — Dossier ERP — Formulaire multi-étapes Génère les étapes en JS pour garder le balisage maintenable. Tous les champs sont nommés mosia_xxx afin d'être facilement remappés vers des shortcodes Contact Form 7 (voir README livré). ========================================================= */ /* Lien "File Request" pCloud — dépôt sécurisé de photos/plans sans exposer aucun jeton d'accès au compte pCloud de MOSIA. */ const PCLOUD_UPLOAD_LINK = "https://u.pcloud.com/#page=puplink&code=INTXZxXzdv0TdAk73LV3mLDyqU06oxcG7"; const STEPS = [ { key:"demandeur", eyebrow:"Section 1", title:"Le demandeur", desc:"Coordonnées de la personne ou structure bénéficiaire de l'autorisation.", html:` ` }, { key:"etablissement", eyebrow:"Section 2", title:"L'établissement", desc:"Informations concernant l'établissement recevant du public (ERP).", html:` ` }, { key:"facade", eyebrow:"Section 3", title:"Façade du local", desc:"Matériaux, huisserie et dimensions de la façade.", html:` ` }, { key:"interieur", eyebrow:"Section 4", title:"Intérieur du local", desc:"Aménagement, structure et matériaux intérieurs.", html:` ` }, { key:"acces_ext", eyebrow:"Section 5 — Accessibilité", title:"Stationnement et cheminements extérieurs", desc:"Conformité PMR des places de parking et des accès piétons.", html:` ` }, { key:"acces_etab", eyebrow:"Section 5 — Accessibilité", title:"Accès à l'établissement", desc:"Seuil, marches, rampes et porte d'entrée.", html:` ` }, { key:"interieur_access", eyebrow:"Section 5 — Accessibilité", title:"Circulations, portes et mobilier intérieurs", desc:"Mobilier accessible, allées, portes intérieures et marches intérieures.", html:` ` }, { key:"sanitaires_autres", eyebrow:"Section 5 — Accessibilité", title:"Sanitaires, sorties et espaces spécifiques", desc:"Sanitaires PMR, sorties, public assis, cabines et hébergement.", html:` ` }, { key:"signaletique", eyebrow:"Section 5 — Accessibilité", title:"Signalétique et éclairage", desc:"Information, signalisation et éclairage des zones publiques.", html:` ` }, { key:"securite_batiment", eyebrow:"Section 6 — Sécurité incendie", title:"Classement et construction du bâtiment", desc:"Effectif, catégorie, desserte et résistance au feu des structures.", html:` ` }, { key:"securite_degagements", eyebrow:"Section 6 — Sécurité incendie", title:"Dégagements, désenfumage et aménagements", desc:"Sorties de secours, locaux à risques et nature des revêtements.", html:` ` }, { key:"code_travail", eyebrow:"Section 7 — Code du travail", title:"Conditions de travail et locaux du personnel", desc:"Applicable si votre établissement emploie du personnel salarié.", html:` ` }, { key:"documents", eyebrow:"Section 8", title:"Reportage photo et documents", desc:"Déposez vos photos et plans via notre espace de dépôt sécurisé.", html:` ` }, { key:"recap", eyebrow:"Dernière étape", title:"Récapitulatif et envoi", desc:"Vérifiez les informations principales avant l'envoi de votre dossier.", html:` ` } ]; /* ---------- helpers to build markup ---------- */ function checkItem(name, label){ return `${label}`; } function toggleYesNo(name, noVariant){ const noClass = noVariant ? "no-variant" : ""; return ``; } /* ---------- render steps ---------- */ const card = document.getElementById('mosiaCard'); const trail = document.getElementById('mosia-trail'); let current = 0; /* Stockage persistant de TOUTES les réponses, car chaque changement d'étape détruit le DOM de l'étape précédente (card.innerHTML = ...). Sans ce store, les valeurs des étapes passées seraient perdues. */ const answers = {}; // { fieldName: value } -> text/select/textarea/radio const checkedAnswers = {}; // { fieldName: true } -> checkboxes cochées STEPS.forEach((s,i)=>{ trail.insertAdjacentHTML('beforeend', ``); }); document.getElementById('mosia-step-total').textContent = STEPS.length; /* Sauvegarde les valeurs actuellement dans le DOM (étape affichée) dans le store global, avant que le DOM ne soit détruit. */ function saveCurrentStepValues(){ const fields = card.querySelectorAll('input[name], select[name], textarea[name]'); fields.forEach(el=>{ if(el.type === 'checkbox'){ checkedAnswers[el.name] = el.checked; } else if(el.type === 'radio'){ if(el.checked) answers[el.name] = el.value; } else { answers[el.name] = el.value; } }); } /* Réapplique les valeurs sauvegardées sur le DOM nouvellement injecté pour l'étape qu'on affiche. */ function restoreStepValues(){ const fields = card.querySelectorAll('input[name], select[name], textarea[name]'); fields.forEach(el=>{ if(el.type === 'file') return; if(el.type === 'checkbox'){ if(checkedAnswers[el.name]) el.checked = true; } else if(el.type === 'radio'){ if(answers[el.name] === el.value) el.checked = true; } else if(answers[el.name] !== undefined){ el.value = answers[el.name]; } }); } function renderStep(i){ saveCurrentStepValues(); card.innerHTML = ` `; document.getElementById('mosia-step-current').textContent = i+1; document.getElementById('mosia-step-name').textContent = STEPS[i].title; [...trail.children].forEach((el,idx)=>{ el.className = idxgoTo(i-1)); const nextBtn = document.getElementById('btnNext'); if(nextBtn) nextBtn.addEventListener('click', ()=>{ if(validateStep(i)) goTo(i+1); }); restoreStepValues(); wireConditionals(); reopenReveals(); // ouvre les .mosia-reveal dont la radio "oui" était déjà sélectionnée if(STEPS[i].key === 'recap') buildSummary(); card.scrollIntoView({behavior:'smooth', block:'start'}); } function s_eyebrow(i){return STEPS[i].eyebrow;} function validateStep(i){ const required = card.querySelectorAll('[required]'); for(const el of required){ if(!el.value || (el.type==='checkbox' && !el.checked)){ el.focus(); el.style.borderColor = 'var(--error)'; return false; } } return true; } function goTo(i){ if(i=STEPS.length) return; current = i; renderStep(i); } /* Ouvre automatiquement les blocs conditionnels (.mosia-reveal) si la réponse "oui" correspondante a déjà été cochée précédemment. */ function reopenReveals(){ const map = { mosia_acces_denivellation: 'reveal_denivellation', mosia_mobilier_present: 'reveal_mobilier', mosia_marches_int_present: 'reveal_marches_int', mosia_portes_int_present: 'reveal_portes_int', mosia_sanitaire_present: 'reveal_sanitaire', mosia_cabines_present: 'reveal_cabines', mosia_gaz_present: 'reveal_gaz', mosia_eclairage_securite: 'reveal_eclairage_securite', mosia_ascenseur_present: 'reveal_ascenseur', mosia_cuisson_present: 'reveal_cuisson', mosia_ct_produits_dangereux: 'reveal_produits_dangereux' }; Object.entries(map).forEach(([name, revealId])=>{ const reveal = document.getElementById(revealId); if(reveal && answers[name] === 'oui') reveal.classList.add('show'); }); } /* conditional reveal wiring: shows .mosia-reveal blocks tied to a "oui" radio. L'état initial (déjà répondu) est géré par reopenReveals(), appelée après. */ function wireConditionals(){ const map = { mosia_acces_denivellation: 'reveal_denivellation', mosia_mobilier_present: 'reveal_mobilier', mosia_marches_int_present: 'reveal_marches_int', mosia_portes_int_present: 'reveal_portes_int', mosia_sanitaire_present: 'reveal_sanitaire', mosia_cabines_present: 'reveal_cabines', mosia_gaz_present: 'reveal_gaz', mosia_eclairage_securite: 'reveal_eclairage_securite', mosia_ascenseur_present: 'reveal_ascenseur', mosia_cuisson_present: 'reveal_cuisson', mosia_ct_produits_dangereux: 'reveal_produits_dangereux' }; Object.entries(map).forEach(([name, revealId])=>{ const radios = card.querySelectorAll(`input[name="${name}"]`); const reveal = document.getElementById(revealId); if(!radios.length || !reveal) return; radios.forEach(r=>r.addEventListener('change', ()=>{ reveal.classList.toggle('show', r.value==='oui' && r.checked); })); }); } /* summary builder */ function buildSummary(){ const get = k => (answers[k] && answers[k].trim()) ? answers[k] : '—'; const blocks = [ {title:"Demandeur", rows:[ ["Nom", get('mosia_demandeur_nom')], ["Téléphone", get('mosia_demandeur_tel_mobile')], ["E-mail", get('mosia_demandeur_email')], ]}, {title:"Établissement", rows:[ ["Nom", get('mosia_etab_nom')], ["Type d'activité", get('mosia_etab_type_activite')], ["Commune", get('mosia_etab_commune')], ]}, {title:"Classement ERP", rows:[ ["Type", get('mosia_type_etab')], ["Catégorie", get('mosia_categorie_etab')], ["Effectif total", get('mosia_effectif_total')], ]}, ]; document.getElementById('mosiaSummary').innerHTML = blocks.map(b=>`

${b.title}

${b.rows.map(r=>`

${r[0]}${r[1]}

`).join('')}

`).join('') + `

Toutes les autres réponses (façade, accessibilité, sécurité incendie...) seront transmises avec votre dossier.

`; } /* ========================================================= ENVOI — Web3Forms 1) Crée un compte gratuit sur https://web3forms.com 2) Récupère ta clé d'accès ("Access Key") 3) Colle-la ci-dessous à la place de "VOTRE_CLE_WEB3FORMS_ICI" ========================================================= */ const WEB3FORMS_ACCESS_KEY = "VOTRE_CLE_WEB3FORMS_ICI"; /* Libellés lisibles pour transformer les noms techniques de champs en texte clair dans l'email reçu. Complète si besoin. */ const FIELD_LABELS = { mosia_demandeur_nom:"Nom et prénom du demandeur", mosia_demandeur_representant:"Représentant légal", mosia_demandeur_adresse:"Adresse du demandeur", mosia_demandeur_commune:"Commune du demandeur", mosia_demandeur_cp:"Code postal du demandeur", mosia_demandeur_tel_fixe:"Téléphone fixe", mosia_demandeur_tel_mobile:"Téléphone portable", mosia_demandeur_email:"E-mail du demandeur", mosia_etab_nom:"Nom de l'établissement", mosia_etab_type_activite:"Type d'activité", mosia_etab_activite_avant:"Activité avant travaux", mosia_etab_adresse:"Adresse de l'établissement", mosia_etab_commune:"Commune de l'établissement", mosia_etab_cp:"Code postal de l'établissement", mosia_type_etab:"Type ERP", mosia_categorie_etab:"Catégorie ERP", mosia_effectif_public:"Effectif public", mosia_effectif_personnel:"Effectif personnel", mosia_effectif_total:"Effectif total", mosia_surface_totale:"Surface totale (m²)", mosia_surface_public:"Surface réservée au public (m²)", mosia_message_libre:"Message complémentaire", mosia_fichiers_deposes:"Fichiers déposés sur l'espace pCloud" }; /* Regroupe les champs par section pour un mail lisible */ const SECTION_GROUPS = [ {title:"Demandeur", keys:["mosia_demandeur_nom","mosia_demandeur_representant","mosia_demandeur_adresse","mosia_demandeur_commune","mosia_demandeur_cp","mosia_demandeur_tel_fixe","mosia_demandeur_tel_mobile","mosia_demandeur_email"]}, {title:"Établissement", keys:["mosia_etab_nom","mosia_etab_type_activite","mosia_etab_activite_avant","mosia_etab_adresse","mosia_etab_commune","mosia_etab_cp"]}, {title:"Classement ERP", keys:["mosia_type_etab","mosia_categorie_etab","mosia_effectif_public","mosia_effectif_personnel","mosia_effectif_total","mosia_surface_totale","mosia_surface_public"]} ]; function labelFor(key){ if(FIELD_LABELS[key]) return FIELD_LABELS[key]; return key.replace(/^mosia_/,'').replace(/^chk_/,'').replace(/_/g,' '); } /* Construit un résumé texte lisible de TOUTES les réponses, groupé par étape, à partir du store persistant (answers / checkedAnswers) — et non du DOM, qui ne contient que l'étape actuellement affichée. */ function buildPlainTextReport(){ saveCurrentStepValues(); // s'assure que l'étape affichée (recap) est bien à jour aussi const usedKeys = new Set(); let out = ""; SECTION_GROUPS.forEach(group=>{ out += `\n=== ${group.title.toUpperCase()} ===\n`; group.keys.forEach(k=>{ const val = answers[k]; if(val && String(val).trim()){ out += `${labelFor(k)} : ${val}\n`; usedKeys.add(k); } }); }); // Tout le reste (cases à cocher, sections techniques) regroupé par étape, // dans l'ordre du formulaire STEPS.forEach(step=>{ if(['demandeur','etablissement'].includes(step.key)) return; // déjà traités au-dessus const tmp = document.createElement('div'); tmp.innerHTML = step.html; const namesInStep = [...new Set([...tmp.querySelectorAll('[name]')].map(el=>el.getAttribute('name')))]; const lines = []; namesInStep.forEach(name=>{ if(usedKeys.has(name) || name === 'mosia_fichiers[]') return; usedKeys.add(name); const sampleEl = tmp.querySelector(`[name="${CSS.escape(name)}"]`); if(!sampleEl) return; const type = sampleEl.getAttribute('type'); if(type === 'checkbox'){ if(checkedAnswers[name]) lines.push(`✔ ${labelFor(name)}`); } else if(type === 'radio'){ const v = answers[name]; if(v) lines.push(`${labelFor(name)} : ${v === 'oui' ? 'Oui' : 'Non'}`); } else { const v = answers[name]; if(v && String(v).trim()) lines.push(`${labelFor(name)} : ${v}`); } }); if(lines.length){ out += `\n=== ${step.title.toUpperCase()} ===\n` + lines.join('\n') + '\n'; } }); return out; } /* form submit — envoi réel via Web3Forms, à partir du store persistant */ const mosiaFormEl = document.getElementById('mosiaForm'); mosiaFormEl.addEventListener('submit', async function(e){ e.preventDefault(); if(!validateStep(current)) return; saveCurrentStepValues(); const submitBtn = document.getElementById('btnSubmit'); if(submitBtn){ submitBtn.disabled = true; submitBtn.textContent = "Envoi en cours..."; } try{ const fd = new FormData(); fd.append('access_key', WEB3FORMS_ACCESS_KEY); fd.append('subject', `Nouveau dossier ERP — ${answers['mosia_etab_nom'] || 'sans nom'}`); fd.append('from_name', 'Formulaire Dossier ERP — site MOSIA'); fd.append('email', answers['mosia_demandeur_email'] || ''); fd.append('message', buildPlainTextReport()); // Les photos/plans ne passent plus par Web3Forms (réservé au plan payant) // mais par l'espace de dépôt pCloud — voir PCLOUD_UPLOAD_LINK plus haut. const response = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: fd }); const result = await response.json(); if(result.success){ card.innerHTML = `

Dossier transmis avec succès

Merci, votre dossier ERP a bien été envoyé à MOSIA. Vous recevrez une confirmation par e-mail et serez recontacté(e) dans les meilleurs délais.

`; } else { throw new Error(result.message || "Erreur lors de l'envoi"); } } catch(err){ if(submitBtn){ submitBtn.disabled = false; submitBtn.textContent = "Envoyer le dossier"; } alert("Une erreur est survenue lors de l'envoi de votre dossier. Merci de réessayer, ou de nous contacter directement au 06 83 08 82 85.\n\nDétail technique : " + err.message); } }); /* init */ renderStep(0); });