:feat ajout premier bloc formulaire informations contact structure

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

@@ -14,10 +14,7 @@ describe('candidature structure', () => {
       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' });
@@ -119,4 +116,50 @@ describe('candidature structure', () => {
   });
 
   it.todo('quand j’affiche le formulaire alors l’étape "Votre motivation" est affiché');
+  const etapeInformationsDeContact = within(formulaire).getByRole('group', { name: 'Vos informations de structure' });
+  expect(etapeInformationsDeContact).toHaveAttribute('id', 'informationsDeContact');
+
+  const siretOuRidet = within(etapeInformationsDeContact).getByPlaceholderText('N° SIRET / RIDET');
+  expect(siretOuRidet).toHaveAttribute('id', 'siretEntreprise');
+  expect(siretOuRidet).toBeRequired();
+
+  const denomination = within(etapeInformationsDeContact).getByLabelText('Dénomination *');
+  expect(denomination).toHaveAttribute('type', 'text');
+  expect(denomination).toBeRequired();
+
+  const adresse = within(etapeInformationsDeContact).getByLabelText('Adresse *');
+  expect(adresse).toHaveAttribute('type', 'text');
+  expect(adresse).toBeRequired();
+
+  const questionTypeDeStructure = within(etapeInformationsDeContact).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');
 });
+

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/InformationsDeContact.tsx

@@ -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="informationsDeContact"
+    >
+      <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 };
+};