feat: payment button with help text

MTES-MCT · Nov 26, 2024 · eb992ad · eb992ad
1 parent f3d08ae
commit eb992ad
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/app/espace-laureat/_components/Juridique.tsx b/app/espace-laureat/_components/Juridique.tsx
@@ -48,7 +48,7 @@ export const Juridique = ({
         <Badge severity="success">Accepté</Badge>
       </h2>
       <dl>
-        <dt className="mb-1">Montant de la subvention attribué</dt>
+        <dt className="mb-1">Montant de la subvention attribuée</dt>
         <dd className="max-w-sm">{formattedMontantSubventionAttribuee}</dd>
 
         <dt>Date de signature de la décision</dt>

diff --git a/app/espace-laureat/_components/Projet.tsx b/app/espace-laureat/_components/Projet.tsx
@@ -1,3 +1,5 @@
+import Button from "@codegouvfr/react-dsfr/Button";
+
 import { InfoBlock } from "@/components/info-block/InfoBlock";
 import { ProgressBar } from "@/components/progress-bar/ProgressBar";
 
@@ -26,13 +28,16 @@ export const Projet = ({
       <h2 className="mb-0">{intitule ?? "N/A"}</h2>
       {resume && <p className="text-neutral-500">{resume}</p>}
       {departementImplantation && (
-        <dl>
+        <dl className="mb-4">
           <dt>Département d'implantation</dt>
           <dd>{departementImplantation}</dd>
           {montantSubventionAttribuee && (
             <>
-              <dt className="mb-1">Versements</dt>
+              <dt className="mb-1">Subvention et versements</dt>
               <dd className="max-w-sm">
+                <p className="text-sm font-normal text-neutral-500 mb-1">
+                  {formattedMontantSubventionAttribuee} restant à demander.
+                </p>
                 <ProgressBar
                   value={0}
                   formattedValue="0 €"
@@ -44,6 +49,25 @@ export const Projet = ({
           )}
         </dl>
       )}
+
+      <div className="border-t-2 border-neutral-100 pt-4">
+        <p className="text-sm mb-4">
+          Vous pouvez demander le versement d'une avance au démarrage des
+          travaux à hauteur de 30% maximum du montant de la subvention.
+        </p>
+        <div className="flex justify-between items-end">
+          <Button
+            priority="tertiary"
+            linkProps={{
+              target: "_blank",
+              href: "https://www.ecologie.gouv.fr/fonds-vert",
+            }}
+          >
+            En savoir plus
+          </Button>
+          <Button className="self-end">Demander un versement</Button>
+        </div>
+      </div>
     </InfoBlock>
   );
 };
diff --git a/components/progress-bar/ProgressBar.tsx b/components/progress-bar/ProgressBar.tsx
@@ -10,7 +10,7 @@ export function ProgressBar({
   formattedMax: string;
 }) {
   return (
-    <div>
+    <div className="mb-2">
       <div className="rounded-full bg-white overflow-hidden w-full h-3 bg-blue-100">
         <div
           className="bg-blue-500 h-full"