Story CP-021 : Contrôle d'accès aux modules (Frontend) : Navigation + Cartes de vente incitative¶
Module
: control-plane Tranche
: Tranche 7c de l'architecture (dissociée de CP-007) Contexte de marque
: Papillon HR Suite (l'affichage des ventes incitatives est réservé à Papillon) Priorité
: 7 (après CP-020) Dépend de
: CP-020 Complexité estimée
: M
Objectif¶
Mettre en œuvre l'expérience de gestion des modules en front-end : les modules verrouillés apparaissent dans la navigation avec un style distinct, et un clic dessus affiche une carte de vente incitative. Les administrateurs voient un bouton « S'abonner » ; les employés voient un message « Contactez votre administrateur ». Cette tranche utilise l'API du catalogue de modules de CP-020 et le backend de gestion des modules de CP-007.
Portée du backend¶
Aucun nouveau travail sur le backend dans cette tranche. Utilise :
- GET /api/v1/tenant/modules (de CP-007) — statuts des modules du tenant
- GET /api/v1/tenant/modules/catalog (de CP-020) — catalogue complet avec tarification
Portée du frontend¶
Pages et routes¶
- Pas de page dédiée. Le filtrage des modules se manifeste sous la forme :
- Éléments de navigation (modules verrouillés dans la barre latérale/navigation inférieure)
- Cartes de vente incitative (lorsqu'on appuie sur un module verrouillé)
Composants¶
ModuleCard.tsx— Spécification du composant dans la section §19.2 du design. Props : name, description, icon, price, available, selected, locked, comingSoonDate, onSelect.ModuleUpsellSheet.tsx— Feuille inférieure (mobile) / popover (ordinateur de bureau) avec description du module, liste des fonctionnalités et CTA d'abonnement.- Intégration de la navigation : modifier la barre latérale/navigation inférieure pour afficher les modules verrouillés avec un style adapté.
Les descriptions des modules sont codées en dur
pour chaque module (pas pilotées par la base de données pour le MVP). Chaque module comporte : nom, icône, description en une ligne, liste à puces des fonctionnalités, prix de départ.
États de l'interface utilisateur (TOUS OBLIGATOIRES)¶
Fiche de vente incitative de module :
| State | Behavior | French Copy |
|---|---|---|
| Loading | Skeleton card | — |
| Available, unselected | White bg, standard border | — |
| Available, selected | Primary-light bg, primary border, checkmark | — |
| Locked (released) | 60% opacity, lock icon | Module description + "Souscrire" (admin) or "Contactez votre administrateur pour activer ce module." (employee) |
| Locked (coming soon) | 60% opacity, sparkle badge | "Bientot . {date}" |
| Error | Toast | "Une erreur est survenue." |
Comportement adaptatif¶
- 360px (mobile)
: modules verrouillés dans la barre de bas de page « Plus » avec une icône de cadenas. Appuyer → affichage de la barre de bas de page de vente incitative. - 1024px+ (ordinateur)
: modules verrouillés dans la barre latérale avec une opacité de 50 % et une icône de cadenas. Cliquer → affichage d'une fenêtre contextuelle de vente incitative depuis la barre latérale.
Interactions¶
- L'administrateur appuie sur un module verrouillé
: affiche une carte de vente incitative avec le bouton « Souscrire ce module » → redirige vers la facturation (gestion des abonnements CP-009). - L'employé appuie sur un module verrouillé
: affiche une carte de vente incitative avec le texte « Contactez votre administrateur pour activer ce module » (sans bouton).
Micro-texte en français pour la vente incitative :
| Key | French Text |
|---|---|
modules.subscribe |
"Souscrire" |
modules.subscribe_cta |
"Souscrire ce module" |
modules.contact_admin |
"Contactez votre administrateur pour activer ce module." |
modules.coming_soon |
"Bientot . {date}" |
modules.error |
"Une erreur est survenue." |
| --- |
Critères d'acceptation¶
AC-057: Navigation shows locked modules
Given my tenant has ABSMGT=ACTIVE and PAYROL=INACTIVE
When I view the sidebar navigation
Then ABSMGT appears with full color and is clickable
And PAYROL appears at 50% opacity with lock icon
AC-058: Upsell card for admin
Given I am DG and tap a locked module
When the upsell card appears
Then I see the module description, feature list, price
And a "Souscrire ce module" button
AC-059: Upsell card for employee
Given I am EMPLOYE and tap a locked module
When the upsell card appears
Then I see the module description
And the text "Contactez votre administrateur pour activer ce module."
And no subscribe button
OHADA et règles réglementaires¶
- Aucune exigence réglementaire directe de l'OHADA concernant l'interface utilisateur de gestion des modules.
Normes et conventions¶
docs/standards/react-typescript-guidelines.md— §Intégration de la navigation, §Modèle de feuille inférieure, §Typage des props des composantsdocs/design/control-plane-design.md— §19.2 ModuleCard, §Module upsell
Exigences de test¶
Tests unitaires¶
- ModuleCard : s'affiche correctement pour chaque état (disponible, sélectionné, verrouillé, bientôt disponible)
- ModuleUpsellSheet : affiche le bouton « S'abonner » pour le rôle d'administrateur
- ModuleUpsellSheet : affiche le texte « Contacter l'administrateur » pour le rôle d'employé (pas de bouton)
- Navigation : les modules verrouillés s’affichent avec une opacité réduite et une icône de verrouillage
Tests d’intégration¶
- La navigation récupère le catalogue de modules et affiche correctement les modules actifs/verrouillés
- Le contenu de la carte de vente incitative correspond aux métadonnées du module codées en dur
Ce que l’assurance qualité va valider¶
- Les modules verrouillés sont visibles dans la navigation avec un style correct (opacité à 50 %, icône de verrouillage)
- La carte de vente incitative affiche le contenu correct pour l’administrateur par rapport à l’employé
- Mobile : comportement de la feuille inférieure de vente incitative
- Bureau : comportement de la fenêtre contextuelle de vente incitative
- Le bouton d'abonnement de l'administrateur redirige vers la facturation (CP-009)
Hors du périmètre¶
- Interface utilisateur d'activation/désactivation des modules — CP-009 (Gestion de la facturation/des abonnements)
- Affichage de la suspension par module — V2
- Remplacement du module administrateur — CP-012
Définition de « Terminé »¶
- [ ] Tous les endpoints backend sont implémentés et renvoient des réponses correctes — N/A (frontend uniquement)
- [ ] Toutes les pages frontend s'affichent correctement à 360px, 768px et 1024px
- [ ] Les 5 états de l'interface utilisateur sont implémentés (chargement, vide, erreur, hors ligne, succès)
- [ ] Les micro-textes en français correspondent exactement aux spécifications de conception
- [ ] Tous les critères d'acceptation sont satisfaits manuellement
- [ ] Tests unitaires écrits et réussis
- [ ] Tests d'intégration écrits et réussis
- [ ] Isolation multi-tenant vérifiée — N/A (le frontend lit l'API au niveau du tenant)
- [ ] L'écriture et la synchronisation hors ligne fonctionnent (Papillon) — catalogue de modules mis en cache pour la lecture hors ligne
- [ ] Pas de
anyen TypeScript — tous les types sont explicites - [ ] Pas de types bruts Java — N/A (frontend uniquement)
- [ ] Les réponses API respectent le format d'enveloppe standard — N/A (consommateur uniquement)
- [ ] Entrées de piste d'audit créées pour chaque mutation de données — N/A (pas de mutations)