project-booster-vue 8.119.3 → 8.120.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.119.3",
+  "version": "8.120.2",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
@@ -36,6 +36,7 @@
     "@mozaic-ds/web-fonts": "1.18.0",
     "@vue/babel-preset-app": "4.5.13",
     "@vue/compat": "3.2.6",
+    "@xstate/vue": "0.8.1",
     "ajv": "8.6.0",
     "axios": "0.25.0",
     "contentful": "8.4.2",
@@ -63,6 +64,7 @@
     "vue-router": "4.0.12",
     "vue3-cookies": "1.0.6",
     "vuex": "4.0.2",
+    "xstate": "4.28.1",
     "yarn": "1.22.10",
     "yup": "0.32.9"
   },
@@ -117,7 +119,7 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-storybook": "0.5.6",
     "eslint-plugin-vue": "7.11.1",
-    "fluent-schema": "1.1.0",
+    "fluent-json-schema": "3.0.1",
     "husky": "6.0.0",
     "msw": "0.35.0",
     "msw-storybook-addon": "1.6.0",

package/src/components/appointment/PbAppointment.stories.mdx

@@ -6,7 +6,7 @@ import SELECTED_SCENARIOS from './default-selected-scenarios';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import documentsStore from '../../stores/modules/documentsStore';
 import appointmentQualificationStore from '../../stores/modules/appointmentQualificationStore';
-import PbUploadDocumentForm from '../media/upload/PbUploadDocumentForm';
+import PbMediaUpload from '../media/upload/PbMediaUpload';
 import { rest } from 'msw';
 import { acceptedResolver } from '../../services/api/mocks/commonMock';
 import { documentThumbnailResolver, uploadDocumentResolver } from '../../services/api/mocks/documentsMock';
@@ -38,9 +38,9 @@ import { documentThumbnailResolver, uploadDocumentResolver } from '../../service
       [
         { path: '/steps/:stepCode/previous/:answers', component: PbScenario },
         {
-          name: 'PbUploadDocumentForm',
+          name: 'PbMediaUpload',
           path: '/document-upload',
-          component: PbUploadDocumentForm,
+          component: PbMediaUpload,
         },
       ],
     ),

package/src/components/appointment/PbAppointment.vue

@@ -9,7 +9,7 @@
       subtitle-loading="Nous recherchons votre page"
       retry-button-label="Réessayer"
       :state="createProjectError ? 'error' : 'loading'"
-      @click-loader="$store.dispatch('appointmentQualification/checkAppointmentQualification')"
+      @loader-click="$store.dispatch('appointmentQualification/checkAppointmentQualification')"
     />
     <m-flex v-else full-width align-items="center" justify-content="center" direction="column">
       <pb-scenario :scenarios="scenarios" min-height="100vh" @scenario-event="handleEvent"></pb-scenario>

package/src/components/categories/PbCategories.vue

@@ -64,7 +64,7 @@
             subtitle-loading="Nous recherchons les catégories"
             subtitle-error="Une erreur est survenue"
             retry-button-label="Réessayer"
-            @click-loader="$store.dispatch('categories/loadCategories', project)"
+            @loader-click="$store.dispatch('categories/loadCategories', project)"
           />
           <pb-cards-select :options="decorateOptions(getCategories)" v-model="value" :multiselect="true" v-else />
         </m-flex>

package/src/components/configurations/search/PbConfigurationsSearch.vue

@@ -13,7 +13,7 @@
           subtitle-error="Une erreur est survenue"
           retry-button-label="Réessayer"
           :state="!!configurationsSearchError ? 'error' : 'loading'"
-          @click-loader="retrySearch"
+          @loader-click="retrySearch"
         />
         <div v-else-if="foundConfigurations.length > 0" class="pb-configurations-search__results">
           <div class="pb-configurations-search__results-title">Vos simulations trouv&eacute;es</div>

package/src/components/landing/PbProjectsLandingEstimators.vue

