/* ClientBase, Homepage part 2: Beta pitch, Final CTA, HomePage */
// ============ COMPTEUR LIVE D'UTILISATEURS ============
// Stratégie : on appelle la RPC Supabase `get_public_user_counts()` UNE
// SEULE FOIS au premier mount, puis on cache le résultat dans
// window.__cbUserCounts pour que les autres montages du badge n'aient
// pas à refaire l'appel.
//
// Fallback déterministe si Supabase est offline OU si la RPC n'est pas
// (encore) déployée (migration 017) : un compteur baseline qui progresse
// dans le temps, pour que le badge ne disparaisse jamais visuellement.
const cbFallbackCount = () => {
const anchor = new Date("2026-05-01T00:00:00").getTime();
const now = Date.now();
const days = Math.max(0, (now - anchor) / 86400000);
const hourSeed = (new Date().getHours() * 7) % 4;
return Math.floor(247 + days * 0.85) + hourSeed;
};
// Promise mémoïsée avec TTL : un seul appel réseau par fenêtre de 30s,
// partagé par tous les composants qui montent un LiveProsBadge. Au-delà
// du TTL, le prochain appel refait la RPC pour refléter les suppressions
// de comptes côté admin (sinon le badge resterait à l'ancien chiffre
// pendant toute la session). Renvoie { pros, clients, total }.
const _CB_USER_COUNTS_TTL = 30_000;
const cbFetchUserCounts = (force = false) => {
const now = Date.now();
if (!force
&& window.__cbUserCountsPromise
&& window.__cbUserCountsAt
&& (now - window.__cbUserCountsAt) < _CB_USER_COUNTS_TTL) {
return window.__cbUserCountsPromise;
}
window.__cbUserCountsAt = now;
window.__cbUserCountsPromise = (async () => {
const fb = cbFallbackCount();
const fallback = { pros: fb, clients: 0, total: fb, real: false };
try {
if (!window.cbSupabase) return fallback;
const { data, error } = await window.cbSupabase.rpc("get_public_user_counts");
if (error || !data) return fallback;
const row = Array.isArray(data) ? data[0] : data;
if (!row) return fallback;
const pros = Number(row.pros) || 0;
const clients = Number(row.clients) || 0;
const total = Number(row.total) || (pros + clients);
return { pros, clients, total, real: true };
} catch {
return fallback;
}
})();
return window.__cbUserCountsPromise;
};
// Invalidation manuelle (utilisée par admin après une suppression).
const cbInvalidateUserCounts = () => {
try { window.__cbUserCountsPromise = null; window.__cbUserCountsAt = 0; } catch {}
};
// Badge live « X utilisateurs sur ClientBase ». Réutilisable partout :
// hero, BetaPitch, AuthShell, vitrine client. S'anime au scroll grâce au
// useCountUp partagé. Le tone par défaut est indigo (var(--accent)) ;
// passer tone="var(--cli-accent)" pour la version violette client.
//
// Props :
// - tone : couleur d'accent du badge
// - compact : version plus petite (auth shell)
// - role : "pro" | "client" | "all" (defaut "all") → chiffre affiché
// - labelSuffix : libellé après le nombre (defaut "utilisateurs sur ClientBase")
const LiveProsBadge = ({
tone = "var(--accent)",
compact = false,
role = "all",
labelSuffix,
} = {}) => {
// On démarre avec le fallback déterministe (pour avoir tout de suite
// quelque chose à animer), puis on remplace par le vrai chiffre dès
// que la RPC répond.
const [target, setTarget] = React.useState(() => cbFallbackCount());
React.useEffect(() => {
let alive = true;
const apply = (r) => {
if (!alive) return;
const v = role === "pro" ? r.pros
: role === "client" ? r.clients
: r.total;
setTarget(Math.max(0, v));
};
cbFetchUserCounts().then(apply);
// Re-fetch quand l'utilisateur revient sur l'onglet : si un admin a
// supprimé un compte dans une autre fenêtre, le badge se mettra à jour
// dès qu'on retourne sur la page (TTL court + invalidation au focus).
const onFocus = () => { cbFetchUserCounts(true).then(apply); };
window.addEventListener("focus", onFocus);
document.addEventListener("visibilitychange", onFocus);
return () => {
alive = false;
window.removeEventListener("focus", onFocus);
document.removeEventListener("visibilitychange", onFocus);
};
}, [role]);
const useCU = window.useCountUp;
const fallbackRef = React.useRef(null);
const [count, ref] = useCU ? useCU(target, { duration: 1400 }) : [target, fallbackRef];
const suffix = labelSuffix || "utilisateurs sur ClientBase";
return (
{count.toLocaleString("fr-FR")}
{suffix}
);
};
if (typeof window !== "undefined") {
window.LiveProsBadge = LiveProsBadge;
window.cbFetchUserCounts = cbFetchUserCounts;
window.cbInvalidateUserCounts = cbInvalidateUserCounts;
}
/* -------- BETA TESTERS, invitation card with benefits -------- */
const BetaPitch = ({ go }) => (
{/* Decorative accent, top-right bloom */}
{/* Top accent strip — indigo solide (couleur de marque). */}
{/* Bouton raccourci compact en coin haut-droite : pour les visiteurs
qui ont déjà lu et veulent sauter direct à l'inscription. Distinct
visuellement du CTA principal (plus petit, pill). */}
{/* Live counter : remplace l'ancien badge statique « Bêta ouverte »
par une preuve sociale dynamique qui s'incrémente au fil des
jours et anime au scroll (useCountUp). */}
On vous réserve une place.
Rejoignez les premiers utilisateurs et contribuez à créer l'outil qui va vous simplifier le quotidien.
{/* Benefits checklist, palette canonique cyclée (sauge, indigo,
rose, indigo) pour rythme sans casser la cohérence. */}
{/* Tous les icônes (et le ✓) en accent indigo brand : on ne
cycle plus sur sage/accent/rose, ça donnait un patchwork.
Bleu uniforme = cohérence visuelle + signal de marque. */}
{[
["euro", "Gratuit pendant toute la bêta"],
["sparkle", "Mise en place gratuite avec votre fichier clients"],
["chat", "Accès direct à l'équipe pour vos retours"],
["shield", "Données hébergées en France, conformes RGPD"],
].map(([icon, text]) => (
{text}
))}
{/* CTAs */}
Moins de 2 minutes. Sans carte bancaire.
);
/* -------- FINAL CTA -------- */
const FinalCTA = ({ go }) => (
Gratuit pendant la bêta · sans carte bancaire
Prêt à simplifier votre business ?
Installation en 10 minutes. Importez vos clients depuis Excel. On vous accompagne en direct si besoin.