odentas
2ec29d07ab
Le popup de confidentialité réapparaissait systématiquement après chaque déconnexion/reconnexion car localStorage.clear() supprimait la clé 'odentas_info_suivi_ack_v1'. Solution: Sauvegarder et restaurer cette clé lors du nettoyage du localStorage dans LogoutButton.tsx. Fixes: Popup s'affiche plusieurs fois par jour au lieu d'une seule fois
190 lines
6.7 KiB
Markdown
190 lines
6.7 KiB
Markdown
# Popup d'Information sur la Confidentialité
|
|
|
|
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) :
|
|
1. Ouvrir la console du navigateur (F12)
|
|
2. Exécuter : `localStorage.removeItem('odentas_info_suivi_ack_v1')`
|
|
3. 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
|
|
1. **"J'ai compris"** - Ferme le popup et enregistre l'acceptation
|
|
2. **"En savoir plus"** - Ouvre la politique de confidentialité dans un nouvel onglet
|
|
3. **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
|
|
```typescript
|
|
{
|
|
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
|
|
```tsx
|
|
import PopupInfoSuivi from "@/components/PopupInfoSuivi";
|
|
|
|
// Dans le layout ou une page
|
|
<PopupInfoSuivi policyUrl="/politique-confidentialite" />
|
|
```
|
|
|
|
## 🔒 Conformité RGPD
|
|
|
|
Le popup informe les utilisateurs de :
|
|
1. ✅ L'utilisation de cookies essentiels (authentification, sécurité)
|
|
2. ✅ L'utilisation d'un outil d'analyse (PostHog)
|
|
3. ✅ L'hébergement des données en France 🇫🇷
|
|
4. ✅ La non-revente des données personnelles
|
|
5. ✅ 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
|
|
1. Ouvrir l'Espace Paie en navigation privée
|
|
2. Vérifier que le popup apparaît après 1,2 seconde
|
|
3. Cliquer sur "J'ai compris"
|
|
4. Rafraîchir la page
|
|
5. Vérifier que le popup ne réapparaît **pas**
|
|
|
|
### Test responsive
|
|
1. Ouvrir en mode mobile (DevTools)
|
|
2. Vérifier que le popup s'adapte à la largeur
|
|
3. Vérifier la lisibilité sur petit écran
|
|
|
|
### Test accessibilité
|
|
1. Tester avec un lecteur d'écran
|
|
2. Naviguer au clavier (Tab, Enter)
|
|
3. 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
|
|
1. **Multi-langues** - Ajouter support i18n
|
|
2. **Personnalisation** - Adapter le message selon le rôle (staff/client)
|
|
3. **Analytics** - Tracker les interactions avec PostHog
|
|
4. **A/B testing** - Tester différentes variantes du message
|
|
5. **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
|
|
|
|
### Le popup ne s'affiche pas
|
|
1. Vérifier que framer-motion est installé : `npm list framer-motion`
|
|
2. Vérifier la console pour les erreurs JS
|
|
3. Vérifier le localStorage : `localStorage.getItem('odentas_info_suivi_ack_v1')`
|
|
|
|
### Le popup réapparaît alors qu'il a été fermé
|
|
1. L'utilisateur a peut-être cliqué sur X au lieu de "J'ai compris"
|
|
2. Le localStorage a été effacé (navigation privée, clear cookies)
|
|
3. Vérifier que la clé de stockage n'a pas changé
|
|
|
|
**⚠️ Bug corrigé (décembre 2024)** : Le popup réapparaissait à chaque déconnexion/reconnexion car le `LogoutButton` appelait `localStorage.clear()`, ce qui supprimait la clé `odentas_info_suivi_ack_v1`. Solution : sauvegarder et restaurer cette clé lors du nettoyage du localStorage.
|
|
|
|
### Animation saccadée
|
|
1. Vérifier la version de framer-motion
|
|
2. Désactiver les extensions de navigateur qui peuvent bloquer les animations
|
|
3. Tester sur un autre navigateur
|
|
|
|
## 📚 Ressources
|
|
|
|
- [Documentation framer-motion](https://www.framer.com/motion/)
|
|
- [Lucide Icons](https://lucide.dev/)
|
|
- [RGPD - Cookies et traceurs](https://www.cnil.fr/fr/cookies-et-traceurs-que-dit-la-loi)
|
|
- [Accessibilité - Dialog ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
|