feat(admin): agencies settings new general information page

SocialGouv · Aug 28, 2024 · edec86e · edec86e
1 parent 8c1bf7b
commit edec86e
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 4 deletions.
diff --git a/...t/src/app/(aap)/agencies-settings/(v2)/general-information/generalInformationPage.hook.ts b/...t/src/app/(aap)/agencies-settings/(v2)/general-information/generalInformationPage.hook.ts
@@ -0,0 +1,81 @@
+import { useGraphQlClient } from "@/components/graphql/graphql-client/GraphqlClient";
+import { graphql } from "@/graphql/generated";
+
+import { useQuery } from "@tanstack/react-query";
+
+const generalInformationQueries = graphql(`
+  query getAccountMaisonMereGeneralInformation {
+    account_getAccountForConnectedUser {
+      organism {
+        maisonMereAAP {
+          id
+          siret
+          phone
+          statutValidationInformationsJuridiquesMaisonMereAAP
+          legalInformationDocumentsDecisions(
+            input: { decision: DEMANDE_DE_PRECISION }
+          ) {
+            id
+            aapComment
+            decisionTakenAt
+          }
+          gestionnaire {
+            firstname
+            lastname
+            email
+          }
+        }
+      }
+    }
+  }
+`);
+
+const getEtablissementQuery = graphql(`
+  query getEtablissementForAgenciesSettings($siret: ID!) {
+    getEtablissement(siret: $siret) {
+      siret
+      raisonSociale
+      formeJuridique {
+        code
+        libelle
+        legalStatus
+      }
+      siegeSocial
+      dateFermeture
+      qualiopiStatus
+    }
+  }
+`);
+
+export const useGeneralInformationPage = () => {
+  const { graphqlClient } = useGraphQlClient();
+
+  const {
+    data: generalInformationsResponse,
+    status: generalInformationsStatus,
+  } = useQuery({
+    queryKey: ["maisonMereAAPGeneralInformation"],
+    queryFn: () => graphqlClient.request(generalInformationQueries),
+  });
+
+  const maisonMereAAP =
+    generalInformationsResponse?.account_getAccountForConnectedUser?.organism
+      ?.maisonMereAAP;
+
+  const { data: getEtablissementData } = useQuery({
+    queryKey: [maisonMereAAP?.siret],
+    queryFn: () =>
+      graphqlClient.request(getEtablissementQuery, {
+        siret: maisonMereAAP?.siret || "",
+      }),
+    enabled: !!maisonMereAAP?.siret && maisonMereAAP?.siret?.length >= 14,
+  });
+
+  const etablissement = getEtablissementData?.getEtablissement;
+  return {
+    generalInformationsResponse,
+    generalInformationsStatus,
+    maisonMereAAP,
+    etablissement,
+  };
+};
diff --git a/packages/reva-admin-react/src/app/(aap)/agencies-settings/(v2)/general-information/page.tsx b/packages/reva-admin-react/src/app/(aap)/agencies-settings/(v2)/general-information/page.tsx
@@ -1,3 +1,104 @@
-export default function GeneralInformationPage() {
-  return <div>GeneralInformationPage</div>;
-}
+"use client";
+import Alert from "@codegouvfr/react-dsfr/Alert";
+import { useAuth } from "@/components/auth/auth";
+import { useGeneralInformationPage } from "./generalInformationPage.hook";
+import { LegalInformationUpdateBlock } from "../../legal-information/_components/legal-information-update-block/LegalInformationUpdateBlock";
+import { CompanyBadges } from "@/components/company-preview";
+import { GrayCard } from "@/components/card/gray-card/GrayCard";
+import { ReactNode } from "react";
+
+const GeneralInformationPage = () => {
+  const { maisonMereAAP, generalInformationsStatus, etablissement } =
+    useGeneralInformationPage();
+
+  const { isGestionnaireMaisonMereAAP } = useAuth();
+  return (
+    <div className="flex flex-col w-full">
+      <h1>Informations juridiques</h1>
+      <p>
+        Retrouvez ici les informations renseignées lors de l’inscription. Vous
+        pouvez signaler un changement au support si ces informations ne sont
+        plus à jour.
+      </p>
+
+      {generalInformationsStatus === "error" && (
+        <Alert
+          className="mb-6"
+          severity="error"
+          title="Une erreur est survenue pendant la récupération des informations générales."
+        />
+      )}
+      {generalInformationsStatus == "success" &&
+        etablissement &&
+        maisonMereAAP && (
+          <ul className="list-none flex flex-col gap-6 pl-0">
+            <GrayCard>
+              <h2>Informations liées au SIRET - {etablissement.siret}</h2>
+              <CompanyBadges
+                className="col-span-3 mb-4"
+                siegeSocial={etablissement.siegeSocial}
+                dateFermeture={
+                  etablissement.dateFermeture
+                    ? new Date(etablissement.dateFermeture)
+                    : null
+                }
+                qualiopiStatus={!!etablissement.qualiopiStatus}
+              />
+              <div className="grid grid-cols-1 md:grid-cols-2">
+                <Info title="Raison sociale">
+                  {etablissement.raisonSociale}
+                </Info>
+                <Info title="Forme juridique">
+                  {etablissement.formeJuridique.libelle}
+                </Info>
+              </div>
+            </GrayCard>
+            <GrayCard>
+              <h2>Informations saisies à l’inscription</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2">
+                <Info title="Administrateur">
+                  {maisonMereAAP.gestionnaire.firstname}{" "}
+                  {maisonMereAAP.gestionnaire.lastname}
+                </Info>
+                <Info title="Email">{maisonMereAAP.gestionnaire.email}</Info>
+                <Info title="Téléphone">{maisonMereAAP.phone}</Info>
+              </div>
+            </GrayCard>
+            {isGestionnaireMaisonMereAAP && (
+              <li>
+                <LegalInformationUpdateBlock
+                  maisonMereAAPId={maisonMereAAP.id}
+                  statutValidationInformationsJuridiquesMaisonMereAAP={
+                    maisonMereAAP.statutValidationInformationsJuridiquesMaisonMereAAP
+                  }
+                  decisions={maisonMereAAP.legalInformationDocumentsDecisions.map(
+                    (d) => ({
+                      ...d,
+                      decisionTakenAt: new Date(d.decisionTakenAt),
+                    }),
+                  )}
+                />
+              </li>
+            )}
+          </ul>
+        )}
+    </div>
+  );
+};
+
+export default GeneralInformationPage;
+
+const Info = ({
+  title,
+  children,
+  className,
+}: {
+  title: string;
+  children: ReactNode;
+  className?: string;
+}) => (
+  <dl className={`m-2 ${className || ""}`}>
+    <dt className="mb-1">{title}</dt>
+    <dd className="font-medium">{children}</dd>
+  </dl>
+);
diff --git a/packages/reva-admin-react/src/components/company-preview/CompanyPreview.component.tsx b/packages/reva-admin-react/src/components/company-preview/CompanyPreview.component.tsx
@@ -182,7 +182,7 @@ const Info = ({
   </span>
 );
 
-const CompanyBadges = ({
+export const CompanyBadges = ({
   siegeSocial,
   dateFermeture,
   qualiopiStatus,