@zevra/support-widget 0.2.0

package/src/composants/onglet-beta.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+// ============================================================================
+// L'onglet « Bêta » — la campagne en cours et ses scénarios.
+// ============================================================================
+//
+// Il lit `GET /api/support/programmes/actif`, que le relais transmet à
+// `GET /api/v1/programmes/actif` (PLAN.md §4).
+//
+// ⚠️ « Pas de campagne en cours » est un ÉTAT NORMAL, pas une panne : la
+// plupart du temps, une app n'a aucune bêta ouverte. L'écran le dit calmement
+// et n'affiche ni erreur, ni bouton « réessayer ».
+
+import { useCallback, useEffect, useState } from 'react'
+
+import { ErreurRelais, type ClientRelais } from '../client-relais'
+import type { ProgrammeActif } from '../types'
+import type { PrefillSignalement } from './onglet-signaler'
+import { Alerte, Bouton, Vide } from './briques'
+
+type Etat =
+  | { phase: 'chargement' }
+  | { phase: 'lu'; actif: ProgrammeActif }
+  | { phase: 'echec'; message: string }
+
+export function OngletBeta({
+  client,
+  onSignalerScenario,
+}: {
+  client: ClientRelais
+  onSignalerScenario: (prefill: PrefillSignalement) => void
+}) {
+  const [etat, setEtat] = useState<Etat>({ phase: 'chargement' })
+
+  // Voir `onglet-mes-demandes.tsx` pour le pourquoi des rappels et du témoin
+  // de vie : l'état initial est déjà « chargement », et le bouton
+  // « Réessayer » le repose lui-même.
+  const charger = useCallback(
+    (estVivant: () => boolean = () => true) =>
+      client.programmeActif().then(
+        (actif) => {
+          if (estVivant()) setEtat({ phase: 'lu', actif })
+        },
+        (erreur: unknown) => {
+          if (!estVivant()) return
+          setEtat({
+            phase: 'echec',
+            message:
+              erreur instanceof ErreurRelais
+                ? erreur.message
+                : 'Le programme de bêta n’a pas pu être lu.',
+          })
+        },
+      ),
+    [client],
+  )
+
+  useEffect(() => {
+    let vivant = true
+    void charger(() => vivant)
+    return () => {
+      vivant = false
+    }
+  }, [charger])
+
+  if (etat.phase === 'chargement') return <Vide>Lecture du programme de bêta…</Vide>
+
+  if (etat.phase === 'echec') {
+    return (
+      <>
+        <Alerte ton="err">{etat.message}</Alerte>
+        <Bouton
+          variante="fantome"
+          onClick={() => {
+            setEtat({ phase: 'chargement' })
+            void charger()
+          }}
+        >
+          Réessayer
+        </Bouton>
+      </>
+    )
+  }
+
+  const { programme, campagne } = etat.actif
+
+  if (!programme) {
+    return (
+      <Vide>
+        Aucun programme de bêta n’est ouvert sur cette application. Vos retours restent
+        les bienvenus dans l’onglet « Signaler ».
+      </Vide>
+    )
+  }
+
+  return (
+    <>
+      <div className="zvs-carte">
+        <strong className="zvs-coupe">{programme.nom}</strong>
+        {programme.description ? (
+          <p className="zvs-message__corps">{programme.description}</p>
+        ) : null}
+      </div>
+
+      {!campagne ? (
+        <Vide>
+          Le programme est ouvert, mais aucune campagne n’est en cours. Il n’y a rien à
+          dérouler pour l’instant.
+        </Vide>
+      ) : (
+        <div className="zvs-carte">
+          <strong className="zvs-coupe">{campagne.titre}</strong>
+          {campagne.consignes ? (
+            <p className="zvs-message__corps">{campagne.consignes}</p>
+          ) : null}
+
+          {campagne.scenarios.length === 0 ? (
+            <p className="zvs-aide">Cette campagne n’a pas de scénario à dérouler.</p>
+          ) : (
+            campagne.scenarios.map((scenario) => (
+              <div key={scenario.cle} className="zvs-scenario">
+                <strong className="zvs-coupe">{scenario.titre}</strong>
+                {scenario.etapes.length > 0 ? (
+                  <ol className="zvs-etapes">
+                    {scenario.etapes.map((etape, rang) => (
+                      <li key={`${scenario.cle}-${rang}`}>{etape}</li>
+                    ))}
+                  </ol>
+                ) : null}
+                <Bouton
+                  variante="fantome"
+                  onClick={() =>
+                    onSignalerScenario({
+                      type: 'beta',
+                      titre: scenario.titre,
+                      campagneId: campagne.id,
+                      // ⚠️ La CLÉ du scénario, pas son titre : c'est elle qui
+                      // agrège les retours dans le tableau de la campagne. Un
+                      // titre reformulé casserait le regroupement sans que
+                      // rien ne le signale.
+                      scenario: scenario.cle,
+                      scenarioLibelle: scenario.titre,
+                      demanderScore: true,
+                    })
+                  }
+                >
+                  Donner mon retour sur ce scénario
+                </Bouton>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </>
+  )
+}

package/src/composants/onglet-mes-demandes.tsx

@@ -0,0 +1,256 @@
+'use client'
+
+// ============================================================================
+// L'onglet « Mes demandes » — la liste, puis le fil d'une demande.
+// ============================================================================
+//
+// ⚠️ Le relais ne rend que les demandes de la personne connectée, et refuse en
+// 404 la lecture d'un fil qui n'est pas le sien (voir `relais/corps.ts` du
+// SDK). Ce composant n'est donc PAS la garde : il ne filtre rien, il affiche.
+// Une garde écrite ici se contournerait avec l'onglet Réseau.
+
+import { useCallback, useEffect, useState } from 'react'
+
+import { ErreurRelais, type ClientRelais } from '../client-relais'
+import type { DemandeLue, ResumeDemande } from '../types'
+import { Alerte, Bouton, Horodatage, Pastille, Vide } from './briques'
+
+type Etat =
+  | { phase: 'chargement' }
+  | { phase: 'liste'; demandes: ResumeDemande[] }
+  | { phase: 'echec'; message: string }
+
+export function OngletMesDemandes({ client }: { client: ClientRelais }) {
+  const [etat, setEtat] = useState<Etat>({ phase: 'chargement' })
+  const [ouverte, setOuverte] = useState<string | null>(null)
+
+  // ⚠️ Les écritures d'état vivent dans les RAPPELS de la promesse, jamais dans
+  // le corps de l'effet, et elles sont gardées par `estVivant`. Les deux vont
+  // ensemble :
+  //   - un `setState` synchrone dans un effet relance un rendu avant la
+  //     peinture (react-hooks/set-state-in-effect) ;
+  //   - une réponse qui arrive APRÈS la fermeture du tiroir écrirait dans un
+  //     composant démonté — cas banal ici, le tiroir s'ouvre et se ferme en
+  //     deux secondes, et la requête, elle, met le temps qu'elle met.
+  //
+  // `charger` ne repasse pas en « chargement » de lui-même : l'état initial
+  // l'est déjà, et c'est le bouton « Réessayer » — un geste, pas un effet —
+  // qui le repose.
+  const charger = useCallback(
+    (estVivant: () => boolean = () => true) =>
+      client.lister().then(
+        (page) => {
+          if (estVivant()) setEtat({ phase: 'liste', demandes: page.demandes ?? [] })
+        },
+        (erreur: unknown) => {
+          if (estVivant()) setEtat({ phase: 'echec', message: messageDe(erreur) })
+        },
+      ),
+    [client],
+  )
+
+  useEffect(() => {
+    let vivant = true
+    void charger(() => vivant)
+    return () => {
+      vivant = false
+    }
+  }, [charger])
+
+  if (ouverte) {
+    return <FilDemande client={client} id={ouverte} onRetour={() => setOuverte(null)} />
+  }
+
+  if (etat.phase === 'chargement') return <Vide>Lecture de vos demandes…</Vide>
+
+  if (etat.phase === 'echec') {
+    return (
+      <>
+        <Alerte ton="err">{etat.message}</Alerte>
+        <Bouton
+          variante="fantome"
+          onClick={() => {
+            setEtat({ phase: 'chargement' })
+            void charger()
+          }}
+        >
+          Réessayer
+        </Bouton>
+      </>
+    )
+  }
+
+  if (etat.demandes.length === 0) {
+    return <Vide>Vous n’avez encore envoyé aucune demande depuis cette application.</Vide>
+  }
+
+  return (
+    <>
+      {etat.demandes.map((demande) => (
+        <button
+          key={demande.id}
+          type="button"
+          className="zvs-carte zvs-carte--cliquable"
+          onClick={() => setOuverte(demande.id)}
+        >
+          <span className="zvs-ligne">
+            <span className="zvs-reference">{demande.reference}</span>
+            <Pastille statut={demande.statut} />
+          </span>
+          <span className="zvs-coupe">{demande.titre}</span>
+          <Horodatage valeur={demande.dernier_message_at} />
+        </button>
+      ))}
+    </>
+  )
+}
+
+/* ─── Le fil ────────────────────────────────────────────────────────── */
+
+type EtatFil =
+  | { phase: 'chargement' }
+  | { phase: 'lue'; demande: DemandeLue }
+  | { phase: 'echec'; message: string }
+
+function FilDemande({
+  client,
+  id,
+  onRetour,
+}: {
+  client: ClientRelais
+  id: string
+  onRetour: () => void
+}) {
+  const [etat, setEtat] = useState<EtatFil>({ phase: 'chargement' })
+  const [reponse, setReponse] = useState('')
+  const [envoi, setEnvoi] = useState(false)
+  const [echecReponse, setEchecReponse] = useState<string | null>(null)
+
+  // Même dispositif que la liste — et un bénéfice de plus ici : après l'envoi
+  // d'une réponse, le fil se recharge SANS clignoter par un écran d'attente.
+  const charger = useCallback(
+    (estVivant: () => boolean = () => true) =>
+      client.lire(id).then(
+        (demande) => {
+          if (estVivant()) setEtat({ phase: 'lue', demande })
+        },
+        (erreur: unknown) => {
+          if (estVivant()) setEtat({ phase: 'echec', message: messageDe(erreur) })
+        },
+      ),
+    [client, id],
+  )
+
+  useEffect(() => {
+    let vivant = true
+    void charger(() => vivant)
+    return () => {
+      vivant = false
+    }
+  }, [charger])
+
+  async function envoyer() {
+    if (reponse.trim() === '' || envoi) return
+    setEnvoi(true)
+    setEchecReponse(null)
+    try {
+      await client.repondre(id, reponse.trim())
+      setReponse('')
+      await charger()
+    } catch (erreur) {
+      setEchecReponse(messageDe(erreur))
+    } finally {
+      setEnvoi(false)
+    }
+  }
+
+  return (
+    <>
+      <Bouton variante="fantome" onClick={onRetour}>
+        ← Toutes mes demandes
+      </Bouton>
+
+      {etat.phase === 'chargement' ? <Vide>Lecture du fil…</Vide> : null}
+      {etat.phase === 'echec' ? <Alerte ton="err">{etat.message}</Alerte> : null}
+
+      {etat.phase === 'lue' ? (
+        <>
+          <div className="zvs-carte">
+            <span className="zvs-ligne">
+              <span className="zvs-reference">{etat.demande.demande.reference}</span>
+              <Pastille statut={etat.demande.demande.statut} />
+            </span>
+            <strong className="zvs-coupe">{etat.demande.demande.titre}</strong>
+            <p className="zvs-message__corps">{etat.demande.demande.description}</p>
+            <Horodatage valeur={etat.demande.demande.created_at} />
+          </div>
+
+          {etat.demande.messages.length === 0 ? (
+            <Vide>Aucune réponse pour l’instant.</Vide>
+          ) : (
+            etat.demande.messages.map((message) => (
+              <div
+                key={message.id}
+                className={`zvs-message${message.auteur === 'equipe' ? ' zvs-message--equipe' : ''}`}
+              >
+                <span className="zvs-meta">
+                  {message.auteur === 'equipe' ? 'Équipe Zevra' : 'Vous'} ·{' '}
+                  <Horodatage valeur={message.created_at} />
+                </span>
+                <p className="zvs-message__corps">{message.corps}</p>
+              </div>
+            ))
+          )}
+
+          {etat.demande.pieces.length > 0 ? (
+            <ul className="zvs-champ">
+              {etat.demande.pieces.map((piece) => (
+                <li key={piece.id} className="zvs-meta zvs-coupe">
+                  {piece.url ? (
+                    // `rel="noreferrer"` : l'URL présignée ne doit pas partir
+                    // en `Referer` vers la page de destination.
+                    <a href={piece.url} target="_blank" rel="noreferrer">
+                      {piece.nom}
+                    </a>
+                  ) : (
+                    piece.nom
+                  )}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+
+          {echecReponse ? <Alerte ton="err">{echecReponse}</Alerte> : null}
+
+          <div className="zvs-champ">
+            <label className="zvs-label" htmlFor="zvs-reponse">
+              RÉPONDRE
+            </label>
+            <textarea
+              id="zvs-reponse"
+              className="zvs-zone"
+              value={reponse}
+              onChange={(e) => setReponse(e.target.value)}
+            />
+          </div>
+          <div className="zvs-pied">
+            <Bouton onClick={envoyer} occupe={envoi}>
+              {envoi ? 'Envoi…' : 'Envoyer la réponse'}
+            </Bouton>
+          </div>
+        </>
+      ) : null}
+    </>
+  )
+}
+
+/**
+ * ⚠️ On affiche le message du relais tel quel quand il vient de lui : il est
+ * écrit pour être lu. Pour tout le reste (une exception JavaScript, un HTML de
+ * page 404), un générique — recopier un message technique dans une interface
+ * n'aide personne et peut divulguer une URL interne.
+ */
+function messageDe(erreur: unknown): string {
+  if (erreur instanceof ErreurRelais) return erreur.message
+  return 'Vos demandes n’ont pas pu être lues. Réessayez dans un instant.'
+}