espace-paie-odentas/POPUP_INFO_SUIVI.md at 5e0997ede8537b1e0dfdb79373e758f58b477498

renaud/espace-paie-odentas

Fork 0

Renaud 5e0997ede8 Système notif tickets support

2025-10-14 23:21:58 +02:00

6.4 KiB

Raw Blame History

Documentation du popup d'information sur la confidentialité et le suivi affiché aux utilisateurs.

📍 Localisation

Le popup s'affiche en bas à gauche de l'écran sur toutes les pages de l'Espace Paie.

🎯 Fonctionnement

Affichage

Le popup apparaît 1,2 seconde après le chargement de la page
Il s'affiche avec une animation fluide (spring animation)
Il est non intrusif et peut être fermé facilement

Persistance

Le popup utilise le localStorage du navigateur pour se souvenir que l'utilisateur l'a déjà vu :

Clé de stockage : odentas_info_suivi_ack_v1
Valeur : "1" quand l'utilisateur a cliqué sur "J'ai compris"
Le popup ne s'affiche qu'une seule fois par navigateur

Réaffichage

Pour forcer le réaffichage du popup (utile pour les tests ou après une mise à jour) :

Ouvrir la console du navigateur (F12)
Exécuter : localStorage.removeItem('odentas_info_suivi_ack_v1')
Rafraîchir la page

Ou changer la version dans le code : storageKey = "odentas_info_suivi_ack_v2"

📝 Contenu

Message principal

Transparence & confidentialité

L'Espace Paie Odentas utilise des cookies essentiels pour votre authentification 
et votre sécurité, ainsi qu'un outil d'analyse (PostHog) pour améliorer 
nos services. Vos données sont hébergées en France 🇫🇷 et ne sont jamais 
revendues. En utilisant l'Espace Paie, vous acceptez notre Politique de 
Confidentialité.

Actions disponibles

"J'ai compris" - Ferme le popup et enregistre l'acceptation
"En savoir plus" - Ouvre la politique de confidentialité dans un nouvel onglet
Bouton X - Ferme le popup sans enregistrer (il réapparaîtra au prochain chargement)

🎨 Design

Style visuel

Position : Fixed, bas gauche (left-4 bottom-4)
Taille : 384px max-width (responsive sur mobile)
Arrière-plan : Gradient blanc vers gris avec backdrop blur
Bordure : Border slate-200
Ombre : Shadow-lg
Icône : ShieldCheck en bleu (sky-700)

Animation

Type : Spring animation
Stiffness : 380
Damping : 28
Effet : Apparition en fondu avec légère translation verticale et scale

Responsive

Desktop : 384px de largeur
Mobile : 92vw (92% de la largeur de l'écran)
S'adapte automatiquement à la taille de l'écran

🔧 Intégration technique

Fichiers

Composant : components/PopupInfoSuivi.tsx
Intégration : app/layout.tsx (layout racine)

Dépendances

framer-motion - Pour les animations fluides
lucide-react - Pour les icônes (ShieldCheck, X)
React hooks - useState, useEffect

Props

{
  policyUrl?: string;      // URL de la politique de confidentialité
                           // Par défaut: "/politique-confidentialite"
  
  storageKey?: string;     // Clé localStorage pour la persistance
                           // Par défaut: "odentas_info_suivi_ack_v1"
}

Utilisation

import PopupInfoSuivi from "@/components/PopupInfoSuivi";

// Dans le layout ou une page
<PopupInfoSuivi policyUrl="/politique-confidentialite" />

🔒 Conformité RGPD

Le popup informe les utilisateurs de :

✅ L'utilisation de cookies essentiels (authentification, sécurité)
✅ L'utilisation d'un outil d'analyse (PostHog)
✅ L'hébergement des données en France 🇫🇷
✅ La non-revente des données personnelles
✅ Le lien vers la politique de confidentialité complète

🎯 Bonnes pratiques

UX

Non bloquant : L'utilisateur peut continuer à naviguer
Discret : Petit format en bas à gauche
Clair : Message court et compréhensible
Actions simples : 2 boutons principaux

Accessibilité

role="dialog" - Indique qu'il s'agit d'une boîte de dialogue
aria-live="polite" - Annonce le contenu aux lecteurs d'écran
aria-label - Décrit le contenu du popup
Focus trap - Non implémenté car non bloquant

Performance

Lazy loading : Le popup ne se charge qu'après 1,2 seconde
Lightweight : Code minimal et optimisé
Exit animation : Animation de sortie fluide

🧪 Tests

Test manuel

Ouvrir l'Espace Paie en navigation privée
Vérifier que le popup apparaît après 1,2 seconde
Cliquer sur "J'ai compris"
Rafraîchir la page
Vérifier que le popup ne réapparaît pas

Test responsive

Ouvrir en mode mobile (DevTools)
Vérifier que le popup s'adapte à la largeur
Vérifier la lisibilité sur petit écran

Test accessibilité

Tester avec un lecteur d'écran
Naviguer au clavier (Tab, Enter)
Vérifier les labels ARIA

📊 Statistiques d'utilisation

Pour suivre l'utilisation du popup avec PostHog :

Événement d'affichage : Peut être ajouté dans useEffect
Événement de clic "J'ai compris" : Peut être ajouté dans acknowledge()
Événement de fermeture (X) : Peut être ajouté dans setOpen(false)

🔄 Mises à jour futures

Possibles améliorations

Multi-langues - Ajouter support i18n
Personnalisation - Adapter le message selon le rôle (staff/client)
Analytics - Tracker les interactions avec PostHog
A/B testing - Tester différentes variantes du message
Animations avancées - Ajouter des micro-interactions

Versions

v1 (actuelle) - Version initiale avec message de confidentialité
v2 (future) - Ajout d'analytics et personnalisation

🐛 Dépannage

Vérifier que framer-motion est installé : npm list framer-motion
Vérifier la console pour les erreurs JS
Vérifier le localStorage : localStorage.getItem('odentas_info_suivi_ack_v1')

L'utilisateur a peut-être cliqué sur X au lieu de "J'ai compris"
Le localStorage a été effacé (navigation privée, clear cookies)
Vérifier que la clé de stockage n'a pas changé

Animation saccadée

Vérifier la version de framer-motion
Désactiver les extensions de navigateur qui peuvent bloquer les animations
Tester sur un autre navigateur

6.4 KiB Raw Blame History

Popup d'Information sur la Confidentialité