feat(champ): ask for departement before asking for commune

app/javascript/components/ComboCommunesSearch.jsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { QueryClientProvider } from 'react-query';
 import { matchSorter } from 'match-sorter';
 
 import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';
+import { ComboDepartementsSearch } from './ComboDepartementsSearch';
 
 // Avoid hiding similar matches for precise queries (like "Sainte Marie")
 function searchResultsLimit(term) {
@@ -36,20 +37,71 @@ function expandResultsWithMultiplePostalCodes(term, results) {
   return expandedResults;
 }
 
+const placeholderDepartements = [
+  ['63 – Puy-de-Dôme', 'Clermont-Ferrand'],
+  ['77 – Seine-et-Marne', 'Melun'],
+  ['22 – Côtes d’Armor', 'Saint-Brieuc'],
+  ['47 – Lot-et-Garonne', 'Agen']
+];
+const [placeholderDepartement, placeholderCommune] =
+  placeholderDepartements[
+    Math.floor(Math.random() * (placeholderDepartements.length - 1))
+  ];
+
 function ComboCommunesSearch(params) {
+  const [departementCode, setDepartementCode] = useState();
+  const inputId = useMemo(
+    () =>
+      document.querySelector(`input[data-uuid="${params.hiddenFieldId}"]`)?.id,
+    [params.hiddenFieldId]
+  );
+  const departementDescribedBy = `${inputId}_departement_notice`;
+  const communeDescribedBy = `${inputId}_commune_notice`;
+
   return (
     <QueryClientProvider client={queryClient}>
-      <ComboSearch
-        required={params.mandatory}
-        hiddenFieldId={params.hiddenFieldId}
-        scope="communes"
-        minimumInputLength={2}
-        transformResult={({ code, nom, codesPostaux }) => [
-          code,
-          `${nom} (${codesPostaux[0]})`
-        ]}
-        transformResults={expandResultsWithMultiplePostalCodes}
-      />
+      <div>
+        <div className="notice" id={departementDescribedBy}>
+          <p>
+            Choisissez le département dans lequel se situe la commune. Vous
+            pouvez entrer le nom ou le code.
+          </p>
+        </div>
+        <ComboDepartementsSearch
+          inputId={!departementCode ? inputId : null}
+          aria-describedby={departementDescribedBy}
+          placeholder={placeholderDepartement}
+          mandatory={params.mandatory}
+          onChange={(_, result) => {
+            setDepartementCode(result?.code);
+          }}
+        />
+      </div>
+      {departementCode ? (
+        <div>
+          <div className="notice" id={communeDescribedBy}>
+            <p>
+              Choisissez la commune. Vous pouver entre le nom ou le code postal.
+            </p>
+          </div>
+          <ComboSearch
+            autoFocus
+            inputId={inputId}
+            aria-describedby={communeDescribedBy}
+            placeholder={placeholderCommune}
+            required={params.mandatory}
+            hiddenFieldId={params.hiddenFieldId}
+            scope="communes"
+            scopeExtra={departementCode}
+            minimumInputLength={2}
+            transformResult={({ code, nom, codesPostaux }) => [
+              code,
+              `${nom} (${codesPostaux[0]})`
+            ]}
+            transformResults={expandResultsWithMultiplePostalCodes}
+          />
+        </div>
+      ) : null}
     </QueryClientProvider>
   );
 }