Intégrer au site

Les pages /za/feedback du module prennent le cadre neutre commun aux modules. Un site qui veut son formulaire dans son propre design, avec son en-tête, son pied de page et ses composants, construit ses pages lui-même. Le module lui donne les données et les actions, le site garde la main sur l'apparence.

La feuille de route, ses fiches et son vote sont ceux du module Projets. Pour les construire dans le design du site, voir Intégrer Projets au site.

1. Choisir l'adresseCopier le lien de la section

FRAZA_MODULE_FEEDBACK_PUBLIC_PATH=/feuille-de-route

Les liens que le module écrit suivent cette adresse : le lien de suivi d'un rapport, dans le formulaire et dans les courriels. Le site doit donc servir deux pages :

La même adresse peut servir à la feuille de route du module Projets. Aucun projet de la rétroaction ne prend le slug nouveau ni suivi, et Projets ne les donne ni à une fiche ni à un projet.

Dès que la variable est réglée, les pages /za/feedback ne s'affichent plus : chacune redirige (307) vers la même adresse sous /feuille-de-route, paramètres compris. Un lien ancien ou un favori mène donc aux pages du site. Régler la variable une fois ces pages prêtes : pendant leur construction, la laisser vide garde les pages du module et les liens des courriels vers elles. Un chemin placé sous /za/feedback ne déclenche aucune redirection.

Seules les pages redirigent. Les routes /za/api/feedback/… restent servies : les pages du site s'en servent pour envoyer un rapport.

Avec plusieurs projets, le site sert le formulaire sous /feuille-de-route/<projet>/nouveau pour chaque projet autre que le principal. Le suivi reste /feuille-de-route/suivi/<jeton>. Voir Plusieurs projets.

2. Lire les données côté serveurCopier le lien de la section

@fraza-pro/module-feedback/server se lit depuis un Server Component, pendant une requête : getMyReports lit la session de la personne, et ne la retient que pour un compte client.

// app/(public)/feuille-de-route/suivi/[jeton]/page.js
import { notFound } from 'next/navigation';
import { getFollowedReport } from '@fraza-pro/module-feedback/server';
import { AuthorReplyForm, ReportView } from '@fraza-pro/module-feedback/public';

export const metadata = { title: 'Suivi', robots: { index: false, follow: false } };

export default async function Page({ params }) {
  const { jeton } = await params;
  const report = await getFollowedReport(jeton);
  if (!report) notFound();
  return (
    <MaMiseEnPage titre="Suivi du message">
      <ReportView report={report} />
      {report.canReply && <AuthorReplyForm token={jeton} />}
    </MaMiseEnPage>
  );
}

Un rapport, tel que son auteur le lit :

Jamais l'adresse, le contexte, l'étiquette ni les notes internes.

3. Agir depuis le navigateurCopier le lien de la section

@fraza-pro/module-feedback/public donne de quoi envoyer un rapport depuis un composant du site.

project est facultatif : le slug d'un projet, rien pour le principal. Quand le projet principal est privé, rien désigne le premier projet public et actif.

Un refus lève une Error dont message est en français et s'affiche tel quel, dont status est le statut HTTP, et dont code nomme le cas à traiter à part : form_expired (redemander un jeton et renvoyer), et pour un message de l'auteur report_closed (le rapport est fermé) ou report_anonymized.

Un formulaire écrit à la main garde les protections du module : un champ invisible passé en honeypot, et le jeton de fetchReportForm. context ne garde que les clés page, browser, system, screen, language et version.

4. Ou reprendre les composants du moduleCopier le lien de la section

Les composants suivent les jetons du thème : ils prennent les couleurs du site sans rien régler.

Les libellés sont exportés aussi : REPORT_TYPES, REPORT_TYPE_LABELS, REPORT_TYPE_CHOICES (les textes de chaque type dans le formulaire), progressLabel et progressVariant (l'état d'un rapport et la variante de son badge), formatDay.

// app/(public)/feuille-de-route/nouveau/page.js
import { ReportWizard } from '@fraza-pro/module-feedback/public';

export default async function Page({ searchParams }) {
  const { type, depuis } = await searchParams;
  return (
    <MaMiseEnPage titre="Écrire à l'équipe">
      <ReportWizard initialType={type ?? null} from={depuis ?? null} roadmapHref="/feuille-de-route" />
    </MaMiseEnPage>
  );
}

roadmapHref reste vide sans le module Projets. Avec lui, y mettre l'adresse de la feuille de route publique qui reçoit les rapports du projet.

Garder pour from un chemin du site, commençant par / : les pages du module ignorent tout le reste.

Un Server Component ne passe pas de fonction à ces composants, ni à aucun composant client : une icône ou un rappel déclenche une erreur de rendu. Passer des chaînes, des nombres et des booléens.

Plusieurs projetsCopier le lien de la section

Dès que le site a plus d'un projet, une page du site lit le projet dans son adresse et le passe au formulaire.

// app/(public)/feuille-de-route/[projet]/nouveau/page.js
import { notFound } from 'next/navigation';
import { getPublicProjects } from '@fraza-pro/module-feedback/server';
import { ReportWizard } from '@fraza-pro/module-feedback/public';

export default async function Page({ params }) {
  const { projet } = await params;
  const project = (await getPublicProjects()).find((p) => p.slug === projet && !p.isDefault);
  if (!project) notFound();
  return <ReportWizard project={project.slug} />;
}

Le suivi n'a pas de projet dans son adresse : le jeton désigne le rapport. report.project nomme le projet dans la vue de l'auteur, sauf pour le projet principal.

Un site sans rendu serveurCopier le lien de la section

Les routes publiques suffisent pour le formulaire : GET /za/api/feedback/public/form, GET /za/api/feedback/public/similar et POST /za/api/feedback/public/reports, et pour écrire à l'équipe depuis le suivi : POST /za/api/feedback/public/follow/<jeton>/messages. Voir API. Le suivi, lui, se lit côté serveur par getFollowedReport.