feat: add edit button on recap company infos (#1791)

SocialGouv · Nov 2, 2023 · fe7fd35 · fe7fd35
1 parent 95792e4
commit fe7fd35
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 66 deletions.
diff --git a/packages/app/src/app/(default)/index-egapro/declaration/[siren]/[year]/RecapDeclaration.tsx b/packages/app/src/app/(default)/index-egapro/declaration/[siren]/[year]/RecapDeclaration.tsx
@@ -64,7 +64,7 @@ export const RecapDeclaration = ({ déclaration, edit }: Props) => {
         }
       />
 
-      <RecapCardCompany company={company} title="Informations Entreprise / UES" />
+      <RecapCardCompany edit={edit} company={company} title="Informations Entreprise / UES" />
 
       {company.ues?.name && (
         <RecapCard

diff --git a/packages/app/src/design-system/base/RecapCardCompany.tsx b/packages/app/src/design-system/base/RecapCardCompany.tsx
@@ -4,19 +4,20 @@ import { type CompanyDTO } from "@common/core-domain/dtos/CompanyDTO";
 import { COUNTRIES_ISO_TO_LIB, NAF } from "@common/dict";
 import { ClientBodyPortal } from "@components/utils/ClientBodyPortal";
 
+import { funnelStaticConfig } from "../../app/(default)/index-egapro/declaration/declarationFunnelConfiguration";
 import { Grid, GridCol } from "./Grid";
 import { RecapCard } from "./RecapCard";
 import { Text } from "./Typography";
 
-type Props = { company: CompanyDTO; full?: boolean; title?: string };
+type Props = { company: CompanyDTO; edit?: boolean; full?: boolean; title?: string };
 
 // TODO: replace with tooltip when available in DSFR
 const infoModale = createModal({
   id: "entreprise-info",
   isOpenedByDefault: false,
 });
 
-export const RecapCardCompany = ({ company, full, title }: Props) => {
+export const RecapCardCompany = ({ company, full, title, edit }: Props) => {
   const { name, address, postalCode, city, countryIsoCode, siren, nafCode, workforce, ues } = company;
 
   const titleFull = title ?? "Informations de l'entreprise déclarante";
@@ -25,6 +26,63 @@ export const RecapCardCompany = ({ company, full, title }: Props) => {
   const countryLib =
     countryIsoCode && countryIsoCode !== "FR" && `${postalCodeCity && ", "}${COUNTRIES_ISO_TO_LIB[countryIsoCode]}`;
 
+  const content = full ? (
+    <>
+      <Grid haveGutters>
+        <GridCol sm={12} className="fr-pb-0">
+          <strong>Raison sociale</strong>
+          <br />
+          {name}
+        </GridCol>
+        <GridCol sm={3} className="fr-pb-0">
+          <strong>Siren</strong>
+          <br />
+          {siren}
+        </GridCol>
+        {nafCode && (
+          <GridCol sm={9} className="fr-pb-0">
+            <strong>Code NAF</strong>
+            <br />
+            {nafCode} - {NAF[nafCode].description}
+          </GridCol>
+        )}
+        <GridCol sm={12}>
+          <strong>Adresse</strong>
+          <br />
+          {address}
+          {postalCodeCity ? `, ${postalCodeCity}` : " "}
+          {countryLib}
+        </GridCol>
+      </Grid>
+    </>
+  ) : (
+    <>
+      Entreprise déclarante : <strong>{name}</strong>
+      <br />
+      {address}
+      {(postalCodeCity || countryLib) && <br />}
+      {postalCodeCity}
+      {countryLib}
+      <br />
+      Siren : <strong>{siren}</strong>
+      <br />
+      Code NAF : <strong>{nafCode}</strong> - {nafCode && NAF[nafCode].description}
+      {workforce?.range && (
+        <>
+          <br />
+          Tranche d'effectifs assujettis de l'
+          {ues?.name ? "UES" : "entreprise"} : <strong>{CompanyWorkforceRange.Label[workforce.range]}</strong>
+        </>
+      )}
+    </>
+  );
+
+  const fullTitle = full ? (
+    <Text text={titleFull} variant={["xl"]} inline />
+  ) : (
+    title ?? "Informations entreprise déclarante"
+  );
+
   return (
     <>
       <ClientBodyPortal>
@@ -33,69 +91,22 @@ export const RecapCardCompany = ({ company, full, title }: Props) => {
           l'INSEE).
         </infoModale.Component>
       </ClientBodyPortal>
-      <RecapCard
-        title={full ? <Text text={titleFull} variant={["xl"]} inline /> : title ?? "Informations entreprise déclarante"}
-        sideButtonProps={{
-          iconId: "fr-icon-information-fill",
-          title: titleFull,
-          priority: "tertiary no outline",
-          style: { alignSelf: "center" },
-          size: "small",
-          nativeButtonProps: infoModale.buttonProps,
-        }}
-        content={
-          full ? (
-            <>
-              <Grid haveGutters>
-                <GridCol sm={12} className="fr-pb-0">
-                  <strong>Raison sociale</strong>
-                  <br />
-                  {name}
-                </GridCol>
-                <GridCol sm={3} className="fr-pb-0">
-                  <strong>Siren</strong>
-                  <br />
-                  {siren}
-                </GridCol>
-                {nafCode && (
-                  <GridCol sm={9} className="fr-pb-0">
-                    <strong>Code NAF</strong>
-                    <br />
-                    {nafCode} - {NAF[nafCode].description}
-                  </GridCol>
-                )}
-                <GridCol sm={12}>
-                  <strong>Adresse</strong>
-                  <br />
-                  {address}
-                  {postalCodeCity ? `, ${postalCodeCity}` : " "}
-                  {countryLib}
-                </GridCol>
-              </Grid>
-            </>
-          ) : (
-            <>
-              Entreprise déclarante : <strong>{name}</strong>
-              <br />
-              {address}
-              {(postalCodeCity || countryLib) && <br />}
-              {postalCodeCity}
-              {countryLib}
-              <br />
-              Siren : <strong>{siren}</strong>
-              <br />
-              Code NAF : <strong>{nafCode}</strong> - {nafCode && NAF[nafCode].description}
-              {workforce?.range && (
-                <>
-                  <br />
-                  Tranche d'effectifs assujettis de l'
-                  {ues?.name ? "UES" : "entreprise"} : <strong>{CompanyWorkforceRange.Label[workforce.range]}</strong>
-                </>
-              )}
-            </>
-          )
-        }
-      />
+      {edit ? (
+        <RecapCard title={fullTitle} editLink={funnelStaticConfig["entreprise"].url} content={content} />
+      ) : (
+        <RecapCard
+          title={fullTitle}
+          sideButtonProps={{
+            iconId: "fr-icon-information-fill",
+            title: titleFull,
+            priority: "tertiary no outline",
+            style: { alignSelf: "center" },
+            size: "small",
+            nativeButtonProps: infoModale.buttonProps,
+          }}
+          content={content}
+        />
+      )}
     </>
   );
 };