feat(admin): add settings introduction texts for each role

SocialGouv · Sep 5, 2024 · 5ddb88a · 5ddb88a
1 parent 9a5155b
commit 5ddb88a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 86 deletions.
diff --git a/...aap)/agencies-settings-v3/_components/agencies-settings-summary/AgencySettingsSummary.tsx b/...aap)/agencies-settings-v3/_components/agencies-settings-summary/AgencySettingsSummary.tsx
@@ -8,51 +8,57 @@ export const AgencySettingsSummary = () => {
 
   return (
     <>
-      {organism?.isRemote && (
-        <AgencySettingsSummarySectionRemote organism={organism} />
-      )}
-      {organism?.isOnSite && (
+      <p className="text-xl">
+        Retrouvez ici les informations liées à vos modalités d’accompagnement et
+        à votre connexion.
+      </p>
+      <div className="flex flex-col gap-8 mt-4">
+        {organism?.isRemote && (
+          <AgencySettingsSummarySectionRemote organism={organism} />
+        )}
+        {organism?.isOnSite && (
+          <EnhancedSectionCard
+            data-test="on-site-agency"
+            title="Accompagnement en présentiel"
+            isEditable={false}
+            buttonOnClickHref="/agencies-settings-v3/on-site"
+            titleIconClass="fr-icon-home-4-fill"
+          >
+            <p className="md:w-4/5">
+              Ici le lieu d'accueil et son statut de visibilité
+            </p>
+          </EnhancedSectionCard>
+        )}
         <EnhancedSectionCard
-          data-test="on-site-agency"
-          title="Accompagnement en présentiel"
+          data-test="user-account"
+          title="Informations de connexion"
           isEditable={false}
-          buttonOnClickHref="/agencies-settings-v3/on-site"
-          titleIconClass="fr-icon-home-4-fill"
+          titleIconClass="fr-icon-team-fill"
+          CustomBadge={<div />}
+          status="COMPLETED"
         >
-          <p className="md:w-4/5">
-            Ici le lieu d'accueil et son statut de visibilité
-          </p>
-        </EnhancedSectionCard>
-      )}
-      <EnhancedSectionCard
-        data-test="user-account"
-        title="Informations de connexion"
-        isEditable={false}
-        titleIconClass="fr-icon-team-fill"
-        CustomBadge={<div />}
-        status="COMPLETED"
-      >
-        <div className="flex items-center justify-between pt-4 pb-3 border-neutral-300 border-t last:border-b">
-          <span>
-            <i className="fr-icon--sm fr-icon-home-4-fill mr-4" />
-            <span className="font-bold">
-              {account?.firstname} {account?.lastname}
+          <div className="flex items-center justify-between pt-4 pb-3 border-neutral-300 border-t last:border-b">
+            <span>
+              <i className="fr-icon--sm fr-icon-home-4-fill mr-4" />
+              <span className="font-bold">
+                {account?.firstname} {account?.lastname}
+              </span>{" "}
+              - {account?.email}
             </span>{" "}
-            - {account?.email}
-          </span>{" "}
-          <span>
-            <Button
-              priority="tertiary no outline"
-              size="small"
-              linkProps={{
-                href: `/agencies-settings-v3/user-accounts/${account?.id}`,
-              }}
-            >
-              Modifier
-            </Button>
-          </span>
-        </div>
-      </EnhancedSectionCard>
+            <span>
+              <Button
+                priority="tertiary no outline"
+                size="small"
+                linkProps={{
+                  href: `/agencies-settings-v3/user-accounts/${account?.id}`,
+                }}
+              >
+                Modifier
+              </Button>
+            </span>
+          </div>
+        </EnhancedSectionCard>
+      </div>
     </>
   );
 };
