project-booster-vue 8.118.2 → 8.119.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.118.2",
+  "version": "8.119.2",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
@@ -36,7 +36,7 @@
     "@vue/babel-preset-app": "4.5.13",
     "@vue/compat": "3.2.6",
     "ajv": "8.6.0",
-    "axios": "0.21.1",
+    "axios": "0.25.0",
     "contentful": "8.4.2",
     "core-js": "3.19.1",
     "date-fns": "2.22.1",
@@ -54,7 +54,6 @@
     "object-path": "0.11.5",
     "ramda": "0.26.1",
     "request": "2.88.0",
-    "superagent": "6.1.0",
     "svg-injector": "1.1.3",
     "uuid": "8.3.2",
     "vee-validate": "4.4.5",

package/src/components/projects/project-hub/PbProjectHub.stories.mdx

@@ -59,7 +59,7 @@ import {
   getDocumentsImageFileResolver,
   uploadDocumentResolver,
 } from '../../../services/api/mocks/documentsMock';
-import { getInhabitantByIdResolver } from '../../../services/api/mocks/inhabitantsMock';
+import { getInhabitantByIdResolver, getCompanyByIdResolver } from '../../../services/api/mocks/inhabitantsMock';
 import TASK_TO_CREATE_MODEL from '../../../components/tasks/task-to-create-generic-planner.json';
 import DOCUMENT_DETAIL_PAYLOAD from '../../media/detail/document-detail-payload.json';
 import DOCUMENT_UPLOAD_PAYLOAD from '../../media/upload/document-upload-payload.json';
@@ -308,6 +308,70 @@ The `PbProjectHub` component to access your project.
   </Story>
 </Canvas>
 
