project-booster-vue 10.4.3 → 10.5.1

package/package.json

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

package/src/components/projects/project-attributes/PbProjectAttributes.vue

@@ -113,7 +113,12 @@
         </template>
         <li v-if="attributeId === 'bathTubStyle'">Type de baignoire: {{ bathTubStyle[attribute.value] }}</li>
         <li v-if="attributeId === 'showerType'">Type de douche: {{ showerType[attribute.value] }}</li>
-        <li v-if="attributeId === 'furnitureType'">Type de meubles: {{ furnitureType[attribute.value] }}</li>
+        <template v-if="attributeId === 'furnitureType'">
+          <li v-if="isArray(attribute.value)" v-for="value in JSON.parse(attribute.value)">
+            Type de meubles: {{ furnitureType[value] }}
+          </li>
+          <li v-else>Type de meubles: {{ furnitureType[attribute.value] }}</li>
+        </template>
         <li v-if="attributeId === 'wcType'">Type de WC: {{ wcType[attribute.value] }}</li>
       </template>
     </ul>

package/src/components/rework/alert/MPbAlert.vue

@@ -76,7 +76,6 @@ import { MNotification, MButton, MCard, MModal } from '@mozaic-ds/vue-3';
 import { PayloadAction } from '../types/genericPayload';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ref } from 'vue';
-import { ButtonType, EventName, sendAnalyticEvent } from '../services/event';
 import { useStore } from 'vuex';
 
 const emit = defineEmits(['go-back', 'step-completed']);
@@ -103,14 +102,6 @@ const handleCloseModal = () => {
 };
 
 const handleShowModal = (option: any) => {
-  if (props.payload.viewModel.analytics.funnel_name) {
-    sendAnalyticEvent(store, EventName.CLICK, {
-      button_name: option.viewModel.button.label || '',
-      button_location: props.payload.viewModel.analytics.funnel_name,
-      button_type: ButtonType.ACTION,
-    });
-  }
-
   if (option.viewModel.button.dialog) {
     showModal.value = true;
     titleModal.value = option.viewModel.title;
@@ -130,14 +121,6 @@ const callAction = (button: PayloadAction) => {
       answers: null,
       nextStep: button.code,
     });
-
-    if (props.payload.viewModel.analytics.funnel_name) {
-      sendAnalyticEvent(store, EventName.CLICK, {
-        button_name: button.label || '',
-        button_location: props.payload.viewModel.analytics.funnel_name,
-        button_type: ButtonType.ACTION,
-      });
-    }
   } else {
     emit('go-back');
   }

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -88,7 +88,6 @@ import { PayloadAction } from '../types/genericPayload';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { ButtonType, EventName, sendAnalyticEvent } from '../services/event';
 import { useStore } from 'vuex';
 import { callAction } from '../services/navigate';
 
