Feature #1264
openFeature #1262: Onboarding premier utilisateur : wizard d'amorçage + profilage progressif + visite guidée
Frontend — WelcomeWizard 3 étapes + écran de fin (sautable, a11y, capture du rôle)
0%
Description
Modale plein écran d'amorçage, déclenchée quand `onboardingState.completed === false` pour l'espace courant. Barre 1/3 · 2/3 · 3/3, dégradé orange (#F59E0B→#EA580C), « Passer » discret en haut à droite à CHAQUE étape. Persiste via PATCH /onboarding/:workspaceId à chaque étape. Réutilise le système de rôles existant pour les invitations.
Composants (§7) : WelcomeWizard, WizardStep, RoleSelect, StructureTypeSelect, InviteTeamField.
COPY FR DÉFINITIVE (mot pour mot) :
— Étape 1 « Bienvenue & vous » (bloquant). Titre : « Bienvenue sur Scobby 👋 ». Sous-titre : « Deux minutes pour configurer votre espace. Vous pourrez tout modifier plus tard. ». Champs : Prénom (pré-rempli si dispo, requis) ; Nom (requis) ; « Quel est votre rôle ? » select requis : Direction · Programmation / Booking · Administration / Comptabilité · Régie / Technique · Communication · Restauration / Bar · Coordination bénévoles · Autre. Bouton « Continuer ».
— Étape 2 « Votre structure » (bloquant léger). Titre : « Parlez-nous de votre lieu ». Sous-titre : « L'essentiel pour démarrer. Le reste se complétera tout seul, au bon moment. ». Champs : Nom de la structure (requis → nomme l'espace) ; Type (select requis) : Salle de concert / SMAC · Festival · Théâtre · Centre culturel · Café-concert / bar culturel · Association · Autre ; Nombre d'événements par an (select facultatif) : moins de 10 · 10 à 30 · 30 à 80 · plus de 80. Boutons « Retour » · « Continuer ».
— Étape 3 « Invitez votre équipe » (facultatif). Titre : « Invitez votre équipe ». Sous-titre : « Ajoutez les personnes qui travailleront avec vous. Vous pourrez en inviter d'autres à tout moment. ». Champs : liste d'emails + rôle par invité (select : Administrateur · Membre · Bénévole). Boutons « Passer pour l'instant » · « Envoyer les invitations et terminer ».
— Écran de fin. Titre : « C'est prêt 🎉 ». Sous-titre : « Voici votre espace Scobby. On vous montre les grandes lignes ? ». Boutons : « Faire la visite guidée » · « Explorer par moi-même ».
Validation (§9) : requis É1 = prénom, nom, rôle ; requis É2 = nom structure, type. Email format + dédoublonnage liste invitations (É3). AUCUN champ lourd ici. A11y (§7) : focus piégé, Échap = passer, `aria-current`, contraste AA.
Dépend de : Backend OnboardingState (#1).
## Critères d'acceptation
- Le wizard s'ouvre quand `onboardingState.completed === false` pour l'espace courant, jamais pour un espace déjà terminé.
- Les 3 étapes affichent la copy FR exacte (titres, sous-titres, options, boutons) ; barre 1/3 2/3 3/3 ; « Passer » en haut à droite de chaque étape.
- Étapes 1 et 2 bloquantes (prénom+nom+rôle ; nom structure+type) ; étape 3 facultative et passable.
- Étape 3 valide le format email et dédoublonne ; chaque invité a un rôle branché sur le système existant.
- Avancement persisté via PATCH (currentStep, champs, skipped) ; « Passer » marque skipped et ferme proprement.
- Écran de fin : « Faire la visite guidée » / « Explorer par moi-même » ; sortie marque `completed:true`.
- A11y : focus piégé, Échap = passer, `aria-current`, contraste AA.
- Design : modale plein écran, dégradé orange #F59E0B→#EA580C, rounded-xl/rounded-full.
- lint + typecheck + tests frontend verts.
RA Updated by Redmine Admin about 1 month ago
- Status changed from Submitted to Preprod