#2363 - fix retours sur la page de convention

front/src/app/contents/convention/conventionSummary.helpers.tsx

@@ -20,6 +20,44 @@ import { Cx } from "tss-react";
 const makeSignatoriesSubsections = (
   convention: ConventionReadDto,
 ): ConventionSummarySubSection[] => {
+  const shouldDisplayDefaultSignatoryBadge =
+    convention.status === "READY_TO_SIGN" ||
+    convention.status === "PARTIALLY_SIGNED";
+  const shouldDisplayDefaultAgencyBadge =
+    convention.status === "IN_REVIEW" ||
+    convention.status === "ACCEPTED_BY_COUNSELLOR";
+  const defaultSignatoryBadgeValue = (
+    key: string,
+  ): ConventionSummaryField | null =>
+    shouldDisplayDefaultSignatoryBadge
+      ? ({
+          key,
+          value: "Signature en attente",
+          badgeSeverity: "warning",
+        } satisfies ConventionSummaryField)
+      : null;
+
+  const defaultAgencyBadgeValue = (
+    hasAgencyWithRefersTo: boolean,
+    key: "dateApproval" | "dateValidation",
+    value: string,
+  ): ConventionSummaryField | null => {
+    if (!shouldDisplayDefaultAgencyBadge) {
+      return null;
+    }
+    if (
+      key === "dateValidation" ||
+      (key === "dateApproval" && hasAgencyWithRefersTo)
+    ) {
+      return {
+        key,
+        value,
+        badgeSeverity: "warning",
+      } satisfies ConventionSummaryField;
+    }
+    return null;
+  };
+
   return removeEmptyValue([
     {
       key: "beneficiary",
@@ -33,11 +71,9 @@ const makeSignatoriesSubsections = (
                 `Signée - Le ${toDisplayedDate({
                   date: new Date(convention.signatories.beneficiary.signedAt),
                 })}`,
-              badgeSeverity: convention.signatories.beneficiary.signedAt
-                ? "success"
-                : "warning",
+              badgeSeverity: "success",
             } satisfies ConventionSummaryField)
-          : null,
+          : defaultSignatoryBadgeValue("beneficiarySignedAt"),
         {
           key: "beneficiaryFirstname",
           label: "Prénom",
@@ -79,7 +115,7 @@ const makeSignatoriesSubsections = (
           title: "Représentant légal du bénéficiaire",
           fields: removeEmptyValue([
             convention.signatories.beneficiaryRepresentative.signedAt
-              ? {
+              ? ({
                   key: "beneficiaryRepSignedAt",
                   value:
                     convention.signatories.beneficiaryRepresentative.signedAt &&
@@ -89,12 +125,9 @@ const makeSignatoriesSubsections = (
                           .signedAt,
                       ),
                     })}`,
-                  badgeSeverity: convention.signatories
-                    .beneficiaryRepresentative.signedAt
-                    ? "success"
-                    : "warning",
-                }
-              : null,
+                  badgeSeverity: "success",
+                } satisfies ConventionSummaryField)
+              : defaultSignatoryBadgeValue("beneficiaryRepSignedAt"),
             {
               key: "beneficiaryRepFirstname",
               label: "Prénom",
@@ -147,12 +180,9 @@ const makeSignatoriesSubsections = (
                     convention.signatories.establishmentRepresentative.signedAt,
                   ),
                 })}`,
-              badgeSeverity: convention.signatories.establishmentRepresentative
-                .signedAt
-                ? "success"
-                : "warning",
+              badgeSeverity: "success",
             } satisfies ConventionSummaryField)
-          : null,
+          : defaultSignatoryBadgeValue("establishmentRepSignedAt"),
         {
           key: "establishmentRepFirstname",
           label: "Prénom",
@@ -190,7 +220,7 @@ const makeSignatoriesSubsections = (
         },
         {
           key: "establishmentRepSiret",
-          label: "Siret",
+          label: "SIRET",
           value: renderSiret(convention.siret),
         },
       ]),
@@ -212,12 +242,11 @@ const makeSignatoriesSubsections = (
                           .signedAt,
                       ),
                     })}`,
-                  badgeSeverity: convention.signatories
-                    .beneficiaryCurrentEmployer.signedAt
-                    ? "success"
-                    : "warning",
+                  badgeSeverity: "success",
                 } satisfies ConventionSummaryField)
-              : null,
+              : defaultSignatoryBadgeValue(
+                  "beneficiaryCurrentEmployerSignedAt",
+                ),
             {
               key: "beneficiaryCurrentEmployerFirstname",
               label: "Prénom",
@@ -258,7 +287,7 @@ const makeSignatoriesSubsections = (
             },
             {
               key: "beneficiaryCurrentEmployerSiret",
-              label: "Siret",
+              label: "SIRET",
               value: renderSiret(
                 convention.signatories.beneficiaryCurrentEmployer.businessSiret,
               ),
@@ -285,9 +314,13 @@ const makeSignatoriesSubsections = (
                 `Pré-validée - Le ${toDisplayedDate({
                   date: new Date(convention.dateApproval),
                 })}`,
-              badgeSeverity: convention.dateApproval ? "success" : "warning",
+              badgeSeverity: "success",
             } satisfies ConventionSummaryField)
-          : null,
+          : defaultAgencyBadgeValue(
+              !!convention.agencyRefersTo,
+              "dateApproval",
+              "Pré-validation en attente",
+            ),
         convention.agencyRefersTo
           ? {
               key: "agencyWithRefersTo",
@@ -309,9 +342,13 @@ const makeSignatoriesSubsections = (
                 `Validée - Le ${toDisplayedDate({
                   date: new Date(convention.dateValidation),
                 })}`,
-              badgeSeverity: convention.dateValidation ? "success" : "warning",
+              badgeSeverity: "success",
             } satisfies ConventionSummaryField)
-          : null,
+          : defaultAgencyBadgeValue(
+              false,
+              "dateValidation",
+              "Validation en attente",
+            ),
         {
           key: "agencyName",
           label: `Prescripteur ${convention.agencyRefersTo ? "lié" : ""}`,
@@ -428,7 +465,7 @@ const makeEstablishmentSubSections = (
         },
         {
           key: "siret",
-          label: "Siret",
+          label: "SIRET",
           value: renderSiret(convention.siret),
         },
       ],
@@ -503,7 +540,11 @@ const makeImmersionSubSections = (
       fields: [
         {
           key: "immersionObjective",
-          label: "Objectif",
+          label: `Objectif ${
+            convention.internshipKind === "immersion"
+              ? "de l'immersion"
+              : "du mini-stage"
+          }`,
           value: convention.immersionObjective,
         },
         {
@@ -572,14 +613,22 @@ const makeAdditionalInformationSubSections = (
           key: "individualProtection",
           label: "Protection individuelle",
           value: convention.individualProtection
-            ? `Oui: ${convention.individualProtectionDescription}`
+            ? `Oui${
+                convention.individualProtectionDescription
+                  ? ` : ${convention.individualProtectionDescription}`
+                  : ""
+              }`
             : "Non",
         },
         {
           key: "sanitaryPreventionDescription",
           label: "Mesures de prévention sanitaire",
           value: convention.sanitaryPrevention
-            ? `Oui: ${convention.sanitaryPreventionDescription}`
+            ? `Oui${
+                convention.sanitaryPreventionDescription
+                  ? ` : ${convention.sanitaryPreventionDescription}`
+                  : ""
+              }`
             : "Non",
         },
       ],
@@ -629,6 +678,7 @@ const printWeekSchedule = (convention: ConventionReadDto, cx: Cx) => {
             "fr-col-md-6",
             "fr-col-lg-4",
             "fr-col-xl-3",
+            "fr-my-3v",
           )}
           key={week.period.start.toISOString()}
         >
@@ -649,7 +699,7 @@ const printWeekSchedule = (convention: ConventionReadDto, cx: Cx) => {
           <div aria-hidden="true" className={fr.cx("fr-text--xs", "fr-m-0")}>
             --
           </div>
-          <p className={fr.cx("fr-text--xs")}>
+          <p className={fr.cx("fr-text--xs", "fr-mb-3v")}>
             {week.weeklyHours} heures de travail hebdomadaires
           </p>
           <ul
@@ -660,7 +710,10 @@ const printWeekSchedule = (convention: ConventionReadDto, cx: Cx) => {
             {week.schedule.map((daySchedule) => (
               <li
                 key={daySchedule}
-                className={cx(conventionSummaryStyles.subsectionScheduleDay)}
+                className={cx(
+                  fr.cx("fr-text--sm"),
+                  conventionSummaryStyles.subsectionScheduleDay,
+                )}
               >
                 {daySchedule}
               </li>

libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.scss

@@ -4,19 +4,42 @@
   &__section {
     border: 1px solid var(--grey-900-175);
 
+    .fr-text--xs {
+      color: var(--grey-425-625);
+    }
+
+    a[href] {
+      text-underline-offset: 4px;
+      word-break: break-word;
+      text-decoration: underline;
+      background-image: none;
+    }
+
     h2 {
       @include for-screen-min($bp-md) {
         margin-bottom: 0 !important;
       }
     }
 
     img {
-      width: 100px;
+      max-width: 100px;
+      height: fit-content;
+
+      @include for-screen-min($bp-md) {
+        max-width: 100%;
+      }
     }
 
-    &--fluid {
-      justify-content: space-between;
+    &__header {
       align-items: center;
+
+      &__main {
+        @include for-screen-min($bp-md) {
+          padding-left: 20px;
+          justify-content: space-between;
+          align-items: center;
+        }
+      }
     }
 
     &__id {

libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.styles.ts

@@ -2,8 +2,9 @@ import "./ConventionSummary.scss";
 
 export const conventionSummaryStyles = {
   section: "im-convention-summary__section",
+  sectionHeader: "im-convention-summary__section__header",
+  sectionHeaderMain: "im-convention-summary__section__header__main",
   sectionId: "im-convention-summary__section__id",
-  sectionFluid: "im-convention-summary__section--fluid",
   subsection: "im-convention-summary__subsection",
   subsectionHighlighted: "im-convention-summary__subsection--highlighted",
   subsectionHorizontalSeparator: