205 lines
8.7 KiB
TypeScript
205 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { Info, AlertTriangle, Scale } from 'lucide-react';
|
|
import { usePostHog } from 'posthog-js/react';
|
|
|
|
interface SimulateurContentProps {
|
|
hideInfoPanel?: boolean;
|
|
}
|
|
|
|
export default function SimulateurContent({ hideInfoPanel = false }: SimulateurContentProps) {
|
|
const posthog = usePostHog();
|
|
|
|
// 📊 Écouter les messages de l'iframe pour tracker les calculs
|
|
useEffect(() => {
|
|
const handleMessage = (event: MessageEvent) => {
|
|
// Vérifier que le message vient de notre iframe
|
|
if (event.data?.type === 'simulateur_calculation') {
|
|
const data = event.data.data;
|
|
|
|
// Envoyer l'événement enrichi à PostHog
|
|
posthog?.capture('simulateur_calculation', {
|
|
// Paramètres du formulaire
|
|
ccn_id: data.ccn_id,
|
|
ccn_nom: data.ccn_nom,
|
|
categorie: data.categorie,
|
|
statut: data.statut,
|
|
abattement_active: data.abattement_active,
|
|
abattement_profession: data.abattement_profession,
|
|
|
|
// Cachets, heures, dates
|
|
cachets: data.cachets,
|
|
heures: data.heures,
|
|
dates_travail: data.dates_travail,
|
|
nombre_jours: data.nombre_jours,
|
|
|
|
// Montant saisi et type
|
|
montant_saisi: data.montant_saisi,
|
|
type_calcul: data.type_calcul,
|
|
|
|
// Résultats calculés
|
|
resultat_brut: data.resultat_brut,
|
|
resultat_net: data.resultat_net,
|
|
resultat_cost: data.resultat_cost,
|
|
|
|
// Métadonnées
|
|
plafond_urssaf: data.plafond_urssaf,
|
|
timestamp: data.timestamp,
|
|
|
|
// Ajout du contexte sidebar
|
|
opened_from: 'sidebar'
|
|
});
|
|
|
|
console.log('📊 PostHog: Événement simulateur_calculation (sidebar) enrichi envoyé', {
|
|
categorie: data.categorie,
|
|
ccn: data.ccn_nom,
|
|
type_calcul: data.type_calcul,
|
|
montant_saisi: data.montant_saisi,
|
|
resultats: {
|
|
brut: data.resultat_brut,
|
|
net: data.resultat_net,
|
|
cost: data.resultat_cost
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
window.addEventListener('message', handleMessage);
|
|
|
|
return () => {
|
|
window.removeEventListener('message', handleMessage);
|
|
};
|
|
}, [posthog]);
|
|
|
|
return (
|
|
<div className="h-full">
|
|
<style jsx global>{`
|
|
.simulateur-iframe-sidebar {
|
|
width: 100%;
|
|
height: calc(100vh - 73px);
|
|
border: none;
|
|
background: white;
|
|
}
|
|
.simulateur-iframe-sidebar.compact {
|
|
height: 420px; /* Taille plus compacte pour le modal */
|
|
}
|
|
`}</style>
|
|
|
|
{/* Layout avec simulateur et info */}
|
|
<div className="h-full flex flex-col lg:flex-row">
|
|
|
|
{/* Simulateur principal */}
|
|
<div className="flex-1 min-w-0">
|
|
<iframe
|
|
src={hideInfoPanel ? "/simulateur-embed-compact.html" : "/simulateur-embed.html"}
|
|
className={hideInfoPanel ? "simulateur-iframe-sidebar compact" : "simulateur-iframe-sidebar"}
|
|
title="Simulateur de paie intermittent"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
{/* Panneau d'information (optionnel, masqué sur petits écrans ou en mode compact) */}
|
|
{!hideInfoPanel && (
|
|
<aside className="hidden xl:block w-80 border-l bg-slate-50 p-5 space-y-4 overflow-y-auto" aria-label="Aide et explications">
|
|
|
|
{/* Card : Mode d'emploi */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200/80 p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<Info className="w-4 h-4 text-indigo-600" />
|
|
</div>
|
|
<h3 className="text-sm font-semibold text-slate-900">Mode d'emploi</h3>
|
|
</div>
|
|
|
|
<ul className="space-y-2 text-xs text-slate-700">
|
|
<li className="flex items-start gap-2">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">1</span>
|
|
<span className="leading-snug">Choisissez la Convention Collective et le statut</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">2</span>
|
|
<span className="leading-snug">Indiquez les cachets/heures et dates travaillées</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">3</span>
|
|
<span className="leading-snug">Saisissez le montant (Brut, Net ou Coût employeur)</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">4</span>
|
|
<span className="leading-snug">Consultez les résultats avec le détail des cotisations</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="mt-3 pt-3 border-t border-slate-100">
|
|
<p className="text-xs text-slate-500">
|
|
<span className="font-medium text-slate-700">Taux à jour 2025</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card : Disclaimer compact */}
|
|
<div className="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/80 rounded-xl shadow-sm p-4">
|
|
<div className="flex items-start gap-2 mb-3">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<AlertTriangle className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xs font-semibold text-amber-900 mb-2">Limitations</h3>
|
|
<p className="text-xs text-amber-800 leading-relaxed mb-2">
|
|
Le simulateur ne prévoit pas certains cas particuliers
|
|
</p>
|
|
<ul className="text-xs text-amber-800 leading-relaxed space-y-1 ml-2">
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Mineurs de moins de 16 ans</span>
|
|
</li>
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Cumul annuel</span>
|
|
</li>
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Taxe sur les salaires</span>
|
|
</li>
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Taxe d'apprentissage</span>
|
|
</li>
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Non-résidents fiscaux</span>
|
|
</li>
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Contrats multi-mois</span>
|
|
</li>
|
|
<li className="flex items-start gap-1">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Plus de 2 cachets par jour</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-2 mt-3 pt-3 border-t border-amber-200/50">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<Scale className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xs font-semibold text-amber-900 mb-1">Mentions légales</h3>
|
|
<p className="text-xs text-amber-800 leading-relaxed">
|
|
<em>Sauf erreurs ou omissions.</em> Les résultats fournis par le simulateur peuvent être imprécis ou erronés.
|
|
Les informations communiquées par le simulateur n'engagent pas la responsabilité de Odentas Media SAS quant
|
|
à leur utilisation et/ou leur interprétation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|