Merge branch 'creation-formulaire-candidature-structure' of https://g…

…ithub.com/anct-cnum/site-vitrine into creation-formulaire-candidature-structure

src/views/candidature-structure/CandidatureStructure.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import SommaireStructure from './SommaireStructure';
 import InformationsDeContact from './InformationsDeContact';
+import InformationsDeStructure from './InformationsDeStructure';
 import BesoinEnConseillerNumerique from './BesoinEnConseillerNumerique';
 import Motivation from './Motivation';
 import { useScrollToSection } from '../../hooks/useScrollToSection';
@@ -30,7 +31,7 @@ export default function CandidatureStructure() {
           <h1 className="cc-titre fr-mb-5w">Je souhaite engager un conseiller numérique</h1>
           <p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p>
           <form aria-label="Candidature structure" >
-            {/* TODO : Vos informations de structure  */}
+            <InformationsDeStructure />
             <InformationsDeContact />
             <BesoinEnConseillerNumerique setDateAccueilConseillerNumerique={setDateAccueilConseillerNumerique} />
             <Motivation />

src/views/candidature-structure/CandidatureStructure.test.jsx

@@ -9,15 +9,12 @@ vi.mock('react-router-dom', () => ({
 
 describe('candidature structure', () => {
   describe('étant une structure', () => {
-    it.todo('quand j’affiche le formulaire alors le titre et le menu s’affichent', () => {
+    it('quand j’affiche le formulaire alors le titre et le menu s’affichent', () => {
       // WHEN
       render(<CandidatureStructure />);
 
       // THEN
-      const titre = screen.getByRole('heading', {
-        level: 1,
-        name: textMatcher('Je souhaite engager un conseiller numérique'),
-      });
+      const titre = screen.getByRole('heading', { level: 1, name: textMatcher('Je souhaite engager un conseiller numérique') });
       expect(titre).toBeInTheDocument();
 
       const champsObligatoires = screen.getByText(textMatcher('Les champs avec * sont obligatoires.'), { selector: 'p' });
@@ -41,7 +38,58 @@ describe('candidature structure', () => {
     });
   });
 
-  it.todo('quand j’affiche le formulaire alors l’étape "Vos informations de structure" est affiché');
+  it.skip('quand j’affiche le formulaire alors l’étape "Vos informations de structure" est affiché', () => {
+    // WHEN
+    render(<CandidatureStructure />);
+
+    // THEN
+    const formulaire = screen.getByRole('form', { name: 'Candidature structure' });
+    const etapeInformationsDeStructure = within(formulaire).getByRole('group', { name: 'Vos informations de structure' });
+    expect(etapeInformationsDeStructure).toHaveAttribute('id', 'informations-de-structure');
+
+    const siretOuRidet = within(etapeInformationsDeStructure).getByPlaceholderText('N° SIRET / RIDET');
+    expect(siretOuRidet).toHaveAttribute('id', 'siretEntreprise');
+    expect(siretOuRidet).toBeRequired();
+
+    const denomination = within(etapeInformationsDeStructure).getByLabelText('Dénomination *');
+    expect(denomination).toHaveAttribute('type', 'text');
+    expect(denomination).toBeRequired();
+
+    const adresse = within(etapeInformationsDeStructure).getByLabelText('Adresse *');
+    expect(adresse).toHaveAttribute('type', 'text');
+    expect(adresse).toBeRequired();
+
+    const questionTypeDeStructure = within(etapeInformationsDeStructure).getByText(textMatcher('Votre structure est *'), { selector: 'p' });
+    expect(questionTypeDeStructure).toBeInTheDocument();
+
+    const _uneCommune = screen.getByRole('radio', { name: 'Une commune' });
+    expect(_uneCommune).toBeRequired();
+    expect(_uneCommune).toHaveAttribute('name', 'typeStructure');
+
+    const _unDepartement = screen.getByRole('radio', { name: 'Un département' });
+    expect(_unDepartement).toBeRequired();
+    expect(_unDepartement).toHaveAttribute('name', 'typeStructure');
+
+    const _uneRegion = screen.getByRole('radio', { name: 'Une région' });
+    expect(_uneRegion).toBeRequired();
+    expect(_uneRegion).toHaveAttribute('name', 'typeStructure');
+
+    const _unEtablissemntPublic = screen.getByRole('radio', { name: 'Un établissement public de coopération intercommunale' });
+    expect(_unEtablissemntPublic).toBeRequired();
+    expect(_unEtablissemntPublic).toHaveAttribute('name', 'typeStructure');
+
+    const _uneCollectivite = screen.getByRole('radio', { name: 'Une collectivité à statut particulier' });
+    expect(_uneCollectivite).toBeRequired();
+    expect(_uneCollectivite).toHaveAttribute('name', 'typeStructure');
+
+    const _unGIP = screen.getByRole('radio', { name: 'Un GIP' });
+    expect(_unGIP).toBeRequired();
+    expect(_unGIP).toHaveAttribute('name', 'typeStructure');
+
+    // const _uneStructurePrivee = screen.getByRole('radio', { name: 'Une structure privée (association, entreprise de l’ESS, fondations)' });
+    // expect(_uneStructurePrivee).toBeRequired();
+    // expect(_uneStructurePrivee).toHaveAttribute('name', 'typeStructure');
+  });
 
   it('quand j’affiche le formulaire alors l’étape "Vos informations de contact" est affiché', () => {
     // WHEN
@@ -139,4 +187,6 @@ describe('candidature structure', () => {
     expect(votreMessage).toBeRequired();
   });
   it.todo('quand j’affiche le formulaire alors l’encart des engagements est affiché');
+  it.todo('quand j’affiche le formulaire alors le bouton "Envoyer votre candidature" est affiché');
 });
+

src/views/candidature-structure/CompanyFinder.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Input from '../../components/commun/Input';
+import { useSiretApi } from './useSiretApi';
+import { debounce } from '../candidature-conseiller/debounce';
+
+export default function CompanyFinder() {
+  const { search, entreprise } = useSiretApi();
+
+  return (
+    <>
+      <Input
+        id="siretEntreprise"
+        isRequired={false}
+        onChange={debounce(event => search(event.target.value))}
+        placeholder="N° SIRET / RIDET"
+      />
+      {entreprise}
+    </>
+  );
+}

src/views/candidature-structure/InformationsDeStructure.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Input from '../../components/commun/Input';
+import CompanyFinder from './CompanyFinder';
+import BoutonRadio from '../../components/commun/BoutonRadio';
+
+export default function InformationsDeContact() {
+  return (
+    <fieldset
+      className="fr-border cc-section fr-p-3w fr-mb-3w"
+      id="informations-de-structure"
+    >
+      <legend className="fr-h5">Vos informations de structure</legend>
+      <hr />
+      <CompanyFinder />
+      <Input
+        id="denomination"
+      >
+        Dénomination <span className="cc-obligatoire">*</span>
+      </Input>
+      <Input
+        id="adresse"
+      >
+        Adresse <span className="cc-obligatoire">*</span>
+      </Input>
+      <p className="fr-mb-3w cc-bold">
+        Votre structure est <span className="cc-obligatoire">*</span>
+      </p>
+      <div className="fr-grid-row">
+        <BoutonRadio id="commune" nomGroupe="typeStructure">
+          Une commune
+        </BoutonRadio>
+        <BoutonRadio id="intercommunalite" nomGroupe="typeStructure">
+          Un département
+        </BoutonRadio>
+        <BoutonRadio id="region" nomGroupe="typeStructure">
+          Une région
+        </BoutonRadio>
+        <BoutonRadio id="etablissement" nomGroupe="typeStructure">
+          Un établissement public de coopération intercommunale
+        </BoutonRadio>
+        <BoutonRadio id="collectivite" nomGroupe="typeStructure">
+          Une collectivité à statut particulier
+        </BoutonRadio>
+        <BoutonRadio id="gip" nomGroupe="typeStructure">
+          Un GIP
+        </BoutonRadio>
+        <BoutonRadio id="structurePrivee" nomGroupe="typeStructure">
+          Une structure privée (association, entreprise de l’ESS, fondations)
+        </BoutonRadio>
+      </div>
+    </fieldset>
+  );
+}

src/views/candidature-structure/useSiretApi.js

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+const getUrlEntrepriseApiV3 = (sirenOuSiret, type) => {
+  let params = '?context=cnum&object=checkSiret&recipient=13002603200016';
+  let url = 'https://entreprise.api.gouv.fr/v3/';
+  let service = '';
+  switch (type) {
+    case 'siret':
+      service = 'insee/sirene/etablissements/' + sirenOuSiret;
+      break;
+    case 'siren':
+      service = 'insee/sirene/unites_legales/' + sirenOuSiret + '/siege_social/';
+      break;
+    default:
+      break;
+  }
+  return url + service + params;
+};
+
+export const useSiretApi = () => {
+  const [entreprise, setEntreprise] = useState(null);
+  const [error, setError] = useState(null);
+
+  const search = async (sirenOuSiret, type) => {
+    try {
+      const url = getUrlEntrepriseApiV3(sirenOuSiret, type);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Error fetching data: ${response.statusText}`);
+      }
+      const result = await response.json();
+      setEntreprise(result);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      setEntreprise(null);
+    }
+  };
+
+  return { search, entreprise, error };
+};