@zevra/support-widget 0.2.0

package/src/composants/onglet-signaler.tsx

@@ -0,0 +1,369 @@
+'use client'
+
+// ============================================================================
+// L'onglet « Signaler » — une phrase, une capture, et c'est parti.
+// ============================================================================
+//
+// ⚠️ UN SEUL CHAMP (03/10/2026). Le formulaire demandait un type, un titre et
+// une description : trois décisions pour quelqu'un qui veut juste dire « ça
+// ne marche pas ». Il ne demande plus que ce qui se passe. Le type et le titre
+// sont posés par le triage IA de Support (`titre_provisoire`,
+// `type_provisoire`), qui ne remplace ainsi aucun choix humain. Un
+// pré-remplissage (retour de bêta) les envoie encore : là, ils sont connus.
+
+import { useCallback, useRef, useState } from 'react'
+
+import { capturerEcran, deposerBinaire, TYPE_MIME_CAPTURE, type CaptureFaite } from '../capture'
+import { choisirZone } from '../zone'
+import { ErreurRelais, type ClientRelais } from '../client-relais'
+import { relever, type SourceContexte } from '../contexte'
+import { tamponErreurs } from '../tampon-erreurs'
+import type { ContexteReleve, TypeDemande } from '../types'
+import { verifierSignalement } from '../validation'
+import { Alerte, Bouton, Champ } from './briques'
+
+export interface PrefillSignalement {
+  type?: TypeDemande
+  titre?: string
+  campagneId?: string
+  /** La CLÉ du scénario — c'est elle qui agrège les retours d'une campagne. */
+  scenario?: string
+  /** Le titre du scénario, pour l'écran. La clé (`connexion-sso`) n'est pas
+   *  une phrase : affichée telle quelle, elle a l'air d'une fuite technique. */
+  scenarioLibelle?: string
+  /** Affiche la note 1-5 : n'a de sens que sur un retour de bêta. */
+  demanderScore?: boolean
+}
+
+export interface ProprietesSignaler {
+  client: ClientRelais
+  /** Gardé pour la compatibilité des intégrations : le formulaire ne propose plus de type. */
+  typesOfferts?: readonly TypeDemande[]
+  version?: string | null
+  contexteSupplementaire?: () => Record<string, unknown>
+  prefill?: PrefillSignalement
+  captureOfferte: boolean
+  onEnvoye?: (reference: string) => void
+  /**
+   * Abandonner le pré-remplissage : appelé par « Signaler autre chose ».
+   *
+   * ⚠️ Ce n'est pas un confort. Sans lui, le formulaire suivant repart avec la
+   * `campagne_id` et le `scenario` du retour précédent — un bug d'affichage
+   * signalé après un retour de bêta serait compté comme un problème DE CE
+   * SCÉNARIO, et fausserait le tableau de la campagne sans que rien ne le
+   * signale.
+   */
+  onAbandonnerPrefill?: () => void
+}
+
+type Etat =
+  | { phase: 'saisie' }
+  | { phase: 'envoi' }
+  | { phase: 'envoye'; reference: string }
+  | { phase: 'echec'; message: string }
+
+export function OngletSignaler({
+  client,
+  version,
+  contexteSupplementaire,
+  prefill,
+  captureOfferte,
+  onEnvoye,
+  onAbandonnerPrefill,
+}: ProprietesSignaler) {
+  // Connus seulement par pré-remplissage : sinon, l'IA de Support les pose.
+  const type = prefill?.type ?? null
+  const titre = prefill?.titre ?? ''
+  const [description, setDescription] = useState('')
+  const [score, setScore] = useState<number | null>(null)
+  const [capture, setCapture] = useState<CaptureFaite | null>(null)
+  const [motifCapture, setMotifCapture] = useState<string | null>(null)
+  const [etat, setEtat] = useState<Etat>({ phase: 'saisie' })
+  const [montreDefauts, setMontreDefauts] = useState(false)
+  const enCapture = useRef(false)
+
+  const defauts = verifierSignalement({
+    type,
+    titre,
+    description,
+    score: prefill?.demanderScore ? score : null,
+  })
+  const defaut = (champ: string) => (montreDefauts ? defauts[champ] : undefined)
+
+  // ⚠️ DEUX relevés, et ce n'est pas une redondance.
+  //
+  // Celui-ci sert à MONTRER ce qui sera joint (le repli « ce qui sera joint
+  // automatiquement »). Le relevé qui PART est refait dans `envoyer()`, à
+  // l'instant de l'envoi : entre l'ouverture du widget et le clic, la personne
+  // a pu naviguer (route côté client), tourner son téléphone, ou provoquer
+  // l'erreur qu'elle vient décrire. Montrer un relevé figé au montage et en
+  // envoyer un autre serait une promesse non tenue ; n'en faire qu'un, figé,
+  // enverrait un contexte qui ne correspond plus à rien.
+  const relever_ = useCallback(
+    () => relevrLaFenetre(version, contexteSupplementaire),
+    [version, contexteSupplementaire],
+  )
+  // État initial PARESSEUX : le relevé a lieu au montage, pendant le premier
+  // rendu, et non dans un effet qui écrirait l'état juste après (ce qui
+  // relance un rendu avant la peinture). Le composant n'est monté qu'après un
+  // clic — jamais au rendu serveur — donc `window` est là.
+  const [contexte, setContexte] = useState<ContexteReleve>(relever_)
+
+  /**
+   * Joint une capture, de la page entière ou d'une zone tracée.
+   *
+   * ⚠️ RENONCER N'EST PAS ÉCHOUER. Échap pendant le tracé rend `null` : on
+   * repart sans message, parce qu'un « la capture a échoué » après un geste
+   * d'annulation ferait croire à une panne et relancerait la personne.
+   *
+   * ⚠️ `try/finally` : sans lui, un tracé abandonné laisserait le verrou posé
+   * et le bouton mort pour le reste de la session.
+   */
+  async function surCapture(surUneZone: boolean) {
+    if (enCapture.current) return
+    enCapture.current = true
+    setMotifCapture(null)
+    try {
+      const zone = surUneZone ? await choisirZone() : null
+      if (surUneZone && zone === null) return
+
+      const resultat = await capturerEcran(
+        typeof document !== 'undefined' ? document.body : null,
+        { zone },
+      )
+      if (resultat.faite) setCapture(resultat.capture)
+      else setMotifCapture(resultat.motif)
+    } finally {
+      enCapture.current = false
+    }
+  }
+
+  async function envoyer() {
+    setMontreDefauts(true)
+    if (Object.keys(defauts).length > 0) return
+    setEtat({ phase: 'envoi' })
+
+    try {
+      const pieces = capture ? await deposerLaCapture(client, capture) : []
+      const creee = await client.creer({
+        type,
+        titre: titre.trim() || null,
+        description: description.trim(),
+        // Relevé À L'INSTANT DE L'ENVOI — voir plus haut.
+        contexte: relever_(),
+        pieces,
+        campagne_id: prefill?.campagneId,
+        scenario: prefill?.scenario,
+        score: prefill?.demanderScore ? score : null,
+      })
+      setEtat({ phase: 'envoye', reference: creee.reference })
+      onEnvoye?.(creee.reference)
+    } catch (erreur) {
+      // Le message de l'API est déjà écrit pour être lu (« Le titre est
+      // vide »). Le remplacer par un générique perdrait la seule information
+      // utile ; le compléter par un code technique la noierait.
+      const message =
+        erreur instanceof ErreurRelais
+          ? erreur.message
+          : "Votre signalement n'a pas pu partir. Réessayez dans un instant."
+      setEtat({ phase: 'echec', message })
+    }
+  }
+
+  if (etat.phase === 'envoye') {
+    return (
+      <>
+        <Alerte ton="ok">
+          <strong>Merci, c’est envoyé.</strong>
+          <br />
+          Votre demande porte la référence <strong>{etat.reference}</strong>. Vous la
+          retrouverez dans l’onglet « Mes demandes », et la réponse arrivera par courriel.
+        </Alerte>
+        <Bouton
+          variante="fantome"
+          onClick={() => {
+            setDescription('')
+            setCapture(null)
+            setMontreDefauts(false)
+            setEtat({ phase: 'saisie' })
+            // ⚠️ Et on LÂCHE le scénario de bêta. Le garder rattacherait le
+            // signalement suivant — qui n'a rien à voir — à la campagne qu'on
+            // vient de quitter. Le tiroir change alors la `key` du formulaire,
+            // donc ce composant est remonté à neuf : les `setState` ci-dessus
+            // portent sur un état qui va disparaître, et c'est sans
+            // conséquence (ils rendent la même chose qu'un montage neuf).
+            onAbandonnerPrefill?.()
+          }}
+        >
+          Signaler autre chose
+        </Bouton>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {etat.phase === 'echec' ? <Alerte ton="err">{etat.message}</Alerte> : null}
+
+      {prefill?.scenario ? (
+        <Alerte>
+          Ce retour sera rattaché au scénario{' '}
+          <strong>{prefill.scenarioLibelle ?? prefill.scenario}</strong> de la campagne en
+          cours.
+        </Alerte>
+      ) : null}
+
+      <Champ
+        label="QUE SE PASSE-T-IL ?"
+        htmlFor="zvs-description"
+        erreur={defaut('description')}
+        aide="Une phrase suffit : on s’occupe du reste."
+      >
+        <textarea
+          id="zvs-description"
+          className="zvs-zone"
+          value={description}
+          placeholder="Ex. : le bouton Payer ne réagit plus depuis ce matin."
+          autoFocus
+          aria-invalid={defaut('description') ? true : undefined}
+          aria-describedby={defaut('description') ? 'zvs-description-err' : undefined}
+          onChange={(e) => setDescription(e.target.value)}
+          onKeyDown={(e) => {
+            // ⌘⏎ / Ctrl⏎ envoie, comme dans une messagerie.
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault()
+              void envoyer()
+            }
+          }}
+        />
+      </Champ>
+
+      {prefill?.demanderScore ? (
+        <Champ
+          label="VOTRE NOTE SUR CE SCÉNARIO"
+          htmlFor="zvs-score"
+          erreur={defaut('score')}
+          aide="Facultatif — 1 pénible, 5 fluide."
+        >
+          <select
+            id="zvs-score"
+            className="zvs-liste-deroulante"
+            value={score ?? ''}
+            onChange={(e) => setScore(e.target.value === '' ? null : Number(e.target.value))}
+          >
+            <option value="">Sans avis</option>
+            {[1, 2, 3, 4, 5].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </Champ>
+      ) : null}
+
+      {captureOfferte ? (
+        <div className="zvs-champ">
+          <span className="zvs-label">CAPTURE D’ÉCRAN</span>
+          {capture ? (
+            <>
+              {/* eslint-disable-next-line @next/next/no-img-element -- ce
+                  paquet n'est pas une app Next : `next/image` n'y existe pas,
+                  et la source est une data-URL produite à l'instant. */}
+              <img className="zvs-vignette" src={capture.apercu} alt="Aperçu de la capture" />
+              <Bouton variante="fantome" onClick={() => setCapture(null)}>
+                Retirer la capture
+              </Bouton>
+            </>
+          ) : (
+            <>
+              {/* La zone d'abord : c'est le geste qui produit une image
+                  lisible dans un ticket. La page entière reste à côté, parce
+                  qu'elle est le seul chemin possible au clavier — on ne trace
+                  pas un rectangle sans pointeur. */}
+              <div className="zvs-ligne">
+                <Bouton variante="fantome" onClick={() => surCapture(true)}>
+                  Choisir une zone
+                </Bouton>
+                <Bouton variante="fantome" onClick={() => surCapture(false)}>
+                  Toute la page
+                </Bouton>
+              </div>
+              {motifCapture ? <p className="zvs-aide">{motifCapture}</p> : null}
+            </>
+          )}
+        </div>
+      ) : null}
+
+      {/* Le relevé se rafraîchit à l'ouverture du repli : c'est le moment où
+          quelqu'un vient VOIR ce qui sera joint, et il doit voir l'état
+          courant, pas celui du montage. */}
+      <details className="zvs-repli" onToggle={() => setContexte(relever_())}>
+        <summary>Ce qui sera joint automatiquement</summary>
+        <p className="zvs-aide">
+          Ces informations aident à reproduire le problème. Les valeurs des paramètres
+          d’URL sont retirées ; seuls leurs noms sont conservés.
+        </p>
+        <pre className="zvs-code">{JSON.stringify(contexte, null, 2)}</pre>
+      </details>
+
+      <div className="zvs-pied">
+        <Bouton onClick={envoyer} occupe={etat.phase === 'envoi'}>
+          {etat.phase === 'envoi' ? 'Envoi…' : 'Envoyer'}
+        </Bouton>
+      </div>
+    </>
+  )
+}
+
+/** Le relevé réel, lu sur la fenêtre. Impur, isolé ici pour cette raison. */
+function relevrLaFenetre(
+  version: string | null | undefined,
+  supplement: (() => Record<string, unknown>) | undefined,
+): ContexteReleve {
+  if (typeof window === 'undefined') return {}
+  const source: SourceContexte = {
+    url: window.location?.href,
+    userAgent: window.navigator?.userAgent,
+    langue: window.navigator?.language,
+    largeur: window.innerWidth,
+    hauteur: window.innerHeight,
+    version,
+    erreurs: tamponErreurs.lire(),
+    extra: lireSupplement(supplement),
+  }
+  return relever(source)
+}
+
+/** Le supplément vient de l'app hôte : il n'a pas le droit de faire tomber le
+ *  formulaire de quelqu'un qui essaie de signaler un bug. */
+function lireSupplement(
+  supplement: (() => Record<string, unknown>) | undefined,
+): Record<string, unknown> | null {
+  if (!supplement) return null
+  try {
+    return supplement()
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Dépose la capture et rend son identifiant.
+ *
+ * Le fichier part DIRECTEMENT vers S3 par l'URL présignée : il ne traverse ni
+ * le relais ni le support. Un échec de dépôt ne fait pas échouer l'envoi — une
+ * demande sans sa capture vaut infiniment mieux qu'une demande perdue.
+ */
+async function deposerLaCapture(client: ClientRelais, capture: CaptureFaite): Promise<string[]> {
+  try {
+    const depot = await client.deposerPiece({
+      nom: 'capture.png',
+      type_mime: TYPE_MIME_CAPTURE,
+      octets: capture.octets,
+    })
+    const depose = await deposerBinaire(depot.url_put, capture.binaire, TYPE_MIME_CAPTURE)
+    return depose ? [depot.id] : []
+  } catch {
+    return []
+  }
+}

package/src/composants/tiroir.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+// ============================================================================
+// Le tiroir : la coquille des trois onglets.
+// ============================================================================
+//
+// Pourquoi un tiroir plutôt qu'une modale : le widget s'ouvre PAR-DESSUS une
+// page qu'on est en train de décrire. Une modale centrée masque exactement ce
+// dont on parle ; un panneau latéral laisse voir l'écran, et bascule en
+// panneau bas sur téléphone (feuille de style, pas JavaScript — le serveur ne
+// connaît pas la largeur de l'écran).
+
+import { useEffect, useRef, useState } from 'react'
+
+import type { ClientRelais } from '../client-relais'
+import type { TypeDemande } from '../types'
+import { OngletBeta } from './onglet-beta'
+import { OngletMesDemandes } from './onglet-mes-demandes'
+import { OngletSignaler, type PrefillSignalement } from './onglet-signaler'
+
+export type IdOnglet = 'signaler' | 'mes-demandes' | 'beta'
+
+const ONGLETS: readonly { id: IdOnglet; libelle: string }[] = [
+  { id: 'signaler', libelle: 'Signaler' },
+  { id: 'mes-demandes', libelle: 'Mes demandes' },
+  { id: 'beta', libelle: 'Bêta' },
+]
+
+export interface ProprietesTiroir {
+  client: ClientRelais
+  titre: string
+  typesOfferts: readonly TypeDemande[]
+  version?: string | null
+  contexteSupplementaire?: () => Record<string, unknown>
+  betaOfferte: boolean
+  captureOfferte: boolean
+  onFermer: () => void
+  onEnvoye?: (reference: string) => void
+}
+
+export function Tiroir({
+  client,
+  titre,
+  typesOfferts,
+  version,
+  contexteSupplementaire,
+  betaOfferte,
+  captureOfferte,
+  onFermer,
+  onEnvoye,
+}: ProprietesTiroir) {
+  const [onglet, setOnglet] = useState<IdOnglet>('signaler')
+  const [prefill, setPrefill] = useState<PrefillSignalement | undefined>()
+  const panneau = useRef<HTMLDivElement | null>(null)
+
+  const onglets = ONGLETS.filter((o) => o.id !== 'beta' || betaOfferte)
+
+  // Échap ferme. L'écouteur est posé sur le document parce que le focus peut
+  // être n'importe où dans le panneau — y compris sur un champ de saisie.
+  useEffect(() => {
+    const surTouche = (evenement: KeyboardEvent) => {
+      if (evenement.key === 'Escape') onFermer()
+    }
+    document.addEventListener('keydown', surTouche)
+    return () => document.removeEventListener('keydown', surTouche)
+  }, [onFermer])
+
+  // Le focus entre dans le panneau à l'ouverture : sans ce déplacement, le
+  // clavier reste derrière le voile et un lecteur d'écran continue d'annoncer
+  // la page, sur laquelle on ne peut plus cliquer.
+  useEffect(() => {
+    panneau.current?.focus()
+  }, [])
+
+  return (
+    <div className="zvs-racine">
+      {/* Le voile ferme au clic : c'est le geste attendu, et il double le
+          bouton pour qui l'aurait manqué. Il n'a pas de rôle ARIA — c'est le
+          bouton « Fermer » qui porte l'action pour le clavier. */}
+      <div className="zvs-voile" onClick={onFermer} aria-hidden="true" />
+      <div
+        ref={panneau}
+        className="zvs-tiroir"
+        role="dialog"
+        aria-modal="true"
+        aria-label={titre}
+        tabIndex={-1}
+      >
+        <div className="zvs-tete">
+          <h2 className="zvs-titre">{titre}</h2>
+          <button
+            type="button"
+            className="zvs-fermer"
+            onClick={onFermer}
+            aria-label="Fermer l’aide"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="zvs-onglets" role="tablist" aria-label="Sections de l’aide">
+          {onglets.map((entree) => (
+            <button
+              key={entree.id}
+              type="button"
+              role="tab"
+              id={`zvs-onglet-${entree.id}`}
+              aria-selected={onglet === entree.id}
+              aria-controls="zvs-panneau"
+              className="zvs-onglet"
+              onClick={() => {
+                setOnglet(entree.id)
+                // Changer d'onglet à la main efface le pré-remplissage : sans
+                // ça, un retour de bêta resterait rattaché à un scénario que
+                // la personne a quitté, et fausserait les statistiques de la
+                // campagne sans que personne ne s'en aperçoive.
+                if (entree.id === 'signaler') setPrefill(undefined)
+              }}
+            >
+              {entree.libelle}
+            </button>
+          ))}
+        </div>
+
+        <div
+          className="zvs-corps"
+          id="zvs-panneau"
+          role="tabpanel"
+          aria-labelledby={`zvs-onglet-${onglet}`}
+        >
+          {onglet === 'signaler' ? (
+            <OngletSignaler
+              // ⚠️ La `key` force un formulaire NEUF quand le
+              // pré-remplissage change : sans elle, React garde l'état de
+              // l'ancien et le titre du scénario précédent resterait affiché.
+              key={prefill?.scenario ?? 'libre'}
+              client={client}
+              typesOfferts={typesOfferts}
+              version={version}
+              contexteSupplementaire={contexteSupplementaire}
+              prefill={prefill}
+              captureOfferte={captureOfferte}
+              onEnvoye={onEnvoye}
+              onAbandonnerPrefill={() => setPrefill(undefined)}
+            />
+          ) : null}
+
+          {onglet === 'mes-demandes' ? <OngletMesDemandes client={client} /> : null}
+
+          {onglet === 'beta' ? (
+            <OngletBeta
+              client={client}
+              onSignalerScenario={(valeurs) => {
+                setPrefill(valeurs)
+                setOnglet('signaler')
+              }}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}