Project

General

Profile

Actions

Feature #1280

open
RA

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

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

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:
(Total: 0:00 h)
spec_ref:

## 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.

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

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`.


Subtasks 4 (4 open0 closed)

Feature #1281: Backend — Entité TutorialState + getTutorialState/updateTutorialState (fondation)Preprod07/01/2026

Actions
Feature #1282: Frontend — Moteur Coachmark (extension de ProductTour) + config des 10 tutoriels + réactivationPreprod07/01/2026

Actions
Feature #1283: Frontend — Ancres data-tour + triggers : header/T0 + Plateau, Budget, Régie, ContratPreprod07/01/2026

Actions
Feature #1284: Frontend — Ancres data-tour + triggers : Gestion, Communication, Feuille de route, Chat, EmailsPreprod07/01/2026

Actions

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

  • Status changed from Submitted to Spec

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

  • Subtask #1281 added

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

  • Subtask #1282 added

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

  • Subtask #1283 added

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

  • Subtask #1284 added

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

  • 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 Actions #7

  • 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 Actions #8

  • 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.

Actions

Also available in: PDF Atom