@@ -73,37 +73,37 @@ export default {
           title: 'Estimez le coût de votre cuisine',
           text: 'Meubles + équipements + pose',
           image: 'https://storage.googleapis.com/project-booster-media/kitchen/logo-kitchen-estimators.png',
-          href: '/estimation-budget-cout-cuisine.html',
+          href: '/estimation-budget-cout-cuisine.html?leadSource=Landing_Acquisition',
         },
         {
           title: 'Estimez le coût de votre salle de bain',
           text: 'Équipements + revêtements + travaux',
           image: 'https://storage.googleapis.com/project-booster-media/bathroom/illu-sdb-cover.png',
-          href: '/estimation-budget-cout-salle-de-bains.html',
+          href: '/estimation-budget-cout-salle-de-bains.html?leadSource=Landing_Acquisition',
         },
         {
           title: 'Estimez le coût de votre meuble de rangement',
           text: 'Dressing, bibliothèque, meuble tv, ...',
           image: 'https://storage.googleapis.com/project-booster-media/storage/logo-storage-estimator.jpg',
-          href: '/estimation-budget-cout-rangement.html',
+          href: '/estimation-budget-cout-rangement.html?leadSource=Landing_Acquisition',
         },
         {
           title: 'Estimez le coût de vos radiateurs',
           text: 'Radiateurs + pose',
           image: 'https://storage.googleapis.com/project-booster-media/heating/logo-heating-estimator.jpg',
-          href: '/estimation-budget-cout-radiateurs.html',
+          href: '/estimation-budget-cout-radiateurs.html?leadSource=Landing_Acquisition',
         },
         {
           title: 'Estimez le coût de votre isolation',
           text: 'Isolation des sols, des combles, du garage',
           image: 'https://storage.googleapis.com/project-booster-media/insulation/logo-insulation-estimator.png',
-          href: '/estimation-budget-cout-isolation.html',
+          href: '/estimation-budget-cout-isolation.html?leadSource=Landing_Acquisition',
         },
         {
           title: 'Estimer le coût de votre sol',
           text: 'Carrelage, sol stratifié, sol souple ...',
           image: 'https://storage.googleapis.com/project-booster-media/floor/illu-floor-cover.png',
-          href: '/projets/estimations/estimation-budget-cout-revetement-de-sol.html',
+          href: '/projets/estimations/estimation-budget-cout-revetement-de-sol.html?leadSource=Landing_Acquisition',
         },
       ],
     };

package/src/components/loader/PbLoader.stories.mdx

