/* Page /plan-de-ciblage — le Plan de ciblage Boom Maker.
*
* Principe du produit : le prospect possède l'OBJECTIF et les FAITS, Boom Maker
* possède la ROUTE. On ne lui demande donc que ce que lui seul sait (son meilleur
* client, ce qui lui manque, où ça coince), et on lui apporte ce qu'il n'a pas
* (les cercles de cibles, l'ICP qu'il n'a pas nommé, les angles).
*
* Anti-friction : il colle son site, on le lit, ON PRÉ-REMPLIT. Il corrige au lieu
* de rédiger. Une seule vraie phrase à écrire (le clone), le reste en pastilles.
*
* Le scan dit la vérité : le cerveau met environ 90 secondes (mesuré). On annonce
* « moins de 2 min » et on fait avancer de vraies étapes. C'est la surprise qui
* fait fuir un prospect, pas l'attente annoncée.
*
* RESTE À BRANCHER :
* - le comptage Basile, qui donnera le chiffre de profondeur de marché (le
* cerveau produit les critères, jamais le nombre) ;
* - Stripe sur le bouton de déblocage ;
* - le PDF téléchargeable.
*/
const { useState, useEffect, useRef } = React;
const { Logo, ArrowUpRight, ThemeToggle, FooterMin } = window.BMShared;
const CALENDLY = 'https://calendly.com/julia-boommaker/30min';
const PRIX = 49;
/* Cadrage assumé du produit : on ne prétend pas dresser la carte exhaustive du
* marché, on sort les trois cercles à activer en premier. Phrase écrite en dur
* plutôt que demandée au modèle : c'est une promesse commerciale, elle ne doit
* pas varier d'un plan à l'autre. Elle vaut aussi bien pour une offre sectorielle
* qu'horizontale, et coupe court à l'objection « il en manque un ». */
const CADRAGE_CERCLES =
'Ce sont les trois cercles qu\'on activerait en premier, pas la liste exhaustive de ton marché. D\'autres existent : ceux-là passent devant.';
const TAILLES = ['Solo', '1 à 10', '10 à 50', '50 à 250', '250 et +'];
const COINCE = ['Les trouver', 'Les contacter', 'Traiter les réponses', 'Les closer'];
/* Pièces jointes : Vercel plafonne le corps de requête à ~4,5 Mo et le base64
* gonfle d'environ un tiers. Ces bornes sont aussi appliquées côté serveur. */
const MAX_OCTETS = 2 * 1024 * 1024;
/* Plafond sur le TOTAL, pas seulement par fichier : deux fichiers de 2 Mo font
* 4 Mo, soit ~5,4 Mo une fois encodés, au-dessus de la limite de Vercel. La
* requête serait alors rejetée AVANT d'atteindre le serveur, ce qui se traduit
* par un « Failed to fetch » sans le moindre message. */
const MAX_TOTAL_OCTETS = 2.5 * 1024 * 1024;
const MAX_FICHIERS = 2;
const poidsLisible = (o) => (o < 1024 * 1024 ? `${Math.round(o / 1024)} Ko` : `${(o / 1024 / 1024).toFixed(1)} Mo`);
/* Quand le cerveau élargit la fourchette « jusqu'aux grands groupes », il pose une
* borne haute technique (150000). Écrire « 20 à 150000 salariés » fait bricolé :
* au-delà d'un vrai plafond d'ICP, on dit « et plus ». */
const effectifLisible = (min, max) =>
Number.isFinite(max) && max >= 5000
? `${min} salariés et plus`
: `${min} à ${max} salariés`;
/* Étapes du scan, calées sur la vraie durée mesurée (environ 90 s). La dernière
* tient tant que la réponse n'est pas là : on n'annonce jamais une fin qui n'a
* pas eu lieu. */
const ETAPES = [
'Lecture de ton site…',
'Analyse de ton activité et de tes valeurs…',
'Identification de ton vrai levier…',
'Construction de tes cercles de cibles…',
'Repérage de la cible que tu n\'avais pas nommée…',
'Recherche des angles qui déclenchent…',
'Derniers recoupements…',
];
/* Le chiffre vient de Basile, jamais du modèle. Basile PLAFONNE son total à
* 100 000 (vérifié : « toutes les entreprises françaises actives » renvoie 100000).
* On écrit donc « plus de 100 000 » et jamais « 100 000 » : le chiffre héros du
* produit ne doit pas être un plafond déguisé en compte. */
const nf = new Intl.NumberFormat('fr-FR');
const useCompteur = (cible, actif) => {
const [n, setN] = useState(0);
useEffect(() => {
if (!actif || !cible) return;
const reduit = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduit) { setN(cible); return; }
let raf, debut = null;
const pas = (t) => {
if (!debut) debut = t;
const p = Math.min((t - debut) / 1400, 1);
setN(Math.round((1 - Math.pow(1 - p, 3)) * cible));
if (p < 1) raf = requestAnimationFrame(pas);
};
raf = requestAnimationFrame(pas);
// Filet : requestAnimationFrame est gelé si l'onglet passe en arrière-plan.
const filet = setTimeout(() => setN(cible), 1600);
return () => { cancelAnimationFrame(raf); clearTimeout(filet); };
}, [cible, actif]);
return n;
};
const BADGE_CLS = {
'Priorité 1': 'dg-b-p1',
'Angle non exploité': 'dg-b-new',
'Quick win': 'dg-b-win',
};
/* L'exemple était en texte grisé : lisible, mais inutilisable. Pour s'en servir
* il fallait le recopier à la main, donc presque personne ne le faisait et le
* formulaire redevenait une page blanche. Un clic l'écrit dans le champ, il n'y
* a plus qu'à corriger ce qui ne colle pas.
* N'apparaît que si le champ est vide : une fois qu'il a écrit, proposer
* d'écraser sa phrase serait un piège. */
const Exemple = ({ texte, vide, onUtiliser }) => {
if (!texte || !vide) return null;
return (
);
};
const PageNav = () => {
const [open, setOpen] = useState(false);
return (
<>
);
};
const PageBreadcrumb = () => (
);
async function poster(url, corps) {
let r;
try {
r = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(corps),
});
} catch (e) {
/* fetch ne rejette QUE si la requête n'a jamais abouti : coupure réseau, ou
* corps refusé avant d'atteindre le serveur. On marque l'erreur comme
* réseau : sur l'analyse, ce cas ne doit PAS faire échouer le scan, car le
* serveur continue son travail et le sondage retrouvera le plan. */
/* On n'accuse le poids des documents QUE s'il y en a réellement. Un prospect
* qui n'a rien joint et lit « ton document est trop lourd » cherche un
* problème qui n'existe pas. */
const avecFichiers = Array.isArray(corps?.fichiers) && corps.fichiers.length > 0;
const err = new Error(
avecFichiers
? "La connexion n'a pas abouti. Ton document est peut-être trop lourd : réessaie sans, ou avec un fichier plus léger."
: "La connexion n'a pas abouti. Vérifie ta connexion et réessaie."
);
err.reseau = true;
throw err;
}
if (r.status === 413) {
throw new Error('Tes documents sont trop lourds. Retire-en un ou choisis un fichier plus léger.');
}
const data = await r.json().catch(() => ({}));
if (!r.ok) {
const err = new Error(data.message || "Quelque chose s'est mal passé. Réessaie.");
// Le statut permet de distinguer « pas encore payé » (402, on patiente) d'une
// vraie panne, au retour de paiement où Make met quelques secondes à cocher Payé.
err.status = r.status;
err.code = data.error;
throw err;
}
return data;
}
/* Document imprimable — la version « à envoyer au client ». Caché à l'écran
* (.dg-print), il devient la seule chose visible à l'impression (voir le CSS).
* On reprend la voix du produit (tutoiement) pour rester cohérent avec la page. */
const PlanPrintable = ({ plan }) => {
const s = plan.profondeur_marche?.socle_comptable;
const prof = plan.profondeur;
const reagir = plan.ce_qui_les_fait_reagir || {};
const date = new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
return (
Boom MakerPlan de ciblage · {date}
Ton plan de ciblage
Qui viser, combien ils sont, et comment leur parler.
Ce qu'on a compris de toi
{plan.contexte_entreprise}
{s && (
Ton socle adressable
{prof?.ok && (
{prof.plafonne ? 'plus de ' : ''}{nf.format(prof.total)}
Fourchette élargie au-delà de l'indication initiale, pour la raison ci-dessus.
)}
)}
{s.fonctions?.length > 0 && (
Qui décide : {s.fonctions.join(' · ')}
)}
)}
Tes cercles de cibles
{plan.regle_des_cercles &&
{plan.regle_des_cercles}
}
{CADRAGE_CERCLES}
{(plan.cercles || []).map((c) => (
Cercle 0{c.rang}
{c.nom}
{c.volume?.ok && (
{c.volume.plafonne ? 'plus de ' : ''}{nf.format(c.volume.total)} entreprises
)}
{c.logique}
{c.pourquoi}
))}
Cibles recommandées par Boom Maker
{(plan.icp_recommandes || []).map((icp) => (
{icp.badge}
{icp.nom}
{icp.pourquoi}
{icp.taille_cible} · {icp.fonction_decideur}
))}
Ce qui les fait réagir
{reagir.declencheur &&
Le vrai déclencheur
{reagir.declencheur}
}
{reagir.angle_a_eviter &&
Angle à éviter
{reagir.angle_a_eviter}
}
{reagir.preuve &&
Preuve à sortir
{reagir.preuve}
}
{plan.exclusions?.length > 0 && (
Hors marché
{plan.exclusions.map((e) => (
{e.qui}
{e.pourquoi}
))}
)}
Continuer avec Boom Maker
Ton plan est prêt. Voici comment on le transforme en rendez-vous, à deux
niveaux selon jusqu'où tu veux qu'on aille.
Niveau 1
On te livre les listes
On source et on enrichit les vrais contacts de ce plan : les personnes à joindre, avec leurs coordonnées. Tu repars avec une liste prête à activer.
À partir de 490 € one-shot
Niveau 2
On fait tourner la machine
Setup, messages, envoi et suivi des réponses, en continu chaque mois. On installe ta prospection de bout en bout et on la pilote pour toi.
À partir de 590 € / mois
Prix hors taxes. Le devis exact se cale sur ton volume et ton périmètre, on le voit ensemble.
);
};
/* Identifiant tiré par le navigateur AVANT de lancer l'analyse. C'est la clé de
* toute la fiabilité : il permet de retrouver le plan même si la connexion
* longue meurt en route (voir api/plan-statut.js). Même format que côté serveur. */
const nouvelIdClient = () => {
const b = new Uint8Array(16);
crypto.getRandomValues(b);
return Array.from(b, (x) => x.toString(16).padStart(2, '0')).join('');
};
const attendre = (ms) => new Promise((r) => setTimeout(r, ms));
/**
* Demande « mon plan est-il prêt ? » toutes les 3 secondes.
*
* Chaque requête dure une fraction de seconde : rien ne peut la couper, à la
* différence de l'analyse elle-même qui immobilise la connexion 2,5 minutes.
* Une sonde qui échoue n'est pas grave, on retente à la suivante.
*/
async function sonderPlan(id, encoreUtile) {
const debut = Date.now();
const LIMITE = 5 * 60 * 1000;
while (Date.now() - debut < LIMITE) {
await attendre(3000);
if (!encoreUtile()) return new Promise(() => {}); // le chemin direct a gagné
try {
const r = await poster('/api/plan-statut', { id });
if (r.statut === 'pret') return r;
} catch (e) {
/* on retente : une sonde ratée ne doit jamais faire échouer l'analyse */
}
}
throw new Error(
"L'analyse prend plus de temps que prévu. Ton plan est peut-être déjà prêt : " +
'recharge cette page dans une minute, on le retrouvera automatiquement.'
);
}
const PageContent = () => {
const [site, setSite] = useState('');
const [lecture, setLecture] = useState(false);
const [lectureLongue, setLectureLongue] = useState(false);
const [champs, setChamps] = useState(null);
const [erreur, setErreur] = useState('');
const [clone, setClone] = useState('');
const [manque, setManque] = useState('');
const [taille, setTaille] = useState('1 à 10');
const [coince, setCoince] = useState('Les trouver');
const [fichiers, setFichiers] = useState([]);
const [scan, setScan] = useState(false);
const [etape, setEtape] = useState(0);
const [diag, setDiag] = useState(null);
const [complet, setComplet] = useState(null); // le plan payant, récupéré après paiement
const [ouvert, setOuvert] = useState(false);
/* Lien perso de Julia : ?perso= → plans gratuits illimités, sans Stripe.
* Capturé à l'ouverture, AVANT que le scan ne réécrive l'URL en ?id=. */
const [perso] = useState(() => {
try { return new URLSearchParams(window.location.search).get('perso') || ''; } catch { return ''; }
});
const [deblocage, setDeblocage] = useState(false);
// Capture du mail avant le téléchargement du PDF (chaque PDF devient un lead).
const [pdfDemande, setPdfDemande] = useState(false); // l'encart mail est ouvert
const [pdfMail, setPdfMail] = useState('');
const [pdfMailOk, setPdfMailOk] = useState(false); // mail déjà donné : on n'embête plus
const [pdfEnvoi, setPdfEnvoi] = useState(false);
const [pdfErreur, setPdfErreur] = useState('');
const [retour, setRetour] = useState(false); // on revient de Stripe
const refCible = useRef(null);
const refPromesse = useRef(null);
const refZone = useRef(null);
const refApres = useRef(null);
const refResultats = useRef(null);
const refClone = useRef(null);
const refManque = useRef(null);
/* Reprendre l'exemple : on écrit vraiment la phrase dans le champ, puis on
* place le curseur à la fin. L'exemple grisé seul obligeait à tout retaper,
* alors qu'il n'a souvent qu'un mot à corriger. */
const remplir = (setter, texte, ref) => {
if (!texte) return;
setter(texte);
setTimeout(() => {
const el = ref.current;
if (!el) return;
el.focus();
el.setSelectionRange(texte.length, texte.length);
}, 0);
};
const versLe = (ref) => {
if (!ref.current) return;
const reduit = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
ref.current.scrollIntoView({ behavior: reduit ? 'auto' : 'smooth', block: 'start' });
};
/* Le scan fait défiler de vraies étapes pendant que la requête tourne, et tient
* la dernière tant que la réponse n'est pas revenue. */
useEffect(() => {
if (!scan) return;
const it = setInterval(() => setEtape((e) => Math.min(e + 1, ETAPES.length - 1)), 13000);
return () => clearInterval(it);
}, [scan]);
/* Retour de paiement. La redirection Stripe recharge la page, donc l'aperçu a
* disparu : on repart de l'identifiant présent dans l'URL et on redemande le plan
* complet, que le serveur ne rendra qu'après avoir validé le paiement. */
useEffect(() => {
const p = new URLSearchParams(window.location.search);
// Le lien de paiement Stripe revient sur une URL fixe (?paye=1), sans l'id.
// On le récupère alors depuis le stockage local, posé avant la redirection.
let planId = p.get('id');
const retourPaiement = p.get('paye') === '1';
if (retourPaiement && !planId) {
try { planId = window.localStorage.getItem('bm_plan_paye'); } catch {}
}
if (!planId) return;
if (retourPaiement) {
/* Retour de paiement. Make met quelques secondes à cocher Payé après le
* paiement Stripe : on sonde /api/plan jusqu'à ce qu'il débloque, plutôt
* que d'afficher une erreur à quelqu'un qui vient de payer. */
setRetour(true);
try { window.localStorage.removeItem('bm_plan_paye'); } catch {}
window.history.replaceState({}, '', `/plan-de-ciblage?id=${planId}`);
(async () => {
for (let essai = 0; essai < 15; essai++) {
try {
await recupererPlan(planId);
setTimeout(() => versLe(refResultats), 60);
return;
} catch (e) {
// 402 = pas encore coché par Make : on patiente et on réessaie.
if (e.status !== 402) { setErreur(e.message); return; }
await new Promise((r) => setTimeout(r, 2500));
}
}
// Toujours pas débloqué après ~40 s : on rassure sans mentir. Le rechargement
// par ?id finira par afficher le plan dès que Make a coché Payé.
setErreur('Ton paiement est bien reçu. Ton plan se débloque dans un instant, recharge la page si besoin.');
})().finally(() => setRetour(false));
return;
}
/* Reprise d'un plan déjà généré : connexion perdue pendant l'analyse, onglet
* fermé, ou lien partagé. On le retrouve par son identifiant. Filet de
* sécurité : plus aucune analyse n'est perdue. On affiche le plan si gratuit
* ou payé, sinon le paywall (via acces_libre renvoyé par le serveur). */
setRetour(true);
poster('/api/plan-statut', { id: planId })
.then((r) => {
if (r.statut === 'pret') {
setDiag(r);
setTimeout(() => versLe(refResultats), 60);
}
})
.catch(() => {})
.finally(() => setRetour(false));
}, []);
/* Pièces jointes. Les limites viennent de Vercel, qui plafonne le corps de requête
* à ~4,5 Mo, et le base64 gonfle un fichier d'environ un tiers. On refuse ici, avec
* un message clair, plutôt que de laisser partir une requête qui échouerait. */
const ajouterFichier = (e) => {
const f = e.target.files?.[0];
e.target.value = ''; // sinon impossible de re-choisir le même fichier après retrait
if (!f) return;
setErreur('');
if (fichiers.length >= MAX_FICHIERS) {
setErreur(`On se limite à ${MAX_FICHIERS} documents, c'est déjà largement assez.`);
return;
}
if (f.type !== 'application/pdf' && !f.type.startsWith('image/')) {
setErreur('Formats acceptés : PDF ou image (png, jpg).');
return;
}
if (f.size > MAX_OCTETS) {
setErreur(`« ${f.name} » pèse ${(f.size / 1024 / 1024).toFixed(1)} Mo, la limite est de 2 Mo par document.`);
return;
}
const dejaPris = fichiers.reduce((s, x) => s + (x.taille || 0), 0);
if (dejaPris + f.size > MAX_TOTAL_OCTETS) {
setErreur(
`Trop lourd au total : tes documents feraient ${((dejaPris + f.size) / 1024 / 1024).toFixed(1)} Mo, ` +
`la limite est de 2,5 Mo. Retire un document ou choisis un fichier plus léger.`
);
return;
}
const lecteur = new FileReader();
lecteur.onload = () => {
// On enlève le préfixe « data:...;base64, » : l'API n'attend que les données.
const data = String(lecteur.result).split(',')[1] || '';
setFichiers((l) => [...l, { nom: f.name, type: f.type, taille: f.size, data }]);
};
lecteur.onerror = () => setErreur("Ce fichier n'a pas pu être lu, essaie un autre.");
lecteur.readAsDataURL(f);
};
const retirerFichier = (i) => setFichiers((l) => l.filter((_, j) => j !== i));
const lireSite = async () => {
setErreur('');
if (!site.trim()) { setErreur("Colle l'adresse de ton site, par exemple https://ton-site.fr"); return; }
setLecture(true);
/* Un site qui livre son texte directement est lu en 4 ou 5 secondes. Celui
* qui se dessine dans le navigateur (Webflow, React) oblige à en ouvrir un
* vrai côté serveur : une trentaine de secondes. Passé 7 secondes on sait
* qu'on est dans ce cas, et on le dit. Une attente expliquée se supporte,
* une attente muette fait fermer l'onglet. */
const lent = setTimeout(() => setLectureLongue(true), 7000);
try {
const r = await poster('/api/diagnostic-lecture', { site });
setChamps({
cible: r.cible, promesse: r.promesse, zone: r.zone,
/* Exemples grisés taillés pour SON métier. Si la lecture n'en a pas
* produit (site trop pauvre), on n'en invente pas : le champ reste sans
* exemple plutôt qu'avec celui d'un autre secteur. */
exempleClone: (r.exemple_clone || '').trim(),
exempleManque: (r.exemple_manque || '').trim(),
});
setTimeout(() => versLe(refApres), 60);
} catch (e) {
setErreur(e.message);
} finally {
clearTimeout(lent);
setLectureLongue(false);
setLecture(false);
}
};
const lancerScan = async () => {
setErreur('');
if (!clone.trim()) { setErreur('Décris ton meilleur client en une phrase, on en a besoin pour viser juste.'); return; }
if (!manque.trim()) { setErreur('Dis-nous ce qui te manque aujourd\'hui, c\'est ce qui oriente tout le plan.'); return; }
const edites = {
...champs, // garde les exemples grisés si le scan échoue et qu'on revient au formulaire
cible: refCible.current?.textContent.trim() || champs.cible,
promesse: refPromesse.current?.textContent.trim() || champs.promesse,
zone: refZone.current?.textContent.trim() || champs.zone,
};
setChamps(edites); // sinon une erreur réseau ferait perdre ses corrections
setScan(true);
setEtape(0);
/* On tire l'identifiant ICI et on l'inscrit tout de suite dans l'URL : si le
* prospect perd sa connexion ou ferme l'onglet par mégarde, un simple
* rechargement retrouve son plan au lieu de tout reperdre. */
const id = nouvelIdClient();
window.history.replaceState({}, '', `/plan-de-ciblage?id=${id}`);
let directeAGagne = false;
try {
/* Deux chemins en parallèle vers le même plan :
* - la requête d'analyse, rapide mais fragile (2,5 min sans échange, que
* beaucoup de réseaux coupent) ;
* - le sondage, en requêtes courtes que rien ne coupe.
* Le premier qui aboutit gagne. Une panne réseau sur le chemin direct ne
* doit PAS faire échouer le scan : le serveur, lui, va au bout. */
const directe = poster('/api/diagnostic', { id, site, ...edites, clone, taille, manque, coince, fichiers, perso })
.then((r) => ({ plan: r }))
.catch((e) => ({ err: e }));
const r = await Promise.race([
directe.then(({ plan, err }) => {
if (plan) { directeAGagne = true; return plan; }
// Vraie erreur (champs, quota, panne du modèle) : inutile de sonder.
if (err && !err.reseau) throw err;
// Coupure réseau : on laisse le sondage faire son travail.
return new Promise(() => {});
}),
sonderPlan(id, () => !directeAGagne),
]);
setDiag(r);
setTimeout(() => versLe(refResultats), 60);
} catch (e) {
setErreur(e.message);
} finally {
setScan(false);
}
};
/* Le déverrouillage ne se décide PAS dans le navigateur : on part chez Stripe, et
* c'est /api/plan qui, au retour, vérifie le paiement côté serveur avant de rendre
* le contenu. Forcer `ouvert` ici ne révélerait que des barres grises : le plan
* payant n'est pas dans la page. */
const debloquer = async () => {
setErreur('');
setDeblocage(true);
try {
// Plan gratuit (un des 3 de l'IP, ou coupe-circuit) : on révèle directement.
if (diag.acces_libre) {
await recupererPlan(diag.id);
setDeblocage(false);
return;
}
/* Plan payant : direction le lien de paiement Stripe, avec l'identifiant du
* plan accroché en client_reference_id. Après paiement, le scénario Make
* lit cet identifiant et coche Payé dans Airtable, ce qui débloque le plan.
* On garde aussi l'identifiant en local : le lien de paiement revient sur une
* URL fixe (sans l'id), c'est le stockage local qui nous permet de retrouver
* SON plan au retour. */
if (!diag.lien_paiement) {
throw new Error("Le paiement n'est pas encore disponible. Écris-nous, on débloque ton plan à la main.");
}
try { window.localStorage.setItem('bm_plan_paye', diag.id); } catch {}
const sep = diag.lien_paiement.includes('?') ? '&' : '?';
window.location.href = `${diag.lien_paiement}${sep}client_reference_id=${encodeURIComponent(diag.id)}`;
} catch (e) {
setErreur(e.message);
setDeblocage(false);
}
};
const recupererPlan = async (planId) => {
const r = await poster('/api/plan', { id: planId });
const p = r.plan;
setComplet(p);
/* Au retour de Stripe la page a été rechargée : l'aperçu n'existe plus. On le
* reconstruit depuis le plan, sinon le client vient de payer pour une page vide. */
setDiag({
id: planId,
contexte_entreprise: p.contexte_entreprise,
profondeur_marche: p.profondeur_marche,
profondeur: p.profondeur || { ok: false },
structure: {
cercles: (p.cercles || []).map((c) => ({ rang: c.rang, chaleur: c.chaleur })),
badges: (p.icp_recommandes || []).map((i) => i.badge),
},
confiance: p.confiance,
});
setOuvert(true);
};
/* Téléchargement du PDF, précédé de la capture du mail (obligatoire).
* Clic sur le bouton : si le mail a déjà été donné, on imprime tout de suite ;
* sinon on ouvre l'encart. La validation enregistre le mail PUIS imprime. */
const lancerPdf = () => {
if (pdfMailOk) { window.print(); return; }
setPdfErreur('');
setPdfDemande(true);
};
const validerMailPdf = async () => {
setPdfErreur('');
const mail = pdfMail.trim();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail)) {
setPdfErreur('Vérifie ton adresse email.');
return;
}
setPdfEnvoi(true);
try {
await poster('/api/plan-email', { id: diag.id, email: mail });
setPdfMailOk(true);
setPdfDemande(false);
// Laisse le rendu se stabiliser avant d'ouvrir la boîte d'impression.
setTimeout(() => window.print(), 150);
} catch (e) {
setPdfErreur(e.message);
} finally {
setPdfEnvoi(false);
}
};
const socle = diag?.profondeur_marche?.socle_comptable;
const prof = diag?.profondeur;
const compte = useCompteur(prof?.ok ? prof.total : 0, !!prof?.ok);
return (
<>
Plan de ciblage · 5 min
Tu prospectes. Mais qui, au juste ?
Qui viser, combien ils sont, et comment leur parler. Colle ton site :
on compte tes vraies cibles et on te dit par qui commencer.
{!scan && !diag && (
Colle ton site. On fait le reste.
01 · Ton site
{/* Entrée vaut clic sur « Lire mon site » : coller une adresse
puis appuyer sur Entrée est le réflexe de tout le monde, et
ne rien voir se passer donne l'impression d'un site cassé. */}
setSite(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !lecture) { e.preventDefault(); lireSite(); }
}} />
🔎{' '}
{lectureLongue
? 'Ton site affiche son contenu en JavaScript : on ouvre un vrai navigateur pour le lire. Compte une trentaine de secondes.'
: "On en extrait ton offre, tes valeurs et ta façon de parler. Tu n'auras qu'à corriger."}
{erreur && !champs &&
{erreur}
}
{champs && (
✨ Pré-rempli depuis ton site. Corrige si on s'est trompé.
Tu aides {champs.cible}
{' '}à {champs.promesse},
{' '}partout en {champs.zone}.
🧬
Clone ton meilleur client
Si tu pouvais en cloner un seul, ce serait qui ? Une phrase suffit.