@@ -127,14 +126,6 @@ const props = defineProps({
  * @param action
  */
 const goToNavigation = (action: PayloadAction, label?: string) => {
-  if (label && props.payload.viewModel.analytics.funnel_name) {
-    sendAnalyticEvent(store, EventName.CLICK, {
-      button_name: label || '',
-      button_location: props.payload.viewModel.analytics.funnel_name,
-      button_type: ButtonType.ACTION,
-    });
-  }
-
   callAction(action, [{ message }], emit);
 };
 

package/src/components/rework/media/upload/MPbMediaUpload.vue

@@ -30,11 +30,9 @@
         />
       </div>
       <div class="pb-media-upload__link" v-if="payload.viewModel.notification">
-        <m-link
-          :label="payload.viewModel.notification.title"
-          :theme="payload.viewModel.notification.theme"
-          @click="displayNotificationDialog = true"
-        />
+        <m-link :theme="payload.viewModel.notification.theme" @click.prevent="displayNotificationDialog = true">{{
+          payload.viewModel.notification.title
+        }}</m-link>
       </div>
       <div class="pb-media-upload__buttons" v-if="payload.callToActions">
         <div class="pb-media-upload__buttons__button" v-for="button in payload.callToActions">
@@ -240,10 +238,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MButton from '../../../mozaic/buttons/MButton.vue';
 import MDialog from '../../../mozaic/dialog/MDialog.vue';
 import MFlex from '../../../mozaic/flex/MFlex.vue';
-import MLink from '../../../mozaic/link/MLink.vue';
 import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
 import MRadio from '../../../mozaic/radio/MRadio.vue';
 import MToggle from '../../../mozaic/toggle/MToggle.vue';
@@ -254,7 +250,7 @@ import { isFileTypeValid, MediaValidationErrors, mediaValidator } from './mediaV
 import DOCUMENT_UPLOAD_PAYLOAD from './document-upload-payload.json';
 import { MediaEventOptions, MediaUploadOptions } from '@/types/pb/Media';
 import { UploadDocumentMediaType } from '@/components/question/upload-document/UploadDocument';
-import { MModal, MCard } from '@mozaic-ds/vue-3';
+import { MModal, MCard, MButton, MLink } from '@mozaic-ds/vue-3';
 import { PayloadAction } from '../../types/genericPayload';
 
 const NAME_MAX_LENGTH = 60;

package/src/components/rework/products/MPbProducts.vue

@@ -2,7 +2,7 @@
   <div class="pb-products">
     <div class="pb-products__back-button-container" v-if="payload.viewModel.backLabel">
       <m-link
-        icon="ArrowArrowLeft48"
+        icon="ArrowLeft48"
         :class="{
           'pb-products__back-button': true,
         }"

package/src/components/rework/question/MPbQuestion.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pb-question__container" :style="{ paddingBottom: `calc(${stickyBottomOffset}px)` }">
     <div class="pb-question">
-      <m-flex align-items="center">
+      <div class="row-flex align-center">
         <m-link
           :label="payload.viewModel.backLabel || 'Question précédente'"
           :left-icon="BACK_ICON"
@@ -12,8 +12,8 @@
           }"
           @click="navigateTo(payload.viewModel)"
         />
-      </m-flex>
-      <m-container fluid class="pb-question__answers-container">
+      </div>
+      <div class="pb-question__answers-container row-flex column">
         <div class="pb-question__answers-container-progress">
           <div
             class="pb-question__answers-container-progress-label"
@@ -25,7 +25,7 @@
           ></div>
         </div>
 
-        <m-flexy class="pb-question__answers-container-flexy">
+        <div class="pb-question__answers-container-flexy row-flex">
           <transition-group :class="`pb-question__answers`" :name="showMoreAnimation" tag="div">
             <div
               v-for="answer in displayedAnswers"
@@ -115,7 +115,7 @@
               </div>
             </div>
           </transition-group>
-          <m-flex v-if="showMoreButtonDisplayed" class="pb-question__show-more-container" justify-content="center">
+          <div v-if="showMoreButtonDisplayed" class="pb-question__show-more-container row-flex justify-center">
             <m-button
               theme="bordered"
               class="pb-question__show-more-button"
@@ -123,11 +123,11 @@
               :label="payload?.viewModel?.showMore?.label"
               @click="handleShowMoreClick()"
             />
-          </m-flex>
-        </m-flexy>
+          </div>
+        </div>
 
         <!-- Help link/modal -->
-        <m-flex class="pb-question__help" v-if="payload.helpArea" direction="column">
+        <div class="pb-question__help row-flex column" v-if="payload.helpArea">
           <div v-for="helpItem in payload.helpArea" :key="helpItem.type">
             <div v-if="helpItem.type === 'text'">
               <p class="pb-question__help__text">{{ helpItem.label }}</p>
@@ -143,7 +143,7 @@
               />
             </div>
           </div>
-        </m-flex>
+        </div>
 
         <m-notification class="pb-question__notifications" :type="notification.type" v-if="notification">
           <template #default>
@@ -179,7 +179,7 @@
             :label="payload.redirectLink.label"
           />
         </div>
-      </m-container>
+      </div>
       <div
         v-if="isShowingFooter(payload.viewModel)"
         class="pb-question__footer"
@@ -222,6 +222,7 @@
               @click="$emit('go-back')"
               v-if="!payload.viewModel.hideBackButton"
               icon="ArrowBack48"
+              :data-cerberus="sanitizeCerberusAttribut('MPB-QUESTION', 'Etape precedente')"
             >
             </m-button>
           </div>
@@ -235,6 +236,7 @@
               label="Étape suivante"
               @click="nextStepHandler"
               :disabled="!hasAnswersSelected"
