Merge branch 'dev' of https://github.com/betagouv/france-chaleur-urbaine

 into feat/liste-reseaux

next.config.js

@@ -53,7 +53,7 @@ const csp = {
     'https://cdn.linkedin.oribi.io',
     'https://google.com/',
     'https://px.ads.linkedin.com',
-    'https://wxs.ign.fr',
+    'https://data.geopf.fr',
     'https://api.mapbox.com/',
     'https://sentry.incubateur.net',
     'https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com',

package.json

@@ -38,7 +38,7 @@
     "talisman:add-exception": "node-talisman -i -g pre-commit"
   },
   "dependencies": {
-    "@betagouv/france-chaleur-urbaine-publicodes": "^0.16.0",
+    "@betagouv/france-chaleur-urbaine-publicodes": "^0.18.0",
     "@codegouvfr/react-dsfr": "^1.13.6",
     "@commander-js/extra-typings": "^11.1.0",
     "@emotion/react": "^11.11.4",

src/components/ComparateurPublicodes/ParametresDuBatimentGrandPublic.tsx

@@ -57,8 +57,8 @@ const ParametresDuBatimentGrandPublicForm: React.FC<ParametresDuBatimentGrandPub
             }}
           />
           <Input
-            name="nombre de logement dans l'immeuble concerné"
-            label="Nombre de logement dans l'immeuble concerné"
+            name="nombre de logements dans l'immeuble concerné"
+            label="Nombre de logements dans l'immeuble concerné"
             nativeInputProps={{
               inputMode: 'numeric',
               maxLength: 5,

src/components/ComparateurPublicodes/ParametresDuBatimentTechnicien.tsx

@@ -74,8 +74,8 @@ const ParametresDuBatimentTechnicienForm: React.FC<ParametresDuBatimentTechnicie
               }}
             />
             <Input
