feat: add establishment section Appels d'offres

src/client/src/components/DataSheets/Sections/Establishment/Establishment.js

@@ -14,6 +14,7 @@ import Controles from "./Direccte/Controles";
 import Header from "./Header";
 import Helps from "./Helps";
 import ListEstablishment from "./ListEtablishments/ListEstablishment.jsx";
+import MarchesPublic from "./MarchesPublic/MarchesPublic.jsx";
 import Muteco from "./Muteco";
 import Relationship from "./Relationship";
 
@@ -33,6 +34,7 @@ const Establishment = ({ siret }) => {
         <Muteco siret={siret} />
         <Helps siret={siret} />
         <Agrements siret={siret} />
+        <MarchesPublic siret={siret} />
         <ListEstablishment siren={siren} isEstablishmentDisplayed={true} />
       </div>
       <ScrollToTopButton />

src/client/src/components/DataSheets/Sections/Establishment/MarchesPublic/MarchesPublic.jsx

@@ -0,0 +1,119 @@
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+
+import Source from "../../../../../containers/Source/Source.js";
+import { formatSiret } from "../../../../../helpers/utils/format.js";
+import { convertirMoisEnAnnees } from "../../../../../helpers/utils/utils.js";
+import { formatChiffre } from "../../../../../utils/donnees-ecofi/donnees-ecofi.js";
+import { formatUpperCase } from "../../../../../utils/entreprise/entreprise.js";
+import Value from "../../../../shared/Value/index.js";
+import BlocTitle from "../../SharedComponents/BlocTitle/BlocTitle.jsx";
+import NonBorderedTable from "../../SharedComponents/NonBorderedTable/NonBorderedTable.js";
+import SeeDetailsLink from "../../SharedComponents/SeeDetailsLink/SeeDetailsLink.js";
+import Subcategory from "../../SharedComponents/Subcategory/index.js";
+import { useMarchesPublic } from "./marchesPublic.gql.js";
+
+const MarchesPublic = ({ siret }) => {
+  const { loading, data, error } = useMarchesPublic(siret);
+  const [accordionOpen, setAccordionOpen] = useState(true);
+
+  if (loading || error || !siret) {
+    return null;
+  }
+
+  return (
+    <section id="marches" className="data-sheet__bloc_section">
+      <BlocTitle
+        isOpen={accordionOpen}
+        toggleAccordion={() => setAccordionOpen(!accordionOpen)}
+        text={" Appels d'offres"}
+      />
+
+      {accordionOpen && (
+        <div className="section-datas">
+          <Subcategory>
+            <div className="section-datas-marches">
+              <Source
+                si={"DECP"}
+                hasDateImport={false}
+                sourceCustom={null}
+                sourceDate={null}
+              />
+            </div>
+            <div className="data-sheet--table data-sheet--table-to-left">
+              {data?.marches?.length > 0 && (
+                <NonBorderedTable
+                  className="direccte-interactions-establishment__table"
+                  isScrollable={data?.marches?.length > 10}
+                >
+                  <thead>
+                    <tr>
+                      <th>Acheteur</th>
+                      <th>Objet</th>
+                      <th>CPV</th>
+                      <th>Procédure</th>
+                      <th>Montant</th>
+                      <th>Notifié le</th>
+                      <th>Durée</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data?.marches?.map(
+                      ({
+                        acheteur_id,
+                        objet,
+                        cpv_libelle,
+                        procedure,
+                        montant,
+                        dateNotification,
+                        dureeMois,
+                      }) => (
+                        <tr key={acheteur_id + dateNotification}>
+                          <td className="table-cell--nowrap">
+                            <SeeDetailsLink
+                              text={formatSiret(acheteur_id)}
+                              link={`/establishment/${acheteur_id}/`}
+                            />
+                          </td>
+
+                          <td>
+                            <Value value={formatUpperCase(objet)} />
+                          </td>
+                          <td>
+                            <Value value={formatUpperCase(cpv_libelle)} />
+                          </td>
+                          <td>
+                            <Value value={formatUpperCase(procedure)} />
+                          </td>
+                          <td>
+                            <Value value={formatChiffre(montant)} />
+                          </td>
+                          <td>
+                            <Value value={dateNotification} />
+                          </td>
+                          <td>
+                            <Value value={convertirMoisEnAnnees(dureeMois)} />
+                          </td>
+                        </tr>
+                      )
+                    )}
+                  </tbody>
+                </NonBorderedTable>
+              )}
+            </div>
+            {data?.marches?.length === 0 && (
+              <div className="data-value is-centred">
+                {"Aucun appel d'offres connu"}
+              </div>
+            )}
+          </Subcategory>
+        </div>
+      )}
+    </section>
+  );
+};
+
+MarchesPublic.propTypes = {
+  siret: PropTypes.string.isRequired,
+};
+export default MarchesPublic;

src/client/src/components/DataSheets/Sections/Establishment/MarchesPublic/marchesPublic.gql.js

@@ -0,0 +1,25 @@
+import { gql, useQuery } from "@apollo/client";
+
+import { BCE_CLIENT } from "../../../../../services/GraphQL/GraphQL";
+
+const marchesPublicQuery = gql`
+  query getMarchesPublic($siret: String!) {
+    marches: fce_marches_valides(where: { siret: { _eq: $siret } }) {
+      acheteur_id
+      codeCPV
+      cpv_libelle
+      dateNotification
+      dureeMois
+      montant
+      objet
+      procedure
+      sousTraitanceDeclaree
+    }
+  }
+`;
+
+export const useMarchesPublic = (siret) =>
+  useQuery(marchesPublicQuery, {
+    context: { clientName: BCE_CLIENT },
+    variables: { siret },
+  });

src/client/src/components/DataSheets/Sidebar/Sidebar.js

@@ -57,6 +57,7 @@ const Sidebar = ({
     { label: "Mutations économiques", link: "#muteco" },
     { label: "Aides", link: "#helps" },
     { label: "Agréments", link: "#agrements" },
+    { label: "Appels D'offres", link: "#marches" },
     { label: "Autres etablissements", link: "#autres-etablissements" },
   ];
 

src/client/src/components/DataSheets/dataSheets.scss

@@ -265,6 +265,14 @@
         .section-datas {
             padding: 0 $spacing-4;
             align-self: stretch;
+            &-marches {
+                display: flex;
+                justify-content: end;
+
+            }
+            .is-centred {
+                text-align: center;
+            }
             .text {
                 font-family: $marianne;
                 font-size: 0.875rem;

src/client/src/helpers/utils/utils.js

@@ -40,3 +40,19 @@ export const arraySum = (array) =>
 
 export const range = (min, max) =>
   min === max ? [min] : [min, ...range(min + 1, max)];
+export const convertirMoisEnAnnees = (mois) => {
+  const annees = Math.floor(mois / 12);
+  const moisRestants = mois % 12;
+
+  let result = "";
+  if (annees > 0) {
+    result += `${annees} an${annees > 1 ? "s" : ""}`;
+  }
+  if (moisRestants > 0) {
+    if (annees > 0) {
+      result += " ";
+    }
+    result += `${moisRestants} mois`;
+  }
+  return result || "__";
+};