+              :data-cerberus="sanitizeCerberusAttribut('MPB-QUESTION', 'Etape suivante')"
             />
           </div>
           <div v-else-if="skippables && !hasAnswersSelected" class="pb-question__actions-container__column">
@@ -248,12 +250,13 @@
               :iconPosition="button.iconPosition"
               size="m"
               @click="skipQuestion(button)"
+              :data-cerberus="sanitizeCerberusAttribut('MPB-QUESTION', button?.label)"
             />
           </div>
         </div>
       </transition-group>
     </pb-sticky-footer>
-    <m-container>
+    <div class="row-flex">
       <m-flexy
         v-if="payload.viewModel.decoratorStripe && Number(payload.viewModel.decoratorStripe.length) > 0"
         class="pb-question__decorator-stripe"
@@ -269,7 +272,7 @@
           <m-image class="pb-question__decorator-stripe-item-image" :src="decoratorItem" />
         </m-flexy-col>
       </m-flexy>
-    </m-container>
+    </div>
 
     <m-modal
       :modalTitle="notification?.modal?.title"
@@ -315,14 +318,16 @@
       </template>
     </m-modal>
 
-    <m-dialog class="pb-question__dialog" v-model:show-dialog="displayDialog">
-      <template #header v-if="!displayVideo">
-        <span>{{ dialog?.headerTitle }}</span>
-      </template>
-      <template #body>
+    <m-modal
+      class="pb-question__dialog"
+      :modalTitle="dialog?.headerTitle"
+      :open="displayDialog"
+      @update:open="displayDialog = false"
+    >
+      <template #default>
         <div class="pb-question__dialog-body" v-if="!displayVideo">
           <div :style="`background-image: url(${dialog?.imageUrl});`" class="pb-question__dialog-body-image" />
-          <m-flex direction="column" class="pb-question__dialog-body-description">
+          <div class="pb-question__dialog-body-description row-flex column">
             <div class="pb-question__dialog-body-title">{{ dialog?.title }}</div>
             <div class="pb-question__dialog-body-text" v-html="dialog?.text" />
             <m-button
@@ -333,7 +338,7 @@
               width="fit"
               @click="displayVideoGuide(dialog?.headerTitle)"
             />
-          </m-flex>
+          </div>
         </div>
         <iframe
           v-else
@@ -345,34 +350,28 @@
         ></iframe>
       </template>
       <template #footer v-if="!displayVideo">
-        <m-flex class="pb-question__dialog-footer" justify-content="center">
-          <m-button
-            label="Fermer"
-            width-from-m="fit"
-            width="full"
-            theme="bordered-neutral"
-            @click="displayDialog = false"
-          />
-        </m-flex>
+        <m-button
+          label="Fermer"
+          width-from-m="fit"
+          width="full"
+          theme="bordered-neutral"
+          @click="displayDialog = false"
+        />
       </template>
-    </m-dialog>
+    </m-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref, computed, watch, onMounted, onBeforeUnmount, defineEmits, nextTick } from 'vue';
+import { PropType, ref, computed, watch, onMounted, defineEmits } from 'vue';
+import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { MButton } from '@mozaic-ds/vue-3';
-import MContainer from '../../mozaic/grid/MContainer.vue';
-import MDialog from '../../mozaic/dialog/MDialog.vue';
-import MFlex from '../../mozaic/flex/MFlex.vue';
 import MFlexy from '../../mozaic/grid/MFlexy.vue';
 import MFlexyCol from '../../mozaic/grid/MFlexyCol.vue';
-import MIcon from '../../mozaic/icon/MIcon.vue';
 import MImage from '../../mozaic/image/MImage.vue';
-import MLink from '../../mozaic/link/MLink.vue';
 import MPbCard from '../../rework/cards/MPbCards.vue';
 import PbStickyFooter from '../../sticky-footer/PbStickyFooter.vue';
-import { MNotification, MModal } from '@mozaic-ds/vue-3';
+import { MNotification, MModal, MLink, MIcon } from '@mozaic-ds/vue-3';
 import { sortAnswers } from './sortAnswers';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
 import { decorate } from '@/services/decorate';
@@ -388,7 +387,6 @@ import {
   ScenarioStepDialog,
   ScenarioStepAnswerNotification,
 } from '@/types/pb/Scenario';
-import { sendAnalyticEvent, EventName, ButtonType } from '../services/event';
 import { useStore } from 'vuex';
 
 const BACK_ICON =