+## Showcase Company
+
+<Canvas>
+  <Story
+    name="Showcase company"
+    parameters={{
+      controls: { disable: true },
+      msw: [
+        rest.get('/api/inhabitant-projects/:projectId', getProjectByIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/main-appointment', getAppointmentByIdResolver),
+        rest.get('/api/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
+        rest.get('/api/project-types/:projectTypeId/work-kinds', getWorkKindByProjectTypeResolver),
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', getWorkKindsByProjectIdResolver),
+        rest.put('/api/inhabitant-projects/:inhabitantProjectId/work-kinds', saveWorkKindResolver),
+        rest.get('/api/work-kinds/:workKindId/products', getProductsByWorkKindResolver),
+        rest.get('/api/estimates', getEstimatesByProjectIdResolver),
+        rest.post('/api/estimates', successResolver),
+        rest.get(
+          '/api/inhabitant-projects/:inhabitantProjectId/simulations',
+          getConfigurationsWithUpdatedPricesByProjectIdResolver,
+        ),
+        rest.get('/api/simulations', getConfigurationsByProjectIdResolver),
+        rest.get(
+          'https://storage.googleapis.com/pb-dev-adeo-disp-project-tools/:id.json',
+          getToolsByProjectTypeResolver,
+        ),
+        rest.get('/api/project-types/:projectTypeId/products-feature-flag', getEnabledProductsFeatureFlagResolver),
+        rest.get('/api/media', getAllMediaPaginationResolver),
+        rest.get('/api/media/:mediaId', getMediumByIdResolver),
+        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
+        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.post('/api/media', uploadMediaResolver),
+        rest.patch('/api/media/:mediaId', getMediumByIdResolver),
+        rest.delete('/api/media/:mediaId', successResolver),
+        rest.patch('/api/media/:mediaId', notContentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId', getDocumentByIdResolver),
+        rest.delete('/api/inhabitant-projects/:projectId/documents/:documentId', successResolver),
+        rest.get(
+          '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
+          getDocumentsImageThumbnailResolver,
+        ),
+        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
+        rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
+        rest.get('/api/inhabitant-projects/:projectId/attributes', getProjectAttributesByIdResolver),
+        rest.get('/api/inhabitant-api/users/:buId/:inhabitantId', getCompanyByIdResolver),
+      ],
+      storyshots: { disable: true },
+    }}
+    height="100vh"
+  >
+    {{
+      components: { PbProjectHub },
+      template: `  <div style="margin: 0 auto;min-height: 100vh;width: 100%;max-width: 1024px;">
+                      <router-view v-slot="{ Component }">
+                        <keep-alive include="PbProjectHub">
+                          <component :is="Component" :key="$route.fullPath" />
+                        </keep-alive>
+                      </router-view>
+                  </div>`,
+    }}
+  </Story>
+</Canvas>
+
 ## Showcase no project found
 
 <Canvas>

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -19,11 +19,7 @@
         "
         class="pb-project-hub__inhabitant"
       >
-        {{
-          currentInhabitant
-            ? `${currentInhabitant.firstName} ${currentInhabitant.lastName} (n° ${currentInhabitantId})`
-            : `Client n° ${currentInhabitantId}`
-        }}
+        {{ getInhabitant }}
       </div>
       <m-flex direction="column" align-items="center" full-width>
         <transition name="pb-project-hub--appear" mode="out-in">
@@ -1087,6 +1083,19 @@ export default {
         this.configurations.findIndex((item) => item?.oldPrices && Object.values(item.oldPrices).length > 0) !== -1
       );
     },
+
+    getInhabitant() {
+      if (this.currentInhabitant) {
+        if (this.currentInhabitant.companyName) {
+          if (this.currentInhabitant.firstName) {
+            return `${this.currentInhabitant.companyName} : ${this.currentInhabitant.firstName} ${this.currentInhabitant.lastName} (n°${this.currentInhabitantId})`;
+          }
+          return `${this.currentInhabitant.companyName} (n°${this.currentInhabitantId})`;
+        }
+        return `${this.currentInhabitant.firstName} ${this.currentInhabitant.lastName} (n° ${this.currentInhabitantId})`;
+      }
+      return `Client n° ${this.currentInhabitantId}`;
+    },
   },
 
   watch: {

package/src/components/projects/project-item-save/PbProjectItemSave.stories.mdx

@@ -33,6 +33,107 @@ The `PbProjectItemSave` component to save project item in existing project or ne
       components: { PbProjectItemSave },
       created() {
         this.$store.dispatch('projects/loadProjects');
+        this.$store.dispatch('estimates/setSummary', {
+          subprojectId: 'ae62d167-e02e-4744-81b1-102cc5816be2',
+          subprojectTemplateId: '22248ac3-9391-47f4-8a54-6fe280c2fa5b',
+          businessUnit: 'LMFR',
+          summaryDate: '2020-05-13T09:49:45.886602047Z',
+          cost: {
+            min: 691526.2,
+            max: 1443197.48,
+            currency: 'EURO',
+          },
+          components: [
+            {
+              componentId: 'LAND',
+              title: 'Terrain en lotissement',
+              cost: {
+                min: 20664,
+                max: 38523.6,
+                currency: 'EURO',
+              },
+              lines: [
+                {
+                  text: '- Terrain seul',
+                  details: 'Terrain constructible, délimité et viabilisé. La nature du sous-sol est garantie.',
+                  cost: {
+                    min: 19680,
+                    max: 35670,
+                    currency: 'EURO',
+                  },
+                },
+                {
+                  text: '- Frais de notaire',
+                  cost: {
+                    min: 984,
+                    max: 2853.6,
+                    currency: 'EURO',
+                  },
+                },
+              ],
+            },
+            {
+              componentId: 'HOUSE',
+              title: 'Maison contemporaine livrée prête à finir',
+              cost: {
+                min: 664562.5,
+                max: 1381050,
+                currency: 'EURO',
+              },
+              lines: [
+                {
+                  text: '- Budget construction maison',
+                  details:
+                    "Ce budget n'inclut pas : le terrain, la viabilisation, l'aménagement extérieur et la taxe d'aménagement.",
+                  cost: {
+                    min: 651000,
+                    max: 1255500,
+                    currency: 'EURO',
+                  },
+                },
+              ],
+            },
+            {
+              componentId: 'TAXES',
+              title: "Taxe d'aménagement",
+              details:
+                "Taxe qui s'applique pour les projets de construction, de reconstruction et d'agrandissement qui nécessitent des autorisations de travaux. Un abattement de 50% est prévu sur les 100 premiers m².",
+              cost: {
+                min: 6299.7,
+                max: 23623.88,
+                currency: 'EURO',
+              },
+            },
+          ],
+          subprojectAttributes: {
+            finish: 'PARTIALLY_BY_MYSELF',
+            houseType: 'CONTEMPORARY',
+            inseeCode: '59350',
+            land: 'NOT_YET',
+            landSurfaceInSquareMeters: 123,
+            landType: 'IN_A_LOT',
+            livingAreaInSquareMeters: 465,
+          },
+          suggestedTypologies: [
+            {
+              domesticSpaceLabel: 'Cuisine',
+              domesticSpaceHref: '/domestic-spaces/59405',
+              projectKindHref: '/project-kinds/34048',
+              projectTypeHref: '/project-types/29239',
+            },
+            {
+              domesticSpaceLabel: 'Tout le logement',
+              domesticSpaceHref: '/domestic-spaces/59461',
+              projectKindHref: '/project-kinds/34048',
+              projectTypeHref: '/project-types/61855',
+            },
+          ],
+          legalMentions: [
+            "Les prix ci-dessus ne sont proposés qu'à titre indicatif et sont basés sur les prix du marché.",
+            "L'outil d'estimation ne vaut pas offre de vente.",
+            "La disponibilité des produits au moment de l'achat n'est pas garantie.",
+          ],
+        });
         this.$store.dispatch('projects/loadTypologies');
       },
       template: `  <div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;min-height: 100vh;">

package/src/components/projects/project-item-save/PbProjectItemSave.vue

@@ -150,7 +150,7 @@ export default {
             : `${this.payload.viewModel.notification.success.text} ${this.name} a bien été sauvegardée`,
           link: {
             label: this.payload.viewModel.notification.success.link,
-            href: `${window.location.origin}/espace-perso/espace-projets.html?#/projects/${this.projectToCreate.projectId}/estimates`,
+            href: `${window.location.origin}/espace-perso/espace-projets.html?#/projects/${this.projectToCreate.projectId}`,
           },
         };
         this.$emit('item-created', notification);

