Feature #1312
open[EPIC] Tutoriel guidé GetYourJob — visite interactive "Take a tour" post-setup profil
0%
Description
Après qu'un nouvel utilisateur (candidat/développeur) a complété son profil, lui proposer un tutoriel interactif "visite guidée" : un spotlight met en évidence l'élément à cliquer, le reste de la page est assombri/flouté, une bulle explique l'action ("Maintenant que votre profil est rempli, vous pouvez…").
h2. Principes généraux (s'appliquent à tous les sous-tickets)
* *Un tutoriel indépendant par page* : Dashboard, Matching (modal de config), Match-offers (résultats), Mes offres sauvegardées (kanban), Mon profil (/profile/developer), Mes personas.
* *Skip indépendant par page* : bouton "Passer le tutoriel" toujours visible ; le skip d'une page ne skippe pas les autres.
* *Reprise* : si l'utilisateur quitte en cours de tutoriel (clic sur un élément qui navigue ailleurs, fermeture, etc.), à son retour sur la page il reprend à l'étape où il était.
* *Vu = terminé* : un tutoriel vu en entier (ou skippé) ne se réaffiche plus jamais.
* *Handoff inter-pages* : certains tutoriels envoient l'utilisateur vers une autre page (ex. fiche entreprise depuis match-offers) ; au retour il reprend à l'étape suivante.
* *Interaction réelle* : certaines étapes avancent quand l'utilisateur clique réellement l'élément cible (ouverture de modal, lancement du matching…), pas seulement via "Suivant".
h2. Architecture technique (framework partagé — voir sous-ticket core)
* Nouveau module @src/components/tour/@ : @TourProvider@ (contexte), @useTour@, @TourOverlay@ (spotlight par découpe + fond assombri/flouté, z-index au-dessus de 100000 pour passer devant toutes les modals existantes), configs de steps par page.
* Ancrage des cibles par attributs @data-tour="…"@ posés sur les composants existants.
* Persistance : localStorage clé versionnée @gyj_tour_state_v1@ (pattern existant @gyj_*@), par tour : @{ step, completedAt, skippedAt }@.
* i18n : copies FR dans @src/infrastructure/i18n/translations/fr.ts@ (+ EN), rendu via @useTranslation@.
* Aucune lib externe (pas de joyride/driver.js) — rien d'existant dans le repo, on garde le contrôle du blur/drag/handoff.
Sous-tickets = 1 framework core + 1 ticket par page.
RA Updated by Redmine Admin 28 days ago
- Subtask #1313 added
RA Updated by Redmine Admin 28 days ago
- Subtask #1314 added
RA Updated by Redmine Admin 28 days ago
- Subtask #1315 added
RA Updated by Redmine Admin 28 days ago
- Subtask #1316 added
RA Updated by Redmine Admin 28 days ago
- Subtask #1317 added
RA Updated by Redmine Admin 28 days ago
- Subtask #1318 added
RA Updated by Redmine Admin 28 days ago
- Subtask #1319 added
RA Updated by Redmine Admin 28 days ago
- branch set to feat/product-tour
Implémentation réalisée sur la branche @feat/product-tour@ (worktree, off origin/master) — commit 03df5f2.
* Framework core (#1313) : @src/components/tour/@ — TourProvider (monté dans layout.tsx), TourOverlay (spotlight 4-rects assombri+flouté, zIndex 100010, clic réel qui traverse la découpe), useTour, persistance localStorage @gyj_tour_state_v1@ (reprise exacte, skip indépendant par page, vu=terminé), événement @gyj-tour-step@ pour les actions de démo, copies FR/EN @tour.*@. 11 tests unitaires verts (tourStorage + intégrité registre/i18n).
* Les 6 tours wirés (#1314→#1319) : dashboard (9 étapes avec intro), modal matching-config (5), match-offers + panel analyse IA (14), offres sauvegardées/kanban (6, bascule auto en vue kanban sans écraser la préférence), profil (8, avec déplacement automatique du bloc « Informations générales » en démo, annulable), personas (6).
* Vérifié : tsc → zéro nouvelle erreur vs baseline ; 33/33 tests verts sur les suites des composants touchés.
PR vers dev à venir après validation.
RA Updated by Redmine Admin 28 days ago
Smoke test complet réalisé en local (build prod du worktree, port 3010, session DB forgée puis supprimée, navigateur headless gstack) — *les 6 tours passent* :
* *Dashboard* : intro centrée → spotlight « Modifier mon profil » → … → étape click-target « Lancer une recherche manuelle » ouvre réellement la modal → spotlight « Chercher les offres » PAR-DESSUS la modal → étape « matching auto » auto-skippée proprement (le compte a déjà des matchs, la cible n'existe pas) → Terminer → @completedAt@ persistant, aucun replay après reload.
* *Matching-config* : démarre à l'ouverture de la modal (@?configure=1@), spotlight des 4 sections, clic réel « Lancer le matching IA » = tour terminé + matching lancé. MatchingAgent absent en local → erreur applicative propre, et le tour match-offers ne démarre pas en état d'erreur (comportement voulu).
* *Match-offers* : démarre sur les résultats historiques ; testé pause Échap + reprise exacte après reload ; click-target « Voir l'analyse IA » ouvre le panel @OfferMatchDetail@ et le tour continue dedans (score 86% spotlighté) jusqu'à Terminer (14 étapes).
* *Offres sauvegardées* : kanban spotlighté, click-target note ouvre la NoteModal, puis test du *skip* : @skippedAt@ posé, aucun replay, les autres tours non affectés.
* *Profil* : click-target « Personnaliser » entre en mode édition, la démo déplace réellement le bloc « Informations générales » (la save-bar apparaît), clic réel « Annuler » restaure tout, fin du tour OK.
* *Personas* : spotlight persona actif, click-target « Générer le CV » ouvre la CVDownloadModal, fin OK. Bonus vérifié : un clic sur la cible d'une AUTRE étape n'avance pas le tour.
Console : aucune erreur liée au code du tour (seulement bruit préexistant tawk.to CORS + preload CSS en local).
État final localStorage : dashboard/matching-config/match-offers/profile/personas @completedAt@, saved-offers @skippedAt@ — exactement le contrat.
Reste : PR vers dev.
RA Updated by Redmine Admin 28 days ago
- pr_url set to https://github.com/omdev-tech/GetYourJob/pull/420
PR ouverte vers dev : https://github.com/omdev-tech/GetYourJob/pull/420 — merge automatique dès que la CI est verte.
RA Updated by Redmine Admin 28 days ago
- Status changed from Submitted to QA
PR #420 mergée dans dev (151828d5) après CI verte. Tous les sous-tickets passés en QA. Prochaine étape : promotion dev→preprod pour validation, puis preprod→master (gate admin Jenkins).
RA Updated by Redmine Admin 28 days ago
PR #422 (persistance en base par utilisateur) mergée dans dev (82f8b9c4), puis promotion dev→preprod PR #423 mergée (cab84401) — déploiement preprod automatique en cours, migration @tutorial_progress@ incluse.
À valider sur preprod : se connecter avec un compte n'ayant pas fait les tutoriels → le tour du dashboard démarre ; la progression/skip/complétion suit désormais le compte (plus le navigateur).
RA Updated by Redmine Admin 28 days ago
Round 2 de corrections QA preprod mergé dans dev : PR https://github.com/omdev-tech/GetYourJob/pull/424 (73a465d3, CI verte).
* Clic hors tuto ne ferme plus le tutoriel (seul « Passer le tutoriel » / × / Échap).
* Dashboard : spotlight sur la modal entière « Chercher les offres » ; la modal se ferme automatiquement aux étapes suivantes (8-9 corrigées).
* Offres sauvegardées : nouvelle étape « Votre note » sur la modal de note ouverte, puis fermeture auto avant l'étape rappel — rappel/lettre/plan/filtre persona s'affichent proprement.
* Profil : l'étape couleurs ouvre et spotlight le panneau « Personnaliser les couleurs » ; sortie du mode édition en fin de tutoriel.
* Modal matching : étape 5 « Lancer le matching IA » supprimée (4 étapes).
* NOUVEAU tour indépendant « Toutes les offres » (/offers) : intro, barre de recherche, filtres (déplie « Plus de filtres »), bascule Liste/Carte — fonctionne aussi pour les visiteurs non connectés.
En attente : promotion dev→preprod pour re-validation.
RA Updated by Redmine Admin 12 days ago
- Status changed from QA to Preprod
Déployé sur preprod : dev → preprod promu via PR #440 (merge 2026-07-24), qui inclut le tutoriel guidé (PR #420, commit 151828d5). Validable sur https://preprod.getyourjob.pro → statut Preprod.