@@ -26,7 +26,7 @@ export const PB_LOADER_STATE_PROP = {
   title="Project Booster/Components/Loaders/PbLoader  🧬"
   component={PbLoader}
   argTypes={{
-    'click-loader': { action: 'Clicked' },
+    'loader-click': { action: 'Clicked' },
   }}
   parameters={{
     layout: 'fullscreen',
@@ -57,7 +57,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     :subtitle-error="subtitleError"
     :retry-button-label="retryButtonLabel"
     :state="state"
-    @click-loader="click-loader"
+    @loader-click="loader-click"
   />`,
 });
 

package/src/components/media/PbMedia.stories.mdx

@@ -8,8 +8,14 @@ import {
   getMediaFileResolver,
   uploadMediaResolver,
 } from '../../services/api/mocks/mediaMock';
+import {
+  getDocumentsByInhabitantProjectIdResolver,
+  getDocumentsImageThumbnailResolver,
+  getDocumentsImageFileResolver,
+  uploadDocumentResolver,
+} from '../../services/api/mocks/documentsMock';
 import { rest } from 'msw';
-import { notContentResolver } from '../../services/api/mocks/commonMock';
+import { notContentResolver, acceptedResolver } from '../../services/api/mocks/commonMock';
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import DOCUMENTS_LIST_PAYLOAD from './list/documents-list-payload.json';
 import DOCUMENT_DETAIL_PAYLOAD from './detail/document-detail-payload.json';
@@ -70,8 +76,11 @@ export const TemplateSandbox = (args, { argTypes }) => {
       controls: { disabled: true },
       msw: [
         rest.patch('/api/media/:mediaId', notContentResolver),
+        rest.post('/api/events/media', acceptedResolver),
+        rest.post('/api/media', uploadMediaResolver),
         rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
         rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.get('/api/media', getAllMediaPaginationResolver),
       ],
     }}
     height="512px"
@@ -88,7 +97,7 @@ export const TemplateSandbox = (args, { argTypes }) => {
   </Story>
 </Canvas>
 
-# `EmptyState Docuemnt`
+# `EmptyState Document`
 
 <Canvas>
   <Story
@@ -96,9 +105,14 @@ export const TemplateSandbox = (args, { argTypes }) => {
     parameters={{
       controls: { disabled: true },
       msw: [
-        rest.patch('/api/media/:mediaId', notContentResolver),
-        rest.get('/api/media/:mediaId/thumbnail', getMediaThumbnailResolver),
-        rest.get('/api/media/:mediaId/file', getMediaFileResolver),
+        rest.post('/api/events/documents', acceptedResolver),
+        rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
+        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),
       ],
     }}
     height="512px"

package/src/components/media/PbMedia.vue

@@ -38,7 +38,7 @@
           subtitle-error="Voulez-vous relancer le chargement des photos"
           retry-button-label="Réessayer"
           :state="mediaLoadError ? 'error' : 'loading'"
-          @click-loader="$store.dispatch(storeModuleName + '/loadMedia')"
+          @loader-click="$store.dispatch(storeModuleName + '/loadMedia')"
         />
       </m-flex>
       <pb-media-list

package/src/components/media/detail/PbMediaDetail.vue

@@ -519,7 +519,7 @@ export default {
           this.$emit('media-name-updated', this.mediaName);
           this.isMediaNameSaved = true;
         } catch (err) {
-          if (err.response?.body?.code === 'NAME_ALREADY_USED') {
+          if (err.response?.data?.code === 'NAME_ALREADY_USED') {
             this.isNameAlreadyUsed = true;
           }
           this.mediaNameSaveError = true;

package/src/components/media/list/PbMediaList.vue

@@ -54,7 +54,7 @@
           v-if="!isLoadingMedia && hasStillMedia && mediaList && mediaList.length > 0"
           class="pb-media-list__show-more-button"
           theme="bordered"
-          :label="payload.viewModel.emptyState.buttonLabel"
+          :label="payload.viewModel.showMore.label"
           @click="loadMore"
           width="fit"
           :style="`transition-delay: ${showMoreButtonAnimationDelay}ms;`"

package/src/components/media/list/documents-list-payload.json

@@ -6,6 +6,9 @@
       "readOnlyDescription": "Aucune document",
       "image": "https://storage.googleapis.com/project-booster-media/media/media.svg",
       "buttonLabel": "Ajouter un document"
+    },
+    "showMore": {
+      "label": "Voir plus"
     }
   }
 }

package/src/components/media/list/media-list-payload.json

@@ -6,6 +6,9 @@
       "readOnlyDescription": "Aucune photo",
       "image": "https://storage.googleapis.com/project-booster-media/media/media.svg",
       "buttonLabel": "Ajouter une photo"
+    },
+    "showMore": {
+      "label": "Voir plus"
     }
   }
 }

package/src/components/media/upload/PbMediaUpload.stories.mdx

@@ -8,6 +8,7 @@ import {
   internalServerErrorResolver,
   notContentResolver,
   successResolver,
+  acceptedResolver,
 } from '../../../services/api/mocks/commonMock';
 import {
   getAllMediaPaginationResolver,
@@ -74,6 +75,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     parameters={{
       controls: { disabled: true },
       msw: [
+        rest.post('/api/events/media', acceptedResolver),
         rest.get('/api/media', getAllMediaPaginationResolver),
         rest.get('/api/media/:mediaId', successResolver),
         rest.post('/api/media', uploadMediaResolver),
@@ -99,7 +101,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     name="Name already used"
     parameters={{
       controls: { disabled: true },
-      msw: [rest.post('/api/media', nameAlreadyUsedResolver)],
+      msw: [rest.post('/api/events/media', acceptedResolver), rest.post('/api/media', nameAlreadyUsedResolver)],
       storyshots: { disable: true },
     }}
     inline={false}
@@ -121,6 +123,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     parameters={{
       controls: { disabled: true },
       msw: [
+        rest.post('/api/events/media', acceptedResolver),
         rest.get('/api/media', getAllMediaPaginationResolver),
         rest.get('/api/media/:mediaId', successResolver),
         rest.post('/api/media', uploadMediaResolver),
@@ -147,6 +150,7 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     parameters={{
       controls: { disabled: true },
       msw: [
+        rest.post('/api/events/documents', acceptedResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
         rest.get(
           '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
@@ -176,12 +180,12 @@ export const TemplateSandbox = (args, { argTypes }) => ({
     parameters={{
       controls: { disabled: true },
       msw: [
+        rest.post('/api/events/documents', acceptedResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/', getDocumentsByInhabitantProjectIdResolver),
         rest.get(
           '/api/inhabitant-projects/:projectId/documents/:documentId/thumbnail',
           getDocumentsImageThumbnailResolver,
         ),
-        rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', uploadDocumentResolver),
         rest.post('/api/inhabitant-projects/:projectId/documents', internalServerErrorResolver),
       ],

package/src/components/media/upload/PbMediaUpload.vue

@@ -4,11 +4,11 @@
       <div
         v-if="!readOnly"
         class="pb-media-upload__form-button mc-button mc-button--s@from-m"
-        :class="{ 'is-disabled': isAddPhotoDisabled }"
+        :class="{ 'is-disabled': isAddPhotoDisabled, 'is-hidden': !payload.viewModel.title }"
         id="pbMediaUploadButton"
         @click="addMedia"
       >
-        <div class="mc-button__label">{{ payload.viewModel.dialog.title }}</div>
+        <div class="mc-button__label">{{ payload.viewModel.title }}</div>
         <input
           class="pb-media-upload__form-input"
           type="file"
@@ -261,7 +261,6 @@ export default {
   data() {
     return {
       uploadedFiles: [],
-      uploadError: null,
       currentStatus: null,
       mediaPreviewUrl: null,
       validationErrors: [],
@@ -269,10 +268,6 @@ export default {
       formData: null,
       fileName: null,
       selectedType: null,
-      isMediaUploading: false,
-      isMediaUploaded: false,
-      mediaUploadError: null,
-      isNameAlreadyUsed: false,
       isRoomPicture: false,
       PDF_IMAGE,
     };
@@ -287,6 +282,26 @@ export default {
       return this.$store.getters[this.storePrefix + 'isAddPhotoDisabled'];
     },
 
+    isMediaUploaded() {
+      return this.$store.getters[this.storePrefix + 'isUploaded'];
+    },
+
+    isMediaUploading() {
+      return this.$store.getters[this.storePrefix + 'isUploading'];
+    },
+
+    mediaUploadError() {
+      return this.$store.getters[this.storePrefix + 'getUploadError'];
+    },
+
+    uploadedMediaId() {
+      return this.$store.getters[this.storePrefix + 'getUploadedId'];
+    },
+
+    isNameAlreadyUsed() {
+      return this.$store.getters[this.storePrefix + 'isNameAlreadyUsed'];
+    },
+
     uploadProgress() {
       return this.$store.getters[this.storePrefix + 'getUploadProgress'];
     },
@@ -294,9 +309,9 @@ export default {
     nameSaveError() {
       let error = null;
       if (this.fileName === null || this.fileName.length === 0) {
-        error = 'Le nom  est obligatoire';
+        error = 'Le nom est obligatoire';
       } else if (this.fileName !== null && this.fileName.length > NAME_MAX_LENGTH) {
-        error = `Le nom  doit faire au maximum ${NAME_MAX_LENGTH} caractères`;
+        error = `Le nom doit faire au maximum ${NAME_MAX_LENGTH} caractères`;
       } else if (this.isNameAlreadyUsed) {
         error = 'Ce nom est déjà utilisé dans ce projet';
       } else if (this.mediaUploadError) {
@@ -343,7 +358,7 @@ export default {
       }
     },
     fileName() {
-      this.isNameAlreadyUsed = false;
+      this.$store.dispatch(this.storePrefix + 'nameChanged');
     },
   },
 
@@ -375,7 +390,6 @@ export default {
 
     reset() {
       this.uploadedFiles = [];
-      this.uploadError = null;
       this.mediaPreviewUrl = null;
       this.displayAddDialog = false;
       this.validationErrors = [];
@@ -384,30 +398,17 @@ export default {
       this.isRoomPicture = false;
       this.selectedType = null;
       this.$refs?.pbMediaUploadForm?.reset();
-      this.isMediaUploaded = false;
       this.$store.dispatch(this.storePrefix + 'resetMediaUploadContext');
     },
 
     async upload() {
       if (!this.disabled && !this.isMediaUploaded) {
-        this.isMediaUploading = true;
-        this.isMediaUploaded = false;
-        try {
-          await this.$store.dispatch(this.storePrefix + 'uploadFile', {
-            formData: this.formData,
-            fileName: this.fileName,
-            isRoomPicture: this.isRoomPicture,
-            documentType: this.selectedType?.code,
-          });
-          this.isMediaUploaded = true;
-        } catch (error) {
-          if (error.response?.body?.code === 'NAME_ALREADY_USED') {
-            this.isNameAlreadyUsed = true;
-          } else {
-            this.mediaUploadError = error;
-          }
-        }
-        this.isMediaUploading = false;
+        await this.$store.dispatch(this.storePrefix + 'uploadFile', {
+          formData: this.formData,
+          fileName: this.fileName,
+          isRoomPicture: this.isRoomPicture,
+          documentType: this.selectedType?.code,
+        });
       } else {
         this.displayAddDialog = false;
         /**
@@ -415,7 +416,7 @@ export default {
          * @event media-uploaded
          * @type {Event}
          */
-        this.$emit('media-uploaded', { name: this.fileName, url: this.mediaPreviewUrl });
+        this.$emit('media-uploaded', { id: this.uploadedMediaId, name: this.fileName, url: this.mediaPreviewUrl });
         this.reset();
       }
     },
@@ -433,7 +434,7 @@ export default {
       if (file['type'].split('/')[0] === 'image') {
         const validationData = await this.validateMedia(file);
         this.$store.dispatch('sendEventToBus', { code: 'documentUploadValidation', payload: validationData });
-        this.$store.dispatch(this.storePrefix + 'validateDocumentData', validationData);
+        this.$store.dispatch(this.storePrefix + 'validateFileData', validationData);
         this.validationErrors = validationData.validation;
       } else {
         const fileValidChecker = isFileTypeValid(this.acceptedUploadedTypes)(file);
@@ -441,7 +442,7 @@ export default {
           this.validationErrors['invalidFileType'] = true;
         }
       }
-      this.$store.dispatch(this.storePrefix + 'sendDocumentsEvent', { eventName: 'qualify-by-the-front', file: file });
+      this.$store.dispatch(this.storePrefix + 'sendEvent', { eventName: 'qualify-by-the-front', file: file });
       this.updateMediaPreviewUrl(file);
       this.formData.append(fieldName, file, file.name);
 
@@ -752,6 +753,10 @@ $responsive-breakpoint: 'l';
 .is-disabled {
   pointer-events: none;
 }
+
+.is-hidden {
+  display: none;
+}
 </style>
 
 <style lang="scss">

package/src/components/mozaic/accordions/MAccordion.vue

@@ -122,6 +122,10 @@ export default {
 .m-accordion {
   @include set-font-face('regular');
 
+  &__content {
+    transition: none;
+  }
+
   &__label {
     flex: 1 1 0;
   }