package/src/components/restitution/PbRestitutionBlock.vue

@@ -2,23 +2,16 @@
   <div :class="`pb-restitution-block`">
     <m-accordion :label="accordionLabel">
       <template #content>
-        <m-flex
+        <div
           direction="column"
           justify-content="space-between"
           align-items="baseline"
           class="pb-restitution-block__head"
-          full-width
         >
-          <m-flex
-            v-if="component.details"
-            class="pb-restitution-block__details"
-            direction="row"
-            align-items="stretch"
-            full-width
-          >
-            <m-flex class="pb-restitution-block__details-label" align-items="center">{{ component.details }}</m-flex>
-          </m-flex>
-        </m-flex>
+          <div v-if="component.details" class="pb-restitution-block__details">
+            {{ component.details }}
+          </div>
+        </div>
         <pb-restitution-line
           v-for="(line, index) in component.lines"
           :key="`${index}-${line.text}`"
@@ -31,7 +24,6 @@
 </template>
 
 <script>
-import MFlex from '../mozaic/flex/MFlex';
 import MAccordion from '../mozaic/accordions/MAccordion';
 import PbRestitutionLine from './PbRestitutionLine';
 
@@ -39,7 +31,6 @@ export default {
   name: 'PbRestitutionBlock',
 
   components: {
-    MFlex,
     MAccordion,
     PbRestitutionLine,
   },
@@ -75,15 +66,12 @@ export default {
 $responsive-breakpoint: 'm';
 
 .pb-restitution-block {
-  margin-bottom: $mu150;
   width: 100%;
 
   &__head {
     @include set-font-face('semi-bold');
     @include set-font-scale('06', 'm');
 
-    padding-bottom: $mu050;
-
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('07', 'm');
     }
@@ -94,26 +82,35 @@ $responsive-breakpoint: 'm';
     @include set-border-radius('m');
     @include set-font-scale('04', 'm');
 
+    background-color: $color-primary-01-100;
     box-sizing: border-box;
+    color: $color-font-dark;
     color: $color-font-darker;
-    margin-bottom: $mu050;
     padding: $mu100;
+    position: relative;
+    width: 100%;
 
-    @include set-from-screen($responsive-breakpoint) {
-      @include set-font-scale('05', 'l');
+    .a11y-high-contrast & {
+      background-color: $color-primary-01-300;
     }
 
-    &-label {
-      flex-grow: 1;
+    &::before {
+      border-bottom: $mu050 solid $color-primary-01-100;
+      border-left: $mu050 solid transparent;
+      border-right: $mu050 solid transparent;
+      content: '';
+      height: 0;
+      position: absolute;
+      top: -$mu050;
+      width: 0;
     }
-  }
 
-  &__details {
-    background-color: $color-primary-01-100;
-    color: $color-font-dark;
+    .a11y-high-contrast &::before {
+      border-bottom: $mu050 solid $color-primary-01-200;
+    }
 
-    .a11y-high-contrast & {
-      background-color: $color-primary-01-300;
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('05', 'l');
     }
   }
 }

package/src/components/restitution/PbRestitutionLine.vue

@@ -1,12 +1,7 @@
 <template>
   <m-flex :class="`pb-restitution-line`" direction="column">
     <m-flex full-width>
-      <m-flex class="pb-restitution-line__label">
-        <div>{{ line.text }}</div>
-        <div v-if="line.details" @click="displayDetails = !displayDetails" class="pb-restitution-line__label-icon">
-          <m-icon :icon="INFO_ICON" size="s" color="primary-01-600" />
-        </div>
-      </m-flex>
+      <div class="pb-restitution-line__label">{{ line.text }}</div>
       <m-flex class="pb-restitution-line__price" v-if="line.cost" justify-content="flex-end" wrap>
         <div v-if="line.cost.min !== line.cost.max" class="pb-restitution-line__price-min">
           {{ formatPriceRange(line.cost.min, line.cost.max).min }}&nbsp;-&nbsp;
@@ -16,12 +11,7 @@
         </div>
       </m-flex>
     </m-flex>
-    <m-flex v-if="displayDetails" class="pb-restitution-line__details" direction="row" align-items="stretch" full-width>
-      <m-flex class="pb-restitution-line__details-label" align-items="center">{{ line.details }}</m-flex>
-      <m-flex class="pb-restitution-line__details-cross" @click="displayDetails = false" justify-content="flex-start">
-        <m-icon :icon="CROSS_ICON" size="s" color="grey-600" />
-      </m-flex>
-    </m-flex>
+    <div v-if="line.details" class="pb-restitution-line__details">{{ line.details }}</div>
   </m-flex>
 </template>
 
@@ -39,7 +29,6 @@ export default {
 
   components: {
     MFlex,
-    MIcon,
   },
 
   props: {
@@ -54,7 +43,6 @@ export default {
   },
 
   data: () => ({
-    displayDetails: false,
     CROSS_ICON,
     INFO_ICON,
   }),
@@ -114,33 +102,35 @@ $responsive-breakpoint: 'm';
     @include set-border-radius('m');
     @include set-font-scale('04', 'm');
 
-    margin-bottom: $mu050;
+    background-color: $color-primary-01-100;
+    box-sizing: border-box;
+    color: $color-font-dark;
+    margin-top: $mu050;
     padding: $mu100;
+    position: relative;
+    width: 100%;
 
-    @include set-from-screen($responsive-breakpoint) {
-      @include set-font-scale('05', 'l');
+    .a11y-high-contrast & {
+      background-color: $color-primary-01-200;
     }
 
-    &-label {
-      flex-grow: 1;
+    &::before {
+      border-bottom: $mu050 solid $color-primary-01-100;
+      border-left: $mu050 solid transparent;
+      border-right: $mu050 solid transparent;
+      content: '';
+      height: 0;
+      position: absolute;
+      top: -$mu050;
+      width: 0;
     }
 
-    &-cross {
-      height: 100%;
-      padding-left: $mu150;
-
-      &:hover {
-        cursor: pointer;
-      }
+    .a11y-high-contrast &::before {
+      border-bottom: $mu050 solid $color-primary-01-200;
     }
-  }
-
-  &__details {
-    background-color: $color-primary-01-100;
-    color: $color-font-dark;
 
-    .a11y-high-contrast & {
-      background-color: $color-primary-01-200;
+    @include set-from-screen($responsive-breakpoint) {
+      @include set-font-scale('05', 'l');
     }
   }
 }

package/src/services/api/appointmentQualificationsApi.js

@@ -1,34 +1,35 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 const getAppointmentQualification = async (start, end, inhabitantProjectId, groupId, appointmentId) => {
   var url = inhabitantProjectId
     ? `/api/appointment-qualifications?range=${start}-${end}&inhabitantProjectId=${inhabitantProjectId}`
     : `/api/appointment-qualifications?range=${start}-${end}&groupId=${groupId}&appointmentId=${appointmentId}`;
-  const response = await request.get(url);
+  const response = await axios.get(url);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 const saveAnswersByAppointmentQualificationId = async (appointmentQualificationId, data) => {
-  const response = await request
-    .put(`/api/appointment-qualifications/${appointmentQualificationId}/answers`)
-    .set('Content-Type', 'application/json')
-    .send(data);
+  const response = await axios.put(`/api/appointment-qualifications/${appointmentQualificationId}/answers`, data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 const declarationsWithAppointment = async (data) => {
-  return await request.post('/api/declarations-with-appointment').set('Content-Type', 'application/json').send(data);
+  return await axios.post('/api/declarations-with-appointment', data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 };
 
 export { declarationsWithAppointment, saveAnswersByAppointmentQualificationId, getAppointmentQualification };

package/src/services/api/configApi.js

@@ -1,11 +1,11 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 const getConfiguration = async () => {
-  const response = await request.get('/configuration');
+  const response = await axios.get('/configuration');
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/configurationsApi.js

@@ -1,16 +1,18 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 const getProjectConfigurationsForProjectType = async (inhabitantProjectId, all) => {
   let response;
   if (all) {
-    response = await request.get('/api/simulations').query({ inhabitantProjectId }).query({ all });
+    response = await axios.get('/api/simulations', { params: { inhabitantProjectId, all } });
   } else {
-    response = await request.get('/api/simulations').query({ inhabitantProjectId });
+    response = await axios.get('/api/simulations', { params: { inhabitantProjectId } });
   }
 
+  console.log(response);
+
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
@@ -19,25 +21,25 @@ const getProjectConfigurationsForProjectType = async (inhabitantProjectId, all)
 const getAllProjectConfigurations = async (inhabitantProjectId, forceNoPriceUpdate) => {
   let response;
   if (forceNoPriceUpdate) {
-    response = await request
-      .get(`/api/inhabitant-projects/${inhabitantProjectId}/simulations`)
-      .query({ forceNoPriceUpdate });
+    response = await axios.get(`/api/inhabitant-projects/${inhabitantProjectId}/simulations`, {
+      params: { forceNoPriceUpdate },
+    });
   } else {
-    response = await request.get(`/api/inhabitant-projects/${inhabitantProjectId}/simulations`);
+    response = await axios.get(`/api/inhabitant-projects/${inhabitantProjectId}/simulations`);
   }
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 const linkConfiguration = async (id, inhabitantProjectId) => {
-  const response = await request.post(`/api/inhabitant-projects/${inhabitantProjectId}/simulations/${id}`);
+  const response = await axios.post(`/api/inhabitant-projects/${inhabitantProjectId}/simulations/${id}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/documentsApi.js

@@ -1,47 +1,48 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 const uploadDocument = async (formData, inhabitantProjectId, correlationId, subType, trackProgress, fileName) => {
   const [name, file] = formData.entries().next().value;
-  return await request
-    .post(`/api/inhabitant-projects/${inhabitantProjectId}/documents`)
-    .attach('document', file)
-    .field('metadata', JSON.stringify({ type: 'PLAN', correlationId, subType, title: fileName }, null, '\t'))
-    .on('progress', trackProgress);
+  const data = new FormData();
+  data.append('document', file);
+  data.append('metadata', JSON.stringify({ type: 'PLAN', correlationId, subType, title: fileName }, null, '\t'));
+  return await axios.post(`/api/inhabitant-projects/${inhabitantProjectId}/documents`, data, {
+    onUploadProgress: trackProgress,
+  });
 };
 
 const getDocumentsByInhabitantProjectId = async (start, end, inhabitantProjectId) => {
-  const response = await request.get(`/api/inhabitant-projects/${inhabitantProjectId}/documents?range=${start}-${end}`);
+  const response = await axios.get(`/api/inhabitant-projects/${inhabitantProjectId}/documents?range=${start}-${end}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 const getDocumentById = async (inhabitantProjectId, documentId) => {
-  const response = await request.get(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}`);
+  const response = await axios.get(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 const getDocumentThumbnail = async (inhabitantProjectId, documentId) => {
-  return await request.get(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}/thumbnail`);
+  return await axios.get(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}/thumbnail`);
 };
 
 const updateDocumentName = async (inhabitantProjectId, documentId, documentName) => {
-  return await request
-    .patch(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}`)
-    .send({ title: documentName });
+  return await axios.patch(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}`, {
+    title: documentName,
+  });
 };
 
 const deleteDocument = async (inhabitantProjectId, documentId) => {
-  return await request.delete(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}`);
+  return await axios.delete(`/api/inhabitant-projects/${inhabitantProjectId}/documents/${documentId}`);
 };
 
 export {

package/src/services/api/estimatesApi.js

@@ -1,56 +1,59 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 export const getAllEstimates = async (currentEstimatesPage, estimatesPerPageCount, inhabitantProjectId) => {
   const start = currentEstimatesPage * estimatesPerPageCount;
   const end = start + estimatesPerPageCount - 1;
-  const response = await request.get(`/api/estimates?range=${start}-${end}&inhabitantProjectId=${inhabitantProjectId}`);
+  const response = await axios.get(`/api/estimates?range=${start}-${end}&inhabitantProjectId=${inhabitantProjectId}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getEstimateById = async (id) => {
-  const response = await request.get(`/api/estimates/${id}`);
+  const response = await axios.get(`/api/estimates/${id}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const deleteEstimateById = async (id) => {
-  const response = await request.delete(`/api/estimates/${id}`);
+  const response = await axios.delete(`/api/estimates/${id}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const saveEstimate = async (estimate) => {
-  const response = await request.post('/api/estimates').set('Content-Type', 'application/json').send(estimate);
+  const response = await axios.post('/api/estimates', estimate, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const estimate = async (estimatorId, statelessEstimate) => {
-  const response = await request
-    .post(`/api/estimators/${estimatorId}:estimate`)
-    .set('Content-Type', 'application/json')
-    .send(statelessEstimate);
+  const response = await axios.post(`/api/estimators/${estimatorId}:estimate`, statelessEstimate, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/eventsApi.js

@@ -1,63 +1,61 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 export const sendAppointmentQualificationEvent = async (event) => {
-  const response = await request
-    .post('/api/events/appointment-qualification-events')
-    .set('Content-Type', 'application/json')
-    .send(event);
+  const response = await axios.post('/api/events/appointment-qualification-events', event, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const sendAppointmentQualificationAnswers = async (event) => {
-  const response = await request
-    .post('/api/events/appointment-qualification-answers')
-    .set('Content-Type', 'application/json')
-    .send(event);
+  const response = await axios.post('/api/events/appointment-qualification-answers', event, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const sendDocumentsEvent = async (event) => {
-  const response = await request.post('/api/events/documents').set('Content-Type', 'application/json').send(event);
+  const response = await axios.post('/api/events/documents', event, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const sendCardClickEvent = async (event) => {
-  const response = await request
-    .post('/api/events/pushed-card-clicks')
-    .set('Content-Type', 'application/json')
-    .send(event);
+  const response = await axios.post('/api/events/pushed-card-clicks', event, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const sendDeclarationEvent = async (event) => {
-  const response = await request
-    .post('/api/events/project-declarations')
-    .set('Content-Type', 'application/json')
-    .send(event);
+  const response = await axios.post('/api/events/project-declarations', event, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/inhabitantsApi.js

@@ -1,11 +1,11 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 export const getInhabitantById = async (inhabitantId, buId = '001') => {
-  const response = await request.get(`/api/inhabitant-api/users/${buId}/${inhabitantId}`);
+  const response = await axios.get(`/api/inhabitant-api/users/${buId}/${inhabitantId}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/mediaApi.js

@@ -1,21 +1,21 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 const getAllMedia = async (start, end, inhabitantProjectId) => {
-  const response = await request.get(`/api/media?range=${start}-${end}&inhabitantProjectId=${inhabitantProjectId}`);
+  const response = await axios.get(`/api/media?range=${start}-${end}&inhabitantProjectId=${inhabitantProjectId}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 const getMediumById = async (mediumId) => {
-  const response = await request.get(`/api/media/${mediumId}`);
+  const response = await axios.get(`/api/media/${mediumId}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
@@ -23,27 +23,27 @@ const getMediumById = async (mediumId) => {
 
 const uploadMedia = async (formData, inhabitantProjectId, correlationId, fileName, isRoomPicture, trackProgress) => {
   const [name, file] = formData.entries().next().value;
-
-  return await request
-    .post('/api/media')
-    .attach(name, file)
-    .field(
-      'metadata',
-      JSON.stringify({ inhabitantProjectId, correlationId, title: fileName, roomPicture: isRoomPicture }, null, '\t'),
-    )
-    .on('progress', trackProgress);
+  const data = new FormData();
+  data.append(name, file);
+  data.append(
+    'metadata',
+    JSON.stringify({ inhabitantProjectId, correlationId, title: fileName, roomPicture: isRoomPicture }, null, '\t'),
+  );
+  return await axios.post('/api/media', data, {
+    onUploadProgress: trackProgress,
+  });
 };
 
 const updateMediaName = async (mediaId, mediaName) => {
-  return await request.patch(`/api/media/${mediaId}`).send({ title: mediaName });
+  return await axios.patch(`/api/media/${mediaId}`, { title: mediaName });
 };
 
 const makeMediaPublic = async (mediaId) => {
-  return await request.patch(`/api/media/${mediaId}`).send({ public: true });
+  return await axios.patch(`/api/media/${mediaId}`, { public: true });
 };
 
 const deleteMedia = async (mediaId) => {
-  return await request.delete(`/api/media/${mediaId}`);
+  return await axios.delete(`/api/media/${mediaId}`);
 };
 
 export { getAllMedia, getMediumById, uploadMedia, updateMediaName, makeMediaPublic, deleteMedia };

package/src/services/api/mocks/inhabitantsMock.js

@@ -7,3 +7,14 @@ export const getInhabitantByIdResolver = (req, res, ctx) => {
     }),
   );
 };
+
+export const getCompanyByIdResolver = (req, res, ctx) => {
+  return res(
+    ctx.status(200),
+    ctx.json({
+      firstName: 'Jean',
+      lastName: 'Dupont',
+      companyName: 'Nintendo',
+    }),
+  );
+};

package/src/services/api/productsApi.js

@@ -1,54 +1,53 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 export const getWorkKindsByProjectTypeId = async (projectTypeId) => {
-  const response = await request.get(`/api/project-types/${projectTypeId}/work-kinds`);
+  const response = await axios.get(`/api/project-types/${projectTypeId}/work-kinds`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getProductsByWorkKind = async (workKindId, storeId) => {
-  const response = await request.get(`/api/work-kinds/${workKindId}/products${storeId ? '?storeId=' + storeId : ''}`);
+  const response = await axios.get(`/api/work-kinds/${workKindId}/products${storeId ? '?storeId=' + storeId : ''}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getProductsFeatureFlag = async (projectTypeId) => {
-  const response = await request.get(`/api/project-types/${projectTypeId}/products-feature-flag`);
+  const response = await axios.get(`/api/project-types/${projectTypeId}/products-feature-flag`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const saveWorkKinds = async (inhabitantProjectId, workKinds) => {
-  const response = await request
-    .put(`/api/inhabitant-projects/${inhabitantProjectId}/work-kinds`)
-    .set('Content-Type', 'application/json')
-    .send(workKinds);
+  const response = await axios.put(`/api/inhabitant-projects/${inhabitantProjectId}/work-kinds`, workKinds, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getWorkKindsByProjectId = async (inhabitantProjectId) => {
-  const response = await request.get(`/api/inhabitant-projects/${inhabitantProjectId}/work-kinds`);
+  const response = await axios.get(`/api/inhabitant-projects/${inhabitantProjectId}/work-kinds`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/projectsApi.js

@@ -1,13 +1,13 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 export const getAllProjects = async (currentProjectsPage, projectsPerPageCount) => {
   const start = currentProjectsPage * projectsPerPageCount;
   const end = start + projectsPerPageCount - 1;
-  const response = await request.get(`/api/inhabitant-projects?range=${start}-${end}`);
+  const response = await axios.get(`/api/inhabitant-projects?range=${start}-${end}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
@@ -16,71 +16,69 @@ export const getAllProjects = async (currentProjectsPage, projectsPerPageCount)
 export const getAllProjectsForUserId = async (currentProjectsPage, projectsPerPageCount, userId) => {
   const start = currentProjectsPage * projectsPerPageCount;
   const end = start + projectsPerPageCount - 1;
-  const response = await request.get(`/api/inhabitant-projects?range=${start}-${end}&userId=${userId}`);
+  const response = await axios.get(`/api/inhabitant-projects?range=${start}-${end}&userId=${userId}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getProjectById = async (id) => {
-  const response = await request.get(`/api/inhabitant-projects/${id}`);
+  const response = await axios.get(`/api/inhabitant-projects/${id}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const deleteProjectById = async (id) => {
-  const response = await request.delete(`/api/inhabitant-projects/${id}`);
+  const response = await axios.delete(`/api/inhabitant-projects/${id}`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const saveInhabitantProject = async (inhabitantProject) => {
-  const response = await request
-    .post('/api/inhabitant-projects')
-    .set('Content-Type', 'application/json')
-    .send(inhabitantProject);
+  const response = await axios.post('/api/inhabitant-projects', inhabitantProject, {
+    headers: { 'Content-Type': 'application/json' },
+  });
   return response.headers.location;
 };
 
 export const saveProjectDeclaration = async (projectDeclaration) => {
-  const response = await request
-    .post('/api/declarations')
-    .set('Content-Type', 'application/json')
-    .send(projectDeclaration);
+  const response = await axios.post('/api/declarations', projectDeclaration, {
+    headers: { 'Content-Type': 'application/json' },
+  });
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getProjectAttributesById = async (id) => {
-  const response = await request.get(`/api/inhabitant-projects/${id}/attributes`);
+  const response = await axios.get(`/api/inhabitant-projects/${id}/attributes`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );
 };
 
 export const getAppointmentById = async (id) => {
-  const response = await request.get(`/api/inhabitant-projects/${id}/main-appointment`);
+  const response = await axios.get(`/api/inhabitant-projects/${id}/main-appointment`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/services/api/toolsApi.js

@@ -1,11 +1,11 @@
-import request from 'superagent';
+import axios from 'axios';
 import he from 'he';
 
 export const getAllTools = async (projectType) => {
-  const response = await request.get(`${config.VUE_APP_TOOLS_CONFIGURATION_STORAGE}/${projectType}.json`);
+  const response = await axios.get(`${config.VUE_APP_TOOLS_CONFIGURATION_STORAGE}/${projectType}.json`);
 
   return JSON.parse(
-    JSON.stringify(response.body).replace(/:"([^"]+)"/g, (match, $1) => {
+    JSON.stringify(response.data).replace(/:"([^"]+)"/g, (match, $1) => {
       return `: "${he.escape($1)}"`;
     }),
   );

package/src/stores/modules/projectsStore.js

@@ -586,6 +586,9 @@ export const projectTypologiesStoreOptions = {
     setTypologies(state, typologies) {
       state.typologies = typologies;
     },
+    addTypologies(state, typologies) {
+      state.typologies.push(...typologies);
+    },
     setTypologiesLoadError(state, typologiesLoadError) {
       state.typologiesLoadError = typologiesLoadError;
     },
@@ -603,10 +606,10 @@ export const projectTypologiesStoreOptions = {
     },
   },
   actions: {
-    async loadTypologies({ commit, state }) {
+    async loadTypologies({ commit, state, rootGetters }) {
       commit('setTypologiesLoadError', null);
       try {
-        const typologies = state.summary.suggestedTypologies.map((typology) => ({
+        const typologies = rootGetters['estimates/getSummary']?.suggestedTypologies?.map((typology) => ({
           code: typology.domesticSpaceHref,
           title: typology.domesticSpaceLabel,
         }));