Add aides finance

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

@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import React, { useState } from "react";
 
 import BlocTitle from "../../SharedComponents/BlocTitle/BlocTitle.jsx";
+import AidesFinancieres from "./Subcategory/AidesFinancieres.jsx";
 import Apprentissage from "./Subcategory/Apprentissage";
 import ContratsAides from "./Subcategory/ContratsAides";
 
@@ -19,6 +20,7 @@ const EstablishmentHelps = ({ siret }) => {
         <div className="section-datas">
           <ContratsAides siret={siret} />
           <Apprentissage siret={siret} />
+          <AidesFinancieres siret={siret} />
         </div>
       )}
     </section>

src/client/src/components/DataSheets/Sections/Establishment/Helps/Subcategory/AidesFinancieres.gql.js

@@ -0,0 +1,38 @@
+import { gql, useQuery } from "@apollo/client";
+import { pipe, prop } from "lodash/fp";
+
+import { BCE_CLIENT } from "../../../../../../services/GraphQL/GraphQL";
+import { mapQueryResult } from "../../../../../../utils/graphql/graphql";
+
+const AidesFinancieresQuery = gql`
+  query GetAidesFinancieresParSiret($siretValue: String!) {
+    fce_ademe_aide(
+      where: {
+        siret: {
+          # relationship field on fce_ademe_aide
+          siret: { _eq: $siretValue } # the actual scalar column in fce_etablissements
+        }
+      }
+    ) {
+      dateConvention
+      objet
+      Nom_de_l_attribuant
+      montant
+      nomBeneficiaire
+      notificationUE
+      siret {
+        # must provide nested selection since it's an object
+        siret # the scalar field in the fce_etablissements table
+      }
+    }
+  }
+`;
+
+export const useAidesFinancieresData = pipe(
+  (siretValue) =>
+    useQuery(AidesFinancieresQuery, {
+      context: { clientName: BCE_CLIENT },
+      variables: { siretValue },
+    }),
+  mapQueryResult(prop("fce_ademe_aide"))
+);

src/client/src/components/DataSheets/Sections/Establishment/Helps/Subcategory/AidesFinancieres.jsx

@@ -0,0 +1,90 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import { useRenderIfSiret } from "../../../../../../helpers/hoc/renderIfSiret";
+import { formatChiffre } from "../../../../../../utils/donnees-ecofi/donnees-ecofi.js";
+import LoadableContent from "../../../../../shared/LoadableContent/LoadableContent";
+import Value from "../../../../../shared/Value";
+import NonBorderedTable from "../../../SharedComponents/NonBorderedTable";
+import { useSortableData } from "../../../SharedComponents/NonBorderedTable/hooks";
+import SortableButton from "../../../SharedComponents/NonBorderedTable/SortableButton.jsx";
+import SeeDetailsLink from "../../../SharedComponents/SeeDetailsLink";
+import Subcategory from "../../../SharedComponents/Subcategory";
+import { useAidesFinancieresData } from "./AidesFinancieres.gql";
+
+const AidesFinancieres = ({ siret }) => {
+  const { loading, data, error } = useAidesFinancieresData(siret);
+  const { items, requestSort, sortConfig } = useSortableData(data, {
+    direction: "descending",
+    key: "dateConvention",
+  });
+  const shouldNotRender = useRenderIfSiret({ siret });
+
+  if (error || loading || shouldNotRender) {
+    return null;
+  }
+
+  return (
+    <Subcategory subtitle="Aides financières" sourceSi="DataGouv">
+      <LoadableContent loading={loading} error={error}>
+        {items?.length > 0 && (
+          <div className="data-sheet--table">
+            <NonBorderedTable>
+              <thead>
+                <tr>
+                  <th>
+                    <SortableButton
+                      sortConfig={sortConfig}
+                      columnKey="dateConvention"
+                      requestSort={requestSort}
+                      label="Date de convention"
+                    />
+                  </th>
+                  <th className="th">Beneficiaire</th>
+                  <th className="th">Objet</th>
+                  <th>
+                    <SortableButton
+                      sortConfig={sortConfig}
+                      columnKey="montant"
+                      requestSort={requestSort}
+                      label="Montant"
+                    />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {items?.map((aide) => (
+                  <tr key={aide?.nomBeneficiaire + aide?.dateConvention}>
+                    <td>
+                      <Value value={aide?.dateConvention} />
+                    </td>
+                    <td>
+                      <SeeDetailsLink
+                        text={aide?.nomBeneficiaire}
+                        link={`/establishment/${aide?.siret?.siret}/`}
+                        className={"list"}
+                      />
+                    </td>
+                    <td>{aide?.objet}</td>
+                    <td>{<Value value={formatChiffre(aide?.montant)} />}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </NonBorderedTable>
+          </div>
+        )}
+        {items?.length === 0 && (
+          <div className="data-value is-centred">
+            {"Aucune aide financières connue"}
+          </div>
+        )}
+      </LoadableContent>
+    </Subcategory>
+  );
+};
+
+AidesFinancieres.propTypes = {
+  siret: PropTypes.string.isRequired,
+};
+
+export default AidesFinancieres;

src/client/src/components/DataSheets/Sections/SharedComponents/NonBorderedTable/hooks.js

@@ -15,8 +15,8 @@ export const useSortableData = (items, config = null) => {
   const [sortConfig, setSortConfig] = useState(config);
 
   const sortedItems = useMemo(() => {
-    const sortableItems = [...items];
-    if (sortConfig !== null) {
+    const sortableItems = [...(items || [])];
+    if (items && sortConfig !== null) {
       sortableItems.sort((a, b) => {
         let aValue, bValue;