Project

General

Profile

Actions

Feature #1282

open
RA

Feature #1280: Tutoriels de la fiche événement (coachmarks page par page) — /EventDetails + 9 onglets

Frontend — Moteur Coachmark (extension de ProductTour) + config des 10 tutoriels + réactivation

Feature #1282: Frontend — Moteur Coachmark (extension de ProductTour) + config des 10 tutoriels + réactivation

Added by Redmine Admin about 1 month ago. Updated about 1 month ago.

Status:
Preprod
Priority:
Normal
Assignee:
-
Start date:
07/01/2026
Due date:
% Done:

0%

Estimated time:
spec_ref:
build_status:
build_number:
ci_run_url:
scan_status:
scan_report_url:
deploy_status:
preprod_url:
https://preprod-scobby.omdev.tech
deployed_at:
07/01/2026
branch:
feat/tutorials-1280
pr_url:
https://github.com/Scobby-organisation/scobby/pull/98
security_key:
severity:
paused:

Description

Étend `src/components/onboarding/ProductTour.jsx` en moteur `Coachmark` (overlay + spotlight) avec `CoachmarkStep {anchor, title, body, condition?}`.

Ajouts vs ProductTour :
1. **Déclenchement PAR CONTEXTE** — un tuto ne démarre à la 1re ouverture d'un contexte que si `tutorialState.seen[context] === false` (via `useTutorial()`) ; triggers `first_open_event` (T0) et `first_open_tab` (T1→T9) ; marque `seen[context]=true` à Terminer/Passer.
2. **CONDITION par étape** — une étape avec `condition` non remplie (ex. `evt.fdr.config` seulement si la feuille de route est créée) est ignorée.
3. **Clic extérieur = Passer** (en plus de Passer/Échap).
4. Conserver : contrôles Précédent/Suivant/Passer + « n / N » + Terminer, et le filtrage des étapes dont la cible `data-tour` est absente.

Config des 10 tutos (fichier dédié) — copy FR §3 du cahier intégrée **MOT POUR MOT**. Cadences : T0 (5) evt.header.status/tabs/topcards/nav/actions ; T1 Plateau (3) ; T2 Budget (5) ; T3 Régie (4) ; T4 Contrat (5) ; T5 Gestion (4) ; T6 Communication (4) ; T7 Feuille de route (2, dont evt.fdr.config conditionnel) ; T8 Chat (2) ; T9 Emails (3).

**Réactivation** : dans `HelpMenu.jsx`, entrée « Revoir le tutoriel de cette page » (contexte = onglet actif, rejeu forcé même vu, sans effet de bord) + « Revoir tous les tutoriels de l'événement » (reset des 10). Item checklist « Créer votre premier événement » : ouvre la fiche et déclenche T0.

Style : dégradé orange #F59E0B→#EA580C, titres slate-900.

Dépend de : Backend TutorialState (#1).

## Critères d'acceptation
- Un tuto ne se déclenche que si `seen[ctx]===false` pour son contexte ; triggers `first_open_event` / `first_open_tab`.
- Condition par étape respectée (`evt.fdr.config` n'apparaît qu'après création de la feuille de route ; sinon ignorée).
- Sautable via Passer, Échap ET clic extérieur ; jamais bloquant ; target absente → étape sautée sans crash.
- **A11y** : focus déplacé sur l'élément actif, Échap ferme, annonce lecteur d'écran, contraste AA, surbrillance **non basée uniquement sur la couleur**.
- Les 10 tutos configurés avec la copy FR verbatim (§3) et les bons compteurs d'étapes (5/3/5/4/5/4/4/2/2/3).
- HelpMenu : « Revoir le tutoriel de cette page » (onglet actif, rejeu sans effet de bord) + « Revoir tous les tutoriels » (reset des 10).
- Checklist « Créer votre premier événement » ouvre la fiche et déclenche T0.
- Persistance serveur au Terminer/Passer via `useTutorial()`. lint + typecheck + tests frontend verts.

RA Updated by Redmine Admin about 1 month ago Actions #1

  • Status changed from Submitted to Preprod
  • preprod_url set to https://preprod-scobby.omdev.tech
  • deployed_at set to 07/01/2026
  • branch set to feat/tutorials-1280
  • pr_url set to https://github.com/Scobby-organisation/scobby/pull/98

Livré dans la PR #98 (→dev→preprod). Moteur Coachmark (spotlight, filtrage cible/condition, Précédent/Suivant/Passer, Passer/Échap/clic-extérieur, a11y) + config des 10 tutoriels (copy §3 mot pour mot) + EventTutorialController (T0 puis onglet, un à la fois) + réactivation TutorialProvider/HelpMenu. Correctifs fast-follow : #100/#101 (T0 affiché) et #102/#103 (onglet vide non marqué vu à tort). Vérifié en live sur preprod. 8 tests.

Actions

Also available in: PDF Atom