feat(gating): garde UI — RequireFeature + UpsellGate + i18n #298

New issue

Closed

opened 2026-07-19 21:18:20 +00:00 by maximus · 0 comments

maximus commented

2026-07-19 21:18:20 +00:00

Owner

Composants de garde reutilisables : RequireFeature (wrapper de route) + UpsellGate (ecran verrouille) + i18n.

Fichiers concernes

src/components/shared/UpsellGate.tsx (creer) — ecran plein parametre (feature, tier requis), cadenas, 2 CTA.
src/components/shared/RequireFeature.tsx (creer) — ready ? (allowed ? children : <UpsellGate/>) : <Loader/>. Rendu en layout-route (Outlet) pour grouper les routes de meme feature.
src/i18n/locales/fr.json, src/i18n/locales/en.json (modifier) — cles upsell.* + nav.locked.

Depends on

#297 (useEntitlement)

Criteres d'acceptation

RequireFeature rend un loader tant que !ready (pas de flash upsell au boot).
UpsellGate a 2 CTA : « Obtenir » (voir decision ci-dessous) + « J'ai deja une cle » -> navigate("/settings/users").
Cles i18n upsell.* (titre, description par feature, CTA) + nav.locked presentes en FR ET EN.
RequireFeature utilisable comme layout-route ().

Review caveats (/review-spec — a respecter)

ready doit supprimer le cadenas partout (Sidebar/tuiles/profils/routes), pas seulement dans RequireFeature.

Decisions prises en planification

CTA « Obtenir » : bouton VISIBLE mais DESACTIVE (grise) avec le texte « Achat en ligne bientot disponible » — l'achat en ligne (#270/Stripe) n'est pas pret. Le flux actif est « J'ai deja une cle ». Le CTA s'activera avec #270.

Spec source

spec-decisions-feature-gating.md + spec-plan-feature-gating.md (racine, force-add ; verdict /review-spec jaune, corrections integrees).

Composants de garde reutilisables : RequireFeature (wrapper de route) + UpsellGate (ecran verrouille) + i18n. ## Fichiers concernes - `src/components/shared/UpsellGate.tsx` (creer) — ecran plein parametre (feature, tier requis), cadenas, 2 CTA. - `src/components/shared/RequireFeature.tsx` (creer) — `ready ? (allowed ? children : <UpsellGate/>) : <Loader/>`. Rendu en layout-route (Outlet) pour grouper les routes de meme feature. - `src/i18n/locales/fr.json`, `src/i18n/locales/en.json` (modifier) — cles `upsell.*` + `nav.locked`. ## Depends on - #297 (useEntitlement) ## Criteres d'acceptation - [ ] RequireFeature rend un loader tant que `!ready` (pas de flash upsell au boot). - [ ] UpsellGate a 2 CTA : « Obtenir <tier> » (voir decision ci-dessous) + « J'ai deja une cle » -> navigate("/settings/users"). - [ ] Cles i18n `upsell.*` (titre, description par feature, CTA) + `nav.locked` presentes en FR ET EN. - [ ] RequireFeature utilisable comme layout-route (<Outlet/>). ## Review caveats (/review-spec — a respecter) - `ready` doit supprimer le cadenas partout (Sidebar/tuiles/profils/routes), pas seulement dans RequireFeature. ## Decisions prises en planification - CTA « Obtenir <tier> » : bouton VISIBLE mais DESACTIVE (grise) avec le texte « Achat en ligne bientot disponible » — l'achat en ligne (#270/Stripe) n'est pas pret. Le flux actif est « J'ai deja une cle ». Le CTA s'activera avec #270. ## Spec source spec-decisions-feature-gating.md + spec-plan-feature-gating.md (racine, force-add ; verdict /review-spec jaune, corrections integrees).