project-booster-vue 9.27.0 → 9.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.27.0",
+  "version": "9.28.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/question/city-search/PbCitySearch.vue

@@ -15,6 +15,9 @@
     <div class="pb-city-search__title">
       {{ computedPayload.viewModel.label }}
     </div>
+    <div v-if="computedPayload.viewModel.subtitle" class="pb-city-search__subtitle">
+      {{ computedPayload.viewModel.subtitle }}
+    </div>
     <div class="pb-city-search__form">
       <m-flex class="pb-city-search__header" ref="pbCitySearchHeader" direction="column">
         <m-flex
@@ -178,6 +181,7 @@ export default defineComponent({
       name: string;
       region: string;
       inseeCode: string;
+      postalCode: string;
     } | null,
     searchKeywordBackup: undefined as string | undefined,
     displaySuggestions: false,
@@ -218,6 +222,12 @@ export default defineComponent({
           this?.computedPayload?.value?.city?.inseeCode,
           this?.computedPayload?.defaultDecoratorValue,
         ),
+        postalCode: decorate(
+          this.answers,
+          this.runtimeOptions,
+          this?.computedPayload?.value?.city?.postalCode,
+          this?.computedPayload?.defaultDecoratorValue,
+        ),
       };
       this.searchKeyword = this?.selectedCity?.name;
       this.forceHideSuggestions = true;
@@ -301,7 +311,6 @@ export default defineComponent({
       this.focused = false;
       this.forceHideSuggestions = true;
       this.searchKeywordBackup = this.searchKeyword;
-      this.searchKeyword = suggestion.terms[0].value;
       this.getPlaceDetails(suggestion.place_id);
       setTimeout(() => {
         this.autoFocused = true;
@@ -320,22 +329,23 @@ export default defineComponent({
             const selectedCity = results[0];
             this.suggestions = null;
 
-            const placeData = await axios.get('https://geo.api.gouv.fr/communes', {
-              params: {
-                lat: selectedCity.geometry.location.lat(),
-                lon: selectedCity.geometry.location.lng(),
-                fields: 'nom,code',
-                format: 'json',
-                geometry: 'centre',
-              },
-            });
-            const selectedCityCode = placeData.data[0].code;
+            const placeData = await this.getPlaceFromGeoGouvAPI(
+              selectedCity.geometry.location.lat(),
+              selectedCity.geometry.location.lng(),
+            );
+            const postalCode =
+              results[0].address_components.filter((field) => field.types.includes('postal_code'))[0]?.short_name ||
+              placeData.postalCode;
 
             this.selectedCity = {
-              inseeCode: selectedCityCode,
-              name: selectedCity.address_components[0].short_name,
+              inseeCode: placeData.inseeCode,
+              postalCode: postalCode,
+              name: placeData.name,
               region: selectedCity.address_components[2].short_name,
             };
+
+            this.searchKeyword =
+              this.selectedCity.postalCode + ' ' + this.selectedCity.name + ', ' + this.selectedCity.region;
             this.$forceUpdate();
           }
         });
@@ -356,6 +366,23 @@ export default defineComponent({
         ],
       });
     },
+    async getPlaceFromGeoGouvAPI(lat: number, lng: number) {
+      const placeData = await axios.get('https://geo.api.gouv.fr/communes', {
+        params: {
+          lat: lat,
+          lon: lng,
+          fields: 'nom,code,codesPostaux',
+          format: 'json',
+          geometry: 'centre',
+        },
+      });
+
+      return {
+        inseeCode: placeData.data[0].code,
+        postalCode: placeData.data[0].codesPostaux[0],
+        name: placeData.data[0].nom,
+      };
+    },
   },
 });
 </script>
@@ -422,12 +449,27 @@ $responsive-breakpoint: 'm';
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('08', 'm');
 
-      padding: $mu250 $mu100 $mu250 $mu100;
+      padding: $mu100 $mu100 $mu100 $mu100;
       text-align: center;
       width: auto;
     }
   }
 
+  &__subtitle {
+    @include set-font-scale('06', 's');
+
+    color: $color-grey-600;
+    padding-bottom: $mu100;
+
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('06', 'm');
+
+      padding-bottom: $mu100;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
   &__image {
     margin: 0 auto;
     padding-bottom: $mu200;

package/src/components/question/city-search/default-payload.json

@@ -2,6 +2,7 @@
   "viewModel": {
     "backLabel": "Question précédente",
     "label": "Dans quelle commune se situe votre projet ?",
+    "subtitle": "Cette information nous aide à identifier les aides dont vous pourriez profiter",
     "placeholder": "Commune",
     "actionLabel": "Continuer",
     "image": "https://storage.googleapis.com/project-booster-media/new-house/Estimation%20Construction%20Neuve%20-%20Localisation.png"