-              name="nombre de logement dans l'immeuble concerné"
-              label="Nombre de logement dans l'immeuble concerné"
+              name="nombre de logements dans l'immeuble concerné"
+              label="Nombre de logements dans l'immeuble concerné"
               hideUnit
               nativeInputProps={{
                 inputMode: 'numeric',

src/components/EligibilityForm/EligibilityFormContact.tsx

@@ -6,14 +6,13 @@ import Map from '@components/Map/Map';
 import MarkdownWrapper from '@components/MarkdownWrapper';
 import Box from '@components/ui/Box';
 import Link from '@components/ui/Link';
-import { useMatomoAbTestingExperiment } from 'src/services/analytics';
 import { getReadableDistance } from 'src/services/Map/distance';
 import { createMapConfiguration } from 'src/services/Map/map-configuration';
 import { AddressDataType } from 'src/types/AddressData';
 import { ContactFormInfos } from 'src/types/Summary/Demand';
 
 import { ContactForm, ContactFormContentWrapper, ContactFormResultMessage, ContactFormWrapper, ContactMapResult } from './components';
-import { bordeauxMetropoleCityCodes, getEligibilityResult, getEligibilityResultState } from './EligibilityResults';
+import { bordeauxMetropoleCityCodes, getEligibilityResult } from './EligibilityResults';
 
 type EligibilityFormContactType = {
   addressData: AddressDataType;
@@ -25,12 +24,8 @@ const EligibilityFormContact = ({ addressData, cardMode, onSubmit }: Eligibility
   const [contactFormLoading, setContactFormLoading] = useState(false);
   const [contactFormError, setContactFormError] = useState(false);
 
-  const { ready, variation } = useMatomoAbTestingExperiment('TestMessagesFormulaireContact', {
-    enable: getEligibilityResultState(addressData.heatingType, addressData.eligibility) === 'closeCollectif',
-  });
-
   const { body, computedEligibility, text } = useMemo(() => {
-    if (!addressData.eligibility || !variation) {
+    if (!addressData.eligibility) {
       return {};
     }
 
@@ -39,7 +34,7 @@ const EligibilityFormContact = ({ addressData, cardMode, onSubmit }: Eligibility
       body,
       eligibility: computedEligibility,
       text,
-    }: any = getEligibilityResult(variation, addressData.heatingType, addressData.eligibility);
+    }: any = getEligibilityResult(addressData.heatingType, addressData.eligibility);
 
     const addBordeauxLink =
       addressData.geoAddress?.properties.citycode && bordeauxMetropoleCityCodes.includes(addressData.geoAddress?.properties.citycode);
@@ -66,7 +61,7 @@ const EligibilityFormContact = ({ addressData, cardMode, onSubmit }: Eligibility
       computedEligibility,
       text,
     };
-  }, [addressData, variation]);
+  }, [addressData]);
 
   const handleSubmitForm = useCallback(
     async (values: ContactFormInfos) => {
@@ -98,9 +93,6 @@ const EligibilityFormContact = ({ addressData, cardMode, onSubmit }: Eligibility
     [addressData, computedEligibility, onSubmit]
   );
 
-  if (!ready) {
-    return null;
-  }
   return (
     <ContactFormWrapper cardMode={cardMode}>
       {addressData.eligibility?.basedOnCity && !cardMode ? (

src/components/EligibilityForm/EligibilityResults.tsx

@@ -1,11 +1,8 @@
-import Box from '@components/ui/Box';
-import Text from '@components/ui/Text';
-import { MatomoABTestingExperimentVariations } from 'src/services/analytics';
 import { AvailableHeating } from 'src/types/AddressData';
 import { HeatNetworksResponse } from 'src/types/HeatNetworksResponse';
 
 // 3 rue du petit bois 78370 Plaisir
-const closeCollectifOriginal = {
+const closeCollectif = {
   eligibility: true,
   body: (
     distance: string,
@@ -39,166 +36,6 @@ ${
 }
 ${city === 'Paris' ? '::small[A noter: sur Paris, la puissance souscrite doit être d’au moins 100 kW.]' : ''}
 `,
-  text: `
-**France Chaleur Urbaine est un service public de mise en relation avec les gestionnaires des réseaux.**
-#### Bénéficiez d'une première étude de faisabilité gratuite et sans engagement.
-`,
-};
-
-const closeCollectifAmeliorationA = {
-  eligibility: true,
-  body: (
-    distance: string,
-    inPDP: boolean,
-    gestionnaire: string | null,
-    tauxENRR: number | null,
-    isClasse: boolean | null,
-    hasPDP: boolean | null,
-    city: string
-  ) => (
-    <Box display="flex" flexDirection="column" gap="32px">
-      <Box display="flex" gap="16px">
-        <img src="/img/reponses_tests_pouce_haut.webp" alt="" className="fr-col--top" />
-        <Box backgroundColor="#C1C1C1" width="1px" />
-        <Text>
-          Un réseau de chaleur <strong>passe à proximité immédiate</strong> de votre adresse{' '}
-          {distance
-            ? `
-          (${distance})`
-            : ''}
-          .
-        </Text>
-      </Box>
-      {(inPDP || (isClasse && !hasPDP)) && (
-        <Box display="flex" gap="16px">
-          <img src="/img/reponses_tests_réseau_classé.webp" alt="" className="fr-col--top" />
-          <Box backgroundColor="#C1C1C1" width="1px" />
-          <Text>
-            Votre bâtiment est situé à proximité d’un réseau classé&nbsp;: <strong>une obligation de raccordement peut exister</strong> en
-            cas de renouvellement de votre mode de chauffage. Une amende de 300 000€ peut s’appliquer en cas de non-raccordement sans
-            dérogation.
-          </Text>
-        </Box>
-      )}
-
-      <Box display="flex" gap="16px">
-        <img src="/img/reponses_tests_pouce_haut.webp" alt="" className="fr-col--top" />
-        <Box backgroundColor="#C1C1C1" width="1px" />
-        <Text>
-          Avec un chauffage collectif, <strong>votre immeuble dispose des équipements nécessaires&nbsp;!</strong>
-        </Text>
-      </Box>
-
-      <Box display="flex" gap="16px">
-        <img src="/img/reponses_tests_information.webp" alt="" className="fr-col--top" />
-        <Box backgroundColor="#C1C1C1" width="1px" />
-        <Text>
-          Le gestionnaire est {gestionnaire}. Le taux d’énergies renouvelables et de récupération du réseau est de{' '}
-          <strong>{tauxENRR}%</strong>.
-        </Text>
-      </Box>
-      {city === 'Paris' && <Text size="sm">A noter&nbsp;: sur Paris, la puissance souscrite doit être d’au moins 100&nbsp;kW.</Text>}
-    </Box>
-  ),
-  text: `
-**France Chaleur Urbaine est un service public de mise en relation avec les gestionnaires des réseaux.**
-#### Bénéficiez d'une première étude de faisabilité gratuite et sans engagement.
-`,
-};
-
-const closeCollectifAmeliorationB = {
-  eligibility: true,
-  body: (
-    distance: string,
-    inPDP: boolean,
-    gestionnaire: string | null,
-    tauxENRR: number | null,
-    isClasse: boolean | null,
-    hasPDP: boolean | null,
-    city: string
-  ) => `
-### Bonne nouvelle !
-
-::arrow-item[**Un réseau de chaleur passe à proximité** immédiate de votre adresse ${distance ? `(${distance})` : ''}.]
-${
-  isClasse && !hasPDP && !inPDP
-    ? '::arrow-item[Ce réseau est classé, ce qui signifie qu’une obligation de raccordement peut exister (<a href="/ressources/reseau-classe#contenu" target="_blank">en savoir plus</a>).]'
-    : ''
-}
-${
-  inPDP
-    ? '::arrow-item[**Vous êtes dans le périmètre de développement prioritaire** du réseau. Une obligation de raccordement peut exister (<a href="/ressources/prioritaire#contenu" target="_blank">en savoir plus</a>). Une amende de 300 000€ peut s’appliquer en cas de non-raccordement sans dérogation.]'
-    : ''
-}
-::arrow-item[Avec un chauffage collectif, **votre immeuble dispose déjà des équipements nécessaires :** il s’agit du cas le plus favorable pour un raccordement !]
-${
-  gestionnaire
-    ? `::arrow-item[Le gestionnaire du réseau le plus proche est **${gestionnaire}**.${
-        tauxENRR ? ` Le taux d’énergies renouvelables et de récupération du réseau est de **${tauxENRR}%**.` : ''
-      }]`
-    : ''
-}
-${city === 'Paris' ? '::small[A noter: sur Paris, la puissance souscrite doit être d’au moins 100 kW.]' : ''}
-`,
-  text: '#### Recevez plus d’informations adaptées à votre bâtiment de la part du gestionnaire du réseau',
-};
-
-const closeCollectifAmeliorationAB = {
-  eligibility: true,
-  body: (
-    distance: string,
-    inPDP: boolean,
-    gestionnaire: string | null,
-    tauxENRR: number | null,
-    isClasse: boolean | null,
-    hasPDP: boolean | null,
-    city: string
-  ) => (
-    <Box display="flex" flexDirection="column" gap="32px">
-      <Box display="flex" gap="16px">
-        <img src="/img/reponses_tests_pouce_haut.webp" alt="" className="fr-col--top" />
-        <Box backgroundColor="#C1C1C1" width="1px" />
-        <Text>
-          Un réseau de chaleur <strong>passe à proximité immédiate</strong> de votre adresse{' '}
-          {distance
-            ? `
-          (${distance})`
-            : ''}
-          .
-        </Text>
-      </Box>
-
-      {(inPDP || (isClasse && !hasPDP)) && (
-        <Box display="flex" gap="16px">
-          <img src="/img/reponses_tests_réseau_classé.webp" alt="" className="fr-col--top" />
-          <Box backgroundColor="#C1C1C1" width="1px" />
-          <Text>
-            Votre bâtiment est situé à proximité d’un réseau classé&nbsp;: <strong>une obligation de raccordement peut exister</strong> en
-            cas de renouvellement de votre mode de chauffage. Une amende de 300 000€ peut s’appliquer en cas de non-raccordement sans
-            dérogation.
-          </Text>
-        </Box>
-      )}
-
-      <Box display="flex" gap="16px">
-        <img src="/img/reponses_tests_pouce_haut.webp" alt="" className="fr-col--top" />
-        <Box backgroundColor="#C1C1C1" width="1px" />
-        <Text>
-          Avec un chauffage collectif, <strong>votre immeuble dispose des équipements nécessaires&nbsp;!</strong>
-        </Text>
-      </Box>
-
-      <Box display="flex" gap="16px">
-        <img src="/img/reponses_tests_information.webp" alt="" className="fr-col--top" />
-        <Box backgroundColor="#C1C1C1" width="1px" />
-        <Text>
-          Le gestionnaire est {gestionnaire}. Le taux d’énergies renouvelables et de récupération du réseau est de{' '}
-          <strong>{tauxENRR}%</strong>.
-        </Text>
-      </Box>
-      {city === 'Paris' && <Text size="sm">A noter&nbsp;: sur Paris, la puissance souscrite doit être d’au moins 100&nbsp;kW.</Text>}
-    </Box>
-  ),
   text: '#### Recevez plus d’informations adaptées à votre bâtiment de la part du gestionnaire du réseau',
 };
 
@@ -481,27 +318,14 @@ export const getEligibilityResultState = (heatingType: AvailableHeating, eligibi
   return 'unknown';
 };
 
-export const getEligibilityResult = (
-  variation: MatomoABTestingExperimentVariations<'TestMessagesFormulaireContact'>,
-  heatingType: AvailableHeating,
-  eligibility?: HeatNetworksResponse
-) => {
+export const getEligibilityResult = (heatingType: AvailableHeating, eligibility?: HeatNetworksResponse) => {
   const state = getEligibilityResultState(heatingType, eligibility);
   switch (state) {
     case 'closeFuturCollectif': {
       return closeFuturCollectif;
     }
     case 'closeCollectif': {
-      switch (variation) {
-        case 'original':
-          return closeCollectifOriginal;
-        case 'AmeliorationA':
-          return closeCollectifAmeliorationA;
-        case 'AmeliorationB':
-          return closeCollectifAmeliorationB;
-        case 'AmeliorationA+B':
-          return closeCollectifAmeliorationAB;
-      }
+      return closeCollectif;
     }
     // eslint-disable-next-line no-fallthrough -- règle eslint erronée
     case 'closeFuturIndividual': {

src/components/HeadSliceForm/HeadSliceForm.tsx

@@ -183,6 +183,7 @@ const HeadSlice = ({
 
             <Buttons>
               <Button
+                type="button"
                 size="large"
                 disabled={!address || !geoAddress || !heatingType || (loadingStatus === 'loading' && !eligibilityError)}
                 onClick={testAddress}
@@ -194,6 +195,7 @@ const HeadSlice = ({
                 <>
                   <Separator />
                   <Button
+                    type="button"
                     size="large"
                     priority="secondary"
                     onClick={() => {

src/components/Map/Map.style.tsx

@@ -138,17 +138,12 @@ export const LegendContainer = styled.div<{
   ${({ withoutLogo }) => !withoutLogo && 'margin-bottom: 99px;'}
 `;
 
-export const CollapseLegendLabel = styled.label<{ legendCollapsed: boolean }>`
+export const CollapseLegendLabel = styled.label`
   transform: rotate(90deg);
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 12px;
-
-  span[class*='Icon'] {
-    transition: transform 0.5s ease;
-    transform: rotate(${({ legendCollapsed }) => (legendCollapsed ? '-90deg' : '90deg')});
-  }
 `;
 export const CollapseLegend = styled.button<{ legendCollapsed: boolean }>`
   position: absolute;