feat(app): 3243 - Formulaire de contact : donner aux utilisateurs CLE accès aux questions sur la phase 2

app/src/components/dsfr/forms/EnhancedRadioButton.jsx

@@ -6,13 +6,13 @@ export default function EnhancedRadioButton({ label, description, picto, checked
     <button
       onClick={onChange}
       disabled={disabled}
-      className={`border-[1px] w-full flex items-center py-1 hover:bg-gray-50 active:bg-gray-100 hover:border-blue-france-sun-113 disabled:text-gray-400 disabled:hover:border-gray-200 disabled:hover:bg-white ${
+      className={`w-full flex items-center py-1 border hover:bg-gray-50 active:bg-gray-100 hover:border-blue-france-sun-113 disabled:text-gray-400 disabled:hover:border-gray-200 disabled:hover:bg-white ${
         checked && !disabled ? "border-blue-france-sun-113" : "border-gray-200"
       } ${className}`}>
       <div className={`m-3 text-lg ${disabled ? "text-gray-400" : "text-blue-france-sun-113"}`}>{checked ? <RiRadioButtonLine /> : <RiCheckboxBlankCircleLine />}</div>
       <div className="text-left">
-        <p>{label}</p>
-        <p className="text-sm text-gray-500">{description}</p>
+        <p className="reset">{label}</p>
+        <p className="reset text-sm text-gray-500">{description}</p>
       </div>
       <div className={`ml-auto flex justify-center items-center border-l h-20 w-24 ${disabled && "saturate-0 opacity-60"}`}>{picto}</div>
     </button>

app/src/scenes/contact/components/Article.jsx

@@ -1,16 +1,18 @@
 import React from "react";
 import { supportURL } from "@/config";
-import { HiArrowRight } from "react-icons/hi";
+import { Card } from "@codegouvfr/react-dsfr/Card";
 
 export default function Article({ article }) {
   return (
-    <a href={`${supportURL}/base-de-connaissance/${article.slug}`} target="_blank" rel="noopener noreferrer" className="border p-4 flex flex-col gap-4 group">
-      <h4 className="text-base font-semibold group-hover:text-gray-800">{article.title}</h4>
-      <p className="text-sm leading-relaxed text-gray-600">{article.description}</p>
-      <p className="text-sm text-blue-france-sun-113 underline underline-offset-4 mt-auto">
-        Lire l'article
-        <HiArrowRight className="inline-block ml-2" />
-      </p>
-    </a>
+    <Card
+      title={article.title}
+      desc={article.description}
+      enlargeLink
+      linkProps={{
+        href: `${supportURL}/base-de-connaissance/${article.slug}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+      }}
+    />
   );
 }

app/src/scenes/contact/components/PublicContactForm.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
 import { toastr } from "react-redux-toastr";
 import { department2region, translate } from "snu-lib";
 import API from "@/services/api";
 import { capture } from "@/sentry";
-import { categories, departmentOptions, getClasseIdFromLink, getQuestions, roleOptions } from "../contact.service";
+import { categories, departmentOptions, getClasseIdFromLink, roleOptions } from "../contact.service";
 
 import Button from "@/components/dsfr/ui/buttons/Button";
 import FileUpload, { useFileUpload } from "@/components/FileUpload";
@@ -27,7 +27,6 @@ export default function PublicContactForm({ category, question, parcours }) {
   const [lastName, setLastName] = useState("");
   const [department, setDepartment] = useState("");
   const [email, setEmail] = useState("");
-  const [message, setMessage] = useState("");
 
   const params = new URLSearchParams(window.location.search);
   const classeIdFromURL = params.get("classeId");
@@ -36,22 +35,16 @@ export default function PublicContactForm({ category, question, parcours }) {
 
   const { isPending, isError, data: classe } = useClass(classeId);
 
-  const questions = getQuestions(category, "public", parcours);
+  const classeString = `J'ai un compte volontaire et je souhaite m'inscrire au SNU dans le cadre de ma classe engagée : ${classe?.name}, établissement : ${classe?.etablissement?.name}.`;
+  const [message, setMessage] = useState(classe?.name && classe?.etablissement ? classeString : "");
 
   const disabled = () => {
     if (loading) return true;
-    if (!role || !category || !question || !firstName || !lastName || !email || !department) return true;
+    if (!role || !category || !question.label || !firstName || !lastName || !email || !department) return true;
     if (!message) return true;
     return false;
   };
 
-  useEffect(() => {
-    if (classe?.name && classe?.etablissement) {
-      const classeString = `J'ai un compte volontaire et je souhaite m'inscrire au SNU dans le cadre de ma classe engagée : ${classe?.name}, établissement : ${classe?.etablissement?.name}.`;
-      setMessage(classeString);
-    }
-  }, [classe?.name, classe?.etablissement]);
-
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
@@ -69,15 +62,15 @@ export default function PublicContactForm({ category, question, parcours }) {
 
       const response = await API.post("/SNUpport/ticket/form", {
         message,
-        subject: `${categories.find((e) => e.value === category)?.label} - ${questions.find((e) => e.value === question)?.label}`,
+        subject: `${categories.find((e) => e.value === category)?.label} - ${question.label}`,
         firstName,
         lastName,
         email,
         department,
         role,
         parcours,
         subjectStep1: category,
-        subjectStep2: question,
+        subjectStep2: question.label,
         region: department2region[department],
         fromPage: new URLSearchParams(window.location.search).get("from "),
         files: uploadedFiles,
@@ -98,7 +91,7 @@ export default function PublicContactForm({ category, question, parcours }) {
 
   return (
     <form onSubmit={handleSubmit} disabled={disabled()} autoComplete="on">
-      {question === "HTS_TO_CLE" && !classeIdFromURL && (
+      {question.value === "HTS_TO_CLE" && !classeIdFromURL && (
         <>
           <label className="w-full">
             Lien transmis par le référent
@@ -109,7 +102,7 @@ export default function PublicContactForm({ category, question, parcours }) {
           )}
         </>
       )}
-      {question === "HTS_TO_CLE" && classeId && (
+      {question.value === "HTS_TO_CLE" && classeId && (
         <div className="flex items-center border my-12 px-8 py-4">
           {isPending && <p className="animate-pulse text-center">Chargement de la classe...</p>}
           {isError && <p className="text-center">Impossible de récupérer les informations de votre classe engagée 🤔</p>}

app/src/scenes/contact/components/Solutions.jsx

@@ -1,27 +1,15 @@
 import React from "react";
 import Article from "./Article";
-import SecondaryButton from "@/components/dsfr/ui/buttons/SecondaryButton";
-import plausibleEvent from "@/services/plausible";
 
-export default function Solutions({ articles, showForm, setShowForm }) {
+export default function Solutions({ articles }) {
   return (
-    <div className="mb-8">
+    <section id="solutions" className="mb-8">
       <h2 className="text-xl font-semibold mb-4">Solutions proposées</h2>
       <div className="grid md:grid-cols-2 gap-4">
         {articles.map((e) => (
           <Article key={e.slug} article={e} />
         ))}
       </div>
-      {!showForm && (
-        <SecondaryButton
-          className="my-8 w-full md:w-auto"
-          onClick={() => {
-            setShowForm(true);
-            plausibleEvent("Besoin d'aide - Je n'ai pas trouve de reponse");
-          }}>
-          Ecrire au support
-        </SecondaryButton>
-      )}
-    </div>
+    </section>
   );
 }