@@ -610,14 +608,6 @@ const selectAnswer = (stepCode: string, answer: ScenarioStepAnswer) => {
 const validMultiSelect = (multiSelectOptions: ScenarioStepMultiSelectAction | undefined) => {
   const answers: any = [];
 
-  if (props.payload.viewModel.analytics.funnel_name) {
-    sendAnalyticEvent($store, EventName.FIELD, {
-      field_name: multiSelectOptions?.label || '',
-      field_value: answers,
-      funnel_name: props.payload.viewModel.analytics.funnel_name,
-    });
-  }
-
   for (const answerCode in Object.fromEntries(selectedAnswers.value)) {
     if (selectedAnswers.value.get(answerCode)) {
       answers.push({ ...questionPossibleAnswers.value.get(answerCode), selected: true });
@@ -706,14 +696,6 @@ const handleLinkClick = (answer: ScenarioStepAnswer) => {
       },
     },
   });
-
-  if (props.payload.viewModel.analytics.funnel_name) {
-    sendAnalyticEvent($store, EventName.CLICK, {
-      button_name: answer.viewModel?.title || '',
-      button_location: props.payload.viewModel.analytics.funnel_name,
-      button_type: ButtonType.ACTION,
-    });
-  }
 };
 
 const displayVideoGuide = (origin: string | undefined) => {

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -2,7 +2,6 @@
   <form class="pb-city-search" @submit.prevent="handleFormValidation">
     <m-flex class="pb-city-search__back-button-container" align-items="stretch">
       <m-link
-        :label="computedPayload.viewModel.backLabel"
         :left-icon="BACK_ICON"
         :class="{
           'pb-city-search__back-button': true,
@@ -10,7 +9,8 @@
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
-      />
+        >{{ computedPayload.viewModel.backLabel }}</m-link
+      >
     </m-flex>
     <div class="pb-city-search__form">
       <div class="pb-city-search__title">
@@ -106,14 +106,13 @@ import merge from 'lodash.merge';
 import initGoogleMapsApi from './google-maps-api';
 import axios from 'axios';
 import MFlex from '../../../mozaic/flex/MFlex.vue';
-import MButton from '../../../mozaic/buttons/MButton.vue';
-import MLink from '../../../mozaic/link/MLink.vue';
 import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { DebouncedFunc } from 'lodash-es';
 import { decorate } from '@/services/decorate';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
+import { MButton, MLink } from '@mozaic-ds/vue-3';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.vue

@@ -123,7 +123,6 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { Configuration } from '@/types/pb/Configuration';
 import { decorate } from '@/services/decorate';
 import { PayloadAction } from '../../types/genericPayload';
-import { ButtonType, EventName, sendAnalyticEvent } from '../../services/event';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -204,12 +203,6 @@ export default defineComponent({
     const configurationImportError = ref(false);
 
     const navigateTo = (viewModel: ConfigurationsImportViewModel) => {
-      sendAnalyticEvent(store, EventName.CLICK, {
-        button_name: viewModel.label || '',
-        button_location: '',
-        button_type: ButtonType.ACTION,
-      });
-
       if (viewModel.backLink) {
         (<any>window).location = decorate(props.answers, props.runtimeOptions, viewModel.backLink);
       } else {
@@ -246,12 +239,6 @@ export default defineComponent({
     };
 
     const skipQuestion = (button: ConfigurationsImportSkippable) => {
-      sendAnalyticEvent(store, EventName.CLICK, {
-        button_name: button.label || '',
-        button_location: '',
-        button_type: ButtonType.ACTION,
-      });
-
       store.dispatch('sendEventToBus', { code: 'SKIP-IMPORT-SIMULATIONS', payload: { projectId: projectId.value } });
       emit(props.completedEventName, {
         answers: {},
@@ -260,12 +247,6 @@ export default defineComponent({
     };
 
     const validMultiSelect = (multiSelectOptions: ConfigurationsImportMultiSelectAction) => {
-      sendAnalyticEvent(store, EventName.CLICK, {
-        button_name: multiSelectOptions.label || '',
-        button_location: '',
-        button_type: ButtonType.ACTION,
-      });
-
       emit(props.completedEventName, {
         answers: selectedConfigurations.value,
         nextStep: multiSelectOptions.nextStep,
@@ -273,12 +254,6 @@ export default defineComponent({
     };
 
     const callAction = (action: PayloadAction) => {
-      sendAnalyticEvent(store, EventName.CLICK, {
-        button_name: action.label || '',
-        button_location: '',
-        button_type: ButtonType.ACTION,
-      });
-
       if (action.code != '__BACK__') {
         emit('step-completed', {
           answers: [],

package/src/components/rework/question/incremental-amount-input/MPbIncrementalAmountInput.vue

@@ -2,15 +2,15 @@
   <div class="pb-incremental-amount-input row-flex column align-center">
     <div class="pb-incremental-amount-input__back-button-container row-flex align-stretch">
       <m-link
-        :label="computedPayload.viewModel.backLabel"
-        :left-icon="BACK_ICON"
+        icon="ArrowBack48"
         :class="{
           'pb-incremental-amount-input__back-button': true,
           'pb-incremental-amount-input__back-button--hidden':
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
-      />
+        >{{ computedPayload.viewModel.backLabel }}</m-link
+      >
     </div>
 
     <form
@@ -32,7 +32,7 @@
         />
       </div>
 
-      <div class="pb-incremental-amount-input__buttons-container row-flex column align-start">
+      <div class="pb-incremental-amount-input__buttons-container row-flex flex-start">
         <m-button
           class="pb-incremental-amount-input__button"
           :label="computedPayload.viewModel.actionLabel"
@@ -49,14 +49,13 @@ import { computed, onMounted, ComputedRef, PropType } from 'vue';
 import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
 import DEFAULT_PAYLOAD from './default-payload.json';
-import MLink from '../../../mozaic/link/MLink.vue';
-import MButton from '../../../mozaic/buttons/MButton.vue';
 import { ref } from 'vue';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import MQuantitySelector from '../../../mozaic/quantityselector/MQuantitySelector.vue';
 import { IncrementalAmountPayload } from '@/components/question/incremental-amount-input/IncrementalAmount';
 import { EmitEventName } from '../../services/emit';
+import { MLink, MButton } from '@mozaic-ds/vue-3';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
@@ -328,7 +327,6 @@ $responsive-breakpoint: 'm';
   }
 
   &__buttons-container {
-    justify-content: flex-end !important;
     margin-bottom: $mu100;
     position: sticky;
     z-index: 1;

package/src/components/rework/question/name-input/MPbNameInput.vue

@@ -2,7 +2,6 @@
   <div class="pb-name-input row-flex column align-center">
     <div class="pb-name-input__back-button-container row-flex align-stretch">
       <m-link
-        :label="computedPayload.viewModel.backLabel"
         :left-icon="BACK_ICON"
         :class="{
           'pb-name-input__back-button': true,
@@ -10,7 +9,8 @@
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
-      />
+        >{{ computedPayload.viewModel.backLabel }}</m-link
+      >
     </div>
     <form class="pb-name-input__form-container" ref="pbNameInputFormObserver" @submit.prevent="handleFormSubmit">
       <div class="pb-name-input__title">
@@ -54,8 +54,6 @@ import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
-import MButton from '../../../mozaic/buttons/MButton.vue';
-import MLink from '../../../mozaic/link/MLink.vue';
 import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
 import MToggle from '../../../mozaic/toggle/MToggle.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
@@ -64,6 +62,7 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { EmitEventName } from '../../services/emit';
+import { MButton, MLink } from '@mozaic-ds/vue-3';
 
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';

package/src/components/rework/question/space-input/MPbSpaceInput.vue

@@ -2,15 +2,15 @@
   <m-flex class="pb-space-input" direction="column" align-items="center">
     <m-flex class="pb-space-input__back-button-container" align-items="stretch">
       <m-link
-        :label="computedPayload.viewModel.backLabel"
-        :left-icon="BACK_ICON"
+        icon="ArrowBack48"
         :class="{
           'pb-space-input__back-button': true,
           'pb-space-input__back-button--hidden':
             !showBackButton && !decorate(answers, runtimeOptions, payload.viewModel.forceBackButton),
         }"
         @click.once="$emit('go-back')"
-      />
+        >{{ computedPayload.viewModel.backLabel }}</m-link
+      >
     </m-flex>
 
     <form
@@ -130,8 +130,6 @@ import * as yup from 'yup';
 import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
 import MFlex from '../../../mozaic/flex/MFlex.vue';
-import MButton from '../../../mozaic/buttons/MButton.vue';
-import MLink from '../../../mozaic/link/MLink.vue';
 import MTextInput from '../../../mozaic/text-input/MTextInput.vue';
 import MFlexyCol from '../../../mozaic/grid/MFlexyCol.vue';
 import MIcon from '../../../mozaic/icon/MIcon.vue';
@@ -142,9 +140,8 @@ import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate } from '@/services/decorate';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
 import { EmitEventName } from '../../services/emit';
+import { MButton, MLink } from '@mozaic-ds/vue-3';
 
-const BACK_ICON =
-  'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 const INFO_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Notification_Information_24px.svg';
 

package/src/components/rework/question/upload-document/MPbUploadDocument.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pb-upload-document__container" :style="`padding-bottom: calc(${stickyBottomOffset}px);`">
     <div class="pb-upload-document">
-      <m-flex align-items="center">
+      <div class="row-flex align-center">
         <m-link
           :label="payload.viewModel.backLabel || 'Question précédente'"
           :left-icon="BACK_ICON"
@@ -12,7 +12,7 @@
           }"
           @click="navigateTo(payload.viewModel)"
         />
-      </m-flex>
+      </div>
       <div v-if="payload.viewModel.hero" class="pb-upload-document__hero">
         {{ payload.viewModel.hero }}
       </div>
@@ -62,11 +62,9 @@
               </div>
             </m-flexy-col>
           </transition-group>
-          <m-flex
+          <div
             v-if="showMoreButtonDisplayed"
-            justify-content="center"
-            align-items="center"
-            class="pb-upload-document__show-more-container"
+            class="pb-upload-document__show-more-container row-flex align-center justify-center"
           >
             <m-button
               theme="text-primary"
@@ -75,17 +73,15 @@
               :label="payload.viewModel.showMore.label"
               @click="handleShowMoreClick()"
             />
-          </m-flex>
+          </div>
         </m-flexy>
       </m-container>
     </div>
 
     <div class="pb-upload-document__redirect-link" v-if="payload.viewModel.redirectLink">
-      <m-link
-        :label="payload.viewModel.redirectLink.label"
-        @click="validMultiSelect(payload.viewModel.redirectLink)"
-        theme="primary"
-      ></m-link>
+      <m-link @click="validMultiSelect(payload.viewModel.redirectLink)" theme="primary">{{
+        payload.viewModel.redirectLink.label
+      }}</m-link>
     </div>
 
     <div class="pb-upload-document__buttons row-flex" v-if="payload.multiSelect">
@@ -115,12 +111,10 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, PropType } from 'vue';
-import { MButton } from '@mozaic-ds/vue-3';
+import { MButton, MLink } from '@mozaic-ds/vue-3';
 import MContainer from '../../../mozaic/grid/MContainer.vue';
-import MFlex from '../../../mozaic/flex/MFlex.vue';
 import MFlexy from '../../../mozaic/grid/MFlexy.vue';
 import MFlexyCol from '../../../mozaic/grid/MFlexyCol.vue';
-import MLink from '../../../mozaic/link/MLink.vue';
 import PbCard from '../../../cards/PbCard.vue';
 import MPbMediaUpload from '../../media/upload/MPbMediaUpload.vue';
 import { useStore } from 'vuex';
@@ -131,8 +125,6 @@ import {
 } from '@/components/question/upload-document/UploadDocument';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import { decorate, doEval } from '@/services/decorate';
-import { PayloadAction } from '../../types/genericPayload';
-import { ButtonType, EventName, sendAnalyticEvent } from '../../services/event';
 import { EmitEventName } from '../../services/emit';
 
 const BACK_ICON =
@@ -226,14 +218,6 @@ const navigateTo = (viewModel: UploadDocumentViewModel) => {
      */
     $emit('go-back');
   }
-
-  if (props.payload.viewModel.analytics.funnel_name) {
-    sendAnalyticEvent(store, EventName.CLICK, {
-      button_name: props.payload.viewModel.label || '',
-      button_location: props.payload.viewModel.analytics.funnel_name,
-      button_type: ButtonType.ACTION,
-    });
-  }
 };
 
 const handleDisplayDialogEvent = (event: Event) => {
@@ -246,14 +230,6 @@ const validMultiSelect = (multiSelectOptions: UploadDocumentMultiSelectAction) =
   if (multiSelectOptions.nextStep.code == '__BACK__') {
     $emit('go-back');
   } else {
-    if (props.payload.viewModel.analytics.funnel_name) {
-      sendAnalyticEvent(store, EventName.CLICK, {
-        button_name: props.payload.viewModel.label || '',
-        button_location: props.payload.viewModel.analytics.funnel_name,
-        button_type: ButtonType.ACTION,
-      });
-    }
-
     $emit(props.completedEventName, {
       answers: selectedDocuments.value.length ? selectedDocuments.value : null,
       nextStep: multiSelectOptions.nextStep,
@@ -262,14 +238,6 @@ const validMultiSelect = (multiSelectOptions: UploadDocumentMultiSelectAction) =
 };
 
 const skipQuestion = (button: UploadDocumentMultiSelectAction) => {
-  if (props.payload.viewModel.analytics.funnel_name) {
-    sendAnalyticEvent(store, EventName.CLICK, {
-      button_name: props.payload.viewModel.label || '',
-      button_location: props.payload.viewModel.analytics.funnel_name,
-      button_type: ButtonType.ACTION,
-    });
-  }
-
   $emit(props.completedEventName, {
     answers: selectedDocuments.value.length ? selectedDocuments.value : null,
     nextStep: button.next,

package/src/components/rework/restitution/MPbRestitutionList.vue

@@ -10,10 +10,10 @@
       <m-link
         v-if="showBackButton && payload.backLabel"
         :left-icon="BACK_ICON"
-        :label="payload.backLabel.label || 'Recommencer l\'estimation'"
         class="pb-restitution-list__back-button"
         @click.once="callAction(payload.backLabel.action)"
-      />
+        >{{ payload.backLabel.label || "Recommencer l'estimation" }}</m-link
+      >
     </m-flex>
     <div class="pb-restitution-list__title">{{ payload?.viewModel?.title }}</div>
 
@@ -66,17 +66,16 @@
   </m-flex>
 
   <div>
-    <m-dialog
+    <m-modal
       class="pb-restitution-list__modal"
-      :show-dialog="showDialog"
       width="771px"
       maxHeight="100vh"
-      @update:show-dialog="handleShowDialog"
+      :open="showDialog"
+      @update:open="handleShowDialog"
+      :modalTitle="summary.subprojectTemplateLabel"
     >
-      <template #body>
+      <template #default>
         <div class="pb-restitution-list__modal__details" direction="column">
-          <div class="pb-restitution-list__modal__details__title" v-html="summary.subprojectTemplateLabel"></div>
-
           <div class="pb-restitution-list__modal__details__totals" justify-content="space-between" align-items="center">
             <div><strong>Montant total</strong>&nbsp; (aides déduites)</div>
             <div class="space-mx">entre</div>
@@ -105,25 +104,22 @@
           <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowDialog"></m-button>
         </m-flex>
       </template>
-    </m-dialog>
+    </m-modal>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { mapGetters } from 'vuex';
-import MButton from '../../mozaic/buttons/MButton.vue';
-import MDialog from '../../mozaic/dialog/MDialog.vue';
 import MFlex from '../../mozaic/flex/MFlex.vue';
-import MLink from '../../mozaic/link/MLink.vue';
 import PbProjectItemSave from '../../projects/project-item-save/PbProjectItemSave.vue';
-import MNotification from '../../mozaic/notifications/MNotification.vue';
 import { NotificationOptions } from '@/types/pb/Notification';
 import { RestitutionListPayload, RestitutionPayloadCallToAction } from '@/types/pb/Restitution';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 import PbRestitutionListBlock from './MPbRestitutionListBlock.vue';
 import { Project } from '../../../types/pb/Project';
 import { areConditionsValid } from '../../../services/scenarioConditionals';
+import { MModal, MButton, MLink, MNotification } from '@mozaic-ds/vue-3';
 const BACK_ICON =
   'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
 import { sanitizeCerberusAttribut } from '@/services/sanitize';
@@ -131,7 +127,7 @@ import { sanitizeCerberusAttribut } from '@/services/sanitize';
 export default defineComponent({
   components: {
     MButton,
-    MDialog,
+    MModal,
     MFlex,
     MLink,
     PbRestitutionListBlock,