diff --git a/packages/app/src/modules/my-space/CompanyInfoBanner.module.scss b/packages/app/src/modules/my-space/CompanyInfoBanner.module.scss index c2922f23dc..0ec26aba46 100644 --- a/packages/app/src/modules/my-space/CompanyInfoBanner.module.scss +++ b/packages/app/src/modules/my-space/CompanyInfoBanner.module.scss @@ -1,3 +1,17 @@ .banner { background-color: var(--background-alt-blue-france); } + +.infoRow { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; + align-items: center; +} + +.datapoint { + display: inline-flex; + align-items: center; + gap: 0.25rem; + margin: 0; +} diff --git a/packages/app/src/modules/my-space/CompanyInfoBanner.tsx b/packages/app/src/modules/my-space/CompanyInfoBanner.tsx index 61e0e0ae45..d72ba9fe0d 100644 --- a/packages/app/src/modules/my-space/CompanyInfoBanner.tsx +++ b/packages/app/src/modules/my-space/CompanyInfoBanner.tsx @@ -3,6 +3,7 @@ import { Breadcrumb } from "~/modules/layout"; import { MODAL_ID as COMPANY_EDIT_MODAL_ID } from "./CompanyEditModal"; import styles from "./CompanyInfoBanner.module.scss"; +import { formatAddress } from "./formatAddress"; import { formatSiren } from "./formatSiren"; import { StatusBadge } from "./StatusBadge"; import type { CompanyDetail } from "./types"; @@ -15,7 +16,7 @@ export function CompanyInfoBanner({ company }: Props) { const currentYear = getCurrentYear(); return ( -
+
-
+
-

{company.name}

+

{company.name}

-

{formatSiren(company.siren)}

- - {company.address && ( -

{company.address}

- )} +
+

+ SIREN : {formatSiren(company.siren)} +

+ {company.address && ( +

+ Adresse : {formatAddress(company.address)} +

+ )} +
-
+
{company.nafCode && ( -
-

- Code NAF : {company.nafCode} -

-
+

+ Code NAF : {company.nafCode} +

)} {company.workforce !== null && ( -
-

- Effectif annuel moyen en {currentYear} :{" "} - {company.workforce} -

-
- )} -
-

- Existence d'un CSE :{" "} - {company.hasCse !== null ? ( - - {company.hasCse ? "Oui" : "Non"} - - ) : ( - - - - )} +

+ Effectif annuel moyen en {currentYear} :{" "} + {company.workforce}

-
+ )} +

+ Existence d'un CSE :{" "} + {company.hasCse !== null ? ( + {company.hasCse ? "Oui" : "Non"} + ) : ( + + )} +

diff --git a/packages/app/src/modules/my-space/__tests__/CompanyInfoBanner.test.tsx b/packages/app/src/modules/my-space/__tests__/CompanyInfoBanner.test.tsx index 3efb20d508..2d173210e9 100644 --- a/packages/app/src/modules/my-space/__tests__/CompanyInfoBanner.test.tsx +++ b/packages/app/src/modules/my-space/__tests__/CompanyInfoBanner.test.tsx @@ -36,11 +36,11 @@ describe("CompanyInfoBanner", () => { it("renders the address when provided", () => { render( , ); expect( - screen.getByText("12 rue de Paris, 75001 Paris"), + screen.getByText("12 Rue de Paris, 75001 Paris"), ).toBeInTheDocument(); }); @@ -86,10 +86,10 @@ describe("CompanyInfoBanner", () => { expect(screen.queryByText(/Effectif annuel moyen/)).not.toBeInTheDocument(); }); - it("renders the 'Modifier les informations' button", () => { + it("renders the 'Modifier' button", () => { render(); expect( - screen.getByRole("button", { name: "Modifier les informations" }), + screen.getByRole("button", { name: "Modifier" }), ).toBeInTheDocument(); }); }); diff --git a/packages/app/src/modules/my-space/formatAddress.ts b/packages/app/src/modules/my-space/formatAddress.ts new file mode 100644 index 0000000000..859d65196b --- /dev/null +++ b/packages/app/src/modules/my-space/formatAddress.ts @@ -0,0 +1,34 @@ +// Addresses from INSEE/Weez come fully uppercased. Render them in title case +// while keeping digits and short connector words (de, du, la, le, les…) lowercase. +const LOWERCASE_WORDS = new Set([ + "de", + "du", + "des", + "la", + "le", + "les", + "et", + "en", + "aux", + "sur", + "sous", + "d", + "l", +]); + +/** + * Converts a fully-uppercased INSEE/Weez address to title case. + * Short French connector words (de, du, la, le, …) are kept lowercase + * unless they appear as the first word of the address. + * + * @param address - The raw uppercase address string. + * @returns The address formatted in title case. + */ +export function formatAddress(address: string): string { + return address + .toLocaleLowerCase("fr-FR") + .replace(/\p{L}+/gu, (word, offset: number) => { + if (offset > 0 && LOWERCASE_WORDS.has(word)) return word; + return word[0]!.toLocaleUpperCase("fr-FR") + word.slice(1); + }); +}