Feature #1280
openTutoriels de la fiche événement (coachmarks page par page) — /EventDetails + 9 onglets
0%
## Tutoriels de la fiche événement (coachmarks) — Spec
10 tutos coachmarks sur /EventDetails : T0 accueil (1re ouverture de n'importe quel événement) + T1→T9 (1re ouverture de chaque onglet). Déclenchement si tutorialState.seen[ctx]===false. Copy FR définitive §3 intégrée mot pour mot.
### Décisions techniques (réutilise l'épic onboarding #1262)
- **Moteur** : étendre ProductTour (src/components/onboarding/ProductTour.jsx) en Coachmark — ajouts : trigger par contexte (first_open_event/first_open_tab), condition par étape (evt.fdr.config après création FDR), clic-extérieur=Passer, a11y (focus, Échap, annonce, contraste AA, surbrillance non uniquement chromatique). Conserve filtrage des cibles data-tour absentes.
- **Persistance** : entité base44 TutorialState (par user×espace, workspace-scoped) modélée sur OnboardingState ; paire functions.invoke getTutorialState/updateTutorialState (GET/PATCH /tutorials/:workspaceId) ; hook useTutorial(). updateTutorialState marque un contexte seen sans toucher aux autres + reset (réactivation).
- **Ancres** : ~35 data-tour stables sur le header EventDetails + les 9 composants d'onglet ; déclencheur 1re ouverture par onglet via activeTab.
- **Réactivation** : HelpMenu « Revoir le tutoriel de cette page » + « Revoir tous les tutoriels » (reset des 10) ; item checklist « Créer votre premier événement » ouvre la fiche + déclenche T0.
### Découpage (4 sous-tâches, ordre de dépendance)
1. #1281 Backend TutorialState + get/updateTutorialState (fondation)
2. #1282 Moteur Coachmark + config des 10 tutos + réactivation
3. #1283 Ancres data-tour + triggers : header/T0 + Plateau/Budget/Régie/Contrat
4. #1284 Ancres data-tour + triggers : Gestion/Communication/FDR/Chat/Emails
DoD = §6 du cahier. Copy FR définitive intégrée mot pour mot.
Description
Concevoir les **tutoriels guidés (coachmarks)** de la page événement `/EventDetails` et de chacun de ses 9 onglets. Source : cahier `scobby-tutoriels-fiche-evenement-cahier-developpement.md` (copy FR définitive). Suite du cahier Onboarding (#1262) : réutilise/étend son moteur de visite (`ProductTour`), le pattern d'état persisté par espace, le menu d'aide « ? » et la checklist.
**Principes (§0/§1) :** déclenché à la 1re utilisation d'un contexte, sautable (Passer/Échap/clic extérieur), réactivable ; 2–6 étapes/tuto, 1 idée/étape ; anti-fragile (cible `data-tour` STABLE, étape ignorée proprement si absente) ; granularité = 1 tuto d'accueil (T0) + 1 tuto par onglet (T1→T9).
**Périmètre :**
1. **Moteur `Coachmark` + `CoachmarkStep`** (§1) — étend `ProductTour` : overlay + spotlight sur cible `data-tour`, contrôles Précédent/Suivant/Passer + « n / N » + Terminer, **conditions d'étape** (ex. `evt.fdr.config` seulement après création de la feuille de route → sinon ignorée), a11y (focus, Échap, annonces lecteur d'écran, contraste AA, surbrillance non uniquement chromatique).
2. **~35 attributs `data-tour`** (§2) à poser sur `/EventDetails` (header) + les 9 onglets (Plateau, Budget, Régie, Édition contrat, Gestion, Communication, Feuille de route, Chat, Emails).
3. **10 tutoriels** (§3) : T0 (5 étapes) + T1→T9, copy FR intégrée **mot pour mot**. T0 se déclenche à la 1re ouverture d'un événement ; chaque Tn à la 1re ouverture de son onglet.
4. **Persistance serveur par (utilisateur × espace × contexte)** (§4) — entité `TutorialState` (`seen: Record<EventTutorialContext, boolean>`), endpoints `GET/PATCH /tutorials/:workspaceId`. Un tuto ne se déclenche que si `seen[context] === false`.
5. **Réactivation** (§5) — menu d'aide « ? » → « Revoir le tutoriel de cette page » (contexte = onglet actif) ; optionnel « Revoir tous les tutoriels de l'événement » (reset des 10 contextes). Lien depuis la checklist Premiers pas : l'item « Créer votre premier événement » ouvre la fiche et déclenche T0.
6. **A11y** (§1/DoD) : focus géré, Échap = passer, annonces lecteur d'écran, contraste AA, surbrillance non uniquement chromatique.
**Definition of Done :** voir §6 du cahier (10 tutos T0+T1→T9 copy mot pour mot ; data-tour stables + étape ignorée si absente ; déclencheurs 1re ouverture ; sautable/non bloquant ; réactivable sans effet de bord ; état persisté serveur par utilisateur×espace ; a11y ; captures anonymisées le cas échéant).
**Réutilise (déjà livré, épopée onboarding #1262) :** `ProductTour`/`OnboardingTourProvider`/`useTour` (`src/components/onboarding/ProductTour.jsx`), pattern `OnboardingState` + fonctions `functions.invoke` workspace-scoped (couture AppClient), `HelpMenu` (`src/components/onboarding/HelpMenu.jsx`), la checklist.
Stack Scobby : frontend React 18 + Vite (couture `src/api/client/` / `base44` AppClient) ; backend self-hosté `server/` NestJS + Prisma (hexagonal), schéma Prisma généré depuis `base44/entities/*.jsonc`.
RA Updated by Redmine Admin about 1 month ago
- Status changed from Submitted to Spec
RA Updated by Redmine Admin about 1 month ago
- Subtask #1281 added
RA Updated by Redmine Admin about 1 month ago
- Subtask #1282 added
RA Updated by Redmine Admin about 1 month ago
- Subtask #1283 added
RA Updated by Redmine Admin about 1 month ago
- Subtask #1284 added
RA Updated by Redmine Admin about 1 month ago
- spec_ref updated (diff)
**Spec & décomposition appliquées** (via /spec-ticket — scrum-master + PO validator, approuvé, a11y explicitée).
Découpage vertical en 4 sous-tâches, ordre de dépendance (fondation backend d'abord) :
1. **#1281** Backend — Entité TutorialState + get/updateTutorialState *(fondation — bloque le reste)*
2. **#1282** Frontend — Moteur Coachmark (extension de ProductTour) + config des 10 tutoriels + réactivation
3. **#1283** Frontend — Ancres data-tour + triggers : header/T0 + Plateau, Budget, Régie, Contrat
4. **#1284** Frontend — Ancres data-tour + triggers : Gestion, Communication, Feuille de route, Chat, Emails
Réutilise l'infra de l'épic onboarding #1262 (ProductTour, pattern OnboardingState, HelpMenu, checklist). Décisions techniques dans `spec_ref`. Copy FR définitive (§3) intégrée mot pour mot. Ticket laissé en **Spec** ; `spec_ref` posé.
RA Updated by Redmine Admin about 1 month ago
- branch set to feat/tutorials-1280
- pr_url set to https://github.com/Scobby-organisation/scobby/pull/98
Implémentation des 4 sous-tâches livrée dans la PR #98 (→ dev) : #1281 backend TutorialState, #1282 moteur Coachmark + 10 tutoriels + réactivation, #1283/#1284 les 36 ancres data-tour. Serveur test:unit 250 + e2e tutoriel + typecheck OK ; front lint/build/39 tests OK. Limite connue : variantes multi-artistes sans ancres (étapes sautées proprement).
RA Updated by Redmine Admin about 1 month ago
- Status changed from Spec to Preprod
- preprod_url set to https://preprod-scobby.omdev.tech
- deployed_at set to 07/01/2026
Épic livrée et **vérifiée en live sur preprod** (2026-07-01). 4 sous-tâches #1281→#1284 implémentées, testées, revue de code indépendante, QA navigateur.
PRs (flux PR→dev / merge / PR→preprod / merge, tous CI verts) :
- Fonctionnalité : #98 (→dev) / #99 (→preprod)
- Correctif QA « T0 jamais affiché » (résolution des cibles post-commit) : #100 / #101
- Correctif revue « onglet vide sans ancres marqué vu à tort » (sorties onDone vs onNoTarget) : #102 / #103
Vérifié en live : T0 (vue d'ensemble) s'affiche en 1/5 (spotlight header) puis 2/5 (onglets) ; stepping T1 Plateau ; réactivation menu d'aide (« Revoir le tutoriel de cette page » / « Revoir tous les tutoriels »). Serveur test:unit 250 + e2e ; front lint/build + 47 tests.
Limite connue : variantes multi-artistes (MultiArtist*) sans ancres → étapes sautées proprement. Prod = gate humain.