diff --git a/.../agencies-settings-v3/_components/agencies-settings-summary/HeadAgencySettingsSummary.tsx b/.../agencies-settings-v3/_components/agencies-settings-summary/HeadAgencySettingsSummary.tsx
@@ -19,39 +19,45 @@ export const HeadAgencySettingsSummary = () => {
 
   return (
     <>
-      <EnhancedSectionCard
-        data-test="general-information"
-        title="Informations générales"
-        status={isGeneralInformationCompleted ? "COMPLETED" : "TO_COMPLETE"}
-        isEditable
-        buttonOnClickHref="/agencies-settings-v3/general-information"
-        titleIconClass="fr-icon-information-fill"
-      />
-      <AgencySettingsSummarySectionRemote organism={remoteOrganism} />
-      <AgenciesSettingsSectionOnSite organisms={maisonMereAAP?.organisms} />
-      <EnhancedSectionCard
-        data-test="user-accounts"
-        title="Comptes collaborateurs"
-        isEditable={isGeneralInformationCompleted}
-        disabled={!isGeneralInformationCompleted}
-        buttonOnClickHref="/agencies-settings-v3/user-accounts/add-user-account"
-        titleIconClass="fr-icon-team-fill"
-        CustomBadge={<div />}
-        status="TO_COMPLETE"
-        customButtonTitle="Ajouter"
-      >
-        <p className="md:w-4/5">
-          Vous avez besoin de collaborer à plusieurs sur la plateforme ? Ajoutez
-          des comptes collaborateurs pour que vos collaborateurs puissent avoir
-          accès à leurs candidatures.
-        </p>
-        {!isGeneralInformationCompleted && (
-          <SmallNotice>
-            Vous pourrez ajouter des comptes collaborateurs une fois que vous
-            aurez complété les paramètres précédents.
-          </SmallNotice>
-        )}
-      </EnhancedSectionCard>
+      <p className="text-xl">
+        Complétez les paramètres de compte de votre structure pour recevoir vos
+        premières candidatures.
+      </p>
+      <div className="flex flex-col gap-8 mt-4">
+        <EnhancedSectionCard
+          data-test="general-information"
+          title="Informations générales"
+          status={isGeneralInformationCompleted ? "COMPLETED" : "TO_COMPLETE"}
+          isEditable
+          buttonOnClickHref="/agencies-settings-v3/general-information"
+          titleIconClass="fr-icon-information-fill"
+        />
+        <AgencySettingsSummarySectionRemote organism={remoteOrganism} />
+        <AgenciesSettingsSectionOnSite organisms={maisonMereAAP?.organisms} />
+        <EnhancedSectionCard
+          data-test="user-accounts"
+          title="Comptes collaborateurs"
+          isEditable={isGeneralInformationCompleted}
+          disabled={!isGeneralInformationCompleted}
+          buttonOnClickHref="/agencies-settings-v3/user-accounts/add-user-account"
+          titleIconClass="fr-icon-team-fill"
+          CustomBadge={<div />}
+          status="TO_COMPLETE"
+          customButtonTitle="Ajouter"
+        >
+          <p className="md:w-4/5">
+            Vous avez besoin de collaborer à plusieurs sur la plateforme ?
+            Ajoutez des comptes collaborateurs pour que vos collaborateurs
+            puissent avoir accès à leurs candidatures.
+          </p>
+          {!isGeneralInformationCompleted && (
+            <SmallNotice>
+              Vous pourrez ajouter des comptes collaborateurs une fois que vous
+              aurez complété les paramètres précédents.
+            </SmallNotice>
+          )}
+        </EnhancedSectionCard>
+      </div>
     </>
   );
 };
diff --git a/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/page.tsx b/packages/reva-admin-react/src/app/(aap)/agencies-settings-v3/page.tsx
@@ -9,18 +9,11 @@ const AgenciesSettingsPage = () => {
   return (
     <div className="flex flex-col w-full">
       <h1>Paramètres</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>
-      <div className="flex flex-col gap-8 mt-6">
-        {isGestionnaireMaisonMereAAP ? (
-          <HeadAgencySettingsSummary />
-        ) : (
-          <AgencySettingsSummary />
-        )}
-      </div>
+      {isGestionnaireMaisonMereAAP ? (
+        <HeadAgencySettingsSummary />
+      ) : (
+        <AgencySettingsSummary />
+      )}
     </div>
   );
 };